@perses-dev/components 0.4.2 → 0.5.0

package/dist/cjs/InfoTooltip/InfoTooltip.test.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const dom_1 = require("@testing-library/dom");
+const InfoTooltip_1 = require("./InfoTooltip");
+describe('InfoTooltip', () => {
+    const title = 'Tooltip Title';
+    const description = 'this is a tooltip';
+    it('should render title and description', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(InfoTooltip_1.InfoTooltip, { title: title, description: description, children: (0, jsx_runtime_1.jsx)("div", { children: "tooltipAnchor" }) }));
+        const tooltipAnchor = dom_1.screen.getByText('tooltipAnchor');
+        user_event_1.default.hover(tooltipAnchor);
+        await dom_1.screen.findByText(title);
+        dom_1.screen.findByText(description);
+    });
+});

package/dist/cjs/InfoTooltip/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InfoTooltip"), exports);

package/dist/cjs/LineChart/LineChart.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const core_1 = require("@perses-dev/core");
+const material_1 = require("@mui/material");
+const core_2 = require("echarts/core");
+const charts_1 = require("echarts/charts");
+const components_1 = require("echarts/components");
+const renderers_1 = require("echarts/renderers");
+const EChart_1 = require("../EChart");
+const graph_1 = require("../model/graph");
+const units_1 = require("../model/units");
+const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
+const tooltip_model_1 = require("../Tooltip/tooltip-model");
+const Tooltip_1 = require("../Tooltip/Tooltip");
+const utils_1 = require("./utils");
+(0, core_2.use)([
+    charts_1.LineChart,
+    components_1.GridComponent,
+    components_1.DataZoomComponent,
+    components_1.MarkAreaComponent,
+    components_1.MarkLineComponent,
+    components_1.MarkPointComponent,
+    components_1.TitleComponent,
+    components_1.ToolboxComponent,
+    components_1.TooltipComponent,
+    components_1.LegendComponent,
+    components_1.VisualMapComponent,
+    renderers_1.CanvasRenderer,
+]);
+function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom }) {
+    const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
+    const chartRef = (0, react_1.useRef)();
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(true);
+    const handleEvents = (0, react_1.useMemo)(() => {
+        return {
+            // TODO: use legendselectchanged event to fix tooltip when legend selected
+            datazoom: (params) => {
+                var _a, _b;
+                if (onDataZoom === undefined || params.batch[0] === undefined)
+                    return;
+                const startIndex = (_a = params.batch[0].startValue) !== null && _a !== void 0 ? _a : 0;
+                const endIndex = (_b = params.batch[0].endValue) !== null && _b !== void 0 ? _b : data.xAxis.length - 1;
+                const xAxisStartValue = data.xAxis[startIndex];
+                const xAxisEndValue = data.xAxis[endIndex];
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue,
+                        startIndex,
+                        endIndex,
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            },
+        };
+    }, [data, onDataZoom]);
+    if (chartRef.current !== undefined) {
+        (0, utils_1.enableDataZoom)(chartRef.current);
+    }
+    const handleOnDoubleClick = () => {
+        if (chartRef.current !== undefined) {
+            (0, utils_1.restoreChart)(chartRef.current);
+        }
+    };
+    const handleOnMouseDown = (event) => {
+        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
+        if (event.target instanceof HTMLCanvasElement) {
+            setShowTooltip(false);
+        }
+    };
+    const handleOnMouseUp = () => {
+        setShowTooltip(true);
+    };
+    const handleOnMouseEnter = () => {
+        setShowTooltip(true);
+    };
+    const handleOnMouseLeave = () => {
+        setShowTooltip(false);
+    };
+    const option = (0, core_1.useDeepMemo)(() => {
+        var _a;
+        if (data.timeSeries === undefined)
+            return {};
+        if (data.timeSeries === null || data.timeSeries.length === 0)
+            return chartsTheme.noDataOption;
+        const showPointsOnHover = data.timeSeries.length < graph_1.PROGRESSIVE_MODE_SERIES_LIMIT;
+        const rangeMs = (_a = data.rangeMs) !== null && _a !== void 0 ? _a : (0, utils_1.getDateRange)(data.xAxis);
+        const option = {
+            series: data.timeSeries,
+            xAxis: {
+                type: 'category',
+                data: data.xAxis,
+                max: data.xAxisMax,
+                axisLabel: {
+                    formatter: (value) => {
+                        return (0, utils_1.getFormattedDate)(value, rangeMs);
+                    },
+                },
+            },
+            yAxis: {
+                type: 'value',
+                boundaryGap: [0, '10%'],
+                axisLabel: {
+                    formatter: (value) => {
+                        return (0, units_1.formatValue)(value, unit);
+                    },
+                },
+            },
+            animation: false,
+            tooltip: {
+                show: showPointsOnHover,
+                trigger: 'axis',
+                showContent: false,
+                axisPointer: {
+                    type: 'none',
+                },
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none',
+                    },
+                },
+            },
+            grid,
+            legend,
+            visualMap,
+        };
+        return option;
+    }, [data, grid, legend, visualMap]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            height,
+        }, onDoubleClick: handleOnDoubleClick, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, tooltipData: tooltip_model_1.emptyTooltipData, chartData: data, wrapLabels: true })), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+                    width: '100%',
+                    height: '100%',
+                }, option: option, theme: chartsTheme.themeName, onEvents: handleEvents, _instance: chartRef })] }));
+}
+exports.LineChart = LineChart;

