Skip to content

Commit ce47431

Browse files
kcq888kcq888
authored
Merge pull request #54 from Open-STEM/kq-vite
dashboard changes
2 parents 598e328 + ada6cb0 commit ce47431

File tree

10 files changed

+60
-29
lines changed

10 files changed

+60
-29
lines changed

‎src/components/dashboard/AddWidget.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { MdSpeed } from 'react-icons/md';
55
import { FaBatteryHalf, FaBolt, FaCog, FaEye, FaGlobe, FaPlus } from 'react-icons/fa';
66
import { BsRulers } from 'react-icons/bs';
77
import i18n from "@/utils/i18n";
8+
import { FlowBiteConstants } from "@/utils/constants";
89

910
type ActionType = 'accelerometer' | 'current' | 'encoder' | 'gyroscope' | 'rangefinder' | 'reflectance' | 'voltage';
1011

@@ -153,7 +154,7 @@ const AddWidgets: React.FC = () => {
153154

154155
return (
155156
<div className="flex items-center mt-4 sm:mt-0">
156-
<Dropdown label={<FaPlus size={20} />} className="flex items-center mt-4 sm:mt-0 ">
157+
<Dropdown label={<FaPlus size={20} />} inline={true} theme={FlowBiteConstants.DropdownTheme} className="flex items-center mt-4 sm:mt-0 ">
157158
<DropdownItem icon={MdSpeed} onClick={() => handleAction('accelerometer')}>Accelerometer</DropdownItem>
158159
<DropdownItem icon={FaBolt} onClick={() => handleAction('current')}>Current</DropdownItem>
159160
<DropdownItem icon={FaGlobe} onClick={() => handleAction('gyroscope')}>Gyroscope</DropdownItem>

‎src/components/dashboard/sensors/Accelerometer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'rec
88
import { FaChartLine, FaHashtag, FaCog, FaTrash } from 'react-icons/fa';
99
import { useGridStackContext } from '../lib/grid-stack-context';
1010
import i18n from '@/utils/i18n';
11+
import { FlowBiteConstants } from '@/utils/constants';
1112

1213
// Define a type for timestamped accelerometer data
1314
interface TimestampedAccelData {
@@ -145,7 +146,7 @@ const Accelerometer: React.FC = () => {
145146
return (
146147
<SensorCard {...sensorCardProps}>
147148
<div className="absolute top-4 right-4 flex items-center space-x-2">
148-
<Dropdown label={<FaCog size={16} />} className="font-bold flex items-center text-sm border border-gray-300 rounded">
149+
<Dropdown label={<FaCog size={16} />} inline={true} theme={FlowBiteConstants.DropdownTheme} className="font-bold flex items-center text-sm border border-gray-300 rounded">
149150
<DropdownItem onClick={() => handleAction('graph')}>
150151
<div className="flex items-center space-x-2">
151152
<FaChartLine size={16} />
@@ -182,7 +183,7 @@ const Accelerometer: React.FC = () => {
182183
<XAxis
183184
dataKey="timestamp"
184185
tick={false}
185-
label="Time"
186+
label={i18n.t('time')}
186187
/>
187188
<YAxis />
188189
<Tooltip

‎src/components/dashboard/sensors/Current.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'rec
88
import { FaChartLine, FaHashtag, FaCog, FaTrash } from 'react-icons/fa';
99
import { useGridStackContext } from '../lib/grid-stack-context';
1010
import i18n from '@/utils/i18n';
11+
import { FlowBiteConstants } from '@/utils/constants';
12+
1113

1214
// Define a type for timestamped current data
1315
interface TimestampedCurrentData {
@@ -159,7 +161,7 @@ const Current: React.FC = () => {
159161
<SensorCard {...sensorCardProps}>
160162
<div className="absolute top-4 right-4 flex items-center space-x-2">
161163
{/* View toggle dropdown */}
162-
<Dropdown label={<FaCog size={16} />} className="font-bold flex items-center text-sm border border-gray-300 rounded">
164+
<Dropdown label={<FaCog size={16} />} inline={true} theme={FlowBiteConstants.DropdownTheme} className="font-bold flex items-center text-sm border border-gray-300 rounded">
163165
<DropdownItem onClick={() => handleAction('graph')}>
164166
<div className="flex items-center space-x-2">
165167
<FaChartLine size={16} />
@@ -196,15 +198,15 @@ const Current: React.FC = () => {
196198
<XAxis
197199
dataKey="timestamp"
198200
tick={false}
199-
label="Time"
201+
label={i18n.t('time')}
200202
/>
201203
<YAxis />
202204
<Tooltip
203205
labelFormatter={(value) => new Date(value).toLocaleTimeString()}
204206
formatter={(value) => typeof value === 'number' ? `${value.toFixed(0)} mA` : value}
205207
/>
206-
<Line type="monotone" dataKey="currL" stroke={channelColors.currL} dot={false} name="Left" />
207-
<Line type="monotone" dataKey="currR" stroke={channelColors.currR} dot={false} name="Right" />
208+
<Line type="monotone" dataKey="currL" stroke={channelColors.currL} dot={false} name={i18n.t('left')} />
209+
<Line type="monotone" dataKey="currR" stroke={channelColors.currR} dot={false} name={i18n.t('right')} />
208210
<Line type="monotone" dataKey="curr3" stroke={channelColors.curr3} dot={false} name="Ch 3" />
209211
<Line type="monotone" dataKey="curr4" stroke={channelColors.curr4} dot={false} name="Ch 4" />
210212
</LineChart>

‎src/components/dashboard/sensors/Encoder.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'rec
77
import { FaChartLine, FaHashtag, FaCog, FaTrash } from 'react-icons/fa';
88
import { useGridStackContext } from '../lib/grid-stack-context';
99
import i18n from '@utils/i18n'; // Adjust the path if your i18n setup file is elsewhere
10+
import { FlowBiteConstants } from '@/utils/constants';
11+
1012

1113
// Define a type for timestamped encoder data
1214
interface TimestampedEncoderData {
@@ -156,7 +158,7 @@ const Encoder: React.FC = () => {
156158
return (
157159
<SensorCard {...sensorCardProps}>
158160
<div className="absolute top-4 right-4 flex items-center space-x-2">
159-
<Dropdown label={<FaCog size={16} />} className="font-bold flex items-center text-sm border border-gray-300 rounded">
161+
<Dropdown label={<FaCog size={16} />} inline={true} theme={FlowBiteConstants.DropdownTheme} className="font-bold flex items-center text-sm border border-gray-300 rounded">
160162
<DropdownItem onClick={() => handleAction('graph')}>
161163
<div className="flex items-center space-x-2">
162164
<FaChartLine size={16} />
@@ -193,7 +195,7 @@ const Encoder: React.FC = () => {
193195
<XAxis
194196
dataKey="timestamp"
195197
tick={false}
196-
label="Time"
198+
label={i18n.t('time')}
197199
/>
198200
<YAxis />
199201
<Tooltip
@@ -273,7 +275,7 @@ const Encoder: React.FC = () => {
273275
</svg>
274276
</div>
275277
<span className="font-mono text-sm">{value}</span>
276-
<span className="text-xs text-gray-500">ticks</span>
278+
<span className="text-xs text-gray-500">{i18n.t('ticks')}</span>
277279
</div>
278280
);
279281
})}

‎src/components/dashboard/sensors/Gyroscope.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'rec
88
import { FaChartLine, FaHashtag, FaCog, FaTrash } from 'react-icons/fa';
99
import { useGridStackContext } from '../lib/grid-stack-context';
1010
import i18n from '@utils/i18n';
11+
import { FlowBiteConstants } from '@/utils/constants';
12+
1113

1214
// Define a type for timestamped gyroscope data
1315
interface TimestampedGyroData {
@@ -144,7 +146,7 @@ const Gyroscope: React.FC = () => {
144146
return (
145147
<SensorCard {...sensorCardProps}>
146148
<div className="absolute top-4 right-4 flex items-center space-x-2">
147-
<Dropdown label={<FaCog size={16} />} className="font-bold flex items-center text-sm border border-gray-300 rounded">
149+
<Dropdown label={<FaCog size={16} />} inline={true} theme={FlowBiteConstants.DropdownTheme} className="font-bold flex items-center text-sm border border-gray-300 rounded">
148150
<DropdownItem onClick={() => handleAction('graph')}>
149151
<div className="flex items-center space-x-2">
150152
<FaChartLine size={16} />
@@ -181,7 +183,7 @@ const Gyroscope: React.FC = () => {
181183
<XAxis
182184
dataKey="timestamp"
183185
tick={false}
184-
label="Time"
186+
label={i18n.t('time')}
185187
/>
186188
<YAxis />
187189
<Tooltip

‎src/components/dashboard/sensors/Rangefinder.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { FaChartLine, FaHashtag, FaCog, FaTrash } from 'react-icons/fa';
88
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
99
import { useGridStackContext } from '../lib/grid-stack-context';
1010
import i18n from '@utils/i18n';
11+
import { FlowBiteConstants } from '@/utils/constants';
12+
1113

1214
// Define a type for timestamped rangefinder data
1315
interface TimestampedRangeData {
@@ -138,7 +140,7 @@ const Rangefinder: React.FC = () => {
138140
return (
139141
<SensorCard {...sensorCardProps}>
140142
<div className="absolute top-4 right-4 flex items-center space-x-2">
141-
<Dropdown label={<FaCog size={16} />} className="font-bold flex items-center text-sm border border-gray-300 rounded">
143+
<Dropdown label={<FaCog size={16} />} inline={true} theme={FlowBiteConstants.DropdownTheme} className="font-bold flex items-center text-sm border border-gray-300 rounded">
142144
<DropdownItem onClick={() => handleAction('graph')}>
143145
<div className="flex items-center space-x-2">
144146
<FaChartLine size={16} />
@@ -175,7 +177,7 @@ const Rangefinder: React.FC = () => {
175177
<XAxis
176178
dataKey="timestamp"
177179
tick={false}
178-
label="Time"
180+
label={i18n.t('time')}
179181
/>
180182
<YAxis />
181183
<Tooltip
@@ -187,7 +189,7 @@ const Rangefinder: React.FC = () => {
187189
dataKey="distance"
188190
stroke={distanceColor}
189191
dot={false}
190-
name="Distance"
192+
name={i18n.t('distance')}
191193
/>
192194
</LineChart>
193195
</ResponsiveContainer>
@@ -255,7 +257,7 @@ const Rangefinder: React.FC = () => {
255257
{rangeData.distance.toFixed(1)}
256258
</div>
257259
<div className="text-sm text-gray-500">
258-
centimeters
260+
{i18n.t('distance-units')}
259261
</div>
260262
</div>
261263
</div>

‎src/components/dashboard/sensors/Reflectance.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'rec
88
import { FaChartLine, FaHashtag, FaCog, FaTrash } from 'react-icons/fa';
99
import { useGridStackContext } from '../lib/grid-stack-context';
1010
import i18n from '@utils/i18n';
11+
import { FlowBiteConstants } from '@/utils/constants';
12+
1113

1214
// Define a type for timestamped reflectance data
1315
interface TimestampedReflectanceData {
@@ -150,7 +152,7 @@ const Reflectance: React.FC = () => {
150152
return (
151153
<SensorCard {...sensorCardProps}>
152154
<div className="absolute top-4 right-4 flex items-center space-x-2">
153-
<Dropdown label={<FaCog size={16} />} className="font-bold flex items-center text-sm border border-gray-300 rounded">
155+
<Dropdown label={<FaCog size={16} />} inline={true} theme={FlowBiteConstants.DropdownTheme} className="font-bold flex items-center text-sm border border-gray-300 rounded">
154156
<DropdownItem onClick={() => handleAction('graph')}>
155157
<div className="flex items-center space-x-2">
156158
<FaChartLine size={16} />
@@ -187,15 +189,15 @@ const Reflectance: React.FC = () => {
187189
<XAxis
188190
dataKey="timestamp"
189191
tick={false}
190-
label="Time"
192+
label={i18n.t('time')}
191193
/>
192194
<YAxis />
193195
<Tooltip
194196
labelFormatter={(value) => new Date(value).toLocaleTimeString()}
195197
formatter={(value) => typeof value === 'number' ? value.toFixed(0) : value}
196198
/>
197-
<Line type="monotone" dataKey="reflectanceL" stroke={sideColors.reflectanceL} dot={false} name="Left" />
198-
<Line type="monotone" dataKey="reflectanceR" stroke={sideColors.reflectanceR} dot={false} name="Right" />
199+
<Line type="monotone" dataKey="reflectanceL" stroke={sideColors.reflectanceL} dot={false} name={i18n.t('left')} />
200+
<Line type="monotone" dataKey="reflectanceR" stroke={sideColors.reflectanceR} dot={false} name={i18n.t('right')} />
199201
</LineChart>
200202
</ResponsiveContainer>
201203
<div className="text-xs text-gray-500 text-center mt-2 dark:text-gray-400">
@@ -220,7 +222,7 @@ const Reflectance: React.FC = () => {
220222
<div className="w-6 h-6 rounded-full bg-white opacity-80"></div>
221223
</div>
222224
<span className="text-xs font-medium" style={{ color: sideColors.reflectanceL }}>
223-
LEFT
225+
{i18n.t('left')}
224226
</span>
225227
</div>
226228

@@ -236,7 +238,7 @@ const Reflectance: React.FC = () => {
236238
<div className="w-6 h-6 rounded-full bg-white opacity-80"></div>
237239
</div>
238240
<span className="text-xs font-medium" style={{ color: sideColors.reflectanceR }}>
239-
RIGHT
241+
{i18n.t('right')}
240242
</span>
241243
</div>
242244
</div>
@@ -248,7 +250,7 @@ const Reflectance: React.FC = () => {
248250
<div>
249251
<div className="flex justify-between items-center mb-1">
250252
<span className="text-sm font-medium" style={{ color: sideColors.reflectanceL }}>
251-
Left
253+
{i18n.t('left')}
252254
</span>
253255
<span className="text-sm font-mono">
254256
{reflectanceData.reflectanceL}
@@ -269,7 +271,7 @@ const Reflectance: React.FC = () => {
269271
<div>
270272
<div className="flex justify-between items-center mb-1">
271273
<span className="text-sm font-medium" style={{ color: sideColors.reflectanceR }}>
272-
Right
274+
{i18n.t('right')}
273275
</span>
274276
<span className="text-sm font-mono">
275277
{reflectanceData.reflectanceR}
@@ -291,13 +293,13 @@ const Reflectance: React.FC = () => {
291293
<div className="grid grid-cols-2 gap-4 text-center">
292294
<div className="flex flex-col items-center">
293295
<span className="text-xs font-medium" style={{ color: sideColors.reflectanceL }}>
294-
Left Reflectance
296+
{i18n.t('left-reflectance')}
295297
</span>
296298
<span className="font-mono text-lg">{reflectanceData.reflectanceL}</span>
297299
</div>
298300
<div className="flex flex-col items-center">
299301
<span className="text-xs font-medium" style={{ color: sideColors.reflectanceR }}>
300-
Right Reflectance
302+
{i18n.t('right-reflectance')}
301303
</span>
302304
<span className="font-mono text-lg">{reflectanceData.reflectanceR}</span>
303305
</div>

‎src/components/dashboard/sensors/Voltage.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'rec
99
import { FaChartLine, FaHashtag, FaCog, FaTrash } from 'react-icons/fa';
1010
import { useGridStackContext } from '../lib/grid-stack-context';
1111
import i18n from '@utils/i18n';
12+
import { FlowBiteConstants } from '@/utils/constants';
1213

1314
// Define a type for timestamped battery data
1415
interface TimestampedBatteryData {
@@ -148,7 +149,7 @@ const Voltage: React.FC = () => {
148149
return (
149150
<SensorCard {...sensorCardProps}>
150151
<div className="absolute top-4 right-4 flex items-center space-x-2">
151-
<Dropdown label={<FaCog size={16} />} className="font-bold flex items-center text-sm border border-gray-300 rounded">
152+
<Dropdown label={<FaCog size={16} />} inline={true} theme={FlowBiteConstants.DropdownTheme} className="font-bold flex items-center text-sm border border-gray-300 rounded">
152153
<DropdownItem onClick={() => handleAction('graph')}>
153154
<div className="flex items-center space-x-2">
154155
<FaChartLine size={16} />
@@ -185,7 +186,7 @@ const Voltage: React.FC = () => {
185186
<XAxis
186187
dataKey="timestamp"
187188
tick={false}
188-
label="Time"
189+
label={i18n.t('time')}
189190
/>
190191
<YAxis />
191192
<Tooltip
@@ -197,7 +198,7 @@ const Voltage: React.FC = () => {
197198
dataKey="voltage"
198199
stroke={voltageColor}
199200
dot={false}
200-
name="Voltage"
201+
name={i18n.t('voltage')}
201202
/>
202203
</LineChart>
203204
</ResponsiveContainer>

‎src/utils/constants.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,14 @@ export class Constants {
77
static readonly TRASH_FOLDER = '/trash';
88
static readonly SHOW_CHANGELOG = 'show-changelog';
99
static SHOW_PROGRESS = 'show-progress';
10+
}
11+
12+
export class FlowBiteConstants {
13+
static readonly DropdownTheme = {
14+
base: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300',
15+
item: 'hover:bg-gray-100 dark:hover:bg-gray-700',
16+
itemActive: 'bg-blue-500 text-white dark:bg-blue-600',
17+
itemDisabled: 'text-gray-400 dark:text-gray-500',
18+
inlineWrapper: 'text-white bg-shark-200 hover:bg-curious-blue-300 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-shark-600 dark:hover:bg-shark-500 dark:focus:ring-blue-800',
19+
};
1020
}

‎src/utils/i18n/locales/en/en.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,14 @@
100100
"number": "Number",
101101
"no-data-available": "No Data Available",
102102
"readings-stored": "readings stored",
103+
"time": "Time",
104+
"left": "Left",
105+
"right": "Right",
106+
"left-reflectance": "Left Reflectance",
107+
"right-reflectance": "Right Reflectance",
108+
"distance": "Distance",
109+
"distance-units": "Centimeters",
110+
"ticks": "Ticks",
103111
"_commentBlockly": "This does not need to be translated - blockly specific translation add below",
104112
"individualMotors": "Individual Motors"
105113
}

0 commit comments

Comments
 (0)