@perses-dev/components 0.7.1 → 0.8.1

package/dist/LineChart/LineChart.d.ts

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

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

@@ -1 +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;AAG1D,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,eAsJpG"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAG9D,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;AAG1D,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;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,cAAc,eA2JnH"}

package/dist/LineChart/LineChart.js

@@ -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}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{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:n,visualMap:a,onDataZoom:i}){const s=useChartsTheme(),m=useRef(),[p,l]=useState(!0),[u,h]=useState(!1),x=useMemo((()=>({datazoom:e=>{var t,r;if(void 0===i&&setTimeout((()=>{h(!1)}),10),void 0===i||void 0===e.batch[0])return;const n=null!==(t=e.batch[0].startValue)&&void 0!==t?t:0,a=null!==(r=e.batch[0].endValue)&&void 0!==r?r:o.xAxis.length-1,s=o.xAxis[n],m=o.xAxis[a];void 0!==s&&void 0!==m&&i({start:s,end:m,startIndex:n,endIndex:a})}})),[o,i,h]);void 0!==m.current&&enableDataZoom(m.current);const d=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:n,visualMap:a}}),[o,r,n,a]);return _jsxs(Box,{sx:{height:e},onClick:()=>h((e=>!e)),onDoubleClick:()=>{h(!1),void 0!==m.current&&restoreChart(m.current)},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&l(!1)},onMouseUp:()=>{l(!0)},onMouseLeave:()=>{l(!1),h(!1)},onMouseEnter:()=>{l(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:m,chartData:o,wrapLabels:!0,pinTooltip:u}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:d,theme:s.themeName,onEvents:x,_instance:m})]})}
+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{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:n,legend:r,visualMap:a,onDataZoom:i,onDoubleClick:s}){const m=useChartsTheme(),p=useRef(),[l,u]=useState(!0),[h,d]=useState(!1),x=useMemo((()=>({datazoom:e=>{var t,n;if(void 0===i&&setTimeout((()=>{d(!1)}),10),void 0===i||void 0===e.batch[0])return;const r=null!==(t=e.batch[0].startValue)&&void 0!==t?t:0,a=null!==(n=e.batch[0].endValue)&&void 0!==n?n:o.xAxis.length-1,s=o.xAxis[r],m=o.xAxis[a];void 0!==s&&void 0!==m&&i({start:s,end:m,startIndex:r,endIndex:a})}})),[o,i,d]);void 0!==p.current&&enableDataZoom(p.current);const C=useDeepMemo((()=>{var e;if(void 0===o.timeSeries)return{};if(null===o.timeSeries||0===o.timeSeries.length)return m.noDataOption;const i=o.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,s=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,s)}},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:n,legend:r,visualMap:a}}),[o,n,r,a]);return _jsxs(Box,{sx:{height:e},onClick:()=>d((e=>!e)),onDoubleClick:e=>{d(!1),void 0===s?void 0!==p.current&&restoreChart(p.current):s(e)},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&u(!1)},onMouseUp:()=>{u(!0)},onMouseLeave:()=>{u(!1),d(!1)},onMouseEnter:()=>{u(!0)},children:[!0===l&&_jsx(Tooltip,{chartRef:p,chartData:o,wrapLabels:!0,pinTooltip:h}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:C,theme:m.themeName,onEvents:x,_instance:p})]})}

package/dist/TimeRangeSelector/TimeRangeSelector.d.ts

