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

package/dist/GaugeChart/GaugeChart.js

@@ -0,0 +1,172 @@
+// 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 { useMemo } from 'react';
+import { use } from 'echarts/core';
+import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
+import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { formatValue } from '../model/units';
+import { EChart } from '../EChart';
+use([
+    EChartsGaugeChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+export function GaugeChart(props) {
+    const { width , height , data , unit , axisLine , max  } = props;
+    const chartsTheme = useChartsTheme();
+    const option = useMemo(()=>{
+        if (data === null || data === undefined) return chartsTheme.noDataOption;
+        const calculatedValue = data;
+        return {
+            title: {
+                show: false
+            },
+            tooltip: {
+                show: false
+            },
+            series: [
+                {
+                    type: 'gauge',
+                    center: [
+                        '50%',
+                        '65%'
+                    ],
+                    radius: '86%',
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max,
+                    silent: true,
+                    progress: {
+                        show: true,
+                        width: 22,
+                        itemStyle: {
+                            color: 'auto'
+                        }
+                    },
+                    pointer: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: [
+                                [
+                                    1,
+                                    '#e1e5e9'
+                                ]
+                            ],
+                            width: 22
+                        }
+                    },
+                    axisTick: {
+                        show: false,
+                        distance: 0
+                    },
+                    splitLine: {
+                        show: true
+                    },
+                    axisLabel: {
+                        show: false,
+                        distance: -18,
+                        color: '#999',
+                        fontSize: 12
+                    },
+                    anchor: {
+                        show: false
+                    },
+                    title: {
+                        show: false
+                    },
+                    detail: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: calculatedValue
+                        }
+                    ]
+                },
+                {
+                    type: 'gauge',
+                    center: [
+                        '50%',
+                        '65%'
+                    ],
+                    radius: '100%',
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max,
+                    pointer: {
+                        show: false,
+                        itemStyle: {
+                            color: 'auto'
+                        }
+                    },
+                    axisLine,
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: false
+                    },
+                    detail: {
+                        show: true,
+                        width: '60%',
+                        borderRadius: 8,
+                        offsetCenter: [
+                            0,
+                            '-9%'
+                        ],
+                        color: 'inherit',
+                        formatter: (value)=>{
+                            return formatValue(value, {
+                                kind: unit.kind,
+                                decimal_places: 0
+                            });
+                        }
+                    },
+                    data: [
+                        {
+                            value: calculatedValue
+                        }
+                    ]
+                }
+            ]
+        };
+    }, [
+        data,
+        chartsTheme,
+        unit,
+        axisLine,
+        max
+    ]);
+    return /*#__PURE__*/ _jsx(EChart, {
+        sx: {
+            width: width,
+            height: height
+        },
+        option: option,
+        theme: chartsTheme.echartsTheme
+    });
+}
+
+//# sourceMappingURL=GaugeChart.js.map

package/dist/GaugeChart/GaugeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GaugeChart/GaugeChart.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 { useMemo } from 'react';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nexport type GaugeChartData = number | null | undefined;\n\ninterface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeChartData;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data === null || data === undefined) return chartsTheme.noDataOption;\n\n    const calculatedValue = data;\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: 22,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: 22,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: true,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: calculatedValue,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: false,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit',\n            formatter: (value: number) => {\n              return formatValue(value, {\n                kind: unit.kind,\n                decimal_places: 0,\n              });\n            },\n          },\n          data: [\n            {\n              value: calculatedValue,\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n"],"names":["useMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","props","width","height","data","unit","axisLine","max","chartsTheme","option","undefined","noDataOption","calculatedValue","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","value","borderRadius","offsetCenter","formatter","kind","decimal_places","sx","theme","echartsTheme"],"mappings":"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"}

package/dist/GaugeChart/index.d.ts

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

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

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

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

package/dist/GaugeChart/index.js.map

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

