@perses-dev/components 0.38.0 → 0.40.0

package/dist/cjs/theme/palette/colors/green.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "green", {
     enumerable: true,
-    get: ()=>green
+    get: function() {
+        return green;
+    }
 });
 const green = {
     50: '#EAF9F1',

package/dist/cjs/theme/palette/colors/grey.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "grey", {
     enumerable: true,
-    get: ()=>grey
+    get: function() {
+        return grey;
+    }
 });
 const grey = {
     50: '#F0F1F6',

package/dist/cjs/theme/palette/colors/index.js

@@ -14,22 +14,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./blue"), exports);
-_exportStar(require("./common"), exports);
-_exportStar(require("./green"), exports);
-_exportStar(require("./grey"), exports);
-_exportStar(require("./orange"), exports);
-_exportStar(require("./purple"), exports);
-_exportStar(require("./red"), exports);
-_exportStar(require("./types"), exports);
-function _exportStar(from, to) {
+_export_star(require("./blue"), exports);
+_export_star(require("./common"), exports);
+_export_star(require("./green"), exports);
+_export_star(require("./grey"), exports);
+_export_star(require("./orange"), exports);
+_export_star(require("./purple"), exports);
+_export_star(require("./red"), exports);
+_export_star(require("./types"), exports);
+function _export_star(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];
-            }
-        });
+        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/theme/palette/colors/orange.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "orange", {
     enumerable: true,
-    get: ()=>orange
+    get: function() {
+        return orange;
+    }
 });
 const orange = {
     50: '#FFF5E8',

package/dist/cjs/theme/palette/colors/purple.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "purple", {
     enumerable: true,
-    get: ()=>purple
+    get: function() {
+        return purple;
+    }
 });
 const purple = {
     50: '#EFE9FD',

package/dist/cjs/theme/palette/colors/red.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "red", {
     enumerable: true,
-    get: ()=>red
+    get: function() {
+        return red;
+    }
 });
 const red = {
     50: '#FDEDED',

package/dist/cjs/theme/palette/error.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "error", {
     enumerable: true,
-    get: ()=>error
+    get: function() {
+        return error;
+    }
 });
 const _colors = require("./colors");
 const error = (mode)=>{

package/dist/cjs/theme/palette/grey.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "greyOption", {
     enumerable: true,
-    get: ()=>greyOption
+    get: function() {
+        return greyOption;
+    }
 });
 const _grey = require("./colors/grey");
 const greyOption = (mode)=>{

package/dist/cjs/theme/palette/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./palette-options"), exports);
-function _exportStar(from, to) {
+_export_star(require("./palette-options"), exports);
+function _export_star(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];
-            }
-        });
+        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/theme/palette/palette-options.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "getPaletteOptions", {
     enumerable: true,
-    get: ()=>getPaletteOptions
+    get: function() {
+        return getPaletteOptions;
+    }
 });
 const _text = require("./text");
 const _background = require("./background");

package/dist/cjs/theme/palette/primary.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "primary", {
     enumerable: true,
-    get: ()=>primary
+    get: function() {
+        return primary;
+    }
 });
 const _colors = require("./colors");
 const primary = (mode)=>{

package/dist/cjs/theme/palette/secondary.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "secondary", {
     enumerable: true,
-    get: ()=>secondary
+    get: function() {
+        return secondary;
+    }
 });
 const _colors = require("./colors");
 const secondary = (mode)=>{

package/dist/cjs/theme/palette/success.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "success", {
     enumerable: true,
-    get: ()=>success
+    get: function() {
+        return success;
+    }
 });
 const _colors = require("./colors");
 const success = (mode)=>{

package/dist/cjs/theme/palette/text.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "text", {
     enumerable: true,
-    get: ()=>text
+    get: function() {
+        return text;
+    }
 });
 const _colors = require("./colors");
 const text = (mode)=>{

package/dist/cjs/theme/palette/warning.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "warning", {
     enumerable: true,
-    get: ()=>warning
+    get: function() {
+        return warning;
+    }
 });
 const _colors = require("./colors");
 const warning = (mode)=>{

package/dist/cjs/theme/theme.js

@@ -16,12 +16,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "getTheme", {
     enumerable: true,
-    get: ()=>getTheme
+    get: function() {
+        return getTheme;
+    }
 });
 const _material = require("@mui/material");
 const _alert = require("./component-overrides/alert");
 const _paper = require("./component-overrides/paper");