@@ -6,7 +6,6 @@ export interface TimeOption {
     display: string;
 }
 interface TimeRangeSelectorProps {
-    inputLabel: string;
     value: TimeRangeValue;
     timeOptions: TimeOption[];
     onSelectChange: (event: SelectChangeEvent<string>) => void;

package/dist/TimeRangeSelector/TimeRangeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAmB,MAAM,kBAAkB,CAAC;AAKtF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA+B9D"}
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAK1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA0C9D"}

package/dist/TimeRangeSelector/TimeRangeSelector.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{MenuItem,Select}from"@mui/material";import{isRelativeValue}from"@perses-dev/core";import{formatAbsoluteRange}from"./utils";const DATE_TIME_FORMAT="yyyy-MM-dd HH:mm:ss";export function TimeRangeSelector(e){const{inputLabel:t,value:a,timeOptions:s,onSelectChange:i,onCustomClick:l}=e,n=isRelativeValue(a)?a.pastDuration:formatAbsoluteRange(a,DATE_TIME_FORMAT);return _jsxs(Select,{value:n,label:t,onChange:i,children:[s.map(((e,t)=>_jsx(MenuItem,{value:e.value.pastDuration,children:e.display},t))),isRelativeValue(a)?_jsx(MenuItem,{onClick:()=>{l()},children:"Custom time range"}):_jsx(MenuItem,{value:n,onClick:()=>{l()},children:n})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{MenuItem,Select}from"@mui/material";import EventIcon from"@mui/icons-material/Event";import{isRelativeTimeRange}from"@perses-dev/core";import{formatAbsoluteRange}from"./utils";const DATE_TIME_FORMAT="yyyy-MM-dd HH:mm:ss";export function TimeRangeSelector(e){const{value:t,timeOptions:n,onSelectChange:i,onCustomClick:o}=e,m=isRelativeTimeRange(t)?t.pastDuration:formatAbsoluteRange(t,DATE_TIME_FORMAT);return _jsxs(Select,{value:m,onChange:i,IconComponent:EventIcon,sx:{".MuiSelect-icon":{marginTop:"1px"}},children:[n.map(((e,t)=>_jsx(MenuItem,{value:e.value.pastDuration,children:e.display},t))),isRelativeTimeRange(t)?_jsx(MenuItem,{onClick:()=>{o()},children:"Custom time range"}):_jsx(MenuItem,{value:m,onClick:()=>{o()},children:m})]})}

package/dist/cjs/LineChart/LineChart.js

@@ -41,7 +41,7 @@ const utils_1 = require("./utils");
     components_1.VisualMapComponent,
     renderers_1.CanvasRenderer,
 ]);
-function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom }) {
+function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom, onDoubleClick }) {
     const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
     const chartRef = (0, react_1.useRef)();
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(true);
@@ -79,15 +79,21 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom })
         (0, utils_1.enableDataZoom)(chartRef.current);
     }
     const handleOnClick = () => setPinTooltip((current) => !current);
-    const handleOnDoubleClick = () => {
+    const handleOnDoubleClick = (e) => {
         setPinTooltip(false);
-        if (chartRef.current !== undefined) {
-            (0, utils_1.restoreChart)(chartRef.current);
+        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+        if (onDoubleClick === undefined) {
+            if (chartRef.current !== undefined) {
+                (0, utils_1.restoreChart)(chartRef.current);
+            }
+        }
+        else {
+            onDoubleClick(e);
         }
     };
-    const handleOnMouseDown = (event) => {
+    const handleOnMouseDown = (e) => {
         // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
-        if (event.target instanceof HTMLCanvasElement) {
+        if (e.target instanceof HTMLCanvasElement) {
             setShowTooltip(false);
         }
     };

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimeRangeSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -15,13 +18,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // See the License for the specific language governing permissions and
 // limitations under the License.
 const material_1 = require("@mui/material");
+const Event_1 = __importDefault(require("@mui/icons-material/Event"));
 const core_1 = require("@perses-dev/core");
 const utils_1 = require("./utils");
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 function TimeRangeSelector(props) {
-    const { inputLabel, value, timeOptions, onSelectChange, onCustomClick } = props;
-    const formattedValue = !(0, core_1.isRelativeValue)(value) ? (0, utils_1.formatAbsoluteRange)(value, DATE_TIME_FORMAT) : value.pastDuration;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Select, { value: formattedValue, label: inputLabel, onChange: onSelectChange, children: [timeOptions.map((item, idx) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.value.pastDuration, children: item.display }, idx))), (0, core_1.isRelativeValue)(value) ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
+    const { value, timeOptions, onSelectChange, onCustomClick } = props;
+    const formattedValue = !(0, core_1.isRelativeTimeRange)(value)
+        ? (0, utils_1.formatAbsoluteRange)(value, DATE_TIME_FORMAT)
+        : value.pastDuration;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Select, { value: formattedValue, onChange: onSelectChange, IconComponent: Event_1.default, sx: {
+            '.MuiSelect-icon': {
+                marginTop: '1px',
+            },
+        }, children: [timeOptions.map((item, idx) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.value.pastDuration, children: item.display }, idx))), (0, core_1.isRelativeTimeRange)(value) ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
                     onCustomClick();
                 }, children: "Custom time range" })) : ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: formattedValue, onClick: () => {
                     onCustomClick();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -25,16 +25,17 @@
   },
   "dependencies": {
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "^0.7.1",
+    "@mui/icons-material": "^5.10.6",
+    "@perses-dev/core": "^0.8.1",
     "date-fns": "^2.28.0",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
-    "@mui/material": "^5.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@mui/material": "^5.6.0",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "files": [
     "dist"