@netdata/charts
Version:
Netdata frontend SDK and chart utilities
63 lines (62 loc) • 2.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _netdataUi = require("@netdata/netdata-ui");
var _provider = require("../../provider");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var LinearColorScaleBar = (0, _styledComponents["default"])(_netdataUi.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 = (0, _provider.useChart)();
var min = (0, _provider.useAttributeValue)("min");
var max = (0, _provider.useAttributeValue)("max");
var units = (0, _provider.useUnitSign)();
var selectedContexts = (0, _provider.useAttributeValue)("selectedContexts").join(", ");
var contextScope = (0, _provider.useAttributeValue)("contextScope").join(", ");
(0, _provider.useAttributeValue)("theme"); // rerender on theme change
var minColor = chart.getThemeAttribute("themeGroupBoxesMin");
var maxColor = chart.getThemeAttribute("themeGroupBoxesMax");
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
"data-testid": "groupBox-legend",
gap: 4,
alignItems: "center",
width: "100%",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextNano, {
strong: true,
children: selectedContexts && selectedContexts !== "*" ? selectedContexts : contextScope
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
gap: 2,
alignItems: "center",
width: "100%",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextNano, {
children: [chart.getConvertedValue(min), " ", units]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearColorScaleBar, {
minColor: minColor,
maxColor: maxColor
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextNano, {
children: [chart.getConvertedValue(max), " ", units]
})]
})]
});
};
var _default = exports["default"] = Legend;