@perses-dev/components 0.2.1 → 0.3.0

package/dist/ECharts.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ECharts, EChartsCoreOption } from 'echarts/core';
+import { SxProps, Theme } from '@mui/material';
+export interface MouseEventsParameters<T> {
+    componentType: string;
+    seriesType: string;
+    seriesIndex: number;
+    seriesName: string;
+    name: string;
+    dataIndex: number;
+    data: Record<string, unknown> & T;
+    dataType: string;
+    value: number | number[];
+    color: string;
+    info: Record<string, unknown>;
+}
+declare type OnEventFunction<T> = (params: MouseEventsParameters<T>, instance?: ECharts) => void;
+declare const mouseEvents: readonly ["click", "dblclick", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout", "globalout", "contextmenu"];
+export declare type MouseEventName = typeof mouseEvents[number];
+export interface DataZoomPayloadBatchItem {
+    dataZoomId: string;
+    start?: number;
+    end?: number;
+    startValue?: number;
+    endValue?: number;
+}
+export interface HighlightPayloadBatchItem {
+    dataIndex: number;
+    dataIndexInside: number;
+    seriesIndex: number;
+    escapeConnect?: boolean;
+    notBlur?: boolean;
+}
+export interface BatchEventsParameters {
+    type: BatchEventName;
+    batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];
+}
+declare type OnBatchEventFunction = (params: BatchEventsParameters) => void;
+declare const batchEvents: readonly ["datazoom", "downplay", "highlight"];
+export declare type BatchEventName = typeof batchEvents[number];
+declare type ChartEventName = 'finished';
+export declare type OnEventsType<T> = {
+    [mouseEventName in MouseEventName]?: OnEventFunction<T>;
+} & {
+    [batchEventName in BatchEventName]?: OnBatchEventFunction;
+} & {
+    [eventName in ChartEventName]?: () => void;
+};
+export interface EChartsProps<T> {
+    option: EChartsCoreOption;
+    sx?: SxProps<Theme>;
+    onChartInitialized?: (instance: ECharts) => void;
+    onEvents?: OnEventsType<T>;
+    _instance?: React.MutableRefObject<ECharts | undefined>;
+    parentContainer?: HTMLDivElement | null;
+}
+export declare function ECharts<T>({ sx, _instance, onChartInitialized, option, onEvents }: EChartsProps<T>): JSX.Element;
+export {};
+//# sourceMappingURL=ECharts.d.ts.map

package/dist/ECharts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ECharts.d.ts","sourceRoot":"","sources":["../src/ECharts.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAQ,MAAM,cAAc,CAAC;AAChE,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,WAAW,qBAAqB,CAAC,CAAC;IAGtC,aAAa,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAC;IAEnB,WAAW,EAAE,MAAM,CAAC;IAEpB,UAAU,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IAEb,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAOlC,QAAQ,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEzB,KAAK,EAAE,MAAM,CAAC;IAId,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,aAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAGhC,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;AAEV,QAAA,MAAM,WAAW,0HAUP,CAAC;AAEX,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAGxD,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAC;IAGnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,wBAAwB,EAAE,GAAG,yBAAyB,EAAE,CAAC;CACjE;AAED,aAAK,oBAAoB,GAAG,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;AAEpE,QAAA,MAAM,WAAW,gDAAiD,CAAC;AAEnE,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAGxD,aAAK,cAAc,GAAG,UAAU,CAAC;AAIjC,oBAAY,YAAY,CAAC,CAAC,IAAI;KAC3B,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;CACxD,GAAG;KACD,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,oBAAoB;CAC1D,GAAG;KACD,SAAS,IAAI,cAAc,CAAC,CAAC,EAAE,MAAM,IAAI;CAC3C,CAAC;AAEF,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CACzC;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,eAqClG"}

