@elliemae/ds-dataviz 3.8.1 → 3.9.0-next.1

package/dist/cjs/graphs/Chart/series/HorizontalBars.js

@@ -0,0 +1,85 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var HorizontalBars_exports = {};
+__export(HorizontalBars_exports, {
+  HorizontalBars: () => HorizontalBars
+});
+module.exports = __toCommonJS(HorizontalBars_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_Rect = require("./Rect");
+var import_ChartContext = require("../ChartContext");
+const HorizontalBars = ({ serie }) => {
+  const {
+    props: { yAxis },
+    xScale,
+    yScale,
+    y2Scale,
+    subGroupScale,
+    colorScale,
+    getXValue,
+    getYValue,
+    chartId
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
+  return (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+      fill: colorScale(serie.name),
+      clipPath: `url(#rect-focus-ring-${chartId})`,
+      children: serie.data.map((bar, i) => {
+        const x = getXValue(bar);
+        const y = getYValue(bar);
+        const width = xScale(x);
+        const height = subGroupScale?.bandwidth();
+        const transformY = subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+          transform: `translate(0,${transformY})`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rect.Rect, {
+            width,
+            height,
+            id: bar.key,
+            x: 0,
+            xValue: x,
+            yValue: y
+          })
+        }, bar.key);
+      })
+    }),
+    [
+      chartId,
+      colorScale,
+      finalYScale,
+      getXValue,
+      getYValue,
+      serie.data,
+      serie.name,
+      subGroupScale,
+      xScale,
+      yAxis?.cols
+    ]
+  );
+};
+//# sourceMappingURL=HorizontalBars.js.map

package/dist/cjs/graphs/Chart/series/HorizontalBars.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/series/HorizontalBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const HorizontalBars = ({ serie }: BarsT) => {\n  const {\n    props: { yAxis },\n    xScale,\n    yScale,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    chartId,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n        {serie.data.map((bar, i) => {\n          const x = getXValue(bar);\n          const y = getYValue(bar);\n\n          const width = xScale(x);\n          const height = subGroupScale?.bandwidth();\n\n          const transformY = subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i);\n\n          return (\n            <g key={bar.key} transform={`translate(0,${transformY})`}>\n              <Rect width={width} height={height} id={bar.key} x={0} xValue={x} yValue={y} />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n      yAxis?.cols,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAKtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAa;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AAEvB,cAAM,QAAQ,OAAO,CAAC;AACtB,cAAM,SAAS,eAAe,UAAU;AAExC,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,OAAO,OAAO,MAAM,CAAC;AAEhF,eACE,4CAAC;AAAA,UAAgB,WAAW,eAAe;AAAA,UACzC,sDAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,YAAK,GAAG;AAAA,YAAG,QAAQ;AAAA,YAAG,QAAQ;AAAA,WAAG;AAAA,WADvE,IAAI,GAEZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js

@@ -0,0 +1,77 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var HorizontalStackedBars_exports = {};
+__export(HorizontalStackedBars_exports, {
+  HorizontalStackedBars: () => HorizontalStackedBars
+});
+module.exports = __toCommonJS(HorizontalStackedBars_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_Rect = require("./Rect");
+var import_ChartContext = require("../ChartContext");
+var import_helpers = require("../helpers");
+const HorizontalStackedBars = ({ serie }) => {
+  const {
+    props: { yAxis, groups },
+    xScale,
+    yScale,
+    stackedData,
+    subGroupScale,
+    colorScale,
+    chartId,
+    getYValue
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const serieWithStackedValues = (0, import_helpers.getStackedData)(stackedData, serie);
+  const stackIndex = (0, import_helpers.getStackedIndex)(groups, serie.name);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+    children: serieWithStackedValues.map((sequence, i) => {
+      const isFloorStack = sequence[0] === 0;
+      const xValue = sequence[1] - sequence[0];
+      const yValue = getYValue(serie.data[i]);
+      const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);
+      const height = subGroupScale?.bandwidth();
+      const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);
+      const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yAxis?.cols?.[i]);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        clipPath: `url(#rect-focus-ring-${chartId})`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+          fill: colorScale(serie.name),
+          transform: `translate(0, ${transformY})`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rect.Rect, {
+            width,
+            height,
+            x: transformX,
+            xValue,
+            yValue,
+            id: serie.data[i].key,
+            name: serie.name
+          })
+        })
+      }, serie.data[i].key);
+    })
+  });
+};
+//# sourceMappingURL=HorizontalStackedBars.js.map

