UNPKG

@netdata/charts

Version:

Netdata frontend SDK and chart utilities

1,811 lines 77.9 kB
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); } var _excluded = ["children", "head"], _excluded2 = ["title", "unit", "dimensions"]; 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 _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 _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 _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 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); } function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } import React, { useEffect, useMemo } from "react"; import styled from "styled-components"; import { Button, Flex, TextMicro, TextSmall, getSizeBy } from "@netdata/netdata-ui"; import Status from "./components/status"; import Fullscreen from "./components/toolbox/fullscreen"; import Settings from "./components/toolbox/settings"; import Line from "./components/line"; import { useChart, useForceUpdate, useImmediateListener, withChartProvider } from "./components/provider"; import { unregister } from "./helpers/makeListeners"; import makeMockPayload from "./helpers/makeMockPayload"; import makeDefaultSDK from "./makeDefaultSDK"; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; var now = 1729763970000; var updateEvery = 5; var storyPoints = 97; var spikeSeconds = 15 * 60; var Page = styled(Flex).attrs({ column: true, gap: 4, padding: [4], width: { min: "0px", max: 360, base: "100%" } }).withConfig({ displayName: "unitsScalingstories__Page", componentId: "sc-2d1e5e-0" })(["box-sizing:border-box;"]); var CloudCardSurface = styled(Flex).attrs(function (_ref) { var height = _ref.height; return { column: true, width: { min: "0px", base: "100%" }, height: height, background: "tableRowBg", position: "relative", round: true }; }).withConfig({ displayName: "unitsScalingstories__CloudCardSurface", componentId: "sc-2d1e5e-1" })(["box-sizing:border-box;"]); var DiagnosticsGrid = styled(Flex).attrs({ border: "all", overflow: { horizontal: "auto" }, width: "100%" }).withConfig({ displayName: "unitsScalingstories__DiagnosticsGrid", componentId: "sc-2d1e5e-2" })(["display:grid;grid-template-columns:minmax(", ",1.2fr) repeat(6,minmax(", ",1fr));"], getSizeBy(15), getSizeBy(10)); var DiagnosticCell = function DiagnosticCell(_ref2) { var children = _ref2.children, _ref2$head = _ref2.head, head = _ref2$head === void 0 ? false : _ref2$head, rest = _objectWithoutProperties(_ref2, _excluded); return /*#__PURE__*/_jsx(Flex, _objectSpread(_objectSpread({ alignItems: "center", background: head ? "mainBackground" : "elementBackgroundHover", border: { side: ["right", "bottom"], color: "border" }, padding: [1, 2] }, rest), {}, { children: /*#__PURE__*/_jsx(TextMicro, { strong: head, whiteSpace: "nowrap", children: children }) })); }; var range = function range(values) { return { min: Math.min.apply(Math, _toConsumableArray(values)), max: Math.max.apply(Math, _toConsumableArray(values)), avg: values.reduce(function (sum, value) { return sum + value; }, 0) / values.length }; }; var clamp = function clamp(value) { return Math.min(1, Math.max(0, value)); }; var makeRandom = function makeRandom(seed) { var state = seed >>> 0; return function () { state = state * 1664525 + 1013904223 >>> 0; return state / 0x100000000; }; }; var makeAnomalySeed = function makeAnomalySeed(dimension, index) { return String(dimension.id || dimension.name || index).split("").reduce(function (seed, _char) { return seed * 31 + _char.charCodeAt(0) >>> 0; }, 2166136261 + index); }; var makeRareAnomalyRates = function makeRareAnomalyRates(_ref3) { var points = _ref3.points, seed = _ref3.seed, _ref3$chance = _ref3.chance, chance = _ref3$chance === void 0 ? 0.015 : _ref3$chance, _ref3$min = _ref3.min, min = _ref3$min === void 0 ? 20 : _ref3$min, _ref3$max = _ref3.max, max = _ref3$max === void 0 ? 100 : _ref3$max; var random = makeRandom(seed); var rates = Array.from({ length: points }, function () { return random() < chance ? min + random() * (max - min) : 0; }); if (points && !rates.some(Boolean)) { var index = Math.floor(random() * points); rates[index] = min + random() * (max - min); } return rates; }; var addRareAnomalies = function addRareAnomalies(dimensions) { return dimensions.map(function (dimension, index) { var points = dimension.values.length; var rareRates = makeRareAnomalyRates({ points: points, seed: makeAnomalySeed(dimension, index) }); return _objectSpread(_objectSpread({}, dimension), {}, { anomalyRates: Array.from({ length: points }, function (_, pointIndex) { var _dimension$anomalyRat; var existingRate = ((_dimension$anomalyRat = dimension.anomalyRates) === null || _dimension$anomalyRat === void 0 ? void 0 : _dimension$anomalyRat[pointIndex % dimension.anomalyRates.length]) || 0; return Math.max(existingRate, rareRates[pointIndex]); }) }); }); }; var makeNoisySeries = function makeNoisySeries(_ref4) { var min = _ref4.min, max = _ref4.max, seed = _ref4.seed, _ref4$points = _ref4.points, points = _ref4$points === void 0 ? storyPoints : _ref4$points, _ref4$cycles = _ref4.cycles, cycles = _ref4$cycles === void 0 ? 2.4 : _ref4$cycles, _ref4$jitter = _ref4.jitter, jitter = _ref4$jitter === void 0 ? 0.12 : _ref4$jitter; var random = makeRandom(seed); var span = max - min; var drift = 0.5 + (random() - 0.5) * 0.2; return Array.from({ length: points }, function (_, index) { var progress = points === 1 ? 0 : index / (points - 1); var primary = (Math.sin(progress * Math.PI * 2 * cycles + seed) + 1) / 2; var secondary = (Math.sin(progress * Math.PI * 2 * (cycles * 0.43) + seed * 0.37) + 1) / 2; drift = clamp(drift + (random() - 0.5) * 0.08); var normalized = clamp(primary * 0.52 + secondary * 0.28 + drift * 0.2 + (random() - 0.5) * jitter); return min + normalized * span; }); }; var makeSingleSpikeSeries = function makeSingleSpikeSeries(_ref5) { var min = _ref5.min, max = _ref5.max, spike = _ref5.spike, spikeIndex = _ref5.spikeIndex, points = _ref5.points, seed = _ref5.seed; return makeNoisySeries({ min: min, max: max, seed: seed, points: points, cycles: 4.5, jitter: 0.08 }).map(function (value, index) { return index === spikeIndex ? spike : value; }); }; var makePrecisionPayload = function makePrecisionPayload(_ref6) { var digits = _ref6.digits, min = _ref6.min, max = _ref6.max, seed = _ref6.seed; return makePayload({ title: "".concat(digits, " fractional digits needed on the y-axis"), unit: "%", dimensions: [{ id: "precision-".concat(digits), name: "".concat(digits, " fractional digits"), values: makeNoisySeries({ min: min, max: max, seed: seed, cycles: 3.2, jitter: 0.04 }) }] }); }; var makeDimensionStats = function makeDimensionStats(dimensions) { return dimensions.reduce(function (stats, dimension) { var _range = range(dimension.values), min = _range.min, max = _range.max, avg = _range.avg; var anomalyRates = dimension.anomalyRates || []; stats.min.push(min); stats.max.push(max); stats.avg.push(avg); stats.arp.push(anomalyRates.length ? range(anomalyRates).avg : 0); stats.con.push(0); return stats; }, { min: [], max: [], avg: [], arp: [], con: [] }); }; var makeRows = function makeRows(dimensions) { var every = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : updateEvery; var points = Math.max.apply(Math, _toConsumableArray(dimensions.map(function (dimension) { return dimension.values.length; }))); return Array.from({ length: points }, function (_, index) { return [now - (points - index - 1) * every * 1000].concat(_toConsumableArray(dimensions.map(function (dimension) { var _dimension$anomalyRat2, _dimension$annotation; return [dimension.values[index % dimension.values.length], ((_dimension$anomalyRat2 = dimension.anomalyRates) === null || _dimension$anomalyRat2 === void 0 ? void 0 : _dimension$anomalyRat2[index % dimension.anomalyRates.length]) || 0, ((_dimension$annotation = dimension.annotations) === null || _dimension$annotation === void 0 ? void 0 : _dimension$annotation[index % dimension.annotations.length]) || 0]; }))); }); }; var makePayload = function makePayload(_ref7) { var title = _ref7.title, unit = _ref7.unit, dimensions = _ref7.dimensions, _ref7$updateEvery = _ref7.updateEvery, every = _ref7$updateEvery === void 0 ? updateEvery : _ref7$updateEvery; var dimensionsWithAnomalies = addRareAnomalies(dimensions); var rows = makeRows(dimensionsWithAnomalies, every); var values = dimensionsWithAnomalies.flatMap(function (dimension) { return dimension.values; }); var _range2 = range(values), min = _range2.min, max = _range2.max, avg = _range2.avg; var dimensionStats = makeDimensionStats(dimensionsWithAnomalies); var units = Array.isArray(unit) ? unit : _toConsumableArray(new Set(dimensionsWithAnomalies.map(function (dimension) { return dimension.unit || unit; }))); var ids = dimensionsWithAnomalies.map(function (dimension) { return dimension.id; }); var names = dimensionsWithAnomalies.map(function (dimension) { return dimension.name || dimension.id; }); var dimensionUnits = dimensionsWithAnomalies.map(function (dimension) { return dimension.unit || unit; }); return { api: 2, versions: {}, summary: { nodes: [], contexts: [{ id: "storybook.units_scaling", sts: { min: min, max: max, avg: avg, con: 100 } }], instances: [], dimensions: dimensionsWithAnomalies.map(function (dimension, index) { return { id: dimension.id, pri: index, sts: { min: dimensionStats.min[index], max: dimensionStats.max[index], avg: dimensionStats.avg[index], con: 0 } }; }), labels: [], alerts: [] }, totals: {}, functions: [], result: { labels: ["time"].concat(_toConsumableArray(ids)), point: { value: 0, arp: 1, pa: 2 }, data: rows }, db: { tiers: 1, update_every: every, first_entry: Math.floor(rows[0][0] / 1000), last_entry: Math.floor(rows[rows.length - 1][0] / 1000), units: units, dimensions: { ids: ids, units: dimensionUnits, sts: dimensionStats }, per_tier: [] }, view: { title: title, update_every: every, after: Math.floor(rows[0][0] / 1000), before: Math.floor(rows[rows.length - 1][0] / 1000), units: units, chart_type: "line", dimensions: { grouped_by: ["dimension"], ids: ids, names: names, units: dimensionUnits, priorities: dimensions.map(function (dimension, index) { var _dimension$priority; return (_dimension$priority = dimension.priority) !== null && _dimension$priority !== void 0 ? _dimension$priority : index; }), aggregated: dimensions.map(function () { return 1; }), sts: dimensionStats }, min: min, max: max } }; }; var createChart = function createChart(_ref8) { var id = _ref8.id, payload = _ref8.payload, _ref8$selectedLegendD = _ref8.selectedLegendDimensions, selectedLegendDimensions = _ref8$selectedLegendD === void 0 ? [] : _ref8$selectedLegendD, _ref8$attributes = _ref8.attributes, attributes = _ref8$attributes === void 0 ? {} : _ref8$attributes; var sdk = makeDefaultSDK({ attributes: { contextScope: ["storybook.units_scaling"], containerWidth: 1000 } }); var chart = sdk.makeChart({ getChart: makeMockPayload(payload), attributes: _objectSpread({ id: id, hasToolbox: false, filterToolboxMode: "floating", selectedLegendDimensions: selectedLegendDimensions }, attributes) }); sdk.appendChild(chart); return chart; }; var cloudToolboxElements = [Settings, Fullscreen]; var cloudRootAttributes = { contextScope: ["storybook.units_scaling"], containerWidth: 1180, theme: "dark", designFlavour: "default", filterToolboxMode: "fixed", navigation: "pan", overlays: { proceeded: { type: "proceeded" } }, expandable: false }; var createCloudChart = function createCloudChart(_ref9) { var id = _ref9.id, payload = _ref9.payload, _ref9$selectedLegendD = _ref9.selectedLegendDimensions, selectedLegendDimensions = _ref9$selectedLegendD === void 0 ? [] : _ref9$selectedLegendD, _ref9$rootAttributes = _ref9.rootAttributes, rootAttributes = _ref9$rootAttributes === void 0 ? {} : _ref9$rootAttributes, _ref9$attributes = _ref9.attributes, attributes = _ref9$attributes === void 0 ? {} : _ref9$attributes; var sdk = makeDefaultSDK({ attributes: _objectSpread(_objectSpread({}, cloudRootAttributes), rootAttributes) }); var chart = sdk.makeChart({ getChart: makeMockPayload(payload), attributes: _objectSpread({ id: id, chartLibrary: "dygraph", contextScope: ["storybook.units_scaling"], leftHeaderElements: [Status], toolboxElements: cloudToolboxElements, selectedLegendDimensions: selectedLegendDimensions }, attributes) }); sdk.appendChild(chart); return chart; }; var formatRaw = function formatRaw(value) { return Intl.NumberFormat(undefined, { useGrouping: true, maximumFractionDigits: 12 }).format(value); }; var Diagnostics = withChartProvider(function () { var _chart$getDimensionId, _payload$all; var chart = useChart(); var forceUpdate = useForceUpdate(); useImmediateListener(function () { return unregister(chart.on("payloadChanged", forceUpdate).on("visibleDimensionsChanged", forceUpdate).on("render", forceUpdate), chart.onAttributesChange(["selectedLegendDimensions", "unitsConversionPrefix", "unitsConversionBase", "unitsConversionFractionDigits", "unitsConversionMethod", "unitsByDimension"], forceUpdate)); }, [chart]); var payload = chart.getPayload(); var ids = ((_chart$getDimensionId = chart.getDimensionIds) === null || _chart$getDimensionId === void 0 ? void 0 : _chart$getDimensionId.call(chart)) || []; var lastRow = (_payload$all = payload.all) === null || _payload$all === void 0 ? void 0 : _payload$all[payload.all.length - 1]; if (!ids.length || !lastRow) return null; return /*#__PURE__*/_jsxs(DiagnosticsGrid, { children: [/*#__PURE__*/_jsx(DiagnosticCell, { head: true, children: "dimension" }), /*#__PURE__*/_jsx(DiagnosticCell, { head: true, children: "raw latest" }), /*#__PURE__*/_jsx(DiagnosticCell, { head: true, children: "shown latest" }), /*#__PURE__*/_jsx(DiagnosticCell, { head: true, children: "unit" }), /*#__PURE__*/_jsx(DiagnosticCell, { head: true, children: "range" }), /*#__PURE__*/_jsx(DiagnosticCell, { head: true, children: "prefix/base" }), /*#__PURE__*/_jsx(DiagnosticCell, { head: true, children: "digits" }), ids.map(function (id) { var _payload$byDimension; var raw = chart.getRowDimensionValue(id, lastRow, { allowNull: true, abs: false }); var unitAttributes = chart.getUnitAttributesForValue(raw, { dimensionId: id }); var prefix = unitAttributes.prefix, base = unitAttributes.base, fractionDigits = unitAttributes.fractionDigits; var stats = ((_payload$byDimension = payload.byDimension) === null || _payload$byDimension === void 0 ? void 0 : _payload$byDimension[id]) || {}; var visible = chart.isDimensionVisible(id); return /*#__PURE__*/_jsxs(React.Fragment, { children: [/*#__PURE__*/_jsx(DiagnosticCell, { opacity: visible ? null : "weak", children: chart.getDimensionName(id) || id }), /*#__PURE__*/_jsx(DiagnosticCell, { opacity: visible ? null : "weak", children: formatRaw(raw) }), /*#__PURE__*/_jsx(DiagnosticCell, { opacity: visible ? null : "weak", children: chart.getConvertedValue(raw, { dimensionId: id, unitAttributes: unitAttributes }) }), /*#__PURE__*/_jsx(DiagnosticCell, { opacity: visible ? null : "weak", children: chart.getUnitSign({ dimensionId: id, unitAttributes: unitAttributes }) || "-" }), /*#__PURE__*/_jsxs(DiagnosticCell, { opacity: visible ? null : "weak", children: [formatRaw(stats.min), " to ", formatRaw(stats.max)] }), /*#__PURE__*/_jsxs(DiagnosticCell, { opacity: visible ? null : "weak", children: [prefix || "-", " / ", base || "-"] }), /*#__PURE__*/_jsx(DiagnosticCell, { opacity: visible ? null : "weak", children: fractionDigits })] }, id); })] }); }); var DimensionSelector = withChartProvider(function () { var _chart$getDimensionId2; var chart = useChart(); var forceUpdate = useForceUpdate(); useImmediateListener(function () { return unregister(chart.on("payloadChanged", forceUpdate).on("visibleDimensionsChanged", forceUpdate), chart.onAttributeChange("selectedLegendDimensions", forceUpdate)); }, [chart]); var ids = ((_chart$getDimensionId2 = chart.getDimensionIds) === null || _chart$getDimensionId2 === void 0 ? void 0 : _chart$getDimensionId2.call(chart)) || []; var selected = chart.getAttribute("selectedLegendDimensions"); if (!ids.length) return null; return /*#__PURE__*/_jsxs(Flex, { gap: 1, flexWrap: true, children: [/*#__PURE__*/_jsx(Button, { active: !selected.length, neutral: Boolean(selected.length), label: "all", textTransform: "none", onClick: function onClick() { return chart.updateAttribute("selectedLegendDimensions", []); } }), ids.map(function (id) { var active = selected.length === 1 && selected[0] === id; return /*#__PURE__*/_jsx(Button, { active: active, neutral: !active, label: chart.getDimensionName(id) || id, textTransform: "none", onClick: function onClick() { return chart.updateAttribute("selectedLegendDimensions", [id]); } }, id); })] }); }); var ChartCase = function ChartCase(_ref0) { var id = _ref0.id, title = _ref0.title, purpose = _ref0.purpose, payload = _ref0.payload, selectedLegendDimensions = _ref0.selectedLegendDimensions, attributes = _ref0.attributes; var chart = useMemo(function () { return createChart({ id: id, payload: payload, selectedLegendDimensions: selectedLegendDimensions, attributes: attributes }); }, [id, payload, selectedLegendDimensions, attributes]); useEffect(function () { return function () { return chart.destroy(); }; }, [chart]); return /*#__PURE__*/_jsxs(Flex, { column: true, gap: 2, border: "all", round: true, children: [/*#__PURE__*/_jsxs(Flex, { column: true, gap: 1, padding: [2, 3], background: "mainBackground", border: { side: "bottom", color: "border" }, children: [/*#__PURE__*/_jsx(TextSmall, { color: "text", strong: true, children: title }), /*#__PURE__*/_jsx(TextMicro, { color: "textDescription", children: purpose }), /*#__PURE__*/_jsx(DimensionSelector, { chart: chart })] }), /*#__PURE__*/_jsx(Flex, { padding: [0, 2], children: /*#__PURE__*/_jsx(Line, { chart: chart, height: "260px" }) }), /*#__PURE__*/_jsx(Diagnostics, { chart: chart })] }); }; var CloudChartCase = function CloudChartCase(_ref1) { var id = _ref1.id, title = _ref1.title, purpose = _ref1.purpose, payload = _ref1.payload, selectedLegendDimensions = _ref1.selectedLegendDimensions, rootAttributes = _ref1.rootAttributes, attributes = _ref1.attributes, _ref1$height = _ref1.height, height = _ref1$height === void 0 ? "360px" : _ref1$height, _ref1$lineProps = _ref1.lineProps, lineProps = _ref1$lineProps === void 0 ? {} : _ref1$lineProps; var chart = useMemo(function () { return createCloudChart({ id: id, payload: payload, selectedLegendDimensions: selectedLegendDimensions, rootAttributes: rootAttributes, attributes: attributes }); }, [id, payload, selectedLegendDimensions, rootAttributes, attributes]); useEffect(function () { return function () { return chart.destroy(); }; }, [chart]); return /*#__PURE__*/_jsxs(Flex, { column: true, gap: 2, width: { min: "0px", base: "100%" }, children: [/*#__PURE__*/_jsxs(Flex, { column: true, gap: 1, children: [/*#__PURE__*/_jsx(TextSmall, { color: "text", strong: true, children: title }), /*#__PURE__*/_jsx(TextMicro, { color: "textDescription", children: purpose })] }), /*#__PURE__*/_jsx(CloudCardSurface, { height: height, children: /*#__PURE__*/_jsx(Line, _objectSpread({ chart: chart, height: height, width: "100%" }, lineProps)) })] }); }; var GiB = Math.pow(1024, 3); var MiB = Math.pow(1024, 2); var KiB = 1024; var makeUnitDisplayPayload = function makeUnitDisplayPayload(_ref10) { var title = _ref10.title, unit = _ref10.unit, dimensions = _ref10.dimensions; return makePayload({ title: title, unit: unit, dimensions: dimensions.map(function (_ref11) { var id = _ref11.id, name = _ref11.name, min = _ref11.min, max = _ref11.max, seed = _ref11.seed, _ref11$cycles = _ref11.cycles, cycles = _ref11$cycles === void 0 ? 3.2 : _ref11$cycles, _ref11$jitter = _ref11.jitter, jitter = _ref11$jitter === void 0 ? 0.08 : _ref11$jitter; return { id: id, name: name, values: makeNoisySeries({ min: min, max: max, seed: seed, cycles: cycles, jitter: jitter }) }; }) }); }; var unitDisplayCaseDefinitions = [{ id: "source-kib", title: "Source unit: KiB", purpose: "Raw values are already in KiB; chart units normalize to bytes while labels move down to B or up to MiB/GiB.", unit: "KiB", dimensions: [{ id: "kib-subunit", name: "fractional KiB", min: 0.04, max: 0.82, seed: 171 }, { id: "kib-middle", name: "tens of KiB", min: 18, max: 92, seed: 173 }, { id: "kib-large", name: "many KiB", min: 2400, max: 12200, seed: 179 }] }, { id: "source-kib-per-operation", title: "Source unit: KiB/operation", purpose: "Raw values are already in KiB/operation; chart units normalize to bytes per operation and compact display labels to /op.", unit: "KiB/operation", dimensions: [{ id: "kibop-small", name: "fractional KiB/operation", min: 0.04, max: 0.86, seed: 347 }, { id: "kibop-middle", name: "tens of KiB/operation", min: 18, max: 92, seed: 349 }, { id: "kibop-large", name: "many KiB/operation", min: 2400, max: 12200, seed: 353 }] }, { id: "source-kilobytes-per-operation", title: "Source unit: kilobytes per operation", purpose: "Prometheus text form kilobytes per operation follows the decimal byte-per-operation path and compact display labels to /op.", unit: "kilobytes per operation", dimensions: [{ id: "kbop-small", name: "fractional KB/operation", min: 0.04, max: 0.86, seed: 1207 }, { id: "kbop-middle", name: "tens of KB/operation", min: 18, max: 92, seed: 1213 }, { id: "kbop-large", name: "many KB/operation", min: 2400, max: 12200, seed: 1217 }] }, { id: "source-kb", title: "Source unit: KB", purpose: "Agent KB values are treated as decimal byte source values and chart units normalize to bytes.", unit: "KB", dimensions: [{ id: "kb-small", name: "fractional KB", min: 0.04, max: 0.82, seed: 677 }, { id: "kb-middle", name: "tens of KB", min: 18, max: 92, seed: 683 }, { id: "kb-large", name: "many KB", min: 2400, max: 12200, seed: 691 }] }, { id: "source-mib", title: "Source unit: MiB", purpose: "Raw values are already in MiB; chart units normalize to bytes and labels can move down to KiB or up to GiB/TiB.", unit: "MiB", dimensions: [{ id: "mib-small", name: "fractional MiB", min: 0.02, max: 0.86, seed: 701 }, { id: "mib-middle", name: "several MiB", min: 2.5, max: 24, seed: 709 }, { id: "mib-large", name: "many MiB", min: 1200, max: 6800, seed: 719 }] }, { id: "source-mb", title: "Source unit: MB", purpose: "Agent MB values are treated as decimal byte source values and chart units normalize to bytes.", unit: "MB", dimensions: [{ id: "mb-small", name: "fractional MB", min: 0.02, max: 0.86, seed: 727 }, { id: "mb-middle", name: "several MB", min: 2.5, max: 24, seed: 733 }, { id: "mb-large", name: "many MB", min: 1200, max: 6800, seed: 739 }] }, { id: "source-gib", title: "Source unit: GiB", purpose: "Raw values are already in GiB; chart units normalize to bytes and labels can move down to MiB or up to TiB.", unit: "GiB", dimensions: [{ id: "gib-small", name: "fractional GiB", min: 0.02, max: 0.86, seed: 359 }, { id: "gib-middle", name: "several GiB", min: 2.5, max: 24, seed: 367 }, { id: "gib-large", name: "many GiB", min: 1200, max: 6800, seed: 373 }] }, { id: "source-gigabytes", title: "Source unit: gigabytes", purpose: "Long-form gigabytes are normalized through the decimal byte-scale path.", unit: "gigabytes", dimensions: [{ id: "gigabytes-small", name: "fractional gigabytes", min: 0.04, max: 0.92, seed: 379 }, { id: "gigabytes-middle", name: "several gigabytes", min: 3, max: 32, seed: 383 }, { id: "gigabytes-large", name: "many gigabytes", min: 1800, max: 9200, seed: 389 }] }, { id: "source-tb", title: "Source unit: TB", purpose: "Agent TB values are treated as decimal byte source values and chart units normalize to bytes.", unit: "TB", dimensions: [{ id: "tb-small", name: "fractional TB", min: 0.02, max: 0.86, seed: 995 }, { id: "tb-middle", name: "several TB", min: 2.5, max: 24, seed: 997 }, { id: "tb-large", name: "many TB", min: 1200, max: 6800, seed: 1009 }] }, { id: "source-pb", title: "Source unit: PB", purpose: "Agent PB values are treated as decimal byte source values and chart units normalize to bytes.", unit: "PB", dimensions: [{ id: "pb-small", name: "fractional PB", min: 0.02, max: 0.86, seed: 1013 }, { id: "pb-middle", name: "several PB", min: 2.5, max: 24, seed: 1019 }, { id: "pb-large", name: "many PB", min: 120, max: 860, seed: 1021 }] }, { id: "source-tib", title: "Source unit: TiB", purpose: "Raw values are already in TiB; chart units normalize to bytes and labels stay on the binary byte scale.", unit: "TiB", dimensions: [{ id: "tib-small", name: "fractional TiB", min: 0.02, max: 0.86, seed: 1027 }, { id: "tib-middle", name: "several TiB", min: 2.5, max: 24, seed: 1031 }, { id: "tib-large", name: "many TiB", min: 1200, max: 6800, seed: 1033 }] }, { id: "source-pib", title: "Source unit: PiB", purpose: "Raw values are already in PiB; chart units normalize to bytes and labels stay on the binary byte scale.", unit: "PiB", dimensions: [{ id: "pib-small", name: "fractional PiB", min: 0.02, max: 0.86, seed: 1039 }, { id: "pib-middle", name: "several PiB", min: 2.5, max: 24, seed: 1049 }, { id: "pib-large", name: "many PiB", min: 120, max: 860, seed: 1051 }] }, { id: "source-bytes", title: "Source unit: bytes", purpose: "Raw byte values span B/KiB/MiB/GiB labels.", unit: "bytes", dimensions: [{ id: "bytes-small", name: "raw bytes", min: 18, max: 840, seed: 181 }, { id: "bytes-middle", name: "KiB-sized bytes", min: 8 * KiB, max: 96 * KiB, seed: 191 }, { id: "bytes-large", name: "GiB-sized bytes", min: 0.8 * GiB, max: 4.6 * GiB, seed: 193 }] }, { id: "source-kilobits-per-second", title: "Source unit: kilobits/s", purpose: "Supported kbps-style bit rate; chart units normalize to bits per second while labels scale as bit/s, kbit/s, Mbit/s, or Gbit/s.", unit: "kilobits/s", dimensions: [{ id: "kbits-small", name: "sub-kilobit rate", min: 0.08, max: 0.92, seed: 223 }, { id: "kbits-middle", name: "kilobit rate", min: 48, max: 920, seed: 227 }, { id: "kbits-large", name: "gigabit-scale rate", min: 1.4e6, max: 7.2e6, seed: 229 }] }, { id: "source-kb-per-second", title: "Source unit: kb/s", purpose: "StatsD k6 data uses kb/s; it follows the bit-rate path and does not treat b as bytes.", unit: "kb/s", dimensions: [{ id: "kbps-small", name: "sub-kilobit kb/s", min: 0.08, max: 0.92, seed: 1223 }, { id: "kbps-middle", name: "kilobit kb/s", min: 48, max: 920, seed: 1229 }, { id: "kbps-large", name: "gigabit-scale kb/s", min: 1.4e6, max: 7.2e6, seed: 1231 }] }, { id: "source-kilobits", title: "Source unit: kilobits", purpose: "Raw values are already in kilobits; chart units normalize to bits and labels scale without double prefixes.", unit: "kilobits", dimensions: [{ id: "kilobits-small", name: "fractional kilobits", min: 0.08, max: 0.92, seed: 743 }, { id: "kilobits-middle", name: "kilobits", min: 48, max: 920, seed: 751 }, { id: "kilobits-large", name: "gigabit-scale", min: 1.4e6, max: 7.2e6, seed: 757 }] }, { id: "source-bits", title: "Source unit: bits", purpose: "Plural bits normalizes to the bit scale and labels can move to kbit, Mbit, or Gbit.", unit: "bits", dimensions: [{ id: "bits-small", name: "bit count", min: 24, max: 920, seed: 1219 }, { id: "bits-middle", name: "kilobit count", min: 2400, max: 180000, seed: 1223 }, { id: "bits-large", name: "megabit count", min: 1.4e6, max: 7.2e6, seed: 1229 }] }, { id: "source-bits-per-second", title: "Source unit: bits/s", purpose: "Plural bits/s normalizes to bits per second and labels can move to kbit/s, Mbit/s, or Gbit/s.", unit: "bits/s", dimensions: [{ id: "bitsps-small", name: "bit/s rate", min: 24, max: 920, seed: 1231 }, { id: "bitsps-middle", name: "kilobit/s rate", min: 2400, max: 180000, seed: 1237 }, { id: "bitsps-large", name: "megabit/s rate", min: 1.4e6, max: 7.2e6, seed: 1249 }] }, { id: "source-mbps", title: "Source unit: Mbps", purpose: "Raw values are already in megabits per second; labels normalize to the bit/s scale.", unit: "Mbps", dimensions: [{ id: "mbps-small", name: "fractional Mbps", min: 0.05, max: 0.96, seed: 397 }, { id: "mbps-middle", name: "hundreds of Mbps", min: 28, max: 720, seed: 401 }, { id: "mbps-large", name: "many Mbps", min: 18000, max: 94000, seed: 409 }] }, { id: "source-mhz", title: "Source unit: MHz", purpose: "Raw values are already in megahertz; chart units normalize to hertz and labels scale across Hz/kHz/MHz/GHz.", unit: "MHz", dimensions: [{ id: "mhz-small", name: "fractional MHz", min: 0.03, max: 0.92, seed: 761 }, { id: "mhz-middle", name: "hundreds of MHz", min: 160, max: 950, seed: 769 }, { id: "mhz-large", name: "many MHz", min: 3200, max: 6800, seed: 773 }] }, { id: "source-hz", title: "Source unit: Hz", purpose: "Raw values are in hertz; labels can scale upward to kHz, MHz, or GHz without changing the source unit.", unit: "Hz", dimensions: [{ id: "hz-small", name: "hertz", min: 24, max: 920, seed: 1053 }, { id: "hz-middle", name: "kilohertz range", min: 2400, max: 18000, seed: 1061 }, { id: "hz-large", name: "megahertz range", min: 1.2e6, max: 8.6e6, seed: 1063 }] }, { id: "source-seconds", title: "Source unit: seconds", purpose: "Seconds use duration-aware scaling, including compact duration values with no separate unit suffix.", unit: "seconds", dimensions: [{ id: "seconds-ns", name: "nanosecond latency", min: 25e-9, max: 95e-9, seed: 233 }, { id: "seconds-ms", name: "millisecond latency", min: 0.002, max: 0.018, seed: 239 }, { id: "seconds-hours", name: "multi-hour duration", min: 2 * 3600, max: 11 * 3600, seed: 241 }] }, { id: "source-milliseconds", title: "Source unit: milliseconds", purpose: "Milliseconds normalize to seconds and still use duration-aware scaling, including sub-millisecond and hour-scale values.", unit: "milliseconds", dimensions: [{ id: "milliseconds-us", name: "microsecond latency", min: 0.003, max: 0.08, seed: 243 }, { id: "milliseconds-ms", name: "millisecond latency", min: 2, max: 18, seed: 247 }, { id: "milliseconds-hours", name: "multi-hour duration", min: 2 * 3600 * 1000, max: 11 * 3600 * 1000, seed: 249 }] }, { id: "source-millisecond", title: "Source unit: millisecond", purpose: "Singular duration-parser unit millisecond follows the same normalized seconds path as milliseconds.", unit: "millisecond", dimensions: [{ id: "millisecond-us", name: "microsecond latency", min: 0.003, max: 0.08, seed: 1069 }, { id: "millisecond-ms", name: "millisecond latency", min: 2, max: 18, seed: 1087 }, { id: "millisecond-hours", name: "multi-hour duration", min: 2 * 3600 * 1000, max: 11 * 3600 * 1000, seed: 1091 }] }, { id: "source-microseconds", title: "Source unit: microseconds", purpose: "Microseconds normalize to seconds and can scale down to ns or up to ms/s/duration labels.", unit: "microseconds", dimensions: [{ id: "microseconds-ns", name: "sub-microsecond latency", min: 0.02, max: 0.86, seed: 419 }, { id: "microseconds-us", name: "microsecond latency", min: 2, max: 180, seed: 421 }, { id: "microseconds-ms", name: "millisecond latency", min: 2400, max: 18000, seed: 431 }] }, { id: "source-nanoseconds", title: "Source unit: nanoseconds", purpose: "Nanosecond source values normalize to seconds while labels can scale up to microseconds, milliseconds, or seconds.", unit: "nanoseconds", dimensions: [{ id: "nanoseconds-ns", name: "nanosecond latency", min: 24, max: 920, seed: 1093 }, { id: "nanoseconds-us", name: "microsecond latency", min: 2400, max: 180000, seed: 1097 }, { id: "nanoseconds-ms", name: "millisecond latency", min: 2.4e6, max: 18e6, seed: 1103 }] }, { id: "source-microsecond", title: "Source unit: microsecond", purpose: "Singular duration-parser unit microsecond follows the same normalized seconds path as microseconds.", unit: "microsecond", dimensions: [{ id: "microsecond-ns", name: "sub-microsecond latency", min: 0.02, max: 0.86, seed: 1109 }, { id: "microsecond-us", name: "microsecond latency", min: 2, max: 180, seed: 1117 }, { id: "microsecond-ms", name: "millisecond latency", min: 2400, max: 18000, seed: 1123 }] }, { id: "source-ms", title: "Source unit: ms", purpose: "Short-form ms follows the same normalized seconds path as milliseconds.", unit: "ms", dimensions: [{ id: "ms-us", name: "microsecond latency", min: 0.003, max: 0.08, seed: 787 }, { id: "ms-ms", name: "millisecond latency", min: 2, max: 18, seed: 797 }, { id: "ms-hours", name: "multi-hour duration", min: 2 * 3600 * 1000, max: 11 * 3600 * 1000, seed: 809 }] }, { id: "source-us", title: "Source unit: us", purpose: "Short-form us follows the same normalized seconds path as microseconds.", unit: "us", dimensions: [{ id: "us-ns", name: "sub-microsecond latency", min: 0.02, max: 0.86, seed: 811 }, { id: "us-us", name: "microsecond latency", min: 2, max: 180, seed: 821 }, { id: "us-ms", name: "millisecond latency", min: 2400, max: 18000, seed: 823 }] }, { id: "source-minutes", title: "Source unit: minutes", purpose: "Raw values are already in minutes; chart units normalize to seconds and labels use compact duration formatting.", unit: "minutes", dimensions: [{ id: "minutes-small", name: "sub-minute duration", min: 0.02, max: 0.8, seed: 863 }, { id: "minutes-middle", name: "several minutes", min: 4, max: 45, seed: 877 }, { id: "minutes-large", name: "many minutes", min: 120, max: 600, seed: 881 }] }, { id: "source-sec", title: "Source unit: sec", purpose: "Duration-parser shorthand sec follows the same normalized seconds path as seconds.", unit: "sec", dimensions: [{ id: "sec-ms", name: "millisecond latency", min: 0.002, max: 0.018, seed: 1129 }, { id: "sec-minutes", name: "minute duration", min: 90, max: 420, seed: 1151 }, { id: "sec-hours", name: "multi-hour duration", min: 2 * 3600, max: 11 * 3600, seed: 1153 }] }, { id: "source-hours", title: "Source unit: hours", purpose: "Raw values are already in hours; chart units normalize to seconds and labels use compact duration formatting.", unit: "hours", dimensions: [{ id: "hours-small", name: "fractional hours", min: 0.05, max: 0.8, seed: 883 }, { id: "hours-middle", name: "same-day hours", min: 2, max: 22, seed: 887 }, { id: "hours-large", name: "multi-day hours", min: 48, max: 240, seed: 907 }] }, { id: "source-hr", title: "Source unit: hr", purpose: "Duration-parser shorthand hr normalizes to seconds and uses compact duration formatting.", unit: "hr", dimensions: [{ id: "hr-small", name: "fractional hours", min: 0.05, max: 0.8, seed: 1163 }, { id: "hr-middle", name: "same-day hours", min: 2, max: 22, seed: 1171 }, { id: "hr-large", name: "multi-day hours", min: 48, max: 240, seed: 1181 }] }, { id: "source-days", title: "Source unit: days", purpose: "Raw values are already in days; chart units normalize to seconds and labels use compact duration formatting.", unit: "days", dimensions: [{ id: "days-small", name: "fractional days", min: 0.1, max: 0.9, seed: 911 }, { id: "days-middle", name: "several days", min: 2, max: 20, seed: 919 }, { id: "days-large", name: "long-running days", min: 60, max: 730, seed: 929 }] }, { id: "source-weeks", title: "Source unit: weeks", purpose: "Raw values are already in weeks; chart units normalize to seconds and labels use compact duration formatting.", unit: "weeks", dimensions: [{ id: "weeks-small", name: "fractional weeks", min: 0.1, max: 0.9, seed: 937 }, { id: "weeks-middle", name: "several weeks", min: 2, max: 12, seed: 941 }, { id: "weeks-large", name: "long-running weeks", min: 80, max: 160, seed: 947 }] }, { id: "source-months", title: "Source unit: months", purpose: "Raw values are already in months; chart units normalize to seconds and labels use compact duration formatting.", unit: "months", dimensions: [{ id: "months-small", name: "fractional months", min: 0.1, max: 0.9, seed: 953 }, { id: "months-middle", name: "several months", min: 2, max: 12, seed: 967 }, { id: "months-large", name: "multi-year months", min: 36, max: 96, seed: 971 }] }, { id: "source-years", title: "Source unit: years", purpose: "Raw values are already in years; chart units normalize to seconds and labels use compact duration formatting.", unit: "years", dimensions: [{ id: "years-small", name: "fractional years", min: 0.1, max: 0.9, seed: 977 }, { id: "years-middle", name: "several years", min: 2, max: 12, seed: 983 }, { id: "years-large", name: "many years", min: 30, max: 80, seed: 991 }] }, { id: "source-ms-request", title: "Source unit: milliseconds/request", purpose: "Per-request latency keeps the denominator semantics while compact display labels use /req.", unit: "milliseconds/request", dimensions: [{ id: "msreq-us", name: "microseconds per request", min: 0.004, max: 0.08, seed: 433 }, { id: "msreq-ms", name: "milliseconds per request", min: 2, max: 18, seed: 439 }, { id: "msreq-s", name: "seconds per request", min: 2800, max: 12800, seed: 443 }] }, { id: "source-ms-operation", title: "Source unit: milliseconds/operation", purpose: "Per-operation latency keeps the denominator semantics while compact display labels use /op.", unit: "milliseconds/operation", dimensions: [{ id: "msop-us", name: "microseconds per operation", min: 0.004, max: 0.08, seed: 449 }, { id: "msop-ms", name: "milliseconds per operation", min: 2, max: 18, seed: 457 }, { id: "msop-s", name: "seconds per operation", min: 2800, max: 12800, seed: 461 }] }, { id: "source-milliseconds-per-second", title: "Source unit: milliseconds/s", purpose: "Milliseconds per second normalize to seconds per second and scale without repeating the source prefix.", unit: "milliseconds/s", dimensions: [{ id: "mss-small", name: "fractional ms/s", min: 0.02, max: 0.86, seed: 487 }, { id: "mss-middle", name: "hundreds of ms/s", min: 24, max: 820, seed: 491 }, { id: "mss-large", name: "many ms/s", min: 2400, max: 18000, seed: 499 }] }, { id: "source-ms-per-second", title: "Source unit: ms/s", purpose: "Short-form ms/s follows the same normalized seconds-per-second path as milliseconds/s.", unit: "ms/s", dimensions: [{ id: "mss-short-small", name: "fractional ms/s", min: 0.02, max: 0.86, seed: 827 }, { id: "mss-short-middle", name: "hundreds of ms/s", min: 24, max: 820, seed: 829 }, { id: "mss-short-large", name: "many ms/s", min: 2400, max: 18000, seed: 839 }] }, { id: "source-microseconds-per-second", title: "Source unit: microseconds/s", purpose: "Microseconds per second normalize to seconds per second and can scale across micro/milli/whole seconds per second.", unit: "microseconds/s", dimensions: [{ id: "uss-small", name: "fractional µs/s", min: 0.02, max: 0.86, seed: 503 }, { id: "uss-middle", name: "hundreds of µs/s", min: 24, max: 820, seed: 509 }, { id: "uss-large", name: "many µs/s", min: 2400, max: 18000, seed: 521 }] }, { id: "source-microseconds-lost-per-second", title: "Source unit: microseconds lost/s", purpose: "Agent text alias for microseconds per second follows the same normalized seconds-per-second path.", unit: "microseconds lost/s", dimensions: [{ id: "uslost-small", name: "fractional lost µs/s", min: 0.02, max: 0.86, seed: 523 }, { id: "uslost-middle", name: "hundreds lost µs/s", min: 24, max: 820, seed: 541 }, { id: "uslost-large", name: "many lost µs/s", min: 2400, max: 18000, seed: 547 }] }, { id: "source-usec-per-second", title: "Source unit: usec/s", purpose: "Legacy usec/s follows the same normalized seconds-per-second path as microseconds/s.", unit: "usec/s", dimensions: [{ id: "usecs-small", name: "fractional usec/s", min: 0.02, max: 0.86, seed: 853 }, { id: "usecs-middle", name: "hundreds of usec/s", min: 24, max: 820, seed: 857 }, { id: "usecs-large", name: "many usec/s", min: 2400, max: 18000, seed: 859 }] }, { id: "source-percent", title: "Source unit: percent", purpose: "Percent is non-scalable, so labels keep percent even for tiny fractional values.", unit: "percent", dimensions: [{ id: "percent-tiny", name: "tiny percentage", min: 0.00012, max: 0.00092, seed: 251 }, { id: "percent-middle", name: "middle percentage", min: 34, max: 68, seed: 257 }, { id: "percent-high", name: "high percentage", min: 96.2, max: 99.95, seed: 263 }] }, { id: "source-requests-per-second", title: "Source unit: requests/s", purpose: "Request rates use scale-only labels, so k/M/G are shown without repeating requests/s.", unit: "requests/s", dimensions: [{ id: "requests-small", name: "few requests", min: 0.2, max: 8, seed: 269 }, { id: "requests-middle", name: "borderline requests", min: 840, max: 1600, seed: 271 }, { id: "requests-large", name: "millions of requests", min: 1.4e6, max: 7.8e6, seed: 277 }] }, { id: "source-operations-per-second", title: "Source unit: operations/s", purpose: "Operations per second are generic scalable rates; legend and popover show only the scale designator.", unit: "operations/s", dimensions: [{ id: "operations-small", name: "few operations", min: 12, max: 95, seed: 281 }, { id: "operations-middle", name: "thousands of operations", min: 1