@perses-dev/components 0.36.1 → 0.37.0

package/dist/cjs/TimeChart/TimeChart.js

@@ -0,0 +1,319 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TimeChart", {
+    enumerable: true,
+    get: ()=>TimeChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _dateFnsTz = require("date-fns-tz");
+const _core = require("@perses-dev/core");
+const _core1 = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _echart = require("../EChart");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _utils = require("../utils");
+const _timeSeriesTooltip = require("../TimeSeriesTooltip");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
+(0, _core1.use)([
+    _charts.LineChart,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.DataZoomComponent,
+    _components.MarkAreaComponent,
+    _components.MarkLineComponent,
+    _components.MarkPointComponent,
+    _components.TitleComponent,
+    _components.ToolboxComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , tooltipConfig ={
+    wrapLabels: true
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+    var ref1;
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const chartRef = (0, _react.useRef)();
+    const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
+    const [isDragging, setIsDragging] = (0, _react.useState)(false);
+    const [startX, setStartX] = (0, _react.useState)(0);
+    const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    var ref2;
+    const totalSeries = (ref2 = data === null || data === void 0 ? void 0 : data.length) !== null && ref2 !== void 0 ? ref2 : 0;
+    let timeScale;
+    if (timeScaleProp === undefined) {
+        const commonTimeScale = (0, _core.getCommonTimeScale)(data);
+        if (commonTimeScale === undefined) {
+            // set default to past 5 years
+            const today = new Date();
+            const pastDate = new Date(today);
+            pastDate.setFullYear(today.getFullYear() - 5);
+            const todayMs = today.getTime();
+            const pastDateMs = pastDate.getTime();
+            timeScale = {
+                startMs: pastDateMs,
+                endMs: todayMs,
+                stepMs: 1,
+                rangeMs: todayMs - pastDateMs
+            };
+        } else {
+            timeScale = commonTimeScale;
+        }
+    } else {
+        timeScale = timeScaleProp;
+    }
+    (0, _react.useImperativeHandle)(ref, ()=>{
+        return {
+            highlightSeries ({ name  }) {
+                if (!chartRef.current) {
+                    // when chart undef, do not highlight series when hovering over legend
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: name
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // when chart undef, do not clear highlight series
+                    return;
+                }
+                (0, _utils.clearHighlightedSeries)(chartRef.current, totalSeries);
+            }
+        };
+    }, [
+        totalSeries
+    ]);
+    const handleEvents = (0, _react.useMemo)(()=>{
+        return {
+            datazoom: (params)=>{
+                if (onDataZoom === undefined) {
+                    setTimeout(()=>{
+                        // workaround so unpin happens after click event
+                        setTooltipPinnedCoords(null);
+                    }, 10);
+                }
+                if (onDataZoom === undefined || params.batch[0] === undefined) return;
+                const xAxisStartValue = params.batch[0].startValue;
+                const xAxisEndValue = params.batch[0].endValue;
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            }
+        };
+    }, [
+        onDataZoom,
+        setTooltipPinnedCoords
+    ]);
+    if (chartRef.current !== undefined) {
+        (0, _utils.enableDataZoom)(chartRef.current);
+    }
+    const { noDataOption  } = chartsTheme;
+    const option = (0, _react.useMemo)(()=>{
+        // TODO: fix loading state and noData variants
+        // if (data === undefined) return {};
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data === null || data.length === 0 && noDataVariant === 'message') return noDataOption;
+        // Utilizes ECharts dataset so raw data is separate from series option style properties
+        // https://apache.github.io/echarts-handbook/en/concepts/dataset/
+        const dataset = [];
+        const isLocalTimeZone = timeZone === 'local';
+        data.map((d, index)=>{
+            const values = d.values.map(([timestamp, value])=>{
+                const val = value === null ? '-' : value; // echarts use '-' to represent null data
+                return [
+                    isLocalTimeZone ? timestamp : (0, _dateFnsTz.utcToZonedTime)(timestamp, timeZone),
+                    val
+                ];
+            });
+            dataset.push({
+                id: index,
+                source: [
+                    ...values
+                ],
+                dimensions: [
+                    'time',
+                    'value'
+                ]
+            });
+        });
+        var _rangeMs;
+        const option = {
+            dataset: dataset,
+            series: seriesMapping,
+            xAxis: {
+                type: 'time',
+                min: isLocalTimeZone ? timeScale.startMs : (0, _dateFnsTz.utcToZonedTime)(timeScale.startMs, timeZone),
+                max: isLocalTimeZone ? timeScale.endMs : (0, _dateFnsTz.utcToZonedTime)(timeScale.endMs, timeZone),
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: (0, _utils.getFormattedAxisLabel)((_rangeMs = timeScale.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : 0)
+                }
+            },
+            yAxis: (0, _utils.getYAxes)(yAxis, unit),
+            animation: false,
+            tooltip: {
+                show: true,
+                trigger: 'axis',
+                showContent: false
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: true
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid
+        };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
+        return option;
+    }, [
+        data,
+        seriesMapping,
+        timeScale,
+        yAxis,
+        unit,
+        grid,
+        noDataOption,
+        __experimentalEChartsOptionsOverride,
+        noDataVariant,
+        timeZone
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            height
+        },
+        onClick: (e)=>{
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (e.target instanceof HTMLCanvasElement) {
+                setTooltipPinnedCoords((current)=>{
+                    if (current === null) {
+                        return {
+                            page: {
+                                x: e.pageX,
+                                y: e.pageY
+                            },
+                            client: {
+                                x: e.clientX,
+                                y: e.clientY
+                            },
+                            plotCanvas: {
+                                x: e.nativeEvent.offsetX,
+                                y: e.nativeEvent.offsetY
+                            },
+                            target: e.target
+                        };
+                    } else {
+                        return null;
+                    }
+                });
+            }
+        },
+        onMouseDown: (e)=>{
+            const { clientX  } = e;
+            setIsDragging(true);
+            setStartX(clientX);
+        },
+        onMouseMove: (e)=>{
+            // Allow clicking inside tooltip to copy labels.
+            if (!(e.target instanceof HTMLCanvasElement)) {
+                return;
+            }
+            const { clientX  } = e;
+            if (isDragging) {
+                const deltaX = clientX - startX;
+                if (deltaX > 0) {
+                    // Hide tooltip when user drags to zoom.
+                    setShowTooltip(false);
+                }
+            }
+        },
+        onMouseUp: ()=>{
+            setIsDragging(false);
+            setStartX(0);
+            setShowTooltip(true);
+        },
+        onMouseLeave: ()=>{
+            if (tooltipPinnedCoords === null) {
+                setShowTooltip(false);
+            }
+            if (chartRef.current !== undefined) {
+                (0, _utils.clearHighlightedSeries)(chartRef.current, totalSeries);
+            }
+        },
+        onMouseEnter: ()=>{
+            setShowTooltip(true);
+            if (chartRef.current !== undefined) {
+                (0, _utils.enableDataZoom)(chartRef.current);
+            }
+        },
+        onDoubleClick: (e)=>{
+            setTooltipPinnedCoords(null);
+            // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+            if (onDoubleClick === undefined) {
+                if (chartRef.current !== undefined) {
+                    (0, _utils.restoreChart)(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
+        children: [
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeChartTooltip, {
+                chartRef: chartRef,
+                data: data,
+                seriesMapping: seriesMapping,
+                wrapLabels: tooltipConfig.wrapLabels,
+                pinnedPos: tooltipPinnedCoords,
+                unit: unit
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                onEvents: handleEvents,
+                _instance: chartRef,
+                syncGroup: syncGroup
+            })
+        ]
+    });
+});

package/dist/cjs/TimeChart/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./TimeChart"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/TimeSeriesTooltip/{TimeSeriesTooltip.js → LineChartTooltip.js}

@@ -14,9 +14,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TimeSeriesTooltip", {
+Object.defineProperty(exports, "LineChartTooltip", {
     enumerable: true,
-    get: ()=>TimeSeriesTooltip
+    get: ()=>LineChartTooltip
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
@@ -32,7 +32,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TimeSeriesTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
@@ -45,7 +45,7 @@ const TimeSeriesTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeSeriesTool
     const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const cursorTransform = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
     // Get series nearby the cursor and pass into tooltip content children.
-    const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
+    const nearbySeries = (0, _nearbySeries.legacyGetNearbySeriesData)({
         mousePos,
         chartData,
         pinnedPos,

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -0,0 +1,87 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TimeChartTooltip", {
+    enumerable: true,
+    get: ()=>TimeChartTooltip
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
+const _tooltipModel = require("./tooltip-model");
+const _utils = require("./utils");
+const _nearbySeries = require("./nearby-series");
+const _tooltipHeader = require("./TooltipHeader");
+const _tooltipContent = require("./TooltipContent");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ chartRef , data , seriesMapping , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+    const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
+    const mousePos = (0, _tooltipModel.useMousePosition)();
+    const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
+    const isTooltipPinned = pinnedPos !== null;
+    if (mousePos === null || mousePos.target === null || data === null) return null;
+    // Ensure user is hovering over a chart before checking for nearby series.
+    if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
+    const chart = chartRef.current;
+    var ref;
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
+    const cursorTransform = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    // Get series nearby the cursor and pass into tooltip content children.
+    const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
+        mousePos,
+        data,
+        seriesMapping,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
+    if (nearbySeries.length === 0) {
+        return null;
+    }
+    const totalSeries = data.length;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            ref: tooltipRef,
+            sx: (theme)=>(0, _utils.getTooltipStyles)(theme, pinnedPos),
+            style: {
+                transform: cursorTransform
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
+                        nearbySeries: nearbySeries,
+                        totalSeries: totalSeries,
+                        isTooltipPinned: isTooltipPinned,
+                        showAllSeries: showAllSeries,
+                        onShowAllClick: (checked)=>setShowAllSeries(checked),
+                        onUnpinClick: onUnpinClick
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
+                        series: nearbySeries,
+                        wrapLabels: wrapLabels
+                    })
+                ]
+            })
+        })
+    });
+});

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -23,7 +23,7 @@ const _material = require("@mui/material");
 const _pin = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pin"));
 const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
 const _react = require("react");
