playbook_ui 14.22.0.pre.alpha.PLAY22958843 → 14.22.0.pre.alpha.customheaderat8564

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/circleChartTheme.ts

@@ -2,15 +2,7 @@ import colors from '../tokens/exports/_colors.module.scss'
 import typography from '../tokens/exports/_typography.module.scss'
 
 const circleChartTheme = {
-  title: {
-    text: "",
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
+  title: { text: "" },
   chart: {
     type: "pie",
   },
@@ -40,16 +32,6 @@ const circleChartTheme = {
     pie: {
       dataLabels: {
         enabled: false,
-        connectorShape: "straight",
-        connectorWidth: 3,
-        format: "<div>{point.name}</div>",
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_lt_light,
-          fontWeight: typography.regular,
-          textOutline: '2px $white',
-        },
       },
       innerSize: '50%',
       borderColor: "",
@@ -65,23 +47,6 @@ const circleChartTheme = {
       ],
     },
   },
-  legend: {
-    layout: 'horizontal',
-    align: 'center',
-    verticalAlign: 'bottom',
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_lt_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_lt_lighter,
-    },
-  },
   credits: { enabled: false }
 }
 

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

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

@@ -1,44 +1,31 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import colors from '../../tokens/exports/_colors.module.scss'
+
+import CircleChart from '../_circle_chart'
 
 const dataWithColors = [
   {
     name: 'Waiting for Calls',
-    y: 41,
+    value: 41,
   },
   {
     name: 'On Call',
-    y: 49,
+    value: 49,
   },
   {
     name: 'After Call',
-    y: 10,
+    value: 10,
   },
 ]
 
-const CircleChartColors = () => {
-  const chartOptions = {
-    series: [{ data: dataWithColors }],
-    plotOptions: {
-      pie: {
-        colors: ["#144075", colors.data_4, colors.data_2]
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const CircleChartColors = (props) => (
+  <div>
+    <CircleChart
+        chartData={dataWithColors}
+        colors={['data-6', 'data-4', 'data-2']}
+        id="colors-example"
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartColors
+export default CircleChartColors

data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md}

@@ -1,2 +1,2 @@
 Custom data colors allow for color customization to match the needs of business requirements. 
-Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`.
+Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

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

@@ -1,43 +1,31 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 
 const data = [
   {
     name: 'Waiting for Calls',
-    y: 41,
+    value: 41,
   },
   {
     name: 'On Call',
-    y: 49,
+    value: 49,
   },
   {
     name: 'After Call',
-    y: 10,
+    value: 10,
   },
 ]
 
-const CircleChartCustomTooltip = () => {
-  const chartOptions = {
-    series: [{ data: data }],
-    tooltip: {
-      headerFormat: null,
-      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
-      useHTML: true,
-    },
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const CircleChartCustomTooltip = (props) => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>'
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartCustomTooltip
+export default CircleChartCustomTooltip

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md

@@ -1,5 +1,3 @@
-Custom tooltip formatting is configured through the tooltip object in the chart options: 
-`headerFormat` **Type**: String | when set to null will disable the header.
-`pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
-`useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.
+A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
+
 `{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.

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

@@ -1,38 +1,30 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 
 const data = [
   {
     name: 'Waiting for Calls',
-    y: 41,
+    value: 41,
   },
   {
     name: 'On Call',
-    y: 49,
+    value: 49,
   },
   {
     name: 'After Call',
-    y: 10,
+    value: 10,
   },
 ]
 
-const chartOptions = {
-  series: [{ data: data }],
-}
-
-const CircleChartDefault = () => {
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
+const CircleChartDefault = (props) => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartDefault;
+export default CircleChartDefault

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

@@ -1,152 +1,122 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 
 const dataFirst = [
   {
     name: 'Bugs',
-    y: 8,
+    value: 8,
   },
   {
     name: 'Chores',
-    y: 1,
+    value: 1,
   },
   {
     name: 'Stories',
-    y: 12,
+    value: 12,
   },
 ]
 
 const dataSecond = [
   {
     name: 'Queued',
-    y: 7,
+    value: 7,
   },
   {
     name: 'In Progress',
-    y: 6,
+    value: 6,
   },
   {
     name: 'Validation',
-    y: 3,
+    value: 3,
   },
   {
     name: 'Done',
-    y: 6,
+    value: 6,
   },
 ]
 
 const dataThird = [
   {
     name: '1 Point Tickets',
-    y: 2,
+    value: 2,
   },
   {
     name: '3 Point Tickets',
-    y: 5,
+    value: 5,
   },
   {
     name: '5 Point Tickets',
-    y: 6,
+    value: 6,
   },
   {
     name: '8 Point Tickets',
-    y: 3,
+    value: 3,
   },
   {
     name: '13 Point Tickets',
-    y: 1,
+    value: 1,
   },
 ]
-
 const dataFourth = [
   {
     name: 'Facebook',
-    y: 2498,
+    value: 2498,
   },
   {
     name: 'YouTube',
-    y: 2000,
+    value: 2000,
   },
   {
     name: 'WhatsApp',
-    y: 2000,
+    value: 2000,
   },
   {
     name: 'Facebook Messenger',
-    y: 1300,
+    value: 1300,
   },
   {
     name: 'WeChat',
-    y: 1165,
+    value: 1165,
   },
   {
     name: 'Instagram',
-    y: 1000,
+    value: 1000,
   },
   {
     name: 'Tik Tok',
-    y: 800,
+    value: 800,
   },
 ]
 
-const CircleChartInnerSizes = () => {
-  const chartOptionsSmall = {
-    series: [{ 
-      data: dataFirst,
-      innerSize: '35%'
-    }],
-  }
-
-  const chartOptionsMedium = {
-    series: [{ 
-      data: dataSecond,
-      innerSize: '50%'
-    }],
-  }
-
-  const chartOptionsLarge = {
-    series: [{ 
-      data: dataThird,
-      innerSize: '85%'
-    }],
-  }
-
-  const chartOptionsNone = {
-    series: [{ 
-      data: dataFourth,
-      innerSize: '0%'
-    }],
-  }
-
-  const optionsSmall = Highcharts.merge({}, circleChartTheme, chartOptionsSmall)
-  const optionsMedium = Highcharts.merge({}, circleChartTheme, chartOptionsMedium)
-  const optionsLarge = Highcharts.merge({}, circleChartTheme, chartOptionsLarge)
-  const optionsNone = Highcharts.merge({}, circleChartTheme, chartOptionsNone)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsSmall}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsMedium}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsLarge}
-      />
-      <div className="poop">
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={optionsNone}
-        />
-      </div>
-    </div>
-  )
-}
+const CircleChartInnerSizes = (props) => (
+  <div>
+    <CircleChart
+        chartData={dataFirst}
+        id="with-innersize-sm"
+        innerSize="sm"
+        {...props}
+    />
+    <CircleChart
+        chartData={dataSecond}
+        id="with-innersize-md"
+        innerSize="md"
+        {...props}
+    />
+    <CircleChart
+        chartData={dataThird}
+        id="with-innersize-lg"
+        innerSize="lg"
+        {...props}
+    />
+    <CircleChart
+        chartData={dataFourth}
+        className="poop"
+        id="with-innersize-none "
+        innerSize="none"
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartInnerSizes
+export default CircleChartInnerSizes