playbook_ui_docs 14.22.0.pre.alpha.PLAY22958843 → 14.22.0.pre.alpha.customheaderat8564

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

@@ -1,11 +1,8 @@
 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],
@@ -23,76 +20,7 @@ const chartData = [{
   data: [1111],
 }]
 
-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 (
+const BarGraphLegendPosition = (props) => (
   <div>
     <Title
         paddingBottom="sm"
@@ -101,11 +29,19 @@ const BarGraphLegendPosition = () => {
         tag="h4"
         text="align | verticalAlign"
     />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={alignOptions}
+    <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}
     />
-
     <Title
         paddingBottom="sm"
         paddingTop="sm"
@@ -113,11 +49,19 @@ const BarGraphLegendPosition = () => {
         tag="h4"
         text="layout"
     />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={layoutOptions}
+    <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}
     />
-
     <Title
         paddingBottom="sm"
         paddingTop="sm"
@@ -125,12 +69,20 @@ const BarGraphLegendPosition = () => {
         tag="h4"
         text="x | y"
     />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={offsetOptions}
+    <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}
     />
   </div>
 )
-}
 
 export default BarGraphLegendPosition

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

@@ -1,8 +1,6 @@
 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',
@@ -12,41 +10,26 @@ 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 = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+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>
+)
 
 export default BarGraphStacked

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
+import "../BarGraphStyles.scss";
+// Your path might look more like this
+//import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
+
+const columnChartData = [
+  {
+    name: "Installation",
+    data: [1475, 200, 3000, 654, 656],
+  },
+  {
+    name: "Manufacturing",
+    data: [4434, 524, 2320, 440, 500],
+  },
+  {
+    name: "Sales & Distribution",
+    data: [3387, 743, 1344, 434, 440],
+  },
+  {
+    name: "Project Development",
+    data: [3227, 878, 999, 780, 1000],
+  },
+  {
+    name: "Other",
+    data: [1111, 677, 3245, 500, 200],
+  },
+];
+
+const columnOptions = {
+  chart: {
+    type: "column",
+  },
+  series: columnChartData,
+  title: {
+    text: "Solar Employment Growth by Sector, 2010-2016",
+  },
+  subtitle: {
+    text: "Source: thesolarfoundation.com",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: { enabled: false },
+  credits: { enabled: false },
+};
+
+const BarGraphPbStyles = () => (
+  <div>
+    <HighchartsReact highcharts={Highcharts}
+        options={columnOptions}
+    />
+  </div>
+)
+
+export default BarGraphPbStyles

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

@@ -0,0 +1 @@
+You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.  

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

@@ -1,11 +1,6 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
 
-
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',
@@ -18,69 +13,24 @@ const chartData = [{
   yAxis: 1
 }]
 
-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
+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

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,8 +1,6 @@
 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',
@@ -14,33 +12,19 @@ const chartData = [{
   color: '#F9BB00',
 }]
 
-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>
-  )
-}
+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>
+)
 
 export default BarGraphSpline

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

@@ -1,8 +1,6 @@
 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',
@@ -16,40 +14,21 @@ const chartData = [{
   data: [975, 1600, 1500, 924, 500],
 }]
 
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Stacked Columns",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  plotOptions: {
-    column: {
-        stacking: 'normal',
-        borderWidth: 0,
-    }
-  },
-  legend: { enabled: true },
-};
 
-
-const BarGraphStacked = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number Of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        stacking="normal"
+        title="Bar Graph with Stacked Columns"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default BarGraphStacked

data/app/pb_kits/playbook/pb_bar_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 BarGraphTheme.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.

+Bar graphs are used to compare data. Bar graphs are not typically used to show percentages. The default height of bar 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_bar_graph/docs/example.yml

@@ -17,13 +17,15 @@ examples:
 
   react:
   - bar_graph_default: Default
+  - bar_graph_pb_styles: Playbook Styles
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
+  - bar_graph_custom: Custom Overrides
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis
-  - bar_graph_horizontal: Horizontal Bar Graph
+  - bar_graph_horizontal: Custom Options From Highcharts

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

@@ -5,7 +5,9 @@ export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_c
 export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
+export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
 export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
 export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
 export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
+export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -1,88 +1,43 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 import Title from '../../pb_title/_title'
 
 const dataWithABlock = [
   {
     name: 'Waiting for Calls',
-    y: 41,
+    value: 41,
   },
   {
     name: 'On Call',
-    y: 49,
+    value: 49,
   },
   {
     name: 'After Call',
-    y: 10,
+    value: 10,
   },
 ]
 
-const CircleChartBlock = (props) => {
-  const chartOptions = {
-    series: [{
-      data: dataWithABlock,
-      innerSize: '100%',
-      borderWidth: 20,
-      borderColor: null,
-    }],
-    chart: {
-      events: {
-        render: function() {
-          const chart = this;
-          const blockElement = document.querySelector('.pb-circle-chart-block');
-          if (blockElement) {
-            blockElement.style.width = chart.chartWidth + 'px';
-            blockElement.style.height = chart.chartHeight + 'px';
-          }
-        },
-        redraw: function() {
-          const chart = this;
-          const blockElement = document.querySelector('.pb-circle-chart-block');
-          if (blockElement) {
-            blockElement.style.width = chart.chartWidth + 'px';
-            blockElement.style.height = chart.chartHeight + 'px';
-          }
-        }
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+const CircleChartBlock = (props) => (
 
-  return (
-    <div>
-      <div style={{ position: 'relative' }}>
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={options}
-        />
-        <div 
-            className="pb-circle-chart-block"
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              zIndex: 1,
-              textAlign: 'center',
-              pointerEvents: 'none'
-          }}
-        >
-          <Title
-              size={1}
-              tag="div"
-              {...props}
-          >
-            {'83'}
-          </Title>
-        </div>
-      </div>
-    </div>
-  )
-}
+  <div>
+    <CircleChart
+        chartData={dataWithABlock}
+        id="chart-with-a-block"
+        innerSize="lg"
+        marginTop="xl"
+        rounded
+        {...props}
+    >
+      <Title
+          size={1}
+          tag="div"
+          {...props}
+      >
+        {'83'}
+      </Title>
+    </CircleChart>
+  </div>
+)
 
-export default CircleChartBlock
+export default CircleChartBlock