@perses-dev/components 0.5.2 → 0.6.0

package/dist/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAgE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBtG,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,cAAc,eAwIpG"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAgE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBtG,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,cAAc,eAsJpG"}

package/dist/LineChart/LineChart.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box}from"@mui/material";import{use}from"echarts/core";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{EChart}from"../EChart";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"../model/graph";import{formatValue}from"../model/units";import{useChartsTheme}from"../context/ChartsThemeProvider";import{Tooltip}from"../Tooltip/Tooltip";import{enableDataZoom,restoreChart,getDateRange,getFormattedDate}from"./utils";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);export function LineChart({height:e,data:o,unit:t,grid:r,legend:n,visualMap:a,onDataZoom:i}){const s=useChartsTheme(),m=useRef(),[p,l]=useState(!0),u=useMemo((()=>({datazoom:e=>{var t,r;if(void 0===i||void 0===e.batch[0])return;const n=null!==(t=e.batch[0].startValue)&&void 0!==t?t:0,a=null!==(r=e.batch[0].endValue)&&void 0!==r?r:o.xAxis.length-1,s=o.xAxis[n],m=o.xAxis[a];void 0!==s&&void 0!==m&&i({start:s,end:m,startIndex:n,endIndex:a})}})),[o,i]);void 0!==m.current&&enableDataZoom(m.current);const h=useDeepMemo((()=>{var e;if(void 0===o.timeSeries)return{};if(null===o.timeSeries||0===o.timeSeries.length)return s.noDataOption;const i=o.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,m=null!==(e=o.rangeMs)&&void 0!==e?e:getDateRange(o.xAxis);return{series:o.timeSeries,xAxis:{type:"category",data:o.xAxis,max:o.xAxisMax,axisLabel:{formatter:e=>getFormattedDate(e,m)}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{formatter:e=>formatValue(e,t)}},animation:!1,tooltip:{show:i,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},toolbox:{feature:{dataZoom:{icon:null,yAxisIndex:"none"}}},grid:r,legend:n,visualMap:a}}),[o,r,n,a]);return _jsxs(Box,{sx:{height:e},onDoubleClick:()=>{void 0!==m.current&&restoreChart(m.current)},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&l(!1)},onMouseUp:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onMouseEnter:()=>{l(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:m,chartData:o,wrapLabels:!0}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:h,theme:s.themeName,onEvents:u,_instance:m})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box}from"@mui/material";import{use}from"echarts/core";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{EChart}from"../EChart";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"../model/graph";import{formatValue}from"../model/units";import{useChartsTheme}from"../context/ChartsThemeProvider";import{Tooltip}from"../Tooltip/Tooltip";import{enableDataZoom,restoreChart,getDateRange,getFormattedDate}from"./utils";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);export function LineChart({height:e,data:o,unit:t,grid:r,legend:n,visualMap:a,onDataZoom:i}){const s=useChartsTheme(),m=useRef(),[p,l]=useState(!0),[u,h]=useState(!1),x=useMemo((()=>({datazoom:e=>{var t,r;if(void 0===i&&setTimeout((()=>{h(!1)}),10),void 0===i||void 0===e.batch[0])return;const n=null!==(t=e.batch[0].startValue)&&void 0!==t?t:0,a=null!==(r=e.batch[0].endValue)&&void 0!==r?r:o.xAxis.length-1,s=o.xAxis[n],m=o.xAxis[a];void 0!==s&&void 0!==m&&i({start:s,end:m,startIndex:n,endIndex:a})}})),[o,i,h]);void 0!==m.current&&enableDataZoom(m.current);const d=useDeepMemo((()=>{var e;if(void 0===o.timeSeries)return{};if(null===o.timeSeries||0===o.timeSeries.length)return s.noDataOption;const i=o.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,m=null!==(e=o.rangeMs)&&void 0!==e?e:getDateRange(o.xAxis);return{series:o.timeSeries,xAxis:{type:"category",data:o.xAxis,max:o.xAxisMax,axisLabel:{formatter:e=>getFormattedDate(e,m)}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{formatter:e=>formatValue(e,t)}},animation:!1,tooltip:{show:i,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},toolbox:{feature:{dataZoom:{icon:null,yAxisIndex:"none"}}},grid:r,legend:n,visualMap:a}}),[o,r,n,a]);return _jsxs(Box,{sx:{height:e},onClick:()=>h((e=>!e)),onDoubleClick:()=>{h(!1),void 0!==m.current&&restoreChart(m.current)},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&l(!1)},onMouseUp:()=>{l(!0)},onMouseLeave:()=>{l(!1),h(!1)},onMouseEnter:()=>{l(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:m,chartData:o,wrapLabels:!0,pinTooltip:u}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:d,theme:s.themeName,onEvents:x,_instance:m})]})}