package/dist/InfoTooltip/InfoTooltip.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare enum TooltipPlacement {
+    Top = "top",
+    Left = "left",
+    Right = "right",
+    Bottom = "bottom"
+}
+interface InfoTooltipProps {
+    description: string;
+    children: React.ReactNode;
+    id?: string;
+    title?: string;
+    placement?: TooltipPlacement;
+}
+export declare const InfoTooltip: ({ id, title, description, placement, children }: InfoTooltipProps) => JSX.Element;
+export {};
+//# sourceMappingURL=InfoTooltip.d.ts.map

package/dist/InfoTooltip/InfoTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,oDAAqD,gBAAgB,gBAW5F,CAAC"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -0,0 +1,76 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from '@mui/material';
+export var TooltipPlacement;
+(function(TooltipPlacement) {
+    TooltipPlacement["Top"] = 'top';
+    TooltipPlacement["Left"] = 'left';
+    TooltipPlacement["Right"] = 'right';
+    TooltipPlacement["Bottom"] = 'bottom';
+})(TooltipPlacement || (TooltipPlacement = {}));
+export const InfoTooltip = ({ id , title , description , placement , children  })=>{
+    return /*#__PURE__*/ _jsx(StyledTooltip, {
+        arrow: true,
+        id: id,
+        placement: placement,
+        title: /*#__PURE__*/ _jsx(TooltipContent, {
+            title: title,
+            description: description
+        }),
+        children: /*#__PURE__*/ _jsx("div", {
+            children: children
+        })
+    });
+};
+const TooltipContent = ({ title , description  })=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            title && /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                sx: (theme)=>({
+                        color: theme.palette.text.primary,
+                        fontWeight: theme.typography.fontWeightMedium
+                    }),
+                children: title
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                sx: (theme)=>({
+                        color: theme.palette.text.primary
+                    }),
+                children: description
+            })
+        ]
+    });
+};
+const StyledTooltip = styled(({ className , ...props })=>/*#__PURE__*/ _jsx(MuiTooltip, {
+        ...props,
+        classes: {
+            popper: className
+        }
+    }))(({ theme  })=>({
+        [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: theme.palette.background.tooltip,
+            color: theme.palette.text.primary,
+            maxWidth: '300px',
+            padding: theme.spacing(1),
+            boxShadow: theme.shadows[1]
+        },
+        [`& .${tooltipClasses.arrow}`]: {
+            color: theme.palette.background.tooltip
+        }
+    }));
+
+//# sourceMappingURL=InfoTooltip.js.map

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport enum TooltipPlacement {\n  Top = 'top',\n  Left = 'left',\n  Right = 'right',\n  Bottom = 'bottom',\n}\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n}\n\nexport const InfoTooltip = ({ id, title, description, placement, children }: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement}\n      title={<TooltipContent title={title} description={description} />}\n    >\n      <div>{children}</div>\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","TooltipPlacement","Top","Left","Right","Bottom","InfoTooltip","id","title","description","placement","children","StyledTooltip","arrow","TooltipContent","div","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"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,SACEC,MAAM,EAENC,OAAO,IAAIC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,eAAe,CAAC;WAEhB,gBAKN;UALWC,gBAAgB;IAAhBA,gBAAgB,CAC1BC,KAAG,IAAG,KAAK;IADDD,gBAAgB,CAE1BE,MAAI,IAAG,MAAM;IAFHF,gBAAgB,CAG1BG,OAAK,IAAG,OAAO;IAHLH,gBAAgB,CAI1BI,QAAM,IAAG,QAAQ;GAJPJ,gBAAgB,KAAhBA,gBAAgB;AAe5B,OAAO,MAAMK,WAAW,GAAG,CAAC,EAAEC,EAAE,CAAA,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAEC,QAAQ,CAAA,EAAoB,GAAK;IAChG,qBACE,KAACC,aAAa;QACZC,KAAK;QACLN,EAAE,EAAEA,EAAE;QACNG,SAAS,EAAEA,SAAS;QACpBF,KAAK,gBAAE,KAACM,cAAc;YAACN,KAAK,EAAEA,KAAK;YAAEC,WAAW,EAAEA,WAAW;UAAI;kBAEjE,cAAA,KAACM,KAAG;sBAAEJ,QAAQ;UAAO;MACP,CAChB;AACJ,CAAC,CAAC;AAEF,MAAMG,cAAc,GAAG,CAAC,EAAEN,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAmD,GAAK;IAClG,qBACE;;YACGD,KAAK,kBACJ,KAACR,UAAU;gBACTgB,OAAO,EAAC,OAAO;gBACfC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,UAAU,EAAEL,KAAK,CAACM,UAAU,CAACC,gBAAgB;qBAC9C,CAAA,AAAC;0BAEDjB,KAAK;cACK,AACd;0BACD,KAACR,UAAU;gBACTgB,OAAO,EAAC,SAAS;gBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;qBAClC,CAAA,AAAC;0BAEDb,WAAW;cACD;;MACZ,CACH;AACJ,CAAC,AAAC;AAEF,MAAMG,aAAa,GAAGhB,MAAM,CAAC,CAAC,EAAE8B,SAAS,CAAA,EAAE,GAAGC,KAAK,EAAmB,iBACpE,KAAC7B,UAAU;QAAE,GAAG6B,KAAK;QAAEC,OAAO,EAAE;YAAEC,MAAM,EAAEH,SAAS;SAAE;MAAI,AAC1D,CAAC,CAAC,CAAC,EAAER,KAAK,CAAA,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEnB,cAAc,CAAC+B,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCC,eAAe,EAAEb,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;YACjDX,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCW,QAAQ,EAAE,OAAO;YACjBC,OAAO,EAAEhB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC;YACzBC,SAAS,EAAElB,KAAK,CAACmB,OAAO,CAAC,CAAC,CAAC;SAC5B;QACD,CAAC,CAAC,GAAG,EAAEtC,cAAc,CAACc,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9BM,KAAK,EAAED,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;SACxC;KACF,CAAA,AAAC,CAAC,AAAC"}

