playbook_ui 15.0.0.pre.alpha.PLAY2453formtextfieldtextinputprops10419 → 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb

@@ -0,0 +1,38 @@
+<% chart_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]
+}] %>
+
+
+<% chart_options = {
+  series: chart_data,
+  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',
+    },
+  },
+}
+%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+  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 PbBarGraphDefault = (props) => {
+
+  return (
+    <div>
+      <PbBarGraph
+          {...props}
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphDefault

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb

@@ -0,0 +1,46 @@
+<% chart_data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<% chart_options_pixel = {
+ chart: {
+    height: "300"
+  },
+  series: chart_data,
+  title: {
+    text: "Fixed Height (300px)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  }
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_pixel}) %>
+
+<br /><br />
+
+<% chart_options_percentage = {
+ chart: {
+    height: "50%"
+  },
+  series: chart_data,
+  title: {
+    text: "Percentage Height (50%)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  }
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_percentage}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+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 PbBarGraphHeight = () => (
+  <div>
+      <PbBarGraph
+          options={pixelHeightChartOptions}
+      />
+
+    <br />
+    <br />
+
+    <PbBarGraph
+        options={percentageHeightChartOptions}
+    />
+  </div>
+)
+
+export default PbBarGraphHeight

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md

@@ -0,0 +1,3 @@
+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_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb

@@ -0,0 +1,47 @@
+<% chart_options = {
+    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]
+    }],
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+
+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 PbBarGraphHorizontal = () => (
+  <div>
+    <PbBarGraph
+        options={chartOptions}
+    />
+  </div>
+)
+
+export default PbBarGraphHorizontal

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb

@@ -0,0 +1,25 @@
+<% chart_data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: 'Bar Graph with Legend',
+  },
+  xAxis: {
+    categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+   legend: {
+        enabled: true
+    },
+}
+%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+
+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 PbBarGraphLegend = () => {
+  
+  return (
+    <div>
+      <PbBarGraph
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+export default PbBarGraphLegend

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+
+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 PbBarGraphLegendNonClickable = () => {
+
+  return (
+    <div>
+      <PbBarGraph
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphLegendNonClickable

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb

@@ -0,0 +1,100 @@
+<% chart_data = [{
+    name: 'Installation',
+    data: [1475]
+}, {
+    name: 'Manufacturing',
+    data: [4434]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387]
+}, {
+    name: 'Project Development',
+    data: [3227]
+}, {
+    name: 'Other',
+    data: [1111]
+}] %>
+
+<% chart_options_right = {
+  series: chart_data,
+  title: {
+    text: 'Alignment of Legend',
+  },
+  xAxis: {
+    categories: ['Jan'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: {
+    enabled: true,
+    align: 'right',
+    verticalAlign: 'top',
+  },
+}
+%>
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_right}) %>
+
+
+<% chart_options_center = {
+  series: chart_data,
+  title: {
+    text: 'Layout of Legend',
+  },
+  xAxis: {
+    categories: ['Jan'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: {
+    enabled: true,
+    align: 'center',
+    verticalAlign: 'bottom',
+    layout: 'vertical',
+
+  },
+}
+%>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_center}) %>
+
+<% chart_options_left = {
+  series: chart_data,
+  title: {
+    text: 'Offset of Legend',
+  },
+  xAxis: {
+    categories: ['Jan'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: {
+    enabled: true,
+    align: 'center',
+    verticalAlign: 'bottom',
+    layout: 'vertical',
+    x: 100,
+    y: 10,
+
+  },
+}
+%>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_left}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+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 PbBarGraphLegendPosition = () => {
+
+  return (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <PbBarGraph 
+        options={alignChartOptions}
+    />
+
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <PbBarGraph 
+        options={layoutChartOptions}
+    />
+
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <PbBarGraph 
+        options={offsetChartOptions}
+    />
+  </div>
+)
+}
+
+export default PbBarGraphLegendPosition

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb

@@ -0,0 +1,32 @@
+<% chart_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
+  }] %>
+  
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: "Bar Graph with Negative Numbers",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: { enabled: true },
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>