|
| 1 | +import 'dart:math'; |
| 2 | + |
| 3 | +import 'package:_pub_shared/format/encoding.dart'; |
| 4 | +import 'package:web/web.dart'; |
| 5 | + |
| 6 | +void create(HTMLElement element, Map<String, String> options) { |
| 7 | + final dataPoints = options['points']; |
| 8 | + if (dataPoints == null) { |
| 9 | + throw UnsupportedError('data-weekly-sparkline-points required'); |
| 10 | + } |
| 11 | + |
| 12 | + final svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
| 13 | + element.append(svg); |
| 14 | + |
| 15 | + final toolTip = HTMLDivElement() |
| 16 | + ..setAttribute('class', 'weekly-downloads-sparkline-tooltip'); |
| 17 | + document.body!.appendChild(toolTip); |
| 18 | + |
| 19 | + final chartSubText = HTMLDivElement() |
| 20 | + ..setAttribute('class', 'weekly-downloads-sparkline-text'); |
| 21 | + element.append(chartSubText); |
| 22 | + |
| 23 | + List<({DateTime date, int downloads})> prepareDataForSparkline( |
| 24 | + String dataPoints) { |
| 25 | + final decoded = decodeIntsFromLittleEndianBase64String(dataPoints); |
| 26 | + final newestDate = DateTime.fromMillisecondsSinceEpoch(decoded[0] * 1000); |
| 27 | + final weeklyDownloads = decoded.sublist(1); |
| 28 | + return List.generate( |
| 29 | + weeklyDownloads.length, |
| 30 | + (i) => ( |
| 31 | + date: newestDate.copyWith(day: newestDate.day - 7 * i), |
| 32 | + downloads: weeklyDownloads[i] |
| 33 | + )).reversed.toList(); |
| 34 | + } |
| 35 | + |
| 36 | + drawChart(svg, toolTip, chartSubText, prepareDataForSparkline(dataPoints)); |
| 37 | +} |
| 38 | + |
| 39 | +void drawChart(Element svg, HTMLDivElement toolTip, HTMLDivElement chartSubText, |
| 40 | + List<({DateTime date, int downloads})> data) { |
| 41 | + final height = 80; |
| 42 | + final width = 190; |
| 43 | + final drawingHeight = 75; |
| 44 | + final lastDay = data.last.date; |
| 45 | + final firstDay = data.first.date; |
| 46 | + final xAxisSpan = lastDay.difference(firstDay); |
| 47 | + final maxDownloads = data.fold<int>(0, (a, b) => max<int>(a, b.downloads)); |
| 48 | + |
| 49 | + final toolTipOffsetFromMouse = 15; |
| 50 | + |
| 51 | + (double, double) computeCoordinates(DateTime date, int downloads) { |
| 52 | + final duration = date.difference(firstDay); |
| 53 | + final x = width * duration.inMilliseconds / xAxisSpan.inMilliseconds; |
| 54 | + final y = height - drawingHeight * (downloads / maxDownloads); |
| 55 | + return (x, y); |
| 56 | + } |
| 57 | + |
| 58 | + String generateSparkline(List<({DateTime date, int downloads})> data) { |
| 59 | + final line = StringBuffer(); |
| 60 | + var c = 'M'; |
| 61 | + for (final d in data) { |
| 62 | + final (x, y) = computeCoordinates(d.date, d.downloads); |
| 63 | + line.write(' $c$x $y'); |
| 64 | + c = 'L'; |
| 65 | + } |
| 66 | + return line.toString(); |
| 67 | + } |
| 68 | + |
| 69 | + String formatDate(DateTime date) { |
| 70 | + final year = '${date.year}'; |
| 71 | + final month = date.month < 10 ? '0${date.month}' : '${date.month}'; |
| 72 | + final day = date.day < 10 ? '0${date.day}' : '${date.day}'; |
| 73 | + return '$year.$month.$day'; |
| 74 | + } |
| 75 | + |
| 76 | + // Render chart |
| 77 | + |
| 78 | + chartSubText.text = '${formatDate(firstDay)} - ${formatDate(lastDay)}'; |
| 79 | + |
| 80 | + final chart = SVGGElement(); |
| 81 | + final frame = SVGRectElement(); |
| 82 | + frame.setAttribute('height', '$height'); |
| 83 | + frame.setAttribute('width', '$width'); |
| 84 | + frame.setAttribute('style', 'fill:white;stroke-width:1;stroke:white'); |
| 85 | + chart.append(frame); |
| 86 | + |
| 87 | + final sparklineBar = SVGLineElement(); |
| 88 | + final sparklineCursor = SVGGElement(); |
| 89 | + final sparklineSpot = SVGCircleElement(); |
| 90 | + |
| 91 | + sparklineCursor |
| 92 | + ..appendChild(sparklineBar) |
| 93 | + ..appendChild(sparklineSpot); |
| 94 | + |
| 95 | + sparklineSpot |
| 96 | + ..setAttribute('class', 'weekly-sparkline') |
| 97 | + ..setAttribute('r', '2'); |
| 98 | + |
| 99 | + sparklineBar.setAttribute('class', 'weekly-sparkline-bar'); |
| 100 | + sparklineBar.setAttribute('x1', '0'); |
| 101 | + sparklineBar.setAttribute('x2', '0'); |
| 102 | + sparklineBar.setAttribute('y1', '0'); |
| 103 | + sparklineBar.setAttribute('y2', '$height'); |
| 104 | + chart.append(sparklineCursor); |
| 105 | + |
| 106 | + final line = generateSparkline(data); |
| 107 | + final sparkline = SVGPathElement(); |
| 108 | + sparkline.setAttribute('class', 'weekly-sparkline-line'); |
| 109 | + sparkline.setAttribute('d', '$line'); |
| 110 | + |
| 111 | + final area = SVGPathElement(); |
| 112 | + area.setAttribute('class', 'weekly-sparkline-area'); |
| 113 | + area.setAttribute('d', '$line L$width $height L0 $height Z'); |
| 114 | + |
| 115 | + chart.append(sparkline); |
| 116 | + chart.append(area); |
| 117 | + |
| 118 | + svg.append(chart); |
| 119 | + |
| 120 | + // Setup mouse handling |
| 121 | + |
| 122 | + DateTime? lastSelectedDay; |
| 123 | + chart.onMouseMove.listen((e) { |
| 124 | + sparklineCursor.setAttribute('style', 'opacity:1'); |
| 125 | + toolTip.setAttribute( |
| 126 | + 'style', |
| 127 | + 'top:${e.y + toolTipOffsetFromMouse + document.scrollingElement!.scrollTop}px;' |
| 128 | + 'left:${e.x}px;'); |
| 129 | + |
| 130 | + final s = (e.x - chart.getBoundingClientRect().x) / width; |
| 131 | + final selectedDayIndex = |
| 132 | + lowerBoundBy<({DateTime date, int downloads}), double>( |
| 133 | + data, |
| 134 | + (e) => |
| 135 | + e.date.difference(firstDay).inMilliseconds / |
| 136 | + xAxisSpan.inMilliseconds, |
| 137 | + (a, b) => a.compareTo(b), |
| 138 | + s); |
| 139 | + final selectedDay = data[selectedDayIndex]; |
| 140 | + if (selectedDay.date == lastSelectedDay) return; |
| 141 | + |
| 142 | + final coords = computeCoordinates(selectedDay.date, selectedDay.downloads); |
| 143 | + sparklineSpot.setAttribute('cy', '${coords.$2}'); |
| 144 | + sparklineCursor.setAttribute('transform', 'translate(${coords.$1}, 0)'); |
| 145 | + |
| 146 | + toolTip.text = '${selectedDay.downloads}'; |
| 147 | + |
| 148 | + final endDate = selectedDay.date.add(Duration(days: 7)); |
| 149 | + chartSubText.text = |
| 150 | + ' ${formatDate(selectedDay.date)} - ${formatDate(endDate)}'; |
| 151 | + |
| 152 | + lastSelectedDay = selectedDay.date; |
| 153 | + }); |
| 154 | + |
| 155 | + void erase(_) { |
| 156 | + sparklineCursor.setAttribute('style', 'opacity:0'); |
| 157 | + toolTip.setAttribute('style', 'opacity:0;position:absolute;'); |
| 158 | + chartSubText.text = '${formatDate(firstDay)} - ${formatDate(lastDay)}'; |
| 159 | + } |
| 160 | + |
| 161 | + erase(1); |
| 162 | + chart.onMouseLeave.listen(erase); |
| 163 | +} |
| 164 | + |
| 165 | +int lowerBoundBy<E, K>(List<E> sortedList, K Function(E element) keyOf, |
| 166 | + int Function(K, K) compare, K value) { |
| 167 | + var min = 0; |
| 168 | + var max = sortedList.length - 1; |
| 169 | + final key = value; |
| 170 | + while (min < max) { |
| 171 | + final mid = min + ((max - min) >> 1); |
| 172 | + final element = sortedList[mid]; |
| 173 | + final comp = compare(keyOf(element), key); |
| 174 | + if (comp < 0) { |
| 175 | + min = mid + 1; |
| 176 | + } else { |
| 177 | + max = mid; |
| 178 | + } |
| 179 | + } |
| 180 | + return min; |
| 181 | +} |
0 commit comments