From f07a662eb449df4cafb20cf6171fbc30bceb8d68 Mon Sep 17 00:00:00 2001 From: Mark Rosenberg <38965626+markdoeswork@users.noreply.github.com> Date: Fri, 13 Dec 2024 09:26:40 -0500 Subject: [PATCH] [PLAY-1617] Change Bar Graph Override Example (#3982) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **What does this PR do?** A clear and concise description with your runway ticket url. Runway https://runway.powerhrg.com/backlog_items/PLAY-1617 Make visual updates to the bar graph doc example for custom overrides **How to test?** Steps to confirm the desired behavior: 1. Go to https://pr3982.playbook.beta.gm.powerapp.cloud/kits/bar_graph/react#custom-overrides 2. Look at how great the chart is 3. Rails too https://pr3982.playbook.beta.gm.powerapp.cloud/kits/bar_graph/rails#custom-overrides ![Screenshot 2024-12-13 at 8 27 41 AM](https://github.com/user-attachments/assets/8f782dee-4398-4874-af00-1b0de5c3d48d) --------- Co-authored-by: Gary Kang --- .../pb_bar_graph/docs/_bar_graph_custom.jsx | 102 +++++++++--------- .../docs/_bar_graph_custom_rails.html.erb | 65 +++++------ 2 files changed, 82 insertions(+), 85 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..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,66 +1,70 @@ import React from 'react' - +import ReactDOMServer from 'react-dom/server' import BarGraph from '../_bar_graph' +import Icon from '../../pb_icon/_icon' + +const chartData = [ + { + name: 'Role', + data: [0, 200, 300, 654, 656], + }, + { + name: 'Company', + data: [150, 524, 320, 440, 500], + }, +] -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 renderIcon = (iconName, color) => { + return ReactDOMServer.renderToStaticMarkup( + ) +}; const barGraphOptions = { - subtitle: { - text: "Overwritten subtitle", - style: { - color: "red" - } + yAxis: { + tickInterval: 5, }, xAxis: { - labels: { - 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}` - default: - return '' - } - } - } - } + categories: ['1', '2', '3', '4', '5'], + labels: { + useHTML: true, + formatter: function () { + switch (this.value) { + case '1': + return `${renderIcon('frown', 'error')}`; + case '2': + return `${renderIcon('frown', 'warning')}`; + case '3': + return `${renderIcon('frown-open', 'neutral')}`; + case '4': + return `${renderIcon('smile', 'category_7')}`; + case '5': + return `${renderIcon('smile-beam', 'success')}`; + default: + return '' + } + }, + style: { + fontSize: '1.4em', + }, + y: 42, + }, + }, + legend: { + itemMarginTop: 62, + }, } -const BarGraphCustom = (props) => ( +const BarGraphCustom = () => (
) 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..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 @@ -1,49 +1,42 @@ <% 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 = { - customOptions: { - subtitle: { - text: "Overwritten subtitle", - style: { - color: "red" - } + customOptions: { + yAxis: { + tickInterval: 5, + }, + 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, + sytle: { + fontSize: '1.4em', }, - xAxis: { - categories: [ - ' Jan', - ' Feb', - ' Mar', - ' Apr', - ' May' - ], - labels: { - useHTML: true, - } - } - } + y: 42, + }, + }, + legend: { + itemMarginTop: 62, + }, + } } %> <%= pb_rails("bar_graph", props: { - axis_title: 'Number of Employees', chart_data: data, id: "bar-default", - y_axis_min: 0, - subtitle: 'Subtitle to replace', + legend: true, title: 'Bar Graph with Custom Overrides', custom_options: bar_graph_options -}) %> \ No newline at end of file +}) %>