@semcore/d3-chart 3.60.0 → 3.60.1

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

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

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

@@ -0,0 +1,141 @@
+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 Venn from "../../Venn.mjs";
+import { AbstractChart } from "./AbstractChart.mjs";
+import { Text } from "@semcore/typography";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+var VennChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(VennChartComponent2, _AbstractChart);
+  var _super = _createSuper(VennChartComponent2);
+  function VennChartComponent2() {
+    _classCallCheck(this, VennChartComponent2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(VennChartComponent2, [{
+    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: "dataKeys",
+    get: function get() {
+      var data = this.props.data;
+      var legendKeys = Object.keys(data).filter(function(item) {
+        var isIntersection = /\//.test(item);
+        return !isIntersection;
+      });
+      return legendKeys;
+    }
+  }, {
+    key: "defaultLegendProps",
+    value: function defaultLegendProps() {
+      return {
+        legendType: "Table"
+      };
+    }
+  }, {
+    key: "renderChart",
+    value: function renderChart() {
+      var data = this.asProps.data;
+      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
+      var checkedLegendItems = dataDefinitions.filter(function(item) {
+        return item.checked;
+      });
+      var checkedLegendItemsMap = checkedLegendItems.reduce(function(result, item) {
+        result[item.id] = item;
+        return result;
+      }, {});
+      var intersections = Object.keys(data).reduce(function(result, dataKey) {
+        var isIntersection = /\//.test(dataKey);
+        if (isIntersection) {
+          result.push(dataKey);
+        }
+        return result;
+      }, []);
+      return /* @__PURE__ */ React.createElement(Venn, null, checkedLegendItems.map(function(item, index) {
+        return /* @__PURE__ */ React.createElement(Venn.Circle, {
+          key: item.id,
+          dataKey: item.id,
+          name: item.label,
+          color: item.color,
+          transparent: highlightedLine !== -1 && highlightedLine !== index
+        });
+      }), intersections.map(function(intersectionKey) {
+        var intersectionKeys = intersectionKey.split("/");
+        var hasDisabledItems = intersectionKeys.some(function(key) {
+          return checkedLegendItemsMap[key] === void 0;
+        });
+        if (hasDisabledItems) {
+          return null;
+        }
+        var name = intersectionKeys.map(function(id) {
+          var _dataDefinitions$find;
+          return ((_dataDefinitions$find = dataDefinitions.find(function(legendItem) {
+            return legendItem.id === id;
+          })) === null || _dataDefinitions$find === void 0 ? void 0 : _dataDefinitions$find.label) || "";
+        }).join(" & ");
+        return /* @__PURE__ */ React.createElement(Venn.Intersection, {
+          key: intersectionKey,
+          dataKey: intersectionKey,
+          name
+        });
+      }));
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
+      var showTooltip = this.asProps.showTooltip;
+      if (!showTooltip) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(Venn.Tooltip, null, function(_ref) {
+        var name = _ref.name, dataKey = _ref.dataKey, data = _ref.data;
+        return {
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Venn.Tooltip.Title, null, name), /* @__PURE__ */ React.createElement(Text, {
+            bold: true
+          }, data[dataKey]))
+        };
+      });
+    }
+  }, {
+    key: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "Venn"
+      });
+    }
+  }]);
+  return VennChartComponent2;
+}(AbstractChart);
+_defineProperty(VennChartComponent, "displayName", "Chart.Venn");
+_defineProperty(VennChartComponent, "defaultProps", {
+  direction: "row-reverse",
+  alignItems: "flex-start",
+  marginY: 0,
+  marginX: 0
+});
+_defineProperty(VennChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var VennChart = createComponent(VennChartComponent);
+export {
+  VennChart
+};

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

@@ -0,0 +1,27 @@
+import { LineChart } from "./LineChart.mjs";
+import { BarChart } from "./BarChart.mjs";
+import { CompactHorizontalBarChart } from "./CompactHorizontalBarChart.mjs";
+import { HistogramChart } from "./HistogramChart.mjs";
+import { ScatterPlotChart } from "./ScatterPlotChart.mjs";
+import { AreaChart } from "./AreaChart.mjs";
+import { BubbleChart } from "./BubbleChart.mjs";
+import { DonutChart } from "./DonutChart.mjs";
+import { VennChart } from "./VennChart.mjs";
+import { RadarChart } from "./RadarChart.mjs";
+import { CigaretteChart } from "./CigaretteChart.mjs";
+const index = {
+  Line: LineChart,
+  Bar: BarChart,
+  Histogram: HistogramChart,
+  ScatterPlot: ScatterPlotChart,
+  Area: AreaChart,
+  Bubble: BubbleChart,
+  Donut: DonutChart,
+  Venn: VennChart,
+  Radar: RadarChart,
+  Cigarette: CigaretteChart,
+  CompactHorizontalBar: CompactHorizontalBarChart
+};
+export {
+  index as default
+};

package/lib/esm/component/ChartLegend/BaseLegend.mjs

@@ -0,0 +1,91 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Component } from "@semcore/core";
+import { makeDataHintsHandlers } from "../../a11y/hints.mjs";
+var BaseLegend = /* @__PURE__ */ function(_Component) {
+  _inherits(BaseLegend2, _Component);
+  var _super = _createSuper(BaseLegend2);
+  function BaseLegend2() {
+    var _this;
+    _classCallCheck(this, BaseLegend2);
+    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), "onChangeLegendItem", function(id, checked) {
+      var _this$props$onChangeV, _this$props;
+      (_this$props$onChangeV = (_this$props = _this.props).onChangeVisibleItem) === null || _this$props$onChangeV === void 0 ? void 0 : _this$props$onChangeV.call(_this$props, id, checked);
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindOnMouseEnterItem", function(id) {
+      return function(e) {
+        var _this$props$onMouseEn, _this$props2;
+        (_this$props$onMouseEn = (_this$props2 = _this.props).onMouseEnterItem) === null || _this$props$onMouseEn === void 0 ? void 0 : _this$props$onMouseEn.call(_this$props2, id, e);
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindOnMouseLeaveItem", function(id) {
+      return function(e) {
+        var _this$props$onMouseLe, _this$props3;
+        (_this$props$onMouseLe = (_this$props3 = _this.props).onMouseLeaveItem) === null || _this$props$onMouseLe === void 0 ? void 0 : _this$props$onMouseLe.call(_this$props3, id, e);
+      };
+    });
+    return _this;
+  }
+  _createClass(BaseLegend2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setHints();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.items !== this.props.items || prevProps.dataHints !== this.props.dataHints) {
+        this.setHints();
+      }
+    }
+  }, {
+    key: "setHints",
+    value: function setHints() {
+      var _this$asProps = this.asProps, items = _this$asProps.items, dataHints = _this$asProps.dataHints;
+      var dataHintsHandler = dataHints ? makeDataHintsHandlers(dataHints) : void 0;
+      items.forEach(function(legendItem) {
+        dataHintsHandler === null || dataHintsHandler === void 0 ? void 0 : dataHintsHandler.labelKey("value", legendItem.id, legendItem.label);
+      });
+    }
+  }, {
+    key: "getItem",
+    value: function getItem(index) {
+      var line = this.asProps.items[index];
+      if (line === void 0) {
+        throw new Error('No index "'.concat(index, '" in lines'));
+      }
+      return line;
+    }
+  }, {
+    key: "getLegendItemProps",
+    value: function getLegendItemProps(_, index) {
+      var _this$asProps2 = this.asProps, _this$asProps2$shape = _this$asProps2.shape, shape = _this$asProps2$shape === void 0 ? "Checkbox" : _this$asProps2$shape, _this$asProps2$size = _this$asProps2.size, size = _this$asProps2$size === void 0 ? "m" : _this$asProps2$size, patterns = _this$asProps2.patterns;
+      var line = this.getItem(index);
+      return _objectSpread(_objectSpread({}, line), {}, {
+        shape,
+        size,
+        onChangeLegendItem: this.onChangeLegendItem,
+        onMouseEnter: this.bindOnMouseEnterItem(line.id),
+        onMouseLeave: this.bindOnMouseLeaveItem(line.id),
+        style: {
+          gridRowStart: "".concat(index + 1),
+          gridRowEnd: "".concat(index + 2)
+        },
+        patterns
+      });
+    }
+  }]);
+  return BaseLegend2;
+}(Component);
+export {
+  BaseLegend
+};

