2018-07-30 22:54:39 +02:00
|
|
|
HTMLWidgets.widget({
|
|
|
|
|
|
|
|
name: 'apexcharter',
|
|
|
|
|
|
|
|
type: 'output',
|
|
|
|
|
|
|
|
factory: function(el, width, height) {
|
|
|
|
|
2019-02-14 17:40:03 +01:00
|
|
|
var ax_opts;
|
2019-02-14 17:17:30 +01:00
|
|
|
var apexchart = null;
|
2018-07-30 22:54:39 +02:00
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
renderValue: function(x) {
|
|
|
|
|
|
|
|
|
|
|
|
// Global options
|
|
|
|
ax_opts = x.ax_opts;
|
|
|
|
|
|
|
|
// Sizing
|
2020-03-03 20:05:03 +01:00
|
|
|
if (typeof ax_opts.chart === "undefined") {
|
2018-08-01 23:02:29 +02:00
|
|
|
ax_opts.chart = {};
|
|
|
|
}
|
2018-07-30 22:54:39 +02:00
|
|
|
ax_opts.chart.width = width;
|
|
|
|
ax_opts.chart.height = height;
|
2020-03-03 20:05:03 +01:00
|
|
|
if (!ax_opts.chart.hasOwnProperty("parentHeightOffset")) {
|
2019-08-20 14:27:40 +02:00
|
|
|
ax_opts.chart.parentHeightOffset = 0;
|
|
|
|
}
|
2020-03-03 20:05:03 +01:00
|
|
|
|
|
|
|
if (x.hasOwnProperty("input") & HTMLWidgets.shinyMode) {
|
|
|
|
if (!ax_opts.hasOwnProperty("chart")) {
|
|
|
|
ax_opts.chart = {};
|
|
|
|
}
|
|
|
|
if (!ax_opts.chart.hasOwnProperty("events")) {
|
|
|
|
ax_opts.chart.events = {};
|
|
|
|
}
|
|
|
|
if (x.input.hasOwnProperty("category")) {
|
|
|
|
ax_opts.chart.events.dataPointSelection = function(event, chartContext, opts) {
|
|
|
|
console.log(opts);
|
|
|
|
Shiny.setInputValue(
|
|
|
|
x.input.category.inputId,
|
|
|
|
opts.w.config.series[opts.seriesIndex].data[opts.selectedDataPoints[0]].x
|
|
|
|
);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
2018-07-30 22:54:39 +02:00
|
|
|
|
2019-02-14 17:17:30 +01:00
|
|
|
// Generate or update chart
|
|
|
|
if (apexchart === null) {
|
2020-02-12 11:57:24 +01:00
|
|
|
apexchart = new ApexCharts(el, ax_opts);
|
2019-02-14 17:17:30 +01:00
|
|
|
apexchart.render();
|
|
|
|
} else {
|
2019-02-15 23:33:40 +01:00
|
|
|
if (x.auto_update) {
|
2020-02-12 18:21:40 +01:00
|
|
|
apexchart.updateSeries(ax_opts.series, x.auto_update.series_animate);
|
|
|
|
if (x.auto_update.update_options) {
|
|
|
|
apexchart.updateOptions(
|
|
|
|
ax_opts,
|
|
|
|
x.auto_update.options_redrawPaths,
|
|
|
|
x.auto_update.options_animate
|
|
|
|
);
|
2020-02-12 11:57:24 +01:00
|
|
|
}
|
2019-02-15 23:33:40 +01:00
|
|
|
} else {
|
|
|
|
apexchart.destroy();
|
2020-02-12 11:57:24 +01:00
|
|
|
apexchart = new ApexCharts(el, ax_opts);
|
2019-02-15 23:33:40 +01:00
|
|
|
apexchart.render();
|
|
|
|
}
|
2019-02-14 17:17:30 +01:00
|
|
|
}
|
|
|
|
|
2018-07-30 22:54:39 +02:00
|
|
|
|
|
|
|
},
|
2018-09-07 18:06:41 +02:00
|
|
|
|
|
|
|
getChart: function(){
|
2019-02-14 17:40:03 +01:00
|
|
|
return apexchart;
|
2018-09-07 18:06:41 +02:00
|
|
|
},
|
2018-07-30 22:54:39 +02:00
|
|
|
|
|
|
|
resize: function(width, height) {
|
2019-02-14 17:40:03 +01:00
|
|
|
apexchart.updateOptions({
|
2018-07-30 22:54:39 +02:00
|
|
|
chart: {
|
|
|
|
width: width,
|
|
|
|
height: height
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
2018-09-07 18:06:41 +02:00
|
|
|
|
|
|
|
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
|
|
|
|
function get_widget(id){
|
|
|
|
|
|
|
|
// Get the HTMLWidgets object
|
|
|
|
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
|
|
|
|
|
|
|
|
// Use the getChart method we created to get the underlying billboard chart
|
|
|
|
var widgetObj ;
|
|
|
|
|
|
|
|
if (typeof htmlWidgetsObj != 'undefined') {
|
|
|
|
widgetObj = htmlWidgetsObj.getChart();
|
|
|
|
}
|
|
|
|
|
|
|
|
return(widgetObj);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (HTMLWidgets.shinyMode) {
|
2019-07-19 16:00:10 +02:00
|
|
|
// update serie
|
2018-09-09 22:09:05 +02:00
|
|
|
Shiny.addCustomMessageHandler('update-apexchart-series',
|
2018-09-07 18:06:41 +02:00
|
|
|
function(obj) {
|
2018-09-09 22:09:05 +02:00
|
|
|
var chart = get_widget(obj.id);
|
2018-09-07 18:06:41 +02:00
|
|
|
if (typeof chart != 'undefined') {
|
2019-07-19 16:00:10 +02:00
|
|
|
chart.updateSeries([{
|
|
|
|
data: obj.data.newSeries
|
|
|
|
}], obj.data.animate);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// update options
|
|
|
|
Shiny.addCustomMessageHandler('update-apexchart-options',
|
|
|
|
function(obj) {
|
|
|
|
var chart = get_widget(obj.id);
|
|
|
|
if (typeof chart != 'undefined') {
|
|
|
|
chart.updateOptions(obj.data.options);
|
2018-09-07 18:06:41 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|