playbook_ui 13.18.0.pre.alpha.thor93bargraphoptions2211 → 13.18.0.pre.alpha.thor93bargraphoptions2219

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ceb325111d4662aa6a0491153e357222b4f304d21c247fcc44a3db3aafda347a
-  data.tar.gz: 693e1c50633b9b8f309cd2c21ffaa457adbf54ed8a3bd3dfa965b9852c3f6ca6
+  metadata.gz: 8ec6af33629ba1cad2697168cca8e87e43f0481cbf12430fd62ddc174ac77388
+  data.tar.gz: 0a5976c59dbdbefbcb3fa4f1ecdd0a3572c8e01518388104b6daf5a315a1da06
 SHA512:
-  metadata.gz: 64ae9216199a92f0559d7b524f6165f93698366b2d01e05669293b5a0fb974294148caf6415e97bcff6f8a09b1d2931cdc17cd28f2fc3b421be1532962061b97
-  data.tar.gz: 8134787717615c18836ec47718dae3518c79500d1786b9076618a71d8f0e5605706bc355aa9398c8dea710c3604828d93aeb680f0c7a17f4a19aab9510dc00c8
+  metadata.gz: 87c9af5d361733440d37edc722958b83555195a33a59e44f7281eb6dfda06d73c454b9956161896ac35ebf090de5218543c88573e8dd1c87076d97633da824c8
+  data.tar.gz: d8eeae22de85db2a9a079a9773641065d8ba6fa69b6a68511596d9a92ec7bdb476ead501910d4d8664f1474b9f85488f719cd4154f12328c57ac403c98911c17

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -7,6 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+import { merge } from 'lodash'
 
 import classnames from "classnames";
 
@@ -130,7 +131,7 @@ const BarGraph = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    setOptions({ ...staticOptions, ...customOptions });
+    setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
   return (

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -9,6 +9,7 @@ module Playbook
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
+      prop :custom_options, default: {}
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "vertical"
@@ -39,7 +40,7 @@ module Playbook
         orientation == "horizontal" ? "bar" : "column"
       end
 
-      def chart_options
+      def standard_options
         {
           align: align,
           id: id,
@@ -65,6 +66,10 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
       def classname
         generate_classname("pb_bar_graph")
       end

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'