@netdata/charts
Version:
Netdata frontend SDK and chart utilities
346 lines • 9.54 kB
JavaScript
import React from "react";
import { Flex } from "@netdata/netdata-ui";
import Line from "./components/line";
import GaugeComponent from "./components/gauge";
import EasyPieComponent from "./components/easyPie";
import NumberComponent from "./components/number";
import D3pieComponent from "./components/d3pie";
import BarsComponent from "./components/bars";
import GroupBoxes from "./components/groupBoxes";
import Table from "./components/table";
import HeadlessChart from "./components/headlessChart";
import makeDefaultSDK from "./makeDefaultSDK";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var Chart = function Chart(_ref) {
var contextScope = _ref.contextScope,
selectedContexts = _ref.selectedContexts,
host = _ref.host,
theme = _ref.theme;
var sdk = makeDefaultSDK({
attributes: {
theme: theme,
containerWidth: 1000
}
});
var chart = sdk.makeChart({
attributes: {
id: "control",
selectedContexts: selectedContexts,
contextScope: contextScope,
host: host,
aggregationMethod: "sum",
agent: true,
syncHover: true,
groupingMethod: "average"
}
});
sdk.appendChild(chart);
var chart7 = sdk.makeChart({
attributes: {
id: "control",
selectedContexts: selectedContexts,
contextScope: ["disk.io", "disk.ops", "disk.await", "disk.util"],
host: host,
aggregationMethod: "avg",
agent: true,
syncHover: true,
groupingMethod: "average",
chartLibrary: "table",
groupBy: ["label", "dimension", "context", "node"],
groupByLabel: ["device"],
en: {
"disk.io": {
one: "DISK IO"
}
}
}
});
sdk.appendChild(chart7);
var chart2 = sdk.makeChart({
attributes: {
selectedContexts: selectedContexts,
contextScope: contextScope,
selectedDimensions: ["in"],
host: host,
agent: true,
chartLibrary: "easypiechart",
urlOptions: ["percentage"],
groupBy: ["percentage-of-instance"],
syncHover: true,
width: "50%"
}
});
sdk.appendChild(chart2);
var chart3 = sdk.makeChart({
attributes: {
selectedContexts: selectedContexts,
contextScope: contextScope,
selectedDimensions: ["out"],
host: host,
agent: true,
chartLibrary: "gauge",
syncHover: true,
urlOptions: ["percentage"],
width: "50%"
}
});
sdk.appendChild(chart3);
var chart4 = sdk.makeChart({
attributes: {
selectedContexts: selectedContexts,
contextScope: contextScope,
host: host,
agent: true,
chartLibrary: "groupBoxes",
groupBy: ["dimension", "node"],
width: "50%"
}
});
sdk.appendChild(chart4);
var chart5 = sdk.makeChart({
attributes: {
selectedContexts: selectedContexts,
contextScope: contextScope,
host: host,
agent: true,
chartLibrary: "number",
syncHover: true,
width: "50%"
}
});
sdk.appendChild(chart5);
var chart6 = sdk.makeChart({
attributes: {
selectedContexts: selectedContexts,
contextScope: contextScope,
host: host,
aggregationMethod: "avg",
agent: true,
syncHover: true,
groupingMethod: "average",
chartLibrary: "d3pie",
width: "50%"
}
});
sdk.appendChild(chart6);
var chart8 = sdk.makeChart({
attributes: {
selectedContexts: selectedContexts,
contextScope: contextScope,
host: host,
aggregationMethod: "avg",
agent: true,
syncHover: true,
groupingMethod: "average",
chartLibrary: "d3pie",
width: "50%"
}
});
sdk.appendChild(chart8);
var chart9 = sdk.makeChart({
attributes: {
selectedContexts: selectedContexts,
contextScope: contextScope,
host: host,
aggregationMethod: "avg",
agent: true,
syncHover: true,
groupingMethod: "average",
chartLibrary: "d3pie",
width: "50%"
}
});
sdk.appendChild(chart9);
var chart10 = sdk.makeChart({
attributes: {
selectedContexts: selectedContexts,
contextScope: contextScope,
host: host,
agent: true,
chartLibrary: "bars",
syncHover: true,
width: "50%"
}
});
sdk.appendChild(chart10);
return /*#__PURE__*/_jsxs(Flex, {
background: "mainBackground",
column: true,
gap: 2,
padding: [3],
overflow: "auto",
height: "100%",
children: [/*#__PURE__*/_jsx(Line, {
chart: chart,
height: "600px",
width: "100%"
}), /*#__PURE__*/_jsx(Table, {
chart: chart7,
height: "315px",
width: "100%"
})]
});
};
export var HeadlessChartExample = function HeadlessChartExample(_ref2) {
var nodesScope = _ref2.nodesScope,
contextScope = _ref2.contextScope,
selectedContexts = _ref2.selectedContexts,
host = _ref2.host,
theme = _ref2.theme;
var sdk = makeDefaultSDK({
attributes: {
theme: theme,
containerWidth: 1000
}
});
var chart = sdk.makeChart({
attributes: {
id: "control",
selectedContexts: selectedContexts,
contextScope: contextScope,
host: host,
aggregationMethod: "sum",
agent: true,
syncHover: true,
groupingMethod: "average"
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsxs(Flex, {
background: "mainBackground",
column: true,
gap: 2,
padding: [3],
overflow: "auto",
height: "100%",
children: [/*#__PURE__*/_jsx(Line, {
chart: chart,
height: "600px",
width: "100%"
}), /*#__PURE__*/_jsx(HeadlessChart, {
sdk: sdk,
contextScope: [contextScope],
nodesScope: [nodesScope],
host: host,
agent: true,
syncHover: true,
aggregationMethod: "avg",
groupingMethod: "average",
children: function children(_ref3) {
var data = _ref3.data,
state = _ref3.state,
helpers = _ref3.helpers,
currentRow = _ref3.currentRow;
return /*#__PURE__*/_jsxs(Flex, {
column: true,
gap: 2,
children: [/*#__PURE__*/_jsx("h3", {
children: "HeadlessChart Example"
}), state.loading && /*#__PURE__*/_jsx("div", {
children: "Loading chart data..."
}), state.empty && /*#__PURE__*/_jsx("div", {
children: "No data available"
}), data && data.length > 0 && /*#__PURE__*/_jsxs(Flex, {
column: true,
gap: 1,
children: [/*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsxs("strong", {
children: ["Latest Data Point (", data.length, " total points):"]
})
}), /*#__PURE__*/_jsx("div", {
children: helpers.formatTime(data[data.length - 1][0])
}), /*#__PURE__*/_jsx(Flex, {
gap: 2,
children: helpers.getVisibleDimensionIds().map(function (dimensionId) {
var value = helpers.getDimensionValue(dimensionId, data.length - 1);
var color = helpers.selectDimensionColor(dimensionId);
return /*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
gap: 1,
children: [/*#__PURE__*/_jsx("div", {
style: {
width: 8,
height: 8,
backgroundColor: color,
borderRadius: 2
}
}), /*#__PURE__*/_jsxs("span", {
children: [dimensionId, ": ", value]
})]
}, dimensionId);
})
}), /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsx("strong", {
children: "Hovered Data Point:"
})
}), /*#__PURE__*/_jsx("div", {
children: currentRow.formattedTime
}), /*#__PURE__*/_jsx(Flex, {
gap: 2,
children: currentRow.dimensions.map(function (dim) {
return /*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
gap: 1,
children: [/*#__PURE__*/_jsx("div", {
style: {
width: 8,
height: 8,
backgroundColor: dim.color,
borderRadius: 2
}
}), /*#__PURE__*/_jsxs("span", {
children: [dim.id, ": ", dim.convertedValue]
})]
}, dim.id);
})
})]
})]
});
}
})]
});
};
export default {
title: "Agent V2",
component: Chart,
tags: ["autodocs"],
args: {
nodesScope: [],
contextScope: ["system.load"],
selectedContexts: [],
selectedDimensions: [],
theme: "default",
host: "http://10.10.11.51:19999/api/v3"
},
argTypes: {
host: {
control: {
type: "text"
}
},
contextScope: {
control: {
type: "multi-select"
},
options: ["system.load"]
},
selectedContexts: {
control: {
type: "multi-select"
},
options: ["system.load"]
},
selectedDimensions: {
control: {
type: "multi-select"
},
options: ["in", "out"]
},
theme: {
control: {
type: "select"
},
options: ["default", "dark"]
}
}
};