@perses-dev/components 0.0.0-snapshot-time-range-height-80d08fc → 0.0.0-snapshot-test-theming-76fd1cc

package/dist/GaugeChart/GaugeChart.d.ts

@@ -1,15 +1,24 @@
 /// <reference types="react" />
 import { GaugeSeriesOption } from 'echarts/charts';
 import { UnitOptions } from '../model/units';
-export declare type GaugeChartData = number | null | undefined;
+export declare type GaugeChartValue = number | null | undefined;
+export declare type GaugeSeries = {
+    value: GaugeChartValue;
+    label: string;
+};
 interface GaugeChartProps {
     width: number;
     height: number;
-    data: GaugeChartData;
+    data: GaugeSeries;
     unit: UnitOptions;
     axisLine: GaugeSeriesOption['axisLine'];
     max?: number;
 }
 export declare function GaugeChart(props: GaugeChartProps): JSX.Element;
+/**
+ * Responsive font size depending on number of characters, clamp used
+ * to ensure size stays within given range
+ */
+export declare function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number): string;
 export {};
 //# sourceMappingURL=GaugeChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK1D,oBAAY,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAEvD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA+HhD"}
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU1D,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkJhD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAWrG"}

package/dist/GaugeChart/GaugeChart.js

@@ -11,7 +11,7 @@
 // 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 { useDeepMemo } from '@perses-dev/core';
 import { use } from 'echarts/core';
 import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
 import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
@@ -26,12 +26,19 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
+const PROGRESS_WIDTH = 16;
+// adjusts when to show pointer icon
+const GAUGE_SMALL_BREAKPOINT = 170;
 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;
