@perses-dev/components 0.4.2 → 0.5.2

package/dist/utils/theme-gen.test.js

@@ -0,0 +1 @@
+import{createTheme}from"@mui/material";import{generateChartsTheme}from"./theme-gen";describe("generateChartsTheme",(()=>{const n=createTheme({}),e=generateChartsTheme("perses",n,{legend:{textStyle:{color:"yellow"}},line:{showSymbol:!0,smooth:!0}});it("should return perses specific charts theme from converted MUI theme",(()=>{expect(e).toMatchInlineSnapshot('\n      Object {\n        "echartsTheme": Object {\n          "bar": Object {\n            "barMaxWidth": 150,\n            "itemStyle": Object {\n              "borderColor": "#e0e0e0",\n              "borderWidth": 0,\n            },\n          },\n          "categoryAxis": Object {\n            "axisLabel": Object {\n              "color": "rgba(0, 0, 0, 0.87)",\n              "margin": 15,\n              "show": true,\n            },\n            "axisLine": Object {\n              "lineStyle": Object {\n                "color": "#757575",\n              },\n              "show": true,\n            },\n            "axisTick": Object {\n              "length": 6,\n              "lineStyle": Object {\n                "color": "#757575",\n              },\n              "show": false,\n            },\n            "show": true,\n            "splitArea": Object {\n              "areaStyle": Object {\n                "color": Array [\n                  "#e0e0e0",\n                ],\n              },\n              "show": false,\n            },\n            "splitLine": Object {\n              "lineStyle": Object {\n                "color": "#e0e0e0",\n                "opacity": 0.6,\n                "width": 0.5,\n              },\n              "show": true,\n            },\n          },\n          "color": Array [\n            "#8dd3c7",\n            "#bebada",\n            "#fb8072",\n            "#80b1d3",\n            "#fdb462",\n          ],\n          "gauge": Object {\n            "detail": Object {\n              "fontSize": 18,\n              "fontWeight": 600,\n              "valueAnimation": false,\n            },\n            "splitLine": Object {\n              "distance": 0,\n              "length": 4,\n              "lineStyle": Object {\n                "width": 1,\n              },\n            },\n            "splitNumber": 12,\n          },\n          "grid": Object {\n            "bottom": 0,\n            "containLabel": true,\n            "left": 20,\n            "right": 20,\n            "top": 5,\n          },\n          "legend": Object {\n            "orient": "horizontal",\n            "pageIconColor": "rgba(0, 0, 0, 0.54)",\n            "pageIconInactiveColor": "rgba(0, 0, 0, 0.26)",\n            "pageTextStyle": Object {\n              "color": "#757575",\n            },\n            "textStyle": Object {\n              "color": "yellow",\n            },\n          },\n          "line": Object {\n            "emphasis": Object {\n              "lineStyle": Object {\n                "width": 1.5,\n              },\n            },\n            "lineStyle": Object {\n              "width": 1,\n            },\n            "showSymbol": true,\n            "smooth": true,\n            "symbol": "circle",\n            "symbolSize": 4,\n          },\n          "textStyle": Object {\n            "color": "rgba(0, 0, 0, 0.87)",\n            "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",\n            "fontSize": 12,\n          },\n          "title": Object {\n            "show": false,\n          },\n          "toolbox": Object {\n            "iconStyle": Object {\n              "borderColor": "rgba(0, 0, 0, 0.87)",\n            },\n            "right": 10,\n            "show": true,\n            "top": 10,\n          },\n          "tooltip": Object {},\n          "valueAxis": Object {\n            "axisLabel": Object {\n              "color": "rgba(0, 0, 0, 0.87)",\n              "margin": 12,\n            },\n            "axisLine": Object {\n              "show": false,\n            },\n            "show": true,\n            "splitLine": Object {\n              "lineStyle": Object {\n                "color": "#e0e0e0",\n                "opacity": 0.6,\n                "width": 0.5,\n              },\n              "show": true,\n            },\n          },\n        },\n        "noDataOption": Object {\n          "title": Object {\n            "left": "center",\n            "show": true,\n            "text": "No data",\n            "textStyle": Object {\n              "color": "rgba(0, 0, 0, 0.87)",\n              "fontSize": 16,\n              "fontWeight": 400,\n            },\n            "top": "center",\n          },\n          "xAxis": Object {\n            "show": false,\n          },\n          "yAxis": Object {\n            "show": false,\n          },\n        },\n        "sparkline": Object {\n          "color": "#1976d2",\n          "width": 2,\n        },\n        "themeName": "perses",\n      }\n    ')}))}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.4.2",
+  "version": "0.5.2",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -18,13 +18,14 @@
     "clean": "rimraf dist/",
     "build": "tsc --build",
     "build:cjs": "tsc --project ./tsconfig.cjs.json",
-    "test": "echo 'no test to run' && exit 0",
+    "test": "TZ=UTC jest",
+    "test:watch": "TZ=UTC jest --watch",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/core": "^0.4.2",
-    "echarts": "^5.3.2",
+    "@perses-dev/core": "^0.5.2",
+    "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"
   },

package/dist/GaugeChart.d.ts.map

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

@@ -1 +0,0 @@
-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{EChart}from"./EChart";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:a}=t,s=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:a,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,a]);return _jsx(EChart,{sx:{width:e,height:o},option:s})}

package/dist/LineChart.d.ts

@@ -1,22 +0,0 @@
-/// <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({ height, data, grid, legend, toolbox, visualMap, dataZoomEnabled, onDataZoom, }: LineChartProps): JSX.Element;
-export {};
-//# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../src/LineChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,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,EACxB,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,eAAe,EACf,UAAU,GACX,EAAE,cAAc,eAwLhB"}

package/dist/LineChart.js

@@ -1 +0,0 @@
-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,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{EChart}from"./EChart";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({height:e,data:t,grid:o,legend:r,toolbox:n,visualMap:a,dataZoomEnabled:i,onDataZoom:s}){const m=useTheme(),l=useRef(),[p,c]=useState(!0),u=useMemo((()=>({datazoom:e=>{var o,r;if(void 0===s||void 0===e.batch[0])return;const n=null!==(o=e.batch[0].startValue)&&void 0!==o?o:0,a=null!==(r=e.batch[0].endValue)&&void 0!==r?r:t.xAxis.length-1,i=t.xAxis[n],m=t.xAxis[a];void 0!==i&&void 0!==m&&s({start:i,end:m,startIndex:n,endIndex:a})}})),[t,s]);void 0!==l.current&&!0===i&&l.current.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0});const d=useDeepMemo((()=>{var e;if(void 0===t.timeSeries)return{};if(null===t.timeSeries||0===t.timeSeries.length)return noDataOption;const s=t.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,l={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}}};!1===i&&delete l.feature.dataZoom.icon;const p=null!==(e=t.rangeMs)&&void 0!==e?e:getDateRange(t.xAxis);return{title:{show:!1},grid:merge({top:10,right:20,bottom:5,left:20,containLabel:!0},o),toolbox:merge(l,n),series:t.timeSeries,xAxis:{type:"category",data:t.xAxis,max:t.xAxisMax,axisLabel:{margin:15,color:m.palette.text.primary,formatter:e=>getFormattedDate(e,p)},axisTick:{show:!1},axisLine:{lineStyle:{color:m.palette.grey[600]}}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{margin:12,color:m.palette.text.primary,formatter:e=>abbreviateLargeNumber(e)},splitLine:{show:!0,lineStyle:{width:.5,color:m.palette.grey[300],opacity:.95}}},animation:!1,tooltip:{show:s,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},legend:r,visualMap:a}}),[t,m,o,r,n,i,a]);return _jsxs(Box,{sx:{height:e},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&c(!1)},onMouseUp:()=>{c(!0)},onMouseLeave:()=>{c(!1)},onMouseEnter:()=>{c(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:l,tooltipData:emptyTooltipData,chartData:t,wrapLabels:!0}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:d,onEvents:u,_instance:l})]})}function getDateRange(e){const t=36e5;if(0===e.length)return t;const o=e[e.length-1];return void 0===e[0]||void 0===o?t:o-e[0]}function getFormattedDate(e,t){const o={hour:"numeric",minute:"numeric",hourCycle:"h23"};return t<=18e5?o.second="numeric":t>=864e5&&(o.month="numeric",o.day="numeric"),new Intl.DateTimeFormat(void 0,o).format(e).replace(/, /g," ")}

package/dist/StatChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../src/StatChart.tsx"],"names":[],"mappings":";AAmBA,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,eA+J9C"}

package/dist/StatChart.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";import{useTheme}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{formatValue}from"./model/units";import{EChart}from"./EChart";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=useTheme(),h=useMemo((()=>{var t;if(void 0===a.seriesData)return{};if(null===a.seriesData||void 0===a.calculatedValue)return noDataOption;const h=a.seriesData,l=null!==(t=a.calculatedValue)&&void 0!==t?t:0,m=e>250,p=!0===m?a.name:"",u=Math.min(e,1.2*o),c=Math.min(u/4*.65,72),d=.5*c,f=[{type:"gauge",data:[{value:l,name:p}],detail:{show:!0,offsetCenter:["0%","-65%"],formatter:[`{name|${p}}`,`{value|${formatValue(l,r)}}`].join("\n"),rich:{name:{padding:!0===m?[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:[...h.values],zlevel:1,symbol:"none",animation:!1,lineStyle:{color:"#FFFFFF",opacity:.6},areaStyle:{color:"#FFFFFF",opacity:.3},silent:!0},e=merge(t,n);f.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:f,textStyle:{color:"transparent"===i?s.palette.text.primary:"#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,s,r,e,n,i]);return _jsx(EChart,{sx:{width:e,height:o},option:h})}

package/dist/cjs/LineChart.js

@@ -1,252 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineChart = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// 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.
-const react_1 = require("react");
-const core_1 = require("@perses-dev/core");
-const material_1 = require("@mui/material");
-const merge_1 = __importDefault(require("lodash/merge"));
-const core_2 = require("echarts/core");
-const charts_1 = require("echarts/charts");
-const components_1 = require("echarts/components");
-const renderers_1 = require("echarts/renderers");
-const EChart_1 = require("./EChart");
-const graph_model_1 = require("./model/graph-model");
-const units_1 = require("./model/units");
-const tooltip_model_1 = require("./tooltip/tooltip-model");
-const Tooltip_1 = require("./tooltip/Tooltip");
-(0, core_2.use)([
-    charts_1.LineChart,
-    components_1.GridComponent,
-    components_1.DataZoomComponent,
-    components_1.MarkAreaComponent,
-    components_1.MarkLineComponent,
-    components_1.MarkPointComponent,
-    components_1.TitleComponent,
-    components_1.ToolboxComponent,
-    components_1.TooltipComponent,
-    components_1.LegendComponent,
-    components_1.VisualMapComponent,
-    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 LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEnabled, onDataZoom, }) {
-    const theme = (0, material_1.useTheme)();
-    const chartRef = (0, react_1.useRef)();
-    const [showTooltip, setShowTooltip] = (0, react_1.useState)(true);
-    const handleEvents = (0, react_1.useMemo)(() => {
-        return {
-            datazoom: (params) => {
-                var _a, _b;
-                if (onDataZoom === undefined || params.batch[0] === undefined)
-                    return;
-                const startIndex = (_a = params.batch[0].startValue) !== null && _a !== void 0 ? _a : 0;
-                const endIndex = (_b = params.batch[0].endValue) !== null && _b !== void 0 ? _b : data.xAxis.length - 1;
-                const xAxisStartValue = data.xAxis[startIndex];
-                const xAxisEndValue = data.xAxis[endIndex];
-                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
-                    const zoomEvent = {
-                        start: xAxisStartValue,
-                        end: xAxisEndValue,
-                        startIndex,
-                        endIndex,
-                    };
-                    onDataZoom(zoomEvent);
-                }
-            },
-        };
-    }, [data, onDataZoom]);
-    if (chartRef.current !== undefined && dataZoomEnabled === true) {
-        const chart = chartRef.current;
-        chart.dispatchAction({
-            type: 'takeGlobalCursor',
-            key: 'dataZoomSelect',
-            dataZoomSelectActive: true,
-        });
-    }
-    const handleOnMouseDown = (event) => {
-        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
-        if (event.target instanceof HTMLCanvasElement) {
-            setShowTooltip(false);
-        }
-    };
-    const handleOnMouseUp = () => {
-        setShowTooltip(true);
-    };
-    const handleOnMouseEnter = () => {
-        setShowTooltip(true);
-    };
-    const handleOnMouseLeave = () => {
-        setShowTooltip(false);
-    };
-    const option = (0, core_1.useDeepMemo)(() => {
-        var _a;
-        if (data.timeSeries === undefined)
-            return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0)
-            return noDataOption;
-        const showPointsOnHover = data.timeSeries.length < graph_model_1.PROGRESSIVE_MODE_SERIES_LIMIT;
-        const defaultGrid = {
-            top: 10,
-            right: 20,
-            bottom: 5,
-            left: 20,
-            containLabel: true,
-        };
-        const defaultToolbox = {
-            show: true,
-            top: 10,
-            right: 10,
-            iconStyle: {
-                borderColor: theme.palette.text.primary,
-            },
-            feature: {
-                dataZoom: {
-                    icon: dataZoomEnabled ? null : undefined,
-                    yAxisIndex: 'none',
-                },
-                restore: {},
-            },
-            emphasis: {
-                iconStyle: {
-                    textFill: theme.palette.text.primary,
-                },
-            },
-        };
-        if (dataZoomEnabled === false) {
-            delete defaultToolbox.feature.dataZoom.icon;
-        }
-        const rangeMs = (_a = data.rangeMs) !== null && _a !== void 0 ? _a : getDateRange(data.xAxis);
-        const option = {
-            title: {
-                show: false,
-            },
-            grid: (0, merge_1.default)(defaultGrid, grid),
-            toolbox: (0, merge_1.default)(defaultToolbox, toolbox),
-            series: data.timeSeries,
-            xAxis: {
-                type: 'category',
-                data: data.xAxis,
-                max: data.xAxisMax,
-                axisLabel: {
-                    margin: 15,
-                    color: theme.palette.text.primary,
-                    formatter: (value) => {
-                        return getFormattedDate(value, rangeMs);
-                    },
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLine: {
-                    lineStyle: {
-                        color: theme.palette.grey['600'],
-                    },
-                },
-            },
-            yAxis: {
-                type: 'value',
-                boundaryGap: [0, '10%'],
-                axisLabel: {
-                    margin: 12,
-                    color: theme.palette.text.primary,
-                    formatter: (value) => {
-                        return (0, units_1.abbreviateLargeNumber)(value);
-                    },
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        width: 0.5,
-                        color: theme.palette.grey['300'],
-                        opacity: 0.95,
-                    },
-                },
-            },
-            animation: false,
-            tooltip: {
-                show: showPointsOnHover,
-                trigger: 'axis',
-                showContent: false,
-                axisPointer: {
-                    type: 'none',
-                },
-            },
-            legend,
-            visualMap,
-        };
-        return option;
-        // TODO (sjcobb): consolidate option props using echarts theme to reduce num of items in dep array
-    }, [data, theme, grid, legend, toolbox, dataZoomEnabled, visualMap]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            height,
-        }, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, tooltipData: tooltip_model_1.emptyTooltipData, chartData: data, wrapLabels: true })), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
-                    width: '100%',
-                    height: '100%',
-                }, option: option, onEvents: handleEvents, _instance: chartRef })] }));
-}
-exports.LineChart = LineChart;
-// fallback when xAxis time range not passed as prop
-function getDateRange(data) {
-    const defaultRange = 3600000; // hour in ms
-    if (data.length === 0)
-        return defaultRange;
-    const lastDatum = data[data.length - 1];
-    if (data[0] === undefined || lastDatum === undefined)
-        return defaultRange;
-    return lastDatum - data[0];
-}
-// determines time granularity for axis labels, defaults to hh:mm
-function getFormattedDate(value, rangeMs) {
-    const dateFormatOptions = {
-        hour: 'numeric',
-        minute: 'numeric',
-        hourCycle: 'h23',
-    };
-    const thirtyMinMs = 1800000;
-    const dayMs = 86400000;
-    if (rangeMs <= thirtyMinMs) {
-        dateFormatOptions.second = 'numeric';
-    }
-    else if (rangeMs >= dayMs) {
-        dateFormatOptions.month = 'numeric';
-        dateFormatOptions.day = 'numeric';
-    }
-    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
-    // remove comma when month / day present
-    return DATE_FORMAT.format(value).replace(/, /g, ' ');
-}

