@semcore/d3-chart 3.18.1 → 3.18.2

package/lib/cjs/component/Chart/BubbleChart.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BubbleChart = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _core = _interopRequireDefault(require("@semcore/core"));
+var _d3Scale = require("d3-scale");
+var _2 = require("../..");
+var _AbstractChart2 = require("./AbstractChart");
+var _typography = require("@semcore/typography");
+// @ts-ignore
+var BubbleChartComponent = /*#__PURE__*/function (_AbstractChart) {
+  (0, _inherits2["default"])(BubbleChartComponent, _AbstractChart);
+  var _super = (0, _createSuper2["default"])(BubbleChartComponent);
+  function BubbleChartComponent() {
+    (0, _classCallCheck2["default"])(this, BubbleChartComponent);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2["default"])(BubbleChartComponent, [{
+    key: "dataKeys",
+    get: function get() {
+      var data = this.props.data;
+      return data.map(function (_, index) {
+        return index.toString();
+      });
+    }
+  }, {
+    key: "defaultDataDefinitions",
+    get: function get() {
+      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 === undefined) {
+          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 : undefined,
+          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
+          } : undefined;
+        }
+        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,
+        groupKey = _this$asProps.groupKey;
+      if (xScale) {
+        return xScale;
+      }
+      var range = [marginY, plotWidth - this.plotPadding];
+      var domain = (0, _2.minMax)(data, 'x');
+      return (0, _d3Scale.scaleLinear)([domain[0] * 0.8, domain[1] * 1.2], 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 = (0, _2.minMax)(data, 'y');
+      return (0, _d3Scale.scaleLinear)([domain[0] * 0.8, domain[1] * 1.2], range);
+    }
+  }, {
+    key: "defaultLegendProps",
+    value: function defaultLegendProps() {
+      return {
+        shape: 'Circle'
+      };
+    }
+  }, {
+    key: "renderChart",
+    value: function renderChart() {
+      return /*#__PURE__*/_react["default"].createElement(_2.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["default"].createElement(_2.Bubble.Tooltip, null, function (_ref2) {
+        var index = _ref2.index,
+          data = _ref2.data;
+        return {
+          children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_2.Bubble.Tooltip.Title, null, "Data"), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+            tag: "div"
+          }, "X axis ", data[index].x), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+            tag: "div"
+          }, "Y axis ", data[index].y), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+            tag: "div"
+          }, "Value ", data[index].value))
+        };
+      });
+    }
+  }]);
+  return BubbleChartComponent;
+}(_AbstractChart2.AbstractChart);
+(0, _defineProperty2["default"])(BubbleChartComponent, "displayName", 'Chart.Bubble');
+var BubbleChart = (0, _core["default"])(BubbleChartComponent);
+exports.BubbleChart = BubbleChart;
+//# sourceMappingURL=BubbleChart.js.map

