@perses-dev/components 0.20.0 → 0.21.0

package/dist/LegendOptionsEditor/LegendOptionsEditor.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LegendOptions } from '../model';
+export interface LegendOptionsEditorProps {
+    value?: LegendOptions;
+    onChange: (legend?: LegendOptions) => void;
+}
+export declare function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps): JSX.Element;
+//# sourceMappingURL=LegendOptionsEditor.d.ts.map

package/dist/LegendOptionsEditor/LegendOptionsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,aAAa,EAAE,MAAM,UAAU,CAAC;AAyBzD,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAyChF"}

package/dist/LegendOptionsEditor/LegendOptionsEditor.js

@@ -0,0 +1,82 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Autocomplete, Switch, TextField } from '@mui/material';
+import { DEFAULT_LEGEND } from '../model';
+import { OptionsEditorControl } from '../OptionsEditorLayout';
+const LEGEND_POSITIONS = [
+    'bottom',
+    'right'
+];
+const LEGEND_POSITIONS_CONFIG = {
+    bottom: {
+        label: 'Bottom'
+    },
+    right: {
+        label: 'Right'
+    }
+};
+const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+export function LegendOptionsEditor({ value , onChange  }) {
+    const handleLegendShowChange = (_, checked)=>{
+        // legend is hidden when legend obj is undefined
+        const legendValue = checked === true ? {
+            position: DEFAULT_LEGEND.position
+        } : undefined;
+        onChange(legendValue);
+    };
+    const handleLegendPositionChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: newValue.id
+        });
+    };
+    var ref;
+    const legendConfig = LEGEND_POSITIONS_CONFIG[(ref = value === null || value === void 0 ? void 0 : value.position) !== null && ref !== void 0 ? ref : DEFAULT_LEGEND.position];
+    var ref1;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Show",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: value !== undefined,
+                    onChange: handleLegendShowChange
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Position",
+                control: /*#__PURE__*/ _jsx(Autocomplete, {
+                    value: {
+                        ...legendConfig,
+                        id: (ref1 = value === null || value === void 0 ? void 0 : value.position) !== null && ref1 !== void 0 ? ref1 : DEFAULT_LEGEND.position
+                    },
+                    options: POSITION_OPTIONS,
+                    isOptionEqualToValue: (option, value)=>option.id === value.id,
+                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
+                            ...params
+                        }),
+                    onChange: handleLegendPositionChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=LegendOptionsEditor.js.map

