@perses-dev/components 0.4.0 → 0.5.0

package/dist/cjs/Tooltip/focused-series.test.js

@@ -0,0 +1,57 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });
+const focused_series_1 = require("./focused-series");
+describe('getNearbySeries', () => {
+    const chartData = {
+        timeSeries: [
+            {
+                type: 'line',
+                name: 'env="demo", instance="demo.do.prometheus", job="node", mode="test"',
+                color: 'hsla(-1365438424,50%,50%,0.8)',
+                data: [
+                    0.0002315202231525094, 0.00022873082287300112, 0.00023152022315149463, 0.00023152022315149463,
+                    0.00022873082287300112,
+                ],
+                symbol: 'circle',
+            },
+            {
+                type: 'line',
+                name: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
+                color: 'hsla(286664040,50%,50%,0.8)',
+                data: [0.05245188284519867, 0.0524463040446356, 0.0524463040446356, 0.05247140864723438, 0.052482566248230646],
+                symbol: 'circle',
+            },
+        ],
+        xAxis: [1654007865000, 1654007880000, 1654007895000, 1654007910000, 1654007925000],
+        rangeMs: 60000,
+    };
+    // https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel
+    const pointInGrid = [2, 0.0560655737704918]; // converted from chart.getZr() mousemove coordinates
+    const yBuffer = 0.02; // calculated from y axis interval
+    const focusedSeriesOutput = [
+        {
+            date: 'May 31, 2022, 2:38:15 PM',
+            datumIdx: 2,
+            markerColor: 'hsla(286664040,50%,50%,0.8)',
+            seriesName: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
+            seriesIdx: 1,
+            x: 1654007895000,
+            y: 0.0524463040446356,
+        },
+    ];
+    it('should return focused series data for points nearby the cursor', () => {
+        expect((0, focused_series_1.getNearbySeries)(chartData, pointInGrid, yBuffer)).toEqual(focusedSeriesOutput);
+    });
+});

package/dist/cjs/Tooltip/index.js

@@ -0,0 +1,30 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tooltip"), exports);
+__exportStar(require("./SeriesMarker"), exports);