package/lib/cjs/component/Chart/BubbleChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleChart.js","names":["_react","_interopRequireDefault","require","_core","_d3Scale","_2","_AbstractChart2","_typography","BubbleChartComponent","_AbstractChart","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","get","data","props","map","_","index","toString","_this","_this$props","legendProps","item","_legendProps$legendMa","_ref","_legendData$label","_legendData$icon","_legendData$defaultCh","legendData","legendMap","color","undefined","resolveColor","dataDefinition","id","label","icon","checked","defaultChecked","columns","additionalInfo","count","_this$asProps","asProps","xScale","_this$asProps$marginY","marginY","plotWidth","groupKey","range","plotPadding","domain","minMax","scaleLinear","_this$asProps2","yScale","_this$asProps2$margin","marginX","plotHeight","value","defaultLegendProps","shape","renderChart","createElement","Bubble","x","y","renderTooltip","showTooltip","Tooltip","_ref2","children","Fragment","Title","Text","tag","AbstractChart","_defineProperty2","BubbleChart","createComponent","exports"],"sources":["../../../../src/component/Chart/BubbleChart.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent from '@semcore/core';\nimport { scaleLinear, ScaleLinear } from 'd3-scale';\n// @ts-ignore\nimport { Bubble, minMax } from '../..';\nimport { AbstractChart } from './AbstractChart';\nimport { BubbleChartData, BubbleChartProps, BubbleChartType } from './BubbleChart.type';\nimport { Text } from '@semcore/typography';\nimport { LegendItem } from '../ChartLegend/LegendItem/LegendItem.type';\n\nclass BubbleChartComponent extends AbstractChart<BubbleChartData, BubbleChartProps> {\n  static displayName = 'Chart.Bubble';\n\n  protected get dataKeys(): string[] {\n    const { data } = this.props;\n\n    return data.map((_, index) => index.toString());\n  }\n\n  get defaultDataDefinitions(): Array<LegendItem & { columns: React.ReactNode[] }> {\n    const { legendProps, data } = this.props;\n\n    return data.map((item, index) => {\n      const key = index.toString();\n      const legendData = legendProps?.legendMap?.[key];\n\n      if (item.color === undefined) {\n        item.color = this.resolveColor(key, index);\n      }\n\n      const dataDefinition: LegendItem & { columns: React.ReactNode[] } = {\n        id: key,\n        label: legendData?.label ?? item.label ?? key,\n        icon: legendData?.icon ?? undefined,\n        checked: legendData?.defaultChecked ?? true,\n        color: item.color,\n        columns: [],\n      };\n\n      if (legendData?.additionalInfo || legendData?.count) {\n        dataDefinition.additionalInfo = legendData.additionalInfo\n          ? { label: legendData.additionalInfo }\n          : legendData.count\n          ? { count: legendData.count }\n          : undefined;\n      }\n\n      return dataDefinition;\n    });\n  }\n\n  get xScale() {\n    const { xScale, marginY = 30, plotWidth, data, groupKey } = this.asProps;\n\n    if (xScale) {\n      return xScale;\n    }\n\n    const range = [marginY, plotWidth - this.plotPadding];\n    const domain = minMax(data, 'x');\n\n    return scaleLinear([domain[0] * 0.8, domain[1] * 1.2], range);\n  }\n\n  get yScale(): ScaleLinear<any, any> {\n    const { yScale, marginX = 30, plotHeight, data } = this.asProps;\n\n    if (yScale) {\n      return yScale;\n    }\n\n    const range = [plotHeight - marginX, this.plotPadding];\n    const domain = minMax(data, 'y');\n\n    return scaleLinear([domain[0] * 0.8, domain[1] * 1.2], range);\n  }\n\n  defaultLegendProps() {\n    return {\n      shape: 'Circle' as const,\n    };\n  }\n\n  renderChart() {\n    return <Bubble x='x' y='y' value='value' color={'color'} label={'label'} />;\n  }\n\n  renderTooltip() {\n    const { showTooltip } = this.asProps;\n\n    if (!showTooltip) {\n      return null;\n    }\n\n    return (\n      <Bubble.Tooltip>\n        {({ index, data }: any) => {\n          return {\n            children: (\n              <>\n                <Bubble.Tooltip.Title>Data</Bubble.Tooltip.Title>\n                <Text tag='div'>X axis {data[index].x}</Text>\n                <Text tag='div'>Y axis {data[index].y}</Text>\n                <Text tag='div'>Value {data[index].value}</Text>\n              </>\n            ),\n          };\n        }}\n      </Bubble.Tooltip>\n    );\n  }\n}\n\nexport const BubbleChart: BubbleChartType = createComponent(BubbleChartComponent);\n"],"mappings":"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"}

package/lib/cjs/component/Chart/BubbleChart.type.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=BubbleChart.type.js.map

