@ktnpm_devops/react-component 0.9.0 → 0.11.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/charts/ScatterChartCard/ScatterChartCard.d.ts +7 -0
- package/dist/charts/ScatterChartCard/ScatterChartCard.d.ts.map +1 -0
- package/dist/charts/ScatterChartCard/ScatterChartCard.types.d.ts +31 -0
- package/dist/charts/ScatterChartCard/ScatterChartCard.types.d.ts.map +1 -0
- package/dist/charts/ScatterChartCard/buildScatterOption.d.ts +67 -0
- package/dist/charts/ScatterChartCard/buildScatterOption.d.ts.map +1 -0
- package/dist/charts/ScatterChartCard/foldPoints.d.ts +23 -0
- package/dist/charts/ScatterChartCard/foldPoints.d.ts.map +1 -0
- package/dist/charts/ScatterChartCard/index.d.ts +3 -0
- package/dist/charts/ScatterChartCard/index.d.ts.map +1 -0
- package/dist/charts/TemporalTrendChartCard/TemporalTrendChartCard.d.ts +1 -1
- package/dist/charts/TemporalTrendChartCard/TemporalTrendChartCard.d.ts.map +1 -1
- package/dist/charts/TemporalTrendChartCard/TemporalTrendChartCard.types.d.ts +24 -1
- package/dist/charts/TemporalTrendChartCard/TemporalTrendChartCard.types.d.ts.map +1 -1
- package/dist/charts/TemporalTrendChartCard/buildChartOption.d.ts +138 -0
- package/dist/charts/TemporalTrendChartCard/buildChartOption.d.ts.map +1 -0
- package/dist/charts/TemporalTrendChartCard/index.d.ts +1 -1
- package/dist/charts/TemporalTrendChartCard/index.d.ts.map +1 -1
- package/dist/constants.d.ts +9 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/index.cjs +40 -34
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +8 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +40 -34
- package/dist/index.js.map +1 -1
- package/dist/index10.cjs +2 -2
- package/dist/index10.js +2 -2
- package/dist/index100.cjs +42 -0
- package/dist/index100.cjs.map +1 -0
- package/dist/index100.js +42 -0
- package/dist/index100.js.map +1 -0
- package/dist/index101.cjs +118 -0
- package/dist/index101.cjs.map +1 -0
- package/dist/index101.js +118 -0
- package/dist/index101.js.map +1 -0
- package/dist/index102.cjs +45 -0
- package/dist/index102.cjs.map +1 -0
- package/dist/index102.js +45 -0
- package/dist/index102.js.map +1 -0
- package/dist/index103.cjs +18 -0
- package/dist/index103.cjs.map +1 -0
- package/dist/index103.js +18 -0
- package/dist/index103.js.map +1 -0
- package/dist/index11.cjs +2 -2
- package/dist/index11.js +2 -2
- package/dist/index12.cjs +2 -2
- package/dist/index12.js +2 -2
- package/dist/index13.cjs +2 -2
- package/dist/index13.js +2 -2
- package/dist/index14.cjs +2 -2
- package/dist/index14.js +2 -2
- package/dist/index15.cjs +3 -3
- package/dist/index15.js +3 -3
- package/dist/index16.cjs +2 -2
- package/dist/index16.js +2 -2
- package/dist/index17.cjs +52 -16
- package/dist/index17.cjs.map +1 -1
- package/dist/index17.js +54 -18
- package/dist/index17.js.map +1 -1
- package/dist/index18.cjs +16 -24
- package/dist/index18.cjs.map +1 -1
- package/dist/index18.js +17 -25
- package/dist/index18.js.map +1 -1
- package/dist/index19.cjs +22 -39
- package/dist/index19.cjs.map +1 -1
- package/dist/index19.js +23 -40
- package/dist/index19.js.map +1 -1
- package/dist/index20.cjs +38 -85
- package/dist/index20.cjs.map +1 -1
- package/dist/index20.js +40 -87
- package/dist/index20.js.map +1 -1
- package/dist/index21.cjs +85 -153
- package/dist/index21.cjs.map +1 -1
- package/dist/index21.js +87 -155
- package/dist/index21.js.map +1 -1
- package/dist/index22.cjs +150 -128
- package/dist/index22.cjs.map +1 -1
- package/dist/index22.js +150 -128
- package/dist/index22.js.map +1 -1
- package/dist/index23.cjs +121 -106
- package/dist/index23.cjs.map +1 -1
- package/dist/index23.js +121 -106
- package/dist/index23.js.map +1 -1
- package/dist/index24.cjs +121 -17
- package/dist/index24.cjs.map +1 -1
- package/dist/index24.js +121 -17
- package/dist/index24.js.map +1 -1
- package/dist/index25.cjs +16 -163
- package/dist/index25.cjs.map +1 -1
- package/dist/index25.js +16 -163
- package/dist/index25.js.map +1 -1
- package/dist/index26.cjs +132 -99
- package/dist/index26.cjs.map +1 -1
- package/dist/index26.js +132 -99
- package/dist/index26.js.map +1 -1
- package/dist/index27.cjs +14 -69
- package/dist/index27.cjs.map +1 -1
- package/dist/index27.js +15 -70
- package/dist/index27.js.map +1 -1
- package/dist/index28.cjs +130 -7
- package/dist/index28.cjs.map +1 -1
- package/dist/index28.js +132 -9
- package/dist/index28.js.map +1 -1
- package/dist/index29.cjs +74 -128
- package/dist/index29.cjs.map +1 -1
- package/dist/index29.js +76 -130
- package/dist/index29.js.map +1 -1
- package/dist/index30.cjs +8 -38
- package/dist/index30.cjs.map +1 -1
- package/dist/index30.js +9 -39
- package/dist/index30.js.map +1 -1
- package/dist/index31.cjs +118 -213
- package/dist/index31.cjs.map +1 -1
- package/dist/index31.js +119 -214
- package/dist/index31.js.map +1 -1
- package/dist/index32.cjs +38 -34
- package/dist/index32.cjs.map +1 -1
- package/dist/index32.js +39 -35
- package/dist/index32.js.map +1 -1
- package/dist/index33.cjs +222 -106
- package/dist/index33.cjs.map +1 -1
- package/dist/index33.js +224 -108
- package/dist/index33.js.map +1 -1
- package/dist/index34.cjs +30 -64
- package/dist/index34.cjs.map +1 -1
- package/dist/index34.js +31 -65
- package/dist/index34.js.map +1 -1
- package/dist/index35.cjs +106 -74
- package/dist/index35.cjs.map +1 -1
- package/dist/index35.js +108 -76
- package/dist/index35.js.map +1 -1
- package/dist/index36.cjs +63 -54
- package/dist/index36.cjs.map +1 -1
- package/dist/index36.js +64 -55
- package/dist/index36.js.map +1 -1
- package/dist/index37.cjs +69 -144
- package/dist/index37.cjs.map +1 -1
- package/dist/index37.js +70 -145
- package/dist/index37.js.map +1 -1
- package/dist/index38.cjs +53 -66
- package/dist/index38.cjs.map +1 -1
- package/dist/index38.js +54 -67
- package/dist/index38.js.map +1 -1
- package/dist/index39.cjs +152 -7
- package/dist/index39.cjs.map +1 -1
- package/dist/index39.js +153 -8
- package/dist/index39.js.map +1 -1
- package/dist/index40.cjs +96 -15
- package/dist/index40.cjs.map +1 -1
- package/dist/index40.js +96 -15
- package/dist/index40.js.map +1 -1
- package/dist/index41.cjs +66 -71
- package/dist/index41.cjs.map +1 -1
- package/dist/index41.js +68 -73
- package/dist/index41.js.map +1 -1
- package/dist/index42.cjs +7 -142
- package/dist/index42.cjs.map +1 -1
- package/dist/index42.js +9 -144
- package/dist/index42.js.map +1 -1
- package/dist/index43.cjs +17 -64
- package/dist/index43.cjs.map +1 -1
- package/dist/index43.js +17 -64
- package/dist/index43.js.map +1 -1
- package/dist/index44.cjs +69 -97
- package/dist/index44.cjs.map +1 -1
- package/dist/index44.js +71 -99
- package/dist/index44.js.map +1 -1
- package/dist/index45.cjs +140 -44
- package/dist/index45.cjs.map +1 -1
- package/dist/index45.js +141 -45
- package/dist/index45.js.map +1 -1
- package/dist/index46.cjs +64 -6
- package/dist/index46.cjs.map +1 -1
- package/dist/index46.js +65 -7
- package/dist/index46.js.map +1 -1
- package/dist/index47.cjs +74 -185
- package/dist/index47.cjs.map +1 -1
- package/dist/index47.js +67 -178
- package/dist/index47.js.map +1 -1
- package/dist/index48.cjs +45 -6
- package/dist/index48.cjs.map +1 -1
- package/dist/index48.js +46 -7
- package/dist/index48.js.map +1 -1
- package/dist/index49.cjs +6 -17
- package/dist/index49.cjs.map +1 -1
- package/dist/index49.js +6 -17
- package/dist/index49.js.map +1 -1
- package/dist/index50.cjs +141 -60
- package/dist/index50.cjs.map +1 -1
- package/dist/index50.js +142 -61
- package/dist/index50.js.map +1 -1
- package/dist/index51.cjs +10 -16
- package/dist/index51.cjs.map +1 -1
- package/dist/index51.js +9 -15
- package/dist/index51.js.map +1 -1
- package/dist/index52.cjs +19 -28
- package/dist/index52.cjs.map +1 -1
- package/dist/index52.js +18 -27
- package/dist/index52.js.map +1 -1
- package/dist/index53.cjs +67 -24
- package/dist/index53.cjs.map +1 -1
- package/dist/index53.js +66 -23
- package/dist/index53.js.map +1 -1
- package/dist/index54.cjs +15 -27
- package/dist/index54.cjs.map +1 -1
- package/dist/index54.js +15 -27
- package/dist/index54.js.map +1 -1
- package/dist/index55.cjs +18 -6
- package/dist/index55.cjs.map +1 -1
- package/dist/index55.js +18 -6
- package/dist/index55.js.map +1 -1
- package/dist/index56.cjs +24 -80
- package/dist/index56.cjs.map +1 -1
- package/dist/index56.js +23 -79
- package/dist/index56.js.map +1 -1
- package/dist/index57.cjs +22 -28
- package/dist/index57.cjs.map +1 -1
- package/dist/index57.js +22 -28
- package/dist/index57.js.map +1 -1
- package/dist/index58.cjs +18 -15
- package/dist/index58.cjs.map +1 -1
- package/dist/index58.js +18 -15
- package/dist/index58.js.map +1 -1
- package/dist/index59.cjs +64 -13
- package/dist/index59.cjs.map +1 -1
- package/dist/index59.js +64 -13
- package/dist/index59.js.map +1 -1
- package/dist/index60.cjs +2 -11
- package/dist/index60.cjs.map +1 -1
- package/dist/index60.js +2 -11
- package/dist/index60.js.map +1 -1
- package/dist/index61.cjs +89 -18
- package/dist/index61.cjs.map +1 -1
- package/dist/index61.js +88 -17
- package/dist/index61.js.map +1 -1
- package/dist/index62.cjs +28 -52
- package/dist/index62.cjs.map +1 -1
- package/dist/index62.js +28 -52
- package/dist/index62.js.map +1 -1
- package/dist/index63.cjs +20 -2
- package/dist/index63.cjs.map +1 -1
- package/dist/index63.js +20 -2
- package/dist/index63.js.map +1 -1
- package/dist/index64.cjs +80 -2
- package/dist/index64.cjs.map +1 -1
- package/dist/index64.js +81 -3
- package/dist/index64.js.map +1 -1
- package/dist/index65.cjs +1 -4
- package/dist/index65.cjs.map +1 -1
- package/dist/index65.js +1 -4
- package/dist/index65.js.map +1 -1
- package/dist/index66.cjs +34 -46
- package/dist/index66.cjs.map +1 -1
- package/dist/index66.js +34 -46
- package/dist/index66.js.map +1 -1
- package/dist/index67.cjs +52 -19
- package/dist/index67.cjs.map +1 -1
- package/dist/index67.js +53 -20
- package/dist/index67.js.map +1 -1
- package/dist/index68.cjs +16 -19
- package/dist/index68.cjs.map +1 -1
- package/dist/index68.js +16 -19
- package/dist/index68.js.map +1 -1
- package/dist/index69.cjs +14 -2
- package/dist/index69.cjs.map +1 -1
- package/dist/index69.js +14 -2
- package/dist/index69.js.map +1 -1
- package/dist/index70.cjs +4 -19
- package/dist/index70.cjs.map +1 -1
- package/dist/index70.js +5 -20
- package/dist/index70.js.map +1 -1
- package/dist/index71.cjs +38 -2
- package/dist/index71.cjs.map +1 -1
- package/dist/index71.js +39 -3
- package/dist/index71.js.map +1 -1
- package/dist/index72.cjs +18 -30
- package/dist/index72.cjs.map +1 -1
- package/dist/index72.js +18 -30
- package/dist/index72.js.map +1 -1
- package/dist/index73.cjs +13 -64
- package/dist/index73.cjs.map +1 -1
- package/dist/index73.js +14 -65
- package/dist/index73.js.map +1 -1
- package/dist/index74.cjs +35 -2
- package/dist/index74.cjs.map +1 -1
- package/dist/index74.js +36 -3
- package/dist/index74.js.map +1 -1
- package/dist/index75.cjs +50 -32
- package/dist/index75.cjs.map +1 -1
- package/dist/index75.js +50 -32
- package/dist/index75.js.map +1 -1
- package/dist/index76.cjs +46 -13
- package/dist/index76.cjs.map +1 -1
- package/dist/index76.js +47 -14
- package/dist/index76.js.map +1 -1
- package/dist/index77.cjs +134 -22
- package/dist/index77.cjs.map +1 -1
- package/dist/index77.js +133 -21
- package/dist/index77.js.map +1 -1
- package/dist/index78.cjs +38 -17
- package/dist/index78.cjs.map +1 -1
- package/dist/index78.js +39 -18
- package/dist/index78.js.map +1 -1
- package/dist/index79.cjs +26 -77
- package/dist/index79.cjs.map +1 -1
- package/dist/index79.js +26 -77
- package/dist/index79.js.map +1 -1
- package/dist/index80.cjs +28 -25
- package/dist/index80.cjs.map +1 -1
- package/dist/index80.js +28 -25
- package/dist/index80.js.map +1 -1
- package/dist/index81.cjs +19 -49
- package/dist/index81.cjs.map +1 -1
- package/dist/index81.js +20 -50
- package/dist/index81.js.map +1 -1
- package/dist/index82.cjs +15 -18
- package/dist/index82.cjs.map +1 -1
- package/dist/index82.js +15 -18
- package/dist/index82.js.map +1 -1
- package/dist/index83.cjs +13 -4
- package/dist/index83.cjs.map +1 -1
- package/dist/index83.js +14 -5
- package/dist/index83.js.map +1 -1
- package/dist/index84.cjs +13 -28
- package/dist/index84.cjs.map +1 -1
- package/dist/index84.js +13 -28
- package/dist/index84.js.map +1 -1
- package/dist/index85.cjs +22 -134
- package/dist/index85.cjs.map +1 -1
- package/dist/index85.js +21 -133
- package/dist/index85.js.map +1 -1
- package/dist/index86.cjs +14 -38
- package/dist/index86.cjs.map +1 -1
- package/dist/index86.js +15 -39
- package/dist/index86.js.map +1 -1
- package/dist/index87.cjs +2 -38
- package/dist/index87.cjs.map +1 -1
- package/dist/index87.js +3 -39
- package/dist/index87.js.map +1 -1
- package/dist/index88.cjs +2 -53
- package/dist/index88.cjs.map +1 -1
- package/dist/index88.js +3 -54
- package/dist/index88.js.map +1 -1
- package/dist/index89.cjs +16 -13
- package/dist/index89.cjs.map +1 -1
- package/dist/index89.js +16 -13
- package/dist/index89.js.map +1 -1
- package/dist/index9.cjs +2 -2
- package/dist/index9.js +2 -2
- package/dist/index90.cjs +19 -16
- package/dist/index90.cjs.map +1 -1
- package/dist/index90.js +19 -16
- package/dist/index90.js.map +1 -1
- package/dist/index91.cjs +5 -11
- package/dist/index91.cjs.map +1 -1
- package/dist/index91.js +5 -11
- package/dist/index91.js.map +1 -1
- package/dist/index92.cjs +9 -33
- package/dist/index92.cjs.map +1 -1
- package/dist/index92.js +10 -34
- package/dist/index92.js.map +1 -1
- package/dist/index93.cjs +2 -17
- package/dist/index93.cjs.map +1 -1
- package/dist/index93.js +3 -18
- package/dist/index93.js.map +1 -1
- package/dist/index94.cjs +8 -35
- package/dist/index94.cjs.map +1 -1
- package/dist/index94.js +9 -36
- package/dist/index94.js.map +1 -1
- package/dist/index95.cjs +57 -0
- package/dist/index95.cjs.map +1 -0
- package/dist/index95.js +57 -0
- package/dist/index95.js.map +1 -0
- package/dist/index96.cjs +33 -0
- package/dist/index96.cjs.map +1 -0
- package/dist/index96.js +33 -0
- package/dist/index96.js.map +1 -0
- package/dist/index97.cjs +27 -0
- package/dist/index97.cjs.map +1 -0
- package/dist/index97.js +27 -0
- package/dist/index97.js.map +1 -0
- package/dist/index98.cjs +42 -0
- package/dist/index98.cjs.map +1 -0
- package/dist/index98.js +42 -0
- package/dist/index98.js.map +1 -0
- package/dist/index99.cjs +95 -0
- package/dist/index99.cjs.map +1 -0
- package/dist/index99.js +95 -0
- package/dist/index99.js.map +1 -0
- package/dist/primitives/Checkbox/Checkbox.d.ts +4 -0
- package/dist/primitives/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/primitives/Checkbox/Checkbox.types.d.ts +14 -0
- package/dist/primitives/Checkbox/Checkbox.types.d.ts.map +1 -0
- package/dist/primitives/Checkbox/index.d.ts +3 -0
- package/dist/primitives/Checkbox/index.d.ts.map +1 -0
- package/dist/primitives/EmptyState/EmptyState.d.ts +4 -0
- package/dist/primitives/EmptyState/EmptyState.d.ts.map +1 -0
- package/dist/primitives/EmptyState/EmptyState.types.d.ts +14 -0
- package/dist/primitives/EmptyState/EmptyState.types.d.ts.map +1 -0
- package/dist/primitives/EmptyState/index.d.ts +3 -0
- package/dist/primitives/EmptyState/index.d.ts.map +1 -0
- package/dist/style.css +232 -0
- package/dist/types/chart.types.d.ts +39 -0
- package/dist/types/chart.types.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index47.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index47.js","sources":["../src/charts/TemporalTrendChartCard/TemporalTrendChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport ReactECharts from 'echarts-for-react';\nimport type { TemporalTrendChartCardProps } from './TemporalTrendChartCard.types';\nimport type { EChartsInstance, ChartAnnotation } from '../../types/chart.types';\nimport { MAX_SERIES, CHART_COLORS } from '../../constants';\nimport styles from './TemporalTrendChartCard.module.css';\n\n/** Group data points by category, returning sorted series keyed by category name. */\nfunction groupByCategory(\n data: TemporalTrendChartCardProps['data'],\n limit: number,\n) {\n const grouped = new Map<string, { ts: string; value: number }[]>();\n\n for (const point of data) {\n const key = point.category ?? 'Unknown';\n if (!grouped.has(key)) {\n grouped.set(key, []);\n }\n grouped.get(key)!.push({\n ts: point.ts ?? '',\n value: point.value,\n });\n }\n\n const entries = [...grouped.entries()].sort(\n (a, b) =>\n b[1].reduce((sum, p) => sum + p.value, 0) -\n a[1].reduce((sum, p) => sum + p.value, 0),\n );\n\n if (entries.length <= limit) {\n return entries;\n }\n\n const top = entries.slice(0, limit - 1);\n const rest = entries.slice(limit - 1);\n\n const otherMap = new Map<string, number>();\n for (const [, points] of rest) {\n for (const p of points) {\n otherMap.set(p.ts, (otherMap.get(p.ts) ?? 0) + p.value);\n }\n }\n\n const otherPoints = [...otherMap.entries()].map(([ts, value]) => ({\n ts,\n value,\n }));\n\n return [...top, ['Other', otherPoints] as const] as Array<\n [string, { ts: string; value: number }[]]\n >;\n}\n\n/** Build markArea items from range annotations. */\nfunction buildMarkAreas(annotations: ChartAnnotation[]) {\n return annotations\n .filter((a) => a.end)\n .map((a) => [\n {\n name: a.label,\n xAxis: a.start,\n itemStyle: { color: a.color ?? 'rgba(255,107,90,0.1)' },\n },\n { xAxis: a.end },\n ]);\n}\n\n/** Build markLine items from point annotations. */\nfunction buildMarkLines(annotations: ChartAnnotation[]) {\n return annotations\n .filter((a) => !a.end)\n .map((a) => ({\n name: a.label,\n xAxis: a.start,\n lineStyle: { color: a.color ?? CHART_COLORS[0], type: 'dashed' as const },\n label: { formatter: a.label, position: 'end' as const },\n }));\n}\n\nexport function TemporalTrendChartCard({\n title,\n data,\n isLoading = false,\n error,\n onRetry,\n onChartReady,\n actions,\n className,\n groupBy,\n groupOptions,\n onGroupChange,\n granularity,\n granularityOptions,\n onGranularityChange,\n annotations = [],\n showLegend = true,\n onToggleLegend,\n onSeriesSelect,\n onBucketSelect,\n maxSeries = MAX_SERIES,\n}: TemporalTrendChartCardProps) {\n const seriesGroups = useMemo(\n () => groupByCategory(data, maxSeries),\n [data, maxSeries],\n );\n\n const option = useMemo(() => {\n const markAreas = buildMarkAreas(annotations);\n const markLines = buildMarkLines(annotations);\n\n const series = seriesGroups.map(([name, points], idx) => ({\n name,\n type: 'line' as const,\n stack: 'total',\n areaStyle: {},\n emphasis: { focus: 'series' as const },\n color: CHART_COLORS[idx % CHART_COLORS.length],\n data: points\n .sort((a, b) => (a.ts < b.ts ? -1 : 1))\n .map((p) => [p.ts, p.value]),\n ...(idx === 0 && (markAreas.length > 0 || markLines.length > 0)\n ? {\n markArea:\n markAreas.length > 0 ? { silent: true, data: markAreas } : undefined,\n markLine:\n markLines.length > 0\n ? { silent: true, symbol: 'none', data: markLines }\n : undefined,\n }\n : {}),\n }));\n\n return {\n tooltip: {\n trigger: 'axis' as const,\n axisPointer: { type: 'cross' as const },\n },\n legend: {\n show: showLegend,\n type: 'scroll' as const,\n bottom: 0,\n },\n grid: {\n left: '3%',\n right: '4%',\n bottom: showLegend ? '15%' : '3%',\n containLabel: true,\n },\n xAxis: { type: 'time' as const },\n yAxis: { type: 'value' as const },\n series,\n };\n }, [seriesGroups, annotations, showLegend]);\n\n const handleChartReady = useCallback(\n (instance: EChartsInstance) => {\n onChartReady?.(instance);\n },\n [onChartReady],\n );\n\n const handleEvents = useMemo(() => {\n const events: Record<string, (...args: unknown[]) => void> = {};\n\n if (onSeriesSelect) {\n events['legendselectchanged'] = (params: unknown) => {\n const p = params as { name: string };\n onSeriesSelect(p.name);\n };\n }\n\n if (onBucketSelect) {\n events['brushSelected'] = (params: unknown) => {\n const p = params as {\n batch: { areas: { coordRange: [string, string] }[] }[];\n };\n const area = p.batch?.[0]?.areas?.[0];\n if (area) {\n onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });\n }\n };\n }\n\n return events;\n }, [onSeriesSelect, onBucketSelect]);\n\n const hasToolbar = groupOptions || granularityOptions || onToggleLegend;\n const hasData = data.length > 0;\n\n return (\n <div className={clsx(styles.root, className)}>\n <div className={styles.header}>\n <span className={styles.title}>{title}</span>\n <div className={styles.headerRight}>\n {hasToolbar && (\n <div className={styles.toolbar}>\n {groupOptions && groupOptions.length > 0 && (\n <select\n className={styles.select}\n value={groupBy ?? ''}\n onChange={(e) => onGroupChange?.(e.target.value)}\n aria-label=\"Group by\"\n >\n {groupOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n )}\n {granularityOptions && granularityOptions.length > 0 && (\n <select\n className={styles.select}\n value={granularity ?? ''}\n onChange={(e) =>\n onGranularityChange?.(e.target.value || null)\n }\n aria-label=\"Granularity\"\n >\n {granularityOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n )}\n {onToggleLegend && (\n <button\n type=\"button\"\n className={clsx(\n styles.legendToggle,\n showLegend && styles.legendToggleActive,\n )}\n onClick={onToggleLegend}\n aria-label=\"Toggle legend\"\n >\n Legend\n </button>\n )}\n </div>\n )}\n {actions}\n </div>\n </div>\n\n {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n {!isLoading && error && (\n <div className={styles.error}>\n <span>{error}</span>\n {onRetry && (\n <button\n type=\"button\"\n className={styles.retryButton}\n onClick={onRetry}\n >\n Retry\n </button>\n )}\n </div>\n )}\n\n {!isLoading && !error && !hasData && (\n <div className={styles.empty}>No data available</div>\n )}\n\n {!isLoading && !error && hasData && (\n <div className={styles.chartContainer}>\n <ReactECharts\n option={option}\n style={{ height: '100%', minHeight: '18.75rem' }}\n onChartReady={handleChartReady}\n onEvents={handleEvents}\n notMerge\n />\n </div>\n )}\n </div>\n );\n}\n\nTemporalTrendChartCard.displayName = 'TemporalTrendChartCard';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index47.js","sources":["../src/charts/StackedBarChartCard/StackedBarChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { EChartsInstance } from '../../types/chart.types';\nimport { MAX_CATEGORIES, MAX_SUBCATEGORIES } from '../../constants';\nimport type { StackedBarChartCardProps, StackedBarChartType } from './StackedBarChartCard.types';\nimport { aggregateData, buildBarOption, buildPieOption, buildSunburstOption } from './buildChartOptions';\nimport styles from './StackedBarChartCard.module.css';\n\n/** Label map for chart type toggle buttons. */\nconst CHART_TYPE_LABELS: Record<StackedBarChartType, string> = {\n bar: 'Bar',\n pie: 'Pie',\n sunburst: 'Sunburst',\n};\n\n/** All available chart types for the toggle group. */\nconst CHART_TYPES: StackedBarChartType[] = ['bar', 'pie', 'sunburst'];\n\nexport const StackedBarChartCard = ({\n title,\n data,\n subtitle,\n chartType = 'bar',\n isLoading = false,\n error,\n onRetry,\n onChartReady,\n onSelectCategory,\n // onAnalyzeRootCause — reserved for context menu integration\n maxCategories = MAX_CATEGORIES,\n maxSubcategories = MAX_SUBCATEGORIES,\n showOthersBucket = true,\n invertAxis = false,\n hideLegend = false,\n enableScroll = false,\n toolbar,\n actions,\n className,\n}: StackedBarChartCardProps) => {\n const { categories, series } = useMemo(\n () => aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),\n [data, maxCategories, maxSubcategories, showOthersBucket],\n );\n\n const option = useMemo(() => {\n switch (chartType) {\n case 'pie':\n return buildPieOption(categories, series, hideLegend);\n case 'sunburst':\n return buildSunburstOption(categories, series);\n default:\n return buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);\n }\n }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);\n\n const handleChartReady = useCallback(\n (instance: EChartsInstance) => {\n onChartReady?.(instance);\n },\n [onChartReady],\n );\n\n const handleChartClick = useCallback(\n (params: { name?: string; seriesName?: string }) => {\n if (!onSelectCategory || !params.name) return;\n onSelectCategory({\n category: params.name,\n subCategory: params.seriesName ?? null,\n });\n },\n [onSelectCategory],\n );\n\n const hasData = data.length > 0;\n\n return (\n <div className={clsx(styles.root, className)}>\n <div className={styles.header}>\n <div className={styles.headerLeft}>\n <h3 className={styles.title}>{title}</h3>\n {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n </div>\n <div className={styles.headerRight}>\n {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n <div className={styles.chartTypeToggle}>\n {CHART_TYPES.map((type) => (\n <button\n key={type}\n type=\"button\"\n className={chartType === type ? styles.active : undefined}\n aria-pressed={chartType === type}\n disabled\n >\n {CHART_TYPE_LABELS[type]}\n </button>\n ))}\n </div>\n {actions}\n </div>\n </div>\n\n {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n {!isLoading && error && (\n <div className={styles.error}>\n <span>{error}</span>\n {onRetry && (\n <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n Retry\n </button>\n )}\n </div>\n )}\n\n {!isLoading && !error && !hasData && (\n <div className={styles.empty}>No data available</div>\n )}\n\n {!isLoading && !error && hasData && (\n <div className={styles.chartContainer}>\n <ReactECharts\n option={option}\n style={{ height: '100%', width: '100%' }}\n onChartReady={handleChartReady}\n onEvents={{ click: handleChartClick }}\n notMerge\n />\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/dist/index48.cjs
CHANGED
|
@@ -2,11 +2,50 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
|
-
const clsx = require("./
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
({
|
|
5
|
+
const clsx = require("./index54.cjs");
|
|
6
|
+
const StatCard_module = require("./index57.cjs");
|
|
7
|
+
const StatCard = react.forwardRef(
|
|
8
|
+
({
|
|
9
|
+
label,
|
|
10
|
+
value,
|
|
11
|
+
sub,
|
|
12
|
+
variant = "default",
|
|
13
|
+
clickable = false,
|
|
14
|
+
active = false,
|
|
15
|
+
className,
|
|
16
|
+
onKeyDown,
|
|
17
|
+
...props
|
|
18
|
+
}, ref) => {
|
|
19
|
+
const handleKeyDown = (event) => {
|
|
20
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
21
|
+
if (clickable && (event.key === "Enter" || event.key === " ")) {
|
|
22
|
+
event.preventDefault();
|
|
23
|
+
event.currentTarget.click();
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
className: clsx.clsx(
|
|
31
|
+
StatCard_module.default.root,
|
|
32
|
+
clickable && StatCard_module.default.isClick,
|
|
33
|
+
active && StatCard_module.default.isActive,
|
|
34
|
+
className
|
|
35
|
+
),
|
|
36
|
+
role: clickable ? "button" : void 0,
|
|
37
|
+
tabIndex: clickable ? 0 : void 0,
|
|
38
|
+
onKeyDown: handleKeyDown,
|
|
39
|
+
...props,
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: StatCard_module.default.label, children: label }),
|
|
42
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(StatCard_module.default.value, variant !== "default" && StatCard_module.default[variant]), children: value }),
|
|
43
|
+
sub != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StatCard_module.default.sub, children: sub })
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}
|
|
9
48
|
);
|
|
10
|
-
|
|
11
|
-
exports.
|
|
49
|
+
StatCard.displayName = "StatCard";
|
|
50
|
+
exports.StatCard = StatCard;
|
|
12
51
|
//# sourceMappingURL=index48.cjs.map
|
package/dist/index48.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index48.cjs","sources":["../src/primitives/
|
|
1
|
+
{"version":3,"file":"index48.cjs","sources":["../src/primitives/StatCard/StatCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { StatCardProps } from './StatCard.types';\nimport styles from './StatCard.module.css';\n\nexport const StatCard = forwardRef<HTMLDivElement, StatCardProps>(\n (\n {\n label,\n value,\n sub,\n variant = 'default',\n clickable = false,\n active = false,\n className,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.root,\n clickable && styles.isClick,\n active && styles.isActive,\n className,\n )}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n onKeyDown={handleKeyDown}\n {...props}\n >\n <div className={styles.label}>{label}</div>\n <div className={clsx(styles.value, variant !== 'default' && styles[variant])}>{value}</div>\n {sub != null && <div className={styles.sub}>{sub}</div>}\n </div>\n );\n },\n);\n\nStatCard.displayName = 'StatCard';\n"],"names":["forwardRef","jsxs","clsx","styles","jsx"],"mappings":";;;;;;AAKO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,gBAAgB,CAAC,UAA+C;AACpE,6CAAY;AACZ,UAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAC7D,cAAM,eAAA;AACN,cAAM,cAAc,MAAA;AAAA,MACtB;AAAA,IACF;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,KAAAA;AAAAA,UACTC,gBAAAA,QAAO;AAAA,UACP,aAAaA,gBAAAA,QAAO;AAAA,UACpB,UAAUA,gBAAAA,QAAO;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,MAAM,YAAY,WAAW;AAAA,QAC7B,UAAU,YAAY,IAAI;AAAA,QAC1B,WAAW;AAAA,QACV,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,gBAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,UACrCC,2BAAAA,IAAC,OAAA,EAAI,WAAWF,KAAAA,KAAKC,gBAAAA,QAAO,OAAO,YAAY,aAAaA,gBAAAA,QAAO,OAAO,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,UACpF,OAAO,QAAQC,2BAAAA,IAAC,SAAI,WAAWD,wBAAO,KAAM,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvD;AACF;AAEA,SAAS,cAAc;;"}
|
package/dist/index48.js
CHANGED
|
@@ -1,12 +1,51 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import { clsx } from "./
|
|
4
|
-
import styles from "./
|
|
5
|
-
const
|
|
6
|
-
({
|
|
3
|
+
import { clsx } from "./index54.js";
|
|
4
|
+
import styles from "./index57.js";
|
|
5
|
+
const StatCard = forwardRef(
|
|
6
|
+
({
|
|
7
|
+
label,
|
|
8
|
+
value,
|
|
9
|
+
sub,
|
|
10
|
+
variant = "default",
|
|
11
|
+
clickable = false,
|
|
12
|
+
active = false,
|
|
13
|
+
className,
|
|
14
|
+
onKeyDown,
|
|
15
|
+
...props
|
|
16
|
+
}, ref) => {
|
|
17
|
+
const handleKeyDown = (event) => {
|
|
18
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
19
|
+
if (clickable && (event.key === "Enter" || event.key === " ")) {
|
|
20
|
+
event.preventDefault();
|
|
21
|
+
event.currentTarget.click();
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsxs(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
ref,
|
|
28
|
+
className: clsx(
|
|
29
|
+
styles.root,
|
|
30
|
+
clickable && styles.isClick,
|
|
31
|
+
active && styles.isActive,
|
|
32
|
+
className
|
|
33
|
+
),
|
|
34
|
+
role: clickable ? "button" : void 0,
|
|
35
|
+
tabIndex: clickable ? 0 : void 0,
|
|
36
|
+
onKeyDown: handleKeyDown,
|
|
37
|
+
...props,
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ jsx("div", { className: styles.label, children: label }),
|
|
40
|
+
/* @__PURE__ */ jsx("div", { className: clsx(styles.value, variant !== "default" && styles[variant]), children: value }),
|
|
41
|
+
sub != null && /* @__PURE__ */ jsx("div", { className: styles.sub, children: sub })
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
}
|
|
7
46
|
);
|
|
8
|
-
|
|
47
|
+
StatCard.displayName = "StatCard";
|
|
9
48
|
export {
|
|
10
|
-
|
|
49
|
+
StatCard
|
|
11
50
|
};
|
|
12
51
|
//# sourceMappingURL=index48.js.map
|
package/dist/index48.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index48.js","sources":["../src/primitives/
|
|
1
|
+
{"version":3,"file":"index48.js","sources":["../src/primitives/StatCard/StatCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { StatCardProps } from './StatCard.types';\nimport styles from './StatCard.module.css';\n\nexport const StatCard = forwardRef<HTMLDivElement, StatCardProps>(\n (\n {\n label,\n value,\n sub,\n variant = 'default',\n clickable = false,\n active = false,\n className,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.root,\n clickable && styles.isClick,\n active && styles.isActive,\n className,\n )}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n onKeyDown={handleKeyDown}\n {...props}\n >\n <div className={styles.label}>{label}</div>\n <div className={clsx(styles.value, variant !== 'default' && styles[variant])}>{value}</div>\n {sub != null && <div className={styles.sub}>{sub}</div>}\n </div>\n );\n },\n);\n\nStatCard.displayName = 'StatCard';\n"],"names":[],"mappings":";;;;AAKO,MAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,gBAAgB,CAAC,UAA+C;AACpE,6CAAY;AACZ,UAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAC7D,cAAM,eAAA;AACN,cAAM,cAAc,MAAA;AAAA,MACtB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,OAAO;AAAA,UACP,aAAa,OAAO;AAAA,UACpB,UAAU,OAAO;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,MAAM,YAAY,WAAW;AAAA,QAC7B,UAAU,YAAY,IAAI;AAAA,QAC1B,WAAW;AAAA,QACV,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,UACrC,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,OAAO,YAAY,aAAa,OAAO,OAAO,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,UACpF,OAAO,QAAQ,oBAAC,SAAI,WAAW,OAAO,KAAM,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvD;AACF;AAEA,SAAS,cAAc;"}
|
package/dist/index49.cjs
CHANGED
|
@@ -1,21 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
{
|
|
11
|
-
ref,
|
|
12
|
-
role,
|
|
13
|
-
className: clsx.clsx(Toast_module.default.toast, variant !== "default" && Toast_module.default[variant], className),
|
|
14
|
-
...props,
|
|
15
|
-
children
|
|
16
|
-
}
|
|
17
|
-
)
|
|
18
|
-
);
|
|
19
|
-
Toast.displayName = "Toast";
|
|
20
|
-
exports.Toast = Toast;
|
|
4
|
+
const clsx = require("./index54.cjs");
|
|
5
|
+
const Table_module = require("./index91.cjs");
|
|
6
|
+
const TableContainer = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Table_module.default.container, className), ...props });
|
|
7
|
+
const Table = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("table", { className: clsx.clsx(Table_module.default.root, className), ...props });
|
|
8
|
+
exports.Table = Table;
|
|
9
|
+
exports.TableContainer = TableContainer;
|
|
21
10
|
//# sourceMappingURL=index49.cjs.map
|
package/dist/index49.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index49.cjs","sources":["../src/primitives/
|
|
1
|
+
{"version":3,"file":"index49.cjs","sources":["../src/primitives/Table/Table.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport styles from './Table.module.css';\n\nexport interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {}\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const TableContainer = ({ className, ...props }: TableContainerProps) => (\n <div className={clsx(styles.container, className)} {...props} />\n);\n\nexport const Table = ({ className, ...props }: TableProps) => (\n <table className={clsx(styles.root, className)} {...props} />\n);\n"],"names":["jsx","clsx","styles"],"mappings":";;;;;AAMO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAC7CA,2BAAAA,IAAC,OAAA,EAAI,WAAWC,KAAAA,KAAKC,aAAAA,QAAO,WAAW,SAAS,GAAI,GAAG,MAAA,CAAO;AAGzD,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,YACpCF,2BAAAA,IAAC,SAAA,EAAM,WAAWC,KAAAA,KAAKC,aAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;;;"}
|
package/dist/index49.js
CHANGED
|
@@ -1,21 +1,10 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
({ variant = "default", className, role = "status", children, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
7
|
-
"div",
|
|
8
|
-
{
|
|
9
|
-
ref,
|
|
10
|
-
role,
|
|
11
|
-
className: clsx(styles.toast, variant !== "default" && styles[variant], className),
|
|
12
|
-
...props,
|
|
13
|
-
children
|
|
14
|
-
}
|
|
15
|
-
)
|
|
16
|
-
);
|
|
17
|
-
Toast.displayName = "Toast";
|
|
2
|
+
import { clsx } from "./index54.js";
|
|
3
|
+
import styles from "./index91.js";
|
|
4
|
+
const TableContainer = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.container, className), ...props });
|
|
5
|
+
const Table = ({ className, ...props }) => /* @__PURE__ */ jsx("table", { className: clsx(styles.root, className), ...props });
|
|
18
6
|
export {
|
|
19
|
-
|
|
7
|
+
Table,
|
|
8
|
+
TableContainer
|
|
20
9
|
};
|
|
21
10
|
//# sourceMappingURL=index49.js.map
|
package/dist/index49.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index49.js","sources":["../src/primitives/
|
|
1
|
+
{"version":3,"file":"index49.js","sources":["../src/primitives/Table/Table.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport styles from './Table.module.css';\n\nexport interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {}\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const TableContainer = ({ className, ...props }: TableContainerProps) => (\n <div className={clsx(styles.container, className)} {...props} />\n);\n\nexport const Table = ({ className, ...props }: TableProps) => (\n <table className={clsx(styles.root, className)} {...props} />\n);\n"],"names":[],"mappings":";;;AAMO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAC7C,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,MAAA,CAAO;AAGzD,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,YACpC,oBAAC,SAAA,EAAM,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;"}
|
package/dist/index50.cjs
CHANGED
|
@@ -2,69 +2,150 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
5
|
+
const clsx = require("./index54.cjs");
|
|
6
|
+
const ReactECharts = require("echarts-for-react");
|
|
7
|
+
const constants = require("./index61.cjs");
|
|
8
|
+
const buildChartOption = require("./index101.cjs");
|
|
9
|
+
const TemporalTrendChartCard_module = require("./index102.cjs");
|
|
10
|
+
function TemporalTrendChartCard({
|
|
11
|
+
title,
|
|
12
|
+
data,
|
|
13
|
+
isLoading = false,
|
|
14
|
+
error,
|
|
15
|
+
onRetry,
|
|
16
|
+
onChartReady,
|
|
17
|
+
actions,
|
|
18
|
+
className,
|
|
19
|
+
groupBy,
|
|
20
|
+
groupOptions,
|
|
21
|
+
onGroupChange,
|
|
22
|
+
granularity,
|
|
23
|
+
granularityOptions,
|
|
24
|
+
onGranularityChange,
|
|
25
|
+
annotations = [],
|
|
26
|
+
referenceLines = [],
|
|
27
|
+
stacked = true,
|
|
28
|
+
hiddenSeries,
|
|
29
|
+
seriesOrder = "total",
|
|
30
|
+
showLegend = true,
|
|
31
|
+
onToggleLegend,
|
|
32
|
+
onSeriesSelect,
|
|
33
|
+
onSeriesToggle,
|
|
34
|
+
onBucketSelect,
|
|
35
|
+
maxSeries = constants.MAX_SERIES
|
|
36
|
+
}) {
|
|
37
|
+
const seriesGroups = react.useMemo(
|
|
38
|
+
() => buildChartOption.groupByCategory(data, maxSeries, seriesOrder),
|
|
39
|
+
[data, maxSeries, seriesOrder]
|
|
40
|
+
);
|
|
41
|
+
const option = react.useMemo(
|
|
42
|
+
() => buildChartOption.buildTemporalTrendOption(seriesGroups, {
|
|
43
|
+
annotations,
|
|
44
|
+
referenceLines,
|
|
45
|
+
showLegend,
|
|
46
|
+
stacked,
|
|
47
|
+
hiddenSeries
|
|
48
|
+
}),
|
|
49
|
+
[seriesGroups, annotations, referenceLines, showLegend, stacked, hiddenSeries]
|
|
50
|
+
);
|
|
51
|
+
const handleChartReady = react.useCallback(
|
|
52
|
+
(instance) => {
|
|
53
|
+
onChartReady == null ? void 0 : onChartReady(instance);
|
|
33
54
|
},
|
|
34
|
-
[
|
|
55
|
+
[onChartReady]
|
|
35
56
|
);
|
|
36
|
-
react.
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
57
|
+
const handleEvents = react.useMemo(() => {
|
|
58
|
+
const events = {};
|
|
59
|
+
if (onSeriesSelect || onSeriesToggle) {
|
|
60
|
+
events["legendselectchanged"] = (params) => {
|
|
61
|
+
var _a;
|
|
62
|
+
const p = params;
|
|
63
|
+
onSeriesSelect == null ? void 0 : onSeriesSelect(p.name);
|
|
64
|
+
onSeriesToggle == null ? void 0 : onSeriesToggle(p.name, ((_a = p.selected) == null ? void 0 : _a[p.name]) ?? true);
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
if (onBucketSelect) {
|
|
68
|
+
events["brushSelected"] = (params) => {
|
|
69
|
+
var _a, _b, _c;
|
|
70
|
+
const p = params;
|
|
71
|
+
const area = (_c = (_b = (_a = p.batch) == null ? void 0 : _a[0]) == null ? void 0 : _b.areas) == null ? void 0 : _c[0];
|
|
72
|
+
if (area) {
|
|
73
|
+
onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
return events;
|
|
78
|
+
}, [onSeriesSelect, onSeriesToggle, onBucketSelect]);
|
|
79
|
+
const hasToolbar = groupOptions || granularityOptions || onToggleLegend;
|
|
80
|
+
const hasData = data.length > 0;
|
|
81
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(TemporalTrendChartCard_module.default.root, className), children: [
|
|
82
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.header, children: [
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: TemporalTrendChartCard_module.default.title, children: title }),
|
|
84
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.headerRight, children: [
|
|
85
|
+
hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.toolbar, children: [
|
|
86
|
+
groupOptions && groupOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
87
|
+
"select",
|
|
88
|
+
{
|
|
89
|
+
className: TemporalTrendChartCard_module.default.select,
|
|
90
|
+
value: groupBy ?? "",
|
|
91
|
+
onChange: (e) => onGroupChange == null ? void 0 : onGroupChange(e.target.value),
|
|
92
|
+
"aria-label": "Group by",
|
|
93
|
+
children: groupOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
granularityOptions && granularityOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
97
|
+
"select",
|
|
98
|
+
{
|
|
99
|
+
className: TemporalTrendChartCard_module.default.select,
|
|
100
|
+
value: granularity ?? "",
|
|
101
|
+
onChange: (e) => onGranularityChange == null ? void 0 : onGranularityChange(e.target.value || null),
|
|
102
|
+
"aria-label": "Granularity",
|
|
103
|
+
children: granularityOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
onToggleLegend && /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
"button",
|
|
108
|
+
{
|
|
109
|
+
type: "button",
|
|
110
|
+
className: clsx.clsx(
|
|
111
|
+
TemporalTrendChartCard_module.default.legendToggle,
|
|
112
|
+
showLegend && TemporalTrendChartCard_module.default.legendToggleActive
|
|
113
|
+
),
|
|
114
|
+
onClick: onToggleLegend,
|
|
115
|
+
"aria-label": "Toggle legend",
|
|
116
|
+
children: "Legend"
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
] }),
|
|
120
|
+
actions
|
|
121
|
+
] })
|
|
122
|
+
] }),
|
|
123
|
+
isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.loading, children: "Loading chart data..." }),
|
|
124
|
+
!isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.error, children: [
|
|
125
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
|
|
126
|
+
onRetry && /* @__PURE__ */ jsxRuntime.jsx(
|
|
127
|
+
"button",
|
|
49
128
|
{
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
onClick:
|
|
53
|
-
children:
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
129
|
+
type: "button",
|
|
130
|
+
className: TemporalTrendChartCard_module.default.retryButton,
|
|
131
|
+
onClick: onRetry,
|
|
132
|
+
children: "Retry"
|
|
133
|
+
}
|
|
134
|
+
)
|
|
135
|
+
] }),
|
|
136
|
+
!isLoading && !error && !hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.empty, children: "No data available" }),
|
|
137
|
+
!isLoading && !error && hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
138
|
+
ReactECharts,
|
|
139
|
+
{
|
|
140
|
+
option,
|
|
141
|
+
style: { height: "100%", minHeight: "18.75rem" },
|
|
142
|
+
onChartReady: handleChartReady,
|
|
143
|
+
onEvents: handleEvents,
|
|
144
|
+
notMerge: true
|
|
145
|
+
}
|
|
146
|
+
) })
|
|
59
147
|
] });
|
|
60
|
-
};
|
|
61
|
-
function useToast() {
|
|
62
|
-
const context = react.useContext(ToastContext);
|
|
63
|
-
if (!context) {
|
|
64
|
-
throw new Error("useToast must be used within a ToastProvider");
|
|
65
|
-
}
|
|
66
|
-
return context;
|
|
67
148
|
}
|
|
68
|
-
|
|
69
|
-
exports.
|
|
149
|
+
TemporalTrendChartCard.displayName = "TemporalTrendChartCard";
|
|
150
|
+
exports.TemporalTrendChartCard = TemporalTrendChartCard;
|
|
70
151
|
//# sourceMappingURL=index50.cjs.map
|
package/dist/index50.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index50.cjs","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index50.cjs","sources":["../src/charts/TemporalTrendChartCard/TemporalTrendChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport ReactECharts from 'echarts-for-react';\nimport type { TemporalTrendChartCardProps } from './TemporalTrendChartCard.types';\nimport type { EChartsInstance } from '../../types/chart.types';\nimport { MAX_SERIES } from '../../constants';\nimport { groupByCategory, buildTemporalTrendOption } from './buildChartOption';\nimport styles from './TemporalTrendChartCard.module.css';\n\nexport function TemporalTrendChartCard({\n title,\n data,\n isLoading = false,\n error,\n onRetry,\n onChartReady,\n actions,\n className,\n groupBy,\n groupOptions,\n onGroupChange,\n granularity,\n granularityOptions,\n onGranularityChange,\n annotations = [],\n referenceLines = [],\n stacked = true,\n hiddenSeries,\n seriesOrder = 'total',\n showLegend = true,\n onToggleLegend,\n onSeriesSelect,\n onSeriesToggle,\n onBucketSelect,\n maxSeries = MAX_SERIES,\n}: TemporalTrendChartCardProps) {\n const seriesGroups = useMemo(\n () => groupByCategory(data, maxSeries, seriesOrder),\n [data, maxSeries, seriesOrder],\n );\n\n const option = useMemo(\n () =>\n buildTemporalTrendOption(seriesGroups, {\n annotations,\n referenceLines,\n showLegend,\n stacked,\n hiddenSeries,\n }),\n [seriesGroups, annotations, referenceLines, showLegend, stacked, hiddenSeries],\n );\n\n const handleChartReady = useCallback(\n (instance: EChartsInstance) => {\n onChartReady?.(instance);\n },\n [onChartReady],\n );\n\n const handleEvents = useMemo(() => {\n const events: Record<string, (...args: unknown[]) => void> = {};\n\n if (onSeriesSelect || onSeriesToggle) {\n events['legendselectchanged'] = (params: unknown) => {\n const p = params as { name: string; selected?: Record<string, boolean> };\n onSeriesSelect?.(p.name);\n onSeriesToggle?.(p.name, p.selected?.[p.name] ?? true);\n };\n }\n\n if (onBucketSelect) {\n events['brushSelected'] = (params: unknown) => {\n const p = params as {\n batch: { areas: { coordRange: [string, string] }[] }[];\n };\n const area = p.batch?.[0]?.areas?.[0];\n if (area) {\n onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });\n }\n };\n }\n\n return events;\n }, [onSeriesSelect, onSeriesToggle, onBucketSelect]);\n\n const hasToolbar = groupOptions || granularityOptions || onToggleLegend;\n const hasData = data.length > 0;\n\n return (\n <div className={clsx(styles.root, className)}>\n <div className={styles.header}>\n <span className={styles.title}>{title}</span>\n <div className={styles.headerRight}>\n {hasToolbar && (\n <div className={styles.toolbar}>\n {groupOptions && groupOptions.length > 0 && (\n <select\n className={styles.select}\n value={groupBy ?? ''}\n onChange={(e) => onGroupChange?.(e.target.value)}\n aria-label=\"Group by\"\n >\n {groupOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n )}\n {granularityOptions && granularityOptions.length > 0 && (\n <select\n className={styles.select}\n value={granularity ?? ''}\n onChange={(e) =>\n onGranularityChange?.(e.target.value || null)\n }\n aria-label=\"Granularity\"\n >\n {granularityOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n )}\n {onToggleLegend && (\n <button\n type=\"button\"\n className={clsx(\n styles.legendToggle,\n showLegend && styles.legendToggleActive,\n )}\n onClick={onToggleLegend}\n aria-label=\"Toggle legend\"\n >\n Legend\n </button>\n )}\n </div>\n )}\n {actions}\n </div>\n </div>\n\n {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n {!isLoading && error && (\n <div className={styles.error}>\n <span>{error}</span>\n {onRetry && (\n <button\n type=\"button\"\n className={styles.retryButton}\n onClick={onRetry}\n >\n Retry\n </button>\n )}\n </div>\n )}\n\n {!isLoading && !error && !hasData && (\n <div className={styles.empty}>No data available</div>\n )}\n\n {!isLoading && !error && hasData && (\n <div className={styles.chartContainer}>\n <ReactECharts\n option={option}\n style={{ height: '100%', minHeight: '18.75rem' }}\n onChartReady={handleChartReady}\n onEvents={handleEvents}\n notMerge\n />\n </div>\n )}\n </div>\n );\n}\n\nTemporalTrendChartCard.displayName = 'TemporalTrendChartCard';\n"],"names":["MAX_SERIES","useMemo","groupByCategory","buildTemporalTrendOption","useCallback","clsx","styles","jsxs","jsx"],"mappings":";;;;;;;;;AASO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,CAAA;AAAA,EACd,iBAAiB,CAAA;AAAA,EACjB,UAAU;AAAA,EACV;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAYA,UAAAA;AACd,GAAgC;AAC9B,QAAM,eAAeC,MAAAA;AAAAA,IACnB,MAAMC,iCAAgB,MAAM,WAAW,WAAW;AAAA,IAClD,CAAC,MAAM,WAAW,WAAW;AAAA,EAAA;AAG/B,QAAM,SAASD,MAAAA;AAAAA,IACb,MACEE,iBAAAA,yBAAyB,cAAc;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,IACH,CAAC,cAAc,aAAa,gBAAgB,YAAY,SAAS,YAAY;AAAA,EAAA;AAG/E,QAAM,mBAAmBC,MAAAA;AAAAA,IACvB,CAAC,aAA8B;AAC7B,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGf,QAAM,eAAeH,MAAAA,QAAQ,MAAM;AACjC,UAAM,SAAuD,CAAA;AAE7D,QAAI,kBAAkB,gBAAgB;AACpC,aAAO,qBAAqB,IAAI,CAAC,WAAoB;;AACnD,cAAM,IAAI;AACV,yDAAiB,EAAE;AACnB,yDAAiB,EAAE,QAAM,OAAE,aAAF,mBAAa,EAAE,UAAS;AAAA,MACnD;AAAA,IACF;AAEA,QAAI,gBAAgB;AAClB,aAAO,eAAe,IAAI,CAAC,WAAoB;;AAC7C,cAAM,IAAI;AAGV,cAAM,QAAO,mBAAE,UAAF,mBAAU,OAAV,mBAAc,UAAd,mBAAsB;AACnC,YAAI,MAAM;AACR,yBAAe,EAAE,OAAO,KAAK,WAAW,CAAC,GAAG,KAAK,KAAK,WAAW,CAAC,EAAA,CAAG;AAAA,QACvE;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,gBAAgB,cAAc,CAAC;AAEnD,QAAM,aAAa,gBAAgB,sBAAsB;AACzD,QAAM,UAAU,KAAK,SAAS;AAE9B,yCACG,OAAA,EAAI,WAAWI,KAAAA,KAAKC,8BAAAA,QAAO,MAAM,SAAS,GACzC,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAWD,8BAAAA,QAAO,QACrB,UAAA;AAAA,MAAAE,2BAAAA,IAAC,QAAA,EAAK,WAAWF,8BAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,MACtCC,2BAAAA,KAAC,OAAA,EAAI,WAAWD,8BAAAA,QAAO,aACpB,UAAA;AAAA,QAAA,cACCC,2BAAAA,KAAC,OAAA,EAAI,WAAWD,8BAAAA,QAAO,SACpB,UAAA;AAAA,UAAA,gBAAgB,aAAa,SAAS,KACrCE,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,8BAAAA,QAAO;AAAA,cAClB,OAAO,WAAW;AAAA,cAClB,UAAU,CAAC,MAAM,+CAAgB,EAAE,OAAO;AAAA,cAC1C,cAAW;AAAA,cAEV,UAAA,aAAa,IAAI,CAAC,QACjBE,2BAAAA,IAAC,UAAA,EAAuB,OAAO,IAAI,OAChC,UAAA,IAAI,MAAA,GADM,IAAI,KAEjB,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,sBAAsB,mBAAmB,SAAS,KACjDA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,8BAAAA,QAAO;AAAA,cAClB,OAAO,eAAe;AAAA,cACtB,UAAU,CAAC,MACT,2DAAsB,EAAE,OAAO,SAAS;AAAA,cAE1C,cAAW;AAAA,cAEV,UAAA,mBAAmB,IAAI,CAAC,QACvBE,2BAAAA,IAAC,UAAA,EAAuB,OAAO,IAAI,OAChC,UAAA,IAAI,MAAA,GADM,IAAI,KAEjB,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,kBACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWH,KAAAA;AAAAA,gBACTC,8BAAAA,QAAO;AAAA,gBACP,cAAcA,8BAAAA,QAAO;AAAA,cAAA;AAAA,cAEvB,SAAS;AAAA,cACT,cAAW;AAAA,cACZ,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED,GAEJ;AAAA,QAED;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAAA,IAEC,aAAaE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,8BAAAA,QAAO,SAAS,UAAA,yBAAqB;AAAA,IAElE,CAAC,aAAa,yCACZ,OAAA,EAAI,WAAWA,8BAAAA,QAAO,OACrB,UAAA;AAAA,MAAAE,2BAAAA,IAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MACZ,WACCA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWF,8BAAAA,QAAO;AAAA,UAClB,SAAS;AAAA,UACV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,GAEJ;AAAA,IAGD,CAAC,aAAa,CAAC,SAAS,CAAC,WACxBE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,8BAAAA,QAAO,OAAO,UAAA,oBAAA,CAAiB;AAAA,IAGhD,CAAC,aAAa,CAAC,SAAS,WACvBE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,8BAAAA,QAAO,gBACrB,UAAAE,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,QAAQ,QAAQ,WAAW,WAAA;AAAA,QACpC,cAAc;AAAA,QACd,UAAU;AAAA,QACV,UAAQ;AAAA,MAAA;AAAA,IAAA,EACV,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,uBAAuB,cAAc;;"}
|