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

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

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

@@ -1,142 +1,114 @@
 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 dataFirst = [
+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 dataSecond = [{
+const dataFirst = [{
   name: 'Bugs',
-  y: 8,
+  value: 8,
+
 },
 {
   name: 'Chores',
-  y: 1,
+  value: 1,
+
 },
 {
   name: 'Stories',
-  y: 12,
-}]
+  value: 12,
+},
+]
 
-const dataThird = [
+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 CircleChartLegendPosition = (props) => {
-  const chartOptionsFirst = {
-    title: { text: "Alignment of Legend" },
-    series: [{ data: dataFirst }],
-    legend: {
-      align: 'right',
-      verticalAlign: 'top'
-    },
-    plotOptions: {
-      pie: {
-        showInLegend: true
-      }
-    }
-  }
-
-  const chartOptionsSecond = {
-    title: { text: "Layout of Legend" },
-    series: [{ data: dataSecond }],
-    legend: {
-      layout: 'vertical'
-    },
-    plotOptions: {
-      pie: {
-        showInLegend: true
-      }
-    }
-  }
-
-  const chartOptionsThird = {
-    title: { text: "Offset of Legend" },
-    series: [{ data: dataThird }],
-    legend: {
-      layout: 'vertical',
-      x: 100,
-      y: 10
-    },
-    plotOptions: {
-      pie: {
-        showInLegend: true
-      }
-    }
-  }
-
-  const optionsFirst = Highcharts.merge({}, circleChartTheme, chartOptionsFirst)
-  const optionsSecond = Highcharts.merge({}, circleChartTheme, chartOptionsSecond)
-  const optionsThird = Highcharts.merge({}, circleChartTheme, chartOptionsThird)
 
-  return (
-    <div>
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="align | verticalAlign"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsFirst}
-      />
-      
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="layout"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsSecond}
-      />
-      
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="x | y"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsThird}
-      />
-    </div>
-  )
-}
+const CircleChartLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <CircleChart
+        align='right'
+        chartData={data}
+        id="legend-position-circle"
+        legend
+        paddingBottom="sm"
+        title="Alignment of Legend"
+        verticalAlign="top"
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <CircleChart
+        chartData={dataFirst}
+        id="legend-position-circle-1"
+        layout="vertical"
+        legend
+        paddingBottom="sm"
+        paddingTop="sm"
+        title="Layout of Legend"
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <CircleChart
+        chartData={dataSecond}
+        id="legend-position-circle-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        y={10}
+        {...props}
+    />
+  </div>
+)
 
 export default CircleChartLegendPosition

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

@@ -6,9 +6,12 @@
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)
 
-`layout` determines the position of the legend items
+- 
+
+- `layout` determines the position of the legend items
 `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
 
-`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right
+- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
+
 
-`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.