Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip extensions (onShown,onHidden, linked) and reference to all chart instances #341

Closed
wants to merge 13 commits into from
Closed

Tooltip extensions (onShown,onHidden, linked) and reference to all chart instances #341

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
93b88a7
feat: Tooltips - callbacks and linked tooltips
rshingleton Mar 22, 2018
40f1044
skip: formatting fix
rshingleton Mar 22, 2018
d942a0b
refactor: update tooltip callback and linked handler
rshingleton Mar 22, 2018
5bfe7d5
skip: update authors email
rshingleton Mar 22, 2018
68c78e1
refactor: Add additional checks for tooltip extension
rshingleton Mar 23, 2018
48e813f
refactor: cleanup code html chart.js in demo area
rshingleton Mar 23, 2018
0907282
refactor: Updates to tooltip extensions
Mar 23, 2018
4f8411d
refactor: cleanup tests
Mar 23, 2018
0e16e98
refactor: cleanup tests and tooltip.js code
Mar 23, 2018
bd62e1e
refactor: order of operation in tooltips
Mar 23, 2018
b8e7f40
refactor: cleanup code html chart.js in demo area
rshingleton Mar 25, 2018
573b778
test: tooltips
rshingleton Mar 25, 2018
04e083f
test: tooltips
rshingleton Mar 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion AUTHORS.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@ Julien Castelain <[email protected]>
Kim Jong Hyen <[email protected]>
dtc03012 <[email protected]>
Kim Dong Min <[email protected]>
Russell Shingleton <russellshomes@aol.com>
Russell Shingleton <reshingleton@gmail.com>
Matthias Komarek <[email protected]>
Tony Quetano <[email protected]>
160 changes: 95 additions & 65 deletions demo/chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable */
var billboardDemo = {
let billboardDemo = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using ES6 syntax is good, but as having IE9 support this won't work for old browsers.
This is the reason of keeping old syntax.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Roger that. Converting back to var notation.

/**
* Initializer
*/
Expand All @@ -22,11 +22,11 @@ var billboardDemo = {
},

_bindEvents: function() {
var $list = this.$list;
var $wrapper = this.$wrapper;
var WIDTH = this.WIDTH;
let $list = this.$list;
let $wrapper = this.$wrapper;
let WIDTH = this.WIDTH;

var clickHandler = (function(e) {
let clickHandler = (function(e) {
e.target.tagName === "A" && this.clickHandler(e.target.href)
}).bind(this);

Expand All @@ -52,14 +52,14 @@ var billboardDemo = {
* @private
*/
_createList: function() {
var html = [];
let html = [];

Object.keys(demos).forEach(function (key) {
Object.keys(demos).forEach(function(key) {
html.push("<li><h4>" + key + "</h4>");

Object.keys(demos[key]).forEach(function (v, i) {
Object.keys(demos[key]).forEach(function(v, i) {
i === 0 && html.push("<ul>");
html.push("<li><a href='#"+ [key, v].join(".") + "'>" + v + "</a></li>");
html.push("<li><a href='#" + [key, v].join(".") + "'>" + v + "</a></li>");
});

html.push("</ul></li>");
Expand All @@ -75,14 +75,14 @@ var billboardDemo = {
*/
clickHandler: function(type) {
// remove legend
var $legend = document.querySelector(".legend");
let $legend = document.querySelector(".legend");
$legend && $legend.parentNode.removeChild($legend);

if (window.innerWidth <= this.WIDTH) {
this.$wrapper.className = "";
}

type = type.replace(/.*#/,"").split(".");
type = type.replace(/.*#/, "").split(".");

if (type.length < 2) {
return;
Expand All @@ -97,14 +97,14 @@ var billboardDemo = {
this.$codeArea.style.display = "block";

// remove selected class
var $selected = this.$list.querySelector("[class="+ this.selectedClass +"]");
$selected && ($selected.className = $selected.className.replace(this.selectedClass,""));
let $selected = this.$list.querySelector("[class=" + this.selectedClass + "]");
$selected && ($selected.className = $selected.className.replace(this.selectedClass, ""));

// add selected class
$selected = this.$list.querySelector("[href='#"+ type.join(".") +"']");
$selected = this.$list.querySelector("[href='#" + type.join(".") + "']");
$selected.className += this.selectedClass;

window.scrollTo(0,0);
window.scrollTo(0, 0);
},

/**
Expand All @@ -114,32 +114,61 @@ var billboardDemo = {
* @returns {boolean}
*/
generate: function(type, key) {
var chartInst = this.chartInst;
let chartInst = this.chartInst;
let typeData = demos[type][key];

let isArray = Array.isArray(typeData);

chartInst.length &&
chartInst.forEach(function(c, i, array) {
c.timer && c.timer.forEach(function(v) {
clearTimeout(v);
});
chartInst.forEach(function(c, i, array) {
c.timer && c.timer.forEach(function(v) {
clearTimeout(v);
});

if (c.element.parentNode)
c.element.parentNode.removeChild(c.element);

//c.destroy();
array.shift();
});
// c.destroy();
// array.shift();
});
this.chartInst = [];

let code = {
markup: [],
data: []
};
// generate chart
var $el = document.getElementById(key);
if (isArray) {
typeData.forEach((t, i) => {this._addChartInstance(t, key, i + 1, code)})
} else {
this._addChartInstance(typeData, key)
}
this.$code.innerHTML = "";
code.markup.forEach(t => {this.$code.innerHTML += t})
code.data.forEach(t => {this.$code.innerHTML += t});
this.$code.scrollTop = 0;
hljs.highlightBlock(this.$code);
return false;
},
_addChartInstance: function(type, key, index, code) {

if (index) {
key += `_${index}`
}

let $el = document.getElementById(key);
let legend;
if (!$el) {
$el = document.createElement("div");
$el.id = key;
if ((index && index === 1) || !index) {
this.$chartArea.innerHTML = "";
}

this.$chartArea.innerHTML = "";
this.$chartArea.appendChild($el);

if (key.indexOf("LegendTemplate") > -1) {
var legend = document.createElement("div");
legend = document.createElement("div");
legend.id = "legend";
legend.style.textAlign = "center";

Expand All @@ -148,72 +177,73 @@ var billboardDemo = {
}
}

var type = demos[type][key];
var func = type.func;
var style = type.style;

var options = type.options;
let func = type.func;
let style = type.style;
let options = type.options;
options.bindto = "#" + key;

var inst = bb.generate(options);
let inst = bb.generate(options);
inst.timer = [];
this.chartInst.push(inst);

var codeStr = "var chart = bb.generate("+
JSON.stringify(options, function(key, value) {
if (typeof value === "function") {
return value.toString();
} else if (/(columns|rows|json)/.test(key)) {
var str = JSON.stringify(value)
let codeStr = "let chart = bb.generate(" +
JSON.stringify(options, function(k, v) {
if (typeof v === "function") {
return v.toString();
} else if (/(columns|rows|json)/.test(k)) {
let str = JSON.stringify(v)
.replace(/\[\[/g, "[\r\n\t[")
.replace(/\]\]/g, "]\r\n ]")
.replace(/(],)/g, "$1\r\n\t")
.replace(/(\"|\d),/g, "$1, ");

return key === "json" ?
return k === "json" ?
str.replace(/{/, "{\r\n\t").replace(/}/, "\r\n }") : str;
}

return value;
return v;
}, 2)
.replace(/(\"function)/g, "function")
.replace(/(}\")/g, "}")
.replace(/\\"/g, "\"")
.replace(/</g, "&lt;")
.replace(/\\t/g, "\t")
.replace(/\t{5}/g,"")
.replace(/\\r/g, "\r")
.replace(/"(\w+)":/g,"$1:")
.replace(/\\n(?!T)/g, "\n") +");";
.replace(/(\"function)/g, "function")
.replace(/(}\")/g, "}")
.replace(/\\"/g, "\"")
.replace(/</g, "&lt;")
.replace(/\\t/g, "\t")
.replace(/\t{5}/g, "")
.replace(/\\r/g, "\r")
.replace(/"(\w+)":/g, "$1:")
.replace(/\\n(?!T)/g, "\n") + ");";

// markup
this.$code.innerHTML = "&lt;!-- Markup -->\r\n&lt;div id=\""+ key +"\">&lt;/div>\r\n"+ (legend ? legend + "\r\n" : "") +"\r\n";
if ((index && index === 1) || !index) {
code.markup.push("&lt;!-- Markup -->\r\n&lt;div id=\"" + key + "\">&lt;/div>\r\n" + (legend ? legend + "\r\n" : "") + "\r\n");
} else if (index && index > 1) {
code.markup.push("&lt;div id=\"" + key + "\">&lt;/div>\r\n" + (legend ? legend + "\r\n" : "") + "\r\n");
}

// script
this.$code.innerHTML += "// Script\r\n"+ codeStr.replace(/"(\[|{)/, "$1").replace(/(\]|})"/, "$1");
this.$code.scrollTop = 0;
if (index && index > 1) {
code.data.push("\r\n\r\n");
}
// script this.$code.innerHTML
code.data.push("// Script\r\n" + codeStr.replace(/"(\[|{)/, "$1").replace(/(\]|})"/, "$1"));

try {
if (func) {
this.$code.innerHTML += "\r\n\r\n" + func.toString()
.replace(/[\t\s]*function \(chart\) \{[\r\n\t\s]*/,"")
.replace(/}$/,"")
.replace(/chart.timer = \[[\r\n\t\s]*/,"")
.replace(/\t{5}/g,"")
.replace(/[\r\n\t\s]*\];?[\r\n\t\s]*$/,"")
.replace(/(\d)\),?/g, "$1);");
code.data.push("\r\n\r\n" + func.toString()
.replace(/[\t\s]*function \(chart\) \{[\r\n\t\s]*/, "")
.replace(/}$/, "")
.replace(/chart.timer = \[[\r\n\t\s]*/, "")
.replace(/\t{5}/g, "")
.replace(/[\r\n\t\s]*\];?[\r\n\t\s]*$/, "")
.replace(/(\d)\),?/g, "$1);"));

func(inst);
}
} catch(e) {}
} catch (e) {}

// style
if (style) {
this.$code.innerHTML += "\r\n\r\n/* Style */\r\n"+ style.join("\r\n");
code.data.push("\r\n\r\n/* Style */\r\n" + style.join("\r\n"));
}

hljs.highlightBlock(this.$code);

return false;
}
};
78 changes: 68 additions & 10 deletions demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,16 +387,16 @@ var demos = {
['data1', 30],
['data2', 120],
],
type : 'pie',
type: 'pie',
onclick: function(d, i) {
console.log("onclick", d, i);
},
},
onover: function(d, i) {
console.log("onover", d, i);
},
},
onout: function(d, i) {
console.log("onout", d, i);
}
}
}
},
func: function(chart) {
Expand Down Expand Up @@ -432,13 +432,13 @@ var demos = {
type: 'donut',
onclick: function(d, i) {
console.log("onclick", d, i);
},
},
onover: function(d, i) {
console.log("onover", d, i);
},
},
onout: function(d, i) {
console.log("onout", d, i);
}
}
},
donut: {
title: "Iris Petal Width"
Expand Down Expand Up @@ -476,10 +476,10 @@ var demos = {
type: 'gauge',
onclick: function(d, i) {
console.log("onclick", d, i);
},
},
onover: function(d, i) {
console.log("onover", d, i);
},
},
onout: function(d, i) {
console.log("onout", d, i);
}
Expand Down Expand Up @@ -1911,7 +1911,65 @@ var demos = {
order: "desc"
}
}
}
},
LinkedTooltips: [
{
options: {
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['data', 20, 30, 10, 10, 30, 40],
],
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
},
tooltip: {
linked: true,
onShown: function() {
alertify.notify('Graph 1 tooltip onShown', 'success', 2);
},
onHidden: function() {
alertify.notify('Graph 1 tooltip onHidden', 'warning', 2);
}
}
}
},
{
options: {
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['data', 10, 50, 100, 50, 50, 50],
],
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
},
tooltip: {
linked: true,
onShown: function() {
alertify.notify('Graph 2 tooltip onShown', 'success', 2);
},
onHidden: function() {
alertify.notify('Graph 2 tooltip onHidden', 'warning', 2);
}
}
}
}
]
},
ChartOptions: {
ChartSize: {
Expand Down
Loading