@databricks/appkit-ui 0.20.1 → 0.20.3
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/CLAUDE.md +5 -13
- package/NOTICE.md +3 -6
- package/README.md +1 -1
- package/dist/cli/commands/plugin/add-resource/add-resource.js.map +1 -1
- package/dist/js/arrow/lazy-arrow.d.ts +8 -0
- package/dist/js/arrow/lazy-arrow.d.ts.map +1 -1
- package/dist/js/arrow/lazy-arrow.js +8 -0
- package/dist/js/arrow/lazy-arrow.js.map +1 -1
- package/dist/react/charts/area/index.d.ts +0 -1
- package/dist/react/charts/area/index.d.ts.map +1 -1
- package/dist/react/charts/area/index.js.map +1 -1
- package/dist/react/charts/bar/index.d.ts +0 -1
- package/dist/react/charts/bar/index.d.ts.map +1 -1
- package/dist/react/charts/bar/index.js.map +1 -1
- package/dist/react/charts/constants.d.ts +1 -3
- package/dist/react/charts/constants.d.ts.map +1 -1
- package/dist/react/charts/constants.js +1 -3
- package/dist/react/charts/constants.js.map +1 -1
- package/dist/react/charts/heatmap/index.d.ts +0 -1
- package/dist/react/charts/heatmap/index.d.ts.map +1 -1
- package/dist/react/charts/heatmap/index.js.map +1 -1
- package/dist/react/charts/index.d.ts +1 -1
- package/dist/react/charts/index.js +1 -1
- package/dist/react/charts/line/index.d.ts +0 -1
- package/dist/react/charts/line/index.d.ts.map +1 -1
- package/dist/react/charts/line/index.js.map +1 -1
- package/dist/react/charts/pie/index.d.ts +0 -1
- package/dist/react/charts/pie/index.d.ts.map +1 -1
- package/dist/react/charts/pie/index.js.map +1 -1
- package/dist/react/charts/radar/index.d.ts +0 -1
- package/dist/react/charts/radar/index.d.ts.map +1 -1
- package/dist/react/charts/radar/index.js.map +1 -1
- package/dist/react/charts/scatter/index.d.ts +0 -1
- package/dist/react/charts/scatter/index.d.ts.map +1 -1
- package/dist/react/charts/scatter/index.js.map +1 -1
- package/dist/react/genie/genie-chat-input.d.ts.map +1 -1
- package/dist/react/genie/genie-chat-input.js.map +1 -1
- package/dist/react/genie/genie-chat-message-list.d.ts.map +1 -1
- package/dist/react/genie/genie-chat-message-list.js.map +1 -1
- package/dist/react/genie/genie-chat-message.d.ts.map +1 -1
- package/dist/react/genie/genie-chat-message.js.map +1 -1
- package/dist/react/genie/genie-query-visualization.d.ts.map +1 -1
- package/dist/react/genie/genie-query-visualization.js.map +1 -1
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/dist/schemas/plugin-manifest.generated.d.ts +178 -0
- package/dist/schemas/plugin-manifest.generated.d.ts.map +1 -0
- package/dist/schemas/plugin-manifest.schema.json +2 -0
- package/docs/api/appkit/Interface.CacheConfig.md +1 -1
- package/docs/api/appkit/Interface.PluginManifest.md +104 -6
- package/docs/api/appkit/Interface.ResourceEntry.md +5 -7
- package/docs/api/appkit/Interface.ResourceFieldEntry.md +2 -0
- package/docs/api/appkit/Interface.ResourceRequirement.md +63 -7
- package/docs/api/appkit/Interface.StreamExecutionSettings.md +1 -1
- package/docs/api/appkit/TypeAlias.PluginData.md +2 -0
- package/docs/api/appkit/TypeAlias.ToPlugin.md +2 -0
- package/docs/api/appkit.md +6 -6
- package/docs/plugins/genie.md +8 -0
- package/llms.txt +5 -13
- package/package.json +2 -5
- package/docs/api/appkit-ui/data/AreaChart.md +0 -79
- package/docs/api/appkit-ui/data/BarChart.md +0 -74
- package/docs/api/appkit-ui/data/DonutChart.md +0 -72
- package/docs/api/appkit-ui/data/HeatmapChart.md +0 -91
- package/docs/api/appkit-ui/data/LineChart.md +0 -77
- package/docs/api/appkit-ui/data/PieChart.md +0 -72
- package/docs/api/appkit-ui/data/RadarChart.md +0 -74
- package/docs/api/appkit-ui/data/ScatterChart.md +0 -76
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
# HeatmapChart
|
|
2
|
-
|
|
3
|
-
Heatmap Chart component for matrix-style data visualization.
|
|
4
|
-
|
|
5
|
-
## Example[](#example "Direct link to Example")
|
|
6
|
-
|
|
7
|
-
```tsx
|
|
8
|
-
"use client";
|
|
9
|
-
|
|
10
|
-
import { HeatmapChart } from "@databricks/appkit-ui/react";
|
|
11
|
-
|
|
12
|
-
export default function HeatmapChartExample() {
|
|
13
|
-
const data = [];
|
|
14
|
-
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
15
|
-
const hours = ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"];
|
|
16
|
-
|
|
17
|
-
for (const day of days) {
|
|
18
|
-
for (const hour of hours) {
|
|
19
|
-
data.push({
|
|
20
|
-
day,
|
|
21
|
-
hour,
|
|
22
|
-
count: Math.floor(Math.random() * 100),
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<HeatmapChart
|
|
29
|
-
data={data}
|
|
30
|
-
xKey="day"
|
|
31
|
-
yAxisKey="hour"
|
|
32
|
-
yKey="count"
|
|
33
|
-
height={300}
|
|
34
|
-
/>
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## HeatmapChart[](#heatmapchart-1 "Direct link to HeatmapChart")
|
|
42
|
-
|
|
43
|
-
Heatmap Chart component for matrix-style data visualization.
|
|
44
|
-
|
|
45
|
-
**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
|
|
46
|
-
|
|
47
|
-
**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
|
|
48
|
-
|
|
49
|
-
Data should be in "long format" with three fields:
|
|
50
|
-
|
|
51
|
-
* xKey: X-axis category (columns)
|
|
52
|
-
* yAxisKey: Y-axis category (rows)
|
|
53
|
-
* yKey: The numeric value for each cell
|
|
54
|
-
|
|
55
|
-
Supports both query mode (queryKey + parameters) and data mode (static data).
|
|
56
|
-
|
|
57
|
-
**Source:** [`packages/appkit-ui/src/react/charts/heatmap/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/heatmap/index.tsx)
|
|
58
|
-
|
|
59
|
-
### Props[](#props "Direct link to Props")
|
|
60
|
-
|
|
61
|
-
| Prop | Type | Required | Default | Description |
|
|
62
|
-
| -------------- | ------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
-
| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin |
|
|
64
|
-
| `parameters` | `Record<string, unknown>` | | - | Query parameters passed to the analytics endpoint |
|
|
65
|
-
| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size |
|
|
66
|
-
| `transformer` | `(<T>(data: T) => T)` | | - | Transform raw data before rendering |
|
|
67
|
-
| `data` | `ChartData` | | - | Arrow Table or JSON array |
|
|
68
|
-
| `title` | `string` | | - | Chart title |
|
|
69
|
-
| `showLegend` | `boolean` | | - | Show legend |
|
|
70
|
-
| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values |
|
|
71
|
-
| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) |
|
|
72
|
-
| `height` | `number` | | `300` | Chart height in pixels |
|
|
73
|
-
| `className` | `string` | | - | Additional CSS classes |
|
|
74
|
-
| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. |
|
|
75
|
-
| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. |
|
|
76
|
-
| `ariaLabel` | `string` | | - | Accessibility label for screen readers |
|
|
77
|
-
| `testId` | `string` | | - | Test ID for automated testing |
|
|
78
|
-
| `options` | `Record<string, unknown>` | | - | Additional ECharts options to merge |
|
|
79
|
-
| `yAxisKey` | `string` | | - | Field key for the Y-axis categories. For heatmaps, data should have: xKey (column), yAxisKey (row), and yKey (value). |
|
|
80
|
-
| `min` | `number` | | - | Min value for color scale (auto-detected if not provided) |
|
|
81
|
-
| `max` | `number` | | - | Max value for color scale (auto-detected if not provided) |
|
|
82
|
-
| `showLabels` | `boolean` | | `false` | Show value labels on cells |
|
|
83
|
-
|
|
84
|
-
### Usage[](#usage "Direct link to Usage")
|
|
85
|
-
|
|
86
|
-
```tsx
|
|
87
|
-
import { HeatmapChart } from '@databricks/appkit-ui';
|
|
88
|
-
|
|
89
|
-
<HeatmapChart /* props */ />
|
|
90
|
-
|
|
91
|
-
```
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
# LineChart
|
|
2
|
-
|
|
3
|
-
Line Chart component for time-series and trend visualization.
|
|
4
|
-
|
|
5
|
-
## Example[](#example "Direct link to Example")
|
|
6
|
-
|
|
7
|
-
```tsx
|
|
8
|
-
"use client";
|
|
9
|
-
|
|
10
|
-
import { LineChart } from "@databricks/appkit-ui/react";
|
|
11
|
-
|
|
12
|
-
export default function LineChartExample() {
|
|
13
|
-
return (
|
|
14
|
-
<LineChart
|
|
15
|
-
data={[
|
|
16
|
-
{ month: "Jan", sales: 100 },
|
|
17
|
-
{ month: "Feb", sales: 150 },
|
|
18
|
-
{ month: "Mar", sales: 200 },
|
|
19
|
-
{ month: "Apr", sales: 180 },
|
|
20
|
-
{ month: "May", sales: 220 },
|
|
21
|
-
{ month: "Jun", sales: 250 },
|
|
22
|
-
]}
|
|
23
|
-
xKey="month"
|
|
24
|
-
yKey="sales"
|
|
25
|
-
smooth
|
|
26
|
-
height={300}
|
|
27
|
-
/>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## LineChart[](#linechart-1 "Direct link to LineChart")
|
|
35
|
-
|
|
36
|
-
Line Chart component for time-series and trend visualization.
|
|
37
|
-
|
|
38
|
-
**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
|
|
39
|
-
|
|
40
|
-
**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
|
|
41
|
-
|
|
42
|
-
Supports both query mode (queryKey + parameters) and data mode (static data).
|
|
43
|
-
|
|
44
|
-
**Source:** [`packages/appkit-ui/src/react/charts/line/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/line/index.tsx)
|
|
45
|
-
|
|
46
|
-
### Props[](#props "Direct link to Props")
|
|
47
|
-
|
|
48
|
-
| Prop | Type | Required | Default | Description |
|
|
49
|
-
| -------------- | ------------------------- | -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
-
| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin |
|
|
51
|
-
| `parameters` | `Record<string, unknown>` | | - | Query parameters passed to the analytics endpoint |
|
|
52
|
-
| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size |
|
|
53
|
-
| `transformer` | `(<T>(data: T) => T)` | | - | Transform raw data before rendering |
|
|
54
|
-
| `data` | `ChartData` | | - | Arrow Table or JSON array |
|
|
55
|
-
| `title` | `string` | | - | Chart title |
|
|
56
|
-
| `showLegend` | `boolean` | | - | Show legend |
|
|
57
|
-
| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values |
|
|
58
|
-
| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) |
|
|
59
|
-
| `height` | `number` | | `300` | Chart height in pixels |
|
|
60
|
-
| `className` | `string` | | - | Additional CSS classes |
|
|
61
|
-
| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. |
|
|
62
|
-
| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. |
|
|
63
|
-
| `ariaLabel` | `string` | | - | Accessibility label for screen readers |
|
|
64
|
-
| `testId` | `string` | | - | Test ID for automated testing |
|
|
65
|
-
| `options` | `Record<string, unknown>` | | - | Additional ECharts options to merge |
|
|
66
|
-
| `orientation` | `enum` | | `"vertical"` | Chart orientation |
|
|
67
|
-
| `showSymbol` | `boolean` | | `false` | Show data point symbols |
|
|
68
|
-
| `smooth` | `boolean` | | `true` | Smooth line curves |
|
|
69
|
-
|
|
70
|
-
### Usage[](#usage "Direct link to Usage")
|
|
71
|
-
|
|
72
|
-
```tsx
|
|
73
|
-
import { LineChart } from '@databricks/appkit-ui';
|
|
74
|
-
|
|
75
|
-
<LineChart /* props */ />
|
|
76
|
-
|
|
77
|
-
```
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
# PieChart
|
|
2
|
-
|
|
3
|
-
Pie Chart component for proportional data visualization.
|
|
4
|
-
|
|
5
|
-
## Example[](#example "Direct link to Example")
|
|
6
|
-
|
|
7
|
-
```tsx
|
|
8
|
-
"use client";
|
|
9
|
-
|
|
10
|
-
import { PieChart } from "@databricks/appkit-ui/react";
|
|
11
|
-
|
|
12
|
-
export default function PieChartExample() {
|
|
13
|
-
return (
|
|
14
|
-
<PieChart
|
|
15
|
-
data={[
|
|
16
|
-
{ name: "Product A", value: 400 },
|
|
17
|
-
{ name: "Product B", value: 300 },
|
|
18
|
-
{ name: "Product C", value: 300 },
|
|
19
|
-
{ name: "Product D", value: 200 },
|
|
20
|
-
]}
|
|
21
|
-
height={300}
|
|
22
|
-
/>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## PieChart[](#piechart-1 "Direct link to PieChart")
|
|
30
|
-
|
|
31
|
-
Pie Chart component for proportional data visualization.
|
|
32
|
-
|
|
33
|
-
**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
|
|
34
|
-
|
|
35
|
-
**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
|
|
36
|
-
|
|
37
|
-
Supports both query mode (queryKey + parameters) and data mode (static data).
|
|
38
|
-
|
|
39
|
-
**Source:** [`packages/appkit-ui/src/react/charts/pie/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/pie/index.tsx)
|
|
40
|
-
|
|
41
|
-
### Props[](#props "Direct link to Props")
|
|
42
|
-
|
|
43
|
-
| Prop | Type | Required | Default | Description |
|
|
44
|
-
| --------------- | ------------------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
45
|
-
| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin |
|
|
46
|
-
| `parameters` | `Record<string, unknown>` | | - | Query parameters passed to the analytics endpoint |
|
|
47
|
-
| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size |
|
|
48
|
-
| `transformer` | `(<T>(data: T) => T)` | | - | Transform raw data before rendering |
|
|
49
|
-
| `data` | `ChartData` | | - | Arrow Table or JSON array |
|
|
50
|
-
| `title` | `string` | | - | Chart title |
|
|
51
|
-
| `showLegend` | `boolean` | | - | Show legend |
|
|
52
|
-
| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values |
|
|
53
|
-
| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) |
|
|
54
|
-
| `height` | `number` | | `300` | Chart height in pixels |
|
|
55
|
-
| `className` | `string` | | - | Additional CSS classes |
|
|
56
|
-
| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. |
|
|
57
|
-
| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. |
|
|
58
|
-
| `ariaLabel` | `string` | | - | Accessibility label for screen readers |
|
|
59
|
-
| `testId` | `string` | | - | Test ID for automated testing |
|
|
60
|
-
| `options` | `Record<string, unknown>` | | - | Additional ECharts options to merge |
|
|
61
|
-
| `innerRadius` | `number` | | `0` | Inner radius for donut charts (0-100%) |
|
|
62
|
-
| `showLabels` | `boolean` | | `true` | Show labels on slices |
|
|
63
|
-
| `labelPosition` | `enum` | | `"outside"` | Label position |
|
|
64
|
-
|
|
65
|
-
### Usage[](#usage "Direct link to Usage")
|
|
66
|
-
|
|
67
|
-
```tsx
|
|
68
|
-
import { PieChart } from '@databricks/appkit-ui';
|
|
69
|
-
|
|
70
|
-
<PieChart /* props */ />
|
|
71
|
-
|
|
72
|
-
```
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
# RadarChart
|
|
2
|
-
|
|
3
|
-
Radar Chart component for multi-dimensional data comparison.
|
|
4
|
-
|
|
5
|
-
## Example[](#example "Direct link to Example")
|
|
6
|
-
|
|
7
|
-
```tsx
|
|
8
|
-
"use client";
|
|
9
|
-
|
|
10
|
-
import { RadarChart } from "@databricks/appkit-ui/react";
|
|
11
|
-
|
|
12
|
-
export default function RadarChartExample() {
|
|
13
|
-
return (
|
|
14
|
-
<RadarChart
|
|
15
|
-
data={[
|
|
16
|
-
{ skill: "Communication", score: 85 },
|
|
17
|
-
{ skill: "Problem Solving", score: 90 },
|
|
18
|
-
{ skill: "Teamwork", score: 75 },
|
|
19
|
-
{ skill: "Leadership", score: 80 },
|
|
20
|
-
{ skill: "Technical", score: 95 },
|
|
21
|
-
{ skill: "Creativity", score: 70 },
|
|
22
|
-
]}
|
|
23
|
-
xKey="skill"
|
|
24
|
-
yKey="score"
|
|
25
|
-
height={300}
|
|
26
|
-
/>
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## RadarChart[](#radarchart-1 "Direct link to RadarChart")
|
|
34
|
-
|
|
35
|
-
Radar Chart component for multi-dimensional data comparison.
|
|
36
|
-
|
|
37
|
-
**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
|
|
38
|
-
|
|
39
|
-
**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
|
|
40
|
-
|
|
41
|
-
Supports both query mode (queryKey + parameters) and data mode (static data).
|
|
42
|
-
|
|
43
|
-
**Source:** [`packages/appkit-ui/src/react/charts/radar/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/radar/index.tsx)
|
|
44
|
-
|
|
45
|
-
### Props[](#props "Direct link to Props")
|
|
46
|
-
|
|
47
|
-
| Prop | Type | Required | Default | Description |
|
|
48
|
-
| -------------- | ------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
49
|
-
| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin |
|
|
50
|
-
| `parameters` | `Record<string, unknown>` | | - | Query parameters passed to the analytics endpoint |
|
|
51
|
-
| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size |
|
|
52
|
-
| `transformer` | `(<T>(data: T) => T)` | | - | Transform raw data before rendering |
|
|
53
|
-
| `data` | `ChartData` | | - | Arrow Table or JSON array |
|
|
54
|
-
| `title` | `string` | | - | Chart title |
|
|
55
|
-
| `showLegend` | `boolean` | | - | Show legend |
|
|
56
|
-
| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values |
|
|
57
|
-
| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) |
|
|
58
|
-
| `height` | `number` | | `300` | Chart height in pixels |
|
|
59
|
-
| `className` | `string` | | - | Additional CSS classes |
|
|
60
|
-
| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. |
|
|
61
|
-
| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. |
|
|
62
|
-
| `ariaLabel` | `string` | | - | Accessibility label for screen readers |
|
|
63
|
-
| `testId` | `string` | | - | Test ID for automated testing |
|
|
64
|
-
| `options` | `Record<string, unknown>` | | - | Additional ECharts options to merge |
|
|
65
|
-
| `showArea` | `boolean` | | `true` | Show area fill |
|
|
66
|
-
|
|
67
|
-
### Usage[](#usage "Direct link to Usage")
|
|
68
|
-
|
|
69
|
-
```tsx
|
|
70
|
-
import { RadarChart } from '@databricks/appkit-ui';
|
|
71
|
-
|
|
72
|
-
<RadarChart /* props */ />
|
|
73
|
-
|
|
74
|
-
```
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
# ScatterChart
|
|
2
|
-
|
|
3
|
-
Scatter Chart component for correlation and distribution visualization.
|
|
4
|
-
|
|
5
|
-
## Example[](#example "Direct link to Example")
|
|
6
|
-
|
|
7
|
-
```tsx
|
|
8
|
-
"use client";
|
|
9
|
-
|
|
10
|
-
import { ScatterChart } from "@databricks/appkit-ui/react";
|
|
11
|
-
|
|
12
|
-
export default function ScatterChartExample() {
|
|
13
|
-
return (
|
|
14
|
-
<ScatterChart
|
|
15
|
-
data={[
|
|
16
|
-
{ revenue: 100, growth: 5 },
|
|
17
|
-
{ revenue: 200, growth: 10 },
|
|
18
|
-
{ revenue: 150, growth: 7 },
|
|
19
|
-
{ revenue: 300, growth: 15 },
|
|
20
|
-
{ revenue: 250, growth: 12 },
|
|
21
|
-
{ revenue: 400, growth: 20 },
|
|
22
|
-
{ revenue: 180, growth: 8 },
|
|
23
|
-
{ revenue: 320, growth: 16 },
|
|
24
|
-
]}
|
|
25
|
-
xKey="revenue"
|
|
26
|
-
yKey="growth"
|
|
27
|
-
height={300}
|
|
28
|
-
/>
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## ScatterChart[](#scatterchart-1 "Direct link to ScatterChart")
|
|
36
|
-
|
|
37
|
-
Scatter Chart component for correlation and distribution visualization.
|
|
38
|
-
|
|
39
|
-
**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
|
|
40
|
-
|
|
41
|
-
**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
|
|
42
|
-
|
|
43
|
-
Supports both query mode (queryKey + parameters) and data mode (static data).
|
|
44
|
-
|
|
45
|
-
**Source:** [`packages/appkit-ui/src/react/charts/scatter/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/scatter/index.tsx)
|
|
46
|
-
|
|
47
|
-
### Props[](#props "Direct link to Props")
|
|
48
|
-
|
|
49
|
-
| Prop | Type | Required | Default | Description |
|
|
50
|
-
| -------------- | ------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
51
|
-
| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin |
|
|
52
|
-
| `parameters` | `Record<string, unknown>` | | - | Query parameters passed to the analytics endpoint |
|
|
53
|
-
| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size |
|
|
54
|
-
| `transformer` | `(<T>(data: T) => T)` | | - | Transform raw data before rendering |
|
|
55
|
-
| `data` | `ChartData` | | - | Arrow Table or JSON array |
|
|
56
|
-
| `title` | `string` | | - | Chart title |
|
|
57
|
-
| `showLegend` | `boolean` | | - | Show legend |
|
|
58
|
-
| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values |
|
|
59
|
-
| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) |
|
|
60
|
-
| `height` | `number` | | `300` | Chart height in pixels |
|
|
61
|
-
| `className` | `string` | | - | Additional CSS classes |
|
|
62
|
-
| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. |
|
|
63
|
-
| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. |
|
|
64
|
-
| `ariaLabel` | `string` | | - | Accessibility label for screen readers |
|
|
65
|
-
| `testId` | `string` | | - | Test ID for automated testing |
|
|
66
|
-
| `options` | `Record<string, unknown>` | | - | Additional ECharts options to merge |
|
|
67
|
-
| `symbolSize` | `number` | | `8` | Symbol size |
|
|
68
|
-
|
|
69
|
-
### Usage[](#usage "Direct link to Usage")
|
|
70
|
-
|
|
71
|
-
```tsx
|
|
72
|
-
import { ScatterChart } from '@databricks/appkit-ui';
|
|
73
|
-
|
|
74
|
-
<ScatterChart /* props */ />
|
|
75
|
-
|
|
76
|
-
```
|