@netdata/charts/dist/components/toolbox/chartType.js

Netdata frontend SDK and chart utilities

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _netdataUi = require("@netdata/netdata-ui");
var _line_chart = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/line_chart2.svg"));
var _stacked_chart = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/stacked_chart.svg"));
var _area_chart = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/area_chart.svg"));
var _bar_chart = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/bar_chart.svg"));
var _stacked_bar_chart = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/stacked_bar_chart.svg"));
var _heatmap_chart = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/heatmap_chart.svg"));
var _chart_bars = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/chart_bars.svg"));
var _chart_circle = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/chart_circle.svg"));
var _chart_gauge = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/chart_gauge.svg"));
var _chart_pie = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/chart_pie.svg"));
var _value = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/value.svg"));
var _container = _interopRequireDefault(require("@netdata/netdata-ui/dist/components/icon/assets/container.svg"));
var _icon = _interopRequireWildcard(require("../icon"));
var _provider = require("../provider");
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 _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); }
var iconProps = {
  color: "textLite",
  margin: [0, 2, 0, 0],
  size: "14px"
};
var useItems = function useItems(chart) {
  return (0, _react.useMemo)(function () {
    return [{
      justDesc: true,
      label: "Timeseries"
    }, {
      value: "line",
      label: "Line",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _line_chart["default"]
      }, iconProps)),
      svg: _line_chart["default"],
      "data-track": chart.track("chartType-line")
    }, {
      value: "stacked",
      label: "Stacked",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _stacked_chart["default"]
      }, iconProps)),
      svg: _stacked_chart["default"],
      "data-track": chart.track("chartType-stacked")
    }, {
      value: "area",
      label: "Area",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _area_chart["default"]
      }, iconProps)),
      svg: _area_chart["default"],
      "data-track": chart.track("chartType-area")
    }, {
      value: "stackedBar",
      label: "Stacked Bar",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _stacked_bar_chart["default"]
      }, iconProps)),
      svg: _stacked_bar_chart["default"],
      "data-track": chart.track("chartType-stackedBar")
    }, {
      value: "multiBar",
      label: "Multi Column",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _bar_chart["default"]
      }, iconProps)),
      svg: _bar_chart["default"],
      "data-track": chart.track("chartType-multiBar")
    }, {
      value: "table",
      label: "Table",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _chart_bars["default"]
      }, iconProps)),
      svg: _chart_bars["default"],
      "data-track": chart.track("chartType-tableChart")
    }, {
      value: "heatmap",
      label: "Heatmap",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _heatmap_chart["default"]
      }, iconProps)),
      svg: _heatmap_chart["default"],
      "data-track": chart.track("chartType-heatmap"),
      disabled: chart.getHeatmapType() === "disabled"
    }, {
      justDesc: true,
      label: "Graphs"
    }, "bars" in chart.sdk.ui && {
      value: "bars",
      label: "Bar",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _chart_bars["default"]
      }, iconProps)),
      svg: _chart_bars["default"],
      "data-track": chart.track("chartType-bars")
    }, "easypiechart" in chart.sdk.ui && {
      value: "easypiechart",
      label: "Circle",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _chart_circle["default"]
      }, iconProps)),
      svg: _chart_circle["default"],
      "data-track": chart.track("chartType-pie")
    }, "gauge" in chart.sdk.ui && {
      value: "gauge",
      label: "Gauge",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _chart_gauge["default"]
      }, iconProps)),
      svg: _chart_gauge["default"],
      "data-track": chart.track("chartType-gauge")
    }, "d3pie" in chart.sdk.ui && {
      value: "d3pie",
      label: "Pie",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _chart_pie["default"]
      }, iconProps)),
      svg: _chart_pie["default"],
      "data-track": chart.track("chartType-d3pie")
    }, "number" in chart.sdk.ui && {
      value: "number",
      label: "Value",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _value["default"]
      }, iconProps)),
      svg: _value["default"],
      "data-track": chart.track("chartType-value")
    }, "groupBoxes" in chart.sdk.ui && {
      value: "groupBoxes",
      label: "Group boxes",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], _objectSpread({
        svg: _container["default"]
      }, iconProps)),
      svg: _container["default"],
      "data-track": chart.track("chartType-groupBoxes")
    }].filter(Boolean);
  }, [chart, chart.getHeatmapType()]);
};
var ChartType = function ChartType(_ref) {
  var disabled = _ref.disabled;
  var chart = (0, _provider.useChart)();
  var chartLibrary = (0, _provider.useAttributeValue)("chartLibrary") || "dygraph";
  var chartType = (0, _provider.useAttributeValue)("chartType") || "line";
  var value = chartLibrary === "dygraph" ? chartType : chartLibrary;
  var items = useItems(chart);
  var _items$find = items.find(function (_ref2) {
      var v = _ref2.value;
      return v === value;
    }),
    label = _items$find.label,
    svg = _items$find.svg;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Menu, {
    value: value,
    items: items,
    dropProps: {
      align: {
        top: "bottom",
        right: "right"
      },
      "data-toolbox": chart.getId()
    },
    dropdownProps: {
      width: "130px"
    },
    onChange: chart.updateChartTypeAttribute,
    "data-track": chart.track("chartType"),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Button, {
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon["default"], {
        svg: svg,
        size: "16px"
      }),
      title: label,
      disabled: disabled,
      "data-testid": "chartHeaderToolbox-chartType"
    })
  });
};
var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(ChartType);