Skip to content

Commit 2ae75ce

Browse files
bvngeebvngee
committed
merge "data-processing-rewrite-typedarrs" into prod
2 parents 62de92b + 7db0ee5 commit 2ae75ce

File tree

17 files changed

+607
-634
lines changed

17 files changed

+607
-634
lines changed

‎frontend/app/components/FlexLayoutComponent.tsx‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { Layout, Model, TabNode } from "flexlayout-react";
2-
import { useEffect, useState } from "react";
32
import SuspensionGauge from "./visualizations/SuspensionGauge";
43
import CarWireframe from "./visualizations/CarWireframe";
54
import GForceGauge from "./visualizations/GForceGauge";
6-
import LineChartLightning from "./visualizations/lightning-charts/LineChartLightning";
5+
import LineChart from "./visualizations/lightning-charts/LineChart";
76
import TextBox from "./visualizations/TextBox";
7+
import { CornersOut, X } from "@phosphor-icons/react";
8+
import GPSInternal from "./visualizations/GPS/GPS";
89

910
const model = Model.fromJson({
1011
global: {},
@@ -17,14 +18,25 @@ const model = Model.fromJson({
1718
type: "row",
1819
weight: 30,
1920
children: [
21+
// {
22+
// type: "tabset",
23+
// weight: 30,
24+
// children: [
25+
// {
26+
// type: "tab",
27+
// name: "Suspension",
28+
// component: "suspension-gauge",
29+
// },
30+
// ],
31+
// },
2032
{
2133
type: "tabset",
22-
weight: 30,
34+
weight: 33,
2335
children: [
2436
{
2537
type: "tab",
26-
name: "Suspension",
27-
component: "suspension-gauge",
38+
name: "GPS",
39+
component: "gps",
2840
},
2941
],
3042
},
@@ -51,17 +63,6 @@ const model = Model.fromJson({
5163
type: "row",
5264
weight: 70,
5365
children: [
54-
{
55-
type: "tabset",
56-
weight: 33,
57-
children: [
58-
{
59-
type: "tab",
60-
name: "Chart 1",
61-
component: "acc-seg-0-voltage-linegraph",
62-
},
63-
],
64-
},
6566
{
6667
type: "tabset",
6768
weight: 33,
@@ -133,7 +134,7 @@ export default function FlexLayoutComponent() {
133134
"car-wireframe": <CarWireframe />,
134135
"g-force-gauge": <GForceGauge x={1} y={1} z={1} />,
135136
"acc-seg-0-voltage-linegraph": (
136-
<LineChartLightning
137+
<LineChart
137138
title={"Acc Seg 0 Voltage"}
138139
yAxisTitle="Voltage"
139140
yAxisColumns={[
@@ -144,29 +145,27 @@ export default function FlexLayoutComponent() {
144145
"Seg0_VOLT_4",
145146
"Seg0_VOLT_5",
146147
]}
148+
yAxisUnits="volts"
147149
/>
148150
),
149151
"timings-box": (
150152
<div className="p-0">
151-
<TextBox
152-
title="Lap Time"
153-
keyName=":LapTime"
154-
/>
155-
<TextBox
156-
title="Lap Number"
157-
keyName=":Lap"
158-
/>
153+
<TextBox title="Lap Time" keyName=":LapTime" />
154+
<TextBox title="Lap Number" keyName=":Lap" /> {/*TODO: lcjs datagrid*/}
155+
<TextBox title="Speed" keyName="VDM_GPS_SPEED" />{" "}
156+
{/*TODO: lcjs guage chart*/}
159157
</div>
160158
),
161159
"brake-pressure-linegraph": (
162-
<LineChartLightning
160+
<LineChart
163161
// title={""}
164-
yAxisTitle="Brake Pressure (psi)"
162+
yAxisTitle="Brake Pressure"
165163
yAxisColumns={["TELEM_STEERBRAKE_BRAKEF", "TELEM_STEERBRAKE_BRAKER"]}
164+
yAxisUnits="psi(?)"
166165
/>
167166
),
168167
"long-accel-linegraph": (
169-
<LineChartLightning
168+
<LineChart
170169
// title={""}
171170
yAxisTitle="Longitudinal Acceleration"
172171
yAxisColumns={[
@@ -176,6 +175,7 @@ export default function FlexLayoutComponent() {
176175
]}
177176
/>
178177
),
178+
gps: <GPSInternal />,
179179
skeleton: <div className="w-full h-full bg-neutral-500"></div>,
180180
};
181181

@@ -188,5 +188,15 @@ export default function FlexLayoutComponent() {
188188
];
189189
}
190190

191-
return <Layout realtimeResize={true} model={model} factory={factory} />;
191+
return (
192+
<Layout
193+
realtimeResize={true}
194+
model={model}
195+
factory={factory}
196+
icons={{
197+
close: <X color="gray" weight="bold" />,
198+
maximize: <CornersOut color="gray" weight="bold" />,
199+
}}
200+
/>
201+
);
192202
}

‎frontend/app/components/visualizations/GPS/GPS.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
"use client";
2+
import React, { useCallback, useState } from "react";
3+
4+
import { Text, Button, ActionIcon, Checkbox, Menu, Slider } from "@mantine/core";
5+
import { Gear, GlobeHemisphereWest, LineVertical } from "@phosphor-icons/react";
6+
import GPSInternal from "./GPSInternal";
7+
8+
export default function GPS() {
9+
const [useLeaflet, setUseLeaflet] = useState(true);
10+
const [useBgSeries, setUseBgSeries] = useState(false);
11+
const [trackThickness, setTrackThickness] = useState(25);
12+
const [carLineThickness, setCarLineThickness] = useState(5);
13+
const reset = useCallback(() => {
14+
setUseBgSeries(false);
15+
setUseLeaflet(true);
16+
setTrackThickness(25);
17+
setCarLineThickness(5);
18+
}, []);
19+
20+
return (
21+
<>
22+
<Menu position="left">
23+
<Menu.Target>
24+
<div className="absolute right-3 top-3 z-50">
25+
<ActionIcon>
26+
<Gear />
27+
</ActionIcon>
28+
</div>
29+
</Menu.Target>
30+
<Menu.Dropdown>
31+
<Menu.Label>Configure GPS</Menu.Label>
32+
<Menu.Item>
33+
<Checkbox
34+
checked={useLeaflet}
35+
onChange={(e) => setUseLeaflet(e.currentTarget.checked)}
36+
label="Toggle Map"
37+
// {<GlobeHemisphereWest size={14} />}
38+
/>
39+
</Menu.Item>
40+
<Menu.Item>
41+
<Checkbox
42+
checked={useBgSeries}
43+
onChange={(e) => setUseBgSeries(e.currentTarget.checked)}
44+
label="Toggle Track"
45+
// {<LineVertical size={14} weight="bold" />}
46+
/>
47+
</Menu.Item>
48+
<Menu.Divider />
49+
<Menu.Item>
50+
<Text>Track Thickness</Text>
51+
<Slider
52+
step={1}
53+
min={10}
54+
max={50}
55+
value={trackThickness}
56+
onChange={setTrackThickness}
57+
/>
58+
</Menu.Item>
59+
<Menu.Item>
60+
<Text>Car Line Thickness</Text>
61+
<Slider
62+
step={1}
63+
min={1}
64+
max={15}
65+
value={carLineThickness}
66+
onChange={setCarLineThickness}
67+
/>
68+
</Menu.Item>
69+
<Menu.Divider />
70+
<Menu.Item onClick={reset}>Reset</Menu.Item>
71+
72+
{/* todo: configure gradient keynames via dropdown */}
73+
</Menu.Dropdown>
74+
</Menu>
75+
<div>
76+
<GPSInternal
77+
useLeaflet={useLeaflet}
78+
useBgSeries={useBgSeries}
79+
trackThickness={trackThickness}
80+
carLineThickness={carLineThickness}
81+
/>
82+
</div>
83+
</>
84+
);
85+
}

0 commit comments

Comments
 (0)