First part of migrating Topo2 to GUI2
Change-Id: I316dd34cba161688e01dfb7b340bff5f2c3c57d4
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
index 13327fe..6107d16 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
@@ -16,6 +16,7 @@
import { Injectable } from '@angular/core';
import { FnService } from '../util/fn.service';
import { LogService } from '../log.service';
+import * as d3 from 'd3';
/**
* ONOS GUI -- SVG -- Util Service
@@ -26,11 +27,45 @@
providedIn: 'root',
})
export class SvgUtilService {
+ lightNorm: string[];
+ lightMute: string[];
+ darkNorm: string[];
+ darkMute: string[];
+ colors: any;
constructor(
private fs: FnService,
private log: LogService
) {
+
+ // --- Ordinal scales for 7 values.
+ // TODO: migrate these colors to the theme service.
+
+ // Colors per Mojo-Design's color palette.. (version one)
+ // blue red dk grey steel lt blue lt red lt grey
+ // var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
+ // lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
+
+ // Colors per Mojo-Design's color palette.. (version two)
+ // blue lt blue red green brown teal lime
+ this.lightNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
+ this.lightMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
+
+ this.darkNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
+ this.darkMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
+
+
+ this.colors = {
+ light: {
+ norm: d3.scaleOrdinal().range(this.lightNorm),
+ mute: d3.scaleOrdinal().range(this.lightMute),
+ },
+ dark: {
+ norm: d3.scaleOrdinal().range(this.darkNorm),
+ mute: d3.scaleOrdinal().range(this.darkMute),
+ },
+ };
+
this.log.debug('SvgUtilService constructed');
}
@@ -40,4 +75,91 @@
}
return 'translate(' + x + ',' + y + ')';
}
+
+ scale(x, y) {
+ return 'scale(' + x + ',' + y + ')';
+ }
+
+ skewX(x) {
+ return 'skewX(' + x + ')';
+ }
+
+ rotate(deg) {
+ return 'rotate(' + deg + ')';
+ }
+
+ cat7() {
+ const tcid = 'd3utilTestCard';
+
+ function getColor(id, muted, theme) {
+ // NOTE: since we are lazily assigning domain ids, we need to
+ // get the color from all 4 scales, to keep the domains
+ // in sync.
+ const ln = this.colors.light.norm(id);
+ const lm = this.colors.light.mute(id);
+ const dn = this.colors.dark.norm(id);
+ const dm = this.colors.dark.mute(id);
+ if (theme === 'dark') {
+ return muted ? dm : dn;
+ } else {
+ return muted ? lm : ln;
+ }
+ }
+
+ function testCard(svg) {
+ let g = svg.select('g#' + tcid);
+ const dom = d3.range(7);
+ let k;
+ let muted;
+ let theme;
+ let what;
+
+ if (!g.empty()) {
+ g.remove();
+
+ } else {
+ g = svg.append('g')
+ .attr('id', tcid)
+ .attr('transform', 'scale(4)translate(20,20)');
+
+ for (k = 0; k < 4; k++) {
+ muted = k % 2;
+ what = muted ? ' muted' : ' normal';
+ theme = k < 2 ? 'light' : 'dark';
+ dom.forEach(function (id, i) {
+ const x = i * 20;
+ const y = k * 20;
+ const f = getColor(id, muted, theme);
+ g.append('circle').attr({
+ cx: x,
+ cy: y,
+ r: 5,
+ fill: f,
+ });
+ });
+ g.append('rect').attr({
+ x: 140,
+ y: k * 20 - 5,
+ width: 32,
+ height: 10,
+ rx: 2,
+ fill: '#888',
+ });
+ g.append('text').text(theme + what)
+ .attr({
+ x: 142,
+ y: k * 20 + 2,
+ fill: 'white',
+ })
+ .style('font-size', '4pt');
+ }
+ }
+ }
+
+ return {
+ testCard: testCard,
+ getColor: getColor,
+ };
+ }
+
}