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

package/dist/esm/graphs/Chart/parts/SeriesFactory.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/SeriesFactory.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { throttle } from 'lodash';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n  } = useContext(ChartContext);\n\n  return (\n    <g className=\"content\">\n      {\n        data.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            // @todo fix this for both axis make a hook useVirtualize\n            serie: {\n              ...serie,\n              data:\n                containerRatio > 1\n                  ? serie.data.filter((datum) => {\n                      const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n                      return (\n                        xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 20 * containerRatio &&\n                        xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 20 * containerRatio\n                      );\n                    })\n                  : serie.data,\n            },\n          };\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n            return <StackedBar {...serieProps} />;\n          }\n          if (serie.type === 'bar') {\n            return <Bars {...serieProps} />;\n          }\n          if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n            return <Points {...serieProps} />;\n          }\n          if (serie.type === 'line') {\n            return <Line {...serieProps} />;\n          }\n          if (serie.type === 'area') {\n            return <Area {...serieProps} />;\n          }\n          return <></>;\n        }) as JSX.Element[]\n      }\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,kBAA2B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,MAAM,QAAQ,MAAM,YAAY,YAAY;AACrD,SAAS,uBAAuB;AAEzB,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IAAE,WAAU;AAAA,IAET,eAAK,IAAI,CAAC,UAAU;AAClB,YAAM,aAAa;AAAA,QACjB,KAAK,MAAM;AAAA,QAEX,OAAO;AAAA,UACL,GAAG;AAAA,UACH,MACE,iBAAiB,IACb,MAAM,KAAK,OAAO,CAAC,UAAU;AAC3B,kBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,mBACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,UAEjF,CAAC,IACD,MAAM;AAAA,QACd;AAAA,MACF;AACA,UAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,eAAO,oBAAC;AAAA,UAAY,GAAG;AAAA,SAAY;AAAA,MACrC;AACA,UAAI,MAAM,SAAS,OAAO;AACxB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,eAAO,oBAAC;AAAA,UAAQ,GAAG;AAAA,SAAY;AAAA,MACjC;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,aAAO,gCAAE;AAAA,IACX,CAAC;AAAA,GAEL;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { HorizontalBars } from '../series/HorizontalBars';\nimport { HorizontalStackedBars } from '../series/HorizontalStackedBars';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n    isHorizontal,\n  } = useContext(ChartContext);\n\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {\n          data\n            .filter((serie) => !serie.isHidden)\n            .map((serie) => {\n              const serieProps = {\n                key: serie.key,\n                // @todo fix this for both axis make a hook useVirtualize\n                serie: {\n                  ...serie,\n                  data:\n                    containerRatio > 1\n                      ? serie.data.filter((datum) => {\n                          const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n                          return (\n                            xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio &&\n                            xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio\n                          );\n                        })\n                      : serie.data,\n                },\n              };\n              if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1 && isHorizontal) {\n                return <HorizontalStackedBars {...serieProps} />;\n              }\n              if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n                return <StackedBar {...serieProps} />;\n              }\n              if (serie.type === 'bar' && isHorizontal) {\n                return <HorizontalBars {...serieProps} />;\n              }\n              if (serie.type === 'bar') {\n                return <Bars {...serieProps} />;\n              }\n              if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n                return <Points {...serieProps} />;\n              }\n              if (serie.type === 'line') {\n                return <Line {...serieProps} />;\n              }\n              if (serie.type === 'area') {\n                return <Area {...serieProps} />;\n              }\n              return <></>;\n            }) as JSX.Element[]\n        }\n      </g>\n    ),\n    [containerRatio, data, groups, innerWidth, isHorizontal, types, xAxis.cols, xScale, xScrollbarPosition],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,MAAM,QAAQ,MAAM,YAAY,YAAY;AACrD,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAC/B,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MAET,eACG,OAAO,CAAC,UAAU,CAAC,MAAM,QAAQ,EACjC,IAAI,CAAC,UAAU;AACd,cAAM,aAAa;AAAA,UACjB,KAAK,MAAM;AAAA,UAEX,OAAO;AAAA,YACL,GAAG;AAAA,YACH,MACE,iBAAiB,IACb,MAAM,KAAK,OAAO,CAAC,UAAU;AAC3B,oBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,qBACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,YAEjF,CAAC,IACD,MAAM;AAAA,UACd;AAAA,QACF;AACA,YAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,MAAM,cAAc;AAC9F,iBAAO,oBAAC;AAAA,YAAuB,GAAG;AAAA,WAAY;AAAA,QAChD;AACA,YAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,iBAAO,oBAAC;AAAA,YAAY,GAAG;AAAA,WAAY;AAAA,QACrC;AACA,YAAI,MAAM,SAAS,SAAS,cAAc;AACxC,iBAAO,oBAAC;AAAA,YAAgB,GAAG;AAAA,WAAY;AAAA,QACzC;AACA,YAAI,MAAM,SAAS,OAAO;AACxB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,iBAAO,oBAAC;AAAA,YAAQ,GAAG;AAAA,WAAY;AAAA,QACjC;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,eAAO,gCAAE;AAAA,MACX,CAAC;AAAA,KAEP;AAAA,IAEF,CAAC,gBAAgB,MAAM,QAAQ,YAAY,cAAc,OAAO,MAAM,MAAM,QAAQ,kBAAkB;AAAA,EACxG;AACF;",
   "names": []
 }

