npm - @elliemae/ds-dataviz - Versions diffs - 3.13.0-next.3 → 3.13.0 - Mend

@elliemae/ds-dataviz 3.13.0-next.3 → 3.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useState, useCallback, useMemo } from "react";
+import { useContext, useCallback, useMemo } from "react";
 import { ChartContext } from "../../ChartContext";
 import { AxisBottom } from "../Axis/AxisBottom";
 import { SeriesFactory } from "../SeriesFactory";
@@ -15,13 +15,24 @@ const ScrollableContainerX = () => {
     containerRatio,
     innerWidth,
     isGrabbed,
+    containerRef,
     setXScrollbarPosition,
     setContainerRatio,
     lastPosition,
     innerHeight,
     internalMargin,
-    chartId
+    chartId,
+    isZooming,
+    setIsZooming,
+    zoomStartingPosition,
+    setZoomStartingPosition,
+    movingPosition,
+    setMovingPosition
   } = useContext(ChartContext);
+  const getRealClientX = useCallback(
+    (clientX) => clientX - internalMargin.left - containerRef.getBoundingClientRect().left,
+    [internalMargin.left]
+  );
   const Scrappers = useMemo(() => {
     if (scrapper?.type === "horizontal")
       return /* @__PURE__ */ jsx(Scrapper, {});
@@ -29,14 +40,11 @@ const ScrollableContainerX = () => {
       return /* @__PURE__ */ jsx(VerticalScrapper, {});
     return null;
   }, [scrapper?.type]);
-  const [isZooming, setIsZooming] = useState(false);
-  const [startingPosition, setStartingPosition] = useState(0);
-  const [movingPosition, setMovingPosition] = useState(0);
   const handleOnMouseDown = useCallback(
-    (e) => {
+    ({ clientX }) => {
       if (!isGrabbed && !xScale.bandwidth) {
         setIsZooming(true);
-        setStartingPosition(e.clientX);
+        setZoomStartingPosition(getRealClientX(clientX));
         setMovingPosition(0);
       }
     },
@@ -45,22 +53,22 @@ const ScrollableContainerX = () => {
   const handleOnMouseMove = useCallback(
     ({ clientX }) => {
       if (isZooming)
-        setMovingPosition(clientX);
+        setMovingPosition(getRealClientX(clientX));
     },
     [isZooming]
   );
   const handleOnMouseUp = useCallback(
     (e) => {
-      const bounds = e.currentTarget.closest("div").getBoundingClientRect();
       if (!isZooming)
         return;
       setIsZooming(false);
-      const endingPosition = e.clientX;
-      const diff = Math.abs(startingPosition - endingPosition);
+      setMovingPosition(0);
+      const endingPosition = getRealClientX(e.clientX);
+      const diff = Math.abs(zoomStartingPosition - endingPosition);
       if (diff <= 0)
         return;
       const newRatio = innerWidth / (innerWidth * containerRatio / diff) < 40 ? innerWidth / 40 : innerWidth * containerRatio / diff;
-      const newPosition = lastPosition?.current + ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) / containerRatio;
+      const newPosition = lastPosition?.current + (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;
       if (newPosition > innerWidth - innerWidth / newRatio)
         setXScrollbarPosition(innerWidth - innerWidth / newRatio);
       else
@@ -70,14 +78,16 @@ const ScrollableContainerX = () => {
       e.stopPropagation();
     },
     [
-      containerRatio,
-      innerWidth,
       isZooming,
-      internalMargin,
+      setIsZooming,
+      setMovingPosition,
+      getRealClientX,
+      zoomStartingPosition,
+      innerWidth,
+      containerRatio,
       lastPosition,
-      setContainerRatio,
       setXScrollbarPosition,
-      startingPosition
+      setContainerRatio
     ]
   );
   return /* @__PURE__ */ jsxs(
@@ -97,8 +107,8 @@ const ScrollableContainerX = () => {
           isZooming && movingPosition !== 0 ? /* @__PURE__ */ jsx(
             "rect",
             {
-              x: (movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left,
-              width: Math.abs(movingPosition - startingPosition),
+              x: movingPosition < zoomStartingPosition ? movingPosition : zoomStartingPosition,
+              width: Math.abs(movingPosition - zoomStartingPosition),
               height: innerHeight,
               fill: "orange",
               style: { opacity: 0.2 }

package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    xScale,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  const [isZooming, setIsZooming] = useState(false);\n  const [startingPosition, setStartingPosition] = useState(0);\n  const [movingPosition, setMovingPosition] = useState(0);\n\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed && !xScale.bandwidth) {\n        setIsZooming(true);\n        setStartingPosition(e.clientX);\n        setMovingPosition(0);\n      }\n    },\n    [isGrabbed, xScale],\n  );\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(clientX);\n    },\n    [isZooming],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      const bounds = e.currentTarget.closest('div').getBoundingClientRect();\n      if (!isZooming) return;\n      setIsZooming(false);\n      const endingPosition = e.clientX;\n\n      const diff = Math.abs(startingPosition - endingPosition);\n      if (diff <= 0) return;\n      const newRatio =\n        innerWidth / ((innerWidth * containerRatio) / diff) < 40\n          ? innerWidth / 40\n          : (innerWidth * containerRatio) / diff;\n      const newPosition =\n        lastPosition?.current +\n        ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) /\n          containerRatio;\n\n      // if (newPosition < 0) setXScrollbarPosition(0);\n      // if is bigger thant innerwidth possible we force the end\n      if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n      else setXScrollbarPosition(newPosition);\n\n      setContainerRatio(newRatio);\n      lastPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      containerRatio,\n      innerWidth,\n      isZooming,\n      internalMargin,\n      lastPosition,\n      setContainerRatio,\n      setXScrollbarPosition,\n      startingPosition,\n    ],\n  );\n  return (\n    <g\n      className=\"scrollable-container-x\"\n      onMouseDown={handleOnMouseDown}\n      onMouseMove={handleOnMouseMove}\n      onMouseUp={handleOnMouseUp}\n    >\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <AxisBottom />\n          <SeriesFactory />\n          {Scrappers}\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={(movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left}\n            width={Math.abs(movingPosition - startingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    xScale,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    containerRef,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n    isZooming,\n    setIsZooming,\n    zoomStartingPosition,\n    setZoomStartingPosition,\n    movingPosition,\n    setMovingPosition,\n  } = useContext(ChartContext);\n\n  const getRealClientX = useCallback(\n    (clientX: number) => clientX - internalMargin.left - containerRef.getBoundingClientRect().left,\n    [internalMargin.left],\n  );\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  //mouse\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (!isGrabbed && !xScale.bandwidth) {\n        setIsZooming(true);\n        setZoomStartingPosition(getRealClientX(clientX));\n        setMovingPosition(0);\n      }\n    },\n    [isGrabbed, xScale],\n  );\n\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(getRealClientX(clientX));\n    },\n    [isZooming],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isZooming) return;\n      setIsZooming(false);\n      setMovingPosition(0);\n      const endingPosition = getRealClientX(e.clientX);\n\n      const diff = Math.abs(zoomStartingPosition - endingPosition);\n      if (diff <= 0) return;\n      const newRatio =\n        innerWidth / ((innerWidth * containerRatio) / diff) < 40\n          ? innerWidth / 40\n          : (innerWidth * containerRatio) / diff;\n      const newPosition =\n        lastPosition?.current +\n        (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;\n\n      // if (newPosition < 0) setXScrollbarPosition(0);\n      // if is bigger thant innerwidth possible we force the end\n      if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n      else setXScrollbarPosition(newPosition);\n\n      setContainerRatio(newRatio);\n      lastPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      isZooming,\n      setIsZooming,\n      setMovingPosition,\n      getRealClientX,\n      zoomStartingPosition,\n      innerWidth,\n      containerRatio,\n      lastPosition,\n      setXScrollbarPosition,\n      setContainerRatio,\n    ],\n  );\n  return (\n    <g\n      className=\"scrollable-container-x\"\n      onMouseDown={handleOnMouseDown}\n      onMouseMove={handleOnMouseMove}\n      onMouseUp={handleOnMouseUp}\n    >\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <AxisBottom />\n          <SeriesFactory />\n          {Scrappers}\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={movingPosition < zoomStartingPosition ? movingPosition : zoomStartingPosition}\n            width={Math.abs(movingPosition - zoomStartingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,19 @@
 import * as React from "react";
 import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-utilities";
-const defaultProps = {};
+const defaultProps = {
+  series: [
+    {
+      name: "1",
+      data: [0],
+      color: "grey-100",
+      type: "bar"
+    }
+  ],
+  xAxis: {
+    cols: ["0"]
+  },
+  yAxis: {}
+};
 const propTypes = {
   ...globalAttributesPropTypes,
   height: PropTypes.number.isRequired.description("height").defaultValue(""),

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

@@ -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';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\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;AA2G9C,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n    height: number;\n    width: number;\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n    series: SeriesT[];\n  }\n\n  export interface RequiredProps {}\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  series: [\n    {\n      name: '1',\n      data: [0],\n      color: 'grey-100',\n      type: 'bar',\n    },\n  ],\n  xAxis: {\n    cols: ['0'],\n  },\n  yAxis: {},\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;AA2G9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM,CAAC,GAAG;AAAA,EACZ;AAAA,EACA,OAAO,CAAC;AACV;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;",
   "names": []
 }

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

@@ -5,7 +5,6 @@ import { Rect } from "./Rect";
 import { ChartContext } from "../ChartContext";
 const Bars = ({ serie }) => {
   const {
-    props: { yAxis, TooltipRenderer },
     innerHeight,
     xScale,
     yScale,
@@ -14,6 +13,7 @@ const Bars = ({ serie }) => {
     colorScale,
     getXValue,
     getYValue,
+    isHorizontal,
     chartId
   } = useContext(ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
@@ -24,7 +24,7 @@ const Bars = ({ serie }) => {
     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 transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0);
     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,

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

@@ -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';\n\nexport const Bars = ({ serie }) => {\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              datum={bar}\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;AC8CX;AA7CZ,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,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,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,UAAM,aAAa,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAQvD,UAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,WACE,oBAAC,OAAE,IAAI,GAAG,MAAM,cAA4B,WAAW,aAAa,iBAClE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,IAAI;AAAA,QACR,GAAG;AAAA,QACH,YAAY,IAAI;AAAA,QAChB,OAAO;AAAA;AAAA,IACT,KAXiC,IAAI,GAsBvC;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\n\nexport const Bars = ({ serie }) => {\n  const {\n    innerHeight,\n    xScale,\n    yScale,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    isHorizontal,\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              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4CX;AA3CZ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;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,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAMrF,UAAM,aAAa,eACf,IACA,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS;AAEzG,UAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,WACE,oBAAC,OAAE,IAAI,GAAG,MAAM,cAA4B,WAAW,aAAa,iBAClE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,IAAI;AAAA,QACR,GAAG;AAAA,QACH,YAAY,IAAI;AAAA,QAChB,OAAO;AAAA;AAAA,IACT,KAXiC,IAAI,GAYvC;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

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

@@ -107,8 +107,7 @@ const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacit
               id,
               width: (pointRadius ?? 3) * 4,
               height: (pointRadius ?? 3) * 4,
-              pointRadius,
-              style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
+              style: { transform: `translate(-${pointRadius ?? 3}px, -${pointRadius ?? 3}px)` },
               content: /* @__PURE__ */ jsx(TooltipRenderer, { data: [{ name, yValue, xValue }] })
             }
           ) : null

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

@@ -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, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING, SCRAPPER, LINE } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { TrendHighlight } from '../parts/TrendHighlight';\nimport { DataVizDataTestIds } from '../DataTestIds';\nexport const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity, datum }) => {\n  const {\n    activePoint,\n    scrapperPosY,\n    scrapperPosX,\n    setActivePoint,\n    props: { scrapper, TooltipRenderer, withTrendHighlight },\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  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n  return (\n    <>\n      <g\n        data-testid={DataVizDataTestIds.POINT}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        transform={`translate(${x},${y})`}\n      >\n        {point}\n        {activePoint?.key === id && TooltipRenderer ? (\n          <FocusableRegion\n            id={id}\n            width={(pointRadius ?? 3) * 4}\n            height={(pointRadius ?? 3) * 4}\n            pointRadius={pointRadius}\n            style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n            content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n          />\n        ) : null}\n      </g>\n      {isFocused && withTrendHighlight ? <TrendHighlight currentDatum={datum} /> : null}\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING, SCRAPPER, LINE } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { TrendHighlight } from '../parts/TrendHighlight';\nimport { DataVizDataTestIds } from '../DataTestIds';\nexport const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity, datum }) => {\n  const {\n    activePoint,\n    scrapperPosY,\n    scrapperPosX,\n    setActivePoint,\n    props: { scrapper, TooltipRenderer, withTrendHighlight },\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  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n  return (\n    <>\n      <g\n        data-testid={DataVizDataTestIds.POINT}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        transform={`translate(${x},${y})`}\n      >\n        {point}\n        {activePoint?.key === id && TooltipRenderer ? (\n          <FocusableRegion\n            id={id}\n            width={(pointRadius ?? 3) * 4}\n            height={(pointRadius ?? 3) * 4}\n            style={{ transform: `translate(-${pointRadius ?? 3}px, -${pointRadius ?? 3}px)` }}\n            content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n          />\n        ) : null}\n      </g>\n      {isFocused && withTrendHighlight ? <TrendHighlight currentDatum={datum} /> : null}\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/graphs/Chart/series/Rect.js CHANGED Viewed

@@ -92,13 +92,13 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
       isFocused,
       chartId,
       transform,
+      handleMouseEnter,
+      handleOnMouseLeave,
       isHorizontal,
       x,
       y,
       width,
       height,
-      handleMouseEnter,
-      handleOnMouseLeave,
       activePoint?.key,
       id,
       TooltipRenderer,

package/dist/esm/graphs/Chart/series/Rect.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Rect.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext, useCallback } from 'react';\n\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { DataVizDataTestIds } from '../DataTestIds';\n\nexport const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue, datum }) => {\n  const {\n    activePoint,\n    isGrabbed,\n    chartId,\n    isHorizontal,\n    innerWidth,\n    yScale,\n    innerHeight,\n    setActivePoint,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const isFocused = activePoint?.key === id;\n  const animation = useMemo(() => {\n    if (isGrabbed) return null;\n    if (isHorizontal) return <animate attributeName=\"x\" from={-innerWidth} to={x} dur=\"0.4s\" fill=\"both\" />;\n    if (isNegative) return <animate attributeName=\"y\" from={yScale(0)} to={-y} dur=\"0.40s\" fill=\"both\" />;\n    return <animate attributeName=\"y\" from={-innerHeight - y} to={-y} dur=\"0.40s\" fill=\"both\" />;\n  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);\n\n  const clipPathSign = useMemo(() => {\n    // @todo horizontal clip paths\n    if (isHorizontal) return '';\n    if (isNegative) return `url(#rects-negative-${chartId})`;\n    return `url(#rects-positive-${chartId})`;\n  }, [chartId, isHorizontal, isNegative]);\n\n  const transform = useMemo(() => {\n    if (isHorizontal) return ``;\n    return `scale(1,-1) translate(0,${-height})`;\n  }, [height, isHorizontal]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n\n  return useMemo(\n    () => (\n      <g clipPath={clipPathSign}>\n        <g\n          id={isFocused ? `data-focused-${chartId}` : ''}\n          transform={transform}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\n          data-testid={DataVizDataTestIds.BAR}\n        >\n          {isFocused ? (\n            <rect\n              x={(isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH}\n              y={(!isHorizontal ? -y : 0) - FOCUS_RING.STROKE_WIDTH}\n              width={width + FOCUS_RING.OFFSET}\n              height={height + FOCUS_RING.OFFSET}\n              fill=\"none\"\n              rx=\"1\"\n              ry=\"1\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect width={width} height={height} y={-y} x={x}>\n            {/* {animation} */}\n          </rect>\n          {activePoint?.key === id && TooltipRenderer ? (\n            <FocusableRegion\n              id={id}\n              y={y}\n              x={x}\n              width={width}\n              height={height}\n              transform={transform}\n              content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n            />\n          ) : (\n            ''\n          )}\n        </g>\n      </g>\n    ),\n    [\n      clipPathSign,\n      isFocused,\n      chartId,\n      transform,\n      isHorizontal,\n      x,\n      y,\n      width,\n      height,\n      handleMouseEnter,\n      handleOnMouseLeave,\n      activePoint?.key,\n      id,\n      TooltipRenderer,\n      name,\n      yValue,\n      xValue,\n    ],\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext, useCallback } from 'react';\n\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { DataVizDataTestIds } from '../DataTestIds';\n\nexport const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue, datum }) => {\n  const {\n    activePoint,\n    isGrabbed,\n    chartId,\n    isHorizontal,\n    innerWidth,\n    yScale,\n    innerHeight,\n    setActivePoint,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const isFocused = activePoint?.key === id;\n  const animation = useMemo(() => {\n    if (isGrabbed) return null;\n    if (isHorizontal) return <animate attributeName=\"x\" from={-innerWidth} to={x} dur=\"0.4s\" fill=\"both\" />;\n    if (isNegative) return <animate attributeName=\"y\" from={yScale(0)} to={-y} dur=\"0.40s\" fill=\"both\" />;\n    return <animate attributeName=\"y\" from={-innerHeight - y} to={-y} dur=\"0.40s\" fill=\"both\" />;\n  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);\n\n  const clipPathSign = useMemo(() => {\n    // @todo horizontal clip paths\n    if (isHorizontal) return '';\n    if (isNegative) return `url(#rects-negative-${chartId})`;\n    return `url(#rects-positive-${chartId})`;\n  }, [chartId, isHorizontal, isNegative]);\n\n  const transform = useMemo(() => {\n    if (isHorizontal) return ``;\n    return `scale(1,-1) translate(0,${-height})`;\n  }, [height, isHorizontal]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n\n  return useMemo(\n    () => (\n      <g clipPath={clipPathSign}>\n        <g\n          id={isFocused ? `data-focused-${chartId}` : ''}\n          transform={transform}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\n          data-testid={DataVizDataTestIds.BAR}\n        >\n          {isFocused ? (\n            <rect\n              x={(isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH}\n              y={(!isHorizontal ? -y : 0) - FOCUS_RING.STROKE_WIDTH}\n              width={width + FOCUS_RING.OFFSET}\n              height={height + FOCUS_RING.OFFSET}\n              fill=\"none\"\n              rx=\"1\"\n              ry=\"1\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect width={width} height={height} y={-y} x={x}>\n            {/* {animation} */}\n          </rect>\n          {activePoint?.key === id && TooltipRenderer ? (\n            <FocusableRegion\n              id={id}\n              y={y}\n              x={x}\n              width={width}\n              height={height}\n              transform={transform}\n              content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n            />\n          ) : (\n            ''\n          )}\n        </g>\n      </g>\n    ),\n    [\n      clipPathSign,\n      isFocused,\n      chartId,\n      transform,\n      handleMouseEnter,\n      handleOnMouseLeave,\n      isHorizontal,\n      x,\n      y,\n      width,\n      height,\n      activePoint?.key,\n      id,\n      TooltipRenderer,\n      name,\n      yValue,\n      xValue,\n    ],\n  );\n};\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/graphs/Chart/series/StackedBar.js CHANGED Viewed

@@ -23,7 +23,7 @@ const StackedBar = ({ serie }) => {
     const xValue = getXValue(bar);
     const yValue = sequence[1] - sequence[0];
     const width = subGroupScale?.bandwidth();
-    const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 2 : 0);
+    const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);
     const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);
     const transformY = yScale(sequence[1]) + (sequence[0] < 0 ? 2 : 0);
     return /* @__PURE__ */ jsx("g", { fill: colorScale(serie.name), transform: `translate(${transformX},0)`, children: /* @__PURE__ */ jsx(

package/dist/esm/graphs/Chart/series/StackedBar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/StackedBar.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 StackedBar = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues[bar.position];\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar);\n\n        const yValue = sequence[1] - sequence[0];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 2 : 0);\n        const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale(sequence[1]) + (sequence[0] < 0 ? 2 : 0);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "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 StackedBar = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues[bar.position];\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar);\n\n        const yValue = sequence[1] - sequence[0];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);\n        const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale(sequence[1]) + (sequence[0] < 0 ? 2 : 0);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACqCX;AApCZ,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;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,OAAE,UAAU,wBAAwB,YAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,WAAW,uBAAuB,IAAI;AAC5C,UAAM,eAAe,SAAS,OAAO;AAErC,UAAM,SAAS,UAAU,GAAG;AAE5B,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAChF,UAAM,aAAa,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAC9E,UAAM,aAAa,OAAO,SAAS,EAAE,KAAK,SAAS,KAAK,IAAI,IAAI;AAEhE,WACE,oBAAC,OAA0B,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,aAAa,iBAC/E;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO;AAAA;AAAA,IACT,KAVM,MAAM,KAAK,GAAG,GAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/constants.js CHANGED Viewed

@@ -43,11 +43,18 @@ const curveStyleMap = {
   [LINE.CURVE_STYLE.LINEAR]: curveLinear,
   [LINE.CURVE_STYLE.SPLINE]: curveMonotoneX
 };
+const TOOLBAR = {
+  RESET: {
+    HEIGHT: 21,
+    WIDTH: 21
+  }
+};
 export {
   FOCUS_RING,
   LINE,
   SCALE_TYPES,
   SCRAPPER,
+  TOOLBAR,
   curveStyleMap
 };
 //# sourceMappingURL=constants.js.map

package/dist/esm/graphs/constants.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/graphs/constants.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { curveLinear, curveMonotoneX } from 'd3';\n\nexport const SCALE_TYPES = {\n  LINEAR: 'linear',\n  BAND: 'band',\n  LOG: 'log',\n  TIME: 'time',\n};\n\nexport const FOCUS_RING = {\n  COLOR: '#335cad',\n  STROKE_WIDTH: 2,\n  OFFSET: 4,\n};\n\nexport const SCRAPPER = {\n  TYPE_HORIZONTAL: 'horizontal',\n  TYPE_VERTICAL: 'vertical',\n};\n\nexport const LINE = {\n  POINT_STYLE: {\n    CIRCLE: 'CIRCLE',\n    SQUARE: 'SQUARE',\n    DIAMOND: 'DIAMOND',\n  },\n  DEFAULT_POINT_RADIUS: 4,\n  DASH_STYLE: {\n    SHORTDOT: 'SHORTDOT',\n    SHORTDASHDOT: 'SHORTDASHDOT',\n    DASH: 'DASH',\n    SHORTDASH: 'SHORTDASH',\n  },\n  DASH_STYLE_VALUES: {\n    SHORTDOT: [2, 2],\n    SHORTDASHDOT: [6, 2, 2, 2],\n    DASH: [8, 6],\n    SHORTDASH: [6, 2],\n  },\n  CURVE_STYLE: {\n    LINEAR: 'LINEAR',\n    SPLINE: 'SPLINE',\n  },\n};\n\nexport const curveStyleMap = {\n  [LINE.CURVE_STYLE.LINEAR]: curveLinear,\n  [LINE.CURVE_STYLE.SPLINE]: curveMonotoneX,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,sBAAsB;AAErC,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AAAA,EACjB,eAAe;AACjB;AAEO,MAAM,OAAO;AAAA,EAClB,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU,CAAC,GAAG,CAAC;AAAA,IACf,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACzB,MAAM,CAAC,GAAG,CAAC;AAAA,IACX,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAC7B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { curveLinear, curveMonotoneX } from 'd3';\n\nexport const SCALE_TYPES = {\n  LINEAR: 'linear',\n  BAND: 'band',\n  LOG: 'log',\n  TIME: 'time',\n};\n\nexport const FOCUS_RING = {\n  COLOR: '#335cad',\n  STROKE_WIDTH: 2,\n  OFFSET: 4,\n};\n\nexport const SCRAPPER = {\n  TYPE_HORIZONTAL: 'horizontal',\n  TYPE_VERTICAL: 'vertical',\n};\n\nexport const LINE = {\n  POINT_STYLE: {\n    CIRCLE: 'CIRCLE',\n    SQUARE: 'SQUARE',\n    DIAMOND: 'DIAMOND',\n  },\n  DEFAULT_POINT_RADIUS: 4,\n  DASH_STYLE: {\n    SHORTDOT: 'SHORTDOT',\n    SHORTDASHDOT: 'SHORTDASHDOT',\n    DASH: 'DASH',\n    SHORTDASH: 'SHORTDASH',\n  },\n  DASH_STYLE_VALUES: {\n    SHORTDOT: [2, 2],\n    SHORTDASHDOT: [6, 2, 2, 2],\n    DASH: [8, 6],\n    SHORTDASH: [6, 2],\n  },\n  CURVE_STYLE: {\n    LINEAR: 'LINEAR',\n    SPLINE: 'SPLINE',\n  },\n};\n\nexport const curveStyleMap = {\n  [LINE.CURVE_STYLE.LINEAR]: curveLinear,\n  [LINE.CURVE_STYLE.SPLINE]: curveMonotoneX,\n};\n\nexport const TOOLBAR = {\n  RESET: {\n    HEIGHT: 21,\n    WIDTH: 21,\n  },\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,sBAAsB;AAErC,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AAAA,EACjB,eAAe;AACjB;AAEO,MAAM,OAAO;AAAA,EAClB,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU,CAAC,GAAG,CAAC;AAAA,IACf,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACzB,MAAM,CAAC,GAAG,CAAC;AAAA,IACX,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAC7B;AAEO,MAAM,UAAU;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dataviz",
-  "version": "3.13.0-next.3",
+  "version": "3.13.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - DataViz",
   "files": [
@@ -40,9 +40,9 @@
     "d3-shape": "~3.1.0",
     "resize-observer-polyfill": "~1.5.1",
     "uid": "~2.0.0",
-    "@elliemae/ds-popperjs": "3.13.0-next.3",
-    "@elliemae/ds-system": "3.13.0-next.3",
-    "@elliemae/ds-utilities": "3.13.0-next.3"
+    "@elliemae/ds-popperjs": "3.13.0",
+    "@elliemae/ds-system": "3.13.0",
+    "@elliemae/ds-utilities": "3.13.0"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.6.0",