playbook_ui 15.7.0.pre.alpha.play258013248 → 15.7.0.pre.alpha.play270013252

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

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-colors",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Bar Graph with Custom Data Colors',
-    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
-}) %>

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

@@ -1,55 +0,0 @@
-import React from 'react'
-import colors from '../../tokens/exports/_colors.module.scss'
-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: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
-}
-
-const BarGraphColors = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default BarGraphColors

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_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_bar_graph/docs/_bar_graph_custom_rails.html.erb

@@ -1,42 +0,0 @@
-<% data = [{
-  name: 'Role',
-  data: [0, 200, 300, 654, 656],
-}, {
-  name: 'Company',
-  data: [150, 524, 320, 440, 500],
-}] %>
-
-<% bar_graph_options = {
-  customOptions: {
-    yAxis: {
-      tickInterval: 5,
-    },
-    xAxis: {
-      categories: [
-        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
-      ],
-      labels: {
-        useHTML: true,
-        sytle: {
-          fontSize: '1.4em',
-        },
-        y: 42,
-      },
-    },
-    legend: {
-      itemMarginTop: 62,
-    },
-  } 
-} %>
-
-<%= pb_rails("bar_graph", props: {
-    chart_data: data,
-    id: "bar-default",
-    legend: true,
-    title: 'Bar Graph with Custom Overrides',
-    custom_options: bar_graph_options
-}) %>

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

@@ -1,2 +0,0 @@
-The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
- It's important to note that certain options may require specific script imports to function properly.

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

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-<%= 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'],
-    subtitle: 'Source: thesolarfoundation.com',
-    title: 'Solar Employment Growth by Sector, 2010-2016',
-}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.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: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Solar Employment Growth by Sector, 2010-2016',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-}
-
-const BarGraphDefault = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default BarGraphDefault

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

@@ -1,26 +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-fixed-height",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Fixed Height (300px)',
-    height: '300'
-}) %>
-
-<br /><br />
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-percentage-height",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Percentage Height (50%)',
-    height: '50%'
-}) %>

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

@@ -1,69 +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 pixelHeightChartOptions = {
-  chart: {
-    height: "300"
-  },
-  series: chartData,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const percentageHeightChartOptions = {
-  chart: {
-    height: "50%"
-  },
-  series: chartData,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
-
-const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
-
-const BarGraphHeight = () => (
-  <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={pixelOptions}
-      />
-
-    <br />
-    <br />
-
-    <HighchartsReact
-        highcharts={Highcharts}
-        options={percentageOptions}
-    />
-  </div>
-)
-
-export default BarGraphHeight

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

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

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

@@ -1,58 +0,0 @@
-<% bar_graph_options = {
-    customOptions: {
-        chart: {
-            type: 'bar'
-        },
-        title: {
-            text: 'Historic World Population by Region',
-            align: 'left'
-        },
-        subtitle: {
-            text: 'Source: <a ' +
-                'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
-                'target="_blank">Wikipedia.org</a>',
-            align: 'left'
-        },
-        xAxis: {
-            categories: ['Africa', 'America', 'Asia', 'Europe'],
-            lineWidth: 0
-        },
-        yAxis: {
-            min: 0,
-            title: {
-                text: 'Population (millions)',
-                align: 'high'
-            },
-            labels: {
-                overflow: 'justify'
-            },
-        },
-        tooltip: {
-            valueSuffix: ' millions'
-        },
-        plotOptions: {
-            bar: {
-                dataLabels: {
-                    enabled: true
-                },
-                groupPadding: 0.1
-            }
-        },
-        series: [{
-            name: 'Year 1990',
-            data: [631, 727, 3202, 721]
-        }, {
-            name: 'Year 2000',
-            data: [814, 841, 3714, 726]
-        }, {
-            name: 'Year 2018',
-            data: [1276, 1007, 4561, 746]
-        }]
-    }
-} %>
-
-<%= pb_rails("bar_graph", props: {
-    id: "bar-horizontal",
-    y_axis_min: 0,
-    custom_options: bar_graph_options,
-}) %>

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

@@ -1,64 +0,0 @@
-import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-
-const chartOptions = {
-    chart: {
-        type: 'bar'
-    },
-    title: {
-        text: 'Historic World Population by Region',
-        align: 'left'
-    },
-    subtitle: {
-        text: 'Source: <a ' +
-            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
-            'target="_blank">Wikipedia.org</a>',
-        align: 'left'
-    },
-    xAxis: {
-        categories: ['Africa', 'America', 'Asia', 'Europe'],
-        lineWidth: 0
-    },
-    yAxis: {
-        title: {
-            text: '',
-        },
-    },
-    tooltip: {
-        valueSuffix: ' millions'
-    },
-    plotOptions: {
-        bar: {
-            dataLabels: {
-                enabled: true
-            },
-            groupPadding: 0.1
-        }
-    },
-    series: [{
-        name: 'Year 1990',
-        data: [631, 727, 3202, 721]
-    }, {
-        name: 'Year 2000',
-        data: [814, 841, 3714, 726]
-    }, {
-        name: 'Year 2018',
-        data: [1276, 1007, 4561, 746]
-    }],
-}
-
-const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-const BarGraphHorizontal = () => (
-  <div>
-    <HighchartsReact
-        highcharts={Highcharts}
-        options={options}
-    />
-  </div>
-)
-
-export default BarGraphHorizontal

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

@@ -1,14 +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-2",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Bar Graph with Legend',
-    legend: true,
-}) %>

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