@netdata/charts/dist/es6/components/drawer/drillDown/columns.js

Netdata frontend SDK and chart utilities

import React, { useMemo } from "react";
import { Flex, ProgressBar, TextSmall } from "@netdata/netdata-ui";
import Color from "../../line/dimensions/color";
import { useChart } from "../../provider";
import Label from "../../filterToolbox/label";
import ValueWithUnit, { ValueUnitHeader } from "../valueWithUnit";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var valueColumnSize = 144;
var valueColumnMinSize = 120;
var useMetricsByValue = function useMetricsByValue(chart) {
  return useMemo(function () {
    return {
      dimension: "dimensions",
      node: "nodes",
      instance: chart.intl("instance", {
        count: 2
      }),
      label: "labels",
      value: "values",
      "default": "values"
    };
  }, []);
};
export var labelColumn = function labelColumn() {
  var groupByOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  return {
    id: "label",
    header: function header() {
      return /*#__PURE__*/_jsx(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 = 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__*/_jsxs(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__*/_jsxs(Flex, {
          gap: 1,
          children: [/*#__PURE__*/_jsx(Color, {
            id: row.original.id
          }), /*#__PURE__*/_jsx(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__*/_jsx(Label, {
          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"
        })]
      });
    }
  };
};
export var contributionColumn = function contributionColumn() {
  return {
    id: "contribution",
    header: /*#__PURE__*/_jsx(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__*/_jsxs(Flex, {
        flex: true,
        column: true,
        gap: 1,
        children: [/*#__PURE__*/_jsx(ValueWithUnit, {
          value: percentage,
          valueKey: "percent",
          unit: "%",
          color: "primary"
        }), /*#__PURE__*/_jsx(ProgressBar, {
          background: "progressBg",
          color: "primary",
          width: "".concat(Math.min(percentage, 100), "%")
        })]
      });
    },
    sortingFn: "basic"
  };
};
export var anomalyRateColumn = function anomalyRateColumn() {
  return {
    id: "anomalyRate",
    header: /*#__PURE__*/_jsx(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__*/_jsxs(Flex, {
        flex: true,
        column: true,
        gap: 1,
        children: [/*#__PURE__*/_jsx(ValueWithUnit, {
          value: percentage,
          valueKey: "percent",
          unit: "%",
          color: "textLite"
        }), /*#__PURE__*/_jsx(ProgressBar, {
          background: "progressBg",
          color: "anomalyText",
          width: "".concat(Math.min(percentage, 100), "%")
        })]
      });
    },
    sortingFn: "basic"
  };
};
export var minColumn = function minColumn() {
  return {
    id: "min",
    header: /*#__PURE__*/_jsx(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__*/_jsx(ValueWithUnit, {
        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"
  };
};
export var avgColumn = function avgColumn() {
  return {
    id: "avg",
    header: /*#__PURE__*/_jsx(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__*/_jsx(ValueWithUnit, {
        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"
  };
};
export var maxColumn = function maxColumn() {
  return {
    id: "max",
    header: /*#__PURE__*/_jsx(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__*/_jsx(ValueWithUnit, {
        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"
  };
};