Add tick labels and change temperature bar graph

Author: Umius-Brian

app/charts/processes-chart.jsx

@@ -35,51 +35,51 @@ const ProcessesChart = (props) => {
     return (
       <Plot
         data = {[
-        {
-          type: 'scatter',
-          x: {autorange: true},
-          y: totalProcesses,
-          mode: 'markers',
-          rangemode: 'nonnegative',
-          name: 'Total Processes',
-          marker: {
-            color: 'red',
-            size: 3
+          {
+            type: 'scatter',
+            x: {autorange: true},
+            y: totalProcesses,
+            mode: 'markers',
+            rangemode: 'nonnegative',
+            name: 'Total Processes',
+            marker: {
+              color: 'red',
+              size: 3
+            }},
+          {
+            type: 'scatter',
+            x: {autorange: true},
+            y: runningProcesses,
+            mode: 'markers',
+            rangemode: 'nonnegative',
+            name: 'Running Processes',
+            marker: {
+              color: '#3ec1d3',
+              size: 3
+            }},
+          {
+            type: 'scatter',
+            x: {autorange: true},
+            y: blockedProcesses,
+            mode: 'markers',
+            rangemode: 'nonnegative',
+            name: 'Blocked Processes',
+            marker: {
+              color: '#ff9a00',
+              size: 3
+            }},
+          { 
+            type: 'scatter',
+            x: {autorange: true},
+            y: sleepingProcesses,
+            mode: 'markers',
+            rangemode: 'nonnegative',
+            name: 'Sleeping Processes',
+            marker: {
+              color: '#ff165d',
+              size: 3
           }},
-        {
-          type: 'scatter',
-          x: {autorange: true},
-          y: runningProcesses,
-          mode: 'markers',
-          rangemode: 'nonnegative',
-          name: 'Running Processes',
-          marker: {
-            color: '#3ec1d3',
-            size: 3
-          }},
-        {
-          type: 'scatter',
-          x: {autorange: true},
-          y: blockedProcesses,
-          mode: 'markers',
-          rangemode: 'nonnegative',
-          name: 'Blocked Processes',
-          marker: {
-            color: '#ff9a00',
-            size: 3
-          }},
-        { 
-          type: 'scatter',
-          x: {autorange: true},
-          y: sleepingProcesses,
-          mode: 'markers',
-          rangemode: 'nonnegative',
-          name: 'Sleeping Processes',
-          marker: {
-            color: '#ff165d',
-            size: 3
-          }},
-        {label: communicationLabel},
+          {label: communicationLabel},
         ]}
         layout = {{
           width: 500,

app/charts/speed-chart.jsx

@@ -30,7 +30,7 @@ const SpeedChart = (props) => {
           domain: { x: [0, 1], y: [0, 1] },
           type: 'indicator',
           value: yAxis[length],
-          title: {'text': "Speed Chart"},
+          // title: {'text': "Speed Chart"},
           delta: {'reference': 3.5, 'increasing': {'color': "mistyrose"}},
           mode: "gauge+number+delta",
           gauge: { axis: { range: [null, 8] },

app/charts/temperature-chart.jsx

@@ -27,13 +27,14 @@ const TemperatureChart = (props) => {
     return (
       <Plot
         data = {[{
-          type: 'scatter',
+          type: 'bar',
+          width: 200,
           fill: 'tozeroy',
-          fillcolor: 'rgba(29, 39, 134, .5)',
+          color: '#00d1ff',
+          opacity: .4,
           mode: 'none',
           x: yAxis,
           y: xAxis,
-          rangemode: 'nonnegative',
           name: 'CPU Temperature',
           showlegend: true
         }]}
@@ -51,8 +52,9 @@ const TemperatureChart = (props) => {
             xaxis: {
             tickmode: 'linear',
             tick0: 0,
-            dtick: 2000
-            }
+            dtick: 2000,
+            },
+            yaxis: {rangemode: 'nonnegative'}
           }
         }
       />