@netdata/charts/dist/components/hocs/withTile.js

Netdata frontend SDK and chart utilities

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Title = exports.HeadWrapper = exports.ChartWrapper = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _netdataUi = require("@netdata/netdata-ui");
var _anomaly_badge = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/anomaly_badge.svg"));
var _useDebouncedValue = _interopRequireDefault(require("@netdata/netdata-ui/dist/hooks/useDebouncedValue"));
var _icon = _interopRequireDefault(require("../icon"));
var _useHover = _interopRequireDefault(require("../useHover"));
var _toolbox = _interopRequireDefault(require("../toolbox"));
var _provider = require("../provider");
var _filterToolbox = _interopRequireDefault(require("../filterToolbox"));
var _color = require("../line/dimensions/color");
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _details = _interopRequireDefault(require("../details"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["size"],
  _excluded2 = ["children", "customChildren", "hasFilters"],
  _excluded3 = ["count", "tile", "height", "width", "children", "hasFilters"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var Label = (0, _styledComponents["default"])(_netdataUi.Text).withConfig({
  displayName: "withTile__Label",
  componentId: "sc-1oake2r-0"
})(["line-height:1;font-size:", ";"], function (_ref) {
  var fontSize = _ref.fontSize;
  return fontSize;
});
var ChartHeadWrapper = (0, _styledComponents["default"])(_netdataUi.Flex).attrs(function (_ref2) {
  var size = _ref2.size,
    rest = _objectWithoutProperties(_ref2, _excluded);
  return _objectSpread({
    background: "panelBg",
    round: true,
    fontSize: parseInt(size / 3, 10),
    height: "100%",
    width: "100%",
    position: "relative"
  }, rest);
}).withConfig({
  displayName: "withTile__ChartHeadWrapper",
  componentId: "sc-1oake2r-1"
})(["font-size:", "px;"], function (props) {
  return props.fontSize > 11 ? 11 : props.fontSize < 8 ? 8 : props.fontSize;
});
var Title = exports.Title = function Title() {
  var chart = (0, _provider.useChart)();
  var title = (0, _provider.useTitle)();
  var onClick = function onClick(event) {
    event.preventDefault();
    chart.sdk.trigger("goToLink", chart);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
    fontSize: "1em",
    textAlign: "center",
    color: "sectionDescription",
    width: "80%",
    onClick: onClick,
    cursor: "pointer",
    padding: [2, 0, 0],
    children: title
  });
};
var HeadWrapper = exports.HeadWrapper = function HeadWrapper(_ref3) {
  var _useDimensionIds;
  var children = _ref3.children,
    customChildren = _ref3.customChildren,
    _ref3$hasFilters = _ref3.hasFilters,
    hasFilters = _ref3$hasFilters === void 0 ? true : _ref3$hasFilters,
    rest = _objectWithoutProperties(_ref3, _excluded2);
  var _useOnResize = (0, _provider.useOnResize)(),
    width = _useOnResize.width;
  var focused = (0, _provider.useAttributeValue)("focused");
  var firstDim = (_useDimensionIds = (0, _provider.useDimensionIds)()) === null || _useDimensionIds === void 0 ? void 0 : _useDimensionIds[0];
  var leftHeaderElements = (0, _provider.useAttributeValue)("leftHeaderElements");
  var size = width;
  size = size < 20 ? 20 : size > 50 ? 50 : size;
  var chart = (0, _provider.useChart)();
  var hoverRef = (0, _useHover["default"])({
    onHover: chart.focus,
    onBlur: chart.blur,
    isOut: function isOut(node) {
      return !node || !node.closest("[data-toolbox=\"".concat(chart.getId(), "\"]")) && !node.closest("[data-chartid=\"".concat(chart.getId(), "\"]"));
    }
  }, [chart]);
  var hasToolbox = (0, _provider.useAttributeValue)("hasToolbox");
  var showAnomalies = (0, _provider.useAttributeValue)("showAnomalies");
  var shadowColor = (0, _provider.useColor)("themeShadow");
  var debouncedFocused = (0, _useDebouncedValue["default"])(focused, 400);
  var value = (0, _provider.useLatestValue)("selected", {
    valueKey: "arp"
  }) || 0;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartHeadWrapper, _objectSpread(_objectSpread({
    size: size
  }, rest), {}, {
    ref: hoverRef,
    children: [hasToolbox && focused && debouncedFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbox["default"], {
      position: "absolute",
      top: "-14px",
      right: "0",
      background: "mainChartHeaderBg",
      width: {
        min: "100%"
      },
      padding: [1],
      sx: {
        boxShadow: "0px 1px 5px 0px ".concat(shadowColor, ";")
      },
      overflow: "hidden",
      children: hasFilters && width > 400 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Box, {
        width: "100%",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterToolbox["default"], {
          border: "none",
          opacity: focused ? 1 : 0.1,
          focused: focused
        })
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
      column: true,
      width: 5,
      padding: [1, 0],
      children: [leftHeaderElements.map(function (Element, index) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, {
          plain: true
        }, index);
      }), width < 400 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
        column: true,
        width: 5,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterToolbox["default"], {
          column: true,
          border: "none",
          justifyContent: "start",
          plain: true,
          opacity: focused ? 1 : 0.1,
          focused: focused
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
      column: true,
      alignItems: "center",
      justifyContent: "center",
      padding: [1, 0],
      height: "100%",
      width: "100%",
      position: "relative",
      overflow: "hidden",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {}), children]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
      column: true,
      width: 5,
      alignItems: "center",
      padding: [4, 0],
      gap: 2,
      children: showAnomalies && firstDim === "selected" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
          column: true,
          height: "100%",
          width: "2px",
          background: "neutralHighlight",
          justifyContent: "end",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_color.ColorBar, {
            id: "selected",
            valueKey: "arp",
            width: "2px",
            styleDimension: "height",
            round: 0.5
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
          content: "Anomaly rate for this metric",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
            svg: _anomaly_badge["default"],
            color: !!value && value > 0 ? "anomalyTextLite" : "neutralHighlight",
            size: "14px"
          })
        })]
      })
    }), customChildren]
  }));
};
var ChartWrapper = exports.ChartWrapper = (0, _styledComponents["default"])(_netdataUi.Flex).attrs(function (props) {
  return _objectSpread({
    column: true,
    justifyContent: "center",
    alignContent: "center",
    gap: 2,
    position: "relative",
    width: "100%",
    height: "100%",
    overflow: "hidden"
  }, props);
}).withConfig({
  displayName: "withTile__ChartWrapper",
  componentId: "sc-1oake2r-2"
})([""]);
var _default = exports["default"] = function _default(Component) {
  return function (_ref4) {
    var count = _ref4.count,
      _ref4$tile = _ref4.tile,
      tile = _ref4$tile === void 0 ? true : _ref4$tile,
      _ref4$height = _ref4.height,
      height = _ref4$height === void 0 ? "100%" : _ref4$height,
      _ref4$width = _ref4.width,
      width = _ref4$width === void 0 ? "100%" : _ref4$width,
      children = _ref4.children,
      _ref4$hasFilters = _ref4.hasFilters,
      hasFilters = _ref4$hasFilters === void 0 ? true : _ref4$hasFilters,
      rest = _objectWithoutProperties(_ref4, _excluded3);
    var showingInfo = (0, _provider.useAttributeValue)("showingInfo");
    var focused = (0, _provider.useAttributeValue)("focused");
    var shadowColor = (0, _provider.useColor)("themeShadow");
    var styles = focused ? {
      sx: {
        boxShadow: "0px 1px 5px 0px ".concat(shadowColor, ";")
      }
    } : {};
    return tile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadWrapper, _objectSpread(_objectSpread({
      count: count,
      uiName: rest.uiName,
      height: height,
      width: width,
      customChildren: children,
      hasFilters: hasFilters
    }, styles), {}, {
      children: showingInfo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_details["default"], {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, rest))
    })) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartHeadWrapper, _objectSpread(_objectSpread({
      size: 20,
      height: height,
      width: width
    }, styles), {}, {
      children: [showingInfo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_details["default"], {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, rest)), children]
    }));
  };
};