Display "comparing budget" on right/bottom

_src/js/compare/DiffTable.jsx

@@ -74,6 +74,9 @@ export default class DiffTable extends React.Component {
         ]
       };
 
+      // display the compared budget on the bottom
+      data.datasets.reverse();
+
       return <tr key={entry.key}>
         <td>
           <h4>
@@ -112,4 +115,4 @@ export default class DiffTable extends React.Component {
       </tbody>
     </table>
   }
-}
+}

_src/js/compare/Total.jsx

@@ -30,12 +30,14 @@ export default class Total extends React.Component {
       }),
     };
 
+    // display the compared budget on the bottom
+    data.datasets.reverse();
+
     return <div>
       <h2>Total Change:
-        <DiffStyled diff={diff} colors={this.props.diffColors} usePct={this.props.usePct}>
-        </DiffStyled>
+        <DiffStyled diff={diff} colors={this.props.diffColors} usePct={this.props.usePct} />
       </h2>
       <HorizontalBar data={data} height={25} options={compareChartOptions}></HorizontalBar>
     </div>
   }
-}
+}

_src/js/compare/Trend.jsx

@@ -62,7 +62,10 @@ export default class Trend extends React.Component {
     });
     const data = {labels, datasets};
 
+    // display the compared budget on the right
+    data.datasets.reverse();
+
     return <Bar data={data} options={chartOpts} height={125}></Bar>
 
   }
-}
+}

_src/js/compare/index.jsx

@@ -185,4 +185,4 @@ class Compare extends React.Component {
 ReactDOM.render(
   <Compare/>,
   document.getElementById('root')
-);
+);