package/lib/cjs/component/Chart/BubbleChart.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleChart.type.js","names":[],"sources":["../../../../src/component/Chart/BubbleChart.type.ts"],"sourcesContent":["import { Intergalactic } from '@semcore/core';\nimport { Flex } from '@semcore/flex-box';\nimport { ScaleLinear } from 'd3-scale';\nimport { BaseChartProps } from './AbstractChart.type';\n\nexport type BubbleChartData = Array<{\n  x: number;\n  y: number;\n  value: number;\n  label?: string;\n  color?: string;\n}>;\n\nexport type BubbleChartProps = BaseChartProps<BubbleChartData> & {\n  groupKey?: never;\n  xScale?: ScaleLinear<any, any>;\n  yScale?: ScaleLinear<any, any>;\n};\n\nexport type BubbleChartType = Intergalactic.Component<typeof Flex, BubbleChartProps>;\n"],"mappings":""}

package/lib/cjs/component/Chart/DonutChart.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DonutChart = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _core = _interopRequireDefault(require("@semcore/core"));
+var _d3Scale = require("d3-scale");
+var _ = require("../..");
+var _AbstractChart2 = require("./AbstractChart");
+var _typography = require("@semcore/typography");
+var _flexBox = require("@semcore/flex-box");
+// @ts-ignore
+var DonutChartComponent = /*#__PURE__*/function (_AbstractChart) {
+  (0, _inherits2["default"])(DonutChartComponent, _AbstractChart);
+  var _super = (0, _createSuper2["default"])(DonutChartComponent);
+  function DonutChartComponent() {
+    (0, _classCallCheck2["default"])(this, DonutChartComponent);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2["default"])(DonutChartComponent, [{
+    key: "xScale",
+    get: function get() {
+      var xScale = this.asProps.xScale;
+      if (xScale) {
+        return xScale;
+      }
+      return (0, _d3Scale.scaleLinear)();
+    }
+  }, {
+    key: "yScale",
+    get: function get() {
+      var yScale = this.asProps.yScale;
+      if (yScale) {
+        return yScale;
+      }
+      return (0, _d3Scale.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["default"].createElement(_.Donut, {
+        halfsize: halfsize,
+        innerRadius: innerRadius
+      }, checkedLegendItems.length === 0 && /*#__PURE__*/_react["default"].createElement(_.Donut.EmptyData, null), checkedLegendItems.map(function (item, index) {
+        return /*#__PURE__*/_react["default"].createElement(_.Donut.Pie, {
+          key: item.id,
+          dataKey: item.id,
+          name: item.label,
+          color: item.color,
+          active: highlightedLine === index
+        });
+      }), innerLabel && /*#__PURE__*/_react["default"].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["default"].createElement(_.Donut.Tooltip, null, function (_ref) {
+        var dataKey = _ref.dataKey;
+        var title = dataDefinitions.find(function (item) {
+          return item.id === dataKey;
+        });
+        return {
+          children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.Donut.Tooltip.Title, null, (title === null || title === void 0 ? void 0 : title.label) || dataKey), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
+            justifyContent: "space-between"
+          }, /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+            bold: true
+          }, _this.tooltipValueFormatter(data[dataKey]))))
+        };
+      });
+    }
+  }]);
+  return DonutChartComponent;
+}(_AbstractChart2.AbstractChart);
+(0, _defineProperty2["default"])(DonutChartComponent, "displayName", 'Chart.Donut');
+(0, _defineProperty2["default"])(DonutChartComponent, "defaultProps", {
+  direction: 'row-reverse',
+  alignItems: 'flex-start',
+  innerRadius: 100,
+  marginX: 0,
+  marginY: 0
+});
+var DonutChart = (0, _core["default"])(DonutChartComponent);
+exports.DonutChart = DonutChart;
+//# sourceMappingURL=DonutChart.js.map