package/dist/cjs/LineChart/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LineChart"), exports);

package/dist/cjs/LineChart/utils.js

@@ -0,0 +1,72 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormattedDate = exports.getDateRange = exports.restoreChart = exports.enableDataZoom = void 0;
+// enable dataZoom without requring user to click toolbox icon
+function enableDataZoom(chart) {
+    const chartModel = chart['_model'];
+    if (chartModel === undefined)
+        return;
+    if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {
+        // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')
+        if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {
+            chart.dispatchAction({
+                type: 'takeGlobalCursor',
+                key: 'dataZoomSelect',
+                dataZoomSelectActive: true,
+            });
+        }
+    }
+}
+exports.enableDataZoom = enableDataZoom;
+// restore chart to original state before zoom or other actions were dispatched
+// TODO: support incremental unzoom instead of restore to original state
+function restoreChart(chart) {
+    chart.dispatchAction({
+        type: 'restore', // https://echarts.apache.org/en/api.html#events.restore
+    });
+}
+exports.restoreChart = restoreChart;
+// fallback when xAxis time range not passed as prop
+function getDateRange(data) {
+    const defaultRange = 3600000; // hour in ms
+    if (data.length === 0)
+        return defaultRange;
+    const lastDatum = data[data.length - 1];
+    if (data[0] === undefined || lastDatum === undefined)
+        return defaultRange;
+    return lastDatum - data[0];
+}
+exports.getDateRange = getDateRange;
+// determines time granularity for axis labels, defaults to hh:mm
+function getFormattedDate(value, rangeMs) {
+    const dateFormatOptions = {
+        hour: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h23',
+    };
+    const thirtyMinMs = 1800000;
+    const dayMs = 86400000;
+    if (rangeMs <= thirtyMinMs) {
+        dateFormatOptions.second = 'numeric';
+    }
+    else if (rangeMs >= dayMs) {
+        dateFormatOptions.month = 'numeric';
+        dateFormatOptions.day = 'numeric';
+    }
+    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    // remove comma when month / day present
+    return DATE_FORMAT.format(value).replace(/, /g, ' ');
+}
+exports.getFormattedDate = getFormattedDate;