package/dist/ECharts.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useState,useLayoutEffect}from"react";import debounce from"lodash/debounce";import{init}from"echarts/core";import{Box}from"@mui/material";const mouseEvents=["click","dblclick","mousedown","mousemove","mouseup","mouseover","mouseout","globalout","contextmenu"],batchEvents=["datazoom","downplay","highlight"];export function ECharts({sx:e,_instance:t,onChartInitialized:n,option:o,onEvents:s}){const[i,u]=useState(null),[r,c]=useState(void 0);return useLayoutEffect((()=>{if(null===i)return;const e=init(i);return c(e),void 0!==t&&(t.current=e),bindEvents(e,s),null==n||n(e),()=>{e.dispose()}}),[i,t,n,s]),useLayoutEffect((()=>{void 0!==r&&r.setOption(o)}),[r,o]),useLayoutEffect((()=>{const e=debounce((()=>{null==r||r.resize()}),200);return window.addEventListener("resize",e),e(),()=>window.removeEventListener("resize",e)}),[r]),_jsx(Box,{ref:u,sx:e})}function bindEvents(e,t){var n;if(void 0!==t)for(const e in t)if(Object.prototype.hasOwnProperty.call(t,e)){const s=null!==(n=t[e])&&void 0!==n?n:null;s&&o(e,s)}function o(t,n){"function"==typeof n&&(isMouseEvent(t)?e.on(t,(t=>n(t,e))):isBatchEvent(t)?e.on(t,(e=>n(e))):e.on(t,(()=>n(null,e))))}}function isMouseEvent(e){return mouseEvents.includes(e)}function isBatchEvent(e){return batchEvents.includes(e)}

package/dist/GaugeChart.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { GaugeSeriesOption } from 'echarts/charts';
+import { UnitOptions } from './model/units';
+export declare type GaugeChartData = number | null | undefined;
+interface GaugeChartProps {
+    width: number;
+    height: number;
+    data: GaugeChartData;
+    unit: UnitOptions;
+    axisLine: GaugeSeriesOption['axisLine'];
+}
+export declare function GaugeChart(props: GaugeChartProps): JSX.Element;
+export {};
+//# sourceMappingURL=GaugeChart.d.ts.map

package/dist/GaugeChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../src/GaugeChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGpF,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AA0BzD,oBAAY,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAEvD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA2IhD"}

package/dist/GaugeChart.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";import{use}from"echarts/core";import{GaugeChart as EChartsGaugeChart}from"echarts/charts";import{GridComponent,TitleComponent,TooltipComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{formatValue}from"./model/units";import{ECharts}from"./ECharts";use([EChartsGaugeChart,GridComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function GaugeChart(t){const{width:e,height:o,data:i,unit:r,axisLine:s}=t,a=useMemo((()=>null==i?noDataOption:{title:{show:!1},tooltip:{show:!1},series:[{type:"gauge",center:["50%","65%"],radius:"100%",startAngle:200,endAngle:-20,min:0,max:100,splitNumber:12,silent:!0,progress:{show:!0,width:22,itemStyle:{color:"auto"}},pointer:{show:!1},axisLine:{lineStyle:{color:[[1,"#e1e5e9"]],width:22}},axisTick:{show:!1,distance:-28,splitNumber:5,lineStyle:{width:2,color:"#999"}},splitLine:{show:!1,distance:-32,length:6,lineStyle:{width:2,color:"#999"}},axisLabel:{show:!1,distance:-18,color:"#999",fontSize:12},anchor:{show:!1},title:{show:!1},detail:{show:!1},data:[{value:i}]},{type:"gauge",center:["50%","65%"],radius:"114%",startAngle:200,endAngle:-20,min:0,max:100,pointer:{show:!1,itemStyle:{color:"auto"}},axisLine:s,axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},detail:{show:!0,valueAnimation:!1,width:"60%",borderRadius:8,offsetCenter:[0,"-9%"],fontSize:20,fontWeight:"bolder",color:"inherit",formatter:t=>formatValue(t,{kind:r.kind,decimal_places:0})},data:[{value:i}]}]}),[i,r,s]);return _jsx(ECharts,{sx:{width:e,height:o},option:a})}

