@databricks/appkit-ui 0.20.2 → 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.
Files changed (66) 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/pie/index.d.ts +0 -1
  27. package/dist/react/charts/pie/index.d.ts.map +1 -1
  28. package/dist/react/charts/pie/index.js.map +1 -1
  29. package/dist/react/charts/radar/index.d.ts +0 -1
  30. package/dist/react/charts/radar/index.d.ts.map +1 -1
  31. package/dist/react/charts/radar/index.js.map +1 -1
  32. package/dist/react/charts/scatter/index.d.ts +0 -1
  33. package/dist/react/charts/scatter/index.d.ts.map +1 -1
  34. package/dist/react/charts/scatter/index.js.map +1 -1
  35. package/dist/react/genie/genie-chat-input.d.ts.map +1 -1
  36. package/dist/react/genie/genie-chat-input.js.map +1 -1
  37. package/dist/react/genie/genie-chat-message-list.d.ts.map +1 -1
  38. package/dist/react/genie/genie-chat-message-list.js.map +1 -1
  39. package/dist/react/genie/genie-chat-message.d.ts.map +1 -1
  40. package/dist/react/genie/genie-chat-message.js.map +1 -1
  41. package/dist/react/genie/genie-query-visualization.d.ts.map +1 -1
  42. package/dist/react/genie/genie-query-visualization.js.map +1 -1
  43. package/dist/react/index.d.ts +2 -2
  44. package/dist/react/index.js +2 -2
  45. package/dist/schemas/plugin-manifest.generated.d.ts +178 -0
  46. package/dist/schemas/plugin-manifest.generated.d.ts.map +1 -0
  47. package/dist/schemas/plugin-manifest.schema.json +2 -0
  48. package/docs/api/appkit/Interface.CacheConfig.md +1 -1
  49. package/docs/api/appkit/Interface.PluginManifest.md +104 -6
  50. package/docs/api/appkit/Interface.ResourceEntry.md +5 -7
  51. package/docs/api/appkit/Interface.ResourceFieldEntry.md +2 -0
  52. package/docs/api/appkit/Interface.ResourceRequirement.md +63 -7
  53. package/docs/api/appkit/Interface.StreamExecutionSettings.md +1 -1
  54. package/docs/api/appkit/TypeAlias.PluginData.md +2 -0
  55. package/docs/api/appkit/TypeAlias.ToPlugin.md +2 -0
  56. package/docs/api/appkit.md +6 -6
  57. package/llms.txt +5 -13
  58. package/package.json +2 -5
  59. package/docs/api/appkit-ui/data/AreaChart.md +0 -79
  60. package/docs/api/appkit-ui/data/BarChart.md +0 -74
  61. package/docs/api/appkit-ui/data/DonutChart.md +0 -72
  62. package/docs/api/appkit-ui/data/HeatmapChart.md +0 -91
  63. package/docs/api/appkit-ui/data/LineChart.md +0 -77
  64. package/docs/api/appkit-ui/data/PieChart.md +0 -72
  65. package/docs/api/appkit-ui/data/RadarChart.md +0 -74
  66. package/docs/api/appkit-ui/data/ScatterChart.md +0 -76
@@ -1,6 +1,15 @@
1
1
  # Interface: ResourceRequirement
2
2
 
3
- Declares a resource requirement for a plugin. Can be defined statically in a manifest or dynamically via getResourceRequirements().
3
+ Declares a resource requirement for a plugin. Can be defined statically in a manifest or dynamically via getResourceRequirements(). Narrows the generated base: type → ResourceType enum, permission → ResourcePermission union.
4
+
5
+ ## See[​](#see "Direct link to See")
6
+
7
+ * `packages/shared/src/schemas/plugin-manifest.generated.ts` `ResourceRequirement` — generated base
8
+ * SharedResourceRequirement — shared re-export with runtime `fields` and `required`
9
+
10
+ ## Extends[​](#extends "Direct link to Extends")
11
+
12
+ * `ResourceRequirement`
4
13
 
5
14
  ## Extended by[​](#extended-by "Direct link to Extended by")
6
15
 
@@ -15,7 +24,14 @@ alias: string;
15
24
 
