@perses-dev/components 0.0.0-snapshot-time-range-height-80d08fc

package/dist/Legend/LegendColorBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegendColorBadge.d.ts","sourceRoot":"","sources":["../../src/Legend/LegendColorBadge.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,MAAM,WAAW,qBAAsB,SAAQ,QAAQ,CAAC,KAAK,CAAC;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,mDAe3B,CAAC"}

package/dist/Legend/LegendColorBadge.js

@@ -0,0 +1,31 @@
+// 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 React from 'react';
+import { Box } from '@mui/material';
+import { combineSx } from '../utils';
+export const LegendColorBadge = /*#__PURE__*/ React.memo(function LegendColorBadge({ color , sx , ...others }) {
+    return /*#__PURE__*/ _jsx(Box, {
+        ...others,
+        sx: combineSx({
+            height: 4,
+            width: 16,
+            margin: (theme)=>theme.spacing(0.5)
+        }, sx),
+        style: {
+            backgroundColor: color
+        }
+    });
+});
+
+//# sourceMappingURL=LegendColorBadge.js.map

package/dist/Legend/LegendColorBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Legend/LegendColorBadge.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 React from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = React.memo(function LegendColorBadge({ color, sx, ...others }: LegendColorBadgeProps) {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["React","Box","combineSx","LegendColorBadge","memo","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"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,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,SAAS,QAAQ,UAAU,CAAC;AAMrC,OAAO,MAAMC,gBAAgB,iBAAGH,KAAK,CAACI,IAAI,CAAC,SAASD,gBAAgB,CAAC,EAAEE,KAAK,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAyB,EAAE;IACpH,qBACE,KAACN,GAAG;QACD,GAAGM,MAAM;QACVD,EAAE,EAAEJ,SAAS,CACX;YACEM,MAAM,EAAE,CAAC;YACTC,KAAK,EAAE,EAAE;YACTC,MAAM,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,GAAG,CAAC;SACtC,EACDN,EAAE,CACH;QACDO,KAAK,EAAE;YAAEC,eAAe,EAAET,KAAK;SAAE;MACjC,CACF;AACJ,CAAC,CAAC,CAAC"}

package/dist/Legend/ListLegend.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { LegendItem } from '../model';
+interface ListLegendProps {
+    items: LegendItem[];
+}
+/**
+ * ListLegend is used when legend.position is 'right' since legend items are stacked
+ */
+export declare function ListLegend({ items }: ListLegendProps): JSX.Element;
+export {};
+//# sourceMappingURL=ListLegend.d.ts.map

package/dist/Legend/ListLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,eAAe;IACvB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,eAyBpD"}

package/dist/Legend/ListLegend.js

@@ -0,0 +1,40 @@
+// 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 { List } from '@mui/material';
+import { ListLegendItem } from './ListLegendItem';
+/**
+ * ListLegend is used when legend.position is 'right' since legend items are stacked
+ */ export function ListLegend({ items  }) {
+    // show full labels on hover when there are many total series
+    const truncateLabels = items.length > 5;
+    return /*#__PURE__*/ _jsx(List, {
+        children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
+                item: item,
+                sx: {
+                    width: 190,
+                    textOverflow: 'ellipsis',
+                    wordBreak: 'break-word',
+                    overflow: truncateLabels ? 'hidden' : 'visible',
+                    whiteSpace: truncateLabels ? 'nowrap' : 'normal',
+                    // TODO: add optional hover effect to show unformatted label
+                    '&:hover': {
+                        overflow: 'visible',
+                        whiteSpace: 'normal'
+                    }
+                }
+            }, item.id))
+    });
+}
+
+//# sourceMappingURL=ListLegend.js.map

package/dist/Legend/ListLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Legend/ListLegend.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 { List } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface ListLegendProps {\n  items: LegendItem[];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are stacked\n */\nexport function ListLegend({ items }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  return (\n    <List>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 190,\n            textOverflow: 'ellipsis',\n            wordBreak: 'break-word',\n            overflow: truncateLabels ? 'hidden' : 'visible',\n            whiteSpace: truncateLabels ? 'nowrap' : 'normal',\n            // TODO: add optional hover effect to show unformatted label\n            '&:hover': {\n              overflow: 'visible',\n              whiteSpace: 'normal', // this allow you to see the full label on hover\n            },\n          }}\n        />\n      ))}\n    </List>\n  );\n}\n"],"names":["List","ListLegendItem","ListLegend","items","truncateLabels","length","map","item","sx","width","textOverflow","wordBreak","overflow","whiteSpace","id"],"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,IAAI,QAAQ,eAAe,CAAC;AAErC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAMlD;;CAEC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAmB,EAAE;IACrD,6DAA6D;IAC7D,MAAMC,cAAc,GAAGD,KAAK,CAACE,MAAM,GAAG,CAAC,AAAC;IACxC,qBACE,KAACL,IAAI;kBACFG,KAAK,CAACG,GAAG,CAAC,CAACC,IAAI,iBACd,KAACN,cAAc;gBAEbM,IAAI,EAAEA,IAAI;gBACVC,EAAE,EAAE;oBACFC,KAAK,EAAE,GAAG;oBACVC,YAAY,EAAE,UAAU;oBACxBC,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAER,cAAc,GAAG,QAAQ,GAAG,SAAS;oBAC/CS,UAAU,EAAET,cAAc,GAAG,QAAQ,GAAG,QAAQ;oBAChD,4DAA4D;oBAC5D,SAAS,EAAE;wBACTQ,QAAQ,EAAE,SAAS;wBACnBC,UAAU,EAAE,QAAQ;qBACrB;iBACF;eAbIN,IAAI,CAACO,EAAE,CAcZ,AACH,CAAC;MACG,CACP;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ListItemProps } from '@mui/material';
+import { LegendItem } from '../model';
+interface ListLegendItemProps extends ListItemProps {
+    item: LegendItem;
+}
+export declare const ListLegendItem: React.NamedExoticComponent<ListLegendItemProps>;
+export {};
+//# sourceMappingURL=ListLegendItem.d.ts.map

package/dist/Legend/ListLegendItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,mBAAoB,SAAQ,aAAa;IACjD,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAsBzB,CAAC"}

package/dist/Legend/ListLegendItem.js

@@ -0,0 +1,47 @@
+// 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 { createElement as _createElement } from "react";
+import React from 'react';
+import { Box, ListItemText, ListItem } from '@mui/material';
+import { combineSx } from '../utils';
+import { LegendColorBadge } from './LegendColorBadge';
+export const ListLegendItem = /*#__PURE__*/ React.memo(function ListLegendItem({ item , sx , ...others }) {
+    return /*#__PURE__*/ _createElement(ListItem, {
+        ...others,
+        sx: combineSx({
+            padding: 0,
+            cursor: 'pointer'
+        }, sx),
+        dense: true,
+        key: item.id,
+        onClick: item.onClick,
+        selected: item.isSelected,
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                children: /*#__PURE__*/ _jsx(LegendColorBadge, {
+                    color: item.color
+                })
+            }),
+            /*#__PURE__*/ _jsx(ListItemText, {
+                primary: item.label
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=ListLegendItem.js.map

package/dist/Legend/ListLegendItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Legend/ListLegendItem.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 React from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps extends ListItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item, sx, ...others }: ListLegendItemProps) {\n  return (\n    <ListItem\n      {...others}\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItem","memo","item","sx","others","padding","cursor","dense","key","id","onClick","selected","isSelected","display","alignItems","color","primary","label"],"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,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGN,KAAK,CAACO,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAuB,EAAE;IAC7G,qBACE,eAACP,QAAQ;QACN,GAAGO,MAAM;QACVD,EAAE,EAAEL,SAAS,CACX;YACEO,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDH,EAAE,CACH;QACDI,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEN,IAAI,CAACO,EAAE;QACZC,OAAO,EAAER,IAAI,CAACQ,OAAO;QACrBC,QAAQ,EAAET,IAAI,CAACU,UAAU;;0BAEzB,KAACjB,GAAG;gBAACQ,EAAE,EAAE;oBAAEU,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACf,gBAAgB;oBAACgB,KAAK,EAAEb,IAAI,CAACa,KAAK;kBAAI;cACnC;0BACN,KAACnB,YAAY;gBAACoB,OAAO,EAAEd,IAAI,CAACe,KAAK;cAAiB;;MACzC,CACX;AACJ,CAAC,CAAC,CAAC"}

package/dist/Legend/index.d.ts

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

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

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

package/dist/Legend/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 './Legend';
+
+//# sourceMappingURL=index.js.map

package/dist/Legend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Legend/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 './Legend';\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,UAAU,CAAC"}

package/dist/LineChart/LineChart.d.ts

@@ -0,0 +1,19 @@
+import { MouseEvent } from 'react';
+import type { GridComponentOption, LegendComponentOption, VisualMapComponentOption, YAXisComponentOption } from 'echarts';
+import { EChartsDataFormat } from '../model/graph';
+import { UnitOptions } from '../model/units';
+import { ZoomEventData } from './utils';
+interface LineChartProps {
+    height: number;
+    data: EChartsDataFormat;
+    yAxis?: YAXisComponentOption;
+    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 {};
+//# sourceMappingURL=LineChart.d.ts.map

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

@@ -0,0 +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;AAkBhH,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,eAmJhB"}

package/dist/LineChart/LineChart.js

@@ -0,0 +1,189 @@
+// 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 } from "react/jsx-runtime";
+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 { CanvasRenderer } from 'echarts/renderers';
+import { EChart } from '../EChart';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
+import { useTimeZone } from '../context/TimeZoneProvider';
+use([
+    EChartsLineChart,
+    GridComponent,
+    DataZoomComponent,
+    MarkAreaComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    TitleComponent,
+    ToolboxComponent,
+    TooltipComponent,
+    LegendComponent,
+    VisualMapComponent,
+    CanvasRenderer
+]);
+export function LineChart({ height , data , yAxis , unit , grid , legend , visualMap , 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)=>{
+                if (onDataZoom === undefined) {
+                    setTimeout(()=>{
+                        // workaround so unpin happens after click event
+                        setPinTooltip(false);
+                    }, 10);
+                }
+                if (onDataZoom === undefined || params.batch[0] === undefined) return;
+                var _startValue;
+                const startIndex = (_startValue = params.batch[0].startValue) !== null && _startValue !== void 0 ? _startValue : 0;
+                var _endValue;
+                const endIndex = (_endValue = params.batch[0].endValue) !== null && _endValue !== void 0 ? _endValue : data.xAxis.length - 1;
+                const xAxisStartValue = data.xAxis[startIndex];
+                const xAxisEndValue = data.xAxis[endIndex];
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue,
+                        startIndex,
+                        endIndex
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            }
+        };
+    }, [
+        data,
+        onDataZoom,
+        setPinTooltip
+    ]);
+    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
+        if (onDoubleClick === undefined) {
+            if (chartRef.current !== undefined) {
+                restoreChart(chartRef.current);
+            }
+        } else {
+            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 option = useMemo(()=>{
+        if (data.timeSeries === undefined) return {};
+        if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
+        var _rangeMs;
+        const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : getDateRange(data.xAxis);
+        const option = {
+            series: data.timeSeries,
+            xAxis: {
+                type: 'category',
+                data: data.xAxis,
+                max: data.xAxisMax,
+                axisLabel: {
+                    formatter: (value)=>{
+                        return getFormattedDate(value, rangeMs, timeZone);
+                    }
+                }
+            },
+            yAxis: getYAxes(yAxis, unit),
+            animation: false,
+            tooltip: {
+                show: true,
+                trigger: 'axis',
+                showContent: false,
+                axisPointer: {
+                    type: 'line',
+                    z: 0
+                }
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid,
+            legend,
+            visualMap
+        };
+        return option;
+    }, [
+        data,
+        yAxis,
+        grid,
+        legend,
+        visualMap,
+        timeZone
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            height
+        },
+        onClick: handleOnClick,
+        onDoubleClick: handleOnDoubleClick,
+        onMouseDown: handleOnMouseDown,
+        onMouseUp: handleOnMouseUp,
+        onMouseLeave: handleOnMouseLeave,
+        onMouseEnter: handleOnMouseEnter,
+        children: [
+            showTooltip === true && /*#__PURE__*/ _jsx(Tooltip, {
+                chartRef: chartRef,
+                chartData: data,
+                wrapLabels: true,
+                pinTooltip: pinTooltip,
+                unit: unit
+            }),
+            /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                onEvents: handleEvents,
+                _instance: chartRef
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=LineChart.js.map

package/dist/LineChart/LineChart.js.map

@@ -0,0 +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';\nimport { useTimeZone } from '../context/TimeZoneProvider';\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  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 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, timeZone);\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, timeZone]);\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","useTimeZone","height","data","yAxis","unit","grid","legend","visualMap","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","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":"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"}

package/dist/LineChart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './LineChart';
+export type { ZoomEventData } from './utils';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/LineChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/LineChart/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 './LineChart';
+
+//# sourceMappingURL=index.js.map

package/dist/LineChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LineChart/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 './LineChart';\nexport type { ZoomEventData } from './utils';\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,aAAa,CAAC"}

package/dist/LineChart/utils.d.ts

@@ -0,0 +1,30 @@
+import type { YAXisComponentOption } from 'echarts';
+import { ECharts as EChartsInstance } from 'echarts/core';
+import { UnitOptions } from '../model';
+export interface ZoomEventData {
+    start: number;
+    end: number;
+    startIndex: number;
+    endIndex: number;
+}
+/**
+ * Enable dataZoom without requring user to click toolbox icon
+ */
+export declare function enableDataZoom(chart: EChartsInstance): void;
+/**
+ * Restore chart to original state before zoom or other actions were dispatched
+ */
+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, timeZone?: string): string;
+export declare function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions): ({
+    type: string;
+    boundaryGap: (string | number)[];
+    axisLabel: {
+        formatter: (value: number) => string;
+    };
+} & (YAXisComponentOption | undefined))[];
+//# sourceMappingURL=utils.d.ts.map

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

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

@@ -0,0 +1,90 @@
+// 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 { 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) {
+    const chartModel = chart['_model'];
+    if (chartModel === undefined) return;
+    if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {
+        // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')
+        if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {
+            chart.dispatchAction({
+                type: 'takeGlobalCursor',
+                key: 'dataZoomSelect',
+                dataZoomSelectActive: true
+            });
+        }
+    }
+}
+/**
+ * Restore chart to original state before zoom or other actions were dispatched
+ */ export function restoreChart(chart) {
+    // TODO: support incremental unzoom instead of restore to original state
+    chart.dispatchAction({
+        type: 'restore'
+    });
+}
+/**
+ * Calculate date range, used as a fallback when xAxis time range not passed as prop
+ */ export function getDateRange(data) {
+    const defaultRange = 3600000; // hour in ms
+    if (data.length === 0) return defaultRange;
+    const lastDatum = data[data.length - 1];
+    if (data[0] === undefined || lastDatum === undefined) return defaultRange;
+    return lastDatum - data[0];
+}
+/*
+ * Determines time granularity for axis labels, defaults to hh:mm
+ */ 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) {
+        dateFormatOptions.second = 'numeric';
+    } else if (rangeMs >= dayMs) {
+        dateFormatOptions.month = 'numeric';
+        dateFormatOptions.day = 'numeric';
+    }
+    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    // remove comma when month / day present
+    return DATE_FORMAT.format(value).replace(/, /g, ' ');
+}
+/*
+ * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future
+ */ export function getYAxes(yAxis, unit) {
+    // TODO: support alternate yAxis that shows on right side
+    const Y_AXIS_DEFAULT = {
+        type: 'value',
+        boundaryGap: [
+            0,
+            '10%'
+        ],
+        axisLabel: {
+            formatter: (value)=>{
+                return formatValue(value, unit);
+            }
+        }
+    };
+    return [
+        merge(Y_AXIS_DEFAULT, yAxis)
+    ];
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/LineChart/utils.js.map

@@ -0,0 +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';\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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"}