Skip to content

Commit 1a154d6

Browse files
marjan-georgievmarjan-georgiev
committed
Add update$ center$ and zoomToFit$ inputs
1 parent 38343db commit 1a154d6

File tree

6 files changed

+258
-244
lines changed

6 files changed

+258
-244
lines changed

‎demo/app.component.html

+45-81
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
11
<main [class]="theme">
22
<div class="chart-col">
33
<div style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px;">
4-
<ngx-graph
5-
#graph
6-
class="chart-container"
7-
[view]="view"
8-
[enableZoom]="enableZoom"
9-
[autoZoom]="autoZoom"
10-
[panOnZoom]="panOnZoom"
11-
[panOffsetX]="panOffsetX"
12-
[panOffsetY]="panOffsetY"
13-
[zoomLevel]="zoomLevel"
14-
[autoCenter]="autoCenter"
15-
[legend]="showLegend"
16-
[links]="hierarchialGraph.links"
17-
(legendLabelClick)="onLegendLabelClick($event)"
18-
[nodes]="hierarchialGraph.nodes"
19-
[scheme]="colorScheme"
20-
[orientation]="orientation"
21-
[curve]="curve"
22-
(select)="select($event)">
4+
<ngx-graph #graph class="chart-container" [view]="view" [enableZoom]="enableZoom" [autoZoom]="autoZoom" [panOnZoom]="panOnZoom"
5+
[panOffsetX]="panOffsetX" [panOffsetY]="panOffsetY" [zoomLevel]="zoomLevel" [autoCenter]="autoCenter" [legend]="showLegend"
6+
[links]="hierarchialGraph.links" (legendLabelClick)="onLegendLabelClick($event)" [nodes]="hierarchialGraph.nodes" [scheme]="colorScheme"
7+
[orientation]="orientation" [curve]="curve" [update$]="update$" [zoomToFit$]="zoomToFit$" [center$]="center$" (select)="select($event)">
238

249
<ng-template #defsTemplate>
2510
<svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
@@ -28,29 +13,18 @@
2813
</ng-template>
2914

3015
<ng-template #nodeTemplate let-node>
31-
<svg:g class="node"
32-
ngx-tooltip
33-
[tooltipPlacement]="'top'"
34-
[tooltipType]="'tooltip'"
35-
[tooltipTitle]="node.label">
16+
<svg:g class="node" ngx-tooltip [tooltipPlacement]="'top'" [tooltipType]="'tooltip'" [tooltipTitle]="node.label">
3617
<svg:rect [attr.width]="node.width" [attr.height]="node.height" [attr.fill]="node.options.color" />
3718
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
3819
</svg:g>
3920
</ng-template>
4021

4122
<ng-template #linkTemplate let-link>
4223
<svg:g class="edge">
43-
<svg:path
44-
class="line"
45-
stroke-width="2"
46-
marker-end="url(#arrow)" >
24+
<svg:path class="line" stroke-width="2" marker-end="url(#arrow)">
4725
</svg:path>
4826
<svg:text class="edge-label" text-anchor="middle">
49-
<textPath
50-
class="text-path"
51-
[attr.href]="'#' + link.id"
52-
[style.dominant-baseline]="link.dominantBaseline"
53-
startOffset="50%">
27+
<textPath class="text-path" [attr.href]="'#' + link.id" [style.dominant-baseline]="link.dominantBaseline" startOffset="50%">
5428
{{link.label}}
5529
</textPath>
5630
</svg:text>
@@ -62,61 +36,57 @@
6236
</div>
6337
<div class="sidebar">
6438
<h1>
65-
NGX-<strong>Graph</strong>
39+
NGX-
40+
<strong>Graph</strong>
6641
<small class="subtitle">Graph Visualization for Angular</small>
6742
</h1>
6843

