@netdata/charts
Version:
Netdata frontend SDK and chart utilities
32 lines (31 loc) • 1.27 kB
JavaScript
import React from "react";
import styled from "styled-components";
import { TextNano, Flex } from "@netdata/netdata-ui";
import { useChart, useAttributeValue, useUnitSign } from "../../provider";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
var LinearColorScaleBar = styled(Flex).attrs({
width: "320px",
height: "12px",
round: true
}).withConfig({
displayName: "heatmapColors__LinearColorScaleBar",
componentId: "sc-13fexd8-0"
})(["background:linear-gradient( to right,rgb(62,73,137),rgb(49,104,142),rgb(38,130,142),rgb(31,158,137),rgb(53,183,121),rgb(110,206,88),rgb(181,222,43),rgb(253,231,37) );"]);
var HeatmapColorsLegend = function HeatmapColorsLegend() {
var chart = useChart();
var max = useAttributeValue("max");
var units = useUnitSign();
useAttributeValue("theme"); // rerender on theme change
return /*#__PURE__*/_jsxs(Flex, {
"data-testid": "heatmap-legend",
gap: 2,
alignItems: "center",
padding: [2],
children: [/*#__PURE__*/_jsxs(TextNano, {
children: [chart.getConvertedValue(0), " ", units]
}), /*#__PURE__*/_jsx(LinearColorScaleBar, {}), /*#__PURE__*/_jsxs(TextNano, {
children: [chart.getConvertedValue(max), " ", units]
})]
});
};
export default HeatmapColorsLegend;