package/lib/cjs/component/Chart/DonutChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","names":["_react","_interopRequireDefault","require","_core","_d3Scale","_","_AbstractChart2","_typography","_flexBox","DonutChartComponent","_AbstractChart","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","get","xScale","asProps","scaleLinear","yScale","value","defaultLegendProps","legendType","renderChart","_this$asProps","innerRadius","halfsize","innerLabel","_this$state","state","dataDefinitions","highlightedLine","checkedLegendItems","filter","item","checked","createElement","Donut","length","EmptyData","map","index","Pie","id","dataKey","name","label","color","active","Label","renderTooltip","_this","_this$asProps2","data","showTooltip","Tooltip","_ref","title","find","children","Fragment","Title","Flex","justifyContent","Text","bold","tooltipValueFormatter","AbstractChart","_defineProperty2","direction","alignItems","marginX","marginY","DonutChart","createComponent","exports"],"sources":["../../../../src/component/Chart/DonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent from '@semcore/core';\nimport { scaleLinear } from 'd3-scale';\n// @ts-ignore\nimport { Donut } from '../..';\nimport { AbstractChart } from './AbstractChart';\nimport { Text } from '@semcore/typography';\nimport { DonutChartData, DonutChartProps, DonutChartType } from './DonutChart.type';\nimport { Flex } from '@semcore/flex-box';\n\nclass DonutChartComponent extends AbstractChart<DonutChartData, DonutChartProps> {\n  static displayName = 'Chart.Donut';\n  static defaultProps: Partial<DonutChartProps> = {\n    direction: 'row-reverse',\n    alignItems: 'flex-start',\n    innerRadius: 100,\n    marginX: 0,\n    marginY: 0,\n  };\n\n  get xScale() {\n    const { xScale } = this.asProps;\n\n    if (xScale) {\n      return xScale;\n    }\n\n    return scaleLinear();\n  }\n\n  get yScale() {\n    const { yScale } = this.asProps;\n\n    if (yScale) {\n      return yScale;\n    }\n\n    return scaleLinear();\n  }\n\n  defaultLegendProps() {\n    return {\n      legendType: 'Table' as const,\n    };\n  }\n\n  renderChart() {\n    const { innerRadius, halfsize, innerLabel } = this.asProps;\n    const { dataDefinitions, highlightedLine } = this.state;\n\n    const checkedLegendItems = dataDefinitions.filter((item) => item.checked);\n\n    return (\n      <Donut halfsize={halfsize} innerRadius={innerRadius}>\n        {checkedLegendItems.length === 0 && <Donut.EmptyData />}\n        {checkedLegendItems.map((item, index) => {\n          return (\n            <Donut.Pie\n              key={item.id}\n              dataKey={item.id}\n              name={item.label}\n              color={item.color}\n              active={highlightedLine === index}\n            />\n          );\n        })}\n        {innerLabel && <Donut.Label>{innerLabel}</Donut.Label>}\n      </Donut>\n    );\n  }\n\n  renderTooltip() {\n    const { data, showTooltip } = this.asProps;\n    const { dataDefinitions } = this.state;\n\n    if (!showTooltip) {\n      return null;\n    }\n\n    return (\n      <Donut.Tooltip>\n        {({ dataKey }: any) => {\n          const title = dataDefinitions.find((item) => item.id === dataKey);\n\n          return {\n            children: (\n              <>\n                <Donut.Tooltip.Title>{title?.label || dataKey}</Donut.Tooltip.Title>\n                <Flex justifyContent='space-between'>\n                  <Text bold>{this.tooltipValueFormatter(data[dataKey])}</Text>\n                </Flex>\n              </>\n            ),\n          };\n        }}\n      </Donut.Tooltip>\n    );\n  }\n}\n\nexport const DonutChart: DonutChartType = createComponent(DonutChartComponent);\n"],"mappings":"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"}

package/lib/cjs/component/Chart/DonutChart.type.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=DonutChart.type.js.map

package/lib/cjs/component/Chart/DonutChart.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.type.js","names":[],"sources":["../../../../src/component/Chart/DonutChart.type.ts"],"sourcesContent":["import React from 'react';\nimport { Intergalactic } from '@semcore/core';\nimport { Flex } from '@semcore/flex-box';\nimport { ScaleLinear } from 'd3-scale';\nimport { BaseChartProps } from './AbstractChart.type';\n\nexport type DonutChartData = Record<string, number>;\n\nexport type DonutChartProps = BaseChartProps<DonutChartData> & {\n  groupKey?: never;\n  xScale?: ScaleLinear<any, any>;\n  yScale?: ScaleLinear<any, any>;\n  innerRadius?: number;\n  halfsize?: boolean;\n  innerLabel?: React.ReactNode;\n};\n\nexport type DonutChartType = Intergalactic.Component<typeof Flex, DonutChartProps>;\n"],"mappings":""}