package/dist/esm/graphs/Chart/react-desc-prop-types.js

@@ -1,17 +1,6 @@
 import * as React from "react";
 import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-utilities";
-const defaultProps = {
-  yAxis: {
-    showGrid: true,
-    color: "black",
-    type: "linear"
-  },
-  xAxis: {
-    showGrid: true,
-    color: "black",
-    type: "band"
-  }
-};
+const defaultProps = {};
 const propTypes = {
   ...globalAttributesPropTypes,
   height: PropTypes.number.isRequired.description("height").defaultValue(""),

package/dist/esm/graphs/Chart/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\ntype MarginT = {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n};\n\nexport declare namespace DSPieT {\n  export interface SeriesT {\n    name: string;\n    data: number;\n    color: string;\n  }\n  export interface Props {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n}\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'stackedBar' | 'spline';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export interface SeriesT {\n    name: string;\n    data: number[] | { x: number; y: number }[];\n    type: SerieTypeT;\n    scale?: string;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    type: AxisTypeT;\n    cols?: number[] | string[] | Date[];\n    padding?: number;\n    beginAtZero?: boolean;\n  }\n\n  export interface InternalData {\n    key: string;\n    group: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string;\n    color: string;\n    values: {\n      key: string;\n      value: number;\n      position: number;\n    }[];\n  }\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter' | 'pie';\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  yAxis: {\n    showGrid: true,\n    color: 'black',\n    type: 'linear',\n  },\n  xAxis: {\n    showGrid: true,\n    color: 'black',\n    type: 'band',\n  },\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AA6E9C,MAAM,eAAsC;AAAA,EACjD,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\ntype MarginT = {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n};\n\nexport declare namespace DSPieT {\n  export interface SeriesT {\n    name: string;\n    data: number;\n    color: string;\n  }\n  export interface Props {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n}\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'stackedBar' | 'spline';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export interface SeriesT {\n    name: string;\n    data: number[] | { x: number; y: number }[];\n    type: SerieTypeT;\n    scale?: string;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    type: AxisTypeT;\n    cols?: number[] | string[] | Date[];\n    //padding?: number;\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    tickValues: number[] | string[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    overwriteTicks: boolean;\n  }\n\n  export interface InternalData {\n    key: string;\n    group: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string;\n    color: string;\n    values: {\n      key: string;\n      value: number;\n      position: number;\n    }[];\n  }\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAkF9C,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
   "names": []
 }

package/dist/esm/graphs/Chart/series/Bars.js

@@ -1,45 +1,47 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { Rect } from "./Rect";
 import { ChartContext } from "../ChartContext";
-import { FocusableRegion } from "../parts/FocusableRegion";
 const Bars = ({ serie }) => {
   const {
-    props: { xAxis, yAxis, TooltipRenderer },
+    props: { yAxis, TooltipRenderer },
     innerHeight,
     xScale,
     yScale,
+    y2Scale,
     subGroupScale,
-    colorScale
+    colorScale,
+    getXValue,
+    getYValue,
+    chartId
   } = useContext(ChartContext);
-  const isHorizontal = !!yScale.bandwidth;
+  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
+  const negativeSize = innerHeight - finalYScale(0);
+  const positiveSize = innerHeight - negativeSize;
   return /* @__PURE__ */ jsx("g", {
     fill: colorScale(serie.name),
+    clipPath: `url(#rect-focus-ring-${chartId})`,
     children: serie.data.map((bar, i) => {
-      const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();
-      const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);
-      const x = !isHorizontal ? xAxis?.cols?.[i] ?? bar.value.x ?? i : bar.value.x ?? bar.value;
-      const y = !isHorizontal ? bar.value.y ?? bar.value : yAxis?.cols?.[i] ?? bar.value.x ?? i;
-      const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0);
-      const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);
-      return /* @__PURE__ */ jsxs("g", {
-        transform: `translate(${transformX},${transformY})`,
-        children: [
-          /* @__PURE__ */ jsx(Rect, {
-            width,
-            height,
-            id: bar.key
-          }),
-          TooltipRenderer && /* @__PURE__ */ jsx(FocusableRegion, {
-            id: bar.key,
-            width,
-            height,
-            content: /* @__PURE__ */ jsx(TooltipRenderer, {
-              data: [{ name: serie.name, yValue: y, xValue: x }]
-            })
-          })
-        ]
+      const x = getXValue(bar);
+      const y = getYValue(bar);
+      const width = subGroupScale?.bandwidth();
+      const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);
+      const transformX = subGroupScale(serie.name) + xScale(x);
+      const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);
+      return /* @__PURE__ */ jsx("g", {
+        id: `${serie.name}-rects`,
+        transform: `translate(${transformX},0)`,
+        children: /* @__PURE__ */ jsx(Rect, {
+          name: serie.name,
+          xValue: x,
+          yValue: y,
+          width,
+          height,
+          id: bar.key,
+          y: transformY,
+          isNegative: y < 0
+        })
       }, bar.key);
     })
   });