-const _paletteOptions = require("./palette/palette-options");
+const _paletteoptions = require("./palette/palette-options");
 const _typography = require("./typography");
 const getModalBackgroundStyle = ({ theme  })=>{
     const backgroundStyle = theme.palette.mode === 'light' ? {} : {
@@ -34,7 +36,7 @@ const getModalBackgroundStyle = ({ theme  })=>{
 };
 function getTheme(mode) {
     const theme = (0, _material.createTheme)({
-        palette: (0, _paletteOptions.getPaletteOptions)(mode),
+        palette: (0, _paletteoptions.getPaletteOptions)(mode),
         typography: _typography.typography,
         mixins: {},
         components

package/dist/cjs/theme/typography.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "typography", {
     enumerable: true,
-    get: ()=>typography
+    get: function() {
+        return typography;
+    }
 });
 require("@fontsource/lato/300.css");
 require("@fontsource/lato/400.css");

package/dist/cjs/utils/axis.js

@@ -21,19 +21,23 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getYAxes: ()=>getYAxes,
-    getDateRange: ()=>getDateRange
+    getFormattedAxis: function() {
+        return getFormattedAxis;
+    },
+    getDateRange: function() {
+        return getDateRange;
+    }
 });
-const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
 const _core = require("@perses-dev/core");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function getYAxes(yAxis, unit) {
+function getFormattedAxis(axis, unit) {
     // TODO: support alternate yAxis that shows on right side
-    const Y_AXIS_DEFAULT = {
+    const AXIS_DEFAULT = {
         type: 'value',
         boundaryGap: [
             0,
@@ -46,7 +50,7 @@ function getYAxes(yAxis, unit) {
         }
     };
     return [
-        (0, _merge.default)(Y_AXIS_DEFAULT, yAxis)
+        (0, _merge.default)(AXIS_DEFAULT, axis)
     ];
 }
 function getDateRange(data) {

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

@@ -21,12 +21,32 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    enableDataZoom: ()=>enableDataZoom,
-    restoreChart: ()=>restoreChart,
-    clearHighlightedSeries: ()=>clearHighlightedSeries,
-    getPointInGrid: ()=>getPointInGrid,
-    batchDispatchNearbySeriesActions: ()=>batchDispatchNearbySeriesActions
+    enableDataZoom: function() {
+        return enableDataZoom;
+    },
+    restoreChart: function() {
+        return restoreChart;
+    },
+    clearHighlightedSeries: function() {
+        return clearHighlightedSeries;
+    },
+    getPointInGrid: function() {
+        return getPointInGrid;
+    },
+    batchDispatchNearbySeriesActions: function() {
+        return batchDispatchNearbySeriesActions;
+    },
+    checkCrosshairPinnedStatus: function() {
+        return checkCrosshairPinnedStatus;
+    },
+    getClosestTimestamp: function() {
+        return getClosestTimestamp;
+    },
+    getClosestTimestampInFullDataset: function() {
+        return getClosestTimestampInFullDataset;
+    }
 });
+const _model = require("../model");
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
@@ -115,3 +135,37 @@ function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasized
         });
     }
 }
+function checkCrosshairPinnedStatus(seriesMapping) {
+    var _seriesMapping_;
+    const isCrosshairPinned = ((_seriesMapping_ = seriesMapping[seriesMapping.length - 1]) === null || _seriesMapping_ === void 0 ? void 0 : _seriesMapping_.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/combine-sx.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "combineSx", {
     enumerable: true,
-    get: ()=>combineSx
+    get: function() {
+        return combineSx;
+    }
 });
 function combineSx(...sxProps) {
     return sxProps.flatMap((sx)=>{

package/dist/cjs/utils/component-ids.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useId", {
     enumerable: true,
-    get: ()=>useId
+    get: function() {
+        return useId;
+    }
 });
 const _react = require("react");
 function useId(prefix) {

package/dist/cjs/utils/format.js

@@ -21,13 +21,21 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    dateFormatOptionsWithTimeZone: ()=>dateFormatOptionsWithTimeZone,
-    formatWithTimeZone: ()=>formatWithTimeZone,
-    getFormattedDate: ()=>getFormattedDate,
-    getFormattedAxisLabel: ()=>getFormattedAxisLabel
+    dateFormatOptionsWithTimeZone: function() {
+        return dateFormatOptionsWithTimeZone;
+    },
+    formatWithTimeZone: function() {
+        return formatWithTimeZone;
+    },
+    getFormattedDate: function() {
+        return getFormattedDate;
+    },
+    getFormattedAxisLabel: function() {
+        return getFormattedAxisLabel;
+    }
 });
-const _dateFnsTz = require("date-fns-tz");
-const _dateFns = require("date-fns");
+const _datefnstz = require("date-fns-tz");
+const _datefns = require("date-fns");
 function dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone) {
     /*
    * if timeZone is provided, and is not local|browser,
@@ -51,9 +59,9 @@ function formatWithTimeZone(date, formatString, timeZone) {
    * otherwise, format without timeZone option, defaulting to browser timeZone setting
    */ const lowerTimeZone = timeZone === null || timeZone === void 0 ? void 0 : timeZone.toLowerCase();
     if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
-        return (0, _dateFns.format)(date, formatString);
+        return (0, _datefns.format)(date, formatString);
     } else {
-        return (0, _dateFnsTz.formatInTimeZone)(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
+        return (0, _datefnstz.formatInTimeZone)(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
     }
 }
 function getFormattedDate(value, rangeMs, timeZone) {

package/dist/cjs/utils/index.js

@@ -14,20 +14,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./axis"), exports);
-_exportStar(require("./chart-actions"), exports);
-_exportStar(require("./combine-sx"), exports);
-_exportStar(require("./component-ids"), exports);
-_exportStar(require("./format"), exports);
-_exportStar(require("./theme-gen"), exports);
-function _exportStar(from, to) {
+_export_star(require("./axis"), exports);
+_export_star(require("./chart-actions"), exports);
+_export_star(require("./combine-sx"), exports);
+_export_star(require("./component-ids"), exports);
+_export_star(require("./format"), exports);
+_export_star(require("./theme-gen"), exports);
+function _export_star(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];
-            }
-        });
+        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/utils/mathjs.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "round", {
     enumerable: true,
-    get: ()=>round
+    get: function() {
+        return round;
+    }
 });
 const _mathjs = require("mathjs");
 // This ensures we get a minimal mathjs bundle for just what we need (see https://mathjs.org/docs/custom_bundling.html)

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

