@perses-dev/components 0.4.2 → 0.5.0

package/dist/cjs/LineChart.js

@@ -1,252 +0,0 @@
-"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 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 core_1 = require("@perses-dev/core");
-const material_1 = require("@mui/material");
-const merge_1 = __importDefault(require("lodash/merge"));
-const core_2 = require("echarts/core");
-const charts_1 = require("echarts/charts");
-const components_1 = require("echarts/components");
-const renderers_1 = require("echarts/renderers");
-const EChart_1 = require("./EChart");
-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_2.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({ height, data, grid, legend, toolbox, visualMap, dataZoomEnabled, onDataZoom, }) {
-    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, core_1.useDeepMemo)(() => {
-        var _a;
-        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 = {
-            top: 10,
-            right: 20,
-            bottom: 5,
-            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 rangeMs = (_a = data.rangeMs) !== null && _a !== void 0 ? _a : getDateRange(data.xAxis);
-        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,
-                max: data.xAxisMax,
-                axisLabel: {
-                    margin: 15,
-                    color: theme.palette.text.primary,
-                    formatter: (value) => {
-                        return getFormattedDate(value, rangeMs);
-                    },
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLine: {
-                    lineStyle: {
-                        color: theme.palette.grey['600'],
-                    },
-                },
-            },
-            yAxis: {
-                type: 'value',
-                boundaryGap: [0, '10%'],
-                axisLabel: {
-                    margin: 12,
-                    color: theme.palette.text.primary,
-                    formatter: (value) => {
-                        return (0, units_1.abbreviateLargeNumber)(value);
-                    },
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        width: 0.5,
-                        color: theme.palette.grey['300'],
-                        opacity: 0.95,
-                    },
-                },
-            },
-            animation: false,
-            tooltip: {
-                show: showPointsOnHover,
-                trigger: 'axis',
-                showContent: false,
-                axisPointer: {
-                    type: 'none',
-                },
-            },
-            legend,
-            visualMap,
-        };
-        return option;
-        // TODO (sjcobb): consolidate option props using echarts theme to reduce num of items in dep array
-    }, [data, theme, grid, legend, toolbox, dataZoomEnabled, visualMap]);
-    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)(EChart_1.EChart, { sx: {
-                    width: '100%',
-                    height: '100%',
-                }, option: option, onEvents: handleEvents, _instance: chartRef })] }));
-}
-exports.LineChart = LineChart;
-// fallback when xAxis time range not passed as prop
-function getDateRange(data) {
-    const defaultRange = 3600000; // hour in ms
-    if (data.length === 0)
-        return defaultRange;
-    const lastDatum = data[data.length - 1];
-    if (data[0] === undefined || lastDatum === undefined)
-        return defaultRange;
-    return lastDatum - data[0];
-}
-// determines time granularity for axis labels, defaults to hh:mm
-function getFormattedDate(value, rangeMs) {
-    const dateFormatOptions = {
-        hour: 'numeric',
-        minute: 'numeric',
-        hourCycle: 'h23',
-    };
-    const thirtyMinMs = 1800000;
-    const dayMs = 86400000;
-    if (rangeMs <= thirtyMinMs) {
-        dateFormatOptions.second = 'numeric';
-    }
-    else if (rangeMs >= dayMs) {
-        dateFormatOptions.month = 'numeric';
-        dateFormatOptions.day = 'numeric';
-    }
-    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
-    // remove comma when month / day present
-    return DATE_FORMAT.format(value).replace(/, /g, ' ');
-}

package/dist/cjs/StatChart.js

