Merge pull request #269 from projectblacklight/responsive_chart_js

make chart.js responsive on screen size change

README.md

@@ -102,6 +102,7 @@ config.add_facet_field 'pub_date', label: 'Publication Year',
                chart_replaces_text: true,
                chart_segment_border_color: "rgba(0,0,0, 0.5)",
                chart_segment_bg_color: "#ccddcc",
+               chart_aspect_ratio: "2"
             }
         )
 ```
@@ -117,6 +118,7 @@ config.add_facet_field 'pub_date', label: 'Publication Year',
 * **chart_replaces_text**: Default true. If false, when the chart is loaded purely textual facets will still remain on-screen too.
 * **chart_segment_border_color** / **chart_segment_bg_color** :
   * Set colors for the edge and fill of the segment bars in the histogram.
+* chart_aspect_ratio: for chart.js, will fill available width then this determines size of chart. defaults to 2
 
 
 ## Javascript dependencies

app/assets/javascripts/blacklight-range-limit/index.js

@@ -49,8 +49,8 @@ export default class BlacklightRangeLimit {
 
   lineDataPoints = [] // array of objects in Chart.js line chart data format, { x: xVal, y: yVal }
 
-  // <canvas> DOM element
-  chartCanvasElement;
+  container;  // div.range-limit wrapping entire facet display box
+  chartCanvasElement; // <canvas> DOM element
 
   // container should be a `div.range-limit` that will have within it a `.profile .distribution`
   // with textual distributions that will be turned into a histogram chart.
@@ -162,18 +162,23 @@ export default class BlacklightRangeLimit {
     }
 
     const listDiv = this.distributionElement.querySelector(".facet-values");
+    const wrapperDiv = this.container.querySelector("*[data-chart-wrapper=true]");
 
     if (this.chartReplacesText) {
       // We keep the textual facet data as accessible screen-reader, add .sr-only to it though
       listDiv.classList.add("sr-only")
       listDiv.classList.add("visually-hidden");
     }
 
-    // We create a <chart>, insert it into DOM before listDiv
+    // We create a <chart>, insert it into DOM in wrapper
     this.chartCanvasElement = this.container.ownerDocument.createElement("canvas");
     this.chartCanvasElement.setAttribute("aria-hidden", "true"); // textual facets sr-only are alternative
     this.chartCanvasElement.classList.add("blacklight-range-limit-chart");
-    this.distributionElement.insertBefore(this.chartCanvasElement, listDiv);
+    // We set inline-block for compatibility with container-fluid layouts, e.g. when
+    // Blacklight's config.full_width_layout = true
+    // See: https://github.com/projectblacklight/blacklight_range_limit/pull/269
+    this.chartCanvasElement.style.display = 'inline-block';
+    wrapperDiv.prepend(this.chartCanvasElement);
 
     return this.chartCanvasElement;
   }
@@ -186,6 +191,11 @@ export default class BlacklightRangeLimit {
     const minX = this.lineDataPoints[0].x;
     const maxX = this.lineDataPoints[this.lineDataPoints.length - 1].x;
 
+    // Get aspect ratio from CSS on wrapper element, has to match.
+    // Getting responsive chart.js to work was a pain! https://github.com/chartjs/Chart.js/issues/11005
+    const wrapper = chartCanvasElement.closest("*[data-chart-wrapper=true]");
+    const aspectRatio = window.getComputedStyle(wrapper)?.getPropertyValue("aspect-ratio") || 2;
+
     const segmentBorderColor = this.container.getAttribute("data-chart-segment-border-color") || 'rgb(54, 162, 235)';
     const segmentBgColor = this.container.getAttribute("data-chart-segment-bg-color") || 'rgba(54, 162, 235, 0.5)';
 
@@ -200,7 +210,8 @@ export default class BlacklightRangeLimit {
             animationDuration: 0 // duration of animations when hovering an item
         },
         responsiveAnimationDuration: 0,
-
+        aspectRatio: aspectRatio,
+        resizeDelay: 15, // to debounce a bit
         plugins: {
           legend: false,
           tooltip: { enabled: false} // tooltips don't currently show anything useful for our

app/components/blacklight_range_limit/range_facet_component.html.erb

@@ -17,6 +17,11 @@
       <% unless @facet_field.missing_selected? %>
         <!-- this has to be on page if you want calculated facets to show up, JS sniffs it. -->
         <div class="profile mb-3">
+          <%# if was very hard to get chart.js to be succesfully resonsive, required this wrapper!
+          https://github.com/chartjs/Chart.js/issues/11005 %>
+          <div class="chart-wrapper" data-chart-wrapper="true" style="position: relative; width: 100%; aspect-ratio: <%= range_config[:chart_aspect_ratio] %>;">
+          </div>
+
           <% if (min = @facet_field.min) &&
                 (max = @facet_field.max) %>
 

lib/blacklight_range_limit.rb

@@ -27,6 +27,7 @@ def self.default_range_config
         chart_js: true,
         chart_segment_border_color: 'rgb(54, 162, 235)',
         chart_segment_bg_color: 'rgba(54, 162, 235, 0.5)',
+        chart_aspect_ratio: 2,
         segments: true,
         chart_replaces_text: true,
         assumed_boundaries: nil