@visuallyjs/browser-ui-angular 1.0.0
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 +0 -0
- package/css/visuallyjs-angular.css +39 -0
- package/esm2022/index.mjs +34 -0
- package/esm2022/lib/base.group.component.mjs +43 -0
- package/esm2022/lib/base.node.component.mjs +41 -0
- package/esm2022/lib/base.port.component.mjs +71 -0
- package/esm2022/lib/base.vertex.component.mjs +75 -0
- package/esm2022/lib/browser-ui-angular.module.mjs +133 -0
- package/esm2022/lib/charts/area.chart.component.mjs +55 -0
- package/esm2022/lib/charts/bar.chart.component.mjs +55 -0
- package/esm2022/lib/charts/bubble.chart.component.mjs +55 -0
- package/esm2022/lib/charts/column.chart.component.mjs +55 -0
- package/esm2022/lib/charts/line.chart.component.mjs +55 -0
- package/esm2022/lib/charts/pie.chart.component.mjs +55 -0
- package/esm2022/lib/charts/sankey.chart.component.mjs +74 -0
- package/esm2022/lib/charts/scatter.chart.component.mjs +55 -0
- package/esm2022/lib/charts/xy.chart.component.mjs +39 -0
- package/esm2022/lib/color.tag.component.mjs +86 -0
- package/esm2022/lib/common.mjs +2 -0
- package/esm2022/lib/controls-component.mjs +164 -0
- package/esm2022/lib/decorator-component.mjs +52 -0
- package/esm2022/lib/default-group-component.mjs +18 -0
- package/esm2022/lib/default-node-component.mjs +18 -0
- package/esm2022/lib/diagram-component.mjs +53 -0
- package/esm2022/lib/diagram-palette-component.mjs +82 -0
- package/esm2022/lib/edge.type.picker.component.mjs +46 -0
- package/esm2022/lib/export-controls-component.mjs +75 -0
- package/esm2022/lib/inspector.component.mjs +77 -0
- package/esm2022/lib/miniview-component.mjs +63 -0
- package/esm2022/lib/model.mjs +8 -0
- package/esm2022/lib/overlay-component.mjs +18 -0
- package/esm2022/lib/palette.component.mjs +86 -0
- package/esm2022/lib/shape.component.mjs +85 -0
- package/esm2022/lib/shape.palette.component.mjs +78 -0
- package/esm2022/lib/surface-component.mjs +286 -0
- package/esm2022/lib/vjs-service.mjs +176 -0
- package/esm2022/visuallyjs-browser-ui-angular.mjs +2 -0
- package/fesm2022/visuallyjs-browser-ui-angular.mjs +2235 -0
- package/fesm2022/visuallyjs-browser-ui-angular.mjs.map +1 -0
- package/index.d.ts +40 -0
- package/lib/base.group.component.d.ts +60 -0
- package/lib/base.node.component.d.ts +55 -0
- package/lib/base.port.component.d.ts +74 -0
- package/lib/base.vertex.component.d.ts +111 -0
- package/lib/browser-ui-angular.module.d.ts +35 -0
- package/lib/charts/area.chart.component.d.ts +43 -0
- package/lib/charts/bar.chart.component.d.ts +40 -0
- package/lib/charts/bubble.chart.component.d.ts +40 -0
- package/lib/charts/column.chart.component.d.ts +40 -0
- package/lib/charts/line.chart.component.d.ts +39 -0
- package/lib/charts/pie.chart.component.d.ts +40 -0
- package/lib/charts/sankey.chart.component.d.ts +59 -0
- package/lib/charts/scatter.chart.component.d.ts +40 -0
- package/lib/charts/xy.chart.component.d.ts +32 -0
- package/lib/color.tag.component.d.ts +35 -0
- package/lib/common.d.ts +68 -0
- package/lib/controls-component.d.ts +71 -0
- package/lib/decorator-component.d.ts +25 -0
- package/lib/default-group-component.d.ts +11 -0
- package/lib/default-node-component.d.ts +11 -0
- package/lib/diagram-component.d.ts +52 -0
- package/lib/diagram-palette-component.d.ts +92 -0
- package/lib/edge.type.picker.component.d.ts +35 -0
- package/lib/export-controls-component.d.ts +59 -0
- package/lib/inspector.component.d.ts +96 -0
- package/lib/miniview-component.d.ts +45 -0
- package/lib/model.d.ts +8 -0
- package/lib/overlay-component.d.ts +59 -0
- package/lib/palette.component.d.ts +94 -0
- package/lib/shape.component.d.ts +70 -0
- package/lib/shape.palette.component.d.ts +73 -0
- package/lib/surface-component.d.ts +149 -0
- package/lib/vjs-service.d.ts +71 -0
- package/package.json +29 -0
- package/visuallyjs-browser-ui-angular.tgz +0 -0
package/README.md
ADDED
|
File without changes
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
vjs-surface {
|
|
2
|
+
display:block;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
vjs-controls {
|
|
6
|
+
display:block;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
vjs-miniview {
|
|
10
|
+
display: block;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
vjs-miniview .vjs-miniview {
|
|
14
|
+
position:relative;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
vjs-shape-palette {
|
|
18
|
+
display:block;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
vjs-diagram-palette {
|
|
22
|
+
display:block;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
vjs-edge-type {
|
|
26
|
+
display:block;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
vjs-diagram {
|
|
30
|
+
display:block;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
vjs-surface .vjs-surface, vjs-diagram .vjs-surface {
|
|
34
|
+
height:100%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
vjs-bar-chart, vjs-column-chart, vjs-xy-chart, vjs-area-chart, vjs-line-chart, vjs-scatter-chart, vjs-bubble-chart, vjs-sankey-chart {
|
|
38
|
+
display:block;
|
|
39
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
|
|
2
|
+
export * from './lib/browser-ui-angular.module';
|
|
3
|
+
export * from './lib/model';
|
|
4
|
+
export * from './lib/vjs-service';
|
|
5
|
+
export * from './lib/base.node.component';
|
|
6
|
+
export * from './lib/base.vertex.component';
|
|
7
|
+
export * from './lib/base.group.component';
|
|
8
|
+
export * from './lib/base.port.component';
|
|
9
|
+
export * from './lib/default-node-component';
|
|
10
|
+
export * from './lib/default-group-component';
|
|
11
|
+
export * from './lib/common';
|
|
12
|
+
export * from './lib/miniview-component';
|
|
13
|
+
export * from './lib/surface-component';
|
|
14
|
+
export * from './lib/overlay-component';
|
|
15
|
+
export * from './lib/palette.component';
|
|
16
|
+
export * from './lib/decorator-component';
|
|
17
|
+
export * from './lib/shape.component';
|
|
18
|
+
export * from './lib/shape.palette.component';
|
|
19
|
+
export * from './lib/diagram-palette-component';
|
|
20
|
+
export * from './lib/controls-component';
|
|
21
|
+
export * from './lib/export-controls-component';
|
|
22
|
+
export * from './lib/edge.type.picker.component';
|
|
23
|
+
export * from './lib/inspector.component';
|
|
24
|
+
export * from './lib/color.tag.component';
|
|
25
|
+
export * from './lib/diagram-component';
|
|
26
|
+
export * from './lib/charts/column.chart.component';
|
|
27
|
+
export * from './lib/charts/bar.chart.component';
|
|
28
|
+
export * from './lib/charts/line.chart.component';
|
|
29
|
+
export * from './lib/charts/area.chart.component';
|
|
30
|
+
export * from './lib/charts/xy.chart.component';
|
|
31
|
+
export * from './lib/charts/pie.chart.component';
|
|
32
|
+
export * from './lib/charts/scatter.chart.component';
|
|
33
|
+
export * from './lib/charts/bubble.chart.component';
|
|
34
|
+
export * from './lib/charts/sankey.chart.component';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Injectable } from "@angular/core";
|
|
2
|
+
import { BaseVertexComponent } from "./base.vertex.component";
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
|
|
5
|
+
export class BaseGroupComponent extends BaseVertexComponent {
|
|
6
|
+
|
|
7
|
+
getGroup() { return this.model.getGroup(this.model.getGroupId(this.data)); }
|
|
8
|
+
|
|
9
|
+
getMembers() { return this.getGroup().getMembers(); }
|
|
10
|
+
|
|
11
|
+
_getVertex() {
|
|
12
|
+
return this.getGroup();
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
updateGroup(data) {
|
|
16
|
+
this.updateVertex(data);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
removeGroup() {
|
|
20
|
+
this.removeVertex();
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
cloneGroup(options) {
|
|
24
|
+
this.cloneVertex(options);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
flashGroup(duration, animName) {
|
|
28
|
+
this.flashVertex(duration, animName);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
removePort(portId) {
|
|
32
|
+
this.model.removePort(this.getGroup(), portId);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
getPort(portId) {
|
|
36
|
+
return this.getGroup().getPort(portId);
|
|
37
|
+
}
|
|
38
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
39
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseGroupComponent }); }
|
|
40
|
+
}
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseGroupComponent, decorators: [{
|
|
42
|
+
type: Injectable
|
|
43
|
+
}] });
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { Injectable } from "@angular/core";
|
|
2
|
+
import { BaseVertexComponent } from "./base.vertex.component";
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
|
|
5
|
+
export class BaseNodeComponent extends BaseVertexComponent {
|
|
6
|
+
|
|
7
|
+
getNode() { return this.model.getNode(this.model.getNodeId(this.data)); }
|
|
8
|
+
|
|
9
|
+
_getVertex() {
|
|
10
|
+
return this.getNode();
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
updateNode(data) {
|
|
14
|
+
this.updateVertex(data);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
removeNode() {
|
|
18
|
+
this.removeVertex();
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
removePort(portId) {
|
|
22
|
+
this.model.removePort(this.getNode(), portId);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
getPort(portId) {
|
|
26
|
+
return this.getNode().getPort(portId);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
cloneNode(options) {
|
|
30
|
+
this.cloneVertex(options);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
flashNode(duration, animName) {
|
|
34
|
+
this.flashVertex(duration, animName);
|
|
35
|
+
}
|
|
36
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
37
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseNodeComponent }); }
|
|
38
|
+
}
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseNodeComponent, decorators: [{
|
|
40
|
+
type: Injectable
|
|
41
|
+
}] });
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { EVENT_PORT_UPDATED, log, } from "@visuallyjs/browser-ui";
|
|
2
|
+
import { ChangeDetectorRef, Directive, inject, Input, signal, } from "@angular/core";
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
|
|
5
|
+
export class BasePortComponent {
|
|
6
|
+
constructor(el) {
|
|
7
|
+
this.el = el;
|
|
8
|
+
|
|
9
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
10
|
+
|
|
11
|
+
this.$data = signal(undefined);
|
|
12
|
+
el.nativeElement._visuallyJsNgComponent = this;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
_signalBinding(n) {
|
|
16
|
+
if (this.parent != null) {
|
|
17
|
+
|
|
18
|
+
if (n.vertex.id === this.parent.data.id && n.port.id === this.data["id"]) {
|
|
19
|
+
this.$data.set(this.data);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
ngOnInit() {
|
|
25
|
+
if (this.data == null) {
|
|
26
|
+
log(`WARN: cannot instantiate port component; "data" not set`);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (this.parent == null) {
|
|
30
|
+
log(`WARN: cannot instantiate port component; "parent" not set (you need to set parent to be a BaseNodeComponent or BaseGroupComponent on this component in your template)`);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
this.$data.set(this.data);
|
|
34
|
+
this._signalBinder = this._signalBinding.bind(this);
|
|
35
|
+
this.parent.model.bind(EVENT_PORT_UPDATED, this._signalBinder);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
getPort() {
|
|
39
|
+
return this.parent
|
|
40
|
+
.getVertex()
|
|
41
|
+
.getPort(this.parent.model.getPortId(this.data));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
getPortId() {
|
|
45
|
+
return this.parent.model.getPortId(this.data);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
updatePort(data) {
|
|
49
|
+
this.parent.model.updatePort(this.getPort(), data);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
removePort() {
|
|
53
|
+
this.parent.model.removePort(this.parent.getVertex(), this.getPortId());
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
ngOnDestroy() {
|
|
57
|
+
this.parent.model.unbind(EVENT_PORT_UPDATED, this._signalBinder);
|
|
58
|
+
}
|
|
59
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasePortComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
60
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BasePortComponent, selector: "vjs-base-port", inputs: { parent: "parent", data: "data" }, ngImport: i0 }); }
|
|
61
|
+
}
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasePortComponent, decorators: [{
|
|
63
|
+
type: Directive,
|
|
64
|
+
args: [{
|
|
65
|
+
selector: "vjs-base-port",
|
|
66
|
+
}]
|
|
67
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { parent: [{
|
|
68
|
+
type: Input
|
|
69
|
+
}], data: [{
|
|
70
|
+
type: Input
|
|
71
|
+
}] } });
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { ChangeDetectorRef, inject, Injectable, Input, signal, } from "@angular/core";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
|
|
4
|
+
export class BaseVertexComponent {
|
|
5
|
+
constructor() {
|
|
6
|
+
|
|
7
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
8
|
+
|
|
9
|
+
this.$data = signal(undefined);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
this.$data.set(this.data);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
getVertex() {
|
|
17
|
+
return this._getVertex();
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
ngOnDestroy() {
|
|
21
|
+
delete this._el._visuallyJsNgComponent._el;
|
|
22
|
+
delete this._el;
|
|
23
|
+
delete this.model;
|
|
24
|
+
delete this.surface;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
removeVertex() {
|
|
28
|
+
this.model.remove(this.getVertex());
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
addNewPort(type, data) {
|
|
32
|
+
this.model.addNewPort(this.getVertex(), type, data);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
addPort(data) {
|
|
36
|
+
return this.model.addPort(this.getVertex(), data);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
setAsSelection() {
|
|
40
|
+
this.model.setSelection(this.getVertex());
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
addToSelection() {
|
|
44
|
+
this.model.addToSelection(this.getVertex());
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
removeFromSelection() {
|
|
48
|
+
this.model.removeFromSelection(this.getVertex());
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
updateVertex(data) {
|
|
52
|
+
this.model.updateVertex(this.getVertex(), data);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
cloneVertex(options) {
|
|
56
|
+
this.surface.cloneVertex(this.getVertex(), options);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
flashVertex(duration, animName) {
|
|
60
|
+
this.surface.flashVertex(this.getVertex(), duration, animName);
|
|
61
|
+
}
|
|
62
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseVertexComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
63
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseVertexComponent }); }
|
|
64
|
+
}
|
|
65
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseVertexComponent, decorators: [{
|
|
66
|
+
type: Injectable
|
|
67
|
+
}], propDecorators: { data: [{
|
|
68
|
+
type: Input
|
|
69
|
+
}], model: [{
|
|
70
|
+
type: Input
|
|
71
|
+
}], surface: [{
|
|
72
|
+
type: Input
|
|
73
|
+
}], modelObject: [{
|
|
74
|
+
type: Input
|
|
75
|
+
}] } });
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { NgModule } from '@angular/core';
|
|
2
|
+
import { CommonModule } from "@angular/common";
|
|
3
|
+
import { MiniviewComponent } from "./miniview-component";
|
|
4
|
+
import { SurfaceComponent } from "./surface-component";
|
|
5
|
+
import { ShapePaletteComponent } from "./shape.palette.component";
|
|
6
|
+
import { ShapeComponent } from "./shape.component";
|
|
7
|
+
import { ControlsComponent } from "./controls-component";
|
|
8
|
+
import { EdgeTypePickerComponent } from "./edge.type.picker.component";
|
|
9
|
+
import { DefaultNodeComponent } from "./default-node-component";
|
|
10
|
+
import { DefaultGroupComponent } from "./default-group-component";
|
|
11
|
+
import { BasePortComponent } from "./base.port.component";
|
|
12
|
+
import { PaletteComponent } from "./palette.component";
|
|
13
|
+
import { ExportControlsComponent } from "./export-controls-component";
|
|
14
|
+
import { ColorPickerComponent } from "./color.tag.component";
|
|
15
|
+
import { DiagramComponent } from "./diagram-component";
|
|
16
|
+
import { ColumnChartComponent } from "./charts/column.chart.component";
|
|
17
|
+
import { BarChartComponent } from "./charts/bar.chart.component";
|
|
18
|
+
import { DiagramPaletteComponent } from "./diagram-palette-component";
|
|
19
|
+
import { XYChartComponent } from "./charts/xy.chart.component";
|
|
20
|
+
import { LineChartComponent } from "./charts/line.chart.component";
|
|
21
|
+
import { AreaChartComponent } from "./charts/area.chart.component";
|
|
22
|
+
import { PieChartComponent } from "./charts/pie.chart.component";
|
|
23
|
+
import { ScatterChartComponent } from "./charts/scatter.chart.component";
|
|
24
|
+
import { BubbleChartComponent } from "./charts/bubble.chart.component";
|
|
25
|
+
import { SankeyChartComponent } from "./charts/sankey.chart.component";
|
|
26
|
+
import { DecoratorComponent } from "./decorator-component";
|
|
27
|
+
import * as i0 from "@angular/core";
|
|
28
|
+
|
|
29
|
+
export class VisuallyJsModule {
|
|
30
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
31
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, declarations: [DefaultNodeComponent,
|
|
32
|
+
DefaultGroupComponent,
|
|
33
|
+
BasePortComponent,
|
|
34
|
+
MiniviewComponent,
|
|
35
|
+
SurfaceComponent,
|
|
36
|
+
PaletteComponent,
|
|
37
|
+
ShapePaletteComponent,
|
|
38
|
+
DiagramPaletteComponent,
|
|
39
|
+
ShapeComponent,
|
|
40
|
+
ControlsComponent,
|
|
41
|
+
EdgeTypePickerComponent,
|
|
42
|
+
PaletteComponent,
|
|
43
|
+
ExportControlsComponent,
|
|
44
|
+
ColorPickerComponent,
|
|
45
|
+
DiagramComponent,
|
|
46
|
+
ColumnChartComponent,
|
|
47
|
+
BarChartComponent,
|
|
48
|
+
XYChartComponent,
|
|
49
|
+
LineChartComponent,
|
|
50
|
+
AreaChartComponent,
|
|
51
|
+
PieChartComponent,
|
|
52
|
+
ScatterChartComponent,
|
|
53
|
+
BubbleChartComponent,
|
|
54
|
+
SankeyChartComponent,
|
|
55
|
+
DecoratorComponent], imports: [CommonModule], exports: [MiniviewComponent,
|
|
56
|
+
SurfaceComponent,
|
|
57
|
+
PaletteComponent,
|
|
58
|
+
DiagramPaletteComponent,
|
|
59
|
+
ShapeComponent,
|
|
60
|
+
ShapePaletteComponent,
|
|
61
|
+
ControlsComponent,
|
|
62
|
+
ExportControlsComponent,
|
|
63
|
+
EdgeTypePickerComponent,
|
|
64
|
+
ColorPickerComponent,
|
|
65
|
+
DiagramComponent,
|
|
66
|
+
ColumnChartComponent,
|
|
67
|
+
BarChartComponent,
|
|
68
|
+
XYChartComponent,
|
|
69
|
+
LineChartComponent,
|
|
70
|
+
AreaChartComponent,
|
|
71
|
+
PieChartComponent,
|
|
72
|
+
ScatterChartComponent,
|
|
73
|
+
BubbleChartComponent,
|
|
74
|
+
SankeyChartComponent,
|
|
75
|
+
DecoratorComponent] }); }
|
|
76
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, imports: [CommonModule] }); }
|
|
77
|
+
}
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsModule, decorators: [{
|
|
79
|
+
type: NgModule,
|
|
80
|
+
args: [{
|
|
81
|
+
imports: [CommonModule],
|
|
82
|
+
declarations: [
|
|
83
|
+
DefaultNodeComponent,
|
|
84
|
+
DefaultGroupComponent,
|
|
85
|
+
BasePortComponent,
|
|
86
|
+
MiniviewComponent,
|
|
87
|
+
SurfaceComponent,
|
|
88
|
+
PaletteComponent,
|
|
89
|
+
ShapePaletteComponent,
|
|
90
|
+
DiagramPaletteComponent,
|
|
91
|
+
ShapeComponent,
|
|
92
|
+
ControlsComponent,
|
|
93
|
+
EdgeTypePickerComponent,
|
|
94
|
+
PaletteComponent,
|
|
95
|
+
ExportControlsComponent,
|
|
96
|
+
ColorPickerComponent,
|
|
97
|
+
DiagramComponent,
|
|
98
|
+
ColumnChartComponent,
|
|
99
|
+
BarChartComponent,
|
|
100
|
+
XYChartComponent,
|
|
101
|
+
LineChartComponent,
|
|
102
|
+
AreaChartComponent,
|
|
103
|
+
PieChartComponent,
|
|
104
|
+
ScatterChartComponent,
|
|
105
|
+
BubbleChartComponent,
|
|
106
|
+
SankeyChartComponent,
|
|
107
|
+
DecoratorComponent
|
|
108
|
+
],
|
|
109
|
+
exports: [
|
|
110
|
+
MiniviewComponent,
|
|
111
|
+
SurfaceComponent,
|
|
112
|
+
PaletteComponent,
|
|
113
|
+
DiagramPaletteComponent,
|
|
114
|
+
ShapeComponent,
|
|
115
|
+
ShapePaletteComponent,
|
|
116
|
+
ControlsComponent,
|
|
117
|
+
ExportControlsComponent,
|
|
118
|
+
EdgeTypePickerComponent,
|
|
119
|
+
ColorPickerComponent,
|
|
120
|
+
DiagramComponent,
|
|
121
|
+
ColumnChartComponent,
|
|
122
|
+
BarChartComponent,
|
|
123
|
+
XYChartComponent,
|
|
124
|
+
LineChartComponent,
|
|
125
|
+
AreaChartComponent,
|
|
126
|
+
PieChartComponent,
|
|
127
|
+
ScatterChartComponent,
|
|
128
|
+
BubbleChartComponent,
|
|
129
|
+
SankeyChartComponent,
|
|
130
|
+
DecoratorComponent
|
|
131
|
+
]
|
|
132
|
+
}]
|
|
133
|
+
}] });
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
|
|
2
|
+
import { AreaChart } from "@visuallyjs/browser-ui";
|
|
3
|
+
import { VisuallyJsService } from "../vjs-service";
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class AreaChartComponent {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.$vjs = inject(VisuallyJsService);
|
|
8
|
+
this.$el = inject(ElementRef);
|
|
9
|
+
this.$ngZone = inject(NgZone);
|
|
10
|
+
}
|
|
11
|
+
_init(dataSource, data, url) {
|
|
12
|
+
this.$ngZone.runOutsideAngular(() => {
|
|
13
|
+
const o = Object.assign({}, this.options);
|
|
14
|
+
Object.assign(o, { dataSource });
|
|
15
|
+
this.chart = new AreaChart(this.$el.nativeElement, o);
|
|
16
|
+
if (data) {
|
|
17
|
+
this.chart.load({ data });
|
|
18
|
+
}
|
|
19
|
+
else if (url) {
|
|
20
|
+
this.chart.load({ url });
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
ngAfterViewInit() {
|
|
26
|
+
if (this.useModel) {
|
|
27
|
+
this.$vjs.getModel((p) => {
|
|
28
|
+
this._init(p, null, null);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
this._init(null, this.data, this.url);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
ngOnDestroy() {
|
|
36
|
+
this.chart?.destroy();
|
|
37
|
+
}
|
|
38
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
|
|
40
|
+
}
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, decorators: [{
|
|
42
|
+
type: Component,
|
|
43
|
+
args: [{
|
|
44
|
+
selector: "vjs-area-chart",
|
|
45
|
+
template: `<div></div>`
|
|
46
|
+
}]
|
|
47
|
+
}], propDecorators: { data: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], url: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], options: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], useModel: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}] } });
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
|
|
2
|
+
import { BarChart } from "@visuallyjs/browser-ui";
|
|
3
|
+
import { VisuallyJsService } from "../vjs-service";
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class BarChartComponent {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.$vjs = inject(VisuallyJsService);
|
|
8
|
+
this.$el = inject(ElementRef);
|
|
9
|
+
this.$ngZone = inject(NgZone);
|
|
10
|
+
}
|
|
11
|
+
_init(dataSource, data, url) {
|
|
12
|
+
this.$ngZone.runOutsideAngular(() => {
|
|
13
|
+
const o = Object.assign({}, this.options);
|
|
14
|
+
Object.assign(o, { dataSource });
|
|
15
|
+
this.chart = new BarChart(this.$el.nativeElement, o);
|
|
16
|
+
if (data) {
|
|
17
|
+
this.chart.load({ data });
|
|
18
|
+
}
|
|
19
|
+
else if (url) {
|
|
20
|
+
this.chart.load({ url });
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
ngAfterViewInit() {
|
|
26
|
+
if (this.useModel) {
|
|
27
|
+
this.$vjs.getModel((p) => {
|
|
28
|
+
this._init(p, null, null);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
this._init(null, this.data, this.url);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
ngOnDestroy() {
|
|
36
|
+
this.chart?.destroy();
|
|
37
|
+
}
|
|
38
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
|
|
40
|
+
}
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, decorators: [{
|
|
42
|
+
type: Component,
|
|
43
|
+
args: [{
|
|
44
|
+
selector: "vjs-bar-chart",
|
|
45
|
+
template: `<div></div>`
|
|
46
|
+
}]
|
|
47
|
+
}], propDecorators: { data: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], url: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], options: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], useModel: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}] } });
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Component, ElementRef, inject, Input, NgZone } from "@angular/core";
|
|
2
|
+
import { BubbleChart } from "@visuallyjs/browser-ui";
|
|
3
|
+
import { VisuallyJsService } from "../vjs-service";
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class BubbleChartComponent {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.$el = inject(ElementRef);
|
|
8
|
+
this.$ngZone = inject(NgZone);
|
|
9
|
+
this.$vjs = inject(VisuallyJsService);
|
|
10
|
+
}
|
|
11
|
+
_init(dataSource, data, url) {
|
|
12
|
+
this.$ngZone.runOutsideAngular(() => {
|
|
13
|
+
const o = Object.assign({}, this.options);
|
|
14
|
+
Object.assign(o, { dataSource });
|
|
15
|
+
this.chart = new BubbleChart(this.$el.nativeElement, o);
|
|
16
|
+
if (data) {
|
|
17
|
+
this.chart.load({ data });
|
|
18
|
+
}
|
|
19
|
+
else if (url) {
|
|
20
|
+
this.chart.load({ url });
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
ngAfterViewInit() {
|
|
26
|
+
if (this.useModel) {
|
|
27
|
+
this.$vjs.getModel((p) => {
|
|
28
|
+
this._init(p, null, null);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
this._init(null, this.data, this.url);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
ngOnDestroy() {
|
|
36
|
+
this.chart?.destroy();
|
|
37
|
+
}
|
|
38
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
|
|
40
|
+
}
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, decorators: [{
|
|
42
|
+
type: Component,
|
|
43
|
+
args: [{
|
|
44
|
+
selector: "vjs-bubble-chart",
|
|
45
|
+
template: `<div></div>`
|
|
46
|
+
}]
|
|
47
|
+
}], propDecorators: { data: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], url: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], options: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], useModel: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}] } });
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Component, ElementRef, inject, Input, NgZone } from "@angular/core";
|
|
2
|
+
import { ColumnChart } from "@visuallyjs/browser-ui";
|
|
3
|
+
import { VisuallyJsService } from "../vjs-service";
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class ColumnChartComponent {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.$el = inject(ElementRef);
|
|
8
|
+
this.$ngZone = inject(NgZone);
|
|
9
|
+
this.$vjs = inject(VisuallyJsService);
|
|
10
|
+
}
|
|
11
|
+
_init(dataSource, data, url) {
|
|
12
|
+
this.$ngZone.runOutsideAngular(() => {
|
|
13
|
+
const o = Object.assign({}, this.options);
|
|
14
|
+
Object.assign(o, { dataSource });
|
|
15
|
+
this.chart = new ColumnChart(this.$el.nativeElement, o);
|
|
16
|
+
if (data) {
|
|
17
|
+
this.chart.load({ data });
|
|
18
|
+
}
|
|
19
|
+
else if (url) {
|
|
20
|
+
this.chart.load({ url });
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
ngAfterViewInit() {
|
|
26
|
+
if (this.useModel) {
|
|
27
|
+
this.$vjs.getModel((p) => {
|
|
28
|
+
this._init(p, null, null);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
this._init(null, this.data, this.url);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
ngOnDestroy() {
|
|
36
|
+
this.chart?.destroy();
|
|
37
|
+
}
|
|
38
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
|
|
40
|
+
}
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, decorators: [{
|
|
42
|
+
type: Component,
|
|
43
|
+
args: [{
|
|
44
|
+
selector: "vjs-column-chart",
|
|
45
|
+
template: `<div></div>`
|
|
46
|
+
}]
|
|
47
|
+
}], propDecorators: { data: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], url: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], options: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], useModel: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}] } });
|