@databrainhq/plugin 0.14.59 → 0.14.61
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/README.md +233 -233
- package/dist/consts/metricOptions.d.ts +0 -1
- package/dist/webcomponents.es.js +25847 -25854
- package/dist/webcomponents.umd.js +180 -180
- package/package.json +109 -109
- package/src/index.ts +8 -8
package/README.md
CHANGED
|
@@ -1,233 +1,233 @@
|
|
|
1
|
-
# @databrainhq/plugin
|
|
2
|
-
|
|
3
|
-
> Databrain app ui web component plugin.
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@databrainhq/plugin) [](https://standardjs.com)
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install @databrainhq/plugin
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
React/Solidjs
|
|
16
|
-
|
|
17
|
-
Import in main/index/App
|
|
18
|
-
```tsx
|
|
19
|
-
import '@databrainhq/plugin/web';
|
|
20
|
-
```
|
|
21
|
-
Then use it anywhere in your app
|
|
22
|
-
|
|
23
|
-
Integrating Dashboard
|
|
24
|
-
|
|
25
|
-
```tsx
|
|
26
|
-
const Example = () => {
|
|
27
|
-
return (
|
|
28
|
-
<dbn-dashboard
|
|
29
|
-
token="Your Guest Token"
|
|
30
|
-
dashboardId="Your Dashboard Id"
|
|
31
|
-
options={{
|
|
32
|
-
disableMetricCreation: false,
|
|
33
|
-
disableMetricUpdation: false,
|
|
34
|
-
disableMetricDeletion: false,
|
|
35
|
-
disableLayoutCustomization: false,
|
|
36
|
-
chartColors: [
|
|
37
|
-
'violet',
|
|
38
|
-
'indigo',
|
|
39
|
-
'blue',
|
|
40
|
-
'green',
|
|
41
|
-
'yellow',
|
|
42
|
-
'orange',
|
|
43
|
-
'red',
|
|
44
|
-
'pink',
|
|
45
|
-
'gray',
|
|
46
|
-
],
|
|
47
|
-
}}
|
|
48
|
-
theme={YOUR_THEME}
|
|
49
|
-
/>
|
|
50
|
-
);
|
|
51
|
-
};
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
Integrating Metric
|
|
55
|
-
|
|
56
|
-
```tsx
|
|
57
|
-
const Example = () => {
|
|
58
|
-
return (
|
|
59
|
-
<Metric
|
|
60
|
-
token="Your Guest Token"
|
|
61
|
-
metricId="Your Metric Id"
|
|
62
|
-
width="500px"
|
|
63
|
-
height="300px"
|
|
64
|
-
chartRendererType="canvas"
|
|
65
|
-
chartColors={[
|
|
66
|
-
'violet',
|
|
67
|
-
'indigo',
|
|
68
|
-
'blue',
|
|
69
|
-
'green',
|
|
70
|
-
'yellow',
|
|
71
|
-
'orange',
|
|
72
|
-
'red',
|
|
73
|
-
'pink',
|
|
74
|
-
'gray',
|
|
75
|
-
]}
|
|
76
|
-
theme={YOUR_THEME}
|
|
77
|
-
/>
|
|
78
|
-
);
|
|
79
|
-
};
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
Vue
|
|
83
|
-
|
|
84
|
-
Import in main/index/App
|
|
85
|
-
```vue
|
|
86
|
-
<script setup lang="ts">
|
|
87
|
-
import '@databrainhq/plugin/web';
|
|
88
|
-
</script>
|
|
89
|
-
```
|
|
90
|
-
Then use it anywhere in your app
|
|
91
|
-
|
|
92
|
-
Integrating Dashboard
|
|
93
|
-
|
|
94
|
-
```vue
|
|
95
|
-
<script setup lang="ts">
|
|
96
|
-
// your component logic
|
|
97
|
-
</script>
|
|
98
|
-
<template>
|
|
99
|
-
<dbn-dashboard
|
|
100
|
-
:token="/*YOUR GUEST TOKEN*/"
|
|
101
|
-
:options="/*YOUR ACCESS PERMISSION OPTIONS*/"
|
|
102
|
-
:theme="/*YOUR THEME*/"
|
|
103
|
-
:dashboardId="/*YOUR DASHBORD ID*/"
|
|
104
|
-
></dbn-dashboard>
|
|
105
|
-
</template>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
Integrating Metric
|
|
109
|
-
|
|
110
|
-
```vue
|
|
111
|
-
<script setup lang="ts">
|
|
112
|
-
// your component logic
|
|
113
|
-
</script>
|
|
114
|
-
<template>
|
|
115
|
-
<dbn-metric
|
|
116
|
-
:token="/*YOUR GUEST TOKEN*/"
|
|
117
|
-
chartRendererType="canvas"
|
|
118
|
-
:theme="/*YOUR THEME*/"
|
|
119
|
-
:dashboardId="/*YOUR DASHBORD ID*/"
|
|
120
|
-
width="500"
|
|
121
|
-
height="400"
|
|
122
|
-
:style="/* YOUR STYLEs */"
|
|
123
|
-
className="YOUR CLASS"
|
|
124
|
-
></dbn-metric>
|
|
125
|
-
</template>
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
Svelte
|
|
129
|
-
|
|
130
|
-
Import in main/index/App
|
|
131
|
-
|
|
132
|
-
```svelte
|
|
133
|
-
<script lang="ts">
|
|
134
|
-
import '@databrainhq/plugin/web';
|
|
135
|
-
</script>
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
Then use it anywhere in your app
|
|
139
|
-
|
|
140
|
-
Integrating Dashboard
|
|
141
|
-
|
|
142
|
-
```svelte
|
|
143
|
-
<script lang="ts">
|
|
144
|
-
// your component logic
|
|
145
|
-
</script>
|
|
146
|
-
<main>
|
|
147
|
-
<dbn-dashboard
|
|
148
|
-
token={/*YOUR GUEST TOKEN*/}
|
|
149
|
-
options={/*YOUR ACCESS PERMISSION OPTIONS*/}
|
|
150
|
-
theme={/*YOUR THEME*/}
|
|
151
|
-
dashboardId={/*YOUR DASHBORD ID*/}
|
|
152
|
-
></dbn-dashboard>
|
|
153
|
-
</main>
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
Integrating Metric
|
|
157
|
-
|
|
158
|
-
```svelte
|
|
159
|
-
<script lang="ts">
|
|
160
|
-
// your component logic
|
|
161
|
-
</script>
|
|
162
|
-
<main>
|
|
163
|
-
<dbn-metric
|
|
164
|
-
token={/*YOUR GUEST TOKEN*/}
|
|
165
|
-
chartRendererType="canvas"
|
|
166
|
-
theme={/*YOUR THEME*/}
|
|
167
|
-
dashboardId="/*YOUR DASHBORD ID*/"
|
|
168
|
-
width="500"
|
|
169
|
-
height="400"
|
|
170
|
-
style={/* YOUR STYLEs */}
|
|
171
|
-
className="YOUR CLASS"
|
|
172
|
-
></dbn-metric>
|
|
173
|
-
</main>
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
Angular
|
|
177
|
-
|
|
178
|
-
Add suport for custom elements/web components in app.module.ts
|
|
179
|
-
|
|
180
|
-
```ts
|
|
181
|
-
// app.module.ts
|
|
182
|
-
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
183
|
-
import { BrowserModule } from '@angular/platform-browser';
|
|
184
|
-
|
|
185
|
-
import { AppComponent } from './app.component';
|
|
186
|
-
|
|
187
|
-
@NgModule({
|
|
188
|
-
declarations: [AppComponent],
|
|
189
|
-
imports: [BrowserModule],
|
|
190
|
-
providers: [],
|
|
191
|
-
bootstrap: [AppComponent],
|
|
192
|
-
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
193
|
-
})
|
|
194
|
-
|
|
195
|
-
export class AppModule {}
|
|
196
|
-
```
|
|
197
|
-
Import in app.component.ts
|
|
198
|
-
|
|
199
|
-
```ts
|
|
200
|
-
import '@databrainhq/plugin/web';
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
Then use it anywhere in your app
|
|
204
|
-
|
|
205
|
-
Integrating Dashboard
|
|
206
|
-
|
|
207
|
-
```html
|
|
208
|
-
<dbn-dashboard
|
|
209
|
-
token="YOUR GUEST TOKEN"
|
|
210
|
-
options="YOUR ACCESS PERMISSION OPTIONS"
|
|
211
|
-
theme="YOUR THEME"
|
|
212
|
-
dashboardId="YOUR DASHBORD ID"
|
|
213
|
-
></dbn-dashboard>
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
Integrating Metric
|
|
217
|
-
|
|
218
|
-
```html
|
|
219
|
-
<dbn-metric
|
|
220
|
-
token="YOUR GUEST TOKEN"
|
|
221
|
-
chartRendererType="canvas"
|
|
222
|
-
theme="YOUR THEME"
|
|
223
|
-
dashboardId="YOUR DASHBORD ID"
|
|
224
|
-
width="500"
|
|
225
|
-
height="400"
|
|
226
|
-
style="YOUR STYLE"
|
|
227
|
-
className="YOUR CLASS"
|
|
228
|
-
></dbn-metric>
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
## License
|
|
232
|
-
|
|
233
|
-
MIT © [databrainhq](https://github.com/databrainhq)
|
|
1
|
+
# @databrainhq/plugin
|
|
2
|
+
|
|
3
|
+
> Databrain app ui web component plugin.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@databrainhq/plugin) [](https://standardjs.com)
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @databrainhq/plugin
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
React/Solidjs
|
|
16
|
+
|
|
17
|
+
Import in main/index/App
|
|
18
|
+
```tsx
|
|
19
|
+
import '@databrainhq/plugin/web';
|
|
20
|
+
```
|
|
21
|
+
Then use it anywhere in your app
|
|
22
|
+
|
|
23
|
+
Integrating Dashboard
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
const Example = () => {
|
|
27
|
+
return (
|
|
28
|
+
<dbn-dashboard
|
|
29
|
+
token="Your Guest Token"
|
|
30
|
+
dashboardId="Your Dashboard Id"
|
|
31
|
+
options={{
|
|
32
|
+
disableMetricCreation: false,
|
|
33
|
+
disableMetricUpdation: false,
|
|
34
|
+
disableMetricDeletion: false,
|
|
35
|
+
disableLayoutCustomization: false,
|
|
36
|
+
chartColors: [
|
|
37
|
+
'violet',
|
|
38
|
+
'indigo',
|
|
39
|
+
'blue',
|
|
40
|
+
'green',
|
|
41
|
+
'yellow',
|
|
42
|
+
'orange',
|
|
43
|
+
'red',
|
|
44
|
+
'pink',
|
|
45
|
+
'gray',
|
|
46
|
+
],
|
|
47
|
+
}}
|
|
48
|
+
theme={YOUR_THEME}
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Integrating Metric
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
const Example = () => {
|
|
58
|
+
return (
|
|
59
|
+
<Metric
|
|
60
|
+
token="Your Guest Token"
|
|
61
|
+
metricId="Your Metric Id"
|
|
62
|
+
width="500px"
|
|
63
|
+
height="300px"
|
|
64
|
+
chartRendererType="canvas"
|
|
65
|
+
chartColors={[
|
|
66
|
+
'violet',
|
|
67
|
+
'indigo',
|
|
68
|
+
'blue',
|
|
69
|
+
'green',
|
|
70
|
+
'yellow',
|
|
71
|
+
'orange',
|
|
72
|
+
'red',
|
|
73
|
+
'pink',
|
|
74
|
+
'gray',
|
|
75
|
+
]}
|
|
76
|
+
theme={YOUR_THEME}
|
|
77
|
+
/>
|
|
78
|
+
);
|
|
79
|
+
};
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Vue
|
|
83
|
+
|
|
84
|
+
Import in main/index/App
|
|
85
|
+
```vue
|
|
86
|
+
<script setup lang="ts">
|
|
87
|
+
import '@databrainhq/plugin/web';
|
|
88
|
+
</script>
|
|
89
|
+
```
|
|
90
|
+
Then use it anywhere in your app
|
|
91
|
+
|
|
92
|
+
Integrating Dashboard
|
|
93
|
+
|
|
94
|
+
```vue
|
|
95
|
+
<script setup lang="ts">
|
|
96
|
+
// your component logic
|
|
97
|
+
</script>
|
|
98
|
+
<template>
|
|
99
|
+
<dbn-dashboard
|
|
100
|
+
:token="/*YOUR GUEST TOKEN*/"
|
|
101
|
+
:options="/*YOUR ACCESS PERMISSION OPTIONS*/"
|
|
102
|
+
:theme="/*YOUR THEME*/"
|
|
103
|
+
:dashboardId="/*YOUR DASHBORD ID*/"
|
|
104
|
+
></dbn-dashboard>
|
|
105
|
+
</template>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
Integrating Metric
|
|
109
|
+
|
|
110
|
+
```vue
|
|
111
|
+
<script setup lang="ts">
|
|
112
|
+
// your component logic
|
|
113
|
+
</script>
|
|
114
|
+
<template>
|
|
115
|
+
<dbn-metric
|
|
116
|
+
:token="/*YOUR GUEST TOKEN*/"
|
|
117
|
+
chartRendererType="canvas"
|
|
118
|
+
:theme="/*YOUR THEME*/"
|
|
119
|
+
:dashboardId="/*YOUR DASHBORD ID*/"
|
|
120
|
+
width="500"
|
|
121
|
+
height="400"
|
|
122
|
+
:style="/* YOUR STYLEs */"
|
|
123
|
+
className="YOUR CLASS"
|
|
124
|
+
></dbn-metric>
|
|
125
|
+
</template>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
Svelte
|
|
129
|
+
|
|
130
|
+
Import in main/index/App
|
|
131
|
+
|
|
132
|
+
```svelte
|
|
133
|
+
<script lang="ts">
|
|
134
|
+
import '@databrainhq/plugin/web';
|
|
135
|
+
</script>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Then use it anywhere in your app
|
|
139
|
+
|
|
140
|
+
Integrating Dashboard
|
|
141
|
+
|
|
142
|
+
```svelte
|
|
143
|
+
<script lang="ts">
|
|
144
|
+
// your component logic
|
|
145
|
+
</script>
|
|
146
|
+
<main>
|
|
147
|
+
<dbn-dashboard
|
|
148
|
+
token={/*YOUR GUEST TOKEN*/}
|
|
149
|
+
options={/*YOUR ACCESS PERMISSION OPTIONS*/}
|
|
150
|
+
theme={/*YOUR THEME*/}
|
|
151
|
+
dashboardId={/*YOUR DASHBORD ID*/}
|
|
152
|
+
></dbn-dashboard>
|
|
153
|
+
</main>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Integrating Metric
|
|
157
|
+
|
|
158
|
+
```svelte
|
|
159
|
+
<script lang="ts">
|
|
160
|
+
// your component logic
|
|
161
|
+
</script>
|
|
162
|
+
<main>
|
|
163
|
+
<dbn-metric
|
|
164
|
+
token={/*YOUR GUEST TOKEN*/}
|
|
165
|
+
chartRendererType="canvas"
|
|
166
|
+
theme={/*YOUR THEME*/}
|
|
167
|
+
dashboardId="/*YOUR DASHBORD ID*/"
|
|
168
|
+
width="500"
|
|
169
|
+
height="400"
|
|
170
|
+
style={/* YOUR STYLEs */}
|
|
171
|
+
className="YOUR CLASS"
|
|
172
|
+
></dbn-metric>
|
|
173
|
+
</main>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
Angular
|
|
177
|
+
|
|
178
|
+
Add suport for custom elements/web components in app.module.ts
|
|
179
|
+
|
|
180
|
+
```ts
|
|
181
|
+
// app.module.ts
|
|
182
|
+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
183
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
184
|
+
|
|
185
|
+
import { AppComponent } from './app.component';
|
|
186
|
+
|
|
187
|
+
@NgModule({
|
|
188
|
+
declarations: [AppComponent],
|
|
189
|
+
imports: [BrowserModule],
|
|
190
|
+
providers: [],
|
|
191
|
+
bootstrap: [AppComponent],
|
|
192
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
193
|
+
})
|
|
194
|
+
|
|
195
|
+
export class AppModule {}
|
|
196
|
+
```
|
|
197
|
+
Import in app.component.ts
|
|
198
|
+
|
|
199
|
+
```ts
|
|
200
|
+
import '@databrainhq/plugin/web';
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
Then use it anywhere in your app
|
|
204
|
+
|
|
205
|
+
Integrating Dashboard
|
|
206
|
+
|
|
207
|
+
```html
|
|
208
|
+
<dbn-dashboard
|
|
209
|
+
token="YOUR GUEST TOKEN"
|
|
210
|
+
options="YOUR ACCESS PERMISSION OPTIONS"
|
|
211
|
+
theme="YOUR THEME"
|
|
212
|
+
dashboardId="YOUR DASHBORD ID"
|
|
213
|
+
></dbn-dashboard>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
Integrating Metric
|
|
217
|
+
|
|
218
|
+
```html
|
|
219
|
+
<dbn-metric
|
|
220
|
+
token="YOUR GUEST TOKEN"
|
|
221
|
+
chartRendererType="canvas"
|
|
222
|
+
theme="YOUR THEME"
|
|
223
|
+
dashboardId="YOUR DASHBORD ID"
|
|
224
|
+
width="500"
|
|
225
|
+
height="400"
|
|
226
|
+
style="YOUR STYLE"
|
|
227
|
+
className="YOUR CLASS"
|
|
228
|
+
></dbn-metric>
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
## License
|
|
232
|
+
|
|
233
|
+
MIT © [databrainhq](https://github.com/databrainhq)
|
|
@@ -129,7 +129,6 @@ export declare const MONGODB = "mongodb";
|
|
|
129
129
|
export declare const DATABRICKS = "databricks";
|
|
130
130
|
export declare const CLICKHOUSE = "clickhouse";
|
|
131
131
|
export declare const AWSS3 = "awss3";
|
|
132
|
-
export declare const ELASTICSEARCH = "elasticsearch";
|
|
133
132
|
export declare const DOWNLOAD_DATA_OPTIONS: {
|
|
134
133
|
RAW_DATA: string;
|
|
135
134
|
DOWNLOAD_WITHOUT_FILTERS: string;
|