package/dist/LegendOptionsEditor/LegendOptionsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Autocomplete, Switch, SwitchProps, TextField } from '@mui/material';\nimport { DEFAULT_LEGEND, LegendOptions } from '../model';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\n\ntype LegendPositionConfig = {\n  label: string;\n};\n\nconst LEGEND_POSITIONS = ['bottom', 'right'] as const;\n\ntype LegendPositions = typeof LEGEND_POSITIONS[number];\n\nconst LEGEND_POSITIONS_CONFIG: Readonly<Record<LegendPositions, LegendPositionConfig>> = {\n  bottom: { label: 'Bottom' },\n  right: { label: 'Right' },\n};\n\ntype LegendPositionOption = LegendPositionConfig & { id: LegendOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendOptions['position'],\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendOptions;\n  onChange: (legend?: LegendOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const legendConfig = LEGEND_POSITIONS_CONFIG[value?.position ?? DEFAULT_LEGEND.position];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Position\"\n        control={\n          <Autocomplete\n            value={{\n              ...legendConfig,\n              id: value?.position ?? DEFAULT_LEGEND.position,\n            }}\n            options={POSITION_OPTIONS}\n            isOptionEqualToValue={(option, value) => option.id === value.id}\n            renderInput={(params) => <TextField {...params} />}\n            onChange={handleLegendPositionChange}\n            disabled={value === undefined}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n    </>\n  );\n}\n"],"names":["Autocomplete","Switch","TextField","DEFAULT_LEGEND","OptionsEditorControl","LEGEND_POSITIONS","LEGEND_POSITIONS_CONFIG","bottom","label","right","POSITION_OPTIONS","Object","entries","map","id","config","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","legendConfig","control","options","isOptionEqualToValue","option","renderInput","params","disabled","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,YAAY,EAAEC,MAAM,EAAeC,SAAS,QAAQ,eAAe,CAAC;AAC7E,SAASC,cAAc,QAAuB,UAAU,CAAC;AACzD,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAM9D,MAAMC,gBAAgB,GAAG;IAAC,QAAQ;IAAE,OAAO;CAAC,AAAS,AAAC;AAItD,MAAMC,uBAAuB,GAA4D;IACvFC,MAAM,EAAE;QAAEC,KAAK,EAAE,QAAQ;KAAE;IAC3BC,KAAK,EAAE;QAAED,KAAK,EAAE,OAAO;KAAE;CAC1B,AAAC;AAIF,MAAME,gBAAgB,GAA2BC,MAAM,CAACC,OAAO,CAACN,uBAAuB,CAAC,CAACO,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,MAAM,CAAC,GAAK;IAC7G,OAAO;QACLD,EAAE,EAAEA,EAAE;QACN,GAAGC,MAAM;KACV,CAAC;AACJ,CAAC,CAAC,AAAC;AAOH,OAAO,SAASC,mBAAmB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAA4B,EAAE;IACjF,MAAMC,sBAAsB,GAA4B,CAACC,CAAU,EAAEC,OAAgB,GAAK;QACxF,gDAAgD;QAChD,MAAMC,WAAW,GAAGD,OAAO,KAAK,IAAI,GAAG;YAAEE,QAAQ,EAAEpB,cAAc,CAACoB,QAAQ;SAAE,GAAGC,SAAS,AAAC;QACzFN,QAAQ,CAACI,WAAW,CAAC,CAAC;IACxB,CAAC,AAAC;IAEF,MAAMG,0BAA0B,GAAG,CAACL,CAAU,EAAEM,QAA8B,GAAK;QACjFR,QAAQ,CAAC;YACP,GAAGD,KAAK;YACRM,QAAQ,EAAEG,QAAQ,CAACZ,EAAE;SACtB,CAAC,CAAC;IACL,CAAC,AAAC;QAE2CG,GAAe;IAA5D,MAAMU,YAAY,GAAGrB,uBAAuB,CAACW,CAAAA,GAAe,GAAfA,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEM,QAAQ,cAAfN,GAAe,cAAfA,GAAe,GAAId,cAAc,CAACoB,QAAQ,CAAC,AAAC;QAczEN,IAAe;IAZ/B,qBACE;;0BACE,KAACb,oBAAoB;gBACnBI,KAAK,EAAC,MAAM;gBACZoB,OAAO,gBAAE,KAAC3B,MAAM;oBAACoB,OAAO,EAAEJ,KAAK,KAAKO,SAAS;oBAAEN,QAAQ,EAAEC,sBAAsB;kBAAI;cACnF;0BACF,KAACf,oBAAoB;gBACnBI,KAAK,EAAC,UAAU;gBAChBoB,OAAO,gBACL,KAAC5B,YAAY;oBACXiB,KAAK,EAAE;wBACL,GAAGU,YAAY;wBACfb,EAAE,EAAEG,CAAAA,IAAe,GAAfA,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEM,QAAQ,cAAfN,IAAe,cAAfA,IAAe,GAAId,cAAc,CAACoB,QAAQ;qBAC/C;oBACDM,OAAO,EAAEnB,gBAAgB;oBACzBoB,oBAAoB,EAAE,CAACC,MAAM,EAAEd,KAAK,GAAKc,MAAM,CAACjB,EAAE,KAAKG,KAAK,CAACH,EAAE;oBAC/DkB,WAAW,EAAE,CAACC,MAAM,iBAAK,KAAC/B,SAAS;4BAAE,GAAG+B,MAAM;0BAAI;oBAClDf,QAAQ,EAAEO,0BAA0B;oBACpCS,QAAQ,EAAEjB,KAAK,KAAKO,SAAS;oBAC7BW,gBAAgB;kBACF;cAElB;;MACD,CACH;AACJ,CAAC"}

package/dist/LegendOptionsEditor/LegendOptionsEditor.test.d.ts

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

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

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

package/dist/LegendOptionsEditor/LegendOptionsEditor.test.js

@@ -0,0 +1,41 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LegendOptionsEditor } from './LegendOptionsEditor';
+describe('LegendOptionsEditor', ()=>{
+    const renderLegendOptionsEditor = (value, onChange = jest.fn())=>{
+        render(/*#__PURE__*/ _jsx("div", {
+            children: /*#__PURE__*/ _jsx(LegendOptionsEditor, {
+                value: value,
+                onChange: onChange
+            })
+        }));
+    };
+    const getLegendShowSwitch = ()=>{
+        return screen.getByRole('checkbox', {
+            name: 'Show'
+        });
+    };
+    it('can change legend visibility by clicking', ()=>{
+        const onChange = jest.fn();
+        renderLegendOptionsEditor(undefined, onChange);
+        userEvent.click(getLegendShowSwitch());
+        expect(onChange).toHaveBeenCalledWith({
+            position: 'bottom'
+        });
+    });
+});
+
+//# sourceMappingURL=LegendOptionsEditor.test.js.map

