@netdata/charts/dist/es6/components/drawer/separator.js

Netdata frontend SDK and chart utilities

import React, { useRef } from "react";
import styled from "styled-components";
import { Flex, getColor } from "@netdata/netdata-ui";
import { useChart, useAttributeValue } from "../provider";
import { jsx as _jsx } from "react/jsx-runtime";
var ResizableBar = styled(Flex).attrs({
  padding: [3, 0],
  height: 2
}).withConfig({
  displayName: "separator__ResizableBar",
  componentId: "sc-1nvt1gy-0"
})(["cursor:row-resize;background:transparent;position:relative;&::before{content:\"\";position:absolute;top:50%;left:50%;right:0;height:2px;width:30%;background:", ";transform:translate(-50%,-50%);transition:height 0.2s ease;}&:hover::before{height:4px;background:", ";}"], function (_ref) {
  var theme = _ref.theme;
  return getColor("borderSecondary")({
    theme: theme
  });
}, function (_ref2) {
  var theme = _ref2.theme;
  return getColor("primary")({
    theme: theme
  });
});
var Separator = function Separator() {
  var chart = useChart();
  var expandedHeight = useAttributeValue("expandedHeight");
  var currentHeight = parseInt(chart.getAttribute("height") || "400");
  var startYRef = useRef(null);
  var handleMouseDown = function handleMouseDown(e) {
    e.preventDefault();
    startYRef.current = e.clientY;
    var handleMouseMove = function handleMouseMove(e) {
      var delta = e.clientY - startYRef.current;
      var minDrawerHeight = 150;
      var maxDrawerHeight = 600;
      var minChartHeight = 200;
      var newDrawerHeight = Math.max(minDrawerHeight, Math.min(maxDrawerHeight, expandedHeight - delta));
      var newChartHeight = Math.max(minChartHeight, currentHeight + delta);
      chart.updateAttribute("expandedHeight", newDrawerHeight);
      chart.updateAttribute("height", newChartHeight);
      chart.trigger("resize");
    };
    var _handleMouseUp = function handleMouseUp() {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", _handleMouseUp);
      document.body.style.cursor = "";
      startYRef.current = null;
    };
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", _handleMouseUp);
    document.body.style.cursor = "row-resize";
  };
  return /*#__PURE__*/_jsx(ResizableBar, {
    onMouseDown: handleMouseDown
  });
};
export default Separator;