@perses-dev/components 0.3.0 → 0.3.1

package/dist/cjs/ECharts.js

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ECharts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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 debounce_1 = __importDefault(require("lodash/debounce"));
+const core_1 = require("echarts/core");
+const material_1 = require("@mui/material");
+const mouseEvents = [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mousemove',
+    'mouseup',
+    'mouseover',
+    'mouseout',
+    'globalout',
+    'contextmenu',
+];
+const batchEvents = ['datazoom', 'downplay', 'highlight'];
+function ECharts({ sx, _instance, onChartInitialized, option, onEvents }) {
+    const [containerRef, setContainerRef] = (0, react_1.useState)(null);
+    const [echart, setChart] = (0, react_1.useState)(undefined);
+    // Create a chart instance in the container
+    (0, react_1.useLayoutEffect)(() => {
+        if (containerRef === null)
+            return;
+        const chart = (0, core_1.init)(containerRef);
+        setChart(chart);
+        if (_instance !== undefined) {
+            _instance.current = chart;
+        }
+        bindEvents(chart, onEvents);
+        onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chart);
+        return () => {
+            chart.dispose();
+        };
+    }, [containerRef, _instance, onChartInitialized, onEvents]);
+    // Sync options with chart instance
+    (0, react_1.useLayoutEffect)(() => {
+        if (echart === undefined)
+            return;
+        echart.setOption(option);
+    }, [echart, option]);
+    (0, react_1.useLayoutEffect)(() => {
+        const updateSize = (0, debounce_1.default)(() => {
+            echart === null || echart === void 0 ? void 0 : echart.resize();
+        }, 200);
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, [echart]);
+    return (0, jsx_runtime_1.jsx)(material_1.Box, { ref: setContainerRef, sx: sx });
+}
+exports.ECharts = ECharts;
+// Validate event config and bind custom events
+function bindEvents(instance, events) {
+    var _a;
+    if (events === undefined)
+        return;
+    function bindEvent(eventName, onEventFunction) {
+        if (typeof onEventFunction === 'function') {
+            if (isMouseEvent(eventName)) {
+                instance.on(eventName, (param) => onEventFunction(param, instance));
+            }
+            else if (isBatchEvent(eventName)) {
+                instance.on(eventName, (param) => onEventFunction(param));
+            }
+            else {
+                instance.on(eventName, () => onEventFunction(null, instance));
+            }
+        }
+    }
+    for (const eventName in events) {
+        if (Object.prototype.hasOwnProperty.call(events, eventName)) {
+            const customEvent = (_a = events[eventName]) !== null && _a !== void 0 ? _a : null;
+            if (customEvent) {
+                bindEvent(eventName, customEvent);
+            }
+        }
+    }
+}
+function isMouseEvent(eventName) {
+    return mouseEvents.includes(eventName);
+}
+function isBatchEvent(eventName) {
+    return batchEvents.includes(eventName);
+}

package/dist/cjs/ErrorAlert.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorAlert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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 material_1 = require("@mui/material");
+/**
+ * Shows an MUI Alert with the `Error.message` as its contents.
+ */
+function ErrorAlert(props) {
+    const { error } = props;
+    return (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message });
+}
+exports.ErrorAlert = ErrorAlert;

package/dist/cjs/ErrorBoundary.js

@@ -0,0 +1,18 @@
+"use strict";
+// Copyright 2021 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 });
+exports.ErrorBoundary = void 0;
+// Just use react-error-boundary as-is for now
+var react_error_boundary_1 = require("react-error-boundary");
+Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return react_error_boundary_1.ErrorBoundary; } });