package/dist/cjs/StatChart/StatChart.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const lodash_es_1 = require("lodash-es");
+const core_1 = require("echarts/core");
+const charts_1 = require("echarts/charts");
+const charts_2 = require("echarts/charts");
+const components_1 = require("echarts/components");
+const renderers_1 = require("echarts/renderers");
+const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
+const units_1 = require("../model/units");
+const EChart_1 = require("../EChart");
+(0, core_1.use)([
+    charts_1.GaugeChart,
+    charts_2.LineChart,
+    components_1.GridComponent,
+    components_1.DatasetComponent,
+    components_1.TitleComponent,
+    components_1.TooltipComponent,
+    renderers_1.CanvasRenderer,
+]);
+const PANEL_PADDING = 32;
+const MIN_VALUE_SIZE = 12;
+const MAX_VALUE_SIZE = 36;
+function StatChart(props) {
+    const { width, height, data, unit, sparkline } = props;
+    const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
+    const formattedValue = data.calculatedValue === undefined ? 'No data' : (0, units_1.formatValue)(data.calculatedValue, unit);
+    const option = (0, react_1.useMemo)(() => {
+        if (data.seriesData === undefined)
+            return chartsTheme.noDataOption;
+        const series = data.seriesData;
+        const statSeries = [];
+        if (sparkline !== undefined) {
+            const lineSeries = {
+                type: 'line',
+                data: [...series.values],
+                zlevel: 1,
+                symbol: 'none',
+                animation: false,
+                silent: true,
+            };
+            const mergedSeries = (0, lodash_es_1.merge)(lineSeries, sparkline);
+            statSeries.push(mergedSeries);
+        }
+        const option = {
+            title: {
+                show: false,
+            },
+            grid: {
+                show: false,
+                top: '35%',
+                right: 0,
+                bottom: 0,
+                left: 0,
+                containLabel: false,
+            },
+            xAxis: {
+                type: 'time',
+                show: false,
+                boundaryGap: false,
+            },
+            yAxis: {
+                type: 'value',
+                show: false,
+            },
+            tooltip: {
+                show: false,
+            },
+            series: statSeries,
+        };
+        return option;
+    }, [data, chartsTheme, sparkline]);
+    const isLargePanel = width > 250 && height > 180;
+    // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
+    const charactersAdjust = formattedValue.length;
+    const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h3", sx: (theme) => ({
+                    color: theme.palette.text.primary,
+                    fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
+                }), children: formattedValue }), sparkline !== undefined && ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+                    width: width + PANEL_PADDING,
+                    height: height,
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                }, option: option, theme: chartsTheme.themeName, renderer: "svg" }))] }));
+}
+exports.StatChart = StatChart;

package/dist/cjs/StatChart/StatChart.test.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
+const StatChart_1 = require("./StatChart");
+describe('StatChart', () => {
+    const contentDimensions = {
+        width: 200,
+        height: 200,
+    };
+    const unit = {
+        kind: 'Decimal',
+        decimal_places: 2,
+    };
+    const mockStatData = {
+        calculatedValue: 7.72931659687181,
+        name: 'Example Stat Chart',
+        seriesData: {
+            name: '(((count(count(node_cpu_seconds_total{job="example"}) by (cpu))',
+            values: [
+                [1654006170000, 7.736401673473903],
+                [1654006185000, 7.733891213538757],
+                [1654006200000, 7.731101813010433],
+                [1654006215000, 7.722454672079215],
+                [1654006230000, 7.722733612256738],
+            ],
+        },
+    };
+    const exampleChartsTheme = {
+        themeName: 'perses',
+        echartsTheme: {},
+        noDataOption: {},
+        sparkline: {
+            width: 1,
+            color: '#000000',
+        },
+    };
+    describe('Render default options (no sparkline)', () => {
+        it('should render', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ChartsThemeProvider_1.ChartsThemeProvider, { themeName: "perses", chartsTheme: exampleChartsTheme, children: (0, jsx_runtime_1.jsx)(StatChart_1.StatChart, { width: contentDimensions.width, height: contentDimensions.height, data: mockStatData, unit: unit }) }));
+            expect(react_1.screen.getByText('7.73')).toBeInTheDocument();
+        });
+    });
+});

