Speedup sluggish animation

Author: GuLinux

web/src/features/sensors/ambient/Ambient.js

@@ -19,9 +19,9 @@ const AmbientChart = ({}) => {
                 <YAxis yAxisId={`tempYaxis-${id}`} />
                 <YAxis yAxisId={`humidityYaxis-${id}`} orientation='right' />
                 <Legend onClick={({dataKey}) => setSelected(selected !== dataKey ? dataKey : null)}/>
-                { shouldShow('temperature') && <Line yAxisId={`tempYaxis-${id}`} type="monotone" dataKey="temperature" stroke="#8884d8" /> }
-                { shouldShow('humidity') && <Line yAxisId={`humidityYaxis-${id}`} type="monotone" dataKey="humidity" stroke="#2284d8" /> }
-                { shouldShow('dewpoint') && <Line yAxisId={`tempYaxis-${id}`} type="monotone" dataKey="dewpoint" stroke="#8822d8" /> }
+                { shouldShow('temperature') && <Line animationDuration={100} yAxisId={`tempYaxis-${id}`} type="monotone" dataKey="temperature" stroke="#8884d8" /> }
+                { shouldShow('humidity') && <Line animationDuration={100} yAxisId={`humidityYaxis-${id}`} type="monotone" dataKey="humidity" stroke="#2284d8" /> }
+                { shouldShow('dewpoint') && <Line animationDuration={100} yAxisId={`tempYaxis-${id}`} type="monotone" dataKey="dewpoint" stroke="#8822d8" /> }
 
             </LineChart>
         </ResponsiveContainer>

web/src/features/sensors/heaters/Heaters.js

@@ -56,7 +56,7 @@ const HeatersChart = ({}) => {
 
                 </Col>
             </Form.Group>
-        </Form>
+        </Form>//MLin
 
         {activeHeater !== null &&
         <div style={{ height: 400 }}>
@@ -67,8 +67,8 @@ const HeatersChart = ({}) => {
                     <YAxis yAxisId={`tempYAxis-${id}`} />
                     <YAxis yAxisId={`dutyYAxis-${id}`} orientation='right' />
                     <Legend onClick={({dataKey}) => setSelected(selected !== dataKey ? dataKey : null)}/>
-                    {shouldShow(`heater-${activeHeater}-temperature`) && <Line name={`Heater ${activeHeater} temperature`} yAxisId={`tempYAxis-${id}`} type="monotone" dataKey={`heater-${activeHeater}-temperature`} stroke="#ffaa22" />}
-                    {shouldShow(`heater-${activeHeater}-duty`) && <Line name={`Heater ${activeHeater} duty`} yAxisId={`dutyYAxis-${id}`} type="monotone" dataKey={`heater-${activeHeater}-duty`} stroke="#22aaff" />}
+                    {shouldShow(`heater-${activeHeater}-temperature`) && <Line animationDuration={100} name={`Heater ${activeHeater} temperature`} yAxisId={`tempYAxis-${id}`} type="monotone" dataKey={`heater-${activeHeater}-temperature`} stroke="#ffaa22" />}
+                    {shouldShow(`heater-${activeHeater}-duty`) && <Line animationDuration={100} name={`Heater ${activeHeater} duty`} yAxisId={`dutyYAxis-${id}`} type="monotone" dataKey={`heater-${activeHeater}-duty`} stroke="#22aaff" />}
                 </LineChart>
             </ResponsiveContainer>
         </div>

web/src/features/sensors/power/Power.js

@@ -20,9 +20,9 @@ const PowerChart= ({}) => {
                 <YAxis yAxisId={`powerAxis-${id}`} />
                 <YAxis yAxisId={`currentYAxis-${id}`} orientation='right' />
                 <Legend onClick={({dataKey}) => setSelected(selected !== dataKey ? dataKey : null)}/>
-                { shouldShow('busVoltage') && <Line yAxisId={`voltageAxis-${id}`} type="monotone" dataKey="busVoltage" stroke="#8884d8" /> }
-                { shouldShow('current') && <Line yAxisId={`currentYAxis-${id}`} type="monotone" dataKey="current" stroke="#2284d8" /> }
-                { shouldShow('power') && <Line yAxisId={`powerAxis-${id}`} type="monotone" dataKey="power" stroke="#8822d8" /> }
+                { shouldShow('busVoltage') && <Line animationDuration={100} yAxisId={`voltageAxis-${id}`} type="monotone" dataKey="busVoltage" stroke="#8884d8" /> }
+                { shouldShow('current') && <Line animationDuration={100} yAxisId={`currentYAxis-${id}`} type="monotone" dataKey="current" stroke="#2284d8" /> }
+                { shouldShow('power') && <Line animationDuration={100} yAxisId={`powerAxis-${id}`} type="monotone" dataKey="power" stroke="#8822d8" /> }
 
             </LineChart>
         </ResponsiveContainer>

web/src/setupProxy.js

@@ -1,7 +1,7 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = function(app) {
-  const target = 'http://astropowerbox-prototype.lan'
+  const target = 'http://astropowerbox-c11.lan'
   console.log(`****** proxy setup: "/api" => ${target}`)
   app.use(
     '/api',