Skip to content

Commit 83f4ce4

Browse files
committed
initial set-up
1 parent 4a1ecb9 commit 83f4ce4

7 files changed

Lines changed: 86 additions & 3 deletions

File tree

eslint.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ rules:
3535
vars-on-top: 2
3636
no-debugger: 2
3737
no-cond-assign: 2
38-
no-console: 2
38+
no-console: 0
3939
no-extra-semi: 2
4040
no-irregular-whitespace: 2
4141
dot-notation:

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"angular": "1.5.*",
1515
"angular-animate": "1.5.*",
1616
"angular-sanitize": "1.5.*",
17-
"angular-ui-bootstrap": "2.3.x",
1817
"angular-svg-base-fix": "2.0.0",
18+
"angular-ui-bootstrap": "2.3.x",
1919
"lodash": "4.x",
2020
"patternfly": ">=3.27.2"
2121
},

src/charts/charts.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,3 +313,7 @@ pf-topology {
313313
font-size: 20px;
314314
fill: #1186C1;
315315
}
316+
317+
.pf-topology-map canvas.topology-graph {
318+
width: 100%;
319+
}

src/charts/topology-map.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="pf-topology-map">
2+
<canvas class="topology-graph"></canvas>
3+
<div class="test">
4+
<h1>Hello world</h1>
5+
</div>
6+
</div>
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.charts.component:pfTopologyMap
4+
* @restrict E
5+
*
6+
* @description
7+
* Component for rendering a topology chart. Individual nodes and relationships can be represented with this view. CSS is especially important for rendering the nodes and lines. The example inline contains specific examples that can be used to change the icon size and the line type of the relationships.
8+
*
9+
* In addition; searching, filtering and label visibility is also supported.<br/>
10+
* @example
11+
<example module="patternfly.charts">
12+
<file name="index.html">
13+
<div ng-controller="TopologyMapCtrl" class="container-topology">
14+
<pf-topology-map nodes="nodes" edges="edges" force="2"></pf-topology-map>
15+
</div>
16+
</file>
17+
<file name="script.js">
18+
angular.module( 'patternfly.charts' ).controller( 'TopologyMapCtrl', function( $scope, $rootScope ) {
19+
$scope.nodes = [
20+
{
21+
id: 1,
22+
title: 'testNode',
23+
},
24+
];
25+
$scope.edges = [];
26+
});
27+
</file>
28+
</example>
29+
*/
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
angular.module('patternfly.charts').component('pfTopologyMap', {
2+
bindings: {
3+
force: '<?',
4+
nodes: '<',
5+
edges: '<'
6+
},
7+
templateUrl: 'charts/topology-map.html',
8+
controller: function ($element) {
9+
'use strict';
10+
var ctrl = this;
11+
var canvasW;
12+
var canvasH;
13+
var canvasX;
14+
var canvasY;
15+
var context;
16+
var nodes;
17+
var links;
18+
var icons;
19+
var maxNodeSize;
20+
var transform;
21+
var simulation;
22+
23+
ctrl.canvas = $element[0] ;
24+
25+
this.$onInit = function () {
26+
var coords;
27+
ctrl.canvas = ctrl.canvas.querySelector('canvas.topology-graph');
28+
// Store the CSS computed width and the height of the canvas
29+
ctrl.canvasW = ctrl.canvas.clientWidth;
30+
ctrl.canvasH = ctrl.canvas.clientHeight;
31+
// We need to set to override the default canvas dimensions
32+
ctrl.canvas.width = ctrl.canvasW;
33+
ctrl.canvas.height = ctrl.canvasH;
34+
coords = this.canvas.getBoundingClientRect();
35+
36+
ctrl.canvasX = coords.left;
37+
ctrl.canvasY = coords.top;
38+
// Store the canvas' context
39+
ctrl.context = this.canvas.getContext('2d');
40+
// Set up the initial transform
41+
ctrl.transform = d3.zoomIdentity;
42+
console.log('controller: ', ctrl);
43+
};
44+
},
45+
});

styles/angular-patternfly.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,3 @@
1313
@import "../src/canvas-view/canvas/canvas.less";
1414
@import "../src/canvas-view/canvas-editor/canvas-editor.less";
1515
@import "../src/pagination/pagination.less";
16-

0 commit comments

Comments
 (0)