@netdata/charts
Version:
Netdata frontend SDK and chart utilities
149 lines • 3.77 kB
JavaScript
import React, { useMemo } from "react";
import { ThemeProvider } from "styled-components";
import { Flex, DefaultTheme, DarkTheme } from "@netdata/netdata-ui";
import GaugeComponent from "../../components/gauge";
import makeMockPayload from "../../helpers/makeMockPayload";
import makeDefaultSDK from "../../makeDefaultSDK";
import systemLoadLine from "../../../fixtures/systemLoadLine";
import { jsx as _jsx } from "react/jsx-runtime";
var getChart = makeMockPayload(systemLoadLine[0], {
delay: 600
});
export var Default = function Default() {
var chart = useMemo(function () {
var sdk = makeDefaultSDK();
var c = sdk.makeChart({
getChart: getChart,
attributes: {
contextScope: ["system.load"],
chartLibrary: "gauge"
}
});
sdk.appendChild(c);
return c;
}, []);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Flex, {
width: "300px",
height: "200px",
children: /*#__PURE__*/_jsx(GaugeComponent, {
chart: chart
})
})
});
};
export var WithGradient = function WithGradient() {
var chart = useMemo(function () {
var sdk = makeDefaultSDK();
var c = sdk.makeChart({
getChart: getChart,
attributes: {
contextScope: ["system.load"],
chartLibrary: "gauge",
gaugeGradient: true
}
});
sdk.appendChild(c);
return c;
}, []);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Flex, {
width: "300px",
height: "200px",
children: /*#__PURE__*/_jsx(GaugeComponent, {
chart: chart
})
})
});
};
export var GradientWithThinArc = function GradientWithThinArc() {
var chart = useMemo(function () {
var sdk = makeDefaultSDK();
var c = sdk.makeChart({
getChart: getChart,
attributes: {
contextScope: ["system.load"],
chartLibrary: "gauge",
gaugeGradient: true,
gaugeLineWidth: 0.05
}
});
sdk.appendChild(c);
return c;
}, []);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Flex, {
width: "300px",
height: "200px",
children: /*#__PURE__*/_jsx(GaugeComponent, {
chart: chart
})
})
});
};
export var ThinArc = function ThinArc() {
var chart = useMemo(function () {
var sdk = makeDefaultSDK();
var c = sdk.makeChart({
getChart: getChart,
attributes: {
contextScope: ["system.load"],
chartLibrary: "gauge",
gaugeLineWidth: 0.05,
gaugeGradient: true
}
});
sdk.appendChild(c);
return c;
}, []);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DefaultTheme,
children: /*#__PURE__*/_jsx(Flex, {
width: "300px",
height: "200px",
children: /*#__PURE__*/_jsx(GaugeComponent, {
chart: chart
})
})
});
};
export var DarkMode = function DarkMode() {
var chart = useMemo(function () {
var sdk = makeDefaultSDK({
attributes: {
theme: "dark"
}
});
var c = sdk.makeChart({
getChart: getChart,
attributes: {
contextScope: ["system.load"],
chartLibrary: "gauge",
gaugeGradient: true
}
});
sdk.appendChild(c);
return c;
}, []);
return /*#__PURE__*/_jsx(ThemeProvider, {
theme: DarkTheme,
children: /*#__PURE__*/_jsx(Flex, {
background: "mainBackground",
width: "300px",
height: "200px",
children: /*#__PURE__*/_jsx(GaugeComponent, {
chart: chart
})
})
});
};
DarkMode.parameters = {
netdataTheme: "dark"
};
export default {
title: "Charts/Gauge",
component: Default
};