use the range_config

include chartjs and @kurkle/color
Hide 'Missing' Link

app/components/orangelight/advanced_search_form_component.html.erb

@@ -39,9 +39,9 @@
           <%= label_tag pub_date_field.parameterize, :class => "col-sm-4 control-label advanced-facet-label" do %>Publication year<% end %>
           <div class="col-sm-8 range_limit">
             <label for="range_pub_date_start_sort_begin" class="visually-hidden">Publication date range (starting year)</label>
-            <%= BlacklightRangeLimit::RangeFormComponent.new(facet_field: pub_date_presenter) %> –
+            <%= render BlacklightRangeLimit::RangeFormComponent.new(facet_field: pub_date_presenter) %> –
             <label for="range_pub_date_start_sort_end" class="visually-hidden">Publication date range (ending year)</label>
-            <%= BlacklightRangeLimit::RangeFormComponent.new(facet_field: pub_date_presenter) %>
+            <%= render BlacklightRangeLimit::RangeFormComponent.new(facet_field: pub_date_presenter) %>
           </div>
         </div>
       </div>

app/controllers/catalog_controller.rb

@@ -118,10 +118,14 @@ class CatalogController < ApplicationController
                                      collapse: false, home: true, solr_params: { 'facet.mincount' => Blacklight.blacklight_yml['mincount'] || 1 }, include_in_advanced_search: true
 
     # num_segments and segments set to defaults here, included to show customizable features
-    config.add_facet_field 'pub_date_start_sort', label: 'Publication year', single: true, range: {
+    config.add_facet_field 'pub_date_start_sort', label: 'Publication year', single: true, range: true, range_config: {
       num_segments: 10,
       assumed_boundaries: [1100, Time.now.year + 1],
-      segments: true
+      segments: true,
+      chart_segment_border_color: 'rgb(255, 217, 96)',
+      chart_segment_bg_color: 'rgba(255, 217, 96, 0.5)',
+      chart_segment_bg_color: 'rgba(255, 217, 96, 0.5)',
+      show_missing_link: false
     }
     config.add_facet_field 'language_facet', label: 'Language', limit: true, include_in_advanced_search: true
     config.add_facet_field 'subject_topic_facet', label: 'Subject: Topic', limit: true, include_in_advanced_search: false

package.json

@@ -2,8 +2,10 @@
   "dependencies": {
     "@apollo/client": "^3.7.1",
     "@babel/preset-stage-3": "^7.8.3",
+    "@kurkle/color": "0.3.2",
     "@vitejs/plugin-vue": "^5.1.2",
     "blacklight-range-limit": "^9.0.0",
+    "chart.js": "4.2.0",
     "graphql": "^16.8.1",
     "jest-environment-jsdom": "^29.4.0",
     "lux-design-system": "^5.11.0",

yarn.lock

@@ -1536,6 +1536,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/color@0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@kurkle/color@^0.3.0":
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.4.tgz#4d4ff677e1609214fc71c580125ddddd86abcabf"
@@ -2460,6 +2465,13 @@ char-regex@^1.0.2:
   resolved "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+chart.js@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.0.tgz#dd281b2ce890bff32f3e249cf2972a1e74bc032c"
+  integrity sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 "chart.js@^ 4.4.1":
   version "4.4.7"
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.7.tgz#7a01ee0b4dac3c03f2ab0589af888db296d896fa"