Skip to content

Commit

Permalink
Merge pull request #1542 from nnnick/v2.0-dev-tooltip-refactor
Browse files Browse the repository at this point in the history
V2.0 dev tooltip refactor
  • Loading branch information
tannerlinsley committed Oct 23, 2015
2 parents 7a042bc + 60f2426 commit 3a20d11
Show file tree
Hide file tree
Showing 21 changed files with 1,012 additions and 374 deletions.
62 changes: 48 additions & 14 deletions docs/00-Getting-Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,22 @@ Chart.defaults.global = {
// Element defaults defined in element extensions
elements: {},

// Legend template string
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i = 0; i < data.datasets.length; i++){%><li><span style=\"background-color:<%=data.datasets[i].backgroundColor%>\"><%if(data.datasets[i].label){%><%=data.datasets[i].label%><%}%></span></li><%}%></ul>",
// Legend callback function.
// @param {Chart} chart : the chart object to generate a legend for
legendCallback: legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '">');
if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
}
text.push('</span></li>');
}
text.push('</ul>');

return text.join("");
}

animation: {
duration: 1000,
Expand All @@ -128,18 +142,38 @@ Chart.defaults.global = {
caretSize: 8,
cornerRadius: 6,
xOffset: 10,
template: [
'<% if(label){ %>',
'<%=label %>: ',
'<% } %>',
'<%=value %>',
].join(''),
multiTemplate: [
'<%if (datasetLabel){ %>',
'<%=datasetLabel %>: ',
'<% } %>',
'<%=value %>'
].join(''),
// V2.0 introduces callback functions as a replacement for the template engine in v1. The tooltip
// has the following callbacks for providing text. For all functions, 'this' will be the tooltip object
// create from the Chart.Tooltip constructor
//
// All functions are called with the same arguments
// - xLabel : string or array of strings. This is the xDataValue for each item to be displayed in the tooltip
// - yLabel : string or array of strings. This is the yDataValue for each item to be displayed in the tooltip
// - index : number. Data index
// - datasetIndex : number. Dataset index
// - data : object. Data object passed to chart
callbacks: {
beforeTitle: helpers.noop,
title: function(xLabel, yLabel, index, datasetIndex, data) {
// If there are multiple items, use the xLabel of the
return helpers.isArray(xLabel) ? xLabel[0] : xLabel;
},
afterTitle: helpers.noop,

beforeBody: helpers.noop,

beforeLabel: helpers.noop,
label: function(xLabel, yLabel, index, datasetIndex, data) {
return this._data.datasets[datasetIndex].label + ': ' + yLabel;
},
afterLabel: helpers.noop,

afterBody: helpers.noop,

beforeFooter: helpers.noop,
footer: helpers.noop,
afterFooter: helpers.noop,
},
multiKeyBackground: '#fff',
},

Expand Down
164 changes: 164 additions & 0 deletions samples/line-time-point-data.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!doctype html>
<html>

<head>
<title>Time Scale Point Data</title>
<script src="../node_modules/moment/min/moment.min.js"></script>
<script src="../Chart.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<style>
canvas {
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
}
</style>
</head>

<body>
<div style="width:100%;">
<canvas id="canvas" style="width:100%;height:100%"></canvas>
</div>
<br>
<br>
<button id="randomizeData">Randomize Data</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<div>
<h3>Legend</h3>
<div id="legendContainer">
</div>
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var newDate = function(days) {
var date = new Date();
return date.setDate(date.getDate() + days);
};
var newTimestamp = function(days) {
return Date.now() - days * 100000;
};

var config = {
type: 'line',
data: {
datasets: [{
label: "Dataset with point data",
data: [{
x: "12/31/2014 06:00",
y: randomScalingFactor()
}, {
x: "01/04/2015 13:00",
y: randomScalingFactor()
}, {
x: "01/07/2015 01:15",
y: randomScalingFactor()
}, {
x: "01/15/2015 01:15",
y: randomScalingFactor()
}],
fill: false
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
type: "time",
display: true,
time: {
format: 'MM/DD/YYYY HH:mm',
// round: 'day'
},
scaleLabel: {
show: true,
labelString: 'Date'
}
}, ],
yAxes: [{
display: true,
scaleLabel: {
show: true,
labelString: 'value'
}
}]
},
elements: {
line: {
tension: 0.3
}
},
}
};

$.each(config.data.datasets, function(i, dataset) {
dataset.borderColor = randomColor(0.4);
dataset.backgroundColor = randomColor(0.5);
dataset.pointBorderColor = randomColor(0.7);
dataset.pointBackgroundColor = randomColor(0.5);
dataset.pointBorderWidth = 1;
});

console.log(config.data);

window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);

updateLegend();
};

function updateLegend() {
$legendContainer = $('#legendContainer');
$legendContainer.empty();
$legendContainer.append(window.myLine.generateLegend());
}

$('#randomizeData').click(function() {
$.each(config.data.datasets, function(i, dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});

window.myLine.update();
updateLegend();
});

$('#addData').click(function() {
if (config.data.datasets.length > 0) {
var newTime = myLine.scales['x-axis-0'].labelMoments[0][myLine.scales['x-axis-0'].labelMoments[0].length - 1]
.clone()
.add(1, 'day')
.format('MM/DD/YYYY HH:mm');

for (var index = 0; index < config.data.datasets.length; ++index) {
config.data.datasets[index].data.push({
x: newTime,
y: randomScalingFactor()
});
}

window.myLine.update();
updateLegend();
}
});

$('#removeData').click(function() {
config.data.datasets.forEach(function(dataset, datasetIndex) {
dataset.data.pop();
});

window.myLine.update();
updateLegend();
});
</script>
</body>

</html>
16 changes: 16 additions & 0 deletions samples/line-time-scale.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,22 @@ <h3>Legend</h3>
}, {
label: "My Second dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
}, {
label: "Dataset with point data",
data: [{
x: "12/31/2014 06:00",
y: randomScalingFactor()
}, {
x: "01/04/2015 13:00",
y: randomScalingFactor()
}, {
x: "01/07/2015 01:15",
y: randomScalingFactor()
}, {
x: "01/15/2015 01:15",
y: randomScalingFactor()
}],
fill: false
}]
},
options: {
Expand Down
31 changes: 30 additions & 1 deletion samples/line.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</head>

<body>
<div style="width:50%;">
<div style="width:100%;">
<canvas id="canvas" style="width:100%;height:100%"></canvas>
</div>
<br>
Expand Down Expand Up @@ -59,6 +59,35 @@ <h3>Legend</h3>
},
options: {
responsive: true,
tooltips: {
mode: 'label',
callbacks: {
// beforeTitle: function() {
// return '...beforeTitle';
// },
// afterTitle: function() {
// return '...afterTitle';
// },
// beforeBody: function() {
// return '...beforeBody';
// },
// afterBody: function() {
// return '...afterBody';
// },
// beforeFooter: function() {
// return '...beforeFooter';
// },
// footer: function() {
// return 'Footer';
// },
// afterFooter: function() {
// return '...afterFooter';
// },
}
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
Expand Down
Loading

0 comments on commit 3a20d11

Please sign in to comment.