fix: Update service to use display_index as the main sort order (#60)

* fix: Update service to use display_index as the main sort order

* chore: auto-fix linting and formatting issues

* Update src/types/nezha-api.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: huYang <306061454@qq.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/components/NetworkChart.tsx

@@ -177,18 +177,23 @@ export function NetworkChart({
 
 	const formattedData = formatData(monitorData.data);
 
-	const monitorIdByName = new Map(
+	const monitorInfoByName = new Map(
-		monitorData.data.map((item) => [item.monitor_name, item.monitor_id]),
+		monitorData.data.map((item) => [
+			item.monitor_name,
+			{ id: item.monitor_id, displayIndex: item.display_index },
+		]),
 	);
 	const chartDataKey = Object.keys(transformedData).sort((a, b) => {
-		const aId = monitorIdByName.get(a);
+		const aInfo = monitorInfoByName.get(a);
-		const bId = monitorIdByName.get(b);
+		const bInfo = monitorInfoByName.get(b);
-		if (aId === undefined && bId === undefined) {
+		if (!aInfo && !bInfo) return a.localeCompare(b);
-			return a.localeCompare(b);
+		if (!aInfo) return 1;
-		}
+		if (!bInfo) return -1;
-		if (aId === undefined) return 1;
+
-		if (bId === undefined) return -1;
+		const indexDiff = (bInfo.displayIndex ?? 0) - (aInfo.displayIndex ?? 0);
-		return aId - bId;
+		if (indexDiff !== 0) return indexDiff;
+
+		return aInfo.id - bInfo.id;
 	});
 
 	const initChartConfig = {

src/types/nezha-api.ts

@@ -93,6 +93,7 @@ export type ServerMonitorChart = {
 export interface NezhaMonitor {
 	monitor_id: number;
 	monitor_name: string;
+	display_index?: number;
 	server_id: number;
 	server_name: string;
 	created_at: number[];