1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Clustering Benchmark Dashboard</ title >
7+ < script src ="https://cdn.jsdelivr.net/npm/chart.js "> </ script >
8+ < style >
9+ body { font-family : -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, Helvetica, Arial, sans-serif; margin : 0 ; padding : 20px ; background-color : # f6f8fa ; color : # 24292f ; }
10+ .container { max-width : 1200px ; margin : 0 auto; background : white; padding : 30px ; border-radius : 8px ; box-shadow : 0 1px 3px rgba (0 , 0 , 0 , 0.12 ); }
11+ h1 , h2 { text-align : center; color : # 0969da ; }
12+ .charts { display : flex; flex-wrap : wrap; gap : 20px ; justify-content : center; margin-top : 30px ; }
13+ .chart-container { flex : 1 1 45% ; min-width : 400px ; padding : 15px ; border : 1px solid # d0d7de ; border-radius : 6px ; }
14+ canvas { width : 100% !important ; height : 300px !important ; }
15+ .footer { text-align : center; margin-top : 40px ; font-size : 0.9em ; color : # 57606a ; }
16+ </ style >
17+ </ head >
18+ < body >
19+ < div class ="container ">
20+ < h1 > Android Maps Utils Clustering Benchmarks</ h1 >
21+ < 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 >
22+
23+ < div class ="charts ">
24+ <!-- GridBasedAlgorithm Chart -->
25+ < div class ="chart-container ">
26+ < h2 > GridBasedAlgorithm</ h2 >
27+ < canvas id ="gridChart "> </ canvas >
28+ </ div >
29+
30+ <!-- NonHierarchicalDistanceBasedAlgorithm Chart -->
31+ < div class ="chart-container ">
32+ < h2 > NonHierarchicalDistanceBasedAlgorithm</ h2 >
33+ < canvas id ="distanceChart "> </ canvas >
34+ </ div >
35+
36+ <!-- CentroidNonHierarchicalDistanceBasedAlgorithm Chart -->
37+ < div class ="chart-container ">
38+ < h2 > CentroidNonHierarchicalDistanceBased</ h2 >
39+ < canvas id ="centroidChart "> </ canvas >
40+ </ div >
41+
42+ <!-- ContinuousZoomEuclideanCentroidAlgorithm Chart -->
43+ < div class ="chart-container ">
44+ < h2 > ContinuousZoomEuclideanCentroid</ h2 >
45+ < canvas id ="continuousChart "> </ canvas >
46+ </ div >
47+
48+ <!-- PreCachingAlgorithmDecorator Chart -->
49+ < div class ="chart-container ">
50+ < h2 > PreCachingAlgorithmDecorator</ h2 >
51+ < canvas id ="preCachingChart "> </ canvas >
52+ </ div >
53+ </ div >
54+ < div class ="footer ">
55+ Note: Measurements are in milliseconds (ms) averaged across 10 iterations. Lower is better. Tests conducted with 50,000 random items.
56+ </ div >
57+ </ div >
58+
59+ < script >
60+ const chartOptions = {
61+ responsive : true ,
62+ maintainAspectRatio : false ,
63+ scales : { y : { beginAtZero : true , title : { display : true , text : 'Time (ms)' } } } ,
64+ plugins : { legend : { position : 'top' } }
65+ } ;
66+
67+ const labels = [ 'addItems' , 'zoom 4.0' , 'zoom 8.0' , 'zoom 12.0' , 'zoom 16.0' ] ;
68+
69+ const colors = {
70+ java : { bg : 'rgba(255, 99, 132, 0.7)' , border : 'rgb(255, 99, 132)' } ,
71+ kotlin : { bg : 'rgba(54, 162, 235, 0.7)' , border : 'rgb(54, 162, 235)' }
72+ } ;
73+
74+ function createChart ( ctxId , dataJava , dataKotlin ) {
75+ new Chart ( document . getElementById ( ctxId ) . getContext ( '2d' ) , {
76+ type : 'bar' ,
77+ data : {
78+ labels : labels ,
79+ datasets : [
80+ { label : 'Java (main)' , data : dataJava , backgroundColor : colors . java . bg , borderColor : colors . java . border , borderWidth : 1 } ,
81+ { label : 'Kotlin (rewrite)' , data : dataKotlin , backgroundColor : colors . kotlin . bg , borderColor : colors . kotlin . border , borderWidth : 1 }
82+ ]
83+ } ,
84+ options : chartOptions
85+ } ) ;
86+ }
87+
88+ createChart ( 'gridChart' , [ 6.28 , 29.93 , 206.30 , 269.87 , 228.93 ] , [ 6.37 , 29.77 , 189.84 , 250.74 , 221.97 ] ) ;
89+ createChart ( 'distanceChart' , [ 22.60 , 50.19 , 70.89 , 63.84 , 62.89 ] , [ 20.62 , 48.33 , 62.50 , 55.42 , 53.83 ] ) ;
90+ createChart ( 'centroidChart' , [ 32.28 , 81.76 , 133.18 , 82.79 , 90.66 ] , [ 43.37 , 77.41 , 128.38 , 105.66 , 72.02 ] ) ;
91+ createChart ( 'continuousChart' , [ 21.99 , 82.72 , 105.88 , 92.08 , 100.84 ] , [ 20.78 , 76.80 , 96.01 , 89.77 , 87.47 ] ) ;
92+ createChart ( 'preCachingChart' , [ 48.36 , 84.21 , 74.76 , 75.32 , 62.51 ] , [ 47.58 , 118.35 , 72.57 , 66.87 , 69.80 ] ) ;
93+ </ script >
94+ </ body >
95+ </ html >
0 commit comments