preservation coverage updates (first round)

- new by-year chart with stacked histograms of all 4 preservation
  statuses
- new-style single progress bar showing overall preservation status
- new by-volume query and chart

Old endpoints are left as-is, with the intention of having them
"deprecated" for some time span until entirely removing them.

1 files changed, 38 insertions, 22 deletions

diff --git a/python/fatcat_web/templates/container_view_coverage.html b/python/fatcat_web/templates/container_view_coverage.html
index ffd1a447..fc643f81 100644
--- a/python/fatcat_web/templates/container_view_coverage.html
+++ b/python/fatcat_web/templates/container_view_coverage.html
@@ -19,34 +19,50 @@
         {% set frac_preserved = container._stats.is_preserved/container._stats.total %}
         {% set frac_web = container._stats.in_web/container._stats.total %}
 
-        <div class="ui large {{ entity_macros.progress_color(frac_web) }} progress" style="margin-bottom: 0.1em;">
-          <div class="bar" style="width: {{ (frac_web*100)|int }}%;">
-            <div class="progress">{{ (frac_web*100)|int }}%</div>
-          </div>
-          <div class="label">
-            {{ "{:,}".format(container._stats.in_web) }} preserved and available (bright)
-          </div>
-        </div>
+        {% set pstats = container._stats.preservation %}
+        {% set frac_bright = container._stats.preservation.bright/container._stats.total %}
+        {% set frac_dark = container._stats.preservation.dark/container._stats.total %}
+        {% set frac_shadows_only = container._stats.preservation.shadows_only/container._stats.total %}
+        {% set frac_none = container._stats.preservation.none/container._stats.total %}
 
-        <br>
-        <div class="ui large {{ entity_macros.progress_color(frac_preserved) }} progress" style="margin-bottom: 0.1em;">
-          <div class="bar" style="width: {{ (frac_preserved*100)|int }}%;">
-            <div class="progress">{{ (frac_preserved*100)|int }}%</div>
+        <div class="ui large multiple progress" data-percent="0,0,0,0" style="margin-bottom: 0.1em;">
+          <div class="green bar" style="border-radius: 0; min-width: 0; width: {{ (frac_bright*100)|round(method='ceil') }}%;" title="bright">
+            <div class="progress">{# {{ (frac_bright*100)|int }}% #}</div>
           </div>
-          <div class="label">
-            {{ "{:,}".format(container._stats.is_preserved) }} preserved at all (bright or dark)
+          <div class="green bar" style="border-radius: 0; min-width: 0; width: {{ (frac_dark*100)|round(method='ceil') }}%; background-color: darkgreen;">
+            <div class="progress">{# {{ (frac_dark*100)|int }}% #}</div>
           </div>
-        </div>
-
-        <br>
-        <div class="ui large {{ entity_macros.progress_color(frac_kbart) }} progress" style="margin-bottom: 0.1em; margin-top: 1em;">
-          <div class="bar" style="width: {{ (frac_kbart*100)|int }}%;">
-            <div class="progress">{{ (frac_kbart*100)|int }}%</div>
+          <div class="red bar" style="border-radius: 0; min-width: 0; width: {{ (frac_shadows_only*100)|round(method='ceil') }}%; background-color: darkred;">
+            <div class="progress">{# {{ (frac_shadows_only*100)|int }}% #}</div>
           </div>
-          <div class="label">
-            {{ "{:,}".format(container._stats.in_kbart ) }} preserved by Keeper (dark)
+          <div class="red bar" style="border-radius: 0; min-width: 0; width: {{ (frac_none*100)|round(method='ceil') }}%;">
+            <div class="progress">{# {{ (frac_none*100)|int }}% #}</div>
           </div>
         </div>
+        <table class="ui very basic very compact collapsing table" style="font-weight: bold; margin-left: 1em;">
+          <tbody>
+            <tr>
+              <td style="background-color: green;">
+              <td class="right aligned" >{{ "{:,}".format(pstats.bright) }}
+              <td class="right aligned" >{{ (frac_bright*100)|round(2,method='ceil') }}%
+              <td>preserved and publicly available (bright)
+            <tr>
+              <td style="background-color: darkgreen;">
+              <td class="right aligned" >{{ "{:,}".format(pstats.dark) }}
+              <td class="right aligned" >{{ (frac_dark*100)|round(2,method='ceil') }}%
+              <td>preserved but not publicly accessible (dark)
+            <tr>
+              <td style="background-color: darkred;">
+              <td class="right aligned" >{{ "{:,}".format(pstats.shadows_only) }}
+              <td class="right aligned" >{{ (frac_shadows_only*100)|round(2,method='ceil') }}%
+              <td>only independently preserved in "shadow" libraries
+            <tr>
+              <td style="background-color: red;">
+              <td class="right aligned" >{{ "{:,}".format(pstats.none) }}
+              <td class="right aligned" >{{ (frac_none*100)|round(2,method='ceil') }}%
+              <td>no known independent preservation
+          </tbody>
+        </table>
 
       {% endif %}
     </div>