@netdata/charts
Version:
Netdata frontend SDK and chart utilities
748 lines (747 loc) • 27.1 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); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.WithAnnotations = exports.Width = exports.Timezone = exports.Timepicker = exports.Timeout = exports.Sync = exports.SimpleDark = exports.Simple = exports.SelectedDimensions = exports.NoData = exports.Multiple = exports.InitialLoading = exports.HighlightInTimeWindow = exports.Error = exports.CrossChartAnnotationSync = exports.AnnotationCreation = exports.AlertTransitionsWithTimeline = exports.AlertTransitionsDark = exports.AlertTransitions = exports.AlertInTimeWindow = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = require("styled-components");
var _netdataUi = require("@netdata/netdata-ui");
var _line = _interopRequireDefault(require("./components/line"));
var _alertTimeline = _interopRequireDefault(require("./components/alertTimeline"));
var _headlessChart = _interopRequireDefault(require("./components/headlessChart"));
var _makeMockPayload = _interopRequireDefault(require("./helpers/makeMockPayload"));
var _provider = require("./components/provider");
var _makeDefaultSDK = _interopRequireDefault(require("./makeDefaultSDK"));
var _noData = _interopRequireDefault(require("../fixtures/noData"));
var _systemLoadLine = _interopRequireDefault(require("../fixtures/systemLoadLine"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; }
var _getChart = (0, _makeMockPayload["default"])(_systemLoadLine["default"][0], {
delay: 600
});
var Simple = exports.Simple = function Simple() {
var sdk = (0, _makeDefaultSDK["default"])();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"]
}
});
sdk.appendChild(chart);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var Width = exports.Width = function Width() {
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
width = _useState2[0],
setWidth = _useState2[1];
var chart = (0, _react.useMemo)(function () {
var sdk = (0, _makeDefaultSDK["default"])();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
navigation: "selectVertical"
}
});
sdk.appendChild(chart);
return chart;
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
column: true,
width: "500px",
gap: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Button, {
onClick: function onClick() {
return setWidth(function (s) {
return !s;
});
},
label: "Add space"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
padding: [0, 0, 0, width ? 12 : 0],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
})]
})
});
};
var SimpleDark = exports.SimpleDark = function SimpleDark() {
var sdk = (0, _makeDefaultSDK["default"])({
attributes: {
contextScope: ["system.load"],
theme: "dark"
}
});
var chart = sdk.makeChart({
getChart: _getChart
});
sdk.appendChild(chart);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DarkTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
background: "mainBackground",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
})
});
};
SimpleDark.parameters = {
netdataTheme: "dark"
};
var NoData = exports.NoData = function NoData() {
var sdk = (0, _makeDefaultSDK["default"])();
var chart = sdk.makeChart({
getChart: function getChart() {
return new Promise(function (r) {
return setTimeout(function () {
return r(_noData["default"]);
}, 600);
});
},
attributes: {
contextScope: ["system.load"]
}
});
sdk.appendChild(chart);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var timezones = ["Pacific/Honolulu", "Europe/Athens", "Asia/Tokyo"];
var TimezonePicker = (0, _provider.withChartProvider)(function () {
var _useAttribute = (0, _provider.useAttribute)("timezone"),
_useAttribute2 = _slicedToArray(_useAttribute, 2),
value = _useAttribute2[0],
setValue = _useAttribute2[1];
return /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
value: value,
onChange: function onChange(event) {
return setValue(event.target.value);
},
children: timezones.map(function (timezone) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
value: timezone,
children: timezone
}, timezone);
})
});
});
var Timezone = exports.Timezone = function Timezone() {
var chart = (0, _react.useMemo)(function () {
var sdk = (0, _makeDefaultSDK["default"])();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
timezone: "Pacific/Honolulu"
}
});
sdk.appendChild(chart);
return chart;
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
column: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TimezonePicker, {
chart: chart
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})]
})
});
};
var TimePicker = (0, _provider.withChartProvider)(function () {
var chart = (0, _provider.useChart)();
var after = (0, _provider.useAttributeValue)("after");
var before = (0, _provider.useAttributeValue)("before");
var run = after < 0;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
alignItems: "start",
children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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
})]
});
});
var Timepicker = exports.Timepicker = function Timepicker() {
var chart = (0, _react.useMemo)(function () {
var sdk = (0, _makeDefaultSDK["default"])();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"]
}
});
sdk.appendChild(chart);
return chart;
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
column: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TimePicker, {
chart: chart
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})]
})
});
};
var SelectedDimensions = exports.SelectedDimensions = function SelectedDimensions() {
var sdk = (0, _makeDefaultSDK["default"])();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
selectedDimensions: ["load5", "load15"]
}
});
sdk.appendChild(chart);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var AlertInTimeWindow = exports.AlertInTimeWindow = function AlertInTimeWindow() {
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var AlertTransitions = exports.AlertTransitions = function AlertTransitions() {
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var AlertTransitionsDark = exports.AlertTransitionsDark = function AlertTransitionsDark() {
var sdk = (0, _makeDefaultSDK["default"])({
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DarkTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
background: "mainBackground",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
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
}];
var AlertTransitionsWithTimeline = exports.AlertTransitionsWithTimeline = function AlertTransitionsWithTimeline() {
var sdk = (0, _makeDefaultSDK["default"])({
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DarkTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
background: "mainBackground",
column: true,
width: "600px",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_headlessChart["default"], {
chart: chart,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alertTimeline["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})]
})
});
};
AlertTransitionsWithTimeline.parameters = {
netdataTheme: "dark"
};
var HighlightInTimeWindow = exports.HighlightInTimeWindow = function HighlightInTimeWindow() {
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var Timeout = exports.Timeout = function Timeout() {
var requests = 0;
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var Error = exports.Error = function Error() {
var requests = 0;
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var InitialLoading = exports.InitialLoading = function InitialLoading() {
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DarkTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
background: "mainBackground",
margin: [10, 0, 0],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: darkChart,
height: "315px"
})
})
})]
});
};
var Multiple = exports.Multiple = function Multiple() {
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
column: true,
gap: 2,
children: charts.map(function (chart) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
}, chart.getAttribute("id"));
})
})
});
};
var Sync = exports.Sync = function Sync() {
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
column: true,
gap: 2,
children: charts.map(function (chart) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
}, chart.getAttribute("id"));
})
})
});
};
var WithAnnotations = exports.WithAnnotations = function WithAnnotations() {
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})
});
};
var AnnotationCreation = exports.AnnotationCreation = function AnnotationCreation() {
var sdk = (0, _makeDefaultSDK["default"])();
var chart = sdk.makeChart({
getChart: _getChart,
attributes: {
contextScope: ["system.load"],
hasCorrelation: true
}
});
sdk.appendChild(chart);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
style: {
marginBottom: "10px",
fontSize: "14px",
color: "#666"
},
children: "Click anywhere on the chart to create a new annotation"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "315px"
})]
})
});
};
var CrossChartAnnotationSync = exports.CrossChartAnnotationSync = function CrossChartAnnotationSync() {
var sdk = (0, _makeDefaultSDK["default"])();
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__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: _netdataUi.DefaultTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
column: true,
gap: 2,
children: charts.map(function (chart, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h4", {
style: {
margin: "10px 0 5px",
fontSize: "12px",
color: "#888"
},
children: ["Chart ", index + 1, " (ID: ", chart.getAttribute("id"), ")"]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line["default"], {
chart: chart,
height: "200px"
})]
}, chart.getAttribute("id"));
})
})]
})
});
};
var _default = exports["default"] = {
title: "Charts",
component: Simple
};