@perses-dev/components 0.4.2 → 0.5.0

package/README.md

@@ -0,0 +1,18 @@
+# Perses Components Package
+
+This [package](https://www.npmjs.com/package/@perses-dev/components) includes individual components used in the Perses app and plugins. These components are broken up in a way that allows embedding in separate applications outside of Perses. For more info about corresponding packages see the [general UI README here](https://github.com/perses/perses/blob/main/ui/README.md) and markdown files in each component folder.
+
+
+## Usage 
+
+To import components from the components package use the syntax below:
+
+```typescript
+import { LineChart } from "@perses-dev/components";
+```
+
+For detailed examples of how to use certain components, see individual docs for: 
+
+- [LineChart.md](./src/LineChart/LineChart.md)
+- [GaugeChart.md](./src/GaugeChart/GaugeChart.md)
+- [StatChart.md](./src/StatChart/StatChart.md)

package/dist/EChart.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ECharts, EChartsCoreOption } from 'echarts/core';
 import { SxProps, Theme } from '@mui/material';
+import { EChartsTheme } from './model';
 export interface MouseEventsParameters<T> {
     componentType: string;
     seriesType: string;
@@ -48,11 +49,13 @@ export declare type OnEventsType<T> = {
 };
 export interface EChartsProps<T> {
     option: EChartsCoreOption;
+    theme?: string | EChartsTheme;
+    renderer?: 'canvas' | 'svg';
     sx?: SxProps<Theme>;
     onEvents?: OnEventsType<T>;
     _instance?: React.MutableRefObject<ECharts | undefined>;
     onChartInitialized?: (instance: ECharts) => void;
 }
-export declare const EChart: React.MemoExoticComponent<(<T>({ option, sx, onEvents, _instance, onChartInitialized, }: EChartsProps<T>) => JSX.Element)>;
+export declare const EChart: React.MemoExoticComponent<(<T>({ option, theme, renderer, sx, onEvents, _instance, onChartInitialized, }: EChartsProps<T>) => JSX.Element)>;
 export {};
 //# sourceMappingURL=EChart.d.ts.map

package/dist/EChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../src/EChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAQ,MAAM,cAAc,CAAC;AAChE,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIpD,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,aAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAEhC,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;AAExD,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,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,4HAgEjB,CAAC"}
+{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../src/EChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAQ,MAAM,cAAc,CAAC;AAChE,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,aAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAEhC,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;AAExD,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,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,6IAkEjB,CAAC"}

package/dist/EChart.js

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

package/dist/{GaugeChart.d.ts → GaugeChart/GaugeChart.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GaugeSeriesOption } from 'echarts/charts';
-import { UnitOptions } from './model/units';
+import { UnitOptions } from '../model/units';
 export declare type GaugeChartData = number | null | undefined;
 interface GaugeChartProps {
     width: number;
@@ -8,6 +8,7 @@ interface GaugeChartProps {
     data: GaugeChartData;
     unit: UnitOptions;
     axisLine: GaugeSeriesOption['axisLine'];
+    max?: number;
 }
 export declare function GaugeChart(props: GaugeChartProps): JSX.Element;
 export {};

package/dist/GaugeChart/GaugeChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK1D,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;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA+HhD"}

package/dist/GaugeChart/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{useChartsTheme}from"../context/ChartsThemeProvider";import{formatValue}from"../model/units";import{EChart}from"../EChart";use([EChartsGaugeChart,GridComponent,TitleComponent,TooltipComponent,CanvasRenderer]);export function GaugeChart(e){const{width:t,height:o,data:r,unit:a,axisLine:i,max:s}=e,n=useChartsTheme(),h=useMemo((()=>null==r?n.noDataOption:{title:{show:!1},tooltip:{show:!1},series:[{type:"gauge",center:["50%","65%"],radius:"100%",startAngle:200,endAngle:-20,min:0,max:s,silent:!0,progress:{show:!0,width:22,itemStyle:{color:"auto"}},pointer:{show:!1},axisLine:{lineStyle:{color:[[1,"#e1e5e9"]],width:22}},axisTick:{show:!1,distance:0},splitLine:{show:!0},axisLabel:{show:!1,distance:-18,color:"#999",fontSize:12},anchor:{show:!1},title:{show:!1},detail:{show:!1},data:[{value:r}]},{type:"gauge",center:["50%","65%"],radius:"114%",startAngle:200,endAngle:-20,min:0,max:s,pointer:{show:!1,itemStyle:{color:"auto"}},axisLine:i,axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},detail:{show:!0,width:"60%",borderRadius:8,offsetCenter:[0,"-9%"],color:"inherit",formatter:e=>formatValue(e,{kind:a.kind,decimal_places:0})},data:[{value:r}]}]}),[r,n,a,i,s]);return _jsx(EChart,{sx:{width:t,height:o},option:h,theme:n.themeName})}

package/dist/GaugeChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GaugeChart';
+//# sourceMappingURL=index.d.ts.map

package/dist/GaugeChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC"}

package/dist/GaugeChart/index.js

@@ -0,0 +1 @@
+export*from"./GaugeChart";

package/dist/InfoTooltip/InfoTooltip.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare enum TooltipPlacement {
+    Top = "top",
+    Left = "left",
+    Right = "right",
+    Bottom = "bottom"
+}
+interface InfoTooltipProps {
+    description: string;
+    children: React.ReactNode;
+    id?: string;
+    title?: string;
+    placement?: TooltipPlacement;
+}
+export declare const InfoTooltip: ({ id, title, description, placement, children }: InfoTooltipProps) => JSX.Element;
+export {};
+//# sourceMappingURL=InfoTooltip.d.ts.map

package/dist/InfoTooltip/InfoTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,oDAAqD,gBAAgB,gBAW5F,CAAC"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{styled,Tooltip as MuiTooltip,tooltipClasses,Typography}from"@mui/material";export var TooltipPlacement;!function(t){t.Top="top",t.Left="left",t.Right="right",t.Bottom="bottom"}(TooltipPlacement||(TooltipPlacement={}));export const InfoTooltip=({id:t,title:o,description:e,placement:i,children:a})=>_jsx(StyledTooltip,{arrow:!0,id:t,placement:i,title:_jsx(TooltipContent,{title:o,description:e}),children:_jsx("div",{children:a})});const TooltipContent=({title:t,description:o})=>_jsxs(_Fragment,{children:[t&&_jsx(Typography,{variant:"body2",sx:t=>({color:t.palette.text.primary,fontWeight:t.typography.fontWeightMedium}),children:t}),_jsx(Typography,{variant:"caption",sx:t=>({color:t.palette.text.primary}),children:o})]}),StyledTooltip=styled((({className:t,...o})=>_jsx(MuiTooltip,{...o,classes:{popper:t}})))((({theme:t})=>({[`& .${tooltipClasses.tooltip}`]:{backgroundColor:t.palette.secondary.main,color:t.palette.grey[900],maxWidth:"300px",padding:t.spacing(1),boxShadow:t.shadows[1]},[`& .${tooltipClasses.arrow}`]:{color:t.palette.background.paper,"&::before":{backgroundColor:t.palette.secondary.main}}})));

package/dist/InfoTooltip/InfoTooltip.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=InfoTooltip.test.d.ts.map

package/dist/InfoTooltip/InfoTooltip.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoTooltip.test.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.test.tsx"],"names":[],"mappings":""}

package/dist/InfoTooltip/InfoTooltip.test.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{screen}from"@testing-library/dom";import{InfoTooltip}from"./InfoTooltip";describe("InfoTooltip",(()=>{const t="Tooltip Title",e="this is a tooltip";it("should render title and description",(async()=>{render(_jsx(InfoTooltip,{title:t,description:e,children:_jsx("div",{children:"tooltipAnchor"})}));const r=screen.getByText("tooltipAnchor");userEvent.hover(r),await screen.findByText(t),screen.findByText(e)}))}));

package/dist/InfoTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InfoTooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/InfoTooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC"}

package/dist/InfoTooltip/index.js

@@ -0,0 +1 @@
+export*from"./InfoTooltip";

package/dist/LineChart/LineChart.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { GridComponentOption, LegendComponentOption, VisualMapComponentOption } from 'echarts';
+import { EChartsDataFormat } from '../model/graph';
+import { UnitOptions } from '../model/units';
+import { ZoomEventData } from './utils';
+interface LineChartProps {
+    height: number;
+    data: EChartsDataFormat;
+    unit?: UnitOptions;
+    grid?: GridComponentOption;
+    legend?: LegendComponentOption;
+    visualMap?: VisualMapComponentOption[];
+    onDataZoom?: (e: ZoomEventData) => void;
+}
+export declare function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom }: LineChartProps): JSX.Element;
+export {};
+//# sourceMappingURL=LineChart.d.ts.map

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

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

