@netdata/charts
Version:
Netdata frontend SDK and chart utilities
740 lines • 22.6 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import React, { useMemo, useState } from "react";
import { ThemeProvider } from "styled-components";
import { Button, Flex, DefaultTheme, DarkTheme } from "@netdata/netdata-ui";
import Line from "./components/line";
import AlertTimeline from "./components/alertTimeline";
import HeadlessChart from "./components/headlessChart";
import makeMockPayload from "./helpers/makeMockPayload";
import { useAttribute, useAttributeValue, useChart, withChartProvider } from "./components/provider";
import makeDefaultSDK from "./makeDefaultSDK";
import noData from "../fixtures/noData";
import systemLoadLine from "../fixtures/systemLoadLine";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var _getChart = makeMockPayload(systemLoadLine[0], {
delay: 600
});
export var Simple = function Simple() {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"]
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
export var Width = function Width() {
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
width = _useState2[0],
setWidth = _useState2[1];
var chart = useMemo(function () {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
navigation: "selectVertical"
}
});
sdk.appendChild(chart);
return chart;
}, []);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsxs(Flex, {
column: true,
width: "500px",
gap: 4,
children: [/*#__PURE__*/_jsx(Button, {
onClick: function onClick() {
return setWidth(function (s) {
return !s;
});
},
label: "Add space"
}), /*#__PURE__*/_jsx(Flex, {
padding: [0, 0, 0, width ? 12 : 0],
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
})]
})
});
};
export var SimpleDark = function SimpleDark() {
var sdk = makeDefaultSDK({
attributes: {
contextScope: ["system.load"],
theme: "dark"
}
});
var chart = sdk.makeChart({
getChart: _getChart
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DarkTheme,
children: /*#__PURE__*/_jsx(Flex, {
background: "mainBackground",
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
})
});
};
SimpleDark.parameters = {
netdataTheme: "dark"
};
export var NoData = function NoData() {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: function getChart() {
return new Promise(function (r) {
return setTimeout(function () {
return r(noData);
}, 600);
});
},
attributes: {
contextScope: ["system.load"]
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
var timezones = ["Pacific/Honolulu", "Europe/Athens", "Asia/Tokyo"];
var TimezonePicker = withChartProvider(function () {
var _useAttribute = useAttribute("timezone"),
_useAttribute2 = _slicedToArray(_useAttribute, 2),
value = _useAttribute2[0],
setValue = _useAttribute2[1];
return /*#__PURE__*/_jsx("select", {
value: value,
onChange: function onChange(event) {
return setValue(event.target.value);
},
children: timezones.map(function (timezone) {
return /*#__PURE__*/_jsx("option", {
value: timezone,
children: timezone
}, timezone);
})
});
});
export var Timezone = function Timezone() {
var chart = useMemo(function () {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
timezone: "Pacific/Honolulu"
}
});
sdk.appendChild(chart);
return chart;
}, []);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsxs(Flex, {
column: true,
children: [/*#__PURE__*/_jsx(TimezonePicker, {
chart: chart
}), /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})]
})
});
};
var TimePicker = withChartProvider(function () {
var chart = useChart();
var after = useAttributeValue("after");
var before = useAttributeValue("before");
var run = after < 0;
return /*#__PURE__*/_jsxs(Flex, {
alignItems: "start",
children: [/*#__PURE__*/_jsx("input", {
type: "checkbox",
checked: run,
onChange: function onChange(event) {
if (event.target.checked) return chart.moveX(-900);
var now = new Date().getTime() / 1000;
chart.moveX(now - 900, now);
}
}), /*#__PURE__*/_jsx("input", {
type: "date",
value: run ? "-" : new Date(after * 1000).toISOString().split("T")[0],
onChange: function onChange(event) {
return chart.moveX(event.target.valueAsDate.getTime() / 1000, chart.getAttribute("before"));
},
disabled: run
}), /*#__PURE__*/_jsx("input", {
type: "date",
value: run ? "-" : new Date(before * 1000).toISOString().split("T")[0],
onChange: function onChange(event) {
return chart.moveX(chart.getAttribute("after"), event.target.valueAsDate.getTime() / 1000);
},
disabled: run
})]
});
});
export var Timepicker = function Timepicker() {
var chart = useMemo(function () {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"]
}
});
sdk.appendChild(chart);
return chart;
}, []);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsxs(Flex, {
column: true,
children: [/*#__PURE__*/_jsx(TimePicker, {
chart: chart
}), /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})]
})
});
};
export var SelectedDimensions = function SelectedDimensions() {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
selectedDimensions: ["load5", "load15"]
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
export var AlertInTimeWindow = function AlertInTimeWindow() {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
overlays: {
alarm: {
type: "alarm",
status: "warning",
value: 538,
when: Math.floor(Date.now() / 1000 - 5 * 60)
},
proceeded: {
type: "proceeded"
}
}
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
export var AlertTransitions = function AlertTransitions() {
var sdk = makeDefaultSDK();
var now = Math.floor(Date.now() / 1000);
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
overlays: {
alertTransitions: {
type: "alertTransitions",
transitions: [{
timestamp: now - 12 * 60,
from: "CLEAR",
to: "WARNING",
value: 75.5
}, {
timestamp: now - 9 * 60,
from: "WARNING",
to: "CRITICAL",
value: 92.3
}, {
timestamp: now - 6 * 60,
from: "CRITICAL",
to: "WARNING",
value: 78.1
}, {
timestamp: now - 3 * 60,
from: "WARNING",
to: "CLEAR",
value: 45.0
}]
}
}
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
export var AlertTransitionsDark = function AlertTransitionsDark() {
var sdk = makeDefaultSDK({
attributes: {
theme: "dark"
}
});
var now = Math.floor(Date.now() / 1000);
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
overlays: {
alertTransitions: {
type: "alertTransitions",
transitions: [{
timestamp: now - 10 * 60,
from: "CLEAR",
to: "CRITICAL",
value: 95.0
}, {
timestamp: now - 5 * 60,
from: "CRITICAL",
to: "CLEAR",
value: 30.0
}]
}
}
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DarkTheme,
children: /*#__PURE__*/_jsx(Flex, {
background: "mainBackground",
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
})
});
};
AlertTransitionsDark.parameters = {
netdataTheme: "dark"
};
var alertTransitionsData = [{
timestamp: -12 * 60,
from: "CLEAR",
to: "WARNING",
value: 75.5
}, {
timestamp: -9 * 60,
from: "WARNING",
to: "CRITICAL",
value: 92.3
}, {
timestamp: -6 * 60,
from: "CRITICAL",
to: "WARNING",
value: 78.1
}, {
timestamp: -3 * 60,
from: "WARNING",
to: "CLEAR",
value: 45.0
}];
export var AlertTransitionsWithTimeline = function AlertTransitionsWithTimeline() {
var sdk = makeDefaultSDK({
attributes: {
theme: "dark",
syncHover: true
}
});
var now = Math.floor(Date.now() / 1000);
var transitions = alertTransitionsData.map(function (t) {
return _objectSpread(_objectSpread({}, t), {}, {
timestamp: now + t.timestamp
});
});
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
overlays: {
alertTransitions: {
type: "alertTransitions",
transitions: transitions
}
}
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DarkTheme,
children: /*#__PURE__*/_jsxs(Flex, {
background: "mainBackground",
column: true,
width: "600px",
children: [/*#__PURE__*/_jsx(HeadlessChart, {
chart: chart,
children: /*#__PURE__*/_jsx(AlertTimeline, {})
}), /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})]
})
});
};
AlertTransitionsWithTimeline.parameters = {
netdataTheme: "dark"
};
export var HighlightInTimeWindow = function HighlightInTimeWindow() {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
overlays: {
highlight: {
type: "highlight",
range: [Date.now() / 1000 - 5 * 60, Date.now() / 1000 - 4 * 60]
},
proceeded: {
type: "proceeded"
}
}
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
export var Timeout = function Timeout() {
var requests = 0;
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: function getChart(params) {
if (requests++ % 2 === 1) return new Promise(function (r) {
return setTimeout(function () {
return _getChart(params).then(r);
}, 15000);
});
return _getChart(params);
},
attributes: {
contextScope: ["system.load"]
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
export var Error = function Error() {
var requests = 0;
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: function getChart(params) {
if (requests++ % 2 === 1) return new Promise(function (resolve, reject) {
return setTimeout(function () {
return reject();
}, 200);
});
return _getChart(params);
},
attributes: {
contextScope: ["system.load"]
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
export var InitialLoading = function InitialLoading() {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: function getChart() {
return new Promise(function () {});
},
attributes: {
contextScope: ["system.load"]
}
});
var darkChart = sdk.makeChart({
getChart: function getChart() {
return new Promise(function () {});
},
attributes: {
contextScope: ["system.load"],
theme: "dark"
}
});
sdk.appendChild(chart);
sdk.appendChild(darkChart);
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
}), /*#__PURE__*/_jsx(ThemeProvider, {
theme: DarkTheme,
children: /*#__PURE__*/_jsx(Flex, {
background: "mainBackground",
margin: [10, 0, 0],
children: /*#__PURE__*/_jsx(Line, {
chart: darkChart,
height: "315px"
})
})
})]
});
};
export var Multiple = function Multiple() {
var sdk = makeDefaultSDK();
var charts = Array.from(Array(10)).map(function (v, index) {
var chart = sdk.makeChart({
attributes: {
contextScope: ["system.load"],
id: "chart-".concat(index)
},
getChart: _getChart
});
sdk.appendChild(chart);
return chart;
});
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Flex, {
column: true,
gap: 2,
children: charts.map(function (chart) {
return /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
}, chart.getAttribute("id"));
})
})
});
};
export var Sync = function Sync() {
var sdk = makeDefaultSDK();
var charts = Array.from(Array(3)).map(function (v, index) {
var chart = sdk.makeChart({
attributes: {
contextScope: ["system.load"],
id: "chart-".concat(index),
syncHover: index !== 1
},
getChart: _getChart
});
sdk.appendChild(chart);
return chart;
});
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Flex, {
column: true,
gap: 2,
children: charts.map(function (chart) {
return /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
}, chart.getAttribute("id"));
})
})
});
};
export var WithAnnotations = function WithAnnotations() {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
hasCorrelation: true,
// Enable correlation buttons
overlays: {
annotation1: {
type: "annotation",
timestamp: Math.floor(Date.now() / 1000 - 10 * 60),
// 10 minutes ago
text: "Deployment started",
author: "DevOps Team",
created: new Date(Date.now() - 10 * 60 * 1000).toISOString(),
color: "#00AB44",
position: "top"
},
annotation2: {
type: "annotation",
timestamp: Math.floor(Date.now() / 1000 - 5 * 60),
// 5 minutes ago
text: "CPU spike detected - investigating root cause",
author: "Backend Team",
created: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
color: "#ff6b6b",
position: "bottom"
},
annotation3: {
type: "annotation",
timestamp: Math.floor(Date.now() / 1000 - 2 * 60),
// 2 minutes ago
text: "Issue resolved",
author: "SRE Team",
created: new Date(Date.now() - 2 * 60 * 1000).toISOString(),
color: "#0075F2",
position: "top"
}
}
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})
});
};
export var AnnotationCreation = function AnnotationCreation() {
var sdk = makeDefaultSDK();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
hasCorrelation: true
}
});
sdk.appendChild(chart);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("p", {
style: {
marginBottom: "10px",
fontSize: "14px",
color: "#666"
},
children: "Click anywhere on the chart to create a new annotation"
}), /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "315px"
})]
})
});
};
export var CrossChartAnnotationSync = function CrossChartAnnotationSync() {
var sdk = makeDefaultSDK();
var charts = Array.from(Array(3)).map(function (v, index) {
var chart = sdk.makeChart({
attributes: {
contextScope: ["system.load"],
id: "chart-".concat(index),
hasCorrelation: true,
overlays: index === 0 ? {
annotation1: {
type: "annotation",
timestamp: Math.floor(Date.now() / 1000 - 8 * 60),
text: "Performance issue detected",
author: "SRE Team",
created: new Date(Date.now() - 8 * 60 * 1000).toISOString(),
color: "#ff6b6b",
priority: "error"
}
} : {}
},
getChart: _getChart
});
sdk.appendChild(chart);
return chart;
});
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("p", {
style: {
marginBottom: "10px",
fontSize: "14px",
color: "#666"
},
children: "Hover the annotation on the first chart and click \"Sync all charts\" to see cross-chart synchronization. Synced annotations appear with dashed borders and different actions."
}), /*#__PURE__*/_jsx(Flex, {
column: true,
gap: 2,
children: charts.map(function (chart, index) {
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsxs("h4", {
style: {
margin: "10px 0 5px",
fontSize: "12px",
color: "#888"
},
children: ["Chart ", index + 1, " (ID: ", chart.getAttribute("id"), ")"]
}), /*#__PURE__*/_jsx(Line, {
chart: chart,
height: "200px"
})]
}, chart.getAttribute("id"));
})
})]
})
});
};
export default {
title: "Charts",
component: Simple
};