@perses-dev/components 0.0.0-snapshot-core-types-move-units-c7c5d31 → 0.0.0-snapshot-panel-extra-content-2-2767e21

package/README.md

@@ -15,3 +15,4 @@ For detailed examples of how to use certain components, see individual docs for:
 - [LineChart.md](./src/LineChart/LineChart.md)
 - [GaugeChart.md](./src/GaugeChart/GaugeChart.md)
 - [StatChart.md](./src/StatChart/StatChart.md)
+- [BarChart.md](./src/BarChart/BarChart.md)

package/dist/BarChart/BarChart.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { UnitOptions } from '@perses-dev/core';
+import { ModeOption } from '../ModeSelector';
+export interface BarChartData {
+    label: string;
+    value: number | null;
+}
+export interface BarChartProps {
+    width: number;
+    height: number;
+    data: BarChartData[] | null;
+    unit?: UnitOptions;
+    mode?: ModeOption;
+}
+export declare function BarChart(props: BarChartProps): JSX.Element;
+//# sourceMappingURL=BarChart.d.ts.map

package/dist/BarChart/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/BarChart/BarChart.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAe,MAAM,kBAAkB,CAAC;AAQ5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAO7C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eA+E5C"}

package/dist/BarChart/BarChart.js

@@ -0,0 +1,123 @@
+// Copyright 2023 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 { useMemo } from 'react';
+import { formatValue } from '@perses-dev/core';
+import { use } from 'echarts/core';
+import { BarChart as EChartsBarChart } from 'echarts/charts';
+import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { Box } from '@mui/material';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { EChart } from '../EChart';
+use([
+    EChartsBarChart,
+    GridComponent,
+    DatasetComponent,
+    TitleComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+const BAR_WIN_WIDTH = 14;
+const BAR_GAP = 6;
+export function BarChart(props) {
+    const { width , height , data , unit ={
+        kind: 'Decimal'
+    } , mode ='value'  } = props;
+    const chartsTheme = useChartsTheme();
+    const option = useMemo(()=>{
+        if (data == null) return chartsTheme.noDataOption;
+        const source = [];
+        data.map((d)=>{
+            source.push([
+                d.label,
+                d.value
+            ]);
+        });
+        return {
+            title: {
+                show: false
+            },
+            dataset: [
+                {
+                    dimensions: [
+                        'label',
+                        'value'
+                    ],
+                    source: source
+                }
+            ],
+            xAxis: {},
+            yAxis: {
+                type: 'category',
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    overflow: 'truncate',
+                    width: width / 3
+                }
+            },
+            series: {
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'right',
+                    formatter: (params)=>{
+                        if (mode === 'percentage') {
+                            return params.data[1] && formatValue(params.data[1], {
+                                kind: 'Percent',
+                                decimal_places: unit.decimal_places
+                            });
+                        }
+                        return params.data[1] && formatValue(params.data[1], unit);
+                    },
+                    barMinWidth: BAR_WIN_WIDTH,
+                    barCategoryGap: BAR_GAP
+                },
+                itemStyle: {
+                    borderRadius: 4,
+                    color: chartsTheme.echartsTheme[0]
+                }
+            },
+            tooltip: {
+                appendToBody: true,
+                confine: true,
+                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], unit)}`
+            }
+        };
+    }, [
+        data,
+        chartsTheme,
+        width,
+        mode,
+        unit
+    ]);
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            width: width,
+            height: height,
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ _jsx(EChart, {
+            sx: {
+                minHeight: height,
+                height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%'
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+}
+
+//# sourceMappingURL=BarChart.js.map

package/dist/BarChart/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/BarChart/BarChart.tsx"],"sourcesContent":["// Copyright 2023 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 { useMemo } from 'react';\nimport { UnitOptions, formatValue } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { BarChart as EChartsBarChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { EChart } from '../EChart';\nimport { ModeOption } from '../ModeSelector';\n\nuse([EChartsBarChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst BAR_WIN_WIDTH = 14;\nconst BAR_GAP = 6;\n\nexport interface BarChartData {\n  label: string;\n  value: number | null;\n}\n\nexport interface BarChartProps {\n  width: number;\n  height: number;\n  data: BarChartData[] | null;\n  unit?: UnitOptions;\n  mode?: ModeOption;\n}\n\nexport function BarChart(props: BarChartProps) {\n  const { width, height, data, unit = { kind: 'Decimal' }, mode = 'value' } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data == null) return chartsTheme.noDataOption;\n\n    const source: Array<Array<BarChartData['label'] | BarChartData['value']>> = [];\n    data.map((d) => {\n      source.push([d.label, d.value]);\n    });\n\n    return {\n      title: {\n        show: false,\n      },\n      dataset: [\n        {\n          dimensions: ['label', 'value'],\n          source: source,\n        },\n      ],\n      xAxis: {},\n      yAxis: {\n        type: 'category',\n        splitLine: {\n          show: false,\n        },\n        axisLabel: {\n          overflow: 'truncate',\n          width: width / 3,\n        },\n      },\n      series: {\n        type: 'bar',\n        label: {\n          show: true,\n          position: 'right',\n          formatter: (params: { data: number[] }) => {\n            if (mode === 'percentage') {\n              return (\n                params.data[1] &&\n                formatValue(params.data[1], {\n                  kind: 'Percent',\n                  decimal_places: unit.decimal_places,\n                })\n              );\n            }\n            return params.data[1] && formatValue(params.data[1], unit);\n          },\n          barMinWidth: BAR_WIN_WIDTH,\n          barCategoryGap: BAR_GAP,\n        },\n        itemStyle: {\n          borderRadius: 4,\n          color: chartsTheme.echartsTheme[0],\n        },\n      },\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: { name: string; data: number[] }) =>\n          params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], unit)}`,\n      },\n    };\n  }, [data, chartsTheme, width, mode, unit]);\n\n  return (\n    <Box sx={{ width: width, height: height, overflow: 'auto' }}>\n      <EChart\n        sx={{\n          minHeight: height,\n          height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","formatValue","use","BarChart","EChartsBarChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","useChartsTheme","EChart","BAR_WIN_WIDTH","BAR_GAP","props","width","height","data","unit","kind","mode","chartsTheme","option","noDataOption","source","map","d","push","label","value","title","show","dataset","dimensions","xAxis","yAxis","type","splitLine","axisLabel","overflow","series","position","formatter","params","decimal_places","barMinWidth","barCategoryGap","itemStyle","borderRadius","color","echartsTheme","tooltip","appendToBody","confine","name","sx","minHeight","length","theme"],"mappings":"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"}

package/dist/BarChart/index.d.ts

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

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

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

package/dist/BarChart/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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 './BarChart';
+
+//# sourceMappingURL=index.js.map

package/dist/BarChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/BarChart/index.ts"],"sourcesContent":["// Copyright 2023 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 './BarChart';\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,YAAY,CAAC"}

package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface DiscardChangesConfirmationDialogProps {
+    description: string;
+    isOpen: boolean;
+    onCancel: () => void;
+    onDiscardChanges: () => void;
+}
+export declare const DiscardChangesConfirmationDialog: (props: DiscardChangesConfirmationDialogProps) => JSX.Element;
+export {};
+//# sourceMappingURL=DiscardChangesConfirmationDialog.d.ts.map

package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAgBA,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,gCAAgC,UAAW,qCAAqC,gBAiB5F,CAAC"}

package/dist/Dialog/DiscardChangesConfirmationDialog.js

@@ -0,0 +1,47 @@
+// Copyright 2023 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 { Button } from '@mui/material';
+import { Dialog } from './Dialog';
+export const DiscardChangesConfirmationDialog = (props)=>{
+    const { description , isOpen , onCancel , onDiscardChanges  } = props;
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: isOpen,
+        "aria-labelledby": "discard-dialog",
+        children: [
+            /*#__PURE__*/ _jsx(Dialog.Header, {
+                children: "Discard Changes"
+            }),
+            /*#__PURE__*/ _jsx(Dialog.Content, {
+                children: description
+            }),
+            /*#__PURE__*/ _jsxs(Dialog.Actions, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        onClick: onDiscardChanges,
+                        children: "Discard Changes"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        color: "secondary",
+                        onClick: onCancel,
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=DiscardChangesConfirmationDialog.js.map

package/dist/Dialog/DiscardChangesConfirmationDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2023 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 { Button } from '@mui/material';\nimport { Dialog } from './Dialog';\n\ninterface DiscardChangesConfirmationDialogProps {\n  description: string;\n  isOpen: boolean;\n  onCancel: () => void;\n  onDiscardChanges: () => void;\n}\n\nexport const DiscardChangesConfirmationDialog = (props: DiscardChangesConfirmationDialogProps) => {\n  const { description, isOpen, onCancel, onDiscardChanges } = props;\n\n  return (\n    <Dialog open={isOpen} aria-labelledby=\"discard-dialog\">\n      <Dialog.Header>Discard Changes</Dialog.Header>\n      <Dialog.Content>{description}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"contained\" onClick={onDiscardChanges}>\n          Discard Changes\n        </Button>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n};\n"],"names":["Button","Dialog","DiscardChangesConfirmationDialog","props","description","isOpen","onCancel","onDiscardChanges","open","aria-labelledby","Header","Content","Actions","variant","onClick","color"],"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,QAAQ,eAAe,CAAC;AACvC,SAASC,MAAM,QAAQ,UAAU,CAAC;AASlC,OAAO,MAAMC,gCAAgC,GAAG,CAACC,KAA4C,GAAK;IAChG,MAAM,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAEC,QAAQ,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAElE,qBACE,MAACF,MAAM;QAACO,IAAI,EAAEH,MAAM;QAAEI,iBAAe,EAAC,gBAAgB;;0BACpD,KAACR,MAAM,CAACS,MAAM;0BAAC,iBAAe;cAAgB;0BAC9C,KAACT,MAAM,CAACU,OAAO;0BAAEP,WAAW;cAAkB;0BAC9C,MAACH,MAAM,CAACW,OAAO;;kCACb,KAACZ,MAAM;wBAACa,OAAO,EAAC,WAAW;wBAACC,OAAO,EAAEP,gBAAgB;kCAAE,iBAEvD;sBAAS;kCACT,KAACP,MAAM;wBAACa,OAAO,EAAC,UAAU;wBAACE,KAAK,EAAC,WAAW;wBAACD,OAAO,EAAER,QAAQ;kCAAE,QAEhE;sBAAS;;cACM;;MACV,CACT;AACJ,CAAC,CAAC"}

package/dist/Dialog/index.d.ts

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

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

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

package/dist/Dialog/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './Dialog';
+export * from './DiscardChangesConfirmationDialog';
 
 //# sourceMappingURL=index.js.map

package/dist/Dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/index.tsx"],"sourcesContent":["// Copyright 2023 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 './Dialog';\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"}
+{"version":3,"sources":["../../src/Dialog/index.tsx"],"sourcesContent":["// Copyright 2023 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 './Dialog';\nexport * from './DiscardChangesConfirmationDialog';\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;AACzB,cAAc,oCAAoC,CAAC"}

package/dist/FontSizeSelector/FontSizeSelector.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type FontSizeOption = number | undefined;
+export interface FontSizeSelectorProps {
+    value: FontSizeOption;
+    onChange: (fontSize: FontSizeOption) => void;
+}
+export declare function FontSizeSelector({ value, onChange }: FontSizeSelectorProps): JSX.Element;
+//# sourceMappingURL=FontSizeSelector.d.ts.map

package/dist/FontSizeSelector/FontSizeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontSizeSelector.d.ts","sourceRoot":"","sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"names":[],"mappings":";AAqCA,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,eAmB1E"}

package/dist/FontSizeSelector/FontSizeSelector.js

@@ -0,0 +1,124 @@
+// Copyright 2023 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 { OptionsEditorControl } from '../OptionsEditorLayout';
+import { SettingsAutocomplete } from '../SettingsAutocomplete';
+const FONT_SIZE_OPTIONS = [
+    {
+        id: 'default',
+        label: 'Default',
+        value: undefined
+    },
+    {
+        id: '12',
+        label: '12',
+        value: 12
+    },
+    {
+        id: '14',
+        label: '14',
+        value: 14
+    },
+    {
+        id: '16',
+        label: '16',
+        value: 16
+    },
+    {
+        id: '20',
+        label: '20',
+        value: 20
+    },
+    {
+        id: '24',
+        label: '24',
+        value: 24
+    },
+    {
+        id: '28',
+        label: '28',
+        value: 28
+    },
+    {
+        id: '32',
+        label: '32',
+        value: 32
+    },
+    {
+        id: '36',
+        label: '36',
+        value: 36
+    },
+    {
+        id: '40',
+        label: '40',
+        value: 40
+    },
+    {
+        id: '48',
+        label: '48',
+        value: 48
+    },
+    {
+        id: '56',
+        label: '56',
+        value: 56
+    },
+    {
+        id: '64',
+        label: '64',
+        value: 64
+    },
+    {
+        id: '72',
+        label: '72',
+        value: 72
+    },
+    {
+        id: '96',
+        label: '96',
+        value: 96
+    },
+    {
+        id: '128',
+        label: '128',
+        value: 128
+    },
+    {
+        id: '160',
+        label: '160',
+        value: 160
+    },
+    {
+        id: '192',
+        label: '192',
+        value: 192
+    }
+];
+export function FontSizeSelector({ value , onChange  }) {
+    const handleFontSizeChange = (_, { value  })=>{
+        onChange(value);
+    };
+    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+        label: "Font Size",
+        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+            value: FONT_SIZE_OPTIONS.find((o)=>o.value === value),
+            options: FONT_SIZE_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handleFontSizeChange,
+            disableClearable: true
+        })
+    });
+}
+
+//# sourceMappingURL=FontSizeSelector.js.map

package/dist/FontSizeSelector/FontSizeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"sourcesContent":["// Copyright 2023 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 { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst FONT_SIZE_OPTIONS = [\n  { id: 'default', label: 'Default', value: undefined },\n  { id: '12', label: '12', value: 12 },\n  { id: '14', label: '14', value: 14 },\n  { id: '16', label: '16', value: 16 },\n  { id: '20', label: '20', value: 20 },\n  { id: '24', label: '24', value: 24 },\n  { id: '28', label: '28', value: 28 },\n  { id: '32', label: '32', value: 32 },\n  { id: '36', label: '36', value: 36 },\n  { id: '40', label: '40', value: 40 },\n  { id: '48', label: '48', value: 48 },\n  { id: '56', label: '56', value: 56 },\n  { id: '64', label: '64', value: 64 },\n  { id: '72', label: '72', value: 72 },\n  { id: '96', label: '96', value: 96 },\n  { id: '128', label: '128', value: 128 },\n  { id: '160', label: '160', value: 160 },\n  { id: '192', label: '192', value: 192 },\n];\n\nexport type FontSizeOption = number | undefined;\n\nexport interface FontSizeSelectorProps {\n  value: FontSizeOption;\n  onChange: (fontSize: FontSizeOption) => void;\n}\n\nexport function FontSizeSelector({ value, onChange }: FontSizeSelectorProps) {\n  const handleFontSizeChange = (_: unknown, { value }: { value: FontSizeOption }) => {\n    onChange(value);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Font Size\"\n      control={\n        <SettingsAutocomplete\n          value={FONT_SIZE_OPTIONS.find((o) => o.value === value)}\n          options={FONT_SIZE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleFontSizeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","FONT_SIZE_OPTIONS","id","label","value","undefined","FontSizeSelector","onChange","handleFontSizeChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"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"}

package/dist/FontSizeSelector/index.d.ts

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

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

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

package/dist/FontSizeSelector/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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 './FontSizeSelector';
+
+//# sourceMappingURL=index.js.map

package/dist/FontSizeSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FontSizeSelector/index.ts"],"sourcesContent":["// Copyright 2023 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 './FontSizeSelector';\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,oBAAoB,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -30,5 +30,5 @@ export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick
      */
     truncateLabel?: boolean;
 }
-export declare const ListLegendItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListLegendItemProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "alignItems" | "disabled" | "selected" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "dense" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "disablePadding" | "secondaryAction" | "item" | "index" | "isVisuallySelected" | "truncateLabel"> & React.RefAttributes<HTMLDivElement>>>;
+export declare const ListLegendItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListLegendItemProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "alignItems" | "disabled" | "selected" | "dense" | "components" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "componentsProps" | "slotProps" | "slots" | "item" | "index" | "isVisuallySelected" | "truncateLabel"> & React.RefAttributes<HTMLDivElement>>>;
 //# sourceMappingURL=ListLegendItem.d.ts.map

package/dist/LineChart/LineChart.d.ts

@@ -1,16 +1,10 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { UnitOptions } from '@perses-dev/core';
 import type { EChartsCoreOption, GridComponentOption, LegendComponentOption, YAXisComponentOption } from 'echarts';
-import { EChartsDataFormat } from '../model/graph';
-import { ZoomEventData } from './utils';
-export declare type TooltipConfig = {
-    wrapLabels: boolean;
-    hidden?: boolean;
-};
+import { EChartsDataFormat, ChartInstance } from '../model/graph';
+import { TooltipConfig } from '../TimeSeriesTooltip';
+import { ZoomEventData } from '../utils';
 export interface LineChartProps {
-    /**
-     * Height of the chart
-     */
     height: number;
     data: EChartsDataFormat;
     yAxis?: YAXisComponentOption;
@@ -24,19 +18,5 @@ export interface LineChartProps {
     onDoubleClick?: (e: MouseEvent) => void;
     __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
 }
-declare type LineChartHandleFocusOpts = {
-    id: string;
-};
-export declare type LineChartHandle = {
-    /**
-     * Highlight the series associated with the specified options.
-     */
-    highlightSeries: (opts: LineChartHandleFocusOpts) => void;
-    /**
-     * Clear all highlighted series.
-     */
-    clearHighlightedSeries: () => void;
-};
-export declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<LineChartHandle>>;
-export {};
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<ChartInstance>>;
 //# 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,KAAK,EAAE,EAAE,UAAU,EAA8D,MAAM,OAAO,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAKnD,OAAO,EAOL,aAAa,EACd,MAAM,SAAS,CAAC;AAgBjB,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAKD,aAAK,wBAAwB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,SAAS,wFAsPpB,CAAC"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA0B,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE1F,OAAO,EAAuC,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1F,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAgBlB,MAAM,WAAW,cAAc;IAC7B,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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GAsPpB,CAAC"}

package/dist/LineChart/LineChart.js

@@ -11,7 +11,7 @@
 // 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 React, { useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { use } from 'echarts/core';
 import { LineChart as EChartsLineChart } from 'echarts/charts';
@@ -19,9 +19,9 @@ import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent,
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { TimeSeriesTooltip } from '../TimeSeriesTooltip';
+import { LineChartTooltip } from '../TimeSeriesTooltip';
 import { useTimeZone } from '../context/TimeZoneProvider';
-import { clearHighlightedSeries, enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
+import { clearHighlightedSeries, enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from '../utils';
 use([
     EChartsLineChart,
     GridComponent,
@@ -50,7 +50,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
         return {
             highlightSeries ({ id  }) {
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not highlight series when hovering over legend
                     return;
                 }
                 chartRef.current.dispatchAction({
@@ -60,7 +60,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             },
             clearHighlightedSeries: ()=>{
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not clear highlight series
                     return;
                 }
                 clearHighlightedSeries(chartRef.current, data.timeSeries.length);
@@ -245,7 +245,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             }
         },
         children: [
-            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
@@ -253,7 +253,8 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
                 unit: unit,
                 onUnpinClick: ()=>{
                     setTooltipPinnedCoords(null);
-                }
+                },
+                containerId: chartsTheme.tooltipPortalContainerId
             }),
             /*#__PURE__*/ _jsx(EChart, {
                 sx: {