@perses-dev/components 0.5.0 → 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;AAI1D,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,eA0IpG"}
+{"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{emptyTooltipData}from"../Tooltip/tooltip-model";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:a,visualMap:n,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 a=null!==(t=e.batch[0].startValue)&&void 0!==t?t:0,n=null!==(r=e.batch[0].endValue)&&void 0!==r?r:o.xAxis.length-1,s=o.xAxis[a],m=o.xAxis[n];void 0!==s&&void 0!==m&&i({start:s,end:m,startIndex:a,endIndex:n})}})),[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:a,visualMap:n}}),[o,r,a,n]);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,tooltipData:emptyTooltipData,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

@@ -1,13 +1,12 @@
 import React from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
 import { EChartsDataFormat } from '../model/graph';
-import { TooltipData } from './tooltip-model';
 interface TooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
-    tooltipData: TooltipData;
     chartData: EChartsDataFormat;
+    pinTooltip: boolean;
     wrapLabels?: boolean;
 }
-export declare function Tooltip(props: TooltipProps): JSX.Element | null;
-export {};
+declare const Tooltip: React.NamedExoticComponent<TooltipProps>;
+export { Tooltip };
 //# sourceMappingURL=Tooltip.d.ts.map

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;AAEnD,OAAO,EAGL,WAAW,EAIZ,MAAM,iBAAiB,CAAC;AAGzB,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,sBA4D1C"}
+{"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{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";export function Tooltip(t){var o,e;const{chartRef:r,chartData:n}=t,[l,i]=useState(null),s=useMousePosition();if(null===s)return null;const a=r.current,u=getFocusedSeriesData(s,n,l,a),p=null!==(o=null==a?void 0:a.getWidth())&&void 0!==o?o:750,T=null!==(e=null==a?void 0:a.getHeight())&&void 0!==e?e:230,d=assembleTransform(s,u.length,p,T,l);return 0===u.length?null:_jsx(Portal,{children:_jsx(Box,{sx:t=>({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:t.zIndex.tooltip,overflow:"hidden","&:hover":{overflowY:"auto"}}),style:{transform:d},onMouseEnter:()=>{null!==s&&i(s)},onMouseLeave:()=>{null!==l&&i(null)},children:_jsx(TooltipContent,{focusedSeries:u,wrapLabels:t.wrapLabels})})})}function assembleTransform(t,o,e,r,n){if(null===t)return"translate3d(0, 0)";null!==n&&(t=n);const l=t.viewport.x;let i=t.viewport.y+16;const s=.75*r;!0==t.viewport.y>.8*window.innerHeight?i=o>6?.65*t.viewport.y:.75*t.viewport.y:t.plotCanvas.y>s&&(i=.85*t.viewport.y);const a=e-.9*(o>1?TOOLTIP_MAX_WIDTH:TOOLTIP_MAX_WIDTH/2);return t.plotCanvas.x>a&&l>TOOLTIP_MAX_WIDTH?`translate3d(${l-32}px, ${i}px, 0) translateX(-100%)`:`translate3d(${l+32}px, ${i}px, 0)`}
+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/focused-series.js

@@ -1 +1 @@
-import{TOOLTIP_DATE_FORMAT,TOOLTIP_MAX_ITEMS}from"./tooltip-model";export function getNearbySeries(e,t,r){var i,n,l,o,a;const s=[],u=null!==(i=t[0])&&void 0!==i?i:null,d=null!==(n=t[1])&&void 0!==n?n:null;if(null===u||null===d)return s;if(Array.isArray(e.xAxis)&&Array.isArray(e.timeSeries))for(let t=0;t<e.timeSeries.length;t++){const i=e.timeSeries[t];if(s.length>TOOLTIP_MAX_ITEMS)break;if(void 0!==i){const n=i.name?i.name.toString():"",m=null!==(l=i.color)&&void 0!==l?l:"#000";if(Array.isArray(i.data))for(let l=0;l<i.data.length;l++){const f=null!==(o=e.xAxis[l])&&void 0!==o?o:0,v=null!==(a=i.data[l])&&void 0!==a?a:0;if(u===l&&"-"!==v&&d<=v+r&&d>=v-r){const e=f>99999999999?f:1e3*f,r=TOOLTIP_DATE_FORMAT.format(e);s.push({seriesIdx:t,datumIdx:l,seriesName:n,date:r,x:f,y:v,markerColor:m.toString()})}}}}return s}export function getFocusedSeriesData(e,t,r,i){var n,l;if(void 0===i||null===e)return[];let o=!1;if(null!==e.target){const t=e.target.parentElement;if(null!==t){const e=t.parentElement;null!==e&&i.getDom()===e&&(o=!0)}}if(null!==r&&(e=r,o=!0),!1===o)return[];if(void 0===i._model)return[];const a=i._model.getComponent("yAxis").axis.scale._interval,s=t.timeSeries.length>TOOLTIP_MAX_ITEMS?.5*a:2*a,u=[null!==(n=e.plotCanvas.x)&&void 0!==n?n:0,null!==(l=e.plotCanvas.y)&&void 0!==l?l:0];if(i.containPixel("grid",u)){const e=i.convertFromPixel("grid",u);if(void 0!==e[0]&&void 0!==e[1])return getNearbySeries(t,e,s)}return[]}
+import{TOOLTIP_DATE_FORMAT,TOOLTIP_MAX_ITEMS}from"./tooltip-model";export function getNearbySeries(e,t,r){var i,n,l,o,a;const s=[],u=null!==(i=t[0])&&void 0!==i?i:null,d=null!==(n=t[1])&&void 0!==n?n:null;if(null===u||null===d)return s;if(Array.isArray(e.xAxis)&&Array.isArray(e.timeSeries))for(let t=0;t<e.timeSeries.length;t++){const i=e.timeSeries[t];if(s.length>=TOOLTIP_MAX_ITEMS)break;if(void 0!==i){const n=i.name?i.name.toString():"",m=null!==(l=i.color)&&void 0!==l?l:"#000";if(Array.isArray(i.data))for(let l=0;l<i.data.length;l++){const f=null!==(o=e.xAxis[l])&&void 0!==o?o:0,v=null!==(a=i.data[l])&&void 0!==a?a:0;if(u===l&&"-"!==v&&d<=v+r&&d>=v-r){const e=f>99999999999?f:1e3*f,r=TOOLTIP_DATE_FORMAT.format(e);s.push({seriesIdx:t,datumIdx:l,seriesName:n,date:r,x:f,y:v,markerColor:m.toString()})}}}}return s}export function getFocusedSeriesData(e,t,r,i){var n,l;if(void 0===i||null===e)return[];let o=!1;if(null!==e.target){const t=e.target.parentElement;if(null!==t){const e=t.parentElement;null!==e&&i.getDom()===e&&(o=!0)}}if(null!==r&&(e=r,o=!0),!1===o)return[];if(void 0===i._model)return[];const a=i._model.getComponent("yAxis").axis.scale._interval,s=t.timeSeries.length>TOOLTIP_MAX_ITEMS?.5*a:2*a,u=[null!==(n=e.plotCanvas.x)&&void 0!==n?n:0,null!==(l=e.plotCanvas.y)&&void 0!==l?l:0];if(i.containPixel("grid",u)){const e=i.convertFromPixel("grid",u);if(void 0!==e[0]&&void 0!==e[1])return getNearbySeries(t,e,s)}return[]}

package/dist/Tooltip/utils.d.ts

@@ -0,0 +1,6 @@
+import { CursorCoordinates, CursorData } from './tooltip-model';
+/**
+ * Determine position of tooltip depending on chart dimensions and the number of focused series
+ */
+export declare function assembleTransform(mousePos: CursorData['coords'], seriesNum: number, chartWidth: number, chartHeight: number, pinnedPos: CursorCoordinates | null): string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/Tooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAqB,MAAM,iBAAiB,CAAC;AAEnF;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,iBAAiB,GAAG,IAAI,UAoCpC"}

package/dist/Tooltip/utils.js

@@ -0,0 +1 @@
+import{TOOLTIP_MAX_WIDTH}from"./tooltip-model";export function assembleTransform(t,o,r,e,n){if(null===t)return"translate3d(0, 0)";null!==n&&(t=n);const p=t.viewport.x;let a=t.viewport.y+16;const l=.75*e;!0==t.viewport.y>.8*window.innerHeight?a=o>6?.65*t.viewport.y:.75*t.viewport.y:t.plotCanvas.y>l&&(a=.85*t.viewport.y);const i=r-.9*(o>1?TOOLTIP_MAX_WIDTH:TOOLTIP_MAX_WIDTH/2);return t.plotCanvas.x>i&&p>TOOLTIP_MAX_WIDTH?`translate3d(${p-32}px, ${a}px, 0) translateX(-100%)`:`translate3d(${p+32}px, ${a}px, 0)`}

package/dist/cjs/LineChart/LineChart.js

@@ -25,7 +25,6 @@ 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)([
@@ -46,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;
@@ -67,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);
         }