package/lib/esm/component/ChartLegend/LegendFlex/LegendFlex.mjs

@@ -0,0 +1,86 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { sstyled as sstyled$1, assignProps } from "@semcore/core";
+import React from "react";
+import { Flex } from "@semcore/flex-box";
+import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
+import Divider from "@semcore/divider";
+import Checkbox from "@semcore/checkbox";
+import { BaseLegend } from "../BaseLegend.mjs";
+import { localizedMessages } from "../../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+/*!__reshadow-styles__:"./legend-flex.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SLegendFlex_v8y85_gg_._direction_row_v8y85_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_v8y85_gg_._direction_column_v8y85_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
+    /*__inner_css_end__*/
+    "v8y85_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SLegendFlex": "___SLegendFlex_v8y85_gg_",
+    "_direction_row": "_direction_row_v8y85_gg_",
+    "_direction_column": "_direction_column_v8y85_gg_"
+  })
+);
+var LegendFlexRoot = /* @__PURE__ */ function(_BaseLegend) {
+  _inherits(LegendFlexRoot2, _BaseLegend);
+  var _super = _createSuper(LegendFlexRoot2);
+  function LegendFlexRoot2() {
+    _classCallCheck(this, LegendFlexRoot2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(LegendFlexRoot2, [{
+    key: "renderTrend",
+    value: function renderTrend() {
+      var _ref3 = this.asProps, onTrendIsVisibleChange = _ref3.onTrendIsVisibleChange, trendIsVisible = _ref3.trendIsVisible, trendLabel = _ref3.trendLabel, size = _ref3.size, getI18nText = _ref3.getI18nText;
+      return /* @__PURE__ */ React.createElement(Checkbox, {
+        checked: trendIsVisible,
+        onChange: onTrendIsVisibleChange,
+        theme: "gray-400",
+        label: trendLabel !== null && trendLabel !== void 0 ? trendLabel : getI18nText("trend"),
+        size
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SLegendFlex = Flex;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, direction = _this$asProps.direction, withTrend = _this$asProps.withTrend, suffix = _this$asProps.suffix, items = _this$asProps.items;
+      var orientation = direction === "row" ? "vertical" : "horizontal";
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLegendFlex, _ref2.cn("SLegendFlex", _objectSpread({}, assignProps({
+        "role": "group"
+      }, _ref))), items.map(function(_ref4) {
+        var id = _ref4.id;
+        return /* @__PURE__ */ React.createElement(Children, {
+          key: id
+        });
+      }), (withTrend || suffix) && /* @__PURE__ */ React.createElement(Divider, _ref2.cn("Divider", {
+        "orientation": orientation
+      })), withTrend && this.renderTrend(), suffix ? suffix : null);
+    }
+  }]);
+  return LegendFlexRoot2;
+}(BaseLegend);
+_defineProperty(LegendFlexRoot, "displayName", "LegendFlex");
+_defineProperty(LegendFlexRoot, "style", style);
+_defineProperty(LegendFlexRoot, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(LegendFlexRoot, "defaultProps", function() {
+  return {
+    direction: "row",
+    children: /* @__PURE__ */ React.createElement(LegendFlex.LegendItem, null)
+  };
+});
+var LegendFlex = createComponent(LegendFlexRoot, {
+  LegendItem: LegendItemComponent
+});
+export {
+  LegendFlex
+};

package/lib/esm/component/ChartLegend/LegendFlex/legend-flex.shadow.css

@@ -0,0 +1,12 @@
+SLegendFlex[direction='row'] {
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+
+SLegendFlex[direction='column'] {
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+}