@perses-dev/components 0.10.0 → 0.11.0

package/dist/Legend/CompactLegend.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LegendItem } from '../model';
+interface CompactLegendProps {
+    items: LegendItem[];
+}
+export declare function CompactLegend({ items }: CompactLegendProps): JSX.Element;
+export {};
+//# sourceMappingURL=CompactLegend.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,kBAAkB,eAQ1D"}

package/dist/Legend/CompactLegend.js

@@ -0,0 +1,29 @@
+// 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 { Stack } from '@mui/material';
+import { ListLegendItem } from './ListLegendItem';
+export function CompactLegend({ items  }) {
+    return /*#__PURE__*/ _jsx(Stack, {
+        direction: "row",
+        spacing: 2,
+        sx: {
+            flexWrap: 'wrap'
+        },
+        children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
+                item: item
+            }, item.id))
+    });
+}
+
+//# sourceMappingURL=CompactLegend.js.map

package/dist/Legend/CompactLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Legend/CompactLegend.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 { Stack } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  items: LegendItem[];\n}\n\nexport function CompactLegend({ items }: CompactLegendProps) {\n  return (\n    <Stack direction=\"row\" spacing={2} sx={{ flexWrap: 'wrap' }}>\n      {items.map((item) => (\n        <ListLegendItem key={item.id} item={item} />\n      ))}\n    </Stack>\n  );\n}\n"],"names":["Stack","ListLegendItem","CompactLegend","items","direction","spacing","sx","flexWrap","map","item","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,KAAK,QAAQ,eAAe,CAAC;AAEtC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAMlD,OAAO,SAASC,aAAa,CAAC,EAAEC,KAAK,CAAA,EAAsB,EAAE;IAC3D,qBACE,KAACH,KAAK;QAACI,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;QAAEC,EAAE,EAAE;YAAEC,QAAQ,EAAE,MAAM;SAAE;kBACxDJ,KAAK,CAACK,GAAG,CAAC,CAACC,IAAI,iBACd,KAACR,cAAc;gBAAeQ,IAAI,EAAEA,IAAI;eAAnBA,IAAI,CAACC,EAAE,CAAgB,AAC7C,CAAC;MACI,CACR;AACJ,CAAC"}

package/dist/Legend/Legend.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { LegendOptions, LegendItem } from '../model';
+interface LegendProps {
+    width: number;
+    height: number;
+    data: LegendItem[];
+    options: LegendOptions;
+}
+export declare function Legend({ width, height, options, data }: LegendProps): JSX.Element;
+export {};
+//# sourceMappingURL=Legend.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAW,eAsBnE"}

package/dist/Legend/Legend.js

@@ -0,0 +1,44 @@
+// 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 { Box } from '@mui/material';
+import { ListLegend } from './ListLegend';
+import { CompactLegend } from './CompactLegend';
+export function Legend({ width , height , options , data  }) {
+    if (options.position === 'right') {
+        return /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                width: width,
+                height: height,
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                overflowY: 'scroll'
+            },
+            children: /*#__PURE__*/ _jsx(ListLegend, {
+                items: data
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            height: 50,
+            overflowY: 'scroll'
+        },
+        children: /*#__PURE__*/ _jsx(CompactLegend, {
+            items: data
+        })
+    });
+}
+
+//# sourceMappingURL=Legend.js.map

