playbook_ui 14.23.0.pre.alpha.highchartstest9121 → 14.23.0.pre.rc.0

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

@@ -1,62 +1,25 @@
 import React from 'react'
-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'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+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>
+)
 
-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;
+export default GaugeHeight

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

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

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

@@ -1,54 +1,22 @@
 import React from 'react'
-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'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [{
+  name: 'Rating', value: 4.5,
+}]
 
-const data = [{ name: "Rating", y: 4.5 }]
+const GaugeMinMax = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-min-max"
+        max={5}
+        min={0}
+        showLabels
+        title="Product Rating"
+        {...props}
+    />
+  </div>
+)
 
-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;
+export default GaugeMinMax

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

@@ -0,0 +1,30 @@
+import React from 'react'
+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 data = [{ name: "Name", y: 45 }]
+
+const baseOptions = {
+  series: [{ data: data }],
+};
+
+const GaugePbStyles = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugePbStyles;

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

@@ -0,0 +1 @@
+You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

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

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

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

@@ -1,38 +1,21 @@
 import React from 'react'
-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 Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Score', value: 780 },
+]
 
-const data = [{ name: "Score", y: 780 }]
+const GaugeTitle = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-title"
+        max={850}
+        min={300}
+        title="Credit Score"
+        {...props}
+    />
+  </div>
+)
 
-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;
+export default GaugeTitle

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

@@ -1,72 +1,31 @@
 import React from 'react'
-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'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+import Gauge from '../../pb_gauge/_gauge'
 
 const data1 = [
-  { name: 'Data Used', y: 32 },
+  { name: 'Data Used', value: 32 },
 ]
 const data2 = [
-  { name: 'Sales to Date', y: 65 },
+  { name: 'Sales to Date', value: 65 },
 ]
 
-const baseOptions1 = {
-  title: {
-    text: "Data Usage",
-  },
-  series: [{ data: data1 }],
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span class="fix">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
-      },
-    },
-  },
-};
-const baseOptions2 = {
-  title: {
-    text: "Sales Goal",
-  },
-  series: [{ data: data2 }],
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
-          `<span class="fix" y="38">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
-      },
-    },
-  },
-};
-
-const GaugeUnits = () => {
-  const options1 = Highcharts.merge({}, gaugeTheme, baseOptions1);
-  const options2 = Highcharts.merge({}, gaugeTheme, baseOptions2);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-units1"
-          options={options1}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-units2"
-          options={options2}
-      />
-    </div>
-  );
-};
+const GaugeUnits = (props) => (
+  <div>
+    <Gauge
+        chartData={data1}
+        id="gauge-units1"
+        suffix="GB"
+        title="Data Usage"
+        {...props}
+    />
+    <Gauge
+        chartData={data2}
+        id="gauge-units2"
+        prefix="$"
+        suffix="k"
+        title="Sales Goal"
+        {...props}
+    />
+  </div>
+)
 
-export default GaugeUnits;
+export default GaugeUnits

data/app/pb_kits/playbook/pb_gauge/docs/example.yml

@@ -15,6 +15,7 @@ examples:
 
   react:
   - gauge_default: Default
+  - gauge_pb_styles: Playbook Styles
   - gauge_disable_animation: Disable Animation
   - gauge_title: Title
   - gauge_units: Units

data/app/pb_kits/playbook/pb_gauge/docs/index.js

@@ -1,4 +1,5 @@
 export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugePbStyles } from './_gauge_pb_styles.jsx'
 export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
 export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
 export { default as GaugeHeight } from './_gauge_height.jsx'

data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts

@@ -2,13 +2,7 @@ import colors from '../tokens/exports/_colors.module.scss'
 import typography from '../tokens/exports/_typography.module.scss'
 
 const gaugeTheme = {
-  title: { 
-    text: "",
-    style: {
-      fontFamily: typography.font_family_base,
-      fontSize: typography.text_larger,
-    },
-  },
+  title: { text: "" },
   chart: {
     type: "solidgauge",
     events: {

data/app/pb_kits/playbook/pb_line_graph/docs/_description.md

@@ -1 +1,3 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import lineGraphTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

+Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import colors from '../../tokens/exports/_colors.module.scss'
+
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Installation',
@@ -21,36 +19,19 @@ const data = [{
   data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const LineGraphColors = () => {
-  const chartOptions = {
-    title: {
-      text: 'Line Graph with Custom Data Colors',
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data,
-    colors: [colors.data_4, colors.data_5, "#144075", colors.data_7, colors.data_8]
-  }
-
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const LineGraphColors = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="line-colors"
+        title="Line Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
-export default LineGraphColors
+export default LineGraphColors

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Installation',
@@ -20,33 +19,19 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const chartOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphDefault = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const LineGraphDefault = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-default"
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default LineGraphDefault