package/dist/LegendOptionsEditor/LegendOptionsEditor.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { LegendOptions } from '../model';\nimport { LegendOptionsEditor } from './LegendOptionsEditor';\n\ndescribe('LegendOptionsEditor', () => {\n  const renderLegendOptionsEditor = (value?: LegendOptions, onChange = jest.fn()) => {\n    render(\n      <div>\n        <LegendOptionsEditor value={value} onChange={onChange} />\n      </div>\n    );\n  };\n\n  const getLegendShowSwitch = () => {\n    return screen.getByRole('checkbox', { name: 'Show' });\n  };\n\n  it('can change legend visibility by clicking', () => {\n    const onChange = jest.fn();\n    renderLegendOptionsEditor(undefined, onChange);\n    userEvent.click(getLegendShowSwitch());\n    expect(onChange).toHaveBeenCalledWith({ position: 'bottom' });\n  });\n});\n"],"names":["render","screen","userEvent","LegendOptionsEditor","describe","renderLegendOptionsEditor","value","onChange","jest","fn","div","getLegendShowSwitch","getByRole","name","it","undefined","click","expect","toHaveBeenCalledWith","position"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AAEpD,SAASC,mBAAmB,QAAQ,uBAAuB,CAAC;AAE5DC,QAAQ,CAAC,qBAAqB,EAAE,IAAM;IACpC,MAAMC,yBAAyB,GAAG,CAACC,KAAqB,EAAEC,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,GAAK;QACjFT,MAAM,eACJ,KAACU,KAAG;sBACF,cAAA,KAACP,mBAAmB;gBAACG,KAAK,EAAEA,KAAK;gBAAEC,QAAQ,EAAEA,QAAQ;cAAI;UACrD,CACP,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChC,OAAOV,MAAM,CAACW,SAAS,CAAC,UAAU,EAAE;YAAEC,IAAI,EAAE,MAAM;SAAE,CAAC,CAAC;IACxD,CAAC,AAAC;IAEFC,EAAE,CAAC,0CAA0C,EAAE,IAAM;QACnD,MAAMP,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,yBAAyB,CAACU,SAAS,EAAER,QAAQ,CAAC,CAAC;QAC/CL,SAAS,CAACc,KAAK,CAACL,mBAAmB,EAAE,CAAC,CAAC;QACvCM,MAAM,CAACV,QAAQ,CAAC,CAACW,oBAAoB,CAAC;YAAEC,QAAQ,EAAE,QAAQ;SAAE,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/LegendOptionsEditor/index.d.ts

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

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

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

package/dist/LegendOptionsEditor/index.js

@@ -0,0 +1,15 @@
+// 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.
+export * from './LegendOptionsEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/LegendOptionsEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LegendOptionsEditor/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './LegendOptionsEditor';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB,CAAC"}

package/dist/LineChart/LineChart.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import type { GridComponentOption, LegendComponentOption, VisualMapComponentOption, YAXisComponentOption } from 'echarts';
+import type { GridComponentOption, LegendComponentOption, YAXisComponentOption } from 'echarts';
 import { EChartsDataFormat } from '../model/graph';
 import { UnitOptions } from '../model/units';
 import { ZoomEventData } from './utils';
@@ -10,10 +10,9 @@ interface LineChartProps {
     unit?: UnitOptions;
     grid?: GridComponentOption;
     legend?: LegendComponentOption;
-    visualMap?: VisualMapComponentOption[];
     onDataZoom?: (e: ZoomEventData) => void;
     onDoubleClick?: (e: MouseEvent) => void;
 }
