Format download count number in weekly sparkline tooltip (#8266)

Author: szakarias

pkg/_pub_shared/lib/format/number_format.dart

@@ -19,6 +19,20 @@ String _toFixed(int value, int d) {
   return (((value * 10) ~/ d) / 10).toStringAsFixed(1);
 }
 
+/// Formats an int [value] with commas as thousand seperators.
+String formatWithThousandSeperators(int value) {
+  final digits = value.toString().split('');
+  final l = digits.length - 1;
+  final buffer = StringBuffer();
+  for (int j = 0; j <= l; j++) {
+    if (j > 0 && j % 3 == 0) {
+      buffer.write(',');
+    }
+    buffer.write(digits[l - j]);
+  }
+  return buffer.toString().split('').reversed.join();
+}
+
 /// Formats an int [value] to human readable chunk and suffix with at most 3
 /// significant digits.
 ({String value, String suffix}) formatWith3SignificantDigits(int value) {

pkg/_pub_shared/test/format/number_format_test.dart

@@ -66,4 +66,18 @@ void main() {
     expect(formatWith3SignificantDigits(19000000000),
         (value: '19.0', suffix: 'B'));
   });
+
+  test('Number with thousand seperators', () {
+    // expect(formatWithThousandSeperators(1), '1');
+    expect(formatWithThousandSeperators(10), '10');
+    expect(formatWithThousandSeperators(100), '100');
+    expect(formatWithThousandSeperators(1000), '1,000');
+    expect(formatWithThousandSeperators(10000), '10,000');
+    expect(formatWithThousandSeperators(100000), '100,000');
+    expect(formatWithThousandSeperators(1000000), '1,000,000');
+    expect(formatWithThousandSeperators(10000000), '10,000,000');
+    expect(formatWithThousandSeperators(100000000), '100,000,000');
+    expect(formatWithThousandSeperators(1000000000), '1,000,000,000');
+    expect(formatWithThousandSeperators(10000000000), '10,000,000,000');
+  });
 }

pkg/web_app/lib/src/widget/weekly_sparkline/widget.dart

@@ -1,6 +1,7 @@
 import 'dart:math';
 
 import 'package:_pub_shared/format/encoding.dart';
+import 'package:_pub_shared/format/number_format.dart';
 import 'package:web/web.dart';
 
 void create(HTMLElement element, Map<String, String> options) {
@@ -145,8 +146,7 @@ void drawChart(Element svg, HTMLDivElement toolTip, HTMLDivElement chartSubText,
     final coords = computeCoordinates(selectedDay.date, selectedDay.downloads);
     sparklineSpot.setAttribute('cy', '${coords.$2}');
     sparklineCursor.setAttribute('transform', 'translate(${coords.$1}, 0)');
-
-    toolTip.text = '${selectedDay.downloads}';
+    toolTip.text = '${formatWithThousandSeperators(selectedDay.downloads)}';
 
     final startDate = selectedDay.date.subtract(Duration(days: 7));
     chartSubText.text =