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

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

@@ -1,52 +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: [-475, 400, -1000, 354, -856],
-  threshold: 0
-}, {
-  name: 'Manufacturing',
-  data: [1475, 200, 1000, 654, -656],
-  threshold: 0
-},
-{
-  name: 'Sales & Distribution',
-  data: [1270, 100, -1200, 554, 756],
-  threshold: 0
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Negative Numbers",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  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_secondary_y_axis.html.erb

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}, {
-    type: 'spline',
-    name: 'Percentage',
-    data: [48, 70, 25, 55, 72],
-    color: '#F9BB00',
-    yAxis: 1
-}] %>
-
-<% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
-
-<% axis_formats = [{format: ""}, {format: "{value}%"}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_format: axis_formats,
-    axis_title: axis_titles,
-    chart_data: data,
-    id: "bar-spline",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    subtitle: 'Source: thesolarfoundation.com',
-    title: 'Bar Graph with Secondary Y-axis',
-    legend: true,
-}) %>

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

@@ -1,86 +0,0 @@
-import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  type: 'spline',
-  name: 'Percentage',
-  data: [48, 70, 25, 55, 72],
-  color: '#F9BB00',
-  yAxis: 1
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Secondary Y-axis",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: [{
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      text: "Number of Employees",
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  }, {
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      text: "Percentage",
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-
-    opposite: true,
-    min: 0,
-    max: 100
-  }],
-  legend: { enabled: true },
-}
-
-const BarGraphSecondaryYAxis = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default BarGraphSecondaryYAxis

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

@@ -1,3 +0,0 @@
-Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing `yAxis: 1` to the second node of your `chartData` array. 
-
-To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb

@@ -1,20 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}, {
-    type: 'spline',
-    name: 'Trend Line',
-    data: [1975, 600, 2500, 924, 500],
-    color: '#F9BB00',
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-spline",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    subtitle: 'Source: thesolarfoundation.com',
-    title: 'Bar Graph with Spline',
-    legend: true,
-}) %>

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

@@ -1,46 +0,0 @@
-import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  type: 'spline',
-  name: 'Trend Line',
-  data: [1975, 600, 2500, 924, 500],
-  color: '#F9BB00',
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Spline",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: true },
-};
-
-const BarGraphSpline = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default BarGraphSpline

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

@@ -1,2 +0,0 @@
-A spline can be added by including a separate chart data with the `type: 'spline'` attribute.
-A color can also be specified for the spline.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb

@@ -1,22 +0,0 @@
-<% data = [{
-    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],
-  }] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-default",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    stacking: "normal",
-    title: 'Bar Graph with Stacked Columns',
-    legend: true,
-}) %>

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