Charts builder improvements (#2796)

web/client/components/charts/Pie.jsx

@@ -6,10 +6,11 @@
   * LICENSE file in the root directory of this source tree.
   */
 const React = require('react');
+const {pure} = require('recompose');
 const {PieChart, Pie, Cell} = require('recharts');
 const {convertToNameValue} = require('./polar');
 
-module.exports = ({isAnimationActive, width = 600, height = 300, data, series =[], xAxis, colorGenerator, ...props, maxCols = 3} = {}) => {
+module.exports = pure(({isAnimationActive, width = 600, height = 300, data, series =[], xAxis, colorGenerator, ...props, maxCols = 3} = {}) => {
     const seriesArray = Array.isArray(series) ? series : [series];
     const cols = Math.min(maxCols, seriesArray.length);
     const COLORS = colorGenerator(data.length);
@@ -33,4 +34,4 @@ module.exports = ({isAnimationActive, width = 600, height = 300, data, series =[
          }
         {props.children}
     </PieChart>);
-};
+});

web/client/components/charts/SimpleChart.jsx

@@ -29,7 +29,7 @@ const AUTOCOLOR_DEFAULTS = {
  * @param {String} [type="line"]                         Type of the chart. One of "line", "pie", "bar", "gauge"
  * @param {Object} [tooltip={}]                          false to disable tooltip. TooltipOptions otherwise
  * @param {Object} [legend={}]                           false to disable legend. Legend options otherwise
- * @param {Object} [autoColorOptions] [description]      Optiopns to generate colors for the chart
+ * @param {Object} [autoColorOptions] [description]      Options to generate colors for the chart
  * @param {[type]} props                                 [description]
  */
 const SimpleChart = ({type="line", tooltip = {}, legend = {}, autoColorOptions = AUTOCOLOR_DEFAULTS, colorGenerator, ...props} = {}) => {

web/client/components/widgets/builder/wizard/chart/ChartType.jsx

@@ -8,6 +8,7 @@
 
 
 const React = require('react');
+const { shouldUpdate } = require('recompose');
 const SideGrid = require('../../../../misc/cardgrids/SideGrid');
 const Message = require('../../../../I18N/Message');
 const sampleData = require('../../../enhancers/sampleChartData');
@@ -29,15 +30,18 @@ const ITEMS = [{
     type: "pie"
 }, {
     type: "line"
-}, {
+}/*, {
     type: "gauge"
-}].map( ({type}) => ({
+}
+*/].map( ({type}) => ({
     type,
     title: <Message msgId={`widgets.chartType.${type}.title`} />,
     description: <Message msgId={`widgets.chartType.${type}.description`} />,
     caption: <Message msgId={`widgets.chartType.${type}.caption`} />
 }));
-module.exports = ({onSelect = () => {}, onNextPage = () => {}, types = [], type} = {}) => (<Row>
+module.exports = shouldUpdate(
+    ({ types, type }, { types: nextTypes, type: nextType}) => type !== nextType && types !== nextTypes
+)(({ onSelect = () => { }, onNextPage = () => { }, types = ITEMS, type} = {}) => (<Row>
     <StepHeader key="title" title={<Message msgId="widgets.selectChartType.title" />} />
     <SideGrid
         key="content"
@@ -58,4 +62,4 @@ module.exports = ({onSelect = () => {}, onNextPage = () => {}, types = [], type}
                      />)
             }))} />
 </Row>
-    );
+    ));