package/dist/InfoTooltip/InfoTooltip.test.d.ts

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

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

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

package/dist/InfoTooltip/InfoTooltip.test.js

@@ -0,0 +1,36 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/dom';
+import { InfoTooltip } from './InfoTooltip';
+describe('InfoTooltip', ()=>{
+    const title = 'Tooltip Title';
+    const description = 'this is a tooltip';
+    it('should render title and description', async ()=>{
+        render(/*#__PURE__*/ _jsx(InfoTooltip, {
+            title: title,
+            description: description,
+            children: /*#__PURE__*/ _jsx("div", {
+                children: "tooltipAnchor"
+            })
+        }));
+        const tooltipAnchor = screen.getByText('tooltipAnchor');
+        userEvent.hover(tooltipAnchor);
+        await screen.findByText(title);
+        screen.findByText(description);
+    });
+});
+
+//# sourceMappingURL=InfoTooltip.test.js.map

package/dist/InfoTooltip/InfoTooltip.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/dom';\nimport { InfoTooltip } from './InfoTooltip';\n\ndescribe('InfoTooltip', () => {\n  const title = 'Tooltip Title';\n  const description = 'this is a tooltip';\n  it('should render title and description', async () => {\n    render(\n      <InfoTooltip title={title} description={description}>\n        <div>tooltipAnchor</div>\n      </InfoTooltip>\n    );\n    const tooltipAnchor = screen.getByText('tooltipAnchor');\n    userEvent.hover(tooltipAnchor);\n    await screen.findByText(title);\n    screen.findByText(description);\n  });\n});\n"],"names":["render","userEvent","screen","InfoTooltip","describe","title","description","it","div","tooltipAnchor","getByText","hover","findByText"],"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,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,MAAM,QAAQ,sBAAsB,CAAC;AAC9C,SAASC,WAAW,QAAQ,eAAe,CAAC;AAE5CC,QAAQ,CAAC,aAAa,EAAE,IAAM;IAC5B,MAAMC,KAAK,GAAG,eAAe,AAAC;IAC9B,MAAMC,WAAW,GAAG,mBAAmB,AAAC;IACxCC,EAAE,CAAC,qCAAqC,EAAE,UAAY;QACpDP,MAAM,eACJ,KAACG,WAAW;YAACE,KAAK,EAAEA,KAAK;YAAEC,WAAW,EAAEA,WAAW;sBACjD,cAAA,KAACE,KAAG;0BAAC,eAAa;cAAM;UACZ,CACf,CAAC;QACF,MAAMC,aAAa,GAAGP,MAAM,CAACQ,SAAS,CAAC,eAAe,CAAC,AAAC;QACxDT,SAAS,CAACU,KAAK,CAACF,aAAa,CAAC,CAAC;QAC/B,MAAMP,MAAM,CAACU,UAAU,CAACP,KAAK,CAAC,CAAC;QAC/BH,MAAM,CAACU,UAAU,CAACN,WAAW,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/InfoTooltip/index.d.ts

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

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

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

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

