@databricks/appkit-ui 0.20.2 → 0.21.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.
Files changed (78) hide show
  1. package/CLAUDE.md +5 -13
  2. package/NOTICE.md +3 -6
  3. package/dist/cli/commands/plugin/add-resource/add-resource.js.map +1 -1
  4. package/dist/js/arrow/lazy-arrow.d.ts +8 -0
  5. package/dist/js/arrow/lazy-arrow.d.ts.map +1 -1
  6. package/dist/js/arrow/lazy-arrow.js +8 -0
  7. package/dist/js/arrow/lazy-arrow.js.map +1 -1
  8. package/dist/react/charts/area/index.d.ts +0 -1
  9. package/dist/react/charts/area/index.d.ts.map +1 -1
  10. package/dist/react/charts/area/index.js.map +1 -1
  11. package/dist/react/charts/bar/index.d.ts +0 -1
  12. package/dist/react/charts/bar/index.d.ts.map +1 -1
  13. package/dist/react/charts/bar/index.js.map +1 -1
  14. package/dist/react/charts/constants.d.ts +1 -3
  15. package/dist/react/charts/constants.d.ts.map +1 -1
  16. package/dist/react/charts/constants.js +1 -3
  17. package/dist/react/charts/constants.js.map +1 -1
  18. package/dist/react/charts/heatmap/index.d.ts +0 -1
  19. package/dist/react/charts/heatmap/index.d.ts.map +1 -1
  20. package/dist/react/charts/heatmap/index.js.map +1 -1
  21. package/dist/react/charts/index.d.ts +1 -1
  22. package/dist/react/charts/index.js +1 -1
  23. package/dist/react/charts/line/index.d.ts +0 -1
  24. package/dist/react/charts/line/index.d.ts.map +1 -1
  25. package/dist/react/charts/line/index.js.map +1 -1
  26. package/dist/react/charts/options.d.ts.map +1 -1
  27. package/dist/react/charts/options.js +3 -1
  28. package/dist/react/charts/options.js.map +1 -1
  29. package/dist/react/charts/pie/index.d.ts +0 -1
  30. package/dist/react/charts/pie/index.d.ts.map +1 -1
  31. package/dist/react/charts/pie/index.js.map +1 -1
  32. package/dist/react/charts/radar/index.d.ts +0 -1
  33. package/dist/react/charts/radar/index.d.ts.map +1 -1
  34. package/dist/react/charts/radar/index.js.map +1 -1
  35. package/dist/react/charts/scatter/index.d.ts +0 -1
  36. package/dist/react/charts/scatter/index.d.ts.map +1 -1
  37. package/dist/react/charts/scatter/index.js.map +1 -1
  38. package/dist/react/genie/genie-chart-inference.d.ts +6 -1
  39. package/dist/react/genie/genie-chart-inference.d.ts.map +1 -1
  40. package/dist/react/genie/genie-chart-inference.js +60 -6
  41. package/dist/react/genie/genie-chart-inference.js.map +1 -1
  42. package/dist/react/genie/genie-chat-input.d.ts.map +1 -1
  43. package/dist/react/genie/genie-chat-input.js.map +1 -1
  44. package/dist/react/genie/genie-chat-message-list.d.ts.map +1 -1
  45. package/dist/react/genie/genie-chat-message-list.js.map +1 -1
  46. package/dist/react/genie/genie-chat-message.d.ts.map +1 -1
  47. package/dist/react/genie/genie-chat-message.js.map +1 -1
  48. package/dist/react/genie/genie-query-visualization.d.ts.map +1 -1
  49. package/dist/react/genie/genie-query-visualization.js +63 -13
  50. package/dist/react/genie/genie-query-visualization.js.map +1 -1
  51. package/dist/react/genie/index.d.ts +1 -1
  52. package/dist/react/genie/index.js +1 -1
  53. package/dist/react/index.d.ts +3 -3
  54. package/dist/react/index.js +5 -5
  55. package/dist/react/table/data-table.js +1 -1
  56. package/dist/react/ui/index.js +1 -1
  57. package/dist/schemas/plugin-manifest.generated.d.ts +178 -0
  58. package/dist/schemas/plugin-manifest.generated.d.ts.map +1 -0
  59. package/dist/schemas/plugin-manifest.schema.json +2 -0
  60. package/docs/api/appkit/Interface.CacheConfig.md +1 -1
  61. package/docs/api/appkit/Interface.PluginManifest.md +104 -6
  62. package/docs/api/appkit/Interface.ResourceEntry.md +5 -7
  63. package/docs/api/appkit/Interface.ResourceFieldEntry.md +2 -0
  64. package/docs/api/appkit/Interface.ResourceRequirement.md +63 -7
  65. package/docs/api/appkit/Interface.StreamExecutionSettings.md +1 -1
  66. package/docs/api/appkit/TypeAlias.PluginData.md +2 -0
  67. package/docs/api/appkit/TypeAlias.ToPlugin.md +2 -0
  68. package/docs/api/appkit.md +6 -6
  69. package/llms.txt +5 -13
  70. package/package.json +2 -5
  71. package/docs/api/appkit-ui/data/AreaChart.md +0 -79
  72. package/docs/api/appkit-ui/data/BarChart.md +0 -74
  73. package/docs/api/appkit-ui/data/DonutChart.md +0 -72
  74. package/docs/api/appkit-ui/data/HeatmapChart.md +0 -91
  75. package/docs/api/appkit-ui/data/LineChart.md +0 -77
  76. package/docs/api/appkit-ui/data/PieChart.md +0 -72
  77. package/docs/api/appkit-ui/data/RadarChart.md +0 -74
  78. package/docs/api/appkit-ui/data/ScatterChart.md +0 -76