package/dist/LineChart.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { GridComponentOption, LegendComponentOption, ToolboxComponentOption, VisualMapComponentOption } from 'echarts';
+import { EChartsDataFormat } from './model/graph-model';
+export interface ZoomEventData {
+    start: number;
+    end: number;
+    startIndex: number;
+    endIndex: number;
+}
+interface LineChartProps {
+    height: number;
+    data: EChartsDataFormat;
+    grid?: GridComponentOption;
+    legend?: LegendComponentOption;
+    toolbox?: ToolboxComponentOption;
+    visualMap?: VisualMapComponentOption[];
+    dataZoomEnabled?: boolean;
+    onDataZoom?: (e: ZoomEventData) => void;
+}
+export declare function LineChart(props: LineChartProps): JSX.Element;
+export {};
+//# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../src/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAEV,mBAAmB,EACnB,qBAAqB,EAErB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAyCvF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAsL9C"}

package/dist/LineChart.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{Box,useTheme}from"@mui/material";import merge from"lodash/merge";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{ECharts}from"./ECharts";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"./model/graph-model";import{abbreviateLargeNumber}from"./model/units";import{emptyTooltipData}from"./tooltip/tooltip-model";import{Tooltip}from"./tooltip/Tooltip";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function LineChart(e){const{height:t,data:o,grid:r,legend:a,toolbox:n,dataZoomEnabled:i,onDataZoom:s}=e,m=useTheme(),l=useRef(),[p,d]=useState(!0),h=useMemo((()=>({datazoom:e=>{var t,r;if(void 0===s||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,i=o.xAxis[a],m=o.xAxis[n];void 0!==i&&void 0!==m&&s({start:i,end:m,startIndex:a,endIndex:n})}})),[o,s]);void 0!==l.current&&!0===i&&l.current.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0});const u=useMemo((()=>{if(void 0===o.timeSeries)return{};if(null===o.timeSeries||0===o.timeSeries.length)return noDataOption;const e=o.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,t={show:!0,backgroundColor:"dark"===m.palette.mode?m.palette.grey[100]:m.palette.background.paper,borderColor:m.palette.grey[300],top:10,right:20,bottom:0,left:20,containLabel:!0},s={show:!0,top:10,right:10,iconStyle:{borderColor:m.palette.text.primary},feature:{dataZoom:{icon:i?null:void 0,yAxisIndex:"none"},restore:{}},emphasis:{iconStyle:{textFill:m.palette.text.primary}}};return!1===i&&delete s.feature.dataZoom.icon,{title:{show:!1},grid:merge(t,r),toolbox:merge(s,n),series:o.timeSeries,xAxis:{type:"category",data:o.xAxis,axisLabel:{color:m.palette.text.primary,margin:12,formatter:e=>getFormattedDate(e)},axisTick:{show:!0,length:6},axisLine:{lineStyle:{color:m.palette.grey[600]}}},yAxis:{type:"value",boundaryGap:["10%","10%"],axisLabel:{showMinLabel:!1,showMaxLabel:!0,color:m.palette.text.primary,formatter:e=>abbreviateLargeNumber(e)},splitLine:{lineStyle:{color:m.palette.grey[300]}}},animation:!1,tooltip:{show:e,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},legend:a}}),[o,m,r,a,n,i]);return _jsxs(Box,{sx:{height:t},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&d(!1)},onMouseUp:()=>{d(!0)},onMouseLeave:()=>{d(!1)},onMouseEnter:()=>{d(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:l,tooltipData:emptyTooltipData,chartData:o,wrapLabels:!0}),_jsx(ECharts,{sx:{width:"100%",height:"100%"},option:u,onEvents:h,_instance:l})]})}function getFormattedDate(e){return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"numeric",hour12:!1}).format(1e3*e)}

