@netdata/charts/dist/es6/components/drawer/compare/index.js

Netdata frontend SDK and chart utilities

function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import React, { useState } from "react";
import { Flex, TextSmall, TextMicro, Button, IconButton, getSizeBy } from "@netdata/netdata-ui";
import styled from "styled-components";
import Tooltip from "../../tooltip";
import useData from "./useData";
import { useChart, useAttributeValue } from "../../provider";
import ChangeIndicator from "./changeIndicator";
import CustomPeriodForm from "./customPeriodForm";
import StatValue from "./statValue";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var GridContainer = styled(Flex).withConfig({
  displayName: "compare__GridContainer",
  componentId: "sc-1c1r80o-0"
})(["display:grid;gap:", ";grid-template-columns:repeat(auto-fill,minmax(", ",1fr));"], getSizeBy(1.5), getSizeBy(32.5));
var formatDateRange = function formatDateRange(chart, after, before) {
  var afterDate = new Date(after * 1000);
  var beforeDate = new Date(before * 1000);
  return "".concat(chart.formatDate(afterDate), " ").concat(chart.formatTime(afterDate), " \u2192 ").concat(chart.formatDate(beforeDate), " ").concat(chart.formatTime(beforeDate));
};
var StatRow = function StatRow(_ref) {
  var label = _ref.label,
    value = _ref.value,
    change = _ref.change,
    _ref$valueKey = _ref.valueKey,
    valueKey = _ref$valueKey === void 0 ? "value" : _ref$valueKey,
    tab = _ref.tab,
    tooltip = _ref.tooltip,
    prominent = _ref.prominent;
  if (prominent) {
    return /*#__PURE__*/_jsx(Tooltip, {
      content: tooltip,
      children: /*#__PURE__*/_jsxs(Flex, {
        column: true,
        gap: 1,
        flex: "1 1 0",
        children: [/*#__PURE__*/_jsx(TextMicro, {
          color: "textLite",
          children: label
        }), /*#__PURE__*/_jsx(StatValue, {
          value: value,
          valueKey: valueKey,
          prominent: true
        }), /*#__PURE__*/_jsx(ChangeIndicator, {
          change: change,
          tab: tab
        })]
      })
    });
  }
  return /*#__PURE__*/_jsxs(Flex, {
    justifyContent: "between",
    alignItems: "center",
    children: [/*#__PURE__*/_jsx(Tooltip, {
      content: tooltip,
      children: /*#__PURE__*/_jsx(TextMicro, {
        color: "textLite",
        children: label
      })
    }), /*#__PURE__*/_jsxs(Flex, {
      alignItems: "center",
      gap: 1,
      flex: "1 1 auto",
      justifyContent: "end",
      children: [/*#__PURE__*/_jsx(StatValue, {
        value: value,
        valueKey: valueKey,
        justifyContent: "end"
      }), /*#__PURE__*/_jsx(ChangeIndicator, {
        change: change,
        tab: tab
      })]
    })]
  });
};
var basicStats = [{
  key: "min",
  label: "Min",
  tooltip: "Minimum value in the time period"
}, {
  key: "avg",
  label: "Avg",
  tooltip: "Average (mean) value in the time period"
}, {
  key: "max",
  label: "Max",
  tooltip: "Maximum value in the time period"
}];
var advancedStats = [{
  key: "median",
  label: "Median",
  tooltip: "Middle value when sorted (50th percentile)"
}, {
  key: "stddev",
  label: "StdDev",
  tooltip: "Standard deviation - measures data spread around the mean"
}, {
  key: "p95",
  label: "P95",
  tooltip: "95th percentile - 95% of values are below this"
}, {
  key: "range",
  label: "Range",
  tooltip: "Difference between maximum and minimum values"
}];
var volumeStat = {
  key: "volume",
  label: "Volume",
  tooltip: "Total accumulated value over the time period (rate integrated over time)"
};
var isRateUnit = function isRateUnit(units) {
  var unit = Array.isArray(units) ? units[0] : units;
  return typeof unit === "string" && unit.endsWith("/s");
};
var ComparisonCard = function ComparisonCard(_ref2) {
  var _period$changes3;
  var period = _ref2.period,
    showAdvanced = _ref2.showAdvanced,
    showVolume = _ref2.showVolume,
    tab = _ref2.tab;
  var chart = useChart();
  var dateRange = formatDateRange(chart, period.after, period.before);
  var hasData = period.payload && period.stats && !period.error;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showEditForm = _useState2[0],
    setShowEditForm = _useState2[1];
  var updatePeriod = function updatePeriod(updated) {
    var currentCustomPeriods = chart.getAttribute("customPeriods", []);
    var updatedPeriods = currentCustomPeriods.map(function (p) {
      return p.id === updated.id ? updated : p;
    });
    chart.updateAttribute("customPeriods", updatedPeriods);
    setShowEditForm(false);
  };
  return /*#__PURE__*/_jsxs(Flex, {
    column: true,
    gap: 2,
    padding: [3],
    border: "all",
    round: true,
    children: [/*#__PURE__*/_jsxs(Flex, {
      alignItems: "center",
      gap: 1,
      justifyContent: "between",
      children: [/*#__PURE__*/_jsx(Tooltip, {
        content: dateRange,
        children: /*#__PURE__*/_jsx(TextSmall, {
          strong: true,
          children: period.label
        })
      }), !period.isBase && /*#__PURE__*/_jsx(IconButton, {
        icon: "pencilOutline",
        width: "12px",
        height: "12px",
        tooltip: "Edit comparison period",
        onClick: function onClick() {
          return setShowEditForm(true);
        },
        "data-testid": "period-edit",
        "data-track": chart.track("period-edit")
      })]
    }), !hasData ? /*#__PURE__*/_jsx(Flex, {
      column: true,
      gap: 1,
      children: /*#__PURE__*/_jsx(TextMicro, {
        color: "textDescription",
        children: period.error ? "Error loading data" : "No data available for the selected time range"
      })
    }) : showEditForm ? /*#__PURE__*/_jsx(CustomPeriodForm, {
      initialValues: period,
      onSubmit: updatePeriod,
      onCancel: function onCancel() {
        return setShowEditForm(false);
      }
    }) : /*#__PURE__*/_jsxs(Flex, {
      column: true,
      gap: 2,
      children: [/*#__PURE__*/_jsx(Flex, {
        gap: 2,
        children: basicStats.map(function (stat) {
          var _period$changes;
          return /*#__PURE__*/_jsx(StatRow, {
            label: stat.label,
            value: period.stats[stat.key],
            change: (_period$changes = period.changes) === null || _period$changes === void 0 ? void 0 : _period$changes[stat.key],
            valueKey: stat.key,
            tab: tab,
            tooltip: stat.tooltip,
            prominent: true
          }, stat.key);
        })
      }), showAdvanced && /*#__PURE__*/_jsxs(Flex, {
        column: true,
        gap: 1,
        padding: [2, 0, 0],
        border: {
          side: "top",
          color: "separator"
        },
        children: [advancedStats.map(function (stat) {
          var _period$changes2;
          return /*#__PURE__*/_jsx(StatRow, {
            label: stat.label,
            value: period.stats[stat.key],
            change: (_period$changes2 = period.changes) === null || _period$changes2 === void 0 ? void 0 : _period$changes2[stat.key],
            valueKey: stat.key,
            tab: tab,
            tooltip: stat.tooltip
          }, stat.key);
        }), showVolume && /*#__PURE__*/_jsx(StatRow, {
          label: volumeStat.label,
          value: period.stats.volume,
          change: (_period$changes3 = period.changes) === null || _period$changes3 === void 0 ? void 0 : _period$changes3.volume,
          valueKey: "volume",
          tab: tab,
          tooltip: volumeStat.tooltip
        })]
      })]
    })]
  });
};
var Compare = function Compare() {
  var chart = useChart();
  var _useData = useData(),
    periods = _useData.periods,
    error = _useData.error;
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    showCustomForm = _useState4[0],
    setShowCustomForm = _useState4[1];
  var showAllStats = useAttributeValue("drawer.showAdvancedStats", false);
  var tab = useAttributeValue("drawer.tab", "window");
  var units = useAttributeValue("units");
  var showVolume = isRateUnit(units);
  var addCustomPeriod = function addCustomPeriod(customPeriod) {
    var currentCustomPeriods = chart.getAttribute("customPeriods", []);
    chart.updateAttribute("customPeriods", [].concat(_toConsumableArray(currentCustomPeriods), [customPeriod]));
    setShowCustomForm(false);
  };
  if (error) {
    return /*#__PURE__*/_jsx(Flex, {
      column: true,
      gap: 3,
      children: /*#__PURE__*/_jsxs(TextMicro, {
        color: "error",
        children: ["Error: ", error]
      })
    });
  }
  return /*#__PURE__*/_jsx(Flex, {
    column: true,
    gap: 3,
    children: /*#__PURE__*/_jsxs(GridContainer, {
      "data-testid": "comparison-grid",
      children: [periods.map(function (period) {
        return /*#__PURE__*/_jsx(ComparisonCard, {
          period: period,
          showAdvanced: showAllStats,
          showVolume: showVolume,
          tab: tab
        }, period.id);
      }), !showCustomForm ? /*#__PURE__*/_jsxs(Flex, {
        column: true,
        gap: 2,
        padding: [3],
        border: {
          side: "all",
          type: "dashed"
        },
        round: true,
        alignItems: "center",
        justifyContent: "center",
        height: {
          min: 36
        },
        "data-testid": "custom-period-card",
        children: [/*#__PURE__*/_jsx(TextSmall, {
          children: "Custom"
        }), /*#__PURE__*/_jsx(Tooltip, {
          content: "Add a custom time period for comparison - Choose any specific date range to compare with the current view",
          children: /*#__PURE__*/_jsx(Button, {
            label: "Select a timeframe",
            onClick: function onClick() {
              return setShowCustomForm(true);
            }
          })
        })]
      }) : /*#__PURE__*/_jsx(CustomPeriodForm, {
        onSubmit: addCustomPeriod,
        onCancel: function onCancel() {
          return setShowCustomForm(false);
        }
      })]
    })
  });
};
export default Compare;