@netdata/charts/dist/components/drawer/drillDown/columns.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.minColumn = exports.maxColumn = exports.labelColumn = exports.contributionColumn = exports.avgColumn = exports.anomalyRateColumn = void 0;
var _react = _interopRequireWildcard(require("react"));
var _netdataUi = require("@netdata/netdata-ui");
var _color = _interopRequireDefault(require("../../line/dimensions/color"));
var _units = _interopRequireDefault(require("../../line/dimensions/units"));
var _provider = require("../../provider");
var _label = _interopRequireDefault(require("../../filterToolbox/label"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var useMetricsByValue = function useMetricsByValue(chart) {
  return (0, _react.useMemo)(function () {
    return {
      dimension: "dimensions",
      node: "nodes",
      instance: chart.intl("instance", {
        count: 2
      }),
      label: "labels",
      value: "values",
      "default": "values"
    };
  }, []);
};
var emptyArray = [];
var labelColumn = exports.labelColumn = function labelColumn() {
  var groupByOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  return {
    id: "label",
    header: function header() {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        strong: true,
        children: "Name"
      });
    },
    accessorKey: "label",
    size: 200,
    minSize: 60,
    maxSize: 800,
    cell: function cell(_ref) {
      var _row$getCanExpand, _row$getIsExpanded;
      var getValue = _ref.getValue,
        row = _ref.row;
      var chart = (0, _provider.useChart)();
      var metricsByValue = useMetricsByValue(chart);
      var currentLevel = row.original.level || 0;
      var nextLevel = currentLevel + 1;
      var nextGroupByType = groupByOrder[nextLevel];
      var expandLabel = nextGroupByType ? metricsByValue[nextGroupByType] || metricsByValue["default"] : metricsByValue["default"];
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
        justifyContent: "between",
        alignItems: "center",
        padding: [0, 0, 0, row.depth * 3],
        width: "100%",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
          gap: 1,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_color["default"], {
            id: row.original.id
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
            strong: true,
            onClick: !row.original.disabled ? function (e) {
              var _row$getToggleSelecte, _row$getToggleSelecte2;
              e.preventDefault();
              e.stopPropagation();
              (_row$getToggleSelecte = row.getToggleSelectedHandler) === null || _row$getToggleSelecte === void 0 || (_row$getToggleSelecte2 = _row$getToggleSelecte.call(row)) === null || _row$getToggleSelecte2 === void 0 || _row$getToggleSelecte2(e);
            } : undefined,
            cursor: row.original.disabled ? "default" : "pointer",
            whiteSpace: "normal",
            wordBreak: "break-word",
            children: getValue()
          })]
        }), ((_row$getCanExpand = row.getCanExpand) === null || _row$getCanExpand === void 0 ? void 0 : _row$getCanExpand.call(row)) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_label["default"], {
          label: expandLabel,
          onClick: function onClick(e) {
            var _row$getToggleExpande;
            e.preventDefault();
            e.stopPropagation();
            (_row$getToggleExpande = row.getToggleExpandedHandler) === null || _row$getToggleExpande === void 0 || _row$getToggleExpande.call(row)(e);
            setTimeout(function () {
              return e.target.scrollIntoView({
                behavior: "smooth",
                block: "nearest"
              });
            });
          },
          iconRotate: (_row$getIsExpanded = row.getIsExpanded) !== null && _row$getIsExpanded !== void 0 && _row$getIsExpanded.call(row) ? 2 : null,
          textProps: {
            fontSize: "10px",
            color: "textLite"
          },
          alignItems: "center"
        })]
      });
    }
  };
};
var contributionColumn = exports.contributionColumn = function contributionColumn() {
  return {
    id: "contribution",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextMicro, {
      strong: true,
      children: "Vol %"
    }),
    accessorKey: "contribution",
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref2) {
      var getValue = _ref2.getValue;
      var value = getValue() || 0;
      var percentage = Math.round((value + Number.EPSILON) * 100) / 100;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextSmall, {
          color: "primary",
          children: [percentage, "%"]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.ProgressBar, {
          background: "progressBg",
          color: ["green", "deyork"],
          height: 2,
          width: "".concat(Math.min(percentage, 100), "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
var anomalyRateColumn = exports.anomalyRateColumn = function anomalyRateColumn() {
  return {
    id: "anomalyRate",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextMicro, {
      strong: true,
      children: "Anomaly%"
    }),
    accessorKey: "anomalyRate",
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref3) {
      var getValue = _ref3.getValue;
      var value = getValue() || 0;
      var percentage = Math.round((value + Number.EPSILON) * 100) / 100;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextSmall, {
          color: "textLite",
          children: [percentage, "%"]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.ProgressBar, {
          background: "progressBg",
          color: "anomalyText",
          height: 2,
          width: "".concat(Math.min(percentage, 100), "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
var minColumn = exports.minColumn = function minColumn() {
  return {
    id: "min",
    header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextMicro, {
      strong: true,
      children: ["Min ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_units["default"], {
        visible: true
      })]
    }),
    accessorFn: function accessorFn(row) {
      var _row$timeframe;
      return (_row$timeframe = row.timeframe) === null || _row$timeframe === void 0 ? void 0 : _row$timeframe.min;
    },
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref4) {
      var getValue = _ref4.getValue;
      var value = (0, _provider.useConverted)(getValue());
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
var avgColumn = exports.avgColumn = function avgColumn() {
  return {
    id: "avg",
    header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextMicro, {
      strong: true,
      children: ["Avg ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_units["default"], {
        visible: true
      })]
    }),
    accessorFn: function accessorFn(row) {
      var _row$timeframe2;
      return (_row$timeframe2 = row.timeframe) === null || _row$timeframe2 === void 0 ? void 0 : _row$timeframe2.avg;
    },
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref5) {
      var getValue = _ref5.getValue;
      var value = (0, _provider.useConverted)(getValue());
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
var maxColumn = exports.maxColumn = function maxColumn() {
  return {
    id: "max",
    header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextMicro, {
      strong: true,
      children: ["Max ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_units["default"], {
        visible: true
      })]
    }),
    accessorFn: function accessorFn(row) {
      var _row$timeframe3;
      return (_row$timeframe3 = row.timeframe) === null || _row$timeframe3 === void 0 ? void 0 : _row$timeframe3.max;
    },
    size: 60,
    minSize: 30,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref6) {
      var getValue = _ref6.getValue;
      var value = (0, _provider.useConverted)(getValue());
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};