package/dist/StatChart.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { LineSeriesOption } from 'echarts/charts';
+import { UnitOptions } from './model/units';
+import { GraphSeriesValueTuple } from './model/graph-model';
+export interface GraphSeries {
+    name: string;
+    values: Iterable<GraphSeriesValueTuple>;
+}
+export interface StatChartData {
+    calculatedValue: number | null | undefined;
+    seriesData: GraphSeries | null | undefined;
+    name?: string;
+}
+interface StatChartProps {
+    width: number;
+    height: number;
+    data: StatChartData;
+    unit: UnitOptions;
+    backgroundColor?: string;
+    sparkline?: LineSeriesOption;
+}
+export declare function StatChart(props: StatChartProps): JSX.Element;
+export {};
+//# sourceMappingURL=StatChart.d.ts.map

package/dist/StatChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../src/StatChart.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjF,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAiC5D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA8J9C"}

package/dist/StatChart.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";import{merge}from"lodash-es";import{use}from"echarts/core";import{GaugeChart as EChartsGaugeChart}from"echarts/charts";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DatasetComponent,TitleComponent,TooltipComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{formatValue}from"./model/units";import{ECharts}from"./ECharts";use([EChartsGaugeChart,EChartsLineChart,GridComponent,DatasetComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function StatChart(t){const{width:e,height:o,data:a,unit:r,backgroundColor:i,sparkline:n}=t,s=useMemo((()=>{var t;if(void 0===a.seriesData)return{};if(null===a.seriesData||void 0===a.calculatedValue)return noDataOption;const s=a.seriesData,h=null!==(t=a.calculatedValue)&&void 0!==t?t:0,l=e>250,m=!0===l?a.name:"",p=Math.min(e,1.2*o),c=Math.min(p/4*.65,72),d=.5*c,u=[{type:"gauge",data:[{value:h,name:m}],detail:{show:!0,offsetCenter:["0%","-65%"],formatter:[`{name|${m}}`,`{value|${formatValue(h,r)}}`].join("\n"),rich:{name:{padding:!0===l?[0,0,5,0]:0,fontSize:d,lineHeight:2.5*d,fontWeight:500},value:{}}},center:["50%","60%"],animation:!1,silent:!0,title:{show:!1},progress:{show:!1},pointer:{show:!1},axisLine:{show:!1},axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},anchor:{show:!1},zlevel:2}];if(void 0!==n){const t={type:"line",data:[...s.values],zlevel:1,symbol:"none",animation:!1,lineStyle:{color:"#FFFFFF",opacity:.6},areaStyle:{color:"#FFFFFF",opacity:.3},silent:!0},e=merge(t,n);u.push(e)}return{title:{show:!1},grid:[{show:!0,backgroundColor:i,top:0,right:0,bottom:0,left:0,containLabel:!1,borderWidth:0},{show:!1,top:"45%",right:0,bottom:0,left:0,containLabel:!1}],xAxis:{type:"time",show:!1,boundaryGap:!1,gridIndex:1},yAxis:{type:"value",show:!1,gridIndex:1},tooltip:{show:!1},series:u,textStyle:{color:"transparent"===i?"#000000":"#FFFFFF",fontSize:25,lineHeight:18,fontFamily:'"Lato", sans-serif',fontWeight:"bold"},media:[{query:{maxWidth:150},option:{textStyle:{fontSize:12}}},{query:{minWidth:150},option:{textStyle:{fontSize:`max(14px, ${c}px)`,lineHeight:Math.min(16,1.2*c)}}}]}}),[a,o,r,e,n,i]);return _jsx(ECharts,{sx:{width:e,height:o},option:s})}

package/dist/index.d.ts

@@ -1,4 +1,10 @@
+export * from './ECharts';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
+export * from './GaugeChart';
+export * from './LineChart';
+export * from './StatChart';
 export * from './utils/combine-sx';
+export * from './model/graph-model';
+export * from './model/units';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-export*from"./ErrorAlert";export*from"./ErrorBoundary";export*from"./utils/combine-sx";
+export*from"./ECharts";export*from"./ErrorAlert";export*from"./ErrorBoundary";export*from"./GaugeChart";export*from"./LineChart";export*from"./StatChart";export*from"./utils/combine-sx";export*from"./model/graph-model";export*from"./model/units";

