@netdata/charts/dist/components/drawer/correlate/controls.js

Netdata frontend SDK and chart utilities

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _netdataUi = require("@netdata/netdata-ui");
var _tooltip = _interopRequireDefault(require("../../tooltip"));
var _provider = require("../../provider");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var methodOptions = [{
  label: "Volume",
  value: "volume"
}, {
  label: "KS2",
  value: "ks2"
}];
var aggregationOptions = [{
  label: "Average",
  value: "average"
}, {
  label: "Median",
  value: "median"
}, {
  label: "Min",
  value: "min"
}, {
  label: "Max",
  value: "max"
}, {
  label: "StdDev",
  value: "stddev"
}];
var dataTypeOptions = [{
  label: "Metrics",
  value: ""
}, {
  label: "Anomaly Rate",
  value: "anomaly-bit"
}];
var Controls = function Controls() {
  var chart = (0, _provider.useChart)();
  var method = (0, _provider.useAttributeValue)("correlate.method", "volume");
  var aggregation = (0, _provider.useAttributeValue)("correlate.aggregation", "average");
  var dataType = (0, _provider.useAttributeValue)("correlate.dataType", "");
  var threshold = (0, _provider.useAttributeValue)("correlate.threshold", 0.01);
  var selectedMethod = methodOptions.find(function (opt) {
    return opt.value === method;
  });
  var selectedAggregation = aggregationOptions.find(function (opt) {
    return opt.value === aggregation;
  });
  var selectedDataType = dataTypeOptions.find(function (opt) {
    return opt.value === dataType;
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
    column: true,
    gap: 2,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
      gap: 2,
      alignItems: "center",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "Algorithm used to calculate correlation strength.\\nVolume: Percentage change between periods\\nKS2: Statistical distribution comparison",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
          children: "Method:"
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Select, {
        options: methodOptions,
        value: selectedMethod,
        onChange: function onChange(_ref) {
          var value = _ref.value;
          return chart.updateAttribute("correlate.method", value);
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "How to aggregate data points within the time period.\\nAffects how metrics are summarized before correlation calculation.",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
          children: "Aggregation:"
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Select, {
        options: aggregationOptions,
        value: selectedAggregation,
        onChange: function onChange(_ref2) {
          var value = _ref2.value;
          return chart.updateAttribute("correlate.aggregation", value);
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "Type of data to correlate.\\nMetrics: Actual metric values\\nAnomaly Rate: Anomaly detection patterns",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
          children: "Data:"
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Select, {
        options: dataTypeOptions,
        value: selectedDataType,
        onChange: function onChange(_ref3) {
          var value = _ref3.value;
          return chart.updateAttribute("correlate.dataType", value);
        }
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
      gap: 2,
      alignItems: "center",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "Filter to show only metrics with correlation weight below this threshold.\\nLower threshold = show only strongest correlations.\\n1% shows only metrics with <1% weight (very strong correlations).",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
          children: "Show top:"
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
        flex: 1,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
          content: "Currently showing metrics with correlation weight < ".concat((threshold * 100).toFixed(0), "%"),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.InputRange, {
            min: 0.01,
            max: 1,
            step: 0.01,
            value: threshold,
            onChange: function onChange(e) {
              return chart.updateAttribute("correlate.threshold", parseFloat(e.target.value));
            }
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip["default"], {
        content: "Showing metrics with correlation weight < ".concat((threshold * 100).toFixed(0), "%"),
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextSmall, {
          children: [(threshold * 100).toFixed(0), "%"]
        })
      })]
    })]
  });
};
var _default = exports["default"] = Controls;