16
25
  ```
17
26
 
18
- Unique alias for this resource within the plugin (e.g., 'warehouse', 'secrets'). Used for UI/display.
27
+ Human-readable label for UI/display only. Deduplication uses resourceKey, not alias.
28
+
29
+ #### Inherited from[​](#inherited-from "Direct link to Inherited from")
30
+
31
+ ```ts
32
+ SharedResourceRequirement.alias
33
+
34
+ ```
19
35
 
20
36
  ***
21
37
 
@@ -28,6 +44,13 @@ description: string;
28
44
 
29
45
  Human-readable description of why this resource is needed
30
46
 
47
+ #### Inherited from[​](#inherited-from-1 "Direct link to Inherited from")
48
+
49
+ ```ts
50
+ SharedResourceRequirement.description
51
+
52
+ ```
53
+
31
54
  ***
32
55
 
33
56
  ### fields[​](#fields "Direct link to fields")
@@ -37,7 +60,14 @@ fields: Record<string, ResourceFieldEntry>;
37
60
 
38
61
  ```
39
62
 
40
- Map of field name to env and optional description. Single-value types use one key (e.g. id); multi-value (database, secret) use multiple keys.
63
+ Map of field name to env and optional description. Single-value types use one key (e.g. id); multi-value (database, secret) use multiple (e.g. instance\_name, database\_name or scope, key).
64
+
65
+ #### Inherited from[​](#inherited-from-2 "Direct link to Inherited from")
66
+
67
+ ```ts
68
+ SharedResourceRequirement.fields
69
+
70
+ ```
41
71
 
42
72
  ***
43
73
 
@@ -48,7 +78,14 @@ permission: ResourcePermission;
48
78
 
49
79
  ```
50
80
 
51
- Required permission level for the resource
81
+ Required permission level for the resource (narrowed to union)
82
+
83
+ #### Overrides[​](#overrides "Direct link to Overrides")
84
+
85
+ ```ts
86
+ SharedResourceRequirement.permission
87
+
88
+ ```
52
89
 
53
90
  ***
54
91
 
@@ -59,7 +96,12 @@ required: boolean;
59
96
 
60
97
  ```
61
98
 
62
- Whether this resource is required (true) or optional (false)
99
+ #### Inherited from[​](#inherited-from-3 "Direct link to Inherited from")
100
+
101
+ ```ts
102
+ SharedResourceRequirement.required
103
+
104
+ ```
63
105
 
64
106
  ***
65
107
 
@@ -70,7 +112,14 @@ resourceKey: string;
70
112
 
71
113
  ```
72
114
 
73
- Stable key for machine use (env naming, composite keys, app.yaml). Required.
115
+ Stable key for machine use: deduplication, env naming, composite keys, app.yaml. Required for registry lookup.
116
+
117
+ #### Inherited from[​](#inherited-from-4 "Direct link to Inherited from")
118
+
119
+ ```ts
120
+ SharedResourceRequirement.resourceKey
121
+
122
+ ```
74
123
 
75
124
  ***
76
125
 
@@ -81,4 +130,11 @@ type: ResourceType;
81
130
 
82
131
  ```
83
132
 
84
- Type of Databricks resource required
133
+ Type of Databricks resource required (narrowed to enum)
134
+
135
+ #### Overrides[​](#overrides-1 "Direct link to Overrides")
136
+
137
+ ```ts
138
+ SharedResourceRequirement.type
139
+
140
+ ```
@@ -1,6 +1,6 @@
1
1
  # Interface: StreamExecutionSettings
2
2
 
3
- Configuration for streaming execution with default and user-scoped settings
3
+ Execution settings for streaming endpoints. Extends PluginExecutionSettings with SSE stream configuration.
4
4
 
5
5
  ## Properties[​](#properties "Direct link to Properties")
6
6
 
