[CORD-2514] Added legend for the service graph
Change-Id: I716760a7a61c13ff4d23829db4bd70c74cfc163b
diff --git a/src/app/service-graph/components/graph-legend/graph-legend.component.ts b/src/app/service-graph/components/graph-legend/graph-legend.component.ts
new file mode 100644
index 0000000..d05b8e7
--- /dev/null
+++ b/src/app/service-graph/components/graph-legend/graph-legend.component.ts
@@ -0,0 +1,131 @@
+
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+
+ * http://www.apache.org/licenses/LICENSE-2.0
+
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import './graph-legend.component.scss';
+
+import * as d3 from 'd3';
+import {IXosServiceGraphIcons} from '../../services/d3-helpers/graph-icons.service';
+
+interface ILegendElement {
+ label: string;
+ icon: string;
+}
+
+class XosServiceGraphLegendCtrl {
+
+ static $inject = [
+ '$log',
+ '$timeout',
+ 'XosServiceGraphIcons'
+ ];
+
+ private svg;
+
+ private duration: number = 500;
+
+ private legendElements: ILegendElement[] = [
+ {
+ label: 'Services',
+ icon: 'service'
+ },
+ {
+ label: 'ServiceInstances',
+ icon: 'serviceinstance'
+ },
+ {
+ label: 'Instances',
+ icon: 'instance'
+ },
+ {
+ label: 'Networks',
+ icon: 'network'
+ }
+ ];
+
+ constructor(
+ private $log: ng.ILogService,
+ private $timeout: ng.ITimeoutService,
+ private XosServiceGraphIcons: IXosServiceGraphIcons
+ ) {
+ this.$log.debug('[XosServiceGraphLegend] Setup');
+ $timeout(() => {
+ // NOTE we need to wait for the component to be rendered before drawing
+ this.setupSvg();
+ this.render();
+ }, 500);
+ }
+
+ private setupSvg() {
+ this.svg = d3.select('xos-service-graph-legend svg');
+ }
+
+ private render() {
+ const step = 50;
+
+ const elements = this.svg.selectAll('g')
+ .data(this.legendElements);
+
+ const entering = elements.enter()
+ .append('g')
+ .attr({
+ class: d => `${d.icon}`,
+ transform: (d: ILegendElement, i: number) => `translate(50, ${step * (i + 1)})`
+ });
+
+ entering
+ .append('path')
+ .attr({
+ d: d => this.XosServiceGraphIcons.get(d.icon).path,
+ transform: d => this.XosServiceGraphIcons.get(d.icon).transform,
+ class: 'icon',
+ opacity: 0
+ })
+ .transition()
+ .duration(this.duration)
+ .delay((d, i) => i * (this.duration / 2))
+ .attr({
+ opacity: 1
+ });
+
+ entering
+ .append('text')
+ .text(d => d.label.toUpperCase())
+ .attr({
+ 'text-anchor': 'left',
+ 'alignment-baseline': 'bottom',
+ 'font-size': 15,
+ x: 50,
+ y: 20,
+ opacity: 0
+ })
+ .transition()
+ .duration(this.duration)
+ .delay((d, i) => i * (this.duration / 2))
+ .attr({
+ opacity: 1
+ });
+ }
+}
+
+export const XosServiceGraphLegend: angular.IComponentOptions = {
+ template: `
+ <h1>Legend</h1>
+ <svg></svg>
+ `,
+ controllerAs: 'vm',
+ controller: XosServiceGraphLegendCtrl,
+};