+    // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
+    const option = useDeepMemo(()=>{
+        var ref;
+        if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;
+        // adjusts fontSize depending on number of characters
+        const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);
+        var ref1;
         return {
             title: {
                 show: false
@@ -54,7 +61,7 @@ export function GaugeChart(props) {
                     silent: true,
                     progress: {
                         show: true,
-                        width: 22,
+                        width: PROGRESS_WIDTH,
                         itemStyle: {
                             color: 'auto'
                         }
@@ -70,7 +77,7 @@ export function GaugeChart(props) {
                                     '#e1e5e9'
                                 ]
                             ],
-                            width: 22
+                            width: PROGRESS_WIDTH
                         }
                     },
                     axisTick: {
@@ -78,7 +85,7 @@ export function GaugeChart(props) {
                         distance: 0
                     },
                     splitLine: {
-                        show: true
+                        show: false
                     },
                     axisLabel: {
                         show: false,
@@ -97,7 +104,7 @@ export function GaugeChart(props) {
                     },
                     data: [
                         {
-                            value: calculatedValue
+                            value: data.value
                         }
                     ]
                 },
@@ -113,7 +120,15 @@ export function GaugeChart(props) {
                     min: 0,
                     max,
                     pointer: {
-                        show: false,
+                        show: true,
+                        // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade
+                        icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',
+                        length: 10,
+                        width: 5,
+                        offsetCenter: [
+                            0,
+                            '-49%'
+                        ],
                         itemStyle: {
                             color: 'auto'
                         }
@@ -137,6 +152,7 @@ export function GaugeChart(props) {
                             '-9%'
                         ],
                         color: 'inherit',
+                        fontSize: valueSizeClamp,
                         formatter: (value)=>{
                             return formatValue(value, {
                                 kind: unit.kind,
@@ -146,7 +162,21 @@ export function GaugeChart(props) {
                     },
                     data: [
                         {
-                            value: calculatedValue
+                            value: data.value,
+                            name: data.label,
+                            // TODO: new UX for series names, create separate React component or reuse ListLegendItem
+                            // https://echarts.apache.org/en/option.html#series-gauge.data.title
+                            title: {
+                                show: true,
+                                color: (ref1 = (ref = chartsTheme.echartsTheme.textStyle) === null || ref === void 0 ? void 0 : ref.color) !== null && ref1 !== void 0 ? ref1 : 'inherit',
+                                offsetCenter: [
+                                    0,
+                                    '55%'
+                                ],
+                                overflow: 'truncate',
+                                fontSize: 12,
+                                width: width * 0.8
+                            }
                         }
                     ]
                 }
@@ -154,6 +184,8 @@ export function GaugeChart(props) {
         };
     }, [
         data,
+        width,
+        height,
         chartsTheme,
         unit,
         axisLine,
@@ -168,5 +200,21 @@ export function GaugeChart(props) {
         theme: chartsTheme.echartsTheme
     });
 }
+/**
+ * Responsive font size depending on number of characters, clamp used
+ * to ensure size stays within given range
+ */ export function getResponsiveValueSize(value, unit, width, height) {
+    const MIN_SIZE = 3;
+    const MAX_SIZE = 24;
+    const SIZE_MULTIPLIER = 0.7;
+    const formattedValue = formatValue(value, {
+        kind: unit.kind,
+        decimal_places: 0
+    });
+    var _length;
+    const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
+    const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
+    return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
+}
 
 //# sourceMappingURL=GaugeChart.js.map

package/dist/GaugeChart/GaugeChart.js.map

@@ -1 +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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"}
+{"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 { useDeepMemo } from '@perses-dev/core';\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\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\ninterface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\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  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\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: PROGRESS_WIDTH,\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: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\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: data.value,\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: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\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', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter: (value: number) => {\n              return formatValue(value, {\n                kind: unit.kind,\n                decimal_places: 0,\n              });\n            },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, 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\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = formatValue(value, {\n    kind: unit.kind,\n    decimal_places: 0,\n  });\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","kind","decimal_places","name","label","echartsTheme","textStyle","overflow","sx","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}

package/dist/InfoTooltip/InfoTooltip.d.ts

@@ -11,7 +11,9 @@ interface InfoTooltipProps {
     id?: string;
     title?: string;
     placement?: TooltipPlacement;
+    enterDelay?: number;
+    enterNextDelay?: number;
 }
-export declare const InfoTooltip: ({ id, title, description, placement, children }: InfoTooltipProps) => JSX.Element;
+export declare const InfoTooltip: ({ id, title, description, placement, children, enterDelay, enterNextDelay, }: InfoTooltipProps) => JSX.Element;
 export {};
 //# sourceMappingURL=InfoTooltip.d.ts.map

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

@@ -1 +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"}
+{"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;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,gBAalB,CAAC"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -20,15 +20,17 @@ export var TooltipPlacement;
     TooltipPlacement["Right"] = 'right';
     TooltipPlacement["Bottom"] = 'bottom';
 })(TooltipPlacement || (TooltipPlacement = {}));
-export const InfoTooltip = ({ id , title , description , placement , children  })=>{
+export const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
     return /*#__PURE__*/ _jsx(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement,
+        placement: placement !== null && placement !== void 0 ? placement : TooltipPlacement.Top,
         title: /*#__PURE__*/ _jsx(TooltipContent, {
             title: title,
             description: description
         }),
+        enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
+        enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
         children: /*#__PURE__*/ _jsx("div", {
             children: children
         })

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +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"}
+{"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  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? TooltipPlacement.Top}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\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","enterDelay","enterNextDelay","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":"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"}

package/dist/LegendOptionsEditor/LegendOptionsEditor.d.ts

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

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

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

package/dist/LegendOptionsEditor/LegendOptionsEditor.js

@@ -0,0 +1,82 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Autocomplete, Switch, TextField } from '@mui/material';
+import { DEFAULT_LEGEND } from '../model';
+import { OptionsEditorControl } from '../OptionsEditorLayout';
+const LEGEND_POSITIONS = [
+    'bottom',
+    'right'
+];
+const LEGEND_POSITIONS_CONFIG = {
+    bottom: {
+        label: 'Bottom'
+    },
+    right: {
+        label: 'Right'
+    }
+};
+const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+export function LegendOptionsEditor({ value , onChange  }) {
+    const handleLegendShowChange = (_, checked)=>{
+        // legend is hidden when legend obj is undefined
+        const legendValue = checked === true ? {
+            position: DEFAULT_LEGEND.position
+        } : undefined;
+        onChange(legendValue);
+    };
+    const handleLegendPositionChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: newValue.id
+        });
+    };
+    var ref;
+    const legendConfig = LEGEND_POSITIONS_CONFIG[(ref = value === null || value === void 0 ? void 0 : value.position) !== null && ref !== void 0 ? ref : DEFAULT_LEGEND.position];
+    var ref1;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Show",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: value !== undefined,
+                    onChange: handleLegendShowChange
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Position",
+                control: /*#__PURE__*/ _jsx(Autocomplete, {
+                    value: {
+                        ...legendConfig,
+                        id: (ref1 = value === null || value === void 0 ? void 0 : value.position) !== null && ref1 !== void 0 ? ref1 : DEFAULT_LEGEND.position
+                    },
+                    options: POSITION_OPTIONS,
+                    isOptionEqualToValue: (option, value)=>option.id === value.id,
+                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
+                            ...params
+                        }),
+                    onChange: handleLegendPositionChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=LegendOptionsEditor.js.map

package/dist/LegendOptionsEditor/LegendOptionsEditor.js.map

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

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

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

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

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

package/dist/LegendOptionsEditor/LegendOptionsEditor.test.js

@@ -0,0 +1,41 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LegendOptionsEditor } from './LegendOptionsEditor';
+describe('LegendOptionsEditor', ()=>{
+    const renderLegendOptionsEditor = (value, onChange = jest.fn())=>{
+        render(/*#__PURE__*/ _jsx("div", {
+            children: /*#__PURE__*/ _jsx(LegendOptionsEditor, {
+                value: value,
+                onChange: onChange
+            })
+        }));
+    };
+    const getLegendShowSwitch = ()=>{
+        return screen.getByRole('checkbox', {
+            name: 'Show'
+        });
+    };
+    it('can change legend visibility by clicking', ()=>{
+        const onChange = jest.fn();
+        renderLegendOptionsEditor(undefined, onChange);
+        userEvent.click(getLegendShowSwitch());
+        expect(onChange).toHaveBeenCalledWith({
+            position: 'bottom'
+        });
+    });
+});
+
+//# sourceMappingURL=LegendOptionsEditor.test.js.map

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

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

package/dist/LegendOptionsEditor/index.d.ts

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

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

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

package/dist/LegendOptionsEditor/index.js

@@ -0,0 +1,15 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './LegendOptionsEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/LegendOptionsEditor/index.js.map

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

package/dist/LineChart/LineChart.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import type { GridComponentOption, LegendComponentOption, VisualMapComponentOption, YAXisComponentOption } from 'echarts';
+import type { GridComponentOption, LegendComponentOption, YAXisComponentOption } from 'echarts';
 import { EChartsDataFormat } from '../model/graph';
 import { UnitOptions } from '../model/units';
 import { ZoomEventData } from './utils';
@@ -10,10 +10,9 @@ interface LineChartProps {
     unit?: UnitOptions;
     grid?: GridComponentOption;
     legend?: LegendComponentOption;
-    visualMap?: VisualMapComponentOption[];
     onDataZoom?: (e: ZoomEventData) => void;
     onDoubleClick?: (e: MouseEvent) => void;
 }
-export declare function LineChart({ height, data, yAxis, unit, grid, legend, visualMap, onDataZoom, onDoubleClick, }: LineChartProps): JSX.Element;
+export declare function LineChart({ height, data, yAxis, unit, grid, legend, onDataZoom, onDoubleClick }: LineChartProps): JSX.Element;
 export {};
 //# sourceMappingURL=LineChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAkBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,GACd,EAAE,cAAc,eAmJhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,cAAc,eAgJ/G"}