package/dist/InfoTooltip/index.js.map

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

package/dist/JSONEditor.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface JSONEditorProps<Spec> {
+    value: Spec;
+    onChange?: (next: Spec) => void;
+}
+export declare function JSONEditor<T>(props: JSONEditorProps<T>): JSX.Element;
+export {};
+//# sourceMappingURL=JSONEditor.d.ts.map

package/dist/JSONEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":";AAgBA,UAAU,eAAe,CAAC,IAAI;IAC5B,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAmCtD"}

package/dist/JSONEditor.js

@@ -0,0 +1,51 @@
+// 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 { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
+export function JSONEditor(props) {
+    const [value, setValue] = useState(()=>JSON.stringify(props.value, null, 2));
+    const [invalidJSON, setInvalidJSON] = useState(false);
+    useEffect(()=>{
+        setValue(JSON.stringify(props.value, null, 2));
+        setInvalidJSON(false);
+    }, [
+        props.value
+    ]);
+    // TODO: replace with CodeMirror editor
+    return /*#__PURE__*/ _jsx(TextField, {
+        label: "JSON",
+        error: invalidJSON,
+        helperText: invalidJSON ? 'Invalid JSON' : '',
+        multiline: true,
+        fullWidth: true,
+        value: value,
+        onChange: (event)=>{
+            setValue(event.target.value);
+        },
+        maxRows: 20,
+        onBlur: ()=>{
+            try {
+                const json = JSON.parse(value !== null && value !== void 0 ? value : '{}');
+                setInvalidJSON(false);
+                if (props.onChange !== undefined) {
+                    props.onChange(json);
+                }
+            } catch (e) {
+                setInvalidJSON(true);
+            }
+        }
+    });
+}
+
+//# sourceMappingURL=JSONEditor.js.map