package/dist/cjs/StatChart.js

@@ -1,207 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatChart = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// 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.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const lodash_es_1 = require("lodash-es");
-const core_1 = require("echarts/core");
-const charts_1 = require("echarts/charts");
-const charts_2 = 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");
-(0, core_1.use)([
-    charts_1.GaugeChart,
-    charts_2.LineChart,
-    components_1.GridComponent,
-    components_1.DatasetComponent,
-    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 StatChart(props) {
-    const { width, height, data, unit, backgroundColor, sparkline } = props;
-    const theme = (0, material_1.useTheme)();
-    const option = (0, react_1.useMemo)(() => {
-        var _a;
-        if (data.seriesData === undefined)
-            return {};
-        if (data.seriesData === null || data.calculatedValue === undefined)
-            return noDataOption;
-        const series = data.seriesData;
-        const calculatedValue = (_a = data.calculatedValue) !== null && _a !== void 0 ? _a : 0;
-        const isLargePanel = width > 250 ? true : false;
-        const showName = isLargePanel;
-        const name = showName === true ? data.name : '';
-        const smallestSide = Math.min(width, height * 1.2);
-        const baseFontSize = Math.min((smallestSide / 4) * 0.65, 72);
-        const nameFontSize = baseFontSize * 0.5;
-        const statSeries = [
-            {
-                type: 'gauge',
-                data: [
-                    {
-                        value: calculatedValue,
-                        name: name,
-                    },
-                ],
-                detail: {
-                    show: true,
-                    offsetCenter: ['0%', '-65%'],
-                    formatter: [`{name|${name}}`, `{value|${(0, units_1.formatValue)(calculatedValue, unit)}}`].join('\n'),
-                    rich: {
-                        name: {
-                            padding: showName === true ? [0, 0, 5, 0] : 0,
-                            fontSize: nameFontSize,
-                            lineHeight: nameFontSize * 2.5,
-                            fontWeight: 500,
-                        },
-                        value: {},
-                    },
-                },
-                center: ['50%', '60%'],
-                animation: false,
-                silent: true,
-                title: { show: false },
-                progress: { show: false },
-                pointer: { show: false },
-                axisLine: { show: false },
-                axisTick: { show: false },
-                splitLine: { show: false },
-                axisLabel: { show: false },
-                anchor: { show: false },
-                zlevel: 2,
-            },
-        ];
-        if (sparkline !== undefined) {
-            const lineSeries = {
-                type: 'line',
-                data: [...series.values],
-                zlevel: 1,
-                symbol: 'none',
-                animation: false,
-                lineStyle: {
-                    color: '#FFFFFF',
-                    opacity: 0.6,
-                },
-                areaStyle: {
-                    color: '#FFFFFF',
-                    opacity: 0.3,
-                },
-                silent: true,
-            };
-            const mergedSeries = (0, lodash_es_1.merge)(lineSeries, sparkline);
-            statSeries.push(mergedSeries);
-        }
-        const option = {
-            title: {
-                show: false,
-            },
-            grid: [
-                {
-                    show: true,
-                    backgroundColor: backgroundColor,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    left: 0,
-                    containLabel: false,
-                    borderWidth: 0,
-                },
-                {
-                    show: false,
-                    top: '45%',
-                    right: 0,
-                    bottom: 0,
-                    left: 0,
-                    containLabel: false,
-                },
-            ],
-            xAxis: {
-                type: 'time',
-                show: false,
-                boundaryGap: false,
-                gridIndex: 1, // sparkline grid
-            },
-            yAxis: {
-                type: 'value',
-                show: false,
-                gridIndex: 1,
-            },
-            tooltip: {
-                show: false,
-            },
-            series: statSeries,
-            textStyle: {
-                color: backgroundColor === 'transparent' ? theme.palette.text.primary : '#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, ${baseFontSize}px)`,
-                            lineHeight: Math.min(16, baseFontSize * 1.2),
-                        },
-                    },
-                },
-            ],
-        };
-        return option;
-    }, [data, height, theme, unit, width, sparkline, backgroundColor]);
-    return ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
-            width: width,
-            height: height,
-        }, option: option }));
-}
-exports.StatChart = StatChart;

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

