@net7/boilerplate-dataviz 4.4.1 → 4.5.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.
- package/esm2020/lib/layout/example-layout/example-layout.ds.mjs +39 -2
- package/esm2020/lib/layout/example-layout/example-layout.eh.mjs +4 -2
- package/esm2020/lib/layout/example-layout/example-layout.mjs +8 -5
- package/fesm2015/net7-boilerplate-dataviz.mjs +48 -6
- package/fesm2015/net7-boilerplate-dataviz.mjs.map +1 -1
- package/fesm2020/net7-boilerplate-dataviz.mjs +48 -6
- package/fesm2020/net7-boilerplate-dataviz.mjs.map +1 -1
- package/lib/layout/example-layout/example-layout.d.ts +6 -3
- package/lib/layout/example-layout/example-layout.ds.d.ts +2 -1
- package/package.json +1 -1
|
@@ -130,6 +130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
130
130
|
type: Input
|
|
131
131
|
}] } });
|
|
132
132
|
|
|
133
|
+
// import { EMPTY } from 'rxjs';
|
|
134
|
+
// import { catchError } from 'rxjs/operators';
|
|
133
135
|
class DvExampleLayoutDS extends LayoutDataSource {
|
|
134
136
|
constructor() {
|
|
135
137
|
super(...arguments);
|
|
@@ -168,8 +170,43 @@ class DvExampleLayoutDS extends LayoutDataSource {
|
|
|
168
170
|
},
|
|
169
171
|
};
|
|
170
172
|
}
|
|
171
|
-
onInit() {
|
|
173
|
+
onInit(payload) {
|
|
174
|
+
this.communication = payload.communication;
|
|
172
175
|
this.one('dv-datepicker-wrapper').update(this.datePickerExternalData);
|
|
176
|
+
// communication test
|
|
177
|
+
// get
|
|
178
|
+
// this.communication.request$('posts').subscribe((response) => {
|
|
179
|
+
// console.log('GET: posts------------>', response);
|
|
180
|
+
// });
|
|
181
|
+
// this.communication.request$('firstPost').subscribe((response) => {
|
|
182
|
+
// console.log('GET: firstPost------------>', response);
|
|
183
|
+
// });
|
|
184
|
+
// this.communication.request$('firstPost', {
|
|
185
|
+
// method: 'DELETE'
|
|
186
|
+
// }).subscribe((response) => {
|
|
187
|
+
// console.log('GET: firstPost------------>', response);
|
|
188
|
+
// });
|
|
189
|
+
// // post
|
|
190
|
+
// this.communication.request$<object, object>('firstPost', {
|
|
191
|
+
// method: 'PATCH',
|
|
192
|
+
// params: {
|
|
193
|
+
// title: 'new title',
|
|
194
|
+
// }
|
|
195
|
+
// }).subscribe((response) => {
|
|
196
|
+
// console.log('POST: posts------------>', response);
|
|
197
|
+
// });
|
|
198
|
+
// // dynamic
|
|
199
|
+
const user$ = this.communication.request$('comments', {
|
|
200
|
+
method: 'GET',
|
|
201
|
+
// urlParams: '/2', // <api>posts/2
|
|
202
|
+
urlParams: { id: 1 }, // <api>posts/2/5/details
|
|
203
|
+
// queryParams: {
|
|
204
|
+
// userId: 1
|
|
205
|
+
// }
|
|
206
|
+
});
|
|
207
|
+
user$.subscribe((response) => {
|
|
208
|
+
console.log('response----------------------------->', response);
|
|
209
|
+
});
|
|
173
210
|
}
|
|
174
211
|
}
|
|
175
212
|
|
|
@@ -177,7 +214,9 @@ class DvExampleLayoutDS extends LayoutDataSource {
|
|
|
177
214
|
class DvExampleLayoutEH extends EventHandler {
|
|
178
215
|
listen() {
|
|
179
216
|
this.innerEvents$.subscribe(({ type, payload }) => {
|
|
180
|
-
|
|
217
|
+
if (type === 'dv-example-layout.init') {
|
|
218
|
+
this.dataSource.onInit(payload);
|
|
219
|
+
}
|
|
181
220
|
});
|
|
182
221
|
}
|
|
183
222
|
}
|
|
@@ -662,11 +701,14 @@ const DvExampleLayoutConfig = {
|
|
|
662
701
|
|
|
663
702
|
/* eslint-disable */
|
|
664
703
|
class DvExampleLayoutComponent extends AbstractLayout {
|
|
665
|
-
constructor() {
|
|
704
|
+
constructor(communication) {
|
|
666
705
|
super(DvExampleLayoutConfig);
|
|
706
|
+
this.communication = communication;
|
|
667
707
|
}
|
|
668
708
|
initPayload() {
|
|
669
|
-
return {
|
|
709
|
+
return {
|
|
710
|
+
communication: this.communication
|
|
711
|
+
};
|
|
670
712
|
}
|
|
671
713
|
ngOnInit() {
|
|
672
714
|
this.onInit();
|
|
@@ -675,12 +717,12 @@ class DvExampleLayoutComponent extends AbstractLayout {
|
|
|
675
717
|
this.onDestroy();
|
|
676
718
|
}
|
|
677
719
|
}
|
|
678
|
-
DvExampleLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DvExampleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
+
DvExampleLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DvExampleLayoutComponent, deps: [{ token: i1$1.CommunicationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
679
721
|
DvExampleLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DvExampleLayoutComponent, selector: "dv-example-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"dv-example-layout\" id=\"example-layout\">\n <h2>Grid component</h2>\n <p>Four columns equal width</p>\n <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/200\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/201\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/199\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/198\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/197\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/195\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/203\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/204\" />\n </div>\n </n7-grid>\n\n <br />\n\n <p>Two columns, first is 33%</p>\n <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/600\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/600/600\" />\n </div>\n </n7-grid>\n\n <p>Nested grids</p>\n <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/500\" />\n </div>\n <div class=\"n7-grid__item\">\n <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/200\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/201\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/199\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/198\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/197\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/195\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/203\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/204\" />\n </div>\n </n7-grid>\n </div>\n </n7-grid>\n\n <h2>Container component</h2>\n <p>Full width container</p>\n <n7-container classes=\"big-container-class\">Container content</n7-container>\n <n7-container classes=\"big-container-class\" fluid=\"true\">\n Container fluid content\n </n7-container>\n\n <h2>Combined components</h2>\n <p>Container with grids inside</p>\n <n7-container classes=\"big-container-class\">\n <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/500\" />\n </div>\n <div class=\"n7-grid__item\">\n <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/200\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/201\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/199\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/198\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/197\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/195\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/203\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/204\" />\n </div>\n </n7-grid>\n </div>\n </n7-grid>\n </n7-container>\n\n\n <h2>Side scroller component</h2>\n \n <n7-container classes=\"big-container-class\" fluid=\"true\">\n <n7-side-scroller>\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n </n7-side-scroller>\n </n7-container>\n\n <!-- Data widget wrapper with not-fixed height, two rows -->\n <!-- <dv-data-widget-wrapper>\n <div class=\"dv-data-widget-wrapper__title\">\n <n7-inner-title\n [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n </n7-inner-title>\n </div>\n <div class=\"dv-data-widget-wrapper__content\">\n <div class=\"dv-data-widget-wrapper__content-row\">\n <n7-data-widget\n [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n </n7-data-widget>\n </div>\n <div class=\"dv-data-widget-wrapper__content-row\">\n <n7-chart\n [data]=\"lb.widgets['dv-graph'].ds.out$ | async\">\n </n7-chart>\n </div>\n </div>\n </dv-data-widget-wrapper> -->\n\n <!-- Data widget wrapper with fixed height, two rows -->\n <!-- <dv-data-widget-wrapper\n [data]=\"{ classes: 'dv-data-widget-wrapper-fixed-height' }\"\n >\n <div class=\"dv-data-widget-wrapper__title\">\n <n7-inner-title [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n </n7-inner-title>\n </div>\n <div class=\"dv-data-widget-wrapper__content\">\n <div class=\"dv-data-widget-wrapper__content-row\">\n <n7-data-widget [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n </n7-data-widget>\n </div>\n <div class=\"dv-data-widget-wrapper__content-row\">Row content</div>\n </div>\n </dv-data-widget-wrapper> -->\n\n <!-- Data widget wrapper with fixed height, one row -->\n <!-- <dv-data-widget-wrapper\n [data]=\"{ classes: 'dv-data-widget-wrapper-fixed-height' }\"\n >\n <div class=\"dv-data-widget-wrapper__title\">\n <n7-inner-title [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n </n7-inner-title>\n </div>\n <div class=\"dv-data-widget-wrapper__content\">\n <div class=\"dv-data-widget-wrapper__content-row\">\n <n7-data-widget [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n </n7-data-widget>\n </div>\n </div>\n </dv-data-widget-wrapper>\n\n <dv-datepicker-wrapper\n [data]=\"lb.widgets['dv-datepicker-wrapper'].ds.out$ | async\"\n [emit]=\"lb.widgets['dv-datepicker-wrapper'].emit\"\n >\n </dv-datepicker-wrapper> -->\n</div>\n", dependencies: [{ kind: "component", type: i1$1.GridComponent, selector: "n7-grid", inputs: ["templateColumns", "classes"] }, { kind: "component", type: i1$1.ContainerComponent, selector: "n7-container", inputs: ["fluid", "classes"] }, { kind: "component", type: i1$1.SideScrollerComponent, selector: "n7-side-scroller", inputs: ["classes"] }] });
|
|
680
722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DvExampleLayoutComponent, decorators: [{
|
|
681
723
|
type: Component,
|
|
682
724
|
args: [{ selector: 'dv-example-layout', template: "<div class=\"dv-example-layout\" id=\"example-layout\">\n <h2>Grid component</h2>\n <p>Four columns equal width</p>\n <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/200\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/201\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/199\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/198\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/197\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/195\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/203\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/204\" />\n </div>\n </n7-grid>\n\n <br />\n\n <p>Two columns, first is 33%</p>\n <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/600\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/600/600\" />\n </div>\n </n7-grid>\n\n <p>Nested grids</p>\n <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/500\" />\n </div>\n <div class=\"n7-grid__item\">\n <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/200\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/201\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/199\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/198\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/197\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/195\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/203\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/204\" />\n </div>\n </n7-grid>\n </div>\n </n7-grid>\n\n <h2>Container component</h2>\n <p>Full width container</p>\n <n7-container classes=\"big-container-class\">Container content</n7-container>\n <n7-container classes=\"big-container-class\" fluid=\"true\">\n Container fluid content\n </n7-container>\n\n <h2>Combined components</h2>\n <p>Container with grids inside</p>\n <n7-container classes=\"big-container-class\">\n <n7-grid templateColumns=\"33% 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/300/500\" />\n </div>\n <div class=\"n7-grid__item\">\n <n7-grid templateColumns=\"1fr 1fr 1fr 1fr\" classes=\"custom-grid\">\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/200\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/201\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/199\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/198\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/197\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/195\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/203\" />\n </div>\n <div class=\"n7-grid__item\">\n <img src=\"http://placekitten.com/200/204\" />\n </div>\n </n7-grid>\n </div>\n </n7-grid>\n </n7-container>\n\n\n <h2>Side scroller component</h2>\n \n <n7-container classes=\"big-container-class\" fluid=\"true\">\n <n7-side-scroller>\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n <img src=\"http://placekitten.com/200/204\" />\n </n7-side-scroller>\n </n7-container>\n\n <!-- Data widget wrapper with not-fixed height, two rows -->\n <!-- <dv-data-widget-wrapper>\n <div class=\"dv-data-widget-wrapper__title\">\n <n7-inner-title\n [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n </n7-inner-title>\n </div>\n <div class=\"dv-data-widget-wrapper__content\">\n <div class=\"dv-data-widget-wrapper__content-row\">\n <n7-data-widget\n [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n </n7-data-widget>\n </div>\n <div class=\"dv-data-widget-wrapper__content-row\">\n <n7-chart\n [data]=\"lb.widgets['dv-graph'].ds.out$ | async\">\n </n7-chart>\n </div>\n </div>\n </dv-data-widget-wrapper> -->\n\n <!-- Data widget wrapper with fixed height, two rows -->\n <!-- <dv-data-widget-wrapper\n [data]=\"{ classes: 'dv-data-widget-wrapper-fixed-height' }\"\n >\n <div class=\"dv-data-widget-wrapper__title\">\n <n7-inner-title [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n </n7-inner-title>\n </div>\n <div class=\"dv-data-widget-wrapper__content\">\n <div class=\"dv-data-widget-wrapper__content-row\">\n <n7-data-widget [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n </n7-data-widget>\n </div>\n <div class=\"dv-data-widget-wrapper__content-row\">Row content</div>\n </div>\n </dv-data-widget-wrapper> -->\n\n <!-- Data widget wrapper with fixed height, one row -->\n <!-- <dv-data-widget-wrapper\n [data]=\"{ classes: 'dv-data-widget-wrapper-fixed-height' }\"\n >\n <div class=\"dv-data-widget-wrapper__title\">\n <n7-inner-title [data]=\"lb.widgets['dv-inner-title'].ds.out$ | async\">\n </n7-inner-title>\n </div>\n <div class=\"dv-data-widget-wrapper__content\">\n <div class=\"dv-data-widget-wrapper__content-row\">\n <n7-data-widget [data]=\"lb.widgets['dv-widget'].ds.out$ | async\">\n </n7-data-widget>\n </div>\n </div>\n </dv-data-widget-wrapper>\n\n <dv-datepicker-wrapper\n [data]=\"lb.widgets['dv-datepicker-wrapper'].ds.out$ | async\"\n [emit]=\"lb.widgets['dv-datepicker-wrapper'].emit\"\n >\n </dv-datepicker-wrapper> -->\n</div>\n" }]
|
|
683
|
-
}], ctorParameters: function () { return []; } });
|
|
725
|
+
}], ctorParameters: function () { return [{ type: i1$1.CommunicationService }]; } });
|
|
684
726
|
|
|
685
727
|
/**
|
|
686
728
|
* All possible states of a card item.
|