@semcore/d3-chart 3.61.0-prerelease.0 → 3.61.0-prerelease.4

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

@@ -2,32 +2,36 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+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 { createComponent } from "@semcore/core";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { scaleTime, scaleBand, scaleLinear } from "d3-scale";
 import React from "react";
-import { AbstractChart } from "./AbstractChart.mjs";
-import "../../index.mjs";
-import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import createComponent from "@semcore/core";
+import { scaleTime, scaleBand, scaleLinear } from "d3-scale";
 import Line from "../../Line.mjs";
 import GroupBar from "../../GroupBar.mjs";
 import StackBar from "../../StackBar.mjs";
 import { HoverRect } from "../../Hover.mjs";
-import { YAxis, XAxis } from "../../Axis.mjs";
 import { minMax } from "../../utils.mjs";
-var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
+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 BarChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(BarChartComponent2, _AbstractChart);
+  var _super = _createSuper(BarChartComponent2);
   function BarChartComponent2() {
     var _this;
     _classCallCheck(this, BarChartComponent2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, BarChartComponent2, [].concat(args));
-    _defineProperty(_this, "handleClickBar", function(_data, e, barIndex, barKey) {
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleClickBar", function(_data, e, barIndex, barKey) {
       var onClickBar = _this.asProps.onClickBar;
       if (onClickBar) {
         onClickBar(barIndex, barKey, e);
@@ -35,8 +39,7 @@ var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     });
     return _this;
   }
-  _inherits(BarChartComponent2, _AbstractChart);
-  return _createClass(BarChartComponent2, [{
+  _createClass(BarChartComponent2, [{
     key: "xScale",
     get: function get() {
       var _this$asProps = this.asProps, xScale = _this$asProps.xScale, invertAxis = _this$asProps.invertAxis;
@@ -67,7 +70,9 @@ var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "renderTrend",
     value: function renderTrend(key) {
-      var _this$asProps3 = this.asProps, groupKey = _this$asProps3.groupKey, invertAxis = _this$asProps3.invertAxis, trend = _this$asProps3.trend;
+      var _this$asProps3 = this.asProps, groupKey = _this$asProps3.groupKey;
+      _this$asProps3.type;
+      var invertAxis = _this$asProps3.invertAxis, trend = _this$asProps3.trend;
       var withTrend = this.state.withTrend;
       var trendItem = trend === null || trend === void 0 ? void 0 : trend[key];
       if (withTrend && trendItem) {
@@ -97,7 +102,7 @@ var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
       if (dataDefinitions.length === 1) {
         var item = dataDefinitions[0];
         var BarComponent = invertAxis ? GroupBar.HorizontalBar : GroupBar.Bar;
-        return item.checked && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BarComponent, {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BarComponent, {
           x: invertAxis ? item.id : groupKey,
           y: invertAxis ? groupKey : item.id,
           key: item.id,
@@ -157,63 +162,44 @@ var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     key: "renderTooltip",
     value: function renderTooltip() {
       var _this3 = this;
-      var _this$asProps5 = this.asProps, data = _this$asProps5.data, groupKey = _this$asProps5.groupKey, invertAxis = _this$asProps5.invertAxis, onClickHoverRect = _this$asProps5.onClickHoverRect;
+      var _this$asProps5 = this.asProps, data = _this$asProps5.data, groupKey = _this$asProps5.groupKey, showTotalInTooltip = _this$asProps5.showTotalInTooltip, showTooltip = _this$asProps5.showTooltip, invertAxis = _this$asProps5.invertAxis, onClickHoverRect = _this$asProps5.onClickHoverRect;
+      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,
         onClick: onClickHoverRect
       }, function(_ref) {
+        var _dataItem$groupKey;
         var xIndex = _ref.xIndex, yIndex = _ref.yIndex;
         var index = invertAxis ? yIndex : xIndex;
         var dataItem = data[index];
+        var total = _this3.totalValue(dataItem);
         return {
-          children: _this3.getTooltipChildren({
-            Tooltip: HoverRect.Tooltip,
-            dataItem
-          })
+          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
+            }, _this3.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: "renderAxis",
-    value: function renderAxis() {
-      var _this$asProps6 = this.asProps, invertAxis = _this$asProps6.invertAxis, showXAxis = _this$asProps6.showXAxis, showYAxis = _this$asProps6.showYAxis, data = _this$asProps6.data, axisXValueFormatter = _this$asProps6.axisXValueFormatter, axisYValueFormatter = _this$asProps6.axisYValueFormatter, multilineXTicks = _this$asProps6.multilineXTicks, multilineYTicks = _this$asProps6.multilineYTicks;
-      if (!Array.isArray(data)) {
-        return null;
-      }
-      var xTicks = this.xTicks;
-      var yTicks = this.yTicks;
-      var childrenX = axisXValueFormatter ? function(_ref2) {
-        var value = _ref2.value;
-        return {
-          children: axisXValueFormatter(value)
-        };
-      } : void 0;
-      var childrenY = axisYValueFormatter ? function(_ref3) {
-        var value = _ref3.value;
-        return {
-          children: axisYValueFormatter(value)
-        };
-      } : void 0;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, showYAxis && /* @__PURE__ */ React.createElement(YAxis, null, yTicks ? /* @__PURE__ */ React.createElement(YAxis.Ticks, {
-        primaryText: invertAxis,
-        multiline: multilineYTicks,
-        ticks: yTicks
-      }, childrenY) : /* @__PURE__ */ React.createElement(YAxis.Ticks, {
-        primaryText: invertAxis,
-        multiline: multilineYTicks
-      }, childrenY), invertAxis !== true && (yTicks ? /* @__PURE__ */ React.createElement(YAxis.Grid, {
-        ticks: yTicks
-      }) : /* @__PURE__ */ React.createElement(YAxis.Grid, null))), showXAxis && /* @__PURE__ */ React.createElement(XAxis, null, xTicks ? /* @__PURE__ */ React.createElement(XAxis.Ticks, {
-        multiline: multilineXTicks,
-        ticks: xTicks
-      }, childrenX) : /* @__PURE__ */ React.createElement(XAxis.Ticks, {
-        multiline: multilineXTicks
-      }, childrenX), invertAxis === true && (xTicks ? /* @__PURE__ */ React.createElement(XAxis.Grid, {
-        ticks: xTicks
-      }) : /* @__PURE__ */ React.createElement(XAxis.Grid, null))));
-    }
   }, {
     key: "getLegendAriaLabel",
     value: function getLegendAriaLabel() {
@@ -224,7 +210,7 @@ var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "categoryScale",
     get: function get() {
-      var _this$asProps7 = this.asProps, _this$asProps7$margin = _this$asProps7.marginY, marginY = _this$asProps7$margin === void 0 ? 40 : _this$asProps7$margin, _this$asProps7$margin2 = _this$asProps7.marginX, marginX = _this$asProps7$margin2 === void 0 ? 24 : _this$asProps7$margin2, plotWidth = _this$asProps7.plotWidth, plotHeight = _this$asProps7.plotHeight, invertAxis = _this$asProps7.invertAxis, data = _this$asProps7.data, groupKey = _this$asProps7.groupKey;
+      var _this$asProps6 = this.asProps, _this$asProps6$margin = _this$asProps6.marginY, marginY = _this$asProps6$margin === void 0 ? 40 : _this$asProps6$margin, _this$asProps6$margin2 = _this$asProps6.marginX, marginX = _this$asProps6$margin2 === void 0 ? 24 : _this$asProps6$margin2, plotWidth = _this$asProps6.plotWidth, plotHeight = _this$asProps6.plotHeight, invertAxis = _this$asProps6.invertAxis, data = _this$asProps6.data, groupKey = _this$asProps6.groupKey;
       var testItem = data[0][groupKey];
       var range = invertAxis ? [plotHeight - marginX, this.plotPadding] : [marginY, plotWidth - this.plotPadding];
       if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
@@ -239,12 +225,13 @@ var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "valueScale",
     get: function get() {
-      var _this$asProps8 = this.asProps, _this$asProps8$margin = _this$asProps8.marginY, marginY = _this$asProps8$margin === void 0 ? 40 : _this$asProps8$margin, _this$asProps8$margin2 = _this$asProps8.marginX, marginX = _this$asProps8$margin2 === void 0 ? 24 : _this$asProps8$margin2, plotWidth = _this$asProps8.plotWidth, plotHeight = _this$asProps8.plotHeight, invertAxis = _this$asProps8.invertAxis, type = _this$asProps8.type;
-      var max = type === "stack" ? _superPropGet(BarChartComponent2, "maxStackedValue", this, 1) : Math.max.apply(Math, _toConsumableArray(_superPropGet(BarChartComponent2, "flatValues", this, 1)));
+      var _this$asProps7 = this.asProps, _this$asProps7$margin = _this$asProps7.marginY, marginY = _this$asProps7$margin === void 0 ? 40 : _this$asProps7$margin, _this$asProps7$margin2 = _this$asProps7.marginX, marginX = _this$asProps7$margin2 === void 0 ? 24 : _this$asProps7$margin2, plotWidth = _this$asProps7.plotWidth, plotHeight = _this$asProps7.plotHeight, invertAxis = _this$asProps7.invertAxis, type = _this$asProps7.type;
+      var max = type === "stack" ? _get(_getPrototypeOf(BarChartComponent2.prototype), "maxStackedValue", this) : Math.max.apply(Math, _toConsumableArray(_get(_getPrototypeOf(BarChartComponent2.prototype), "flatValues", this)));
       return scaleLinear().range(invertAxis ? [marginY, plotWidth - this.plotPadding] : [plotHeight - marginX, this.plotPadding]).domain([0, max]);
     }
   }]);
-})(AbstractChart);
+  return BarChartComponent2;
+}(AbstractChart);
 _defineProperty(BarChartComponent, "displayName", "Chart.Bar");
 _defineProperty(BarChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
 var BarChart = createComponent(BarChartComponent);

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

@@ -1,25 +1,25 @@
 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 _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent } from "@semcore/core";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { Text } from "@semcore/typography";
-import { scaleLinear } from "d3-scale";
 import React from "react";
-import "../../index.mjs";
+import createComponent from "@semcore/core";
+import { scaleLinear } from "d3-scale";
+import Bubble from "../../Bubble.mjs";
+import { calculateBubbleDomain } from "../../utils.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
+import { Text } from "@semcore/typography";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-import { calculateBubbleDomain } from "../../utils.mjs";
-import Bubble from "../../Bubble.mjs";
-var BubbleChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var BubbleChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(BubbleChartComponent2, _AbstractChart);
+  var _super = _createSuper(BubbleChartComponent2);
   function BubbleChartComponent2() {
     _classCallCheck(this, BubbleChartComponent2);
-    return _callSuper(this, BubbleChartComponent2, arguments);
+    return _super.apply(this, arguments);
   }
-  _inherits(BubbleChartComponent2, _AbstractChart);
-  return _createClass(BubbleChartComponent2, [{
+  _createClass(BubbleChartComponent2, [{
     key: "dataKeys",
     get: function get() {
       var data = this.props.data;
@@ -35,7 +35,7 @@ var BubbleChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
       return data.map(function(item, index) {
         var _legendProps$legendMa, _ref, _legendData$label, _legendData$icon, _legendData$defaultCh;
         var key = index.toString();
-        var legendData = legendProps === null || legendProps === void 0 || (_legendProps$legendMa = legendProps.legendMap) === null || _legendProps$legendMa === void 0 ? void 0 : _legendProps$legendMa[key];
+        var legendData = legendProps === null || legendProps === void 0 ? void 0 : (_legendProps$legendMa = legendProps.legendMap) === null || _legendProps$legendMa === void 0 ? void 0 : _legendProps$legendMa[key];
         if (item.color === void 0) {
           item.color = _this.resolveColor(key, index);
         }
@@ -89,37 +89,31 @@ var BubbleChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "renderChart",
     value: function renderChart() {
-      var onClickBubble = this.asProps.onClickBubble;
-      var dataDefinitions = this.state.dataDefinitions;
       return /* @__PURE__ */ React.createElement(Bubble, {
-        onClick: onClickBubble,
         x: "x",
         y: "y",
         value: "value",
         color: "color",
         label: "label"
-      }, dataDefinitions.map(function(_ref2, index) {
-        var checked = _ref2.checked, id = _ref2.id;
-        return /* @__PURE__ */ React.createElement(Bubble.Circle, {
-          visible: checked,
-          key: id,
-          index
-        });
-      }));
+      });
     }
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      return /* @__PURE__ */ React.createElement(Bubble.Tooltip, null, function(_ref3) {
-        var index = _ref3.index, data = _ref3.data;
+      var showTooltip = this.asProps.showTooltip;
+      if (!showTooltip) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(Bubble.Tooltip, null, function(_ref2) {
+        var index = _ref2.index, data = _ref2.data;
         return {
           children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Bubble.Tooltip.Title, null, "Data"), /* @__PURE__ */ React.createElement(Text, {
             tag: "div"
-          }, "X axis", " ", data[index].x), /* @__PURE__ */ React.createElement(Text, {
+          }, "X axis ", data[index].x), /* @__PURE__ */ React.createElement(Text, {
             tag: "div"
-          }, "Y axis", " ", data[index].y), /* @__PURE__ */ React.createElement(Text, {
+          }, "Y axis ", data[index].y), /* @__PURE__ */ React.createElement(Text, {
             tag: "div"
-          }, "Value", " ", data[index].value))
+          }, "Value ", data[index].value))
         };
       });
     }
@@ -131,7 +125,8 @@ var BubbleChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
       });
     }
   }]);
-})(AbstractChart);
+  return BubbleChartComponent2;
+}(AbstractChart);
 _defineProperty(BubbleChartComponent, "displayName", "Chart.Bubble");
 _defineProperty(BubbleChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
 var BubbleChart = createComponent(BubbleChartComponent);