ISSUE #1646: Improve y-axis scaling of segment effort history chart

robiningelbrecht · robiningelbrecht · commit a70d3fbf97be · 2026-01-12T12:44:59.000+01:00
diff --git a/src/Domain/Segment/SegmentEffort/SegmentEffortHistoryChart.php b/src/Domain/Segment/SegmentEffort/SegmentEffortHistoryChart.php
@@ -22,9 +22,12 @@ public function build(): array
     {
         $data = [];
 
+        $minYAxisValue = 100000;
         foreach ($this->segmentEfforts as $segmentEffort) {
+            $segmentEffortElapsedTimeInSeconds = $segmentEffort->getElapsedTimeInSeconds();
             $segmentEffortStartDate = $segmentEffort->getStartDateTime();
-            $data[] = [$segmentEffortStartDate->format('Y-m-d'), $segmentEffort->getElapsedTimeInSeconds()];
+            $data[] = [$segmentEffortStartDate->format('Y-m-d'), $segmentEffortElapsedTimeInSeconds];
+            $minYAxisValue = min($minYAxisValue, $segmentEffortElapsedTimeInSeconds);
         }
 
         return [
@@ -66,6 +69,7 @@ public function build(): array
             'yAxis' => [
                 [
                     'type' => 'value',
+                    'min' => max(0, floor($minYAxisValue / 5) * 5),
                     'axisLabel' => [
                         'formatter' => 'formatSecondsTrimZero',
                     ],
diff --git a/tests/Application/Build/BuildSegmentsHtml/__snapshots__/BuildSegmentsHtmlCommandHandlerTest--testHandle--segment-segment-1-html.html b/tests/Application/Build/BuildSegmentsHtml/__snapshots__/BuildSegmentsHtmlCommandHandlerTest--testHandle--segment-segment-1-html.html
@@ -289,7 +289,7 @@ <h3 class="flex items-center text-lg font-semibold text-gray-900">
                     </div>
                 </div>
                 <div id="segmentListsTabHistoryChart" role="tabpanel" aria-labelledby="segmentListsTabHistoryChart-tab">
-                    <div class="h-64" data-echarts-options='{"backgroundColor":"#ffffff","animation":false,"grid":{"top":"30px","left":"10px","right":"10px","bottom":"50px","containLabel":true},"tooltip":{"show":true,"trigger":"axis","valueFormatter":"formatSecondsTrimZero"},"xAxis":[{"type":"time","boundaryGap":false,"axisTick":{"show":false},"axisLabel":{"formatter":{"year":"{yyyy}","month":"{MMM}","day":"{d}","hour":"{HH}:{mm}","minute":"{HH}:{mm}","second":"{HH}:{mm}:{ss}","millisecond":"{hh}:{mm}:{ss} {SSS}","none":"{yyyy}-{MM}-{dd}"}}}],"yAxis":[{"type":"value","axisLabel":{"formatter":"formatSecondsTrimZero"}}],"series":[{"color":["#E34902"],"type":"scatter","data":[["2023-10-10",10.3],["2023-10-10",9.3]]}],"toolbox":{"show":true,"feature":{"restore":{"show":true}}},"dataZoom":[{"type":"slider","startValue":"2022-10-10","end":100,"brushSelect":true,"zoomLock":false,"zoomOnMouseWheel":false,"labelFormatter":""}]}'></div>
+                    <div class="h-64" data-echarts-options='{"backgroundColor":"#ffffff","animation":false,"grid":{"top":"30px","left":"10px","right":"10px","bottom":"50px","containLabel":true},"tooltip":{"show":true,"trigger":"axis","valueFormatter":"formatSecondsTrimZero"},"xAxis":[{"type":"time","boundaryGap":false,"axisTick":{"show":false},"axisLabel":{"formatter":{"year":"{yyyy}","month":"{MMM}","day":"{d}","hour":"{HH}:{mm}","minute":"{HH}:{mm}","second":"{HH}:{mm}:{ss}","millisecond":"{hh}:{mm}:{ss} {SSS}","none":"{yyyy}-{MM}-{dd}"}}}],"yAxis":[{"type":"value","min":5,"axisLabel":{"formatter":"formatSecondsTrimZero"}}],"series":[{"color":["#E34902"],"type":"scatter","data":[["2023-10-10",10.3],["2023-10-10",9.3]]}],"toolbox":{"show":true,"feature":{"restore":{"show":true}}},"dataZoom":[{"type":"slider","startValue":"2022-10-10","end":100,"brushSelect":true,"zoomLock":false,"zoomOnMouseWheel":false,"labelFormatter":""}]}'></div>
                 </div>
             </div>
         </div>
diff --git a/tests/Application/Build/BuildSegmentsHtml/__snapshots__/BuildSegmentsHtmlCommandHandlerTest--testHandle--segment-segment-10-html.html b/tests/Application/Build/BuildSegmentsHtml/__snapshots__/BuildSegmentsHtmlCommandHandlerTest--testHandle--segment-segment-10-html.html
@@ -219,7 +219,7 @@ <h3 class="flex items-center text-lg font-semibold text-gray-900">
                     </div>
                 </div>
                 <div id="segmentListsTabHistoryChart" role="tabpanel" aria-labelledby="segmentListsTabHistoryChart-tab">
-                    <div class="h-64" data-echarts-options='{"backgroundColor":"#ffffff","animation":false,"grid":{"top":"30px","left":"10px","right":"10px","bottom":"50px","containLabel":true},"tooltip":{"show":true,"trigger":"axis","valueFormatter":"formatSecondsTrimZero"},"xAxis":[{"type":"time","boundaryGap":false,"axisTick":{"show":false},"axisLabel":{"formatter":{"year":"{yyyy}","month":"{MMM}","day":"{d}","hour":"{HH}:{mm}","minute":"{HH}:{mm}","second":"{HH}:{mm}:{ss}","millisecond":"{hh}:{mm}:{ss} {SSS}","none":"{yyyy}-{MM}-{dd}"}}}],"yAxis":[{"type":"value","axisLabel":{"formatter":"formatSecondsTrimZero"}}],"series":[{"color":["#E34902"],"type":"scatter","data":[["2023-10-10",10.3]]}],"toolbox":{"show":true,"feature":{"restore":{"show":true}}},"dataZoom":[{"type":"slider","startValue":"2022-10-10","end":100,"brushSelect":true,"zoomLock":false,"zoomOnMouseWheel":false,"labelFormatter":""}]}'></div>
+                    <div class="h-64" data-echarts-options='{"backgroundColor":"#ffffff","animation":false,"grid":{"top":"30px","left":"10px","right":"10px","bottom":"50px","containLabel":true},"tooltip":{"show":true,"trigger":"axis","valueFormatter":"formatSecondsTrimZero"},"xAxis":[{"type":"time","boundaryGap":false,"axisTick":{"show":false},"axisLabel":{"formatter":{"year":"{yyyy}","month":"{MMM}","day":"{d}","hour":"{HH}:{mm}","minute":"{HH}:{mm}","second":"{HH}:{mm}:{ss}","millisecond":"{hh}:{mm}:{ss} {SSS}","none":"{yyyy}-{MM}-{dd}"}}}],"yAxis":[{"type":"value","min":10,"axisLabel":{"formatter":"formatSecondsTrimZero"}}],"series":[{"color":["#E34902"],"type":"scatter","data":[["2023-10-10",10.3]]}],"toolbox":{"show":true,"feature":{"restore":{"show":true}}},"dataZoom":[{"type":"slider","startValue":"2022-10-10","end":100,"brushSelect":true,"zoomLock":false,"zoomOnMouseWheel":false,"labelFormatter":""}]}'></div>
                 </div>
             </div>
         </div>
diff --git a/tests/Application/Build/BuildSegmentsHtml/__snapshots__/BuildSegmentsHtmlCommandHandlerTest--testHandle--segment-segment-17267489-html.html b/tests/Application/Build/BuildSegmentsHtml/__snapshots__/BuildSegmentsHtmlCommandHandlerTest--testHandle--segment-segment-17267489-html.html
@@ -219,7 +219,7 @@ <h3 class="flex items-center text-lg font-semibold text-gray-900">
                     </div>
                 </div>
                 <div id="segmentListsTabHistoryChart" role="tabpanel" aria-labelledby="segmentListsTabHistoryChart-tab">
-                    <div class="h-64" data-echarts-options='{"backgroundColor":"#ffffff","animation":false,"grid":{"top":"30px","left":"10px","right":"10px","bottom":"50px","containLabel":true},"tooltip":{"show":true,"trigger":"axis","valueFormatter":"formatSecondsTrimZero"},"xAxis":[{"type":"time","boundaryGap":false,"axisTick":{"show":false},"axisLabel":{"formatter":{"year":"{yyyy}","month":"{MMM}","day":"{d}","hour":"{HH}:{mm}","minute":"{HH}:{mm}","second":"{HH}:{mm}:{ss}","millisecond":"{hh}:{mm}:{ss} {SSS}","none":"{yyyy}-{MM}-{dd}"}}}],"yAxis":[{"type":"value","axisLabel":{"formatter":"formatSecondsTrimZero"}}],"series":[{"color":["#E34902"],"type":"scatter","data":[["2023-10-10",10.3]]}],"toolbox":{"show":true,"feature":{"restore":{"show":true}}},"dataZoom":[{"type":"slider","startValue":"2022-10-10","end":100,"brushSelect":true,"zoomLock":false,"zoomOnMouseWheel":false,"labelFormatter":""}]}'></div>
+                    <div class="h-64" data-echarts-options='{"backgroundColor":"#ffffff","animation":false,"grid":{"top":"30px","left":"10px","right":"10px","bottom":"50px","containLabel":true},"tooltip":{"show":true,"trigger":"axis","valueFormatter":"formatSecondsTrimZero"},"xAxis":[{"type":"time","boundaryGap":false,"axisTick":{"show":false},"axisLabel":{"formatter":{"year":"{yyyy}","month":"{MMM}","day":"{d}","hour":"{HH}:{mm}","minute":"{HH}:{mm}","second":"{HH}:{mm}:{ss}","millisecond":"{hh}:{mm}:{ss} {SSS}","none":"{yyyy}-{MM}-{dd}"}}}],"yAxis":[{"type":"value","min":10,"axisLabel":{"formatter":"formatSecondsTrimZero"}}],"series":[{"color":["#E34902"],"type":"scatter","data":[["2023-10-10",10.3]]}],"toolbox":{"show":true,"feature":{"restore":{"show":true}}},"dataZoom":[{"type":"slider","startValue":"2022-10-10","end":100,"brushSelect":true,"zoomLock":false,"zoomOnMouseWheel":false,"labelFormatter":""}]}'></div>
                 </div>
             </div>
         </div>
diff --git a/tests/Application/Build/BuildSegmentsHtml/__snapshots__/BuildSegmentsHtmlCommandHandlerTest--testHandle--segment-segment-2-html.html b/tests/Application/Build/BuildSegmentsHtml/__snapshots__/BuildSegmentsHtmlCommandHandlerTest--testHandle--segment-segment-2-html.html
@@ -219,7 +219,7 @@ <h3 class="flex items-center text-lg font-semibold text-gray-900">
                     </div>
                 </div>
                 <div id="segmentListsTabHistoryChart" role="tabpanel" aria-labelledby="segmentListsTabHistoryChart-tab">
-                    <div class="h-64" data-echarts-options='{"backgroundColor":"#ffffff","animation":false,"grid":{"top":"30px","left":"10px","right":"10px","bottom":"50px","containLabel":true},"tooltip":{"show":true,"trigger":"axis","valueFormatter":"formatSecondsTrimZero"},"xAxis":[{"type":"time","boundaryGap":false,"axisTick":{"show":false},"axisLabel":{"formatter":{"year":"{yyyy}","month":"{MMM}","day":"{d}","hour":"{HH}:{mm}","minute":"{HH}:{mm}","second":"{HH}:{mm}:{ss}","millisecond":"{hh}:{mm}:{ss} {SSS}","none":"{yyyy}-{MM}-{dd}"}}}],"yAxis":[{"type":"value","axisLabel":{"formatter":"formatSecondsTrimZero"}}],"series":[{"color":["#E34902"],"type":"scatter","data":[["2023-10-10",10.3]]}],"toolbox":{"show":true,"feature":{"restore":{"show":true}}},"dataZoom":[{"type":"slider","startValue":"2022-10-10","end":100,"brushSelect":true,"zoomLock":false,"zoomOnMouseWheel":false,"labelFormatter":""}]}'></div>
+                    <div class="h-64" data-echarts-options='{"backgroundColor":"#ffffff","animation":false,"grid":{"top":"30px","left":"10px","right":"10px","bottom":"50px","containLabel":true},"tooltip":{"show":true,"trigger":"axis","valueFormatter":"formatSecondsTrimZero"},"xAxis":[{"type":"time","boundaryGap":false,"axisTick":{"show":false},"axisLabel":{"formatter":{"year":"{yyyy}","month":"{MMM}","day":"{d}","hour":"{HH}:{mm}","minute":"{HH}:{mm}","second":"{HH}:{mm}:{ss}","millisecond":"{hh}:{mm}:{ss} {SSS}","none":"{yyyy}-{MM}-{dd}"}}}],"yAxis":[{"type":"value","min":10,"axisLabel":{"formatter":"formatSecondsTrimZero"}}],"series":[{"color":["#E34902"],"type":"scatter","data":[["2023-10-10",10.3]]}],"toolbox":{"show":true,"feature":{"restore":{"show":true}}},"dataZoom":[{"type":"slider","startValue":"2022-10-10","end":100,"brushSelect":true,"zoomLock":false,"zoomOnMouseWheel":false,"labelFormatter":""}]}'></div>
                 </div>
             </div>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -22,9 +22,12 @@ public function build(): array`
`22`	`22`	`{`
`23`	`23`	`$data = [];`
`24`	`24`
	`25`	`+ $minYAxisValue = 100000;`
`25`	`26`	`foreach ($this->segmentEfforts as $segmentEffort) {`
	`27`	`+ $segmentEffortElapsedTimeInSeconds = $segmentEffort->getElapsedTimeInSeconds();`
`26`	`28`	`$segmentEffortStartDate = $segmentEffort->getStartDateTime();`
`27`		`- $data[] = [$segmentEffortStartDate->format('Y-m-d'), $segmentEffort->getElapsedTimeInSeconds()];`
	`29`	`+ $data[] = [$segmentEffortStartDate->format('Y-m-d'), $segmentEffortElapsedTimeInSeconds];`
	`30`	`+ $minYAxisValue = min($minYAxisValue, $segmentEffortElapsedTimeInSeconds);`
`28`	`31`	`}`
`29`	`32`
`30`	`33`	`return [`
`@@ -66,6 +69,7 @@ public function build(): array`
`66`	`69`	`'yAxis' => [`
`67`	`70`	`[`
`68`	`71`	`'type' => 'value',`
	`72`	`+ 'min' => max(0, floor($minYAxisValue / 5) * 5),`
`69`	`73`	`'axisLabel' => [`
`70`	`74`	`'formatter' => 'formatSecondsTrimZero',`
`71`	`75`	`],`