playbook_ui 14.23.0.pre.rc.0 → 14.23.0.pre.rc.2

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx

@@ -1,39 +1,69 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const BarGraphDefault = (props) => (
+const pixelHeightChartOptions = {
+  chart: {
+    height: "300"
+  },
+  series: chartData,
+  title: {
+    text: "Fixed Height (300px)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+};
+
+const percentageHeightChartOptions = {
+  chart: {
+    height: "50%"
+  },
+  series: chartData,
+  title: {
+    text: "Percentage Height (50%)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+};
+
+const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
+
+const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
+
+const BarGraphHeight = () => (
   <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        height="300"
-        id="bar-fixed-height"
-        title="Fixed Height (300px)"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-        {...props}
-    />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={pixelOptions}
+      />
 
     <br />
     <br />
 
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        height="50%"
-        id="bar-percentage-height"
-        title="Percentage Height (50%)"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact
+        highcharts={Highcharts}
+        options={percentageOptions}
     />
   </div>
 )
 
-export default BarGraphDefault
+export default BarGraphHeight

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_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_bar_graph/docs/_bar_graph_horizontal.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from '../_bar_graph'
 
-
-const barGraphOptions = {
+const chartOptions = {
     chart: {
         type: 'bar'
     },
@@ -22,13 +23,8 @@ const barGraphOptions = {
         lineWidth: 0
     },
     yAxis: {
-        min: 0,
         title: {
-            text: 'Population (millions)',
-            align: 'high'
-        },
-        labels: {
-            overflow: 'justify'
+            text: '',
         },
     },
     tooltip: {
@@ -51,16 +47,16 @@ const barGraphOptions = {
     }, {
         name: 'Year 2018',
         data: [1276, 1007, 4561, 746]
-    }]
+    }],
 }
 
-const BarGraphHorizontal = (props) => (
+const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+const BarGraphHorizontal = () => (
   <div>
-    <BarGraph
-        customOptions={barGraphOptions}
-        id="bar-horizontal"
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact
+        highcharts={Highcharts}
+        options={options}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx

@@ -1,24 +1,40 @@
 import React from 'react'
-import BarGraph from "../../pb_bar_graph/_bar_graph"
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const BarGraphLegend = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-test-2"
-        legend
-        title="Bar Graph with Legend"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: 'Bar Graph with Legend',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: { enabled: true },
+}
 
+const BarGraphLegend = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+  
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 export default BarGraphLegend

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx

@@ -1,25 +1,48 @@
 import React from 'react'
-import BarGraph from "../../pb_bar_graph/_bar_graph"
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const BarGraphLegendNonClickable = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-test-3"
-        legend
-        title="Bar Graph with Legend Non Clickable"
-        toggleLegendClick={false}
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+const chartOptions = {
+    title: {
+      text: 'Bar Graph with Legend Non Clickable',
+    },
+    xAxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+    },
+    yAxis: {
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    legend: {
+      enabled: true,
+      events: {
+        itemClick: function () {
+          return false;
+        }
+      }
+    },
+  series: chartData
+}
+
+const BarGraphLegendNonClickable = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
 export default BarGraphLegendNonClickable

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -1,8 +1,11 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from "../../pb_bar_graph/_bar_graph"
 import Title from "../../pb_title/_title"
 
+
 const chartData = [{
   name: 'Installation',
   data: [1475],
@@ -20,7 +23,76 @@ const chartData = [{
   data: [1111],
 }]
 
-const BarGraphLegendPosition = (props) => (
+const alignChartOptions = {
+  series: chartData,
+  title: {
+    text: 'Alignment of Legend',
+  },
+  subtitle: {
+    text: 'Source: thesolarfoundation.com',
+  },
+  xAxis: {
+    categories: ['Jan'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: { 
+    enabled: true,
+    verticalAlign: 'top',
+    align: 'right',
+   },
+}
+
+const layoutChartOptions = {
+  series: chartData,
+  title: {
+    text: 'Layout of Legend',
+  },
+  xAxis: {
+    categories: ['Jan'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: { 
+    enabled: true,
+    layout: 'vertical',
+   },
+}
+
+const offsetChartOptions = {
+  series: chartData,
+  title: {
+    text: 'Offset of Legend',
+  },
+  xAxis: {
+    categories: ['Jan'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: {
+    enabled: true,
+    layout: 'vertical',
+    x: 100,
+    y: 10,
+  },
+}
+
+const BarGraphLegendPosition = () => {
+  const alignOptions = Highcharts.merge({}, barGraphTheme, alignChartOptions)
+  const layoutOptions = Highcharts.merge({}, barGraphTheme, layoutChartOptions)
+  const offsetOptions = Highcharts.merge({}, barGraphTheme, offsetChartOptions)
+
+
+  return (
   <div>
     <Title
         paddingBottom="sm"
@@ -29,19 +101,11 @@ const BarGraphLegendPosition = (props) => (
         tag="h4"
         text="align | verticalAlign"
     />
-    <BarGraph
-        align='right'
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="legend-position-bar"
-        legend
-        paddingBottom="sm"
-        title="Alignment of Legend"
-        verticalAlign="top"
-        xAxisCategories={['Jan']}
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact 
+        highcharts={Highcharts}
+        options={alignOptions}
     />
+
     <Title
         paddingBottom="sm"
         paddingTop="sm"
@@ -49,19 +113,11 @@ const BarGraphLegendPosition = (props) => (
         tag="h4"
         text="layout"
     />
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="legend-position-bar-1"
-        layout="vertical"
-        legend
-        paddingBottom="sm"
-        paddingTop="sm"
-        title="Layout of Legend"
-        xAxisCategories={['Jan']}
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact 
+        highcharts={Highcharts}
+        options={layoutOptions}
     />
+
     <Title
         paddingBottom="sm"
         paddingTop="sm"
@@ -69,20 +125,12 @@ const BarGraphLegendPosition = (props) => (
         tag="h4"
         text="x | y"
     />
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="legend-position-bar-2"
-        layout="vertical"
-        legend
-        title="Offset of Legend"
-        x={100}
-        xAxisCategories={['Jan']}
-        y={10}
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact 
+        highcharts={Highcharts}
+        options={offsetOptions}
     />
   </div>
 )
+}
 
 export default BarGraphLegendPosition

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -10,26 +12,41 @@ const chartData = [{
   name: 'Manufacturing',
   data: [1475, 200, 1000, 654, -656],
   threshold: 0
-}, 
+},
 {
   name: 'Sales & Distribution',
   data: [1270, 100, -1200, 554, 756],
   threshold: 0
 }]
 
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Negative Numbers",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: { enabled: true },
+};
 
-const BarGraphStacked = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-default"
-        legend
-        title="Bar Graph with Negative Numbers"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        {...props}
-    />
-  </div>
-)
+
+const BarGraphStacked = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return(
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
 export default BarGraphStacked

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx

@@ -1,6 +1,11 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
-import BarGraph from '../_bar_graph'
+
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const chartData = [{
   name: 'Number of Installations',
@@ -13,24 +18,69 @@ const chartData = [{
   yAxis: 1
 }]
 
-const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
-
-const axisFormats = [{format: ""}, {format: "{value}%"}]
-
-const BarGraphSecondaryYAxis= (props) => (
-  <div>
-    <BarGraph
-        axisFormat={axisFormats}
-        axisTitle={axisTitles}
-        chartData={chartData}
-        id="bar-spline"
-        legend
-        title="Bar Graph with Secondary Y-axis"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
-
-export default BarGraphSecondaryYAxis
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Secondary Y-axis",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: [{
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      text: "Number of Employees",
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  }, {
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      text: "Percentage",
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+
+    opposite: true,
+    min: 0,
+    max: 100
+  }],
+  legend: { enabled: true },
+}
+
+const BarGraphSecondaryYAxis = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default BarGraphSecondaryYAxis

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md

@@ -1,3 +1,3 @@
-Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array. 
+Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing `yAxis: 1` to the second node of your `chartData` array. 
 
 To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',
@@ -12,19 +14,33 @@ const chartData = [{
   color: '#F9BB00',
 }]
 
-const BarGraphSpline = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-spline"
-        legend
-        title="Bar Graph with Spline"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Spline",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: { enabled: true },
+};
+
+const BarGraphSpline = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
 export default BarGraphSpline