jirametrics 3.2 → 3.3.1

data/lib/jirametrics/dependency_chart.rb

@@ -32,9 +32,40 @@ class DependencyChart < ChartBase
     attr_accessor :color, :label
   end
 
+  # A fill and the label colour that goes on top of it, kept together because they are not
+  # independent choices: some of these fills are light and take black text, others are dark and
+  # take white, and a node that took its fill from one and its label from another would be
+  # unreadable. Always hand them out as a pair.
+  Palette = Struct.new :fill, :label
+
+  def self.palette_entry name
+    Palette.new CssVariable["--dependency-chart-#{name}-color"],
+      CssVariable["--dependency-chart-#{name}-label-color"]
+  end
+
+  PALETTE = {
+    story: palette_entry('story'),
+    task: palette_entry('task'),
+    bug: palette_entry('bug'),
+    epic: palette_entry('epic'),
+    spike: palette_entry('spike')
+  }.freeze
+
   def initialize rules_block
     super()
 
+    # Not the inherited type colours, because these are fills with label text sitting on top of
+    # them and those are line colours, judged against the page rather than against the text. See
+    # index.css for which colours these are and why.
+    @palette_by_type = {
+      'Story' => PALETTE[:story],
+      'Task' => PALETTE[:task],
+      'Bug' => PALETTE[:bug],
+      'Defect' => PALETTE[:bug],
+      'Epic' => PALETTE[:epic],
+      'Spike' => PALETTE[:spike]
+    }
+
     header_text 'Dependencies'
     description_text <<-HTML
       <p>
@@ -57,7 +88,7 @@ class DependencyChart < ChartBase
         '<div>No data matched the selected criteria. Nothing to show.</div>'
     end
 
-    svg = execute_graphviz(dot_graph.join("\n"))
+    svg = restore_css_variables execute_graphviz(dot_graph.join("\n"))
     "<h1 class='foldable'>#{@header_text}</h1><div>#{@description_text}#{shrink_svg svg}</div>"
   end
 
@@ -77,6 +108,42 @@ class DependencyChart < ChartBase
     result
   end
 
