@eclipse-scout/chart 25.2.14 → 25.2.16

package/dist/eclipse-scout-chart.esm.js

@@ -303,12 +303,14 @@ class AbstractSvgChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_2__.Abstr
   width;
   chartAnimationStopping;
   $svg;
+  _nonValueClickHandler;
   constructor(chart) {
     super(chart);
     this.chartBox = null;
     this.clipId = 'Clip-' + _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.ObjectIdProvider.get().createUiSeqId();
     this.maskId = 'Mask-' + _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.ObjectIdProvider.get().createUiSeqId();
     this.suppressLegendBox = false;
+    this._nonValueClickHandler = this._onNonValueClick.bind(this);
   }
   static FONT_SIZE_SMALLEST = 'smallestFont';
   static FONT_SIZE_SMALL = 'smallFont';
@@ -320,6 +322,7 @@ class AbstractSvgChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_2__.Abstr
       _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.aria.role(this.$svg, 'img');
       // labeling has to be done here because otherwise the svg is ignored
       this.linkChartWithFieldLabel(this.$svg);
+      this.$svg.on('click', this._nonValueClickHandler);
     }
     this.firstOpaqueBackgroundColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_0__.styles.getFirstOpaqueBackgroundColor(this.$svg);
     // This works, because CSS specifies 100% width/height
@@ -407,6 +410,14 @@ class AbstractSvgChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_2__.Abstr
       datasetIndex: datasetIndex
     };
   }
+  _onChartValueClick(event) {
+    this.chart.handleValueClick(event.data, event.originalEvent);
+    event.stopPropagation();
+  }
+  _onNonValueClick(event) {
+    this.chart.handleNonValueClick(event.originalEvent);
+    event.stopPropagation();
+  }
   _measureText(text, legendLabelClass) {
     let $label = this.$svg.appendSVG('text', legendLabelClass).attr('x', 0).attr('y', 0).attr('visibility', 'hidden').text(text);
     let textBounds;
@@ -1035,6 +1046,17 @@ class Chart extends _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_1__.Widget {
       originalEvent
     });
   }