@@ -91,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;
@@ -146,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, tooltipData: tooltip_model_1.emptyTooltipData, 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

@@ -1,4 +1,27 @@
 "use strict";
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -14,36 +37,32 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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 react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const focused_series_1 = require("./focused-series");
 const tooltip_model_1 = require("./tooltip-model");
 const TooltipContent_1 = require("./TooltipContent");
-function Tooltip(props) {
+const utils_1 = require("./utils");
+const Tooltip = react_1.default.memo(function Tooltip({ chartRef, chartData, wrapLabels, pinTooltip }) {
     var _a, _b;
-    const { chartRef, chartData } = props;
     const [pinnedPos, setPinnedPos] = (0, react_1.useState)(null);
     const mousePos = (0, tooltip_model_1.useMousePosition)();
-    if (mousePos === null)
+    if (mousePos === null || mousePos.target === null)
+        return null;
+    // ensure user is hovering over a chart before checking for nearby series
+    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 = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
-    function handleMouseEnter() {
-        if (mousePos !== null) {
-            setPinnedPos(mousePos);
-        }
-    }
-    function handleMouseLeave() {
-        if (pinnedPos !== null) {
-            setPinnedPos(null);
-        }
-    }
+    const cursorTransform = (0, utils_1.assembleTransform)(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
     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,
@@ -64,39 +83,6 @@ function Tooltip(props) {
                 },
             }), style: {
                 transform: cursorTransform,
-            }, onMouseEnter: () => handleMouseEnter(), onMouseLeave: () => handleMouseLeave(), children: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, { focusedSeries: focusedSeries, wrapLabels: props.wrapLabels }) }) }));
-}
+            }, children: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, { focusedSeries: focusedSeries, wrapLabels: wrapLabels }) }) }));
+});
 exports.Tooltip = Tooltip;
