/*
* This file is part of Toolkit.
*
* Toolkit is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* Toolkit is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU General
* Public License along with this program; if not, write to the
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301 USA
*/
"use strict";
(function(w, TK) {
function range_change_cb() {
this.invalidate_all();
this.trigger_draw();
};
function transform_dots(dots) {
if (dots === void(0)) return "";
if (typeof dots === "string") return dots;
if (typeof dots === "object") {
if (Array.isArray(dots)) {
if (!dots.length || !dots[0]) return null;
var ret = { };
var start, stop;
for (var name in dots[0]) if (dots[0].hasOwnProperty(name)) {
var a = [];
ret[name] = a;
for (var i = 0; i < dots.length; i++) {
a[i] = dots[i][name];
}
}
return ret;
} else return dots;
} else {
TK.error("Unsupported option 'dots':", dots);
return "";
}
}
// this is not really a rounding operation but simply adds 0.5. we do this to make sure
// that integer pixel positions result in actual pixels, instead of being spread across
// two pixels with half opacity
function svg_round(x) {
x = +x;
return x + 0.5;
}
function svg_round_array(x) {
var i;
for (i = 0; i < x.length; i++) {
x[i] = +x[i] + 0.5;
}
return x;
}
function _start(d, s) {
var w = this.range_x.options.basis;
var h = this.range_y.options.basis;
var t = this.options.type;
var m = this.options.mode;
var x = this.range_x.val2px(d.x[0]);
var y = this.range_y.val2px(d.y[0]);
switch (m) {
case "bottom":
// fill the lower part of the graph
s.push(
"M " + svg_round(x - 1) + " ",
svg_round(h + 1) + " " + t + " ",
svg_round(x - 1) + " ",
svg_round(y)
);
break;
case "top":
// fill the upper part of the graph
s.push("M " + svg_round(x - 1) + " " + svg_round(-1),
" " + t + " " + svg_round(x - 1) + " ",
svg_round(y)
);
break;
case "center":
// fill from the mid
s.push(
"M " + svg_round(x - 1) + " ",
svg_round(0.5 * h)
);
break;
case "base":
// fill from variable point
s.push(
"M " + svg_round(x - 1) + " ",
svg_round((1 - this.options.base) * h)
);
break;
default:
TK.error("Unsupported mode:", m);
/* FALL THROUGH */
case "line":
// fill nothing
s.push("M " + svg_round(x) + " " + svg_round(y));
break;
}
}
function _end(d, s) {
var a = 0.5;
var h = this.range_y.options.basis;
var t = this.options.type;
var m = this.options.mode;
var x = this.range_x.val2px(d.x[d.x.length-1]);
var y = this.range_y.val2px(d.y[d.y.length-1]);
switch (m) {
case "bottom":
// fill the graph below
s.push(" " + t + " " + svg_round(x) + " " + svg_round(h + 1) + " Z");
break;
case "top":
// fill the upper part of the graph
s.push(" " + t + " " + svg_round(x + 1) + " " + svg_round(-1) + " Z");
break;
case "center":
// fill from mid
s.push(" " + t + " " + svg_round(x + 1) + " " + svg_round(0.5 * h) + " Z");
break;
case "base":
// fill from variable point
s.push(" " + t + " " + svg_round(x + 1) + " " + svg_round((-m + 1) * h) + " Z");
break;
default:
TK.error("Unsupported mode:", m);
/* FALL THROUGH */
case "line":
// fill nothing
break;
}
}
TK.Graph = TK.class({
/**
* TK.Graph is a single SVG path element. It provides
* some functions to easily draw paths inside Charts and other
* derivates.
*
* @class TK.Graph
*
* @param {Object} [options={ }] - An object containing initial options.
*
* @property {Function|Object} options.range_x - Callback function
* returning a {@link TK.Range} module for x axis or an object with options
* for a new {@link Range}.
* @property {Function|Object} options.range_y - Callback function
* returning a {@link TK.Range} module for y axis or an object with options
* for a new {@link Range}.
* @property {Array<Object>|String} options.dots=[] - The dots of the path.
* Can be a ready-to-use SVG-path-string or an array of objects like
* <code>{x: x, y: y [, x1, y1, x2, y2]}</code> (depending on the type).
* @property {String} [options.type="L"] - Type of the graph (needed values in dots object):
* <ul>
* <li><code>L</code>: normal (needs x,y)</li>
* <li><code>T</code>: smooth quadratic Bézier (needs x, y)</li>
* <li><code>H[n]</code>: smooth horizontal, [n] = smoothing factor between 1 (square) and 5 (nearly no smooth)</li>
* <li><code>Q</code>: quadratic Bézier (needs: x1, y1, x, y)</li>
* <li><code>C</code>: CurveTo (needs: x1, y1, x2, y2, x, y)</li>
* <li><code>S</code>: SmoothCurve (needs: x1, y1, x, y)</li>
* </ul>
* @property {String} [options.mode="line"] - Drawing mode of the graph, possible values are:
* <ul>
* <li><code>line</code>: line only</li>
* <li><code>bottom</code>: fill below the line</li>
* <li><code>top</code>: fill above the line</li>
* <li><code>center</code>: fill from the vertical center of the canvas</li>
* <li><code>base</code>: fill from a percentual position on the canvas (set with base)</li>
* </ul>
* @property {Number} [options.base=0] - If mode is <code>base</code> set the position
* of the base line to fill from between 0 (bottom) and 1 (top).
* @property {String} [options.color=""] - Set the color of the path.
* Better use <code>stroke</code> and <code>fill</code> via CSS.
* @property {Number} [options.width=0] - The width of the graph.
* @property {Number} [options.height=0] - The height of the graph.
* @property {String|Boolean} [options.key=false] - Show a description
* for this graph in the charts key, <code>false</code> to turn it off.
*
* @extends TK.Widget
*
* @mixes TK.Ranges
*/
_class: "Graph",
Extends: TK.Widget,
Implements: TK.Ranges,
_options: Object.assign(Object.create(TK.Widget.prototype._options), {
dots: "array",
type: "string",
mode: "string",
base: "number",
color: "string",
range_x: "object",
range_y: "object",
width: "number",
height: "number",
key: "string|boolean",
element: void(0),
}),
options: {
dots: null,
type: "L",
mode: "line",
base: 0,
color: "",
width: 0,
height: 0,
key: false
},
initialize: function (options) {
TK.Widget.prototype.initialize.call(this, options);
/** @member {SVGPath} TK.Graph#element - The SVG path. Has class <code>toolkit-graph</code>
*/
this.element = this.widgetize(TK.make_svg("path"), true, true, true);
TK.add_class(this.element, "toolkit-graph");
/** @member {TK.Range} TK.Graph#range_x - The range for the x axis.
*/
/** @member {TK.Range} TK.Graph#range_y - The range for the y axis.
*/
if (this.options.range_x) this.set("range_x", this.options.range_x);
if (this.options.range_y) this.set("range_y", this.options.range_y);
this.set("color", this.options.color);
this.set("mode", this.options.mode);
if (this.options.dots) this.options.dots = transform_dots(this.options.dots);
},
redraw: function () {
var I = this.invalid;
var O = this.options;
var E = this.element;
if (I.color) {
I.color = false;
E.style.stroke = O.color;
}
if (I.mode) {
I.mode = false;
TK.remove_class(E, "toolkit-filled");
TK.remove_class(E, "toolkit-outline");
TK.add_class(E, O.mode === "line" ? "toolkit-outline" : "toolkit-filled");
}
if (I.validate("dots", "type", "width", "height")) {
var a = 0.5;
var dots = O.dots;
var range_x = this.range_x;
var range_y = this.range_y;
var w = range_x.options.basis;
var h = range_y.options.basis;
if (typeof dots === "string") {
E.setAttribute("d", dots);
} else if (!dots) {
E.setAttribute("d", "");
} else {
var x = svg_round_array(dots.x.map(range_x.val2px));
var y = svg_round_array(dots.y.map(range_y.val2px));
var x1, x2, y1, y2;
// if we are drawing a line, _start will do the first point
var i = O.type === "line" ? 1 : 0;
var s = [];
var f;
_start.call(this, dots, s);
switch (O.type.substr(0,1)) {
case "L":
case "T":
for (; i < x.length; i++)
s.push(" " + O.type + " " + x[i] + " " + y[i]);
break;
case "Q":
case "S":
x1 = svg_round_array(dots.x1.map(range_x.val2px));
y1 = svg_round_array(dots.y1.map(range_y.val2px));
for (; i < x.length; i++)
s.push(" " + O.type + " "
+ x1[i] + "," + y1[i] + " "
+ x[i] + "," + y[i]);
break;
case "C":
x1 = svg_round_array(dots.x1.map(range_x.val2px));
x2 = svg_round_array(dots.x2.map(range_x.val2px));
y1 = svg_round_array(dots.y1.map(range_y.val2px));
y2 = svg_round_array(dots.y2.map(range_y.val2px));
for (; i < x.length; i++)
s.push(" " + O.type + " "
+ x1[i] + "," + y1[i] + " "
+ x2[i] + "," + y2[i] + " "
+ x[i] + "," + y[i]);
break;
case "H":
f = O.type.length > 1 ? parseFloat(O.type.substr(1)) : 3;
if (i === 0) {
i++;
s.push(" S" + x[0] + "," + y[0] + " " + x[0] + "," + y[0]);
}
for (; i < x.length-1; i++)
s.push(" S" + (x[i] - Math.round(x[i] - x[i-1])/f) + ","
+ y[i] + " " + x[i] + "," + y[i]);
if (i < x.length)
s.push(" S" + x[i] + "," + y[i] + " " + x[i] + "," + y[i]);
break;
default:
TK.error("Unsupported graph type", O.type);
}
_end.call(this, dots, s);
E.setAttribute("d", s.join(""));
}
}
TK.Widget.prototype.redraw.call(this);
},
// GETTER & SETTER
set: function (key, value) {
if (key === "dots") {
value = transform_dots(value);
}
TK.Widget.prototype.set.call(this, key, value);
switch (key) {
case "range_x":
case "range_y":
this.add_range(value, key);
value.add_event("set", range_change_cb.bind(this));
break;
case "width":
this.range_x.set("basis", value);
break;
case "height":
this.range_y.set("basis", value);
break;
case "dots":
/**
* Is fired when the graph changes
* @event TK.Graph#graphchanged
*/
this.fire_event("graphchanged");
break;
}
}
});
})(this, this.TK);