@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 _provider = require("../../provider");
var _label = _interopRequireDefault(require("../../filterToolbox/label"));
var _valueWithUnit = _interopRequireWildcard(require("../valueWithUnit"));
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 valueColumnSize = 144;
var valueColumnMinSize = 120;
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 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"
      });
    },
    headerString: function headerString() {
      return "Name";
    },
    accessorKey: "label",
    enableGlobalFilter: true,
    size: 200,
    minSize: 60,
    maxSize: 800,
    cell: function cell(_ref) {
      var _row$original$searchD, _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$original$searchD = row.original.searchDepth) !== null && _row$original$searchD !== void 0 ? _row$original$searchD : 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: function onClick(e) {
              var _row$getToggleExpande, _row$getToggleExpande2;
              e.preventDefault();
              e.stopPropagation();
              (_row$getToggleExpande = row.getToggleExpandedHandler) === null || _row$getToggleExpande === void 0 || (_row$getToggleExpande2 = _row$getToggleExpande.call(row)) === null || _row$getToggleExpande2 === void 0 || _row$getToggleExpande2(e);
              setTimeout(function () {
                var _e$target, _e$target$scrollIntoV;
                return (_e$target = e.target) === null || _e$target === void 0 || (_e$target$scrollIntoV = _e$target.scrollIntoView) === null || _e$target$scrollIntoV === void 0 ? void 0 : _e$target$scrollIntoV.call(_e$target, {
                  behavior: "smooth",
                  block: "nearest"
                });
              });
            },
            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$getToggleExpande3;
            e.preventDefault();
            e.stopPropagation();
            (_row$getToggleExpande3 = row.getToggleExpandedHandler) === null || _row$getToggleExpande3 === void 0 || _row$getToggleExpande3.call(row)(e);
            setTimeout(function () {
              var _e$target2, _e$target2$scrollInto;
              return (_e$target2 = e.target) === null || _e$target2 === void 0 || (_e$target2$scrollInto = _e$target2.scrollIntoView) === null || _e$target2$scrollInto === void 0 ? void 0 : _e$target2$scrollInto.call(_e$target2, {
                behavior: "smooth",
                block: "nearest"
              });
            });
          },
          iconRotate: (_row$getIsExpanded = row.getIsExpanded) !== null && _row$getIsExpanded !== void 0 && _row$getIsExpanded.call(row) ? 2 : null,
          textProps: {
            color: "textLite"
          },
          alignItems: "center"
        })]
      });
    }
  };
};
var contributionColumn = exports.contributionColumn = function contributionColumn() {
  return {
    id: "contribution",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit.ValueUnitHeader, {
      label: "Volume"
    }),
    headerString: function headerString() {
      return "Volume";
    },
    accessorKey: "contribution",
    enableGlobalFilter: false,
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    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: 1,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit["default"], {
          value: percentage,
          valueKey: "percent",
          unit: "%",
          color: "primary"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.ProgressBar, {
          background: "progressBg",
          color: "primary",
          width: "".concat(Math.min(percentage, 100), "%")
        })]
      });
    },
    sortingFn: "basic"
  };
};
var anomalyRateColumn = exports.anomalyRateColumn = function anomalyRateColumn() {
  return {
    id: "anomalyRate",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit.ValueUnitHeader, {
      label: "Anomaly"
    }),
    headerString: function headerString() {
      return "Anomaly";
    },
    accessorKey: "anomalyRate",
    enableGlobalFilter: false,
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    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: 1,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit["default"], {
          value: percentage,
          valueKey: "percent",
          unit: "%",
          color: "textLite"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.ProgressBar, {
          background: "progressBg",
          color: "anomalyText",
          width: "".concat(Math.min(percentage, 100), "%")
        })]
      });
    },
    sortingFn: "basic"
  };
};
var minColumn = exports.minColumn = function minColumn() {
  return {
    id: "min",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit.ValueUnitHeader, {
      label: "Min"
    }),
    headerString: function headerString() {
      return "Min";
    },
    accessorFn: function accessorFn(row) {
      var _row$timeframe;
      return (_row$timeframe = row.timeframe) === null || _row$timeframe === void 0 ? void 0 : _row$timeframe.min;
    },
    enableGlobalFilter: false,
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref4) {
      var _row$original$grouped;
      var getValue = _ref4.getValue,
        row = _ref4.row;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit["default"], {
        value: getValue(),
        dimensionId: (_row$original$grouped = row.original.groupedBy) === null || _row$original$grouped === void 0 ? void 0 : _row$original$grouped.dimension,
        color: "textLite"
      });
    },
    sortingFn: "basic"
  };
};
var avgColumn = exports.avgColumn = function avgColumn() {
  return {
    id: "avg",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit.ValueUnitHeader, {
      label: "Avg"
    }),
    headerString: function headerString() {
      return "Avg";
    },
    accessorFn: function accessorFn(row) {
      var _row$timeframe2;
      return (_row$timeframe2 = row.timeframe) === null || _row$timeframe2 === void 0 ? void 0 : _row$timeframe2.avg;
    },
    enableGlobalFilter: false,
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref5) {
      var _row$original$grouped2;
      var getValue = _ref5.getValue,
        row = _ref5.row;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit["default"], {
        value: getValue(),
        dimensionId: (_row$original$grouped2 = row.original.groupedBy) === null || _row$original$grouped2 === void 0 ? void 0 : _row$original$grouped2.dimension,
        color: "textLite"
      });
    },
    sortingFn: "basic"
  };
};
var maxColumn = exports.maxColumn = function maxColumn() {
  return {
    id: "max",
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit.ValueUnitHeader, {
      label: "Max"
    }),
    headerString: function headerString() {
      return "Max";
    },
    accessorFn: function accessorFn(row) {
      var _row$timeframe3;
      return (_row$timeframe3 = row.timeframe) === null || _row$timeframe3 === void 0 ? void 0 : _row$timeframe3.max;
    },
    enableGlobalFilter: false,
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    maxSize: 300,
    fullWidth: true,
    cell: function cell(_ref6) {
      var _row$original$grouped3;
      var getValue = _ref6.getValue,
        row = _ref6.row;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_valueWithUnit["default"], {
        value: getValue(),
        dimensionId: (_row$original$grouped3 = row.original.groupedBy) === null || _row$original$grouped3 === void 0 ? void 0 : _row$original$grouped3.dimension,
        color: "textLite"
      });
    },
    sortingFn: "basic"
  };
};