From 81c5730add8485e11e9dff72b7a8b4edb770f491 Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Wed, 9 Dec 2015 12:30:19 +0100 Subject: [PATCH] -Move icon rendering code to their specific subclass. -Draw points in bar icon if appropriate -Introduce point icon -Cleanups --- docs/graph2d/index.html | 2 +- lib/timeline/component/DataAxis.js | 3 +- lib/timeline/component/GraphGroup.js | 103 +++++------------- lib/timeline/component/Legend.js | 3 +- lib/timeline/component/graph2d_types/bar.js | 34 ++++++ lib/timeline/component/graph2d_types/line.js | 47 ++++++++ .../component/graph2d_types/points.js | 64 ++++++----- 7 files changed, 151 insertions(+), 105 deletions(-) diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index 94131646..9c659f7a 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -576,7 +576,7 @@ drawPoints: { 3. Function: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.
-drawPoints: function(item, group, graph2d) {
+drawPoints: function(item, group) {
   ...
 }
diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index 8e673207..02593649 100644 --- a/lib/timeline/component/DataAxis.js +++ b/lib/timeline/component/DataAxis.js @@ -77,6 +77,7 @@ function DataAxis (body, options, svg, linegraphOptions) { // create the HTML DOM this._create(); + this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups}; var me = this; this.body.emitter.on("verticalDrag", function() { @@ -187,7 +188,7 @@ DataAxis.prototype._redrawGroupIcons = function () { for (var i = 0; i < groupArray.length; i++) { var groupId = groupArray[i]; if (this.groups[groupId].visible === true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] === true)) { - this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight); + this.groups[groupId].getLegend(iconWidth, iconHeight, this.framework, x, y); y += iconHeight + iconOffset; } } diff --git a/lib/timeline/component/GraphGroup.js b/lib/timeline/component/GraphGroup.js index b8c2b08f..37917fc3 100644 --- a/lib/timeline/component/GraphGroup.js +++ b/lib/timeline/component/GraphGroup.js @@ -1,5 +1,8 @@ var util = require('../../util'); var DOMutil = require('../../DOMutil'); +var Bars = require('./graph2d_types/bar'); +var Lines = require('./graph2d_types/line'); +var Points = require('./graph2d_types/points'); /** * /** @@ -120,79 +123,6 @@ GraphGroup.prototype.update = function (group) { this.setOptions(group.options); }; - -//TODO: move these render functions into the type specific files and call them from LineGraph - -/** - * draw the icon for the legend. - * - * @param x - * @param y - * @param JSONcontainer - * @param SVGcontainer - * @param iconWidth - * @param iconHeight - */ -GraphGroup.prototype.drawIcon = function (x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) { - var fillHeight = iconHeight * 0.5; - var path, fillPath; - - var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer); - outline.setAttributeNS(null, "x", x); - outline.setAttributeNS(null, "y", y - fillHeight); - outline.setAttributeNS(null, "width", iconWidth); - outline.setAttributeNS(null, "height", 2 * fillHeight); - outline.setAttributeNS(null, "class", "vis-outline"); - - if (this.options.style == 'line') { - path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer); - path.setAttributeNS(null, "class", this.className); - if (this.style !== undefined) { - path.setAttributeNS(null, "style", this.style); - } - - path.setAttributeNS(null, "d", "M" + x + "," + y + " L" + (x + iconWidth) + "," + y + ""); - if (this.options.shaded.enabled == true) { - fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer); - if (this.options.shaded.orientation == 'top') { - fillPath.setAttributeNS(null, "d", "M" + x + ", " + (y - fillHeight) + - "L" + x + "," + y + " L" + (x + iconWidth) + "," + y + " L" + (x + iconWidth) + "," + (y - fillHeight)); - } - else { - fillPath.setAttributeNS(null, "d", "M" + x + "," + y + " " + - "L" + x + "," + (y + fillHeight) + " " + - "L" + (x + iconWidth) + "," + (y + fillHeight) + - "L" + (x + iconWidth) + "," + y); - } - fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill"); - if (this.options.shaded.style !== undefined && this.options.shaded.style !== "") { - fillPath.setAttributeNS(null, "style", this.options.shaded.style); - } - } - - if (this.options.drawPoints.enabled == true) { - var groupTemplate = { - style: this.options.drawPoints.style, - styles: this.options.drawPoints.styles, - size: this.options.drawPoints.size, - className: this.className - }; - DOMutil.drawPoint(x + 0.5 * iconWidth, y, groupTemplate, JSONcontainer, SVGcontainer); - } - } - else { - var barWidth = Math.round(0.3 * iconWidth); - var bar1Height = Math.round(0.4 * iconHeight); - var bar2Height = Math.round(0.75 * iconHeight); - - var offset = Math.round((iconWidth - (2 * barWidth)) / 3); - - DOMutil.drawBar(x + 0.5 * barWidth + offset, y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer, this.style); - DOMutil.drawBar(x + 1.5 * barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer, this.style); - } -}; - - /** * return the legend entree for this group. * @@ -200,10 +130,29 @@ GraphGroup.prototype.drawIcon = function (x, y, JSONcontainer, SVGcontainer, ico * @param iconHeight * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}} */ -GraphGroup.prototype.getLegend = function (iconWidth, iconHeight) { - var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg"); - this.drawIcon(0, 0.5 * iconHeight, [], svg, iconWidth, iconHeight); - return {icon: svg, label: this.content, orientation: this.options.yAxisOrientation}; +GraphGroup.prototype.getLegend = function (iconWidth, iconHeight, framework, x, y) { + if (framework == undefined || framework == null) { + var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg"); + framework = {svg: svg, svgElements:{}, options: this.options, groups: [this]} + } + if (x == undefined || x == null){ + x = 0; + } + if (y == undefined || y == null){ + y = 0.5 * iconHeight; + } + switch (this.options.style){ + case "line": + Lines.drawIcon(this, x, y, iconWidth, iconHeight, framework); + break; + case "points": + Points.drawIcon(this, x, y, iconWidth, iconHeight, framework); + break; + case "bar": + Bars.drawIcon(this, x, y, iconWidth, iconHeight, framework); + break; + } + return {icon: framework.svg, label: this.content, orientation: this.options.yAxisOrientation}; }; GraphGroup.prototype.getYRange = function (groupData) { diff --git a/lib/timeline/component/Legend.js b/lib/timeline/component/Legend.js index bb549be2..0843db38 100644 --- a/lib/timeline/component/Legend.js +++ b/lib/timeline/component/Legend.js @@ -30,6 +30,7 @@ function Legend(body, options, side, linegraphOptions) { this.groups = {}; this.amountOfGroups = 0; this._create(); + this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups}; this.setOptions(options); } @@ -204,7 +205,7 @@ Legend.prototype.drawLegendIcons = function() { for (var i = 0; i < groupArray.length; i++) { var groupId = groupArray[i]; if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) { - this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight); + this.groups[groupId].getLegend(iconWidth, iconHeight, this.framework, x, y); y += iconHeight + this.options.iconSpacing; } } diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js index fc26ed47..4b635749 100644 --- a/lib/timeline/component/graph2d_types/bar.js +++ b/lib/timeline/component/graph2d_types/bar.js @@ -4,6 +4,40 @@ var Points = require('./points'); function Bargraph(groupId, options) { } +Bargraph.drawIcon = function (group, x, y, iconWidth, iconHeight, framework) { + var fillHeight = iconHeight * 0.5; + var path, fillPath; + + var outline = DOMutil.getSVGElement("rect", framework.svgElements, framework.svg); + outline.setAttributeNS(null, "x", x); + outline.setAttributeNS(null, "y", y - fillHeight); + outline.setAttributeNS(null, "width", iconWidth); + outline.setAttributeNS(null, "height", 2 * fillHeight); + outline.setAttributeNS(null, "class", "vis-outline"); + + var barWidth = Math.round(0.3 * iconWidth); + var bar1Height = Math.round(0.4 * iconHeight); + var bar2Height = Math.round(0.75 * iconHeight); + + var offset = Math.round((iconWidth - (2 * barWidth)) / 3); + + DOMutil.drawBar(x + 0.5 * barWidth + offset, y + fillHeight - bar1Height - 1, barWidth, bar1Height, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style); + DOMutil.drawBar(x + 1.5 * barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style); + //TODO: draw little points if drawPoints enabled. + + if (group.options.drawPoints.enabled == true) { + var groupTemplate = { + style: group.options.drawPoints.style, + styles: group.options.drawPoints.styles, + size: barWidth/5, + className: group.className + }; + DOMutil.drawPoint(x + 0.5 * barWidth + offset, y + fillHeight - bar1Height - 1, groupTemplate, framework.svgElements, framework.svg); + DOMutil.drawPoint(x + 1.5 * barWidth + offset + 2, y + fillHeight - bar2Height - 1, groupTemplate, framework.svgElements, framework.svg); + } + +} + /** * draw a bar graph * diff --git a/lib/timeline/component/graph2d_types/line.js b/lib/timeline/component/graph2d_types/line.js index 638e1a6c..18b9877b 100644 --- a/lib/timeline/component/graph2d_types/line.js +++ b/lib/timeline/component/graph2d_types/line.js @@ -20,6 +20,53 @@ Line.calcPath = function (dataset, group) { } } +Line.drawIcon = function (group, x, y, iconWidth, iconHeight, framework) { + var fillHeight = iconHeight * 0.5; + var path, fillPath; + + var outline = DOMutil.getSVGElement("rect", framework.svgElements, framework.svg); + outline.setAttributeNS(null, "x", x); + outline.setAttributeNS(null, "y", y - fillHeight); + outline.setAttributeNS(null, "width", iconWidth); + outline.setAttributeNS(null, "height", 2 * fillHeight); + outline.setAttributeNS(null, "class", "vis-outline"); + + path = DOMutil.getSVGElement("path", framework.svgElements, framework.svg); + path.setAttributeNS(null, "class", group.className); + if (group.style !== undefined) { + path.setAttributeNS(null, "style", group.style); + } + + path.setAttributeNS(null, "d", "M" + x + "," + y + " L" + (x + iconWidth) + "," + y + ""); + if (group.options.shaded.enabled == true) { + fillPath = DOMutil.getSVGElement("path", framework.svgElements, framework.svg); + if (group.options.shaded.orientation == 'top') { + fillPath.setAttributeNS(null, "d", "M" + x + ", " + (y - fillHeight) + + "L" + x + "," + y + " L" + (x + iconWidth) + "," + y + " L" + (x + iconWidth) + "," + (y - fillHeight)); + } + else { + fillPath.setAttributeNS(null, "d", "M" + x + "," + y + " " + + "L" + x + "," + (y + fillHeight) + " " + + "L" + (x + iconWidth) + "," + (y + fillHeight) + + "L" + (x + iconWidth) + "," + y); + } + fillPath.setAttributeNS(null, "class", group.className + " vis-icon-fill"); + if (group.options.shaded.style !== undefined && group.options.shaded.style !== "") { + fillPath.setAttributeNS(null, "style", group.options.shaded.style); + } + } + + if (group.options.drawPoints.enabled == true) { + var groupTemplate = { + style: group.options.drawPoints.style, + styles: group.options.drawPoints.styles, + size: group.options.drawPoints.size, + className: group.className + }; + DOMutil.drawPoint(x + 0.5 * iconWidth, y, groupTemplate, framework.svgElements, framework.svg); + } +} + Line.drawShading = function (pathArray, group, subPathArray, framework) { // append shading to the path if (group.options.shaded.enabled == true) { diff --git a/lib/timeline/component/graph2d_types/points.js b/lib/timeline/component/graph2d_types/points.js index 8d3d1dfb..4241b622 100644 --- a/lib/timeline/component/graph2d_types/points.js +++ b/lib/timeline/component/graph2d_types/points.js @@ -14,47 +14,61 @@ function Points(groupId, options) { */ Points.draw = function (dataset, group, framework, offset) { offset = offset || 0; - var callback = getCallback(); + var callback = getCallback(framework, group); for (var i = 0; i < dataset.length; i++) { if (!callback) { // draw the point the simple way. - DOMutil.drawPoint(dataset[i].screen_x + offset, dataset[i].screen_y, getGroupTemplate(), framework.svgElements, framework.svg, dataset[i].label); + DOMutil.drawPoint(dataset[i].screen_x + offset, dataset[i].screen_y, getGroupTemplate(group), framework.svgElements, framework.svg, dataset[i].label); } else { - var callbackResult = callback(dataset[i], group, framework); // result might be true, false or an object + var callbackResult = callback(dataset[i], group); // result might be true, false or an object if (callbackResult === true || typeof callbackResult === 'object') { - DOMutil.drawPoint(dataset[i].screen_x + offset, dataset[i].screen_y, getGroupTemplate(callbackResult), framework.svgElements, framework.svg, dataset[i].label); + DOMutil.drawPoint(dataset[i].screen_x + offset, dataset[i].screen_y, getGroupTemplate(group, callbackResult), framework.svgElements, framework.svg, dataset[i].label); } } } +}; - function getGroupTemplate(callbackResult) { - callbackResult = (typeof callbackResult === 'undefined') ? {} : callbackResult; - return { - style: callbackResult.style || group.options.drawPoints.style, - styles: callbackResult.styles || group.options.drawPoints.styles, - size: callbackResult.size || group.options.drawPoints.size, - className: callbackResult.className || group.className - }; - } +Points.drawIcon = function (group, x, y, iconWidth, iconHeight, framework) { + var fillHeight = iconHeight * 0.5; + var path, fillPath; - function getCallback() { - var callback = undefined; - // check for the graph2d onRender - if (framework.options.drawPoints.onRender && typeof framework.options.drawPoints.onRender == 'function') { - callback = framework.options.drawPoints.onRender; - } + var outline = DOMutil.getSVGElement("rect", framework.svgElements, framework.svg); + outline.setAttributeNS(null, "x", x); + outline.setAttributeNS(null, "y", y - fillHeight); + outline.setAttributeNS(null, "width", iconWidth); + outline.setAttributeNS(null, "height", 2 * fillHeight); + outline.setAttributeNS(null, "class", "vis-outline"); - // override it with the group onRender if defined - if (group.group.options && group.group.options.drawPoints && group.group.options.drawPoints.onRender && typeof group.group.options.drawPoints.onRender == 'function') { - callback = group.group.options.drawPoints.onRender; - } + //Don't call callback on icon + DOMutil.drawPoint(x + 0.5 * iconWidth, y, getGroupTemplate(group), framework.svgElements, framework.svg); +}; - return callback; +function getGroupTemplate(group, callbackResult) { + callbackResult = (typeof callbackResult === 'undefined') ? {} : callbackResult; + return { + style: callbackResult.style || group.options.drawPoints.style, + styles: callbackResult.styles || group.options.drawPoints.styles, + size: callbackResult.size || group.options.drawPoints.size, + className: callbackResult.className || group.className + }; +} + +function getCallback(framework, group) { + var callback = undefined; + // check for the graph2d onRender + if (framework.options && framework.options.drawPoints && framework.options.drawPoints.onRender && typeof framework.options.drawPoints.onRender == 'function') { + callback = framework.options.drawPoints.onRender; } -}; + // override it with the group onRender if defined + if (group.group.options && group.group.options.drawPoints && group.group.options.drawPoints.onRender && typeof group.group.options.drawPoints.onRender == 'function') { + callback = group.group.options.drawPoints.onRender; + } + + return callback; +} module.exports = Points; \ No newline at end of file