package/dist/Legend/Legend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Legend/Legend.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 { Box } from '@mui/material';\nimport { LegendOptions, LegendItem } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\ninterface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n}\n\nexport function Legend({ width, height, options, data }: LegendProps) {\n  if (options.position === 'right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: height,\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          overflowY: 'scroll',\n        }}\n      >\n        <ListLegend items={data} />\n      </Box>\n    );\n  }\n  return (\n    <Box sx={{ height: 50, overflowY: 'scroll' }}>\n      <CompactLegend items={data} />\n    </Box>\n  );\n}\n"],"names":["Box","ListLegend","CompactLegend","Legend","width","height","options","data","position","sx","top","right","overflowY","items"],"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,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAC1C,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAShD,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAe,EAAE;IACpE,IAAID,OAAO,CAACE,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACR,GAAG;YACFS,EAAE,EAAE;gBACFL,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAEA,MAAM;gBACdG,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;gBACRC,SAAS,EAAE,QAAQ;aACpB;sBAED,cAAA,KAACX,UAAU;gBAACY,KAAK,EAAEN,IAAI;cAAI;UACvB,CACN;IACJ,CAAC;IACD,qBACE,KAACP,GAAG;QAACS,EAAE,EAAE;YAAEJ,MAAM,EAAE,EAAE;YAAEO,SAAS,EAAE,QAAQ;SAAE;kBAC1C,cAAA,KAACV,aAAa;YAACW,KAAK,EAAEN,IAAI;UAAI;MAC1B,CACN;AACJ,CAAC"}

package/dist/Legend/LegendColorBadge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BoxProps } from '@mui/material';
+export interface LegendColorBadgeProps extends BoxProps<'div'> {
+    color: string;
+}
+export declare const LegendColorBadge: React.NamedExoticComponent<LegendColorBadgeProps>;
+//# sourceMappingURL=LegendColorBadge.d.ts.map

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,8 @@
+/// <reference types="react" />
+import { LegendItem } from '../model';
+interface ListLegendProps {
+    items: LegendItem[];
+}
+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,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,eAQpD"}

package/dist/Legend/ListLegend.js

@@ -0,0 +1,24 @@
+// 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';
+export function ListLegend({ items  }) {
+    return /*#__PURE__*/ _jsx(List, {
+        children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
+                item: item
+            }, 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\nexport function ListLegend({ items }: ListLegendProps) {\n  return (\n    <List>\n      {items.map((item) => (\n        <ListLegendItem key={item.id} item={item} />\n      ))}\n    </List>\n  );\n}\n"],"names":["List","ListLegendItem","ListLegend","items","map","item","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,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAmB,EAAE;IACrD,qBACE,KAACH,IAAI;kBACFG,KAAK,CAACC,GAAG,CAAC,CAACC,IAAI,iBACd,KAACJ,cAAc;gBAAeI,IAAI,EAAEA,IAAI;eAAnBA,IAAI,CAACC,EAAE,CAAgB,AAC7C,CAAC;MACG,CACP;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LegendItem } from '../model';
+interface ListLegendItemProps {
+    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;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAoBzB,CAAC"}

package/dist/Legend/ListLegendItem.js

@@ -0,0 +1,45 @@
+// 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 React from 'react';
+import { Box, ListItemText, ListItem } from '@mui/material';
+import { LegendColorBadge } from './LegendColorBadge';
+export const ListLegendItem = /*#__PURE__*/ React.memo(function ListLegendItem({ item  }) {
+    return /*#__PURE__*/ _jsxs(ListItem, {
+        dense: true,
+        sx: {
+            display: 'flex',
+            maxWidth: 270,
+            padding: 0,
+            cursor: 'pointer'
+        },
+        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
+            })
+        ]
+    }, item.id);
+});
+
+//# 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 } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item }: ListLegendItemProps) {\n  return (\n    <ListItem\n      dense={true}\n      sx={{\n        display: 'flex',\n        maxWidth: 270, // TODO: adjust spacing depending on number of series\n        padding: 0,\n        cursor: 'pointer',\n      }}\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","LegendColorBadge","ListLegendItem","memo","item","dense","sx","display","maxWidth","padding","cursor","onClick","selected","isSelected","alignItems","color","primary","label","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,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AAE5D,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGL,KAAK,CAACM,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAuB,EAAE;IAC9F,qBACE,MAACJ,QAAQ;QACPK,KAAK,EAAE,IAAI;QACXC,EAAE,EAAE;YACFC,OAAO,EAAE,MAAM;YACfC,QAAQ,EAAE,GAAG;YACbC,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB;QAEDC,OAAO,EAAEP,IAAI,CAACO,OAAO;QACrBC,QAAQ,EAAER,IAAI,CAACS,UAAU;;0BAEzB,KAACf,GAAG;gBAACQ,EAAE,EAAE;oBAAEC,OAAO,EAAE,MAAM;oBAAEO,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACb,gBAAgB;oBAACc,KAAK,EAAEX,IAAI,CAACW,KAAK;kBAAI;cACnC;0BACN,KAAChB,YAAY;gBAACiB,OAAO,EAAEZ,IAAI,CAACa,KAAK;cAAiB;;OAP7Cb,IAAI,CAACc,EAAE,CAQH,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/StatChart/StatChart.test.js