6944
<div class="sidebar-body">
7045
<h3>Theme</h3>
71-
<select
72-
[ngModel]="theme"
73-
(ngModelChange)="theme = $event">>
46+
<select [ngModel]="theme" (ngModelChange)="theme = $event">>
7447
<option [value]="'dark'">Dark</option>
7548
<option [value]="'light'">Light</option>
7649
</select>
7750

7851
<h3 (click)="dataVisable = !dataVisable" style="cursor: pointer">
79-
<span
80-
[class.arrow-down]="dataVisable"
81-
[class.arrow-right]="!dataVisable">
52+
<span [class.arrow-down]="dataVisable" [class.arrow-right]="!dataVisable">
8253
</span>
8354
<strong>Data</strong>
8455
</h3>
8556
<div [hidden]="!dataVisable" style="margin-left: 10px;">
8657
<div>
8758
<label>
88-
<input type="checkbox" [checked]="realTimeData" (change)="realTimeData = $event.target.checked">
89-
Real-time
59+
<input type="checkbox" [checked]="realTimeData" (change)="realTimeData = $event.target.checked"> Real-time
9060
</label>
9161
</div>
9262
</div>
9363
<div>
9464
<h3 (click)="dimVisiable = !dimVisiable" style="cursor: pointer">
95-
<span
96-
[class.arrow-down]="dimVisiable"
97-
[class.arrow-right]="!dimVisiable">
65+
<span [class.arrow-down]="dimVisiable" [class.arrow-right]="!dimVisiable">
9866
</span>
9967
<strong>Dimensions</strong>
10068
</h3>
10169
<div [hidden]="!dimVisiable" style="margin-left: 10px;">
10270
<label>
103-
<input type="checkbox" [checked]="fitContainer" (change)="toggleFitContainer($event.target.checked, autoZoom, autoCenter)">
104-
Fit Container
105-
</label> <br />
71+
<input type="checkbox" [checked]="fitContainer" (change)="toggleFitContainer($event.target.checked, autoZoom, autoCenter)"> Fit Container
72+
</label>
73+
<br />
10674
<div *ngIf="!fitContainer">
107-
<label>Width:</label><br />
108-
<input type="number" [(ngModel)]="width"><br />
109-
<label>Height:</label><br />
110-
<input type="number" [(ngModel)]="height"><br />
75+
<label>Width:</label>
76+
<br />
77+
<input type="number" [(ngModel)]="width">
78+
<br />
79+
<label>Height:</label>
80+
<br />
81+
<input type="number" [(ngModel)]="height">
82+
<br />
11183
<button (click)="applyDimensions()">Apply dimensions</button>
11284
</div>
11385
</div>
11486
</div>
11587

11688
<h3 (click)="positionVisible = !positionVisible" style="cursor: pointer">
117-
<span
118-
[class.arrow-down]="positionVisible"
119-
[class.arrow-right]="!positionVisible">
89+
<span [class.arrow-down]="positionVisible" [class.arrow-right]="!positionVisible">
12090
</span>
12191
<strong>Position and zoom</strong>
12292
</h3>
@@ -128,43 +98,34 @@ <h3 (click)="positionVisible = !positionVisible" style="cursor: pointer">
12898
<label>Y:</label>
12999
<input [(ngModel)]="graph.panOffsetY" />
130100
<br />
131-
101+
132102
<label>Zoom level:</label>
133103
<input [(ngModel)]="graph.zoomLevel" />
134104
<br />
135105
<label>
136-
<input type="checkbox" [checked]="enableZoom" (change)="toggleEnableZoom($event.target.checked)">
137-
Enable Zoom
138-
</label> <br />
106+
<input type="checkbox" [checked]="enableZoom" (change)="toggleEnableZoom($event.target.checked)"> Enable Zoom
107+
</label>
108+
<br />
139109
<label>
140-
<input type="checkbox" [checked]="autoZoom" (change)="toggleFitContainer(fitContainer, $event.target.checked, autoCenter)">
141-
Auto Zoom
142-
</label> <br />
110+
<input type="checkbox" [checked]="autoZoom" (change)="toggleFitContainer(fitContainer, $event.target.checked, autoCenter)"> Auto Zoom
111+
</label>
112+
<br />
143113
<label>
144-
<input type="checkbox" [checked]="autoCenter" (change)="toggleFitContainer(fitContainer, autoZoom, $event.target.checked)">
145-
Auto Center
114+
<input type="checkbox" [checked]="autoCenter" (change)="toggleFitContainer(fitContainer, autoZoom, $event.target.checked)"> Auto Center
146115
</label>
147116
</div>
148117

