@semcore/d3-chart 3.60.0 → 3.60.1

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

@@ -0,0 +1,240 @@
+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 _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 React from "react";
+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 { 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 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 = _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);
+      }
+    });
+    return _this;
+  }
+  _createClass(BarChartComponent2, [{
+    key: "xScale",
+    get: function get() {
+      var _this$asProps = this.asProps, xScale = _this$asProps.xScale, invertAxis = _this$asProps.invertAxis;
+      if (xScale) {
+        return xScale;
+      }
+      return invertAxis ? this.valueScale : this.categoryScale;
+    }
+  }, {
+    key: "yScale",
+    get: function get() {
+      var _this$asProps2 = this.asProps, yScale = _this$asProps2.yScale, invertAxis = _this$asProps2.invertAxis;
+      if (yScale) {
+        return yScale;
+      }
+      return invertAxis ? this.categoryScale : this.valueScale;
+    }
+  }, {
+    key: "defaultLegendProps",
+    value: function defaultLegendProps() {
+      if (this.props.trend !== void 0) {
+        return {
+          withTrend: true
+        };
+      }
+      return {};
+    }
+  }, {
+    key: "renderTrend",
+    value: function renderTrend(key) {
+      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) {
+        return /* @__PURE__ */ React.createElement(Line, {
+          data: trendItem,
+          key: "".concat(key, "_").concat(groupKey),
+          x: invertAxis ? "y" : "x",
+          y: invertAxis ? "x" : "y",
+          color: "wall",
+          style: {
+            strokeWidth: 3,
+            strokeDasharray: 5
+          }
+        }, /* @__PURE__ */ React.createElement(Line.Dots, {
+          data: trendItem,
+          display: true
+        }));
+      }
+      return null;
+    }
+  }, {
+    key: "renderChart",
+    value: function renderChart() {
+      var _this2 = this;
+      var _this$asProps4 = this.asProps, groupKey = _this$asProps4.groupKey, _this$asProps4$type = _this$asProps4.type, type = _this$asProps4$type === void 0 ? "group" : _this$asProps4$type, invertAxis = _this$asProps4.invertAxis;
+      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
+      if (dataDefinitions.length === 1) {
+        var item = dataDefinitions[0];
+        var BarComponent = invertAxis ? GroupBar.HorizontalBar : GroupBar.Bar;
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BarComponent, {
+          x: invertAxis ? item.id : groupKey,
+          y: invertAxis ? groupKey : item.id,
+          key: item.id,
+          color: item.color,
+          onClick: this.handleClickBar
+        }), this.renderTrend(item.id));
+      }
+      if (type === "group") {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(GroupBar, {
+          x: invertAxis ? void 0 : groupKey,
+          y: invertAxis ? groupKey : void 0
+        }, dataDefinitions.map(function(item2, index) {
+          var BarComponent2 = invertAxis ? GroupBar.HorizontalBar : GroupBar.Bar;
+          var commonBarComponentProps = {
+            color: item2.color,
+            transparent: highlightedLine !== -1 && highlightedLine !== index,
+            onClick: _this2.handleClickBar
+          };
+          if (invertAxis) {
+            commonBarComponentProps.x = item2.id;
+          } else {
+            commonBarComponentProps.y = item2.id;
+          }
+          return item2.checked && /* @__PURE__ */ React.createElement(BarComponent2, _extends({
+            key: item2.id
+          }, commonBarComponentProps));
+        })), dataDefinitions.map(function(item2) {
+          return item2.checked && _this2.renderTrend(item2.id);
+        }));
+      }
+      if (type === "stack") {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StackBar, {
+          x: invertAxis ? void 0 : groupKey,
+          y: invertAxis ? groupKey : void 0
+        }, dataDefinitions.map(function(item2, index) {
+          var BarComponent2 = invertAxis ? StackBar.HorizontalBar : StackBar.Bar;
+          var commonBarComponentProps = {
+            color: item2.color,
+            transparent: highlightedLine !== -1 && highlightedLine !== index,
+            onClick: _this2.handleClickBar
+          };
+          if (invertAxis) {
+            commonBarComponentProps.x = item2.id;
+          } else {
+            commonBarComponentProps.y = item2.id;
+          }
+          return item2.checked && /* @__PURE__ */ React.createElement(BarComponent2, _extends({
+            key: item2.id
+          }, commonBarComponentProps));
+        })), dataDefinitions.map(function(item2) {
+          return item2.checked && _this2.renderTrend(item2.id);
+        }));
+      }
+      return null;
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
+      var _this3 = this;
+      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: /* @__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: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "Bar"
+      });
+    }
+  }, {
+    key: "categoryScale",
+    get: function get() {
+      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())) {
+        var _domain = minMax(data, groupKey);
+        return scaleTime(_domain, range);
+      }
+      var domain = data.map(function(item) {
+        return item[groupKey];
+      });
+      return scaleBand(domain, range).paddingInner(0.4).paddingOuter(0.2);
+    }
+  }, {
+    key: "valueScale",
+    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, 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]);
+    }
+  }]);
+  return BarChartComponent2;
+}(AbstractChart);
+_defineProperty(BarChartComponent, "displayName", "Chart.Bar");
+_defineProperty(BarChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var BarChart = createComponent(BarChartComponent);
+export {
+  BarChart
+};

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

@@ -0,0 +1,135 @@
+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 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 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 _super.apply(this, arguments);
+  }
+  _createClass(BubbleChartComponent2, [{
+    key: "dataKeys",
+    get: function get() {
+      var data = this.props.data;
+      return data.map(function(_, index) {
+        return index.toString();
+      });
+    }
+  }, {
+    key: "getDefaultDataDefinitions",
+    value: function getDefaultDataDefinitions() {
+      var _this = this;
+      var _this$props = this.props, legendProps = _this$props.legendProps, data = _this$props.data;
+      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 ? 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);
+        }
+        var dataDefinition = {
+          id: key,
+          label: (_ref = (_legendData$label = legendData === null || legendData === void 0 ? void 0 : legendData.label) !== null && _legendData$label !== void 0 ? _legendData$label : item.label) !== null && _ref !== void 0 ? _ref : key,
+          icon: (_legendData$icon = legendData === null || legendData === void 0 ? void 0 : legendData.icon) !== null && _legendData$icon !== void 0 ? _legendData$icon : void 0,
+          checked: (_legendData$defaultCh = legendData === null || legendData === void 0 ? void 0 : legendData.defaultChecked) !== null && _legendData$defaultCh !== void 0 ? _legendData$defaultCh : true,
+          color: item.color,
+          columns: []
+        };
+        if (legendData !== null && legendData !== void 0 && legendData.additionalInfo || legendData !== null && legendData !== void 0 && legendData.count) {
+          dataDefinition.additionalInfo = legendData.additionalInfo ? {
+            label: legendData.additionalInfo
+          } : legendData.count ? {
+            count: legendData.count
+          } : void 0;
+        }
+        return dataDefinition;
+      });
+    }
+  }, {
+    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;
+      if (xScale) {
+        return xScale;
+      }
+      var range = [marginY, plotWidth - this.plotPadding];
+      var domain = calculateBubbleDomain(data, "x", range);
+      return scaleLinear().domain(domain).range(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, data = _this$asProps2.data;
+      if (yScale) {
+        return yScale;
+      }
+      var range = [plotHeight - marginX, this.plotPadding];
+      var domain = calculateBubbleDomain(data, "y", range);
+      return scaleLinear().domain(domain).range(range);
+    }
+  }, {
+    key: "defaultLegendProps",
+    value: function defaultLegendProps() {
+      return {
+        shape: "Circle"
+      };
+    }
+  }, {
+    key: "renderChart",
+    value: function renderChart() {
+      return /* @__PURE__ */ React.createElement(Bubble, {
+        x: "x",
+        y: "y",
+        value: "value",
+        color: "color",
+        label: "label"
+      });
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
+      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, {
+            tag: "div"
+          }, "Y axis ", data[index].y), /* @__PURE__ */ React.createElement(Text, {
+            tag: "div"
+          }, "Value ", data[index].value))
+        };
+      });
+    }
+  }, {
+    key: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "Bubble"
+      });
+    }
+  }]);
+  return BubbleChartComponent2;
+}(AbstractChart);
+_defineProperty(BubbleChartComponent, "displayName", "Chart.Bubble");
+_defineProperty(BubbleChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var BubbleChart = createComponent(BubbleChartComponent);
+export {
+  BubbleChart
+};

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

@@ -0,0 +1,294 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 _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, { sstyled, assignProps } from "@semcore/core";
+import React from "react";
+import Divider from "@semcore/divider";
+import { Flex, Box } from "@semcore/flex-box";
+import { Text } from "@semcore/typography";
+import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import { scaleBand, scaleLinear } from "d3-scale";
+import Plot from "../../Plot.mjs";
+import { HoverRect } from "../../Hover.mjs";
+import { interpolateValue, scaleToBand } from "../../utils.mjs";
+import AnimatedClipPath from "../../AnimatedClipPath.mjs";
+import { AbstractChart } from "./AbstractChart.mjs";
+import Cigarette from "../Cigarette/Cigarette.mjs";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var wMin = 2;
+var CigaretteChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(CigaretteChartComponent2, _AbstractChart);
+  var _super = _createSuper(CigaretteChartComponent2);
+  function CigaretteChartComponent2() {
+    var _this;
+    _classCallCheck(this, CigaretteChartComponent2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "plotPadding", 0);
+    _defineProperty(_assertThisInitialized(_this), "offset", 0);
+    return _this;
+  }
+  _createClass(CigaretteChartComponent2, [{
+    key: "resolveColor",
+    value: function resolveColor(id, index) {
+      var _this$props$colorMap$, _this$props$colorMap;
+      return (_this$props$colorMap$ = (_this$props$colorMap = this.props.colorMap) === null || _this$props$colorMap === void 0 ? void 0 : _this$props$colorMap[id]) !== null && _this$props$colorMap$ !== void 0 ? _this$props$colorMap$ : "blue-".concat(5 - index, "00");
+    }
+  }, {
+    key: "getDefaultDataDefinitions",
+    value: function getDefaultDataDefinitions() {
+      var dataDefinitions = _get(_getPrototypeOf(CigaretteChartComponent2.prototype), "getDefaultDataDefinitions", this).call(this);
+      return dataDefinitions.map(function(dataDef) {
+        dataDef.columns = dataDef.columns.slice(1);
+        return dataDef;
+      });
+    }
+  }, {
+    key: "defaultLegendProps",
+    value: function defaultLegendProps() {
+      return {
+        legendType: "Table",
+        w: "fit-content"
+      };
+    }
+  }, {
+    key: "xScale",
+    get: function get() {
+      var invertAxis = this.asProps.invertAxis;
+      return invertAxis ? this.valueScale : this.categoryScale;
+    }
+  }, {
+    key: "yScale",
+    get: function get() {
+      var invertAxis = this.asProps.invertAxis;
+      return invertAxis ? this.categoryScale : this.valueScale;
+    }
+  }, {
+    key: "renderChart",
+    value: function renderChart() {
+      var _this2 = this;
+      var _this$asProps = this.asProps, invertAxis = _this$asProps.invertAxis, data = _this$asProps.data, uid = _this$asProps.uid, duration = _this$asProps.duration, patterns = _this$asProps.patterns, plotHeight = _this$asProps.plotHeight, plotWidth = _this$asProps.plotWidth, onClick = _this$asProps.onClick;
+      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
+      this.offset = 0;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (invertAxis ? dataDefinitions : _toConsumableArray(dataDefinitions).reverse()).map(function(item, index) {
+        var value = data[item.id];
+        if (!item.checked || value === interpolateValue || value === null) {
+          return null;
+        }
+        var absWidth = Math.abs(_this2.valueScale(value) - Math.max(_this2.valueScale(_this2.valueScale.domain()[0]), _this2.valueScale(0)));
+        var height = scaleToBand(_this2.categoryScale).bandwidth() - 4;
+        var width = value === 0 ? 0 : Math.max(absWidth, wMin * 2) - wMin;
+        var y = 2;
+        var x = index === 0 ? 0 : _this2.offset;
+        var r = height < 28 ? 2 : 4;
+        _this2.offset = _this2.offset + width + wMin;
+        return /* @__PURE__ */ React.createElement(Cigarette, {
+          key: item.id,
+          dataKey: item.id,
+          index,
+          y: invertAxis ? y : x,
+          x: invertAxis ? x : y,
+          width: invertAxis ? width : height,
+          height: invertAxis ? height : width,
+          uid,
+          hide: !item.checked,
+          duration,
+          r: index === 0 || index === dataDefinitions.length - 1 ? r : 0,
+          color: item.color,
+          patterns,
+          direction: invertAxis ? "horizontal" : "vertical",
+          onClick,
+          hovered: highlightedLine === index ? true : highlightedLine === -1 ? void 0 : false
+        });
+      }), /* @__PURE__ */ React.createElement(AnimatedClipPath, {
+        "aria-hidden": true,
+        duration,
+        id: uid,
+        x: "0",
+        y: "0",
+        width: invertAxis ? 0 : plotWidth,
+        height: invertAxis ? plotHeight : 0
+      }));
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
+      var _this3 = this;
+      var _this$asProps2 = this.asProps, data = _this$asProps2.data, showTotalInTooltip = _this$asProps2.showTotalInTooltip, showTooltip = _this$asProps2.showTooltip, invertAxis = _this$asProps2.invertAxis, tooltipTitle = _this$asProps2.tooltipTitle, tooltipViewType = _this$asProps2.tooltipViewType;
+      var dataDefinitions = this.state.dataDefinitions;
+      if (!showTooltip) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(HoverRect.Tooltip, {
+        x: invertAxis ? "" : void 0,
+        y: invertAxis ? void 0 : "",
+        wMin: 100,
+        hideHoverLine: true
+      }, function(tooltipProps) {
+        var dataKey = invertAxis ? tooltipProps.xIndex : tooltipProps.yIndex;
+        var total = _this3.totalValue(data);
+        if (tooltipViewType === "single") {
+          var item = dataDefinitions.find(function(dataDefItem) {
+            return dataDefItem.id === dataKey;
+          });
+          if (!item) {
+            return null;
+          }
+          return {
+            children: /* @__PURE__ */ React.createElement(Flex, {
+              justifyContent: "space-between",
+              key: dataKey
+            }, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
+              mr: 4,
+              color: item.color
+            }, item.label), /* @__PURE__ */ React.createElement(Text, {
+              bold: true
+            }, _this3.tooltipValueFormatter(data[dataKey])))
+          };
+        }
+        return {
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, tooltipTitle && /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Title, null, "Some tooltip title"), dataDefinitions.map(function(item2) {
+            return item2.checked && /* @__PURE__ */ React.createElement(Flex, {
+              justifyContent: "space-between",
+              key: item2.id,
+              style: {
+                opacity: item2.id === dataKey ? 1 : 0.3
+              }
+            }, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
+              mr: 4,
+              color: item2.color
+            }, item2.label), /* @__PURE__ */ React.createElement(Text, {
+              bold: true
+            }, _this3.tooltipValueFormatter(data[item2.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: "renderHeader",
+    value: function renderHeader() {
+      var _this$asProps$header;
+      return (_this$asProps$header = this.asProps.header) !== null && _this$asProps$header !== void 0 ? _this$asProps$header : null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var SChart = Flex;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, plotWidth = _this$asProps3.plotWidth, plotHeight = _this$asProps3.plotHeight, data = _this$asProps3.data, patterns = _this$asProps3.patterns, invertAxis = _this$asProps3.invertAxis, a11yAltTextConfig = _this$asProps3.a11yAltTextConfig;
+      var header = this.renderHeader();
+      if (invertAxis) {
+        var _ref2;
+        return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref2.cn("SChart", _objectSpread({}, assignProps({
+          "gap": 6,
+          "direction": "column",
+          "__excludeProps": ["onClick", "data"]
+        }, _ref))), /* @__PURE__ */ React.createElement(Flex, _ref2.cn("Flex", {
+          "direction": "column"
+        }), header, /* @__PURE__ */ React.createElement(Plot, _ref2.cn("Plot", {
+          "data": data,
+          "scale": [this.xScale, this.yScale],
+          "width": plotWidth,
+          "height": plotHeight,
+          "dataHints": this.dataHints,
+          "patterns": patterns,
+          "a11yAltTextConfig": a11yAltTextConfig
+        }), this.renderTooltip(), this.renderChart())), this.renderLegend());
+      }
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref3.cn("SChart", _objectSpread({}, assignProps({
+        "gap": 6,
+        "__excludeProps": ["onClick", "data"]
+      }, _ref))), /* @__PURE__ */ React.createElement(Plot, _ref3.cn("Plot", {
+        "data": data,
+        "scale": [this.xScale, this.yScale],
+        "width": plotWidth,
+        "height": plotHeight,
+        "dataHints": this.dataHints,
+        "patterns": patterns,
+        "a11yAltTextConfig": a11yAltTextConfig
+      }), this.renderTooltip(), this.renderChart()), /* @__PURE__ */ React.createElement(Flex, _ref3.cn("Flex", {
+        "direction": "column",
+        "gap": 2
+      }), header && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, _ref3.cn("Box", {}), header), /* @__PURE__ */ React.createElement(Divider, _ref3.cn("Divider", {}))), this.renderLegend()));
+    }
+  }, {
+    key: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "Cigarette"
+      });
+    }
+  }, {
+    key: "selectedData",
+    get: function get() {
+      var data = this.asProps.data;
+      var dataDefinitions = this.state.dataDefinitions;
+      var result = /* @__PURE__ */ new Map();
+      dataDefinitions.forEach(function(dataDefItem) {
+        var value = data[dataDefItem.id];
+        if (dataDefItem.checked && value !== interpolateValue) {
+          result.set(dataDefItem.id, value);
+        }
+      });
+      return result;
+    }
+  }, {
+    key: "categoryScale",
+    get: function get() {
+      var _this$asProps4 = this.asProps, plotWidth = _this$asProps4.plotWidth, plotHeight = _this$asProps4.plotHeight, invertAxis = _this$asProps4.invertAxis;
+      var range = invertAxis ? [plotHeight, 0] : [0, plotWidth];
+      return scaleBand([0], range);
+    }
+  }, {
+    key: "valueScale",
+    get: function get() {
+      var _this$asProps5 = this.asProps, plotWidth = _this$asProps5.plotWidth, plotHeight = _this$asProps5.plotHeight, invertAxis = _this$asProps5.invertAxis;
+      var max = 0;
+      this.selectedData.forEach(function(value) {
+        max = max + value;
+      });
+      return scaleLinear().range(invertAxis ? [0, plotWidth] : [plotHeight, 0]).domain([0, max]);
+    }
+  }]);
+  return CigaretteChartComponent2;
+}(AbstractChart);
+_defineProperty(CigaretteChartComponent, "displayName", "Cigarette.Bar");
+_defineProperty(CigaretteChartComponent, "defaultProps", function(props) {
+  var _props$invertAxis;
+  var invertAxis = (_props$invertAxis = props.invertAxis) !== null && _props$invertAxis !== void 0 ? _props$invertAxis : true;
+  return {
+    invertAxis,
+    showXAxis: false,
+    showYAxis: false,
+    showTooltip: true,
+    showLegend: false,
+    marginX: 0,
+    marginY: 0,
+    duration: 500,
+    plotWidth: !invertAxis && !props.plotWidth ? 44 : props.plotWidth,
+    plotHeight: invertAxis && !props.plotHeight ? 28 : props.plotHeight
+  };
+});
+_defineProperty(CigaretteChartComponent, "enhance", [resolveColorEnhance(), uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
+var CigaretteChart = createComponent(CigaretteChartComponent);
+export {
+  CigaretteChart
+};