@perses-dev/components 0.11.0 → 0.13.0

package/dist/EChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../src/EChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAQ,MAAM,cAAc,CAAC;AAChE,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,aAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAEhC,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;AAEV,QAAA,MAAM,WAAW,0HAUP,CAAC;AAEX,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAGxD,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAC;IAGnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,wBAAwB,EAAE,GAAG,yBAAyB,EAAE,CAAC;CACjE;AAED,aAAK,oBAAoB,GAAG,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;AAEpE,QAAA,MAAM,WAAW,gDAAiD,CAAC;AAEnE,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAExD,aAAK,cAAc,GAAG,UAAU,CAAC;AAIjC,oBAAY,YAAY,CAAC,CAAC,IAAI;KAC3B,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;CACxD,GAAG;KACD,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,oBAAoB;CAC1D,GAAG;KACD,SAAS,IAAI,cAAc,CAAC,CAAC,EAAE,MAAM,IAAI;CAC3C,CAAC;AAEF,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,6IA0EjB,CAAC"}
+{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../src/EChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAQ,MAAM,cAAc,CAAC;AAChE,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,aAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAEhC,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;AAEV,QAAA,MAAM,WAAW,0HAUP,CAAC;AAEX,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAGxD,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAC;IAGnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,wBAAwB,EAAE,GAAG,yBAAyB,EAAE,CAAC;CACjE;AAED,aAAK,oBAAoB,GAAG,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;AAEpE,QAAA,MAAM,WAAW,gDAAiD,CAAC;AAEnE,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAExD,aAAK,cAAc,GAAG,UAAU,CAAC;AAIjC,oBAAY,YAAY,CAAC,CAAC,IAAI;KAC3B,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;CACxD,GAAG;KACD,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,oBAAoB;CAC1D,GAAG;KACD,SAAS,IAAI,cAAc,CAAC,CAAC,EAAE,MAAM,IAAI;CAC3C,CAAC;AAEF,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,6IA2EjB,CAAC"}

package/dist/EChart.js

@@ -42,6 +42,7 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
         chartElement.current = init(containerRef.current, theme, {
             renderer: renderer !== null && renderer !== void 0 ? renderer : 'canvas'
         });
+        if (chartElement.current === undefined) return;
         chartElement.current.setOption(initialOption.current, true);
         onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chartElement.current);
         if (_instance !== undefined) {
@@ -61,7 +62,7 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
     // Update chart data when option changes
     useEffect(()=>{
         if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;
-        if (chartElement.current === null) return;
+        if (!chartElement.current) return;
         chartElement.current.setOption(option, true);
         prevOption.current = option;
     }, [
@@ -70,7 +71,7 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
     // Resize chart, cleanup listener on unmount
     useLayoutEffect(()=>{
         const updateSize = debounce(()=>{
-            if (chartElement.current === null) return;
+            if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);
         window.addEventListener('resize', updateSize);
@@ -82,7 +83,7 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
     // Bind and unbind chart events passed as prop
     useEffect(()=>{
         const chart = chartElement.current;
-        if (chart === null || onEvents === undefined) return;
+        if (!chart || onEvents === undefined) return;
         bindEvents(chart, onEvents);
         return ()=>{
             if (chart === undefined) return;
@@ -96,7 +97,7 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
     ]);
     useEffect(()=>{
         const updateSize = debounce(()=>{
-            if (chartElement.current === null) return;
+            if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);
         updateSize();

package/dist/EChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/EChart.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, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from './model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = typeof mouseEvents[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = typeof batchEvents[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (chartElement.current === null) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (chartElement.current === null) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (chart === null || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return () => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  useEffect(() => {\n    const updateSize = debounce(() => {\n      if (chartElement.current === null) return;\n      chartElement.current.resize();\n    }, 200);\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","setOption","undefined","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
+{"version":3,"sources":["../src/EChart.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, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from './model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = typeof mouseEvents[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = typeof batchEvents[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return () => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  useEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -62,17 +62,14 @@ const StyledTooltip = styled(({ className , ...props })=>/*#__PURE__*/ _jsx(MuiT
         }
     }))(({ theme  })=>({
         [`& .${tooltipClasses.tooltip}`]: {
-            backgroundColor: theme.palette.secondary.main,
-            color: theme.palette.grey[900],
+            backgroundColor: theme.palette.grey[100],
+            color: theme.palette.text.primary,
             maxWidth: '300px',
             padding: theme.spacing(1),
             boxShadow: theme.shadows[1]
         },
         [`& .${tooltipClasses.arrow}`]: {
-            color: theme.palette.background.paper,
-            '&::before': {
-                backgroundColor: theme.palette.secondary.main
-            }
+            color: theme.palette.grey[100]
         }
     }));
 

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.secondary.main,\n    color: theme.palette.grey[900],\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.paper,\n    '&::before': {\n      backgroundColor: theme.palette.secondary.main,\n    },\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","secondary","main","grey","maxWidth","padding","spacing","boxShadow","shadows","background","paper"],"mappings":"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"}
+{"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.grey[100],\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.grey[100],\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","grey","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,IAAI,CAAC,GAAG,CAAC;YACxCb,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,IAAI,CAAC,GAAG,CAAC;SAC/B;KACF,CAAA,AAAC,CAAC,AAAC"}

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,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAgCtD"}

package/dist/JSONEditor.js

@@ -0,0 +1,48 @@
+// 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);
+        },
+        onBlur: ()=>{
+            try {
+                const json = JSON.parse(value !== null && value !== void 0 ? value : '{}');
+                setInvalidJSON(false);
+                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      onBlur={() => {\n        try {\n          const json = JSON.parse(value ?? '{}');\n          setInvalidJSON(false);\n          props.onChange(json);\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","onBlur","json","parse","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,MAAM,EAAE,IAAM;YACZ,IAAI;gBACF,MAAMC,IAAI,GAAGb,IAAI,CAACc,KAAK,CAAChB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAAC,AAAC;gBACvCK,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtBN,KAAK,CAACY,QAAQ,CAACI,IAAI,CAAC,CAAC;YACvB,EAAE,OAAOE,CAAC,EAAE;gBACVZ,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;MACD,CACF;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAoBzB,CAAC"}
+{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAqBzB,CAAC"}

package/dist/Legend/ListLegendItem.js

@@ -23,6 +23,7 @@ export const ListLegendItem = /*#__PURE__*/ React.memo(function ListLegendItem({
             padding: 0,
             cursor: 'pointer'
         },
+        "data-testid": `legend-item-${item.color}`,
         onClick: item.onClick,
         selected: item.isSelected,
         children: [

package/dist/Legend/ListLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegendItem.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { Box, ListItemText, ListItem } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item }: ListLegendItemProps) {\n  return (\n    <ListItem\n      dense={true}\n      sx={{\n        display: 'flex',\n        maxWidth: 270, // TODO: adjust spacing depending on number of series\n        padding: 0,\n        cursor: 'pointer',\n      }}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","LegendColorBadge","ListLegendItem","memo","item","dense","sx","display","maxWidth","padding","cursor","onClick","selected","isSelected","alignItems","color","primary","label","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AAE5D,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGL,KAAK,CAACM,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAuB,EAAE;IAC9F,qBACE,MAACJ,QAAQ;QACPK,KAAK,EAAE,IAAI;QACXC,EAAE,EAAE;YACFC,OAAO,EAAE,MAAM;YACfC,QAAQ,EAAE,GAAG;YACbC,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB;QAEDC,OAAO,EAAEP,IAAI,CAACO,OAAO;QACrBC,QAAQ,EAAER,IAAI,CAACS,UAAU;;0BAEzB,KAACf,GAAG;gBAACQ,EAAE,EAAE;oBAAEC,OAAO,EAAE,MAAM;oBAAEO,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACb,gBAAgB;oBAACc,KAAK,EAAEX,IAAI,CAACW,KAAK;kBAAI;cACnC;0BACN,KAAChB,YAAY;gBAACiB,OAAO,EAAEZ,IAAI,CAACa,KAAK;cAAiB;;OAP7Cb,IAAI,CAACc,EAAE,CAQH,CACX;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegendItem.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { Box, ListItemText, ListItem } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item }: ListLegendItemProps) {\n  return (\n    <ListItem\n      dense={true}\n      sx={{\n        display: 'flex',\n        maxWidth: 270, // TODO: adjust spacing depending on number of series\n        padding: 0,\n        cursor: 'pointer',\n      }}\n      data-testid={`legend-item-${item.color}`}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","LegendColorBadge","ListLegendItem","memo","item","dense","sx","display","maxWidth","padding","cursor","data-testid","color","onClick","selected","isSelected","alignItems","primary","label","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AAE5D,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGL,KAAK,CAACM,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAuB,EAAE;IAC9F,qBACE,MAACJ,QAAQ;QACPK,KAAK,EAAE,IAAI;QACXC,EAAE,EAAE;YACFC,OAAO,EAAE,MAAM;YACfC,QAAQ,EAAE,GAAG;YACbC,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB;QACDC,aAAW,EAAE,CAAC,YAAY,EAAEP,IAAI,CAACQ,KAAK,CAAC,CAAC;QAExCC,OAAO,EAAET,IAAI,CAACS,OAAO;QACrBC,QAAQ,EAAEV,IAAI,CAACW,UAAU;;0BAEzB,KAACjB,GAAG;gBAACQ,EAAE,EAAE;oBAAEC,OAAO,EAAE,MAAM;oBAAES,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACf,gBAAgB;oBAACW,KAAK,EAAER,IAAI,CAACQ,KAAK;kBAAI;cACnC;0BACN,KAACb,YAAY;gBAACkB,OAAO,EAAEb,IAAI,CAACc,KAAK;cAAiB;;OAP7Cd,IAAI,CAACe,EAAE,CAQH,CACX;AACJ,CAAC,CAAC,CAAC"}

package/dist/cjs/EChart.js

@@ -89,6 +89,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
         chartElement.current = (0, _core.init)(containerRef.current, theme, {
             renderer: renderer !== null && renderer !== void 0 ? renderer : 'canvas'
         });
+        if (chartElement.current === undefined) return;
         chartElement.current.setOption(initialOption.current, true);
         onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chartElement.current);
         if (_instance !== undefined) {
@@ -108,7 +109,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     // Update chart data when option changes
     (0, _react.useEffect)(()=>{
         if (prevOption.current === undefined || (0, _lodashEs.isEqual)(prevOption.current, option)) return;
-        if (chartElement.current === null) return;
+        if (!chartElement.current) return;
         chartElement.current.setOption(option, true);
         prevOption.current = option;
     }, [
@@ -117,7 +118,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     // Resize chart, cleanup listener on unmount
     (0, _react.useLayoutEffect)(()=>{
         const updateSize = (0, _lodashEs.debounce)(()=>{
-            if (chartElement.current === null) return;
+            if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);
         window.addEventListener('resize', updateSize);
@@ -129,7 +130,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     // Bind and unbind chart events passed as prop
     (0, _react.useEffect)(()=>{
         const chart = chartElement.current;
-        if (chart === null || onEvents === undefined) return;
+        if (!chart || onEvents === undefined) return;
         bindEvents(chart, onEvents);
         return ()=>{
             if (chart === undefined) return;
@@ -143,7 +144,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     ]);
     (0, _react.useEffect)(()=>{
         const updateSize = (0, _lodashEs.debounce)(()=>{
-            if (chartElement.current === null) return;
+            if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);
         updateSize();

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -81,16 +81,13 @@ const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PUR
         }
     }))(({ theme  })=>({
         [`& .${_material.tooltipClasses.tooltip}`]: {
-            backgroundColor: theme.palette.secondary.main,
-            color: theme.palette.grey[900],
+            backgroundColor: theme.palette.grey[100],
+            color: theme.palette.text.primary,
             maxWidth: '300px',
             padding: theme.spacing(1),
             boxShadow: theme.shadows[1]
         },
         [`& .${_material.tooltipClasses.arrow}`]: {
-            color: theme.palette.background.paper,
-            '&::before': {
-                backgroundColor: theme.palette.secondary.main
-            }
+            color: theme.palette.grey[100]
         }
     }));

package/dist/cjs/JSONEditor.js

@@ -0,0 +1,54 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "JSONEditor", {
+    enumerable: true,
+    get: ()=>JSONEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function JSONEditor(props) {
+    const [value, setValue] = (0, _react.useState)(()=>JSON.stringify(props.value, null, 2));
+    const [invalidJSON, setInvalidJSON] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>{
+        setValue(JSON.stringify(props.value, null, 2));
+        setInvalidJSON(false);
+    }, [
+        props.value
+    ]);
+    // TODO: replace with CodeMirror editor
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+        label: "JSON",
+        error: invalidJSON,
+        helperText: invalidJSON ? 'Invalid JSON' : '',
+        multiline: true,
+        fullWidth: true,
+        value: value,
+        onChange: (event)=>{
+            setValue(event.target.value);
+        },
+        onBlur: ()=>{
+            try {
+                const json = JSON.parse(value !== null && value !== void 0 ? value : '{}');
+                setInvalidJSON(false);
+                props.onChange(json);
+            } catch (e) {
+                setInvalidJSON(true);
+            }
+        }
+    });
+}

package/dist/cjs/Legend/ListLegendItem.js

@@ -36,6 +36,7 @@ const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem
             padding: 0,
             cursor: 'pointer'
         },
+        "data-testid": `legend-item-${item.color}`,
         onClick: item.onClick,
         selected: item.isSelected,
         children: [

package/dist/cjs/index.js

@@ -19,6 +19,7 @@ _exportStar(require("./EChart"), exports);
 _exportStar(require("./ErrorAlert"), exports);
 _exportStar(require("./ErrorBoundary"), exports);
 _exportStar(require("./InfoTooltip"), exports);
+_exportStar(require("./JSONEditor"), exports);
 _exportStar(require("./Legend"), exports);
 _exportStar(require("./LineChart"), exports);
 _exportStar(require("./GaugeChart"), exports);

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
 export * from './InfoTooltip';
+export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
 export * from './GaugeChart';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -15,6 +15,7 @@ export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
 export * from './InfoTooltip';
+export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
 export * from './GaugeChart';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './InfoTooltip';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './GaugeChart';\nexport * from './StatChart';\nexport * from './TimeRangeSelector';\nexport * from './context/ChartsThemeProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './GaugeChart';\nexport * from './StatChart';\nexport * from './TimeRangeSelector';\nexport * from './context/ChartsThemeProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "^0.11.0",
+    "@perses-dev/core": "^0.13.0",
     "date-fns": "^2.28.0",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",