Skip to content

Commit d268406

Browse files
JexsieJexsie
committed
fix up
1 parent 42c496e commit d268406

3 files changed

Lines changed: 38 additions & 65 deletions

File tree

‎frontend/src/charts/GraphCard.jsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ function GraphCard({ data = [], timeStamps = [] }) {
4747
tension: 0,
4848
pointRadius: 0,
4949
pointHoverRadius: 3,
50-
pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
51-
pointHoverBackgroundColor: tailwindConfig().theme.colors.blue[400],
50+
pointBackgroundColor: tailwindConfig().theme.colors.orange[400],
51+
pointHoverBackgroundColor: tailwindConfig().theme.colors.orange[400],
5252
pointBorderWidth: 0,
5353
pointHoverBorderWidth: 0,
5454
clip: 20,
@@ -61,8 +61,8 @@ function GraphCard({ data = [], timeStamps = [] }) {
6161
tension: 0,
6262
pointRadius: 0,
6363
pointHoverRadius: 3,
64-
pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
65-
pointHoverBackgroundColor: tailwindConfig().theme.colors.blue[400],
64+
pointBackgroundColor: tailwindConfig().theme.colors.orange[400],
65+
pointHoverBackgroundColor: tailwindConfig().theme.colors.orange[400],
6666
pointBorderWidth: 0,
6767
pointHoverBorderWidth: 0,
6868
clip: 20,
@@ -75,22 +75,22 @@ function GraphCard({ data = [], timeStamps = [] }) {
7575
tension: 0,
7676
pointRadius: 0,
7777
pointHoverRadius: 3,
78-
pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
79-
pointHoverBackgroundColor: tailwindConfig().theme.colors.blue[400],
78+
pointBackgroundColor: tailwindConfig().theme.colors.red[400],
79+
pointHoverBackgroundColor: tailwindConfig().theme.colors.red[400],
8080
pointBorderWidth: 0,
8181
pointHoverBorderWidth: 0,
8282
clip: 20,
8383
},
8484
{
8585
...smooth,
86-
borderColor: tailwindConfig().theme.colors.blue[400],
86+
borderColor: tailwindConfig().theme.colors.blue[600],
8787
fill: false,
8888
borderWidth: 2,
8989
tension: 0,
9090
pointRadius: 0,
9191
pointHoverRadius: 3,
92-
pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
93-
pointHoverBackgroundColor: tailwindConfig().theme.colors.blue[400],
92+
pointBackgroundColor: tailwindConfig().theme.colors.blue[600],
93+
pointHoverBackgroundColor: tailwindConfig().theme.colors.blue[600],
9494
pointBorderWidth: 0,
9595
pointHoverBorderWidth: 0,
9696
clip: 20,
@@ -104,8 +104,8 @@ function GraphCard({ data = [], timeStamps = [] }) {
104104
tension: 0,
105105
pointRadius: 0,
106106
pointHoverRadius: 3,
107-
pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
108-
pointHoverBackgroundColor: tailwindConfig().theme.colors.emerald[500],
107+
pointBackgroundColor: tailwindConfig().theme.colors.orange[500],
108+
pointHoverBackgroundColor: tailwindConfig().theme.colors.orange[500],
109109
pointBorderWidth: 0,
110110
pointHoverBorderWidth: 0,
111111
clip: 20,
@@ -118,8 +118,8 @@ function GraphCard({ data = [], timeStamps = [] }) {
118118
tension: 0,
119119
pointRadius: 0,
120120
pointHoverRadius: 3,
121-
pointBackgroundColor: tailwindConfig().theme.colors.green[500],
122-
pointHoverBackgroundColor: tailwindConfig().theme.colors.green[500],
121+
pointBackgroundColor: tailwindConfig().theme.colors.orange[500],
122+
pointHoverBackgroundColor: tailwindConfig().theme.colors.orange[500],
123123
pointBorderWidth: 0,
124124
pointHoverBorderWidth: 0,
125125
clip: 20,
@@ -132,8 +132,8 @@ function GraphCard({ data = [], timeStamps = [] }) {
132132
tension: 0,
133133
pointRadius: 0,
134134
pointHoverRadius: 3,
135-
pointBackgroundColor: tailwindConfig().theme.colors.green[500],
136-
pointHoverBackgroundColor: tailwindConfig().theme.colors.green[500],
135+
pointBackgroundColor: tailwindConfig().theme.colors.red[500],
136+
pointHoverBackgroundColor: tailwindConfig().theme.colors.red[500],
137137
pointBorderWidth: 0,
138138
pointHoverBorderWidth: 0,
139139
clip: 20,

‎frontend/src/pages/benchmark-details-chart.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useState } from "react";
22
import { useParams } from "react-router-dom";
33
import { useEnvironments, useMeasurements } from "../hooks";
44
import Datepicker from "../components/DatePicker";

‎frontend/src/pages/benchmark-details-table.jsx‎

Lines changed: 22 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,14 @@ import Select from "../components/Select";
88

99
const MeasurementsTableComponent = ({ type }) => {
1010
const { id } = useParams();
11-
const { data } = useMeasurements(id);
11+
12+
const [filters, setFilters] = useState({
13+
benchmarkId: id,
14+
start: "",
15+
end: "",
16+
});
17+
18+
const { data } = useMeasurements(filters);
1219

1320
// Number of items per page
1421
const [itemsPerPage, setItemsPerPage] = useState(10);
@@ -24,58 +31,24 @@ const MeasurementsTableComponent = ({ type }) => {
2431
// Calculate the total number of pages
2532
const totalPages = dataSlicer(data, itemsPerPage);
2633

34+
const handDateChange = (field, date) => {
35+
setFilters((prev) => ({ ...prev, [field]: date }));
36+
};
37+
2738
return (
2839
<div className="py-6">
2940
<div className="flow-root">
30-
<div className="flex gap-2 justify-around items-center mt-4">
31-
<Select
32-
label="Environment"
33-
options={["options"]}
34-
valueExtractor={(name) => name}
35-
labelExtractor={(name) => name}
41+
<div className="flex gap-2 ml-8">
42+
<Datepicker
43+
label="Start Date"
44+
value={filters.start}
45+
onChange={(date) => handDateChange("start", date)}
46+
/>
47+
<Datepicker
48+
label="End Date"
49+
value={filters.end}
50+
onChange={(date) => handDateChange("end", date)}
3651
/>
37-
<div className="flex gap-4 ml-4">
38-
<Datepicker label="Start Date" />
39-
<Datepicker label="End Date" />
40-
</div>
41-
<div className="flex gap-4 mt-5">
42-
<div className="flex items-center">
43-
<input
44-
name="ShowMin"
45-
type="checkbox"
46-
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
47-
/>
48-
<label htmlFor="ShowMin" className="ml-2 text-xs text-gray-500">
49-
Show Minimum
50-
</label>
51-
</div>
52-
<div className="flex items-center">
53-
<input
54-
name="ShowMax"
55-
type="checkbox"
56-
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
57-
/>
58-
<label htmlFor="ShowMax" className="ml-2 text-xs text-gray-500">
59-
Show Maximum
60-
</label>
61-
</div>
62-
<div className="flex items-center">
63-
<input
64-
name="ShowError"
65-
type="checkbox"
66-
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
67-
/>
68-
<label htmlFor="ShowError" className="ml-2 text-xs text-gray-500">
69-
Show Error
70-
</label>
71-
</div>
72-
</div>
73-
{/* <Select
74-
label="Units"
75-
options={["options"]}
76-
valueExtractor={(name) => name}
77-
labelExtractor={(name) => name}
78-
/> */}
7952
</div>
8053
<div className="overflow-x-auto mt-4">
8154
{" "}

0 commit comments

Comments
 (0)