Skip to content

Commit

Permalink
making cleaner the graph and adding a test for switching tabs (#472)
Browse files Browse the repository at this point in the history 
* making cleaner the graph and adding a test for switching tabs

* fixing lint

* fix lint

* fix lint
  • Loading branch information
Thibault authored and GitHub committed Jul 15, 2025
1 parent e8d28f4 commit 8378518
Show file tree
Hide file tree
Showing 10 changed files with 415 additions and 695 deletions.
1 change: 1 addition & 0 deletions frontend/src/app/_homeComponents/DailySolarActivity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export default function DailySolarActivity() {
console.error("Error fetching Kp index data:", error);
});
}, []);

const optionsDailyCharts = {
chart: {
type: "column",
Expand Down
206 changes: 12 additions & 194 deletions frontend/src/app/_homeComponents/HistoricalSolarCycleData.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
"use client";
import React, { useEffect, useState, useRef } from "react";
import React, { useEffect, useState } from "react";
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import { createStockChartBaseConfig } from "@/lib/chartTemplate";

export default function HistoricalSolarCycleData() {
const [historicalSunSpot, setHistoricalSunSpot] = useState<any>(null);
const [historicalTimestamps, setHistoricalTimestamps] = useState<number[]>(
[],
);
const stockChart = useRef<HighchartsReact.RefObject>(null);

useEffect(() => {
fetch("https://services.swpc.noaa.gov/json/solar-cycle/sunspots.json")
Expand Down Expand Up @@ -66,151 +66,11 @@ export default function HistoricalSolarCycleData() {
formattedHistoricalData,
10,
);
const optionsHistoricalChart = {
chart: {
backgroundColor: "transparent",
reflow: true,
zoomType: "x", // Enable zooming on the x-axis
},
title: {
margin: 20,
text: "Solar Cycle Progression - Historical Data",
style: {
color: "#ffffff",
fontSize: "24px",
},
},
xAxis: {
categories: "datetime",
title: {
style: {
color: "#ffffff",
fontSize: "18px",
},
margin: 20,
},
labels: {
style: {
color: "#ffffff",
fontSize: "14px",
},
formatter: function (
// eslint-disable-next-line no-unused-vars
this: Highcharts.AxisLabelsFormatterContextObject,
): any {
const extremes = this.axis.getExtremes();
const zoomLevel = extremes.max - extremes.min; // Get the current zoom range
if (zoomLevel <= 18 * 30 * 24 * 3600 * 1000) {
// If zoomed in to less than or equal to 1 month
return Highcharts.dateFormat(
"%b %Y",
Number(this.value),
); // Show month and year
} else {
return Highcharts.dateFormat("%Y", Number(this.value)); // Show only the year
}
},
},
tickColor: "#ffffff", // Customize the tick color
lineColor: "#ffffff", // Customize the axis line color
},

yAxis: {
opposite: false, // Place the y-axis on the right side
title: {
text: "Sunspot Number (SSN)",
style: {
color: "#ffffff",
fontSize: "18px",
},
},
labels: {
style: {
color: "#ffffff",
fontSize: "14px",
},
},
tickColor: "#ffffff", // Customize the tick color
lineColor: "#ffffff", // Customize the axis line color
},

navigator: {
enabled: true, // Enable the navigator (zoom scroll bar)
outlineColor: "#ffffff", // Customize the outline color
maskFill: "rgba(255, 255, 255, 0.2)", // Customize the mask fill
handles: {
backgroundColor: "#ffffff", // Customize the handles
borderColor: "#000000",
},
},
rangeSelector: {
enabled: true, // Enable the range selector
buttonSpacing: 10, // Space between buttons
buttonTheme: {
fill: "#333333",
stroke: "#ffffff",
"stroke-width": 2, // Border width
r: 5,
width: 100, // Explicitly set the button width
height: 30, // Explicitly set the button height
style: {
color: "#ffffff",
fontSize: "14px",
fontWeight: "bold",
whiteSpace: "nowrap", // Prevent text wrapping
},
states: {
hover: {
fill: "#555555", // Background color on hover
style: {
color: "#ffffff", // Text color on hover
},
},
select: {
fill: "#00d3ff", // Background color when selected
style: {
color: "#000000", // Text color when selected
},
},
},
},
labelStyle: {
color: "#ffffff", // Customize the "Zoom" label color
fontSize: "14px",
},

inputEnabled: false, // Disable input fields for date selection
selected: 0,
buttons: [
{
type: "custom",
text: "Default",
events: {
click: function () {
if (stockChart.current) {
const chart = stockChart.current.chart;
const now = new Date().getTime(); // Current timestamp
const twentyFiveYearsAgo =
new Date().setFullYear(
new Date().getFullYear() - 25,
); // Timestamp for 25 years ago

// Set the x-axis extremes to the last 25 years
chart.xAxis[0].setExtremes(
twentyFiveYearsAgo,
now,
);
}
},
},
},
{
type: "all",
text: "All",
},
],
},

const optionsHistoricalChart = createStockChartBaseConfig({
title: "Historical Solar Cycle Data",
yAxisTitle: "Sunspot Number (SSN)",
yAxisArray: [],
series: [
{
name: "Sunspot Number",
Expand All @@ -225,46 +85,17 @@ export default function HistoricalSolarCycleData() {
color: "#ffabc8", // Customize the smoothed line color
},
],

legend: {
enabled: true, // Hide legend for cleaner look
enabled: true,
itemStyle: {
color: "#ffffff", // Customize legend text color
fontSize: "14px", // Customize legend text size
color: "#ffffff",
fontSize: "14px",
},
itemHoverStyle: {
color: "#00d3ff", // Customize legend hover text color
color: "#00d3ff",
},
},
responsive: {
rules: [
{
condition: {
maxWidth: 600, // Apply this rule for small screens
},
chartOptions: {
title: {
style: {
fontSize: "18px",
},
},
xAxis: {
labels: {
style: {
fontSize: "12px",
},
},
},
yAxis: {
labels: {
style: {
fontSize: "12px",
},
},
},
},
},
],
},
credits: {
enabled: true,
text: "Data Source: NOAA SWPC",
Expand All @@ -275,19 +106,7 @@ export default function HistoricalSolarCycleData() {
textDecoration: "underline",
},
},
};
useEffect(() => {
if (stockChart.current) {
const chart = stockChart.current.chart;
const now = new Date().getTime(); // Current timestamp
const twentyFiveYearsAgo = new Date().setFullYear(
new Date().getFullYear() - 25,
); // Timestamp for 25 years ago

// Set the x-axis extremes to the last 25 years
chart.xAxis[0].setExtremes(twentyFiveYearsAgo, now);
}
}, [stockChart]);
});

return (
<div
Expand All @@ -301,7 +120,6 @@ export default function HistoricalSolarCycleData() {
options={optionsHistoricalChart}
containerProps={{ className: "w-full h-full" }}
constructorType="stockChart"
ref={stockChart}
/>
</div>
);
Expand Down
1 change: 0 additions & 1 deletion frontend/src/app/satellites/[satelliteSlug]/_infoSat/satImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ export default function SatImage({
files: SlackFile[];
}

console.log("Fetched Slack images:", data);
const rightMessage: SlackMessage | undefined = (
data as SlackMessage[]
).find((message: SlackMessage) => {
Expand Down
1 change: 0 additions & 1 deletion frontend/src/app/satellites/[satelliteSlug]/_infoSat/satTelemetry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ export default function SatTelemetry({
batteryVoltageData[1][index] / 1000,
],
);

{
/* Battery Current Data */
}
Expand Down
11 changes: 10 additions & 1 deletion frontend/src/app/satellites/[satelliteSlug]/_infoSat/tabBars.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,19 @@ import { useTabContext } from "@/app/satellites/tabContext";
export default function TabBar() {
const { selectedTab, setSelectedTab } = useTabContext();
return (
<div className="flex items-stretch justify-center ">
<div
className="flex items-stretch justify-center"
data-testid="satellite-tab-bar"
>
<button
className={`flex w-full items-center justify-center border-b-2 ${
selectedTab === "sat parameters"
? "border-blue-500"
: "border-gray-600"
} bg-black p-5 text-white hover:bg-gray-700`}
onClick={() => setSelectedTab("sat parameters")}
aria-selected={selectedTab === "sat parameters"}
role="tab"
>
<span className="text-lg">Satellite Parameters</span>
</button>
Expand All @@ -27,6 +32,8 @@ export default function TabBar() {
: "border-gray-600"
} bg-black p-5 text-white hover:bg-gray-700`}
onClick={() => setSelectedTab("satellite image")}
aria-selected={selectedTab === "satellite image"}
role="tab"
>
<span className="text-lg">Satellite Last Image</span>
</button>
Expand All @@ -37,6 +44,8 @@ export default function TabBar() {
: "border-gray-600"
} bg-black p-5 text-white hover:bg-gray-700`}
onClick={() => setSelectedTab("satellite telemetry")}
aria-selected={selectedTab === "satellite telemetry"}
role="tab"
>
<span className="text-lg">Satellite Telemetry</span>
</button>
Expand Down
Loading

0 comments on commit 8378518

Please sign in to comment.