+  handleNonValueClick(originalEvent) {
+    this.trigger('nonValueClick', {
+      originalEvent
+    });
+  }
+  handleLegendClick(legentItemIndex, originalEvent) {
+    this.trigger('legendItemClick', {
+      legendItemIndex: legentItemIndex,
+      originalEvent: originalEvent
+    });
+  }
 }
 /**
  * Determines what parts of the chart data is colored with the same colors.
@@ -1233,6 +1255,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
   _tooltip;
   _tooltipTimeoutId;
   _updatingDatalabels;
+  _hoveringClickableElement;
   constructor(chart) {
     super(chart);
     this.chartJs = null;
@@ -1333,6 +1356,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
   _render() {
     if (!this.$canvas) {
       this.$canvas = this.chart.$container.appendElement('<canvas>');
+      this.$canvas.on('click', this._onCanvasClick.bind(this));
       _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_3__.aria.hidden(this.$canvas, true); // aria not supported yet
     }
     this.firstOpaqueBackgroundColor = _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_3__.styles.getFirstOpaqueBackgroundColor(this.$canvas);
@@ -3127,12 +3151,24 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       legend.onLeave = this._legendLeaveHandler;
     }
   }
+  _onCanvasClick(event) {
+    // Clicks on e.g. the axes don't trigger the onClickHandler of the chartJs Chart.
+    // To register additional actions depending on the area clicked and to cover the whole canvas, the clicks outside an element must already be processed here.
+    // If no item is present, a click in the chart but outside an element was made and a corresponding event gets triggered.
+    // Clicks on elements are handled in a separate method (see this#_onClick)
+    if (!this._hoveringClickableElement) {
+      this.chart.handleNonValueClick(event.originalEvent);
+    }
+    event.originalEvent.stopPropagation();
+  }
   _onClick(event, items) {
     if (!items.length) {
+      this.chart.handleNonValueClick(event.native);
       return;
     }
     let relevantItem = this._selectRelevantItem(items);
     if (this._isMaxSegmentsExceeded(this.chartJs.config, relevantItem.index)) {
+      this.chart.handleNonValueClick(event.native);
       return;
     }
     let itemIndex = relevantItem.index,
@@ -3200,13 +3236,16 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       return;
     }
     if (items.length && !this._isMaxSegmentsExceeded(this.chartJs.config, items[0].index)) {
+      this._hoveringClickableElement = true;
       this.$canvas.css('cursor', 'pointer');
     } else {
+      this._hoveringClickableElement = false;
       this.$canvas.css('cursor', 'default');
     }
   }
   _onLegendClick(e, legendItem, legend) {
     if (!this.chartJs.config || !this.chartJs.config.type) {
+      this.chart.handleNonValueClick(e.native);
       return;
     }
     let type = this.chartJs.config.type,
@@ -3222,6 +3261,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
       isDatasetVisible: i => this.chartJs.getDatasetMeta(i).visible
     });
     this.refresh();
+    this.chart.handleLegendClick(legendItem.datasetIndex, e.native);
   }
   _onLegendHover(e, legendItem, legend) {
     let index = legendItem.datasetIndex,
@@ -3248,6 +3288,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     if (!this.rendered || this.removing) {
       return;
     }
+    this._hoveringClickableElement = true;
     this.$canvas.css('cursor', 'pointer');
   }
   _onLegendLeave(e, legendItem, legend) {
@@ -3304,6 +3345,7 @@ class ChartJsRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractChartR
     if (!this.rendered || this.removing) {
       return;
     }
+    this._hoveringClickableElement = false;
     this.$canvas.css('cursor', 'default');
   }
   _updateHoverStyle(datasetIndex, enabled) {
@@ -3875,7 +3917,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! jquery */ "jquery");
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_2__);
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -3957,7 +3999,7 @@ class FulfillmentChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_1__.Abstr
     .attr('dy', '0.3em') // workaround for 'dominant-baseline: central' which is not supported in IE
     .attrXLINK('href', '#InnerCircle').text(percentage + '%');
     if (this.chart.config.options.clickable) {
-      $arc.on('click', this._createClickObject(null, null), e => this.chart.handleValueClick(e.data));
+      $arc.on('click', this._createClickObject(null, null), this._onChartValueClick.bind(this));
     }
     if (!this.chart.config.options.autoColor && !chartGroupCss) {
       $arc.attr('fill', color);
@@ -4054,7 +4096,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! jquery */ "jquery");
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_2__);
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -4264,7 +4306,7 @@ class SalesfunnelChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_1__.Abstr
       }, this._createAnimationObjectWithTabIndexRemoval(expandFunc, this.animationDuration));
     }
     if (this.chart.config.options.clickable) {
-      $poly.on('click', renderPolyOptions.clickObject, e => this.chart.handleValueClick(e.data));
+      $poly.on('click', renderPolyOptions.clickObject, this._onChartValueClick.bind(this));
     }
     if (renderPolyOptions.fill) {
       $poly.attr('fill', renderPolyOptions.fill);
@@ -4432,7 +4474,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, 2025 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -4526,7 +4568,8 @@ class SpeedoChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_1__.AbstractSv
     this._renderLegend(minValue, value, maxValue, chartData.chartValueGroups[0].groupName);
     this.$svg.addClass('speedo-chart-svg');
     if (this.chart.config.options.clickable) {
-      this.$svg.on('click', this._createClickObject(null, null), e => this.chart.handleValueClick(e.data));
+      this.$svg.off('click', this._nonValueClickHandler);
+      this.$svg.on('click', this._createClickObject(null, null), this._onChartValueClick.bind(this));
     }
   }
   _getValuePercentage(value, minValue, maxValue) {
@@ -5024,7 +5067,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _eclipse_scout_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @eclipse-scout/core */ "@eclipse-scout/core");
 /*
- * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -5339,7 +5382,7 @@ class VennChartRenderer extends _index__WEBPACK_IMPORTED_MODULE_0__.AbstractSvgC
       $circle.attr('fill', color);
     }
     if (this.chart.config.options.clickable) {
-      $circle.on('click', this._createClickObject(null, circleIndex), e => this.chart.handleValueClick(e.data));
+      $circle.on('click', this._createClickObject(null, circleIndex), this._onChartValueClick.bind(this));
     }
     return $circle;
   }