added vertical labels for the charts in dashboard

UBCSailbot · Jan 27, 2024 · fd8aecc · fd8aecc
1 parent 5559ca2
commit fd8aecc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/views/DashboardContainer.tsx b/views/DashboardContainer.tsx
@@ -46,24 +46,28 @@ class DashboardContainer extends React.PureComponent<DashboardContainerProps> {
           data={gpsChartData}
           xAxisKey='timestamp'
           yAxisKey='speed'
+          unit='km/h'
         />
         <MultiLineChartComponent
           data={batteriesChartDataVoltage}
           xAxisKey='timestamp'
           yAxisKey1='battery1Voltage'
           yAxisKey2='battery2Voltage'
+          unit='V'
         />
         <MultiLineChartComponent
           data={batteriesChartDataCurrent}
           xAxisKey='timestamp'
           yAxisKey1='battery1Current'
           yAxisKey2='battery2Current'
+          unit='A'
         />
         <MultiLineChartComponent
           data={windSensorsChartData}
           xAxisKey='timestamp'
           yAxisKey1='windSensor1Speed'
           yAxisKey2='windSensor2Speed'
+          unit='km/h'
         />
       </div>
     );

diff --git a/views/components/LineChart/LineChart.tsx b/views/components/LineChart/LineChart.tsx
@@ -14,6 +14,7 @@ export interface ILineChartProps {
   data: any[];
   xAxisKey: string;
   yAxisKey: string;
+  unit: string;
 }
 
 export interface ILineChartState {}
@@ -23,7 +24,7 @@ export default class LineChartComponent extends React.Component<
   ILineChartState
 > {
   render() {
-    const { data, xAxisKey, yAxisKey } = this.props;
+    const { data, xAxisKey, yAxisKey, unit } = this.props;
     return (
       <ResponsiveContainer width='100%' height={250}>
         <LineChart
@@ -32,7 +33,7 @@ export default class LineChartComponent extends React.Component<
         >
           <CartesianGrid strokeDasharray='3 3' />
           <XAxis dataKey={xAxisKey} />
-          <YAxis />
+          <YAxis label={{ value: unit, angle: -90, position: 'left' }}/>
           <Tooltip />
           <Legend />
           <Line type='monotone' dataKey={yAxisKey} stroke='#8884d8' />

diff --git a/views/components/LineChart/MultiLineChart.tsx b/views/components/LineChart/MultiLineChart.tsx
@@ -15,6 +15,7 @@ export interface MultiLineChartProps {
   xAxisKey: string;
   yAxisKey1: string;
   yAxisKey2: string;
+  unit: string;
 }
 
 export interface MultiLineChartState {}
@@ -24,7 +25,7 @@ export default class MultiLineChartComponent extends React.Component<
   MultiLineChartState
 > {
   render() {
-    const { data, xAxisKey, yAxisKey1, yAxisKey2 } = this.props;
+    const { data, xAxisKey, yAxisKey1, yAxisKey2, unit } = this.props;
     return (
       <ResponsiveContainer width='100%' height={250}>
         <LineChart
@@ -33,7 +34,7 @@ export default class MultiLineChartComponent extends React.Component<
         >
           <CartesianGrid strokeDasharray='3 3' />
           <XAxis dataKey={xAxisKey} />
-          <YAxis />
+          <YAxis label={{ value: unit, angle: -90, position: 'left' }}/>
           <Tooltip />
           <Legend />
           <Line type='monotone' dataKey={yAxisKey1} stroke='#8884d8' />