@netdata/charts
Version:
Netdata frontend SDK and chart utilities
73 lines • 2.38 kB
JavaScript
import React from "react";
import styled from "styled-components";
import { Flex, TextSmall, getColor } from "@netdata/netdata-ui";
import downloadSVG from "@netdata/netdata-ui/dist/components/icon/assets/download.svg";
import Icon from "../../../icon";
import { useDownloadItems } from "../../download/useDownload";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var subtitles = {
"Download as CSV": "Values converted to display units",
"Download raw data": "Raw values straight from the database",
"Download as PDF": "Rendered chart image, A4 page",
"Download as PNG": "Rendered chart image, transparent-friendly"
};
var RowButton = styled(Flex).attrs({
as: "button",
role: "button"
}).withConfig({
displayName: "download__RowButton",
componentId: "sc-748uf9-0"
})(["appearance:none;background:transparent;border:0;border-radius:4px;cursor:pointer;text-align:left;width:100%;color:inherit;font:inherit;transition:background 120ms ease;&:hover,&:focus-visible{background:", ";outline:none;}"], getColor("selected"));
var Row = function Row(_ref) {
var label = _ref.label,
onClick = _ref.onClick,
dataTrack = _ref["data-track"];
return /*#__PURE__*/_jsxs(RowButton, {
alignItems: "center",
gap: 3,
padding: [2, 3],
onClick: onClick,
"data-track": dataTrack,
"data-testid": "chartSettings-download-".concat(label.replace(/\s+/g, "-").toLowerCase()),
children: [/*#__PURE__*/_jsx(Icon, {
svg: downloadSVG,
size: "16px",
color: "textLite"
}), /*#__PURE__*/_jsxs(Flex, {
column: true,
gap: 0.5,
flex: true,
children: [/*#__PURE__*/_jsx(TextSmall, {
strong: true,
children: label
}), /*#__PURE__*/_jsx(TextSmall, {
color: "textNoFocus",
children: subtitles[label]
})]
})]
});
};
var DownloadBody = function DownloadBody(_ref2) {
var chart = _ref2.chart;
var items = useDownloadItems(chart);
return /*#__PURE__*/_jsx(Flex, {
column: true,
padding: [2],
gap: 1,
width: {
min: "260px"
},
children: items.map(function (item) {
return /*#__PURE__*/_jsx(Row, {
label: item.label,
onClick: item.onClick,
"data-track": item["data-track"]
}, item.label);
})
});
};
export default {
id: "download",
label: "Download",
Component: DownloadBody
};