package/dist/esm/graphs/Chart/series/Bars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Bars.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { FocusableRegion } from '../parts/FocusableRegion';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { xAxis, yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\n    subGroupScale,\n    colorScale,\n  } = useContext(ChartContext);\n\n  const isHorizontal = !!(yScale as ScaleBand<string>).bandwidth;\n  return (\n    <g fill={colorScale(serie.name)}>\n      {serie.data.map((bar, i) => {\n        const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();\n        const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);\n\n        const x = !isHorizontal ? xAxis?.cols?.[i] ?? bar.value.x ?? i : bar.value.x ?? bar.value;\n        const y = !isHorizontal ? bar.value.y ?? bar.value : yAxis?.cols?.[i] ?? bar.value.x ?? i;\n\n        const transformX = isHorizontal\n          ? 0\n          : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n        const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);\n\n        return (\n          <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n            <Rect width={width} height={height} id={bar.key} />\n            {TooltipRenderer && (\n              <FocusableRegion\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,SAAS,uBAAuB;AAIzB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,gBAAgB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,eAAe,CAAC,CAAE,OAA6B;AACrD,SACE,oBAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAC3B,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,QAAQ,eAAe,OAAO,IAAI,KAAK,IAAI,eAAe,UAAU;AAC1E,YAAM,SAAS,eAAe,eAAe,UAAU,IAAI,cAAc,OAAO,IAAI,MAAM,KAAK,IAAI,KAAK;AAExG,YAAM,IAAI,CAAC,eAAe,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,IAAI;AACpF,YAAM,IAAI,CAAC,eAAe,IAAI,MAAM,KAAK,IAAI,QAAQ,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK;AAExF,YAAM,aAAa,eACf,IACA,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS;AACzG,YAAM,aAAa,eAAe,cAAc,MAAM,IAAI,IAAI,OAAO,OAAO,OAAO,MAAM,CAAC,IAAI,OAAO,CAAC;AAEtG,aACE,qBAAC;AAAA,QAAgB,WAAW,aAAa,cAAc;AAAA,QACrD;AAAA,8BAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,WAAK;AAAA,UAChD,mBACC,oBAAC;AAAA,YACC,IAAI,IAAI;AAAA,YACR;AAAA,YACA;AAAA,YACA,SAAS,oBAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,aAAG;AAAA,WAChF;AAAA;AAAA,SARI,IAAI,GAUZ;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { FocusableRegion } from '../parts/FocusableRegion';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { yAxis, TooltipRenderer },\n    innerHeight,\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  const negativeSize = innerHeight - finalYScale(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\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 = subGroupScale?.bandwidth();\n        const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);\n\n        const transformX = subGroupScale(serie.name) + xScale(x);\n\n        // @todo find a way to create bars with linear\n        //       scale here is something but conflict with bars like {x: 'Monday', y: 10}\n        // const transformX = isHorizontal\n        //   ? 0\n        //   : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n\n        const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n        return (\n          <g id={`${serie.name}-rects`} key={bar.key} transform={`translate(${transformX},0)`}>\n            <Rect\n              name={serie.name}\n              xValue={x}\n              yValue={y}\n              width={width}\n              height={height}\n              id={bar.key}\n              y={transformY}\n              isNegative={y < 0}\n            />\n            {/* {TooltipRenderer && (\n              <FocusableRegion\n                transform={`scale(1,-1) translate(0,${-height})`}\n                y={-transformY}\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )} */}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAA2B;AAE3C,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAMtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,gBAAgB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,oBAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAAG,UAAU,wBAAwB;AAAA,IAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AAEvB,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAQvD,YAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,aACE,oBAAC;AAAA,QAAE,IAAI,GAAG,MAAM;AAAA,QAA4B,WAAW,aAAa;AAAA,QAClE,8BAAC;AAAA,UACC,MAAM,MAAM;AAAA,UACZ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,YAAY,IAAI;AAAA,SAClB;AAAA,SAViC,IAAI,GAqBvC;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { Rect } from "./Rect";
+import { ChartContext } from "../ChartContext";
+const HorizontalBars = ({ serie }) => {
+  const {
+    props: { yAxis },
+    xScale,
+    yScale,
+    y2Scale,
+    subGroupScale,
+    colorScale,
+    getXValue,
+    getYValue,
+    chartId
+  } = useContext(ChartContext);
+  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
+  return useMemo(
+    () => /* @__PURE__ */ 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__ */ jsx("g", {
+          transform: `translate(0,${transformY})`,
+          children: /* @__PURE__ */ jsx(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
+    ]
+  );
+};
+export {
+  HorizontalBars
+};
+//# sourceMappingURL=HorizontalBars.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/HorizontalBars.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,YAAY,eAAe;AAC3C,SAAS,YAAY;AACrB,SAAS,oBAAoB;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,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,SAAO;AAAA,IACL,MACE,oBAAC;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,oBAAC;AAAA,UAAgB,WAAW,eAAe;AAAA,UACzC,8BAAC;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/esm/graphs/Chart/series/HorizontalStackedBars.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Rect } from "./Rect";
+import { ChartContext } from "../ChartContext";
+import { getStackedData, getStackedIndex } from "../helpers";
+const HorizontalStackedBars = ({ serie }) => {
+  const {
+    props: { yAxis, groups },
+    xScale,
+    yScale,
+    stackedData,
+    subGroupScale,
+    colorScale,
+    chartId,
+    getYValue
+  } = useContext(ChartContext);
+  const serieWithStackedValues = getStackedData(stackedData, serie);
+  const stackIndex = getStackedIndex(groups, serie.name);
+  return /* @__PURE__ */ 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__ */ jsx("g", {
+        clipPath: `url(#rect-focus-ring-${chartId})`,
+        children: /* @__PURE__ */ jsx("g", {
+          fill: colorScale(serie.name),
+          transform: `translate(0, ${transformY})`,
+          children: /* @__PURE__ */ jsx(Rect, {
+            width,
+            height,
+            x: transformX,
+            xValue,
+            yValue,
+            id: serie.data[i].key,
+            name: serie.name
+          })
+        })
+      }, serie.data[i].key);
+    })
+  });
+};
+export {
+  HorizontalStackedBars
+};
+//# sourceMappingURL=HorizontalStackedBars.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/HorizontalStackedBars.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;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,IAAI,WAAW,YAAY;AAE3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;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,oBAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,8BAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,8BAAC;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/esm/graphs/Chart/series/Line.js

@@ -1,34 +1,38 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { line, curveNatural, curveLinear } from "d3";
-import { StyledLine } from "../styles";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { line, curveNatural, curveLinear, select } from "d3";
 import { Points } from "./Points";
 import { ChartContext } from "../ChartContext";
 const Line = ({ serie }) => {
-  const {
-    props: { xAxis },
-    xScale,
-    yScale,
-    y2Scale,
-    colorScale
-  } = useContext(ChartContext);
-  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
-  const lineTypeMap = {
-    line: curveLinear,
-    spline: curveNatural
-  };
+  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);
+  const ref = useRef(null);
+  const firstRender = useRef(true);
+  const finalYScale = useMemo(() => serie.scale === "y2" ? y2Scale : yScale, [serie.scale, y2Scale, yScale]);
+  const lineTypeMap = useMemo(
+    () => ({
+      line: curveLinear,
+      spline: curveNatural
+    }),
+    []
+  );
   const lineD3 = useMemo(
-    () => 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] ?? curveLinear)(serie.data),
-    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale]
+    () => line().x((d) => xScale(getXValue(d))).y((d) => finalYScale(getYValue(d))).curve(lineTypeMap[serie.type] ?? curveLinear),
+    [finalYScale, getXValue, getYValue, lineTypeMap, serie.type, xScale]
   );