149118
<h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
150-
<span
151-
[class.arrow-down]="colorVisible"
152-
[class.arrow-right]="!colorVisible">
119+
<span [class.arrow-down]="colorVisible" [class.arrow-right]="!colorVisible">
153120
</span>
154121
<strong>Color Scheme</strong>
155122
</h3>
156-
<select
157-
[hidden]="!colorVisible"
158-
style="margin-left: 10px;"
159-
[ngModel]="selectedColorScheme"
160-
(ngModelChange)="setColorScheme($event)">
123+
<select [hidden]="!colorVisible" style="margin-left: 10px;" [ngModel]="selectedColorScheme" (ngModelChange)="setColorScheme($event)">
161124
<option *ngFor="let scheme of colorSets" [value]="scheme.name">{{scheme.name}}</option>
162125
</select>
163126

164127
<h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
165-
<span
166-
[class.arrow-down]="optsVisible"
167-
[class.arrow-right]="!optsVisible">
128+
<span [class.arrow-down]="optsVisible" [class.arrow-right]="!optsVisible">
168129
</span>
169130
<strong>Options</strong>
170131
</h3>
@@ -175,21 +136,24 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
175136
</select>
176137

177138
<label>Line Interpolation</label>
178-
<select
179-
[ngModel]="curveType"
180-
(ngModelChange)="setInterpolationType($event)">
139+
<select [ngModel]="curveType" (ngModelChange)="setInterpolationType($event)">
181140
<option *ngFor="let interpolationType of interpolationTypes" [value]="interpolationType">
182141
{{interpolationType}}
183142
</option>
184143
</select>
185144

186145
<label>Pan on zoom</label>
187-
<select
188-
[(ngModel)]="panOnZoom">
146+
<select [(ngModel)]="panOnZoom">
189147
<option [ngValue]="true">True</option>
190148
<option [ngValue]="false">False</option>
191149
</select>
150+
<br />
151+
<br />
152+
<button class="btn btn-default" (click)="center()">Center</button>
153+
<button class="btn btn-default" (click)="zoomToFit()">Fit in view</button>
154+
<button class="btn btn-default" (click)="updateChart()">Update</button>
192155
</div>
193156
</div>
157+
194158
</div>
195-
</main>
159+
</main>

‎demo/app.component.ts

+47-20
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
22
import * as shape from 'd3-shape';
3+
import { Subject } from 'rxjs/Subject';
34
import { colorSets } from '../src/utils/color-sets';
4-
import { countries, generateHierarchialGraph, getTurbineData } from './data';
5-
import chartGroups from './chartTypes';
65
import { id } from '../src/utils/id';
6+
import chartGroups from './chartTypes';
7+
import { countries, getTurbineData } from './data';
78

