playbook_ui 14.22.0 → 14.23.0.pre.alpha.PLAY2121enableexpandedfield9199

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -2,14 +2,44 @@ import React from "react";
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import Body from '../../pb_body/_body'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 import Title from '../../pb_title/_title'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const data = [{ name: "Name", value: 10 }];
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
+
+const data = [{ name: "Name", y: 10 }];
+
+const baseOptions = {
+  series: [{ data: data }],
+  chart: {
+    height: "150",
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const options = Highcharts.merge({}, gaugeTheme, baseOptions);
 
 const GaugeComplex = (props) => (
   <Flex
@@ -100,13 +130,9 @@ const GaugeComplex = (props) => (
                   shrink
                   {...props}
               >
-                <Gauge
-                    chartData={data}
-                    disableAnimation
-                    height="150"
-                    id="gauge-complex"
-                    suffix="%"
-                    {...props}
+                <HighchartsReact
+                    highcharts={Highcharts}
+                    options={options}
                 />
                </FlexItem>
             </Flex>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md

@@ -0,0 +1 @@
+We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,18 +1,30 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
 
-const data = [
-  { name: 'Name', value: 45 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeDefault = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-default"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Name", y: 45 }]
 
-export default GaugeDefault
+const baseOptions = {
+  series: [{ data: data }],
+};
+
+const GaugeDefault = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeDefault;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,19 +1,36 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
 
-const data = [
-  { name: 'Participants', value: 84 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeDisableAnimation = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        disableAnimation
-        id="gauge-disable-animation"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Participants", y: 84 }]
 
-export default GaugeDisableAnimation
+const baseOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+  },
+};
+
+const GaugeDisableAnimation = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          disableAnimation
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeDisableAnimation;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,21 +1,49 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const data = [
-  { name: 'Capacity', value: 75 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeFullCircle = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        fullCircle
-        id="gauge-full-circle"
-        suffix="%"
-        title="Seating Capacity"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Capacity", y: 75 }]
 
-export default GaugeFullCircle
+const baseOptions = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const GaugeFullCircle = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          id="gauge-full-circle"
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeFullCircle;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -1,25 +1,62 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const GaugeHeight = (props) => (
-  <div>
-    <Gauge
-        chartData={[ { name: 'Pixels', value: 400 } ]}
-        height="400"
-        id="gauge-height-px"
-        suffix="px"
-        title="Fixed Height in Pixels"
-        {...props}
-    />
-    <Gauge
-        chartData={[ { name: 'Percentage', value: 45 } ]}
-        height="45%"
-        id="gauge-height-percent"
-        suffix="%"
-        title="Height as Percentage of Width"
-        {...props}
-    />
-  </div>
-)
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-export default GaugeHeight
+const GaugeHeight = () => {
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={Highcharts.merge({}, gaugeTheme, {
+            title: {
+              text: "Fixed Height in Pixels",
+            },
+            chart: {
+              height: "400",
+            },
+            series: [{ data: [{ name: "Pixels", y: 400 }] }],
+            plotOptions: {
+              solidgauge: {
+                dataLabels: {
+                  format:
+                    `<span class="fix">{y:,f}</span>` +
+                    `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">px</span>`,
+                },
+              },
+            },
+          })}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={Highcharts.merge({}, gaugeTheme, {
+            title: {
+              text: "Height as Percentage of Width",
+            },
+            chart: {
+              height: "45%",
+            },
+            series: [{ data: [{ name: "Percentage", y: 45 }] }],
+            plotOptions: {
+              solidgauge: {
+                dataLabels: {
+                  format:
+                    `<span class="fix">{y:,f}</span>` +
+                    `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+                },
+              },
+            },
+          })}
+      />
+    </div>
+  );
+};
+
+export default GaugeHeight;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,15 +1,31 @@
-import React, { useState } from 'react'
-
+import React, { useState, useRef } from 'react'
 import Button from '../../pb_button/_button'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)
   const [name, setName] = useState('Name')
+  const chartRef = useRef(null)
+
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
 
   const updateValue = () => {
-    setValue(Math.floor(Math.random() * 100))
+    const newValue = Math.floor(Math.random() * 100)
+    setValue(newValue)
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update(newValue)
+    }
   }
+
   const updateName = () => {
     let index = namesArray.indexOf(name)
     if (namesArray.indexOf(name) == 5) {
@@ -18,8 +34,23 @@ const GaugeLiveData = (props) => {
       index += 1
     }
     setName(namesArray[index])
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update({ name: namesArray[index] })
+    }
   }
-  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
+
+  const options = Highcharts.merge({}, gaugeTheme,
+    {
+      title: {
+        text: name,
+      },
+      series: [{
+        data: [{ name: name, y: value }]
+      }]
+    }
+  )
 
   return (
     <div>
@@ -33,10 +64,10 @@ const GaugeLiveData = (props) => {
           text="Update Name"
           {...props}
       />
-      <Gauge
-          chartData={[{ name: name, value: value }]}
-          id="gauge-live-data"
-          {...props}
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+          ref={chartRef}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -1,22 +1,54 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const data = [{
-  name: 'Rating', value: 4.5,
-}]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeMinMax = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-min-max"
-        max={5}
-        min={0}
-        showLabels
-        title="Product Rating"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Rating", y: 4.5 }]
 
-export default GaugeMinMax
+const baseOptions = {
+  title: {
+    text: "Product Rating",
+  },
+  yAxis: {
+    min: 0,
+    max: 5,
+    lineWidth: 0,
+    tickWidth: 0,
+    minorTickInterval: null,
+    tickAmount: 2,
+    tickPositions: [0, 5],
+    labels: {
+      y: 26,
+      enabled: true,
+      style: {
+        color: colors.neutral,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.bold,
+      }
+    },
+  },
+  series: [{ data: data }],
+};
+
+const GaugeMinMax = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          id="gauge-min-max"
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeMinMax;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -2,7 +2,14 @@ import React from 'react'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
 const GaugeSizing = (props) => (
   <div>
@@ -17,10 +24,11 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <Gauge
-            chartData={[ { name: 'Point 1', value: 100 } ]}
-            id="gauge-sizing4"
-            {...props}
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={Highcharts.merge({}, gaugeTheme, {
+              series: [{ data: [{ name: "Point 1", y: 100 }] }],
+            })}
         />
       </FlexItem>
       <FlexItem
@@ -29,10 +37,11 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <Gauge
-            chartData={[ { name: 'Point 2', value: 75 } ]}
-            id="gauge-sizing3"
-            {...props}
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={Highcharts.merge({}, gaugeTheme, {
+              series: [{ data: [{ name: "Point 2", y: 75 }] }],
+            })}
         />
       </FlexItem>
       <FlexItem
@@ -41,10 +50,11 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <Gauge
-            chartData={[ { name: 'Point 3', value: 50 } ]}
-            id="gauge-sizing2"
-            {...props}
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={Highcharts.merge({}, gaugeTheme, {
+              series: [{ data: [{ name: "Point 3", y: 50 }] }],
+            })}
         />
       </FlexItem>
       <FlexItem
@@ -53,11 +63,14 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <Gauge
-            chartData={[ { name: 'Point 4', value: 25 } ]}
-            height="100%"
-            id="gauge-sizing1"
-            {...props}
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={Highcharts.merge({}, gaugeTheme, {
+              chart: {
+                height: "100%",
+              },
+              series: [{ data: [{ name: "Point 4", y: 25 }] }],
+            })}
         />
       </FlexItem>
     </Flex>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -1,21 +1,38 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
 
-const data = [
-  { name: 'Score', value: 780 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeTitle = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-title"
-        max={850}
-        min={300}
-        title="Credit Score"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Score", y: 780 }]
 
-export default GaugeTitle
+const baseOptions = {
+  title: {
+    text: "Credit Score",
+  },
+  yAxis: {
+    min: 300,
+    max: 850,
+  },
+  series: [{ data: data }],
+};
+
+const GaugeTitle = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          id="gauge-title"
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeTitle;