@perses-dev/components 0.37.2 → 0.39.0

package/dist/cjs/utils/chart-actions.js

@@ -23,8 +23,14 @@ function _export(target, all) {
 _export(exports, {
     enableDataZoom: ()=>enableDataZoom,
     restoreChart: ()=>restoreChart,
-    clearHighlightedSeries: ()=>clearHighlightedSeries
+    clearHighlightedSeries: ()=>clearHighlightedSeries,
+    getPointInGrid: ()=>getPointInGrid,
+    batchDispatchNearbySeriesActions: ()=>batchDispatchNearbySeriesActions,
+    checkCrosshairPinnedStatus: ()=>checkCrosshairPinnedStatus,
+    getClosestTimestamp: ()=>getClosestTimestamp,
+    getClosestTimestampInFullDataset: ()=>getClosestTimestampInFullDataset
 });
+const _model = require("../model");
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
@@ -55,3 +61,95 @@ function clearHighlightedSeries(chart, totalSeries) {
         }
     }
 }
+function getPointInGrid(cursorCoordX, cursorCoordY, chart) {
+    if (chart === undefined) {
+        return null;
+    }
+    const pointInPixel = [
+        cursorCoordX,
+        cursorCoordY
+    ];
+    if (!chart.containPixel('grid', pointInPixel)) {
+        return null;
+    }
+    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+    return pointInGrid;
+}
+function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints) {
+    // Accounts for multiple series that are rendered direct on top of eachother.
+    // Only applies select state to the datapoint that is visible to avoid color mismatch.
+    const lastEmphasizedDatapoint = duplicateDatapoints.length > 0 ? duplicateDatapoints[duplicateDatapoints.length - 1] : emphasizedDatapoints[emphasizedDatapoints.length - 1];
+    if (lastEmphasizedDatapoint !== undefined) {
+        // Corresponds to select options inside getTimeSeries util.
+        // https://echarts.apache.org/en/option.html#series-line.select.itemStyle
+        chart.dispatchAction({
+            type: 'select',
+            seriesIndex: lastEmphasizedDatapoint.seriesIndex,
+            dataIndex: lastEmphasizedDatapoint.dataIndex,
+            // Shared crosshair should not emphasize datapoints on adjacent charts.
+            escapeConnect: true
+        });
+    }
+    // Clears emphasis state of all lines that are not emphasized.
+    // Emphasized is a subset of just the nearby series that are closest to cursor.
+    chart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: nonEmphasizedSeriesIndexes
+    });
+    // https://echarts.apache.org/en/api.html#action.highlight
+    if (emphasizedSeriesIndexes.length > 0) {
+        // Fadeout opacity of all series not closest to cursor.
+        chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: emphasizedSeriesIndexes,
+            notBlur: false,
+            escapeConnect: true
+        });
+    } else {
+        // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
+        chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: nearbySeriesIndexes,
+            notBlur: true,
+            escapeConnect: true
+        });
+        // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting
+        chart.dispatchAction({
+            type: 'toggleSelect'
+        });
+    }
+}
+function checkCrosshairPinnedStatus(seriesMapping) {
+    var ref;
+    const isCrosshairPinned = ((ref = seriesMapping[seriesMapping.length - 1]) === null || ref === void 0 ? void 0 : ref.name) === _model.PINNED_CROSSHAIR_SERIES_NAME;
+    return isCrosshairPinned;
+}
+function getClosestTimestamp(timeSeriesValues, cursorX) {
+    if (timeSeriesValues === undefined || cursorX === undefined) {
+        return null;
+    }
+    let currentClosestTimestamp = null;
+    let currentClosestDistance = Infinity;
+    for (const [timestamp] of timeSeriesValues){
+        const distance = Math.abs(timestamp - cursorX);
+        if (distance < currentClosestDistance) {
+            currentClosestTimestamp = timestamp;
+            currentClosestDistance = distance;
+        }
+    }
+    return currentClosestTimestamp;
+}
+function getClosestTimestampInFullDataset(data, cursorX) {
+    if (cursorX === undefined) {
+        return null;
+    }
+    const totalSeries = data.length;
+    let closestTimestamp = null;
+    for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
+        const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;
+        if (currentDataset == null) break;
+        const currentValues = currentDataset.values;
+        closestTimestamp = getClosestTimestamp(currentValues, cursorX);
+    }
+    return closestTimestamp;
+}

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

