playbook_ui 6.5.2 → 6.8.0

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss

@@ -5,7 +5,7 @@
 
 }
 
-.pb_circle_chart_block {
+.pb-circle-chart-block {
     position:absolute;
     display: flex;
     justify-content: center;

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { CircleChart, Title } from '../../'
+
+const dataWithABlock = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartBlock = () => (
+
+  <div>
+    <CircleChart
+        chartData={dataWithABlock}
+        id="chart-with-a-block"
+        innerSize="lg"
+        marginTop="xl"
+        rounded
+    >
+      <Title
+          size={1}
+          tag="div"
+      >
+        {'83'}
+      </Title>
+    </CircleChart>
+  </div>
+)
+
+export default CircleChartBlock

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataWithColors = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartColors = () => (
+  <div>
+    <CircleChart
+        chartData={dataWithColors}
+        colors={['data-6', 'data-4', 'data-2']}
+        id="colors-example"
+    />
+  </div>
+)
+
+export default CircleChartColors

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

@@ -0,0 +1,28 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartDefault = () => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+    />
+  </div>
+)
+
+export default CircleChartDefault

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

@@ -0,0 +1,117 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataFirst = [
+  {
+    name: 'Bugs',
+    value: 8,
+  },
+  {
+    name: 'Chores',
+    value: 1,
+  },
+  {
+    name: 'Stories',
+    value: 12,
+  },
+]
+
+const dataSecond = [
+  {
+    name: 'Queued',
+    value: 7,
+  },
+  {
+    name: 'In Progress',
+    value: 6,
+  },
+  {
+    name: 'Validation',
+    value: 3,
+  },
+  {
+    name: 'Done',
+    value: 6,
+  },
+]
+
+const dataThird = [
+  {
+    name: '1 Point Tickets',
+    value: 2,
+  },
+  {
+    name: '3 Point Tickets',
+    value: 5,
+  },
+  {
+    name: '5 Point Tickets',
+    value: 6,
+  },
+  {
+    name: '8 Point Tickets',
+    value: 3,
+  },
+  {
+    name: '13 Point Tickets',
+    value: 1,
+  },
+]
+const dataFourth = [
+  {
+    name: 'Facebook',
+    value: 2498,
+  },
+  {
+    name: 'YouTube',
+    value: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    value: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    value: 1300,
+  },
+  {
+    name: 'WeChat',
+    value: 1165,
+  },
+  {
+    name: 'Instagram',
+    value: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    value: 800,
+  },
+]
+
+const CircleChartInnerSizes = () => (
+  <div>
+    <CircleChart
+        chartData={dataFirst}
+        id="with-innersize-sm"
+        innerSize="sm"
+    />
+    <CircleChart
+        chartData={dataSecond}
+        id="with-innersize-md"
+        innerSize="md"
+    />
+    <CircleChart
+        chartData={dataThird}
+        id="with-innersize-lg"
+        innerSize="lg"
+    />
+    <CircleChart
+        chartData={dataFourth}
+        className="poop"
+        id="with-innersize-none "
+        innerSize="none"
+    />
+  </div>
+)
+
+export default CircleChartInnerSizes

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

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { Button, CircleChart } from '../../'
+
+const CircleChartLiveData = () => {
+  const [data, setData] = useState([
+    {
+      name: 'Waiting for Calls',
+      value: 41,
+    },
+    {
+      name: 'On Call',
+      value: 49,
+    },
+    {
+      name: 'After call',
+      value: 10,
+    },
+  ])
+
+  const data2 = [
+    {
+      name: 'Waiting for Calls',
+      value: 48,
+    },
+    {
+      name: 'On Call',
+      value: 12,
+    },
+    {
+      name: 'After call',
+      value: 140,
+    },
+  ]
+
+  const updateValue = () => {
+    setData(data2)
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+      />
+      <CircleChart
+          chartData={data}
+          id="circle-chart-live-data"
+      />
+    </div>
+  )
+}
+
+export default CircleChartLiveData

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataRounded = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartRounded = () => (
+  <div>
+    <CircleChart
+        chartData={dataRounded}
+        id="default-test-rounded"
+        innerSize="lg"
+        rounded
+    />
+  </div>
+)
+
+export default CircleChartRounded

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataWithLabels = [
+  {
+    name: 'Facebook',
+    value: 2498,
+  },
+  {
+    name: 'YouTube',
+    value: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    value: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    value: 1300,
+  },
+  {
+    name: 'WeChat',
+    value: 1165,
+  },
+  {
+    name: 'Instagram',
+    value: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    value: 800,
+  },
+]
+
+const CircleChartWithLabels = () => (
+  <div>
+    <CircleChart
+        chartData={dataWithLabels}
+        dataLabels
+        id="with-labels-example"
+    />
+  </div>
+)
+
+export default CircleChartWithLabels

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataWithLegend = [{
+  name: 'Bugs',
+  value: 8,
+
+},
+{
+  name: 'Chores',
+  value: 1,
+
+},
+{
+  name: 'Stories',
+  value: 12,
+},
+]
+
+const CircleChartWithLegendKit = () => (
+  <div>
+    <CircleChart
+        chartData={dataWithLegend}
+        id="with-legend-example"
+        legend
+    />
+  </div>
+)
+
+export default CircleChartWithLegendKit

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataWithTitle = [
+  {
+    name: 'Facebook',
+    value: 2498,
+  },
+  {
+    name: 'YouTube',
+    value: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    value: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    value: 1300,
+  },
+  {
+    name: 'WeChat',
+    value: 1165,
+  },
+  {
+    name: 'Instagram',
+    value: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    value: 800,
+  },
+]
+
+const CircleChartWithLegendKit = () => (
+  <div>
+    <CircleChart
+        chartData={dataWithTitle}
+        id="with-title-example"
+        title="Active Users on Social Media"
+    />
+  </div>
+)
+
+export default CircleChartWithLegendKit

data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml

@@ -10,4 +10,15 @@ examples:
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
 
+  react:
+  - circle_chart_default: Default Style
+  - circle_chart_live_data: Live Data
+  - circle_chart_rounded: Rounded Corners
+  - circle_chart_block: Accepts Any Block
+  - circle_chart_colors: Color Overrides
+  - circle_chart_with_labels: Data Labels
+  - circle_chart_with_legend_kit: Legend
+  - circle_chart_with_title: Title
+  - circle_chart_inner_sizes: Inner Circle Size Options  
+