@perses-dev/components 0.38.0 → 0.40.0

package/dist/cjs/GaugeChart/index.js

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

@@ -16,12 +16,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "InfoTooltip", {
     enumerable: true,
-    get: ()=>InfoTooltip
+    get: function() {
+        return InfoTooltip;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -33,14 +35,14 @@ const InfoTooltip = ({ id , title , description , placement , children , enterDe
     //   can have a ref as a child.
     // We wrap in a `span` and not a `div` to minimize the impact on page layout
     // and styles.
-    const wrappedChildren = /*#__PURE__*/ (0, _jsxRuntime.jsx)("span", {
+    const wrappedChildren = /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
         children: children
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledTooltip, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
         placement: placement !== null && placement !== void 0 ? placement : 'top',
-        title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(TooltipContent, {
+        title: /*#__PURE__*/ (0, _jsxruntime.jsx)(TooltipContent, {
             title: title,
             description: description
         }),
@@ -50,9 +52,9 @@ const InfoTooltip = ({ id , title , description , placement , children , enterDe
     });
 };
 const TooltipContent = ({ title , description  })=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            title && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                 variant: "body2",
                 sx: (theme)=>({
                         color: theme.palette.text.primary,
@@ -60,7 +62,7 @@ const TooltipContent = ({ title , description  })=>{
                     }),
                 children: title
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                 variant: "caption",
                 sx: (theme)=>({
                         color: theme.palette.text.primary
@@ -70,7 +72,7 @@ const TooltipContent = ({ title , description  })=>{
         ]
     });
 };
-const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
+const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
         ...props,
         classes: {
             popper: className

package/dist/cjs/InfoTooltip/index.js

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

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "JSONEditor", {
     enumerable: true,
-    get: ()=>JSONEditor
+    get: function() {
+        return JSONEditor;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _reactCodemirror = /*#__PURE__*/ _interopRequireDefault(require("@uiw/react-codemirror"));
-const _langJson = require("@codemirror/lang-json");
+const _reactcodemirror = /*#__PURE__*/ _interop_require_default(require("@uiw/react-codemirror"));
+const _langjson = require("@codemirror/lang-json");
 const _lint = require("@codemirror/lint");
 const _material = require("@mui/material");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -38,15 +40,15 @@ function JSONEditor(props) {
     }, [
         props.value
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactCodemirror.default, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcodemirror.default, {
         ...props,
         style: {
             border: `1px solid ${theme.palette.divider}`
         },
         theme: isDarkMode ? 'dark' : 'light',
         extensions: [
-            (0, _langJson.json)(),
-            (0, _lint.linter)((0, _langJson.jsonParseLinter)()),
+            (0, _langjson.json)(),
+            (0, _lint.linter)((0, _langjson.jsonParseLinter)()),
             (0, _lint.lintGutter)()
         ],
         value: value,

package/dist/cjs/Legend/CompactLegend.js

@@ -16,14 +16,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "CompactLegend", {
     enumerable: true,
-    get: ()=>CompactLegend
+    get: function() {
+        return CompactLegend;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _listLegendItem = require("./ListLegendItem");
-const _legendModel = require("./legend-model");
+const _ListLegendItem = require("./ListLegendItem");
+const _legendmodel = require("./legend-model");
 function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         component: "ul",
         sx: {
             width: '100%',
@@ -37,10 +39,10 @@ function CompactLegend({ height , items , selectedItems , onLegendItemClick , on
             overflowY: 'scroll',
             margin: 0
         },
-        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ListLegendItem.ListLegendItem, {
                 item: item,
                 index: index,
-                isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
+                isVisuallySelected: (0, _legendmodel.isLegendItemVisuallySelected)(item, selectedItems),
                 onMouseOver: onItemMouseOver,
                 onMouseOut: onItemMouseOut,
                 onClick: onLegendItemClick,

package/dist/cjs/Legend/Legend.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Legend", {
     enumerable: true,
-    get: ()=>Legend
+    get: function() {
+        return Legend;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _immer = require("immer");
 const _core = require("@perses-dev/core");
-const _listLegend = require("./ListLegend");
-const _compactLegend = require("./CompactLegend");
-const _tableLegend = require("./TableLegend");
+const _ListLegend = require("./ListLegend");
+const _CompactLegend = require("./CompactLegend");
+const _TableLegend = require("./TableLegend");
 // When the number of items to display is above this number, it is likely to
 // cause performance issues in the browser. The legend will be displayed in a
 // format (list) that allows for virtualization to minimize the performance impact.
@@ -79,27 +81,27 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         onItemMouseOut
     };
     let legendContent;
-    if (mode === 'Table') {
-        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableLegend.TableLegend, {
+    if (mode === 'table') {
+        legendContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLegend.TableLegend, {
             ...commonLegendProps,
             onSelectedItemsChange: onSelectedItemsChange,
             width: width,
             ...tableProps
         });
-    } else if (options.position === 'Right' || needsVirtualization) {
-        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
+    } else if (options.position === 'right' || needsVirtualization) {
+        legendContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListLegend.ListLegend, {
             ...commonLegendProps,
             width: width,
             onLegendItemClick: onLegendItemClick
         });
     } else {
-        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+        legendContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CompactLegend.CompactLegend, {
             ...commonLegendProps,
             onLegendItemClick: onLegendItemClick
         });
     }
-    if (options.position === 'Right') {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    if (options.position === 'right') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             sx: {
                 width: width,
                 height: height,
@@ -111,7 +113,7 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         });
     }
     // Position bottom
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             width: width,
             height: height,

package/dist/cjs/Legend/LegendColorBadge.js

@@ -16,19 +16,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "LegendColorBadge", {
     enumerable: true,
-    get: ()=>LegendColorBadge
+    get: function() {
+        return LegendColorBadge;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
 const _utils = require("../utils");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const LegendColorBadge = /*#__PURE__*/ _react.default.memo(function LegendColorBadge({ color , sx , ...others }) {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         sx: (0, _utils.combineSx)({
             height: 4,

package/dist/cjs/Legend/ListLegend.js

@@ -16,27 +16,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ListLegend", {
     enumerable: true,
-    get: ()=>ListLegend
+    get: function() {
+        return ListLegend;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _reactVirtuoso = require("react-virtuoso");
-const _listLegendItem = require("./ListLegendItem");
-const _legendModel = require("./legend-model");
+const _jsxruntime = require("react/jsx-runtime");
+const _reactvirtuoso = require("react-virtuoso");
+const _ListLegendItem = require("./ListLegendItem");
+const _legendmodel = require("./legend-model");
 function ListLegend({ items , height , width , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {
         style: {
             height,
             width
         },
         data: items,
         itemContent: (index, item)=>{
-            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListLegendItem.ListLegendItem, {
                 item: item,
                 index: index,
                 truncateLabel: truncateLabels,
-                isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
+                isVisuallySelected: (0, _legendmodel.isLegendItemVisuallySelected)(item, selectedItems),
                 onClick: onLegendItemClick,
                 onMouseOver: onItemMouseOver,
                 onMouseOut: onItemMouseOut,

package/dist/cjs/Legend/ListLegendItem.js

@@ -16,13 +16,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ListLegendItem", {
     enumerable: true,
-    get: ()=>ListLegendItem
+    get: function() {
+        return ListLegendItem;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
 const _utils = require("../utils");
-const _legendColorBadge = require("./LegendColorBadge");
+const _LegendColorBadge = require("./LegendColorBadge");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -31,7 +33,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -75,9 +77,9 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }
     }
     const handleClick = (e)=>{
-        var ref;
+        var _item_onClick;
         onClick(e, item.id);
-        (ref = item.onClick) === null || ref === void 0 ? void 0 : ref.call(item, e);
+        (_item_onClick = item.onClick) === null || _item_onClick === void 0 ? void 0 : _item_onClick.call(item, e);
     };
     return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
         ...others,
@@ -105,16 +107,16 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         selected: isVisuallySelected,
         ref: ref,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                 sx: {
                     display: 'flex',
                     alignItems: 'center'
                 },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legendColorBadge.LegendColorBadge, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LegendColorBadge.LegendColorBadge, {
                     color: item.color
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ListItemText, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
                 primary: item.label,
                 primaryTypographyProps: {
                     noWrap: noWrap

package/dist/cjs/Legend/TableLegend.js

@@ -16,11 +16,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "TableLegend", {
     enumerable: true,
-    get: ()=>TableLegend
+    get: function() {
+        return TableLegend;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _table = require("../Table");
+const _Table = require("../Table");
 const COLUMNS = [
     {
         accessorKey: 'label',
@@ -29,7 +31,7 @@ const COLUMNS = [
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
-        cell: ({ getValue  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("span", {
+        cell: ({ getValue  })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                 title: getValue(),
                 children: getValue()
             })
@@ -61,7 +63,7 @@ function TableLegend({ items , selectedItems: initRowSelection , onSelectedItems
     }, [
         additionalColumns
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_table.Table, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Table.Table, {
         height: height,
         width: width,
         rowSelection: rowSelection,

package/dist/cjs/Legend/index.js

@@ -14,16 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./Legend"), exports);
-_exportStar(require("./legend-model"), exports);
-function _exportStar(from, to) {
+_export_star(require("./Legend"), exports);
+_export_star(require("./legend-model"), 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/Legend/legend-model.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "isLegendItemVisuallySelected", {
     enumerable: true,
-    get: ()=>isLegendItemVisuallySelected
+    get: function() {
+        return isLegendItemVisuallySelected;
+    }
 });
 function isLegendItemVisuallySelected(item, selectedItems) {
     // In the "ALL" case, technically all legend items are selected, but we do

package/dist/cjs/LineChart/LineChart.js

@@ -16,19 +16,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "LineChart", {
     enumerable: true,
-    get: ()=>LineChart
+    get: function() {
+        return LineChart;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _echart = require("../EChart");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _timeSeriesTooltip = require("../TimeSeriesTooltip");
-const _timeZoneProvider = require("../context/TimeZoneProvider");
+const _EChart = require("../EChart");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _TimeSeriesTooltip = require("../TimeSeriesTooltip");
+const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("../utils");
 (0, _core.use)([
     _charts.LineChart,
@@ -43,15 +45,13 @@ const _utils = require("../utils");
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
-    var ref1;
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , format , grid , legend , tooltipConfig =_TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
+    var _option_tooltip;
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
-    const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     (0, _react.useImperativeHandle)(ref, ()=>{
@@ -87,10 +87,10 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
-                var _startValue;
-                const startIndex = (_startValue = params.batch[0].startValue) !== null && _startValue !== void 0 ? _startValue : 0;
-                var _endValue;
-                const endIndex = (_endValue = params.batch[0].endValue) !== null && _endValue !== void 0 ? _endValue : data.xAxis.length - 1;
+                var _params_batch__startValue;
+                const startIndex = (_params_batch__startValue = params.batch[0].startValue) !== null && _params_batch__startValue !== void 0 ? _params_batch__startValue : 0;
+                var _params_batch__endValue;
+                const endIndex = (_params_batch__endValue = params.batch[0].endValue) !== null && _params_batch__endValue !== void 0 ? _params_batch__endValue : data.xAxis.length - 1;
                 const xAxisStartValue = data.xAxis[startIndex];
                 const xAxisEndValue = data.xAxis[endIndex];
                 if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
@@ -118,8 +118,8 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
         if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
-        var _rangeMs;
-        const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
+        var _data_rangeMs;
+        const rangeMs = (_data_rangeMs = data.rangeMs) !== null && _data_rangeMs !== void 0 ? _data_rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
             series: data.timeSeries,
             xAxis: {
@@ -132,7 +132,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                     }
                 }
             },
-            yAxis: (0, _utils.getYAxes)(yAxis, unit),
+            yAxis: (0, _utils.getFormattedAxis)(yAxis, format),
             animation: false,
             tooltip: {
                 show: true,
@@ -165,7 +165,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
     }, [
         data,
         yAxis,
-        unit,
+        format,
         grid,
         legend,
         noDataOption,
@@ -173,13 +173,13 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         __experimentalEChartsOptionsOverride,
         noDataVariant
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             height
         },
         onClick: (e)=>{
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
                         return {
@@ -253,18 +253,19 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             }
         },
         children: [
-            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.LineChartTooltip, {
+            showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesTooltip.LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: tooltipConfig.enablePinning,
                 pinnedPos: tooltipPinnedCoords,
-                unit: unit,
+                format: format,
                 onUnpinClick: ()=>{
                     setTooltipPinnedCoords(null);
                 },
                 containerId: chartsTheme.tooltipPortalContainerId
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
                 sx: {
                     width: '100%',
                     height: '100%'

package/dist/cjs/LineChart/index.js

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