@eclipse-scout/chart 24.1.15 → 24.2.0-beta.2

package/dist/eclipse-scout-chart.js

@@ -607,7 +607,8 @@ _defineProperty(AbstractSvgChartRenderer, "FONT_SIZE_BIG", 'bigFont');
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Chart: () => (/* binding */ Chart)
+/* harmony export */   Chart: () => (/* binding */ Chart),
+/* harmony export */   ChartColorMode: () => (/* binding */ ChartColorMode)
 /* harmony export */ });
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index */ "./src/index.ts");
 /* harmony import */ var _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @eclipse-scout/core */ "@eclipse-scout/core");
@@ -724,6 +725,7 @@ class Chart extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_1__.Widget {
       type: Chart.Type.PIE,
       options: {
         autoColor: true,
+        colorMode: ChartColorMode.AUTO,
         colorScheme: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_1__.colorSchemes.ColorSchemeId.DEFAULT,
         transparent: false,
         maxSegments: 5,
@@ -949,6 +951,9 @@ class Chart extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_1__.Widget {
     });
   }
 }
+/**
+ * Determines what parts of the chart data is colored with the same colors.
+ */
 _defineProperty(Chart, "Type", {
   PIE: 'pie',
   LINE: 'line',
@@ -975,6 +980,21 @@ _defineProperty(Chart, "Position", {
 _defineProperty(Chart, "DEFAULT_ANIMATION_DURATION", 600);
 // ms
 _defineProperty(Chart, "DEFAULT_DEBOUNCE_TIMEOUT", 100);
+var ChartColorMode;
+(function (ChartColorMode) {
+  /**
+   * Uses one of the other options depending on the chart type.
+   */
+  ChartColorMode["AUTO"] = "auto";
+  /**
+   * Uses a different color for each dataset.
+   */
+  ChartColorMode["DATASET"] = "dataset";
+  /**
+   * Uses a different color for each datapoint in a dataset but the n-th datapoint in each dataset will be colored using the same color.
+   */
+  ChartColorMode["DATA"] = "data";
+})(ChartColorMode || (ChartColorMode = {}));
 
 /***/ }),
 
@@ -1158,9 +1178,9 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     this.numSupportedColors = 6;
     this.colorSchemeCssClass = '';
     this.minRadialChartDatalabelSpace = 25;
-    this._labelFormatter = this._formatLabel.bind(this);
-    this._xLabelFormatter = this._formatXLabel.bind(this);
-    this._yLabelFormatter = this._formatYLabel.bind(this);
+    this._labelFormatter = this._createLabelFormatter(this._formatLabel);
+    this._xLabelFormatter = this._createLabelFormatter(this._formatXLabel);
+    this._yLabelFormatter = this._createLabelFormatter(this._formatYLabel);
     this._xAxisFitter = this._fitXAxis.bind(this);
     this._yAxisFitter = this._fitYAxis.bind(this);
     this._radialChartDatalabelsDisplayHandler = this._displayDatalabelsOnRadialChart.bind(this);
@@ -1852,8 +1872,8 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].z));
     } else if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) {
       return {
-        x: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].x)),
-        y: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].y))
+        x: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatXLabel(dataset.data[tooltipItem.dataIndex].x)),
+        y: _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatYLabel(dataset.data[tooltipItem.dataIndex].y))
       };
     }
     return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex]));
@@ -2104,6 +2124,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
           callback: this._labelFormatter
         },
         pointLabels: {
+          callback: this._labelFormatter,
           font: {
             size: chart_js__WEBPACK_IMPORTED_MODULE_1__.Chart.defaults.font.size
           }
@@ -2323,20 +2344,41 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       formatter: this._datalabelsFormatter
     }, plugins.datalabels);
   }
-  _formatLabel(label) {
-    return this._formatLabelMap(label, null, this._getNumberFormatter());
-  }
   _getNumberFormatter() {
-    if (this.chartJs && this.chartJs.config && this.chartJs.config.options) {
-      return this.chartJs.config.options.numberFormatter;
-    }
+    var _this$chartJs;
+    return (_this$chartJs = this.chartJs) === null || _this$chartJs === void 0 || (_this$chartJs = _this$chartJs.config) === null || _this$chartJs === void 0 || (_this$chartJs = _this$chartJs.options) === null || _this$chartJs === void 0 ? void 0 : _this$chartJs.numberFormatter;
+  }
+  /**
+   * Creates an unbound function that calls the given formatter on this {@link ChartJsRenderer}. The context of this
+   * unbound function is passed to the formatter as argument.
+   */
+  _createLabelFormatter(formatter) {
+    const renderer = this;
+    return function (label) {
+      return formatter.call(renderer, label, this);
+    };
+  }
+  _formatLabel(label, scale) {
+    label = this._formatCategory(label, scale);
+    return this._formatLabelMap(label, null, this._getNumberFormatter());
   }