package/dist/Tooltip/Tooltip.d.ts

@@ -4,6 +4,7 @@ import { EChartsDataFormat } from '../model/graph';
 interface TooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
+    pinTooltip: boolean;
     wrapLabels?: boolean;
 }
 declare const Tooltip: React.NamedExoticComponent<TooltipProps>;

package/dist/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMnD,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,0CA+DX,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMnD,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,0CAqDX,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/Tooltip/Tooltip.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import React,{useState}from"react";import{Box,Portal}from"@mui/material";import{getFocusedSeriesData}from"./focused-series";import{TOOLTIP_MAX_HEIGHT,TOOLTIP_MAX_WIDTH,useMousePosition}from"./tooltip-model";import{TooltipContent}from"./TooltipContent";import{assembleTransform}from"./utils";const Tooltip=React.memo((function({chartRef:o,chartData:t,wrapLabels:e}){var r,l;const[i,n]=useState(null),s=useMousePosition();if(null===s||null===s.target)return null;if("CANVAS"!==s.target.tagName)return null;const a=o.current,u=getFocusedSeriesData(s,t,i,a),m=null!==(r=null==a?void 0:a.getWidth())&&void 0!==r?r:750,f=null!==(l=null==a?void 0:a.getHeight())&&void 0!==l?l:230,p=assembleTransform(s,u.length,m,f,i);return 0===u.length?null:_jsx(Portal,{children:_jsx(Box,{sx:o=>({maxWidth:TOOLTIP_MAX_WIDTH,maxHeight:TOOLTIP_MAX_HEIGHT,position:"absolute",top:0,left:0,backgroundColor:"#2E313E",borderRadius:"6px",color:"#fff",fontSize:"11px",visibility:"visible",opacity:1,transition:"all 0.1s ease-out",zIndex:o.zIndex.tooltip,overflow:"hidden","&:hover":{overflowY:"auto"}}),style:{transform:p},onMouseEnter:()=>{null!==s&&n(s)},onMouseLeave:()=>{null!==i&&n(null)},children:_jsx(TooltipContent,{focusedSeries:u,wrapLabels:e})})})}));export{Tooltip};
+import{jsx as _jsx}from"react/jsx-runtime";import React,{useState}from"react";import{Box,Portal}from"@mui/material";import{getFocusedSeriesData}from"./focused-series";import{TOOLTIP_MAX_HEIGHT,TOOLTIP_MAX_WIDTH,useMousePosition}from"./tooltip-model";import{TooltipContent}from"./TooltipContent";import{assembleTransform}from"./utils";const Tooltip=React.memo((function({chartRef:o,chartData:t,wrapLabels:e,pinTooltip:r}){var l,i;const[s,n]=useState(null),a=useMousePosition();if(null===a||null===a.target)return null;if(null===s&&"CANVAS"!==a.target.tagName)return null;const u=o.current,m=getFocusedSeriesData(a,t,s,u),p=null!==(l=null==u?void 0:u.getWidth())&&void 0!==l?l:750,f=null!==(i=null==u?void 0:u.getHeight())&&void 0!==i?i:230,c=assembleTransform(a,m.length,p,f,s);return 0===m.length?null:(!0===r&&null===s&&n(a),_jsx(Portal,{children:_jsx(Box,{sx:o=>({maxWidth:TOOLTIP_MAX_WIDTH,maxHeight:TOOLTIP_MAX_HEIGHT,position:"absolute",top:0,left:0,backgroundColor:"#2E313E",borderRadius:"6px",color:"#fff",fontSize:"11px",visibility:"visible",opacity:1,transition:"all 0.1s ease-out",zIndex:o.zIndex.tooltip,overflow:"hidden","&:hover":{overflowY:"auto"}}),style:{transform:c},children:_jsx(TooltipContent,{focusedSeries:m,wrapLabels:e})})}))}));export{Tooltip};