package/dist/cjs/GaugeChart.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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 core_1 = require("echarts/core");
+const charts_1 = require("echarts/charts");
+const components_1 = require("echarts/components");
+const renderers_1 = require("echarts/renderers");
+const units_1 = require("./model/units");
+const ECharts_1 = require("./ECharts");
+(0, core_1.use)([charts_1.GaugeChart, components_1.GridComponent, components_1.TitleComponent, components_1.TooltipComponent, renderers_1.CanvasRenderer]);
+const noDataOption = {
+    title: {
+        show: true,
+        textStyle: {
+            color: 'grey',
+            fontSize: 16,
+            fontWeight: 400,
+        },
+        text: 'No data',
+        left: 'center',
+        top: 'center',
+    },
+    xAxis: {
+        show: false,
+    },
+    yAxis: {
+        show: false,
+    },
+    series: [],
+};
+function GaugeChart(props) {
+    const { width, height, data, unit, axisLine } = props;
+    const option = (0, react_1.useMemo)(() => {
+        if (data === null || data === undefined)
+            return noDataOption;
+        const calculatedValue = data;
+        return {
+            title: {
+                show: false,
+            },
+            tooltip: {
+                show: false,
+            },
+            series: [
+                {
+                    type: 'gauge',
+                    center: ['50%', '65%'],
+                    radius: '100%',
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max: 100,
+                    splitNumber: 12,
+                    silent: true,
+                    progress: {
+                        show: true,
+                        width: 22,
+                        itemStyle: {
+                            color: 'auto',
+                        },
+                    },
+                    pointer: {
+                        show: false,
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: [[1, '#e1e5e9']],
+                            width: 22,
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                        distance: -28,
+                        splitNumber: 5,
+                        lineStyle: {
+                            width: 2,
+                            color: '#999',
+                        },
+                    },
+                    splitLine: {
+                        show: false,
+                        distance: -32,
+                        length: 6,
+                        lineStyle: {
+                            width: 2,
+                            color: '#999',
+                        },
+                    },
+                    axisLabel: {
+                        show: false,
+                        distance: -18,
+                        color: '#999',
+                        fontSize: 12,
+                    },
+                    anchor: {
+                        show: false,
+                    },
+                    title: {
+                        show: false,
+                    },
+                    detail: {
+                        show: false,
+                    },
+                    data: [
+                        {
+                            value: calculatedValue,
+                        },
+                    ],
+                },
+                {
+                    type: 'gauge',
+                    center: ['50%', '65%'],
+                    radius: '114%',
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max: 100,
+                    pointer: {
+                        show: false,
+                        itemStyle: {
+                            color: 'auto',
+                        },
+                    },
+                    axisLine,
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: false,
+                    },
+                    detail: {
+                        show: true,
+                        valueAnimation: false,
+                        width: '60%',
+                        borderRadius: 8,
+                        offsetCenter: [0, '-9%'],
+                        fontSize: 20,
+                        fontWeight: 'bolder',
+                        color: 'inherit',
+                        formatter: (value) => {
+                            return (0, units_1.formatValue)(value, {
+                                kind: unit.kind,
+                                decimal_places: 0,
+                            });
+                        },
+                    },
+                    data: [
+                        {
+                            value: calculatedValue,
+                        },
+                    ],
+                },
+            ],
+        };
+    }, [data, unit, axisLine]);
+    return ((0, jsx_runtime_1.jsx)(ECharts_1.ECharts, { sx: {
+            width: width,
+            height: height,
+        }, option: option }));
+}
+exports.GaugeChart = GaugeChart;

package/dist/cjs/LineChart.js