package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/series/HorizontalStackedBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\n\nexport const HorizontalStackedBars = ({ serie }) => {\n  const {\n    props: { yAxis, groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yAxis?.cols?.[i]);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAM;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,OAAO,OAAO,EAAE;AAExF,aACE,4CAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,sDAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,sDAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,WACd;AAAA,SACF;AAAA,SAXM,MAAM,KAAK,GAAG,GAYtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/series/Line.js

@@ -31,33 +31,37 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_d3 = require("d3");
-var import_styles = require("../styles");
 var import_Points = require("./Points");
 var import_ChartContext = require("../ChartContext");
 const Line = ({ serie }) => {
-  const {
-    props: { xAxis },
-    xScale,
-    yScale,
-    y2Scale,
-    colorScale
-  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
-  const lineTypeMap = {
-    line: import_d3.curveLinear,
-    spline: import_d3.curveNatural
-  };
+  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const ref = (0, import_react.useRef)(null);
+  const firstRender = (0, import_react.useRef)(true);
+  const finalYScale = (0, import_react.useMemo)(() => serie.scale === "y2" ? y2Scale : yScale, [serie.scale, y2Scale, yScale]);
+  const lineTypeMap = (0, import_react.useMemo)(
+    () => ({
+      line: import_d3.curveLinear,
+      spline: import_d3.curveNatural
+    }),
+    []
+  );
   const lineD3 = (0, import_react.useMemo)(
-    () => (0, import_d3.line)().x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y((d) => finalYScale(d.value.y ?? d.value)).curve(lineTypeMap[serie.type] ?? import_d3.curveLinear)(serie.data),
-    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale]
+    () => (0, import_d3.line)().x((d) => xScale(getXValue(d))).y((d) => finalYScale(getYValue(d))).curve(lineTypeMap[serie.type] ?? import_d3.curveLinear),
+    [finalYScale, getXValue, getYValue, lineTypeMap, serie.type, xScale]
   );
-  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;
+  (0, import_react.useEffect)(() => {
+    if (!ref.current)
+      return;
+    const groupContent = (0, import_d3.select)(ref?.current);
+    groupContent.selectAll("*").remove();
+    const path = groupContent.append("path").datum(serie.data).attr("fill", "none").attr("stroke", colorScale(serie.name)).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 2).attr("d", lineD3);
+  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, lineTypeMap, serie, xScale]);
+  const xTranslate = (0, import_react.useMemo)(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
     transform: `translate(${xTranslate}, 0)`,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLine, {
-        d: lineD3,
-        stroke: colorScale(serie.name)
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        ref
       }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Points.Points, {
         serie

package/dist/cjs/graphs/Chart/series/Line.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Line.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useState } from 'react';\nimport { line, curveNatural, curveLinear } from 'd3';\nimport { StyledLine } from '../styles';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\n\nexport const Line = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    y2Scale,\n    colorScale,\n    // activeSerie,\n    // setActiveSerie,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n  const lineTypeMap = {\n    line: curveLinear,\n    spline: curveNatural,\n  };\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n        .y((d) => finalYScale(d.value.y ?? d.value))\n        .curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),\n    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale],\n  );\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g\n      transform={`translate(${xTranslate}, 0)`}\n      // onMouseEnter={() => setActiveSerie(serie.key)}\n      // onMouseLeave={() => setActiveSerie('')}\n    >\n      <StyledLine d={lineD3} stroke={colorScale(serie.name)} />\n      <Points serie={serie} />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAAgD;AAChD,oBAA2B;AAC3B,oBAAuB;AACvB,0BAA6B;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAGF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AACrD,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrE,EAAE,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC1C,MAAM,YAAY,MAAM,SAAS,qBAAW,EAAE,MAAM,IAAI;AAAA,IAC7D,CAAC,aAAa,MAAM,MAAM,MAAM,MAAM,QAAQ,OAAO,MAAM,WAAW;AAAA,EACxE;AAIA,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,6CAAC;AAAA,IACC,WAAW,aAAa;AAAA,IAIxB;AAAA,kDAAC;AAAA,QAAW,GAAG;AAAA,QAAQ,QAAQ,WAAW,MAAM,IAAI;AAAA,OAAG;AAAA,MACvD,4CAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, curveNatural, easeLinear, transition, curveLinear, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\n\nexport const Line = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<React.SVGProps<SVGGElement> | SVGGElement>(null);\n  const firstRender = useRef(true);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n  const lineTypeMap = useMemo(\n    () => ({\n      line: curveLinear,\n      spline: curveNatural,\n    }),\n    [],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(lineTypeMap[serie.type] ?? curveLinear),\n    [finalYScale, getXValue, getYValue, lineTypeMap, serie.type, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      .attr('stroke-linecap', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    // const pathLength = path.node()?.getTotalLength();\n\n    // if (firstRender?.current) {\n    //   const transitionPath = transition().ease(easeLinear).duration(800);\n\n    //   path\n    //     .attr('stroke-dashoffset', pathLength)\n    //     .attr('stroke-dasharray', pathLength)\n    //     .transition(transitionPath)\n    //     .attr('stroke-dashoffset', 0);\n\n    //   firstRender.current = false;\n    // }\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, lineTypeMap, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <g transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref}></g>\n\n      <Points serie={serie} />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8D;AAC9D,gBAAgF;AAChF,oBAAuB;AACvB,0BAA6B;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,QAAI,yBAAW,gCAAY;AAE7F,QAAM,UAAM,qBAAkD,IAAI;AAClE,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,kBAAc,sBAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAC3G,QAAM,kBAAc;AAAA,IAClB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,YAAY,MAAM,SAAS,qBAAW;AAAA,IACjD,CAAC,aAAa,WAAW,WAAW,aAAa,MAAM,MAAM,MAAM;AAAA,EACrE;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,mBAAe,kBAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAC/B,KAAK,kBAAkB,OAAO,EAC9B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAAA,EAerB,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,aAAa,OAAO,MAAM,CAAC;AAItF,QAAM,iBAAa,sBAAQ,OAAO,QAAQ,YAAY,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE3E,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB;AAAA,kDAAC;AAAA,QAAE;AAAA,OAAU;AAAA,MAEb,4CAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Point.js

@@ -30,38 +30,108 @@ module.exports = __toCommonJS(Point_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_styles = require("../styles");
 var import_ChartContext = require("../ChartContext");
-const Point = ({ x, y, pointRadius, id, opacity }) => {
+var import_constants = require("../../constants");
+var import_FocusableRegion = require("../parts/FocusableRegion");
+const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity }) => {
   const {
     activePoint,
-    setActivePoint,
     scrapperPosY,
     scrapperPosX,
-    props: { xAxis, scrapper }
+    props: { scrapper, TooltipRenderer }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const isFocused = (0, import_react.useMemo)(() => {
-    if (activePoint === id) {
+    if (activePoint?.key === id) {
       return true;
     }
-    if (scrapper?.type === "horizontal") {
+    if (scrapper?.type === import_constants.SCRAPPER.TYPE_HORIZONTAL) {
       return y === scrapperPosY;
     }
-    if (scrapper?.type === "vertical") {
+    if (scrapper?.type === import_constants.SCRAPPER.TYPE_VERTICAL) {
       return x === scrapperPosX;
     }
     return false;
   }, [activePoint, id, scrapper, y, scrapperPosY, x, scrapperPosX]);
-  return (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPoint, {
-        id: `${id}-mark`,
-        isFocused,
-        r: pointRadius,
-        opacity
-      })
-    }),
-    [id, isFocused, opacity, pointRadius]
-  );
+  const point = (0, import_react.useMemo)(() => {
+    if (import_constants.LINE.POINT_STYLE.DIAMOND === pointStyle) {
+      const squareEdge = pointRadius * 2;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        transform: "rotate(45)",
+        children: [
+          isFocused ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+            x: -pointRadius - import_constants.FOCUS_RING.STROKE_WIDTH,
+            y: -pointRadius - import_constants.FOCUS_RING.STROKE_WIDTH,
+            width: squareEdge + import_constants.FOCUS_RING.STROKE_WIDTH * 2,
+            height: squareEdge + import_constants.FOCUS_RING.STROKE_WIDTH * 2,
+            fill: "none",
+            stroke: import_constants.FOCUS_RING.COLOR,
+            strokeWidth: import_constants.FOCUS_RING.STROKE_WIDTH
+          }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+            x: -pointRadius,
+            y: -pointRadius,
+            id: `${id}-mark`,
+            width: squareEdge,
+            height: squareEdge
+          })
+        ]
+      });
+    }
+    if (import_constants.LINE.POINT_STYLE.SQUARE === pointStyle) {
+      const squareEdge = pointRadius * 2;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        children: [
+          isFocused ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+            x: -pointRadius - import_constants.FOCUS_RING.STROKE_WIDTH,
+            y: -pointRadius - import_constants.FOCUS_RING.STROKE_WIDTH,
+            width: squareEdge + import_constants.FOCUS_RING.STROKE_WIDTH * 2,
+            height: squareEdge + import_constants.FOCUS_RING.STROKE_WIDTH * 2,
+            fill: "none",
+            stroke: import_constants.FOCUS_RING.COLOR,
+            strokeWidth: import_constants.FOCUS_RING.STROKE_WIDTH
+          }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+            x: -pointRadius,
+            y: -pointRadius,
+            id: `${id}-mark`,
+            width: squareEdge,
+            height: squareEdge
+          })
+        ]
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+      children: [
+        isFocused ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+            r: (pointRadius ?? import_constants.LINE.DEFAULT_POINT_RADIUS) + import_constants.FOCUS_RING.STROKE_WIDTH,
+            fill: "none",
+            stroke: import_constants.FOCUS_RING.COLOR,
+            strokeWidth: import_constants.FOCUS_RING.STROKE_WIDTH
+          })
+        }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+          id: `${id}-mark`,
+          r: pointRadius ?? (isFocused ? import_constants.LINE.DEFAULT_POINT_RADIUS : 0),
+          opacity
+        })
+      ]
+    });
+  }, [id, isFocused, opacity, pointRadius, pointStyle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    children: [
+      point,
+      activePoint?.key === id && TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusableRegion.FocusableRegion, {
+        id,
+        width: pointRadius * 2,
+        height: pointRadius * 2,
+        pointRadius,
+        style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
+        content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
+          data: [{ name, yValue, xValue }]
+        })
+      }) : ""
+    ]
+  });
 };
 //# sourceMappingURL=Point.js.map