package/dist/LineChart/LineChart.js

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

package/dist/LineChart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './LineChart';
+export type { ZoomEventData } from './utils';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/LineChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/LineChart/index.js

@@ -0,0 +1 @@
+export*from"./LineChart";

package/dist/LineChart/utils.d.ts

@@ -0,0 +1,12 @@
+import { ECharts as EChartsInstance } from 'echarts/core';
+export interface ZoomEventData {
+    start: number;
+    end: number;
+    startIndex: number;
+    endIndex: number;
+}
+export declare function enableDataZoom(chart: EChartsInstance): void;
+export declare function restoreChart(chart: EChartsInstance): void;
+export declare function getDateRange(data: number[]): number;
+export declare function getFormattedDate(value: number, rangeMs: number): string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/LineChart/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAIlD;AAGD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAiB9D"}

package/dist/LineChart/utils.js

@@ -0,0 +1 @@
+export function enableDataZoom(o){const t=o._model;void 0!==t&&void 0!==t.option.toolbox&&t.option.toolbox.length>0&&"normal"===t.option.toolbox[0].feature.dataZoom.iconStatus.zoom&&o.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0})}export function restoreChart(o){o.dispatchAction({type:"restore"})}export function getDateRange(o){const t=36e5;if(0===o.length)return t;const e=o[o.length-1];return void 0===o[0]||void 0===e?t:e-o[0]}export function getFormattedDate(o,t){const e={hour:"numeric",minute:"numeric",hourCycle:"h23"};return t<=18e5?e.second="numeric":t>=864e5&&(e.month="numeric",e.day="numeric"),new Intl.DateTimeFormat(void 0,e).format(o).replace(/, /g," ")}