package/dist/model/graph-model.d.ts

@@ -0,0 +1,13 @@
+import { LineSeriesOption } from 'echarts/charts';
+export declare const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
+export declare type UnixTimeMs = number;
+export declare type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];
+export declare type EChartsValues = number | null | '-';
+export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
+    data: Iterable<GraphSeriesValueTuple> | EChartsValues[];
+}
+export declare type EChartsDataFormat = {
+    timeSeries: EChartsTimeSeries[];
+    xAxis: number[];
+};
+//# sourceMappingURL=graph-model.d.ts.map

package/dist/model/graph-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/model/graph-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC"}

package/dist/model/graph-model.js

@@ -0,0 +1 @@
+export const PROGRESSIVE_MODE_SERIES_LIMIT=500;

package/dist/model/units.d.ts

@@ -0,0 +1,21 @@
+export declare type UnitOptions = TimeUnitOptions | PercentUnitOptions | DecimalUnitOptions;
+export declare function formatValue(value: number, unitOptions?: UnitOptions): string;
+declare const timeUnitKinds: readonly ["Milliseconds", "Seconds", "Minutes", "Hours", "Days", "Weeks", "Months", "Years"];
+declare type TimeUnitOptions = {
+    kind: typeof timeUnitKinds[number];
+};
+declare const percentUnitKinds: readonly ["Percent", "PercentDecimal"];
+declare type PercentUnitOptions = {
+    kind: typeof percentUnitKinds[number];
+    decimal_places: number;
+};
+declare const decimalUnitKinds: readonly ["Decimal"];
+declare type DecimalUnitOptions = {
+    kind: typeof decimalUnitKinds[number];
+    decimal_places: number;
+    suffix?: 'string';
+    unitDisplay?: 'short' | 'long' | 'narrow';
+};
+export declare function abbreviateLargeNumber(num: number): string | number;
+export {};
+//# sourceMappingURL=units.d.ts.map

package/dist/model/units.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../src/model/units.ts"],"names":[],"mappings":"AAgBA,oBAAY,WAAW,GAAG,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAEpF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAmB5E;AAED,QAAA,MAAM,aAAa,8FAA+F,CAAC;AAGnH,aAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;CACpC,CAAC;AA0EF,QAAA,MAAM,gBAAgB,wCAAyC,CAAC;AAGhE,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAcF,QAAA,MAAM,gBAAgB,sBAAuB,CAAC;AAG9C,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3C,CAAC;AAkCF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,mBAUhD"}

package/dist/model/units.js