-function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
-    if (mousePos === null) {
-        return 'translate3d(0, 0)';
-    }
-    if (pinnedPos !== null) {
-        mousePos = pinnedPos;
-    }
-    const cursorPaddingX = 32;
-    const cursorPaddingY = 16;
-    const x = mousePos.viewport.x;
-    let y = mousePos.viewport.y + cursorPaddingY;
-    const isCloseToBottom = mousePos.viewport.y > window.innerHeight * 0.8;
-    const yPosAdjustThreshold = chartHeight * 0.75;
-    // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
-    if (isCloseToBottom === true) {
-        if (seriesNum > 6) {
-            y = mousePos.viewport.y * 0.65;
-        }
-        else {
-            y = mousePos.viewport.y * 0.75;
-        }
-    }
-    else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
-        y = mousePos.viewport.y * 0.85;
-    }
-    // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
-    const tooltipWidth = seriesNum > 1 ? tooltip_model_1.TOOLTIP_MAX_WIDTH : tooltip_model_1.TOOLTIP_MAX_WIDTH / 2;
-    const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
-    // reposition so tooltip is never too close to right side of chart or left side of browser window
-    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > tooltip_model_1.TOOLTIP_MAX_WIDTH
-        ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`
-        : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
-}

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

@@ -29,7 +29,7 @@ function getNearbySeries(data, pointInGrid, yBuffer) {
     if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
         for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {
             const currentSeries = data.timeSeries[seriesIdx];
-            if (currentFocusedData.length > tooltip_model_1.TOOLTIP_MAX_ITEMS)
+            if (currentFocusedData.length >= tooltip_model_1.TOOLTIP_MAX_ITEMS)
                 break;
             if (currentSeries !== undefined) {
                 const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';

package/dist/cjs/Tooltip/utils.js

@@ -0,0 +1,53 @@
+"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.assembleTransform = void 0;
+const tooltip_model_1 = require("./tooltip-model");
+/**
+ * Determine position of tooltip depending on chart dimensions and the number of focused series
+ */
+function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
+    if (mousePos === null) {
+        return 'translate3d(0, 0)';
+    }
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+    }
+    const cursorPaddingX = 32;
+    const cursorPaddingY = 16;
+    const x = mousePos.viewport.x;
+    let y = mousePos.viewport.y + cursorPaddingY;
+    const isCloseToBottom = mousePos.viewport.y > window.innerHeight * 0.8;
+    const yPosAdjustThreshold = chartHeight * 0.75;
+    // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
+    if (isCloseToBottom === true) {
+        if (seriesNum > 6) {
+            y = mousePos.viewport.y * 0.65;
+        }
+        else {
+            y = mousePos.viewport.y * 0.75;
+        }
+    }
+    else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
+        y = mousePos.viewport.y * 0.85;
+    }
+    // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
+    const tooltipWidth = seriesNum > 1 ? tooltip_model_1.TOOLTIP_MAX_WIDTH : tooltip_model_1.TOOLTIP_MAX_WIDTH / 2;
+    const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
+    // reposition so tooltip is never too close to right side of chart or left side of browser window
+    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > tooltip_model_1.TOOLTIP_MAX_WIDTH
+        ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`
+        : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
+}
+exports.assembleTransform = assembleTransform;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.5.0",
+  "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.0",
+    "@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"