package/dist/Tooltip/tooltip-model.d.ts

@@ -2,7 +2,7 @@ import { FocusedSeriesArray } from './focused-series';
 export declare const TOOLTIP_MAX_WIDTH = 650;
 export declare const TOOLTIP_MAX_HEIGHT = 230;
 export declare const TOOLTIP_LABELS_MAX_WIDTH: number;
-export declare const TOOLTIP_MAX_ITEMS = 20;
+export declare const TOOLTIP_MAX_ITEMS = 50;
 export declare const TOOLTIP_DATE_FORMAT: Intl.DateTimeFormat;
 export declare const defaultCursorData: {
     coords: {

package/dist/Tooltip/tooltip-model.js

@@ -1 +1 @@
-import{useEffect,useState}from"react";export const TOOLTIP_MAX_WIDTH=650;export const TOOLTIP_MAX_HEIGHT=230;export const TOOLTIP_LABELS_MAX_WIDTH=500;export const TOOLTIP_MAX_ITEMS=20;export const TOOLTIP_DATE_FORMAT=new Intl.DateTimeFormat(void 0,{year:"numeric",month:"short",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",hour12:!0});export const defaultCursorData={coords:{viewport:{x:0,y:0},plotCanvas:{x:0,y:0},zrender:{x:0,y:0},target:null},chartWidth:0};export const emptyTooltipData={cursor:defaultCursorData,focusedSeries:null};export const useMousePosition=()=>{const[e,t]=useState(null);return useEffect((()=>{const e=e=>t({viewport:{x:e.clientX,y:e.clientY},plotCanvas:{x:e.offsetX,y:e.offsetY},zrender:{x:e.zrX,y:e.zrY},target:e.target});return window.addEventListener("mousemove",e),()=>{window.removeEventListener("mousemove",e)}}),[]),e};
+import{useEffect,useState}from"react";export const TOOLTIP_MAX_WIDTH=650;export const TOOLTIP_MAX_HEIGHT=230;export const TOOLTIP_LABELS_MAX_WIDTH=500;export const TOOLTIP_MAX_ITEMS=50;export const TOOLTIP_DATE_FORMAT=new Intl.DateTimeFormat(void 0,{year:"numeric",month:"short",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",hour12:!0});export const defaultCursorData={coords:{viewport:{x:0,y:0},plotCanvas:{x:0,y:0},zrender:{x:0,y:0},target:null},chartWidth:0};export const emptyTooltipData={cursor:defaultCursorData,focusedSeries:null};export const useMousePosition=()=>{const[e,t]=useState(null);return useEffect((()=>{const e=e=>t({viewport:{x:e.clientX,y:e.clientY},plotCanvas:{x:e.offsetX,y:e.offsetY},zrender:{x:e.zrX,y:e.zrY},target:e.target});return window.addEventListener("mousemove",e),()=>{window.removeEventListener("mousemove",e)}}),[]),e};

package/dist/cjs/LineChart/LineChart.js

@@ -45,11 +45,17 @@ 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 [pinTooltip, setPinTooltip] = (0, react_1.useState)(false);
     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) {
+                    setTimeout(() => {
+                        // workaround so unpin happens after click event
+                        setPinTooltip(false);
+                    }, 10);
+                }
                 if (onDataZoom === undefined || params.batch[0] === undefined)
                     return;
                 const startIndex = (_a = params.batch[0].startValue) !== null && _a !== void 0 ? _a : 0;
@@ -66,12 +72,15 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom })
                     onDataZoom(zoomEvent);
                 }
             },
+            // TODO: use legendselectchanged event to fix tooltip when legend selected
         };
-    }, [data, onDataZoom]);
+    }, [data, onDataZoom, setPinTooltip]);
     if (chartRef.current !== undefined) {
         (0, utils_1.enableDataZoom)(chartRef.current);
     }