@@ -0,0 +1 @@
+import{IsSanctionedSimpleUnitIdentifier}from"@formatjs/ecma402-abstract";import{milliseconds}from"date-fns";export function formatValue(e,i){if(void 0===i)return e.toString();if(isTimeUnit(i))return formatTime(e,i);if(isPercentUnit(i))return formatPercent(e,i);if(isDecimalUnit(i))return formatDecimal(e,i);throw new Error(`Unknown unit options ${i}`)}const timeUnitKinds=["Milliseconds","Seconds","Minutes","Hours","Days","Weeks","Months","Years"],timeUnitKindsSet=new Set(timeUnitKinds);function isTimeUnit(e){return timeUnitKindsSet.has(e.kind)}function formatTime(e,i){const n={};switch(i.kind){case"Milliseconds":n.seconds=e/1e3;break;case"Seconds":n.seconds=e;break;case"Minutes":n.minutes=e;break;case"Hours":n.hours=e;break;case"Days":n.days=e;break;case"Weeks":n.weeks=e;break;case"Months":n.months=e;break;case"Years":n.years=e;break;default:const t=i.kind;throw new Error(`Unknown time unit type ${t}`)}const t=milliseconds(n),s=t/1e3;if(s<1)return`${t.toFixed()} milliseconds`;const r=s/60;if(r<1)return`${s.toFixed()} seconds`;const o=r/60;if(o<1)return`${r.toFixed()} minutes`;const a=o/24;if(a<1)return`${o.toFixed()} hours`;const c=a/7;if(c<1)return`${a.toFixed()} days`;const m=c/52;return m<1?`${c.toFixed()} weeks`:`${m.toFixed()} years`}const percentUnitKinds=["Percent","PercentDecimal"],percentUnitKindsSet=new Set(percentUnitKinds);function isPercentUnit(e){return percentUnitKindsSet.has(e.kind)}function formatPercent(e,i){return"PercentDecimal"===i.kind&&(e*=100),e.toFixed(i.decimal_places)+"%"}const decimalUnitKinds=["Decimal"],decimalUnitKindsSet=new Set(decimalUnitKinds);function isDecimalUnit(e){return decimalUnitKindsSet.has(e.kind)}function formatDecimal(e,i){var n,t;const s=null!==(n=i.decimal_places)&&void 0!==n?n:2;if(void 0!==i.suffix&&IsSanctionedSimpleUnitIdentifier(i.suffix)){const n={style:"unit",minimumFractionDigits:0,maximumFractionDigits:s,useGrouping:!0,unit:i.suffix,unitDisplay:null!==(t=i.unitDisplay)&&void 0!==t?t:"narrow"};return new Intl.NumberFormat("en-US",n).format(e)}const r={style:"decimal",minimumFractionDigits:0,maximumFractionDigits:s,useGrouping:!0};return new Intl.NumberFormat("en-US",r).format(e)}export function abbreviateLargeNumber(e){return e>=1e12?e/1e12+"T":e>=1e9?e/1e9+"B":e>=1e6?e/1e6+"M":e>=1e3?e/1e3+"k":e}

package/dist/tooltip/SeriesInfo.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface SeriesInfoProps {
+    seriesName: string;
+    y: number;
+    markerColor: string;
+    totalSeries: number;
+    wrapLabels?: boolean;
+}
+export declare function SeriesInfo(props: SeriesInfoProps): JSX.Element;
+export {};
+//# sourceMappingURL=SeriesInfo.d.ts.map

package/dist/tooltip/SeriesInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/tooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAiBA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAiHhD"}

