Merge pull request #32578 from ufundo/chartkit-cleanup

[REF] Chartkit minor code improvements

ext/chart_kit/ang/crmChartKit/chartTypes/chartKitPie.service.js

@@ -29,7 +29,7 @@
     showLegend: (displayCtrl) => (displayCtrl.settings.showLegend && displayCtrl.settings.showLegend !== 'none'),
 
     // for pie chart the legend is showing column values, which benefit from rendering
-    legendTextAccessor: (displayCtrl) => ((d) => (d.name === 'Others') ? 'Others' : displayCtrl.renderColumnValue(d.data, displayCtrl.getXColumn())),
+    legendTextAccessor: (displayCtrl) => ((d) => (d.name === 'Others') ? 'Others' : displayCtrl.renderColumnValue(d.data, displayCtrl.getFirstColumnForAxis('x'))),
 
     getInitialDisplaySettings: () => ({
       showLegend: 'left',

ext/chart_kit/ang/crmChartKit/chartTypes/chartKitSeries.service.js

@@ -39,7 +39,7 @@
     showLegend: (displayCtrl) => (displayCtrl.settings.showLegend && displayCtrl.settings.showLegend !== 'none'),
 
     // the legend gets the series "name", which is the delisted value of the series column
-    legendTextAccessor: (displayCtrl) => ((d) => displayCtrl.renderDataValue(d.name, displayCtrl.getColumnsForAxis('w')[0])),
+    legendTextAccessor: (displayCtrl) => ((d) => displayCtrl.renderDataValue(d.name, displayCtrl.getFirstColumnForAxis('w'))),
 
     // fallback to a line chart if we dont have a grouping column yet
     getChartConstructor: (displayCtrl) => displayCtrl.getColumnsForAxis('w') ? dc.seriesChart : dc.lineChart,
@@ -48,8 +48,8 @@
       // we need to add the series values in the dimension or they will get
       // aggregated
       displayCtrl.dimension = displayCtrl.ndx.dimension((d) => {
-        const xValue = d[displayCtrl.getXColumn().index];
-        const seriesCol = displayCtrl.getColumnsForAxis('w').length ? displayCtrl.getColumnsForAxis('w')[0] : null;
+        const xValue = d[displayCtrl.getFirstColumnForAxis('x').index];
+        const seriesCol = displayCtrl.getFirstColumnForAxis('w');
         const seriesVal = seriesCol ? d[seriesCol.index] : null;
 
         // we use a string separator rather than array to
@@ -63,7 +63,7 @@
       displayCtrl.chart
         .dimension(displayCtrl.dimension)
         .group(displayCtrl.group)
-        .valueAccessor(displayCtrl.getValueAccessor(displayCtrl.getColumnsForAxis('y')[0]))
+        .valueAccessor(displayCtrl.getValueAccessor(displayCtrl.getFirstColumnForAxis('y')))
         .keyAccessor((d) => d.key[0])
         .seriesAccessor((d) => d.key[1]);
 

ext/chart_kit/ang/crmChartKit/crmSearchDisplayChartKit.component.js

@@ -39,7 +39,7 @@
       };
 
       this.alwaysSortByXAscending = () => {
-        this._currentSortKey = this.getXColumn().key;
+        this._currentSortKey = this.getFirstColumnForAxis('x').key;
         // always sort the query by X axis - we can handle differently when we pass to d3
         // but this is the only way to get magic that the server knows about the order
         // (like option groups / month order etc)
@@ -165,7 +165,7 @@
 
         // 99 times out of 100 the x axis will be column 0, but let's be sure
         // (assume there's only one x axis column)
-        const xColumnIndex = this.getXColumn().index;
+        const xColumnIndex = this.getFirstColumnForAxis('x').index;
         this.dimension = this.ndx.dimension((d) => d[xColumnIndex]);
       };
 
@@ -196,41 +196,33 @@
       };
 
       this.buildChart = () => {
-        // use override from chart type if defined - otherwise use a default
-        // based on chartType.getChartConstructor
+        if (!this.chartType.buildChart && !this.chartType.getChartConstructor) {
+          throw new Error('Chart type should implement buildChart or getChartConstructor');
+        }
+
         if (this.chartType.buildChart) {
           this.chartType.buildChart(this);
           return;
         }
 
-        if (this.chartType.getChartConstructor) {
-          this.chart = this.chartType.getChartConstructor(this)(this.chartContainer);
-
-          if (this.chartType.hasCoordinateGrid()) {
-            this.buildCoordinateGrid();
-          }
-
-          // load in cap if implemented by chart type
-          if (this.chart.cap) {
-            this.chart.cap(this.settings.maxSegments ? this.settings.maxSegments : null);
-          }
-          // load in ordering if implement by chart type
-          if (this.chart.ordering) {
-            this.chart.ordering(this.getOrderAccessor());
-          }
+        this.chart = this.chartType.getChartConstructor(this)(this.chartContainer);
 
-          return;
+        if (this.chartType.hasCoordinateGrid()) {
+          this.buildCoordinateGrid();
         }
 
-        throw new Error('Chart type should implement buildChart or getChartConstructor');
+        // load in cap if implemented by chart type
+        if (this.chart.cap) {
+          this.chart.cap(this.settings.maxSegments ? this.settings.maxSegments : null);
+        }
+        // load in ordering if implement by chart type
+        if (this.chart.ordering) {
+          this.chart.ordering(this.getOrderAccessor());
+        }
       };
 
       this.buildCoordinateGrid = () => {
-        this.buildXAxis();
-      };
-
-      this.buildXAxis = () => {
-        const xCol = this.getXColumn();
+        const xCol = this.getFirstColumnForAxis('x');
         const xDomainValues = this.columnTotals[xCol.index];
         const min = Math.min(...xDomainValues);
         const max = Math.max(...xDomainValues);
@@ -269,7 +261,7 @@
             .dimension(this.dimension)
             .group(this.group)
             // default value is just the first y co-ordinate
-            .valueAccessor(this.getValueAccessor(this.getColumnsForAxis('y')[0]));
+            .valueAccessor(this.getValueAccessor(this.getFirstColumnForAxis('y')));
         }
       };
 
@@ -389,6 +381,8 @@
 
       this.getColumnsForAxis = (axisKey) => this.getColumns().filter((col) => col.axis === axisKey);
 
+      this.getFirstColumnForAxis = (axisKey) => this.getColumns().find((col) => col.axis === axisKey);
+
       /**
        * Get the reducer for a column, based on its reduceType key
        * ( defaults to returning the "list" reducer if reduceType isn't set )
@@ -405,8 +399,6 @@
         return col;
       });
 
-      this.getXColumn = () => this.getColumnsForAxis('x')[0];
-
       this.getOrderColumn = () => this.getColumns()[parseInt(this.settings.chartOrderColIndex ? this.settings.chartOrderColIndex : 0)];
 
       this.getOrderDirection = () => (this.settings.chartOrderDir ? this.settings.chartOrderDir : 'ASC');

ext/chart_kit/ang/crmChartKit/searchAdminDisplayChartKit.component.js

@@ -162,7 +162,7 @@
         return this.getAxis(axisKey).sourceDataTypes;
       };
 
-      this.getAxisscaleTypeOptions = (axisKey) => {
+      this.getAxisScaleTypeOptions = (axisKey) => {
         return this.getAxis(axisKey).scaleTypes;
       };
 
@@ -223,8 +223,8 @@
         return dataType && ['Date', 'Time', 'Timestamp'].includes(dataType);
       };
 
-      this.getColumnscaleTypeOptions = (col) => {
-        let options = this.getAxisscaleTypeOptions(col.axis);
+      this.getColumnScaleTypeOptions = (col) => {
+        let options = this.getAxisScaleTypeOptions(col.axis);
 
         // date is only valid if the column type is date
         if (this.getColumnSourceDataTypeIsDate(col)) {
@@ -346,7 +346,7 @@
 
       this.getColumnConfigOptionGetters = () => ({
         searchColumn: this.getColumnSearchColumnOptions,
-        scaleType: this.getColumnscaleTypeOptions,
+        scaleType: this.getColumnScaleTypeOptions,
         datePrecision: this.getColumnDatePrecisionOptions,
         reduceType: this.getColumnReduceTypeOptions,
         seriesType: this.getColumnSeriesTypeOptions,