@@ -1 +0,0 @@
-{"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;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/tooltip/Tooltip.d.ts

@@ -1,13 +0,0 @@
-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

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

package/dist/tooltip/Tooltip.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useState}from"react";import{Box,Portal}from"@mui/material";import{getFocusedSeriesData}from"./focused-series";import{TOOLTIP_MAX_HEIGHT,TOOLTIP_MAX_WIDTH,useMousePosition}from"./tooltip-model";import{TooltipContent}from"./TooltipContent";export function Tooltip(t){var o,e;const{chartRef:r,chartData:n}=t,[l,i]=useState(null),s=useMousePosition();if(null===s)return null;const a=r.current,u=getFocusedSeriesData(s,n,l,a),p=null!==(o=null==a?void 0:a.getWidth())&&void 0!==o?o:750,T=null!==(e=null==a?void 0:a.getHeight())&&void 0!==e?e:230,d=assembleTransform(s,u.length,p,T,l);return 0===u.length?null:_jsx(Portal,{children:_jsx(Box,{sx:t=>({maxWidth:TOOLTIP_MAX_WIDTH,maxHeight:TOOLTIP_MAX_HEIGHT,position:"absolute",top:0,left:0,backgroundColor:"#2E313E",borderRadius:"6px",color:"#fff",fontSize:"11px",visibility:"visible",opacity:1,transition:"all 0.1s ease-out",zIndex:t.zIndex.tooltip,overflow:"hidden","&:hover":{overflowY:"auto"}}),style:{transform:d},onMouseEnter:()=>{null!==s&&i(s)},onMouseLeave:()=>{null!==l&&i(null)},children:_jsx(TooltipContent,{focusedSeries:u,wrapLabels:t.wrapLabels})})})}function assembleTransform(t,o,e,r,n){if(null===t)return"translate3d(0, 0)";null!==n&&(t=n);const l=t.viewport.x;let i=t.viewport.y+16;const s=.75*r;!0==t.viewport.y>.8*window.innerHeight?i=o>6?.65*t.viewport.y:.75*t.viewport.y:t.plotCanvas.y>s&&(i=.85*t.viewport.y);const a=e-.9*(o>1?TOOLTIP_MAX_WIDTH:TOOLTIP_MAX_WIDTH/2);return t.plotCanvas.x>a&&l>TOOLTIP_MAX_WIDTH?`translate3d(${l-32}px, ${i}px, 0) translateX(-100%)`:`translate3d(${l+32}px, ${i}px, 0)`}

package/dist/tooltip/focused-series.js

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