package/dist/tooltip/SeriesInfo.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesMarker}from"./SeriesMarker";import{TOOLTIP_LABELS_MAX_WIDTH}from"./tooltip-model";export function SeriesInfo(e){const{seriesName:r,y:o,markerColor:t,totalSeries:i,wrapLabels:s}=e,l=r.replace(/[{}"]/g,"");if(1===i){const e="{"===r[0];return _jsxs(Stack,{spacing:.5,children:[_jsxs(Box,{sx:e=>({height:"16px",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"left",color:e.palette.grey[300],fontSize:"11px"}),children:[_jsx(SeriesMarker,{markerColor:t}),_jsxs(Box,{component:"span",children:["value:",_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,fontWeight:700,paddingLeft:"2px"}),children:o})]})]}),_jsx(Divider,{sx:e=>({borderColor:e.palette.grey[500]})}),_jsx(Box,{sx:e=>({color:e.palette.grey[300]}),children:l.split(",").map((r=>{if(r){const[o,t]=e?r.split(":"):r.split("=");return _jsxs(Box,{sx:{display:"flex",gap:"4px"},children:[_jsxs(Typography,{sx:{fontSize:"11px"},children:[o,":"]}),_jsx(Typography,{sx:e=>({color:e.palette.common.white,fontWeight:700,fontSize:"11px"}),children:t})]},r)}}))})]})}const a=l.replace(/[,]/g,", ").replace(/[:=]/g,": ");return _jsxs(Box,{sx:{display:"table-row",paddingTop:.5},children:[_jsxs(Box,{sx:{display:"table-cell",maxWidth:"520px"},children:[_jsx(SeriesMarker,{markerColor:t}),_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,display:"inline-block",maxWidth:TOOLTIP_LABELS_MAX_WIDTH,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:s?"normal":"nowrap",width:"calc(100% - 20px)"}),children:a})]}),_jsx(Box,{sx:{display:"table-cell",fontWeight:"700",paddingLeft:1.5,textAlign:"right",verticalAlign:"top"},children:o})]})}

package/dist/tooltip/SeriesMarker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface SeriesMarkerProps {
+    markerColor: string;
+}
+export declare function SeriesMarker(props: SeriesMarkerProps): JSX.Element;
+export {};
+//# sourceMappingURL=SeriesMarker.d.ts.map

package/dist/tooltip/SeriesMarker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesMarker.d.ts","sourceRoot":"","sources":["../../src/tooltip/SeriesMarker.tsx"],"names":[],"mappings":";AAeA,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAgBpD"}

package/dist/tooltip/SeriesMarker.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Box}from"@mui/material";export function SeriesMarker(r){const{markerColor:i}=r;return _jsx(Box,{sx:{display:"inline-block",width:"12px",borderRadius:"2px",height:"12px",marginTop:.25,marginRight:1,verticalAlign:"top"},style:{backgroundColor:i}})}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ECharts as EChartsInstance } from 'echarts/core';
+import { EChartsDataFormat } from '../model/graph-model';
+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 {};
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +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,sBAAsB,CAAC;AAEzD,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,sBAyD1C"}

package/dist/tooltip/Tooltip.js

@@ -0,0 +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:l}=t,[n,i]=useState(null),s=useMousePosition();if(null===s)return null;const a=r.current,u=getFocusedSeriesData(s,l,n,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,m=assembleTransform(s,u.length,p,T,n);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,overflowY:"scroll",backgroundColor:"#000",borderRadius:"6px",color:"#fff",fontSize:"11px",visibility:"visible",opacity:1,transition:"all 0.1s ease-out",zIndex:t.zIndex.tooltip}),style:{transform:m},onMouseEnter:()=>{null!==s&&i(s)},onMouseLeave:()=>{null!==n&&i(null)},children:_jsx(TooltipContent,{focusedSeries:u,wrapLabels:t.wrapLabels})})})}function assembleTransform(t,o,e,r,l){if(null===t)return"translate3d(0, 0)";null!==l&&(t=l);const n=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&&n>TOOLTIP_MAX_WIDTH?`translate3d(${n-32}px, ${i}px, 0) translateX(-100%)`:`translate3d(${n+32}px, ${i}px, 0)`}

package/dist/tooltip/TooltipContent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FocusedSeriesArray } from './focused-series';
+interface TooltipContentProps {
+    focusedSeries: FocusedSeriesArray | null;
+    wrapLabels?: boolean;
+}
+export declare function TooltipContent(props: TooltipContentProps): JSX.Element;
+export {};
+//# sourceMappingURL=TooltipContent.d.ts.map

package/dist/tooltip/TooltipContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/tooltip/TooltipContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,UAAU,mBAAmB;IAC3B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAgExD"}

package/dist/tooltip/TooltipContent.js

@@ -0,0 +1 @@
+import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useMemo}from"react";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesInfo}from"./SeriesInfo";export function TooltipContent(r){const{focusedSeries:e,wrapLabels:s}=r,t=e&&e[0]&&e[0].date?e[0].date:null,n=useMemo((()=>null===e?null:e.sort(((r,e)=>r.y>e.y?-1:1))),[e]);return null!==n&&null!==t?_jsxs(Stack,{py:1,px:1.5,spacing:.5,children:[_jsx(Typography,{variant:"caption",children:(r=>{const[e,s,t]=r.split(",");return _jsxs(_Fragment,{children:[_jsxs(Typography,{variant:"caption",sx:r=>({color:r.palette.grey[300]}),children:[e,", ",s," –"]}),_jsx(Typography,{variant:"caption",children:_jsx("strong",{children:t})})]})})(t)}),_jsx(Divider,{sx:r=>({borderColor:r.palette.grey[500]})}),_jsx(Box,{sx:{display:"table"},children:n.map((({datumIdx:r,seriesIdx:e,seriesName:t,y:o,markerColor:a})=>{if(null===r||null===e)return null;const i=e.toString()+r.toString();return _jsx(SeriesInfo,{seriesName:t,y:o,markerColor:a,totalSeries:n.length,wrapLabels:s},i)}))})]}):_jsx(_Fragment,{})}

