playbook_ui_docs 15.7.0.pre.alpha.play263313229 → 15.7.0.pre.alpha.play270013252

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

@@ -1,40 +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],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Bar Graph with Legend',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { enabled: true },
-}
-
-const BarGraphLegend = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-  
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-export default BarGraphLegend

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

@@ -1,15 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-test-3",
-    y_axis_min: 0,
-    x_axis_categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Bar Graph with Legend Non Clickable',
-    legend: true,
-    toggle_legend_click: false,
-}) %>

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

@@ -1,48 +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],
-}]
-
-const chartOptions = {
-    title: {
-      text: 'Bar Graph with Legend Non Clickable',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    legend: {
-      enabled: true,
-      events: {
-        itemClick: function () {
-          return false;
-        }
-      }
-    },
-  series: chartData
-}
-
-const BarGraphLegendNonClickable = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default BarGraphLegendNonClickable

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

@@ -1,62 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [1475]
-}, {
-    name: 'Manufacturing',
-    data: [4434]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387]
-}, {
-    name: 'Project Development',
-    data: [3227]
-}, {
-    name: 'Other',
-    data: [1111]
-}] %>
-
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id:"legend-position-bar",
-    y_axis_min: 0,
-    x_axis_categories:['Jan'],
-    title: 'Alignment of Legend',
-    legend: true,
-    align: 'right',
-    vertical_align: 'top',
-    padding_bottom: "sm",
-}) %>
-
-<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id:"legend-position-bar-1",
-    y_axis_min: 0,
-    x_axis_categories:['Jan'],
-    title: 'Layout of Legend',
-    legend: true,
-    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("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id:"legend-position-bar-2",
-    y_axis_min: 0,
-    x_axis_categories:['Jan'],
-    title: 'Offset of Legend',
-    legend: true,
-    layout: "vertical",
-    x: 100,
-    y: 10,
-    padding_top: "sm",
-}) %>

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

@@ -1,136 +0,0 @@
-import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-import Title from "../../pb_title/_title"
-
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475],
-}, {
-  name: 'Manufacturing',
-  data: [4434],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387],
-}, {
-  name: 'Project Development',
-  data: [3227],
-}, {
-  name: 'Other',
-  data: [1111],
-}]
-
-const alignChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Alignment of Legend',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { 
-    enabled: true,
-    verticalAlign: 'top',
-    align: 'right',
-   },
-}
-
-const layoutChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Layout of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { 
-    enabled: true,
-    layout: 'vertical',
-   },
-}
-
-const offsetChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Offset of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    layout: 'vertical',
-    x: 100,
-    y: 10,
-  },
-}
-
-const BarGraphLegendPosition = () => {
-  const alignOptions = Highcharts.merge({}, barGraphTheme, alignChartOptions)
-  const layoutOptions = Highcharts.merge({}, barGraphTheme, layoutChartOptions)
-  const offsetOptions = Highcharts.merge({}, barGraphTheme, offsetChartOptions)
-
-
-  return (
-  <div>
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="align | verticalAlign"
-    />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={alignOptions}
-    />
-
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="layout"
-    />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={layoutOptions}
-    />
-
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="x | y"
-    />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={offsetOptions}
-    />
-  </div>
-)
-}
-
-export default BarGraphLegendPosition

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_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 to bottom)
-`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_bar_graph/docs/_bar_graph_negative_numbers.html.erb

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

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.