+    const handleOnClick = () => setPinTooltip((current) => !current);
     const handleOnDoubleClick = () => {
+        setPinTooltip(false);
         if (chartRef.current !== undefined) {
             (0, utils_1.restoreChart)(chartRef.current);
         }
@@ -90,6 +99,7 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom })
     };
     const handleOnMouseLeave = () => {
         setShowTooltip(false);
+        setPinTooltip(false);
     };
     const option = (0, core_1.useDeepMemo)(() => {
         var _a;
@@ -145,7 +155,7 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom })
     }, [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, chartData: data, wrapLabels: true }), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+        }, onClick: handleOnClick, onDoubleClick: handleOnDoubleClick, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, chartData: data, wrapLabels: true, pinTooltip: pinTooltip })), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
                     width: '100%',
                     height: '100%',
                 }, option: option, theme: chartsTheme.themeName, onEvents: handleEvents, _instance: chartRef })] }));

package/dist/cjs/Tooltip/Tooltip.js

@@ -43,33 +43,26 @@ const focused_series_1 = require("./focused-series");
 const tooltip_model_1 = require("./tooltip-model");
 const TooltipContent_1 = require("./TooltipContent");
 const utils_1 = require("./utils");
-const Tooltip = react_1.default.memo(function Tooltip({ chartRef, chartData, wrapLabels }) {
+const Tooltip = react_1.default.memo(function Tooltip({ chartRef, chartData, wrapLabels, pinTooltip }) {
     var _a, _b;
     const [pinnedPos, setPinnedPos] = (0, react_1.useState)(null);
     const mousePos = (0, tooltip_model_1.useMousePosition)();
     if (mousePos === null || mousePos.target === null)
         return null;
     // ensure user is hovering over a chart before checking for nearby series
-    if (mousePos.target.tagName !== 'CANVAS')
+    if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS')
         return null;
     const chart = chartRef.current;
     const focusedSeries = (0, focused_series_1.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart);
     const chartWidth = (_a = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && _a !== void 0 ? _a : 750;
     const chartHeight = (_b = chart === null || chart === void 0 ? void 0 : chart.getHeight()) !== null && _b !== void 0 ? _b : 230;
     const cursorTransform = (0, utils_1.assembleTransform)(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
-    function handleMouseEnter() {
-        if (mousePos !== null) {
-            setPinnedPos(mousePos);
-        }
-    }
-    function handleMouseLeave() {
-        if (pinnedPos !== null) {
-            setPinnedPos(null);
-        }
-    }
     if (focusedSeries.length === 0) {
         return null;
     }
+    if (pinTooltip === true && pinnedPos === null) {
+        setPinnedPos(mousePos);
+    }
     return ((0, jsx_runtime_1.jsx)(material_1.Portal, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: (theme) => ({
                 maxWidth: tooltip_model_1.TOOLTIP_MAX_WIDTH,
                 maxHeight: tooltip_model_1.TOOLTIP_MAX_HEIGHT,
@@ -90,6 +83,6 @@ const Tooltip = react_1.default.memo(function Tooltip({ chartRef, chartData, wra
                 },
             }), style: {
                 transform: cursorTransform,
-            }, onMouseEnter: () => handleMouseEnter(), onMouseLeave: () => handleMouseLeave(), children: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, { focusedSeries: focusedSeries, wrapLabels: wrapLabels }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, { focusedSeries: focusedSeries, wrapLabels: wrapLabels }) }) }));
 });
 exports.Tooltip = Tooltip;

package/dist/cjs/Tooltip/tooltip-model.js

@@ -17,7 +17,7 @@ const react_1 = require("react");
 exports.TOOLTIP_MAX_WIDTH = 650;
 exports.TOOLTIP_MAX_HEIGHT = 230;
 exports.TOOLTIP_LABELS_MAX_WIDTH = exports.TOOLTIP_MAX_WIDTH - 150;
-exports.TOOLTIP_MAX_ITEMS = 20;
+exports.TOOLTIP_MAX_ITEMS = 50;
 exports.TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
     year: 'numeric',
     month: 'short',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,14 +24,15 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/core": "^0.5.2",
+    "@perses-dev/core": "^0.6.0",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
     "@mui/material": "^5.5.1",
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "files": [
     "dist"