svelte-flexmonster 2.9.102
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 +59 -0
- package/dist/Flexmonster.svelte +137 -0
- package/dist/Flexmonster.svelte.d.ts +76 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/package.json +69 -0
package/README.md
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Svelte pivot table | Flexmonster Pivot Table & Charts wrapper for Svelte
|
|
2
|
+
<!-- [](https://www.flexmonster.com?r=wrap_svelte) -->
|
|
3
|
+
Website: [flexmonster.com](https://www.flexmonster.com?r=wrap_svelte)
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/svelte-flexmonster)
|
|
6
|
+
[](https://github.com/flexmonster) [](https://twitter.com/Flexmonster)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Flexmonster Pivot Table & Charts
|
|
10
|
+
|
|
11
|
+
Flexmonster Pivot Table & Charts is a powerful and fully customizable JavaScript component for web reporting. It is packed with all core features for data analysis and can easily become a part of your Svelte data visualization project. The tool supports popular frameworks like Svelte, React, Vue, Blazor, Angular, and [more](https://www.flexmonster.com/doc/available-tutorials-integration?r=wrap_svelte). Also, Flexmonster connects to any data source, including SQL and NoSQL databases, JSON and CSV files, OLAP cubes, and Elasticsearch.
|
|
12
|
+
|
|
13
|
+
This package is a [Flexmonster Pivot](https://www.flexmonster.com?r=wrap_svelte) wrapper for [Svelte](https://svelte.dev/) applications.
|
|
14
|
+
|
|
15
|
+
Table of contents:
|
|
16
|
+
|
|
17
|
+
* [Integration](#integration)
|
|
18
|
+
* [Usage](#usage)
|
|
19
|
+
* [Sample project](#sample-project)
|
|
20
|
+
* [Support and feedback](#support-and-feedback)
|
|
21
|
+
* [License](#license)
|
|
22
|
+
* [Social media](#social-media)
|
|
23
|
+
|
|
24
|
+
## Integration
|
|
25
|
+
|
|
26
|
+
Flexmonster documentation provides a detailed step-by-step guide on [іntegration with Svelte]().
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
The wrapper provides the Flexmonster component to add the pivot table to the Svelte project. Read more about the available props and how to use them in the [the Flexmonster component]() documentation.
|
|
31
|
+
|
|
32
|
+
Explore the available [methods and events]() to learn the specifics of using and customizing Flexmonster in a Svelte application.
|
|
33
|
+
|
|
34
|
+
## Sample project
|
|
35
|
+
|
|
36
|
+
If you look for some reference examples, our team prepared a ready-to-use [Svelte pivot grid sample project]() with live demos of the most popular use cases. Visit the [usage examples documentation]() page to learn more about how the cases were implemented in Svelte project.
|
|
37
|
+
|
|
38
|
+
In our documentation, you can find [a guide for the sample Svelte application](). There, you can learn how to run it and what's inside.
|
|
39
|
+
|
|
40
|
+
## Support and feedback
|
|
41
|
+
|
|
42
|
+
In case of any issues, visit our [troubleshooting section](https://www.flexmonster.com/doc/typical-errors?r=wrap_svelte). You can also search among the [resolved cases](https://www.flexmonster.com/technical-support?r=wrap_svelte) for a solution to your problem.
|
|
43
|
+
|
|
44
|
+
To share your feedback or ask questions, contact our Tech team by raising a ticket on [Flexmonster Help Center](https://www.flexmonster.com/help-center?r=wrap_svelte). You can also find a list of samples, technical specifications, and a user interface guide there.
|
|
45
|
+
|
|
46
|
+
If you need any help with your license — fill out our [Contact form](https://www.flexmonster.com/contact-our-team?r=wrap_svelte), and we will get in touch with you.
|
|
47
|
+
|
|
48
|
+
## License
|
|
49
|
+
|
|
50
|
+
Flexmonster Svelte wrapper is released as an MIT-licensed (free and open-source) add-on to Flexmonster Pivot.
|
|
51
|
+
|
|
52
|
+
To learn about Flexmonster Pivot licenses, visit the [Flexmonster licensing page](https://www.flexmonster.com/pivot-table-editions-and-pricing?r=wrap_svelte).
|
|
53
|
+
If you want to test our product, we provide a 30-day free trial.
|
|
54
|
+
|
|
55
|
+
## Social media
|
|
56
|
+
|
|
57
|
+
Follow us on social media and stay updated on our development process!
|
|
58
|
+
|
|
59
|
+
[](https://linkedin.com/company/flexmonster) [](https://youtube.com/user/FlexMonsterPivot) [](https://twitter.com/flexmonster)
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount, onDestroy } from "svelte";
|
|
3
|
+
import type { Params, Pivot } from "flexmonster";
|
|
4
|
+
|
|
5
|
+
let gridContainer;
|
|
6
|
+
// A reference to the Flexmonster instance
|
|
7
|
+
export let pivot: Pivot;
|
|
8
|
+
// Events
|
|
9
|
+
export let afterchartdraw: () => void;
|
|
10
|
+
export let aftergriddraw: (param: object) => void
|
|
11
|
+
export let beforegriddraw: (param: object) => void
|
|
12
|
+
export let beforetoolbarcreated: (toolbar: Flexmonster.Toolbar) => void;
|
|
13
|
+
export let cellclick: (cell: Flexmonster.CellData) => void;
|
|
14
|
+
export let celldoubleclick: (cell: Flexmonster.CellData) => void;
|
|
15
|
+
export let chartclick: (data: Flexmonster.ChartData) => void;
|
|
16
|
+
export let datachanged: (param: object) => void;
|
|
17
|
+
export let dataerror: (event?: ErrorEvent) => void;
|
|
18
|
+
export let datafilecancelled: () => void;
|
|
19
|
+
export let dataloaded: () => void;
|
|
20
|
+
export let drillthroughclose: () => void;
|
|
21
|
+
export let drillthroughopen: (cell: Flexmonster.CellData | Flexmonster.ChartData) => void;
|
|
22
|
+
export let exportcomplete: () => void;
|
|
23
|
+
export let exportstart: () => void;
|
|
24
|
+
export let fieldslistclose: () => void;
|
|
25
|
+
export let fieldslistopen: () => void;
|
|
26
|
+
export let filterclose: () => void;
|
|
27
|
+
export let filteropen: (param: object) => void;
|
|
28
|
+
export let loadingdata: () => void;
|
|
29
|
+
export let loadinglocalization: () => void;
|
|
30
|
+
export let loadingolapstructure: () => void;
|
|
31
|
+
export let loadingreportfile: () => void;
|
|
32
|
+
export let localizationerror: () => void;
|
|
33
|
+
export let localizationloaded: () => void;
|
|
34
|
+
export let olapstructureerror: (event?: ErrorEvent) => void;
|
|
35
|
+
export let olapstructureloaded: () => void;
|
|
36
|
+
export let openingreportfile: () => void;
|
|
37
|
+
export let printcomplete: () => void;
|
|
38
|
+
export let printstart: () => void;
|
|
39
|
+
export let querycomplete: () => void;
|
|
40
|
+
export let queryerror: (event?: ErrorEvent) => void;
|
|
41
|
+
export let ready: () => void;
|
|
42
|
+
export let reportchange: () => void;
|
|
43
|
+
export let reportcomplete: () => void;
|
|
44
|
+
export let reportfilecancelled: () => void;
|
|
45
|
+
export let reportfileerror: () => void;
|
|
46
|
+
export let runningquery: () => void;
|
|
47
|
+
export let unauthorizederror: (done: Flexmonster.UnauthorizedErrorHandler) => void;
|
|
48
|
+
export let update: () => void;
|
|
49
|
+
// Parameters
|
|
50
|
+
export let toolbar: boolean;
|
|
51
|
+
export let licenseKey: string | string[];
|
|
52
|
+
export let licenseFilePath: string;
|
|
53
|
+
export let width: string | number;
|
|
54
|
+
export let height: string | number;
|
|
55
|
+
export let componentFolder: string;
|
|
56
|
+
export let report: Flexmonster.Report | string;
|
|
57
|
+
export let shareReportConnection: Flexmonster.APIClientOptions;
|
|
58
|
+
export let global: Flexmonster.Report;
|
|
59
|
+
export let accessibility: Flexmonster.AccessibilityOptions;
|
|
60
|
+
export let customizeAPIRequest: (request: Object) => Object;
|
|
61
|
+
export let customizeCell: (cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) => void;
|
|
62
|
+
export let customizeChartElement: (element: Element, data: Flexmonster.ChartData | Flexmonster.ChartLegendItemData) => void;
|
|
63
|
+
export let customizeContextMenu: (cell: Flexmonster.ContextMenuItem[], data: Flexmonster.CellData | Flexmonster.ChartData, viewType: string) => Flexmonster.ContextMenuItem[];
|
|
64
|
+
export let sortFieldsList: (first: Flexmonster.FieldsListSortingItem, second: Flexmonster.FieldsListSortingItem, fieldsListType: string) => number;
|
|
65
|
+
|
|
66
|
+
onMount(async () => {
|
|
67
|
+
const module = await import("flexmonster");
|
|
68
|
+
const Flexmonster = module.default;
|
|
69
|
+
|
|
70
|
+
pivot = new Flexmonster({
|
|
71
|
+
afterchartdraw,
|
|
72
|
+
aftergriddraw,
|
|
73
|
+
beforegriddraw,
|
|
74
|
+
beforetoolbarcreated,
|
|
75
|
+
cellclick,
|
|
76
|
+
celldoubleclick,
|
|
77
|
+
chartclick,
|
|
78
|
+
datachanged,
|
|
79
|
+
dataerror,
|
|
80
|
+
datafilecancelled,
|
|
81
|
+
dataloaded,
|
|
82
|
+
drillthroughclose,
|
|
83
|
+
drillthroughopen,
|
|
84
|
+
exportcomplete,
|
|
85
|
+
exportstart,
|
|
86
|
+
fieldslistclose,
|
|
87
|
+
fieldslistopen,
|
|
88
|
+
filterclose,
|
|
89
|
+
filteropen,
|
|
90
|
+
loadingdata,
|
|
91
|
+
loadinglocalization,
|
|
92
|
+
loadingolapstructure,
|
|
93
|
+
loadingreportfile,
|
|
94
|
+
localizationerror,
|
|
95
|
+
localizationloaded,
|
|
96
|
+
olapstructureerror,
|
|
97
|
+
olapstructureloaded,
|
|
98
|
+
openingreportfile,
|
|
99
|
+
printcomplete,
|
|
100
|
+
printstart,
|
|
101
|
+
querycomplete,
|
|
102
|
+
queryerror,
|
|
103
|
+
ready,
|
|
104
|
+
reportchange,
|
|
105
|
+
reportcomplete,
|
|
106
|
+
reportfilecancelled,
|
|
107
|
+
reportfileerror,
|
|
108
|
+
runningquery,
|
|
109
|
+
unauthorizederror,
|
|
110
|
+
update,
|
|
111
|
+
toolbar,
|
|
112
|
+
licenseKey,
|
|
113
|
+
licenseFilePath,
|
|
114
|
+
width,
|
|
115
|
+
height,
|
|
116
|
+
componentFolder,
|
|
117
|
+
report,
|
|
118
|
+
shareReportConnection,
|
|
119
|
+
global,
|
|
120
|
+
accessibility,
|
|
121
|
+
customizeAPIRequest,
|
|
122
|
+
customizeCell,
|
|
123
|
+
customizeChartElement,
|
|
124
|
+
customizeContextMenu,
|
|
125
|
+
sortFieldsList,
|
|
126
|
+
container: gridContainer,
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
onDestroy(() => {
|
|
131
|
+
if (pivot) {
|
|
132
|
+
pivot.dispose();
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
</script>
|
|
136
|
+
|
|
137
|
+
<div bind:this={gridContainer}></div>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import type { Pivot } from "flexmonster";
|
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
+
$$bindings?: Bindings;
|
|
5
|
+
} & Exports;
|
|
6
|
+
(internal: unknown, props: Props & {
|
|
7
|
+
$$events?: Events;
|
|
8
|
+
$$slots?: Slots;
|
|
9
|
+
}): Exports & {
|
|
10
|
+
$set?: any;
|
|
11
|
+
$on?: any;
|
|
12
|
+
};
|
|
13
|
+
z_$$bindings?: Bindings;
|
|
14
|
+
}
|
|
15
|
+
declare const Flexmonster: $$__sveltets_2_IsomorphicComponent<{
|
|
16
|
+
pivot: Pivot;
|
|
17
|
+
afterchartdraw: () => void;
|
|
18
|
+
aftergriddraw: (param: object) => void;
|
|
19
|
+
beforegriddraw: (param: object) => void;
|
|
20
|
+
beforetoolbarcreated: (toolbar: Flexmonster.Toolbar) => void;
|
|
21
|
+
cellclick: (cell: Flexmonster.CellData) => void;
|
|
22
|
+
celldoubleclick: (cell: Flexmonster.CellData) => void;
|
|
23
|
+
chartclick: (data: Flexmonster.ChartData) => void;
|
|
24
|
+
datachanged: (param: object) => void;
|
|
25
|
+
dataerror: (event?: ErrorEvent) => void;
|
|
26
|
+
datafilecancelled: () => void;
|
|
27
|
+
dataloaded: () => void;
|
|
28
|
+
drillthroughclose: () => void;
|
|
29
|
+
drillthroughopen: (cell: Flexmonster.CellData | Flexmonster.ChartData) => void;
|
|
30
|
+
exportcomplete: () => void;
|
|
31
|
+
exportstart: () => void;
|
|
32
|
+
fieldslistclose: () => void;
|
|
33
|
+
fieldslistopen: () => void;
|
|
34
|
+
filterclose: () => void;
|
|
35
|
+
filteropen: (param: object) => void;
|
|
36
|
+
loadingdata: () => void;
|
|
37
|
+
loadinglocalization: () => void;
|
|
38
|
+
loadingolapstructure: () => void;
|
|
39
|
+
loadingreportfile: () => void;
|
|
40
|
+
localizationerror: () => void;
|
|
41
|
+
localizationloaded: () => void;
|
|
42
|
+
olapstructureerror: (event?: ErrorEvent) => void;
|
|
43
|
+
olapstructureloaded: () => void;
|
|
44
|
+
openingreportfile: () => void;
|
|
45
|
+
printcomplete: () => void;
|
|
46
|
+
printstart: () => void;
|
|
47
|
+
querycomplete: () => void;
|
|
48
|
+
queryerror: (event?: ErrorEvent) => void;
|
|
49
|
+
ready: () => void;
|
|
50
|
+
reportchange: () => void;
|
|
51
|
+
reportcomplete: () => void;
|
|
52
|
+
reportfilecancelled: () => void;
|
|
53
|
+
reportfileerror: () => void;
|
|
54
|
+
runningquery: () => void;
|
|
55
|
+
unauthorizederror: (done: Flexmonster.UnauthorizedErrorHandler) => void;
|
|
56
|
+
update: () => void;
|
|
57
|
+
toolbar: boolean;
|
|
58
|
+
licenseKey: string | string[];
|
|
59
|
+
licenseFilePath: string;
|
|
60
|
+
width: string | number;
|
|
61
|
+
height: string | number;
|
|
62
|
+
componentFolder: string;
|
|
63
|
+
report: Flexmonster.Report | string;
|
|
64
|
+
shareReportConnection: Flexmonster.APIClientOptions;
|
|
65
|
+
global: Flexmonster.Report;
|
|
66
|
+
accessibility: Flexmonster.AccessibilityOptions;
|
|
67
|
+
customizeAPIRequest: (request: Object) => Object;
|
|
68
|
+
customizeCell: (cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) => void;
|
|
69
|
+
customizeChartElement: (element: Element, data: Flexmonster.ChartData | Flexmonster.ChartLegendItemData) => void;
|
|
70
|
+
customizeContextMenu: (cell: Flexmonster.ContextMenuItem[], data: Flexmonster.CellData | Flexmonster.ChartData, viewType: string) => Flexmonster.ContextMenuItem[];
|
|
71
|
+
sortFieldsList: (first: Flexmonster.FieldsListSortingItem, second: Flexmonster.FieldsListSortingItem, fieldsListType: string) => number;
|
|
72
|
+
}, {
|
|
73
|
+
[evt: string]: CustomEvent<any>;
|
|
74
|
+
}, {}, {}, string>;
|
|
75
|
+
type Flexmonster = InstanceType<typeof Flexmonster>;
|
|
76
|
+
export default Flexmonster;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Flexmonster } from "./Flexmonster.svelte";
|
package/dist/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "svelte-flexmonster",
|
|
3
|
+
"version": "2.9.102",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"description": "Svelte wrapper for Flexmonster Pivot Table and Charts",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite dev",
|
|
8
|
+
"build": "npm run prepack",
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
+
"prepare": "svelte-kit sync || echo ''",
|
|
11
|
+
"prepack": "svelte-kit sync && svelte-package && publint"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"pivot",
|
|
15
|
+
"html5",
|
|
16
|
+
"grid",
|
|
17
|
+
"table",
|
|
18
|
+
"pivottable",
|
|
19
|
+
"pivotgrid",
|
|
20
|
+
"pivotchart",
|
|
21
|
+
"svelte"
|
|
22
|
+
],
|
|
23
|
+
"author": {
|
|
24
|
+
"name": "Flexmonster",
|
|
25
|
+
"email": "help@flexmonster.com"
|
|
26
|
+
},
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/flexmonster/svelte-flexmonster.git"
|
|
30
|
+
},
|
|
31
|
+
"bugs": {
|
|
32
|
+
"url": "https://flexmonster.com/forum/"
|
|
33
|
+
},
|
|
34
|
+
"homepage": "https://flexmonster.com/",
|
|
35
|
+
"files": [
|
|
36
|
+
"dist",
|
|
37
|
+
"!dist/**/*.test.*",
|
|
38
|
+
"!dist/**/*.spec.*"
|
|
39
|
+
],
|
|
40
|
+
"sideEffects": [
|
|
41
|
+
"**/*.css"
|
|
42
|
+
],
|
|
43
|
+
"svelte": "./dist/index.js",
|
|
44
|
+
"types": "./dist/index.d.ts",
|
|
45
|
+
"type": "module",
|
|
46
|
+
"exports": {
|
|
47
|
+
".": {
|
|
48
|
+
"types": "./dist/index.d.ts",
|
|
49
|
+
"svelte": "./dist/index.js"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"peerDependencies": {
|
|
53
|
+
"svelte": "^5.0.0",
|
|
54
|
+
"flexmonster": "2.9.102"
|
|
55
|
+
},
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"@sveltejs/adapter-auto": "^6.0.0",
|
|
58
|
+
"@sveltejs/kit": "^2.16.0",
|
|
59
|
+
"@sveltejs/package": "^2.0.0",
|
|
60
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
61
|
+
"publint": "^0.3.2",
|
|
62
|
+
"svelte": "^5.0.0",
|
|
63
|
+
"typescript": "^5.3.2",
|
|
64
|
+
"vite": "^6.2.6"
|
|
65
|
+
},
|
|
66
|
+
"dependencies": {
|
|
67
|
+
"flexmonster": "2.9.102"
|
|
68
|
+
}
|
|
69
|
+
}
|