feature(chart): support for combo chart (bar/vert. lines)

Author: singerla

src/helper/modify-chart-helper.ts

@@ -7,6 +7,8 @@ import {
   ChartCategory,
   ChartSeries, ChartPoint,
 } from '../types/chart-types';
+import { vd } from './general-helper';
+import {XmlHelper} from './xml-helper';
 
 export default class ModifyChartHelper {
   /**
@@ -101,6 +103,49 @@ export default class ModifyChartHelper {
     // XmlHelper.dump(chart)
   };
 
+  /**
+   * Set chart data to modify combo charts.
+   * This type is prepared for
+   * first series: bar chart (e.g. total)
+   * other series: vertical lines
+   * See `__tests__/modify-chart-scatter.test.js`
+   */
+  static setChartCombo = (data: ChartData) => (
+    element: XMLDocument | Element,
+    chart?: Document,
+    workbook?: Workbook,
+  ): void => {
+    const slots = [] as ChartSlot[];
+
+    slots.push({
+      index: 0,
+      series: data.series[0],
+      targetCol: 1,
+      type: 'defaultSeries',
+    });
+
+    slots.push({
+      index: 1,
+      label: `Y-Values`,
+      mapData: (point: number, category: ChartCategory) => category.y,
+      targetCol: 2,
+    });
+
+    data.series.forEach((series: ChartSeries, s: number) => {
+      if(s > 0)
+        slots.push({
+          index: s,
+          series: series,
+          targetCol: s + 2,
+          targetYCol: 2,
+          type: 'xySeries',
+        });
+      }
+    );
+
+    new ModifyChart(chart, workbook, data, slots).modify();
+  };
+
   /**
    * Set chart data to modify bubble charts.
    * See `__tests__/modify-chart-bubbles.test.js`

src/index.ts

@@ -23,6 +23,7 @@ const setChartData = ModifyChartHelper.setChartData;
 const setChartVerticalLines = ModifyChartHelper.setChartVerticalLines;
 const setChartScatter = ModifyChartHelper.setChartScatter;
 const setChartBubbles = ModifyChartHelper.setChartBubbles;
+const setChartCombo = ModifyChartHelper.setChartCombo;
 
 import { AutomizerSummary } from './types/types';
 export type { AutomizerSummary };
@@ -54,5 +55,6 @@ export const modify = {
   setChartData,
   setChartVerticalLines,
   setChartScatter,
+  setChartCombo,
   setChartBubbles,
 };

src/modify/modify-chart.ts

@@ -67,13 +67,14 @@ export class ModifyChart {
     // XmlHelper.dump(this.chart.root as XMLDocument)
   }
 
-  setColumns(slot: ChartSlot[]): ChartColumn[] {
+  setColumns(slots: ChartSlot[]): ChartColumn[] {
     const columns = [] as ChartColumn[];
 
-    slot.forEach((slot) => {
+    slots.forEach((slot) => {
       const series = slot.series;
       const index = slot.index;
       const targetCol = slot.targetCol;
+      const targetYCol = slot.targetYCol || 1;
 
       const label = slot.label ? slot.label : series.label;
 
@@ -108,6 +109,7 @@ export class ModifyChart {
                 category,
                 slot.tag,
                 mapData,
+                targetYCol
               );
             }
           : null;
@@ -167,7 +169,7 @@ export class ModifyChart {
           this.series(column.series, {
             ...this.seriesId(column.series),
             ...this.seriesLabel(column.label, colId),
-            ...this.seriesStyle(this.data.series[colId]),
+            ...this.seriesStyle(this.data.series[column.series]),
           }),
         );
       }
@@ -334,6 +336,7 @@ export class ModifyChart {
         isRequired: false,
         children: {
           'c:spPr': {
+            isRequired: false,
             modify: ModifyColorHelper.solidFill(series.style.marker?.color),
           }
         }
@@ -378,10 +381,13 @@ export class ModifyChart {
     targetCol: number,
     point: number,
     category: ChartCategory,
+    tag: string,
+    mapData: ChartDataMapper,
+    targetYCol: number,
   ): ModificationTags {
     return {
       'c:xVal': this.point(r, targetCol, point),
-      'c:yVal': this.point(r, 1, category.y),
+      'c:yVal': this.point(r, targetYCol, category.y),
     };
   }
 

src/types/chart-types.ts

@@ -58,6 +58,7 @@ export type ChartSlot = {
   series?: ChartSeries;
   index?: number;
   targetCol: number;
+  targetYCol?: number;
   type?: string;
   tag?: string;
   isStrRef?: boolean;