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

Netdata frontend SDK and chart utilities

import React, { useMemo } from "react";
import { Flex, ProgressBar, TextSmall, TextMicro } from "@netdata/netdata-ui";
import Color from "../../line/dimensions/color";
import Units from "../../line/dimensions/units";
import { useChart, useConverted } from "../../provider";
import Label from "../../filterToolbox/label";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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"
    };
  }, []);
};
var emptyArray = [];
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"
      });
    },
    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 = 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.depth * 3],
        width: "100%",
        children: [/*#__PURE__*/_jsxs(Flex, {
          gap: 1,
          children: [/*#__PURE__*/_jsx(Color, {
            id: row.original.id
          }), /*#__PURE__*/_jsx(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__*/_jsx(Label, {
          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"
        })]
      });
    }
  };
};
export var contributionColumn = function contributionColumn() {
  return {
    id: "contribution",
    header: /*#__PURE__*/_jsx(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__*/_jsxs(Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/_jsxs(TextSmall, {
          color: "primary",
          children: [percentage, "%"]
        }), /*#__PURE__*/_jsx(ProgressBar, {
          background: "progressBg",
          color: ["green", "deyork"],
          height: 2,
          width: "".concat(Math.min(percentage, 100), "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
export var anomalyRateColumn = function anomalyRateColumn() {
  return {
    id: "anomalyRate",
    header: /*#__PURE__*/_jsx(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__*/_jsxs(Flex, {
        flex: true,
        column: true,
        gap: 0.5,
        children: [/*#__PURE__*/_jsxs(TextSmall, {
          color: "textLite",
          children: [percentage, "%"]
        }), /*#__PURE__*/_jsx(ProgressBar, {
          background: "progressBg",
          color: "anomalyText",
          height: 2,
          width: "".concat(Math.min(percentage, 100), "%"),
          containerWidth: "100%",
          border: "none"
        })]
      });
    },
    sortingFn: "basic"
  };
};
export var minColumn = function minColumn() {
  return {
    id: "min",
    header: /*#__PURE__*/_jsxs(TextMicro, {
      strong: true,
      children: ["Min ", /*#__PURE__*/_jsx(Units, {
        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 = useConverted(getValue());
      return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
export var avgColumn = function avgColumn() {
  return {
    id: "avg",
    header: /*#__PURE__*/_jsxs(TextMicro, {
      strong: true,
      children: ["Avg ", /*#__PURE__*/_jsx(Units, {
        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 = useConverted(getValue());
      return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};
export var maxColumn = function maxColumn() {
  return {
    id: "max",
    header: /*#__PURE__*/_jsxs(TextMicro, {
      strong: true,
      children: ["Max ", /*#__PURE__*/_jsx(Units, {
        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 = useConverted(getValue());
      return /*#__PURE__*/_jsx(TextSmall, {
        color: "textLite",
        children: value
      });
    },
    sortingFn: "basic"
  };
};