Improve route statistics

CHDataManagement/Page Elements/ContentElements/Routes/RouteViews.swift

@@ -6,7 +6,7 @@ struct RouteViews: HtmlProducer {
     /// The HTML id attribute used to enable fullscreen images
     let map: PageImage
 
-    let components: RouteViewComponents
+    let displayedTypes: Set<RouteStatisticType>
 
     let mapId: String
 
@@ -21,7 +21,7 @@ struct RouteViews: HtmlProducer {
     init(localization: RouteLocalization,
          chartTitle: String?,
          chartId: String,
-         components: RouteViewComponents,
+         displayedTypes: Set<RouteStatisticType>,
          mapTitle: String?,
          mapId: String,
          filePath: String,
@@ -31,7 +31,7 @@ struct RouteViews: HtmlProducer {
          caption: String?
     ) {
         self.localization = localization
-        self.components = components
+        self.displayedTypes = displayedTypes
         self.mapId = mapId
         self.filePath = filePath
         self.map = PageImage(
@@ -47,9 +47,9 @@ struct RouteViews: HtmlProducer {
         self.mapTitle = mapTitle
     }
 
-    var pickerHiddenText: String {
-        guard components == .onlyElevation else { return "" }
-        return " style='display:none'"
+    private func button(series: RouteStatisticType) -> String {
+        let label = localization.statistics[series]!
+        return "<button data-type='\(series.id)' unit='\(series.unit)' name='\(label)'>\(series.icon.usageString)<span class='label'>\(label)</span></button>"
     }
 
     func populate(_ result: inout String) {
@@ -58,18 +58,19 @@ struct RouteViews: HtmlProducer {
         }
         map.populate(&result)
 
+        let series = displayedTypes.sorted()
+        guard !series.isEmpty else {
+            return
+        }
         if let chartTitle {
             result += "<h2>\(chartTitle)</h2>"
         }
         result += "<div id='\(chartId)' class='charts'>"
-        result += "<div class='picker y-picker'\(pickerHiddenText)>"
-        result += "<button data-type='elevation' unit='m' class='active'>\(localization.elevation)</button>"
-        result += "<button data-type='speed' unit='km/h'>\(localization.speed)</button>"
-        result += "<button data-type='pace' unit='min/km'>\(localization.pace)</button>"
-        if components == .all {
-            result += "<button data-type='hr' unit='bpm'>\(localization.heartRate)</button>"
+        result += "<div class='picker icon-picker y-picker'>"
+        for type in series {
+            result += button(series: type)
         }
-        result += "</div>"
+        result += "</div>" // Picker
         result += "<div class='graph'>"
         result += "<canvas>"
         result += "<div class='fallback'>\(localization.fallback)</div>"
@@ -77,13 +78,13 @@ struct RouteViews: HtmlProducer {
         result += "<div class='line'></div>"
         result += "<div class='tooltip'></div>"
         result += "<div class='load-error'>\(localization.loadFail)</div>"
-        result += "</div>"
-        result += "<div class='picker x-picker'\(pickerHiddenText)>"
-        result += "<button data-type='distance' unit='km' class='active'>\(localization.distance)</button>"
+        result += "</div>" // Graph
+        result += "<div class='picker text-picker x-picker'>"
+        result += "<button data-type='distance' unit='km'>\(localization.distance)</button>"
         result += "<button data-type='duration' unit='\(localization.hourUnit)'>\(localization.duration)</button>"
         result += "<button data-type='time' unit=''>\(localization.time)</button>"
-        result += "</div>"
-        result += "</div>"
+        result += "</div>" // Picker
+        result += "</div>" // Chart
     }
 
     var script: String {