@semcore/d3-chart 3.60.0 → 3.60.1

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

@@ -0,0 +1,113 @@
+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 _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import createComponent from "@semcore/core";
+import { scaleBand, scaleLinear } from "d3-scale";
+import CompactHorizontalBar from "../../CompactHorizontalBar.mjs";
+import { AbstractChart } from "./AbstractChart.mjs";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var CompactHorizontalBarChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(CompactHorizontalBarChartComponent2, _AbstractChart);
+  var _super = _createSuper(CompactHorizontalBarChartComponent2);
+  function CompactHorizontalBarChartComponent2() {
+    _classCallCheck(this, CompactHorizontalBarChartComponent2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(CompactHorizontalBarChartComponent2, [{
+    key: "xScale",
+    get: function get() {
+      var _this$asProps$xScale;
+      return (_this$asProps$xScale = this.asProps.xScale) !== null && _this$asProps$xScale !== void 0 ? _this$asProps$xScale : this.valueScale;
+    }
+  }, {
+    key: "yScale",
+    get: function get() {
+      var _this$asProps$yScale;
+      return (_this$asProps$yScale = this.asProps.yScale) !== null && _this$asProps$yScale !== void 0 ? _this$asProps$yScale : this.categoryScale;
+    }
+  }, {
+    key: "defaultLegendProps",
+    value: function defaultLegendProps() {
+      return {};
+    }
+  }, {
+    key: "renderChart",
+    value: function renderChart() {
+      var _this$asProps = this.asProps, x = _this$asProps.x, y = _this$asProps.y, onClickHoverRect = _this$asProps.onClickHoverRect, onClickBar = _this$asProps.onClickBar;
+      return /* @__PURE__ */ React.createElement(CompactHorizontalBar, {
+        x,
+        y
+      }, this.renderCompactHorizontalBarTooltip(), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Hover, {
+        onClick: onClickHoverRect
+      }), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Annotation, null, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Label, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Percent, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Value, null)), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar, {
+        onClick: onClickBar
+      }, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar.Background, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar.Fill, null)));
+    }
+  }, {
+    key: "renderCompactHorizontalBarTooltip",
+    value: function renderCompactHorizontalBarTooltip() {
+      var _this$asProps2 = this.asProps, data = _this$asProps2.data, x = _this$asProps2.x, y = _this$asProps2.y, showTooltip = _this$asProps2.showTooltip;
+      if (!showTooltip) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip, {
+        wMin: 100
+      }, function(_ref) {
+        var index = _ref.index;
+        return {
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip.Title, null, data[index][y]), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip.Dot, null, data[index][x]))
+        };
+      });
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
+      return null;
+    }
+  }, {
+    key: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "CompactHorizontalBar"
+      });
+    }
+  }, {
+    key: "categoryScale",
+    get: function get() {
+      var _this$asProps3 = this.asProps, _this$asProps3$margin = _this$asProps3.marginY, marginY = _this$asProps3$margin === void 0 ? 40 : _this$asProps3$margin, plotHeight = _this$asProps3.plotHeight, data = _this$asProps3.data, y = _this$asProps3.y;
+      return scaleBand().range([plotHeight - marginY, marginY]).domain(_toConsumableArray(data).reverse().map(function(d) {
+        return d[y];
+      })).paddingInner(0.6).paddingOuter(0.2);
+    }
+  }, {
+    key: "valueScale",
+    get: function get() {
+      var _this$asProps4 = this.asProps, _this$asProps4$margin = _this$asProps4.marginY, marginY = _this$asProps4$margin === void 0 ? 0 : _this$asProps4$margin, plotWidth = _this$asProps4.plotWidth;
+      var sum = _toConsumableArray(_get(_getPrototypeOf(CompactHorizontalBarChartComponent2.prototype), "flatValues", this).values()).reduce(function(acc, d) {
+        return acc + d;
+      }, 0);
+      return scaleLinear().range([marginY, plotWidth]).domain([marginY, sum]);
+    }
+  }]);
+  return CompactHorizontalBarChartComponent2;
+}(AbstractChart);
+_defineProperty(CompactHorizontalBarChartComponent, "displayName", "Chart.CompactHorizontalBar");
+_defineProperty(CompactHorizontalBarChartComponent, "defaultProps", {
+  direction: "column",
+  showXAxis: false,
+  showYAxis: false,
+  showTooltip: true,
+  showLegend: false
+});
+_defineProperty(CompactHorizontalBarChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var CompactHorizontalBarChart = createComponent(CompactHorizontalBarChartComponent);
+export {
+  CompactHorizontalBarChart
+};

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

@@ -0,0 +1,113 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import createComponent from "@semcore/core";
+import { scaleLinear } from "d3-scale";
+import Donut from "../../Donut.mjs";
+import { AbstractChart } from "./AbstractChart.mjs";
+import { Text } from "@semcore/typography";
+import { Flex } from "@semcore/flex-box";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var DonutChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(DonutChartComponent2, _AbstractChart);
+  var _super = _createSuper(DonutChartComponent2);
+  function DonutChartComponent2() {
+    _classCallCheck(this, DonutChartComponent2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(DonutChartComponent2, [{
+    key: "xScale",
+    get: function get() {
+      var xScale = this.asProps.xScale;
+      if (xScale) {
+        return xScale;
+      }
+      return scaleLinear();
+    }
+  }, {
+    key: "yScale",
+    get: function get() {
+      var yScale = this.asProps.yScale;
+      if (yScale) {
+        return yScale;
+      }
+      return scaleLinear();
+    }
+  }, {
+    key: "defaultLegendProps",
+    value: function defaultLegendProps() {
+      return {
+        legendType: "Table"
+      };
+    }
+  }, {
+    key: "renderChart",
+    value: function renderChart() {
+      var _this$asProps = this.asProps, innerRadius = _this$asProps.innerRadius, halfsize = _this$asProps.halfsize, innerLabel = _this$asProps.innerLabel;
+      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
+      var checkedLegendItems = dataDefinitions.filter(function(item) {
+        return item.checked;
+      });
+      return /* @__PURE__ */ React.createElement(Donut, {
+        halfsize,
+        innerRadius
+      }, checkedLegendItems.length === 0 && /* @__PURE__ */ React.createElement(Donut.EmptyData, null), checkedLegendItems.map(function(item, index) {
+        return /* @__PURE__ */ React.createElement(Donut.Pie, {
+          key: item.id,
+          dataKey: item.id,
+          name: item.label,
+          color: item.color,
+          active: highlightedLine === index
+        });
+      }), innerLabel && /* @__PURE__ */ React.createElement(Donut.Label, null, innerLabel));
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
+      var _this = this;
+      var _this$asProps2 = this.asProps, data = _this$asProps2.data, showTooltip = _this$asProps2.showTooltip;
+      var dataDefinitions = this.state.dataDefinitions;
+      if (!showTooltip) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(Donut.Tooltip, null, function(_ref) {
+        var dataKey = _ref.dataKey;
+        var title = dataDefinitions.find(function(item) {
+          return item.id === dataKey;
+        });
+        return {
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Donut.Tooltip.Title, null, (title === null || title === void 0 ? void 0 : title.label) || dataKey), /* @__PURE__ */ React.createElement(Flex, {
+            justifyContent: "space-between"
+          }, /* @__PURE__ */ React.createElement(Text, {
+            bold: true
+          }, _this.tooltipValueFormatter(data[dataKey]))))
+        };
+      });
+    }
+  }, {
+    key: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "Donut"
+      });
+    }
+  }]);
+  return DonutChartComponent2;
+}(AbstractChart);
+_defineProperty(DonutChartComponent, "displayName", "Chart.Donut");
+_defineProperty(DonutChartComponent, "defaultProps", {
+  direction: "row-reverse",
+  alignItems: "flex-start",
+  innerRadius: 100,
+  marginX: 0,
+  marginY: 0
+});
+_defineProperty(DonutChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var DonutChart = createComponent(DonutChartComponent);
+export {
+  DonutChart
+};

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

@@ -0,0 +1,166 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import createComponent from "@semcore/core";
+import { scaleTime, scaleBand, scaleLinear } from "d3-scale";
+import Bar from "../../Bar.mjs";
+import StackBar from "../../StackBar.mjs";
+import { HoverRect } from "../../Hover.mjs";
+import { minMax } from "../../utils.mjs";
+import { AbstractChart } from "./AbstractChart.mjs";
+import { Flex, Box } from "@semcore/flex-box";
+import { Text } from "@semcore/typography";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var HistogramChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(HistogramChartComponent2, _AbstractChart);
+  var _super = _createSuper(HistogramChartComponent2);
+  function HistogramChartComponent2() {
+    _classCallCheck(this, HistogramChartComponent2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(HistogramChartComponent2, [{
+    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, _this$asProps$marginX = _this$asProps.marginX, marginX = _this$asProps$marginX === void 0 ? 30 : _this$asProps$marginX, plotWidth = _this$asProps.plotWidth, plotHeight = _this$asProps.plotHeight, invertAxis = _this$asProps.invertAxis, data = _this$asProps.data, groupKey = _this$asProps.groupKey;
+      if (xScale) {
+        return xScale;
+      }
+      var testItem = data[0][groupKey];
+      var range = invertAxis ? [plotHeight - marginX, this.plotPadding] : [marginY, plotWidth - this.plotPadding];
+      if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
+        var _domain = minMax(data, groupKey);
+        return scaleTime(_domain, range);
+      }
+      var domain = data.map(function(item) {
+        return item[groupKey];
+      });
+      return scaleBand(domain, range).paddingInner(0.05).paddingOuter(0.2);
+    }
+  }, {
+    key: "yScale",
+    get: function get() {
+      var _this$asProps2 = this.asProps, yScale = _this$asProps2.yScale, _this$asProps2$margin = _this$asProps2.marginY, marginY = _this$asProps2$margin === void 0 ? 30 : _this$asProps2$margin, _this$asProps2$margin2 = _this$asProps2.marginX, marginX = _this$asProps2$margin2 === void 0 ? 30 : _this$asProps2$margin2, plotHeight = _this$asProps2.plotHeight, plotWidth = _this$asProps2.plotWidth, invertAxis = _this$asProps2.invertAxis, data = _this$asProps2.data;
+      var max;
+      if (this.isStack) {
+        max = data.reduce(function(max2, item) {
+          var barSum = Object.values(item).reduce(function(sum, val) {
+            if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {
+              return sum + val.getMilliseconds();
+            }
+            return sum + val;
+          }, 0);
+          if (barSum > max2) {
+            max2 = barSum;
+          }
+          return max2;
+        }, 0);
+      } else {
+        var flatValues = _get(_getPrototypeOf(HistogramChartComponent2.prototype), "flatValues", this);
+        max = Math.max.apply(Math, _toConsumableArray(flatValues));
+      }
+      return yScale !== null && yScale !== void 0 ? yScale : scaleLinear().range(invertAxis ? [marginY, plotWidth - this.plotPadding] : [plotHeight - marginX, this.plotPadding]).domain([0, max]);
+    }
+  }, {
+    key: "isStack",
+    get: function get() {
+      var dataDefinitions = this.state.dataDefinitions;
+      return dataDefinitions.length > 1;
+    }
+  }, {
+    key: "renderChart",
+    value: function renderChart() {
+      var _this$asProps3 = this.asProps, groupKey = _this$asProps3.groupKey, invertAxis = _this$asProps3.invertAxis;
+      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
+      if (this.isStack) {
+        return /* @__PURE__ */ React.createElement(StackBar, {
+          x: invertAxis ? void 0 : groupKey,
+          y: invertAxis ? groupKey : void 0
+        }, dataDefinitions.map(function(item2, index) {
+          var BarComponent = invertAxis ? StackBar.HorizontalBar : StackBar.Bar;
+          var commonBarComponentProps = {
+            color: item2.color,
+            transparent: highlightedLine !== -1 && highlightedLine !== index
+          };
+          if (invertAxis) {
+            commonBarComponentProps.x = item2.id;
+          } else {
+            commonBarComponentProps.y = item2.id;
+          }
+          return item2.checked && /* @__PURE__ */ React.createElement(BarComponent, _extends({
+            key: item2.id
+          }, commonBarComponentProps));
+        }));
+      }
+      var item = dataDefinitions[0];
+      return /* @__PURE__ */ React.createElement(Bar, {
+        x: invertAxis ? item.id : groupKey,
+        y: invertAxis ? groupKey : item.id,
+        key: item.id,
+        color: item.color
+      });
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
+      var _this = this;
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey, showTotalInTooltip = _this$asProps4.showTotalInTooltip, showTooltip = _this$asProps4.showTooltip, invertAxis = _this$asProps4.invertAxis;
+      var dataDefinitions = this.state.dataDefinitions;
+      if (!showTooltip) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(HoverRect.Tooltip, {
+        x: invertAxis ? void 0 : groupKey,
+        y: invertAxis ? groupKey : void 0,
+        wMin: 100
+      }, function(_ref) {
+        var _dataItem$groupKey;
+        var xIndex = _ref.xIndex, yIndex = _ref.yIndex;
+        var index = invertAxis ? yIndex : xIndex;
+        var dataItem = data[index];
+        var total = _this.totalValue(dataItem);
+        return {
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Title, null, (_dataItem$groupKey = dataItem[groupKey]) === null || _dataItem$groupKey === void 0 ? void 0 : _dataItem$groupKey.toString()), dataDefinitions.map(function(item) {
+            return item.checked && /* @__PURE__ */ React.createElement(Flex, {
+              justifyContent: "space-between",
+              key: item.id
+            }, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
+              mr: 4,
+              color: item.color
+            }, item.label), /* @__PURE__ */ React.createElement(Text, {
+              bold: true
+            }, _this.tooltipValueFormatter(dataItem[item.id])));
+          }), showTotalInTooltip === true && /* @__PURE__ */ React.createElement(Flex, {
+            mt: 2,
+            justifyContent: "space-between"
+          }, /* @__PURE__ */ React.createElement(Box, {
+            mr: 4
+          }, "Total"), /* @__PURE__ */ React.createElement(Text, {
+            bold: true
+          }, total)))
+        };
+      });
+    }
+  }, {
+    key: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "Histogram"
+      });
+    }
+  }]);
+  return HistogramChartComponent2;
+}(AbstractChart);
+_defineProperty(HistogramChartComponent, "displayName", "Chart.Histogram");
+_defineProperty(HistogramChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var HistogramChart = createComponent(HistogramChartComponent);
+export {
+  HistogramChart
+};

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

@@ -0,0 +1,131 @@
+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 _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import createComponent from "@semcore/core";
+import { scaleTime, scaleLinear } from "d3-scale";
+import Line from "../../Line.mjs";
+import { HoverLine } from "../../Hover.mjs";
+import { minMax } from "../../utils.mjs";
+import { AbstractChart } from "./AbstractChart.mjs";
+import { Flex, Box } from "@semcore/flex-box";
+import { Text } from "@semcore/typography";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var LineChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(LineChartComponent2, _AbstractChart);
+  var _super = _createSuper(LineChartComponent2);
+  function LineChartComponent2() {
+    _classCallCheck(this, LineChartComponent2);
+    return _super.apply(this, arguments);
+  }
+  _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 = _get(_getPrototypeOf(LineChartComponent2.prototype), "flatValues", this);
+      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]);
+    }
+  }, {
+    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;
+      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
+        }, 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
+        }));
+      });
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
+      var _this = this;
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey, showTotalInTooltip = _this$asProps4.showTotalInTooltip, showTooltip = _this$asProps4.showTooltip;
+      var dataDefinitions = this.state.dataDefinitions;
+      if (!showTooltip) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(HoverLine.Tooltip, {
+        x: groupKey,
+        wMin: 100
+      }, function(_ref) {
+        var _dataItem$groupKey;
+        var xIndex = _ref.xIndex;
+        var dataItem = data[xIndex];
+        var total = _this.totalValue(dataItem);
+        return {
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HoverLine.Tooltip.Title, null, (_dataItem$groupKey = dataItem[groupKey]) === null || _dataItem$groupKey === void 0 ? void 0 : _dataItem$groupKey.toString()), dataDefinitions.map(function(item) {
+            return item.checked && /* @__PURE__ */ React.createElement(Flex, {
+              justifyContent: "space-between",
+              key: item.id
+            }, /* @__PURE__ */ React.createElement(HoverLine.Tooltip.Dot, {
+              mr: 4,
+              color: item.color
+            }, item.label), /* @__PURE__ */ React.createElement(Text, {
+              bold: true
+            }, _this.tooltipValueFormatter(dataItem[item.id])));
+          }), showTotalInTooltip === true && /* @__PURE__ */ React.createElement(Flex, {
+            mt: 2,
+            justifyContent: "space-between"
+          }, /* @__PURE__ */ React.createElement(Box, {
+            mr: 4
+          }, "Total"), /* @__PURE__ */ React.createElement(Text, {
+            bold: true
+          }, total)))
+        };
+      });
+    }
+  }, {
+    key: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "Line"
+      });
+    }
+  }]);
+  return LineChartComponent2;
+}(AbstractChart);
+_defineProperty(LineChartComponent, "displayName", "Chart.Line");
+_defineProperty(LineChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var LineChart = createComponent(LineChartComponent);
+export {
+  LineChart
+};

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

@@ -0,0 +1,115 @@
+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 _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import createComponent from "@semcore/core";
+import { scaleLinear } from "d3-scale";
+import { AbstractChart } from "./AbstractChart.mjs";
+import Radar from "../../Radar.mjs";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var RadarChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(RadarChartComponent2, _AbstractChart);
+  var _super = _createSuper(RadarChartComponent2);
+  function RadarChartComponent2() {
+    _classCallCheck(this, RadarChartComponent2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(RadarChartComponent2, [{
+    key: "renderChart",
+    value: function renderChart() {
+      var _this$asProps = this.asProps, groupKey = _this$asProps.groupKey, showDots = _this$asProps.showDots, circle = _this$asProps.circle;
+      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions;
+      _this$state.highlightedLine;
+      return /* @__PURE__ */ React.createElement(Radar, {
+        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() {
+      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(_get(_getPrototypeOf(RadarChartComponent2.prototype), "flatValues", this))), Math.max.apply(Math, _toConsumableArray(_get(_getPrototypeOf(RadarChartComponent2.prototype), "flatValues", this)))];
+    }
+  }]);
+  return RadarChartComponent2;
+}(AbstractChart);
+_defineProperty(RadarChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var RadarChart = createComponent(RadarChartComponent);
+export {
+  RadarChart
+};