package/dist/JSONEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/JSONEditor.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 { useEffect, useState } from 'react';\nimport { TextField } from '@mui/material';\n\ninterface JSONEditorProps<Spec> {\n  value: Spec;\n  onChange?: (next: Spec) => void;\n}\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>) {\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [invalidJSON, setInvalidJSON] = useState(false);\n\n  useEffect(() => {\n    setValue(JSON.stringify(props.value, null, 2));\n    setInvalidJSON(false);\n  }, [props.value]);\n\n  // TODO: replace with CodeMirror editor\n  return (\n    <TextField\n      label=\"JSON\"\n      error={invalidJSON}\n      helperText={invalidJSON ? 'Invalid JSON' : ''}\n      multiline\n      fullWidth\n      value={value}\n      onChange={(event) => {\n        setValue(event.target.value);\n      }}\n      maxRows={20}\n      onBlur={() => {\n        try {\n          const json = JSON.parse(value ?? '{}');\n          setInvalidJSON(false);\n          if (props.onChange !== undefined) {\n            props.onChange(json);\n          }\n        } catch (e) {\n          setInvalidJSON(true);\n        }\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useState","TextField","JSONEditor","props","value","setValue","JSON","stringify","invalidJSON","setInvalidJSON","label","error","helperText","multiline","fullWidth","onChange","event","target","maxRows","onBlur","json","parse","undefined","e"],"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,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,SAAS,QAAQ,eAAe,CAAC;AAO1C,OAAO,SAASC,UAAU,CAAIC,KAAyB,EAAE;IACvD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAAC,IAAMM,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,AAAC;IAC/E,MAAM,CAACI,WAAW,EAAEC,cAAc,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC,AAAC;IAEtDD,SAAS,CAAC,IAAM;QACdM,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/CK,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE;QAACN,KAAK,CAACC,KAAK;KAAC,CAAC,CAAC;IAElB,uCAAuC;IACvC,qBACE,KAACH,SAAS;QACRS,KAAK,EAAC,MAAM;QACZC,KAAK,EAAEH,WAAW;QAClBI,UAAU,EAAEJ,WAAW,GAAG,cAAc,GAAG,EAAE;QAC7CK,SAAS;QACTC,SAAS;QACTV,KAAK,EAAEA,KAAK;QACZW,QAAQ,EAAE,CAACC,KAAK,GAAK;YACnBX,QAAQ,CAACW,KAAK,CAACC,MAAM,CAACb,KAAK,CAAC,CAAC;QAC/B,CAAC;QACDc,OAAO,EAAE,EAAE;QACXC,MAAM,EAAE,IAAM;YACZ,IAAI;gBACF,MAAMC,IAAI,GAAGd,IAAI,CAACe,KAAK,CAACjB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAAC,AAAC;gBACvCK,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,IAAIN,KAAK,CAACY,QAAQ,KAAKO,SAAS,EAAE;oBAChCnB,KAAK,CAACY,QAAQ,CAACK,IAAI,CAAC,CAAC;gBACvB,CAAC;YACH,EAAE,OAAOG,CAAC,EAAE;gBACVd,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;MACD,CACF;AACJ,CAAC"}

package/dist/Legend/CompactLegend.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { LegendItem } from '../model';
+interface CompactLegendProps {
+    height: number;
+    items: LegendItem[];
+}
+/**
+ * CompactLegend is default and used when legend items need to show side by side
+ * which corresponds to when legend.position is `bottom`
+ */
+export declare function CompactLegend({ height, 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,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,kBAAkB,eAgBlE"}

package/dist/Legend/CompactLegend.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 } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { ListLegendItem } from './ListLegendItem';
+/**
+ * CompactLegend is default and used when legend items need to show side by side
+ * which corresponds to when legend.position is `bottom`
+ */ export function CompactLegend({ height , items  }) {
+    return /*#__PURE__*/ _jsx(Box, {
+        component: "ul",
+        sx: {
+            width: '100%',
+            height,
+            padding: [
+                0,
+                1,
+                0,
+                0
+            ],
+            overflowY: 'scroll',
+            margin: 0
+        },
+        children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
+                item: item,
+                sx: {
+                    width: 'auto',
+                    float: 'left',
+                    paddingRight: 1.5
+                }
+            }, 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 { Box } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom`\n */\nexport function CompactLegend({ height, items }: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","CompactLegend","height","items","component","sx","width","padding","overflowY","margin","map","item","float","paddingRight","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,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAOlD;;;CAGC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAsB,EAAE;IACnE,qBACE,KAACJ,GAAG;QAACK,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEJ,MAAM;YAAEK,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,iBACd,KAACX,cAAc;gBAEbW,IAAI,EAAEA,IAAI;gBACVN,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbM,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eANIF,IAAI,CAACG,EAAE,CAOZ,AACH,CAAC;MACE,CACN;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,eAmBnE"}

package/dist/Legend/Legend.js

@@ -0,0 +1,39 @@
+// 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: '100%',
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                overflowY: 'scroll'
+            },
+            children: /*#__PURE__*/ _jsx(ListLegend, {
+                items: data
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(CompactLegend, {
+        items: data,
+        height: height
+    });
+}
+
+//# 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: '100%',\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          overflowY: 'scroll',\n        }}\n      >\n        <ListLegend items={data} />\n      </Box>\n    );\n  }\n\n  return <CompactLegend items={data} height={height} />;\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,EAAE,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;IAED,qBAAO,KAACL,aAAa;QAACW,KAAK,EAAEN,IAAI;QAAEF,MAAM,EAAEA,MAAM;MAAI,CAAC;AACxD,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