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

Netdata frontend SDK and chart utilities

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); }
import React, { memo, useMemo } from "react";
import { Menu } from "@netdata/netdata-ui";
import lineChart from "@netdata/netdata-ui/dist/components/icon/assets/line_chart2.svg";
import stackedChart from "@netdata/netdata-ui/dist/components/icon/assets/stacked_chart.svg";
import areaChart from "@netdata/netdata-ui/dist/components/icon/assets/area_chart.svg";
import barChart from "@netdata/netdata-ui/dist/components/icon/assets/bar_chart.svg";
import stackedBarChart from "@netdata/netdata-ui/dist/components/icon/assets/stacked_bar_chart.svg";
import heatmapChart from "@netdata/netdata-ui/dist/components/icon/assets/heatmap_chart.svg";
import barsChart from "@netdata/netdata-ui/dist/components/icon/assets/chart_bars.svg";
import easypieChart from "@netdata/netdata-ui/dist/components/icon/assets/chart_circle.svg";
import gaugeChart from "@netdata/netdata-ui/dist/components/icon/assets/chart_gauge.svg";
import d3pieChart from "@netdata/netdata-ui/dist/components/icon/assets/chart_pie.svg";
import valueChart from "@netdata/netdata-ui/dist/components/icon/assets/value.svg";
import tableChart from "@netdata/netdata-ui/dist/components/icon/assets/chart_bars.svg";
import groupBoxesChart from "@netdata/netdata-ui/dist/components/icon/assets/container.svg";
import Icon, { Button } from "../icon";
import { useChart, useAttributeValue } from "../provider";
import { jsx as _jsx } from "react/jsx-runtime";
var iconProps = {
  color: "textLite",
  margin: [0, 2, 0, 0],
  size: "14px"
};
var useItems = function useItems(chart) {
  return useMemo(function () {
    return [{
      justDesc: true,
      label: "Timeseries"
    }, {
      value: "line",
      label: "Line",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: lineChart
      }, iconProps)),
      svg: lineChart,
      "data-track": chart.track("chartType-line")
    }, {
      value: "stacked",
      label: "Stacked",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: stackedChart
      }, iconProps)),
      svg: stackedChart,
      "data-track": chart.track("chartType-stacked")
    }, {
      value: "area",
      label: "Area",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: areaChart
      }, iconProps)),
      svg: areaChart,
      "data-track": chart.track("chartType-area")
    }, {
      value: "stackedBar",
      label: "Stacked Bar",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: stackedBarChart
      }, iconProps)),
      svg: stackedBarChart,
      "data-track": chart.track("chartType-stackedBar")
    }, {
      value: "multiBar",
      label: "Multi Column",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: barChart
      }, iconProps)),
      svg: barChart,
      "data-track": chart.track("chartType-multiBar")
    },
    // {
    //   value: "table",
    //   label: "Table",
    //   icon: <Icon svg={tableChart} {...iconProps} />,
    //   svg: tableChart,
    //   "data-track": chart.track("chartType-tableBar"),
    // },
    {
      value: "heatmap",
      label: "Heatmap",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: heatmapChart
      }, iconProps)),
      svg: heatmapChart,
      "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__*/_jsx(Icon, _objectSpread({
        svg: barsChart
      }, iconProps)),
      svg: barsChart,
      "data-track": chart.track("chartType-bars")
    }, "easypiechart" in chart.sdk.ui && {
      value: "easypiechart",
      label: "Circle",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: easypieChart
      }, iconProps)),
      svg: easypieChart,
      "data-track": chart.track("chartType-pie")
    }, "gauge" in chart.sdk.ui && {
      value: "gauge",
      label: "Gauge",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: gaugeChart
      }, iconProps)),
      svg: gaugeChart,
      "data-track": chart.track("chartType-gauge")
    }, "d3pie" in chart.sdk.ui && {
      value: "d3pie",
      label: "Pie",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: d3pieChart
      }, iconProps)),
      svg: d3pieChart,
      "data-track": chart.track("chartType-d3pie")
    }, "number" in chart.sdk.ui && {
      value: "number",
      label: "Value",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: valueChart
      }, iconProps)),
      svg: valueChart,
      "data-track": chart.track("chartType-value")
    }, "groupBoxes" in chart.sdk.ui && {
      value: "groupBoxes",
      label: "Group boxes",
      icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
        svg: groupBoxesChart
      }, iconProps)),
      svg: groupBoxesChart,
      "data-track": chart.track("chartType-groupBoxes")
    }].filter(Boolean);
  }, [chart, chart.getHeatmapType()]);
};
var ChartType = function ChartType(_ref) {
  var disabled = _ref.disabled;
  var chart = useChart();
  var chartLibrary = useAttributeValue("chartLibrary") || "dygraph";
  var chartType = 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__*/_jsx(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__*/_jsx(Button, {
      icon: /*#__PURE__*/_jsx(Icon, {
        svg: svg,
        size: "16px"
      }),
      title: label,
      disabled: disabled,
      "data-testid": "chartHeaderToolbox-chartType"
    })
  });
};
export default /*#__PURE__*/memo(ChartType);