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 <[email protected]>
SalesforceLabs · Jun 6, 2020 · 28db0a8 · 28db0a8
1 parent 3bef9e5
commit 28db0a8
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -580,5 +580,57 @@
         &lt;/c-chart&gt;
       </code>
     </c-sample-app-item>
+
+    <!-- Stacked Bar chart -->
+    <c-sample-app-item>
+      <c-chart slot="chartExample" 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>
+      <code slot="chartCode" lang="html">
+        &lt;c-chart type=&quot;bar&quot; responsive=&quot;true&quot;&gt;<br />
+        &emsp;&lt;c-dataset labels=&#39;[&quot;Item 1&quot;,&quot;Item
+        2&quot;,&quot;Item 3&quot;,&quot;Item 4&quot;, &quot;Item
+        5&quot;,&quot;Item 6&quot;,&quot;Item 7&quot;]&#39;&gt;<br />
+        &emsp;&emsp;&lt;c-data label=&quot;Neutral&quot; detail=&quot;[40, 47,
+        44, 38, 27, 31, 25]&quot; backgroundcolor=&#39;rgba(50, 150, 237,
+        1)&#39; stack=&quot;1&quot;&gt;&lt;/c-data&gt;<br />
+        &emsp;&emsp;&lt;c-data label=&quot;Warning&quot; detail=&quot;[10, 12,
+        7, 5, 4, 6, 8]&quot; backgroundcolor=&#39;rgba(119, 185, 242, 1)&#39;
+        stack=&quot;1&quot;&gt;&lt;/c-data&gt;<br />
+        &emsp;&emsp;&lt;c-data label=&quot;Error&quot; detail=&quot;[17, 11, 22,
+        18, 12, 7, 5]&quot; backgroundcolor=&#39;rgba(157, 83, 242, 1)&#39;
+        stack=&quot;1&quot;&gt;&lt;/c-data&gt;<br />
+        &emsp;&lt;/c-dataset&gt;<br />
+        &emsp;&lt;c-cartesian-axis axis=&quot;x&quot; stacked=&quot;true&quot;
+        &gt;<br />
+        &emsp;&lt;/c-cartesian-axis&gt;<br />
+        &emsp;&lt;c-cartesian-axis axis=&quot;y&quot;
+        stacked=&quot;true&quot;&gt;&lt;/c-cartesian-axis&gt;<br />
+        &lt;/c-chart&gt;
+      </code>
+    </c-sample-app-item>
   </div>
 </template>