-  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;
+  useEffect(() => {
+    if (!ref.current)
+      return;
+    const groupContent = 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 = useMemo(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);
   return /* @__PURE__ */ jsxs("g", {
     transform: `translate(${xTranslate}, 0)`,
     children: [
-      /* @__PURE__ */ jsx(StyledLine, {
-        d: lineD3,
-        stroke: colorScale(serie.name)
+      /* @__PURE__ */ jsx("g", {
+        ref
       }),
       /* @__PURE__ */ jsx(Points, {
         serie

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Line.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAyB;AACrD,SAAS,MAAM,cAAc,mBAAmB;AAChD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAGF,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AACrD,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAEA,QAAM,SAAS;AAAA,IACb,MACE,KAAK,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,WAAW,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,qBAAC;AAAA,IACC,WAAW,aAAa;AAAA,IAIxB;AAAA,0BAAC;AAAA,QAAW,GAAG;AAAA,QAAQ,QAAQ,WAAW,MAAM,IAAI;AAAA,OAAG;AAAA,MACvD,oBAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,SAAS,cAAc;AAC9D,SAAS,MAAM,cAAsC,aAAa,cAAc;AAChF,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,IAAI,WAAW,YAAY;AAE7F,QAAM,MAAM,OAAkD,IAAI;AAClE,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,cAAc,QAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAC3G,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,SAAS;AAAA,IACb,MACE,KAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,YAAY,MAAM,SAAS,WAAW;AAAA,IACjD,CAAC,aAAa,WAAW,WAAW,aAAa,MAAM,MAAM,MAAM;AAAA,EACrE;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,eAAe,OAAO,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,aAAa,QAAQ,OAAO,QAAQ,YAAY,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE3E,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB;AAAA,0BAAC;AAAA,QAAE;AAAA,OAAU;AAAA,MAEb,oBAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
   "names": []
 }

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

@@ -1,39 +1,109 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
-import { StyledPoint } from "../styles";
 import { ChartContext } from "../ChartContext";
-const Point = ({ x, y, pointRadius, id, opacity }) => {
+import { FOCUS_RING, SCRAPPER, LINE } from "../../constants";
+import { FocusableRegion } from "../parts/FocusableRegion";
+const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity }) => {
   const {
     activePoint,
-    setActivePoint,
     scrapperPosY,
     scrapperPosX,
-    props: { xAxis, scrapper }
+    props: { scrapper, TooltipRenderer }
   } = useContext(ChartContext);
   const isFocused = useMemo(() => {
-    if (activePoint === id) {
+    if (activePoint?.key === id) {
       return true;
     }
-    if (scrapper?.type === "horizontal") {
+    if (scrapper?.type === SCRAPPER.TYPE_HORIZONTAL) {
       return y === scrapperPosY;
     }
-    if (scrapper?.type === "vertical") {
+    if (scrapper?.type === SCRAPPER.TYPE_VERTICAL) {
       return x === scrapperPosX;
     }
     return false;
   }, [activePoint, id, scrapper, y, scrapperPosY, x, scrapperPosX]);
-  return useMemo(
-    () => /* @__PURE__ */ jsx("g", {
-      children: /* @__PURE__ */ jsx(StyledPoint, {
-        id: `${id}-mark`,
-        isFocused,
-        r: pointRadius,
-        opacity
-      })
-    }),
-    [id, isFocused, opacity, pointRadius]
-  );
+  const point = useMemo(() => {
+    if (LINE.POINT_STYLE.DIAMOND === pointStyle) {
+      const squareEdge = pointRadius * 2;
+      return /* @__PURE__ */ jsxs("g", {
+        transform: "rotate(45)",
+        children: [
+          isFocused ? /* @__PURE__ */ jsx("rect", {
+            x: -pointRadius - FOCUS_RING.STROKE_WIDTH,
+            y: -pointRadius - FOCUS_RING.STROKE_WIDTH,
+            width: squareEdge + FOCUS_RING.STROKE_WIDTH * 2,
+            height: squareEdge + FOCUS_RING.STROKE_WIDTH * 2,
+            fill: "none",
+            stroke: FOCUS_RING.COLOR,
+            strokeWidth: FOCUS_RING.STROKE_WIDTH
+          }) : null,
+          /* @__PURE__ */ jsx("rect", {
+            x: -pointRadius,
+            y: -pointRadius,
+            id: `${id}-mark`,
+            width: squareEdge,
+            height: squareEdge
+          })
+        ]
+      });
+    }
+    if (LINE.POINT_STYLE.SQUARE === pointStyle) {
+      const squareEdge = pointRadius * 2;
+      return /* @__PURE__ */ jsxs("g", {
+        children: [
+          isFocused ? /* @__PURE__ */ jsx("rect", {
+            x: -pointRadius - FOCUS_RING.STROKE_WIDTH,
+            y: -pointRadius - FOCUS_RING.STROKE_WIDTH,
+            width: squareEdge + FOCUS_RING.STROKE_WIDTH * 2,
+            height: squareEdge + FOCUS_RING.STROKE_WIDTH * 2,
+            fill: "none",
+            stroke: FOCUS_RING.COLOR,
+            strokeWidth: FOCUS_RING.STROKE_WIDTH
+          }) : null,
+          /* @__PURE__ */ jsx("rect", {
+            x: -pointRadius,
+            y: -pointRadius,
+            id: `${id}-mark`,
+            width: squareEdge,
+            height: squareEdge
+          })
+        ]
+      });
+    }
+    return /* @__PURE__ */ jsxs("g", {
+      children: [
+        isFocused ? /* @__PURE__ */ jsx("g", {
+          children: /* @__PURE__ */ jsx("circle", {
+            r: (pointRadius ?? LINE.DEFAULT_POINT_RADIUS) + FOCUS_RING.STROKE_WIDTH,
+            fill: "none",
+            stroke: FOCUS_RING.COLOR,
+            strokeWidth: FOCUS_RING.STROKE_WIDTH
+          })
+        }) : null,
+        /* @__PURE__ */ jsx("circle", {
+          id: `${id}-mark`,
+          r: pointRadius ?? (isFocused ? LINE.DEFAULT_POINT_RADIUS : 0),
+          opacity
+        })
+      ]
+    });
+  }, [id, isFocused, opacity, pointRadius, pointStyle]);
+  return /* @__PURE__ */ jsxs("g", {
+    children: [
+      point,
+      activePoint?.key === id && TooltipRenderer ? /* @__PURE__ */ jsx(FocusableRegion, {
+        id,
+        width: pointRadius * 2,
+        height: pointRadius * 2,
+        pointRadius,
+        style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
+        content: /* @__PURE__ */ jsx(TooltipRenderer, {
+          data: [{ name, yValue, xValue }]
+        })
+      }) : ""
+    ]
+  });
 };
 export {
   Point

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Point.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;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,IAAI,WAAW,YAAY;AAC3B,QAAM,YAAY,QAAQ,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,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MACC,8BAAC;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,YAAY,UAAU,YAAY;AAC3C,SAAS,uBAAuB;AACzB,MAAM,QAAQ,CAAC,EAAE,GAAG,GAAG,QAAQ,QAAQ,MAAM,YAAY,aAAa,IAAI,QAAQ,MAAM;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,gBAAgB;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,aAAa,QAAQ,IAAI;AAC3B,aAAO;AAAA,IACT;AACA,QAAI,UAAU,SAAS,SAAS,iBAAiB;AAC/C,aAAO,MAAM;AAAA,IACf;AACA,QAAI,UAAU,SAAS,SAAS,eAAe;AAC7C,aAAO,MAAM;AAAA,IACf;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,IAAI,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;AAEhE,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,KAAK,YAAY,YAAY,YAAY;AAC3C,YAAM,aAAa,cAAc;AAEjC,aACE,qBAAC;AAAA,QAAE,WAAU;AAAA,QACV;AAAA,sBACC,oBAAC;AAAA,YACC,GAAG,CAAC,cAAc,WAAW;AAAA,YAC7B,GAAG,CAAC,cAAc,WAAW;AAAA,YAC7B,OAAO,aAAa,WAAW,eAAe;AAAA,YAC9C,QAAQ,aAAa,WAAW,eAAe;AAAA,YAC/C,MAAK;AAAA,YACL,QAAQ,WAAW;AAAA,YACnB,aAAa,WAAW;AAAA,WACzB,IACC;AAAA,UACJ,oBAAC;AAAA,YAAK,GAAG,CAAC;AAAA,YAAa,GAAG,CAAC;AAAA,YAAa,IAAI,GAAG;AAAA,YAAW,OAAO;AAAA,YAAY,QAAQ;AAAA,WAAY;AAAA;AAAA,OACnG;AAAA,IAEJ;AACA,QAAI,KAAK,YAAY,WAAW,YAAY;AAC1C,YAAM,aAAa,cAAc;AAEjC,aACE,qBAAC;AAAA,QACE;AAAA,sBACC,oBAAC;AAAA,YACC,GAAG,CAAC,cAAc,WAAW;AAAA,YAC7B,GAAG,CAAC,cAAc,WAAW;AAAA,YAC7B,OAAO,aAAa,WAAW,eAAe;AAAA,YAC9C,QAAQ,aAAa,WAAW,eAAe;AAAA,YAC/C,MAAK;AAAA,YACL,QAAQ,WAAW;AAAA,YACnB,aAAa,WAAW;AAAA,WACzB,IACC;AAAA,UACJ,oBAAC;AAAA,YAAK,GAAG,CAAC;AAAA,YAAa,GAAG,CAAC;AAAA,YAAa,IAAI,GAAG;AAAA,YAAW,OAAO;AAAA,YAAY,QAAQ;AAAA,WAAY;AAAA;AAAA,OACnG;AAAA,IAEJ;AAEA,WACE,qBAAC;AAAA,MACE;AAAA,oBACC,oBAAC;AAAA,UACC,8BAAC;AAAA,YACC,IAAI,eAAe,KAAK,wBAAwB,WAAW;AAAA,YAC3D,MAAK;AAAA,YAEL,QAAQ,WAAW;AAAA,YACnB,aAAa,WAAW;AAAA,WACzB;AAAA,SACH,IACE;AAAA,QACJ,oBAAC;AAAA,UACC,IAAI,GAAG;AAAA,UACP,GAAG,gBAAgB,YAAY,KAAK,uBAAuB;AAAA,UAC3D;AAAA,SACD;AAAA;AAAA,KACH;AAAA,EAEJ,GAAG,CAAC,IAAI,WAAW,SAAS,aAAa,UAAU,CAAC;AAEpD,SACE,qBAAC;AAAA,IACE;AAAA;AAAA,MACA,aAAa,QAAQ,MAAM,kBAC1B,oBAAC;AAAA,QACC;AAAA,QACA,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB;AAAA,QACA,OAAO,EAAE,WAAW,cAAc,mBAAmB,iBAAiB;AAAA,QACtE,SAAS,oBAAC;AAAA,UAAgB,MAAM,CAAC,EAAE,MAAM,QAAQ,OAAO,CAAC;AAAA,SAAG;AAAA,OAC9D,IAEA;AAAA;AAAA,GAEJ;AAEJ;",
   "names": []
 }