@@ -1,207 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatChart = 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 material_1 = require("@mui/material");
-const lodash_es_1 = require("lodash-es");
-const core_1 = require("echarts/core");
-const charts_1 = require("echarts/charts");
-const charts_2 = require("echarts/charts");
-const components_1 = require("echarts/components");
-const renderers_1 = require("echarts/renderers");
-const units_1 = require("./model/units");
-const EChart_1 = require("./EChart");
-(0, core_1.use)([
-    charts_1.GaugeChart,
-    charts_2.LineChart,
-    components_1.GridComponent,
-    components_1.DatasetComponent,
-    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 StatChart(props) {
-    const { width, height, data, unit, backgroundColor, sparkline } = props;
-    const theme = (0, material_1.useTheme)();
-    const option = (0, react_1.useMemo)(() => {
-        var _a;
-        if (data.seriesData === undefined)
-            return {};
-        if (data.seriesData === null || data.calculatedValue === undefined)
-            return noDataOption;
-        const series = data.seriesData;
-        const calculatedValue = (_a = data.calculatedValue) !== null && _a !== void 0 ? _a : 0;
-        const isLargePanel = width > 250 ? true : false;
-        const showName = isLargePanel;
-        const name = showName === true ? data.name : '';
-        const smallestSide = Math.min(width, height * 1.2);
-        const baseFontSize = Math.min((smallestSide / 4) * 0.65, 72);
-        const nameFontSize = baseFontSize * 0.5;
-        const statSeries = [
-            {
-                type: 'gauge',
-                data: [
-                    {
-                        value: calculatedValue,
-                        name: name,
-                    },
-                ],
-                detail: {
-                    show: true,
-                    offsetCenter: ['0%', '-65%'],
-                    formatter: [`{name|${name}}`, `{value|${(0, units_1.formatValue)(calculatedValue, unit)}}`].join('\n'),
-                    rich: {
-                        name: {
-                            padding: showName === true ? [0, 0, 5, 0] : 0,
-                            fontSize: nameFontSize,
-                            lineHeight: nameFontSize * 2.5,
-                            fontWeight: 500,
-                        },
-                        value: {},
-                    },
-                },
-                center: ['50%', '60%'],
-                animation: false,
-                silent: true,
-                title: { show: false },
-                progress: { show: false },
-                pointer: { show: false },
-                axisLine: { show: false },
-                axisTick: { show: false },
-                splitLine: { show: false },
-                axisLabel: { show: false },
-                anchor: { show: false },
-                zlevel: 2,
-            },
-        ];
-        if (sparkline !== undefined) {
-            const lineSeries = {
-                type: 'line',
-                data: [...series.values],
-                zlevel: 1,
-                symbol: 'none',
-                animation: false,
-                lineStyle: {
-                    color: '#FFFFFF',
-                    opacity: 0.6,
-                },
-                areaStyle: {
-                    color: '#FFFFFF',
-                    opacity: 0.3,
-                },
-                silent: true,
-            };
-            const mergedSeries = (0, lodash_es_1.merge)(lineSeries, sparkline);
-            statSeries.push(mergedSeries);
-        }
-        const option = {
-            title: {
-                show: false,
-            },
-            grid: [
-                {
-                    show: true,
-                    backgroundColor: backgroundColor,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    left: 0,
-                    containLabel: false,
-                    borderWidth: 0,
-                },
-                {
-                    show: false,
-                    top: '45%',
-                    right: 0,
-                    bottom: 0,
-                    left: 0,
-                    containLabel: false,
-                },
-            ],
-            xAxis: {
-                type: 'time',
-                show: false,
-                boundaryGap: false,
-                gridIndex: 1, // sparkline grid
-            },
-            yAxis: {
-                type: 'value',
-                show: false,
-                gridIndex: 1,
-            },
-            tooltip: {
-                show: false,
-            },
-            series: statSeries,
-            textStyle: {
-                color: backgroundColor === 'transparent' ? theme.palette.text.primary : '#FFFFFF',
-                fontSize: 25,
-                lineHeight: 18,
-                fontFamily: '"Lato", sans-serif',
-                fontWeight: 'bold',
-            },
-            media: [
-                {
-                    query: {
-                        maxWidth: 150,
-                    },
-                    option: {
-                        textStyle: {
-                            fontSize: 12,
-                        },
-                    },
-                },
-                {
-                    query: {
-                        minWidth: 150,
-                    },
-                    option: {
-                        textStyle: {
-                            fontSize: `max(14px, ${baseFontSize}px)`,
-                            lineHeight: Math.min(16, baseFontSize * 1.2),
-                        },
-                    },
-                },
-            ],
-        };
-        return option;
-    }, [data, height, theme, unit, width, sparkline, backgroundColor]);
-    return ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
-            width: width,
-            height: height,
-        }, option: option }));
-}
-exports.StatChart = StatChart;

package/dist/model/graph-model.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/model/graph-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}