Migrate Chart visualization: Renderer

client/app/visualizations/chart/Renderer/CustomPlotlyChart.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RendererPropTypes } from '@/visualizations';
+
+export default function CustomPlotlyChart() {
+  return <div>Custom Plotly Chart</div>;
+}
+
+CustomPlotlyChart.propTypes = RendererPropTypes;

client/app/visualizations/chart/Renderer/PlotlyChart.jsx

@@ -0,0 +1,69 @@
+import { isArray, isObject } from 'lodash';
+import React, { useState, useEffect, useMemo } from 'react';
+import { RendererPropTypes } from '@/visualizations';
+import resizeObserver from '@/services/resizeObserver';
+
+import getChartData from '../getChartData';
+import { Plotly, prepareData, prepareLayout, updateData, applyLayoutFixes } from '../plotly';
+
+export default function PlotlyChart(props) {
+  const [container, setContainer] = useState(null);
+
+  const options = useMemo(() => {
+    const result = { ...props.options };
+    if (['normal', 'percent'].indexOf(result.series.stacking) >= 0) {
+      // Backward compatibility
+      result.series = {
+        ...result.series,
+        percentValues: result.series.stacking === 'percent',
+        stacking: 'stack',
+      };
+    }
+    return result;
+  }, [props.options]);
+
+  const plotlyData = useMemo(() => {
+    const series = getChartData(props.data.rows, options);
+    return prepareData(series, options);
+  }, [props.data, options]);
+
+  const plotlyLayout = useMemo(() => {
+    if (container) {
+      return prepareLayout(container, options, plotlyData);
+    }
+    return null;
+  }, [container, options, plotlyData]);
+
+  useEffect(() => {
+    if (container && plotlyLayout) {
+      const plotlyOptions = { showLink: false, displaylogo: false };
+
+      // It will auto-purge previous graph
+      Plotly.newPlot(container, plotlyData, plotlyLayout, plotlyOptions).then(() => {
+        applyLayoutFixes(container, plotlyLayout, (e, u) => Plotly.relayout(e, u));
+      });
+
+      container.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(plotlyData, options);
+          Plotly.relayout(container, plotlyLayout);
+        }
+      });
+    }
+  }, [options, plotlyData, plotlyLayout, container]);
+
+  useEffect(() => {
+    if (container) {
+      const unwatch = resizeObserver(container, () => {
+        applyLayoutFixes(container, plotlyLayout, (e, u) => Plotly.relayout(e, u));
+      });
+      return unwatch;
+    }
+  }, [plotlyLayout, container]);
+
+  return <div className="chart-visualization-container plotly-chart-container" ref={setContainer} />;
+}
+
+PlotlyChart.propTypes = RendererPropTypes;

client/app/visualizations/chart/Renderer/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RendererPropTypes } from '@/visualizations';
+
+import PlotlyChart from './PlotlyChart';
+import CustomPlotlyChart from './CustomPlotlyChart';
+
+export default function Renderer({ options, ...props }) {
+  if (options.globalSeriesType === 'custom') {
+    return <CustomPlotlyChart options={options} {...props} />;
+  }
+  return <PlotlyChart options={options} {...props} />;
+}
+
+Renderer.propTypes = RendererPropTypes;

client/app/visualizations/chart/index.js

@@ -9,6 +9,8 @@ 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,
@@ -318,7 +320,7 @@ export default function init(ngModule) {
         showDataLabels: options.globalSeriesType === 'pie',
         dateTimeFormat: clientConfig.dateTimeFormat,
       }, options),
-      Renderer: angular2react('chartRenderer', ChartRenderer, $injector),
+      Renderer,
       Editor: angular2react('chartEditor', ChartEditor, $injector),
 
       defaultColumns: 3,

client/app/visualizations/chart/plotly/index.js

@@ -14,6 +14,14 @@ import prepareLayout from './prepareLayout';
 import updateData from './updateData';
 import applyLayoutFixes from './applyLayoutFixes';
 
+export {
+  Plotly,
+  prepareData,
+  prepareLayout,
+  updateData,
+  applyLayoutFixes,
+};
+
 Plotly.register([bar, pie, histogram, box, heatmap]);
 Plotly.setPlotConfig({
   modeBarButtonsToRemove: ['sendDataToCloud'],