package/llms.txt CHANGED
@@ -79,7 +79,7 @@ npx @databricks/appkit docs <query>
79
79
  - [Function: getWorkspaceClient()](./docs/api/appkit/Function.getWorkspaceClient.md): Get workspace client from config or SDK default auth chain
80
80
  - [Function: isSQLTypeMarker()](./docs/api/appkit/Function.isSQLTypeMarker.md): Type guard to check if a value is a SQL type marker
81
81
  - [Interface: BasePluginConfig](./docs/api/appkit/Interface.BasePluginConfig.md): Base configuration interface for AppKit plugins
82
- - [Interface: CacheConfig](./docs/api/appkit/Interface.CacheConfig.md): Configuration for caching
82
+ - [Interface: CacheConfig](./docs/api/appkit/Interface.CacheConfig.md): Configuration for the CacheInterceptor. Controls TTL, size limits, storage backend, and probabilistic cleanup.
83
83
  - [Interface: DatabaseCredential](./docs/api/appkit/Interface.DatabaseCredential.md): Database credentials with OAuth token for Postgres connection
84
84
  - [Interface: GenerateDatabaseCredentialRequest](./docs/api/appkit/Interface.GenerateDatabaseCredentialRequest.md): Request parameters for generating database OAuth credentials
85
85
  - [Interface: ITelemetry](./docs/api/appkit/Interface.ITelemetry.md): Plugin-facing interface for OpenTelemetry instrumentation.
@@ -88,30 +88,22 @@ npx @databricks/appkit docs <query>
88
88
  - [Interface: RequestedClaims](./docs/api/appkit/Interface.RequestedClaims.md): Optional claims for fine-grained Unity Catalog table permissions
89
89
  - [Interface: RequestedResource](./docs/api/appkit/Interface.RequestedResource.md): Resource to request permissions for in Unity Catalog
90
90
  - [Interface: ResourceEntry](./docs/api/appkit/Interface.ResourceEntry.md): Internal representation of a resource in the registry.
