@netdata/charts
Version:
Netdata frontend SDK and chart utilities
196 lines • 6.29 kB
JavaScript
import React from "react";
import { Flex, Icon, TextMicro, TextSmall } from "@netdata/netdata-ui";
import Sparkline from "./sparkline";
import { ValueUnitGrid, ValueUnitHeader } from "../valueWithUnit";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var valueColumnSize = 144;
var valueColumnMinSize = 120;
var getWeightColor = function getWeightColor(weight) {
var absWeight = Math.abs(weight);
if (absWeight >= 0.8) return "primary";
if (absWeight >= 0.5) return "warning";
if (absWeight >= 0.2) return "textLite";
return "textDescription";
};
export var formatWeight = function formatWeight(weight) {
return ((1 - weight) * 100).toFixed(1);
};
export var formatChange = function formatChange(change) {
return "".concat(change > 0 ? "+" : "").concat(change.toFixed(1));
};
export var nameColumn = function nameColumn() {
return {
id: "name",
header: /*#__PURE__*/_jsx(TextSmall, {
strong: true,
children: "Metric"
}),
headerString: function headerString() {
return "Metric";
},
accessorFn: function accessorFn(row) {
return row.kind === "context" ? row.contextName : [row.dimensionName, row.nodeName, row.context].filter(Boolean).join(" ");
},
enableGlobalFilter: true,
size: 480,
minSize: 180,
maxSize: 900,
cell: function cell(_ref) {
var _item$searchDepth;
var row = _ref.row;
var item = row.original;
if (item.kind === "context") {
return /*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
gap: 1,
width: "100%",
children: [row.getCanExpand() && /*#__PURE__*/_jsx(Icon, {
name: row.getIsExpanded() ? "chevron_down" : "chevron_right",
color: "textDescription",
size: "small"
}), /*#__PURE__*/_jsxs(Flex, {
column: true,
gap: 1,
width: {
min: "0px"
},
children: [/*#__PURE__*/_jsx(TextSmall, {
strong: true,
whiteSpace: "normal",
wordBreak: "break-word",
children: item.contextName
}), /*#__PURE__*/_jsxs(TextMicro, {
color: "textDescription",
children: [item.count, " correlated dimensions"]
})]
})]
});
}
return /*#__PURE__*/_jsxs(Flex, {
column: true,
gap: 1,
padding: [0, 0, 0, ((_item$searchDepth = item.searchDepth) !== null && _item$searchDepth !== void 0 ? _item$searchDepth : row.depth) * 3],
width: {
min: "0px",
base: "100%"
},
children: [/*#__PURE__*/_jsx(TextSmall, {
title: "Metric: ".concat(item.dimensionName, "\nContext: ").concat(item.context, "\nNode: ").concat(item.nodeName),
whiteSpace: "normal",
wordBreak: "break-word",
children: item.dimensionName
}), /*#__PURE__*/_jsxs(TextMicro, {
color: "textDescription",
whiteSpace: "normal",
wordBreak: "break-word",
children: [item.nodeName, " \u2022 ", item.context]
})]
});
}
};
};
export var correlationColumn = function correlationColumn() {
return {
id: "correlation",
header: /*#__PURE__*/_jsx(ValueUnitHeader, {
label: "Correlation"
}),
headerString: function headerString() {
return "Correlation";
},
accessorFn: function accessorFn(row) {
return row.kind === "context" ? row.minWeight : row.correlationWeight;
},
enableGlobalFilter: false,
size: valueColumnSize,
minSize: valueColumnMinSize,
maxSize: 160,
fullWidth: true,
cell: function cell(_ref2) {
var row = _ref2.row,
getValue = _ref2.getValue;
var item = row.original;
var weight = getValue();
return /*#__PURE__*/_jsx(ValueUnitGrid, {
value: formatWeight(weight),
unit: "%",
detail: item.kind === "dimension" ? item.correlationStrength : undefined,
color: getWeightColor(weight)
});
},
sortingFn: "basic"
};
};
export var changeColumn = function changeColumn() {
return {
id: "change",
header: /*#__PURE__*/_jsx(ValueUnitHeader, {
label: "Change"
}),
headerString: function headerString() {
return "Change";
},
accessorFn: function accessorFn(row) {
return row.kind === "dimension" ? row.percentChange : null;
},
enableGlobalFilter: false,
size: valueColumnSize,
minSize: valueColumnMinSize,
maxSize: 140,
fullWidth: true,
cell: function cell(_ref3) {
var row = _ref3.row,
getValue = _ref3.getValue;
if (row.original.kind !== "dimension") return null;
var change = getValue();
var color = change > 0 ? "warning" : change < 0 ? "primary" : "textLite";
return /*#__PURE__*/_jsx(ValueUnitGrid, {
value: formatChange(change),
unit: "%",
color: color
});
},
sortingFn: "basic"
};
};
export var sparklineColumn = function sparklineColumn() {
return {
id: "sparkline",
header: /*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
gap: 1,
width: "100%",
children: [/*#__PURE__*/_jsx(Flex, {
flex: false,
basis: "".concat(valueColumnSize, "px"),
width: "".concat(valueColumnSize, "px"),
children: /*#__PURE__*/_jsx(ValueUnitHeader, {
label: "Value"
})
}), /*#__PURE__*/_jsx(TextMicro, {
strong: true,
children: "Trend"
})]
}),
headerString: function headerString() {
return "Trend";
},
size: 300,
minSize: 260,
maxSize: 420,
cell: function cell(_ref4) {
var _row$getParentRow;
var row = _ref4.row;
if (row.original.kind !== "dimension") return null;
var dimensions = row.original.searchSiblings || ((_row$getParentRow = row.getParentRow()) === null || _row$getParentRow === void 0 ? void 0 : _row$getParentRow.original.children) || [row.original];
return /*#__PURE__*/_jsx(Flex, {
width: "100%",
height: "32px",
children: /*#__PURE__*/_jsx(Sparkline, {
dimension: row.original,
dimensions: dimensions
})
});
}
};
};