@elliemae/ds-dataviz 3.8.0-rc.3 → 3.8.0

package/dist/esm/graphs/Chart/parts/VerticalScrapper.js

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useState } from "react";
+import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { ThemeContext } from "@elliemae/ds-system";
+import { ChartContext } from "../ChartContext";
+import { StyledMouseOverDetectionBox, StyledTooltipContainer } from "../styles";
+const VerticalScrapper = () => {
+  const {
+    xScale,
+    scrapperPosX,
+    setScrapperPosX,
+    innerHeight,
+    innerWidth,
+    getBandwidth,
+    props: { TooltipRenderer, xAxis, data, scrapper }
+  } = useContext(ChartContext);
+  const theme = useContext(ThemeContext);
+  const [referenceElement, setReferenceElement] = useState();
+  const isBandAxis = !!(!xAxis.type || xAxis.cols);
+  const uniqueData = useMemo(() => {
+    let valueToPositionPerSeries;
+    if (isBandAxis) {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.map((datum) => {
+          const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;
+          const y = typeof datum.value === "number" ? datum.value : datum.value.y;
+          return {
+            position: xScale(x),
+            name: serie.name,
+            xValue: x,
+            yValue: y
+          };
+        })
+      ).flat(1);
+    } else {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.map((datum) => ({
+          position: xScale(datum.value.x),
+          name: serie.name,
+          xValue: datum.value.x,
+          yValue: datum.value.y
+        }))
+      ).flat(1);
+    }
+    const postionUniqueData = {};
+    valueToPositionPerSeries.forEach((set) => {
+      if (postionUniqueData[[set.position]]) {
+        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];
+      } else {
+        postionUniqueData[[set.position]] = [{ ...set }];
+      }
+    });
+    return postionUniqueData;
+  }, [isBandAxis, data, xScale, xAxis.cols]);
+  return /* @__PURE__ */ jsx("g", {
+    children: Object.keys(uniqueData).map((key) => {
+      const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
+      const datum = uniqueData[key];
+      return /* @__PURE__ */ jsxs("g", {
+        children: [
+          scrapperPosX === xPosition ? /* @__PURE__ */ jsxs("g", {
+            children: [
+              TooltipRenderer ? /* @__PURE__ */ jsx("foreignObject", {
+                children: /* @__PURE__ */ jsxs(DSPopperJS, {
+                  withoutAnimation: true,
+                  withoutArrow: true,
+                  customOffset: [0, 5],
+                  referenceElement,
+                  showPopover: true,
+                  zIndex: theme.zIndex.tooltip,
+                  startPlacementPreference: scrapper.tooltipPreference,
+                  children: [
+                    /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {}),
+                    /* @__PURE__ */ jsx(StyledTooltipContainer, {
+                      children: /* @__PURE__ */ jsx(TooltipRenderer, {
+                        data: datum
+                      })
+                    })
+                  ]
+                })
+              }) : null,
+              /* @__PURE__ */ jsx("line", {
+                ref: setReferenceElement,
+                x1: xPosition,
+                strokeWidth: "2px",
+                stroke: scrapper.color,
+                y1: 0,
+                x2: xPosition,
+                y2: innerHeight,
+                strokeDasharray: (4, 4)
+              })
+            ]
+          }) : null,
+          /* @__PURE__ */ jsx("line", {
+            onMouseEnter: () => setScrapperPosX(xPosition),
+            x1: xPosition,
+            strokeWidth: `${isBandAxis ? getBandwidth() : "2"}px`,
+            stroke: "transparent",
+            y1: 0,
+            x2: xPosition,
+            y2: innerHeight
+          })
+        ]
+      }, key);
+    })
+  });
+};
+export {
+  VerticalScrapper
+};
+//# sourceMappingURL=VerticalScrapper.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/VerticalScrapper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext, styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../styles';\n\nexport const VerticalScrapper = () => {\n  const {\n    xScale,\n    scrapperPosX,\n    setScrapperPosX,\n    innerHeight,\n    innerWidth,\n    getBandwidth,\n    props: { TooltipRenderer, xAxis, data, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const isBandAxis = !!(!xAxis.type || xAxis.cols);\n\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;\n            const y = typeof datum.value === 'number' ? datum.value : datum.value.y;\n            return {\n              position: xScale(x),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => ({\n            position: xScale(datum.value.x),\n            name: serie.name,\n            xValue: datum.value.x,\n            yValue: datum.value.y,\n          })),\n        )\n        .flat(1);\n    }\n\n    const postionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return postionUniqueData;\n  }, [isBandAxis, data, xScale, xAxis.cols]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n        const datum = uniqueData[key];\n        return (\n          <g key={key}>\n            {scrapperPosX === xPosition ? (\n              <g>\n                {TooltipRenderer ? (\n                  <foreignObject>\n                    <DSPopperJS\n                      withoutAnimation\n                      withoutArrow\n                      customOffset={[0, 5]}\n                      referenceElement={referenceElement}\n                      showPopover\n                      zIndex={theme.zIndex.tooltip}\n                      startPlacementPreference={scrapper.tooltipPreference}\n                    >\n                      <StyledMouseOverDetectionBox />\n                      <StyledTooltipContainer>\n                        <TooltipRenderer data={datum} />\n                      </StyledTooltipContainer>\n                    </DSPopperJS>\n                  </foreignObject>\n                ) : null}\n                <line\n                  ref={setReferenceElement}\n                  x1={xPosition}\n                  strokeWidth=\"2px\"\n                  stroke={scrapper.color}\n                  y1={0}\n                  x2={xPosition}\n                  y2={innerHeight}\n                  strokeDasharray={(4, 4)}\n                />\n              </g>\n            ) : null}\n            <line\n              onMouseEnter={() => setScrapperPosX(xPosition)}\n              // onMouseLeave={() => setScrapperPosY('')}\n              // id=\"horizontal-scrapper-zone\"\n              x1={xPosition}\n              strokeWidth={`${isBandAxis ? getBandwidth() : '2'}px`}\n              stroke=\"transparent\"\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dataviz",
-  "version": "3.8.0-rc.3",
+  "version": "3.8.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - DataViz",
   "files": [
@@ -35,13 +35,13 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.8.0-rc.3",
-    "@elliemae/ds-icon": "3.8.0-rc.3",
-    "@elliemae/ds-icons": "3.8.0-rc.3",
-    "@elliemae/ds-popperjs": "3.8.0-rc.3",
-    "@elliemae/ds-system": "3.8.0-rc.3",
-    "@elliemae/ds-tooltip": "3.8.0-rc.3",
-    "@elliemae/ds-utilities": "3.8.0-rc.3",
+    "@elliemae/ds-grid": "3.8.0",
+    "@elliemae/ds-icon": "3.8.0",
+    "@elliemae/ds-icons": "3.8.0",
+    "@elliemae/ds-popperjs": "3.8.0",
+    "@elliemae/ds-system": "3.8.0",
+    "@elliemae/ds-tooltip": "3.8.0",
+    "@elliemae/ds-utilities": "3.8.0",
     "d3": "~7.4.4"
   },
   "devDependencies": {