SUPPORT-8731: bar indexes setting

frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts

@@ -17,8 +17,9 @@ import {
   Filterable, FilterDelegate, NotNull, PointSettings, UnsupportedOperationError,
   Visible
 } from "@webbpm/base-package";
-import {ChartLegendSettings} from "./model/ChartLegendSettings";
+import {BarPositions} from "./model/BarPositions";
 import {ChartBarSettings} from "./model/ChartBarSettings";
+import {ChartLegendSettings} from "./model/ChartLegendSettings";
 import {Options} from "./model/Options";
 import {ChartPlugin} from "./plugin/ChartPlugin";
 import {ChartUtils} from "./ChartUtils";
@@ -285,10 +286,14 @@ export class ErvuChartV2 extends Control implements Filterable {
       chartOptions.scales.x = this.bars.x;
       chartOptions.scales.y = this.bars.y;
 
-      // shadow bar treatment 
+      // shadow bar treatment
       if (this.bars.shadowBar && datasetsLength > 0) {
         this.initShadowBar(datasets);
       }
+      // bar positions treatment
+      if (this.bars.barPositions && datasetsLength > 0) {
+        this.initBarPositions(chartOptions, datasets, this.bars.barPositions);
+      }
     }
 
     if (this.options) {
@@ -351,12 +356,52 @@ export class ErvuChartV2 extends Control implements Filterable {
 
       stacks.forEach(value => {
         const cloneShadowBar = {...shadowBar};
+        cloneShadowBar.data = [];
+        shadowBar.data.forEach((item) => {
+          cloneShadowBar.data.push({...item});
+        });
         cloneShadowBar.stack = value;
         datasets.push(cloneShadowBar);
       });
     }
   }
 
+  private initBarPositions(options, datasets, barPositions: BarPositions) {
+    if (barPositions.barStackIndexes && barPositions.barStackIndexes.length > 0) {
+      options.grouped = false;
+      if (barPositions.barThickness) {
+        options.barThickness = barPositions.barThickness;
+      }
+
+      const indexScales = options.scales[this.indexAxis];
+      indexScales.type = 'linear';
+      if (barPositions.max || barPositions.max === 0) {
+        indexScales.max = barPositions.max;
+      }
+      if (barPositions.min || barPositions.min === 0) {
+        indexScales.min = barPositions.min;
+      }
+
+      barPositions.barStackIndexes.forEach(barStackIndex => {
+        if (barStackIndex.barStack && (barStackIndex.index || barStackIndex.index === 0)) {
+          datasets.forEach(dataset => {
+            if (dataset.stack == barStackIndex.barStack) {
+              dataset.data.forEach(dataObject => {
+                dataObject[this.indexAxis] = barStackIndex.index;
+              });
+            }
+          })
+        }
+      });
+
+      options.plugins.tooltip.callbacks = {
+        title: function (tooltipItems) {
+          return tooltipItems.length > 0 ? tooltipItems[0].dataset.stack : undefined;
+        }
+      }
+    }
+  }
+
   private repaint(chartData) {
     if (this.chart) {
       this.chart.destroy();

frontend/src/ts/ervu_business_metrics/component/chart/model/BarPositions.ts

@@ -0,0 +1,8 @@
+import {BarStackIndex} from "./BarStackIndex";
+
+export class BarPositions {
+  public barThickness: number;
+  public max: number;
+  public min: number;
+  public barStackIndexes: BarStackIndex[];
+}

frontend/src/ts/ervu_business_metrics/component/chart/model/BarStackIndex.ts

@@ -0,0 +1,8 @@
+import {NotNull} from "@webbpm/base-package";
+
+export class BarStackIndex {
+  @NotNull()
+  public barStack: string;
+  @NotNull()
+  public index: number;
+}

frontend/src/ts/ervu_business_metrics/component/chart/model/ChartBarSettings.ts

@@ -1,7 +1,11 @@
+import {AdvancedProperty} from "@webbpm/base-package";
 import {AxisSettings} from "./AxisSettings";
+import {BarPositions} from "./BarPositions";
 
 export class ChartBarSettings {
   public shadowBar: string;
   public x: AxisSettings;
   public y: AxisSettings;
+  @AdvancedProperty()
+  public barPositions: BarPositions;
 }