From 9e07f29390e1146ad3b2472db6059c9dac4ea2b3 Mon Sep 17 00:00:00 2001 From: Mark Date: Fri, 6 Dec 2024 12:15:56 -0500 Subject: [PATCH 01/10] Change react example --- .../pb_bar_graph/docs/_bar_graph_custom.jsx | 41 ++++++++----------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx index 71311d7195..c96836f449 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx @@ -3,20 +3,11 @@ import React from 'react' import BarGraph from '../_bar_graph' const chartData = [{ - name: 'Installation', - data: [1475, 200, 3000, 654, 656], + name: 'Role', + data: [0, 200, 300, 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], + name: 'Company', + data: [150, 524, 320, 440, 500], }] const barGraphOptions = { @@ -31,16 +22,16 @@ const barGraphOptions = { useHTML: true, formatter: function() { switch (this.value) { - case 'Jan': - return ` ${this.value}` - case 'Feb': - return ` ${this.value}` - case 'Mar': - return ` ${this.value}` - case 'Apr': - return ` ${this.value}` - case 'May': - return ` ${this.value}` + case 'Angry': + return ` ` + case 'Frown': + return `` + case 'Meh': + return `` + case 'Smile': + return `` + case 'Laugh': + return `` default: return '' } @@ -52,13 +43,13 @@ const barGraphOptions = { const BarGraphCustom = (props) => (
From 7bc6390a169008a9f7493e8767b69a76b8879db0 Mon Sep 17 00:00:00 2001 From: Mark Date: Fri, 6 Dec 2024 12:41:18 -0500 Subject: [PATCH 02/10] Update Rails example --- .../docs/_bar_graph_custom_rails.html.erb | 32 +++++++------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb index f0f55498d3..ea91c42c7f 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb @@ -1,18 +1,9 @@ <% data = [{ - name: 'Installation', - data: [1475,200,3000,654,656] + name: 'Role', + data: [0, 200, 300, 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] + name: 'Company', + data: [150, 524, 320, 440, 500], }] %> <% bar_graph_options = { @@ -25,11 +16,11 @@ }, xAxis: { categories: [ - ' Jan', - ' Feb', - ' Mar', - ' Apr', - ' May' + '', + '', + '', + '', + '' ], labels: { useHTML: true, @@ -39,11 +30,12 @@ } %> <%= pb_rails("bar_graph", props: { - axis_title: 'Number of Employees', + axis_title: '', chart_data: data, id: "bar-default", + legend: true, y_axis_min: 0, subtitle: 'Subtitle to replace', title: 'Bar Graph with Custom Overrides', custom_options: bar_graph_options -}) %> \ No newline at end of file +}) %> From 8d7f496ecaaa3c39aefa88cf451b449bdf25f414 Mon Sep 17 00:00:00 2001 From: Mark Date: Fri, 6 Dec 2024 13:27:57 -0500 Subject: [PATCH 03/10] Fix sytle error --- .../pb_bar_graph/docs/_bar_graph_custom.jsx | 68 ++++++++++--------- 1 file changed, 35 insertions(+), 33 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx index c96836f449..96ae417437 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx @@ -1,43 +1,45 @@ import React from 'react' +import BarGraph from 'playbook-ui' -import BarGraph from '../_bar_graph' - -const chartData = [{ - name: 'Role', - data: [0, 200, 300, 654, 656], -}, { - name: 'Company', - data: [150, 524, 320, 440, 500], -}] +const chartData = [ + { + name: 'Role', + data: [0, 200, 300, 654, 656], + }, + { + name: 'Company', + data: [150, 524, 320, 440, 500], + }, +] const barGraphOptions = { subtitle: { - text: "Overwritten subtitle", + text: 'Overwritten subtitle', style: { - color: "red" - } + color: 'red', + }, }, xAxis: { - labels: { - useHTML: true, - formatter: function() { - switch (this.value) { - case 'Angry': - return ` ` - case 'Frown': - return `` - case 'Meh': - return `` - case 'Smile': - return `` - case 'Laugh': - return `` - default: - return '' - } - } - } - } + labels: { + useHTML: true, + formatter: function () { + switch (this.value) { + case 'Angry': + return '' + case 'Frown': + return '' + case 'Meh': + return '' + case 'Smile': + return '' + case 'Laugh': + return '' + default: + return '' + } + }, + }, + }, } const BarGraphCustom = (props) => ( @@ -49,7 +51,7 @@ const BarGraphCustom = (props) => ( legend subTitle="Subtitle to replace" title="Bar Graph with Custom Overrides" - xAxisCategories={['Angry', 'Frown', 'Meh', 'Smile', 'Laugh']} + xAxisCategories={['Angry', 'Frown', 'Meh', 'Smile', 'Laugh']} yAxisMin={0} {...props} /> From 805c771c8a4d331f3af3e786f0178dd11f6e8eeb Mon Sep 17 00:00:00 2001 From: Mark Date: Fri, 6 Dec 2024 14:05:07 -0500 Subject: [PATCH 04/10] Import bargraph correctly --- .../pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx index 96ae417437..cbbd4bb688 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx @@ -1,5 +1,5 @@ import React from 'react' -import BarGraph from 'playbook-ui' +import BarGraph from '../_bar_graph' const chartData = [ { From f8de89afdc6453b063d2f8d9ce9a8f54cd4b882e Mon Sep 17 00:00:00 2001 From: Mark Date: Mon, 9 Dec 2024 11:57:15 -0500 Subject: [PATCH 05/10] Change props to fix ledgend --- .../playbook/pb_bar_graph/docs/_bar_graph_custom.jsx | 5 +++-- .../pb_bar_graph/docs/_bar_graph_custom_rails.html.erb | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx index cbbd4bb688..bab4808051 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx @@ -20,6 +20,9 @@ const barGraphOptions = { }, }, xAxis: { + legend: { + itemMarginTop: 62, + }, labels: { useHTML: true, formatter: function () { @@ -49,10 +52,8 @@ const BarGraphCustom = (props) => ( customOptions={barGraphOptions} id="bar-custom" legend - subTitle="Subtitle to replace" title="Bar Graph with Custom Overrides" xAxisCategories={['Angry', 'Frown', 'Meh', 'Smile', 'Laugh']} - yAxisMin={0} {...props} />
diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb index ea91c42c7f..7eb13f9e0c 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb @@ -24,18 +24,18 @@ ], labels: { useHTML: true, + }, + legend: { + itemMarginTop: 62, } } } } %> <%= pb_rails("bar_graph", props: { - axis_title: '', chart_data: data, id: "bar-default", legend: true, - y_axis_min: 0, - subtitle: 'Subtitle to replace', title: 'Bar Graph with Custom Overrides', custom_options: bar_graph_options }) %> From 443fc422a35aa32319f9b818d28f5b7bfb9b6109 Mon Sep 17 00:00:00 2001 From: Mark Date: Mon, 9 Dec 2024 12:34:02 -0500 Subject: [PATCH 06/10] remove inline css --- .../playbook/pb_bar_graph/docs/_bar_graph_custom.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx index bab4808051..2eb2ba4471 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx @@ -23,20 +23,21 @@ const barGraphOptions = { legend: { itemMarginTop: 62, }, + xAxisCategories: ['Angry', 'Frown', 'Meh', 'Smile', 'Laugh'], labels: { useHTML: true, formatter: function () { switch (this.value) { case 'Angry': - return '' + return '' case 'Frown': - return '' + return '' case 'Meh': - return '' + return '' case 'Smile': - return '' + return '' case 'Laugh': - return '' + return '' default: return '' } From fb79cb61494bbcee536aa686e00d410107af1cd6 Mon Sep 17 00:00:00 2001 From: Mark Date: Mon, 9 Dec 2024 14:46:36 -0500 Subject: [PATCH 07/10] Mess with y axis --- .../pb_bar_graph/docs/_bar_graph_custom.jsx | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx index 2eb2ba4471..9e9735c0e9 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx @@ -13,49 +13,48 @@ const chartData = [ ] const barGraphOptions = { - subtitle: { - text: 'Overwritten subtitle', - style: { - color: 'red', - }, + yAxis: { + tickInterval: 5, }, xAxis: { - legend: { - itemMarginTop: 62, - }, - xAxisCategories: ['Angry', 'Frown', 'Meh', 'Smile', 'Laugh'], + categories: ['1', '2', '3', '4', '5'], labels: { useHTML: true, formatter: function () { switch (this.value) { - case 'Angry': + case '1': return '' - case 'Frown': + case '2': return '' - case 'Meh': + case '3': return '' - case 'Smile': + case '4': return '' - case 'Laugh': - return '' + case '5': + return '' default: return '' } }, + style: { + fontSize: '1.4em', + }, + y: 42, }, }, + legend: { + itemMarginTop: 62, + }, } -const BarGraphCustom = (props) => ( +const BarGraphCustom = () => (
) From 4182ae8b23b5ef526f2010335fd43c77630fd2d9 Mon Sep 17 00:00:00 2001 From: Mark Date: Mon, 9 Dec 2024 15:18:58 -0500 Subject: [PATCH 08/10] Fix bar graph issue --- .../pb_bar_graph/docs/_bar_graph_custom.jsx | 2 +- .../docs/_bar_graph_custom_rails.html.erb | 45 ++++++++++--------- .../playbook/pb_bar_graph/docs/example.yml | 14 ------ 3 files changed, 24 insertions(+), 37 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx index 9e9735c0e9..395c0e44c0 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx @@ -54,7 +54,7 @@ const BarGraphCustom = () => ( customOptions={barGraphOptions} id="happiness-dashboard" legend - title="" + title="Bar Graph with Custom Overrides" /> ) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb index 7eb13f9e0c..b50a49d70f 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb @@ -7,29 +7,30 @@ }] %> <% bar_graph_options = { - customOptions: { - subtitle: { - text: "Overwritten subtitle", - style: { - color: "red" - } + customOptions: { + yAxis: { + tickInterval: 5, + }, + xAxis: { + categories: [ + '', + '', + '', + '', + '' + ], + labels: { + useHTML: true, + sytle: { + fontSize: '1.4em', }, - xAxis: { - categories: [ - '', - '', - '', - '', - '' - ], - labels: { - useHTML: true, - }, - legend: { - itemMarginTop: 62, - } - } - } + y: 42, + }, + }, + legend: { + itemMarginTop: 62, + }, + } } %> <%= pb_rails("bar_graph", props: { diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml index c0e7daaff6..f9405a63a3 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml @@ -1,13 +1,6 @@ examples: rails: - - bar_graph_default: Default - - bar_graph_legend: Legend - - bar_graph_legend_position: Legend Position - - bar_graph_legend_non_clickable: Legend Non Clickable - - bar_graph_height: Height - - bar_graph_spline: Spline - - bar_graph_colors: Color Overrides - bar_graph_custom_rails: Custom Overrides - bar_graph_stacked: Stacked - bar_graph_negative_numbers: Negative Numbers @@ -16,13 +9,6 @@ examples: react: - - bar_graph_default: Default - - bar_graph_legend: Legend - - bar_graph_legend_position: Legend Position - - bar_graph_legend_non_clickable: Legend Non Clickable - - bar_graph_height: Height - - bar_graph_spline: Spline - - bar_graph_colors: Color Overrides - bar_graph_custom: Custom Overrides - bar_graph_stacked: Stacked - bar_graph_negative_numbers: Negative Numbers From d0fa5a1a7d6b7bfd974c301c295831e221b338d5 Mon Sep 17 00:00:00 2001 From: Mark Date: Mon, 9 Dec 2024 15:19:18 -0500 Subject: [PATCH 09/10] Add examples back --- .../pb_kits/playbook/pb_bar_graph/docs/example.yml | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml index f9405a63a3..c0e7daaff6 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml @@ -1,6 +1,13 @@ examples: rails: + - bar_graph_default: Default + - bar_graph_legend: Legend + - bar_graph_legend_position: Legend Position + - bar_graph_legend_non_clickable: Legend Non Clickable + - bar_graph_height: Height + - bar_graph_spline: Spline + - bar_graph_colors: Color Overrides - bar_graph_custom_rails: Custom Overrides - bar_graph_stacked: Stacked - bar_graph_negative_numbers: Negative Numbers @@ -9,6 +16,13 @@ examples: react: + - bar_graph_default: Default + - bar_graph_legend: Legend + - bar_graph_legend_position: Legend Position + - bar_graph_legend_non_clickable: Legend Non Clickable + - bar_graph_height: Height + - bar_graph_spline: Spline + - bar_graph_colors: Color Overrides - bar_graph_custom: Custom Overrides - bar_graph_stacked: Stacked - bar_graph_negative_numbers: Negative Numbers From 62e2cfa5e8d0448411f7b8397e6b5acc15df2d78 Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Thu, 12 Dec 2024 16:34:07 -0500 Subject: [PATCH 10/10] Use icon kit, PB icons, and raw html strings --- .../pb_bar_graph/docs/_bar_graph_custom.jsx | 20 ++++++++++++++----- .../docs/_bar_graph_custom_rails.html.erb | 10 +++++----- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx index 395c0e44c0..a2ba3a06cc 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx @@ -1,5 +1,7 @@ import React from 'react' +import ReactDOMServer from 'react-dom/server' import BarGraph from '../_bar_graph' +import Icon from '../../pb_icon/_icon' const chartData = [ { @@ -12,6 +14,14 @@ const chartData = [ }, ] +const renderIcon = (iconName, color) => { + return ReactDOMServer.renderToStaticMarkup( + ) +}; + const barGraphOptions = { yAxis: { tickInterval: 5, @@ -23,15 +33,15 @@ const barGraphOptions = { formatter: function () { switch (this.value) { case '1': - return '' + return `${renderIcon('frown', 'error')}`; case '2': - return '' + return `${renderIcon('frown', 'warning')}`; case '3': - return '' + return `${renderIcon('frown-open', 'neutral')}`; case '4': - return '' + return `${renderIcon('smile', 'category_7')}`; case '5': - return '' + return `${renderIcon('smile-beam', 'success')}`; default: return '' } diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb index b50a49d70f..ec0a6015b7 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb @@ -13,11 +13,11 @@ }, 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,