From 28db0a8a679c552a6c8449e7eb517f2a9cbd6e39 Mon Sep 17 00:00:00 2001 From: Sebastien Date: Sat, 6 Jun 2020 14:36:48 +0200 Subject: [PATCH] Stacked bar attribut (#49) * Add stacked attribute Add this attribute in the base cartesian axis => available for every of them * Add related test case for stacked attribute * Convert it to boolean to fix the rendering issue * Add a sample * Add stack attribut on data set to drive the dataset stacked together * Change style to match SLDS Co-authored-by: Victor Garcia Zarco --- .../unit/attributes/cartesianAxis.test.js | 1 + __tests__/unit/attributes/data.test.js | 1 + .../lwc/cartesianAxis/cartesianAxis.js | 8 +++ force-app/main/default/lwc/data/data.js | 7 +++ .../default/lwc/sampleApp/sampleApp.html | 52 +++++++++++++++++++ 5 files changed, 69 insertions(+) diff --git a/__tests__/unit/attributes/cartesianAxis.test.js b/__tests__/unit/attributes/cartesianAxis.test.js index 986beeb8..f13d8cf5 100644 --- a/__tests__/unit/attributes/cartesianAxis.test.js +++ b/__tests__/unit/attributes/cartesianAxis.test.js @@ -108,6 +108,7 @@ const TEST_DATA_PROPERTIES = [ yAxes: [{ gridLines: { offsetGridLines: 1 } }] }), ChartOptionMock('gridZ', 1, { yAxes: [{ gridLines: { z: 1 } }] }), + ChartOptionMock('stacked', true, { yAxes: [{ stacked: true }] }), ChartOptionMock('axis', 'x', { xAxes: [{}] }) ]; diff --git a/__tests__/unit/attributes/data.test.js b/__tests__/unit/attributes/data.test.js index 7457c625..b1b8f00d 100644 --- a/__tests__/unit/attributes/data.test.js +++ b/__tests__/unit/attributes/data.test.js @@ -46,6 +46,7 @@ const TEST_DATA_PROPERTIES = [ ChartOptionMock('pointrotation', 'foo', { pointRotation: 'foo' }), ChartOptionMock('pointstyle', 'foo', { pointStyle: 'foo' }), ChartOptionMock('spangaps', 'foo', { spanGaps: 'foo' }), + ChartOptionMock('stack', '1', { stack: '1' }), ChartOptionMock('cubicinterpolationmode', 'foo', { cubicInterpolationMode: 'foo' }), diff --git a/force-app/main/default/lwc/cartesianAxis/cartesianAxis.js b/force-app/main/default/lwc/cartesianAxis/cartesianAxis.js index ad2d90b5..b4fda58a 100644 --- a/force-app/main/default/lwc/cartesianAxis/cartesianAxis.js +++ b/force-app/main/default/lwc/cartesianAxis/cartesianAxis.js @@ -337,6 +337,14 @@ export default class CartesianAxis extends BaseAxis { this._content.gridLines.z = Number(v); } + @api + get stacked() { + return this._content.stacked; + } + set stacked(v) { + this._content.stacked = Boolean(v); + } + constructor() { super(); this._axis = 'yAxes'; diff --git a/force-app/main/default/lwc/data/data.js b/force-app/main/default/lwc/data/data.js index 7552e9e8..b9bce2db 100644 --- a/force-app/main/default/lwc/data/data.js +++ b/force-app/main/default/lwc/data/data.js @@ -210,6 +210,13 @@ export default class Data extends BaseAttribute { this._payload.spanGaps = v; } @api + get stack() { + return this._payload.stack; + } + set stack(v) { + this._payload.stack = v; + } + @api get cubicinterpolationmode() { return this._payload.cubicInterpolationMode; } diff --git a/force-app/sample/default/lwc/sampleApp/sampleApp.html b/force-app/sample/default/lwc/sampleApp/sampleApp.html index 47418cf3..721fdb27 100755 --- a/force-app/sample/default/lwc/sampleApp/sampleApp.html +++ b/force-app/sample/default/lwc/sampleApp/sampleApp.html @@ -580,5 +580,57 @@ </c-chart> + + + + + + + + + + + + + + <c-chart type="bar" responsive="true">
+  <c-dataset labels='["Item 1","Item + 2","Item 3","Item 4", "Item + 5","Item 6","Item 7"]'>
+   <c-data label="Neutral" detail="[40, 47, + 44, 38, 27, 31, 25]" backgroundcolor='rgba(50, 150, 237, + 1)' stack="1"></c-data>
+   <c-data label="Warning" detail="[10, 12, + 7, 5, 4, 6, 8]" backgroundcolor='rgba(119, 185, 242, 1)' + stack="1"></c-data>
+   <c-data label="Error" detail="[17, 11, 22, + 18, 12, 7, 5]" backgroundcolor='rgba(157, 83, 242, 1)' + stack="1"></c-data>
+  </c-dataset>
+  <c-cartesian-axis axis="x" stacked="true" + >
+  </c-cartesian-axis>
+  <c-cartesian-axis axis="y" + stacked="true"></c-cartesian-axis>
+ </c-chart> + +