@@ -0,0 +1,227 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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 material_1 = require("@mui/material");
+const merge_1 = __importDefault(require("lodash/merge"));
+const core_1 = require("echarts/core");
+const charts_1 = require("echarts/charts");
+const components_1 = require("echarts/components");
+const renderers_1 = require("echarts/renderers");
+const ECharts_1 = require("./ECharts");
+const graph_model_1 = require("./model/graph-model");
+const units_1 = require("./model/units");
+const tooltip_model_1 = require("./tooltip/tooltip-model");
+const Tooltip_1 = require("./tooltip/Tooltip");
+(0, core_1.use)([
+    charts_1.LineChart,
+    components_1.GridComponent,
+    components_1.DataZoomComponent,
+    components_1.MarkAreaComponent,
+    components_1.MarkLineComponent,
+    components_1.MarkPointComponent,
+    components_1.TitleComponent,
+    components_1.ToolboxComponent,
+    components_1.TooltipComponent,
+    components_1.LegendComponent,
+    components_1.VisualMapComponent,
+    renderers_1.CanvasRenderer,
+]);
+const noDataOption = {
+    title: {
+        show: true,
+        textStyle: {
+            color: 'grey',
+            fontSize: 16,
+            fontWeight: 400,
+        },
+        text: 'No data',
+        left: 'center',
+        top: 'center',
+    },
+    xAxis: {
+        show: false,
+    },
+    yAxis: {
+        show: false,
+    },
+    series: [],
+};
+function LineChart(props) {
+    const { height, data, grid, legend, toolbox, dataZoomEnabled, onDataZoom } = props;
+    const theme = (0, material_1.useTheme)();
+    const chartRef = (0, react_1.useRef)();
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(true);
+    const handleEvents = (0, react_1.useMemo)(() => {
+        return {
+            datazoom: (params) => {
+                var _a, _b;
+                if (onDataZoom === undefined || params.batch[0] === undefined)
+                    return;
+                const startIndex = (_a = params.batch[0].startValue) !== null && _a !== void 0 ? _a : 0;
+                const endIndex = (_b = params.batch[0].endValue) !== null && _b !== void 0 ? _b : data.xAxis.length - 1;
+                const xAxisStartValue = data.xAxis[startIndex];
+                const xAxisEndValue = data.xAxis[endIndex];
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue,
+                        startIndex,
+                        endIndex,
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            },
+        };
+    }, [data, onDataZoom]);
+    if (chartRef.current !== undefined && dataZoomEnabled === true) {
+        const chart = chartRef.current;
+        chart.dispatchAction({
+            type: 'takeGlobalCursor',
+            key: 'dataZoomSelect',
+            dataZoomSelectActive: true,
+        });
+    }
+    const handleOnMouseDown = (event) => {
+        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
+        if (event.target instanceof HTMLCanvasElement) {
+            setShowTooltip(false);
+        }
+    };
+    const handleOnMouseUp = () => {
+        setShowTooltip(true);
+    };
+    const handleOnMouseEnter = () => {
+        setShowTooltip(true);
+    };
+    const handleOnMouseLeave = () => {
+        setShowTooltip(false);
+    };
+    const option = (0, react_1.useMemo)(() => {
+        if (data.timeSeries === undefined)
+            return {};
+        if (data.timeSeries === null || data.timeSeries.length === 0)
+            return noDataOption;
+        const showPointsOnHover = data.timeSeries.length < graph_model_1.PROGRESSIVE_MODE_SERIES_LIMIT;
+        const defaultGrid = {
+            show: true,
+            backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.background.paper,
+            borderColor: theme.palette.grey['300'],
+            top: 10,
+            right: 20,
+            bottom: 0,
+            left: 20,
+            containLabel: true,
+        };
+        const defaultToolbox = {
+            show: true,
+            top: 10,
+            right: 10,
+            iconStyle: {
+                borderColor: theme.palette.text.primary,
+            },
+            feature: {
+                dataZoom: {
+                    icon: dataZoomEnabled ? null : undefined,
+                    yAxisIndex: 'none',
+                },
+                restore: {},
+            },
+            emphasis: {
+                iconStyle: {
+                    textFill: theme.palette.text.primary,
+                },
+            },
+        };
+        if (dataZoomEnabled === false) {
+            delete defaultToolbox.feature.dataZoom.icon;
+        }
+        const option = {
+            title: {
+                show: false,
+            },
+            grid: (0, merge_1.default)(defaultGrid, grid),
+            toolbox: (0, merge_1.default)(defaultToolbox, toolbox),
+            series: data.timeSeries,
+            xAxis: {
+                type: 'category',
+                data: data.xAxis,
+                axisLabel: {
+                    color: theme.palette.text.primary,
+                    margin: 12,
+                    formatter: (value) => {
+                        return getFormattedDate(value);
+                    },
+                },
+                axisTick: {
+                    show: true,
+                    length: 6,
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: theme.palette.grey['600'],
+                    },
+                },
+            },
+            yAxis: {
+                type: 'value',
+                boundaryGap: ['10%', '10%'],
+                axisLabel: {
+                    showMinLabel: false,
+                    showMaxLabel: true,
+                    color: theme.palette.text.primary,
+                    formatter: (value) => {
+                        return (0, units_1.abbreviateLargeNumber)(value);
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: theme.palette.grey['300'],
+                    },
+                },
+            },
+            animation: false,
+            tooltip: {
+                show: showPointsOnHover,
+                trigger: 'axis',
+                showContent: false,
+                axisPointer: {
+                    type: 'none',
+                },
+            },
+            legend,
+        };
+        return option;
+    }, [data, theme, grid, legend, toolbox, dataZoomEnabled]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            height,
+        }, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, tooltipData: tooltip_model_1.emptyTooltipData, chartData: data, wrapLabels: true })), (0, jsx_runtime_1.jsx)(ECharts_1.ECharts, { sx: {
+                    width: '100%',
+                    height: '100%',
+                }, option: option, onEvents: handleEvents, _instance: chartRef })] }));
+}
+exports.LineChart = LineChart;
+function getFormattedDate(value) {
+    const XAXIS_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: false,
+    });
+    return XAXIS_DATE_FORMAT.format(value * 1000);
+}