playbook_ui_docs 14.23.0 → 14.24.0.pre.rc.0

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;

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

@@ -1,31 +1,72 @@
 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'
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
 const data1 = [
-  { name: 'Data Used', value: 32 },
+  { name: 'Data Used', y: 32 },
 ]
 const data2 = [
-  { name: 'Sales to Date', value: 65 },
+  { name: 'Sales to Date', y: 65 },
 ]
 
-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>
-)
+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>
+  );
+};
 
-export default GaugeUnits
+export default GaugeUnits;

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

@@ -0,0 +1 @@
+Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

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

@@ -15,7 +15,6 @@ 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,5 +1,4 @@
 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_line_graph/docs/_description.md

@@ -1,3 +1 @@
-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>.
+**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.


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

@@ -1,6 +1,8 @@
 import React from 'react'
-
-import LineGraph from '../_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import colors from '../../tokens/exports/_colors.module.scss'
 
 const data = [{
   name: 'Installation',
@@ -19,19 +21,36 @@ const data = [{
   data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
 }]
 
-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>
-)
+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>
+  )
+}
 
-export default LineGraphColors
+export default LineGraphColors

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

@@ -0,0 +1,3 @@
+
+Custom data colors allow for color customization to match the needs of business requirements. 
+Import the colors from Playbook's tokens, then set custom colors in the colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

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

@@ -1,6 +1,7 @@
 import React from 'react'
-
-import LineGraph from '../_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const data = [{
   name: 'Installation',
@@ -19,19 +20,33 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-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>
-)
+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>
+  )
+}
 
 export default LineGraphDefault

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

@@ -1,38 +1,70 @@
 import React from 'react'
-import LineGraph from '../_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const data = [{
   name: 'Number of Installations',
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-const LineGraphDefault = (props) => (
-  <div>
-    <LineGraph
-        axisTitle="Number of Employees"
-        chartData={data}
-        height="300px"
-        id="line-fixed-height"
-        title="Fixed Height (300px)"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-        {...props}
-    />
-
-    <br />
-    <br />
-
-    <LineGraph
-        axisTitle="Number of Employees"
-        chartData={data}
-        height="50%"
-        id="line-percentage-height"
-        title="Percentage Height (50%)"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
-
-export default LineGraphDefault
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const LineGraphHeight = () => {
+  const chartOptionsFirst = {
+    title: {
+      text: 'Fixed Height (300px)',
+    },
+    chart: {
+      height: '300px'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  }
+
+  const chartOptionsSecond = {
+    title: {
+      text: 'Percentage Height (50%)',
+    },
+    chart: {
+      height: '50%'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  }
+
+  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
+  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={optionsFirst}
+      />
+
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={optionsSecond}
+      />
+    </div>
+  )
+}
+
+export default LineGraphHeight

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

@@ -0,0 +1,3 @@
+By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
+
+Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

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

@@ -1,24 +1,43 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const data = [{
   name: 'Number of Installations',
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-const LineGraphLegend = (props) => (
-  <div>
-    <LineGraph
-        axisTitle="Number of Employees"
-        chartData={data}
-        id="line-test-2"
-        legend
-        title="Line Graph with Legend"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
 
-export default LineGraphLegend
+const chartOptions = {
+  series: data,
+  title: { text: "Line Graph with Legend" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: {
+    enabled: true,
+  },
+}
+
+const LineGraphLegend = () => {
+  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
+
+  return(
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default LineGraphLegend