playbook_ui_docs 15.7.0.pre.alpha.play270013253 → 15.7.0.pre.rc.0

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import Title from '../../pb_title/_title'
+
+const dataWithABlock = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 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)
+
+  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>
+  )
+}
+
+export default CircleChartBlock

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb

@@ -0,0 +1,20 @@
+<% data_set = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After Call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_set,
+    id: "default-test-colors",
+    colors: ['data-6', 'data-4', 'data-2']
+}) %>

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

@@ -0,0 +1,44 @@
+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'
+
+const dataWithColors = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 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>
+  )
+}
+
+export default CircleChartColors

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

@@ -0,0 +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`.

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

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements. 
+Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb

@@ -0,0 +1,20 @@
+<% data = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After Call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data,
+    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>",
+    id: "default-test"
+}) %>

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 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>
+  )
+}
+
+export default CircleChartCustomTooltip

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

@@ -0,0 +1,5 @@
+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.
+`{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.html.erb

@@ -0,0 +1,19 @@
+<% data = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After Call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data,
+    id: "default-test"
+}) %>

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

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

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb

@@ -0,0 +1,136 @@
+<% data_1 = [{
+      name: 'Bugs',
+      value: 8,
+
+    },
+    {
+      name: 'Chores',
+      value: 1,
+
+    },
+    {
+      name: 'Stories',
+      value: 12,
+
+    }
+  ] %>
+
+  <% data_2 = [{
+      name: 'Queued',
+      value: 7,
+
+    },
+    {
+      name: 'In Progress',
+      value: 6,
+
+    },
+    {
+      name: 'Validation',
+      value: 3,
+    },
+    {
+      name: 'Done',
+      value: 6,
+    },
+    
+  ] %>
+
+<% data_3 = [{
+      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,
+    },
+    
+  ] %>
+  <% data_4 = [{
+      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,
+    },
+  ] %>
+
+
+    <%= pb_rails("circle_chart", props: {
+        chart_data: data_1,
+        id: "size-test-1",
+        min_point_size: 2,
+        max_point_size: 200,
+        inner_size: "sm",
+        z_min: 0,
+        start_angle: 0,
+        header_format: '',
+    }) %>
+
+    <%= pb_rails("circle_chart", props: {
+        chart_data: data_2,
+        id: "size-test-2",
+        min_point_size: 2,
+        max_point_size: 200,
+        inner_size: "md",
+        z_min: 0,
+        start_angle: 0,
+        header_format: '',
+    }) %>
+
+    <%= pb_rails("circle_chart", props: {
+        chart_data: data_3,
+        id: "size-test-3",
+        min_point_size: 2,
+        max_point_size: 200,
+        inner_size: "lg",
+        z_min: 0,
+        start_angle: 0,
+        header_format: '',
+    }) %>
+
+    <%= pb_rails("circle_chart", props: {
+        chart_data: data_4,
+        id: "size-test-4",
+        min_point_size: 2,
+        max_point_size: 200,
+        inner_size: "none",
+        z_min: 0,
+        start_angle: 0,
+        header_format: '',
+    }) %>

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

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

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb

@@ -0,0 +1,86 @@
+<% data = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After Call',
+    value: 10,
+  }
+] %>
+
+<% data_1 = [{
+    name: 'Bugs',
+    value: 8,
+  },
+  {
+    name: 'Chores',
+    value: 1,
+  },
+  {
+    name: 'Stories',
+    value: 12,
+  }
+] %>
+
+<% data_2 = [{
+    name: 'Queued',
+    value: 7,
+  },
+  {
+    name: 'In Progress',
+    value: 6,
+
+  },
+  {
+    name: 'Validation',
+    value: 3,
+  },
+  {
+    name: 'Done',
+    value: 6,
+  },
+] %>
+
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data,
+    legend: true,
+    id: "legend-position-circle",
+    title: 'Alignment of Legend',
+    align: 'right',
+    vertical_align: 'top',
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data_1,
+    legend: true,
+    id: "legend-position-circle-1",
+    title: 'Layout of Legend',
+    layout: 'vertical',
+    padding_top: "sm",
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data_2,
+    legend: true,
+    title: 'Offset of Legend',
+    id: "legend-position-circle-2",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>