@netdata/charts
Version:
Netdata frontend SDK and chart utilities
98 lines • 3.32 kB
JavaScript
import React, { memo } from "react";
import styled from "styled-components";
import { Flex, TextMicro } from "@netdata/netdata-ui";
import { useChart, useConverted, useAttributeValue, useUnitSign } from "../../provider";
import { BaseColorBar } from "../../line/dimensions/color";
import Label from "./label";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Container = styled(Flex).attrs(function (props) {
return {
round: true,
border: {
side: "all",
color: "elementBackground"
},
width: {
min: "300px",
max: props.maxWidth ? "".concat(props.maxWidth, "px") : "80vw"
},
background: "dropdown",
column: true,
padding: [4],
gap: 1
};
}).withConfig({
displayName: "labels__Container",
componentId: "sc-5eymlk-0"
})(["box-shadow:0px 8px 12px rgba(9,30,66,0.15),0px 0px 1px rgba(9,30,66,0.31);"]);
var ColorBackground = styled(BaseColorBar).attrs({
position: "absolute",
top: 1,
left: 0,
backgroundOpacity: 0.4,
round: 0.5
}).withConfig({
displayName: "labels__ColorBackground",
componentId: "sc-5eymlk-1"
})([""]);
var Grid = styled.div.withConfig({
displayName: "labels__Grid",
componentId: "sc-5eymlk-2"
})(["display:grid;width:100%;grid-template-columns:minmax(0,max-content) minmax(0,2fr);column-gap:8px;align-items:center;"]);
var Labels = function Labels(_ref) {
var label = _ref.label,
groupLabel = _ref.groupLabel,
data = _ref.data,
id = _ref.id,
ref = _ref.ref;
var chart = useChart();
var viewDimensions = chart.getAttribute("viewDimensions");
var index = chart.getDimensionIndex(id);
var min = useAttributeValue("min");
var max = useAttributeValue("max");
var chartWidth = chart.getUI().getChartWidth() * 0.9;
var value = chart.getRowDimensionValue(id, data);
var convertedValue = useConverted(value);
var unitSign = useUnitSign();
return /*#__PURE__*/_jsxs(Container, {
"data-testid": "chartPopover-labels",
maxWidth: chartWidth,
gap: 2,
ref: ref,
children: [/*#__PURE__*/_jsxs(Flex, {
column: true,
gap: 1,
children: [/*#__PURE__*/_jsx(TextMicro, {
children: groupLabel
}), /*#__PURE__*/_jsx(TextMicro, {
strong: true,
children: label
}), /*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
position: "relative",
children: [/*#__PURE__*/_jsx(ColorBackground, {
value: value,
min: min,
max: max,
bg: chart.getThemeAttribute("themeGroupBoxesMax"),
height: "18px"
}), /*#__PURE__*/_jsxs(TextMicro, {
padding: [1.5, 2],
strong: true,
children: [convertedValue, " ", convertedValue !== "-" && unitSign]
})]
})]
}), !!(viewDimensions !== null && viewDimensions !== void 0 && viewDimensions.labels) && /*#__PURE__*/_jsx(Grid, {
gap: 1,
column: true,
children: Object.keys(viewDimensions.labels).map(function (key) {
var _viewDimensions$label;
return /*#__PURE__*/_jsx(Label, {
label: key,
value: (_viewDimensions$label = viewDimensions.labels[key]) === null || _viewDimensions$label === void 0 ? void 0 : _viewDimensions$label[index]
}, key);
})
})]
});
};
export default /*#__PURE__*/memo(Labels);