playbook_ui_docs 13.18.0.pre.alpha.thor93bargraphoptions2211 → 13.18.0.pre.alpha.thor93bargraphoptions2219

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b0388b525c9b18b0bbdeca3cd4caddaf64ae847ce670a48e9309ed8eaf77297
-  data.tar.gz: 2ea7cf95f36a35234ff4471b24c7090a52b53e1acc10b0ed624214dcd354a7fe
+  metadata.gz: a9a2061b519f0fd195cbd137e4af57c3a6a12261c3c93d22d17f31f89e8e92dc
+  data.tar.gz: b7caa1c410686a976fd41898d70fbb08b1c47a119659e854312a9852ff91aeeb
 SHA512:
-  metadata.gz: 9c7a4ee2494affabddfc29128c379e78ef9a4e810e2a19fd3211b1b8cc66860ec03fcbfc72bccc28353a150a56cc97a32656e9d96fa4447bf433619dd983fc4e
-  data.tar.gz: faa09a92b68f888b43c63017519bcb6248cc8942448a3f531d23d476e6113a4ef2f701febf69a5d53e19943084ea81ab3b7d1b27a9df0d700f63b2d05ff48ed4
+  metadata.gz: 4401547f740e114be38b6207fabd219987c615de51b921344d47f589f49c72ec092c19662b4cffb8f31dd52effb0bb87f8cc0f2aee287d4f5a5048e17c91f751
+  data.tar.gz: 45d854e81ce5c07073de874a15ebd063be370e3470b3639fe2a0cc5990e2ca4ff0f9342c923e3e9f6ba4e849e6c0283033b2e136b85f44fa1f32c22327ea3504

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

@@ -0,0 +1,39 @@
+<% 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]
+}] %>
+
+<% custom_options = {
+    customOptions: {
+          subtitle: {
+            text: "Overwritten subtitle",
+            style: {
+                color: "red",
+                fontSize: 20
+            }
+        }
+    }
+} %>
+
+<%= 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: 'Subtitle to replace',
+    title: 'Solar Employment Growth by Sector, 2010-2016',
+    custom_options: custom_options
+}) %>

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

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+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 barGraphOptions = {
+  subtitle: {
+    text: "Overwritten subtitle"
+  },
+  xAxis: {
+      labels: {
+          useHTML: true,
+          formatter: function() {
+              switch (this.value) {
+                  case 'Jan':
+                      return `<i class="fa-regular fa-apple-whole"></i> ${this.value}`
+                  case 'Feb':
+                      return `<i class="far fa-strawberry"></i> ${this.value}`
+                  case 'Mar':
+                      return `<i class="far fa-lemon"></i> ${this.value}`
+                  case 'Apr':
+                      return `<i class="far fa-pear"></i> ${this.value}`
+                  case 'May':
+                      return `<i class="far fa-peach"></i> ${this.value}`
+                  default:
+                      return ''
+              }
+          }
+      }
+  }
+}
+
+const BarGraphCustom = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        customOptions={barGraphOptions}
+        id="bar-custom"
+        subTitle="Subtitle to replace"
+        title="Bar Graph with Custom Overrides"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphCustom

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

@@ -8,6 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
+  - bar_graph_custom: Custom Overrides
 
 
   react:
@@ -18,3 +19,4 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
+  - bar_graph_custom: Custom Overrides

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

@@ -5,3 +5,4 @@ export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_c
 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 BarGraphCustom } from './_bar_graph_custom.jsx'