@syidax/advanced-pro 1.0.1 → 1.0.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/README.md +275 -17
- package/package.json +18 -3
package/README.md
CHANGED
|
@@ -1,39 +1,297 @@
|
|
|
1
|
-
# Syidax Chart
|
|
1
|
+
# Syidax Chart & Grid Pro
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> **Give your data a bigger stage.**
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@syidax/advanced-pro)
|
|
6
|
+
[](https://www.npmjs.com/package/@syidax/advanced-pro)
|
|
7
|
+
[](#choose-your-framework)
|
|
8
|
+
|
|
9
|
+
**[Visit Syidax](https://syidax.com/)** · [Chart demos & docs](https://chart.syidax.com/charts/) · [Grid demos & docs](https://grid.syidax.com/grid/) · [Plans & licensing](https://syidax.com/pricing.html)
|
|
10
|
+
|
|
11
|
+
Bring charts and data grids into the same application with a shared Web Components approach. Start with the Community capabilities, then add richer visualization and data workflows with the Chart and Grid rights your application needs.
|
|
12
|
+
|
|
13
|
+
| Build | Start here |
|
|
14
|
+
| --- | --- |
|
|
15
|
+
| A dashboard people can explore | Interactive charts, legends, tooltips, and familiar DOM events |
|
|
16
|
+
| A useful data workspace | Grids with sorting, filtering, editing, and column configuration |
|
|
17
|
+
| A UI that fits your app | Theme styles, typed properties, and individual element imports |
|
|
18
|
+
| More demanding workflows | Stock charts and advanced Chart/Grid features, subject to the applicable product license |
|
|
19
|
+
|
|
20
|
+
**Explore first, then build.** Open a live example, change its properties, and bring the component into your own screen.
|
|
21
|
+
|
|
22
|
+
[Quick start](#quick-start) · [React](#react) · [Angular](#angular) · [Vue](#vue) · [License](#license) · [Explore Syidax](#explore-syidax)
|
|
23
|
+
|
|
24
|
+
## Quick start
|
|
4
25
|
|
|
5
|
-
## Installation
|
|
6
26
|
|
|
7
27
|
```sh
|
|
8
|
-
npm install @syidax/advanced-pro
|
|
28
|
+
npm install @syidax/advanced-pro
|
|
9
29
|
```
|
|
10
30
|
|
|
11
|
-
Pro includes the Community
|
|
31
|
+
**Pro includes the Community feature set.** Install one edition of each product in an application; Community and Pro use the same element names.
|
|
12
32
|
|
|
13
|
-
|
|
33
|
+
In a Vite app (or another bundler that supports CSS imports), create **`src/syidax.ts`**. Import the styles and register only the elements used by this example:
|
|
14
34
|
|
|
15
|
-
```
|
|
35
|
+
```ts
|
|
16
36
|
import '@syidax/advanced-pro/css/chart';
|
|
17
|
-
import
|
|
18
|
-
defineCustomElement
|
|
37
|
+
import '@syidax/advanced-pro/css/grid';
|
|
38
|
+
import { defineCustomElement as defineLineChart } from '@syidax/advanced-pro/components/sy-line-chart.js';
|
|
39
|
+
import { defineCustomElement as defineGrid } from '@syidax/advanced-pro/components/sy-grid.js';
|
|
40
|
+
|
|
41
|
+
defineLineChart();
|
|
42
|
+
defineGrid();
|
|
19
43
|
```
|
|
20
44
|
|
|
45
|
+
For a plain HTML app, add the markup to **`index.html`** and the entry code to **`src/main.ts`**:
|
|
46
|
+
|
|
21
47
|
```html
|
|
22
|
-
<sy-
|
|
48
|
+
<main class="sy-theme">
|
|
49
|
+
<sy-line-chart chart-title="Weekly revenue" height="280"></sy-line-chart>
|
|
50
|
+
<sy-grid height="280"></sy-grid>
|
|
51
|
+
</main>
|
|
52
|
+
<script type="module" src="/src/main.ts"></script>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import './syidax';
|
|
58
|
+
|
|
59
|
+
const values = [18, 28, 24, 42];
|
|
60
|
+
const columnDefs = [
|
|
61
|
+
{ field: 'product', headerName: 'Product', sortable: true },
|
|
62
|
+
{ field: 'revenue', headerName: 'Revenue', sortable: true },
|
|
63
|
+
];
|
|
64
|
+
const rowData = [
|
|
65
|
+
{ product: 'Studio', revenue: 4200 },
|
|
66
|
+
{ product: 'Workspace', revenue: 6800 },
|
|
67
|
+
];
|
|
68
|
+
|
|
69
|
+
const chart = document.querySelector('sy-line-chart');
|
|
70
|
+
const grid = document.querySelector('sy-grid');
|
|
71
|
+
if (chart) chart.values = values;
|
|
72
|
+
if (grid) {
|
|
73
|
+
grid.columnDefs = columnDefs;
|
|
74
|
+
grid.rowData = rowData;
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Assign arrays and objects as JavaScript properties; HTML attributes are strings. Give charts and grids a visible size in your layout.
|
|
79
|
+
|
|
80
|
+
## Choose your framework
|
|
81
|
+
|
|
82
|
+
The examples below use the published Web Components directly. You do not need a separate Syidax framework wrapper. The React and Vue examples reuse `src/syidax.ts` above; Angular has its own global-style setup below.
|
|
83
|
+
|
|
84
|
+
### React
|
|
85
|
+
|
|
86
|
+
For a React 19 + TypeScript app, use **`src/App.tsx`**. The JSX declaration gives custom tags their element types and lets you use refs and component properties without `any`.
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
// src/App.tsx — React 19 + TypeScript
|
|
90
|
+
import { useEffect, useRef } from 'react';
|
|
91
|
+
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
|
|
92
|
+
import type { Components } from '@syidax/advanced-pro';
|
|
93
|
+
import './syidax';
|
|
94
|
+
|
|
95
|
+
declare module 'react' {
|
|
96
|
+
namespace JSX {
|
|
97
|
+
interface IntrinsicElements {
|
|
98
|
+
'sy-line-chart': DetailedHTMLProps<HTMLAttributes<HTMLSyLineChartElement>, HTMLSyLineChartElement> & Partial<Components.SyLineChart>;
|
|
99
|
+
'sy-grid': DetailedHTMLProps<HTMLAttributes<HTMLSyGridElement>, HTMLSyGridElement> & Partial<Components.SyGrid>;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
const values = [18, 28, 24, 42];
|
|
105
|
+
const columnDefs = [
|
|
106
|
+
{ field: 'product', headerName: 'Product', sortable: true },
|
|
107
|
+
{ field: 'revenue', headerName: 'Revenue', sortable: true },
|
|
108
|
+
];
|
|
109
|
+
const rowData = [
|
|
110
|
+
{ product: 'Studio', revenue: 4200 },
|
|
111
|
+
{ product: 'Workspace', revenue: 6800 },
|
|
112
|
+
];
|
|
113
|
+
|
|
114
|
+
export default function App() {
|
|
115
|
+
const chart = useRef<HTMLSyLineChartElement>(null);
|
|
116
|
+
const grid = useRef<HTMLSyGridElement>(null);
|
|
117
|
+
|
|
118
|
+
useEffect(() => {
|
|
119
|
+
if (chart.current) chart.current.values = values;
|
|
120
|
+
if (grid.current) {
|
|
121
|
+
grid.current.columnDefs = columnDefs;
|
|
122
|
+
grid.current.rowData = rowData;
|
|
123
|
+
}
|
|
124
|
+
}, []);
|
|
125
|
+
|
|
126
|
+
return (
|
|
127
|
+
<main className="sy-theme">
|
|
128
|
+
<sy-line-chart ref={chart} chartTitle="Weekly revenue" height={280} />
|
|
129
|
+
<sy-grid ref={grid} height={280} />
|
|
130
|
+
</main>
|
|
131
|
+
);
|
|
132
|
+
}
|
|
23
133
|
```
|
|
24
134
|
|
|
25
|
-
|
|
135
|
+
Keep refs for imperative component methods and use an effect with the appropriate dependencies when your data changes. Refs also provide an explicit way to pass arrays and objects.
|
|
26
136
|
|
|
27
|
-
|
|
137
|
+
### Angular
|
|
138
|
+
|
|
139
|
+
For an Angular 20.2+ standalone application, add the package styles to your project’s **`angular.json` → `build.options.styles`** array, before your application styles. Keep any styles your app already uses:
|
|
140
|
+
|
|
141
|
+
```json
|
|
142
|
+
{
|
|
143
|
+
"styles": [
|
|
144
|
+
"node_modules/@syidax/advanced-pro/dist/assets/style/chart.css",
|
|
145
|
+
"node_modules/@syidax/advanced-pro/dist/assets/style/grid.css",
|
|
146
|
+
"src/styles.css"
|
|
147
|
+
]
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Use **`CUSTOM_ELEMENTS_SCHEMA`** in each standalone component whose template contains Syidax elements. Bind arrays and objects with Angular property bindings, and events with `(eventName)`.
|
|
152
|
+
|
|
153
|
+
```ts
|
|
154
|
+
// src/app/app.component.ts
|
|
155
|
+
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
156
|
+
import { defineCustomElement as defineLineChart } from '@syidax/advanced-pro/components/sy-line-chart.js';
|
|
157
|
+
import { defineCustomElement as defineGrid } from '@syidax/advanced-pro/components/sy-grid.js';
|
|
158
|
+
|
|
159
|
+
defineLineChart();
|
|
160
|
+
defineGrid();
|
|
161
|
+
|
|
162
|
+
@Component({
|
|
163
|
+
selector: 'app-root',
|
|
164
|
+
standalone: true,
|
|
165
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
166
|
+
template: `
|
|
167
|
+
<main class="sy-theme">
|
|
168
|
+
<sy-line-chart [values]="values" [height]="280" chart-title="Weekly revenue"></sy-line-chart>
|
|
169
|
+
<sy-grid [columnDefs]="columnDefs" [rowData]="rowData" [height]="280"></sy-grid>
|
|
170
|
+
</main>
|
|
171
|
+
`,
|
|
172
|
+
})
|
|
173
|
+
export class AppComponent {
|
|
174
|
+
values = [18, 28, 24, 42];
|
|
175
|
+
columnDefs = [
|
|
176
|
+
{ field: 'product', headerName: 'Product', sortable: true },
|
|
177
|
+
{ field: 'revenue', headerName: 'Revenue', sortable: true },
|
|
178
|
+
];
|
|
179
|
+
rowData = [
|
|
180
|
+
{ product: 'Studio', revenue: 4200 },
|
|
181
|
+
{ product: 'Workspace', revenue: 6800 },
|
|
182
|
+
];
|
|
183
|
+
}
|
|
184
|
+
```
|
|
28
185
|
|
|
29
|
-
|
|
186
|
+
In **`src/main.ts`**, bootstrap the component:
|
|
187
|
+
|
|
188
|
+
```ts
|
|
189
|
+
import { provideZonelessChangeDetection } from '@angular/core';
|
|
190
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
191
|
+
import { AppComponent } from './app/app.component';
|
|
192
|
+
|
|
193
|
+
bootstrapApplication(AppComponent, {
|
|
194
|
+
providers: [provideZonelessChangeDetection()],
|
|
195
|
+
}).catch(console.error);
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
For an existing application, keep its providers and bootstrap configuration and apply the component/schema changes to the appropriate screen. Restart `ng serve` after changing global styles.
|
|
199
|
+
|
|
200
|
+
### Vue
|
|
201
|
+
|
|
202
|
+
For Vue 3 + Vite, tell the template compiler that `sy-*` tags are custom elements. Merge this into **`vite.config.ts`** and restart the dev server:
|
|
203
|
+
|
|
204
|
+
```ts
|
|
205
|
+
// vite.config.ts
|
|
206
|
+
import { defineConfig } from 'vite';
|
|
207
|
+
import vue from '@vitejs/plugin-vue';
|
|
208
|
+
|
|
209
|
+
export default defineConfig({
|
|
210
|
+
plugins: [vue({
|
|
211
|
+
template: {
|
|
212
|
+
compilerOptions: { isCustomElement: tag => tag.startsWith('sy-') },
|
|
213
|
+
},
|
|
214
|
+
})],
|
|
215
|
+
});
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
Then use **`src/App.vue`**:
|
|
219
|
+
|
|
220
|
+
```vue
|
|
221
|
+
<script setup lang="ts">
|
|
222
|
+
import './syidax';
|
|
223
|
+
|
|
224
|
+
const values = [18, 28, 24, 42];
|
|
225
|
+
const columnDefs = [
|
|
226
|
+
{ field: 'product', headerName: 'Product', sortable: true },
|
|
227
|
+
{ field: 'revenue', headerName: 'Revenue', sortable: true },
|
|
228
|
+
];
|
|
229
|
+
const rowData = [
|
|
230
|
+
{ product: 'Studio', revenue: 4200 },
|
|
231
|
+
{ product: 'Workspace', revenue: 6800 },
|
|
232
|
+
];
|
|
233
|
+
</script>
|
|
234
|
+
|
|
235
|
+
<template>
|
|
236
|
+
<main class="sy-theme">
|
|
237
|
+
<sy-line-chart :values.prop="values" :height.prop="280" chart-title="Weekly revenue" />
|
|
238
|
+
<sy-grid :columnDefs.prop="columnDefs" :rowData.prop="rowData" :height.prop="280" />
|
|
239
|
+
</main>
|
|
240
|
+
</template>
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
The `.prop` modifier keeps data as JavaScript values instead of serialized attributes. Update the bound arrays when the underlying data changes.
|
|
244
|
+
|
|
245
|
+
### Client rendering, themes, and events
|
|
246
|
+
|
|
247
|
+
- These examples target browser-rendered applications. With Next.js, Nuxt, or Angular SSR, load element registration on the client and avoid accessing `window`, `document`, or element refs during server rendering.
|
|
248
|
+
- Import a product’s CSS once and retain the `sy-theme` application container. Add your own layout and theme customization around it.
|
|
249
|
+
- Register each element once. Keep one version and edition of a product per page, including in micro-frontends.
|
|
250
|
+
- Custom event names are case-sensitive. Use the event names and `detail` payloads documented in the component API.
|
|
251
|
+
- Grid features that use external WASM or worker assets need those assets served by your application. Follow the [Grid installation guide](https://grid.syidax.com/grid/getting-started/install-package/) for the asset and hosting setup.
|
|
252
|
+
|
|
253
|
+
## Activate Pro
|
|
254
|
+
|
|
255
|
+
Get the signed license certificate from your [Syidax account](https://syidax.com/licenses.html). Register it once during application startup before using licensed features:
|
|
256
|
+
|
|
257
|
+
```ts
|
|
30
258
|
import { registerLicense } from '@syidax/advanced-pro/license';
|
|
31
|
-
|
|
32
|
-
|
|
259
|
+
|
|
260
|
+
// Supply the signed certificate issued for your application.
|
|
261
|
+
export async function activateSyidax(certificate: string) {
|
|
262
|
+
const result = await registerLicense(certificate);
|
|
263
|
+
if (!result.ok) throw new Error('Syidax license: ' + result.code);
|
|
264
|
+
}
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
Alternatively, serve the issued license JSON file from your application and point to it in the HTML head. In this package version, the meta tag contains the file URL:
|
|
268
|
+
|
|
269
|
+
```html
|
|
270
|
+
<meta name="syidax-license" content="/licenses/syidax-license.json">
|
|
33
271
|
```
|
|
34
272
|
|
|
35
|
-
|
|
273
|
+
**Chart and Grid are licensed independently.** Installing this package does not activate both products; register the certificates for the rights you purchased. See [plans and licensing](https://syidax.com/pricing.html) for current options.
|
|
274
|
+
|
|
275
|
+
## Explore Syidax
|
|
276
|
+
|
|
277
|
+
| Package | What it brings to your app |
|
|
278
|
+
| --- | --- |
|
|
279
|
+
| [Core Community](https://www.npmjs.com/package/@syidax/core) | Shared themes and everyday UI components |
|
|
280
|
+
| [Core Pro](https://www.npmjs.com/package/@syidax/core-pro) | Core plus richer file, document, tree, and sparkline components |
|
|
281
|
+
| [Chart & Grid Community](https://www.npmjs.com/package/@syidax/advanced) | Interactive charts and data grids |
|
|
282
|
+
| [Chart & Grid Pro](https://www.npmjs.com/package/@syidax/advanced-pro) | Advanced visualization and data workflows with the appropriate product rights |
|
|
283
|
+
|
|
284
|
+
Core is optional for these chart and grid examples. If your app also uses Core Pro and needs to satisfy the optional `@syidax/core` peer, install it under that name with an [npm alias](https://docs.npmjs.com/cli/v11/using-npm/package-spec/):
|
|
285
|
+
|
|
286
|
+
```sh
|
|
287
|
+
npm install @syidax/core@npm:@syidax/core-pro @syidax/advanced-pro
|
|
288
|
+
```
|
|
289
|
+
Use `@syidax/core/...` imports for that alias, and keep only one Core edition in the app.
|
|
290
|
+
|
|
291
|
+
**Ready to build your next screen?** [Browse the live components](https://chart.syidax.com/charts/), try the examples, and choose the pieces your product needs. Prefer Korean? [한국어 사이트](https://syidax.com/ko/)에서 제품과 문서를 살펴보세요.
|
|
36
292
|
|
|
37
293
|
## License
|
|
38
294
|
|
|
39
|
-
Public npm access does not grant unrestricted or free commercial use. Community is for personal, non-commercial use under the included license. Commercial use and Pro features require the applicable
|
|
295
|
+
Public npm access does not grant unrestricted or free commercial use. Community is for personal, non-commercial use under the included license. Commercial use and Pro features require the applicable license and product rights. See **LICENSE.md** for the complete terms and **NOTICE.md** for third-party attributions.
|
|
296
|
+
|
|
297
|
+
Package version: **1.0.3** · [Website](https://syidax.com/) · [Chart demos & docs](https://chart.syidax.com/charts/) · [Grid demos & docs](https://grid.syidax.com/grid/)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@syidax/advanced-pro",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "Interactive charts and data grids for React, Angular, Vue and the web. Pro visualization and data tools, with product-based licensing.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -113,5 +113,20 @@
|
|
|
113
113
|
"publishConfig": {
|
|
114
114
|
"access": "public",
|
|
115
115
|
"registry": "https://registry.npmjs.org/"
|
|
116
|
-
}
|
|
116
|
+
},
|
|
117
|
+
"homepage": "https://chart.syidax.com/charts/",
|
|
118
|
+
"keywords": [
|
|
119
|
+
"syidax",
|
|
120
|
+
"web-components",
|
|
121
|
+
"design-system",
|
|
122
|
+
"typescript",
|
|
123
|
+
"react",
|
|
124
|
+
"angular",
|
|
125
|
+
"vue",
|
|
126
|
+
"charts",
|
|
127
|
+
"data-grid",
|
|
128
|
+
"data-visualization",
|
|
129
|
+
"dashboard",
|
|
130
|
+
"pro"
|
|
131
|
+
]
|
|
117
132
|
}
|