playbook_ui_docs 15.8.0.pre.rc.0 → 16.0.0.pre.alpha.fixiconsvgdataattrspropagation13513

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, 
-{
-  name: 'Manufacturing',
-  data: [1270, 800, 200, 454, 956],
-}, {
-  name: 'Sales & Distribution',
-  data: [975, 1600, 1500, 924, 500],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Stacked Columns",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  plotOptions: {
-    column: {
-        stacking: 'normal',
-        borderWidth: 0,
-    }
-  },
-  legend: { enabled: true },
-};
-
-
-const BarGraphStacked = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default BarGraphStacked

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md

@@ -1 +0,0 @@
-The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options. 

data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import BarGraphTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -1,28 +0,0 @@
-examples:
-
-  rails:
-  - bar_graph_default: Default
-  - bar_graph_legend: Legend
-  - bar_graph_legend_position: Legend Position
-  - bar_graph_height: Height
-  - bar_graph_spline: Spline
-  - bar_graph_colors: Color Overrides
-  - bar_graph_custom_rails: Custom Overrides
-  - bar_graph_stacked: Stacked
-  - bar_graph_negative_numbers: Negative Numbers
-  - bar_graph_secondary_y_axis: Secondary Y-Axis
-  - bar_graph_horizontal: Custom Options From Highcharts
-
-
-  react:
-  - bar_graph_default: Default
-  - bar_graph_legend: Legend
-  - bar_graph_legend_position: Legend Position
-  - bar_graph_legend_non_clickable: Legend Non Clickable
-  - bar_graph_height: Height
-  - bar_graph_spline: Spline
-  - bar_graph_colors: Color Overrides
-  - bar_graph_stacked: Stacked
-  - bar_graph_negative_numbers: Negative Numbers
-  - bar_graph_secondary_y_axis: Secondary Y-Axis
-  - bar_graph_horizontal: Horizontal Bar Graph

data/app/pb_kits/playbook/pb_bar_graph/docs/index.js

@@ -1,11 +0,0 @@
-export { default as BarGraphDefault } from './_bar_graph_default.jsx'
-export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
-export { default as BarGraphLegendPosition } from './_bar_graph_legend_position.jsx'
-export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
-export { default as BarGraphHeight } from './_bar_graph_height.jsx'
-export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
-export { default as BarGraphColors } from './_bar_graph_colors.jsx'
-export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
-export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
-export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
-export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'

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