title: React / Javascript /plotly - sum data based on date in plotly when no filter is applied
body: <p>I'm setting up my first React App, where I have a very small dataset, where I'm creating a plotly linechart with. The chart has 2 lines: one for <code>actual</code> and one for <code>predicted</code>.</p>
  <p>I also made it possible to filter on <code>Category</code> which can be <code>Green</code> or <code>Red</code>.</p>
  <p>The thing that I'm struggling with, is to not select a <code>Category</code> (which means basically <code>Select All</code>) and then to sum all the <code>actuals</code> in one line in the chart and sum all <code>predicted</code> in one line, not filtering on <code>category</code></p>
  <p>This is what I have so far:</p>
  <p><strong>data.js</strong></p>
  <pre><code>const data = [
      {
      Category: &quot;Red&quot;,
      date: &quot;11/07/2020&quot;,
      predicted: 10,
      actual: 12,
      },
      {
      Category: &quot;Red&quot;,
      date: &quot;11/08/2020&quot;,
      predicted: 12,
      actual: 13
      },
      {
      Category: &quot;Green&quot;,
      date: &quot;11/07/2020&quot;,
      predicted: 14,
      actual: 16
      },
      {
      Category: &quot;Green&quot;,
      date: &quot;11/08/2020&quot;,
      predicted: 10,
      actual: 12
      },
  ]
  
  export default data;
  </code></pre>
  <p><strong>App.JS</strong></p>
  <pre><code>import './App.css';
  import React, { useState } from &quot;react&quot;;
  import LineChart from './Linechart';
  import data from './data';
  
  
  function App() {
  
    var colors = [
      {label: &quot;Green&quot;, value: &quot;Green&quot;},
      {label: &quot;Red&quot;, value: &quot;Red&quot;}
  ]; 
  
    let [color, setColor] = useState(&quot;select Color&quot;)
    let [dates, setDates] = useState(&quot;Set Dates&quot;)
    let [actuals, setActual] = useState(&quot;Set Actuals&quot;)
    let [predicted, setPredicted] = useState(&quot;Set Predicted&quot;)
  
  
    const handleChangeColor = (e) =&gt; {
      setColor(e.target.value)
  
      const selectedColor = data.filter(data=&gt;data.Category === color)
  
      setDates(selectedColor.map(d =&gt; d.date));
      setActual(selectedColor.map(d =&gt; d.actual));
      setPredicted(selectedColor.map(d =&gt; d.predicted));
  
    };
  
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;LineChart colorTitle = {color} 
        plotDates = {dates} 
        plotActuals = {actuals} 
        plotPredicted = {predicted}/&gt;
  
        {color}
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;select onChange={handleChangeColor}  &gt;
          &lt;option value=&quot;select Color&quot;&gt; -- Select a color -- &lt;/option&gt;
          {colors.map((color) =&gt; &lt;option value={color.value}&gt;{color.label}&lt;/option&gt;)}
  
          &lt;/select&gt;
        &lt;/div&gt;
        
      &lt;/div&gt; 
    );
  }
  </code></pre>
  <p>export default App;</p>
  <p><strong>Linechart.JS</strong></p>
  <pre><code>import React, { Component} from 'react';
  import Plot from 'react-plotly.js';
  
  class LineChart extends Component {
      render(){
          return (
              
              &lt;Plot 
                  data={[
                      {
                          x: this.props.plotDates,
                          y: this.props.plotPredicted,
                          type: 'scatter',
                          name: 'Predicted',
                      },
                      {
                          x: this.props.plotDates,
                          y: this.props.plotActuals,
                          type: 'scatter',
                          name: 'Actual',
                      }
                  ]}
  
                  layout={{ 
  
                      tick0: 13, width: 1000, height: 500, title: this.props.colorTitle
  
                  }}
  
                  
              /&gt;
              
          )
      }
  
  }
  
  export default LineChart;
  </code></pre>
  <p>This gives me this, when the color filter <code>&quot;Red&quot;</code> is chosen:
  <a href="https://i.stack.imgur.com/9huuD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9huuD.png" alt="enter image description here" /></a></p>
  <p>So, to be honest I don't have an idea on where to begin. I only got to the point of having no filter, but then the lines in the chart goes from left to right and back and forward again, simply because it is not grouping:
  <a href="https://i.stack.imgur.com/21eQk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/21eQk.png" alt="enter image description here" /></a></p>
  <p>What I would like is: when no selection is made in the <code>color filter</code> that no filtering is applied, and that it gives me the summed lines of both <code>actual</code> and <code>predicted</code>, summed based on the same <code>date</code>.</p>
  <p>Hopefully someone can help me, very much appreciated :)</p>