Chart - sum Y column values rather than displaying last Y value #4587

client/app/visualizations/chart/plotly/fixtures/prepareData/pie/without-x.json

@@ -31,16 +31,16 @@
     "series": [
       {
         "visible": true,
-        "values": [10, 60, 100, 30],
-        "labels": ["Slice 0", "Slice 0", "Slice 0", "Slice 0"],
+        "values": [200],
+        "labels": ["Slice 0"],
         "type": "pie",
         "hole": 0.4,
         "marker": {
           "colors": ["#356AFF", "#E92828", "#3BD973", "#604FE9"]
         },
         "hoverinfo": "text+label",
         "hover": [],
-        "text": ["15% (30)", "15% (30)", "15% (30)", "15% (30)"],
+        "text": ["100% (200)"],
         "textinfo": "percent",
         "textposition": "inside",
         "textfont": { "color": "#ffffff" },

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

@@ -90,27 +90,38 @@ function prepareSeries(series, options, additionalOptions) {
       };
 
   const sourceData = new Map();
-  const xValues = [];
-  const yValues = [];
+  //we hold the labels and values in a dictionary so that we can aggregate multiple values for a single label
+  //once we reach the end of the data, we'll convert the dictionary to separate arrays for labels and values
+  const labelsValuesDict = {};
   const yErrorValues = [];
   each(data, row => {
     const x = normalizeValue(row.x, options.xAxis.type); // number/datetime/category
     const y = cleanYValue(row.y, seriesYAxis === "y2" ? options.yAxis[1].type : options.yAxis[0].type); // depends on series type!
     const yError = cleanNumber(row.yError); // always number
     const size = cleanNumber(row.size); // always number
+
+    if (x in labelsValuesDict){
+      labelsValuesDict[x] += y;
+    }
+    else{
+      labelsValuesDict[x] = y;
+    }
+    const aggregatedY = labelsValuesDict[x];
+
     sourceData.set(x, {
       x,
-      y,
+      y: aggregatedY,
       yError,
       size,
       yPercent: null, // will be updated later
       row,
     });
-    xValues.push(x);
-    yValues.push(y);
     yErrorValues.push(yError);
   });
 
+  const xValues = Object.keys(labelsValuesDict);
+  const yValues = Object.values(labelsValuesDict);
+
   const plotlySeries = {
     visible: true,
     hoverinfo: hoverInfoPattern,

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

@@ -38,8 +38,10 @@ function prepareSeries(series, options, additionalOptions) {
   const xPosition = (index % cellsInRow) * cellWidth;
   const yPosition = Math.floor(index / cellsInRow) * cellHeight;
 
-  const labels = [];
-  const values = [];
+  //we hold the labels and values in a dictionary so that we can aggregate multiple values for a single label
+  //once we reach the end of the data, we'll convert the dictionary to separate arrays for labels and values
+  const labelsValuesDict = {};
+
   const sourceData = new Map();
   const seriesTotal = reduce(
     series.data,
@@ -52,24 +54,33 @@ function prepareSeries(series, options, additionalOptions) {
   each(series.data, row => {
     const x = hasX ? normalizeValue(row.x, options.xAxis.type) : `Slice ${index}`;
     const y = cleanNumber(row.y);
-    labels.push(x);
-    values.push(y);
+    if (x in labelsValuesDict){
+      labelsValuesDict[x] += y;
+    }
+    else{
+      labelsValuesDict[x] = y;
+    }
+    const aggregatedY = labelsValuesDict[x];
+
     sourceData.set(x, {
       x,
-      y,
-      yPercent: (y / seriesTotal) * 100,
+      y: aggregatedY,
+      yPercent: (aggregatedY / seriesTotal) * 100,
       row,
     });
   });
 
+  const labels = Object.keys(labelsValuesDict);
+  const values = Object.values(labelsValuesDict);
+
   return {
     visible: true,
     values,
     labels,
     type: "pie",
     hole: 0.4,
     marker: {
-      colors: map(series.data, row => getValueColor(row.x)),
+      colors: map(series.data, row => getValueColor(row.y)), //reduces liklihood of adjacent same colors
     },
     hoverinfo: hoverInfoPattern,
     text: [],