1+ <!DOCTYPE html>
2+ <!--
3+ Copyright 2026 Google LLC
4+
5+ Licensed under the Apache License, Version 2.0 (the "License");
6+ you may not use this file except in compliance with the License.
7+ You may obtain a copy of the License at
8+
9+ http://www.apache.org/licenses/LICENSE-2.0
10+
11+ Unless required by applicable law or agreed to in writing, software
12+ distributed under the License is distributed on an "AS IS" BASIS,
13+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+ See the License for the specific language governing permissions and
15+ limitations under the License.
16+ -->
17+
18+ < html lang ="en ">
19+ < head >
20+ < meta charset ="UTF-8 ">
21+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
22+ < title > Clustering Benchmark Dashboard</ title >
23+ < script src ="https://cdn.jsdelivr.net/npm/chart.js "> </ script >
24+ < style >
25+ body { font-family : -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, Helvetica, Arial, sans-serif; margin : 0 ; padding : 20px ; background-color : # f6f8fa ; color : # 24292f ; }
26+ .container { max-width : 1000px ; margin : 0 auto; background : white; padding : 30px ; border-radius : 8px ; box-shadow : 0 1px 3px rgba (0 , 0 , 0 , 0.12 ); }
27+ h1 , h2 { text-align : center; color : # 0969da ; }
28+ .charts { display : flex; flex-wrap : wrap; gap : 20px ; justify-content : center; margin-top : 30px ; }
29+ .chart-container { flex : 1 1 45% ; min-width : 300px ; padding : 15px ; border : 1px solid # d0d7de ; border-radius : 6px ; }
30+ canvas { width : 100% !important ; height : 300px !important ; }
31+ .footer { text-align : center; margin-top : 40px ; font-size : 0.9em ; color : # 57606a ; }
32+ </ style >
33+ </ head >
34+ < body >
35+ < div class ="container ">
36+ < h1 > Android Maps Utils Clustering Benchmarks</ h1 >
37+ < p style ="text-align: center; "> Performance comparison between the original Java implementation (< code > main</ code > ) and the Kotlin rewrite (< code > feat/rewrite-android-maps-utils</ code > ).</ p >
38+
39+ < div class ="charts ">
40+ <!-- GridBasedAlgorithm Chart -->
41+ < div class ="chart-container ">
42+ < h2 > GridBasedAlgorithm</ h2 >
43+ < canvas id ="gridChart "> </ canvas >
44+ </ div >
45+
46+ <!-- NonHierarchicalDistanceBasedAlgorithm Chart -->
47+ < div class ="chart-container ">
48+ < h2 > DistanceBasedAlgorithm</ h2 >
49+ < canvas id ="distanceChart "> </ canvas >
50+ </ div >
51+ </ div >
52+ < div class ="footer ">
53+ Note: Measurements are in milliseconds (ms). Lower is better. Tests conducted with 50,000 random items.
54+ </ div >
55+ </ div >
56+
57+ < script >
58+ const chartOptions = {
59+ responsive : true ,
60+ maintainAspectRatio : false ,
61+ scales : { y : { beginAtZero : true , title : { display : true , text : 'Time (ms)' } } } ,
62+ plugins : { legend : { position : 'top' } }
63+ } ;
64+
65+ const gridCtx = document . getElementById ( 'gridChart' ) . getContext ( '2d' ) ;
66+ new Chart ( gridCtx , {
67+ type : 'bar' ,
68+ data : {
69+ labels : [ 'addItems' , 'zoom 4.0' , 'zoom 8.0' , 'zoom 16.0' ] ,
70+ datasets : [
71+ { label : 'Java (main)' , data : [ 8.84 , 30.78 , 198.23 , 198.36 ] , backgroundColor : 'rgba(255, 99, 132, 0.7)' , borderColor : 'rgb(255, 99, 132)' , borderWidth : 1 } ,
72+ { label : 'Kotlin (rewrite)' , data : [ 12.45 , 31.69 , 213.00 , 210.77 ] , backgroundColor : 'rgba(54, 162, 235, 0.7)' , borderColor : 'rgb(54, 162, 235)' , borderWidth : 1 }
73+ ]
74+ } ,
75+ options : chartOptions
76+ } ) ;
77+
78+ const distanceCtx = document . getElementById ( 'distanceChart' ) . getContext ( '2d' ) ;
79+ new Chart ( distanceCtx , {
80+ type : 'bar' ,
81+ data : {
82+ labels : [ 'addItems' , 'zoom 4.0' , 'zoom 8.0' , 'zoom 16.0' ] ,
83+ datasets : [
84+ { label : 'Java (main)' , data : [ 35.88 , 102.94 , 73.67 , 80.52 ] , backgroundColor : 'rgba(255, 99, 132, 0.7)' , borderColor : 'rgb(255, 99, 132)' , borderWidth : 1 } ,
85+ { label : 'Kotlin (rewrite)' , data : [ 37.30 , 93.58 , 85.88 , 64.44 ] , backgroundColor : 'rgba(54, 162, 235, 0.7)' , borderColor : 'rgb(54, 162, 235)' , borderWidth : 1 }
86+ ]
87+ } ,
88+ options : chartOptions
89+ } ) ;
90+ </ script >
91+ </ body >
92+ </ html >
0 commit comments