@netdata/charts/dist/components/headlessChart/useHeadlessChart.js

Netdata frontend SDK and chart utilities

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useHeadlessChart = exports["default"] = void 0;
var _react = require("react");
var _provider = require("../provider");
function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var useHeadlessChart = exports.useHeadlessChart = function useHeadlessChart() {
  var chart = (0, _provider.useChart)();
  var payload = (0, _provider.usePayload)();
  var dimensionIds = (0, _provider.useDimensionIds)();
  var hover = (0, _provider.useAttributeValue)("hoverX");
  var helpers = (0, _react.useMemo)(function () {
    return {
      updateAttribute: chart.updateAttribute,
      getAttribute: chart.getAttribute,
      getDimensionIds: chart.getDimensionIds,
      getVisibleDimensionIds: chart.getVisibleDimensionIds,
      getDimensionValue: chart.getDimensionValue,
      getClosestRow: chart.getClosestRow,
      formatTime: chart.formatTime,
      formatDate: chart.formatDate,
      getConvertedValue: chart.getConvertedValue,
      selectDimensionColor: chart.selectDimensionColor,
      isDimensionVisible: chart.isDimensionVisible,
      focus: chart.focus,
      blur: chart.blur,
      getId: chart.getId,
      trigger: chart.trigger,
      on: chart.on,
      off: chart.off,
      onAttributeChange: chart.onAttributeChange,
      onceAttributeChange: chart.onceAttributeChange
    };
  }, [chart]);
  var data = (0, _react.useMemo)(function () {
    var _payload$data = payload.data,
      rawData = _payload$data === void 0 ? [] : _payload$data;
    if (!rawData.length) return [];
    var visibleDimensionIds = chart.getVisibleDimensionIds();
    var currentRowIndex = hover ? chart.getClosestRow(hover[0]) : rawData.length - 1;
    return rawData.map(function (row, rowIndex) {
      var _row = _toArray(row),
        timestamp = _row[0],
        values = _arrayLikeToArray(_row).slice(1);
      var isCurrentRow = rowIndex === currentRowIndex;
      var dimensions = visibleDimensionIds.map(function (dimensionId) {
        var value = chart.getDimensionValue(dimensionId, rowIndex);
        return {
          id: dimensionId,
          value: value,
          convertedValue: chart.getConvertedValue(value, {
            dimensionId: dimensionId
          }),
          color: chart.selectDimensionColor(dimensionId),
          visible: chart.isDimensionVisible(dimensionId)
        };
      });
      return {
        timestamp: timestamp,
        formattedTime: chart.formatTime(timestamp),
        formattedDate: chart.formatDate(timestamp),
        values: values,
        dimensions: dimensions,
        isCurrentRow: isCurrentRow,
        rowIndex: rowIndex
      };
    });
  }, [payload, hover, chart]);
  var currentRow = (0, _react.useMemo)(function () {
    if (!data.length) return null;
    return data.find(function (row) {
      return row.isCurrentRow;
    }) || data[data.length - 1];
  }, [data]);
  var loading = (0, _provider.useIsFetching)();
  var empty = (0, _provider.useEmpty)();
  var loaded = (0, _provider.useAttributeValue)("loaded");
  var error = (0, _provider.useAttributeValue)("error");
  var showingInfo = (0, _provider.useAttributeValue)("showingInfo");
  var focused = (0, _provider.useAttributeValue)("focused");
  var state = (0, _react.useMemo)(function () {
    return {
      loading: loading,
      empty: empty,
      loaded: loaded,
      error: error,
      showingInfo: showingInfo,
      focused: focused
    };
  }, [loading, empty, loaded, error, showingInfo, focused]);
  return {
    chart: chart,
    data: data,
    currentRow: currentRow,
    dimensionIds: dimensionIds,
    hover: hover,
    helpers: helpers,
    state: state,
    attributes: chart.getAttributes()
  };
};
var _default = exports["default"] = useHeadlessChart;