webpivottable 6.0.2 → 7.0.0-alpha.1

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 (30) hide show
  1. package/README.md +137 -111
  2. package/{public/lang → dist/locales}/de.json +336 -322
  3. package/{public/lang → dist/locales}/en.json +335 -321
  4. package/{public/lang → dist/locales}/es.json +334 -319
  5. package/dist/locales/fr.json +335 -0
  6. package/dist/locales/it.json +333 -0
  7. package/{public/lang → dist/locales}/pt.json +334 -319
  8. package/{public/lang → dist/locales}/tr-TR.json +335 -320
  9. package/{public/lang → dist/locales}/zh-CN.json +334 -318
  10. package/dist/web-pivot-table.esm.js +69713 -0
  11. package/dist/web-pivot-table.js +451 -0
  12. package/package.json +96 -17
  13. package/public/custom-options.html +0 -92
  14. package/public/demo-zh.html +0 -214
  15. package/public/demo.html +0 -215
  16. package/public/dist/wpt.js +0 -298
  17. package/public/index.html +0 -40
  18. package/public/jquery.html +0 -131
  19. package/public/lang/it.json +0 -319
  20. package/public/preload-csv-source.html +0 -34
  21. package/public/preload-olap-source.html +0 -36
  22. package/public/quick-start.html +0 -28
  23. package/public/react.html +0 -77
  24. package/public/share-source.html +0 -42
  25. package/public/test-widgets.html +0 -27
  26. package/public/vue.html +0 -70
  27. package/server/README.md +0 -58
  28. package/server/package.json +0 -15
  29. package/server/server.js +0 -31
  30. package/server/services.js +0 -35