package/lib/cjs/component/Chart/HistogramChart.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HistogramChart = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _core = _interopRequireDefault(require("@semcore/core"));
+var _d3Scale = require("d3-scale");
+var _ = require("../..");
+var _AbstractChart2 = require("./AbstractChart");
+var _flexBox = require("@semcore/flex-box");
+var _typography = require("@semcore/typography");
+// @ts-ignore
+var HistogramChartComponent = /*#__PURE__*/function (_AbstractChart) {
+  (0, _inherits2["default"])(HistogramChartComponent, _AbstractChart);
+  var _super = (0, _createSuper2["default"])(HistogramChartComponent);
+  function HistogramChartComponent() {
+    (0, _classCallCheck2["default"])(this, HistogramChartComponent);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2["default"])(HistogramChartComponent, [{
+    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 = (0, _.minMax)(data, groupKey);
+        return (0, _d3Scale.scaleTime)(_domain, range);
+      }
+      var domain = data.map(function (item) {
+        return item[groupKey];
+      });
+      return (0, _d3Scale.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 (max, 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 > max) {
+            max = barSum;
+          }
+          return max;
+        }, 0);
+      } else {
+        var flatValues = (0, _get2["default"])((0, _getPrototypeOf2["default"])(HistogramChartComponent.prototype), "flatValues", this);
+        max = Math.max.apply(Math, (0, _toConsumableArray2["default"])(flatValues));
+      }
+      return yScale !== null && yScale !== void 0 ? yScale : (0, _d3Scale.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["default"].createElement(_.StackBar, {
+          x: invertAxis ? undefined : groupKey,
+          y: invertAxis ? groupKey : undefined
+        }, dataDefinitions.map(function (item, index) {
+          var BarComponent = invertAxis ? _.StackBar.HorizontalBar : _.StackBar.Bar;
+          var commonBarComponentProps = {
+            color: item.color,
+            transparent: highlightedLine !== -1 && highlightedLine !== index
+          };
+          if (invertAxis) {
+            commonBarComponentProps.x = item.id;
+          } else {
+            commonBarComponentProps.y = item.id;
+          }
+          return item.checked && /*#__PURE__*/_react["default"].createElement(BarComponent, (0, _extends2["default"])({
+            key: item.id
+          }, commonBarComponentProps));
+        }));
+      }
+      var item = dataDefinitions[0];
+      return /*#__PURE__*/_react["default"].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["default"].createElement(_.HoverRect.Tooltip, {
+        x: invertAxis ? undefined : groupKey,
+        y: invertAxis ? groupKey : undefined,
+        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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].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["default"].createElement(_flexBox.Flex, {
+              justifyContent: "space-between",
+              key: item.id
+            }, /*#__PURE__*/_react["default"].createElement(_.HoverRect.Tooltip.Dot, {
+              mr: 4,
+              color: item.color
+            }, item.label), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+              bold: true
+            }, _this.tooltipValueFormatter(dataItem[item.id])));
+          }), showTotalInTooltip === true && /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
+            mt: 2,
+            justifyContent: "space-between"
+          }, /*#__PURE__*/_react["default"].createElement(_flexBox.Box, {
+            mr: 4
+          }, "Total"), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+            bold: true
+          }, total)))
+        };
+      });
+    }
+  }]);
+  return HistogramChartComponent;
+}(_AbstractChart2.AbstractChart);
+(0, _defineProperty2["default"])(HistogramChartComponent, "displayName", 'Chart.Histogram');
+var HistogramChart = (0, _core["default"])(HistogramChartComponent);
+exports.HistogramChart = HistogramChart;
+//# sourceMappingURL=HistogramChart.js.map

