@netdata/charts
Version:
Netdata frontend SDK and chart utilities
56 lines • 1.93 kB
JavaScript
import React from "react";
import styled from "styled-components";
import { Flex, TextNano } from "@netdata/netdata-ui";
import { useChart, useAttributeValue, useUnitSign } from "../../provider";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var LinearColorScaleBar = styled(Flex).attrs({
width: {
max: "320px",
base: "100%"
},
height: "12px",
round: true
}).withConfig({
displayName: "legend__LinearColorScaleBar",
componentId: "sc-1iit0cq-0"
})(["background:linear-gradient( to right,", ",", " );"], function (_ref) {
var minColor = _ref.minColor;
return minColor;
}, function (_ref2) {
var maxColor = _ref2.maxColor;
return maxColor;
});
var Legend = function Legend() {
var chart = useChart();
var min = useAttributeValue("min");
var max = useAttributeValue("max");
var units = useUnitSign();
var selectedContexts = useAttributeValue("selectedContexts").join(", ");
var contextScope = useAttributeValue("contextScope").join(", ");
useAttributeValue("theme"); // rerender on theme change
var minColor = chart.getThemeAttribute("themeGroupBoxesMin");
var maxColor = chart.getThemeAttribute("themeGroupBoxesMax");
return /*#__PURE__*/_jsxs(Flex, {
"data-testid": "groupBox-legend",
gap: 4,
alignItems: "center",
width: "100%",
children: [/*#__PURE__*/_jsx(TextNano, {
strong: true,
children: selectedContexts && selectedContexts !== "*" ? selectedContexts : contextScope
}), /*#__PURE__*/_jsxs(Flex, {
gap: 2,
alignItems: "center",
width: "100%",
children: [/*#__PURE__*/_jsxs(TextNano, {
children: [chart.getConvertedValue(min), " ", units]
}), /*#__PURE__*/_jsx(LinearColorScaleBar, {
minColor: minColor,
maxColor: maxColor
}), /*#__PURE__*/_jsxs(TextNano, {
children: [chart.getConvertedValue(max), " ", units]
})]
})]
});
};
export default Legend;