@perses-dev/components 0.4.2 → 0.5.0

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);

package/dist/cjs/utils/theme-gen.js

@@ -0,0 +1,180 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateChartsTheme = void 0;
+const merge_1 = __importDefault(require("lodash/merge"));
+const DEFAULT_TEXT_COLOR = '#222';
+function generateChartsTheme(themeName, muiTheme, echartsTheme) {
+    var _a, _b, _c, _d, _e, _f;
+    const primaryTextColor = (_b = (_a = muiTheme.palette.text) === null || _a === void 0 ? void 0 : _a.primary) !== null && _b !== void 0 ? _b : DEFAULT_TEXT_COLOR;
+    const muiConvertedTheme = {
+        title: {
+            show: false,
+        },
+        textStyle: {
+            color: primaryTextColor,
+            fontFamily: muiTheme.typography.fontFamily,
+            fontSize: 12,
+        },
+        grid: {
+            top: 5,
+            right: 20,
+            bottom: 0,
+            left: 20,
+            containLabel: true,
+        },
+        color: ['#8dd3c7', '#bebada', '#fb8072', '#80b1d3', '#fdb462'],
+        categoryAxis: {
+            show: true,
+            axisLabel: {
+                show: true,
+                color: primaryTextColor,
+                margin: 15,
+            },
+            axisTick: {
+                show: false,
+                length: 6,
+                lineStyle: {
+                    color: muiTheme.palette.grey[600],
+                },
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: muiTheme.palette.grey[600],
+                },
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 0.5,
+                    color: muiTheme.palette.grey[300],
+                    opacity: 0.6,
+                },
+            },
+            splitArea: {
+                show: false,
+                areaStyle: {
+                    color: [muiTheme.palette.grey[300]],
+                },
+            },
+        },
+        valueAxis: {
+            show: true,
+            axisLabel: {
+                color: primaryTextColor,
+                margin: 12,
+            },
+            axisLine: {
+                show: false,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 0.5,
+                    color: muiTheme.palette.grey[300],
+                    opacity: 0.6,
+                },
+            },
+        },
+        legend: {
+            orient: 'horizontal',
+            textStyle: {
+                color: primaryTextColor,
+            },
+            pageTextStyle: {
+                color: muiTheme.palette.grey[600],
+            },
+            pageIconColor: (_d = (_c = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.palette) === null || _c === void 0 ? void 0 : _c.action) === null || _d === void 0 ? void 0 : _d.active,
+            pageIconInactiveColor: (_f = (_e = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.palette) === null || _e === void 0 ? void 0 : _e.action) === null || _f === void 0 ? void 0 : _f.disabled,
+        },
+        toolbox: {
+            show: true,
+            top: 10,
+            right: 10,
+            iconStyle: {
+                borderColor: primaryTextColor,
+            },
+        },
+        tooltip: {},
+        line: {
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 4,
+            smooth: false,
+            lineStyle: {
+                width: 1,
+            },
+            emphasis: {
+                lineStyle: {
+                    width: 1.5,
+                },
+            },
+        },
+        bar: {
+            barMaxWidth: 150,
+            itemStyle: {
+                borderWidth: 0,
+                borderColor: muiTheme.palette.grey[300],
+            },
+        },
+        gauge: {
+            detail: {
+                fontSize: 18,
+                fontWeight: 600,
+                valueAnimation: false,
+            },
+            splitLine: {
+                distance: 0,
+                length: 4,
+                lineStyle: {
+                    width: 1,
+                },
+            },
+            splitNumber: 12,
+        },
+    };
+    return {
+        themeName,
+        echartsTheme: (0, merge_1.default)(muiConvertedTheme, echartsTheme),
+        noDataOption: {
+            title: {
+                show: true,
+                textStyle: {
+                    color: primaryTextColor,
+                    fontSize: 16,
+                    fontWeight: 400,
+                },
+                text: 'No data',
+                left: 'center',
+                top: 'center',
+            },
+            xAxis: {
+                show: false,
+            },
+            yAxis: {
+                show: false,
+            },
+        },
+        sparkline: {
+            width: 2,
+            color: '#1976d2',
+        },
+        // TODO: add thresholdColors to theme
+    };
+}
+exports.generateChartsTheme = generateChartsTheme;