@@ -29,9 +29,9 @@ function generateChartsTheme(muiTheme, echartsTheme, /**
    * The id of the container that will have the chart tooltip appended to it.
    * By default, chart tooltip uses the body of the top-level document object.
    */ tooltipPortalContainerId) {
-    var ref, ref1, ref2, ref3, ref4;
-    var ref5;
-    const primaryTextColor = (ref5 = (ref = muiTheme.palette.text) === null || ref === void 0 ? void 0 : ref.primary) !== null && ref5 !== void 0 ? ref5 : DEFAULT_TEXT_COLOR;
+    var ref, ref1, ref2, ref3, ref4, ref5, ref6;
+    var ref7;
+    const primaryTextColor = (ref7 = (ref = muiTheme.palette.text) === null || ref === void 0 ? void 0 : ref.primary) !== null && ref7 !== void 0 ? ref7 : DEFAULT_TEXT_COLOR;
     const muiConvertedTheme = {
         title: {
             show: false
@@ -83,7 +83,7 @@ function generateChartsTheme(muiTheme, echartsTheme, /**
                 lineStyle: {
                     width: 0.5,
                     color: muiTheme.palette.grey[300],
-                    opacity: 0.6
+                    opacity: 0.4
                 }
             },
             splitArea: {
@@ -120,7 +120,7 @@ function generateChartsTheme(muiTheme, echartsTheme, /**
                 lineStyle: {
                     width: 0.5,
                     color: muiTheme.palette.grey[300],
-                    opacity: 0.6
+                    opacity: 0.4
                 }
             },
             splitArea: {
@@ -169,7 +169,30 @@ function generateChartsTheme(muiTheme, echartsTheme, /**
                 borderColor: primaryTextColor
             }
         },
-        tooltip: {},
+        tooltip: {
+            backgroundColor: (ref5 = muiTheme.palette.designSystem) === null || ref5 === void 0 ? void 0 : ref5.grey[800],
+            borderColor: (ref6 = muiTheme.palette.designSystem) === null || ref6 === void 0 ? void 0 : ref6.grey[800],
+            textStyle: {
+                color: '#fff',
+                fontSize: 11
+            }
+        },
+        axisPointer: {
+            lineStyle: {
+                color: muiTheme.palette.grey[500]
+            }
+        },
+        markLine: {
+            symbol: 'none',
+            symbolSize: 0,
+            itemStyle: {
+                color: muiTheme.palette.grey[500]
+            },
+            lineStyle: {
+                type: 'dashed',
+                width: 1
+            }
+        },
         line: {
             showSymbol: false,
             symbol: 'circle',
@@ -188,7 +211,12 @@ function generateChartsTheme(muiTheme, echartsTheme, /**
             barMaxWidth: 150,
             itemStyle: {
                 borderWidth: 0,
+                borderRadius: 0,
                 borderColor: muiTheme.palette.grey[300]
+            },
+            label: {
+                show: false,
+                color: primaryTextColor
             }
         },
         gauge: {

package/dist/context/ChartsProvider.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PersesChartsTheme } from '../model';
+import { CursorCoordinates } from '../TimeSeriesTooltip';
+export interface ChartsProviderProps {
+    chartsTheme: PersesChartsTheme;
+    enablePinning?: boolean;
+    children?: React.ReactNode;
+}
+export interface SharedChartsState {
+    chartsTheme: PersesChartsTheme;
+    enablePinning: boolean;
+    lastTooltipPinnedCoords: CursorCoordinates | null;
+    setLastTooltipPinnedCoords: (lastTooltipPinnedCoords: CursorCoordinates | null) => void;
+}
+export declare function ChartsProvider(props: ChartsProviderProps): JSX.Element;
+export declare const ChartsThemeContext: React.Context<SharedChartsState | undefined>;
+export declare function useChartsContext(): SharedChartsState;
+export declare function useChartsTheme(): PersesChartsTheme;
+//# sourceMappingURL=ChartsProvider.d.ts.map

package/dist/context/ChartsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartsProvider.d.ts","sourceRoot":"","sources":["../../src/context/ChartsProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,iBAAiB,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,iBAAiB,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,uBAAuB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClD,0BAA0B,EAAE,CAAC,uBAAuB,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACzF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAexD;AAED,eAAO,MAAM,kBAAkB,8CAA0D,CAAC;AAE1F,wBAAgB,gBAAgB,IAAI,iBAAiB,CAMpD;AAED,wBAAgB,cAAc,IAAI,iBAAiB,CAGlD"}

package/dist/context/{ChartsThemeProvider.js → ChartsProvider.js}

@@ -11,21 +11,39 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
-export function ChartsThemeProvider(props) {
-    const { children , chartsTheme  } = props;
+import React, { createContext, useContext, useMemo, useState } from 'react';
+export function ChartsProvider(props) {
+    const { children , chartsTheme , enablePinning =false  } = props;
+    const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = useState(null);
+    const ctx = useMemo(()=>{
+        return {
+            chartsTheme,
+            enablePinning,
+            lastTooltipPinnedCoords,
+            setLastTooltipPinnedCoords
+        };
+    }, [
+        chartsTheme,
+        enablePinning,
+        lastTooltipPinnedCoords,
+        setLastTooltipPinnedCoords
+    ]);
     return /*#__PURE__*/ _jsx(ChartsThemeContext.Provider, {
-        value: chartsTheme,
+        value: ctx,
         children: children
     });
 }
 export const ChartsThemeContext = /*#__PURE__*/ createContext(undefined);
-export function useChartsTheme() {
+export function useChartsContext() {
     const ctx = useContext(ChartsThemeContext);
     if (ctx === undefined) {
         throw new Error('No ChartsThemeContext found. Did you forget a Provider?');
     }
     return ctx;
 }
+export function useChartsTheme() {
+    const ctx = useChartsContext();
+    return ctx.chartsTheme;
+}
 
-//# sourceMappingURL=ChartsThemeProvider.js.map
+//# sourceMappingURL=ChartsProvider.js.map

package/dist/context/ChartsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/ChartsProvider.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { createContext, useContext, useMemo, useState } from 'react';\nimport { PersesChartsTheme } from '../model';\nimport { CursorCoordinates } from '../TimeSeriesTooltip';\n\nexport interface ChartsProviderProps {\n  chartsTheme: PersesChartsTheme;\n  enablePinning?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface SharedChartsState {\n  chartsTheme: PersesChartsTheme;\n  enablePinning: boolean;\n  lastTooltipPinnedCoords: CursorCoordinates | null;\n  setLastTooltipPinnedCoords: (lastTooltipPinnedCoords: CursorCoordinates | null) => void;\n}\n\nexport function ChartsProvider(props: ChartsProviderProps) {\n  const { children, chartsTheme, enablePinning = false } = props;\n\n  const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n\n  const ctx = useMemo(() => {\n    return {\n      chartsTheme,\n      enablePinning,\n      lastTooltipPinnedCoords,\n      setLastTooltipPinnedCoords,\n    };\n  }, [chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords]);\n\n  return <ChartsThemeContext.Provider value={ctx}>{children}</ChartsThemeContext.Provider>;\n}\n\nexport const ChartsThemeContext = createContext<SharedChartsState | undefined>(undefined);\n\nexport function useChartsContext(): SharedChartsState {\n  const ctx = useContext(ChartsThemeContext);\n  if (ctx === undefined) {\n    throw new Error('No ChartsThemeContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\nexport function useChartsTheme(): PersesChartsTheme {\n  const ctx = useChartsContext();\n  return ctx.chartsTheme;\n}\n"],"names":["React","createContext","useContext","useMemo","useState","ChartsProvider","props","children","chartsTheme","enablePinning","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","ctx","ChartsThemeContext","Provider","value","undefined","useChartsContext","Error","useChartsTheme"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAiB5E,OAAO,SAASC,cAAc,CAACC,KAA0B,EAAE;IACzD,MAAM,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,aAAa,EAAG,KAAK,CAAA,EAAE,GAAGH,KAAK,AAAC;IAE/D,MAAM,CAACI,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGP,QAAQ,CAA2B,IAAI,CAAC,AAAC;IAEvG,MAAMQ,GAAG,GAAGT,OAAO,CAAC,IAAM;QACxB,OAAO;YACLK,WAAW;YACXC,aAAa;YACbC,uBAAuB;YACvBC,0BAA0B;SAC3B,CAAC;IACJ,CAAC,EAAE;QAACH,WAAW;QAAEC,aAAa;QAAEC,uBAAuB;QAAEC,0BAA0B;KAAC,CAAC,AAAC;IAEtF,qBAAO,KAACE,kBAAkB,CAACC,QAAQ;QAACC,KAAK,EAAEH,GAAG;kBAAGL,QAAQ;MAA+B,CAAC;AAC3F,CAAC;AAED,OAAO,MAAMM,kBAAkB,iBAAGZ,aAAa,CAAgCe,SAAS,CAAC,CAAC;AAE1F,OAAO,SAASC,gBAAgB,GAAsB;IACpD,MAAML,GAAG,GAAGV,UAAU,CAACW,kBAAkB,CAAC,AAAC;IAC3C,IAAID,GAAG,KAAKI,SAAS,EAAE;QACrB,MAAM,IAAIE,KAAK,CAAC,yDAAyD,CAAC,CAAC;IAC7E,CAAC;IACD,OAAON,GAAG,CAAC;AACb,CAAC;AAED,OAAO,SAASO,cAAc,GAAsB;IAClD,MAAMP,GAAG,GAAGK,gBAAgB,EAAE,AAAC;IAC/B,OAAOL,GAAG,CAACJ,WAAW,CAAC;AACzB,CAAC"}

package/dist/context/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ChartsProvider';
+export * from './SnackbarProvider';
+export * from './TimeZoneProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/dist/context/index.js

@@ -0,0 +1,17 @@
+// 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.
+export * from './ChartsProvider';
+export * from './SnackbarProvider';
+export * from './TimeZoneProvider';
+
+//# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ChartsProvider';\nexport * from './SnackbarProvider';\nexport * from './TimeZoneProvider';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './BarChart';
 export * from './ColorPicker';
 export * from './ContentWithLegend';
 export * from './DateTimeRangePicker';
@@ -12,8 +13,10 @@ export * from './InfoTooltip';
 export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
+export * from './ModeSelector';
 export * from './OptionsEditorLayout';
 export * from './SettingsAutocomplete';
+export * from './SortSelector';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
@@ -21,9 +24,7 @@ export * from './TimeChart';
 export * from './TimeSeriesTooltip';
 export * from './UnitSelector';
 export * from './YAxisLabel';
-export * from './context/ChartsThemeProvider';
-export * from './context/TimeZoneProvider';
-export * from './context/SnackbarProvider';
+export * from './context';
 export * from './utils';
 export * from './model';
 export * from './test-utils';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -10,6 +10,7 @@
 // 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.
+export * from './BarChart';
 export * from './ColorPicker';
 export * from './ContentWithLegend';
 export * from './DateTimeRangePicker';
@@ -24,8 +25,10 @@ export * from './InfoTooltip';
 export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
+export * from './ModeSelector';
 export * from './OptionsEditorLayout';
 export * from './SettingsAutocomplete';
+export * from './SortSelector';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
@@ -33,9 +36,7 @@ export * from './TimeChart';
 export * from './TimeSeriesTooltip';
 export * from './UnitSelector';
 export * from './YAxisLabel';
-export * from './context/ChartsThemeProvider';
-export * from './context/TimeZoneProvider';
-export * from './context/SnackbarProvider';
+export * from './context';
 export * from './utils';
 export * from './model';
 export * from './test-utils';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './BarChart';\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './ModeSelector';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './SortSelector';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}

package/dist/model/graph.d.ts

@@ -1,5 +1,5 @@
 import { TimeSeriesValueTuple } from '@perses-dev/core';
-import { LineSeriesOption } from 'echarts/charts';
+import { LineSeriesOption, BarSeriesOption } from 'echarts/charts';
 import { LegendItem } from '../Legend';
 export declare const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
 export declare type UnixTimeMs = number;
@@ -12,8 +12,9 @@ export declare type EChartsValues = number | null | '-';
 export interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {
     data: EChartsValues[];
 }
-export declare type TimeChartSeriesMapping = LineSeriesOption[];
+export declare type TimeChartSeriesMapping = TimeSeriesOption[];
 export declare type TimeChartLegendItems = LegendItem[];
+export declare type TimeSeriesOption = LineSeriesOption | BarSeriesOption;
 export declare type EChartsDataFormat = {
     timeSeries: LegacyTimeSeries[];
     xAxis: number[];
@@ -35,4 +36,12 @@ export declare type ChartInstance = {
      */
     clearHighlightedSeries: () => void;
 };
+export declare const PINNED_CROSSHAIR_SERIES_NAME = "Pinned Crosshair";
+export declare const DEFAULT_PINNED_CROSSHAIR: LineSeriesOption;
+export interface DatapointInfo {
+    dataIndex: number;
+    seriesIndex: number;
+    seriesName: string;
+    yValue: number;
+}
 //# sourceMappingURL=graph.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGvC,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtE,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAGD,oBAAY,sBAAsB,GAAG,gBAAgB,EAAE,CAAC;AACxD,oBAAY,oBAAoB,GAAG,UAAU,EAAE,CAAC;AAGhD,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,oBAAY,sBAAsB,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAAC"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGvC,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtE,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAID,oBAAY,sBAAsB,GAAG,gBAAgB,EAAE,CAAC;AACxD,oBAAY,oBAAoB,GAAG,UAAU,EAAE,CAAC;AAEhD,oBAAY,gBAAgB,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAIlE,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,oBAAY,sBAAsB,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,wBAAwB,EAAE,gBAuBtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/model/graph.js

@@ -12,5 +12,30 @@
 // limitations under the License.
 // adjust display when there are many time series to help with performance
 export const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
+export const PINNED_CROSSHAIR_SERIES_NAME = 'Pinned Crosshair';
+export const DEFAULT_PINNED_CROSSHAIR = {
+    name: PINNED_CROSSHAIR_SERIES_NAME,
+    type: 'line',
+    // https://echarts.apache.org/en/option.html#series-line.markLine
+    markLine: {
+        data: [],
+        lineStyle: {
+            type: 'dashed',
+            width: 2
+        },
+        emphasis: {
+            lineStyle: {
+                width: 2,
+                opacity: 1
+            }
+        },
+        blur: {
+            lineStyle: {
+                width: 2,
+                opacity: 1
+            }
+        }
+    }
+};
 
 //# sourceMappingURL=graph.js.map

package/dist/model/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TimeSeriesValueTuple } from '@perses-dev/core';\nimport { LineSeriesOption } from 'echarts/charts';\nimport { LegendItem } from '../Legend';\n\n// adjust display when there are many time series to help with performance\nexport const OPTIMIZED_MODE_SERIES_LIMIT = 1000;\n\nexport type UnixTimeMs = number;\n\nexport interface GraphSeries {\n  name: string;\n  values: TimeSeriesValueTuple[];\n  id?: string;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  data: EChartsValues[];\n}\n\n// TODO: Continue to simplify TimeChart types, fix legend and thresholds\nexport type TimeChartSeriesMapping = LineSeriesOption[];\nexport type TimeChartLegendItems = LegendItem[];\n\n// TODO: Rename to LegacyEChartsDataFormat\nexport type EChartsDataFormat = {\n  timeSeries: LegacyTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n// Intentionally making this an object to start because it is plausible we will\n// want to support focusing by other attributes (e.g. index, name) in the future,\n// and starting with an object will make adding them a non-breaking change.\nexport type ChartInstanceFocusOpts = {\n  id?: string; // LineChart uses id\n  name?: string; // TimeChart uses name\n};\n\nexport type ChartInstance = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: ChartInstanceFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAMjC,0EAA0E;AAC1E,OAAO,MAAMA,2BAA2B,GAAG,IAAI,CAAC"}
+{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TimeSeriesValueTuple } from '@perses-dev/core';\nimport { LineSeriesOption, BarSeriesOption } from 'echarts/charts';\nimport { LegendItem } from '../Legend';\n\n// adjust display when there are many time series to help with performance\nexport const OPTIMIZED_MODE_SERIES_LIMIT = 1000;\n\nexport type UnixTimeMs = number;\n\nexport interface GraphSeries {\n  name: string;\n  values: TimeSeriesValueTuple[];\n  id?: string;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  data: EChartsValues[];\n}\n\n// Used for TimeChart dataset support, each time series returned is mapped to series options using datasetIndex\n// - https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\nexport type TimeChartSeriesMapping = TimeSeriesOption[];\nexport type TimeChartLegendItems = LegendItem[];\n\nexport type TimeSeriesOption = LineSeriesOption | BarSeriesOption;\n\n// [DEPRECATED] used for legacy LineChart 'category' axis.\n// May delete in future when embed users migrate to TimeChart.\nexport type EChartsDataFormat = {\n  timeSeries: LegacyTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n// Intentionally making this an object to start because it is plausible we will\n// want to support focusing by other attributes (e.g. index, name) in the future,\n// and starting with an object will make adding them a non-breaking change.\nexport type ChartInstanceFocusOpts = {\n  id?: string; // LineChart uses id\n  name?: string; // TimeChart uses name\n};\n\nexport type ChartInstance = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: ChartInstanceFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n\nexport const PINNED_CROSSHAIR_SERIES_NAME = 'Pinned Crosshair';\n\nexport const DEFAULT_PINNED_CROSSHAIR: LineSeriesOption = {\n  name: PINNED_CROSSHAIR_SERIES_NAME,\n  type: 'line',\n  // https://echarts.apache.org/en/option.html#series-line.markLine\n  markLine: {\n    data: [],\n    lineStyle: {\n      type: 'dashed',\n      width: 2,\n    },\n    emphasis: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n    blur: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n  },\n};\n\nexport interface DatapointInfo {\n  dataIndex: number;\n  seriesIndex: number;\n  seriesName: string;\n  yValue: number;\n}\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT","PINNED_CROSSHAIR_SERIES_NAME","DEFAULT_PINNED_CROSSHAIR","name","type","markLine","data","lineStyle","width","emphasis","opacity","blur"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAMjC,0EAA0E;AAC1E,OAAO,MAAMA,2BAA2B,GAAG,IAAI,CAAC;AAqDhD,OAAO,MAAMC,4BAA4B,GAAG,kBAAkB,CAAC;AAE/D,OAAO,MAAMC,wBAAwB,GAAqB;IACxDC,IAAI,EAAEF,4BAA4B;IAClCG,IAAI,EAAE,MAAM;IACZ,iEAAiE;IACjEC,QAAQ,EAAE;QACRC,IAAI,EAAE,EAAE;QACRC,SAAS,EAAE;YACTH,IAAI,EAAE,QAAQ;YACdI,KAAK,EAAE,CAAC;SACT;QACDC,QAAQ,EAAE;YACRF,SAAS,EAAE;gBACTC,KAAK,EAAE,CAAC;gBACRE,OAAO,EAAE,CAAC;aACX;SACF;QACDC,IAAI,EAAE;YACJJ,SAAS,EAAE;gBACTC,KAAK,EAAE,CAAC;gBACRE,OAAO,EAAE,CAAC;aACX;SACF;KACF;CACF,CAAC"}

package/dist/test-utils/theme.d.ts

@@ -1,3 +1,5 @@
 import { PersesChartsTheme } from '../model';
+import { SharedChartsState } from '../context';
 export declare const testChartsTheme: PersesChartsTheme;
+export declare const mockChartsContext: SharedChartsState;
 //# sourceMappingURL=theme.d.ts.map

package/dist/test-utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/test-utils/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,eAAe,EAAE,iBAgB7B,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/test-utils/theme.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAgB,MAAM,UAAU,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAoB/C,eAAO,MAAM,eAAe,EAAE,iBAAyF,CAAC;AAExH,eAAO,MAAM,iBAAiB,EAAE,iBAK/B,CAAC"}

package/dist/test-utils/theme.js

@@ -10,26 +10,33 @@
 // 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.
-export const testChartsTheme = {
-    echartsTheme: {},
-    noDataOption: {},
-    sparkline: {
-        width: 1,
-        color: '#000000'
+import { createTheme as createMuiTheme } from '@mui/material';
+import { generateChartsTheme } from '../utils';
+// app specific echarts option overrides
+const TEST_ECHARTS_THEME_OVERRIDES = {
+    textStyle: {
+        fontFamily: 'Lato'
     },
-    container: {
-        padding: {
-            default: 12
+    categoryAxis: {
+        splitLine: {
+            show: false
         }
     },
-    thresholds: {
-        defaultColor: '#59CC8D',
-        palette: [
-            '#438FEB',
-            '#FFB249',
-            '#EE6C6C'
-        ]
+    timeAxis: {
+        splitLine: {
+            show: false
+        }
+    },
+    bar: {
+        barCategoryGap: 2
     }
 };
+export const testChartsTheme = generateChartsTheme(createMuiTheme({}), TEST_ECHARTS_THEME_OVERRIDES);
+export const mockChartsContext = {
+    chartsTheme: testChartsTheme,
+    enablePinning: false,
+    lastTooltipPinnedCoords: null,
+    setLastTooltipPinnedCoords: ()=>null
+};
 
 //# sourceMappingURL=theme.js.map

package/dist/test-utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/theme.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PersesChartsTheme } from '../model';\n\nexport const testChartsTheme: PersesChartsTheme = {\n  echartsTheme: {},\n  noDataOption: {},\n  sparkline: {\n    width: 1,\n    color: '#000000',\n  },\n  container: {\n    padding: {\n      default: 12,\n    },\n  },\n  thresholds: {\n    defaultColor: '#59CC8D',\n    palette: ['#438FEB', '#FFB249', '#EE6C6C'],\n  },\n};\n"],"names":["testChartsTheme","echartsTheme","noDataOption","sparkline","width","color","container","padding","default","thresholds","defaultColor","palette"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,OAAO,MAAMA,eAAe,GAAsB;IAChDC,YAAY,EAAE,EAAE;IAChBC,YAAY,EAAE,EAAE;IAChBC,SAAS,EAAE;QACTC,KAAK,EAAE,CAAC;QACRC,KAAK,EAAE,SAAS;KACjB;IACDC,SAAS,EAAE;QACTC,OAAO,EAAE;YACPC,OAAO,EAAE,EAAE;SACZ;KACF;IACDC,UAAU,EAAE;QACVC,YAAY,EAAE,SAAS;QACvBC,OAAO,EAAE;YAAC,SAAS;YAAE,SAAS;YAAE,SAAS;SAAC;KAC3C;CACF,CAAC"}
+{"version":3,"sources":["../../src/test-utils/theme.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createTheme as createMuiTheme } from '@mui/material';\nimport { PersesChartsTheme, EChartsTheme } from '../model';\nimport { generateChartsTheme } from '../utils';\nimport { SharedChartsState } from '../context';\n\n// app specific echarts option overrides\nconst TEST_ECHARTS_THEME_OVERRIDES: EChartsTheme = {\n  textStyle: { fontFamily: 'Lato' },\n  categoryAxis: {\n    splitLine: {\n      show: false,\n    },\n  },\n  timeAxis: {\n    splitLine: {\n      show: false,\n    },\n  },\n  bar: {\n    barCategoryGap: 2,\n  },\n};\n\nexport const testChartsTheme: PersesChartsTheme = generateChartsTheme(createMuiTheme({}), TEST_ECHARTS_THEME_OVERRIDES);\n\nexport const mockChartsContext: SharedChartsState = {\n  chartsTheme: testChartsTheme,\n  enablePinning: false,\n  lastTooltipPinnedCoords: null,\n  setLastTooltipPinnedCoords: () => null,\n};\n"],"names":["createTheme","createMuiTheme","generateChartsTheme","TEST_ECHARTS_THEME_OVERRIDES","textStyle","fontFamily","categoryAxis","splitLine","show","timeAxis","bar","barCategoryGap","testChartsTheme","mockChartsContext","chartsTheme","enablePinning","lastTooltipPinnedCoords","setLastTooltipPinnedCoords"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,IAAIC,cAAc,QAAQ,eAAe,CAAC;AAE9D,SAASC,mBAAmB,QAAQ,UAAU,CAAC;AAG/C,wCAAwC;AACxC,MAAMC,4BAA4B,GAAiB;IACjDC,SAAS,EAAE;QAAEC,UAAU,EAAE,MAAM;KAAE;IACjCC,YAAY,EAAE;QACZC,SAAS,EAAE;YACTC,IAAI,EAAE,KAAK;SACZ;KACF;IACDC,QAAQ,EAAE;QACRF,SAAS,EAAE;YACTC,IAAI,EAAE,KAAK;SACZ;KACF;IACDE,GAAG,EAAE;QACHC,cAAc,EAAE,CAAC;KAClB;CACF,AAAC;AAEF,OAAO,MAAMC,eAAe,GAAsBV,mBAAmB,CAACD,cAAc,CAAC,EAAE,CAAC,EAAEE,4BAA4B,CAAC,CAAC;AAExH,OAAO,MAAMU,iBAAiB,GAAsB;IAClDC,WAAW,EAAEF,eAAe;IAC5BG,aAAa,EAAE,KAAK;IACpBC,uBAAuB,EAAE,IAAI;IAC7BC,0BAA0B,EAAE,IAAM,IAAI;CACvC,CAAC"}

package/dist/utils/axis.d.ts

@@ -1,12 +1,12 @@
-import type { YAXisComponentOption } from 'echarts';
+import type { XAXisComponentOption, YAXisComponentOption } from 'echarts';
 import { UnitOptions } from '@perses-dev/core';
-export declare function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions): ({
+export declare function getFormattedAxis(axis?: YAXisComponentOption | XAXisComponentOption, unit?: UnitOptions): ({
     type: string;
     boundaryGap: (string | number)[];
     axisLabel: {
         formatter: (value: number) => string;
     };
-} & (YAXisComponentOption | undefined))[];
+} & (YAXisComponentOption | XAXisComponentOption | undefined))[];
 /**
  * Calculate date range, used as a fallback when xAxis time range not passed as prop
  */

package/dist/utils/axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../src/utils/axis.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAe,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK5D,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,EAAE,IAAI,CAAC,EAAE,WAAW;;;;2BAMhD,MAAM;;0CAM9B;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C"}
+{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../src/utils/axis.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,EAAe,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK5D,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,IAAI,CAAC,EAAE,WAAW;;;;2BAM9E,MAAM;;iEAM9B;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C"}

package/dist/utils/axis.js

@@ -13,10 +13,10 @@
 import merge from 'lodash/merge';
 import { formatValue } from '@perses-dev/core';
 /*
- * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future
- */ export function getYAxes(yAxis, unit) {
+ * Populate yAxis or xAxis properties, returns an Array since multiple axes will be supported in the future
+ */ export function getFormattedAxis(axis, unit) {
     // TODO: support alternate yAxis that shows on right side
-    const Y_AXIS_DEFAULT = {
+    const AXIS_DEFAULT = {
         type: 'value',
         boundaryGap: [
             0,
@@ -29,7 +29,7 @@ import { formatValue } from '@perses-dev/core';
         }
     };
     return [
-        merge(Y_AXIS_DEFAULT, yAxis)
+        merge(AXIS_DEFAULT, axis)
     ];
 }
 /**

package/dist/utils/axis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/axis.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport merge from 'lodash/merge';\nimport type { YAXisComponentOption } from 'echarts';\nimport { formatValue, UnitOptions } from '@perses-dev/core';\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const Y_AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n"],"names":["merge","formatValue","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","type","boundaryGap","axisLabel","formatter","value","getDateRange","data","defaultRange","length","lastDatum","undefined"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,KAAK,MAAM,cAAc,CAAC;AAEjC,SAASC,WAAW,QAAqB,kBAAkB,CAAC;AAE5D;;CAEC,GACD,OAAO,SAASC,QAAQ,CAACC,KAA4B,EAAEC,IAAkB,EAAE;IACzE,yDAAyD;IACzD,MAAMC,cAAc,GAAG;QACrBC,IAAI,EAAE,OAAO;QACbC,WAAW,EAAE;AAAC,aAAC;YAAE,KAAK;SAAC;QACvBC,SAAS,EAAE;YACTC,SAAS,EAAE,CAACC,KAAa,GAAK;gBAC5B,OAAOT,WAAW,CAACS,KAAK,EAAEN,IAAI,CAAC,CAAC;YAClC,CAAC;SACF;KACF,AAAC;IACF,OAAO;QAACJ,KAAK,CAACK,cAAc,EAAEF,KAAK,CAAC;KAAC,CAAC;AACxC,CAAC;AAED;;CAEC,GACD,OAAO,SAASQ,YAAY,CAACC,IAAc,EAAE;IAC3C,MAAMC,YAAY,GAAG,OAAO,AAAC,EAAC,aAAa;IAC3C,IAAID,IAAI,CAACE,MAAM,KAAK,CAAC,EAAE,OAAOD,YAAY,CAAC;IAC3C,MAAME,SAAS,GAAGH,IAAI,CAACA,IAAI,CAACE,MAAM,GAAG,CAAC,CAAC,AAAC;IACxC,IAAIF,IAAI,CAAC,CAAC,CAAC,KAAKI,SAAS,IAAID,SAAS,KAAKC,SAAS,EAAE,OAAOH,YAAY,CAAC;IAC1E,OAAOE,SAAS,GAAGH,IAAI,CAAC,CAAC,CAAC,CAAC;AAC7B,CAAC"}
+{"version":3,"sources":["../../src/utils/axis.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport merge from 'lodash/merge';\nimport type { XAXisComponentOption, YAXisComponentOption } from 'echarts';\nimport { formatValue, UnitOptions } from '@perses-dev/core';\n\n/*\n * Populate yAxis or xAxis properties, returns an Array since multiple axes will be supported in the future\n */\nexport function getFormattedAxis(axis?: YAXisComponentOption | XAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(AXIS_DEFAULT, axis)];\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n"],"names":["merge","formatValue","getFormattedAxis","axis","unit","AXIS_DEFAULT","type","boundaryGap","axisLabel","formatter","value","getDateRange","data","defaultRange","length","lastDatum","undefined"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,KAAK,MAAM,cAAc,CAAC;AAEjC,SAASC,WAAW,QAAqB,kBAAkB,CAAC;AAE5D;;CAEC,GACD,OAAO,SAASC,gBAAgB,CAACC,IAAkD,EAAEC,IAAkB,EAAE;IACvG,yDAAyD;IACzD,MAAMC,YAAY,GAAG;QACnBC,IAAI,EAAE,OAAO;QACbC,WAAW,EAAE;AAAC,aAAC;YAAE,KAAK;SAAC;QACvBC,SAAS,EAAE;YACTC,SAAS,EAAE,CAACC,KAAa,GAAK;gBAC5B,OAAOT,WAAW,CAACS,KAAK,EAAEN,IAAI,CAAC,CAAC;YAClC,CAAC;SACF;KACF,AAAC;IACF,OAAO;QAACJ,KAAK,CAACK,YAAY,EAAEF,IAAI,CAAC;KAAC,CAAC;AACrC,CAAC;AAED;;CAEC,GACD,OAAO,SAASQ,YAAY,CAACC,IAAc,EAAE;IAC3C,MAAMC,YAAY,GAAG,OAAO,AAAC,EAAC,aAAa;IAC3C,IAAID,IAAI,CAACE,MAAM,KAAK,CAAC,EAAE,OAAOD,YAAY,CAAC;IAC3C,MAAME,SAAS,GAAGH,IAAI,CAACA,IAAI,CAACE,MAAM,GAAG,CAAC,CAAC,AAAC;IACxC,IAAIF,IAAI,CAAC,CAAC,CAAC,KAAKI,SAAS,IAAID,SAAS,KAAKC,SAAS,EAAE,OAAOH,YAAY,CAAC;IAC1E,OAAOE,SAAS,GAAGH,IAAI,CAAC,CAAC,CAAC,CAAC;AAC7B,CAAC"}