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

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5b0388b525c9b18b0bbdeca3cd4caddaf64ae847ce670a48e9309ed8eaf77297
4
- data.tar.gz: 2ea7cf95f36a35234ff4471b24c7090a52b53e1acc10b0ed624214dcd354a7fe
3
+ metadata.gz: a9a2061b519f0fd195cbd137e4af57c3a6a12261c3c93d22d17f31f89e8e92dc
4
+ data.tar.gz: b7caa1c410686a976fd41898d70fbb08b1c47a119659e854312a9852ff91aeeb
5
5
  SHA512:
6
- metadata.gz: 9c7a4ee2494affabddfc29128c379e78ef9a4e810e2a19fd3211b1b8cc66860ec03fcbfc72bccc28353a150a56cc97a32656e9d96fa4447bf433619dd983fc4e
7
- data.tar.gz: faa09a92b68f888b43c63017519bcb6248cc8942448a3f531d23d476e6113a4ef2f701febf69a5d53e19943084ea81ab3b7d1b27a9df0d700f63b2d05ff48ed4
6
+ metadata.gz: 4401547f740e114be38b6207fabd219987c615de51b921344d47f589f49c72ec092c19662b4cffb8f31dd52effb0bb87f8cc0f2aee287d4f5a5048e17c91f751
7
+ data.tar.gz: 45d854e81ce5c07073de874a15ebd063be370e3470b3639fe2a0cc5990e2ca4ff0f9342c923e3e9f6ba4e849e6c0283033b2e136b85f44fa1f32c22327ea3504
@@ -0,0 +1,39 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [1475,200,3000,654,656]
4
+ }, {
5
+ name: 'Manufacturing',
6
+ data: [4434,524,2320,440,500]
7
+ }, {
8
+ name: 'Sales & Distribution',
9
+ data: [3387,743,1344,434,440,]
10
+ }, {
11
+ name: 'Project Development',
12
+ data: [3227,878,999,780,1000]
13
+ }, {
14
+ name: 'Other',
15
+ data: [1111,677,3245,500,200]
16
+ }] %>
17
+
18
+ <% custom_options = {
19
+ customOptions: {
20
+ subtitle: {
21
+ text: "Overwritten subtitle",
22
+ style: {
23
+ color: "red",
24
+ fontSize: 20
25
+ }
26
+ }
27
+ }
28
+ } %>
29
+
30
+ <%= pb_rails("bar_graph", props: {
31
+ axis_title: 'Number of Employees',
32
+ chart_data: data,
33
+ id: "bar-default",
34
+ y_axis_min: 0,
35
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
36
+ subtitle: 'Subtitle to replace',
37
+ title: 'Solar Employment Growth by Sector, 2010-2016',
38
+ custom_options: custom_options
39
+ }) %>
@@ -0,0 +1,65 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ }, {
9
+ name: 'Manufacturing',
10
+ data: [4434, 524, 2320, 440, 500],
11
+ }, {
12
+ name: 'Sales & Distribution',
13
+ data: [3387, 743, 1344, 434, 440],
14
+ }, {
15
+ name: 'Project Development',
16
+ data: [3227, 878, 999, 780, 1000],
17
+ }, {
18
+ name: 'Other',
19
+ data: [1111, 677, 3245, 500, 200],
20
+ }]
21
+
22
+ const barGraphOptions = {
23
+ subtitle: {
24
+ text: "Overwritten subtitle"
25
+ },
26
+ xAxis: {
27
+ labels: {
28
+ useHTML: true,
29
+ formatter: function() {
30
+ switch (this.value) {
31
+ case 'Jan':
32
+ return `<i class="fa-regular fa-apple-whole"></i> ${this.value}`
33
+ case 'Feb':
34
+ return `<i class="far fa-strawberry"></i> ${this.value}`
35
+ case 'Mar':
36
+ return `<i class="far fa-lemon"></i> ${this.value}`
37
+ case 'Apr':
38
+ return `<i class="far fa-pear"></i> ${this.value}`
39
+ case 'May':
40
+ return `<i class="far fa-peach"></i> ${this.value}`
41
+ default:
42
+ return ''
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
48
+
49
+ const BarGraphCustom = (props) => (
50
+ <div>
51
+ <BarGraph
52
+ axisTitle="Number of Employees"
53
+ chartData={chartData}
54
+ customOptions={barGraphOptions}
55
+ id="bar-custom"
56
+ subTitle="Subtitle to replace"
57
+ title="Bar Graph with Custom Overrides"
58
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
59
+ yAxisMin={0}
60
+ {...props}
61
+ />
62
+ </div>
63
+ )
64
+
65
+ export default BarGraphCustom
@@ -8,6 +8,7 @@ examples:
8
8
  - bar_graph_height: Height
9
9
  - bar_graph_spline: Spline
10
10
  - bar_graph_colors: Color Overrides
11
+ - bar_graph_custom: Custom Overrides
11
12
 
12
13
 
13
14
  react:
@@ -18,3 +19,4 @@ examples:
18
19
  - bar_graph_height: Height
19
20
  - bar_graph_spline: Spline
20
21
  - bar_graph_colors: Color Overrides
22
+ - bar_graph_custom: Custom Overrides
@@ -5,3 +5,4 @@ export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_c
5
5
  export { default as BarGraphHeight } from './_bar_graph_height.jsx'
6
6
  export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
7
7
  export { default as BarGraphColors } from './_bar_graph_colors.jsx'
8
+ export { default as BarGraphCustom } from './_bar_graph_custom.jsx'