2018-07-30 22:54:39 +02:00
|
|
|
HTMLWidgets.widget({
|
2020-03-04 15:14:02 +01:00
|
|
|
name: "apexcharter",
|
2018-07-30 22:54:39 +02:00
|
|
|
|
2020-03-04 15:14:02 +01:00
|
|
|
type: "output",
|
2018-07-30 22:54:39 +02:00
|
|
|
|
|
|
|
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-04 15:14:02 +01:00
|
|
|
|
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")) {
|
2020-03-04 15:14:02 +01:00
|
|
|
ax_opts.chart.events.dataPointSelection = function(
|
|
|
|
event,
|
|
|
|
chartContext,
|
|
|
|
opts
|
|
|
|
) {
|
|
|
|
var selected = {};
|
|
|
|
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
|
|
|
|
if (typeof opts.selectedDataPoints[i] === "undefined") {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
if (opts.w.config.series[i].hasOwnProperty("name")) {
|
|
|
|
var name = opts.w.config.series[i].name;
|
|
|
|
selected[name] = getSelection(opts, i);
|
|
|
|
} else {
|
|
|
|
selected[i] = getSelection(opts, i);
|
|
|
|
}
|
2020-03-04 10:42:10 +01:00
|
|
|
}
|
2020-03-04 15:14:02 +01:00
|
|
|
if (is_single(opts)) {
|
|
|
|
selected = selected[Object.keys(selected)[0]];
|
|
|
|
}
|
|
|
|
Shiny.setInputValue(x.input.category.inputId, selected);
|
2020-03-03 20:05:03 +01:00
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
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-03-04 15:14:02 +01:00
|
|
|
apexchart.updateSeries(
|
|
|
|
ax_opts.series,
|
|
|
|
x.auto_update.series_animate
|
|
|
|
);
|
2020-02-12 18:21:40 +01:00
|
|
|
if (x.auto_update.update_options) {
|
|
|
|
apexchart.updateOptions(
|
2020-03-04 15:14:02 +01:00
|
|
|
ax_opts,
|
|
|
|
x.auto_update.options_redrawPaths,
|
2020-02-12 18:21:40 +01:00
|
|
|
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
|
|
|
},
|
2020-03-04 15:14:02 +01: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)
|
2020-03-04 15:14:02 +01:00
|
|
|
function get_widget(id) {
|
2018-09-07 18:06:41 +02:00
|
|
|
// Get the HTMLWidgets object
|
|
|
|
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
|
2020-03-04 15:14:02 +01:00
|
|
|
|
2018-09-07 18:06:41 +02:00
|
|
|
// Use the getChart method we created to get the underlying billboard chart
|
2020-03-04 15:14:02 +01:00
|
|
|
var widgetObj;
|
|
|
|
|
|
|
|
if (typeof htmlWidgetsObj != "undefined") {
|
2018-09-07 18:06:41 +02:00
|
|
|
widgetObj = htmlWidgetsObj.getChart();
|
|
|
|
}
|
|
|
|
|
2020-03-04 15:14:02 +01:00
|
|
|
return widgetObj;
|
2018-09-07 18:06:41 +02:00
|
|
|
}
|
|
|
|
|
2020-03-04 15:14:02 +01:00
|
|
|
function is_single(opts) {
|
|
|
|
var typeLabels = ["pie", "radialBar", "donut"];
|
|
|
|
var lab = typeLabels.indexOf(opts.w.config.chart.type) > -1;
|
|
|
|
var single = opts.w.config.series.length == 1;
|
|
|
|
return lab | single;
|
|
|
|
}
|
2018-09-07 18:06:41 +02:00
|
|
|
|
2020-03-04 15:14:02 +01:00
|
|
|
function getSelection(opts, serieIndex) {
|
|
|
|
var typeLabels = ["pie", "radialBar", "donut"];
|
|
|
|
var typeXY = ["scatter", "bubble"];
|
|
|
|
var selected;
|
|
|
|
if (typeLabels.indexOf(opts.w.config.chart.type) > -1) {
|
|
|
|
var labels = opts.w.config.labels;
|
|
|
|
selected = opts.selectedDataPoints[serieIndex].map(function(index) {
|
|
|
|
return labels[index];
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
var data = opts.w.config.series[serieIndex].data;
|
|
|
|
//console.log(opts.selectedDataPoints);
|
|
|
|
selected = opts.selectedDataPoints[serieIndex].map(function(index) {
|
|
|
|
var val = data[index];
|
|
|
|
if (typeXY.indexOf(opts.w.config.chart.type) < 0) {
|
|
|
|
if (val.hasOwnProperty("x")) {
|
|
|
|
val = val.x;
|
|
|
|
} else {
|
|
|
|
val = val[0];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return val;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (typeXY.indexOf(opts.w.config.chart.type) > -1) {
|
|
|
|
selected = {
|
|
|
|
x: selected.map(function(obj) {
|
|
|
|
return obj.x;
|
|
|
|
}),
|
|
|
|
y: selected.map(function(obj) {
|
|
|
|
return obj.y;
|
|
|
|
})
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return selected;
|
|
|
|
}
|
2018-09-07 18:06:41 +02:00
|
|
|
|
|
|
|
if (HTMLWidgets.shinyMode) {
|
2019-07-19 16:00:10 +02:00
|
|
|
// update serie
|
2020-03-04 15:14:02 +01:00
|
|
|
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
|
|
|
|
var chart = get_widget(obj.id);
|
|
|
|
if (typeof chart != "undefined") {
|
|
|
|
chart.updateSeries(
|
|
|
|
[
|
|
|
|
{
|
|
|
|
data: obj.data.newSeries
|
|
|
|
}
|
|
|
|
],
|
|
|
|
obj.data.animate
|
|
|
|
);
|
|
|
|
}
|
2019-07-19 16:00:10 +02:00
|
|
|
});
|
2020-03-04 15:14:02 +01:00
|
|
|
|
2019-07-19 16:00:10 +02:00
|
|
|
// update options
|
2020-03-04 15:14:02 +01:00
|
|
|
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
|
|
|
});
|
|
|
|
}
|
|
|
|
|