new: cpu line chart

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(),
+  ));
+}

lib/view/page/server/detail/view.dart

@@ -1,13 +1,14 @@
+import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:icons_plus/icons_plus.dart';
 import 'package:provider/provider.dart';
 import 'package:toolbox/core/extension/context/common.dart';
 import 'package:toolbox/core/extension/context/dialog.dart';
 import 'package:toolbox/core/extension/context/locale.dart';
+import 'package:toolbox/data/model/app/range.dart';
 import 'package:toolbox/data/model/app/server_detail_card.dart';
 import 'package:toolbox/data/model/app/shell_func.dart';
 import 'package:toolbox/data/model/server/battery.dart';
-import 'package:toolbox/data/model/server/cpu.dart';
 import 'package:toolbox/data/model/server/disk.dart';
 import 'package:toolbox/data/model/server/net_speed.dart';
 import 'package:toolbox/data/model/server/nvdia.dart';
@@ -19,14 +20,16 @@ import 'package:toolbox/view/widget/expand_tile.dart';
 import 'package:toolbox/view/widget/kv_row.dart';
 import 'package:toolbox/view/widget/server_func_btns.dart';
 
-import '../../../core/extension/numx.dart';
-import '../../../core/route.dart';
-import '../../../data/model/server/server.dart';
-import '../../../data/provider/server.dart';
-import '../../../data/res/color.dart';
-import '../../../data/res/ui.dart';
-import '../../widget/appbar.dart';
-import '../../widget/cardx.dart';
+import '../../../../core/extension/numx.dart';
+import '../../../../core/route.dart';
+import '../../../../data/model/server/server.dart';
+import '../../../../data/provider/server.dart';
+import '../../../../data/res/color.dart';
+import '../../../../data/res/ui.dart';
+import '../../../widget/appbar.dart';
+import '../../../widget/cardx.dart';
+
+part 'misc.dart';
 
 class ServerDetailPage extends StatefulWidget {
   const ServerDetailPage({super.key, required this.spi});
@@ -183,12 +186,21 @@ class _ServerDetailPageState extends State<ServerDetailPage>
           ),
         ),
         childrenPadding: const EdgeInsets.symmetric(vertical: 13),
-        initiallyExpanded: _getInitExpand(ss.cpu.coresCount),
+        initiallyExpanded: true,
         trailing: Row(
           mainAxisSize: MainAxisSize.min,
           children: details,
         ),
-        children: _buildCPUProgress(ss.cpu),
+        children: [
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 17, vertical: 7),
+            child: SizedBox(
+              height: 137,
+              width: _media.size.width - 26 - 34,
+              child: _buildLineChart(ss.cpu.spots, ss.cpu.rangeX),
+            ),
+          ),
+        ],
       ),
     );
   }
@@ -213,20 +225,6 @@ class _ServerDetailPageState extends State<ServerDetailPage>
     );
   }
 
-  List<Widget> _buildCPUProgress(Cpus cs) {
-    final children = <Widget>[];
-    for (var i = 0; i < cs.coresCount; i++) {
-      if (i == 0) continue;
-      children.add(
-        Padding(
-          padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 17),
-          child: _buildProgress(cs.usedPercent(coreIdx: i)),
-        ),
-      );
-    }
-    return children;
-  }
-
   Widget _buildProgress(double percent) {
     if (percent > 100) percent = 100;
     final percentWithinOne = percent / 100;
@@ -756,40 +754,3 @@ class _ServerDetailPageState extends State<ServerDetailPage>
     return len <= (max ?? 3);
   }
 }
-
-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)));
-    }
-  }
-}