-
diff --git a/client/app/visualizations/chart/chart.html b/client/app/visualizations/chart/chart.html
deleted file mode 100644
index 8c2cbedc34..0000000000
--- a/client/app/visualizations/chart/chart.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js
index f4da59f3c9..d8a3e2fed5 100644
--- a/client/app/visualizations/chart/index.js
+++ b/client/app/visualizations/chart/index.js
@@ -6,9 +6,10 @@ import { registerVisualization } from '@/visualizations';
import { clientConfig } from '@/services/auth';
import ColorPalette from '@/visualizations/ColorPalette';
import getChartData from './getChartData';
-import template from './chart.html';
import editorTemplate from './chart-editor.html';
+import Renderer from './Renderer';
+
const DEFAULT_OPTIONS = {
globalSeriesType: 'column',
sortX: true,
@@ -71,26 +72,6 @@ function initEditorForm(options, columns) {
return result;
}
-const ChartRenderer = {
- template,
- bindings: {
- data: '<',
- options: '<',
- },
- controller($scope) {
- this.chartSeries = [];
-
- const update = () => {
- if (this.data) {
- this.chartSeries = getChartData(this.data.rows, this.options);
- }
- };
-
- $scope.$watch('$ctrl.data', update);
- $scope.$watch('$ctrl.options', update, true);
- },
-};
-
const ChartEditor = {
template: editorTemplate,
bindings: {
@@ -306,7 +287,6 @@ const ChartEditor = {
};
export default function init(ngModule) {
- ngModule.component('chartRenderer', ChartRenderer);
ngModule.component('chartEditor', ChartEditor);
ngModule.run(($injector) => {
@@ -314,11 +294,21 @@ export default function init(ngModule) {
type: 'CHART',
name: 'Chart',
isDefault: true,
- getOptions: options => merge({}, DEFAULT_OPTIONS, {
- showDataLabels: options.globalSeriesType === 'pie',
- dateTimeFormat: clientConfig.dateTimeFormat,
- }, options),
- Renderer: angular2react('chartRenderer', ChartRenderer, $injector),
+ getOptions: (options) => {
+ const result = merge({}, DEFAULT_OPTIONS, {
+ showDataLabels: options.globalSeriesType === 'pie',
+ dateTimeFormat: clientConfig.dateTimeFormat,
+ }, options);
+
+ // Backward compatibility
+ if (['normal', 'percent'].indexOf(result.series.stacking) >= 0) {
+ result.series.percentValues = result.series.stacking === 'percent';
+ result.series.stacking = 'stack';
+ }
+
+ return result;
+ },
+ Renderer,
Editor: angular2react('chartEditor', ChartEditor, $injector),
defaultColumns: 3,
diff --git a/client/app/visualizations/chart/plotly/customChartUtils.js b/client/app/visualizations/chart/plotly/customChartUtils.js
new file mode 100644
index 0000000000..a6970100e0
--- /dev/null
+++ b/client/app/visualizations/chart/plotly/customChartUtils.js
@@ -0,0 +1,40 @@
+import { each } from 'lodash';
+import { normalizeValue } from './utils';
+
+export function prepareCustomChartData(series) {
+ const x = [];
+ const ys = {};
+
+ each(series, ({ name, data }) => {
+ ys[name] = [];
+ each(data, (point) => {
+ x.push(normalizeValue(point.x));
+ ys[name].push(normalizeValue(point.y));
+ });
+ });
+
+ return { x, ys };
+}
+
+export function createCustomChartRenderer(code, logErrorsToConsole = false) {
+ // Create a function from custom code; catch syntax errors
+ let render = () => {};
+ try {
+ render = new Function('x, ys, element, Plotly', code); // eslint-disable-line no-new-func
+ } catch (err) {
+ if (logErrorsToConsole) {
+ console.log(`Error while executing custom graph: ${err}`); // eslint-disable-line no-console
+ }
+ }
+
+ // Return function that will invoke custom code; catch runtime errors
+ return (x, ys, element, Plotly) => {
+ try {
+ render(x, ys, element, Plotly);
+ } catch (err) {
+ if (logErrorsToConsole) {
+ console.log(`Error while executing custom graph: ${err}`); // eslint-disable-line no-console
+ }
+ }
+ };
+}
diff --git a/client/app/visualizations/chart/plotly/index.js b/client/app/visualizations/chart/plotly/index.js
index 19d6f87e13..3aa3ad382c 100644
--- a/client/app/visualizations/chart/plotly/index.js
+++ b/client/app/visualizations/chart/plotly/index.js
@@ -1,5 +1,3 @@
-import { each, debounce, isArray, isObject } from 'lodash';
-
import Plotly from 'plotly.js/lib/core';
import bar from 'plotly.js/lib/bar';
import pie from 'plotly.js/lib/pie';
@@ -7,132 +5,23 @@ import histogram from 'plotly.js/lib/histogram';
import box from 'plotly.js/lib/box';
import heatmap from 'plotly.js/lib/heatmap';
-import { normalizeValue } from './utils';
-
import prepareData from './prepareData';
import prepareLayout from './prepareLayout';
import updateData from './updateData';
import applyLayoutFixes from './applyLayoutFixes';
+import { prepareCustomChartData, createCustomChartRenderer } from './customChartUtils';
Plotly.register([bar, pie, histogram, box, heatmap]);
Plotly.setPlotConfig({
modeBarButtonsToRemove: ['sendDataToCloud'],
});
-const PlotlyChart = () => ({
- restrict: 'E',
- template: '
',
- scope: {
- options: '=',
- series: '=',
- },
- link(scope, element) {
- const plotlyElement = element[0].querySelector('.plotly-chart-container');
- const plotlyOptions = { showLink: false, displaylogo: false };
- let layout = {};
- let data = [];
-
- function update() {
- if (['normal', 'percent'].indexOf(scope.options.series.stacking) >= 0) {
- // Backward compatibility
- scope.options.series.percentValues = scope.options.series.stacking === 'percent';
- scope.options.series.stacking = 'stack';
- }
-
- data = prepareData(scope.series, scope.options);
- layout = prepareLayout(plotlyElement, scope.options, data);
-
- // It will auto-purge previous graph
- Plotly.newPlot(plotlyElement, data, layout, plotlyOptions).then(() => {
- applyLayoutFixes(plotlyElement, layout, (e, u) => Plotly.relayout(e, u));
- });
-
- plotlyElement.on('plotly_restyle', (updates) => {
- // This event is triggered if some plotly data/layout has changed.
- // We need to catch only changes of traces visibility to update stacking
- if (isArray(updates) && isObject(updates[0]) && updates[0].visible) {
- updateData(data, scope.options);
- Plotly.relayout(plotlyElement, layout);
- }
- });
- }
- update();
-
- scope.$watch('series', (oldValue, newValue) => {
- if (oldValue !== newValue) {
- update();
- }
- });
- scope.$watch('options', (oldValue, newValue) => {
- if (oldValue !== newValue) {
- update();
- }
- }, true);
-
- scope.handleResize = debounce(() => {
- applyLayoutFixes(plotlyElement, layout, (e, u) => Plotly.relayout(e, u));
- }, 50);
- },
-});
-
-const CustomPlotlyChart = clientConfig => ({
- restrict: 'E',
- template: '
',
- scope: {
- series: '=',
- options: '=',
- },
- link(scope, element) {
- if (!clientConfig.allowCustomJSVisualizations) {
- return;
- }
-
- const refresh = () => {
- // Clear existing data with blank data for succeeding codeCall adds data to existing plot.
- Plotly.newPlot(element[0].firstChild);
-
- try {
- // eslint-disable-next-line no-new-func
- const codeCall = new Function('x, ys, element, Plotly', scope.options.customCode);
- codeCall(scope.x, scope.ys, element[0].children[0], Plotly);
- } catch (err) {
- if (scope.options.enableConsoleLogs) {
- // eslint-disable-next-line no-console
- console.log(`Error while executing custom graph: ${err}`);
- }
- }
- };
-
- const timeSeriesToPlotlySeries = () => {
- scope.x = [];
- scope.ys = {};
- each(scope.series, (series) => {
- scope.ys[series.name] = [];
- each(series.data, (point) => {
- scope.x.push(normalizeValue(point.x));
- scope.ys[series.name].push(normalizeValue(point.y));
- });
- });
- };
-
- scope.handleResize = () => {
- refresh();
- };
-
- scope.$watch('[options.customCode, options.autoRedraw]', () => {
- refresh();
- }, true);
-
- scope.$watch('series', () => {
- timeSeriesToPlotlySeries();
- refresh();
- }, true);
- },
-});
-
-export default function init(ngModule) {
- ngModule.directive('plotlyChart', PlotlyChart);
- ngModule.directive('customPlotlyChart', CustomPlotlyChart);
-}
-
-init.init = true;
+export {
+ Plotly,
+ prepareData,
+ prepareLayout,
+ updateData,
+ applyLayoutFixes,
+ prepareCustomChartData,
+ createCustomChartRenderer,
+};