@perses-dev/components 0.51.0 → 0.52.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EChart/EChart.d.ts.map +1 -1
- package/dist/EChart/EChart.js +2 -1
- package/dist/EChart/EChart.js.map +1 -1
- package/dist/FormatControls/FormatControls.d.ts.map +1 -1
- package/dist/FormatControls/FormatControls.js +8 -7
- package/dist/FormatControls/FormatControls.js.map +1 -1
- package/dist/cjs/EChart/EChart.js +1 -0
- package/dist/cjs/FormatControls/FormatControls.js +7 -6
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAsB,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}
|
package/dist/EChart/EChart.js
CHANGED
|
@@ -16,7 +16,7 @@ import { init, connect, use } from 'echarts/core';
|
|
|
16
16
|
import { Box } from '@mui/material';
|
|
17
17
|
import isEqual from 'lodash/isEqual';
|
|
18
18
|
import debounce from 'lodash/debounce';
|
|
19
|
-
import { LineChart as EChartsLineChart, GaugeChart as EChartsGaugeChart, PieChart as EChartsPieChart, ScatterChart as EChartsScatterChart, CustomChart as EChartsCustomChart, HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
|
|
19
|
+
import { BarChart as EChartsBarChart, LineChart as EChartsLineChart, GaugeChart as EChartsGaugeChart, PieChart as EChartsPieChart, ScatterChart as EChartsScatterChart, CustomChart as EChartsCustomChart, HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
|
|
20
20
|
import { DatasetComponent, DataZoomComponent, LegendComponent, GridComponent, TitleComponent, TooltipComponent, VisualMapComponent, ToolboxComponent, MarkPointComponent, MarkAreaComponent, MarkLineComponent } from 'echarts/components';
|
|
21
21
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
22
22
|
// Loading the ECharts extensions should happen in the respective plugins.
|
|
@@ -25,6 +25,7 @@ use([
|
|
|
25
25
|
DatasetComponent,
|
|
26
26
|
DataZoomComponent,
|
|
27
27
|
LegendComponent,
|
|
28
|
+
EChartsBarChart,
|
|
28
29
|
EChartsLineChart,
|
|
29
30
|
EChartsGaugeChart,
|
|
30
31
|
EChartsPieChart,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CSSProperties, memo, useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init, connect, use } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport isEqual from 'lodash/isEqual';\nimport debounce from 'lodash/debounce';\n\nimport {\n LineChart as EChartsLineChart,\n GaugeChart as EChartsGaugeChart,\n PieChart as EChartsPieChart,\n ScatterChart as EChartsScatterChart,\n CustomChart as EChartsCustomChart,\n HeatmapChart as EChartsHeatmapChart,\n} from 'echarts/charts';\nimport {\n DatasetComponent,\n DataZoomComponent,\n LegendComponent,\n GridComponent,\n TitleComponent,\n TooltipComponent,\n VisualMapComponent,\n ToolboxComponent,\n MarkPointComponent,\n MarkAreaComponent,\n MarkLineComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChartsTheme } from '../model';\n\n// Loading the ECharts extensions should happen in the respective plugins.\n// This is a workaround for https://github.com/perses/plugins/issues/83.\nuse([\n DatasetComponent,\n DataZoomComponent,\n LegendComponent,\n EChartsLineChart,\n EChartsGaugeChart,\n EChartsPieChart,\n EChartsScatterChart,\n EChartsCustomChart,\n EChartsHeatmapChart,\n GridComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n CanvasRenderer,\n VisualMapComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n]);\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 style?: CSSProperties;\n onEvents?: OnEventsType<T>;\n _instance?: React.MutableRefObject<ECharts | undefined>;\n syncGroup?: string;\n onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = memo(function EChart<T>({\n option,\n theme,\n renderer,\n sx,\n style,\n onEvents,\n _instance,\n syncGroup,\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 (): void => {\n if (chartElement.current === null) return;\n chartElement.current.dispose();\n chartElement.current = null;\n };\n }, [_instance, onChartInitialized, theme, renderer]);\n\n // When syncGroup is explicitly set, charts within same group share interactions such as crosshair\n useEffect(() => {\n if (!chartElement.current || !syncGroup) return;\n chartElement.current.group = syncGroup;\n connect([chartElement.current]); // more info: https://echarts.apache.org/en/api.html#echarts.connect\n }, [syncGroup, chartElement]);\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 (): void => {\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 (): void => {\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 // TODO: re-evaluate how this is triggered. It's technically working right\n // now because the sx prop is an object that gets re-created, but that also\n // means it runs unnecessarily some of the time and theoretically might\n // not run in some other cases. Maybe it should use a resize observer?\n useEffect(() => {\n // TODO: fix this debouncing. This likely isn't working as intended because\n // the debounced function is re-created every time this useEffect is called.\n const updateSize = debounce(\n () => {\n if (!chartElement.current) return;\n chartElement.current.resize();\n },\n 200,\n {\n leading: true,\n }\n );\n updateSize();\n }, [sx, style]);\n\n return <Box ref={containerRef} sx={sx} style={style}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>): void {\n if (events === undefined) return;\n\n function bindEvent(eventName: EventName, OnEventFunction: unknown): void {\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":["memo","useEffect","useLayoutEffect","useRef","init","connect","use","Box","isEqual","debounce","LineChart","EChartsLineChart","GaugeChart","EChartsGaugeChart","PieChart","EChartsPieChart","ScatterChart","EChartsScatterChart","CustomChart","EChartsCustomChart","HeatmapChart","EChartsHeatmapChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","VisualMapComponent","ToolboxComponent","MarkPointComponent","MarkAreaComponent","MarkLineComponent","CanvasRenderer","mouseEvents","batchEvents","EChart","option","theme","renderer","sx","style","onEvents","_instance","syncGroup","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","group","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","leading","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CSSProperties, memo, useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init, connect, use } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport isEqual from 'lodash/isEqual';\nimport debounce from 'lodash/debounce';\n\nimport {\n BarChart as EChartsBarChart,\n LineChart as EChartsLineChart,\n GaugeChart as EChartsGaugeChart,\n PieChart as EChartsPieChart,\n ScatterChart as EChartsScatterChart,\n CustomChart as EChartsCustomChart,\n HeatmapChart as EChartsHeatmapChart,\n} from 'echarts/charts';\nimport {\n DatasetComponent,\n DataZoomComponent,\n LegendComponent,\n GridComponent,\n TitleComponent,\n TooltipComponent,\n VisualMapComponent,\n ToolboxComponent,\n MarkPointComponent,\n MarkAreaComponent,\n MarkLineComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChartsTheme } from '../model';\n\n// Loading the ECharts extensions should happen in the respective plugins.\n// This is a workaround for https://github.com/perses/plugins/issues/83.\nuse([\n DatasetComponent,\n DataZoomComponent,\n LegendComponent,\n EChartsBarChart,\n EChartsLineChart,\n EChartsGaugeChart,\n EChartsPieChart,\n EChartsScatterChart,\n EChartsCustomChart,\n EChartsHeatmapChart,\n GridComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n CanvasRenderer,\n VisualMapComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n]);\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 style?: CSSProperties;\n onEvents?: OnEventsType<T>;\n _instance?: React.MutableRefObject<ECharts | undefined>;\n syncGroup?: string;\n onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = memo(function EChart<T>({\n option,\n theme,\n renderer,\n sx,\n style,\n onEvents,\n _instance,\n syncGroup,\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 (): void => {\n if (chartElement.current === null) return;\n chartElement.current.dispose();\n chartElement.current = null;\n };\n }, [_instance, onChartInitialized, theme, renderer]);\n\n // When syncGroup is explicitly set, charts within same group share interactions such as crosshair\n useEffect(() => {\n if (!chartElement.current || !syncGroup) return;\n chartElement.current.group = syncGroup;\n connect([chartElement.current]); // more info: https://echarts.apache.org/en/api.html#echarts.connect\n }, [syncGroup, chartElement]);\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 (): void => {\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 (): void => {\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 // TODO: re-evaluate how this is triggered. It's technically working right\n // now because the sx prop is an object that gets re-created, but that also\n // means it runs unnecessarily some of the time and theoretically might\n // not run in some other cases. Maybe it should use a resize observer?\n useEffect(() => {\n // TODO: fix this debouncing. This likely isn't working as intended because\n // the debounced function is re-created every time this useEffect is called.\n const updateSize = debounce(\n () => {\n if (!chartElement.current) return;\n chartElement.current.resize();\n },\n 200,\n {\n leading: true,\n }\n );\n updateSize();\n }, [sx, style]);\n\n return <Box ref={containerRef} sx={sx} style={style}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>): void {\n if (events === undefined) return;\n\n function bindEvent(eventName: EventName, OnEventFunction: unknown): void {\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":["memo","useEffect","useLayoutEffect","useRef","init","connect","use","Box","isEqual","debounce","BarChart","EChartsBarChart","LineChart","EChartsLineChart","GaugeChart","EChartsGaugeChart","PieChart","EChartsPieChart","ScatterChart","EChartsScatterChart","CustomChart","EChartsCustomChart","HeatmapChart","EChartsHeatmapChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","VisualMapComponent","ToolboxComponent","MarkPointComponent","MarkAreaComponent","MarkLineComponent","CanvasRenderer","mouseEvents","batchEvents","EChart","option","theme","renderer","sx","style","onEvents","_instance","syncGroup","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","group","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","leading","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAaA,OAAO,
|
|
1
|
+
{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,aAAa,EAMd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+BD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA0EvG"}
|
|
@@ -12,13 +12,14 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
14
|
import { Switch } from '@mui/material';
|
|
15
|
-
import {
|
|
15
|
+
import { UNIT_CONFIG, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core';
|
|
16
16
|
import { OptionsEditorControl } from '../OptionsEditorLayout';
|
|
17
17
|
import { SettingsAutocomplete } from '../SettingsAutocomplete';
|
|
18
18
|
const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
|
|
19
19
|
return {
|
|
20
|
+
...config,
|
|
20
21
|
id: id,
|
|
21
|
-
|
|
22
|
+
group: config.group || 'Decimal'
|
|
22
23
|
};
|
|
23
24
|
}).filter((config)=>!config.disableSelectorOption);
|
|
24
25
|
const DECIMAL_PLACES_OPTIONS = [
|
|
@@ -61,8 +62,8 @@ export function FormatControls({ value, onChange, disabled = false }) {
|
|
|
61
62
|
const hasShortValues = isUnitWithShortValues(value);
|
|
62
63
|
const handleKindChange = (_, newValue)=>{
|
|
63
64
|
onChange({
|
|
64
|
-
unit: newValue
|
|
65
|
-
});
|
|
65
|
+
unit: newValue?.id || 'decimal'
|
|
66
|
+
}); // Fallback to 'decimal' if no unit is selected
|
|
66
67
|
};
|
|
67
68
|
const handleDecimalPlacesChange = ({ decimalPlaces })=>{
|
|
68
69
|
if (hasDecimalPlaces) {
|
|
@@ -80,7 +81,7 @@ export function FormatControls({ value, onChange, disabled = false }) {
|
|
|
80
81
|
});
|
|
81
82
|
}
|
|
82
83
|
};
|
|
83
|
-
const unitConfig = UNIT_CONFIG[value
|
|
84
|
+
const unitConfig = UNIT_CONFIG[value?.unit || 'decimal'];
|
|
84
85
|
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
85
86
|
children: [
|
|
86
87
|
/*#__PURE__*/ _jsx(OptionsEditorControl, {
|
|
@@ -95,11 +96,11 @@ export function FormatControls({ value, onChange, disabled = false }) {
|
|
|
95
96
|
label: "Unit",
|
|
96
97
|
control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
|
|
97
98
|
value: {
|
|
98
|
-
id: value
|
|
99
|
+
id: value?.unit || 'decimal',
|
|
99
100
|
...unitConfig
|
|
100
101
|
},
|
|
101
102
|
options: KIND_OPTIONS,
|
|
102
|
-
groupBy: (option)=>option.group,
|
|
103
|
+
groupBy: (option)=>option.group ?? 'Decimal',
|
|
103
104
|
onChange: handleKindChange,
|
|
104
105
|
disableClearable: true,
|
|
105
106
|
disabled: disabled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { Switch, SwitchProps } from '@mui/material';\nimport {\n
|
|
1
|
+
{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { Switch, SwitchProps } from '@mui/material';\nimport {\n FormatOptions,\n UNIT_CONFIG,\n UnitConfig,\n isUnitWithDecimalPlaces,\n isUnitWithShortValues,\n shouldShortenValues,\n} from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface FormatControlsProps {\n value: FormatOptions;\n onChange: (unit: FormatOptions) => void;\n disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & {\n id: NonNullable<FormatOptions['unit']>;\n};\n\nconst KIND_OPTIONS: readonly AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n .map<AutocompleteUnitOption>(([id, config]) => {\n return {\n ...config,\n id: id as AutocompleteUnitOption['id'],\n group: config.group || 'Decimal',\n };\n })\n .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n { id: 'default', label: 'Default', decimalPlaces: undefined },\n { id: '0', label: '0', decimalPlaces: 0 },\n { id: '1', label: '1', decimalPlaces: 1 },\n { id: '2', label: '2', decimalPlaces: 2 },\n { id: '3', label: '3', decimalPlaces: 3 },\n { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n decimalPlaces?: number\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n const hasShortValues = isUnitWithShortValues(value);\n\n const handleKindChange = (_: unknown, newValue: AutocompleteUnitOption | null): void => {\n onChange({ unit: newValue?.id || 'decimal' }); // Fallback to 'decimal' if no unit is selected\n };\n\n const handleDecimalPlacesChange = ({\n decimalPlaces,\n }: {\n id: string;\n label: string;\n decimalPlaces?: number;\n }): void => {\n if (hasDecimalPlaces) {\n onChange({\n ...value,\n decimalPlaces: decimalPlaces,\n });\n }\n };\n\n const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n if (hasShortValues) {\n onChange({\n ...value,\n shortValues: checked,\n });\n }\n };\n\n const unitConfig = UNIT_CONFIG[value?.unit || 'decimal'];\n\n return (\n <>\n <OptionsEditorControl\n label=\"Short values\"\n control={\n <Switch\n checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n onChange={handleShortValuesChange}\n disabled={!hasShortValues}\n />\n }\n />\n <OptionsEditorControl\n label=\"Unit\"\n control={\n <SettingsAutocomplete<AutocompleteUnitOption, false, true>\n value={{ id: value?.unit || 'decimal', ...unitConfig }}\n options={KIND_OPTIONS}\n groupBy={(option) => option.group ?? 'Decimal'}\n onChange={handleKindChange}\n disableClearable\n disabled={disabled}\n />\n }\n />\n <OptionsEditorControl\n label=\"Decimals\"\n control={\n <SettingsAutocomplete\n value={getOptionByDecimalPlaces(value.decimalPlaces)}\n options={DECIMAL_PLACES_OPTIONS}\n getOptionLabel={(o) => o.label}\n onChange={(_, value) => handleDecimalPlacesChange(value)}\n disabled={!hasDecimalPlaces}\n disableClearable\n />\n }\n />\n </>\n );\n}\n"],"names":["Switch","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","group","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleKindChange","_","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","checked","shortValues","unitConfig","control","options","groupBy","option","disableClearable","getOptionLabel"],"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;;AACjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SAEEC,WAAW,EAEXC,uBAAuB,EACvBC,qBAAqB,EACrBC,mBAAmB,QACd,mBAAmB;AAE1B,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAY/D,MAAMC,eAAkDC,OAAOC,OAAO,CAACR,aACpES,GAAG,CAAyB,CAAC,CAACC,IAAIC,OAAO;IACxC,OAAO;QACL,GAAGA,MAAM;QACTD,IAAIA;QACJE,OAAOD,OAAOC,KAAK,IAAI;IACzB;AACF,GACCC,MAAM,CAAC,CAACF,SAAW,CAACA,OAAOG,qBAAqB;AAEnD,MAAMC,yBAAuF;IAC3F;QAAEL,IAAI;QAAWM,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAER,IAAI;QAAKM,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEP,IAAI;QAAKM,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEP,IAAI;QAAKM,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEP,IAAI;QAAKM,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEP,IAAI;QAAKM,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOF,uBAAuBK,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBzB,wBAAwBsB;IACjD,MAAMI,iBAAiBzB,sBAAsBqB;IAE7C,MAAMK,mBAAmB,CAACC,GAAYC;QACpCN,SAAS;YAAEO,MAAMD,UAAUpB,MAAM;QAAU,IAAI,+CAA+C;IAChG;IAEA,MAAMsB,4BAA4B,CAAC,EACjCf,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMgB,0BAAmD,CAACJ,GAAYK;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,MAAME,aAAapC,WAAW,CAACuB,OAAOQ,QAAQ,UAAU;IAExD,qBACE;;0BACE,KAAC3B;gBACCY,OAAM;gBACNqB,uBACE,KAACtC;oBACCmC,SAASP,iBAAiBxB,oBAAoBoB,MAAMY,WAAW,IAAI;oBACnEX,UAAUS;oBACVR,UAAU,CAACE;;;0BAIjB,KAACvB;gBACCY,OAAM;gBACNqB,uBACE,KAAChC;oBACCkB,OAAO;wBAAEb,IAAIa,OAAOQ,QAAQ;wBAAW,GAAGK,UAAU;oBAAC;oBACrDE,SAAShC;oBACTiC,SAAS,CAACC,SAAWA,OAAO5B,KAAK,IAAI;oBACrCY,UAAUI;oBACVa,gBAAgB;oBAChBhB,UAAUA;;;0BAIhB,KAACrB;gBACCY,OAAM;gBACNqB,uBACE,KAAChC;oBACCkB,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDqB,SAASvB;oBACT2B,gBAAgB,CAACrB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACK,GAAGN,QAAUS,0BAA0BT;oBAClDE,UAAU,CAACC;oBACXe,gBAAgB;;;;;AAM5B"}
|
|
@@ -27,8 +27,9 @@ const _OptionsEditorLayout = require("../OptionsEditorLayout");
|
|
|
27
27
|
const _SettingsAutocomplete = require("../SettingsAutocomplete");
|
|
28
28
|
const KIND_OPTIONS = Object.entries(_core.UNIT_CONFIG).map(([id, config])=>{
|
|
29
29
|
return {
|
|
30
|
+
...config,
|
|
30
31
|
id: id,
|
|
31
|
-
|
|
32
|
+
group: config.group || 'Decimal'
|
|
32
33
|
};
|
|
33
34
|
}).filter((config)=>!config.disableSelectorOption);
|
|
34
35
|
const DECIMAL_PLACES_OPTIONS = [
|
|
@@ -71,8 +72,8 @@ function FormatControls({ value, onChange, disabled = false }) {
|
|
|
71
72
|
const hasShortValues = (0, _core.isUnitWithShortValues)(value);
|
|
72
73
|
const handleKindChange = (_, newValue)=>{
|
|
73
74
|
onChange({
|
|
74
|
-
unit: newValue
|
|
75
|
-
});
|
|
75
|
+
unit: newValue?.id || 'decimal'
|
|
76
|
+
}); // Fallback to 'decimal' if no unit is selected
|
|
76
77
|
};
|
|
77
78
|
const handleDecimalPlacesChange = ({ decimalPlaces })=>{
|
|
78
79
|
if (hasDecimalPlaces) {
|
|
@@ -90,7 +91,7 @@ function FormatControls({ value, onChange, disabled = false }) {
|
|
|
90
91
|
});
|
|
91
92
|
}
|
|
92
93
|
};
|
|
93
|
-
const unitConfig = _core.UNIT_CONFIG[value
|
|
94
|
+
const unitConfig = _core.UNIT_CONFIG[value?.unit || 'decimal'];
|
|
94
95
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
95
96
|
children: [
|
|
96
97
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
|
|
@@ -105,11 +106,11 @@ function FormatControls({ value, onChange, disabled = false }) {
|
|
|
105
106
|
label: "Unit",
|
|
106
107
|
control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
|
|
107
108
|
value: {
|
|
108
|
-
id: value
|
|
109
|
+
id: value?.unit || 'decimal',
|
|
109
110
|
...unitConfig
|
|
110
111
|
},
|
|
111
112
|
options: KIND_OPTIONS,
|
|
112
|
-
groupBy: (option)=>option.group,
|
|
113
|
+
groupBy: (option)=>option.group ?? 'Decimal',
|
|
113
114
|
onChange: handleKindChange,
|
|
114
115
|
disableClearable: true,
|
|
115
116
|
disabled: disabled
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@perses-dev/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.52.0-beta.0",
|
|
4
4
|
"description": "Common UI components used across Perses features",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/perses/perses/blob/main/README.md",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@codemirror/lang-json": "^6.0.1",
|
|
34
34
|
"@fontsource/lato": "^4.5.10",
|
|
35
35
|
"@mui/x-date-pickers": "^7.23.1",
|
|
36
|
-
"@perses-dev/core": "0.
|
|
36
|
+
"@perses-dev/core": "0.52.0-beta.0",
|
|
37
37
|
"@tanstack/react-table": "^8.20.5",
|
|
38
38
|
"@uiw/react-codemirror": "^4.19.1",
|
|
39
39
|
"date-fns": "^4.1.0",
|