@netdata/charts/dist/chartLibraries/gauge/gauge.stories.js

Netdata frontend SDK and chart utilities

"use strict";

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.WithGradient = exports.ThinArc = exports.GradientWithThinArc = exports.Default = exports.DarkMode = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = require("styled-components");
var _netdataUi = require("@netdata/netdata-ui");
var _gauge = _interopRequireDefault(require("../../components/gauge"));
var _makeMockPayload = _interopRequireDefault(require("../../helpers/makeMockPayload"));
var _makeDefaultSDK = _interopRequireDefault(require("../../makeDefaultSDK"));
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); }
var getChart = (0, _makeMockPayload["default"])(_systemLoadLine["default"][0], {
  delay: 600
});
var Default = exports.Default = function Default() {
  var chart = (0, _react.useMemo)(function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    var c = sdk.makeChart({
      getChart: getChart,
      attributes: {
        contextScope: ["system.load"],
        chartLibrary: "gauge"
      }
    });
    sdk.appendChild(c);
    return c;
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
    theme: _netdataUi.DefaultTheme,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
      width: "300px",
      height: "200px",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_gauge["default"], {
        chart: chart
      })
    })
  });
};
var WithGradient = exports.WithGradient = function WithGradient() {
  var chart = (0, _react.useMemo)(function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    var c = sdk.makeChart({
      getChart: getChart,
      attributes: {
        contextScope: ["system.load"],
        chartLibrary: "gauge",
        gaugeGradient: true
      }
    });
    sdk.appendChild(c);
    return c;
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
    theme: _netdataUi.DefaultTheme,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
      width: "300px",
      height: "200px",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_gauge["default"], {
        chart: chart
      })
    })
  });
};
var GradientWithThinArc = exports.GradientWithThinArc = function GradientWithThinArc() {
  var chart = (0, _react.useMemo)(function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    var c = sdk.makeChart({
      getChart: getChart,
      attributes: {
        contextScope: ["system.load"],
        chartLibrary: "gauge",
        gaugeGradient: true,
        gaugeLineWidth: 0.05
      }
    });
    sdk.appendChild(c);
    return c;
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
    theme: _netdataUi.DefaultTheme,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
      width: "300px",
      height: "200px",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_gauge["default"], {
        chart: chart
      })
    })
  });
};
var ThinArc = exports.ThinArc = function ThinArc() {
  var chart = (0, _react.useMemo)(function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    var c = sdk.makeChart({
      getChart: getChart,
      attributes: {
        contextScope: ["system.load"],
        chartLibrary: "gauge",
        gaugeLineWidth: 0.05,
        gaugeGradient: true
      }
    });
    sdk.appendChild(c);
    return c;
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
    theme: _netdataUi.DefaultTheme,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
      width: "300px",
      height: "200px",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_gauge["default"], {
        chart: chart
      })
    })
  });
};
var DarkMode = exports.DarkMode = function DarkMode() {
  var chart = (0, _react.useMemo)(function () {
    var sdk = (0, _makeDefaultSDK["default"])({
      attributes: {
        theme: "dark"
      }
    });
    var c = sdk.makeChart({
      getChart: getChart,
      attributes: {
        contextScope: ["system.load"],
        chartLibrary: "gauge",
        gaugeGradient: true
      }
    });
    sdk.appendChild(c);
    return c;
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
    theme: _netdataUi.DarkTheme,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
      background: "mainBackground",
      width: "300px",
      height: "200px",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_gauge["default"], {
        chart: chart
      })
    })
  });
};
DarkMode.parameters = {
  netdataTheme: "dark"
};
var _default = exports["default"] = {
  title: "Charts/Gauge",
  component: Default
};