From 11335839fd6cd2f9326d1a31b9151757e572d521 Mon Sep 17 00:00:00 2001 From: pvictor Date: Wed, 18 Mar 2020 18:28:51 +0100 Subject: [PATCH] reorg js --- inst/htmlwidgets/apexcharter.js | 317 ++++++++++++++++---------------- 1 file changed, 163 insertions(+), 154 deletions(-) diff --git a/inst/htmlwidgets/apexcharter.js b/inst/htmlwidgets/apexcharter.js index bbb8a70..f4a319e 100644 --- a/inst/htmlwidgets/apexcharter.js +++ b/inst/htmlwidgets/apexcharter.js @@ -1,165 +1,26 @@ -HTMLWidgets.widget({ - name: "apexcharter", +/*! + * + * htmlwidgets bindings for ApexCharts + * https://github.com/dreamRs/apexcharter + * + */ - type: "output", - - 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 - } - }); - } - }; - } -}); +/// Functions // 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") { + if (typeof htmlWidgetsObj !== "undefined") { widgetObj = htmlWidgetsObj.getChart(); } - return widgetObj; } function is_single(options) { var typeLabels = ["pie", "radialBar", "donut"]; 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; } @@ -218,17 +79,17 @@ function getSelection(chartContext, selectedDataPoints, serieIndex) { function getYaxis(axis) { 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; if (axis.yaxis.hasOwnProperty("min")) { y_axis = axis.yaxis; } else { 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; } - 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; } } @@ -237,18 +98,166 @@ function getYaxis(axis) { function getXaxis(axis) { var xzoom = { min: null, max: null }; - if (typeof axis.xaxis != "undefined") { + if (typeof axis.xaxis !== "undefined") { 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; } - 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; } } 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) { // update serie Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {