diff --git a/demos/dermatology.html b/demos/dermatology.html
index 7c174cb4ff..fcb1fc1341 100644
--- a/demos/dermatology.html
+++ b/demos/dermatology.html
@@ -90,7 +90,8 @@
diff --git a/src/common/HTMLWidget.js b/src/common/HTMLWidget.js
index 05c5f2c20d..3b5ba67138 100644
--- a/src/common/HTMLWidget.js
+++ b/src/common/HTMLWidget.js
@@ -10,6 +10,7 @@
Widget.call(this);
this._drawStartPos = "origin";
+ this._tag = "div";
this._boundingBox = null;
}
HTMLWidget.prototype = Object.create(Widget.prototype);
diff --git a/templates/HTMLTemplate.css b/templates/HTMLTemplate.css
new file mode 100644
index 0000000000..61732f70cb
--- /dev/null
+++ b/templates/HTMLTemplate.css
@@ -0,0 +1,8 @@
+.template_HTMLTemplate ul {
+ padding-left: 24px;
+}
+
+.template_HTMLTemplate .dataRow {
+ list-style-type: disc;
+}
+
diff --git a/templates/HTMLTemplate.js b/templates/HTMLTemplate.js
new file mode 100644
index 0000000000..9125ee7ea1
--- /dev/null
+++ b/templates/HTMLTemplate.js
@@ -0,0 +1,42 @@
+"use strict";
+(function (root, factory) {
+ if (typeof define === "function" && define.amd) {
+ define(["src/common/HTMLWidget", "css!./HTMLTemplate"], factory);
+ } else {
+ root.template_HTMLTemplate = factory(root.common_HTMLWidget);
+ }
+}(this, function (HTMLWidget) {
+ function HTMLTemplate(target) {
+ HTMLWidget.call(this);
+ }
+ HTMLTemplate.prototype = Object.create(HTMLWidget.prototype);
+ HTMLTemplate.prototype.constructor = HTMLTemplate;
+ HTMLTemplate.prototype._class += " template_HTMLTemplate";
+
+ HTMLTemplate.prototype.publish("stringProp", "defaultValue", "string", "Sample Property");
+
+ HTMLTemplate.prototype.enter = function (domNode, element) {
+ HTMLWidget.prototype.enter.apply(this, arguments);
+ this._ul = element.append("ul");
+ };
+
+ HTMLTemplate.prototype.update = function (domNode, element) {
+ HTMLWidget.prototype.update.apply(this, arguments);
+
+ var li = this._ul.selectAll(".dataRow").data(this.data());
+ li.enter().append("li")
+ .attr("class", "dataRow")
+ ;
+ li
+ .text(function (row) { return row[0]; })
+ ;
+ li.exit().remove();
+ };
+
+ HTMLTemplate.prototype.exit = function (domNode, element) {
+ this._ul.remove(); // Not really needed ---
+ HTMLWidget.prototype.exit.apply(this, arguments);
+ };
+
+ return HTMLTemplate;
+}));
diff --git a/templates/SVGTemplate.css b/templates/SVGTemplate.css
new file mode 100644
index 0000000000..dacacb7338
--- /dev/null
+++ b/templates/SVGTemplate.css
@@ -0,0 +1,5 @@
+.template_SVGTemplate .someItem {
+ stroke: green;
+ fill: navy;
+}
+
diff --git a/templates/SVGTemplate.js b/templates/SVGTemplate.js
new file mode 100644
index 0000000000..8442735b89
--- /dev/null
+++ b/templates/SVGTemplate.js
@@ -0,0 +1,51 @@
+"use strict";
+(function (root, factory) {
+ if (typeof define === "function" && define.amd) {
+ define(["src/common/SVGWidget", "css!./SVGTemplate"], factory);
+ } else {
+ root.template_SVGTemplate = factory(root.common_SVGWidget);
+ }
+}(this, function (SVGWidget) {
+ function SVGTemplate(target) {
+ SVGWidget.call(this);
+ this._drawStartPos = "origin";
+ }
+ SVGTemplate.prototype = Object.create(SVGWidget.prototype);
+ SVGTemplate.prototype.constructor = SVGTemplate;
+ SVGTemplate.prototype._class += " template_SVGTemplate";
+
+ SVGTemplate.prototype.publish("stringProp", "defaultValue", "string", "Sample Property");
+
+ SVGTemplate.prototype.enter = function (domNode, element) {
+ SVGWidget.prototype.enter.apply(this, arguments);
+ };
+
+ SVGTemplate.prototype.update = function (domNode, element) {
+ SVGWidget.prototype.update.apply(this, arguments);
+
+ var g = element.selectAll(".dataRow").data(this.data());
+ g.enter().append("g")
+ .attr("class", "dataRow")
+ .each(function (d) {
+ var g = d3.select(this);
+ g.append("circle")
+ .attr("cx", -8)
+ .attr("cy", -4)
+ .attr("r", 4)
+ ;
+ g.append("text");
+ })
+ ;
+ g
+ .attr("transform", function (d, idx) { return "translate(32 " + ((idx + 1) * 16) + ")";})
+ ;
+ g.select("text").text(function (row) { return row[0]; });
+ g.exit().remove();
+ };
+
+ SVGTemplate.prototype.exit = function (domNode, element) {
+ SVGWidget.prototype.exit.apply(this, arguments);
+ };
+
+ return SVGTemplate;
+}));
diff --git a/test/DataFactory.js b/test/DataFactory.js
index b5a7c83c17..a9ff9d1e70 100644
--- a/test/DataFactory.js
+++ b/test/DataFactory.js
@@ -1,7 +1,7 @@
"use strict";
(function (root, factory) {
if (typeof define === "function" && define.amd) {
- define(["src/form/Input", "src/form/Button", "src/form/CheckBox" ,"src/form/ColorInput","src/form/Radio","src/form/Range","src/form/Select", "src/form/Slider","src/form/TextArea", "src/common/WidgetArray", "src/chart/MultiChartSurface", "src/layout/Surface", "src/chart/Column", "src/other/Table"], factory);
+ define(["src/form/Input", "src/form/Button", "src/form/CheckBox", "src/form/ColorInput", "src/form/Radio", "src/form/Range", "src/form/Select", "src/form/Slider", "src/form/TextArea", "src/common/WidgetArray", "src/chart/MultiChartSurface", "src/layout/Surface", "src/chart/Column", "src/other/Table"], factory);
} else {
root.test_DataFactory = factory(root.form_Input, root.form_Button, root.form_CheckBox, root.form_ColorInput, root.form_Radio, root.form_Range, root.form_Select, root.form_Slider, root.form_TextArea, root.common_WidgetArray, root.chart_MultiChartSurface, root.layout_Surface, root.chart_Column, root.other_Table);
}
@@ -14,9 +14,9 @@
},
amgauge: {
numBands: [3],
- bandsColor: ["#84b761","#fdd400","#cc4748"],
- bandsEndValue: [90,130,220],
- bandsStartValue: [0,90,130],
+ bandsColor: ["#84b761", "#fdd400", "#cc4748"],
+ bandsEndValue: [90, 130, 220],
+ bandsStartValue: [0, 90, 130],
bandsInnerRadius: [null, null, "95%"],
bottomText: ["[[data]] km/h"],
high: [220],
@@ -84,29 +84,29 @@
]
},
random: {
- columns: function(colCount){
+ columns: function (colCount) {
var ret = [];
- for(var i = 0;i b ? 1 : -1});
- for(var j2 = 0;j2
diff --git a/test/runner_build.html b/test/runner_build.html
index 7d134c455c..a1a892cd96 100644
--- a/test/runner_build.html
+++ b/test/runner_build.html
@@ -1,4 +1,4 @@
-
+
HPCC Visualization Unit Tests
@@ -20,6 +20,7 @@
paths: {
"src": "../dist-amd",
"test": "../test",
+ "templates": "../templates",
"font-awesome": "../dist-amd/font-awesome/css/font-awesome.min",
"amchartsImg": "../dist-amd/img/amcharts/"
}
diff --git a/test/templatesFactory.js b/test/templatesFactory.js
new file mode 100644
index 0000000000..c347dbe527
--- /dev/null
+++ b/test/templatesFactory.js
@@ -0,0 +1,32 @@
+"use strict";
+(function (root, factory) {
+ if (typeof define === "function" && define.amd) {
+ define([], factory);
+ } else {
+ root.test_templatesFactory = factory();
+ }
+}(this, function () {
+ return {
+ SVG: {
+ simple: function (callback) {
+ require(["test/DataFactory", "templates/SVGTemplate"], function (DataFactory, SVGTemplate) {
+ callback(new SVGTemplate()
+ .columns(DataFactory.ND.subjects.columns)
+ .data(DataFactory.ND.subjects.data)
+ );
+ });
+ }
+ },
+ HTML: {
+ simple: function (callback) {
+ require(["test/DataFactory", "templates/HTMLTemplate"], function (DataFactory, SVGTemplate) {
+ callback(new SVGTemplate()
+ .columns(DataFactory.ND.subjects.columns)
+ .data(DataFactory.ND.subjects.data)
+ );
+ });
+ }
+ }
+
+ };
+}));