@evergis/charts 2.0.61 → 2.0.63

package/dist/charts/BarChart/hooks/useSelection.d.ts

@@ -0,0 +1,2 @@
+import { BarChartProps } from "../types";
+export declare const useSelection: (node: HTMLElement | null, props: BarChartProps) => void;

package/dist/charts/BarChart/styled.d.ts

@@ -28,6 +28,9 @@ export declare const barChartClassNames: {
     barChartGridLineXZero: string;
     barChartGridLineYZero: string;
     barChartGridLineY: string;
+    barChartSelection: string;
 };
-export declare const SvgWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SvgWrapper: import("styled-components").StyledComponent<"div", any, {
+    selectable?: boolean | undefined;
+}, never>;
 export declare const TooltipStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/dist/charts/BarChart/types.d.ts

@@ -110,6 +110,8 @@ export declare type BarChartProps = {
     xScaleItemWidth?: number;
     tooltipRoot?: Element;
     tooltipClassName?: string;
+    selectable?: boolean;
+    onSelect?: (value: [number, number]) => void;
 };
 export declare type BarChartMergedData = (BarChartMarshalledGroup & BarChartLineData & {
     groupName: string;

package/dist/charts.cjs.development.js

@@ -1984,11 +1984,137 @@ const barChartClassNames = /*#__PURE__*/_extends({
   barChartGridLineX: 'barChartGridLineX',
   barChartGridLineXZero: 'barChartGridLineXZero',
   barChartGridLineYZero: 'barChartGridLineYZero',
-  barChartGridLineY: 'barChartGridLineY'
+  barChartGridLineY: 'barChartGridLineY',
+  barChartSelection: 'barChartSelection'
 }, tooltipClassnames, labelClassnames, barChartLinesClassNames);
-const SvgWrapper$4 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n  .", ",\n    .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n  .", " {\n  }\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  .", " {\n    shape-rendering: auto;\n  }\n  .", " {\n    fill-opacity: 0.24;\n  }\n"])), barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea);
+const SvgWrapper$4 = /*#__PURE__*/styled__default(Wrapper)(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  user-select: ", ";\n  cursor: ", ";\n  \n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n  \n  .", ",\n    .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n  \n  .", " {\n  }\n  \n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n  \n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  \n  .", " {\n    shape-rendering: auto;\n  }\n  \n  .", " {\n    fill-opacity: 0.24;\n  }\n  \n  .", " {\n    position: absolute;\n    top: 0;\n    width: 0;\n    background: rgba(0, 170, 255, 0.06);\n    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;\n    pointer-events: none;\n  }\n"])), _ref => {
+  let {
+    selectable
+  } = _ref;
+  return selectable && "inline-block";
+}, _ref2 => {
+  let {
+    selectable
+  } = _ref2;
+  return selectable && "none";
+}, _ref3 => {
+  let {
+    selectable
+  } = _ref3;
+  return selectable && "crosshair";
+}, barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea, barChartClassNames.barChartSelection);
 const TooltipStyles$1 = /*#__PURE__*/styled.createGlobalStyle(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .", " {\n    z-index: 1;\n    transition: all linear 144ms;\n\n    .", " {\n      margin-bottom: 4px;\n      :last-of-type {\n        margin-bottom: 0;\n      }\n    }\n  }\n"])), barChartClassNames.barChartMouseTooltip, barChartClassNames.barChartTooltipItem);
 
+const useSelection = (node, props) => {
+  const drawing = React.useRef(false);
+  const startX = React.useRef(0);
+  const selection = document.createElement("div");
+  const onStartDrawing = React.useCallback(e => {
+    const isTouch = Boolean(e.touches);
+    e.stopPropagation();
+
+    if (node) {
+      var _e$touches$;
+
+      drawing.current = true;
+      startX.current = isTouch ? ((_e$touches$ = e.touches[0]) == null ? void 0 : _e$touches$.pageX) - node.firstChild.getBoundingClientRect().left : e.offsetX;
+      selection.style.display = "block";
+      selection.style.width = "0px";
+      selection.style.left = startX.current + "px";
+    }
+  }, [node]);
+  const onDraw = React.useCallback(e => {
+    const isTouch = Boolean(e.touches);
+    e.stopPropagation();
+
+    if (node && drawing.current) {
+      var _e$touches$2;
+
+      const nodeWidth = node.firstChild.getBoundingClientRect().width;
+      const offsetX = isTouch ? ((_e$touches$2 = e.touches[0]) == null ? void 0 : _e$touches$2.pageX) - node.firstChild.getBoundingClientRect().left : e.offsetX;
+      const newWidth = offsetX - startX.current;
+
+      if (offsetX >= 0) {
+        if (newWidth > 0) {
+          selection.style.marginLeft = "0px";
+          selection.style.width = offsetX <= nodeWidth ? newWidth + "px" : nodeWidth - startX.current + "px";
+        } else {
+          selection.style.right = nodeWidth - startX.current + "px";
+          selection.style.width = Math.abs(newWidth) + "px";
+          selection.style.marginLeft = newWidth + "px";
+        }
+      }
+
+      if (isTouch) {
+        if (node.offsetLeft > e.touches[0].pageX) {
+          selection.style.right = nodeWidth - startX.current + "px";
+          selection.style.width = startX.current + "px";
+          selection.style.marginLeft = "-" + startX.current + "px";
+        }
+      }
+    }
+  }, [node]);
+  const onMouseMove = React.useCallback(e => {
+    if (drawing.current && node) {
+      if (node.offsetLeft > e.pageX) {
+        const nodeWidth = node.firstChild.getBoundingClientRect().width;
+        selection.style.right = nodeWidth - startX.current + "px";
+        selection.style.width = startX.current + "px";
+        selection.style.marginLeft = "-" + startX.current + "px";
+      }
+    }
+  }, [node]);
+  const onStopDrawing = React.useCallback(e => {
+    e.stopPropagation();
+
+    if (node) {
+      const nodeWidth = node.firstChild.getBoundingClientRect().width;
+      const selectionMinX = selection.offsetLeft >= 0 ? selection.offsetLeft <= nodeWidth ? selection.offsetLeft : nodeWidth : 0;
+      const selectionWidth = selection.getBoundingClientRect().right - selection.getBoundingClientRect().left;
+      const selectionMaxX = selection.offsetLeft + selectionWidth <= nodeWidth ? selection.offsetLeft + selectionWidth >= 0 ? selection.offsetLeft + selectionWidth : 0 : nodeWidth;
+      const min = Math.round(selectionMinX);
+      const max = Math.round(selectionMaxX);
+
+      if (max - min > 0 && props.onSelect) {
+        props.onSelect([min, max]);
+      }
+
+      drawing.current = false;
+      selection.style.display = "none";
+    }
+  }, [node]);
+  React.useEffect(() => {
+    if (node) {
+      var _props$margin$bottom, _props$margin;
+
+      selection.setAttribute("class", barChartClassNames.barChartSelection);
+      selection.setAttribute("style", "height: calc(100% - " + ((_props$margin$bottom = (_props$margin = props.margin) == null ? void 0 : _props$margin.bottom) != null ? _props$margin$bottom : 0) + "px)");
+      selection.style.display = "none";
+      node.childNodes.forEach(child => {
+        child.style.userSelect = "none";
+      });
+      node.appendChild(selection);
+      node.addEventListener("mousedown", onStartDrawing);
+      node.addEventListener("touchstart", onStartDrawing);
+      node.addEventListener("mousemove", onDraw);
+      node.addEventListener("touchmove", onDraw);
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onStopDrawing);
+      document.addEventListener("touchend", onStopDrawing);
+    }
+
+    return () => {
+      node == null ? void 0 : node.removeEventListener("mousedown", onStartDrawing);
+      node == null ? void 0 : node.removeEventListener("touchstart", onStartDrawing);
+      node == null ? void 0 : node.removeEventListener("mousemove", onDraw);
+      node == null ? void 0 : node.removeEventListener("touchmove", onDraw);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onStopDrawing);
+      document.removeEventListener("touchend", onStopDrawing);
+    };
+  }, [node]);
+};
+
 const drawGrid$1 = _ref => {
   let {
     svg,
@@ -2697,7 +2823,8 @@ const BarChart = props => {
   const {
     className,
     style,
-    children
+    children,
+    selectable
   } = props;
   const [ref, node] = useNode();
   React.useEffect(() => {
@@ -2707,11 +2834,13 @@ const BarChart = props => {
   const onDraw = () => draw$4(node, props);
 
   useResize(props.width, onDraw);
+  useSelection(selectable ? node : null, props);
   return React__default.createElement("div", {
     className: className,
     style: style
   }, React__default.createElement(TooltipStyles$1, null), React__default.createElement(SvgWrapper$4, {
-    ref: ref
+    ref: ref,
+    selectable: selectable
   }, children));
 };
 BarChart.defaultProps = {