-export declare function LineChart({ height, data, yAxis, unit, grid, legend, visualMap, onDataZoom, onDoubleClick, }: LineChartProps): JSX.Element;
+export declare function LineChart({ height, data, yAxis, unit, grid, legend, 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":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,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,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,GACd,EAAE,cAAc,eAkJhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,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,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,cAAc,eAgJ/G"}

package/dist/LineChart/LineChart.js

@@ -15,11 +15,13 @@ import { useMemo, useRef, useState } from 'react';
 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 { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
+import { OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
 import { Tooltip } from '../Tooltip/Tooltip';
+import { useTimeZone } from '../context/TimeZoneProvider';
 import { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
 use([
     EChartsLineChart,
@@ -32,14 +34,14 @@ use([
     ToolboxComponent,
     TooltipComponent,
     LegendComponent,
-    VisualMapComponent,
     CanvasRenderer
 ]);
-export function LineChart({ height , data , yAxis , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
+export function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom , onDoubleClick  }) {
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
     const [pinTooltip, setPinTooltip] = useState(false);
+    const { timeZone  } = useTimeZone();
     const handleEvents = useMemo(()=>{
         return {
             datazoom: (params)=>{
@@ -75,7 +77,6 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , visua
     if (chartRef.current !== undefined) {
         enableDataZoom(chartRef.current);
     }
-    const handleOnClick = ()=>setPinTooltip((current)=>!current);
     const handleOnDoubleClick = (e)=>{
         setPinTooltip(false);
         // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
@@ -87,25 +88,12 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , visua
             onDoubleClick(e);
         }
     };
-    const handleOnMouseDown = (e)=>{
-        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
-        if (e.target instanceof HTMLCanvasElement) {
-            setShowTooltip(false);
-        }
-    };
-    const handleOnMouseUp = ()=>{
-        setShowTooltip(true);
-    };
-    const handleOnMouseEnter = ()=>{
-        setShowTooltip(true);
-    };
-    const handleOnMouseLeave = ()=>{
-        setShowTooltip(false);
-        setPinTooltip(false);
-    };
+    const { noDataOption  } = chartsTheme;
     const option = useMemo(()=>{
         if (data.timeSeries === undefined) return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
+        if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;
+        // show symbols and axisPointer dashed line on hover
+        const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : getDateRange(data.xAxis);
         const option = {
@@ -116,18 +104,18 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , visua
                 max: data.xAxisMax,
                 axisLabel: {
                     formatter: (value)=>{
-                        return getFormattedDate(value, rangeMs);
+                        return getFormattedDate(value, rangeMs, timeZone);
                     }
                 }
             },
             yAxis: getYAxes(yAxis, unit),
             animation: false,
             tooltip: {
-                show: true,
+                show: !isOptimizedMode,
                 trigger: 'axis',
                 showContent: false,
                 axisPointer: {
-                    type: 'line',
+                    type: isOptimizedMode ? 'none' : 'line',
                     z: 0
                 }
             },
@@ -140,27 +128,45 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , visua
                 }
             },
             grid,
-            legend,
-            visualMap
+            legend
         };
         return option;
     }, [
         data,
         yAxis,
+        unit,
         grid,
         legend,
-        visualMap
+        noDataOption,
+        timeZone
     ]);
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
             height
         },
-        onClick: handleOnClick,
+        onClick: ()=>{
+            setPinTooltip((current)=>!current);
+        },
+        onMouseDown: (e)=>{
+            // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
+            if (e.target instanceof HTMLCanvasElement) {
+                setShowTooltip(false);
+            }
+        },
+        onMouseUp: ()=>{
+            setShowTooltip(true);
+        },
+        onMouseLeave: ()=>{
+            setShowTooltip(false);
+            setPinTooltip(false);
+        },
+        onMouseEnter: ()=>{
+            setShowTooltip(true);
+            if (chartRef.current !== undefined) {
+                enableDataZoom(chartRef.current);
+            }
+        },
         onDoubleClick: handleOnDoubleClick,
-        onMouseDown: handleOnMouseDown,
-        onMouseUp: handleOnMouseUp,
-        onMouseLeave: handleOnMouseLeave,
-        onMouseEnter: handleOnMouseEnter,
         children: [
             showTooltip === true && /*#__PURE__*/ _jsx(Tooltip, {
                 chartRef: chartRef,

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  VisualMapComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  VisualMapComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  visualMap?: VisualMapComponentOption[];\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  visualMap,\n  onDataZoom,\n  onDoubleClick,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnClick = () => setPinTooltip((current) => !current);\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const handleOnMouseDown = (e: MouseEvent) => {\n    // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n    if (e.target instanceof HTMLCanvasElement) {\n      setShowTooltip(false);\n    }\n  };\n\n  const handleOnMouseUp = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseEnter = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseLeave = () => {\n    setShowTooltip(false);\n    setPinTooltip(false);\n  };\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n      visualMap,\n    };\n\n    return option;\n  }, [data, yAxis, grid, legend, visualMap]);\n\n  return (\n    <Box\n      sx={{\n        height,\n      }}\n      onClick={handleOnClick}\n      onDoubleClick={handleOnDoubleClick}\n      onMouseDown={handleOnMouseDown}\n      onMouseUp={handleOnMouseUp}\n      onMouseLeave={handleOnMouseLeave}\n      onMouseEnter={handleOnMouseEnter}\n    >\n      {showTooltip === true && (\n        <Tooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit}></Tooltip>\n      )}\n\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","VisualMapComponent","CanvasRenderer","EChart","useChartsTheme","Tooltip","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","visualMap","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnClick","handleOnDoubleClick","e","handleOnMouseDown","target","HTMLCanvasElement","handleOnMouseUp","handleOnMouseEnter","handleOnMouseLeave","option","timeSeries","noDataOption","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAAqBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC9D,SAASC,GAAG,QAAQ,eAAe,CAAC;AASpC,SAAqCC,GAAG,QAAQ,cAAc,CAAC;AAC/D,SAASC,SAAS,IAAIC,gBAAgB,QAAQ,gBAAgB,CAAC;AAC/D,SACEC,aAAa,EACbC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,gBAAgB,EAChBC,gBAAgB,EAChBC,eAAe,EACfC,kBAAkB,QACb,oBAAoB,CAAC;AAC5B,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,MAAM,QAAsB,WAAW,CAAC;AAGjD,SAASC,cAAc,QAAQ,gCAAgC,CAAC;AAChE,SAASC,OAAO,QAAQ,oBAAoB,CAAC;AAC7C,SAASC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,YAAY,QAAuB,SAAS,CAAC;AAEhHrB,GAAG,CAAC;IACFE,gBAAgB;IAChBC,aAAa;IACbC,iBAAiB;IACjBC,iBAAiB;IACjBC,iBAAiB;IACjBC,kBAAkB;IAClBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,eAAe;IACfC,kBAAkB;IAClBC,cAAc;CACf,CAAC,CAAC;AAcH,OAAO,SAASZ,SAAS,CAAC,EACxBqB,MAAM,CAAA,EACNC,IAAI,CAAA,EACJC,KAAK,CAAA,EACLC,IAAI,CAAA,EACJC,IAAI,CAAA,EACJC,MAAM,CAAA,EACNC,SAAS,CAAA,EACTC,UAAU,CAAA,EACVC,aAAa,CAAA,EACE,EAAE;IACjB,MAAMC,WAAW,GAAGhB,cAAc,EAAE,AAAC;IACrC,MAAMiB,QAAQ,GAAGnC,MAAM,EAAmB,AAAC;IAC3C,MAAM,CAACoC,WAAW,EAAEC,cAAc,CAAC,GAAGpC,QAAQ,CAAU,IAAI,CAAC,AAAC;IAC9D,MAAM,CAACqC,UAAU,EAAEC,aAAa,CAAC,GAAGtC,QAAQ,CAAU,KAAK,CAAC,AAAC;IAE7D,MAAMuC,YAAY,GAAqDzC,OAAO,CAAC,IAAM;QACnF,OAAO;YACL0C,QAAQ,EAAE,CAACC,MAAM,GAAK;gBACpB,IAAIV,UAAU,KAAKW,SAAS,EAAE;oBAC5BC,UAAU,CAAC,IAAM;wBACf,gDAAgD;wBAChDL,aAAa,CAAC,KAAK,CAAC,CAAC;oBACvB,CAAC,EAAE,EAAE,CAAC,CAAC;gBACT,CAAC;gBACD,IAAIP,UAAU,KAAKW,SAAS,IAAID,MAAM,CAACG,KAAK,CAAC,CAAC,CAAC,KAAKF,SAAS,EAAE,OAAO;oBACnDD,WAA0B;gBAA7C,MAAMI,UAAU,GAAGJ,CAAAA,WAA0B,GAA1BA,MAAM,CAACG,KAAK,CAAC,CAAC,CAAC,CAACE,UAAU,cAA1BL,WAA0B,cAA1BA,WAA0B,GAAI,CAAC,AAAC;oBAClCA,SAAwB;gBAAzC,MAAMM,QAAQ,GAAGN,CAAAA,SAAwB,GAAxBA,MAAM,CAACG,KAAK,CAAC,CAAC,CAAC,CAACI,QAAQ,cAAxBP,SAAwB,cAAxBA,SAAwB,GAAIhB,IAAI,CAACwB,KAAK,CAACC,MAAM,GAAG,CAAC,AAAC;gBACnE,MAAMC,eAAe,GAAG1B,IAAI,CAACwB,KAAK,CAACJ,UAAU,CAAC,AAAC;gBAC/C,MAAMO,aAAa,GAAG3B,IAAI,CAACwB,KAAK,CAACF,QAAQ,CAAC,AAAC;gBAE3C,IAAII,eAAe,KAAKT,SAAS,IAAIU,aAAa,KAAKV,SAAS,EAAE;oBAChE,MAAMW,SAAS,GAAkB;wBAC/BC,KAAK,EAAEH,eAAe;wBACtBI,GAAG,EAAEH,aAAa;wBAClBP,UAAU;wBACVE,QAAQ;qBACT,AAAC;oBACFhB,UAAU,CAACsB,SAAS,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC;SAEF,CAAC;IACJ,CAAC,EAAE;QAAC5B,IAAI;QAAEM,UAAU;QAAEO,aAAa;KAAC,CAAC,AAAC;IAEtC,IAAIJ,QAAQ,CAACsB,OAAO,KAAKd,SAAS,EAAE;QAClCvB,cAAc,CAACe,QAAQ,CAACsB,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,MAAMC,aAAa,GAAG,IAAMnB,aAAa,CAAC,CAACkB,OAAO,GAAK,CAACA,OAAO,CAAC,AAAC;IAEjE,MAAME,mBAAmB,GAAG,CAACC,CAAa,GAAK;QAC7CrB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,sGAAsG;QACtG,IAAIN,aAAa,KAAKU,SAAS,EAAE;YAC/B,IAAIR,QAAQ,CAACsB,OAAO,KAAKd,SAAS,EAAE;gBAClCnB,YAAY,CAACW,QAAQ,CAACsB,OAAO,CAAC,CAAC;YACjC,CAAC;QACH,OAAO;YACLxB,aAAa,CAAC2B,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,AAAC;IAEF,MAAMC,iBAAiB,GAAG,CAACD,CAAa,GAAK;QAC3C,yFAAyF;QACzF,IAAIA,CAAC,CAACE,MAAM,YAAYC,iBAAiB,EAAE;YACzC1B,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,AAAC;IAEF,MAAM2B,eAAe,GAAG,IAAM;QAC5B3B,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,AAAC;IAEF,MAAM4B,kBAAkB,GAAG,IAAM;QAC/B5B,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,AAAC;IAEF,MAAM6B,kBAAkB,GAAG,IAAM;QAC/B7B,cAAc,CAAC,KAAK,CAAC,CAAC;QACtBE,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,AAAC;IAEF,MAAM4B,MAAM,GAAsBpE,OAAO,CAAC,IAAM;QAC9C,IAAI2B,IAAI,CAAC0C,UAAU,KAAKzB,SAAS,EAAE,OAAO,EAAE,CAAC;QAC7C,IAAIjB,IAAI,CAAC0C,UAAU,KAAK,IAAI,IAAI1C,IAAI,CAAC0C,UAAU,CAACjB,MAAM,KAAK,CAAC,EAAE,OAAOjB,WAAW,CAACmC,YAAY,CAAC;YAE9E3C,QAAY;QAA5B,MAAM4C,OAAO,GAAG5C,CAAAA,QAAY,GAAZA,IAAI,CAAC4C,OAAO,cAAZ5C,QAAY,cAAZA,QAAY,GAAIL,YAAY,CAACK,IAAI,CAACwB,KAAK,CAAC,AAAC;QAEzD,MAAMiB,MAAM,GAAsB;YAChCI,MAAM,EAAE7C,IAAI,CAAC0C,UAAU;YACvBlB,KAAK,EAAE;gBACLsB,IAAI,EAAE,UAAU;gBAChB9C,IAAI,EAAEA,IAAI,CAACwB,KAAK;gBAChBuB,GAAG,EAAE/C,IAAI,CAACgD,QAAQ;gBAClBC,SAAS,EAAE;oBACTC,SAAS,EAAE,CAACC,KAAa,GAAK;wBAC5B,OAAOvD,gBAAgB,CAACuD,KAAK,EAAEP,OAAO,CAAC,CAAC;oBAC1C,CAAC;iBACF;aACF;YACD3C,KAAK,EAAEJ,QAAQ,CAACI,KAAK,EAAEC,IAAI,CAAC;YAC5BkD,SAAS,EAAE,KAAK;YAChBC,OAAO,EAAE;gBACPC,IAAI,EAAE,IAAI;gBACVC,OAAO,EAAE,MAAM;gBACfC,WAAW,EAAE,KAAK;gBAClBC,WAAW,EAAE;oBACXX,IAAI,EAAE,MAAM;oBACZY,CAAC,EAAE,CAAC;iBACL;aACF;YACDC,OAAO,EAAE;gBACPC,OAAO,EAAE;oBACPC,QAAQ,EAAE;wBACRC,IAAI,EAAE,IAAI;wBACVC,UAAU,EAAE,MAAM;qBACnB;iBACF;aACF;YACD5D,IAAI;YACJC,MAAM;YACNC,SAAS;SACV,AAAC;QAEF,OAAOoC,MAAM,CAAC;IAChB,CAAC,EAAE;QAACzC,IAAI;QAAEC,KAAK;QAAEE,IAAI;QAAEC,MAAM;QAAEC,SAAS;KAAC,CAAC,AAAC;IAE3C,qBACE,MAAC7B,GAAG;QACFwF,EAAE,EAAE;YACFjE,MAAM;SACP;QACDkE,OAAO,EAAEjC,aAAa;QACtBzB,aAAa,EAAE0B,mBAAmB;QAClCiC,WAAW,EAAE/B,iBAAiB;QAC9BgC,SAAS,EAAE7B,eAAe;QAC1B8B,YAAY,EAAE5B,kBAAkB;QAChC6B,YAAY,EAAE9B,kBAAkB;;YAE/B7B,WAAW,KAAK,IAAI,kBACnB,KAACjB,OAAO;gBAACgB,QAAQ,EAAEA,QAAQ;gBAAE6D,SAAS,EAAEtE,IAAI;gBAAEuE,UAAU,EAAE,IAAI;gBAAE3D,UAAU,EAAEA,UAAU;gBAAEV,IAAI,EAAEA,IAAI;cAAY,AAC/G;0BAED,KAACX,MAAM;gBACLyE,EAAE,EAAE;oBACFQ,KAAK,EAAE,MAAM;oBACbzE,MAAM,EAAE,MAAM;iBACf;gBACD0C,MAAM,EAAEA,MAAM;gBACdgC,KAAK,EAAEjE,WAAW,CAACkE,YAAY;gBAC/BC,QAAQ,EAAE7D,YAAY;gBACtB8D,SAAS,EAAEnE,QAAQ;cACnB;;MACE,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({ height, data, yAxis, unit, grid, legend, onDataZoom, onDoubleClick }: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;\n\n    // show symbols and axisPointer dashed line on hover\n    const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: !isOptimizedMode,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: isOptimizedMode ? 'none' : 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={() => {\n        setPinTooltip((current) => !current);\n      }}\n      onMouseDown={(e) => {\n        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        setPinTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\n    >\n      {showTooltip === true && (\n        <Tooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit}></Tooltip>\n      )}\n\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","Tooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","option","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/LineChart/utils.d.ts

@@ -19,7 +19,7 @@ export declare function restoreChart(chart: EChartsInstance): void;
  * Calculate date range, used as a fallback when xAxis time range not passed as prop
  */
 export declare function getDateRange(data: number[]): number;
-export declare function getFormattedDate(value: number, rangeMs: number): string;
+export declare function getFormattedDate(value: number, rangeMs: number, timeZone?: string): string;
 export declare function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions): ({
     type: string;
     boundaryGap: (string | number)[];

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/LineChart/utils.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,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;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAKlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAiB9D;AAKD,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,EAAE,IAAI,CAAC,EAAE,WAAW;;;;2BAMhD,MAAM;;0CAM9B"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/LineChart/utils.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,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;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAKlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,UAoBjF;AAKD,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,EAAE,IAAI,CAAC,EAAE,WAAW;;;;2BAMhD,MAAM;;0CAM9B"}

package/dist/LineChart/utils.js

@@ -12,6 +12,7 @@
 // limitations under the License.
 import { merge } from 'lodash-es';
 import { formatValue } from '../model';
+import { dateFormatOptionsWithTimeZone } from '../utils';
 /**
  * Enable dataZoom without requring user to click toolbox icon
  */ export function enableDataZoom(chart) {
@@ -47,12 +48,12 @@ import { formatValue } from '../model';
 }
 /*
  * Determines time granularity for axis labels, defaults to hh:mm
- */ export function getFormattedDate(value, rangeMs) {
-    const dateFormatOptions = {
+ */ export function getFormattedDate(value, rangeMs, timeZone) {
+    const dateFormatOptions = dateFormatOptionsWithTimeZone({
         hour: 'numeric',
         minute: 'numeric',
         hourCycle: 'h23'
-    };
+    }, timeZone);
     const thirtyMinMs = 1800000;
     const dayMs = 86400000;
     if (rangeMs <= thirtyMinMs) {

package/dist/LineChart/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/utils.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { merge } from 'lodash-es';\nimport type { YAXisComponentOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = {\n    hour: 'numeric',\n    minute: 'numeric',\n    hourCycle: 'h23',\n  };\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const Y_AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n"],"names":["merge","formatValue","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","boundaryGap","axisLabel","formatter"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/utils.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { merge } from 'lodash-es';\nimport type { YAXisComponentOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions } from '../model';\nimport { dateFormatOptionsWithTimeZone } from '../utils';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number, timeZone?: string) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptionsWithTimeZone(\n    {\n      hour: 'numeric',\n      minute: 'numeric',\n      hourCycle: 'h23',\n    },\n    timeZone\n  );\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const Y_AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n"],"names":["merge","formatValue","dateFormatOptionsWithTimeZone","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","timeZone","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","boundaryGap","axisLabel","formatter"],"mappings":"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"}

package/dist/StatChart/StatChart.test.js

@@ -68,14 +68,21 @@ describe('StatChart', ()=>{
         renderChart(unit);
         expect(screen.getByText('7.73')).toBeInTheDocument();
     });
-    it('show value with time unit formatting', ()=>{
+    it('show value with bytes unit formatting', ()=>{
+        const unit = {
+            kind: 'Bytes'
+        };
+        renderChart(unit);
+        expect(screen.getByText('7.73 bytes')).toBeInTheDocument();
+    });
+    it('show value with seconds time unit formatting', ()=>{
         const unit = {
             kind: 'Seconds'
         };
         renderChart(unit);
         expect(screen.getByText('7.73 seconds')).toBeInTheDocument();
     });
-    it('show value with time unit formatting', ()=>{
+    it('show value with months time unit formatting', ()=>{
         const unit = {
             kind: 'Months'
         };

package/dist/StatChart/StatChart.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render, screen } from '@testing-library/react';\nimport { ChartsThemeProvider } from '../context/ChartsThemeProvider';\nimport { UnitOptions } from '../model';\nimport { testChartsTheme } from '../test-utils';\nimport { StatChart, StatChartData } from './StatChart';\n\ndescribe('StatChart', () => {\n  const renderChart = (unit: UnitOptions) => {\n    const contentDimensions = {\n      width: 200,\n      height: 200,\n    };\n    render(\n      <ChartsThemeProvider chartsTheme={testChartsTheme}>\n        <StatChart width={contentDimensions.width} height={contentDimensions.height} data={mockStatData} unit={unit} />\n      </ChartsThemeProvider>\n    );\n  };\n\n  const mockStatData: StatChartData = {\n    calculatedValue: 7.72931659687181,\n    name: 'Example Stat Chart',\n    seriesData: {\n      name: '(((count(count(node_cpu_seconds_total{job=\"example\"}) by (cpu))',\n      values: [\n        [1654006170000, 7.736401673473903],\n        [1654006185000, 7.733891213538757],\n        [1654006200000, 7.731101813010433],\n        [1654006215000, 7.722454672079215],\n        [1654006230000, 7.722733612256738],\n      ],\n    },\n  };\n\n  it('render default options (no sparkline)', () => {\n    const unit: UnitOptions = {\n      kind: 'Decimal',\n      decimal_places: 2,\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73')).toBeInTheDocument();\n  });\n\n  it('show value with time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Seconds',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 seconds')).toBeInTheDocument();\n  });\n\n  it('show value with time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Months',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 months')).toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","ChartsThemeProvider","testChartsTheme","StatChart","describe","renderChart","unit","contentDimensions","width","height","chartsTheme","data","mockStatData","calculatedValue","name","seriesData","values","it","kind","decimal_places","expect","getByText","toBeInTheDocument"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,SAASC,mBAAmB,QAAQ,gCAAgC,CAAC;AAErE,SAASC,eAAe,QAAQ,eAAe,CAAC;AAChD,SAASC,SAAS,QAAuB,aAAa,CAAC;AAEvDC,QAAQ,CAAC,WAAW,EAAE,IAAM;IAC1B,MAAMC,WAAW,GAAG,CAACC,IAAiB,GAAK;QACzC,MAAMC,iBAAiB,GAAG;YACxBC,KAAK,EAAE,GAAG;YACVC,MAAM,EAAE,GAAG;SACZ,AAAC;QACFV,MAAM,eACJ,KAACE,mBAAmB;YAACS,WAAW,EAAER,eAAe;sBAC/C,cAAA,KAACC,SAAS;gBAACK,KAAK,EAAED,iBAAiB,CAACC,KAAK;gBAAEC,MAAM,EAAEF,iBAAiB,CAACE,MAAM;gBAAEE,IAAI,EAAEC,YAAY;gBAAEN,IAAI,EAAEA,IAAI;cAAI;UAC3F,CACvB,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMM,YAAY,GAAkB;QAClCC,eAAe,EAAE,gBAAgB;QACjCC,IAAI,EAAE,oBAAoB;QAC1BC,UAAU,EAAE;YACVD,IAAI,EAAE,iEAAiE;YACvEE,MAAM,EAAE;gBACN;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;aACnC;SACF;KACF,AAAC;IAEFC,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;YACfC,cAAc,EAAE,CAAC;SAClB,AAAC;QACFd,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IACvD,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,sCAAsC,EAAE,IAAM;QAC/C,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;SAChB,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,cAAc,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,sCAAsC,EAAE,IAAM;QAC/C,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,QAAQ;SACf,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,aAAa,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/StatChart/StatChart.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render, screen } from '@testing-library/react';\nimport { ChartsThemeProvider } from '../context/ChartsThemeProvider';\nimport { UnitOptions } from '../model';\nimport { testChartsTheme } from '../test-utils';\nimport { StatChart, StatChartData } from './StatChart';\n\ndescribe('StatChart', () => {\n  const renderChart = (unit: UnitOptions) => {\n    const contentDimensions = {\n      width: 200,\n      height: 200,\n    };\n    render(\n      <ChartsThemeProvider chartsTheme={testChartsTheme}>\n        <StatChart width={contentDimensions.width} height={contentDimensions.height} data={mockStatData} unit={unit} />\n      </ChartsThemeProvider>\n    );\n  };\n\n  const mockStatData: StatChartData = {\n    calculatedValue: 7.72931659687181,\n    name: 'Example Stat Chart',\n    seriesData: {\n      name: '(((count(count(node_cpu_seconds_total{job=\"example\"}) by (cpu))',\n      values: [\n        [1654006170000, 7.736401673473903],\n        [1654006185000, 7.733891213538757],\n        [1654006200000, 7.731101813010433],\n        [1654006215000, 7.722454672079215],\n        [1654006230000, 7.722733612256738],\n      ],\n    },\n  };\n\n  it('render default options (no sparkline)', () => {\n    const unit: UnitOptions = {\n      kind: 'Decimal',\n      decimal_places: 2,\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73')).toBeInTheDocument();\n  });\n\n  it('show value with bytes unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Bytes',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 bytes')).toBeInTheDocument();\n  });\n\n  it('show value with seconds time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Seconds',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 seconds')).toBeInTheDocument();\n  });\n\n  it('show value with months time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Months',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 months')).toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","ChartsThemeProvider","testChartsTheme","StatChart","describe","renderChart","unit","contentDimensions","width","height","chartsTheme","data","mockStatData","calculatedValue","name","seriesData","values","it","kind","decimal_places","expect","getByText","toBeInTheDocument"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,SAASC,mBAAmB,QAAQ,gCAAgC,CAAC;AAErE,SAASC,eAAe,QAAQ,eAAe,CAAC;AAChD,SAASC,SAAS,QAAuB,aAAa,CAAC;AAEvDC,QAAQ,CAAC,WAAW,EAAE,IAAM;IAC1B,MAAMC,WAAW,GAAG,CAACC,IAAiB,GAAK;QACzC,MAAMC,iBAAiB,GAAG;YACxBC,KAAK,EAAE,GAAG;YACVC,MAAM,EAAE,GAAG;SACZ,AAAC;QACFV,MAAM,eACJ,KAACE,mBAAmB;YAACS,WAAW,EAAER,eAAe;sBAC/C,cAAA,KAACC,SAAS;gBAACK,KAAK,EAAED,iBAAiB,CAACC,KAAK;gBAAEC,MAAM,EAAEF,iBAAiB,CAACE,MAAM;gBAAEE,IAAI,EAAEC,YAAY;gBAAEN,IAAI,EAAEA,IAAI;cAAI;UAC3F,CACvB,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMM,YAAY,GAAkB;QAClCC,eAAe,EAAE,gBAAgB;QACjCC,IAAI,EAAE,oBAAoB;QAC1BC,UAAU,EAAE;YACVD,IAAI,EAAE,iEAAiE;YACvEE,MAAM,EAAE;gBACN;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;aACnC;SACF;KACF,AAAC;IAEFC,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;YACfC,cAAc,EAAE,CAAC;SAClB,AAAC;QACFd,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IACvD,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,OAAO;SACd,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,YAAY,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,8CAA8C,EAAE,IAAM;QACvD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;SAChB,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,cAAc,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,6CAA6C,EAAE,IAAM;QACtD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,QAAQ;SACf,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,aAAa,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/Tooltip/TooltipContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,UAAU,mBAAmB;IAC3B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAiExD"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/Tooltip/TooltipContent.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,UAAU,mBAAmB;IAC3B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAqExD"}

package/dist/Tooltip/TooltipContent.js

@@ -13,30 +13,29 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Box, Divider, Stack, Typography } from '@mui/material';
+import { useTimeZone } from '../context/TimeZoneProvider';
 import { SeriesInfo } from './SeriesInfo';
 export function TooltipContent(props) {
     const { focusedSeries , wrapLabels  } = props;
+    const { formatWithUserTimeZone  } = useTimeZone();
     const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
     const formatTimeSeriesHeader = (timeString)=>{
-        const [month, year, time] = timeString.split(',');
+        const date = new Date(timeString);
+        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
+        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
         return /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                /*#__PURE__*/ _jsxs(Typography, {
+                /*#__PURE__*/ _jsx(Typography, {
                     variant: "caption",
                     sx: (theme)=>({
                             color: theme.palette.common.white
                         }),
-                    children: [
-                        month,
-                        ", ",
-                        year,
-                        " –"
-                    ]
+                    children: formattedDate
                 }),
                 /*#__PURE__*/ _jsx(Typography, {
                     variant: "caption",
                     children: /*#__PURE__*/ _jsx("strong", {
-                        children: time
+                        children: formattedTime
                     })
                 })
             ]