@databricks/appkit-ui 0.1.5 → 0.3.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/AGENTS.md +57 -2
- package/CLAUDE.md +57 -2
- package/NOTICE.md +2 -0
- package/README.md +21 -15
- package/dist/react/charts/area/index.d.ts +2 -2
- package/dist/react/charts/bar/index.d.ts +2 -2
- package/dist/react/charts/base.d.ts +2 -2
- package/dist/react/charts/create-chart.d.ts +2 -2
- package/dist/react/charts/create-chart.js +1 -2
- package/dist/react/charts/create-chart.js.map +1 -1
- package/dist/react/charts/heatmap/index.d.ts +2 -2
- package/dist/react/charts/line/index.d.ts +2 -2
- package/dist/react/charts/pie/index.d.ts +3 -3
- package/dist/react/charts/radar/index.d.ts +2 -2
- package/dist/react/charts/scatter/index.d.ts +2 -2
- package/dist/react/charts/types.d.ts +0 -5
- package/dist/react/charts/types.d.ts.map +1 -1
- package/dist/react/charts/types.js.map +1 -1
- package/dist/react/charts/wrapper.d.ts +2 -4
- package/dist/react/charts/wrapper.d.ts.map +1 -1
- package/dist/react/charts/wrapper.js +2 -4
- package/dist/react/charts/wrapper.js.map +1 -1
- package/dist/react/hooks/types.d.ts +0 -2
- package/dist/react/hooks/types.d.ts.map +1 -1
- package/dist/react/hooks/use-analytics-query.d.ts +4 -0
- package/dist/react/hooks/use-analytics-query.d.ts.map +1 -1
- package/dist/react/hooks/use-analytics-query.js +5 -2
- package/dist/react/hooks/use-analytics-query.js.map +1 -1
- package/dist/react/hooks/use-chart-data.d.ts +0 -2
- package/dist/react/hooks/use-chart-data.d.ts.map +1 -1
- package/dist/react/hooks/use-chart-data.js +2 -3
- package/dist/react/hooks/use-chart-data.js.map +1 -1
- package/dist/react/hooks/use-mobile.js +3 -3
- package/dist/react/hooks/use-mobile.js.map +1 -1
- package/dist/react/index.d.ts +3 -1
- package/dist/react/index.js +3 -1
- package/dist/react/lib/utils.d.ts +7 -0
- package/dist/react/lib/utils.d.ts.map +1 -0
- package/dist/react/portal-container-context.d.ts +48 -0
- package/dist/react/portal-container-context.d.ts.map +1 -0
- package/dist/react/portal-container-context.js +51 -0
- package/dist/react/portal-container-context.js.map +1 -0
- package/dist/react/table/data-table.d.ts +2 -2
- package/dist/react/table/data-table.d.ts.map +1 -1
- package/dist/react/table/table-wrapper.js +2 -3
- package/dist/react/table/table-wrapper.js.map +1 -1
- package/dist/react/table/types.d.ts.map +1 -1
- package/dist/react/ui/accordion.d.ts +6 -6
- package/dist/react/ui/accordion.d.ts.map +1 -1
- package/dist/react/ui/alert-dialog.d.ts +14 -13
- package/dist/react/ui/alert-dialog.d.ts.map +1 -1
- package/dist/react/ui/alert-dialog.js +3 -1
- package/dist/react/ui/alert-dialog.js.map +1 -1
- package/dist/react/ui/alert.d.ts +5 -5
- package/dist/react/ui/alert.d.ts.map +1 -1
- package/dist/react/ui/aspect-ratio.d.ts +2 -2
- package/dist/react/ui/avatar.d.ts +5 -5
- package/dist/react/ui/avatar.d.ts.map +1 -1
- package/dist/react/ui/badge.d.ts +4 -4
- package/dist/react/ui/badge.d.ts.map +1 -1
- package/dist/react/ui/breadcrumb.d.ts +10 -10
- package/dist/react/ui/breadcrumb.d.ts.map +1 -1
- package/dist/react/ui/button-group.d.ts +4 -4
- package/dist/react/ui/button.d.ts +4 -4
- package/dist/react/ui/button.d.ts.map +1 -1
- package/dist/react/ui/calendar.d.ts +6 -6
- package/dist/react/ui/calendar.d.ts.map +1 -1
- package/dist/react/ui/calendar.js +3 -3
- package/dist/react/ui/calendar.js.map +1 -1
- package/dist/react/ui/card.d.ts +9 -9
- package/dist/react/ui/card.d.ts.map +1 -1
- package/dist/react/ui/carousel.d.ts +7 -7
- package/dist/react/ui/carousel.d.ts.map +1 -1
- package/dist/react/ui/carousel.js +11 -11
- package/dist/react/ui/carousel.js.map +1 -1
- package/dist/react/ui/chart.d.ts +52 -16
- package/dist/react/ui/chart.d.ts.map +1 -1
- package/dist/react/ui/chart.js +23 -7
- package/dist/react/ui/chart.js.map +1 -1
- package/dist/react/ui/checkbox.d.ts +3 -3
- package/dist/react/ui/checkbox.d.ts.map +1 -1
- package/dist/react/ui/checkbox.js +1 -1
- package/dist/react/ui/checkbox.js.map +1 -1
- package/dist/react/ui/collapsible.d.ts +4 -4
- package/dist/react/ui/command.d.ts +12 -12
- package/dist/react/ui/command.d.ts.map +1 -1
- package/dist/react/ui/context-menu.d.ts +21 -20
- package/dist/react/ui/context-menu.d.ts.map +1 -1
- package/dist/react/ui/context-menu.js +11 -6
- package/dist/react/ui/context-menu.js.map +1 -1
- package/dist/react/ui/dialog.d.ts +14 -13
- package/dist/react/ui/dialog.d.ts.map +1 -1
- package/dist/react/ui/dialog.js +3 -1
- package/dist/react/ui/dialog.js.map +1 -1
- package/dist/react/ui/drawer.d.ts +13 -12
- package/dist/react/ui/drawer.d.ts.map +1 -1
- package/dist/react/ui/drawer.js +3 -1
- package/dist/react/ui/drawer.js.map +1 -1
- package/dist/react/ui/dropdown-menu.d.ts +21 -20
- package/dist/react/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/react/ui/dropdown-menu.js +12 -7
- package/dist/react/ui/dropdown-menu.js.map +1 -1
- package/dist/react/ui/empty.d.ts +7 -7
- package/dist/react/ui/field.d.ts +11 -11
- package/dist/react/ui/form.d.ts +9 -9
- package/dist/react/ui/form.js +6 -6
- package/dist/react/ui/form.js.map +1 -1
- package/dist/react/ui/hover-card.d.ts +5 -5
- package/dist/react/ui/hover-card.d.ts.map +1 -1
- package/dist/react/ui/hover-card.js +2 -0
- package/dist/react/ui/hover-card.js.map +1 -1
- package/dist/react/ui/input-group.d.ts +8 -8
- package/dist/react/ui/input-group.d.ts.map +1 -1
- package/dist/react/ui/input-otp.d.ts +8 -8
- package/dist/react/ui/input-otp.d.ts.map +1 -1
- package/dist/react/ui/input-otp.js +2 -2
- package/dist/react/ui/input-otp.js.map +1 -1
- package/dist/react/ui/input.d.ts +3 -3
- package/dist/react/ui/input.d.ts.map +1 -1
- package/dist/react/ui/item.d.ts +13 -13
- package/dist/react/ui/item.d.ts.map +1 -1
- package/dist/react/ui/kbd.d.ts +3 -3
- package/dist/react/ui/label.d.ts +3 -3
- package/dist/react/ui/label.d.ts.map +1 -1
- package/dist/react/ui/menubar.d.ts +22 -21
- package/dist/react/ui/menubar.d.ts.map +1 -1
- package/dist/react/ui/menubar.js +3 -1
- package/dist/react/ui/menubar.js.map +1 -1
- package/dist/react/ui/navigation-menu.d.ts +11 -11
- package/dist/react/ui/navigation-menu.d.ts.map +1 -1
- package/dist/react/ui/pagination.d.ts +10 -10
- package/dist/react/ui/pagination.d.ts.map +1 -1
- package/dist/react/ui/popover.d.ts +6 -6
- package/dist/react/ui/popover.d.ts.map +1 -1
- package/dist/react/ui/popover.js +11 -7
- package/dist/react/ui/popover.js.map +1 -1
- package/dist/react/ui/progress.d.ts +3 -3
- package/dist/react/ui/progress.d.ts.map +1 -1
- package/dist/react/ui/radio-group.d.ts +4 -4
- package/dist/react/ui/radio-group.d.ts.map +1 -1
- package/dist/react/ui/resizable.d.ts +6 -6
- package/dist/react/ui/resizable.d.ts.map +1 -1
- package/dist/react/ui/scroll-area.d.ts +4 -4
- package/dist/react/ui/scroll-area.d.ts.map +1 -1
- package/dist/react/ui/select.d.ts +13 -13
- package/dist/react/ui/select.d.ts.map +1 -1
- package/dist/react/ui/select.js +19 -15
- package/dist/react/ui/select.js.map +1 -1
- package/dist/react/ui/separator.d.ts +3 -3
- package/dist/react/ui/separator.d.ts.map +1 -1
- package/dist/react/ui/sheet.d.ts +11 -11
- package/dist/react/ui/sheet.d.ts.map +1 -1
- package/dist/react/ui/sheet.js +3 -1
- package/dist/react/ui/sheet.js.map +1 -1
- package/dist/react/ui/sidebar.d.ts +34 -34
- package/dist/react/ui/sidebar.d.ts.map +1 -1
- package/dist/react/ui/sidebar.js +10 -10
- package/dist/react/ui/sidebar.js.map +1 -1
- package/dist/react/ui/skeleton.d.ts +2 -2
- package/dist/react/ui/slider.d.ts +3 -3
- package/dist/react/ui/slider.d.ts.map +1 -1
- package/dist/react/ui/slider.js +2 -2
- package/dist/react/ui/slider.js.map +1 -1
- package/dist/react/ui/sonner.d.ts +2 -2
- package/dist/react/ui/spinner.d.ts +2 -2
- package/dist/react/ui/switch.d.ts +3 -3
- package/dist/react/ui/switch.d.ts.map +1 -1
- package/dist/react/ui/table.d.ts +10 -10
- package/dist/react/ui/table.d.ts.map +1 -1
- package/dist/react/ui/tabs.d.ts +6 -6
- package/dist/react/ui/tabs.d.ts.map +1 -1
- package/dist/react/ui/textarea.d.ts +3 -3
- package/dist/react/ui/textarea.d.ts.map +1 -1
- package/dist/react/ui/toggle-group.d.ts +5 -5
- package/dist/react/ui/toggle-group.d.ts.map +1 -1
- package/dist/react/ui/toggle-group.js +3 -3
- package/dist/react/ui/toggle-group.js.map +1 -1
- package/dist/react/ui/toggle.d.ts +3 -3
- package/dist/react/ui/toggle.d.ts.map +1 -1
- package/dist/react/ui/tooltip.d.ts +6 -6
- package/dist/react/ui/tooltip.d.ts.map +1 -1
- package/dist/react/ui/tooltip.js +11 -7
- package/dist/react/ui/tooltip.js.map +1 -1
- package/llms.txt +57 -2
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -431,9 +431,12 @@ WHERE workspace_id = :workspaceId
|
|
|
431
431
|
HTTP endpoints exposed (mounted under `/api/analytics`):
|
|
432
432
|
|
|
433
433
|
- `POST /api/analytics/query/:query_key`
|
|
434
|
-
- `POST /api/analytics/users/me/query/:query_key`
|
|
435
434
|
- `GET /api/analytics/arrow-result/:jobId`
|
|
436
|
-
|
|
435
|
+
|
|
436
|
+
**Query file naming convention determines execution context:**
|
|
437
|
+
|
|
438
|
+
- `config/queries/<query_key>.sql` - Executes as service principal (shared cache)
|
|
439
|
+
- `config/queries/<query_key>.obo.sql` - Executes as user (OBO = On-Behalf-Of, per-user cache)
|
|
437
440
|
|
|
438
441
|
Formats:
|
|
439
442
|
|
|
@@ -668,6 +671,56 @@ export function SpendChart() {
|
|
|
668
671
|
}
|
|
669
672
|
```
|
|
670
673
|
|
|
674
|
+
**Chart props reference (important):**
|
|
675
|
+
|
|
676
|
+
Charts are **self-contained ECharts components**. Configure via props, NOT children:
|
|
677
|
+
|
|
678
|
+
```tsx
|
|
679
|
+
// ✅ Correct: use props for customization
|
|
680
|
+
<BarChart
|
|
681
|
+
queryKey="sales_by_region"
|
|
682
|
+
parameters={{}}
|
|
683
|
+
xKey="region" // X-axis field
|
|
684
|
+
yKey={["revenue", "expenses"]} // Y-axis field(s) - string or string[]
|
|
685
|
+
colors={['#40d1f5', '#4462c9']} // Custom colors
|
|
686
|
+
stacked // Stack bars (BarChart, AreaChart)
|
|
687
|
+
orientation="horizontal" // "vertical" (default) | "horizontal"
|
|
688
|
+
showLegend // Show legend
|
|
689
|
+
height={400} // Height in pixels (default: 300)
|
|
690
|
+
/>
|
|
691
|
+
|
|
692
|
+
<LineChart
|
|
693
|
+
queryKey="trend_data"
|
|
694
|
+
parameters={{}}
|
|
695
|
+
xKey="date"
|
|
696
|
+
yKey="value"
|
|
697
|
+
smooth // Smooth curves (default: true)
|
|
698
|
+
showSymbol={false} // Hide data point markers
|
|
699
|
+
/>
|
|
700
|
+
```
|
|
701
|
+
|
|
702
|
+
**❌ CRITICAL: Charts do NOT accept Recharts children**
|
|
703
|
+
|
|
704
|
+
```tsx
|
|
705
|
+
// ❌ WRONG - AppKit charts are NOT Recharts wrappers
|
|
706
|
+
import { BarChart } from "@databricks/appkit-ui/react";
|
|
707
|
+
import { Bar, XAxis, YAxis, CartesianGrid } from "recharts";
|
|
708
|
+
|
|
709
|
+
<BarChart queryKey="data" parameters={{}}>
|
|
710
|
+
<CartesianGrid /> // ❌ This will cause TypeScript errors
|
|
711
|
+
<XAxis dataKey="x" /> // ❌ Not supported
|
|
712
|
+
<Bar dataKey="y" /> // ❌ Not supported
|
|
713
|
+
</BarChart>
|
|
714
|
+
|
|
715
|
+
// ✅ CORRECT - use props instead
|
|
716
|
+
<BarChart
|
|
717
|
+
queryKey="data"
|
|
718
|
+
parameters={{}}
|
|
719
|
+
xKey="x"
|
|
720
|
+
yKey="y"
|
|
721
|
+
/>
|
|
722
|
+
```
|
|
723
|
+
|
|
671
724
|
### SQL helpers (`sql.*`)
|
|
672
725
|
|
|
673
726
|
Use these to build typed parameters (they return marker objects: `{ __sql_type, value }`):
|
|
@@ -1169,6 +1222,7 @@ env:
|
|
|
1169
1222
|
- `useMemo` wraps parameters objects
|
|
1170
1223
|
- Loading/error/empty states are explicit
|
|
1171
1224
|
- Charts use `format="auto"` unless you have a reason to force `"json"`/`"arrow"`
|
|
1225
|
+
- Charts use props (`xKey`, `yKey`, `colors`) NOT children (they're ECharts-based, not Recharts)
|
|
1172
1226
|
- If using tooltips: root is wrapped with `<TooltipProvider>`
|
|
1173
1227
|
|
|
1174
1228
|
- **Never**
|
|
@@ -1176,4 +1230,5 @@ env:
|
|
|
1176
1230
|
- Don't pass untyped raw params for annotated queries
|
|
1177
1231
|
- Don't ignore `createApp()`'s promise
|
|
1178
1232
|
- Don't invent UI components not listed in this file
|
|
1233
|
+
- Don't pass Recharts children (`<Bar>`, `<XAxis>`, etc.) to AppKit chart components
|
|
1179
1234
|
|
package/CLAUDE.md
CHANGED
|
@@ -431,9 +431,12 @@ WHERE workspace_id = :workspaceId
|
|
|
431
431
|
HTTP endpoints exposed (mounted under `/api/analytics`):
|
|
432
432
|
|
|
433
433
|
- `POST /api/analytics/query/:query_key`
|
|
434
|
-
- `POST /api/analytics/users/me/query/:query_key`
|
|
435
434
|
- `GET /api/analytics/arrow-result/:jobId`
|
|
436
|
-
|
|
435
|
+
|
|
436
|
+
**Query file naming convention determines execution context:**
|
|
437
|
+
|
|
438
|
+
- `config/queries/<query_key>.sql` - Executes as service principal (shared cache)
|
|
439
|
+
- `config/queries/<query_key>.obo.sql` - Executes as user (OBO = On-Behalf-Of, per-user cache)
|
|
437
440
|
|
|
438
441
|
Formats:
|
|
439
442
|
|
|
@@ -668,6 +671,56 @@ export function SpendChart() {
|
|
|
668
671
|
}
|
|
669
672
|
```
|
|
670
673
|
|
|
674
|
+
**Chart props reference (important):**
|
|
675
|
+
|
|
676
|
+
Charts are **self-contained ECharts components**. Configure via props, NOT children:
|
|
677
|
+
|
|
678
|
+
```tsx
|
|
679
|
+
// ✅ Correct: use props for customization
|
|
680
|
+
<BarChart
|
|
681
|
+
queryKey="sales_by_region"
|
|
682
|
+
parameters={{}}
|
|
683
|
+
xKey="region" // X-axis field
|
|
684
|
+
yKey={["revenue", "expenses"]} // Y-axis field(s) - string or string[]
|
|
685
|
+
colors={['#40d1f5', '#4462c9']} // Custom colors
|
|
686
|
+
stacked // Stack bars (BarChart, AreaChart)
|
|
687
|
+
orientation="horizontal" // "vertical" (default) | "horizontal"
|
|
688
|
+
showLegend // Show legend
|
|
689
|
+
height={400} // Height in pixels (default: 300)
|
|
690
|
+
/>
|
|
691
|
+
|
|
692
|
+
<LineChart
|
|
693
|
+
queryKey="trend_data"
|
|
694
|
+
parameters={{}}
|
|
695
|
+
xKey="date"
|
|
696
|
+
yKey="value"
|
|
697
|
+
smooth // Smooth curves (default: true)
|
|
698
|
+
showSymbol={false} // Hide data point markers
|
|
699
|
+
/>
|
|
700
|
+
```
|
|
701
|
+
|
|
702
|
+
**❌ CRITICAL: Charts do NOT accept Recharts children**
|
|
703
|
+
|
|
704
|
+
```tsx
|
|
705
|
+
// ❌ WRONG - AppKit charts are NOT Recharts wrappers
|
|
706
|
+
import { BarChart } from "@databricks/appkit-ui/react";
|
|
707
|
+
import { Bar, XAxis, YAxis, CartesianGrid } from "recharts";
|
|
708
|
+
|
|
709
|
+
<BarChart queryKey="data" parameters={{}}>
|
|
710
|
+
<CartesianGrid /> // ❌ This will cause TypeScript errors
|
|
711
|
+
<XAxis dataKey="x" /> // ❌ Not supported
|
|
712
|
+
<Bar dataKey="y" /> // ❌ Not supported
|
|
713
|
+
</BarChart>
|
|
714
|
+
|
|
715
|
+
// ✅ CORRECT - use props instead
|
|
716
|
+
<BarChart
|
|
717
|
+
queryKey="data"
|
|
718
|
+
parameters={{}}
|
|
719
|
+
xKey="x"
|
|
720
|
+
yKey="y"
|
|
721
|
+
/>
|
|
722
|
+
```
|
|
723
|
+
|
|
671
724
|
### SQL helpers (`sql.*`)
|
|
672
725
|
|
|
673
726
|
Use these to build typed parameters (they return marker objects: `{ __sql_type, value }`):
|
|
@@ -1169,6 +1222,7 @@ env:
|
|
|
1169
1222
|
- `useMemo` wraps parameters objects
|
|
1170
1223
|
- Loading/error/empty states are explicit
|
|
1171
1224
|
- Charts use `format="auto"` unless you have a reason to force `"json"`/`"arrow"`
|
|
1225
|
+
- Charts use props (`xKey`, `yKey`, `colors`) NOT children (they're ECharts-based, not Recharts)
|
|
1172
1226
|
- If using tooltips: root is wrapped with `<TooltipProvider>`
|
|
1173
1227
|
|
|
1174
1228
|
- **Never**
|
|
@@ -1176,4 +1230,5 @@ env:
|
|
|
1176
1230
|
- Don't pass untyped raw params for annotated queries
|
|
1177
1231
|
- Don't ignore `createApp()`'s promise
|
|
1178
1232
|
- Don't invent UI components not listed in this file
|
|
1233
|
+
- Don't pass Recharts children (`<Bar>`, `<XAxis>`, etc.) to AppKit chart components
|
|
1179
1234
|
|
package/NOTICE.md
CHANGED
|
@@ -6,6 +6,7 @@ This Software contains code from the following open source projects:
|
|
|
6
6
|
|
|
7
7
|
| Name | Installed version | License | Code |
|
|
8
8
|
| :--------------- | :---------------- | :----------- | :--------------------------------------------------- |
|
|
9
|
+
| [@ast-grep/napi](https://www.npmjs.com/package/@ast-grep/napi) | 0.37.0 | MIT | https://ast-grep.github.io |
|
|
9
10
|
| [@hookform/resolvers](https://www.npmjs.com/package/@hookform/resolvers) | 5.2.2 | MIT | https://react-hook-form.com |
|
|
10
11
|
| [@opentelemetry/api](https://www.npmjs.com/package/@opentelemetry/api) | 1.9.0 | Apache-2.0 | https://github.com/open-telemetry/opentelemetry-js/tree/main/api |
|
|
11
12
|
| [@opentelemetry/api-logs](https://www.npmjs.com/package/@opentelemetry/api-logs) | 0.208.0 | Apache-2.0 | https://github.com/open-telemetry/opentelemetry-js/tree/main/experimental/packages/api-logs |
|
|
@@ -63,6 +64,7 @@ This Software contains code from the following open source projects:
|
|
|
63
64
|
| [input-otp](https://www.npmjs.com/package/input-otp) | 1.4.2 | MIT | https://input-otp.rodz.dev/ |
|
|
64
65
|
| [lucide-react](https://www.npmjs.com/package/lucide-react) | 0.554.0 | ISC | https://lucide.dev |
|
|
65
66
|
| [next-themes](https://www.npmjs.com/package/next-themes) | 0.4.6 | MIT | https://github.com/pacocoursey/next-themes#readme |
|
|
67
|
+
| [obug](https://www.npmjs.com/package/obug) | 2.1.1 | MIT | https://github.com/sxzz/obug#readme |
|
|
66
68
|
| [pg](https://www.npmjs.com/package/pg) | 8.16.3 | MIT | https://github.com/brianc/node-postgres |
|
|
67
69
|
| [react-day-picker](https://www.npmjs.com/package/react-day-picker) | 9.12.0 | MIT | https://daypicker.dev |
|
|
68
70
|
| [react-hook-form](https://www.npmjs.com/package/react-hook-form) | 7.68.0 | MIT | https://react-hook-form.com |
|
package/README.md
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
# AppKit
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
Build Databricks Apps faster with our brand-new Node.js + React SDK. Built for humans and AI.
|
|
4
|
+
|
|
5
|
+
> [!WARNING] PREVIEW - NOT FOR PRODUCTION USE
|
|
5
6
|
>
|
|
6
7
|
> **This SDK is in preview and is subject to change without notice.**
|
|
7
8
|
>
|
|
@@ -11,25 +12,30 @@
|
|
|
11
12
|
> - 📝 **Use for development and testing only**
|
|
12
13
|
>
|
|
13
14
|
|
|
14
|
-
##
|
|
15
|
+
## Introduction
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
AppKit is a TypeScript SDK for building production-ready Databricks applications with a plugin-based architecture. It provides opinionated defaults, built-in observability, and seamless integration with Databricks services.
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
AppKit simplifies building data applications on Databricks by providing:
|
|
20
|
+
|
|
21
|
+
- **Plugin architecture**: Modular design with built-in server and analytics plugins
|
|
22
|
+
- **Type safety**: End-to-end TypeScript with automatic query type generation
|
|
23
|
+
- **Production-ready features**: Built-in caching, telemetry, retry logic, and error handling
|
|
24
|
+
- **Developer experience**: Remote hot reload, file-based queries, optimized for AI-assisted development
|
|
25
|
+
- **Databricks native**: Seamless integration with SQL Warehouses, Unity Catalog, and other workspace resources
|
|
19
26
|
|
|
20
|
-
|
|
27
|
+
## Getting started
|
|
21
28
|
|
|
22
|
-
|
|
29
|
+
Follow the [Getting Started](https://databricks.github.io/appkit/docs/) guide to get started with AppKit.
|
|
23
30
|
|
|
24
|
-
|
|
25
|
-
# From root
|
|
26
|
-
pnpm docs:dev # Start dev server
|
|
27
|
-
pnpm docs:build # Build docs
|
|
28
|
-
pnpm docs:serve # Serve built docs
|
|
29
|
-
```
|
|
31
|
+
## Documentation
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
📖 For full AppKit documentation, visit the [AppKit Documentation](https://databricks.github.io/appkit/) website.
|
|
32
34
|
|
|
33
35
|
👉 For AI/code assistants:
|
|
34
36
|
- Use [llms-compact.txt](./llms-compact.txt) for quick usage patterns.
|
|
35
|
-
- See [llms.txt](./llms.txt) for full guidance and anti-patterns.
|
|
37
|
+
- See [llms.txt](./llms.txt) for full guidance and anti-patterns.
|
|
38
|
+
|
|
39
|
+
## Contributing
|
|
40
|
+
|
|
41
|
+
See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and contribution guidelines.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AreaChartProps } from "../types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime275 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/area/index.d.ts
|
|
5
5
|
|
|
@@ -25,7 +25,7 @@ import * as react_jsx_runtime273 from "react/jsx-runtime";
|
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
27
|
declare const AreaChart: {
|
|
28
|
-
(props: AreaChartProps):
|
|
28
|
+
(props: AreaChartProps): react_jsx_runtime275.JSX.Element;
|
|
29
29
|
displayName: string;
|
|
30
30
|
};
|
|
31
31
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BarChartProps } from "../types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime276 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/bar/index.d.ts
|
|
5
5
|
|
|
@@ -35,7 +35,7 @@ import * as react_jsx_runtime274 from "react/jsx-runtime";
|
|
|
35
35
|
* ```
|
|
36
36
|
*/
|
|
37
37
|
declare const BarChart: {
|
|
38
|
-
(props: BarChartProps):
|
|
38
|
+
(props: BarChartProps): react_jsx_runtime276.JSX.Element;
|
|
39
39
|
displayName: string;
|
|
40
40
|
};
|
|
41
41
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChartColorPalette, ChartData, ChartType, Orientation } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime283 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/base.d.ts
|
|
5
5
|
interface BaseChartProps {
|
|
@@ -83,7 +83,7 @@ declare function BaseChart({
|
|
|
83
83
|
max,
|
|
84
84
|
options: customOptions,
|
|
85
85
|
className
|
|
86
|
-
}: BaseChartProps):
|
|
86
|
+
}: BaseChartProps): react_jsx_runtime283.JSX.Element;
|
|
87
87
|
//#endregion
|
|
88
88
|
export { BaseChart, BaseChartProps };
|
|
89
89
|
//# sourceMappingURL=base.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChartType, UnifiedChartProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime284 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/create-chart.d.ts
|
|
5
5
|
|
|
@@ -18,7 +18,7 @@ import * as react_jsx_runtime282 from "react/jsx-runtime";
|
|
|
18
18
|
* ```
|
|
19
19
|
*/
|
|
20
20
|
declare function createChart<TProps extends UnifiedChartProps>(chartType: ChartType, displayName: string): {
|
|
21
|
-
(props: TProps):
|
|
21
|
+
(props: TProps): react_jsx_runtime284.JSX.Element;
|
|
22
22
|
displayName: string;
|
|
23
23
|
};
|
|
24
24
|
//#endregion
|
|
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
19
19
|
*/
|
|
20
20
|
function createChart(chartType, displayName) {
|
|
21
21
|
const Component = (props) => {
|
|
22
|
-
const { queryKey, parameters, format, transformer,
|
|
22
|
+
const { queryKey, parameters, format, transformer, data, height = 300, className, ariaLabel, testId, ...chartProps } = props;
|
|
23
23
|
return /* @__PURE__ */ jsx(ChartWrapper, {
|
|
24
24
|
...data !== void 0 ? {
|
|
25
25
|
data,
|
|
@@ -32,7 +32,6 @@ function createChart(chartType, displayName) {
|
|
|
32
32
|
parameters,
|
|
33
33
|
format,
|
|
34
34
|
transformer,
|
|
35
|
-
asUser,
|
|
36
35
|
height,
|
|
37
36
|
className,
|
|
38
37
|
ariaLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-chart.js","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":["import { BaseChart } from \"./base\";\nimport type { ChartType, UnifiedChartProps } from \"./types\";\nimport { ChartWrapper } from \"./wrapper\";\n\n/**\n * Factory function to create chart components.\n * Eliminates boilerplate by generating components with the same pattern.\n *\n * @param chartType - The ECharts chart type\n * @param displayName - Component display name for React DevTools\n * @returns A typed chart component\n *\n * @example\n * ```tsx\n * export const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n * export const LineChart = createChart<LineChartProps>(\"line\", \"LineChart\");\n * ```\n */\nexport function createChart<TProps extends UnifiedChartProps>(\n chartType: ChartType,\n displayName: string,\n) {\n const Component = (props: TProps) => {\n const {\n // Query props\n queryKey,\n parameters,\n format,\n transformer,\n
|
|
1
|
+
{"version":3,"file":"create-chart.js","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":["import { BaseChart } from \"./base\";\nimport type { ChartType, UnifiedChartProps } from \"./types\";\nimport { ChartWrapper } from \"./wrapper\";\n\n/**\n * Factory function to create chart components.\n * Eliminates boilerplate by generating components with the same pattern.\n *\n * @param chartType - The ECharts chart type\n * @param displayName - Component display name for React DevTools\n * @returns A typed chart component\n *\n * @example\n * ```tsx\n * export const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n * export const LineChart = createChart<LineChartProps>(\"line\", \"LineChart\");\n * ```\n */\nexport function createChart<TProps extends UnifiedChartProps>(\n chartType: ChartType,\n displayName: string,\n) {\n const Component = (props: TProps) => {\n const {\n // Query props\n queryKey,\n parameters,\n format,\n transformer,\n // Data props\n data,\n // Common props\n height = 300,\n className,\n ariaLabel,\n testId,\n // All remaining props pass through to BaseChart\n ...chartProps\n } = props as TProps & {\n queryKey?: string;\n parameters?: Record<string, unknown>;\n format?: string;\n transformer?: unknown;\n data?: unknown;\n height?: number;\n className?: string;\n ariaLabel?: string;\n testId?: string;\n };\n\n const wrapperProps =\n data !== undefined\n ? { data, height, className, ariaLabel, testId }\n : {\n queryKey: queryKey as string,\n parameters,\n format,\n transformer,\n height,\n className,\n ariaLabel,\n testId: testId ?? `${chartType}-chart-${queryKey}`,\n };\n\n return (\n <ChartWrapper {...wrapperProps}>\n {(chartData) => (\n <BaseChart\n data={chartData}\n chartType={chartType}\n height={height}\n className={className}\n {...chartProps}\n />\n )}\n </ChartWrapper>\n );\n };\n\n Component.displayName = displayName;\n return Component;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,YACd,WACA,aACA;CACA,MAAM,aAAa,UAAkB;EACnC,MAAM,EAEJ,UACA,YACA,QACA,aAEA,MAEA,SAAS,KACT,WACA,WACA,QAEA,GAAG,eACD;AA0BJ,SACE,oBAAC;GAAa,GAdd,SAAS,SACL;IAAE;IAAM;IAAQ;IAAW;IAAW;IAAQ,GAC9C;IACY;IACV;IACA;IACA;IACA;IACA;IACA;IACA,QAAQ,UAAU,GAAG,UAAU,SAAS;IACzC;cAID,cACA,oBAAC;IACC,MAAM;IACK;IACH;IACG;IACX,GAAI;KACJ;IAES;;AAInB,WAAU,cAAc;AACxB,QAAO"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HeatmapChartProps } from "../types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime277 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/heatmap/index.d.ts
|
|
5
5
|
|
|
@@ -34,7 +34,7 @@ import * as react_jsx_runtime275 from "react/jsx-runtime";
|
|
|
34
34
|
* ```
|
|
35
35
|
*/
|
|
36
36
|
declare const HeatmapChart: {
|
|
37
|
-
(props: HeatmapChartProps):
|
|
37
|
+
(props: HeatmapChartProps): react_jsx_runtime277.JSX.Element;
|
|
38
38
|
displayName: string;
|
|
39
39
|
};
|
|
40
40
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LineChartProps } from "../types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime278 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/line/index.d.ts
|
|
5
5
|
|
|
@@ -26,7 +26,7 @@ import * as react_jsx_runtime276 from "react/jsx-runtime";
|
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
28
|
declare const LineChart: {
|
|
29
|
-
(props: LineChartProps):
|
|
29
|
+
(props: LineChartProps): react_jsx_runtime278.JSX.Element;
|
|
30
30
|
displayName: string;
|
|
31
31
|
};
|
|
32
32
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DonutChartProps, PieChartProps } from "../types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime279 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/pie/index.d.ts
|
|
5
5
|
|
|
@@ -25,7 +25,7 @@ import * as react_jsx_runtime277 from "react/jsx-runtime";
|
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
27
|
declare const PieChart: {
|
|
28
|
-
(props: PieChartProps):
|
|
28
|
+
(props: PieChartProps): react_jsx_runtime279.JSX.Element;
|
|
29
29
|
displayName: string;
|
|
30
30
|
};
|
|
31
31
|
/**
|
|
@@ -49,7 +49,7 @@ declare const PieChart: {
|
|
|
49
49
|
* ```
|
|
50
50
|
*/
|
|
51
51
|
declare const DonutChart: {
|
|
52
|
-
(props: DonutChartProps):
|
|
52
|
+
(props: DonutChartProps): react_jsx_runtime279.JSX.Element;
|
|
53
53
|
displayName: string;
|
|
54
54
|
};
|
|
55
55
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { RadarChartProps } from "../types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime281 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/radar/index.d.ts
|
|
5
5
|
|
|
@@ -24,7 +24,7 @@ import * as react_jsx_runtime279 from "react/jsx-runtime";
|
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
26
|
declare const RadarChart: {
|
|
27
|
-
(props: RadarChartProps):
|
|
27
|
+
(props: RadarChartProps): react_jsx_runtime281.JSX.Element;
|
|
28
28
|
displayName: string;
|
|
29
29
|
};
|
|
30
30
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ScatterChartProps } from "../types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime282 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/scatter/index.d.ts
|
|
5
5
|
|
|
@@ -24,7 +24,7 @@ import * as react_jsx_runtime280 from "react/jsx-runtime";
|
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
26
|
declare const ScatterChart: {
|
|
27
|
-
(props: ScatterChartProps):
|
|
27
|
+
(props: ScatterChartProps): react_jsx_runtime282.JSX.Element;
|
|
28
28
|
displayName: string;
|
|
29
29
|
};
|
|
30
30
|
//#endregion
|
|
@@ -57,11 +57,6 @@ interface QueryProps extends ChartBaseProps {
|
|
|
57
57
|
format?: DataFormat;
|
|
58
58
|
/** Transform raw data before rendering */
|
|
59
59
|
transformer?: <T>(data: T) => T;
|
|
60
|
-
/**
|
|
61
|
-
* Whether to execute the query as the current user
|
|
62
|
-
* @default false
|
|
63
|
-
*/
|
|
64
|
-
asUser?: boolean;
|
|
65
60
|
data?: never;
|
|
66
61
|
}
|
|
67
62
|
/** Props for direct data injection */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/charts/types.ts"],"sourcesContent":[],"mappings":";;;;KAOY,UAAA;AAAZ;AAGY,KAAA,WAAA,GAAW,UAAA,GAAA,YAAA;AAGvB;AAWY,KAXA,SAAA,GAWS,KAAA,GAAA,MAAA,GAAA,MAAA,GAAA,KAAA,GAAA,OAAA,GAAA,SAAA,GAAA,OAAA,GAAA,SAAA;;AAAG,KAAZ,SAAA,GAAY,KAAA,GAAQ,MAAR,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA;;AAAc,KAO1B,iBAAA,GAP0B,aAAA,GAAA,YAAA,GAAA,WAAA;AAOtC;AAGiB,UAAA,cAAA,CAAc;EAAA;OAWd,CAAA,EAAA,MAAA;;EAmBC,UAAA,CAAA,EAAA,OAAA;EAQD;;;;;;cAAmB,CAAA,EA3BnB,iBA2BmB;EAAc;
|
|
1
|
+
{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/charts/types.ts"],"sourcesContent":[],"mappings":";;;;KAOY,UAAA;AAAZ;AAGY,KAAA,WAAA,GAAW,UAAA,GAAA,YAAA;AAGvB;AAWY,KAXA,SAAA,GAWS,KAAA,GAAA,MAAA,GAAA,MAAA,GAAA,KAAA,GAAA,OAAA,GAAA,SAAA,GAAA,OAAA,GAAA,SAAA;;AAAG,KAAZ,SAAA,GAAY,KAAA,GAAQ,MAAR,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA;;AAAc,KAO1B,iBAAA,GAP0B,aAAA,GAAA,YAAA,GAAA,WAAA;AAOtC;AAGiB,UAAA,cAAA,CAAc;EAAA;OAWd,CAAA,EAAA,MAAA;;EAmBC,UAAA,CAAA,EAAA,OAAA;EAQD;;;;;;cAAmB,CAAA,EA3BnB,iBA2BmB;EAAc;EAwBjC,MAAA,CAAA,EAAA,MAAU,EAAA;EAAA;QAEnB,CAAA,EAAA,MAAA;;EAFyC,SAAA,CAAA,EAAA,MAAA;EAgBrC;EAAiB,IAAA,CAAA,EAAA,MAAA;;MAAgB,CAAA,EAAA,MAAA,GAAA,MAAA,EAAA;EAAS;EAOrC,SAAA,CAAA,EAAA,MAAA;EAQA;EAUA,MAAA,CAAA,EAAA,MAAA;EAYA;EAMA,OAAA,CAAA,EA3FL,MA2FK,CAAA,MAAA,EAAqB,OAAA,CAAA;AAUtC;AAMA;AAkBY,UArHK,UAAA,SAAmB,cAqHX,CAAA;EAAA;UAAI,EAAA,MAAA;;YAA0B,CAAA,EAjHxC,MAiHwC,CAAA,MAAA,EAAA,OAAA,CAAA;EAAqB;AAC5E;;;;;;EACY,MAAA,CAAA,EA3GD,UA2Ge;EAAA;aAAI,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAzGJ,CAyGI,EAAA,GAzGE,CAyGF;MAAa,CAAA,EAAA,KAAA;;;AAC/B,UAhGK,SAAA,SAAkB,cAgGN,CAAA;EAAA;MAAI,EA9FzB,SA8FyB;UAAa,CAAA,EAAA,KAAA;YAC5C,CAAA,EAAA,KAAA;EAAyB,MAAA,CAAA,EAAA,KAAA;EACf,WAAA,CAAA,EAAA,KAAa;;;AAAiB,KAlF9B,iBAAA,GAAoB,UAkFU,GAlFG,SAkFH;;AAAkC,UA3E3D,qBAAA,CA2E2D;EAChE;EAAe,WAAA,CAAA,EA1EX,WA0EW;;SAAiB,CAAA,EAAA,OAAA;;;AAChC,UArEK,sBAAA,CAqEU;EAAA;aAAI,CAAA,EAnEf,WAmEe;;YAC7B,CAAA,EAAA,OAAA;EAAuB;EACb,MAAA,CAAA,EAAA,OAAA;;;AAAkC,UA7D7B,sBAAA,CA6D6B;;EACnB,WAAA,CAAA,EA5DX,WA4DW;EAOV;EAQA,UAAA,CAAA,EAAA,OAAA;EAAoB;QACzB,CAAA,EAAA,OAAA;;EADwD,OAAA,CAAA,EAAA,OAAA;AAKpE;;AAAmC,UAtElB,yBAAA,CAsEkB;;EAAyB,UAAA,CAAA,EAAA,MAAA;AAW5D;;AAAoC,UA3EnB,qBAAA,CA2EmB;;EAAuC,WAAA,CAAA,EAAA,MAAA;EAS3D;EAAW,UAAA,CAAA,EAAA,OAAA;;eAAqC,CAAA,EAAA,SAAA,GAAA,QAAA,GAAA,QAAA;;;UA1E/C,uBAAA;;;;;UAMA,yBAAA;;;;;;;;;;;;;KAkBL,aAAA,IAAiB,aAAa,aAAa;KAC3C,cAAA,IAAkB,aAAa,aAAa;KAC5C,cAAA,IAAkB,aAAa,aAAa;KAC5C,iBAAA,IAAqB,aAAa,aAC5C;KACU,aAAA,IAAiB,aAAa,aAAa;KAC3C,eAAA,IAAmB,aAAa,aAAa;KAC7C,eAAA,IAAmB,aAAa,aAC1C;KACU,iBAAA,IAAqB,aAAa,aAC5C;;UAOe,uBAAA;;;;;;;UAQA,mBAAA,SAA4B;YACjC;;;iBAII,YAAA,OAAmB,oBAAoB;;iBAWvC,YAAA,QAAoB,6BAA6B;;iBASjD,WAAA,QAAmB,6BAA6B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../src/react/charts/types.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\n\n// ============================================================================\n// Data Format Types\n// ============================================================================\n\n/** Supported data formats for analytics queries */\nexport type DataFormat = \"json\" | \"arrow\" | \"auto\";\n\n/** Chart orientation */\nexport type Orientation = \"vertical\" | \"horizontal\";\n\n/** Supported chart types */\nexport type ChartType =\n | \"bar\"\n | \"line\"\n | \"area\"\n | \"pie\"\n | \"donut\"\n | \"scatter\"\n | \"radar\"\n | \"heatmap\";\n\n/** Data that can be passed to unified charts */\nexport type ChartData = Table | Record<string, unknown>[];\n\n// ============================================================================\n// Base Props (shared by all charts)\n// ============================================================================\n\n/** Color palette types for different visualization needs */\nexport type ChartColorPalette = \"categorical\" | \"sequential\" | \"diverging\";\n\n/** Common visual and behavior props for all charts */\nexport interface ChartBaseProps {\n /** Chart title */\n title?: string;\n /** Show legend */\n showLegend?: boolean;\n /**\n * Color palette to use. Auto-selected based on chart type if not specified.\n * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n * - \"sequential\": Gradient for magnitude/intensity (heatmap)\n * - \"diverging\": Two-tone for positive/negative values\n */\n colorPalette?: ChartColorPalette;\n /** Custom colors for series (overrides colorPalette) */\n colors?: string[];\n /** Chart height in pixels @default 300 */\n height?: number;\n /** Additional CSS classes */\n className?: string;\n\n /** X-axis field key. Auto-detected from schema if not provided. */\n xKey?: string;\n /** Y-axis field key(s). Auto-detected from schema if not provided. */\n yKey?: string | string[];\n\n /** Accessibility label for screen readers */\n ariaLabel?: string;\n /** Test ID for automated testing */\n testId?: string;\n\n /** Additional ECharts options to merge */\n options?: Record<string, unknown>;\n}\n\n// ============================================================================\n// Query-based Props (chart fetches data)\n// ============================================================================\n\n/** Props for query-based data fetching */\nexport interface QueryProps extends ChartBaseProps {\n /** Analytics query key registered with analytics plugin */\n queryKey: string;\n /** Query parameters passed to the analytics endpoint */\n parameters?: Record<string, unknown>;\n /**\n * Data format to use\n * - \"json\": Use JSON format (smaller payloads, simpler)\n * - \"arrow\": Use Arrow format (faster for large datasets)\n * - \"auto\": Automatically select based on expected data size\n * @default \"auto\"\n */\n format?: DataFormat;\n /** Transform raw data before rendering */\n transformer?: <T>(data: T) => T;\n
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../src/react/charts/types.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\n\n// ============================================================================\n// Data Format Types\n// ============================================================================\n\n/** Supported data formats for analytics queries */\nexport type DataFormat = \"json\" | \"arrow\" | \"auto\";\n\n/** Chart orientation */\nexport type Orientation = \"vertical\" | \"horizontal\";\n\n/** Supported chart types */\nexport type ChartType =\n | \"bar\"\n | \"line\"\n | \"area\"\n | \"pie\"\n | \"donut\"\n | \"scatter\"\n | \"radar\"\n | \"heatmap\";\n\n/** Data that can be passed to unified charts */\nexport type ChartData = Table | Record<string, unknown>[];\n\n// ============================================================================\n// Base Props (shared by all charts)\n// ============================================================================\n\n/** Color palette types for different visualization needs */\nexport type ChartColorPalette = \"categorical\" | \"sequential\" | \"diverging\";\n\n/** Common visual and behavior props for all charts */\nexport interface ChartBaseProps {\n /** Chart title */\n title?: string;\n /** Show legend */\n showLegend?: boolean;\n /**\n * Color palette to use. Auto-selected based on chart type if not specified.\n * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n * - \"sequential\": Gradient for magnitude/intensity (heatmap)\n * - \"diverging\": Two-tone for positive/negative values\n */\n colorPalette?: ChartColorPalette;\n /** Custom colors for series (overrides colorPalette) */\n colors?: string[];\n /** Chart height in pixels @default 300 */\n height?: number;\n /** Additional CSS classes */\n className?: string;\n\n /** X-axis field key. Auto-detected from schema if not provided. */\n xKey?: string;\n /** Y-axis field key(s). Auto-detected from schema if not provided. */\n yKey?: string | string[];\n\n /** Accessibility label for screen readers */\n ariaLabel?: string;\n /** Test ID for automated testing */\n testId?: string;\n\n /** Additional ECharts options to merge */\n options?: Record<string, unknown>;\n}\n\n// ============================================================================\n// Query-based Props (chart fetches data)\n// ============================================================================\n\n/** Props for query-based data fetching */\nexport interface QueryProps extends ChartBaseProps {\n /** Analytics query key registered with analytics plugin */\n queryKey: string;\n /** Query parameters passed to the analytics endpoint */\n parameters?: Record<string, unknown>;\n /**\n * Data format to use\n * - \"json\": Use JSON format (smaller payloads, simpler)\n * - \"arrow\": Use Arrow format (faster for large datasets)\n * - \"auto\": Automatically select based on expected data size\n * @default \"auto\"\n */\n format?: DataFormat;\n /** Transform raw data before rendering */\n transformer?: <T>(data: T) => T;\n // Discriminator: cannot use direct data with query\n data?: never;\n}\n\n// ============================================================================\n// Data-based Props (chart receives data externally)\n// ============================================================================\n\n/** Props for direct data injection */\nexport interface DataProps extends ChartBaseProps {\n /** Arrow Table or JSON array */\n data: ChartData;\n\n // Discriminator: cannot use query props with direct data\n queryKey?: never;\n parameters?: never;\n format?: never;\n transformer?: never;\n}\n\n// ============================================================================\n// Union Types for Each Chart\n// ============================================================================\n\n/** Base union type - either query-based or data-based */\nexport type UnifiedChartProps = QueryProps | DataProps;\n\n// ============================================================================\n// Chart-Specific Props\n// ============================================================================\n\n/** Props specific to bar charts */\nexport interface BarChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Stack bars */\n stacked?: boolean;\n}\n\n/** Props specific to line charts */\nexport interface LineChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Show data point symbols @default false */\n showSymbol?: boolean;\n /** Smooth line curves @default true */\n smooth?: boolean;\n}\n\n/** Props specific to area charts */\nexport interface AreaChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Show data point symbols @default false */\n showSymbol?: boolean;\n /** Smooth line curves @default true */\n smooth?: boolean;\n /** Stack areas @default false */\n stacked?: boolean;\n}\n\n/** Props specific to scatter charts */\nexport interface ScatterChartSpecificProps {\n /** Symbol size @default 8 */\n symbolSize?: number;\n}\n\n/** Props specific to pie/donut charts */\nexport interface PieChartSpecificProps {\n /** Inner radius for donut charts (0-100%) @default 0 */\n innerRadius?: number;\n /** Show labels on slices @default true */\n showLabels?: boolean;\n /** Label position @default \"outside\" */\n labelPosition?: \"outside\" | \"inside\" | \"center\";\n}\n\n/** Props specific to radar charts */\nexport interface RadarChartSpecificProps {\n /** Show area fill @default true */\n showArea?: boolean;\n}\n\n/** Props specific to heatmap charts */\nexport interface HeatmapChartSpecificProps {\n /**\n * Field key for the Y-axis categories.\n * For heatmaps, data should have: xKey (column), yAxisKey (row), and yKey (value).\n */\n yAxisKey?: string;\n /** Min value for color scale (auto-detected if not provided) */\n min?: number;\n /** Max value for color scale (auto-detected if not provided) */\n max?: number;\n /** Show value labels on cells @default false */\n showLabels?: boolean;\n}\n\n// ============================================================================\n// Complete Chart Props (union + specific)\n// ============================================================================\n\nexport type BarChartProps = (QueryProps | DataProps) & BarChartSpecificProps;\nexport type LineChartProps = (QueryProps | DataProps) & LineChartSpecificProps;\nexport type AreaChartProps = (QueryProps | DataProps) & AreaChartSpecificProps;\nexport type ScatterChartProps = (QueryProps | DataProps) &\n ScatterChartSpecificProps;\nexport type PieChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type DonutChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type RadarChartProps = (QueryProps | DataProps) &\n RadarChartSpecificProps;\nexport type HeatmapChartProps = (QueryProps | DataProps) &\n HeatmapChartSpecificProps;\n\n// ============================================================================\n// Internal Types\n// ============================================================================\n\n/** Base normalized data shared by all chart types */\nexport interface NormalizedChartDataBase {\n xData: (string | number)[];\n xField: string;\n yFields: string[];\n chartType: \"timeseries\" | \"categorical\";\n}\n\n/** Normalized chart data for rendering (standard charts) */\nexport interface NormalizedChartData extends NormalizedChartDataBase {\n yDataMap: Record<string, (string | number)[]>;\n}\n\n/** Type guard to check if data is an Arrow Table */\nexport function isArrowTable(data: ChartData): data is Table {\n return (\n data !== null &&\n typeof data === \"object\" &&\n \"schema\" in data &&\n \"numRows\" in data &&\n typeof (data as Table).getChild === \"function\"\n );\n}\n\n/** Type guard to check if props are query-based */\nexport function isQueryProps(props: UnifiedChartProps): props is QueryProps {\n return (\n \"queryKey\" in props &&\n typeof props.queryKey === \"string\" &&\n props.queryKey.length > 0\n );\n}\n\n/** Type guard to check if props are data-based */\nexport function isDataProps(props: UnifiedChartProps): props is DataProps {\n return \"data\" in props && props.data != null;\n}\n"],"mappings":";;AA2NA,SAAgB,aAAa,MAAgC;AAC3D,QACE,SAAS,QACT,OAAO,SAAS,YAChB,YAAY,QACZ,aAAa,QACb,OAAQ,KAAe,aAAa;;;AAKxC,SAAgB,aAAa,OAA+C;AAC1E,QACE,cAAc,SACd,OAAO,MAAM,aAAa,YAC1B,MAAM,SAAS,SAAS;;;AAK5B,SAAgB,YAAY,OAA8C;AACxE,QAAO,UAAU,SAAS,MAAM,QAAQ"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { ChartData, DataFormat } from "./types.js";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime285 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/react/charts/wrapper.d.ts
|
|
6
6
|
interface ChartWrapperQueryProps {
|
|
7
|
-
/** Whether to execute the query as a user. Default is false. */
|
|
8
|
-
asUser?: boolean;
|
|
9
7
|
/** Analytics query key */
|
|
10
8
|
queryKey: string;
|
|
11
9
|
/** Query parameters */
|
|
@@ -61,7 +59,7 @@ type ChartWrapperProps = CommonProps & (ChartWrapperQueryProps | ChartWrapperDat
|
|
|
61
59
|
* </ChartWrapper>
|
|
62
60
|
* ```
|
|
63
61
|
*/
|
|
64
|
-
declare function ChartWrapper(props: ChartWrapperProps):
|
|
62
|
+
declare function ChartWrapper(props: ChartWrapperProps): react_jsx_runtime285.JSX.Element;
|
|
65
63
|
//#endregion
|
|
66
64
|
export { ChartWrapper, ChartWrapperProps };
|
|
67
65
|
//# sourceMappingURL=wrapper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wrapper.d.ts","names":[],"sources":["../../../src/react/charts/wrapper.tsx"],"sourcesContent":[],"mappings":";;;;;UAaU,sBAAA;;;EAAA;EAAsB,
|
|
1
|
+
{"version":3,"file":"wrapper.d.ts","names":[],"sources":["../../../src/react/charts/wrapper.tsx"],"sourcesContent":[],"mappings":";;;;;UAaU,sBAAA;;;EAAA;EAAsB,UAAA,CAAA,EAIjB,MAJiB,CAAA,MAAA,EAAA,OAAA,CAAA;;QAMrB,CAAA,EAAA,UAAA;;aAEqB,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAN,CAAM,EAAA,GAAA,CAAA;EAAC;EAKvB,IAAA,CAAA,EAAA,KAAA;AAEO;UAFP,qBAAA,CAUW;;MAUY,EAlBzB,SAkByB;EAAS;EAG9B,QAAA,CAAA,EAAA,KAAA;EAAiB,UAAA,CAAA,EAAA,KAAA;QAAG,CAAA,EAAA,KAAA;aAC7B,CAAA,EAAA,KAAA;;UAdO,WAAA,CAcuC;EA0GjC;EAAY,MAAA,CAAA,EAAA,MAAA;;WAAyB,CAAA,EAAA,MAAA;EAAA;;;;;mBA9GlC,cAAc;;KAGrB,iBAAA,GAAoB,eAC7B,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;iBA0GZ,YAAA,QAAoB,oBAAiB,oBAAA,CAAA,GAAA,CAAA"}
|
|
@@ -7,13 +7,12 @@ import { LoadingSkeleton } from "./loading.js";
|
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
8
|
|
|
9
9
|
//#region src/react/charts/wrapper.tsx
|
|
10
|
-
function QueryModeContent({ queryKey, parameters, format, transformer,
|
|
10
|
+
function QueryModeContent({ queryKey, parameters, format, transformer, height, className, ariaLabel, testId, children }) {
|
|
11
11
|
const { data, loading, error, isEmpty } = useChartData({
|
|
12
12
|
queryKey,
|
|
13
13
|
parameters,
|
|
14
14
|
format,
|
|
15
|
-
transformer
|
|
16
|
-
asUser
|
|
15
|
+
transformer
|
|
17
16
|
});
|
|
18
17
|
if (loading) return /* @__PURE__ */ jsx(LoadingSkeleton, { height: height ?? 300 });
|
|
19
18
|
if (error) return /* @__PURE__ */ jsx(ErrorState, { error });
|
|
@@ -81,7 +80,6 @@ function ChartWrapper(props) {
|
|
|
81
80
|
parameters: props.parameters,
|
|
82
81
|
format: props.format,
|
|
83
82
|
transformer: props.transformer,
|
|
84
|
-
asUser: props.asUser,
|
|
85
83
|
height,
|
|
86
84
|
className,
|
|
87
85
|
ariaLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/react/charts/wrapper.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useChartData } from \"../hooks/use-chart-data\";\nimport { ChartErrorBoundary } from \"./chart-error-boundary\";\nimport { EmptyState } from \"./empty\";\nimport { ErrorState } from \"./error\";\nimport { LoadingSkeleton } from \"./loading\";\nimport type { ChartData, DataFormat } from \"./types\";\nimport { isArrowTable } from \"./types\";\n\n// ============================================================================\n// Props Types\n// ============================================================================\n\ninterface ChartWrapperQueryProps {\n /**
|
|
1
|
+
{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/react/charts/wrapper.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useChartData } from \"../hooks/use-chart-data\";\nimport { ChartErrorBoundary } from \"./chart-error-boundary\";\nimport { EmptyState } from \"./empty\";\nimport { ErrorState } from \"./error\";\nimport { LoadingSkeleton } from \"./loading\";\nimport type { ChartData, DataFormat } from \"./types\";\nimport { isArrowTable } from \"./types\";\n\n// ============================================================================\n// Props Types\n// ============================================================================\n\ninterface ChartWrapperQueryProps {\n /** Analytics query key */\n queryKey: string;\n /** Query parameters */\n parameters?: Record<string, unknown>;\n /** Data format preference */\n format?: DataFormat;\n /** Transform data after fetching */\n transformer?: <T>(data: T) => T;\n /** Direct data - not used in query mode */\n data?: never;\n}\n\ninterface ChartWrapperDataProps {\n /** Direct data (Arrow Table or JSON array) */\n data: ChartData;\n /** Not used in data mode */\n queryKey?: never;\n parameters?: never;\n format?: never;\n transformer?: never;\n}\n\ninterface CommonProps {\n /** Chart height in pixels */\n height?: number;\n /** Additional CSS classes */\n className?: string;\n /** Accessibility label */\n ariaLabel?: string;\n /** Test ID for automated testing */\n testId?: string;\n /** Render function receiving the chart data */\n children: (data: ChartData) => ReactNode;\n}\n\nexport type ChartWrapperProps = CommonProps &\n (ChartWrapperQueryProps | ChartWrapperDataProps);\n\n// ============================================================================\n// Query Mode Content\n// ============================================================================\n\nfunction QueryModeContent({\n queryKey,\n parameters,\n format,\n transformer,\n height,\n className,\n ariaLabel,\n testId,\n children,\n}: CommonProps & ChartWrapperQueryProps) {\n const { data, loading, error, isEmpty } = useChartData({\n queryKey,\n parameters,\n format,\n transformer,\n });\n\n if (loading) return <LoadingSkeleton height={height ?? 300} />;\n if (error) return <ErrorState error={error} />;\n if (isEmpty || !data) return <EmptyState />;\n\n return (\n <ChartErrorBoundary\n fallback={<ErrorState error=\"Failed to render chart\" />}\n >\n <div\n className={className}\n style={{ height }}\n aria-label={ariaLabel}\n data-testid={testId}\n role=\"img\"\n >\n {children(data)}\n </div>\n </ChartErrorBoundary>\n );\n}\n\n// ============================================================================\n// Data Mode Content\n// ============================================================================\n\nfunction DataModeContent({\n data,\n height,\n className,\n ariaLabel,\n testId,\n children,\n}: CommonProps & ChartWrapperDataProps) {\n const isEmpty = isArrowTable(data)\n ? data.numRows === 0\n : !Array.isArray(data) || data.length === 0;\n\n if (isEmpty) return <EmptyState />;\n\n return (\n <ChartErrorBoundary\n fallback={<ErrorState error=\"Failed to render chart\" />}\n >\n <div\n className={className}\n style={{ height }}\n aria-label={ariaLabel}\n data-testid={testId}\n role=\"img\"\n >\n {children(data)}\n </div>\n </ChartErrorBoundary>\n );\n}\n\n// ============================================================================\n// Main Wrapper Component\n// ============================================================================\n\n/**\n * Wrapper component for charts.\n * Handles data fetching (query mode) or direct data injection (data mode).\n *\n * @example Query mode - fetches data from analytics endpoint\n * ```tsx\n * <ChartWrapper\n * queryKey=\"spend_data\"\n * parameters={{ limit: 100 }}\n * format=\"auto\"\n * >\n * {(data) => <MyChart data={data} />}\n * </ChartWrapper>\n * ```\n *\n * @example Data mode - uses provided data directly\n * ```tsx\n * <ChartWrapper data={myArrowTable}>\n * {(data) => <MyChart data={data} />}\n * </ChartWrapper>\n * ```\n */\nexport function ChartWrapper(props: ChartWrapperProps) {\n const { height = 300, className, ariaLabel, testId, children } = props;\n\n // Data mode: use provided data directly\n if (\"data\" in props && props.data !== undefined) {\n return (\n <DataModeContent\n data={props.data}\n height={height}\n className={className}\n ariaLabel={ariaLabel}\n testId={testId}\n >\n {children}\n </DataModeContent>\n );\n }\n\n // Query mode: fetch data from analytics endpoint\n if (\"queryKey\" in props && props.queryKey !== undefined) {\n return (\n <QueryModeContent\n queryKey={props.queryKey}\n parameters={props.parameters}\n format={props.format}\n transformer={props.transformer}\n height={height}\n className={className}\n ariaLabel={ariaLabel}\n testId={testId}\n >\n {children}\n </QueryModeContent>\n );\n }\n\n // Should never reach here due to TypeScript, but safety fallback\n return <ErrorState error=\"Chart requires either 'queryKey' or 'data' prop\" />;\n}\n"],"mappings":";;;;;;;;;AAwDA,SAAS,iBAAiB,EACxB,UACA,YACA,QACA,aACA,QACA,WACA,WACA,QACA,YACuC;CACvC,MAAM,EAAE,MAAM,SAAS,OAAO,YAAY,aAAa;EACrD;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,QAAS,QAAO,oBAAC,mBAAgB,QAAQ,UAAU,MAAO;AAC9D,KAAI,MAAO,QAAO,oBAAC,cAAkB,QAAS;AAC9C,KAAI,WAAW,CAAC,KAAM,QAAO,oBAAC,eAAa;AAE3C,QACE,oBAAC;EACC,UAAU,oBAAC,cAAW,OAAM,2BAA2B;YAEvD,oBAAC;GACY;GACX,OAAO,EAAE,QAAQ;GACjB,cAAY;GACZ,eAAa;GACb,MAAK;aAEJ,SAAS,KAAK;IACX;GACa;;AAQzB,SAAS,gBAAgB,EACvB,MACA,QACA,WACA,WACA,QACA,YACsC;AAKtC,KAJgB,aAAa,KAAK,GAC9B,KAAK,YAAY,IACjB,CAAC,MAAM,QAAQ,KAAK,IAAI,KAAK,WAAW,EAE/B,QAAO,oBAAC,eAAa;AAElC,QACE,oBAAC;EACC,UAAU,oBAAC,cAAW,OAAM,2BAA2B;YAEvD,oBAAC;GACY;GACX,OAAO,EAAE,QAAQ;GACjB,cAAY;GACZ,eAAa;GACb,MAAK;aAEJ,SAAS,KAAK;IACX;GACa;;;;;;;;;;;;;;;;;;;;;;;;AA8BzB,SAAgB,aAAa,OAA0B;CACrD,MAAM,EAAE,SAAS,KAAK,WAAW,WAAW,QAAQ,aAAa;AAGjE,KAAI,UAAU,SAAS,MAAM,SAAS,OACpC,QACE,oBAAC;EACC,MAAM,MAAM;EACJ;EACG;EACA;EACH;EAEP;GACe;AAKtB,KAAI,cAAc,SAAS,MAAM,aAAa,OAC5C,QACE,oBAAC;EACC,UAAU,MAAM;EAChB,YAAY,MAAM;EAClB,QAAQ,MAAM;EACd,aAAa,MAAM;EACX;EACG;EACA;EACH;EAEP;GACgB;AAKvB,QAAO,oBAAC,cAAW,OAAM,oDAAoD"}
|
|
@@ -28,8 +28,6 @@ interface UseAnalyticsQueryOptions<F extends AnalyticsFormat = "JSON"> {
|
|
|
28
28
|
maxParametersSize?: number;
|
|
29
29
|
/** Whether to automatically start the query when the hook is mounted. Default is true. */
|
|
30
30
|
autoStart?: boolean;
|
|
31
|
-
/** Whether to execute the query as a user. Default is false. */
|
|
32
|
-
asUser?: boolean;
|
|
33
31
|
}
|
|
34
32
|
/** Result state returned by useAnalyticsQuery */
|
|
35
33
|
interface UseAnalyticsQueryResult<T> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/hooks/types.ts"],"sourcesContent":[],"mappings":";;;;KAOY,eAAA;AAAZ;AAYA;;;;;;;AAeA;;AAAoD,UAfnC,eAemC,CAAA,aAdrC,MAcqC,CAAA,MAAA,EAAA,OAAA,CAAA,GAdX,MAcW,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA,SAb1C,KAa0C,CAAA;;;
|
|
1
|
+
{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/hooks/types.ts"],"sourcesContent":[],"mappings":";;;;KAOY,eAAA;AAAZ;AAYA;;;;;;;AAeA;;AAAoD,UAfnC,eAemC,CAAA,aAdrC,MAcqC,CAAA,MAAA,EAAA,OAAA,CAAA,GAdX,MAcW,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA,SAb1C,KAa0C,CAAA;;;AAYpD;AA2BA;EASY,SAAA,SAAA,CAAA,EAxDW,IAwDM;;;AACK,UAjDjB,wBAiDiB,CAAA,UAjDkB,eAiDlB,GAAA,MAAA,CAAA,CAAA;;QAAgB,CAAA,EA/CvC,CA+CuC;;EAAG,iBAAA,CAAA,EAAA,MAAA;EAIzC;EAAQ,SAAA,CAAA,EAAA,OAAA;;;AAEE,UA3CL,uBA2CK,CAAA,CAAA,CAAA,CAAA;;EAAD,IAAA,EAzCb,CAyCa,GAAA,IAAA;EAMT;EAAW,OAAA,EAAA,OAAA;;OAAqC,EAAA,MAAA,GAAA,IAAA;;;;;;;;AAU5D;;;;;;;;;;;;AAKM,UArCW,aAAA,CAqCX;MACF,EAAA,MAAA,CAAA,EAAA;IAAM,IAAA,EAAA,MAAA;IAOE,UAAA,EA1CI,MA0Ce,CAAA,MAAA,EAAA,OAAA,CAAA;IAAA,MAAA,EAAA,OAAA,EAAA;;;;AAIS,KAxC5B,iBAwC4B,CAAA,CAAA,CAAA,GAAA,MAAA,QAAhB,MAvCV,CAuCU,IAAA,MAAA,SAvCU,CAuCV,GAAA,KAAA,GAvCsB,CAuCtB,GAvC0B,CAuC1B,CAvC4B,CAuC5B,CAAA;;AAAmC,KAnC/C,QAAA,GAAW,iBAmCoC,CAnClB,aAmCkB,CAAA,SAAA,KAAA,GAAA,MAAA,GAjCvD,iBAiCuD,CAjCrC,aAiCqC,CAAA;;AAK3D;;;AAAyD,KAhC7C,WAgC6C,CAAA,CAAA,EAAA,CAAA,CAAA,GAhCzB,CAgCyB,SAhCf,iBAgCe,CAhCG,aAgCH,CAAA,GA/BrD,aA+BqD,CA/BvC,CA+BuC,CAAA,SAAA;QAAlB,EAAA,KAAA,EAAA;IA9BjC,IACA,CA8BF,GA7BA,CA6BA;;;;;AAGM,KA1BE,YA0BF,CAAA,CAAA,CAAA,GA1BoB,CA0BpB,SA1B8B,iBA0B9B,CA1BgD,aA0BhD,CAAA,GAzBN,aAyBM,CAzBQ,CAyBR,CAAA,SAAA;EAEO,MAAA,EA3BsB,KA2BtB,CAAA,KAAc,EAAA,CAAA;IA1BzB,UAAU,0BACR,IACA,0BACF,0BACF;;;;;;KAOQ,oCAGA,mBACR,oBAAoB,gBAAgB,aAAa,MAAM,YAAY,GAAG;;;;KAK9D,iBAAiB,UAAU,kBAAkB,iBACrD,cAAc;;IACZ,IACA,0BACF;UAEa,cAAA;iBACA"}
|