-const _timeZoneProvider = require("../context/TimeZoneProvider");
+const _dateFns = require("date-fns");
 const _tooltipModel = require("./tooltip-model");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -32,7 +32,6 @@ function _interopRequireDefault(obj) {
 }
 const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
     var ref;
-    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
     var ref1;
     const seriesTimeMs = (ref1 = (ref = nearbySeries[0]) === null || ref === void 0 ? void 0 : ref.date) !== null && ref1 !== void 0 ? ref1 : null;
     if (seriesTimeMs === null) {
@@ -40,8 +39,8 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
     }
     const formatTimeSeriesHeader = (timeMs)=>{
         const date = new Date(timeMs);
-        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
-        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
+        const formattedDate = (0, _dateFns.format)(date, 'MMM dd, yyyy - ');
+        const formattedTime = (0, _dateFns.format)(date, 'HH:mm:ss');
         return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -14,10 +14,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./TimeSeriesTooltip"), exports);
+_exportStar(require("./LineChartTooltip"), exports);
 _exportStar(require("./SeriesInfo"), exports);
 _exportStar(require("./SeriesLabelsStack"), exports);
 _exportStar(require("./SeriesMarker"), exports);
+_exportStar(require("./TimeChartTooltip"), exports);
 _exportStar(require("./TooltipContent"), exports);
 _exportStar(require("./TooltipHeader"), exports);
 _exportStar(require("./nearby-series"), exports);