package/dist/cjs/graphs/Chart/series/Point.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Point.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledPoint } from '../styles';\nimport { ChartContext } from '../ChartContext';\n\nexport const Point = ({ x, y, pointRadius, id, opacity }) => {\n  const {\n    activePoint,\n    setActivePoint,\n    scrapperPosY,\n    scrapperPosX,\n    props: { xAxis, scrapper },\n  } = useContext(ChartContext);\n  const isFocused = useMemo(() => {\n    if (activePoint === id) {\n      return true;\n    }\n    if (scrapper?.type === 'horizontal') {\n      return y === scrapperPosY;\n    }\n    if (scrapper?.type === 'vertical') {\n      return x === scrapperPosX;\n    }\n    return false;\n  }, [activePoint, id, scrapper, y, scrapperPosY, x, scrapperPosX]);\n\n  return useMemo(\n    () => (\n      <g>\n        <StyledPoint id={`${id}-mark`} isFocused={isFocused} r={pointRadius} opacity={opacity}></StyledPoint>\n      </g>\n    ),\n    [id, isFocused, opacity, pointRadius],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,oBAA4B;AAC5B,0BAA6B;AAEtB,MAAM,QAAQ,CAAC,EAAE,GAAG,GAAG,aAAa,IAAI,QAAQ,MAAM;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,SAAS;AAAA,EAC3B,QAAI,yBAAW,gCAAY;AAC3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,gBAAgB,IAAI;AACtB,aAAO;AAAA,IACT;AACA,QAAI,UAAU,SAAS,cAAc;AACnC,aAAO,MAAM;AAAA,IACf;AACA,QAAI,UAAU,SAAS,YAAY;AACjC,aAAO,MAAM;AAAA,IACf;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,IAAI,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;AAEhE,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MACC,sDAAC;AAAA,QAAY,IAAI,GAAG;AAAA,QAAW;AAAA,QAAsB,GAAG;AAAA,QAAa;AAAA,OAAkB;AAAA,KACzF;AAAA,IAEF,CAAC,IAAI,WAAW,SAAS,WAAW;AAAA,EACtC;AACF;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING, SCRAPPER, LINE } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nexport const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity }) => {\n  const {\n    activePoint,\n    scrapperPosY,\n    scrapperPosX,\n    props: { scrapper, TooltipRenderer },\n  } = useContext(ChartContext);\n  const isFocused = useMemo(() => {\n    if (activePoint?.key === id) {\n      return true;\n    }\n    if (scrapper?.type === SCRAPPER.TYPE_HORIZONTAL) {\n      return y === scrapperPosY;\n    }\n    if (scrapper?.type === SCRAPPER.TYPE_VERTICAL) {\n      return x === scrapperPosX;\n    }\n    return false;\n  }, [activePoint, id, scrapper, y, scrapperPosY, x, scrapperPosX]);\n\n  const point = useMemo(() => {\n    if (LINE.POINT_STYLE.DIAMOND === pointStyle) {\n      const squareEdge = pointRadius * 2;\n\n      return (\n        <g transform=\"rotate(45)\">\n          {isFocused ? (\n            <rect\n              x={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              y={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              width={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              height={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              fill=\"none\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect x={-pointRadius} y={-pointRadius} id={`${id}-mark`} width={squareEdge} height={squareEdge}></rect>\n        </g>\n      );\n    }\n    if (LINE.POINT_STYLE.SQUARE === pointStyle) {\n      const squareEdge = pointRadius * 2;\n\n      return (\n        <g>\n          {isFocused ? (\n            <rect\n              x={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              y={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              width={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              height={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              fill=\"none\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect x={-pointRadius} y={-pointRadius} id={`${id}-mark`} width={squareEdge} height={squareEdge}></rect>\n        </g>\n      );\n    }\n\n    return (\n      <g>\n        {isFocused ? (\n          <g>\n            <circle\n              r={(pointRadius ?? LINE.DEFAULT_POINT_RADIUS) + FOCUS_RING.STROKE_WIDTH}\n              fill=\"none\"\n              // data-z-index=\"99\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></circle>\n          </g>\n        ) : null}\n        <circle\n          id={`${id}-mark`}\n          r={pointRadius ?? (isFocused ? LINE.DEFAULT_POINT_RADIUS : 0)}\n          opacity={opacity}\n        ></circle>\n      </g>\n    );\n  }, [id, isFocused, opacity, pointRadius, pointStyle]);\n\n  return (\n    <g>\n      {point}\n      {activePoint?.key === id && TooltipRenderer ? (\n        <FocusableRegion\n          id={id}\n          width={pointRadius * 2}\n          height={pointRadius * 2}\n          pointRadius={pointRadius}\n          style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n          content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n        />\n      ) : (\n        ''\n      )}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Points.js

@@ -32,15 +32,17 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Point = require("./Point");
 var import_ChartContext = require("../ChartContext");
-var import_FocusableRegion = require("../parts/FocusableRegion");
+var import_helpers = require("../helpers");
 const Points = ({ serie }) => {
   const {
     colorScale,
     xScale,
     y2Scale,
     yScale,
+    getXValue,
+    getYValue,
     stackedData,
-    props: { xAxis, data, TooltipRenderer, types }
+    props: { types }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   const opacity = (0, import_react.useMemo)(() => types === "scatter" ? 0.8 : 1, [serie.type]);
@@ -48,36 +50,30 @@ const Points = ({ serie }) => {
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       fill: colorScale(serie.name),
       children: serie.data.map((point, i) => {
-        const { pointRadius } = serie;
-        const x = point.value.x ?? xAxis?.cols?.[point.position];
-        const y = point.value.y ?? point.value;
+        const { pointRadius, pointStyle } = serie;
+        const serieWithStackedValues = (0, import_helpers.getStackedData)(stackedData, serie);
+        const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;
+        const x = getXValue(point);
+        const y = getYValue(point);
         const xPosition = xScale(x);
-        const yPosition = finalYScale(y);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        const yPosition = finalYScale(y + deltaY);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
           transform: `translate(${xPosition},${yPosition})`,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Point.Point, {
-              pointRadius,
-              id: point.key,
-              opacity,
-              x: xPosition,
-              y: yPosition
-            }),
-            TooltipRenderer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusableRegion.FocusableRegion, {
-              id: point.key,
-              width: pointRadius * 2,
-              height: pointRadius * 2,
-              pointRadius,
-              style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
-              content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
-                data: [{ name: serie.name, yValue: y, xValue: x }]
-              })
-            })
-          ]
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Point.Point, {
+            pointRadius,
+            id: point.key,
+            opacity,
+            x: xPosition + (xScale.bandwidth?.() ?? 0) / 2,
+            y: yPosition,
+            xValue: x,
+            yValue: y,
+            pointStyle,
+            name: serie.name
+          })
         }, `${point.key}-p`);
       })
     }),
