@perses-dev/components 0.2.0 → 0.3.1

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/cjs/ECharts.js

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ECharts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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.
+const react_1 = require("react");
+const debounce_1 = __importDefault(require("lodash/debounce"));
+const core_1 = require("echarts/core");
+const material_1 = require("@mui/material");
+const mouseEvents = [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mousemove',
+    'mouseup',
+    'mouseover',
+    'mouseout',
+    'globalout',
+    'contextmenu',
+];
+const batchEvents = ['datazoom', 'downplay', 'highlight'];
+function ECharts({ sx, _instance, onChartInitialized, option, onEvents }) {
+    const [containerRef, setContainerRef] = (0, react_1.useState)(null);
+    const [echart, setChart] = (0, react_1.useState)(undefined);
+    // Create a chart instance in the container
+    (0, react_1.useLayoutEffect)(() => {
+        if (containerRef === null)
+            return;
+        const chart = (0, core_1.init)(containerRef);
+        setChart(chart);
+        if (_instance !== undefined) {
+            _instance.current = chart;
+        }
+        bindEvents(chart, onEvents);
+        onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chart);
+        return () => {
+            chart.dispose();
+        };
+    }, [containerRef, _instance, onChartInitialized, onEvents]);
+    // Sync options with chart instance
+    (0, react_1.useLayoutEffect)(() => {
+        if (echart === undefined)
+            return;
+        echart.setOption(option);
+    }, [echart, option]);
+    (0, react_1.useLayoutEffect)(() => {
+        const updateSize = (0, debounce_1.default)(() => {
+            echart === null || echart === void 0 ? void 0 : echart.resize();
+        }, 200);
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, [echart]);
+    return (0, jsx_runtime_1.jsx)(material_1.Box, { ref: setContainerRef, sx: sx });
+}
+exports.ECharts = ECharts;
+// Validate event config and bind custom events
+function bindEvents(instance, events) {
+    var _a;
+    if (events === undefined)
+        return;
+    function bindEvent(eventName, onEventFunction) {
+        if (typeof onEventFunction === 'function') {
+            if (isMouseEvent(eventName)) {
+                instance.on(eventName, (param) => onEventFunction(param, instance));
+            }
+            else if (isBatchEvent(eventName)) {
+                instance.on(eventName, (param) => onEventFunction(param));
+            }
+            else {
+                instance.on(eventName, () => onEventFunction(null, instance));
+            }
+        }
+    }
+    for (const eventName in events) {
+        if (Object.prototype.hasOwnProperty.call(events, eventName)) {
+            const customEvent = (_a = events[eventName]) !== null && _a !== void 0 ? _a : null;
+            if (customEvent) {
+                bindEvent(eventName, customEvent);
+            }
+        }
+    }
+}
+function isMouseEvent(eventName) {
+    return mouseEvents.includes(eventName);
+}
+function isBatchEvent(eventName) {
+    return batchEvents.includes(eventName);
+}

package/dist/cjs/ErrorAlert.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorAlert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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.
+const material_1 = require("@mui/material");
+/**
+ * Shows an MUI Alert with the `Error.message` as its contents.
+ */
+function ErrorAlert(props) {
+    const { error } = props;
+    return (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message });
+}
+exports.ErrorAlert = ErrorAlert;

package/dist/cjs/ErrorBoundary.js

@@ -0,0 +1,18 @@
+"use strict";
+// Copyright 2021 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.ErrorBoundary = void 0;
+// Just use react-error-boundary as-is for now
+var react_error_boundary_1 = require("react-error-boundary");
+Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return react_error_boundary_1.ErrorBoundary; } });

package/dist/cjs/GaugeChart.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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.
+const react_1 = require("react");
+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 ECharts_1 = require("./ECharts");
+(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 option = (0, react_1.useMemo)(() => {
+        if (data === null || data === undefined)
+            return noDataOption;
+        const calculatedValue = data;
+        return {
+            title: {
+                show: false,
+            },
+            tooltip: {
+                show: false,
+            },
+            series: [
+                {
+                    type: 'gauge',
+                    center: ['50%', '65%'],
+                    radius: '100%',
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max: 100,
+                    splitNumber: 12,
+                    silent: true,
+                    progress: {
+                        show: true,
+                        width: 22,
+                        itemStyle: {
+                            color: 'auto',
+                        },
+                    },
+                    pointer: {
+                        show: false,
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: [[1, '#e1e5e9']],
+                            width: 22,
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                        distance: -28,
+                        splitNumber: 5,
+                        lineStyle: {
+                            width: 2,
+                            color: '#999',
+                        },
+                    },
+                    splitLine: {
+                        show: false,
+                        distance: -32,
+                        length: 6,
+                        lineStyle: {
+                            width: 2,
+                            color: '#999',
+                        },
+                    },
+                    axisLabel: {
+                        show: false,
+                        distance: -18,
+                        color: '#999',
+                        fontSize: 12,
+                    },
+                    anchor: {
+                        show: false,
+                    },
+                    title: {
+                        show: false,
+                    },
+                    detail: {
+                        show: false,
+                    },
+                    data: [
+                        {
+                            value: calculatedValue,
+                        },
+                    ],
+                },
+                {
+                    type: 'gauge',
+                    center: ['50%', '65%'],
+                    radius: '114%',
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max: 100,
+                    pointer: {
+                        show: false,
+                        itemStyle: {
+                            color: 'auto',
+                        },
+                    },
+                    axisLine,
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: false,
+                    },
+                    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, {
+                                kind: unit.kind,
+                                decimal_places: 0,
+                            });
+                        },
+                    },
+                    data: [
+                        {
+                            value: calculatedValue,
+                        },
+                    ],
+                },
+            ],
+        };
+    }, [data, unit, axisLine]);
+    return ((0, jsx_runtime_1.jsx)(ECharts_1.ECharts, { sx: {
+            width: width,
+            height: height,
+        }, option: option }));
+}
+exports.GaugeChart = GaugeChart;