playbook_ui_docs 14.23.0.pre.rc.1 → 14.23.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 021e5e1df1ae0129b51726039133b99b9da3cd8fca36230538ddb569fc5363d5
-  data.tar.gz: 49f3ab1ab8a8eeb50b9b71505709d2be1ce851d3a49e66efda826f80f61172b8
+  metadata.gz: 190428db0e7442d7e696e0d449a2d347fa86dcdab8d6be86dbfab8693b50b856
+  data.tar.gz: dc907972424b05d67da04273e4fed3d03bdecdb6da34cc6cc6c6bea0c9d85a76
 SHA512:
-  metadata.gz: 6949c77ff0d0f386abf6ba458ad48638b59c259f48f168006dbb875a07becec8ffe35055e662f952e533584413844f5805f4d1c1ee72d2449f38e204e4226b40
-  data.tar.gz: 1c9d032a727dcea1706a906f0187aaa4d5496f56af7033924d135cfa98dd7ae644df55e6cb80ad74a022b61b121528a76523f64af20341fd3b48b85ff2502088
+  metadata.gz: 279d78a480b1460fa9f6ddc11ebf7cff297549f8a94aad0b911d9f3d0012f5486248b73bf515c5aed8d6b194d06c6fd818eff63cf7e589f1802bdcaf6694f1c9
+  data.tar.gz: 517667dd5a348b793e94a968be189f14a1999106f8cc74efdce213d0b42e468ab3a5d1196a7e0c97a4f47be8e7850558ec4d1ecf83ee909aa8d88deecff3c0d8

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

@@ -1,6 +1,10 @@
 import React from 'react'
+import colors from '../../tokens/exports/_colors.module.scss'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
 
-import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -19,19 +23,33 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const BarGraphColors = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
-        id="bar-colors"
-        title="Bar Graph with Custom Data Colors"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Custom Data Colors",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
+}
+
+const BarGraphColors = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
 export default BarGraphColors

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.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',
@@ -19,19 +21,35 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const BarGraphDefault = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-default"
-        subTitle="Source: thesolarfoundation.com"
-        title="Solar Employment Growth by Sector, 2010-2016"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: 'Solar Employment Growth by Sector, 2010-2016',
+  },
+  subtitle: {
+    text: 'Source: thesolarfoundation.com',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+}
+
+const BarGraphDefault = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
 export default BarGraphDefault

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