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

Netdata frontend SDK and chart utilities

function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import React from "react";
import { Flex, TextSmall } from "@netdata/netdata-ui";
import Color, { ColorBar } from "../../line/dimensions/color";
import Name from "../../line/dimensions/name";
import { useChart, useAttributeValue, useVisibleDimensionId, getValueByPeriod, convert } from "../../provider";
import Label from "../../filterToolbox/label";
import { rowFlavours } from "../../line/popover/dimensions";
import ValueWithUnit, { ValueUnitHeader } from "../valueWithUnit";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var valueColumnSize = 144;
var valueColumnMinSize = 120;
var getCachedValue = function getCachedValue(chart, valueCache, id, _ref) {
  var key = _ref.key,
    period = _ref.period,
    objKey = _ref.objKey,
    _ref$allowNull = _ref.allowNull,
    allowNull = _ref$allowNull === void 0 ? true : _ref$allowNull;
  if (!objKey && valueCache) return valueCache.get(id, key, {
    period: period
  });
  return (getValueByPeriod[period] || getValueByPeriod.latest)({
    chart: chart,
    id: id,
    valueKey: key,
    objKey: objKey,
    allowNull: allowNull
  });
};
export var makeNumberSortingFn = function makeNumberSortingFn(chart, _ref2) {
  var key = _ref2.key,
    period = _ref2.period,
    objKey = _ref2.objKey,
    valueCache = _ref2.valueCache;
  return function (rowA, rowB) {
    var aId = rowA.original;
    var bId = rowB.original;
    var aValue = getCachedValue(chart, valueCache, aId, {
      key: key,
      period: period,
      objKey: objKey
    });
    var bValue = getCachedValue(chart, valueCache, bId, {
      key: key,
      period: period,
      objKey: objKey
    });
    var result = aValue - bValue;
    if (!result || isNaN(result)) return aId.localeCompare(bId, undefined, {
      sensitivity: "accent",
      ignorePunctuation: true
    });
    return result > 0 ? 1 : -1;
  };
};
var rowValueKeys = {
  ANOMALY_RATE: "arp",
  "default": "value"
};
var metricsByValue = {
  dimension: "dimensions",
  node: "nodes",
  instance: "instances",
  label: "labels",
  value: "values",
  "default": "values"
};
var emptyArray = [];
export var labelColumn = function labelColumn(chart, fallbackExpandKey) {
  return {
    id: "label",
    header: /*#__PURE__*/_jsx(TextSmall, {
      strong: true,
      children: "Name"
    }),
    accessorFn: function accessorFn(id) {
      return chart.getDimensionName(id);
    },
    size: 200,
    minSize: 60,
    renderString: function renderString(row) {
      return chart.getDimensionName(row.original);
    },
    cell: function cell(_ref3) {
      var _ref3$row = _ref3.row,
        id = _ref3$row.original,
        _ref3$row$depth = _ref3$row.depth,
        depth = _ref3$row$depth === void 0 ? 0 : _ref3$row$depth,
        getCanExpand = _ref3$row.getCanExpand,
        getToggleExpandedHandler = _ref3$row.getToggleExpandedHandler,
        getIsExpanded = _ref3$row.getIsExpanded;
      var _ref4 = useAttributeValue("hoverX") || emptyArray,
        _ref5 = _slicedToArray(_ref4, 2),
        row = _ref5[1];
      var rowFlavour = rowFlavours[row] || rowFlavours["default"];
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsxs(Flex, {
        justifyContent: "between",
        alignItems: "center",
        padding: [0, 0, 0, depth * 3],
        opacity: visible ? null : "weak",
        width: "100%",
        children: [/*#__PURE__*/_jsxs(Flex, {
          alignItems: "center",
          gap: 1,
          position: "relative",
          width: "100%",
          children: [visible && /*#__PURE__*/_jsx(ColorBar, {
            id: id,
            valueKey: rowValueKeys[rowFlavour] || rowValueKeys["default"],
            position: "absolute",
            top: 1,
            left: 0,
            backgroundOpacity: 0.4,
            round: true,
            height: 4,
            children: /*#__PURE__*/_jsx(Color, {
              id: id
            })
          }), /*#__PURE__*/_jsx(Name, {
            padding: [1, 2],
            flex: true,
            id: id
          })]
        }), getCanExpand() && /*#__PURE__*/_jsx(Label, {
          label: metricsByValue[row.original.value] || metricsByValue[fallbackExpandKey] || metricsByValue["default"],
          onClick: function onClick(e) {
            getToggleExpandedHandler()(e);
            setTimeout(function () {
              return e.target.scrollIntoView({
                behavior: "smooth",
                block: "nearest"
              });
            });
          },
          iconRotate: getIsExpanded() ? 2 : null,
          textProps: {
            color: "textLite"
          }
        })]
      });
    },
    sortingFn: function sortingFn(rowA, rowB) {
      var aId = rowA.original;
      var bId = rowB.original;
      return aId.localeCompare(bId, undefined, {
        sensitivity: "accent",
        ignorePunctuation: true
      });
    }
  };
};
var CachedValue = function CachedValue(_ref6) {
  var id = _ref6.id,
    visible = _ref6.visible,
    _ref6$valueKey = _ref6.valueKey,
    valueKey = _ref6$valueKey === void 0 ? "value" : _ref6$valueKey,
    _ref6$period = _ref6.period,
    period = _ref6$period === void 0 ? "latest" : _ref6$period,
    objKey = _ref6.objKey,
    unitsKey = _ref6.unitsKey,
    valueCache = _ref6.valueCache,
    fractionDigits = _ref6.fractionDigits,
    unit = _ref6.unit,
    color = _ref6.color,
    strong = _ref6.strong;
  var chart = useChart();
  var value = getCachedValue(chart, valueCache, id, {
    key: valueKey,
    period: period,
    objKey: objKey
  });
  if (!visible) return null;
  return /*#__PURE__*/_jsx(ValueWithUnit, {
    value: value,
    dimensionId: id,
    valueKey: valueKey,
    unitsKey: unitsKey,
    fractionDigits: fractionDigits,
    unit: unit,
    color: color,
    strong: strong
  });
};
var renderValueString = function renderValueString(chart, row, _ref7) {
  var _ref7$key = _ref7.key,
    key = _ref7$key === void 0 ? "value" : _ref7$key,
    _ref7$period = _ref7.period,
    period = _ref7$period === void 0 ? "latest" : _ref7$period,
    objKey = _ref7.objKey,
    _ref7$unitsKey = _ref7.unitsKey,
    unitsKey = _ref7$unitsKey === void 0 ? "units" : _ref7$unitsKey,
    valueCache = _ref7.valueCache,
    fractionDigits = _ref7.fractionDigits,
    unit = _ref7.unit;
  var dimensionId = row.original;
  var value = getCachedValue(chart, valueCache, dimensionId, {
    key: key,
    period: period,
    objKey: objKey
  });
  var unitAttributes = unit === undefined && value !== null && value !== "-" ? chart.getUnitAttributesForValue(value, {
    dimensionId: dimensionId,
    key: unitsKey
  }) : undefined;
  var convertedValue = convert(chart, value, {
    valueKey: key,
    fractionDigits: fractionDigits,
    dimensionId: dimensionId,
    unitsKey: unitsKey,
    unitAttributes: unitAttributes
  });
  var convertedUnit = unit === undefined ? chart.getUnitSign({
    dimensionId: dimensionId,
    key: unitsKey,
    unitAttributes: unitAttributes
  }) : unit;
  return convertedUnit ? "".concat(convertedValue, " ").concat(convertedUnit) : convertedValue;
};
export var valueColumn = function valueColumn(chart) {
  var _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
    valueCache = _ref8.valueCache;
  return {
    id: "value",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "Value",
      strong: false
    }),
    headerString: function headerString() {
      return "Value";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        valueCache: valueCache
      });
    },
    cell: function cell(_ref9) {
      var id = _ref9.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: "latest",
        id: id,
        visible: visible,
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "value",
      period: "latest",
      valueCache: valueCache
    })
  };
};
export var anomalyColumn = function anomalyColumn(chart, _ref0) {
  var period = _ref0.period,
    objKey = _ref0.objKey,
    valueCache = _ref0.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-arp") : "arp",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "Anomaly",
      strong: false
    }),
    headerString: function headerString() {
      return "Anomaly";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "arp",
        period: period,
        objKey: objKey,
        valueCache: valueCache,
        fractionDigits: 2,
        unit: "%"
      });
    },
    cell: function cell(_ref1) {
      var id = _ref1.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "arp",
        valueCache: valueCache,
        fractionDigits: 2,
        unit: "%",
        color: "anomalyTextFocus"
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "arp",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};
export var minColumn = function minColumn(chart, _ref10) {
  var period = _ref10.period,
    objKey = _ref10.objKey,
    valueCache = _ref10.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-min") : "min",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "Min",
      strong: false
    }),
    headerString: function headerString() {
      return "Min";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "min",
        period: period,
        objKey: objKey,
        valueCache: valueCache
      });
    },
    cell: function cell(_ref11) {
      var id = _ref11.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "min",
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "min",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};
export var avgColumn = function avgColumn(chart, _ref12) {
  var period = _ref12.period,
    objKey = _ref12.objKey,
    valueCache = _ref12.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-avg") : "avg",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "Avg",
      strong: false
    }),
    headerString: function headerString() {
      return "Avg";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "avg",
        period: period,
        objKey: objKey,
        valueCache: valueCache
      });
    },
    cell: function cell(_ref13) {
      var id = _ref13.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "avg",
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "avg",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};
export var maxColumn = function maxColumn(chart, _ref14) {
  var period = _ref14.period,
    objKey = _ref14.objKey,
    valueCache = _ref14.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-max") : "max",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "Max",
      strong: false
    }),
    headerString: function headerString() {
      return "Max";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "max",
        period: period,
        objKey: objKey,
        valueCache: valueCache
      });
    },
    cell: function cell(_ref15) {
      var id = _ref15.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "max",
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "max",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};
export var medianColumn = function medianColumn(chart, _ref16) {
  var period = _ref16.period,
    objKey = _ref16.objKey,
    valueCache = _ref16.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-median") : "median",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "Median",
      strong: false
    }),
    headerString: function headerString() {
      return "Median";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "median",
        period: period,
        objKey: objKey,
        valueCache: valueCache
      });
    },
    cell: function cell(_ref17) {
      var id = _ref17.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "median",
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "median",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};
export var stdDevColumn = function stdDevColumn(chart, _ref18) {
  var period = _ref18.period,
    objKey = _ref18.objKey,
    valueCache = _ref18.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-stddev") : "stddev",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "StdDev",
      strong: false
    }),
    headerString: function headerString() {
      return "StdDev";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "stddev",
        period: period,
        objKey: objKey,
        valueCache: valueCache
      });
    },
    cell: function cell(_ref19) {
      var id = _ref19.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "stddev",
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "stddev",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};
export var p95Column = function p95Column(chart, _ref20) {
  var period = _ref20.period,
    objKey = _ref20.objKey,
    valueCache = _ref20.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-p95") : "p95",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "P95",
      strong: false
    }),
    headerString: function headerString() {
      return "95th Percentile";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "p95",
        period: period,
        objKey: objKey,
        valueCache: valueCache
      });
    },
    cell: function cell(_ref21) {
      var id = _ref21.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "p95",
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "p95",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};
export var rangeColumn = function rangeColumn(chart, _ref22) {
  var period = _ref22.period,
    objKey = _ref22.objKey,
    valueCache = _ref22.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-range") : "range",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "Range",
      strong: false
    }),
    headerString: function headerString() {
      return "Range";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "range",
        period: period,
        objKey: objKey,
        valueCache: valueCache
      });
    },
    cell: function cell(_ref23) {
      var id = _ref23.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "range",
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "range",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};
export var volumeColumn = function volumeColumn(chart, _ref24) {
  var period = _ref24.period,
    objKey = _ref24.objKey,
    valueCache = _ref24.valueCache;
  return {
    id: objKey ? "".concat(objKey, "-volume") : "volume",
    header: /*#__PURE__*/_jsx(ValueUnitHeader, {
      label: "Volume",
      strong: false
    }),
    headerString: function headerString() {
      return "Volume";
    },
    size: valueColumnSize,
    minSize: valueColumnMinSize,
    renderString: function renderString(row) {
      return renderValueString(chart, row, {
        key: "volume",
        period: period,
        objKey: objKey,
        valueCache: valueCache
      });
    },
    cell: function cell(_ref25) {
      var id = _ref25.row.original;
      var visible = useVisibleDimensionId(id);
      return /*#__PURE__*/_jsx(CachedValue, {
        period: period,
        objKey: objKey,
        id: id,
        visible: visible,
        valueKey: "volume",
        valueCache: valueCache
      });
    },
    sortingFn: makeNumberSortingFn(chart, {
      key: "volume",
      period: period,
      objKey: objKey,
      valueCache: valueCache
    })
  };
};