Timeline labeling improvement

Add an immediate tooltip, similar to regions. Style it the same

Always show the start and end as labels.

Remove all the middle labels, whose spacing was always a little weird

cubedash/static/base.sass

@@ -554,10 +554,12 @@ label
     white-space: nowrap
     display: flex
     align-items: flex-end
+    border-bottom: 1px solid desaturate(lighten($emphasis_weak, 10%), 50%)
 
 
 .chart-timeline-bar
     display: block
+    position: relative
     $graph_highlight: $emphasis_weak
     background-color: $graph_highlight
 
@@ -566,21 +568,29 @@ label
     &:hover
         background-color: darken($graph_highlight, 10%)
 
-.chart-timeline-years
-    font-size: 0
-    white-space: nowrap
-    display: flex
-
+        .chart-timeline-year.tooltip
+            display: block
 
 .chart-timeline-year
+    z-index: 1
     position: absolute
     bottom: 0
-    font-size: 10px
     text-align: left
-    transform: rotate(45deg)
-    transform-origin: top left
-    vertical-align: bottom
+    font-size: 10px
+    font-weight: normal
     color: #333
+    transform: translateY(calc(100% + 5px)) rotate(45deg)
+
+    transform-origin: top left
+
+    &.tooltip
+        z-index: 2
+        font-size: 12px
+        padding: 5px 10px
+        color: #fff
+        background-color: $emphasis_strong
+        display: none
+
 
 .relative
     position: relative
@@ -668,13 +678,13 @@ details > summary
 
 .leaflet-tooltip
     position: absolute
-    padding: 10px 15px
+    padding: 5px 10px
     background-color: #fff
     border: 0
     border-radius: 0
     color: $bold_highlight
     box-shadow: unset
-    font-size: 1.1em
+    font-size: 12px
 
     &.regions-tooltip
         color: #fff

cubedash/templates/layout/macros.html

@@ -9,7 +9,8 @@
             {% set max_count = timeline.most_common(1)[0][1] %}
             <div class="chart-timeline-bars">
                 {% set last = namespace(year=False, bars_this_year=100) %}
-                {% for start_time, count in timeline.items() | sort %}
+                {% set timeline_items = timeline.items() | sort %}
+                {% for start_time, count in timeline_items  %}
                     <a href="{{ url_for('overview_page',
                             product_name=product.name,
                             **{
@@ -18,21 +19,23 @@
                                 'day': start_time.day if period=='day' else None}
                             ) }}"
                        class="chart-timeline-bar {% if start_time[period] == 1 %}new-year{% endif %}"
-                       style="height: {{ (count or 0)/(max_count if max_count > 0 else 1)*100 }}%"
-                       title="View the {{ count }} datasets for
-{{ start_time.day|string + ' ' if period == 'day' else '' }}{{ start_time.month | month_name }} {{ start_time.year }}"
-                    >
-                        {# If this is a new year, and enough horizontal space has passed, add a label. #}
-                        {%- if last.year != start_time.year and (last.bars_this_year * month_width) > 16 and count -%}
+                       style="height: {{ (count or 0)/(max_count if max_count > 0 else 1)*100 }}%">
+                        {% set is_always_shown = loop.index == 1 or loop.index == (timeline_items|length) %}
+                        {%  if is_always_shown %}
                             <span class="chart-timeline-year">
-                                {% if period == 'day' -%}{{- start_time.day | day_ordinal }} {% endif -%}
+                                {%- if period == 'day' -%}{{- start_time.day | day_ordinal }} {% endif -%}
                                 {{-start_time.strftime('%b %Y')-}}
                             </span>
-                            {% set last.bars_this_year = 0 %}
-                            {% set last.year = start_time.year %}
-                        {%-endif-%}
+                        {%endif%}
+
+                        <span class="chart-timeline-year tooltip">
+                            <strong>
+                                {%- if period == 'day' -%}{{- start_time.day | day_ordinal }} {% endif -%}
+                                {{-start_time.strftime('%b %Y')-}}
+                            </strong><br/>
+                            {{ count }} datasets
+                        </span>
                     </a>
-                    {% set last.bars_this_year = last.bars_this_year + 1 %}
                 {% endfor %}
             </div>