-  _formatXLabel(label) {
+  _formatXLabel(label, scale) {
+    label = this._formatCategory(label, scale);
     return this._formatLabelMap(label, this._getXLabelMap(), this._getNumberFormatter());
   }
-  _formatYLabel(label) {
+  _formatYLabel(label, scale) {
+    label = this._formatCategory(label, scale);
     return this._formatLabelMap(label, this._getYLabelMap(), this._getNumberFormatter());
   }
+  /**
+   * Uses the given scale to format the given label iff it is a {@link CategoryScale}.
+   */
+  _formatCategory(label, scale) {
+    if (scale instanceof chart_js__WEBPACK_IMPORTED_MODULE_1__.CategoryScale && _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.numbers.isNumber(label)) {
+      return scale.getLabelForValue(label);
+    }
+    return label;
+  }
   _getXLabelMap() {
     return this._getLabelMap('xLabelMap');
   }
@@ -2499,7 +2541,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.BUBBLE) {
       return this._formatLabel(value.z);
     } else if (config.type === _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.SCATTER) {
-      return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.join(' / ', this._formatLabel(value.x), this._formatLabel(value.y));
+      return _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.strings.join(' / ', this._formatXLabel(value.x), this._formatYLabel(value.y));
     }
     return this._formatLabel(value);
   }
@@ -2528,7 +2570,8 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       type = config.type,
       autoColor = config.options && config.options.autoColor,
       checkable = config.options && config.options.checkable,
-      multipleColorsPerDataset = autoColor && _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA),
+      colorMode = config.options && config.options.colorMode,
+      multipleColorsPerDataset = autoColor && (colorMode === _index__WEBPACK_IMPORTED_MODULE_0__.ChartColorMode.DATASET ? false : colorMode === _index__WEBPACK_IMPORTED_MODULE_0__.ChartColorMode.DATA ? true : _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__.scout.isOneOf(type, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.PIE, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.DOUGHNUT, _index__WEBPACK_IMPORTED_MODULE_0__.Chart.Type.POLAR_AREA)),
       colors = {
         backgroundColors: [],
         borderColors: [],
@@ -3582,7 +3625,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -3599,6 +3642,7 @@ class ChartLayout extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.Abstr
     this.chart = chart;
   }
   layout($container) {
+    var _this$chart$findParen;
     let opts = {
       requestAnimation: true,
       debounce: _index__WEBPACK_IMPORTED_MODULE_1__.Chart.DEFAULT_DEBOUNCE_TIMEOUT,
@@ -3613,6 +3657,15 @@ class ChartLayout extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.Abstr
     if (!this.chart.session.ready) {
       opts.debounce = false;
     }
+    // Don't debounce if the chart is inside a tile that is being dragged so the state is correct immediately when it is dropped
+    if ((_this$chart$findParen = this.chart.findParent(_eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.Tile)) !== null && _this$chart$findParen !== void 0 && _this$chart$findParen.$container.hasClass('dragged')) {
+      opts.debounce = false;
+    }
+    // Ensure chart has the correct size right after the layout.
+    if (this.chart.chartRenderer instanceof _index__WEBPACK_IMPORTED_MODULE_1__.ChartJsRenderer) {
+      var _this$chart$chartRend;
+      (_this$chart$chartRend = this.chart.chartRenderer.chartJs) === null || _this$chart$chartRend === void 0 || _this$chart$chartRend.resize();
+    }
     this.chart.updateChart(opts);
   }
 }
@@ -5617,6 +5670,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   AbstractSvgChartRenderer: () => (/* reexport safe */ _chart_AbstractSvgChartRenderer__WEBPACK_IMPORTED_MODULE_7__.AbstractSvgChartRenderer),
 /* harmony export */   Chart: () => (/* reexport safe */ _chart_Chart__WEBPACK_IMPORTED_MODULE_1__.Chart),
 /* harmony export */   ChartAdapter: () => (/* reexport safe */ _chart_ChartAdapter__WEBPACK_IMPORTED_MODULE_2__.ChartAdapter),
+/* harmony export */   ChartColorMode: () => (/* reexport safe */ _chart_Chart__WEBPACK_IMPORTED_MODULE_1__.ChartColorMode),
 /* harmony export */   ChartField: () => (/* reexport safe */ _form_fields_chartfield_ChartField__WEBPACK_IMPORTED_MODULE_17__.ChartField),
 /* harmony export */   ChartFieldAdapter: () => (/* reexport safe */ _form_fields_chartfield_ChartFieldAdapter__WEBPACK_IMPORTED_MODULE_18__.ChartFieldAdapter),
 /* harmony export */   ChartFieldTile: () => (/* reexport safe */ _tile_ChartFieldTile__WEBPACK_IMPORTED_MODULE_20__.ChartFieldTile),
@@ -5733,7 +5787,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -6365,7 +6419,9 @@ class ChartTableControl extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__
         let label,
           keyX = xAxis[x];
         if (xAxis.column instanceof _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.NumberColumn) {
-          label = keyX;
+          // the axis will format numbers as two digit decimals and null/undefined as the text '-empty-' or something similar
+          // only pass null/undefined to the axis as we want to leave the number format to the chart but need the '-empty-' string
+          label = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.objects.isNullOrUndefined(keyX) ? xAxis.format(keyX) : keyX;
         } else {
           label = this._handleIconLabel(xAxis.format(keyX), xAxis, iconClasses);
         }