@perses-dev/components 0.5.1 → 0.5.2

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,eAwIpG"}

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=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})]})}

package/dist/Tooltip/Tooltip.d.ts

@@ -1,13 +1,11 @@
 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;
     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,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,0CA+DX,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}){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};

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/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 = 50;
+export declare const TOOLTIP_MAX_ITEMS = 20;
 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=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};
+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};

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)([
@@ -146,7 +145,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: {
+        }, 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: {
                     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,23 +37,26 @@ 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 }) {
     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 (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);
+    const cursorTransform = (0, utils_1.assembleTransform)(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
     function handleMouseEnter() {
         if (mousePos !== null) {
             setPinnedPos(mousePos);
@@ -64,39 +90,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 }) }) }));
-}
+            }, onMouseEnter: () => handleMouseEnter(), onMouseLeave: () => handleMouseLeave(), 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/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 = 50;
+exports.TOOLTIP_MAX_ITEMS = 20;
 exports.TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
     year: 'numeric',
     month: 'short',

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.1",
+  "version": "0.5.2",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,7 +24,7 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/core": "^0.5.1",
+    "@perses-dev/core": "^0.5.2",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"