@@ -16,10 +16,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "generateChartsTheme", {
     enumerable: true,
-    get: ()=>generateChartsTheme
+    get: function() {
+        return generateChartsTheme;
+    }
 });
-const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
-function _interopRequireDefault(obj) {
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -29,9 +31,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, 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;
+    var _muiTheme_palette_text, _muiTheme_palette, _muiTheme_palette_action, _muiTheme_palette1, _muiTheme_palette_action1, _muiTheme_palette_designSystem, _muiTheme_palette_designSystem1;
+    var _muiTheme_palette_text_primary;
+    const primaryTextColor = (_muiTheme_palette_text_primary = (_muiTheme_palette_text = muiTheme.palette.text) === null || _muiTheme_palette_text === void 0 ? void 0 : _muiTheme_palette_text.primary) !== null && _muiTheme_palette_text_primary !== void 0 ? _muiTheme_palette_text_primary : DEFAULT_TEXT_COLOR;
     const muiConvertedTheme = {
         title: {
             show: false
@@ -158,8 +160,8 @@ function generateChartsTheme(muiTheme, echartsTheme, /**
             pageTextStyle: {
                 color: muiTheme.palette.grey[600]
             },
-            pageIconColor: muiTheme === null || muiTheme === void 0 ? void 0 : (ref1 = muiTheme.palette) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.action) === null || ref2 === void 0 ? void 0 : ref2.active,
-            pageIconInactiveColor: muiTheme === null || muiTheme === void 0 ? void 0 : (ref3 = muiTheme.palette) === null || ref3 === void 0 ? void 0 : (ref4 = ref3.action) === null || ref4 === void 0 ? void 0 : ref4.disabled
+            pageIconColor: muiTheme === null || muiTheme === void 0 ? void 0 : (_muiTheme_palette = muiTheme.palette) === null || _muiTheme_palette === void 0 ? void 0 : (_muiTheme_palette_action = _muiTheme_palette.action) === null || _muiTheme_palette_action === void 0 ? void 0 : _muiTheme_palette_action.active,
+            pageIconInactiveColor: muiTheme === null || muiTheme === void 0 ? void 0 : (_muiTheme_palette1 = muiTheme.palette) === null || _muiTheme_palette1 === void 0 ? void 0 : (_muiTheme_palette_action1 = _muiTheme_palette1.action) === null || _muiTheme_palette_action1 === void 0 ? void 0 : _muiTheme_palette_action1.disabled
         },
         toolbox: {
             show: true,
@@ -170,8 +172,8 @@ function generateChartsTheme(muiTheme, echartsTheme, /**
             }
         },
         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],
+            backgroundColor: (_muiTheme_palette_designSystem = muiTheme.palette.designSystem) === null || _muiTheme_palette_designSystem === void 0 ? void 0 : _muiTheme_palette_designSystem.grey[800],
+            borderColor: (_muiTheme_palette_designSystem1 = muiTheme.palette.designSystem) === null || _muiTheme_palette_designSystem1 === void 0 ? void 0 : _muiTheme_palette_designSystem1.grey[800],
             textStyle: {
                 color: '#fff',
                 fontSize: 11

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,OAAOA,SAASC,aAAa,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAiB5E,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,SAAQ,EAAEC,YAAW,EAAEC,eAAgB,MAAK,EAAE,GAAGH;IAEzD,MAAM,CAACI,yBAAyBC,2BAA2B,GAAGP,SAAmC;IAEjG,MAAMQ,MAAMT,QAAQ;QAClB,OAAO;YACLK;YACAC;YACAC;YACAC;QACF;IACF,GAAG;QAACH;QAAaC;QAAeC;QAAyBC;KAA2B;IAEpF,qBAAO,KAACE,mBAAmBC;QAASC,OAAOH;kBAAML;;AACnD;AAEA,OAAO,MAAMM,mCAAqBZ,cAA6Ce,WAAW;AAE1F,OAAO,SAASC;IACd,MAAML,MAAMV,WAAWW;IACvB,IAAID,QAAQI,WAAW;QACrB,MAAM,IAAIE,MAAM;IAClB;IACA,OAAON;AACT;AAEA,OAAO,SAASO;IACd,MAAMP,MAAMK;IACZ,OAAOL,IAAIJ;AACb"}