playbook_ui 12.19.0.pre.alpha.PLAY699zindexresponsive650 → 12.19.0.pre.alpha.movemarkdown637

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

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.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_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,31 +0,0 @@
-import React from 'react'
-
-import CircleChart from '../_circle_chart'
-
-const data = [
-  {
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After call',
-    value: 10,
-  },
-]
-
-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

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

@@ -1,3 +0,0 @@
-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.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,30 +0,0 @@
-import React from 'react'
-
-import CircleChart from '../_circle_chart'
-
-const data = [
-  {
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After call',
-    value: 10,
-  },
-]
-
-const CircleChartDefault = (props) => (
-  <div>
-    <CircleChart
-        chartData={data}
-        id="circle-chart-default"
-        {...props}
-    />
-  </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,122 +0,0 @@
-import React from 'react'
-
-import CircleChart from '../_circle_chart'
-
-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 = (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

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",
-}) %>

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

@@ -1,114 +0,0 @@
-import React from 'react'
-
-import CircleChart from '../_circle_chart'
-
-import {Title} from '../..'
-
-const data = [
-  {
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After call',
-    value: 10,
-  },
-]
-
-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 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

@@ -1,17 +0,0 @@
-##### Prop
-
-`align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
-`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: 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
-
-
-- `y` offsets the legend relative to its vertical alignmnet. 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,57 +0,0 @@
-import React, { useState } from 'react'
-
-import CircleChart from '../_circle_chart'
-import Button from '../../pb_button/_button'
-
-const CircleChartLiveData = (props) => {
-  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"
-          {...props}
-      />
-      <CircleChart
-          chartData={data}
-          id="circle-chart-live-data"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default CircleChartLiveData