Skip to content

Commit

Permalink
feat(Options): New tooltip onshow/onhidden and linked options
Browse files Browse the repository at this point in the history 
Added 3 new tooltip options: onshown, onhidden, linked

Close #341
  • Loading branch information
@rshingleton @netil
rshingleton authored and netil committed Mar 26, 2018
1 parent be4356c commit c96d2dd
Show file tree
Hide file tree
Showing 9 changed files with 652 additions and 112 deletions.
2 changes: 1 addition & 1 deletion AUTHORS.txt
View file
Expand Up @@ -12,6 +12,6 @@ Julien Castelain <jcastelain@gmail.com>
Kim Jong Hyen <fussaep@gmail.com>
dtc03012 <dtc03012@naver.com>
Kim Dong Min <dkrahd12@gmail.com>
Russell Shingleton <russellshomes@aol.com>
Russell Shingleton <reshingleton@gmail.com>
Matthias Komarek <matthias@mkomarek.de>
Tony Quetano <tony.quetano@planttheidea.com>
132 changes: 84 additions & 48 deletions demo/chart.js
View file
Expand Up @@ -82,7 +82,7 @@ var billboardDemo = {
this.$wrapper.className = "";
}

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

if (type.length < 2) {
return;
Expand All @@ -104,7 +104,7 @@ var billboardDemo = {
$selected = this.$list.querySelector("[href='#"+ type.join(".") +"']");
$selected.className += this.selectedClass;

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

/**
Expand All @@ -115,31 +115,65 @@ var billboardDemo = {
*/
generate: function(type, key) {
var chartInst = this.chartInst;
var typeData = demos[type][key];
var isArray = Array.isArray(typeData);
var self = this;

chartInst.length &&
chartInst.forEach(function(c, i, array) {
c.timer && c.timer.forEach(function(v) {
clearTimeout(v);
});
chartInst.length && 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 = [];

var code = {
markup: [],
data: []
};

// generate chart
isArray ? typeData.forEach(function(t, i) {
self._addChartInstance(t, key, i + 1, code);
}) : this._addChartInstance(typeData, key, undefined, code);

this.$code.innerHTML = "";

code.markup.forEach(function(t) { self.$code.innerHTML += t; });
code.data.forEach(function(t) { self.$code.innerHTML += t; });

this.$code.scrollTop = 0;

hljs.highlightBlock(this.$code);

return false;
},

_addChartInstance: function(type, key, index, code) {
if (index) {
key += "_"+ index;
}

var $el = document.getElementById(key);
var 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 +182,74 @@ var billboardDemo = {
}
}

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

var options = type.options;

options.bindto = "#" + key;

var 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)
var codeStr = "var chart = bb.generate(" +
JSON.stringify(options, function (k, v) {
if (typeof v === "function") {
return v.toString();
} else if (/(columns|rows|json)/.test(k)) {
var 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;
}
};
69 changes: 58 additions & 11 deletions demo/demo.js
View file
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 @@ -814,7 +814,8 @@ var demos = {
type: 'category',
tick: {
rotate: 75,
multiline: false
multiline: false,
tooltip: true
},
height: 130
}
Expand Down Expand Up @@ -1911,7 +1912,53 @@ 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
}
}
},
{
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
}
}
}
]
},
ChartOptions: {
ChartSize: {
Expand Down
22 changes: 11 additions & 11 deletions demo/index.html
View file
Expand Up @@ -11,24 +11,24 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/fallback/1.1.8/fallback.min.js"></script>

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Bootstrap Core CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<!-- Custom CSS -->
<link href="./simple-sidebar.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css" />
<link rel="stylesheet" type="text/css" href="./tomorrow.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/javascript.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.9.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.0/d3.js"></script>
<script>
!function() {
var localPath = "../dist/";
Expand All @@ -50,8 +50,8 @@
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
Expand Down

0 comments on commit c96d2dd

Please sign in to comment.