GUI -- Completed implementation of Instance events (add, update, remove)
- fixed instance color selection (using cat7() function)
- miscellaneous additions to utility functions.
- etc. and so on...
Change-Id: I61895489ccc60fa17beda9e920e65742e0f2c526
diff --git a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
index 735733e..77c70a6 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -132,8 +132,97 @@
$log.warn('SvgUtilService: loadGlow -- To Be Implemented');
}
+ // --- Ordinal scales for 7 values.
+ // TODO: tune colors for light and dark themes
+ // Note: These colors look good on the white background. Still, need to tune for dark.
+
+ // blue brown brick red sea green purple dark teal lime
+ var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
+ lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
+
+ darkNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
+ darkMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'];
+
+ var colors= {
+ light: {
+ norm: d3.scale.ordinal().range(lightNorm),
+ mute: d3.scale.ordinal().range(lightMute)
+ },
+ dark: {
+ norm: d3.scale.ordinal().range(darkNorm),
+ mute: d3.scale.ordinal().range(darkMute)
+ }
+ };
+
function cat7() {
- $log.warn('SvgUtilService: cat7 -- To Be Implemented');
+ var 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.
+ var ln = colors.light.norm(id),
+ lm = colors.light.mute(id),
+ dn = colors.dark.norm(id),
+ dm = colors.dark.mute(id);
+ if (theme === 'dark') {
+ return muted ? dm : dn;
+ } else {
+ return muted ? lm : ln;
+ }
+ }
+
+ function testCard(svg) {
+ var g = svg.select('g#' + tcid),
+ dom = d3.range(7),
+ k, muted, theme, 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) {
+ var x = i * 20,
+ y = k * 20,
+ f = get(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
+ };
}
function translate(x, y) {
diff --git a/web/gui/src/main/webapp/app/fw/util/fn.js b/web/gui/src/main/webapp/app/fw/util/fn.js
index 932a7c6..690c8b2 100644
--- a/web/gui/src/main/webapp/app/fw/util/fn.js
+++ b/web/gui/src/main/webapp/app/fw/util/fn.js
@@ -45,7 +45,38 @@
// Returns true if all names in the array are defined as functions
// on the given api object; false otherwise.
+ // Also returns false if there are properties on the api that are NOT
+ // listed in the array of names.
function areFunctions(api, fnNames) {
+ var fnLookup = {},
+ extraFound = false;
+
+ if (!isA(fnNames)) {
+ return false;
+ }
+ var n = fnNames.length,
+ i, name;
+ for (i=0; i<n; i++) {
+ name = fnNames[i];
+ if (!isF(api[name])) {
+ return false;
+ }
+ fnLookup[name] = true;
+ }
+
+ // check for properties on the API that are not listed in the array,
+ angular.forEach(api, function (value, key) {
+ if (!fnLookup[key]) {
+ extraFound = true;
+ }
+ });
+ return !extraFound;
+ }
+
+ // Returns true if all names in the array are defined as functions
+ // on the given api object; false otherwise. This is a non-strict version
+ // that does not care about other properties on the api.
+ function areFunctionsNonStrict(api, fnNames) {
if (!isA(fnNames)) {
return false;
}
@@ -71,6 +102,21 @@
};
}
+ // search through an array of objects, looking for the one with the
+ // tagged property matching the given key. tag defaults to 'id'.
+ // returns the index of the matching object, or -1 for no match.
+ function find(key, array, tag) {
+ var _tag = tag || 'id',
+ idx, n, d;
+ for (idx = 0, n = array.length; idx < n; idx++) {
+ d = array[idx];
+ if (d[_tag] === key) {
+ return idx;
+ }
+ }
+ return -1;
+ }
+
angular.module('onosUtil')
.factory('FnService', ['$window', function (_$window_) {
$window = _$window_;
@@ -82,7 +128,9 @@
isO: isO,
contains: contains,
areFunctions: areFunctions,
- windowSize: windowSize
+ areFunctionsNonStrict: areFunctionsNonStrict,
+ windowSize: windowSize,
+ find: find
};
}]);