@perses-dev/components 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/LineChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box,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:
|
|
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,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/cjs/LineChart.js
CHANGED
|
@@ -161,7 +161,7 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
|
|
|
161
161
|
xAxis: {
|
|
162
162
|
type: 'category',
|
|
163
163
|
data: data.xAxis,
|
|
164
|
-
max:
|
|
164
|
+
max: data.xAxisMax,
|
|
165
165
|
axisLabel: {
|
|
166
166
|
margin: 15,
|
|
167
167
|
color: theme.palette.text.primary,
|
|
@@ -235,7 +235,7 @@ function getFormattedDate(value, rangeMs) {
|
|
|
235
235
|
const dateFormatOptions = {
|
|
236
236
|
hour: 'numeric',
|
|
237
237
|
minute: 'numeric',
|
|
238
|
-
|
|
238
|
+
hourCycle: 'h23',
|
|
239
239
|
};
|
|
240
240
|
const thirtyMinMs = 1800000;
|
|
241
241
|
const dayMs = 86400000;
|
|
@@ -9,6 +9,7 @@ export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
|
|
|
9
9
|
export declare type EChartsDataFormat = {
|
|
10
10
|
timeSeries: EChartsTimeSeries[];
|
|
11
11
|
xAxis: number[];
|
|
12
|
+
xAxisMax?: number | 'dataMax';
|
|
12
13
|
rangeMs?: number;
|
|
13
14
|
};
|
|
14
15
|
//# sourceMappingURL=graph-model.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/model/graph-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}
|
|
1
|
+
{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/model/graph-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@perses-dev/components",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "Common UI components used across Perses features",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/perses/perses/blob/main/README.md",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"lint:fix": "eslint --fix src --ext .ts,.tsx"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@perses-dev/core": "^0.4.
|
|
26
|
+
"@perses-dev/core": "^0.4.2",
|
|
27
27
|
"echarts": "^5.3.2",
|
|
28
28
|
"lodash-es": "^4.17.21",
|
|
29
29
|
"react-error-boundary": "^3.1.4"
|