playbook_ui_docs 15.7.0.pre.alpha.play258013248 → 15.7.0.pre.alpha.play270013252

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

@@ -1,26 +0,0 @@
-<% data_51 = [{
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After Call',
-    value: 10,
-  }
-] %>
-
-<br><br>
-
-<%= pb_rails("circle_chart", props: {
-    chart_data: data_51,
-    id: "with-a-block-2",
-    rounded: true,
-}) do %>
-    <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
-<% end %>
-
-
-

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

@@ -1,88 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<% 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

@@ -1,44 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<% 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

@@ -1,43 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<% 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

@@ -1,38 +0,0 @@
-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

@@ -1,136 +0,0 @@
-<% 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

@@ -1,152 +0,0 @@
-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

@@ -1,86 +0,0 @@
-<% 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",
-}) %>