Skip to content

V2.0 dev tooltip refactor #1542

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

Merged
merged 19 commits into from
Oct 23, 2015
Merged

V2.0 dev tooltip refactor #1542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ef5cec7
Tooltips now using new lineArray format
tannerlinsley Oct 7, 2015
b835d5f
Tooltip Hooks
tannerlinsley Oct 12, 2015
19a7c57
All tooltip callbacks support arrays for lines, and no drawing invisi…
tannerlinsley Oct 17, 2015
f650445
Use correct function to get `afterBody` lines for tooltip.
etimberg Oct 18, 2015
180209e
Factor out `getLabelForIndex` into each scale so we can return approp…
etimberg Oct 18, 2015
ceaa4ff
Add a helper function to reduce code size
etimberg Oct 18, 2015
7603b3c
Time scales now support passing in data as points. Added this to the …
etimberg Oct 18, 2015
082391e
Update docs a bit for new items. Small updates for tooltip labels.
etimberg Oct 18, 2015
2b057cf
Merge remote-tracking branch 'origin/v2.0-dev' into v2.0-dev-tooltip-…
etimberg Oct 18, 2015
86a52d0
Fix some test failures
etimberg Oct 18, 2015
d0475b8
Down to 3 test failures
etimberg Oct 18, 2015
5495a34
Fix 2 fails due to a bug fix for the scale label colour.
etimberg Oct 18, 2015
bfabac9
Labels are now optional for the time scale.
etimberg Oct 19, 2015
35011e5
Support min and max dates on time scale
tannerlinsley Oct 20, 2015
24e8fe3
Merge remote-tracking branch 'origin/v2.0-dev' into v2.0-dev-tooltip-…
etimberg Oct 22, 2015
854c1af
test fix
etimberg Oct 22, 2015
965d74e
Time scale test fix for optional labels
etimberg Oct 22, 2015
bc41909
Track lastTooltipActive for change animations
tannerlinsley Oct 23, 2015
60f2426
Only use active datasets in the tooltip body
tannerlinsley Oct 23, 2015
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
62 changes: 48 additions & 14 deletions docs/00-Getting-Started.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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