package/dist/cjs/StatChart/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./StatChart"), exports);

package/dist/cjs/Tooltip/focused-series.test.js

@@ -0,0 +1,57 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });
+const focused_series_1 = require("./focused-series");
+describe('getNearbySeries', () => {
+    const chartData = {
+        timeSeries: [
+            {
+                type: 'line',
+                name: 'env="demo", instance="demo.do.prometheus", job="node", mode="test"',
+                color: 'hsla(-1365438424,50%,50%,0.8)',
+                data: [
+                    0.0002315202231525094, 0.00022873082287300112, 0.00023152022315149463, 0.00023152022315149463,
+                    0.00022873082287300112,
+                ],
+                symbol: 'circle',
+            },
+            {
+                type: 'line',
+                name: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
+                color: 'hsla(286664040,50%,50%,0.8)',
+                data: [0.05245188284519867, 0.0524463040446356, 0.0524463040446356, 0.05247140864723438, 0.052482566248230646],
+                symbol: 'circle',
+            },
+        ],
+        xAxis: [1654007865000, 1654007880000, 1654007895000, 1654007910000, 1654007925000],
+        rangeMs: 60000,
+    };
+    // https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel
+    const pointInGrid = [2, 0.0560655737704918]; // converted from chart.getZr() mousemove coordinates
+    const yBuffer = 0.02; // calculated from y axis interval
+    const focusedSeriesOutput = [
+        {
+            date: 'May 31, 2022, 2:38:15 PM',
+            datumIdx: 2,
+            markerColor: 'hsla(286664040,50%,50%,0.8)',
+            seriesName: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
+            seriesIdx: 1,
+            x: 1654007895000,
+            y: 0.0524463040446356,
+        },
+    ];
+    it('should return focused series data for points nearby the cursor', () => {
+        expect((0, focused_series_1.getNearbySeries)(chartData, pointInGrid, yBuffer)).toEqual(focusedSeriesOutput);
+    });
+});

package/dist/cjs/Tooltip/index.js

@@ -0,0 +1,30 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tooltip"), exports);
+__exportStar(require("./SeriesMarker"), exports);

package/dist/cjs/context/ChartsThemeProvider.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChartsTheme = exports.ChartsThemeContext = exports.ChartsThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const echarts_1 = require("echarts");
+function ChartsThemeProvider(props) {
+    const { children, themeName, chartsTheme } = props;
+    if (chartsTheme !== undefined && chartsTheme.echartsTheme !== undefined) {
+        // register ECharts theme to be used in individual charts, see: https://apache.github.io/echarts-handbook/en/concepts/style/#theme
+        (0, echarts_1.registerTheme)(themeName, chartsTheme.echartsTheme);
+    }
+    return (0, jsx_runtime_1.jsx)(exports.ChartsThemeContext.Provider, { value: chartsTheme, children: children });
+}
+exports.ChartsThemeProvider = ChartsThemeProvider;
+exports.ChartsThemeContext = (0, react_1.createContext)(undefined);
+function useChartsTheme() {
+    const ctx = (0, react_1.useContext)(exports.ChartsThemeContext);
+    if (ctx === undefined) {
+        throw new Error('No ChartsThemeContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.useChartsTheme = useChartsTheme;

package/dist/cjs/index.js

@@ -29,9 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./EChart"), exports);
 __exportStar(require("./ErrorAlert"), exports);
 __exportStar(require("./ErrorBoundary"), exports);
-__exportStar(require("./GaugeChart"), exports);
+__exportStar(require("./InfoTooltip"), exports);
 __exportStar(require("./LineChart"), exports);
+__exportStar(require("./GaugeChart"), exports);
 __exportStar(require("./StatChart"), exports);
-__exportStar(require("./utils/combine-sx"), exports);
-__exportStar(require("./model/graph-model"), exports);
-__exportStar(require("./model/units"), exports);
+__exportStar(require("./context/ChartsThemeProvider"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./model"), exports);