feat: stacked and grouped column

chart/stacked-and-grouped.js

@@ -0,0 +1,58 @@
+import {
+  CommonParameter,
+  createColumnChartOption,
+  getPrecisionFormat,
+} from './column'
+
+const p = JSON.parse(JSON.stringify(CommonParameter))
+export const StackedAndGroupedParameter = p
+p.dataLabelRotation.defaultValue = 0
+
+export function createStackedAndGroupedColumnDataStructure(rows) {
+  return rows.map(r => {
+    return { name: r.selector, data: r.value, stack: r.selector.split(".")[1]}
+  })
+}
+
+export function createStackedAndGroupedColumnOption(data, parameter, keyNames) {
+  const option = createColumnChartOption(data, parameter, keyNames)
+
+  const {
+    dataLabel, tooltipPrecision,
+  } = parameter
+
+  if (dataLabel) { option.series.map(r => { r.dataLabels.align = 'center' }) }
+
+  option.yAxis.stackedLabels = {
+    enabled: dataLabel,
+    style: { fontWeight: 'bold', color: 'gray' }
+  }
+
+  option.tooltip = {
+    headerFormat:`
+        <table class="tip">
+          <caption style="margin-bottom: 3px;">Key: {point.key}</caption>
+          <tbody>`,
+    pointFormat: `
+        <tr>
+          <th style="color: {series.color}">{series.name}: </th>
+          <td style="text-align: right">${getPrecisionFormat(tooltipPrecision, 'point.y')}</td>
+        </tr>`,
+    footerFormat: '</table></tbody>',
+    shared: true,
+    useHTML: true
+  }
+
+  option.plotOptions = {
+    column: {
+      stacking: 'normal',
+      dataLabels: {
+        enabled: dataLabel,
+        color: 'white'
+      }
+    }
+  }
+
+  return option
+}
+

index.js

@@ -13,6 +13,7 @@ import { CommonParameter, createColumnChartDataStructure, createColumnChartOptio
 import { StackedParameter, createStackedColumnOption, } from './chart/stacked'
 import { PercentParameter, createPercentColumnOption, } from './chart/percent'
 import { DrillDownParameter, createDrilldownDataStructure, createDrilldownColumnOption, } from './chart/drill-down'
+import { StackedAndGroupedParameter, createStackedAndGroupedColumnDataStructure, createStackedAndGroupedColumnOption, } from './chart/stacked-and-grouped'
 
 export default class Chart extends Visualization {
   constructor(targetEl, config) {
@@ -62,6 +63,17 @@ export default class Chart extends Visualization {
             'category': { dimension: 'multiple', axisType: 'group', },
           },
           parameter: DrillDownParameter,
+        },
+
+        'stacked-and-grouped': {
+          transform: { method: 'array', },
+          sharedAxis: true,
+          axis: {
+            'xAxis': { dimension: 'multiple', axisType: 'key', },
+            'yAxis': { dimension: 'multiple', axisType: 'aggregator', minAxisCount: 1, },
+            'category': { dimension: 'multiple', axisType: 'group', },
+          },
+          parameter: StackedAndGroupedParameter,
         }
       },
     }
@@ -146,7 +158,7 @@ export default class Chart extends Visualization {
     this.chartInstance = Highcharts.chart(this.getChartElementId(), chartOption)
   }
 
-  drawDrilldownChat(parameter, column, transformer) {
+  drawDrilldownChart(parameter, column, transformer) {
     if (column.aggregator.length === 0) {
       this.hideChart()
       return /** have nothing to display, if aggregator is not specified at all */
@@ -160,6 +172,19 @@ export default class Chart extends Visualization {
     this.chartInstance = Highcharts.chart(this.getChartElementId(), chartOption)
   }
 
+  drawStackedAndGroupedChart(parameter, column, transformer) {
+    if (column.aggregator.length === 0) {
+      this.hideChart()
+      return /** have nothing to display, if aggregator is not specified at all */
+    }
+
+    const { rows, keyNames, selectors, } = transformer()
+    const data = createStackedAndGroupedColumnDataStructure(rows)
+    const chartOption = createStackedAndGroupedColumnOption(data, parameter, keyNames, selectors)
+
+    this.chartInstance = Highcharts.chart(this.getChartElementId(), chartOption)
+  }
+
   refresh() {
     try {
       this.chartInstance && this.chartInstance.setSize(this.targetEl.width())
@@ -184,7 +209,9 @@ export default class Chart extends Visualization {
       } else if (chart === 'percent') {
         this.drawPercentChart(parameter, column, transformer)
       } else if (chart === 'drill-down') {
-        this.drawDrilldownChat(parameter, column, transformer)
+        this.drawDrilldownChart(parameter, column, transformer)
+      } else if (chart === 'stacked-and-grouped') {
+        this.drawStackedAndGroupedChart(parameter, column, transformer)
       }
     } catch (error) {
       console.error(error)