package/dist/{StatChart.d.ts → StatChart/StatChart.d.ts}

@@ -1,14 +1,10 @@
 /// <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>;
-}
+import { UnitOptions } from '../model/units';
+import { GraphSeries } from '../model/graph';
 export interface StatChartData {
-    calculatedValue: number | null | undefined;
-    seriesData: GraphSeries | null | undefined;
+    calculatedValue?: number;
+    seriesData?: GraphSeries;
     name?: string;
 }
 interface StatChartProps {
@@ -16,7 +12,6 @@ interface StatChartProps {
     height: number;
     data: StatChartData;
     unit: UnitOptions;
-    backgroundColor?: string;
     sparkline?: LineSeriesOption;
 }
 export declare function StatChart(props: StatChartProps): JSX.Element;

package/dist/StatChart/StatChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAgB7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,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,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAwF9C"}

package/dist/StatChart/StatChart.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo}from"react";import{Box,Typography}from"@mui/material";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{useChartsTheme}from"../context/ChartsThemeProvider";import{formatValue}from"../model/units";import{EChart}from"../EChart";use([EChartsGaugeChart,EChartsLineChart,GridComponent,DatasetComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const PANEL_PADDING=32,MIN_VALUE_SIZE=12,MAX_VALUE_SIZE=36;export function StatChart(t){const{width:e,height:o,data:r,unit:a,sparkline:s}=t,i=useChartsTheme(),n=void 0===r.calculatedValue?"No data":formatValue(r.calculatedValue,a),m=useMemo((()=>{if(void 0===r.seriesData)return i.noDataOption;const t=r.seriesData,e=[];if(void 0!==s){const o={type:"line",data:[...t.values],zlevel:1,symbol:"none",animation:!1,silent:!0},r=merge(o,s);e.push(r)}return{title:{show:!1},grid:{show:!1,top:"35%",right:0,bottom:0,left:0,containLabel:!1},xAxis:{type:"time",show:!1,boundaryGap:!1},yAxis:{type:"value",show:!1},tooltip:{show:!1},series:e}}),[r,i,s]),h=e>250&&o>180,p=n.length,l=!0===h?36:Math.min(e,o)/p;return _jsxs(Box,{children:[_jsx(Typography,{variant:"h3",sx:t=>({color:t.palette.text.primary,fontSize:`clamp(12px, ${l}px, 36px)`}),children:n}),void 0!==s&&_jsx(EChart,{sx:{width:e+32,height:o,position:"absolute",bottom:0,left:0},option:m,theme:i.themeName,renderer:"svg"})]})}

package/dist/StatChart/StatChart.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=StatChart.test.d.ts.map

package/dist/StatChart/StatChart.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatChart.test.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.test.tsx"],"names":[],"mappings":""}

package/dist/StatChart/StatChart.test.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{render,screen}from"@testing-library/react";import{ChartsThemeProvider}from"../context/ChartsThemeProvider";import{StatChart}from"./StatChart";describe("StatChart",(()=>{const e={kind:"Decimal",decimal_places:2},t={calculatedValue:7.72931659687181,name:"Example Stat Chart",seriesData:{name:'(((count(count(node_cpu_seconds_total{job="example"}) by (cpu))',values:[[165400617e4,7.736401673473903],[1654006185e3,7.733891213538757],[16540062e5,7.731101813010433],[1654006215e3,7.722454672079215],[165400623e4,7.722733612256738]]}},r={themeName:"perses",echartsTheme:{},noDataOption:{},sparkline:{width:1,color:"#000000"}};describe("Render default options (no sparkline)",(()=>{it("should render",(()=>{render(_jsx(ChartsThemeProvider,{themeName:"perses",chartsTheme:r,children:_jsx(StatChart,{width:200,height:200,data:t,unit:e})})),expect(screen.getByText("7.73")).toBeInTheDocument()}))}))}));

package/dist/StatChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StatChart';
+//# sourceMappingURL=index.d.ts.map

package/dist/StatChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StatChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC"}

package/dist/StatChart/index.js

@@ -0,0 +1 @@
+export*from"./StatChart";

package/dist/{tooltip → Tooltip}/SeriesInfo.d.ts.map

@@ -1 +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,eAkHhD"}
+{"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,eAkHhD"}

package/dist/{tooltip → Tooltip}/SeriesMarker.d.ts.map

@@ -1 +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"}
+{"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 → Tooltip}/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { EChartsDataFormat } from '../model/graph-model';
+import { EChartsDataFormat } from '../model/graph';
 import { TooltipData } from './tooltip-model';
 interface TooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;

package/dist/{tooltip → 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,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,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;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"}

package/dist/{tooltip → Tooltip}/TooltipContent.d.ts.map

@@ -1 +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"}
+{"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 → Tooltip}/focused-series.d.ts

@@ -1,5 +1,5 @@
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { EChartsDataFormat } from '../model/graph-model';
+import { EChartsDataFormat } from '../model/graph';
 import { CursorData } from './tooltip-model';
 export interface FocusedSeriesInfo {
     seriesIdx: number | null;

package/dist/{tooltip → Tooltip}/focused-series.d.ts.map

@@ -1 +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,CA0CnH;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"}
+{"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,gBAAgB,CAAC;AACnD,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,CA0CnH;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.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=focused-series.test.d.ts.map

package/dist/Tooltip/focused-series.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focused-series.test.d.ts","sourceRoot":"","sources":["../../src/Tooltip/focused-series.test.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+import{getNearbySeries}from"./focused-series";describe("getNearbySeries",(()=>{const e={timeSeries:[{type:"line",name:'env="demo", instance="demo.do.prometheus", job="node", mode="test"',color:"hsla(-1365438424,50%,50%,0.8)",data:[.0002315202231525094,.00022873082287300112,.00023152022315149463,.00023152022315149463,.00022873082287300112],symbol:"circle"},{type:"line",name:'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',color:"hsla(286664040,50%,50%,0.8)",data:[.05245188284519867,.0524463040446356,.0524463040446356,.05247140864723438,.052482566248230646],symbol:"circle"}],xAxis:[1654007865e3,165400788e4,1654007895e3,165400791e4,1654007925e3],rangeMs:6e4},o=[2,.0560655737704918],s=[{date:"May 31, 2022, 2:38:15 PM",datumIdx:2,markerColor:"hsla(286664040,50%,50%,0.8)",seriesName:'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',seriesIdx:1,x:1654007895e3,y:.0524463040446356}];it("should return focused series data for points nearby the cursor",(()=>{expect(getNearbySeries(e,o,.02)).toEqual(s)}))}));

package/dist/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Tooltip';
+export * from './SeriesMarker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAaA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC"}

package/dist/Tooltip/index.js

@@ -0,0 +1 @@
+export*from"./Tooltip";export*from"./SeriesMarker";

package/dist/{tooltip → Tooltip}/tooltip-model.d.ts.map

@@ -1 +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"}
+{"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/cjs/EChart.js

@@ -57,7 +57,7 @@ const mouseEvents = [
     'contextmenu',
 ];
 const batchEvents = ['datazoom', 'downplay', 'highlight'];
-exports.EChart = react_1.default.memo(function EChart({ option, sx, onEvents, _instance, onChartInitialized, }) {
+exports.EChart = react_1.default.memo(function EChart({ option, theme, renderer, sx, onEvents, _instance, onChartInitialized, }) {
     const initialOption = (0, react_1.useRef)(option);
     const prevOption = (0, react_1.useRef)(option);
     const containerRef = (0, react_1.useRef)(null);
@@ -66,7 +66,7 @@ exports.EChart = react_1.default.memo(function EChart({ option, sx, onEvents, _i
     (0, react_1.useLayoutEffect)(() => {
         if (containerRef.current === null || chartElement.current !== null)
             return;
-        chartElement.current = (0, core_1.init)(containerRef.current);
+        chartElement.current = (0, core_1.init)(containerRef.current, theme, { renderer: renderer !== null && renderer !== void 0 ? renderer : 'canvas' });
         chartElement.current.setOption(initialOption.current, true);
         onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chartElement.current);
         if (_instance !== undefined) {
@@ -78,7 +78,7 @@ exports.EChart = react_1.default.memo(function EChart({ option, sx, onEvents, _i
             chartElement.current.dispose();
             chartElement.current = null;
         };
-    }, [_instance, onChartInitialized]);
+    }, [_instance, onChartInitialized, theme, renderer]);
     // Update chart data when option changes
     (0, react_1.useEffect)(() => {
         if (prevOption.current === undefined || (0, lodash_es_1.isEqual)(prevOption.current, option))

package/dist/cjs/{GaugeChart.js → GaugeChart/GaugeChart.js}

@@ -19,34 +19,16 @@ const core_1 = require("echarts/core");
 const charts_1 = require("echarts/charts");
 const components_1 = require("echarts/components");
 const renderers_1 = require("echarts/renderers");
-const units_1 = require("./model/units");
-const EChart_1 = require("./EChart");
+const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
+const units_1 = require("../model/units");
+const EChart_1 = require("../EChart");
 (0, core_1.use)([charts_1.GaugeChart, components_1.GridComponent, components_1.TitleComponent, components_1.TooltipComponent, renderers_1.CanvasRenderer]);
-const noDataOption = {
-    title: {
-        show: true,
-        textStyle: {
-            color: 'grey',
-            fontSize: 16,
-            fontWeight: 400,
-        },
-        text: 'No data',
-        left: 'center',
-        top: 'center',
-    },
-    xAxis: {
-        show: false,
-    },
-    yAxis: {
-        show: false,
-    },
-    series: [],
-};
 function GaugeChart(props) {
-    const { width, height, data, unit, axisLine } = props;
+    const { width, height, data, unit, axisLine, max } = props;
+    const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
     const option = (0, react_1.useMemo)(() => {
         if (data === null || data === undefined)
-            return noDataOption;
+            return chartsTheme.noDataOption;
         const calculatedValue = data;
         return {
             title: {
@@ -63,8 +45,7 @@ function GaugeChart(props) {
                     startAngle: 200,
                     endAngle: -20,
                     min: 0,
-                    max: 100,
-                    splitNumber: 12,
+                    max,
                     silent: true,
                     progress: {
                         show: true,
@@ -84,21 +65,10 @@ function GaugeChart(props) {
                     },
                     axisTick: {
                         show: false,
-                        distance: -28,
-                        splitNumber: 5,
-                        lineStyle: {
-                            width: 2,
-                            color: '#999',
-                        },
+                        distance: 0,
                     },
                     splitLine: {
-                        show: false,
-                        distance: -32,
-                        length: 6,
-                        lineStyle: {
-                            width: 2,
-                            color: '#999',
-                        },
+                        show: true,
                     },
                     axisLabel: {
                         show: false,
@@ -128,7 +98,7 @@ function GaugeChart(props) {
                     startAngle: 200,
                     endAngle: -20,
                     min: 0,
-                    max: 100,
+                    max,
                     pointer: {
                         show: false,
                         itemStyle: {
@@ -147,12 +117,9 @@ function GaugeChart(props) {
                     },
                     detail: {
                         show: true,
-                        valueAnimation: false,
                         width: '60%',
                         borderRadius: 8,
                         offsetCenter: [0, '-9%'],
-                        fontSize: 20,
-                        fontWeight: 'bolder',
                         color: 'inherit',
                         formatter: (value) => {
                             return (0, units_1.formatValue)(value, {
@@ -169,10 +136,10 @@ function GaugeChart(props) {
                 },
             ],
         };
-    }, [data, unit, axisLine]);
+    }, [data, chartsTheme, unit, axisLine, max]);
     return ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
             width: width,
             height: height,
-        }, option: option }));
+        }, option: option, theme: chartsTheme.themeName }));
 }
 exports.GaugeChart = GaugeChart;

package/dist/cjs/GaugeChart/index.js

@@ -0,0 +1,29 @@
+"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.
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./GaugeChart"), exports);

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoTooltip = exports.TooltipPlacement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+var TooltipPlacement;
+(function (TooltipPlacement) {
+    TooltipPlacement["Top"] = "top";
+    TooltipPlacement["Left"] = "left";
+    TooltipPlacement["Right"] = "right";
+    TooltipPlacement["Bottom"] = "bottom";
+})(TooltipPlacement = exports.TooltipPlacement || (exports.TooltipPlacement = {}));
+const InfoTooltip = ({ id, title, description, placement, children }) => {
+    return ((0, jsx_runtime_1.jsx)(StyledTooltip, { arrow: true, id: id, placement: placement, title: (0, jsx_runtime_1.jsx)(TooltipContent, { title: title, description: description }), children: (0, jsx_runtime_1.jsx)("div", { children: children }) }));
+};
+exports.InfoTooltip = InfoTooltip;
+const TooltipContent = ({ title, description }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: (theme) => ({
+                    color: theme.palette.text.primary,
+                    fontWeight: theme.typography.fontWeightMedium,
+                }), children: title })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: (theme) => ({
+                    color: theme.palette.text.primary,
+                }), children: description })] }));
+};
+const StyledTooltip = (0, material_1.styled)(({ className, ...props }) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { ...props, classes: { popper: className } })))(({ theme }) => ({
+    [`& .${material_1.tooltipClasses.tooltip}`]: {
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.grey[900],
+        maxWidth: '300px',
+        padding: theme.spacing(1),
+        boxShadow: theme.shadows[1],
+    },
+    [`& .${material_1.tooltipClasses.arrow}`]: {
+        color: theme.palette.background.paper,
+        '&::before': {
+            backgroundColor: theme.palette.secondary.main,
+        },
+    },
+}));