91
- - [Interface: ResourceFieldEntry](./docs/api/appkit/Interface.ResourceFieldEntry.md): Defines a single field for a resource. Each field has its own environment variable and optional description.
91
+ - [Interface: ResourceFieldEntry](./docs/api/appkit/Interface.ResourceFieldEntry.md): Defines a single field for a resource. Each field has its own environment variable and optional description. Single-value types use one key (e.g. id); multi-value types (database, secret) use multiple (e.g. instancename, databasename or scope, key).
92
92
  - [Interface: ResourceRequirement](./docs/api/appkit/Interface.ResourceRequirement.md): Declares a resource requirement for a plugin.
93
- - [Interface: StreamExecutionSettings](./docs/api/appkit/Interface.StreamExecutionSettings.md): Configuration for streaming execution with default and user-scoped settings
93
+ - [Interface: StreamExecutionSettings](./docs/api/appkit/Interface.StreamExecutionSettings.md): Execution settings for streaming endpoints. Extends PluginExecutionSettings with SSE stream configuration.
94
94
  - [Interface: TelemetryConfig](./docs/api/appkit/Interface.TelemetryConfig.md): OpenTelemetry configuration for AppKit applications
95
95
  - [Interface: ValidationResult](./docs/api/appkit/Interface.ValidationResult.md): Result of validating all registered resources against the environment.
96
96
  - [Type Alias: ConfigSchema](./docs/api/appkit/TypeAlias.ConfigSchema.md): Configuration schema definition for plugin config.
97
97
  - [Type Alias: IAppRouter](./docs/api/appkit/TypeAlias.IAppRouter.md): Express router type for plugin route registration
98
- - [Type Alias: PluginData<T, U, N>](./docs/api/appkit/TypeAlias.PluginData.md): Type Parameters
98
+ - [Type Alias: PluginData<T, U, N>](./docs/api/appkit/TypeAlias.PluginData.md): Tuple of plugin class, config, and name. Created by toPlugin() and passed to createApp().
99
99
  - [Type Alias: ResourcePermission](./docs/api/appkit/TypeAlias.ResourcePermission.md): Union of all possible permission levels across all resource types.
100
- - [Type Alias: ToPlugin()<T, U, N>](./docs/api/appkit/TypeAlias.ToPlugin.md): Type Parameters
100
+ - [Type Alias: ToPlugin()<T, U, N>](./docs/api/appkit/TypeAlias.ToPlugin.md): Factory function type returned by toPlugin(). Accepts optional config and returns a PluginData tuple.
101
101
  - [Variable: sql](./docs/api/appkit/Variable.sql.md): SQL helper namespace
102
102
 
103
103
  ## appkit-ui API reference [collapsed]
104
104
 
105
105
  - [@databricks/appkit-ui](./docs/api/appkit-ui.md): The library provides a set of UI primitives for building Databricks apps in React.
106
- - [AreaChart](./docs/api/appkit-ui/data/AreaChart.md): Area Chart component for trend visualization with filled areas.
107
- - [BarChart](./docs/api/appkit-ui/data/BarChart.md): Bar Chart component for categorical comparisons.
108
106
  - [DataTable](./docs/api/appkit-ui/data/DataTable.md): Production-ready data table with automatic data fetching and state management
109
- - [DonutChart](./docs/api/appkit-ui/data/DonutChart.md): Donut Chart component (Pie chart with inner radius).
110
- - [HeatmapChart](./docs/api/appkit-ui/data/HeatmapChart.md): Heatmap Chart component for matrix-style data visualization.
111
- - [LineChart](./docs/api/appkit-ui/data/LineChart.md): Line Chart component for time-series and trend visualization.
112
- - [PieChart](./docs/api/appkit-ui/data/PieChart.md): Pie Chart component for proportional data visualization.
113
- - [RadarChart](./docs/api/appkit-ui/data/RadarChart.md): Radar Chart component for multi-dimensional data comparison.
114
- - [ScatterChart](./docs/api/appkit-ui/data/ScatterChart.md): Scatter Chart component for correlation and distribution visualization.
115
107
  - [DirectoryList](./docs/api/appkit-ui/files/DirectoryList.md): Card-wrapped directory listing with loading, error, and empty states
116
108
  - [FileBreadcrumb](./docs/api/appkit-ui/files/FileBreadcrumb.md): Path-aware breadcrumb navigation built on top of Breadcrumb primitives