89
@Component({
910
selector: 'app',
@@ -12,17 +13,16 @@ import { id } from '../src/utils/id';
1213
templateUrl: './app.component.html'
1314
})
1415
export class AppComponent implements OnInit {
15-
1616
version = APP_VERSION;
1717

1818
theme = 'dark';
1919
chartType = 'directed-graph';
20-
chartGroups: any;
20+
chartTypeGroups: any;
2121
chart: any;
2222
realTimeData: boolean = false;
23-
countries: any[];
24-
graph: { links: any[], nodes: any[] };
25-
hierarchialGraph: { links: any[], nodes: any[] };
23+
countrySet: any[];
24+
graph: { links: any[]; nodes: any[] };
25+
hierarchialGraph: { links: any[]; nodes: any[] };
2626

2727
view: any[];
2828
width: number = 700;
@@ -33,6 +33,11 @@ export class AppComponent implements OnInit {
3333
enableZoom: boolean = true;
3434
autoCenter: boolean = false;
3535

36+
// observables
37+
update$: Subject<any> = new Subject();
38+
center$: Subject<any> = new Subject();
39+
zoomToFit$: Subject<any> = new Subject();
40+
3641
// options
3742
showLegend = false;
3843
orientation: string = 'LR'; // LR, RL, TB, BT
@@ -41,13 +46,16 @@ export class AppComponent implements OnInit {
4146
{
4247
label: 'Left to Right',
4348
value: 'LR'
44-
}, {
49+
},
50+
{
4551
label: 'Right to Left',
4652
value: 'RL'
47-
}, {
53+
},
54+
{
4855
label: 'Top to Bottom',
4956
value: 'TB'
50-
}, {
57+
},
58+
{
5159
label: 'Bottom to Top',
5260
value: 'BT'
5361
}
@@ -57,21 +65,29 @@ export class AppComponent implements OnInit {
5765
curveType: string = 'Linear';
5866
curve: any = shape.curveLinear;
5967
interpolationTypes = [
60-
'Bundle', 'Cardinal', 'Catmull Rom', 'Linear', 'Monotone X',
61-
'Monotone Y', 'Natural', 'Step', 'Step After', 'Step Before'
68+
'Bundle',
69+
'Cardinal',
70+
'Catmull Rom',
71+
'Linear',
72+
'Monotone X',
73+
'Monotone Y',
74+
'Natural',
75+
'Step',
76+
'Step After',
77+
'Step Before'
6278
];
6379

64-
colorSets: any;
80+
colorSchemes: any;
6581
colorScheme: any;
6682
schemeType: string = 'ordinal';
6783
selectedColorScheme: string;
6884

6985
constructor() {
7086
Object.assign(this, {
71-
countries,
72-
colorSets,
73-
chartGroups,
74-
hierarchialGraph: getTurbineData(),
87+
countrySet: countries,
88+
colorSchemes: colorSets,
89+
chartTypeGroups: chartGroups,
90+
hierarchialGraph: getTurbineData()
7591
});
7692

7793
this.setColorScheme('picnic');
@@ -93,7 +109,7 @@ export class AppComponent implements OnInit {
93109
return;
94110
}
95111

96-
const country = this.countries[Math.floor(Math.random() * this.countries.length)];
112+
const country = this.countrySet[Math.floor(Math.random() * this.countrySet.length)];
97113
const add = Math.random() < 0.7;
98114
const remove = Math.random() < 0.5;
99115

@@ -141,7 +157,7 @@ export class AppComponent implements OnInit {
141157
selectChart(chartSelector) {
142158
this.chartType = chartSelector;
143159

144-
for (const group of this.chartGroups) {
160+
for (const group of this.chartTypeGroups) {
145161
for (const chart of group.charts) {
146162
if (chart.selector === chartSelector) {
147163
this.chart = chart;
@@ -157,7 +173,7 @@ export class AppComponent implements OnInit {
157173

158174
setColorScheme(name) {
159175
this.selectedColorScheme = name;
160-
this.colorScheme = this.colorSets.find(s => s.name === name);
176+
this.colorScheme = this.colorSchemes.find(s => s.name === name);
161177
}
162178

163179
setInterpolationType(curveType) {
@@ -202,4 +218,15 @@ export class AppComponent implements OnInit {
202218
console.log('toggle expand', node);
203219
}
204220

221+
updateChart() {
222+
this.update$.next(true);
223+
}
224+
225+
zoomToFit() {
226+
this.zoomToFit$.next(true);
227+
}
228+
229+
center() {
230+
this.center$.next(true);
231+
}
205232
}

0 commit comments

Comments
 (0)