Feat(partial): stacked column chart vue

packages/ez-vue/src/components/Bars.tsx

@@ -42,12 +42,22 @@ export default class Bars extends Vue {
   }
 
   render() {
-    const { shapeData } = this;
+    const {
+      shapeData, chart, $scopedSlots, cartesianScale, colorScale,
+    } = this;
+    const { dimensions } = chart;
+
     return (
       <g class="ez-bars">
-        {shapeData.map((rectDatum) => (
-          <Bar shapeDatum={rectDatum} key={rectDatum.id} />
-        ))}
+        {$scopedSlots.default
+          ? $scopedSlots.default({
+            shapeData,
+            scales: { ...cartesianScale, colorScale },
+            dimensions,
+          })
+          : shapeData.map((rectDatum) => (
+              <Bar shapeDatum={rectDatum} key={rectDatum.id} />
+          ))}
       </g>
     );
   }

packages/ez-vue/src/components/StackedBars.tsx

@@ -0,0 +1,114 @@
+import Vue, { PropType } from 'vue';
+import Component from 'vue-class-component';
+import {
+  ChartContext,
+  Direction,
+  RectangleDatum,
+  ScaleLinearOrBand,
+} from 'eazychart-core/src/types';
+import { InjectReactive, Prop } from 'vue-property-decorator';
+import { ScaleOrdinal, scaleRectangleData } from 'eazychart-core/src';
+import Bar from '@/components/shapes/Bar';
+
+@Component({ components: { Bar } })
+export default class StackedBars extends Vue {
+  @InjectReactive('chart')
+  private chart!: ChartContext;
+
+  @InjectReactive('cartesianScale')
+  private cartesianScale!: {
+    xScale: ScaleLinearOrBand;
+    yScale: ScaleLinearOrBand;
+  };
+
+  @Prop({
+    type: String,
+    required: true,
+  })
+  private readonly singleDomainKey!: string;
+
+  @Prop({
+    type: Array,
+    required: true,
+  })
+  private readonly stackDomainKeys!: string[];
+
+  @Prop({
+    type: String as PropType<Direction>,
+    required: true,
+  })
+  private readonly direction: Direction = Direction.VERTICAL;
+
+  get colorScale() {
+    return this.chart.getScale('colorScale') as ScaleOrdinal;
+  }
+
+  get scaledDataDict() {
+    return this.stackDomainKeys.reduce(
+      (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => {
+        acc[yDomainKey] = scaleRectangleData(
+          this.chart.data,
+          this.singleDomainKey,
+          yDomainKey,
+          this.cartesianScale.xScale,
+          this.cartesianScale.yScale,
+          this.colorScale,
+          this.chart.dimensions,
+          this.chart.isRTL,
+        );
+        return acc;
+      },
+      {},
+    );
+  }
+
+  render() {
+    const {
+      scaledDataDict, chart, stackDomainKeys, colorScale, direction,
+    } = this;
+
+    return (
+      <g class="ez-stacked-bars">
+        {chart.data.map((_datum, idx) => (
+          // The Domain keys still needs to be sorted.
+          // We create a bar for every data row
+          // Each bar is a stack bar where every element is a domain key.
+          <g class="ez-stacked-bar">
+            {stackDomainKeys.map((yDomainKey, domainIdx) => {
+              const color = colorScale.scale(yDomainKey);
+              const scaledData = scaledDataDict[yDomainKey][idx];
+              // The first domain key will not be affected.
+              const previousRectWidth = domainIdx !== 0
+                ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].width
+                : 0;
+              const previousRectHeight = domainIdx !== 0
+                ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].height
+                : 0;
+              // The height or the width of the current bar will be computed depending
+              // to the orientaion
+              // the height will be currentDKHeight - previousDKHeight (same for the width)
+              const shapeDatum = {
+                ...scaledData,
+                width:
+                  direction === Direction.HORIZONTAL
+                    ? scaledData.width - previousRectWidth
+                    : scaledData.width,
+                height:
+                  direction === Direction.VERTICAL
+                    ? scaledData.height - previousRectHeight
+                    : scaledData.height,
+              };
+
+              return (
+                <Bar
+                  key={`${yDomainKey}${idx}`}
+                  shapeDatum={{ ...shapeDatum, color }}
+                />
+              );
+            })}
+          </g>
+        ))}
+      </g>
+    );
+  }
+}

packages/ez-vue/src/components/scales/ColorScale.tsx

@@ -24,7 +24,7 @@ export default class ColorScale extends Vue {
   })
   private readonly definition!: ScaleOrdinalDefinition;
 
-  mounted() {
+  created() {
     this.colorScale = this.defineScale();
     this.chart.registerScale('colorScale', this.colorScale);
   }

packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx

@@ -5,6 +5,7 @@ import {
 } from 'eazychart-dev/storybook/data';
 import ColumnChart from './ColumnChart';
 import LineColumnChart from './LineColumnChart';
+import StackedColumnChart from './StackedColumnChart';
 
 const meta: Meta = {
   title: 'Vue/Column Chart',
@@ -38,6 +39,17 @@ const LineColumnTemplate: Story = (_args, { argTypes }) => ({
   `,
 });
 
+const StackedColumnTemplate: Story = (_args, { argTypes }) => ({
+  title: 'StackedColumn',
+  components: { StackedColumnChart, ChartWrapper },
+  props: Object.keys(argTypes),
+  template: `
+    <ChartWrapper>
+      <StackedColumnChart v-bind="$props" />
+    </ChartWrapper>
+  `,
+});
+
 // By passing using the Args format for exported stories,
 // you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/vue/workflows/unit-testing
@@ -84,3 +96,16 @@ const lineColumnArguments = {
 };
 
 LineColumn.args = lineColumnArguments;
+
+export const StackedColumn = StackedColumnTemplate.bind({});
+
+const StackedColumnArguments = {
+  ...defaultArguments,
+  yAxis: {
+    domainKeys: ['value', 'value1', 'value2'],
+    title: 'Temperature',
+    tickFormat: (d: number) => `${d}°`,
+  },
+};
+
+StackedColumn.args = StackedColumnArguments;