@@ -14,6 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ChartsThemeProvider } from '../context/ChartsThemeProvider';
+import { testChartsTheme } from '../test';
 import { StatChart } from './StatChart';
 describe('StatChart', ()=>{
     const contentDimensions = {
@@ -53,20 +54,11 @@ describe('StatChart', ()=>{
             ]
         }
     };
-    const exampleChartsTheme = {
-        themeName: 'perses',
-        echartsTheme: {},
-        noDataOption: {},
-        sparkline: {
-            width: 1,
-            color: '#000000'
-        }
-    };
     describe('Render default options (no sparkline)', ()=>{
         it('should render', ()=>{
             render(/*#__PURE__*/ _jsx(ChartsThemeProvider, {
                 themeName: "perses",
-                chartsTheme: exampleChartsTheme,
+                chartsTheme: testChartsTheme,
                 children: /*#__PURE__*/ _jsx(StatChart, {
                     width: contentDimensions.width,
                     height: contentDimensions.height,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { ChartsThemeProvider } from '../context/ChartsThemeProvider';\nimport { UnitOptions } from '../model';\nimport { StatChart, StatChartData } from './StatChart';\n\ndescribe('StatChart', () => {\n  const contentDimensions = {\n    width: 200,\n    height: 200,\n  };\n\n  const unit: UnitOptions = {\n    kind: 'Decimal',\n    decimal_places: 2,\n  };\n\n  const mockStatData: StatChartData = {\n    calculatedValue: 7.72931659687181,\n    name: 'Example Stat Chart',\n    seriesData: {\n      name: '(((count(count(node_cpu_seconds_total{job=\"example\"}) by (cpu))',\n      values: [\n        [1654006170000, 7.736401673473903],\n        [1654006185000, 7.733891213538757],\n        [1654006200000, 7.731101813010433],\n        [1654006215000, 7.722454672079215],\n        [1654006230000, 7.722733612256738],\n      ],\n    },\n  };\n\n  const exampleChartsTheme = {\n    themeName: 'perses',\n    echartsTheme: {},\n    noDataOption: {},\n    sparkline: {\n      width: 1,\n      color: '#000000',\n    },\n  };\n\n  describe('Render default options (no sparkline)', () => {\n    it('should render', () => {\n      render(\n        <ChartsThemeProvider themeName=\"perses\" chartsTheme={exampleChartsTheme}>\n          <StatChart\n            width={contentDimensions.width}\n            height={contentDimensions.height}\n            data={mockStatData}\n            unit={unit}\n          />\n        </ChartsThemeProvider>\n      );\n      expect(screen.getByText('7.73')).toBeInTheDocument();\n    });\n  });\n});\n"],"names":["React","render","screen","ChartsThemeProvider","StatChart","describe","contentDimensions","width","height","unit","kind","decimal_places","mockStatData","calculatedValue","name","seriesData","values","exampleChartsTheme","themeName","echartsTheme","noDataOption","sparkline","color","it","chartsTheme","data","expect","getByText","toBeInTheDocument"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,SAASC,mBAAmB,QAAQ,gCAAgC,CAAC;AAErE,SAASC,SAAS,QAAuB,aAAa,CAAC;AAEvDC,QAAQ,CAAC,WAAW,EAAE,IAAM;IAC1B,MAAMC,iBAAiB,GAAG;QACxBC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE,GAAG;KACZ,AAAC;IAEF,MAAMC,IAAI,GAAgB;QACxBC,IAAI,EAAE,SAAS;QACfC,cAAc,EAAE,CAAC;KAClB,AAAC;IAEF,MAAMC,YAAY,GAAkB;QAClCC,eAAe,EAAE,gBAAgB;QACjCC,IAAI,EAAE,oBAAoB;QAC1BC,UAAU,EAAE;YACVD,IAAI,EAAE,iEAAiE;YACvEE,MAAM,EAAE;gBACN;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;aACnC;SACF;KACF,AAAC;IAEF,MAAMC,kBAAkB,GAAG;QACzBC,SAAS,EAAE,QAAQ;QACnBC,YAAY,EAAE,EAAE;QAChBC,YAAY,EAAE,EAAE;QAChBC,SAAS,EAAE;YACTd,KAAK,EAAE,CAAC;YACRe,KAAK,EAAE,SAAS;SACjB;KACF,AAAC;IAEFjB,QAAQ,CAAC,uCAAuC,EAAE,IAAM;QACtDkB,EAAE,CAAC,eAAe,EAAE,IAAM;YACxBtB,MAAM,eACJ,KAACE,mBAAmB;gBAACe,SAAS,EAAC,QAAQ;gBAACM,WAAW,EAAEP,kBAAkB;0BACrE,cAAA,KAACb,SAAS;oBACRG,KAAK,EAAED,iBAAiB,CAACC,KAAK;oBAC9BC,MAAM,EAAEF,iBAAiB,CAACE,MAAM;oBAChCiB,IAAI,EAAEb,YAAY;oBAClBH,IAAI,EAAEA,IAAI;kBACV;cACkB,CACvB,CAAC;YACFiB,MAAM,CAACxB,MAAM,CAACyB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/StatChart/StatChart.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { ChartsThemeProvider } from '../context/ChartsThemeProvider';\nimport { UnitOptions } from '../model';\nimport { testChartsTheme } from '../test';\nimport { StatChart, StatChartData } from './StatChart';\n\ndescribe('StatChart', () => {\n  const contentDimensions = {\n    width: 200,\n    height: 200,\n  };\n\n  const unit: UnitOptions = {\n    kind: 'Decimal',\n    decimal_places: 2,\n  };\n\n  const mockStatData: StatChartData = {\n    calculatedValue: 7.72931659687181,\n    name: 'Example Stat Chart',\n    seriesData: {\n      name: '(((count(count(node_cpu_seconds_total{job=\"example\"}) by (cpu))',\n      values: [\n        [1654006170000, 7.736401673473903],\n        [1654006185000, 7.733891213538757],\n        [1654006200000, 7.731101813010433],\n        [1654006215000, 7.722454672079215],\n        [1654006230000, 7.722733612256738],\n      ],\n    },\n  };\n\n  describe('Render default options (no sparkline)', () => {\n    it('should render', () => {\n      render(\n        <ChartsThemeProvider themeName=\"perses\" chartsTheme={testChartsTheme}>\n          <StatChart\n            width={contentDimensions.width}\n            height={contentDimensions.height}\n            data={mockStatData}\n            unit={unit}\n          />\n        </ChartsThemeProvider>\n      );\n      expect(screen.getByText('7.73')).toBeInTheDocument();\n    });\n  });\n});\n"],"names":["React","render","screen","ChartsThemeProvider","testChartsTheme","StatChart","describe","contentDimensions","width","height","unit","kind","decimal_places","mockStatData","calculatedValue","name","seriesData","values","it","themeName","chartsTheme","data","expect","getByText","toBeInTheDocument"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,SAASC,mBAAmB,QAAQ,gCAAgC,CAAC;AAErE,SAASC,eAAe,QAAQ,SAAS,CAAC;AAC1C,SAASC,SAAS,QAAuB,aAAa,CAAC;AAEvDC,QAAQ,CAAC,WAAW,EAAE,IAAM;IAC1B,MAAMC,iBAAiB,GAAG;QACxBC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE,GAAG;KACZ,AAAC;IAEF,MAAMC,IAAI,GAAgB;QACxBC,IAAI,EAAE,SAAS;QACfC,cAAc,EAAE,CAAC;KAClB,AAAC;IAEF,MAAMC,YAAY,GAAkB;QAClCC,eAAe,EAAE,gBAAgB;QACjCC,IAAI,EAAE,oBAAoB;QAC1BC,UAAU,EAAE;YACVD,IAAI,EAAE,iEAAiE;YACvEE,MAAM,EAAE;gBACN;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;aACnC;SACF;KACF,AAAC;IAEFX,QAAQ,CAAC,uCAAuC,EAAE,IAAM;QACtDY,EAAE,CAAC,eAAe,EAAE,IAAM;YACxBjB,MAAM,eACJ,KAACE,mBAAmB;gBAACgB,SAAS,EAAC,QAAQ;gBAACC,WAAW,EAAEhB,eAAe;0BAClE,cAAA,KAACC,SAAS;oBACRG,KAAK,EAAED,iBAAiB,CAACC,KAAK;oBAC9BC,MAAM,EAAEF,iBAAiB,CAACE,MAAM;oBAChCY,IAAI,EAAER,YAAY;oBAClBH,IAAI,EAAEA,IAAI;kBACV;cACkB,CACvB,CAAC;YACFY,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/TimeRangeSelector/TimeRangeSelector.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem, Select } from '@mui/material';
-import EventIcon from '@mui/icons-material/Event';
+import Calendar from 'mdi-material-ui/Calendar';
 import { isRelativeTimeRange } from '@perses-dev/core';
 import { formatAbsoluteRange } from './utils';
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
@@ -22,7 +22,7 @@ export function TimeRangeSelector(props) {
     return /*#__PURE__*/ _jsxs(Select, {
         value: formattedValue,
         onChange: onSelectChange,
-        IconComponent: EventIcon,
+        IconComponent: Calendar,
         sx: {
             '.MuiSelect-icon': {
                 marginTop: '1px'

package/dist/TimeRangeSelector/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport EventIcon from '@mui/icons-material/Event';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick } = props;\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={EventIcon}\n      sx={{\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n        },\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","EventIcon","isRelativeTimeRange","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","formattedValue","pastDuration","onChange","IconComponent","sx","marginTop","map","item","idx","display","onClick"],"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,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,SAAS,MAAM,2BAA2B,CAAC;AAClD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAc/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAE,GAAGJ,KAAK,AAAC;IACpE,MAAMK,cAAc,GAAG,CAACT,mBAAmB,CAACK,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,CAAC,GAC5CG,KAAK,CAACK,YAAY,AAAC;IACvB,qBACE,MAACZ,MAAM;QACLO,KAAK,EAAEI,cAAc;QACrBE,QAAQ,EAAEJ,cAAc;QACxBK,aAAa,EAAEb,SAAS;QACxBc,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;aACjB;SACF;;YAEAR,WAAW,CAACS,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAACpB,QAAQ;oBAAWQ,KAAK,EAAEW,IAAI,CAACX,KAAK,CAACK,YAAY;8BAC/CM,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDjB,mBAAmB,CAACK,KAAK,CAAC,iBACzB,KAACR,QAAQ;gBACPsB,OAAO,EAAE,IAAM;oBACbX,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACX,QAAQ;gBACPQ,KAAK,EAAEI,cAAc;gBACrBU,OAAO,EAAE,IAAM;oBACbX,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAC,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}
+{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick } = props;\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      sx={{\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n        },\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","formattedValue","pastDuration","onChange","IconComponent","sx","marginTop","map","item","idx","display","onClick"],"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,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAc/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAE,GAAGJ,KAAK,AAAC;IACpE,MAAMK,cAAc,GAAG,CAACT,mBAAmB,CAACK,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,CAAC,GAC5CG,KAAK,CAACK,YAAY,AAAC;IACvB,qBACE,MAACZ,MAAM;QACLO,KAAK,EAAEI,cAAc;QACrBE,QAAQ,EAAEJ,cAAc;QACxBK,aAAa,EAAEb,QAAQ;QACvBc,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;aACjB;SACF;;YAEAR,WAAW,CAACS,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAACpB,QAAQ;oBAAWQ,KAAK,EAAEW,IAAI,CAACX,KAAK,CAACK,YAAY;8BAC/CM,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDjB,mBAAmB,CAACK,KAAK,CAAC,iBACzB,KAACR,QAAQ;gBACPsB,OAAO,EAAE,IAAM;oBACbX,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACX,QAAQ;gBACPQ,KAAK,EAAEI,cAAc;gBACrBU,OAAO,EAAE,IAAM;oBACbX,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAC,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}

package/dist/cjs/Legend/CompactLegend.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CompactLegend", {
+    enumerable: true,
+    get: ()=>CompactLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _listLegendItem = require("./ListLegendItem");
+function CompactLegend({ items  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+        direction: "row",
+        spacing: 2,
+        sx: {
+            flexWrap: 'wrap'
+        },
+        children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+                item: item
+            }, item.id))
+    });
+}

package/dist/cjs/Legend/Legend.js

@@ -0,0 +1,50 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Legend", {
+    enumerable: true,
+    get: ()=>Legend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _listLegend = require("./ListLegend");
+const _compactLegend = require("./CompactLegend");
+function Legend({ width , height , options , data  }) {
+    if (options.position === 'right') {
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+                width: width,
+                height: height,
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                overflowY: 'scroll'
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
+                items: data
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            height: 50,
+            overflowY: 'scroll'
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+            items: data
+        })
+    });
+}

package/dist/cjs/Legend/LegendColorBadge.js

@@ -0,0 +1,42 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LegendColorBadge", {
+    enumerable: true,
+    get: ()=>LegendColorBadge
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _utils = require("../utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const LegendColorBadge = /*#__PURE__*/ _react.default.memo(function LegendColorBadge({ color , sx , ...others }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        ...others,
+        sx: (0, _utils.combineSx)({
+            height: 4,
+            width: 16,
+            margin: (theme)=>theme.spacing(0.5)
+        }, sx),
+        style: {
+            backgroundColor: color
+        }
+    });
+});

package/dist/cjs/Legend/ListLegend.js

@@ -0,0 +1,30 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ListLegend", {
+    enumerable: true,
+    get: ()=>ListLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _listLegendItem = require("./ListLegendItem");
+function ListLegend({ items  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.List, {
+        children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+                item: item
+            }, item.id))
+    });
+}

package/dist/cjs/Legend/ListLegendItem.js

@@ -0,0 +1,56 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ListLegendItem", {
+    enumerable: true,
+    get: ()=>ListLegendItem
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _legendColorBadge = require("./LegendColorBadge");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem({ item  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.ListItem, {
+        dense: true,
+        sx: {
+            display: 'flex',
+            maxWidth: 270,
+            padding: 0,
+            cursor: 'pointer'
+        },
+        onClick: item.onClick,
+        selected: item.isSelected,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legendColorBadge.LegendColorBadge, {
+                    color: item.color
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ListItemText, {
+                primary: item.label
+            })
+        ]
+    }, item.id);
+});

package/dist/cjs/Legend/index.js

@@ -0,0 +1,28 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./Legend"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/StatChart/StatChart.test.js

@@ -18,6 +18,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _react1 = require("@testing-library/react");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _test = require("../test");
 const _statChart = require("./StatChart");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -62,20 +63,11 @@ describe('StatChart', ()=>{
             ]
         }
     };
-    const exampleChartsTheme = {
-        themeName: 'perses',
-        echartsTheme: {},
-        noDataOption: {},
-        sparkline: {
-            width: 1,
-            color: '#000000'
-        }
-    };
     describe('Render default options (no sparkline)', ()=>{
         it('should render', ()=>{
             (0, _react1.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartsThemeProvider.ChartsThemeProvider, {
                 themeName: "perses",
-                chartsTheme: exampleChartsTheme,
+                chartsTheme: _test.testChartsTheme,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_statChart.StatChart, {
                     width: contentDimensions.width,
                     height: contentDimensions.height,

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -20,7 +20,7 @@ Object.defineProperty(exports, "TimeRangeSelector", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _event = /*#__PURE__*/ _interopRequireDefault(require("@mui/icons-material/Event"));
+const _calendar = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Calendar"));
 const _core = require("@perses-dev/core");
 const _utils = require("./utils");
 function _interopRequireDefault(obj) {
@@ -35,7 +35,7 @@ function TimeRangeSelector(props) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
         value: formattedValue,
         onChange: onSelectChange,
-        IconComponent: _event.default,
+        IconComponent: _calendar.default,
         sx: {
             '.MuiSelect-icon': {
                 marginTop: '1px'

package/dist/cjs/index.js

@@ -19,6 +19,7 @@ _exportStar(require("./EChart"), exports);
 _exportStar(require("./ErrorAlert"), exports);
 _exportStar(require("./ErrorBoundary"), exports);
 _exportStar(require("./InfoTooltip"), exports);
+_exportStar(require("./Legend"), exports);
 _exportStar(require("./LineChart"), exports);
 _exportStar(require("./GaugeChart"), exports);
 _exportStar(require("./StatChart"), exports);
@@ -26,6 +27,7 @@ _exportStar(require("./TimeRangeSelector"), exports);
 _exportStar(require("./context/ChartsThemeProvider"), exports);
 _exportStar(require("./utils"), exports);
 _exportStar(require("./model"), exports);
+_exportStar(require("./test"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/test/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./render"), exports);
+_exportStar(require("./theme"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/test/theme.js

@@ -0,0 +1,29 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "testChartsTheme", {
+    enumerable: true,
+    get: ()=>testChartsTheme
+});
+const testChartsTheme = {
+    themeName: 'perses',
+    echartsTheme: {},
+    noDataOption: {},
+    sparkline: {
+        width: 1,
+        color: '#000000'
+    }
+};

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
 export * from './InfoTooltip';
+export * from './Legend';
 export * from './LineChart';
 export * from './GaugeChart';
 export * from './StatChart';
@@ -10,4 +11,5 @@ export * from './TimeRangeSelector';
 export * from './context/ChartsThemeProvider';
 export * from './utils';
 export * from './model';
+export * from './test';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/dist/index.js

@@ -15,6 +15,7 @@ export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
 export * from './InfoTooltip';
+export * from './Legend';
 export * from './LineChart';
 export * from './GaugeChart';
 export * from './StatChart';
@@ -22,5 +23,6 @@ export * from './TimeRangeSelector';
 export * from './context/ChartsThemeProvider';
 export * from './utils';
 export * from './model';
+export * from './test';
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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 './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './InfoTooltip';\nexport * from './LineChart';\nexport * from './GaugeChart';\nexport * from './StatChart';\nexport * from './TimeRangeSelector';\nexport * from './context/ChartsThemeProvider';\nexport * from './utils';\nexport * from './model';\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,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../src/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 './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './InfoTooltip';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './GaugeChart';\nexport * from './StatChart';\nexport * from './TimeRangeSelector';\nexport * from './context/ChartsThemeProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test';\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,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/dist/model/graph.d.ts

@@ -1,3 +1,4 @@
+import { MouseEventHandler } from 'react';
 import { LineSeriesOption } from 'echarts/charts';
 export declare const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
 export declare type UnixTimeMs = number;
@@ -13,7 +14,21 @@ export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
 export declare type EChartsDataFormat = {
     timeSeries: EChartsTimeSeries[];
     xAxis: number[];
+    legendItems?: LegendItem[];
     xAxisMax?: number | string;
     rangeMs?: number;
 };
+/**
+ * Supported legend options
+ */
+export interface LegendOptions {
+    position?: 'bottom' | 'right';
+}
+export interface LegendItem {
+    id: string;
+    label: string;
+    isSelected: boolean;
+    color: string;
+    onClick: MouseEventHandler<HTMLLIElement>;
+}
 //# sourceMappingURL=graph.d.ts.map

package/dist/model/graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC3C"}

package/dist/model/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/graph.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 { LineSeriesOption } from 'echarts/charts';\n\nexport const PROGRESSIVE_MODE_SERIES_LIMIT = 500;\n\nexport type UnixTimeMs = number;\n\nexport type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];\n\nexport interface GraphSeries {\n  name: string;\n  values: Iterable<GraphSeriesValueTuple>;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  // TODO: support dataset and both category / time xAxis types\n  data: Iterable<GraphSeriesValueTuple> | EChartsValues[];\n}\n\nexport type EChartsDataFormat = {\n  timeSeries: EChartsTimeSeries[];\n  xAxis: number[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n"],"names":["PROGRESSIVE_MODE_SERIES_LIMIT"],"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;AAIjC,OAAO,MAAMA,6BAA6B,GAAG,GAAG,CAAC"}
+{"version":3,"sources":["../../src/model/graph.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 { MouseEventHandler } from 'react';\nimport { LineSeriesOption } from 'echarts/charts';\n\nexport const PROGRESSIVE_MODE_SERIES_LIMIT = 500;\n\nexport type UnixTimeMs = number;\n\nexport type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];\n\nexport interface GraphSeries {\n  name: string;\n  values: Iterable<GraphSeriesValueTuple>;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  // TODO: support dataset and both category / time xAxis types\n  data: Iterable<GraphSeriesValueTuple> | EChartsValues[];\n}\n\nexport type EChartsDataFormat = {\n  timeSeries: EChartsTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n/**\n * Supported legend options\n */\nexport interface LegendOptions {\n  position?: 'bottom' | 'right';\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLLIElement>;\n}\n"],"names":["PROGRESSIVE_MODE_SERIES_LIMIT"],"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;AAKjC,OAAO,MAAMA,6BAA6B,GAAG,GAAG,CAAC"}

package/dist/test/index.d.ts

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

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

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

package/dist/test/index.js

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

package/dist/test/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/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 './render';\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/test/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 './render';\nexport * from './theme';\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,SAAS,CAAC"}

package/dist/test/theme.d.ts

@@ -0,0 +1,3 @@
+import { PersesChartsTheme } from '../';
+export declare const testChartsTheme: PersesChartsTheme;
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/test/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAC;AAExC,eAAO,MAAM,eAAe,EAAE,iBAQ7B,CAAC"}

package/dist/test/theme.js

@@ -0,0 +1,23 @@
+// 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 const testChartsTheme = {
+    themeName: 'perses',
+    echartsTheme: {},
+    noDataOption: {},
+    sparkline: {
+        width: 1,
+        color: '#000000'
+    }
+};
+
+//# sourceMappingURL=theme.js.map

package/dist/test/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/test/theme.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 { PersesChartsTheme } from '../';\n\nexport const testChartsTheme: PersesChartsTheme = {\n  themeName: 'perses',\n  echartsTheme: {},\n  noDataOption: {},\n  sparkline: {\n    width: 1,\n    color: '#000000',\n  },\n};\n"],"names":["testChartsTheme","themeName","echartsTheme","noDataOption","sparkline","width","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;AAIjC,OAAO,MAAMA,eAAe,GAAsB;IAChDC,SAAS,EAAE,QAAQ;IACnBC,YAAY,EAAE,EAAE;IAChBC,YAAY,EAAE,EAAE;IAChBC,SAAS,EAAE;QACTC,KAAK,EAAE,CAAC;QACRC,KAAK,EAAE,SAAS;KACjB;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@mui/icons-material": "^5.10.6",
-    "@perses-dev/core": "^0.10.0",
+    "@perses-dev/core": "^0.11.0",
     "date-fns": "^2.28.0",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
     "mathjs": "^10.6.4",
+    "mdi-material-ui": "^7.4.0",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {