feat: added chart revealjs plugin
This commit is contained in:
parent
c208bb5179
commit
47389a273f
@ -25,6 +25,7 @@
|
||||
<script src="plugin/notes/notes.js"></script>
|
||||
<script src="plugin/markdown/markdown.js"></script>
|
||||
<script src="plugin/highlight/highlight.js"></script>
|
||||
<script src="plugin/chart/plugin.js"></script>
|
||||
<script>
|
||||
// More info about initialization & config:
|
||||
// - https://revealjs.com/initialization/
|
||||
@ -33,7 +34,7 @@
|
||||
hash: true,
|
||||
|
||||
// Learn about plugins: https://revealjs.com/plugins/
|
||||
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
|
||||
plugins: [ RevealChart, RevealMarkdown, RevealHighlight, RevealNotes ]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
198
plugin/chart/plugin.js
Normal file
198
plugin/chart/plugin.js
Normal file
@ -0,0 +1,198 @@
|
||||
/*****************************************************************
|
||||
** Author: Asvin Goel, goel@telematique.eu
|
||||
** Fixed for Reveal4: kotborealis@awooo.ru
|
||||
**
|
||||
** A plugin for reveal.js allowing to integrate Chart.js
|
||||
**
|
||||
** Version: 1.3.1
|
||||
**
|
||||
** License: MIT license (see LICENSE.md)
|
||||
**
|
||||
******************************************************************/
|
||||
|
||||
/**
|
||||
* Reveal Plugin
|
||||
* https://revealjs.com/creating-plugins/
|
||||
*/
|
||||
window.RevealChart = window.RevealChart || {
|
||||
id: 'RevealChart',
|
||||
init: function(deck) {
|
||||
initChart(deck);
|
||||
},
|
||||
update: function(canvas, idx, data) { update(canvas, idx, data); },
|
||||
};
|
||||
|
||||
const initChart = function(Reveal){
|
||||
function parseJSON(str) {
|
||||
var json;
|
||||
try {
|
||||
json = JSON.parse(str);
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
return json;
|
||||
}
|
||||
|
||||
/*
|
||||
* Recursively merge properties of two objects
|
||||
*/
|
||||
function mergeRecursive(obj1, obj2) {
|
||||
|
||||
for (var p in obj2) {
|
||||
try {
|
||||
// Property in destination object set; update its value.
|
||||
if ( obj1[p] !== null && typeof obj1[p] === 'object' && typeof obj2[p] === 'object' ) {
|
||||
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
|
||||
}
|
||||
else {
|
||||
obj1[p] = obj2[p];
|
||||
}
|
||||
} catch(e) {
|
||||
// Property in destination object not set; create it and set its value.
|
||||
obj1[p] = obj2[p];
|
||||
}
|
||||
}
|
||||
|
||||
return obj1;
|
||||
}
|
||||
|
||||
|
||||
function createChart(canvas, CSV, comments) {
|
||||
canvas.chart = null;
|
||||
var ctx = canvas.getContext("2d");
|
||||
var chartOptions = { responsive: true, maintainAspectRatio: false };
|
||||
var chartData = { labels: null, datasets: []};
|
||||
if ( comments !== null ) for (var j = 0; j < comments.length; j++ ){
|
||||
comments[j] = comments[j].replace(/<!--/,'');
|
||||
comments[j] = comments[j].replace(/-->/,'');
|
||||
var config = parseJSON(comments[j]);
|
||||
if ( config ) {
|
||||
if ( config.data ) {
|
||||
mergeRecursive( chartData, config.data);
|
||||
}
|
||||
if ( config.options ) {
|
||||
mergeRecursive( chartOptions, config.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var lines = CSV.split('\n').filter(function(v){return v!==''});
|
||||
// if labels are not defined, get them from first line
|
||||
if ( chartData.labels === null && lines.length > 0 ) {
|
||||
chartData.labels = lines[0].split(',');
|
||||
chartData.labels.shift();
|
||||
lines.shift();
|
||||
}
|
||||
// get data values
|
||||
for (var j = 0; j < lines.length; j++ ){
|
||||
if (chartData.datasets.length <= j) chartData.datasets[j] = {};
|
||||
chartData.datasets[j].data = lines[j].split(','); //.filter(function(v){return v!==''});
|
||||
chartData.datasets[j].label = chartData.datasets[j].data[0];
|
||||
chartData.datasets[j].data.shift();
|
||||
for (var k = 0; k < chartData.datasets[j].data.length; k++ ){
|
||||
chartData.datasets[j].data[k] = Number(chartData.datasets[j].data[k]);
|
||||
}
|
||||
}
|
||||
|
||||
// add chart options
|
||||
var config = chartConfig[canvas.getAttribute("data-chart")];
|
||||
if ( config ) {
|
||||
for (var j = 0; j < chartData.datasets.length; j++ ){
|
||||
for (var attrname in config) {
|
||||
if ( !chartData.datasets[j][attrname] ) {
|
||||
chartData.datasets[j][attrname] = config[attrname][j%config[attrname].length];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
canvas.chart = new Chart(ctx, { type: canvas.getAttribute("data-chart"), data: chartData, options: chartOptions });
|
||||
|
||||
}
|
||||
|
||||
function updateChart(canvas, idx, data) {
|
||||
canvas.chart.data.datasets[idx].data = data;
|
||||
recreateChart( canvas );
|
||||
}
|
||||
|
||||
var initializeCharts = function(){
|
||||
// Get all canvases
|
||||
var canvases = document.querySelectorAll("canvas");
|
||||
for (var i = 0; i < canvases.length; i++ ){
|
||||
// check if canvas has data-chart attribute
|
||||
if ( canvases[i].hasAttribute("data-chart") ){
|
||||
var CSV = canvases[i].innerHTML.trim();
|
||||
var comments = CSV.match(/<!--[\s\S]*?-->/g);
|
||||
CSV = CSV.replace(/<!--[\s\S]*?-->/g,'').replace(/^\s*\n/gm, "")
|
||||
if ( ! canvases[i].hasAttribute("data-chart-src") ) {
|
||||
createChart(canvases[i], CSV, comments);
|
||||
}
|
||||
else {
|
||||
var canvas = canvases[i];
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onload = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
createChart(canvas, xhr.responseText, comments);
|
||||
}
|
||||
else {
|
||||
console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") +". ReadyState: " + xhr.readyState + ", Status: " + xhr.status);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.open( 'GET', canvas.getAttribute("data-chart-src"), false );
|
||||
try {
|
||||
xhr.send();
|
||||
}
|
||||
catch ( error ) {
|
||||
console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + error );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function recreateChart(canvas) {
|
||||
// clear data to redraw animation
|
||||
var data = canvas.chart.data.datasets;
|
||||
canvas.chart.data.datasets = [];
|
||||
canvas.chart.update();
|
||||
canvas.style.visibility = "hidden";
|
||||
setTimeout( function(canvas, data) {
|
||||
canvas.chart.data.datasets = data;
|
||||
canvas.style.visibility = "visible";
|
||||
canvas.chart.update();
|
||||
}, 500, canvas, data); // wait for slide transition to re-add data and animation
|
||||
/*
|
||||
var config = canvas.chart.config;
|
||||
canvas.chart.destroy();
|
||||
setTimeout( function() { canvas.chart = new Chart(canvas, config);}, 500); // wait for slide transition
|
||||
*/
|
||||
}
|
||||
|
||||
// check if chart option is given or not
|
||||
var chartConfig = Reveal.getConfig().chart || {};
|
||||
|
||||
// set global chart options
|
||||
var config = chartConfig.defaults;
|
||||
if ( config ) {
|
||||
mergeRecursive(Chart.defaults, config);
|
||||
}
|
||||
|
||||
Reveal.addEventListener('ready', function(){
|
||||
initializeCharts();
|
||||
Reveal.addEventListener('slidechanged', function(){
|
||||
var canvases = Reveal.getCurrentSlide().querySelectorAll("canvas[data-chart]");
|
||||
for (var i = 0; i < canvases.length; i++ ){
|
||||
if ( canvases[i].chart && canvases[i].chart.config.options.animation !== false ) {
|
||||
recreateChart( canvases[i] );
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
this.update = updateChart;
|
||||
|
||||
return this;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user