package/lib/cjs/component/Chart/HistogramChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistogramChart.js","names":["_react","_interopRequireDefault","require","_core","_d3Scale","_","_AbstractChart2","_flexBox","_typography","HistogramChartComponent","_AbstractChart","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","get","_this$asProps","asProps","xScale","_this$asProps$marginY","marginY","_this$asProps$marginX","marginX","plotWidth","plotHeight","invertAxis","data","groupKey","testItem","range","plotPadding","Date","Number","isNaN","getMilliseconds","domain","minMax","scaleTime","map","item","scaleBand","paddingInner","paddingOuter","_this$asProps2","yScale","_this$asProps2$margin","_this$asProps2$margin2","max","isStack","reduce","barSum","Object","values","sum","val","flatValues","_get2","_getPrototypeOf2","prototype","Math","_toConsumableArray2","scaleLinear","dataDefinitions","state","length","value","renderChart","_this$asProps3","_this$state","highlightedLine","createElement","StackBar","x","undefined","y","index","BarComponent","HorizontalBar","Bar","commonBarComponentProps","color","transparent","id","checked","_extends2","renderTooltip","_this","_this$asProps4","showTotalInTooltip","showTooltip","HoverRect","Tooltip","wMin","_ref","_dataItem$groupKey","xIndex","yIndex","dataItem","total","totalValue","children","Fragment","Title","toString","Flex","justifyContent","Dot","mr","label","Text","bold","tooltipValueFormatter","mt","Box","AbstractChart","_defineProperty2","HistogramChart","createComponent","exports"],"sources":["../../../../src/component/Chart/HistogramChart.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent from '@semcore/core';\nimport { scaleBand, scaleLinear, ScaleLinear, scaleTime } from 'd3-scale';\n// @ts-ignore\nimport { Bar, minMax, HoverRect, StackBar, BarProps } from '../..';\nimport { AbstractChart } from './AbstractChart';\nimport { HistogramChartData, HistogramChartProps, HistogramChartType } from './HistogramChart.type';\nimport { Box, Flex } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\n\nclass HistogramChartComponent extends AbstractChart<HistogramChartData, HistogramChartProps> {\n  static displayName = 'Chart.Histogram';\n\n  get xScale() {\n    const {\n      xScale,\n      marginY = 30,\n      marginX = 30,\n      plotWidth,\n      plotHeight,\n      invertAxis,\n      data,\n      groupKey,\n    } = this.asProps;\n\n    if (xScale) {\n      return xScale;\n    }\n\n    const testItem = data[0][groupKey];\n    const range = invertAxis\n      ? [plotHeight - marginX, this.plotPadding]\n      : [marginY, plotWidth - this.plotPadding];\n\n    if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {\n      const domain = minMax(data, groupKey);\n\n      return scaleTime(domain, range);\n    }\n\n    const domain = data.map((item) => item[groupKey]);\n\n    return scaleBand(domain, range).paddingInner(0.05).paddingOuter(0.2);\n  }\n\n  get yScale(): ScaleLinear<any, any> {\n    const {\n      yScale,\n      marginY = 30,\n      marginX = 30,\n      plotHeight,\n      plotWidth,\n      invertAxis,\n      data,\n    } = this.asProps;\n\n    let max: number;\n\n    if (this.isStack) {\n      max = data.reduce((max, item) => {\n        const barSum = Object.values(item).reduce<number>((sum, val) => {\n          if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {\n            return sum + val.getMilliseconds();\n          }\n\n          return sum + (val as number);\n        }, 0);\n\n        if (barSum > max) {\n          max = barSum;\n        }\n\n        return max;\n      }, 0);\n    } else {\n      const flatValues = super.flatValues;\n\n      max = Math.max(...flatValues);\n    }\n\n    return (\n      yScale ??\n      scaleLinear()\n        .range(\n          invertAxis\n            ? [marginY, plotWidth - this.plotPadding]\n            : [plotHeight - marginX, this.plotPadding],\n        )\n        .domain([0, max])\n    );\n  }\n\n  get isStack(): boolean {\n    const { dataDefinitions } = this.state;\n\n    return dataDefinitions.length > 1;\n  }\n\n  renderChart() {\n    const { groupKey, invertAxis } = this.asProps;\n    const { dataDefinitions, highlightedLine } = this.state;\n\n    if (this.isStack) {\n      return (\n        <StackBar x={invertAxis ? undefined : groupKey} y={invertAxis ? groupKey : undefined}>\n          {dataDefinitions.map((item, index) => {\n            const BarComponent = invertAxis ? StackBar.HorizontalBar : StackBar.Bar;\n\n            const commonBarComponentProps: BarProps = {\n              color: item.color,\n              transparent: highlightedLine !== -1 && highlightedLine !== index,\n            };\n\n            if (invertAxis) {\n              commonBarComponentProps.x = item.id;\n            } else {\n              commonBarComponentProps.y = item.id;\n            }\n\n            return item.checked && <BarComponent key={item.id} {...commonBarComponentProps} />;\n          })}\n        </StackBar>\n      );\n    }\n\n    const item = dataDefinitions[0];\n\n    return (\n      <Bar\n        x={invertAxis ? item.id : groupKey}\n        y={invertAxis ? groupKey : item.id}\n        key={item.id}\n        color={item.color}\n      />\n    );\n  }\n\n  renderTooltip(): React.ReactNode {\n    const { data, groupKey, showTotalInTooltip, showTooltip, invertAxis } = this.asProps;\n    const { dataDefinitions } = this.state;\n\n    if (!showTooltip) {\n      return null;\n    }\n\n    return (\n      <HoverRect.Tooltip\n        x={invertAxis ? undefined : groupKey}\n        y={invertAxis ? groupKey : undefined}\n        wMin={100}\n      >\n        {({ xIndex, yIndex }: any) => {\n          const index = invertAxis ? yIndex : xIndex;\n          const dataItem = data[index];\n          const total = this.totalValue(dataItem);\n\n          return {\n            children: (\n              <>\n                <HoverRect.Tooltip.Title>{dataItem[groupKey]?.toString()}</HoverRect.Tooltip.Title>\n\n                {dataDefinitions.map((item) => {\n                  return (\n                    item.checked && (\n                      <Flex justifyContent='space-between' key={item.id}>\n                        <HoverRect.Tooltip.Dot mr={4} color={item.color}>\n                          {item.label}\n                        </HoverRect.Tooltip.Dot>\n                        <Text bold>{this.tooltipValueFormatter(dataItem[item.id])}</Text>\n                      </Flex>\n                    )\n                  );\n                })}\n\n                {showTotalInTooltip === true && (\n                  <Flex mt={2} justifyContent='space-between'>\n                    <Box mr={4}>Total</Box>\n                    <Text bold>{total}</Text>\n                  </Flex>\n                )}\n              </>\n            ),\n          };\n        }}\n      </HoverRect.Tooltip>\n    );\n  }\n}\n\nexport const HistogramChart: HistogramChartType = createComponent(HistogramChartComponent);\n"],"mappings":"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"}

package/lib/cjs/component/Chart/HistogramChart.type.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=HistogramChart.type.js.map

package/lib/cjs/component/Chart/HistogramChart.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistogramChart.type.js","names":[],"sources":["../../../../src/component/Chart/HistogramChart.type.ts"],"sourcesContent":["import { Intergalactic } from '@semcore/core';\nimport { Flex } from '@semcore/flex-box';\nimport { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';\nimport { BaseChartProps } from './AbstractChart.type';\n\nexport type HistogramChartData = Array<Record<string, number | Date>>;\n\nexport type HistogramChartProps = BaseChartProps<HistogramChartData> & {\n  groupKey: string;\n  xScale?: ScaleBand<any> | ScaleTime<any, any>;\n  yScale?: ScaleLinear<any, any>;\n};\n\nexport type HistogramChartType = Intergalactic.Component<typeof Flex, HistogramChartProps>;\n"],"mappings":""}