Skip to content

Commit 7566c66

Browse files
bvngeebvngee
committed
frontend: add icons, major line charts improvements
1 parent a82c4ae commit 7566c66

File tree

9 files changed

+165
-230
lines changed

9 files changed

+165
-230
lines changed

‎frontend/app/components/ItemContainer.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ReactNode } from "react";
2+
3+
interface ItemContainerProps {
4+
children: ReactNode;
5+
}
6+
7+
export default function ItemContainer({ children }: ItemContainerProps) {
8+
return (
9+
<div className="bg-background-2 rounded-xl p-4">
10+
{children}
11+
</div>
12+
)
13+
};

‎frontend/app/components/ModalContainer.tsx‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎frontend/app/components/TestChart.tsx‎

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,43 @@
11
import React, { RefObject, useEffect, useRef } from "react";
2-
import { Chart, ChartItem, ChartConfiguration, LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, ScatterController, ChartData, ChartDataset, ChartType, BarController, BarElement } from "chart.js";
3-
Chart.register(LineController, BarController, BarElement, ScatterController, LineElement, PointElement, LinearScale, Title, CategoryScale);
2+
import { Chart, ChartItem, ChartConfiguration, LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, ChartType, Legend } from "chart.js";
3+
Chart.register(LineController, LineElement, PointElement, LinearScale, Title, Legend, CategoryScale);
44

55
// ArrayLike<any> is used for data because chartjs supports TypedArrays and we
66
// might use those too down the line
77
interface CardLineChartProps {
88
title: string;
9-
color: string;
10-
datasetNames?: string[]; // optional list of names to give each y-value set
119
numRows: number; // total number of rows of data. Used to rerender the chart on updates
1210
dataX: ArrayLike<any>; // eg. timestamps
1311
dataY: ArrayLike<any>[]; // 1 or more y-value sets
12+
datasetNames?: string[]; // optional list of names to give each y-value set
13+
dataXUnits: string,
14+
dataYUnits: string,
1415
}
1516

1617
const CHART_TYPE: ChartType = 'line'
1718

18-
function initChart(chartRef: RefObject<ChartItem>, { title, color, dataY, datasetNames: names }: CardLineChartProps) {
19+
const unique_colors: (keyof DefaultColors)[] = [
20+
"red", "amber", "lime", "cyan", "blue", "violet", "fuchsia", "pink"
21+
]
22+
import colors from "tailwindcss/colors";
23+
import { DefaultColors } from "tailwindcss/types/generated/colors";
24+
25+
function initChart(chartRef: RefObject<ChartItem>, { title, dataY, datasetNames, dataXUnits, dataYUnits }: CardLineChartProps) {
1926

2027
const config: ChartConfiguration<ChartType, typeof dataY[0], number> = {
2128
type: CHART_TYPE,
2229
data: {
2330
datasets: dataY.map((_, i) => ({
2431
data: [],
25-
label: names ? names[i] : (dataY.length > 1 ? `Dataset ${i}` : title),
32+
label: datasetNames ? datasetNames[i] : (dataY.length > 1 ? `Dataset ${i}` : title),
33+
backgroundColor: `${colors[unique_colors[i]]['900']}`,
34+
borderColor: `${colors[unique_colors[i]]['700']}`,
2635
})),
2736
// labels: [],
2837
},
2938
options: {
3039
datasets: {
3140
line: {
32-
backgroundColor: color,
33-
borderColor: color,
3441
pointRadius: 0, // too noisy
3542
borderWidth: 2,
3643
spanGaps: true,
@@ -40,16 +47,50 @@ function initChart(chartRef: RefObject<ChartItem>, { title, color, dataY, datase
4047
parsing: false, // requires data to be in internal obj format, should improve performance
4148
responsive: true,
4249
animation: false,
50+
interaction: {
51+
mode: 'nearest'
52+
},
53+
plugins: {
54+
legend: {
55+
display: true,
56+
position: 'top',
57+
align: 'center',
58+
labels: {
59+
font: { size: 12 },
60+
boxWidth: 8,
61+
boxHeight: 8,
62+
}
63+
},
64+
title: {
65+
display: false,
66+
text: title,
67+
},
68+
tooltip: {
69+
enabled: true,
70+
intersect: false,
71+
}
72+
},
73+
aspectRatio: 1.3,
4374
scales: {
4475
x: {
76+
title: {
77+
display: dataXUnits != null,
78+
text: dataXUnits,
79+
font: { size: 14 },
80+
color: colors["neutral"][500],
81+
},
4582
type: 'linear',
46-
// grace: '1%',
4783
ticks: { color: "rgba(255,255,255,.7)" },
4884
grid: { display: false },
4985
},
5086
y: {
87+
title: {
88+
display: dataYUnits != null,
89+
text: dataYUnits,
90+
font: { size: 14 },
91+
color: colors["neutral"][500],
92+
},
5193
type: 'linear',
52-
// grace: '10%',
5394
ticks: { color: "rgba(255,255,255,.7)" },
5495
grid: { color: "rgba(255, 255, 255, 0.15)" },
5596
},
@@ -118,19 +159,15 @@ export default function CardLineChart(props: CardLineChartProps) {
118159

119160
return (
120161
<>
121-
<div className="flex flex-col break-words rounded">
122-
<h6 className="uppercase text-blueGray-100 text-lg font-semibold">
162+
<div className="break-words">
163+
<h6 className="text-lg font-semibold">
123164
{title}
124165
</h6>
125-
<div className="flex-auto">
126-
{/* Chart */}
166+
<div className="">
127167
<div className="relative ">
128168
{/* for some reason tsserver gets confused here... not idea why */}
129169
<canvas ref={chartRef as any}></canvas>
130170
</div>
131-
<p className={"transition-transform duration-500 font-mono select-none"}> Current
132-
Value: {dataY[0] && dataY[0].length > 2 ? dataY[0][dataY[0].length - 1].toFixed(2) : 0.000}
133-
</p>
134171
</div>
135172
</div>
136173
</>

‎frontend/app/globals.css‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
8-
}
5+
/* :root { */
6+
/* --background: var(--color-background-1) */
7+
/* --foreground: var(--color-foreground) */
8+
/* } */
99

10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
15-
}
10+
/* @media (prefers-color-scheme: dark) { */
11+
/* :root { */
12+
/* --background: #0a0a0a; */
13+
/* --foreground: #ededed; */
14+
/* } */
15+
/* } */
1616

17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
21-
}
17+
/* body { */
18+
/* color: var(--foreground); */
19+
/* background: var(--background); */
20+
/* font-family: Arial, Helvetica, sans-serif; */
21+
/* } */

‎frontend/app/layout.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@ export default function RootLayout({
2525
}>) {
2626
return (
2727
<html lang="en">
28-
<body
29-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30-
>
28+
<body className={`
29+
${geistSans.variable} ${geistMono.variable} antialiased
30+
bg-background text-foreground
31+
`}>
3132
{children}
3233
</body>
3334
</html>

0 commit comments

Comments
 (0)