new: cpu line chart

2025-12-17 07:14:28 +01:00 · 2024-04-08 21:24:00 +08:00
parent aed5a63a19
commit 819c53df7e
10 changed files with 234 additions and 83 deletions
--- a/lib/view/page/server/detail/misc.dart
+++ b/lib/view/page/server/detail/misc.dart
@@ -0,0 +1,113 @@
+part of 'view.dart';
+
+enum _NetSortType {
+  device,
+  trans,
+  recv,
+  ;
+
+  bool get isDevice => this == _NetSortType.device;
+  bool get isIn => this == _NetSortType.recv;
+  bool get isOut => this == _NetSortType.trans;
+
+  _NetSortType get next {
+    switch (this) {
+      case device:
+        return trans;
+      case _NetSortType.trans:
+        return recv;
+      case recv:
+        return device;
+    }
+  }
+
+  int Function(String, String) getSortFunc(NetSpeed ns) {
+    switch (this) {
+      case _NetSortType.device:
+        return (b, a) => a.compareTo(b);
+      case _NetSortType.recv:
+        return (b, a) => ns
+            .speedInBytes(ns.deviceIdx(a))
+            .compareTo(ns.speedInBytes(ns.deviceIdx(b)));
+      case _NetSortType.trans:
+        return (b, a) => ns
+            .speedOutBytes(ns.deviceIdx(a))
+            .compareTo(ns.speedOutBytes(ns.deviceIdx(b)));
+    }
+  }
+}
+
+Widget _buildLineChart(List<List<FlSpot>> spots, Range<double> x) {
+  return LineChart(LineChartData(
+    lineTouchData: LineTouchData(
+      touchTooltipData: LineTouchTooltipData(
+        tooltipPadding: const EdgeInsets.all(8),
+        tooltipRoundedRadius: 8,
+        getTooltipItems: (List<LineBarSpot> touchedSpots) {
+          return touchedSpots.map((e) {
+            return LineTooltipItem(
+              'CPU${e.barIndex}: ${e.y.toStringAsFixed(2)}',
+              const TextStyle(
+                fontWeight: FontWeight.bold,
+              ),
+            );
+          }).toList();
+        },
+      ),
+      handleBuiltInTouches: true,
+    ),
+    gridData: FlGridData(
+      show: true,
+      drawVerticalLine: false,
+      horizontalInterval: 20,
+      getDrawingHorizontalLine: (value) {
+        return const FlLine(
+          color: Color(0xff37434d),
+          strokeWidth: 1,
+        );
+      },
+    ),
+    titlesData: FlTitlesData(
+      show: true,
+      rightTitles: const AxisTitles(
+        sideTitles: SideTitles(showTitles: false),
+      ),
+      topTitles: const AxisTitles(
+        sideTitles: SideTitles(showTitles: false),
+      ),
+      bottomTitles: const AxisTitles(
+        sideTitles: SideTitles(showTitles: false),
+      ),
+      leftTitles: AxisTitles(
+        sideTitles: SideTitles(
+          showTitles: true,
+          interval: 1,
+          getTitlesWidget: (val, meta) {
+            if (val % 20 != 0) return UIs.placeholder;
+            return Text(
+              val.toInt().toString(),
+              style: UIs.text12Grey,
+            );
+          },
+          reservedSize: 42,
+        ),
+      ),
+    ),
+    borderData: FlBorderData(show: false),
+    minX: x.start,
+    maxX: x.end,
+    minY: 0,
+    maxY: 100,
+    lineBarsData: spots
+        .map((e) => LineChartBarData(
+              spots: e,
+              isCurved: false,
+              barWidth: 2,
+              isStrokeCapRound: true,
+              color: primaryColor,
+              dotData: const FlDotData(show: false),
+              belowBarData: BarAreaData(show: false),
+            ))
+        .toList(),
+  ));
+}