@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.9

package/lib/esm/component/Chart/LineChart.mjs

@@ -1,9 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
@@ -14,94 +8,101 @@ import { HoverLine } from "../../Hover.mjs";
 import { minMax } from "../../utils.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-var LineChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
-  function LineChartComponent2() {
-    _classCallCheck(this, LineChartComponent2);
-    return _callSuper(this, LineChartComponent2, arguments);
-  }
-  _inherits(LineChartComponent2, _AbstractChart);
-  return _createClass(LineChartComponent2, [{
-    key: "xScale",
-    get: function get() {
-      var _this$asProps = this.asProps, xScale = _this$asProps.xScale, _this$asProps$marginY = _this$asProps.marginY, marginY = _this$asProps$marginY === void 0 ? 30 : _this$asProps$marginY, plotWidth = _this$asProps.plotWidth, data = _this$asProps.data, groupKey = _this$asProps.groupKey;
-      if (xScale) {
-        return xScale;
-      }
-      var testItem = data[0][groupKey];
-      var range = [marginY, plotWidth - this.plotPadding];
-      var domain = minMax(data, groupKey);
-      if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
-        return scaleTime(domain, range);
-      }
-      return scaleLinear(domain, range);
-    }
-  }, {
-    key: "yScale",
-    get: function get() {
-      var _this$asProps2 = this.asProps, yScale = _this$asProps2.yScale, _this$asProps2$margin = _this$asProps2.marginX, marginX = _this$asProps2$margin === void 0 ? 30 : _this$asProps2$margin, plotHeight = _this$asProps2.plotHeight;
-      if (yScale) {
-        return yScale;
-      }
-      var flatValues = _superPropGet(LineChartComponent2, "flatValues", this, 1);
-      var max = Math.max.apply(Math, _toConsumableArray(flatValues));
-      var min = Math.min.apply(Math, _toConsumableArray(flatValues));
-      return scaleLinear().range([plotHeight - marginX, this.plotPadding]).domain([min, max]);
+class LineChartComponent extends AbstractChart {
+  get xScale() {
+    const {
+      xScale,
+      marginY = 30,
+      plotWidth,
+      data,
+      groupKey
+    } = this.asProps;
+    if (xScale) {
+      return xScale;
     }
-  }, {
-    key: "renderChart",
-    value: function renderChart() {
-      var _this$asProps3 = this.asProps, groupKey = _this$asProps3.groupKey, curve = _this$asProps3.curve, showDots = _this$asProps3.showDots, area = _this$asProps3.area, areaCurve = _this$asProps3.areaCurve, onClickLine = _this$asProps3.onClickLine;
-      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
-      return dataDefinitions.map(function(item, index) {
-        return item.checked && /* @__PURE__ */ React.createElement(Line, {
-          x: groupKey.toString(),
-          y: item.id,
-          key: item.id,
-          color: item.color,
-          transparent: highlightedLine !== -1 && highlightedLine !== index,
-          curve,
-          onClick: onClickLine
-        }, showDots && /* @__PURE__ */ React.createElement(Line.Dots, {
-          display: true
-        }), (area === null || area === void 0 ? void 0 : area[item.id]) && /* @__PURE__ */ React.createElement(Line.Area, {
-          area: area[item.id],
-          y0: "y0",
-          y1: "y1",
-          curve: areaCurve
-        }));
-      });
+    const testItem = data[0][groupKey];
+    const range = [marginY, plotWidth - this.plotPadding];
+    const domain = minMax(data, groupKey);
+    if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
+      return scaleTime(domain, range);
     }
-  }, {
-    key: "renderTooltip",
-    value: function renderTooltip() {
-      var _this = this;
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey;
-      return /* @__PURE__ */ React.createElement(HoverLine.Tooltip, {
-        x: groupKey,
-        wMin: 100
-      }, function(_ref) {
-        var xIndex = _ref.xIndex;
-        var dataItem = data[xIndex];
-        return {
-          children: _this.getTooltipChildren({
-            Tooltip: HoverLine.Tooltip,
-            dataItem
-          })
-        };
-      });
-    }
-  }, {
-    key: "getLegendAriaLabel",
-    value: function getLegendAriaLabel() {
-      return this.asProps.getI18nText("legendForChart", {
-        chartType: "Line"
-      });
+    return scaleLinear(domain, range);
+  }
+  get yScale() {
+    const {
+      yScale,
+      marginX = 30,
+      plotHeight
+    } = this.asProps;
+    if (yScale) {
+      return yScale;
     }
-  }]);
-})(AbstractChart);
+    const flatValues = super.flatValues;
+    const max = Math.max(...flatValues);
+    const min = Math.min(...flatValues);
+    return scaleLinear().range([plotHeight - marginX, this.plotPadding]).domain([min, max]);
+  }
+  renderChart() {
+    const {
+      groupKey,
+      curve,
+      showDots,
+      area,
+      areaCurve,
+      onClickLine
+    } = this.asProps;
+    const {
+      dataDefinitions,
+      highlightedLine
+    } = this.state;
+    return dataDefinitions.map((item, index) => {
+      return item.checked && /* @__PURE__ */ React.createElement(Line, {
+        x: groupKey.toString(),
+        y: item.id,
+        key: item.id,
+        color: item.color,
+        transparent: highlightedLine !== -1 && highlightedLine !== index,
+        curve,
+        onClick: onClickLine
+      }, showDots && /* @__PURE__ */ React.createElement(Line.Dots, {
+        display: true
+      }), (area == null ? void 0 : area[item.id]) && /* @__PURE__ */ React.createElement(Line.Area, {
+        area: area[item.id],
+        y0: "y0",
+        y1: "y1",
+        curve: areaCurve
+      }));
+    });
+  }
+  renderTooltip() {
+    const {
+      data,
+      groupKey
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(HoverLine.Tooltip, {
+      x: groupKey,
+      wMin: 100
+    }, ({
+      xIndex
+    }) => {
+      const dataItem = data[xIndex];
+      return {
+        children: this.getTooltipChildren({
+          Tooltip: HoverLine.Tooltip,
+          dataItem
+        })
+      };
+    });
+  }
+  getLegendAriaLabel() {
+    return this.asProps.getI18nText("legendForChart", {
+      chartType: "Line"
+    });
+  }
+}
 _defineProperty(LineChartComponent, "displayName", "Chart.Line");
 _defineProperty(LineChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
-var LineChart = createComponent(LineChartComponent);
+const LineChart = createComponent(LineChartComponent);
 export {
   LineChart
 };

package/lib/esm/component/Chart/RadarChart.mjs

@@ -1,9 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
@@ -12,101 +6,91 @@ import React from "react";
 import { AbstractChart } from "./AbstractChart.mjs";
 import Radar from "../../Radar.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-var RadarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
-  function RadarChartComponent2() {
-    _classCallCheck(this, RadarChartComponent2);
-    return _callSuper(this, RadarChartComponent2, arguments);
+class RadarChartComponent extends AbstractChart {
+  renderChart() {
+    const {
+      groupKey,
+      showDots,
+      circle,
+      onClickRadar
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    return /* @__PURE__ */ React.createElement(Radar, {
+      onClick: onClickRadar,
+      scale: this.xScale,
+      type: circle ? "circle" : void 0
+    }, /* @__PURE__ */ React.createElement(Radar.Axis, {
+      dataKey: groupKey
+    }, /* @__PURE__ */ React.createElement(Radar.Axis.Ticks, null), /* @__PURE__ */ React.createElement(Radar.Axis.Labels, null)), this.renderRadarTooltip(), dataDefinitions.map((item) => {
+      return item.checked && /* @__PURE__ */ React.createElement(Radar.Polygon, {
+        dataKey: item.id,
+        key: item.id,
+        color: item.color
+      }, /* @__PURE__ */ React.createElement(Radar.Polygon.Line, null), showDots && /* @__PURE__ */ React.createElement(Radar.Polygon.Dots, null));
+    }));
   }
-  _inherits(RadarChartComponent2, _AbstractChart);
-  return _createClass(RadarChartComponent2, [{
-    key: "renderChart",
-    value: function renderChart() {
-      var _this$asProps = this.asProps, groupKey = _this$asProps.groupKey, showDots = _this$asProps.showDots, circle = _this$asProps.circle, onClickRadar = _this$asProps.onClickRadar;
-      var dataDefinitions = this.state.dataDefinitions;
-      return /* @__PURE__ */ React.createElement(Radar, {
-        onClick: onClickRadar,
-        scale: this.xScale,
-        type: circle ? "circle" : void 0
-      }, /* @__PURE__ */ React.createElement(Radar.Axis, {
-        dataKey: groupKey
-      }, /* @__PURE__ */ React.createElement(Radar.Axis.Ticks, null), /* @__PURE__ */ React.createElement(Radar.Axis.Labels, null)), this.renderRadarTooltip(), dataDefinitions.map(function(item) {
-        return item.checked && /* @__PURE__ */ React.createElement(Radar.Polygon, {
-          dataKey: item.id,
-          key: item.id,
-          color: item.color
-        }, /* @__PURE__ */ React.createElement(Radar.Polygon.Line, null), showDots && /* @__PURE__ */ React.createElement(Radar.Polygon.Dots, null));
-      }));
-    }
-  }, {
-    key: "renderRadarTooltip",
-    value: function renderRadarTooltip() {
-      var _this = this;
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, groupKey = _this$asProps2.groupKey, showTooltip = _this$asProps2.showTooltip;
-      var dataDefinitions = this.state.dataDefinitions;
-      if (!showTooltip) {
-        return null;
-      }
-      return /* @__PURE__ */ React.createElement(Radar.Tooltip, {
-        wMin: 100
-      }, function(_ref) {
-        var _data$groupKey;
-        var index = _ref.index;
-        return {
-          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radar.Tooltip.Title, null, (_data$groupKey = data[groupKey]) === null || _data$groupKey === void 0 ? void 0 : _data$groupKey[index]), dataDefinitions.map(function(item) {
-            var _data$item$id;
-            var value = (_data$item$id = data[item.id]) === null || _data$item$id === void 0 ? void 0 : _data$item$id[index];
-            return item.checked && /* @__PURE__ */ React.createElement(Radar.Tooltip.Dot, {
-              color: item.color,
-              key: item.id
-            }, _this.tooltipValueFormatter(value));
-          }))
-        };
-      });
-    }
-    // By default, tooltip will render in Plot component.
-    // In RadarChart, we need to render it in Radar component, so we use renderRadarTooltip method
-  }, {
-    key: "renderTooltip",
-    value: function renderTooltip() {
+  renderRadarTooltip() {
+    const {
+      data,
+      groupKey,
+      showTooltip
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    if (!showTooltip) {
       return null;
     }
-  }, {
-    key: "dataKeys",
-    get: function get() {
-      var _this$props = this.props, data = _this$props.data, groupKey = _this$props.groupKey;
-      var legendKeys = Object.keys(data).filter(function(key) {
-        return key !== groupKey;
-      });
-      return legendKeys;
-    }
-  }, {
-    key: "xScale",
-    get: function get() {
-      var _this$asProps$scale;
-      return (_this$asProps$scale = this.asProps.scale) !== null && _this$asProps$scale !== void 0 ? _this$asProps$scale : scaleLinear().domain(this.domain);
-    }
-  }, {
-    key: "yScale",
-    get: function get() {
-      var _this$asProps$scale2;
-      return (_this$asProps$scale2 = this.asProps.scale) !== null && _this$asProps$scale2 !== void 0 ? _this$asProps$scale2 : scaleLinear().domain(this.domain);
-    }
-  }, {
-    key: "getLegendAriaLabel",
-    value: function getLegendAriaLabel() {
-      return this.asProps.getI18nText("legendForChart", {
-        chartType: "Radar"
-      });
-    }
-  }, {
-    key: "domain",
-    get: function get() {
-      return [Math.min.apply(Math, _toConsumableArray(_superPropGet(RadarChartComponent2, "flatValues", this, 1))), Math.max.apply(Math, _toConsumableArray(_superPropGet(RadarChartComponent2, "flatValues", this, 1)))];
-    }
-  }]);
-})(AbstractChart);
+    return /* @__PURE__ */ React.createElement(Radar.Tooltip, {
+      wMin: 100
+    }, ({
+      index
+    }) => {
+      var _a;
+      return {
+        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radar.Tooltip.Title, null, (_a = data[groupKey]) == null ? void 0 : _a[index]), dataDefinitions.map((item) => {
+          var _a2;
+          const value = (_a2 = data[item.id]) == null ? void 0 : _a2[index];
+          return item.checked && /* @__PURE__ */ React.createElement(Radar.Tooltip.Dot, {
+            color: item.color,
+            key: item.id
+          }, this.tooltipValueFormatter(value));
+        }))
+      };
+    });
+  }
+  // By default, tooltip will render in Plot component.
+  // In RadarChart, we need to render it in Radar component, so we use renderRadarTooltip method
+  renderTooltip() {
+    return null;
+  }
+  get dataKeys() {
+    const {
+      data,
+      groupKey
+    } = this.props;
+    const legendKeys = Object.keys(data).filter((key) => key !== groupKey);
+    return legendKeys;
+  }
+  get xScale() {
+    return this.asProps.scale ?? scaleLinear().domain(this.domain);
+  }
+  get yScale() {
+    return this.asProps.scale ?? scaleLinear().domain(this.domain);
+  }
+  getLegendAriaLabel() {
+    return this.asProps.getI18nText("legendForChart", {
+      chartType: "Radar"
+    });
+  }
+  get domain() {
+    return [Math.min(...super.flatValues), Math.max(...super.flatValues)];
+  }
+}
 _defineProperty(RadarChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
-var RadarChart = createComponent(RadarChartComponent);
+const RadarChart = createComponent(RadarChartComponent);
 export {
   RadarChart
 };

package/lib/esm/component/Chart/ScatterPlotChart.mjs

@@ -1,9 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
@@ -14,117 +8,125 @@ import ScatterPlot from "../../ScatterPlot.mjs";
 import { getScatterPlotRadius, minMax } from "../../utils.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-var ScatterPlotChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
-  function ScatterPlotChartComponent2() {
-    _classCallCheck(this, ScatterPlotChartComponent2);
-    return _callSuper(this, ScatterPlotChartComponent2, arguments);
+class ScatterPlotChartComponent extends AbstractChart {
+  get dataKeys() {
+    const {
+      data,
+      groupKey,
+      valueKey
+    } = this.props;
+    return Object.keys(data[0]).filter((key) => key !== groupKey && key !== valueKey);
   }
-  _inherits(ScatterPlotChartComponent2, _AbstractChart);
-  return _createClass(ScatterPlotChartComponent2, [{
-    key: "dataKeys",
-    get: function get() {
-      var _this$props = this.props, data = _this$props.data, groupKey = _this$props.groupKey, valueKey = _this$props.valueKey;
-      return Object.keys(data[0]).filter(function(key) {
-        return key !== groupKey && key !== valueKey;
-      });
-    }
-  }, {
-    key: "xScale",
-    get: function get() {
-      var _this$asProps = this.asProps, xScale = _this$asProps.xScale, _this$asProps$marginY = _this$asProps.marginY, marginY = _this$asProps$marginY === void 0 ? 30 : _this$asProps$marginY, plotWidth = _this$asProps.plotWidth, data = _this$asProps.data, groupKey = _this$asProps.groupKey, valueKey = _this$asProps.valueKey;
-      if (xScale) {
-        return xScale;
-      }
-      var radius = getScatterPlotRadius(valueKey) / this.getValueScale(_toConsumableArray(this.flatValues));
-      var testItem = data[0][groupKey];
-      var range = [marginY, plotWidth - this.plotPadding];
-      var domain = minMax(data, groupKey);
-      if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
-        return scaleTime([domain[0] - radius, domain[1] + radius], range);
-      }
-      return scaleLinear([domain[0] - radius, domain[1] + radius], range);
+  get xScale() {
+    const {
+      xScale,
+      marginY = 30,
+      plotWidth,
+      data,
+      groupKey,
+      valueKey
+    } = this.asProps;
+    if (xScale) {
+      return xScale;
     }
-  }, {
-    key: "yScale",
-    get: function get() {
-      var _this$asProps2 = this.asProps, yScale = _this$asProps2.yScale, _this$asProps2$margin = _this$asProps2.marginX, marginX = _this$asProps2$margin === void 0 ? 30 : _this$asProps2$margin, plotHeight = _this$asProps2.plotHeight, valueKey = _this$asProps2.valueKey;
-      if (yScale) {
-        return yScale;
-      }
-      var flatValues = this.flatValues;
-      var radius = getScatterPlotRadius(valueKey) / this.getValueScale(_toConsumableArray(flatValues));
-      var max = Math.max.apply(Math, _toConsumableArray(flatValues)) + radius;
-      var min = Math.min.apply(Math, _toConsumableArray(flatValues)) - radius;
-      return scaleLinear().range([plotHeight - marginX, this.plotPadding]).domain([min, max]);
+    const radius = getScatterPlotRadius(valueKey) / this.getValueScale([...this.flatValues]);
+    const testItem = data[0][groupKey];
+    const range = [marginY, plotWidth - this.plotPadding];
+    const domain = minMax(data, groupKey);
+    if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
+      return scaleTime([domain[0] - radius, domain[1] + radius], range);
     }
-  }, {
-    key: "flatValues",
-    get: function get() {
-      var _this$asProps3 = this.asProps, data = _this$asProps3.data, groupKey = _this$asProps3.groupKey, valueKey = _this$asProps3.valueKey;
-      var flatValues = data.reduce(function(result, item) {
-        Object.entries(item).forEach(function(_ref) {
-          var _ref2 = _slicedToArray(_ref, 2), key = _ref2[0], value = _ref2[1];
-          if (key !== groupKey && key !== valueKey && typeof value === "number") {
-            result.add(value);
-          }
-        });
-        return result;
-      }, /* @__PURE__ */ new Set());
-      return flatValues;
+    return scaleLinear([domain[0] - radius, domain[1] + radius], range);
+  }
+  get yScale() {
+    const {
+      yScale,
+      marginX = 30,
+      plotHeight,
+      valueKey
+    } = this.asProps;
+    if (yScale) {
+      return yScale;
     }
-  }, {
-    key: "renderChart",
-    value: function renderChart() {
-      var _this$asProps4 = this.asProps, groupKey = _this$asProps4.groupKey, valueKey = _this$asProps4.valueKey, onClickScatterItem = _this$asProps4.onClickScatterItem;
-      var dataDefinitions = this.state.dataDefinitions;
-      return dataDefinitions.map(function(item) {
-        return item.checked && /* @__PURE__ */ React.createElement(ScatterPlot, {
-          onClick: onClickScatterItem,
-          x: groupKey,
-          y: item.id,
-          key: item.id,
-          color: item.color,
-          value: valueKey
-        });
+    const flatValues = this.flatValues;
+    const radius = getScatterPlotRadius(valueKey) / this.getValueScale([...flatValues]);
+    const max = Math.max(...flatValues) + radius;
+    const min = Math.min(...flatValues) - radius;
+    return scaleLinear().range([plotHeight - marginX, this.plotPadding]).domain([min, max]);
+  }
+  get flatValues() {
+    const {
+      data,
+      groupKey,
+      valueKey
+    } = this.asProps;
+    const flatValues = data.reduce((result, item) => {
+      Object.entries(item).forEach(([key, value]) => {
+        if (key !== groupKey && key !== valueKey && typeof value === "number") {
+          result.add(value);
+        }
       });
-    }
-  }, {
-    key: "renderTooltip",
-    value: function renderTooltip() {
-      var _this = this;
-      var _this$asProps5 = this.asProps, data = _this$asProps5.data, groupKey = _this$asProps5.groupKey;
-      var dataDefinitions = this.state.dataDefinitions;
-      return dataDefinitions.filter(function(item) {
-        return item.checked;
-      }).map(function(item) {
-        return /* @__PURE__ */ React.createElement(ScatterPlot.Tooltip, {
-          key: item.id,
-          x: groupKey,
-          y: item.id,
-          wMin: 100
-        }, function(_ref3) {
-          var index = _ref3.index, x = _ref3.x, y = _ref3.y;
-          return {
-            children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScatterPlot.Tooltip.Dot, {
-              color: item.color
-            }, "Data"), /* @__PURE__ */ React.createElement(Text, {
-              tag: "div"
-            }, "X axis", _this.tooltipValueFormatter(data[index][x])), /* @__PURE__ */ React.createElement(Text, {
-              tag: "div"
-            }, "Y axis", _this.tooltipValueFormatter(data[index][y])))
-          };
-        });
+      return result;
+    }, /* @__PURE__ */ new Set());
+    return flatValues;
+  }
+  renderChart() {
+    const {
+      groupKey,
+      valueKey,
+      onClickScatterItem
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    return dataDefinitions.map((item) => {
+      return item.checked && /* @__PURE__ */ React.createElement(ScatterPlot, {
+        onClick: onClickScatterItem,
+        x: groupKey,
+        y: item.id,
+        key: item.id,
+        color: item.color,
+        value: valueKey
       });
-    }
-  }, {
-    key: "getLegendAriaLabel",
-    value: function getLegendAriaLabel() {
-      return this.asProps.getI18nText("legendForChart", {
-        chartType: "ScatterPlot"
+    });
+  }
+  renderTooltip() {
+    const {
+      data,
+      groupKey
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    return dataDefinitions.filter((item) => item.checked).map((item) => {
+      return /* @__PURE__ */ React.createElement(ScatterPlot.Tooltip, {
+        key: item.id,
+        x: groupKey,
+        y: item.id,
+        wMin: 100
+      }, ({
+        index,
+        x,
+        y
+      }) => {
+        return {
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScatterPlot.Tooltip.Dot, {
+            color: item.color
+          }, "Data"), /* @__PURE__ */ React.createElement(Text, {
+            tag: "div"
+          }, "X axis", this.tooltipValueFormatter(data[index][x])), /* @__PURE__ */ React.createElement(Text, {
+            tag: "div"
+          }, "Y axis", this.tooltipValueFormatter(data[index][y])))
+        };
       });
-    }
-  }]);
-})(AbstractChart);
+    });
+  }
+  getLegendAriaLabel() {
+    return this.asProps.getI18nText("legendForChart", {
+      chartType: "ScatterPlot"
+    });
+  }
+}
 _defineProperty(ScatterPlotChartComponent, "displayName", "Chart.ScatterPlot");
 _defineProperty(ScatterPlotChartComponent, "defaultProps", {
   direction: "column",
@@ -134,7 +136,7 @@ _defineProperty(ScatterPlotChartComponent, "defaultProps", {
   showLegend: false
 });
 _defineProperty(ScatterPlotChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
-var ScatterPlotChart = createComponent(ScatterPlotChartComponent);
+const ScatterPlotChart = createComponent(ScatterPlotChartComponent);
 export {
   ScatterPlotChart
 };