117
109
  - [FileEntry](./docs/api/appkit-ui/files/FileEntry.md): Single file or directory row with icon, name, size, and selection state
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@databricks/appkit-ui",
3
3
  "type": "module",
4
- "version": "0.20.2",
4
+ "version": "0.21.0",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -38,7 +38,6 @@
38
38
  "postinstall": "node scripts/postinstall.js"
39
39
  },
40
40
  "dependencies": {
41
- "@hookform/resolvers": "^5.2.2",
42
41
  "@radix-ui/react-accordion": "^1.2.12",
43
42
  "@radix-ui/react-alert-dialog": "^1.1.15",
44
43
  "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -66,12 +65,11 @@
66
65
  "@radix-ui/react-toggle-group": "^1.1.11",
67
66
  "@radix-ui/react-tooltip": "^1.2.8",
68
67
  "@tanstack/react-table": "^8.21.3",
69
- "@tanstack/react-virtual": "^3.13.12",
70
68
  "apache-arrow": "^21.1.0",
71
69
  "class-variance-authority": "^0.7.1",
72
70
  "clsx": "^2.1.1",
73
71
  "cmdk": "^1.1.1",
74
- "date-fns": "^4.1.0",
72
+ "echarts": "^6.0.0",
75
73
  "echarts-for-react": "^3.0.5",
76
74
  "embla-carousel-react": "^8.6.0",
77
75
  "input-otp": "^1.4.2",
@@ -84,7 +82,6 @@
84
82
  "sonner": "^2.0.7",
85
83
  "tailwind-merge": "^3.4.0",
86
84
  "vaul": "^1.1.2",
87
- "zod": "^4.1.13",
88
85
  "@ast-grep/napi": "^0.37.0",
89
86
  "ajv": "^8.17.1",
90
87
  "ajv-formats": "^3.0.1",
package/docs/api/appkit-ui/data/AreaChart.md DELETED
@@ -1,79 +0,0 @@
1
- # AreaChart
2
-
3
- Area Chart component for trend visualization with filled areas.
4
-
5
- ## Example[​](#example "Direct link to Example")
6
-
7
- ```tsx
8
- "use client";
9
-
10
- import { AreaChart } from "@databricks/appkit-ui/react";
11
-
12
- export default function AreaChartExample() {
13
- return (
14
- <AreaChart
15
- data={[
16
- { month: "Jan", visitors: 1000, revenue: 5000 },
17
- { month: "Feb", visitors: 1500, revenue: 7000 },
18
- { month: "Mar", visitors: 2000, revenue: 9000 },
19
- { month: "Apr", visitors: 1800, revenue: 8500 },
20
- { month: "May", visitors: 2200, revenue: 10000 },
21
- { month: "Jun", visitors: 2500, revenue: 11000 },
22
- ]}
23
- xKey="month"
24
- yKey={["visitors", "revenue"]}
25
- stacked
26
- showLegend
27
- height={300}
28
- />
29
- );
30
- }
31
-
32
-
33
- ```
34
-
35
- ## AreaChart[​](#areachart-1 "Direct link to AreaChart")
36
-
37
- Area Chart component for trend visualization with filled areas.
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/area/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/area/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
- | `orientation` | `enum` | | `"vertical"` | Chart orientation |
68
- | `showSymbol` | `boolean` | | `false` | Show data point symbols |
69
- | `smooth` | `boolean` | | `true` | Smooth line curves |
70
- | `stacked` | `boolean` | | `false` | Stack areas |
71
-
72
- ### Usage[​](#usage "Direct link to Usage")
73
-
74
- ```tsx
75
- import { AreaChart } from '@databricks/appkit-ui';
76
-
77
- <AreaChart /* props */ />
78
-
79
- ```
package/docs/api/appkit-ui/data/BarChart.md DELETED
@@ -1,74 +0,0 @@
1
- # BarChart
2
-
3
- Bar Chart component for categorical comparisons.
4
-
5
- ## Example[​](#example "Direct link to Example")
6
-
7
- ```tsx
8
- "use client";
9
-
10
- import { BarChart } from "@databricks/appkit-ui/react";
11
-
12
- export default function BarChartExample() {
13
- return (
14
- <BarChart
15
- data={[
16
- { category: "Product A", value: 100 },
17
- { category: "Product B", value: 200 },
18
- { category: "Product C", value: 150 },
19
- { category: "Product D", value: 300 },
20
- { category: "Product E", value: 250 },
21
- ]}
22
- xKey="category"
23
- yKey="value"
24
- height={300}
25
- />
26
- );
27
- }
28
-
29
-
30
- ```
31
-
32
- ## BarChart[​](#barchart-1 "Direct link to BarChart")
33
-
34
- Bar Chart component for categorical comparisons.
35
-
36
- **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
37
-
38
- **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
39
-
40
- Supports both query mode (queryKey + parameters) and data mode (static data).
41
-
42
- **Source:** [`packages/appkit-ui/src/react/charts/bar/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/bar/index.tsx)
43
-
44
- ### Props[​](#props "Direct link to Props")
45
-
46
- | Prop | Type | Required | Default | Description |
47
- | -------------- | ------------------------- | -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
48
- | `queryKey` | `string` | | - | Analytics query key registered with analytics plugin |
49
- | `parameters` | `Record<string, unknown>` | | - | Query parameters passed to the analytics endpoint |
50
- | `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 |
51
- | `transformer` | `(<T>(data: T) => T)` | | - | Transform raw data before rendering |
52
- | `data` | `ChartData` | | - | Arrow Table or JSON array |
53
- | `title` | `string` | | - | Chart title |
54
- | `showLegend` | `boolean` | | - | Show legend |
55
- | `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 |
56
- | `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) |
57
- | `height` | `number` | | `300` | Chart height in pixels |
58
- | `className` | `string` | | - | Additional CSS classes |
59
- | `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. |
60
- | `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. |
61
- | `ariaLabel` | `string` | | - | Accessibility label for screen readers |
62
- | `testId` | `string` | | - | Test ID for automated testing |
63
- | `options` | `Record<string, unknown>` | | - | Additional ECharts options to merge |
64
- | `orientation` | `enum` | | `"vertical"` | Chart orientation |
65
- | `stacked` | `boolean` | | - | Stack bars |
66
-
67
- ### Usage[​](#usage "Direct link to Usage")
68
-
69
- ```tsx
70
- import { BarChart } from '@databricks/appkit-ui';
71
-
72
- <BarChart /* props */ />
73
-
74
- ```
package/docs/api/appkit-ui/data/DonutChart.md DELETED
@@ -1,72 +0,0 @@
1
- # DonutChart
2
-
3
- Donut Chart component (Pie chart with inner radius).
4
-
5
- ## Example[​](#example "Direct link to Example")
6
-
7
- ```tsx
8
- "use client";
9
-
10
- import { DonutChart } from "@databricks/appkit-ui/react";
11
-
12
- export default function DonutChartExample() {
13
- return (
14
- <DonutChart
15
- data={[
16
- { name: "Engineering", value: 450 },
17
- { name: "Marketing", value: 250 },
18
- { name: "Sales", value: 300 },
19
- { name: "Operations", value: 200 },
20
- ]}
21
- height={300}
22
- />
23
- );
24
- }
25
-
26
-
27
- ```
28
-
29
- ## DonutChart[​](#donutchart-1 "Direct link to DonutChart")
30
-
31
- Donut Chart component (Pie chart with inner radius).
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 { DonutChart } from '@databricks/appkit-ui';
69
-
70
- <DonutChart /* props */ />
71
-
72
- ```
package/docs/api/appkit-ui/data/HeatmapChart.md DELETED
@@ -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
- ```
package/docs/api/appkit-ui/data/LineChart.md DELETED
@@ -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
- ```
package/docs/api/appkit-ui/data/PieChart.md DELETED
@@ -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
- ```