@@ -9,6 +9,8 @@ type PluginData<T, U, N> = {
9
9
 
10
10
  ```
11
11
 
12
+ Tuple of plugin class, config, and name. Created by `toPlugin()` and passed to `createApp()`.
13
+
12
14
  ## Type Parameters[​](#type-parameters "Direct link to Type Parameters")
13
15
 
14
16
  | Type Parameter |
@@ -5,6 +5,8 @@ type ToPlugin<T, U, N> = (config?: U) => PluginData<T, U, N>;
5
5
 
6
6
  ```
7
7
 
8
+ Factory function type returned by `toPlugin()`. Accepts optional config and returns a PluginData tuple.
9
+
8
10
  ## Type Parameters[​](#type-parameters "Direct link to Type Parameters")
9
11
 
10
12
  | Type Parameter |
@@ -30,18 +30,18 @@ Core library for building Databricks applications with type-safe SQL queries, pl
30
30
  | Interface | Description |
31
31
  | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
32
32
  | [BasePluginConfig](./docs/api/appkit/Interface.BasePluginConfig.md) | Base configuration interface for AppKit plugins |
33
- | [CacheConfig](./docs/api/appkit/Interface.CacheConfig.md) | Configuration for caching |
33
+ | [CacheConfig](./docs/api/appkit/Interface.CacheConfig.md) | Configuration for the CacheInterceptor. Controls TTL, size limits, storage backend, and probabilistic cleanup. |
34
34
  | [DatabaseCredential](./docs/api/appkit/Interface.DatabaseCredential.md) | Database credentials with OAuth token for Postgres connection |
35
35
  | [GenerateDatabaseCredentialRequest](./docs/api/appkit/Interface.GenerateDatabaseCredentialRequest.md) | Request parameters for generating database OAuth credentials |
36
36
  | [ITelemetry](./docs/api/appkit/Interface.ITelemetry.md) | Plugin-facing interface for OpenTelemetry instrumentation. Provides a thin abstraction over OpenTelemetry APIs for plugins. |
37
37
  | [LakebasePoolConfig](./docs/api/appkit/Interface.LakebasePoolConfig.md) | Configuration for creating a Lakebase connection pool |
38
- | [PluginManifest](./docs/api/appkit/Interface.PluginManifest.md) | Plugin manifest that declares metadata and resource requirements. Attached to plugin classes as a static property. |
38
+ | [PluginManifest](./docs/api/appkit/Interface.PluginManifest.md) | Plugin manifest that declares metadata and resource requirements. Attached to plugin classes as a static property. Extends the shared PluginManifest with strict resource types. |
39
39
  | [RequestedClaims](./docs/api/appkit/Interface.RequestedClaims.md) | Optional claims for fine-grained Unity Catalog table permissions When specified, the returned token will be scoped to only the requested tables |
40
40
  | [RequestedResource](./docs/api/appkit/Interface.RequestedResource.md) | Resource to request permissions for in Unity Catalog |
41
41
  | [ResourceEntry](./docs/api/appkit/Interface.ResourceEntry.md) | Internal representation of a resource in the registry. Extends ResourceRequirement with resolution state and plugin ownership. |
42
42
  | [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. instance\_name, database\_name or scope, key). |
43
- | [ResourceRequirement](./docs/api/appkit/Interface.ResourceRequirement.md) | Declares a resource requirement for a plugin. Can be defined statically in a manifest or dynamically via getResourceRequirements(). |
44
- | [StreamExecutionSettings](./docs/api/appkit/Interface.StreamExecutionSettings.md) | Configuration for streaming execution with default and user-scoped settings |
43
+ | [ResourceRequirement](./docs/api/appkit/Interface.ResourceRequirement.md) | Declares a resource requirement for a plugin. Can be defined statically in a manifest or dynamically via getResourceRequirements(). Narrows the generated base: type → ResourceType enum, permission → ResourcePermission union. |
44
+ | [StreamExecutionSettings](./docs/api/appkit/Interface.StreamExecutionSettings.md) | Execution settings for streaming endpoints. Extends PluginExecutionSettings with SSE stream configuration. |
45
45
  | [TelemetryConfig](./docs/api/appkit/Interface.TelemetryConfig.md) | OpenTelemetry configuration for AppKit applications |
46
46
  | [ValidationResult](./docs/api/appkit/Interface.ValidationResult.md) | Result of validating all registered resources against the environment. |
47
47
 
@@ -51,9 +51,9 @@ Core library for building Databricks applications with type-safe SQL queries, pl
51
51
  | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
52
52
  | [ConfigSchema](./docs/api/appkit/TypeAlias.ConfigSchema.md) | Configuration schema definition for plugin config. Re-exported from the standard JSON Schema Draft 7 types. |
53
53
  | [IAppRouter](./docs/api/appkit/TypeAlias.IAppRouter.md) | Express router type for plugin route registration |
54
- | [PluginData](./docs/api/appkit/TypeAlias.PluginData.md) | - |
54
+ | [PluginData](./docs/api/appkit/TypeAlias.PluginData.md) | Tuple of plugin class, config, and name. Created by `toPlugin()` and passed to `createApp()`. |
55
55
  | [ResourcePermission](./docs/api/appkit/TypeAlias.ResourcePermission.md) | Union of all possible permission levels across all resource types. |
56
- | [ToPlugin](./docs/api/appkit/TypeAlias.ToPlugin.md) | - |
56
+ | [ToPlugin](./docs/api/appkit/TypeAlias.ToPlugin.md) | Factory function type returned by `toPlugin()`. Accepts optional config and returns a PluginData tuple. |
57
57
 
58
58
  ## Variables[​](#variables "Direct link to Variables")
59
59
 
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.20.3",
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",
@@ -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
- ```
@@ -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
- ```
@@ -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
- ```
@@ -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
- ```