playbook_ui 14.22.0 → 14.23.0.pre.alpha.PLAY2121enableexpandedfield9199

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

@@ -1,122 +1,152 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataFirst = [
   {
     name: 'Bugs',
-    value: 8,
+    y: 8,
   },
   {
     name: 'Chores',
-    value: 1,
+    y: 1,
   },
   {
     name: 'Stories',
-    value: 12,
+    y: 12,
   },
 ]
 
 const dataSecond = [
   {
     name: 'Queued',
-    value: 7,
+    y: 7,
   },
   {
     name: 'In Progress',
-    value: 6,
+    y: 6,
   },
   {
     name: 'Validation',
-    value: 3,
+    y: 3,
   },
   {
     name: 'Done',
-    value: 6,
+    y: 6,
   },
 ]
 
 const dataThird = [
   {
     name: '1 Point Tickets',
-    value: 2,
+    y: 2,
   },
   {
     name: '3 Point Tickets',
-    value: 5,
+    y: 5,
   },
   {
     name: '5 Point Tickets',
-    value: 6,
+    y: 6,
   },
   {
     name: '8 Point Tickets',
-    value: 3,
+    y: 3,
   },
   {
     name: '13 Point Tickets',
-    value: 1,
+    y: 1,
   },
 ]
+
 const dataFourth = [
   {
     name: 'Facebook',
-    value: 2498,
+    y: 2498,
   },
   {
     name: 'YouTube',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'WhatsApp',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'Facebook Messenger',
-    value: 1300,
+    y: 1300,
   },
   {
     name: 'WeChat',
-    value: 1165,
+    y: 1165,
   },
   {
     name: 'Instagram',
-    value: 1000,
+    y: 1000,
   },
   {
     name: 'Tik Tok',
-    value: 800,
+    y: 800,
   },
 ]
 
-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>
-)
+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>
+  )
+}
 
-export default CircleChartInnerSizes
+export default CircleChartInnerSizes

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

@@ -1,114 +1,142 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
-
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 import Title from '../../pb_title/_title'
 
-const data = [
+const dataFirst = [
   {
     name: 'Waiting for Calls',
-    value: 41,
+    y: 41,
   },
   {
     name: 'On Call',
-    value: 49,
+    y: 49,
   },
   {
     name: 'After Call',
-    value: 10,
+    y: 10,
   },
 ]
 
-const dataFirst = [{
+const dataSecond = [{
   name: 'Bugs',
-  value: 8,
-
+  y: 8,
 },
 {
   name: 'Chores',
-  value: 1,
-
+  y: 1,
 },
 {
   name: 'Stories',
-  value: 12,
-},
-]
+  y: 12,
+}]
 
-const dataSecond = [
+const dataThird = [
   {
     name: 'Queued',
-    value: 7,
+    y: 7,
   },
   {
     name: 'In Progress',
-    value: 6,
+    y: 6,
   },
   {
     name: 'Validation',
-    value: 3,
+    y: 3,
   },
   {
     name: 'Done',
-    value: 6,
+    y: 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)
 
-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>
-)
+  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>
+  )
+}
 
 export default CircleChartLegendPosition

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

@@ -1,17 +1,14 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `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 alignmnet. Negative x moves it to the left, positive x moves it to the right
-
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right
 
-- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

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

@@ -1,36 +1,37 @@
 import React, { useState } from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 import Button from '../../pb_button/_button'
 
 const CircleChartLiveData = (props) => {
   const [data, setData] = useState([
     {
       name: 'Waiting for Calls',
-      value: 41,
+      y: 41,
     },
     {
       name: 'On Call',
-      value: 49,
+      y: 49,
     },
     {
       name: 'After Call',
-      value: 10,
+      y: 10,
     },
   ])
 
   const data2 = [
     {
       name: 'Waiting for Calls',
-      value: 48,
+      y: 48,
     },
     {
       name: 'On Call',
-      value: 12,
+      y: 12,
     },
     {
       name: 'After Call',
-      value: 140,
+      y: 140,
     },
   ]
 
@@ -38,6 +39,12 @@ const CircleChartLiveData = (props) => {
     setData(data2)
   }
 
+  const chartOptions = {
+    series: [{ data: data }],
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
   return (
     <div>
       <Button
@@ -45,13 +52,12 @@ const CircleChartLiveData = (props) => {
           text="Update Value"
           {...props}
       />
-      <CircleChart
-          chartData={data}
-          id="circle-chart-live-data"
-          {...props}
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
       />
     </div>
   )
 }
 
-export default CircleChartLiveData
+export default CircleChartLiveData

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

@@ -1,32 +1,45 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataRounded = [
   {
     name: 'Waiting for Calls',
-    value: 41,
+    y: 41,
   },
   {
     name: 'On Call',
-    value: 49,
+    y: 49,
   },
   {
     name: 'After Call',
-    value: 10,
+    y: 10,
   },
 ]
 
-const CircleChartRounded = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataRounded}
-        id="default-test-rounded"
-        innerSize="lg"
-        rounded
-        {...props}
-    />
-  </div>
-)
+const CircleChartRounded = () => {
+  const chartOptions = {
+    series: [{ data: dataRounded }],
+    plotOptions: {
+      pie: {
+        borderColor: null,
+        borderWidth: 20,
+        innerSize: '100%',
+      },
+    },
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartRounded
+export default CircleChartRounded

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

@@ -1,47 +1,61 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithLabels = [
   {
     name: 'Facebook',
-    value: 2498,
+    y: 2498,
   },
   {
     name: 'YouTube',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'WhatsApp',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'Facebook Messenger',
-    value: 1300,
+    y: 1300,
   },
   {
     name: 'WeChat',
-    value: 1165,
+    y: 1165,
   },
   {
     name: 'Instagram',
-    value: 1000,
+    y: 1000,
   },
   {
     name: 'Tik Tok',
-    value: 800,
+    y: 800,
   },
 ]
 
-const CircleChartWithLabels = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithLabels}
-        dataLabels
-        id="with-labels-example"
-        {...props}
-    />
-  </div>
-)
+const CircleChartWithLabels = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLabels }],
+    plotOptions: {
+      pie: {
+        dataLabels: {
+          enabled: true,
+        }
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLabels
+export default CircleChartWithLabels