package/dist/cjs/context/ChartsThemeProvider.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChartsTheme = exports.ChartsThemeContext = exports.ChartsThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const echarts_1 = require("echarts");
+function ChartsThemeProvider(props) {
+    const { children, themeName, chartsTheme } = props;
+    if (chartsTheme !== undefined && chartsTheme.echartsTheme !== undefined) {
+        // register ECharts theme to be used in individual charts, see: https://apache.github.io/echarts-handbook/en/concepts/style/#theme
+        (0, echarts_1.registerTheme)(themeName, chartsTheme.echartsTheme);
+    }
+    return (0, jsx_runtime_1.jsx)(exports.ChartsThemeContext.Provider, { value: chartsTheme, children: children });
+}
+exports.ChartsThemeProvider = ChartsThemeProvider;
+exports.ChartsThemeContext = (0, react_1.createContext)(undefined);
+function useChartsTheme() {
+    const ctx = (0, react_1.useContext)(exports.ChartsThemeContext);
+    if (ctx === undefined) {
+        throw new Error('No ChartsThemeContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.useChartsTheme = useChartsTheme;

package/dist/cjs/index.js

@@ -29,9 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./EChart"), exports);
 __exportStar(require("./ErrorAlert"), exports);
 __exportStar(require("./ErrorBoundary"), exports);
-__exportStar(require("./GaugeChart"), exports);
+__exportStar(require("./InfoTooltip"), exports);
 __exportStar(require("./LineChart"), exports);
+__exportStar(require("./GaugeChart"), exports);
 __exportStar(require("./StatChart"), exports);
-__exportStar(require("./utils/combine-sx"), exports);
-__exportStar(require("./model/graph-model"), exports);
-__exportStar(require("./model/units"), exports);
+__exportStar(require("./context/ChartsThemeProvider"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./model"), exports);

package/dist/cjs/model/index.js

@@ -0,0 +1,31 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./graph"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./units"), exports);

package/dist/cjs/model/theme.js

@@ -0,0 +1,14 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/model/units.js

@@ -12,25 +12,33 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SIMPLE_UNITS = exports.removeUnitNamespace = exports.SANCTIONED_UNITS = exports.isSanctionedSimpleUnitIdentifier = exports.abbreviateLargeNumber = exports.formatValue = void 0;
+exports.formatNumber = exports.abbreviateLargeNumber = exports.formatValue = exports.DEFAULT_DECIMAL_PLACES = void 0;
 const date_fns_1 = require("date-fns");
+const mathjs_1 = require("mathjs");
+exports.DEFAULT_DECIMAL_PLACES = 2;
 function formatValue(value, unitOptions) {
+    var _a;
     if (unitOptions === undefined) {
         return value.toString();
     }
+    if (isDecimalUnit(unitOptions)) {
+        return formatDecimal(value, unitOptions);
+    }
     if (isTimeUnit(unitOptions)) {
         return formatTime(value, unitOptions);
     }
     if (isPercentUnit(unitOptions)) {
         return formatPercent(value, unitOptions);
     }
-    if (isDecimalUnit(unitOptions)) {
-        return formatDecimal(value, unitOptions);
+    if (isBytesUnit(unitOptions)) {
+        const decimals = (_a = unitOptions.decimal_places) !== null && _a !== void 0 ? _a : exports.DEFAULT_DECIMAL_PLACES;
+        return formatBytes(value, decimals);
     }
     const exhaustive = unitOptions;
     throw new Error(`Unknown unit options ${exhaustive}`);
 }
 exports.formatValue = formatValue;
+/* Time Unit Conversion */
 const timeUnitKinds = ['Milliseconds', 'Seconds', 'Minutes', 'Hours', 'Days', 'Weeks', 'Months', 'Years'];
 const timeUnitKindsSet = new Set(timeUnitKinds);
 function isTimeUnit(unitOptions) {
@@ -96,116 +104,81 @@ function formatTime(value, unitOptions) {
     }
     return `${years.toFixed()} years`;
 }
-const percentUnitKinds = ['Percent', 'PercentDecimal'];
+/* Percent Unit Conversion */
+const percentUnitKinds = ['Percent', 'PercentDecimal', '%'];
 const percentUnitKindsSet = new Set(percentUnitKinds);
 function isPercentUnit(unitOptions) {
     return percentUnitKindsSet.has(unitOptions.kind);
 }
 function formatPercent(value, unitOptions) {
+    var _a;
+    const decimals = (_a = unitOptions.decimal_places) !== null && _a !== void 0 ? _a : exports.DEFAULT_DECIMAL_PLACES;
     if (unitOptions.kind === 'PercentDecimal') {
         value = value * 100;
     }
-    return value.toFixed(unitOptions.decimal_places) + '%';
+    return value.toFixed(decimals) + '%';
 }
+/* Decimal Unit Conversion */
 const decimalUnitKinds = ['Decimal'];
 const decimalUnitKindsSet = new Set(decimalUnitKinds);
 function isDecimalUnit(unitOptions) {
     return decimalUnitKindsSet.has(unitOptions.kind);
 }
 function formatDecimal(value, unitOptions) {
-    var _a, _b;
-    const maximumFractionDigits = (_a = unitOptions.decimal_places) !== null && _a !== void 0 ? _a : 2;
-    if (unitOptions.suffix !== undefined) {
-        if (isSanctionedSimpleUnitIdentifier(unitOptions.suffix)) {
-            const formatParams = {
-                style: 'unit',
-                minimumFractionDigits: 0,
-                maximumFractionDigits: maximumFractionDigits,
-                useGrouping: true,
-                unit: unitOptions.suffix,
-                unitDisplay: (_b = unitOptions.unitDisplay) !== null && _b !== void 0 ? _b : 'narrow',
-            };
-            const unitFormatter = new Intl.NumberFormat('en-US', formatParams);
-            return unitFormatter.format(value);
-        }
+    var _a;
+    const decimals = (_a = unitOptions.decimal_places) !== null && _a !== void 0 ? _a : exports.DEFAULT_DECIMAL_PLACES;
+    if (unitOptions.abbreviate === true) {
+        return abbreviateLargeNumber(value, decimals);
     }
     const formatParams = {
         style: 'decimal',
         minimumFractionDigits: 0,
-        maximumFractionDigits: maximumFractionDigits,
+        maximumFractionDigits: decimals,
         useGrouping: true,
     };
     const decimalFormatter = new Intl.NumberFormat('en-US', formatParams);
     return decimalFormatter.format(value);
 }
-// Take a large number and abbreviate appropriate suffix
-// ex) 10000 -> 10k, 1000000 -> 1M
-function abbreviateLargeNumber(num) {
+/**
+ * Takes large numbers and abbreviates them with the appropriate suffix
+ * 10123 -> 10.123k
+ * 1000000 -> 1M
+ */
+function abbreviateLargeNumber(num, decimals = 2) {
+    const modifier = (n) => (0, mathjs_1.round)(n, decimals);
+    return formatNumber(num, modifier);
+}
+exports.abbreviateLargeNumber = abbreviateLargeNumber;
+/**
+ * Takes large numbers, rounds and abbreviates them with the appropriate suffix
+ * Add modifier to run on output value prior to unit being added (defaults to rounding)
+ */
+function formatNumber(num, modifier) {
+    const fn = modifier !== null && modifier !== void 0 ? modifier : Math.round;
     return num >= 1e12
-        ? num / 1e12 + 'T'
+        ? fn(num / 1e12) + 'T'
         : num >= 1e9
-            ? num / 1e9 + 'B'
+            ? fn(num / 1e9) + 'B'
             : num >= 1e6
-                ? num / 1e6 + 'M'
+                ? fn(num / 1e6) + 'M'
                 : num >= 1e3
-                    ? num / 1e3 + 'k'
-                    : num;
+                    ? fn(num / 1e3) + 'K'
+                    : num.toString();
 }
-exports.abbreviateLargeNumber = abbreviateLargeNumber;
-// Util to check unit name against ECMA standard: https://tc39.es/ecma402/#sec-issanctionedsimpleunitidentifier
-function isSanctionedSimpleUnitIdentifier(unitIdentifier) {
-    return exports.SIMPLE_UNITS.indexOf(unitIdentifier) > -1;
+exports.formatNumber = formatNumber;
+/* Bytes Unit Conversion */
+const bytesUnitKinds = ['Bytes'];
+const bytesUnitKindsSet = new Set(bytesUnitKinds);
+function isBytesUnit(unitOptions) {
+    return bytesUnitKindsSet.has(unitOptions.kind);
 }
-exports.isSanctionedSimpleUnitIdentifier = isSanctionedSimpleUnitIdentifier;
-// https://tc39.es/ecma402/#table-sanctioned-simple-unit-identifiers
-exports.SANCTIONED_UNITS = [
-    'angle-degree',
-    'area-acre',
-    'area-hectare',
-    'concentr-percent',
-    'digital-bit',
-    'digital-byte',
-    'digital-gigabit',
-    'digital-gigabyte',
-    'digital-kilobit',
-    'digital-kilobyte',
-    'digital-megabit',
-    'digital-megabyte',
-    'digital-petabyte',
-    'digital-terabit',
-    'digital-terabyte',
-    'duration-day',
-    'duration-hour',
-    'duration-millisecond',
-    'duration-minute',
-    'duration-month',
-    'duration-second',
-    'duration-week',
-    'duration-year',
-    'length-centimeter',
-    'length-foot',
-    'length-inch',
-    'length-kilometer',
-    'length-meter',
-    'length-mile-scandinavian',
-    'length-mile',
-    'length-millimeter',
-    'length-yard',
-    'mass-gram',
-    'mass-kilogram',
-    'mass-ounce',
-    'mass-pound',
-    'mass-stone',
-    'temperature-celsius',
-    'temperature-fahrenheit',
-    'volume-fluid-ounce',
-    'volume-gallon',
-    'volume-liter',
-    'volume-milliliter',
-];
-// removes the namespace prefix, ex: duration-hour -> hour
-function removeUnitNamespace(unit) {
-    return unit.slice(unit.indexOf('-') + 1);
+// https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript/18650828#18650828
+function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
-exports.removeUnitNamespace = removeUnitNamespace;
-exports.SIMPLE_UNITS = exports.SANCTIONED_UNITS.map(removeUnitNamespace);

package/dist/cjs/test/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./render"), exports);

package/dist/cjs/test/render.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderWithContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("@testing-library/react");
+const react_query_1 = require("react-query");
+const queryClient = new react_query_1.QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
+/**
+ * Test helper to render a React component with some common app-level providers wrapped around it.
+ */
+function renderWithContext(ui, options) {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: ui }), options);
+}
+exports.renderWithContext = renderWithContext;

package/dist/cjs/test/setup-tests.js

@@ -0,0 +1,18 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });
+// Add testing library assertions
+require("@testing-library/jest-dom/extend-expect");
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');

package/dist/cjs/utils/index.js

@@ -0,0 +1,30 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./combine-sx"), exports);
+__exportStar(require("./theme-gen"), exports);