@carto/ps-react-ui 4.3.10 → 4.4.1
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/types/hooks/use-widget-ref.d.ts +5 -2
- package/dist/types/widgets/actions/brush-toggle/brush-toggle.d.ts +21 -0
- package/dist/types/widgets/actions/brush-toggle/style.d.ts +13 -0
- package/dist/types/widgets/actions/brush-toggle/types.d.ts +33 -0
- package/dist/types/widgets/actions/index.d.ts +2 -0
- package/dist/types/widgets/echart/types.d.ts +2 -1
- package/dist/types/widgets/echart/utils.d.ts +13 -7
- package/dist/use-widget-ref-wtFLDFCD.js +25 -0
- package/dist/use-widget-ref-wtFLDFCD.js.map +1 -0
- package/dist/{utils-idmvq0Oa.js → utils-BOhInag6.js} +95 -70
- package/dist/utils-BOhInag6.js.map +1 -0
- package/dist/widgets/actions.js +763 -661
- package/dist/widgets/actions.js.map +1 -1
- package/dist/widgets/bar.js +1 -1
- package/dist/widgets/echart.js +85 -82
- package/dist/widgets/echart.js.map +1 -1
- package/dist/widgets/formula.js +4 -2
- package/dist/widgets/formula.js.map +1 -1
- package/dist/widgets/histogram.js +1 -1
- package/dist/widgets/pie.js +1 -1
- package/dist/widgets/scatterplot.js +1 -1
- package/dist/widgets/spread.js +4 -2
- package/dist/widgets/spread.js.map +1 -1
- package/dist/widgets/table.js +4 -2
- package/dist/widgets/table.js.map +1 -1
- package/dist/widgets/timeseries.js +1 -1
- package/dist/widgets.js +1 -1
- package/package.json +1 -1
- package/src/hooks/use-widget-ref.ts +4 -3
- package/src/widgets/actions/brush-toggle/brush-toggle.tsx +220 -0
- package/src/widgets/actions/brush-toggle/style.ts +14 -0
- package/src/widgets/actions/brush-toggle/types.ts +37 -0
- package/src/widgets/actions/index.ts +9 -0
- package/src/widgets/actions/lock-selection/lock-selection.tsx +0 -9
- package/src/widgets/actions/stack-toggle/stack-toggle.test.tsx +4 -4
- package/src/widgets/actions/stack-toggle/stack-toggle.tsx +2 -13
- package/src/widgets/actions/zoom-toggle/zoom-toggle.tsx +2 -12
- package/src/widgets/echart/echart-ui.tsx +5 -2
- package/src/widgets/echart/echart.tsx +1 -1
- package/src/widgets/echart/types.ts +2 -1
- package/src/widgets/echart/utils.ts +53 -21
- package/src/widgets/formula/formula-ui.tsx +1 -1
- package/src/widgets/spread/spread-ui.tsx +1 -1
- package/src/widgets/table/table-ui.tsx +1 -1
- package/dist/use-widget-ref-P-2i0MJG.js +0 -19
- package/dist/use-widget-ref-P-2i0MJG.js.map +0 -1
- package/dist/utils-idmvq0Oa.js.map +0 -1
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { IconButtonProps } from '@mui/material'
|
|
2
|
+
import type { ReactNode } from 'react'
|
|
3
|
+
import type { BaseWidgetState } from '../../stores/types'
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Represents a single item selected by the brush
|
|
7
|
+
*/
|
|
8
|
+
export type BrushSelectedItems = (string | number)[]
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* State stored in widget store for brush functionality
|
|
12
|
+
*/
|
|
13
|
+
export interface BrushConfig {
|
|
14
|
+
brush?: boolean
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export type BrushState<T = unknown> = BaseWidgetState<T & BrushConfig>
|
|
18
|
+
|
|
19
|
+
export interface BrushToggleProps {
|
|
20
|
+
/** Widget ID to update brush state in the widget store */
|
|
21
|
+
id: string
|
|
22
|
+
/** Callback fired when items are selected via brush */
|
|
23
|
+
onBrushSelected?: (items: BrushSelectedItems) => void
|
|
24
|
+
/** Custom labels for the action */
|
|
25
|
+
labels?: {
|
|
26
|
+
/** Tooltip when brush is disabled (button will enable brush) */
|
|
27
|
+
enable?: string
|
|
28
|
+
/** Tooltip when brush is enabled (button will disable brush) */
|
|
29
|
+
disable?: string
|
|
30
|
+
/** Accessibility label */
|
|
31
|
+
ariaLabel?: string
|
|
32
|
+
}
|
|
33
|
+
/** Props passed to the IconButton component */
|
|
34
|
+
IconButtonProps?: IconButtonProps
|
|
35
|
+
/** Custom icon to display for brush toggle */
|
|
36
|
+
Icon?: ReactNode
|
|
37
|
+
}
|
|
@@ -52,3 +52,12 @@ export type {
|
|
|
52
52
|
LockSelectionProps,
|
|
53
53
|
LockSelectionState,
|
|
54
54
|
} from './lock-selection/types'
|
|
55
|
+
|
|
56
|
+
/* Brush Toggle Widget */
|
|
57
|
+
export { BrushToggle, BRUSH_TOGGLE_TOOL_ID } from './brush-toggle/brush-toggle'
|
|
58
|
+
export type {
|
|
59
|
+
BrushToggleProps,
|
|
60
|
+
BrushState,
|
|
61
|
+
BrushConfig,
|
|
62
|
+
BrushSelectedItems,
|
|
63
|
+
} from './brush-toggle/types'
|
|
@@ -37,9 +37,6 @@ export function LockSelection({
|
|
|
37
37
|
const setWidget = useWidgetStore((state) => state.setWidget)
|
|
38
38
|
const registerTool = useWidgetStore((state) => state.registerTool)
|
|
39
39
|
const unregisterTool = useWidgetStore((state) => state.unregisterTool)
|
|
40
|
-
const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
|
|
41
|
-
const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
|
|
42
|
-
|
|
43
40
|
const storeIsLocked = useWidgetStore(
|
|
44
41
|
useShallow((state) => state.getWidget<LockSelectionState>(id)?.isLocked),
|
|
45
42
|
)
|
|
@@ -68,12 +65,6 @@ export function LockSelection({
|
|
|
68
65
|
return () => unregisterTool(id, LOCK_SELECTION_TOOL_ID)
|
|
69
66
|
}, [id, order, registerTool, unregisterTool, isLocked, lockedItems])
|
|
70
67
|
|
|
71
|
-
// Update enabled flag and config when they change
|
|
72
|
-
useEffect(() => {
|
|
73
|
-
setToolEnabled(id, LOCK_SELECTION_TOOL_ID, isLocked)
|
|
74
|
-
updateToolConfig(id, LOCK_SELECTION_TOOL_ID, { lockedItems })
|
|
75
|
-
}, [id, isLocked, lockedItems, setToolEnabled, updateToolConfig])
|
|
76
|
-
|
|
77
68
|
const handleToggle = useCallback(() => {
|
|
78
69
|
if (isLocked) {
|
|
79
70
|
// Unlock: clear locked items and disable tool
|
|
@@ -49,7 +49,7 @@ describe('StackToggle', () => {
|
|
|
49
49
|
const tool = widget?.registeredTools?.find(
|
|
50
50
|
(t) => t.id === STACK_TOGGLE_TOOL_ID,
|
|
51
51
|
)
|
|
52
|
-
expect(tool?.
|
|
52
|
+
expect(tool?.enabled).toBe(true)
|
|
53
53
|
})
|
|
54
54
|
|
|
55
55
|
test('toggles back to unstacked mode', () => {
|
|
@@ -67,7 +67,7 @@ describe('StackToggle', () => {
|
|
|
67
67
|
const tool = widget?.registeredTools?.find(
|
|
68
68
|
(t) => t.id === STACK_TOGGLE_TOOL_ID,
|
|
69
69
|
)
|
|
70
|
-
expect(tool?.
|
|
70
|
+
expect(tool?.enabled).toBe(false)
|
|
71
71
|
})
|
|
72
72
|
|
|
73
73
|
test('has active state when in stacked mode', () => {
|
|
@@ -112,7 +112,7 @@ describe('StackToggle', () => {
|
|
|
112
112
|
const tool = widget?.registeredTools?.find(
|
|
113
113
|
(t) => t.id === STACK_TOGGLE_TOOL_ID,
|
|
114
114
|
)
|
|
115
|
-
expect(tool?.
|
|
115
|
+
expect(tool?.enabled).toBe(false)
|
|
116
116
|
})
|
|
117
117
|
|
|
118
118
|
test('initializes tool config with stacked values when defaultIsStacked is true', () => {
|
|
@@ -122,7 +122,7 @@ describe('StackToggle', () => {
|
|
|
122
122
|
const tool = widget?.registeredTools?.find(
|
|
123
123
|
(t) => t.id === STACK_TOGGLE_TOOL_ID,
|
|
124
124
|
)
|
|
125
|
-
expect(tool?.
|
|
125
|
+
expect(tool?.enabled).toBe(true)
|
|
126
126
|
})
|
|
127
127
|
|
|
128
128
|
test('applies stack to EChart series via config pipeline when toggling to stacked', async () => {
|
|
@@ -37,9 +37,6 @@ export function StackToggle({
|
|
|
37
37
|
const setWidget = useWidgetStore((state) => state.setWidget)
|
|
38
38
|
const registerTool = useWidgetStore((state) => state.registerTool)
|
|
39
39
|
const unregisterTool = useWidgetStore((state) => state.unregisterTool)
|
|
40
|
-
const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
|
|
41
|
-
const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
|
|
42
|
-
|
|
43
40
|
const storeIsStacked = useWidgetStore(
|
|
44
41
|
useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
|
|
45
42
|
)
|
|
@@ -70,12 +67,11 @@ export function StackToggle({
|
|
|
70
67
|
type: 'config',
|
|
71
68
|
order: 10,
|
|
72
69
|
enabled: isStacked && hasMultiSeries,
|
|
73
|
-
fn: (currentConfig
|
|
70
|
+
fn: (currentConfig) => {
|
|
74
71
|
const config = currentConfig as Record<string, unknown>
|
|
75
72
|
const option = config.option as EchartOptionsProps | undefined
|
|
76
73
|
if (!option) return currentConfig
|
|
77
74
|
|
|
78
|
-
const stacked = (toolConfig?.stacked as boolean) ?? false
|
|
79
75
|
const series = Array.isArray(option.series)
|
|
80
76
|
? option.series
|
|
81
77
|
: [option.series]
|
|
@@ -85,22 +81,15 @@ export function StackToggle({
|
|
|
85
81
|
typeof existingStack === 'string'
|
|
86
82
|
? existingStack
|
|
87
83
|
: DEFAULT_STACK_GROUP
|
|
88
|
-
return { ...s, ...getEChartStackConfig(
|
|
84
|
+
return { ...s, ...getEChartStackConfig(stackGroup) }
|
|
89
85
|
})
|
|
90
86
|
|
|
91
87
|
return { ...config, option: { ...option, series: updatedSeries } }
|
|
92
88
|
},
|
|
93
|
-
config: { stacked: isStacked },
|
|
94
89
|
})
|
|
95
90
|
return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
|
|
96
91
|
}, [id, registerTool, unregisterTool, isStacked, hasMultiSeries])
|
|
97
92
|
|
|
98
|
-
// Sync tool enabled/config when state changes
|
|
99
|
-
useEffect(() => {
|
|
100
|
-
setToolEnabled(id, STACK_TOGGLE_TOOL_ID, isStacked && hasMultiSeries)
|
|
101
|
-
updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: isStacked })
|
|
102
|
-
}, [id, isStacked, hasMultiSeries, setToolEnabled, updateToolConfig])
|
|
103
|
-
|
|
104
93
|
// Initialize store with default value only if not already configured
|
|
105
94
|
useEffect(() => {
|
|
106
95
|
if (storeIsStacked !== undefined) return
|
|
@@ -81,7 +81,6 @@ export function ZoomToggle({
|
|
|
81
81
|
if (start !== undefined && end !== undefined) {
|
|
82
82
|
setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
|
|
83
83
|
updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
|
|
84
|
-
enabled: true,
|
|
85
84
|
start,
|
|
86
85
|
end,
|
|
87
86
|
})
|
|
@@ -113,7 +112,6 @@ export function ZoomToggle({
|
|
|
113
112
|
const currentOnEvents =
|
|
114
113
|
(config.onEvents as Record<string, unknown> | undefined) ?? {}
|
|
115
114
|
|
|
116
|
-
const enabled = (toolConfig?.enabled as boolean) ?? false
|
|
117
115
|
const start = (toolConfig?.start as number) ?? 0
|
|
118
116
|
const end = (toolConfig?.end as number) ?? 100
|
|
119
117
|
|
|
@@ -125,7 +123,6 @@ export function ZoomToggle({
|
|
|
125
123
|
const legendBottomOffset = hasLegend ? 28 : 0
|
|
126
124
|
|
|
127
125
|
const zoomConfig = getEChartZoomConfig(
|
|
128
|
-
enabled,
|
|
129
126
|
{ start, end },
|
|
130
127
|
{
|
|
131
128
|
inside: true,
|
|
@@ -142,15 +139,11 @@ export function ZoomToggle({
|
|
|
142
139
|
? grid.bottom
|
|
143
140
|
: parseInt(grid?.bottom ?? '24')
|
|
144
141
|
|
|
145
|
-
const gridBottom =
|
|
146
|
-
? currentGridBottom + sliderHeight + sliderGap
|
|
147
|
-
: currentGridBottom
|
|
142
|
+
const gridBottom = currentGridBottom + sliderHeight + sliderGap
|
|
148
143
|
|
|
149
144
|
const onEventsWithoutDataZoom = { ...currentOnEvents }
|
|
150
145
|
delete onEventsWithoutDataZoom.dataZoom
|
|
151
|
-
const onEvents =
|
|
152
|
-
? { ...currentOnEvents, dataZoom: handleDataZoom }
|
|
153
|
-
: onEventsWithoutDataZoom
|
|
146
|
+
const onEvents = { ...currentOnEvents, dataZoom: handleDataZoom }
|
|
154
147
|
|
|
155
148
|
return {
|
|
156
149
|
...config,
|
|
@@ -163,7 +156,6 @@ export function ZoomToggle({
|
|
|
163
156
|
}
|
|
164
157
|
},
|
|
165
158
|
config: {
|
|
166
|
-
enabled: initialEnabled,
|
|
167
159
|
start: initialStart,
|
|
168
160
|
end: initialEnd,
|
|
169
161
|
},
|
|
@@ -185,7 +177,6 @@ export function ZoomToggle({
|
|
|
185
177
|
const newZoom = !zoom
|
|
186
178
|
setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, newZoom)
|
|
187
179
|
updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
|
|
188
|
-
enabled: newZoom,
|
|
189
180
|
start: newZoom ? zoomStart : 0,
|
|
190
181
|
end: newZoom ? zoomEnd : 100,
|
|
191
182
|
})
|
|
@@ -194,7 +185,6 @@ export function ZoomToggle({
|
|
|
194
185
|
const handleReset = () => {
|
|
195
186
|
setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
|
|
196
187
|
updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
|
|
197
|
-
enabled: true,
|
|
198
188
|
start: defaultZoomStart,
|
|
199
189
|
end: defaultZoomEnd,
|
|
200
190
|
})
|
|
@@ -6,7 +6,8 @@ import { useWidgetRef } from '../../hooks'
|
|
|
6
6
|
export function EchartUI(props: EchartUIProps) {
|
|
7
7
|
const { id, ref, init, option, className, style, onEvents } = props
|
|
8
8
|
|
|
9
|
-
const chartRef =
|
|
9
|
+
const { ref: chartRef, instance: chartInstanceRef } =
|
|
10
|
+
useWidgetRef<HTMLDivElement>(id)
|
|
10
11
|
const chartInstance = useRef<echarts.ECharts>(null)
|
|
11
12
|
const resizeObserverRef = useRef<ResizeObserver | null>(null)
|
|
12
13
|
|
|
@@ -20,12 +21,14 @@ export function EchartUI(props: EchartUIProps) {
|
|
|
20
21
|
height: 304,
|
|
21
22
|
...init,
|
|
22
23
|
})
|
|
24
|
+
chartInstanceRef.current = chartInstance.current
|
|
23
25
|
// Cleanup function
|
|
24
26
|
return () => {
|
|
25
27
|
chartInstance.current?.dispose()
|
|
26
28
|
chartInstance.current = null
|
|
29
|
+
chartInstanceRef.current = null
|
|
27
30
|
}
|
|
28
|
-
}, [chartRef, init])
|
|
31
|
+
}, [chartInstanceRef, chartRef, init])
|
|
29
32
|
|
|
30
33
|
// Update chart when options change
|
|
31
34
|
useEffect(() => {
|
|
@@ -11,7 +11,7 @@ import { useMemo } from 'react'
|
|
|
11
11
|
|
|
12
12
|
export function Echart(props: EchartProps) {
|
|
13
13
|
const id = useWidgetStore(
|
|
14
|
-
(state) => state.getWidget<EchartWidgetState>(props.id)?.id,
|
|
14
|
+
useShallow((state) => state.getWidget<EchartWidgetState>(props.id)?.id),
|
|
15
15
|
)
|
|
16
16
|
|
|
17
17
|
const data = useWidgetStore(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { EChartsOption } from 'echarts'
|
|
2
2
|
import type * as echarts from 'echarts'
|
|
3
3
|
import type { BaseWidgetState } from '../stores/types'
|
|
4
|
-
import type { Ref } from 'react'
|
|
4
|
+
import type { Ref, RefObject } from 'react'
|
|
5
5
|
import { theme as CartoTheme } from '@carto/meridian-ds/theme'
|
|
6
6
|
|
|
7
7
|
export type EchartOptionsProps = EChartsOption
|
|
@@ -26,6 +26,7 @@ export type EchartWidgetState = BaseWidgetState<{
|
|
|
26
26
|
option: EchartUIProps['option']
|
|
27
27
|
onEvents?: EchartUIProps['onEvents']
|
|
28
28
|
init?: EchartUIProps['init']
|
|
29
|
+
instance?: RefObject<echarts.ECharts | null>
|
|
29
30
|
}>
|
|
30
31
|
|
|
31
32
|
export interface EchartWidgetOptionProps<D> {
|
|
@@ -4,22 +4,49 @@ import type { Theme } from '@mui/material'
|
|
|
4
4
|
import { DEFAULT_STACK_GROUP } from './const'
|
|
5
5
|
|
|
6
6
|
export function mergeEchartWidgetConfig<T extends EchartOptionsProps>(
|
|
7
|
-
|
|
7
|
+
optionA: T | undefined,
|
|
8
|
+
optionB: T | undefined,
|
|
9
|
+
customMergeFn?: (
|
|
10
|
+
key: string,
|
|
11
|
+
) => ((a: unknown, b: unknown) => unknown) | undefined,
|
|
8
12
|
): T {
|
|
9
|
-
return deepmerge(
|
|
13
|
+
return deepmerge(optionA ?? {}, optionB ?? {}, {
|
|
10
14
|
customMerge: (key) => {
|
|
15
|
+
const externalMerge = customMergeFn?.(key)
|
|
16
|
+
if (externalMerge) return externalMerge
|
|
17
|
+
|
|
11
18
|
if (key === 'color') {
|
|
12
19
|
return (_, b: T['color']) => b
|
|
13
20
|
}
|
|
21
|
+
if (key === 'axisLabel') {
|
|
22
|
+
return (
|
|
23
|
+
a: Record<string, unknown> | undefined,
|
|
24
|
+
b: Record<string, unknown> | undefined,
|
|
25
|
+
) => {
|
|
26
|
+
const merged = { ...a, ...b }
|
|
27
|
+
if (
|
|
28
|
+
typeof a?.formatter === 'function' &&
|
|
29
|
+
typeof b?.formatter === 'function'
|
|
30
|
+
) {
|
|
31
|
+
const baseFormatter = a.formatter as (value: unknown) => unknown
|
|
32
|
+
const customFormatter = b.formatter as (value: unknown) => unknown
|
|
33
|
+
merged.formatter = (value: unknown) => {
|
|
34
|
+
const baseResult = baseFormatter(value)
|
|
35
|
+
if (baseResult === '') return ''
|
|
36
|
+
return customFormatter(value)
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return merged
|
|
40
|
+
}
|
|
41
|
+
}
|
|
14
42
|
if (key === 'series') {
|
|
15
43
|
return (a: T['series'][], b: T['series'][]) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const mergedSeries = b?.map((bItem, index) => {
|
|
44
|
+
const maxLength = Math.max(a?.length ?? 0, b?.length ?? 0)
|
|
45
|
+
return Array.from({ length: maxLength }, (_, index) => {
|
|
19
46
|
const aItem = a?.[index] ?? {}
|
|
47
|
+
const bItem = b?.[index] ?? {}
|
|
20
48
|
return deepmerge(aItem, bItem as object)
|
|
21
49
|
})
|
|
22
|
-
return mergedSeries
|
|
23
50
|
}
|
|
24
51
|
}
|
|
25
52
|
},
|
|
@@ -27,7 +54,6 @@ export function mergeEchartWidgetConfig<T extends EchartOptionsProps>(
|
|
|
27
54
|
}
|
|
28
55
|
|
|
29
56
|
export function getEChartZoomConfig(
|
|
30
|
-
zoom: boolean,
|
|
31
57
|
{ start, end }: { start: number; end: number } = { start: 0, end: 100 },
|
|
32
58
|
{
|
|
33
59
|
inside = true,
|
|
@@ -46,6 +72,7 @@ export function getEChartZoomConfig(
|
|
|
46
72
|
},
|
|
47
73
|
theme?: Theme,
|
|
48
74
|
) {
|
|
75
|
+
const zoom = true
|
|
49
76
|
const sliderStyles = theme ? getEChartZoomSliderStyles(theme) : {}
|
|
50
77
|
|
|
51
78
|
return {
|
|
@@ -152,20 +179,25 @@ function getEChartZoomSliderStyles(theme: Theme) {
|
|
|
152
179
|
} as const
|
|
153
180
|
}
|
|
154
181
|
|
|
155
|
-
export function getEChartBrushConfig(
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
182
|
+
export function getEChartBrushConfig(
|
|
183
|
+
{ brushType = 'lineX', brushMode = 'single', xAxisIndex = 0 } = {} as {
|
|
184
|
+
brushType?: string
|
|
185
|
+
brushMode?: string
|
|
186
|
+
xAxisIndex?: number
|
|
187
|
+
throttleType?: string
|
|
188
|
+
throttleDelay?: number
|
|
189
|
+
},
|
|
190
|
+
) {
|
|
191
|
+
return {
|
|
192
|
+
brush: {
|
|
193
|
+
toolbox: ['lineX', 'clear'],
|
|
194
|
+
brushType,
|
|
195
|
+
brushMode,
|
|
196
|
+
xAxisIndex,
|
|
197
|
+
},
|
|
198
|
+
}
|
|
164
199
|
}
|
|
165
200
|
|
|
166
|
-
export function getEChartStackConfig(
|
|
167
|
-
stack:
|
|
168
|
-
stackGroup: string = DEFAULT_STACK_GROUP,
|
|
169
|
-
) {
|
|
170
|
-
return { stack: stack ? stackGroup : undefined }
|
|
201
|
+
export function getEChartStackConfig(stackGroup: string = DEFAULT_STACK_GROUP) {
|
|
202
|
+
return { stack: stackGroup }
|
|
171
203
|
}
|
|
@@ -58,7 +58,7 @@ export { Table }
|
|
|
58
58
|
* Integrates with widget store and provides ref registration using custom hook
|
|
59
59
|
*/
|
|
60
60
|
function TableContainer(props: TableUIProps) {
|
|
61
|
-
const ref = useWidgetRef<HTMLDivElement>(props.id)
|
|
61
|
+
const { ref } = useWidgetRef<HTMLDivElement>(props.id)
|
|
62
62
|
|
|
63
63
|
return <MuiTableContainer ref={ref}>{props.children}</MuiTableContainer>
|
|
64
64
|
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { c as u } from "react/compiler-runtime";
|
|
2
|
-
import { useRef as n, useEffect as c } from "react";
|
|
3
|
-
import { u as i } from "./widget-store-CzDt8oSK.js";
|
|
4
|
-
function a(t) {
|
|
5
|
-
const e = u(4), s = n(null), r = i(m);
|
|
6
|
-
let f, o;
|
|
7
|
-
return e[0] !== r || e[1] !== t ? (f = () => {
|
|
8
|
-
s.current && r(t, {
|
|
9
|
-
refUI: s
|
|
10
|
-
});
|
|
11
|
-
}, o = [t, r], e[0] = r, e[1] = t, e[2] = f, e[3] = o) : (f = e[2], o = e[3]), c(f, o), s;
|
|
12
|
-
}
|
|
13
|
-
function m(t) {
|
|
14
|
-
return t.setWidget;
|
|
15
|
-
}
|
|
16
|
-
export {
|
|
17
|
-
a as u
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=use-widget-ref-P-2i0MJG.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-widget-ref-P-2i0MJG.js","sources":["../src/hooks/use-widget-ref.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useWidgetStore } from '../widgets/stores/widget-store'\n\n/**\n * Custom hook for registering a DOM element ref with the widget store.\n * This allows other parts of the application to access the widget's DOM element.\n *\n * @param widgetId - The widget ID to register the ref under\n * @returns A ref object to attach to the DOM element\n *\n * @example\n * ```tsx\n * function MyWidget({ id }: { id: string }) {\n * const ref = useWidgetRef<HTMLDivElement>(id)\n *\n * return <div ref={ref}>Widget content</div>\n * }\n * ```\n */\nexport function useWidgetRef<T extends HTMLElement = HTMLElement>(\n widgetId: string,\n) {\n const ref = useRef<T | null>(null)\n const setWidget = useWidgetStore((store) => store.setWidget)\n\n useEffect(() => {\n if (ref.current) {\n setWidget(widgetId, { refUI: ref })\n }\n }, [widgetId, setWidget])\n\n return ref\n}\n"],"names":["useWidgetRef","widgetId","$","_c","ref","useRef","setWidget","useWidgetStore","_temp","t0","t1","current","refUI","useEffect","store"],"mappings":";;;AAmBO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,CAAA,GAGLC,IAAYC,EAAiB,IAAI,GACjCC,IAAkBC,EAAeC,CAA0B;AAAC,MAAAC,GAAAC;AAAA,SAAAR,EAAA,CAAA,MAAAI,KAAAJ,SAAAD,KAElDQ,IAAAA,MAAA;AACR,IAAIL,EAAGO,WACLL,EAAUL,GAAU;AAAA,MAAAW,OAASR;AAAAA,IAAAA,CAAK;AAAA,EACnC,GACAM,IAAA,CAACT,GAAUK,CAAS,GAACJ,OAAAI,GAAAJ,OAAAD,GAAAC,OAAAO,GAAAP,OAAAQ,MAAAD,IAAAP,EAAA,CAAA,GAAAQ,IAAAR,EAAA,CAAA,IAJxBW,EAAUJ,GAIPC,CAAqB,GAEjBN;AAAG;AAZL,SAAAI,EAAAM,GAAA;AAAA,SAIuCA,EAAKR;AAAU;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils-idmvq0Oa.js","sources":["../src/widgets/echart/const.ts","../src/widgets/echart/utils.ts"],"sourcesContent":["export const DEFAULT_STACK_GROUP = 'stacked'\n","import deepmerge from 'deepmerge'\nimport type { EchartOptionsProps } from './types'\nimport type { Theme } from '@mui/material'\nimport { DEFAULT_STACK_GROUP } from './const'\n\nexport function mergeEchartWidgetConfig<T extends EchartOptionsProps>(\n ...options: [T | undefined, T | undefined]\n): T {\n return deepmerge(options[0] ?? {}, options[1] ?? {}, {\n customMerge: (key) => {\n if (key === 'color') {\n return (_, b: T['color']) => b\n }\n if (key === 'series') {\n return (a: T['series'][], b: T['series'][]) => {\n if (!a.length) return a // If there is no series in a, return a as is\n\n const mergedSeries = b?.map((bItem, index) => {\n const aItem = a?.[index] ?? {}\n return deepmerge(aItem, bItem as object)\n })\n return mergedSeries\n }\n }\n },\n }) as T\n}\n\nexport function getEChartZoomConfig(\n zoom: boolean,\n { start, end }: { start: number; end: number } = { start: 0, end: 100 },\n {\n inside = true,\n xSlider = true,\n ySlider = false,\n showSliders = true,\n xAxisLabelFormatter,\n bottomOffset = 0,\n } = {} as {\n inside?: boolean\n xSlider?: boolean\n ySlider?: boolean\n showSliders?: boolean\n xAxisLabelFormatter?: (value: number) => string\n bottomOffset?: number\n },\n theme?: Theme,\n) {\n const sliderStyles = theme ? getEChartZoomSliderStyles(theme) : {}\n\n return {\n dataZoom: [\n inside && {\n throttle: 0,\n type: 'inside',\n xAxisIndex: xSlider ? [0] : [],\n yAxisIndex: ySlider ? [0] : [],\n show: zoom,\n zoomLock: !zoom,\n start,\n end,\n },\n inside &&\n ySlider && {\n throttle: 0,\n type: 'inside',\n show: zoom,\n zoomLock: !zoom,\n start,\n end,\n orientation: 'vertical',\n },\n xSlider && {\n throttle: 0,\n type: 'slider',\n xAxisIndex: [0],\n bottom: bottomOffset,\n height: parseInt(theme?.spacing?.(4) ?? '32'),\n show: zoom && showSliders,\n zoomLock: !zoom,\n start,\n end,\n labelFormatter: xAxisLabelFormatter,\n showDetail: false,\n ...sliderStyles,\n brushSelect: false,\n moveHandleSize: 8,\n handleSize: '100%',\n handleIcon:\n 'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4=',\n },\n ySlider && {\n throttle: 0,\n type: 'slider',\n left: parseInt(theme?.spacing?.(6) ?? '48'),\n width: parseInt(theme?.spacing?.(4) ?? '32'),\n yAxisIndex: [0],\n show: zoom && showSliders,\n zoomLock: !zoom,\n start,\n end,\n ...sliderStyles,\n brushSelect: false,\n moveHandleSize: 8,\n handleSize: '100%',\n handleIcon:\n 'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDM2IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iOCIgaGVpZ2h0PSIxOCIgcng9IjQiIHRyYW5zZm9ybT0icm90YXRlKC05MCAwLjUgMC41KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDEzIDYpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSgtOTAgMTcgNikiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKC05MCAyMSA2KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4=',\n },\n ].filter((d) => !!d),\n }\n}\n\nfunction getEChartZoomSliderStyles(theme: Theme) {\n return {\n fillerColor: 'rgba(53, 139, 231, 0.25)',\n borderColor: 'rgba(53, 139, 231, 0.3)',\n borderWidth: 0.5,\n backgroundColor: 'transparent',\n borderRadius: 4,\n dataBackground: {\n lineStyle: {\n opacity: 0,\n },\n areaStyle: {\n opacity: 1,\n color: theme.palette.secondary.main,\n },\n },\n selectedDataBackground: {\n lineStyle: {\n opacity: 0,\n },\n areaStyle: {\n opacity: 1,\n color: theme.palette.secondary.main,\n },\n },\n handleStyle: {\n color: theme.palette.common.white,\n borderColor: 'rgba(3, 111, 226, 0.08)',\n borderWidth: 1,\n shadowBlur: 3,\n shadowColor: 'rgba(0, 0, 0, 0.1)',\n shadowOffsetX: 0,\n shadowOffsetY: 1,\n },\n textStyle: {\n color: theme.palette.black[60],\n fontSize: parseInt(theme.typography.overlineDelicate.fontSize as string),\n fontFamily: theme.typography.overlineDelicate.fontFamily,\n },\n } as const\n}\n\nexport function getEChartBrushConfig(brush: boolean) {\n return brush\n ? {\n brush: {\n brushType: 'rect',\n brushMode: 'single',\n },\n }\n : {}\n}\n\nexport function getEChartStackConfig(\n stack: boolean,\n stackGroup: string = DEFAULT_STACK_GROUP,\n) {\n return { stack: stack ? stackGroup : undefined }\n}\n"],"names":["DEFAULT_STACK_GROUP","mergeEchartWidgetConfig","options","deepmerge","customMerge","key","_","b","a","length","map","bItem","index","aItem","getEChartZoomConfig","zoom","start","end","inside","xSlider","ySlider","showSliders","xAxisLabelFormatter","bottomOffset","theme","sliderStyles","getEChartZoomSliderStyles","dataZoom","throttle","type","xAxisIndex","yAxisIndex","show","zoomLock","orientation","bottom","height","parseInt","spacing","labelFormatter","showDetail","brushSelect","moveHandleSize","handleSize","handleIcon","left","width","filter","d","fillerColor","borderColor","borderWidth","backgroundColor","borderRadius","dataBackground","lineStyle","opacity","areaStyle","color","palette","secondary","main","selectedDataBackground","handleStyle","common","white","shadowBlur","shadowColor","shadowOffsetX","shadowOffsetY","textStyle","black","fontSize","typography","overlineDelicate","fontFamily","getEChartBrushConfig","brush","brushType","brushMode","getEChartStackConfig","stack","stackGroup","undefined"],"mappings":"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"}
|