package/README.md CHANGED
@@ -1,111 +1,137 @@
1
- # WPT ( WebPivotTable ) component
2
-
3
- ## How to get WPT component?
4
-
5
- ### [Github](https://github.com/bright-sea/webpivottable)
6
-
7
- WPT component is a public github project for any one to download and try it
8
-
9
- ### [NPM](https://www.npmjs.com/package/webpivottable)
10
-
11
- WPT component published as a npm package, you can install it by run:
12
-
13
- ```
14
- npm install webpivottable
15
- ```
16
-
17
- or
18
- ```
19
- yarn add webpivottable
20
- ```
21
-
22
- ### CDN
23
-
24
- https://webpivottable.com/releases/latest/dist/wpt.js
25
-
26
-
27
-
28
- ## How to use WPT component?
29
-
30
-
31
- ### Public directory
32
-
33
- Copy whole public directory into web server root is all we need, no depends on any other libs or frameworks.
34
-
35
- To integrate WPT component, we only need import one javascript file into web page like below:
36
-
37
- ```html
38
- <script type="text/javascript" src="./dist/wpt.js"></script>
39
- ```
40
-
41
- Then, we can put a "wpt-pivot-table" tag into page:
42
- ```html
43
- <body>
44
- <div id="wpt-container">
45
- <web-pivot-table />
46
- </div>
47
- </body>
48
- ```
49
-
50
- That's all. Simple enough. Now we have a full functional WebPivotTable on web page.
51
-
52
- List below is a sample html file:
53
- ```html
54
- <!DOCTYPE html>
55
- <html lang="en">
56
-
57
- <head>
58
- <meta charset="utf-8">
59
- <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
60
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
61
- <meta name="viewport" content="width=device-width,initial-scale=1">
62
-
63
- <title>WebPivotTable Component</title>
64
-
65
- <style type="text/css">
66
- html, body, #wpt-container {width:100%;height:100%; padding:0; margin:0;}
67
- </style>
68
-
69
- <script type="text/javascript" src="./dist/wpt.js"></script>
70
-
71
- </head>
72
-
73
- <body>
74
- <div id="wpt-container">
75
- <web-pivot-table />
76
- </div>
77
- </body>
78
-
79
- </html>
80
- ```
81
-
82
- ### Server directory (optional)
83
-
84
- For cross domain file or olap access, wpt component default to use our demo server as proxy:
85
-
86
- ```
87
- options: {
88
- server: {
89
- fileProxyEnabled: 1, // enable/disable file Proxy 1/0
90
- fileProxy: 'http://demo.webpivottable.com/wpt/fileProxy', // Server proxy for cross domain file acess
91
- fileTimeout: 30000,
92
- xmlaProxyEnabled: 1, // enable/disable Xmla Proxy 1/0
93
- xmlaProxy: 'http://demo.webpivottable.com/wpt/xmlaProxy', // Server proxy for cross domain xmla access
94
- xmlaTimeout: 30000,
95
- },
96
- }
97
- ```
98
-
99
- If you want to run a server proxy by your own, please copy server directory as a nodeJs application.
100
- or if you are using other back end technology (like java, php, .net), you can add a proxy endpoint into your
101
- backend services the same as services.js inside server directory have done.
102
-
103
-
104
- But if you have no cross domain access, then you can disable those proxies in above options.
105
-
106
-
107
- ## [DEMO](https://webpivottable.com/demo)
108
-
109
-
110
- ## [Document](https://webpivottable.com/doc)
111
-
1
+ # Web Pivot Table (React 19 + Web Component)
2
+
3
+ - Single-file web component (IIFE) + ESM build
4
+ - Zustand slices (options/system/source/sheet)
5
+ - Element defaults to display:block;width:100%;height:100%
6
+ - Size API: setSize/getSize, `wpt:size` event
7
+ - Layout options: options.layout = { headerReserve, aspectRatio, fitMode }
8
+ - Fullscreen-aware (ResizeObserver + screenfull change listener)
9
+
10
+ ## Install
11
+
12
+ yarn install
13
+
14
+ ## Dev
15
+
16
+ yarn dev # Custom Element dev page
17
+
18
+ Locale source-of-truth is `public/locales/*.json`.
19
+ Local dev uses locale files directly from `public/locales` with no copy step.
20
+ Build steps copy locales into `dist/locales` and release outputs.
21
+
22
+ ## Build
23
+
24
+ yarn build:cdn
25
+ yarn build:npm
26
+ yarn build:self-host
27
+ yarn build:all
28
+
29
+ Note: component styles are inlined into JS bundles during build (no separate `wpt.css` file required in releases).
30
+
31
+ ## IIFE
32
+
33
+ <script src="./web-pivot-table-<version>.js"></script>
34
+
35
+ <web-pivot-table options='{"localeFilePath":"./locales","locale":"en"}'></web-pivot-table>
36
+
37
+ ## ESM
38
+
39
+ <script type="module">
40
+ import './web-pivot-table-<version>.esm.js'
41
+ const el = document.createElement('web-pivot-table')
42
+ document.body.appendChild(el)
43
+ </script>
44
+
45
+ ## Size & layout
46
+
47
+ el.setSize(800, 400)
48
+ el.getSize() // { width, height }
49
+ el.addEventListener('wpt:size', e => console.log(e.detail))
50
+
51
+ options.layout = {
52
+ headerReserve: 180,
53
+ aspectRatio: 1.6,
54
+ fitMode: 'fill' // 'fit-width' | 'fit-height'
55
+ }
56
+
57
+ ## Locale deployment modes
58
+
59
+ Runtime options:
60
+
61
+ - `localeDeploymentMode`: `cdn` | `self-host`
62
+ - `localeBaseUrl`: explicit locale URL base (highest priority)
63
+ - `localeCdnBaseUrl`: optional CDN override for `cdn` mode
64
+
65
+ ### 1) CDN mode (best DX)
66
+
67
+ - Default mode in this repo.
68
+ - Locales are resolved from versioned CDN path:
69
+ `https://cdn.webpivottable.com/wpt/v<version>/locales`.
70
+ - Example:
71
+
72
+ ```js
73
+ el.options = {
74
+ locale: "de",
75
+ localeDeploymentMode: "cdn",
76
+ };
77
+ ```
78
+
79
+ ### 2) Self-host mode
80
+
81
+ - Copy locale files into your app under `/public/locales`.
82
+ - Set:
83
+
84
+ ```js
85
+ el.options = {
86
+ locale: "pt",
87
+ localeDeploymentMode: "self-host",
88
+ localeBaseUrl: "/locales",
89
+ };
90
+ ```
91
+
92
+ ## Build locale deployment assets
93
+
94
+ Generate versioned CDN deployment bundle (JS + locales):
95
+
96
+ ```bash
97
+ yarn build:cdn
98
+ ```
99
+
100
+ - Output folder:
101
+ - `releases/cdn/v<version>/`
102
+ - includes JS bundles + `locales/*.json` + `manifest.json`
103
+
104
+ Generate npm-install package tarball (bundle + locales):
105
+
106
+ ```bash
107
+ yarn build:npm
108
+ ```
109
+
110
+ - Output folder:
111
+ - `releases/npm/*.tgz`
112
+
113
+ Generate self-host/local-copy package (folder + zip for unzip/upload workflows):
114
+
115
+ ```bash
116
+ yarn build:self-host
117
+ ```
118
+
119
+ - Output folder:
120
+ - `releases/self-host/v<version>/`
121
+ - Output zip:
122
+ - `releases/self-host/web-pivot-table-v<version>-self-host.zip`
123
+
124
+ Build all three deployment modes together:
125
+
126
+ ```bash
127
+ yarn build:all
128
+ ```
129
+
130
+ Note: locale assets are prepared automatically during `build:cdn`, `build:npm`, and `build:self-host`.
131
+ The locale source files are read from `public/locales`.
132
+
133
+ ## CDN deployment
134
+
135
+ CDN setup + deploy (manual and GitHub Actions), AWS IAM/OIDC policies, release checklist, and rollback steps are documented in:
136
+
137
+ - [AWS_CDN_DEPLOY_GUIDE.md](docs/AWS_CDN_DEPLOY_GUIDE.md)