+  # Graphviz has never heard of CSS variables. Handed one it emits a warning nobody sees and
+  # falls back to black, which is how a node ends up as black text on a black background. So a
+  # variable is swapped for a placeholder colour here and mapped back to the variable in the
+  # generated SVG, by #restore_css_variables. Anything that isn't a variable is left alone.
+  #
+  # The placeholders only need to be colours that nobody would ever choose deliberately, so that
+  # the CSS selectors matching them in the SVG cannot hit anything else.
+  def graphviz_color color
+    return color unless color.is_a? CssVariable
+
+    css_variable_placeholders[color.name] ||= format '#fe00%02x', css_variable_placeholders.size + 1
+  end
+
+  def css_variable_placeholders
+    @css_variable_placeholders ||= {}
+  end
+
+  # Turns the placeholders from #graphviz_color back into the variables they stood for, by way of
+  # a stylesheet that selects on the placeholder value. Rewriting the attributes in place would be
+  # the obvious move, but var() is only legal in a CSS value and not in an SVG presentation
+  # attribute, so the colour has to arrive as a real CSS rule. Author rules beat presentation
+  # attributes, so the placeholder never wins.
+  #
+  # fillcolor and fontcolor come out of graphviz as fill and color comes out as stroke, and an
+  # arrowhead uses both, so every placeholder gets a rule for each.
+  def restore_css_variables svg
+    return svg if css_variable_placeholders.empty?
+
+    rules = css_variable_placeholders.map do |name, placeholder|
+      %([fill="#{placeholder}"]{fill:var(#{name})}[stroke="#{placeholder}"]{stroke:var(#{name})})
+    end
+    svg.sub(/(?<opening_tag><svg\b[^>]*>)/) do
+      "#{Regexp.last_match[:opening_tag]}<style>#{rules.join}</style>"
+    end
+  end
+
   def make_dot_link issue_link:, link_rules:
     result = +''
     result << issue_link.origin.key.inspect
@@ -84,8 +151,9 @@ class DependencyChart < ChartBase
     result << issue_link.other_issue.key.inspect
     result << '['
     result << 'label=' << (link_rules.label || issue_link.label).inspect
-    result << ',color=' << (link_rules.line_color || 'gray').inspect
-    result << ',fontcolor=' << (link_rules.line_color || 'gray').inspect
+    line_color = graphviz_color(link_rules.line_color || default_link_color)
+    result << ',color=' << line_color.inspect
+    result << ',fontcolor=' << line_color.inspect
     result << ',dir=both' if link_rules.bidirectional_arrows?
     result << '];'
     result
@@ -102,24 +170,47 @@ class DependencyChart < ChartBase
     tooltip = "#{issue.key}: #{issue.summary}"
     result << ",tooltip=#{tooltip[0..80].inspect}"
     unless issue_rules.color == :none
-      result << %(,style=filled,fillcolor="#{issue_rules.color || color_for(type: issue.type)}")
+      fill_color = graphviz_color(issue_rules.color || color_for(type: issue.type))
+      result << %(,style=filled,fillcolor="#{fill_color}")
     end
+    result << %(,fontcolor="#{graphviz_color label_color(issue: issue, issue_rules: issue_rules)}")
     result << ']'
     result
   end
 
-  # This used to pull colours from chart_base but the migration to CSS colours kept breaking
-  # this chart so we moved it here, until we're finished with the rest. TODO: Revisit whether
-  # this can also use customizable CSS colours
+  # A filled node is its own background, so its label is measured against the fill rather than
+  # against the page.
+  def label_color issue:, issue_rules:
+    return CssVariable['--default-text-color'] if issue_rules.color == :none
+
+    # A colour somebody configured is one we know nothing about, so guessing that a particular
+    # type's label would suit it is worse than falling back to the general one.
+    return CssVariable['--dependency-chart-label-color'] if issue_rules.color
+
+    palette_for(issue.type).label
+  end
+
   def color_for type:
-    @chart_colors = {
-      'Story' => '#90EE90',
-      'Task' => '#87CEFA',
-      'Bug' => '#ffdab9',
-      'Defect' => '#ffdab9',
-      'Epic' => '#fafad2',
-      'Spike' => '#DDA0DD' # light purple
-    }[type] ||= random_color
+    palette_for(type).fill
+  end
+
+  def palette_for type
+    @palette_by_type[type] ||= next_palette_entry
+  end
+
+  def default_link_color
+    CssVariable['--dependency-chart-link-color']
+  end
+
+  # An issue type we have no colour for cannot come from the shared palette, the way it does on
+  # every other chart. That palette holds line colours, judged against the page, and its first slot
+  # is Okabe-Ito blue, which leaves black label text at 4.05:1 once it becomes the fill behind it.
+  # These rotate this chart's own entries, which are all known to be comfortable. Two unknown types
+  # can therefore land on the same colour as each other or as a known type, which costs little:
+  # every node already names its type in the label.
+  def next_palette_entry
+    @fallback_color_index = (@fallback_color_index || -1) + 1
+    PALETTE.values[@fallback_color_index % PALETTE.size]
   end
 
   def build_dot_graph

data/lib/jirametrics/exporter.rb

@@ -257,35 +257,89 @@ class Exporter
 
   def info key, name_filter:
     selected = []
+    searched = []
     file_system.log_only = true
     each_project_config(name_filter: name_filter) do |project|
       project.evaluate_next_level
 
       project.run load_only: true
-      selected.concat matching_issues_in(project, key)
+      matches = matching_issues_in(project, key)
+      searched << describe_search(project: project, matches: matches.size)
+      selected.concat matches
     rescue => e # rubocop:disable Style/RescueStandardError
       # This happens when we're attempting to load an aggregated project because it hasn't been
       # properly initialized. Since we don't care about aggregated projects, we just ignore it.
       raise unless e.message.start_with? 'This is an aggregated project and issues should have been included'
+
+      searched << "  #{project.name.inspect}: skipped, this is an aggregated project"
     end
     file_system.log_only = false
 
+    report_info_results key: key, selected: selected, where_we_looked: describe_where_we_looked(key, searched)
+  end
+
+  # Verbose in the log, sparse in the terminal. Where we looked is almost always what you need when
+  # an issue you know was downloaded cannot be found, and it is noise the rest of the time.
+  def describe_where_we_looked key, searched
+    return "Searched these projects for #{key.inspect}:\n#{searched.join "\n"}" unless searched.empty?
+
+    'No project configurations were searched at all. Either none are defined in the config file ' \
+      'or none of them matched the name filter.'
+  end
+
+  def report_info_results key:, selected:, where_we_looked:
     if selected.empty?
-      file_system.log "No issues found to match #{key.inspect}"
-    else
-      selected.each do |project, issue|
-        file_system.log "\nProject #{project.name}", also_write_to_stderr: true
-        file_system.log issue.dump, also_write_to_stderr: true
-      end
+      file_system.log(
+        "No issues found to match #{key.inspect}", more: where_we_looked, also_write_to_stderr: true
+      )
+      return
+    end
+
+    file_system.log where_we_looked
+    selected.each do |project, issue, ignored|
+      file_system.log "\nProject #{project.name}", also_write_to_stderr: true
+      file_system.log(IGNORED_ISSUE_NOTE, also_write_to_stderr: true) if ignored
+      file_system.log issue.dump, also_write_to_stderr: true
     end
   end
 
+  # Only the unexpected case is announced. Not being filtered is the common one, and saying so
+  # every time would be noise on top of the dump that was actually asked for. Note the claim is
+  # about the filter, not about charts: an issue that survives filtering may still be absent from
+  # a given chart for its own reasons, so there is no matching note for the other case.
+  IGNORED_ISSUE_NOTE = 'IGNORED by a filter such as ignore_types or ignore_issues. No chart uses it.'
+
+  # One line per project saying where its issues were read from and what was there, so that a
+  # missing issue can be traced to the wrong directory rather than guessed at.
+  def describe_search project:, matches:
+    prefix = project.get_file_prefix raise_if_not_set: false
+    path = prefix.nil? ? '(no file_prefix set)' : File.join(project.target_path.to_s, "#{prefix}_issues")
+    counts =
+      begin
+        collection = project.issues
+        excluded = collection.hidden.size
+        detail = "#{collection.size} issues loaded"
+        detail << ", #{excluded} excluded by filters" if excluded.positive?
+        "#{detail}, #{matches} matched"
+      rescue StandardError
+        'could not be read'
+      end
+    "  #{project.name.inspect}: #{path} (#{counts})"
+  end
+
+  # Asking about a specific issue should always show that issue, whether or not the report used it.
+  # An issue removed by something like ignore_types is exactly when somebody runs info to find out
+  # what happened, and reporting it as missing sends them hunting for a download problem that is
+  # not there. The hidden list is searched first. Returns [project, issue, ignored] triples.
   def matching_issues_in project, key
     matches = []
-    project.issues.each do |issue|
-      matches << [project, issue] if key == issue.key
-      issue.subtasks.each do |subtask|
-        matches << [project, subtask] if key == subtask.key
+    collection = project.issues
+    [[collection.hidden, true], [collection, false]].each do |issues, ignored|
+      issues.each do |issue|
+        matches << [project, issue, ignored] if key == issue.key
+        issue.subtasks.each do |subtask|
+          matches << [project, subtask, ignored] if key == subtask.key
+        end
       end
     end
     matches
@@ -317,9 +371,21 @@ class Exporter
 
   def target_path path = nil
     unless path.nil?
+      previous = @target_path
       @target_path = path
       @target_path += File::SEPARATOR unless @target_path.end_with? File::SEPARATOR
       FileUtils.mkdir_p @target_path
+      # A config is allowed to switch target directories partway through, and when it does, an
+      # issue can be downloaded into one and looked for in another. Recording every change makes
+      # that visible rather than something to guess at. See GitHub issue 77.
+      # The constructor seeds this with a bare '.', and the setter always appends a separator, so
+      # an unseparated '.' is the untouched default rather than something the config chose. Setting
+      # the same path twice is not a change and saying so would be actively misleading.
+      if previous == '.'
+        file_system.diagnostic "target_path set to #{@target_path.inspect}"
+      elsif previous != @target_path
+        file_system.diagnostic "target_path changed from #{previous.inspect} to #{@target_path.inspect}"
+      end
     end
     @target_path
   end

data/lib/jirametrics/groupable_issue_chart.rb

@@ -31,14 +31,39 @@ module GroupableIssueChart
 
       @issue_hints[issue] = rules.issue_hint
       @issue_periods[issue] = rules.last_day_of_period
-      (result[rules] ||= []) << issue
+      accumulate_issue_for_group result, rules, issue
     end
 
     completed_issues.reject! { |issue| ignored_issues.include? issue }
 
     result.each_key do |rules|
-      rules.color = random_color if rules.color.nil?
+      rules.color = next_palette_color if rules.color.nil?
     end
     result
   end
+
+  # Ruby's Hash keeps whichever key object it saw first, so a later issue whose rules object
+  # has different percentiles needs to be reconciled against that retained key rather than
+  # just appended under its own (discarded) key.
+  def accumulate_issue_for_group result, rules, issue
+    existing_key = result.keys.find { |key| key.eql? rules }
+    reconcile_percentiles existing_key, rules if existing_key
+    (result[existing_key || rules] ||= []) << issue
+  end
+
+  # The retained hash key is whichever rules object arrived first, so a later issue setting a
+  # different list would silently lose. That can only be a config error, so say so.
+  def reconcile_percentiles existing_key, rules
+    incoming = rules.percentiles
+    return if incoming.nil?
+
+    existing = existing_key.percentiles
+    if existing.nil?
+      existing_key.percentiles = incoming
+    elsif existing != incoming
+      raise ArgumentError,
+        "group #{existing_key.label.inspect} was given conflicting percentiles: " \
+        "#{existing.inspect} and #{incoming.inspect}"
+    end
+  end
 end

data/lib/jirametrics/grouping_rules.rb

@@ -1,8 +1,20 @@
 # frozen_string_literal: true
 
+require 'jirametrics/percentile_validation'
+
 class GroupingRules < Rules
+  include PercentileValidation
+
   attr_accessor :label, :issue_hint, :label_hint
-  attr_reader :color, :last_day_of_period
+  attr_reader :color, :last_day_of_period, :percentiles
+
+  # nil means "inherit whatever the chart is configured with" and an empty list means "draw no
+  # lines for this group", so neither is validated. Everything else gets the same treatment as
+  # the chart level setter, because these numbers become JavaScript identifiers downstream and a
+  # bad one takes the whole chart out with a syntax error.
+  def percentiles= list
+    @percentiles = list.nil? ? nil : validate_percentiles(list)
+  end
 
   def last_day_of_period= value
     @last_day_of_period = value.is_a?(String) ? Date.parse(value) : value

data/lib/jirametrics/html/aging_work_bar_chart.erb

@@ -40,15 +40,26 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
         annotations: {
           <%= working_days_annotation %>
 
-          <% if percentage_line_x %>
-          line: {
+          <% @percentage_lines.each do |percentage_line| %>
+          <%= percentage_line[:id].to_json %>: {
             type: 'line',
             scaleID: 'x',
-            value: '<%= percentage_line_x %>',
+            value: '<%= percentage_line[:x] %>',
             borderColor: <%= CssVariable.new('--aging-work-bar-chart-percentage-line-color').to_json %>,
             borderWidth: 1,
-            drawTime: 'afterDraw'
-          }
+            hitTolerance: 6,
+            drawTime: 'afterDraw',
+            label: {
+              display: false,
+              content: <%= "#{ordinal percentage_line[:percentile]} percentile of completed work".to_json %>,
+              position: 'start',
+              backgroundColor: 'rgba(0,0,0,0.85)',
+              color: '#fff',
+              font: { size: 11 }
+            },
+            enter(ctx) { ctx.element.label.options.display = true; ctx.chart.draw(); },
+            leave(ctx) { ctx.element.label.options.display = false; ctx.chart.draw(); }
+          },
           <% end %>
         }
       },

data/lib/jirametrics/html/flow_efficiency_scatterplot.erb

@@ -57,7 +57,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           }
           nextVisibility = !!legend.chart.getDatasetMeta(i).hidden;
 
-          // Hide/show the 85% line for that dataset
+          // Hide/show the percentile lines for that dataset
           legend.chart.options.plugins.annotation.annotations["line"+(i/2)].display = nextVisibility;
 
           // Hide/show the trendline for this dataset, if they were enabled. The trendline is always

data/lib/jirametrics/html/index.css

@@ -8,6 +8,20 @@
   --cycletime-scatterplot-cap-rule-color: #555555;
   --cycletime-scatterplot-cap-gutter-color: rgba(0, 0, 0, 0.05);
 
+  /* Palette for things that need telling apart where no specific colour is wanted. Okabe-Ito,
+     chosen because it stays distinguishable under the common forms of colour vision deficiency.
+     If you need a SPECIFIC colour, configure it rather than relying on whichever slot comes up.
+     Add a slot by defining the next number; the count is read from this file, not hardcoded.
+     These deliberately have no dark mode overrides yet: lightening them for dark backgrounds
+     collapses blue into sky blue, and getting it right needs measuring. See jirametrics-60z. */
+  --palette-color-1: #0072B2;  /* Okabe-Ito blue */
+  --palette-color-2: #E69F00;  /* Okabe-Ito orange */
+  --palette-color-3: #009E73;  /* Okabe-Ito bluish green */
+  --palette-color-4: #56B4E9;  /* Okabe-Ito sky blue */
+  --palette-color-5: #D55E00;  /* Okabe-Ito vermilion */
+  --palette-color-6: #CC79A7;  /* Okabe-Ito reddish purple */
+  --palette-color-7: #F0E442;  /* Okabe-Ito yellow */
+
   --non-working-days-color: #F0F0F0;
   --expedited-color: #D55E00;        /* Okabe-Ito vermilion */
   --blocked-color: #D55E00;          /* Okabe-Ito vermilion */
@@ -19,6 +33,41 @@
   --type-bug-color: #D55E00;         /* Okabe-Ito vermilion */
   --type-spike-color: #CC79A7;       /* Okabe-Ito reddish purple */
 
+  /* The dependency chart is drawn by graphviz, which sets the label text inside the node rather
+     than beside it, so unlike --type-*-color above these are judged against the text and not
+     against the page. They are opaque, so the fill is the background the text sits on and there
+     is nothing for a dark theme to override.
+
+     These are Okabe-Ito hues rather than Okabe-Ito itself. At full strength they sit in a middle
+     band of lightness where NEITHER black nor white text is comfortable on them, which is the
+     thing to understand before changing any of this. Contrast ratio alone will mislead you here:
+     two earlier attempts cleared 7:1 and then 9:1, both of which WCAG calls comfortable, and both
+     still read as muddy in a real report. A mid-toned fill with dark text on it looks wrong at
+     almost any ratio. Going DARK and putting white text on it is what actually reads, so most of
+     these fills are dark, and each carries its own label colour: they are a pair, and changing a
+     fill without rechecking its label is how you get unreadable nodes.
+
+     They are not all dark, because the lightness spread is what does most of the work of keeping
+     them apart. Levelling them all to the same darkness measures about 3, which is unusable;
+     pastelling them all measures about 4.7, which is what the original colours here did. Run
+     `rake check_colors` for what they currently measure, against the full Okabe-Ito set as a
+     reference ceiling. */
+  --dependency-chart-story-color: #015C41;         /* Okabe-Ito bluish green, darkened */
+  --dependency-chart-story-label-color: white;
+  --dependency-chart-task-color: #56B4E9;          /* Okabe-Ito sky blue, unchanged */
+  --dependency-chart-task-label-color: black;
+  --dependency-chart-bug-color: #783200;           /* Okabe-Ito vermilion, darkened. Also Defect */
+  --dependency-chart-bug-label-color: white;
+  --dependency-chart-epic-color: #F0E442;          /* Okabe-Ito yellow, unchanged */
+  --dependency-chart-epic-label-color: black;
+  --dependency-chart-spike-color: #762A58;         /* Okabe-Ito reddish purple, darkened */
+  --dependency-chart-spike-label-color: white;
+
+  /* For a node whose fill was set in the config rather than coming from the palette above, where
+     we cannot know what would read on it. */
+  --dependency-chart-label-color: black;
+  --dependency-chart-link-color: gray;
+
   --status-category-todo-color: gray;
   --status-category-inprogress-color: #0072B2;  /* Okabe-Ito blue */
   --status-category-done-color: #009E73;         /* Okabe-Ito bluish green */
@@ -234,6 +283,10 @@ div.child_issue {
 html[data-theme="dark"] {
   --warning-banner: #9F2B00;
   --non-working-days-color: #2f2f2f;
+
+  /* See the matching comment in the prefers-color-scheme block below. */
+  --dependency-chart-link-color: #999999;
+
   --type-story-color: #2DCB9A;       /* lighter bluish green for dark bg */
   --type-task-color: #56B4E9;        /* sky blue for dark bg */
   --type-bug-color: #E69F00;         /* orange instead of vermilion for dark bg */
@@ -254,7 +307,14 @@ html[data-theme="dark"] {
   --wip-by-column-chart-limit-line-color: #E69F00;        /* Okabe-Ito orange */
   --wip-by-column-chart-recommendation-color: #2DCB9A;    /* lighter bluish green for dark bg */
   --wip-chart-completed-color: #2DCB9A;                   /* lighter bluish green */
-  --wip-chart-duration-more-than-four-weeks-color: #DE9AC4; /* lighter reddish purple */
+  /* Was inheriting the light #92D9C0, which sat too close to the completed colour above for
+     anyone with protanopia or deuteranopia. Those two mean "completed" and "completed but not
+     started", so they are exactly the pair a reader must separate. See jirametrics-3fg. */
+  --wip-chart-completed-but-not-started-color: #00A062;
+  /* Was #DE9AC4, a lightened reddish purple that collided with the sky blue used for the fastest
+     band. Those are the two ends of the duration ramp, so confusing them is the worst case. This
+     stays in the same warm family so the ramp still reads cool to warm as work ages. */
+  --wip-chart-duration-more-than-four-weeks-color: #B16BAE;
   --estimate-accuracy-chart-completed-border-color: #2DCB9A;
   --estimate-accuracy-chart-active-border-color: #E69F00;
   --expedited-chart-dot-issue-stopped-color: #2DCB9A;
@@ -266,7 +326,10 @@ html[data-theme="dark"] {
   --sprint-burndown-sprint-color-4: #CC79A7;  /* reddish purple (vermilion → orange conflicts with color-2) */
   --sprint-burndown-sprint-color-5: #F0E442;  /* yellow */
   --sprint-burndown-sprint-color-6: #D55E00;  /* vermilion (sky blue conflicts with color-1) */
-  --sprint-burndown-sprint-color-7: #92D9C0;  /* light teal (yellow conflicts with color-5) */
+  --sprint-burndown-sprint-color-7: #388CF3;  /* lightened blue. Was #92D9C0 light teal, which
+     sat too close to color-3 for anyone with protanopia or deuteranopia. Blue is the one
+     Okabe-Ito hue the dark set was missing, since the original is too dark on this
+     background. See jirametrics-60z for the measurements. */
   --daily-view-selected-issue-background: #474747;
   --daily-view-issue-border: #2DCB9A;
   --daily-view-selected-issue-border: #E69F00;
@@ -376,6 +439,12 @@ html[data-theme="light"] {
     --warning-banner: #9F2B00;
 
     --non-working-days-color: #2f2f2f;
+
+    /* The only dependency chart colour needing a dark variant. The fills do not, because they
+       are opaque and are their own background, but link lines and their labels sit on the page.
+       Plain gray manages only 2.4:1 here against 3.94:1 in light mode, so it is lifted to match. */
+    --dependency-chart-link-color: #999999;
+
     --type-story-color: #2DCB9A;       /* lighter bluish green for dark bg */
     --type-task-color: #56B4E9;        /* sky blue for dark bg */
     --type-bug-color: #E69F00;         /* orange instead of vermilion for dark bg */
@@ -405,12 +474,12 @@ html[data-theme="light"] {
     --hierarchy-table-inactive-item-text-color: #939393;
 
     --wip-chart-completed-color: #2DCB9A;                   /* lighter bluish green */
-    --wip-chart-completed-but-not-started-color: #92D9C0;
+    --wip-chart-completed-but-not-started-color: #00A062;   /* see jirametrics-3fg */
     --wip-chart-duration-less-than-day-color: #56B4E9;
     --wip-chart-duration-week-or-less-color: #F0E442;
     --wip-chart-duration-two-weeks-or-less-color: #E69F00;
     --wip-chart-duration-four-weeks-or-less-color: #D55E00;
-    --wip-chart-duration-more-than-four-weeks-color: #DE9AC4; /* lighter reddish purple */
+    --wip-chart-duration-more-than-four-weeks-color: #B16BAE; /* see jirametrics-3fg */
 
     --estimate-accuracy-chart-completed-border-color: #2DCB9A;
     --estimate-accuracy-chart-active-border-color: #E69F00;
@@ -425,7 +494,10 @@ html[data-theme="light"] {
     --sprint-burndown-sprint-color-4: #CC79A7;  /* reddish purple (vermilion → orange conflicts with color-2) */
     --sprint-burndown-sprint-color-5: #F0E442;  /* yellow */
     --sprint-burndown-sprint-color-6: #D55E00;  /* vermilion (sky blue conflicts with color-1) */
-    --sprint-burndown-sprint-color-7: #92D9C0;  /* light teal (yellow conflicts with color-5) */
+    --sprint-burndown-sprint-color-7: #388CF3;  /* lightened blue. Was #92D9C0 light teal, which
+     sat too close to color-3 for anyone with protanopia or deuteranopia. Blue is the one
+     Okabe-Ito hue the dark set was missing, since the original is too dark on this
+     background. See jirametrics-60z for the measurements. */
 
     --daily-view-selected-issue-background: #474747;
     --daily-view-issue-border: #2DCB9A;

data/lib/jirametrics/html/index.erb

@@ -4,9 +4,13 @@
     <title><%= project_name.empty? ? 'JiraMetrics' : "JiraMetrics - #{project_name}" %></title>
     <link rel="icon" type="image/png" href="https://github.com/mikebowler/jirametrics/blob/main/favicon.png?raw=true" />
     <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- Pinned to a major version, not to an exact one: patch and minor releases still arrive
+         automatically, but a new major cannot land in someone's report unannounced. The charts
+         depend on specific annotation plugin behaviour (hitTolerance, enter/leave, the label's own
+         drawTime), and nothing in the test suite reaches browser behaviour to catch a break. -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/3.1.0/chartjs-plugin-annotation.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3"></script>
     <script type="text/javascript">
 <%= javascript %>
     </script>

data/lib/jirametrics/html/index.js

@@ -141,6 +141,22 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', eve
 
 // Draw a diagonal pattern to highlight sections of a bar chart. Based on code found at:
 // https://stackoverflow.com/questions/28569667/fill-chart-js-bar-chart-with-diagonal-stripes-or-other-patterns
+// Apply an alpha to a colour that may only be resolvable in the browser, such as one that came
+// from a CSS variable. Ruby cannot do this arithmetic any more now that palette colours are
+// variables rather than literals.
+function withAlpha(color, alpha) {
+  const probe = document.createElement('canvas').getContext('2d')
+  probe.fillStyle = color
+  const resolved = probe.fillStyle  // normalised by the browser to #rrggbb or rgba(...)
+  if (resolved.startsWith('#')) {
+    const r = parseInt(resolved.substr(1, 2), 16)
+    const g = parseInt(resolved.substr(3, 2), 16)
+    const b = parseInt(resolved.substr(5, 2), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+  return resolved.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `, ${alpha})`)
+}
+
 function createDiagonalPattern(color = 'black') {
   // create a 5x5 px canvas for the pattern's base shape
   let shape = document.createElement('canvas')

data/lib/jirametrics/html/legacy_colors.css

@@ -30,6 +30,22 @@ html[data-theme="light"] {
   --type-bug-color: orange;
   --type-spike-color: #9400D3;
 
+  /* The dependency chart's original pastels. They are pleasant but they are not safe: pale
+     colours sit close together, and green, peach and pale yellow are hard to separate for anyone
+     with red-green colour vision deficiency. Every one of them is light, so the label colours all
+     go back to black; the shipped set has dark fills that need white. */
+  --dependency-chart-story-color: #90EE90;
+  --dependency-chart-story-label-color: black;
+  --dependency-chart-task-color: #87CEFA;
+  --dependency-chart-task-label-color: black;
+  --dependency-chart-bug-color: #ffdab9;
+  --dependency-chart-bug-label-color: black;
+  --dependency-chart-epic-color: #fafad2;
+  --dependency-chart-epic-label-color: black;
+  --dependency-chart-spike-color: #DDA0DD;
+  --dependency-chart-spike-label-color: black;
+  --dependency-chart-link-color: gray;
+
   --status-category-todo-color: gray;
   --status-category-inprogress-color: #2663ff;
   --status-category-done-color: #00ff00;
@@ -106,6 +122,7 @@ html[data-theme="light"] {
 html[data-theme="dark"] {
   --warning-banner: #9F2B00;
   --non-working-days-color: #2f2f2f;
+  --dependency-chart-link-color: gray;   /* the chart had no dark variant originally */
   --type-story-color: #6fb86f;
   --type-task-color: #0021b3;
   --type-bug-color: #bb5603;
@@ -139,6 +156,7 @@ html[data-theme="dark"] {
   :root {
     --warning-banner: #9F2B00;
     --non-working-days-color: #2f2f2f;
+    --dependency-chart-link-color: gray;   /* the chart had no dark variant originally */
     --type-story-color: #6fb86f;
     --type-task-color: #0021b3;
     --type-bug-color: #bb5603;