package/dist/tooltip/focused-series.d.ts

@@ -0,0 +1,24 @@
+import { ECharts as EChartsInstance } from 'echarts/core';
+import { EChartsDataFormat } from '../model/graph-model';
+import { CursorData } from './tooltip-model';
+export interface FocusedSeriesInfo {
+    seriesIdx: number | null;
+    datumIdx: number | null;
+    seriesName: string;
+    date: string;
+    markerColor: string;
+    x: number;
+    y: number;
+}
+export declare type FocusedSeriesArray = FocusedSeriesInfo[];
+/**
+ * Returns formatted series data for the points that are close to the user's cursor
+ * Adjust yBuffer to increase or decrease number of series shown
+ */
+export declare function getNearbySeries(data: EChartsDataFormat, pointInGrid: number[], yBuffer: number): FocusedSeriesArray;
+/**
+ * Uses mouse position to determine whether user is hovering over a chart canvas
+ * If yes, convert from pixel values to logical cartesian coordinates and return all focused series
+ */
+export declare function getFocusedSeriesData(mousePos: CursorData['coords'], chartData: EChartsDataFormat, pinnedPos: CursorData['coords'], chart?: EChartsInstance): FocusedSeriesArray;
+//# sourceMappingURL=focused-series.d.ts.map

package/dist/tooltip/focused-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/tooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,UAAU,EAA0C,MAAM,iBAAiB,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,kBAAkB,CAwCnH;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,sBA2CxB"}

package/dist/tooltip/focused-series.js

@@ -0,0 +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=TOOLTIP_DATE_FORMAT.format(1e3*f);s.push({seriesIdx:t,datumIdx:l,seriesName:n,date:e,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

@@ -0,0 +1,79 @@
+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_DATE_FORMAT: Intl.DateTimeFormat;
+export declare const defaultCursorData: {
+    coords: {
+        viewport: {
+            x: number;
+            y: number;
+        };
+        plotCanvas: {
+            x: number;
+            y: number;
+        };
+        zrender: {
+            x: number;
+            y: number;
+        };
+        target: null;
+    };
+    chartWidth: number;
+};
+export declare const emptyTooltipData: {
+    cursor: {
+        coords: {
+            viewport: {
+                x: number;
+                y: number;
+            };
+            plotCanvas: {
+                x: number;
+                y: number;
+            };
+            zrender: {
+                x: number;
+                y: number;
+            };
+            target: null;
+        };
+        chartWidth: number;
+    };
+    focusedSeries: null;
+};
+export interface CursorCoordinates {
+    viewport: {
+        x: number;
+        y: number;
+    };
+    plotCanvas: {
+        x: number;
+        y: number;
+    };
+    zrender: {
+        x?: number;
+        y?: number;
+    };
+    target: EventTarget | null;
+}
+export interface CursorData {
+    coords: CursorCoordinates | null;
+    chartWidth?: number;
+}
+export interface TooltipData {
+    focusedSeries: FocusedSeriesArray | null;
+    cursor: CursorData;
+}
+declare type ZREventProperties = {
+    zrX?: number;
+    zrY?: number;
+    zrDelta?: number;
+    zrEventControl?: 'no_globalout' | 'only_globalout';
+    zrByTouch?: boolean;
+};
+export declare type ZRRawMouseEvent = MouseEvent & ZREventProperties;
+export declare const useMousePosition: () => CursorData['coords'];
+export {};
+//# sourceMappingURL=tooltip-model.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/tooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAiB7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;CAG5B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE;QACR,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,OAAO,EAAE;QACP,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAgCtD,CAAC"}

package/dist/tooltip/tooltip-model.js

@@ -0,0 +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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -21,10 +21,12 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@mui/material": "^5.5.1",
+    "echarts": "^5.3.2",
+    "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
+    "@mui/material": "^5.5.1",
     "react": "^17.0.2"
   },
   "files": [