-    [TooltipRenderer, colorScale, finalYScale, opacity, serie, xAxis?.cols, xScale]
+    [colorScale, finalYScale, getXValue, getYValue, opacity, serie, stackedData, xScale]
   );
   return render;
 };

package/dist/cjs/graphs/Chart/series/Points.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Points.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\n// import { getStackedData } from '../helpers';\nimport { FocusableRegion } from '../parts/FocusableRegion';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    stackedData,\n    props: { xAxis, data, TooltipRenderer, types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  const render = useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius } = serie;\n          // const serieWithStackedValues = getStackedData(stackedData, serie);\n          // const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = point.value.x ?? xAxis?.cols?.[point.position];\n          const y = point.value.y ?? point.value;\n          const xPosition = xScale(x);\n          // const yPosition = finalYScale(y + deltaY);\n          const yPosition = finalYScale(y);\n\n          return (\n            <g\n              key={`${point.key}-p`}\n              transform={`translate(${xPosition},${yPosition})`}\n              // onMouseEnter={() => setActiveSerie(serie.key)}\n              // onMouseLeave={() => setActiveSerie('')}\n            >\n              <Point pointRadius={pointRadius} id={point.key} opacity={opacity} x={xPosition} y={yPosition} />\n              {TooltipRenderer && (\n                <FocusableRegion\n                  id={point.key}\n                  width={pointRadius * 2}\n                  height={pointRadius * 2}\n                  pointRadius={pointRadius}\n                  style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n                  content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [TooltipRenderer, colorScale, finalYScale, opacity, serie, xAxis?.cols, xScale],\n  );\n  return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,mBAAsB;AACtB,0BAA6B;AAE7B,6BAAgC;AAEzB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM,iBAAiB,MAAM;AAAA,EAC/C,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,cAAU,sBAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,QAAM,aAAS;AAAA,IACb,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,cAAM,EAAE,YAAY,IAAI;AAGxB,cAAM,IAAI,MAAM,MAAM,KAAK,OAAO,OAAO,MAAM;AAC/C,cAAM,IAAI,MAAM,MAAM,KAAK,MAAM;AACjC,cAAM,YAAY,OAAO,CAAC;AAE1B,cAAM,YAAY,YAAY,CAAC;AAE/B,eACE,6CAAC;AAAA,UAEC,WAAW,aAAa,aAAa;AAAA,UAIrC;AAAA,wDAAC;AAAA,cAAM;AAAA,cAA0B,IAAI,MAAM;AAAA,cAAK;AAAA,cAAkB,GAAG;AAAA,cAAW,GAAG;AAAA,aAAW;AAAA,YAC7F,mBACC,4CAAC;AAAA,cACC,IAAI,MAAM;AAAA,cACV,OAAO,cAAc;AAAA,cACrB,QAAQ,cAAc;AAAA,cACtB;AAAA,cACA,OAAO,EAAE,WAAW,cAAc,mBAAmB,iBAAiB;AAAA,cACtE,SAAS,4CAAC;AAAA,gBAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,eAAG;AAAA,aAChF;AAAA;AAAA,WAdG,GAAG,MAAM,OAgBhB;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,iBAAiB,YAAY,aAAa,SAAS,OAAO,OAAO,MAAM,MAAM;AAAA,EAChF;AACA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    getXValue,\n    getYValue,\n    stackedData,\n    props: { types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  const render = useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius, pointStyle } = serie;\n          // we need to recalculate the height  with stacked data if is an AREA STACKED ELEMENT\n          const serieWithStackedValues = getStackedData(stackedData, serie);\n          const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = getXValue(point);\n          const y = getYValue(point);\n          const xPosition = xScale(x);\n          const yPosition = finalYScale(y + deltaY);\n\n          return (\n            <g key={`${point.key}-p`} transform={`translate(${xPosition},${yPosition})`}>\n              <Point\n                pointRadius={pointRadius}\n                id={point.key}\n                opacity={opacity}\n                x={xPosition + (xScale.bandwidth?.() ?? 0) / 2}\n                y={yPosition}\n                xValue={x}\n                yValue={y}\n                pointStyle={pointStyle}\n                name={serie.name}\n              />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [colorScale, finalYScale, getXValue, getYValue, opacity, serie, stackedData, xScale],\n  );\n  return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,mBAAsB;AACtB,0BAA6B;AAC7B,qBAA+B;AAExB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,cAAU,sBAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,QAAM,aAAS;AAAA,IACb,MACE,4CAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,cAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,cAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,cAAM,SAAS,yBAAyB,uBAAuB,GAAG,KAAK;AACvE,cAAM,IAAI,UAAU,KAAK;AACzB,cAAM,IAAI,UAAU,KAAK;AACzB,cAAM,YAAY,OAAO,CAAC;AAC1B,cAAM,YAAY,YAAY,IAAI,MAAM;AAExC,eACE,4CAAC;AAAA,UAAyB,WAAW,aAAa,aAAa;AAAA,UAC7D,sDAAC;AAAA,YACC;AAAA,YACA,IAAI,MAAM;AAAA,YACV;AAAA,YACA,GAAG,aAAa,OAAO,YAAY,KAAK,KAAK;AAAA,YAC7C,GAAG;AAAA,YACH,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR;AAAA,YACA,MAAM,MAAM;AAAA,WACd;AAAA,WAXM,GAAG,MAAM,OAYjB;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,YAAY,aAAa,WAAW,WAAW,SAAS,OAAO,aAAa,MAAM;AAAA,EACrF;AACA,SAAO;AACT;",
   "names": []
 }