reorg js
This commit is contained in:
parent
8238c0709e
commit
11335839fd
|
@ -1,165 +1,26 @@
|
||||||
HTMLWidgets.widget({
|
/*!
|
||||||
name: "apexcharter",
|
*
|
||||||
|
* htmlwidgets bindings for ApexCharts
|
||||||
|
* https://github.com/dreamRs/apexcharter
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
type: "output",
|
/// Functions
|
||||||
|
|
||||||
factory: function(el, width, height) {
|
|
||||||
var ax_opts;
|
|
||||||
var apexchart = null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
renderValue: function(x) {
|
|
||||||
// Global options
|
|
||||||
ax_opts = x.ax_opts;
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
if (typeof ax_opts.chart === "undefined") {
|
|
||||||
ax_opts.chart = {};
|
|
||||||
}
|
|
||||||
ax_opts.chart.width = width;
|
|
||||||
ax_opts.chart.height = height;
|
|
||||||
if (!ax_opts.chart.hasOwnProperty("parentHeightOffset")) {
|
|
||||||
ax_opts.chart.parentHeightOffset = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
|
|
||||||
if (!ax_opts.hasOwnProperty("chart")) {
|
|
||||||
ax_opts.chart = {};
|
|
||||||
}
|
|
||||||
if (!ax_opts.chart.hasOwnProperty("events")) {
|
|
||||||
ax_opts.chart.events = {};
|
|
||||||
}
|
|
||||||
if (x.shinyEvents.hasOwnProperty("click")) {
|
|
||||||
ax_opts.chart.events.dataPointSelection = function(
|
|
||||||
event,
|
|
||||||
chartContext,
|
|
||||||
opts
|
|
||||||
) {
|
|
||||||
var options = opts;
|
|
||||||
var nonEmpty = opts.selectedDataPoints.filter(function(el) {
|
|
||||||
return el !== null && el.length > 0;
|
|
||||||
});
|
|
||||||
console.log(chartContext);
|
|
||||||
if (nonEmpty.length > 0) {
|
|
||||||
var select = {};
|
|
||||||
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
|
|
||||||
if (typeof opts.selectedDataPoints[i] === "undefined") {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
var selection = getSelection(chartContext, options.selectedDataPoints, i);
|
|
||||||
if (selection !== null) {
|
|
||||||
if (opts.w.config.series[i].hasOwnProperty("name")) {
|
|
||||||
var name = opts.w.config.series[i].name;
|
|
||||||
select[name] = selection;
|
|
||||||
} else {
|
|
||||||
select[i] = selection;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (is_single(options)) {
|
|
||||||
select = select[Object.keys(select)[0]];
|
|
||||||
}
|
|
||||||
Shiny.setInputValue(
|
|
||||||
x.shinyEvents.click.inputId + ":apex_click",
|
|
||||||
{value: select, datetime: is_datetime(chartContext)}
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (x.shinyEvents.hasOwnProperty("zoomed")) {
|
|
||||||
ax_opts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
|
|
||||||
var id = x.shinyEvents.zoomed.inputId;
|
|
||||||
if (is_datetime(chartContext)) {
|
|
||||||
id = id + ":apex_datetime";
|
|
||||||
}
|
|
||||||
Shiny.setInputValue(id, {
|
|
||||||
x: getXaxis(xaxis),
|
|
||||||
y: getYaxis(xaxis)
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (x.shinyEvents.hasOwnProperty("selection")) {
|
|
||||||
ax_opts.chart.events.selection = function(chartContext, xaxis, yaxis) {
|
|
||||||
console.log(xaxis);
|
|
||||||
var id = x.shinyEvents.selection.inputId;
|
|
||||||
if (is_datetime(chartContext)) {
|
|
||||||
id = id + ":apex_datetime";
|
|
||||||
}
|
|
||||||
var selectionValue;
|
|
||||||
if (x.shinyEvents.selection.type == "x") {
|
|
||||||
selectionValue = {x: xaxis.xaxis};
|
|
||||||
} else if (x.shinyEvents.selection.type == "xy") {
|
|
||||||
selectionValue = {x: xaxis.xaxis, y: getYaxis(xaxis)};
|
|
||||||
} else if (x.shinyEvents.selection.type == "y") {
|
|
||||||
selectionValue = {y: getYaxis(xaxis)};
|
|
||||||
}
|
|
||||||
Shiny.setInputValue(id, selectionValue);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate or update chart
|
|
||||||
if (apexchart === null) {
|
|
||||||
apexchart = new ApexCharts(el, ax_opts);
|
|
||||||
apexchart.render();
|
|
||||||
} else {
|
|
||||||
if (x.auto_update) {
|
|
||||||
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
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
apexchart.destroy();
|
|
||||||
apexchart = new ApexCharts(el, ax_opts);
|
|
||||||
apexchart.render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getChart: function() {
|
|
||||||
return apexchart;
|
|
||||||
},
|
|
||||||
|
|
||||||
resize: function(width, height) {
|
|
||||||
apexchart.updateOptions({
|
|
||||||
chart: {
|
|
||||||
width: width,
|
|
||||||
height: height
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
|
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
|
||||||
function get_widget(id) {
|
function get_widget(id) {
|
||||||
// Get the HTMLWidgets object
|
|
||||||
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
|
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
|
||||||
|
|
||||||
// Use the getChart method we created to get the underlying billboard chart
|
|
||||||
var widgetObj;
|
var widgetObj;
|
||||||
|
if (typeof htmlWidgetsObj !== "undefined") {
|
||||||
if (typeof htmlWidgetsObj != "undefined") {
|
|
||||||
widgetObj = htmlWidgetsObj.getChart();
|
widgetObj = htmlWidgetsObj.getChart();
|
||||||
}
|
}
|
||||||
|
|
||||||
return widgetObj;
|
return widgetObj;
|
||||||
}
|
}
|
||||||
|
|
||||||
function is_single(options) {
|
function is_single(options) {
|
||||||
var typeLabels = ["pie", "radialBar", "donut"];
|
var typeLabels = ["pie", "radialBar", "donut"];
|
||||||
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
|
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
|
||||||
var single = options.w.config.series.length == 1;
|
var single = options.w.config.series.length === 1;
|
||||||
return lab | single;
|
return lab | single;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -218,17 +79,17 @@ function getSelection(chartContext, selectedDataPoints, serieIndex) {
|
||||||
|
|
||||||
function getYaxis(axis) {
|
function getYaxis(axis) {
|
||||||
var yzoom = { min: null, max: null };
|
var yzoom = { min: null, max: null };
|
||||||
if (typeof axis.yaxis != "undefined" && axis.yaxis !== null) {
|
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
|
||||||
var y_axis;
|
var y_axis;
|
||||||
if (axis.yaxis.hasOwnProperty("min")) {
|
if (axis.yaxis.hasOwnProperty("min")) {
|
||||||
y_axis = axis.yaxis;
|
y_axis = axis.yaxis;
|
||||||
} else {
|
} else {
|
||||||
y_axis = axis.yaxis[0];
|
y_axis = axis.yaxis[0];
|
||||||
}
|
}
|
||||||
if (y_axis.hasOwnProperty("min") && typeof y_axis.min != "undefined") {
|
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
|
||||||
yzoom.min = y_axis.min;
|
yzoom.min = y_axis.min;
|
||||||
}
|
}
|
||||||
if (y_axis.hasOwnProperty("max") && typeof y_axis.max != "undefined") {
|
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
|
||||||
yzoom.max = y_axis.max;
|
yzoom.max = y_axis.max;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -237,18 +98,166 @@ function getYaxis(axis) {
|
||||||
|
|
||||||
function getXaxis(axis) {
|
function getXaxis(axis) {
|
||||||
var xzoom = { min: null, max: null };
|
var xzoom = { min: null, max: null };
|
||||||
if (typeof axis.xaxis != "undefined") {
|
if (typeof axis.xaxis !== "undefined") {
|
||||||
var x_axis = axis.xaxis;
|
var x_axis = axis.xaxis;
|
||||||
if (x_axis.hasOwnProperty("min") && typeof x_axis.min != "undefined") {
|
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
|
||||||
xzoom.min = x_axis.min;
|
xzoom.min = x_axis.min;
|
||||||
}
|
}
|
||||||
if (x_axis.hasOwnProperty("max") && typeof x_axis.max != "undefined") {
|
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
|
||||||
xzoom.max = x_axis.max;
|
xzoom.max = x_axis.max;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return xzoom;
|
return xzoom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Widget
|
||||||
|
|
||||||
|
HTMLWidgets.widget({
|
||||||
|
name: "apexcharter",
|
||||||
|
|
||||||
|
type: "output",
|
||||||
|
|
||||||
|
factory: function(el, width, height) {
|
||||||
|
var axOpts;
|
||||||
|
var apexchart = null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
renderValue: function(x) {
|
||||||
|
// Global options
|
||||||
|
axOpts = x.ax_opts;
|
||||||
|
|
||||||
|
// Sizing
|
||||||
|
if (typeof axOpts.chart === "undefined") {
|
||||||
|
axOpts.chart = {};
|
||||||
|
}
|
||||||
|
axOpts.chart.width = width;
|
||||||
|
axOpts.chart.height = height;
|
||||||
|
if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
|
||||||
|
axOpts.chart.parentHeightOffset = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
|
||||||
|
if (!axOpts.hasOwnProperty("chart")) {
|
||||||
|
axOpts.chart = {};
|
||||||
|
}
|
||||||
|
if (!axOpts.chart.hasOwnProperty("events")) {
|
||||||
|
axOpts.chart.events = {};
|
||||||
|
}
|
||||||
|
if (x.shinyEvents.hasOwnProperty("click")) {
|
||||||
|
axOpts.chart.events.dataPointSelection = function(
|
||||||
|
event,
|
||||||
|
chartContext,
|
||||||
|
opts
|
||||||
|
) {
|
||||||
|
var options = opts;
|
||||||
|
var nonEmpty = opts.selectedDataPoints.filter(function(el) {
|
||||||
|
return el !== null && el.length > 0;
|
||||||
|
});
|
||||||
|
if (nonEmpty.length > 0) {
|
||||||
|
var select = {};
|
||||||
|
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
|
||||||
|
if (typeof opts.selectedDataPoints[i] === "undefined") {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
var selection = getSelection(
|
||||||
|
chartContext,
|
||||||
|
options.selectedDataPoints,
|
||||||
|
i
|
||||||
|
);
|
||||||
|
if (selection !== null) {
|
||||||
|
if (opts.w.config.series[i].hasOwnProperty("name")) {
|
||||||
|
var name = opts.w.config.series[i].name;
|
||||||
|
select[name] = selection;
|
||||||
|
} else {
|
||||||
|
select[i] = selection;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (is_single(options)) {
|
||||||
|
select = select[Object.keys(select)[0]];
|
||||||
|
}
|
||||||
|
Shiny.setInputValue(
|
||||||
|
x.shinyEvents.click.inputId + ":apex_click",
|
||||||
|
{ value: select, datetime: is_datetime(chartContext) }
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (x.shinyEvents.hasOwnProperty("zoomed")) {
|
||||||
|
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
|
||||||
|
var id = x.shinyEvents.zoomed.inputId;
|
||||||
|
if (is_datetime(chartContext)) {
|
||||||
|
id = id + ":apex_datetime";
|
||||||
|
}
|
||||||
|
Shiny.setInputValue(id, {
|
||||||
|
x: getXaxis(xaxis),
|
||||||
|
y: getYaxis(xaxis)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (x.shinyEvents.hasOwnProperty("selection")) {
|
||||||
|
axOpts.chart.events.selection = function(
|
||||||
|
chartContext,
|
||||||
|
xaxis,
|
||||||
|
yaxis
|
||||||
|
) {
|
||||||
|
var id = x.shinyEvents.selection.inputId;
|
||||||
|
if (is_datetime(chartContext)) {
|
||||||
|
id = id + ":apex_datetime";
|
||||||
|
}
|
||||||
|
var selectionValue;
|
||||||
|
if (x.shinyEvents.selection.type === "x") {
|
||||||
|
selectionValue = { x: xaxis.xaxis };
|
||||||
|
} else if (x.shinyEvents.selection.type === "xy") {
|
||||||
|
selectionValue = { x: xaxis.xaxis, y: getYaxis(xaxis) };
|
||||||
|
} else if (x.shinyEvents.selection.type === "y") {
|
||||||
|
selectionValue = { y: getYaxis(xaxis) };
|
||||||
|
}
|
||||||
|
Shiny.setInputValue(id, selectionValue);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate or update chart
|
||||||
|
if (apexchart === null) {
|
||||||
|
apexchart = new ApexCharts(el, axOpts);
|
||||||
|
apexchart.render();
|
||||||
|
} else {
|
||||||
|
if (x.auto_update) {
|
||||||
|
apexchart.updateSeries(axOpts.series, x.auto_update.series_animate);
|
||||||
|
if (x.auto_update.update_options) {
|
||||||
|
apexchart.updateOptions(
|
||||||
|
axOpts,
|
||||||
|
x.auto_update.options_redrawPaths,
|
||||||
|
x.auto_update.options_animate
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
apexchart.destroy();
|
||||||
|
apexchart = new ApexCharts(el, axOpts);
|
||||||
|
apexchart.render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getChart: function() {
|
||||||
|
return apexchart;
|
||||||
|
},
|
||||||
|
|
||||||
|
resize: function(width, height) {
|
||||||
|
apexchart.updateOptions({
|
||||||
|
chart: {
|
||||||
|
width: width,
|
||||||
|
height: height
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
if (HTMLWidgets.shinyMode) {
|
if (HTMLWidgets.shinyMode) {
|
||||||
// update serie
|
// update serie
|
||||||
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
|
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
|
||||||
|
|
Loading…
Reference in New Issue