@eclipse-scout/chart 22.0.39 → 23.1.0-beta.4

package/src/chart/{SpeedoChartRenderer.js → SpeedoChartRenderer.ts}

@@ -1,20 +1,35 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {numbers, RoundingMode} from '@eclipse-scout/core';
-import {AbstractSvgChartRenderer} from '../index';
+import {EnumObject, numbers, RoundingMode} from '@eclipse-scout/core';
+import {AbstractSvgChartRenderer, Chart} from '../index';
 
-export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
+export class SpeedoChartRenderer extends AbstractSvgChartRenderer {
 
-  constructor(chart) {
+  segmentSelectorForAnimation: string;
+
+  r: number;
+  scaleWeight: number;
+  my: number;
+  parts: number;
+  numSegmentsPerPart: number;
+  segmentWidth: number;
+  widthOfSegmentWithGap: number;
+  animationTriggered: boolean;
+
+  $filledParts: JQuery<SVGElement>[];
+  $pointer: JQuery<SVGElement>;
+
+  constructor(chart: Chart) {
     super(chart);
+
     this.segmentSelectorForAnimation = '.pointer';
     this.suppressLegendBox = true;
 
@@ -32,7 +47,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
     LEFT: 'left',
     CENTER: 'center',
     RIGHT: 'right'
-  };
+  } as const;
 
   static NUM_PARTS_GREEN_CENTER = 7;
   static NUM_PARTS_GREEN_EDGE = 4;
@@ -47,7 +62,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
 
   static SEGMENT_GAP = 0.0103; // space between two segments (lines)
 
-  _validate() {
+  protected override _validate(): boolean {
     let chartData = this.chart.data;
     let chartConfig = this.chart.config;
     if (!chartData ||
@@ -61,11 +76,11 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
     return true;
   }
 
-  _renderInternal() {
+  protected override _renderInternal() {
     let chartData = this.chart.data,
-      minValue = chartData.chartValueGroups[0].values[0],
-      maxValue = chartData.chartValueGroups[0].values[2],
-      value = chartData.chartValueGroups[0].values[1];
+      minValue = chartData.chartValueGroups[0].values[0] as number,
+      maxValue = chartData.chartValueGroups[0].values[2] as number,
+      value = chartData.chartValueGroups[0].values[1] as number;
 
     // radius of the scale
     this.r = Math.min(this.chartBox.height, this.chartBox.width / 2) * 0.7;
@@ -95,10 +110,10 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
     this.widthOfSegmentWithGap = this.segmentWidth + SpeedoChartRenderer.SEGMENT_GAP;
 
     // pointer value in range [0,1]
-    let valuePercentage = this._limitValue((value - minValue) / (maxValue - minValue), 1);
+    let valuePercentage = this._getValuePercentage(value, minValue, maxValue);
 
-    // value in the range [0,1] rounded to one segment
-    let segmentToPointAt = Math.round(valuePercentage * numTotalGaps);
+    // value in the range [0,numTotalSegments - 1] rounded to one segment
+    let segmentToPointAt = this._getSegmentToPointAt(valuePercentage, numTotalSegments);
 
     // value rounded to the closest segment so that the pointer never stays "in between" two segments but always on a segment
     let valuePercentageRounded = this._getPercentageValueOfSegment(segmentToPointAt % this.numSegmentsPerPart,
@@ -113,11 +128,19 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
 
     this.$svg.addClass('speedo-chart-svg');
     if (this.chart.config.options.clickable) {
-      this.$svg.on('click', this._createClickObject(null, null), this.chart._onValueClick.bind(this.chart));
+      this.$svg.on('click', this._createClickObject(null, null), e => this.chart.handleValueClick(e.data));
     }
   }
 
-  _limitValue(value, maxValue) {
+  protected _getValuePercentage(value: number, minValue: number, maxValue: number): number {
+    return this._limitValue((value - minValue) / (maxValue - minValue), 1);
+  }
+
+  protected _getSegmentToPointAt(valuePercentage: number, numTotalSegments: number): number {
+    return this._limitValue(Math.floor(valuePercentage * numTotalSegments), numTotalSegments - 1);
+  }
+
+  protected _limitValue(value: number, maxValue: number): number {
     value = Math.max(value, 0); // cannot be < 0
     value = Math.min(value, maxValue); // cannot be > maxValue
     return value;
@@ -126,7 +149,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
   /**
    * Gets the percentage value in range [0,1] of the specified segment.
    */
-  _getPercentageValueOfSegment(segmentIndexInPart, part) {
+  protected _getPercentageValueOfSegment(segmentIndexInPart: number, part: number): number {
     // get the segment position
     let pointerRange = this._calcSegmentPos(segmentIndexInPart, part);
 
@@ -140,7 +163,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
   /**
    * Renders the pointer line and registers animation to move the pointer and the corresponding filling of the segments
    */
-  _renderPointer(valuePercentage) {
+  protected _renderPointer(valuePercentage: number) {
     this.$pointer = this.$svg.appendSVG('path', 'pointer')
       .attr('d', this._pathPointer(0))
       .attr('data-end', valuePercentage)
@@ -168,7 +191,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
   /**
    * renders a single segment line.
    */
-  _renderSegment(from, to, colorClass) {
+  protected _renderSegment(from: number, to: number, colorClass: string): JQuery<SVGElement> {
     return this.$svg.appendSVG('path', 'speedo-chart-arc ' + colorClass)
       .attr('id', 'ArcAxisWide' + this.chart.id)
       .attr('fill', 'none')
@@ -176,7 +199,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
       .attr('d', this._pathSegment(from, to));
   }
 
-  _renderCirclePart(part) {
+  protected _renderCirclePart(part: number) {
     let colorClass = this._getColorForPart(part);
     // render 'empty' segments
     for (let i = 0; i < this.numSegmentsPerPart; i++) {
@@ -188,7 +211,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
     this.$filledParts.push(this._renderSegment(SpeedoChartRenderer.ARC_MIN, SpeedoChartRenderer.ARC_MIN, colorClass)); // 'filled' segments. invisible by default
   }
 
-  _renderLegend(minValue, value, maxValue, groupName) {
+  protected _renderLegend(minValue: number, value: number, maxValue: number, groupName: string) {
     let minMaxLegendFontSize = this.scaleWeight * 0.8,
       padding = 5, // same as in AbstractChartRenderer#_renderWireLegend
       labelYPos = this.my + padding,
@@ -202,7 +225,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
         h: 1
       },
       minLegendValue = minValue ? this._formatValue(minValue) : 0,
-      legendValue = value ? this._formatValue(value) : 0,
+      legendValue = value ? this._formatValue(value) : '' + 0,
       maxLegendValue = maxValue ? this._formatValue(maxValue) : 0;
 
     // tooltip for min/max value
@@ -231,8 +254,8 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
       };
       mouseOut();
       this.$svg
-        .mouseenter(mouseIn)
-        .mouseleave(mouseOut);
+        .on('mouseenter', mouseIn)
+        .on('mouseleave', mouseOut);
     }
 
     // actual value
@@ -246,7 +269,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
   /**
    * returns the part index for the specified valuePercentage. The valuePercentage must be in the range [0,1].
    */
-  _getPartForValue(valuePercentage) {
+  protected _getPartForValue(valuePercentage: number): number {
     let part = Math.floor(valuePercentage * this.parts);
     return this._limitValue(part, this.parts - 1);
   }
@@ -258,7 +281,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
    * 10 to 999 thousand: 123k
    * >= 1 million: millions with max. two fraction digits -> 1.23M
    */
-  _formatValue(value) {
+  protected _formatValue(value: number): string {
     if (value < SpeedoChartRenderer.TEN_THOUSAND) {
       return this.session.locale.decimalFormat.format(value);
     }
@@ -273,7 +296,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
   /**
    * Updates the pointer position to point to the specified valuePercentage in range [0,1].
    */
-  _updatePointer(valuePercentage) {
+  protected _updatePointer(valuePercentage: number) {
     this.$pointer
       .attr('d', this._pathPointer(valuePercentage))
       .removeClass('red yellow light-green dark-green')
@@ -283,13 +306,13 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
   /**
    * Updates the filling of the 'filled' segments to be filled up to the specified valuePercentage in range [0,1].
    */
-  _updatePartsFill(valuePercentage) {
+  protected _updatePartsFill(valuePercentage: number) {
     let from, to;
     for (let part = 0; part < this.$filledParts.length; part++) {
-      from = this._calcSegmentPos(0, part, this.segmentWidth).from;
+      from = this._calcSegmentPos(0, part).from;
       if ((part + 1) / this.parts < valuePercentage) {
         // the current part is smaller than the value: completely filled part
-        to = this._calcSegmentPos(this.numSegmentsPerPart - 1, part, this.segmentWidth).to;
+        to = this._calcSegmentPos(this.numSegmentsPerPart - 1, part).to;
       } else if (part / this.parts > valuePercentage) {
         // the current part is bigger than the speedo-value: hide element
         from = SpeedoChartRenderer.ARC_MIN;
@@ -307,7 +330,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
    * @param segmentIndexInPart the index of the segment line within the part.
    * @param part the part index.
    */
-  _calcSegmentPos(segmentIndexInPart, part) {
+  protected _calcSegmentPos(segmentIndexInPart: number, part: number): { from: number; to: number } {
     let result = {
       from: 0,
       to: 0
@@ -318,7 +341,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
     return result;
   }
 
-  _getColorForPart(part) {
+  protected _getColorForPart(part: number): string {
     let position = this.chart.config.options.speedo.greenAreaPosition;
     switch (position) {
       case SpeedoChartRenderer.Position.LEFT:
@@ -370,7 +393,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
   /**
    * calculates the path-values to be used in the 'd' attribute of the path tag for a segment.
    */
-  _pathSegment(start, end) {
+  protected _pathSegment(start: number, end: number): string {
     let s = start * 2 * Math.PI,
       e = end * 2 * Math.PI,
       pathString = '';
@@ -390,7 +413,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
   /**
    * calculates the path-values to be used in the 'd' attribute of the path tag for the pointer
    */
-  _pathPointer(valuePercentage) {
+  protected _pathPointer(valuePercentage: number): string {
     let point = SpeedoChartRenderer.ARC_RANGE * valuePercentage - SpeedoChartRenderer.ARC_MAX;
     let s = point * 2 * Math.PI,
       pointerOuterR = this.r - (1.4 * this.scaleWeight),
@@ -403,10 +426,7 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
     return pathString;
   }
 
-  /**
-   * @override
-   */
-  _removeAnimated(afterRemoveFunc) {
+  protected override _removeAnimated(afterRemoveFunc: (chartAnimationStopping?: boolean) => void) {
     if (this.animationTriggered) {
       return;
     }
@@ -429,3 +449,5 @@ export default class SpeedoChartRenderer extends AbstractSvgChartRenderer {
       });
   }
 }
+
+export type GreenAreaPosition = EnumObject<typeof SpeedoChartRenderer.Position>;

package/src/chart/{VennAsync3Calculator.js → VennAsync3Calculator.ts}

@@ -1,20 +1,44 @@
 /*
- * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {Device} from '@eclipse-scout/core';
 
 // place venn 3 by simulation
 // find angle and distance (to a) and radius where "error" is minimal
-export default class VennAsync3Calculator {
-
-  constructor(helper, venn1, venn2, venn3, u, v, w, uv, uw, vw, uvw, d12, d13, d23) {
+import {VennCircle, VennCircleHelper} from '../index';
+
+export class VennAsync3Calculator {
+  helper: VennCircleHelper;
+  venn1: VennCircle;
+  venn2: VennCircle;
+  venn3: VennCircle;
+  u: number;
+  v: number;
+  w: number;
+  uv: number;
+  uw: number;
+  vw: number;
+  uvw: number;
+
+  maxD: number;
+  dStep: number;
+  rStep: number;
+  alphaStep: number;
+
+  alphaBest: number;
+  dBest: number;
+  rBest: number;
+  errorBest: number;
+  callback: () => void;
+  cancelled: boolean;
+
+  constructor(helper: VennCircleHelper, venn1: VennCircle, venn2: VennCircle, venn3: VennCircle, u: number, v: number, w: number, uv: number, uw: number, vw: number, uvw: number, d12: number, d13: number, d23: number) {
     // if circles are empty, they are drawn as small circle, so: adjust u v w to find better errors
     if (u === 0 && uv === 0 && uw === 0 && uvw === 0) {
       u = 1;
@@ -38,13 +62,13 @@ export default class VennAsync3Calculator {
     this.vw = vw;
     this.uvw = uvw;
 
-    // step and ranges for loops
+    /** step and ranges for loops */
     this.maxD = this.venn1.r + 2 * this.venn2.r + 2 * this.venn1.r + this.helper.distR;
     this.dStep = this.maxD / 30;
     this.rStep = venn3.r / 4;
     this.alphaStep = Math.PI / 30;
 
-    // best vars (initialize with 0 so the optimizer knows that they are numbers)
+    /** best vars (initialize with 0 so the optimizer knows that they are numbers) */
     this.alphaBest = 0;
     this.dBest = 0;
     this.rBest = 0;
@@ -54,7 +78,7 @@ export default class VennAsync3Calculator {
     this.cancelled = false;
   }
 
-  start(callback) {
+  start(callback: () => void) {
     this.callback = callback;
     setTimeout(this._next.bind(this, 0));
   }
@@ -63,7 +87,7 @@ export default class VennAsync3Calculator {
     this.cancelled = true;
   }
 
-  _end() {
+  protected _end() {
     // set  x and y and r of  venn3
     this.venn3.x = this.venn1.x + this.dBest * Math.cos(this.alphaBest);
     this.venn3.y = this.venn1.y - this.dBest * Math.sin(this.alphaBest);
@@ -72,7 +96,7 @@ export default class VennAsync3Calculator {
     this.callback();
   }
 
-  _next(alpha) {
+  protected _next(alpha: number) {
     if (!this.cancelled) {
       // iterate
       this._iteration(alpha);
@@ -91,7 +115,7 @@ export default class VennAsync3Calculator {
     }
   }
 
-  _iteration(alpha) {
+  protected _iteration(alpha: number) {
     // optimize speed: no var lookup (should help the optimizer in general, and IE in particular)
     let maxD = this.maxD,
       dStep = this.dStep,
@@ -197,7 +221,7 @@ export default class VennAsync3Calculator {
     this.errorBest = errorBest;
   }
 
-  _error(u, total, a, aTotal) {
+  protected _error(u: number, total: number, a: number, aTotal: number): number {
     // be brutal if basic error
     if ((u === 0 && a !== 0) || (u !== 0 && a === 0)) {
       return 1000;

package/src/chart/{VennChartRenderer.js → VennChartRenderer.ts}

@@ -3,17 +3,41 @@
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {AbstractSvgChartRenderer, VennAsync3Calculator, VennCircle, VennCircleHelper} from '../index';
+import {AbstractSvgChartRenderer, Chart, VennAsync3Calculator, VennCircle, VennCircleHelper} from '../index';
 import $ from 'jquery';
-
-export default class VennChartRenderer extends AbstractSvgChartRenderer {
-
-  constructor(chart) {
+import {ChartValueGroup} from './Chart';
+import {LegendPositions} from './AbstractSvgChartRenderer';
+
+export class VennChartRenderer extends AbstractSvgChartRenderer {
+  animationTriggered: boolean;
+
+  data: ChartValueGroup[];
+  centerX: number;
+  centerY: number;
+  numberOfCircles: number;
+  readyToDraw: boolean;
+  wasCircle: boolean;
+
+  vennCircleHelper: VennCircleHelper;
+  async3Calculator: VennAsync3Calculator;
+
+  vennNumber1: VennCircle;
+  vennReal1: VennCircle;
+  vennNumber2: VennCircle;
+  vennReal2: VennCircle;
+  vennNumber3: VennCircle;
+  vennReal3: VennCircle;
+
+  $v1: JQuery<SVGElement>;
+  $v2: JQuery<SVGElement>;
+  $v3: JQuery<SVGElement>;
+
+  constructor(chart: Chart) {
     super(chart);
     this.animationTriggered = false;
     this.suppressLegendBox = true;
@@ -28,7 +52,7 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
     chart.config = $.extend(true, {}, defaultConfig, chart.config);
   }
 
-  _validate() {
+  protected override _validate(): boolean {
     let chartData = this.chart.data;
     if (!chartData ||
       chartData.axes.length !== 0 ||
@@ -39,12 +63,12 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
     return true;
   }
 
-  _renderInternal() {
+  protected override _renderInternal() {
     this.centerX = this.width / 2;
     this.centerY = this.height / 2;
 
     if (this.centerX === 0 || this.centerY === 0) {
-      return false;
+      return;
     }
 
     // basic values
@@ -56,7 +80,7 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
       maxR = Math.min(this.centerX, this.centerY),
       minR = maxR / 15,
       total = this.data.reduce((s, e) => {
-        return s + parseFloat(e.values[0]);
+        return s + (e.values[0] as number);
       }, 1);
 
     this.vennCircleHelper = new VennCircleHelper(distR, maxR, minR, total);
@@ -112,16 +136,16 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
     }
   }
 
-  remove(requestAnimation, afterRemoveFunc) {
+  override remove(requestAnimation = false, afterRemoveFunc?: (chartAnimationStopping?: boolean) => void) {
     this._cancelAsync3Calculator();
     super.remove(requestAnimation, afterRemoveFunc);
   }
 
   // calculation
 
-  _calc1(v1) {
+  protected _calc1(v1: VennCircle) {
     // set basic data
-    let a = this.data[0].values[0];
+    let a = this.data[0].values[0] as number;
 
     // calc sizes
     if (a > 0) {
@@ -138,11 +162,11 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
     v1.addLabel(a, v1.x, v1.y);
   }
 
-  _calc2(v1, v2, real) {
+  protected _calc2(v1: VennCircle, v2: VennCircle, real: boolean) {
     // set basic data
-    let a = this.data[0].values[0];
-    let b = this.data[1].values[0];
-    let ab = this.data[2].values[0];
+    let a = this.data[0].values[0] as number;
+    let b = this.data[1].values[0] as number;
+    let ab = this.data[2].values[0] as number;
     let d12;
 
     if (real) {
@@ -199,15 +223,15 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
     }
   }
 
-  _calc3(v1, v2, v3, real, callback) {
+  protected _calc3(v1: VennCircle, v2: VennCircle, v3: VennCircle, real: boolean, callback: () => void) {
     // set basic data
-    let a = this.data[0].values[0];
-    let b = this.data[1].values[0];
-    let c = this.data[2].values[0];
-    let ab = this.data[3].values[0];
-    let ac = this.data[4].values[0];
-    let bc = this.data[5].values[0];
-    let abc = this.data[6].values[0];
+    let a = this.data[0].values[0] as number;
+    let b = this.data[1].values[0] as number;
+    let c = this.data[2].values[0] as number;
+    let ab = this.data[3].values[0] as number;
+    let ac = this.data[4].values[0] as number;
+    let bc = this.data[5].values[0] as number;
+    let abc = this.data[6].values[0] as number;
 
     let d12, d13, d23;
 
@@ -279,7 +303,7 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
     }
   }
 
-  _cancelAsync3Calculator() {
+  protected _cancelAsync3Calculator() {
     if (this.async3Calculator) {
       this.async3Calculator.cancel();
       this.async3Calculator = null;
@@ -288,7 +312,7 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
 
   // drawing
 
-  _draw(animated, real) {
+  protected _draw(animated: boolean, real: boolean) {
     if (!this.rendered && !this.rendering) { // additional check, because this method might be called from a setTimeout()
       return;
     }
@@ -337,7 +361,7 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
   }
 
   // handling of circles
-  _createCircle(circleIndex, color, cssClass) {
+  protected _createCircle(circleIndex: number, color: string, cssClass: string): JQuery<SVGElement> {
     let $circle = this.$svg.appendSVG('circle', 'venn-circle')
       .attr('cx', this.centerX)
       .attr('cy', this.centerY)
@@ -358,14 +382,14 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
     }
 
     if (this.chart.config.options.clickable) {
-      $circle.on('click', this._createClickObject(null, circleIndex), this.chart._onValueClick.bind(this.chart));
+      $circle.on('click', this._createClickObject(null, circleIndex), e => this.chart.handleValueClick(e.data));
     }
 
     return $circle;
   }
 
   // handling of venn, label and legend
-  _updateVenn(venn, animated) {
+  protected _updateVenn(venn: VennCircle, animated: boolean) {
     // move circle
     venn.$circle
       .animateSVG('cx', this.centerX + venn.x, animated ? this.animationDuration : 0, null, true)
@@ -386,12 +410,12 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
       y2: y2,
       v: venn.legendV,
       h: venn.legendH
-    };
+    } as LegendPositions;
 
     this._renderWireLegend(venn.legend, legendPositions, 'venn-legend');
   }
 
-  _drawLabel(text, dx, dy, animated) {
+  protected _drawLabel(text: number, dx: number, dy: number, animated: boolean) {
     // draw label
     let $label = this.$svg.appendSVG('text', 'venn-label')
       .attr('x', this.centerX + dx)
@@ -407,7 +431,7 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
   }
 
   // handling of show/hide numbers
-  _show(event) {
+  protected _show(event: JQuery.MouseEventBase) {
     if (this.numberOfCircles === 1) {
       return; // Nothing to do for only one circle
     }
@@ -418,7 +442,7 @@ export default class VennChartRenderer extends AbstractSvgChartRenderer {
     // check if true enter or just from one circle to another
     let isCircle = toElement && $(toElement).hasClass('venn-circle');
     if (this.wasCircle && isCircle) {
-      return false;
+      return;
     }
     this.wasCircle = isCircle;
 

package/src/chart/{VennCircle.js → VennCircle.ts}

@@ -1,37 +1,37 @@
 /*
- * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-// circle
+export class VennCircle {
+  labels: Label[];
+  $circle: JQuery<SVGElement>;
+  x: number;
+  y: number;
+  r: number;
+  legend: string;
+  legendR: number;
+  legendH: -1 | 1;
+  legendV: -1 | 1;
 
-export default class VennCircle {
-
-  constructor($circle) {
+  constructor($circle: JQuery<SVGElement>) {
     this.$circle = $circle;
-    this.x;
-    this.y;
-    this.r;
-    this.legend;
-    this.legendR;
-    this.legendH;
-    this.legendV;
     this.labels = [];
   }
 
-  setLegend(legend, horizontal, vertical, r) {
+  setLegend(legend: string, horizontal: -1 | 1, vertical: -1 | 1, r?: number) {
     this.legend = legend;
     this.legendH = horizontal;
     this.legendV = vertical;
     this.legendR = r || this.r;
   }
 
-  addLabel(text, x, y) {
+  addLabel(text: number, x: number, y: number) {
     this.labels.push({
       text: text,
       x: x,
@@ -39,3 +39,10 @@ export default class VennCircle {
     });
   }
 }
+
+export type Label = {
+  text: number;
+  x: number;
+  y: number;
+};
+