@netdata/charts
Version:
Netdata frontend SDK and chart utilities
125 lines • 4.41 kB
JavaScript
import React from "react";
import { Flex, TextSmall, Select, InputRange } from "@netdata/netdata-ui";
import Tooltip from "../../tooltip";
import { useChart, useAttributeValue } from "../../provider";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 = useChart();
var method = useAttributeValue("correlate.method", "volume");
var aggregation = useAttributeValue("correlate.aggregation", "average");
var dataType = useAttributeValue("correlate.dataType", "");
var threshold = 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__*/_jsxs(Flex, {
column: true,
gap: 2,
children: [/*#__PURE__*/_jsxs(Flex, {
gap: 2,
alignItems: "center",
children: [/*#__PURE__*/_jsx(Tooltip, {
content: "Algorithm used to calculate correlation strength.\\nVolume: Percentage change between periods\\nKS2: Statistical distribution comparison",
children: /*#__PURE__*/_jsx(TextSmall, {
children: "Method:"
})
}), /*#__PURE__*/_jsx(Select, {
options: methodOptions,
value: selectedMethod,
onChange: function onChange(_ref) {
var value = _ref.value;
return chart.updateAttribute("correlate.method", value);
}
}), /*#__PURE__*/_jsx(Tooltip, {
content: "How to aggregate data points within the time period.\\nAffects how metrics are summarized before correlation calculation.",
children: /*#__PURE__*/_jsx(TextSmall, {
children: "Aggregation:"
})
}), /*#__PURE__*/_jsx(Select, {
options: aggregationOptions,
value: selectedAggregation,
onChange: function onChange(_ref2) {
var value = _ref2.value;
return chart.updateAttribute("correlate.aggregation", value);
}
}), /*#__PURE__*/_jsx(Tooltip, {
content: "Type of data to correlate.\\nMetrics: Actual metric values\\nAnomaly Rate: Anomaly detection patterns",
children: /*#__PURE__*/_jsx(TextSmall, {
children: "Data:"
})
}), /*#__PURE__*/_jsx(Select, {
options: dataTypeOptions,
value: selectedDataType,
onChange: function onChange(_ref3) {
var value = _ref3.value;
return chart.updateAttribute("correlate.dataType", value);
}
})]
}), /*#__PURE__*/_jsxs(Flex, {
gap: 2,
alignItems: "center",
children: [/*#__PURE__*/_jsx(Tooltip, {
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__*/_jsx(TextSmall, {
children: "Show top:"
})
}), /*#__PURE__*/_jsx(Flex, {
flex: 1,
children: /*#__PURE__*/_jsx(Tooltip, {
content: "Currently showing metrics with correlation weight < ".concat((threshold * 100).toFixed(0), "%"),
children: /*#__PURE__*/_jsx(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__*/_jsx(Tooltip, {
content: "Showing metrics with correlation weight < ".concat((threshold * 100).toFixed(0), "%"),
children: /*#__PURE__*/_jsxs(TextSmall, {
children: [(threshold * 100).toFixed(0), "%"]
})
})]
})]
});
};
export default Controls;