OTWO 7677 Fix enlistments and Highcharts related bugs in New UI/UX

app/assets/javascripts/charts.js

@@ -25,7 +25,6 @@ var Charts = {
       var options = chart.data();
       var data = $.parseJSON(chart.attr('data-value'));
       if(options.pname) data.series.name = options.pname;
-      Charts.applyDarkModeWatermark(chart, data);
       Charts.renderChart(this, data, '200', options);
     });
   },
@@ -149,6 +148,12 @@ var Charts = {
       width: 950,
       lang: {
         thousandsSep: ','
+      },
+      exporting: {
+        enabled: false
+      },
+      credits: {
+        enabled: false
       }
     })
 
@@ -168,7 +173,6 @@ var Charts = {
 
             success: function(data, textStatus) {
               if(options.pname) data.series.name = options.pname;
-              Charts.applyDarkModeWatermark($chart, data);
               setTimeout(function(){
                 Charts.renderChart(chart, data, textStatus, options);
               }, 100);
@@ -184,57 +188,6 @@ var Charts = {
     }
 
   },
-  // Only swap background-image when dark mode is active — never touch it in light mode
-  applyDarkModeWatermark: function($chart, data) {
-    if (!$('html').hasClass('dark')) return;
-    var darkUrl = $chart.data('dark-watermark');
-    var lightUrl = $chart.data('light-watermark');
-    if (darkUrl && data.chart && data.chart.style && data.chart.style['background-image']) {
-      if (darkUrl === lightUrl) {
-        // CSS ::before handles dark appearance — remove background-image so inline style doesn't block CSS
-        delete data.chart.style['background-image'];
-      } else {
-        data.chart.style['background-image'] = 'url(' + darkUrl + ')';
-      }
-    }
-  },
-
-  // Update already-rendered charts when theme toggles
-  updateWatermarks: function(isDark) {
-    $('.chart[data-dark-watermark], .chart-with-data[data-dark-watermark]').each(function() {
-      var $chart = $(this);
-      var $container = $chart.find('.highcharts-container');
-      if (!$container.length) return;
-      var darkUrl = $chart.data('dark-watermark');
-      var lightUrl = $chart.data('light-watermark');
-      if (isDark) {
-        if (darkUrl === lightUrl) {
-          // CSS ::before handles dark appearance — clear inline style so CSS background-image: none applies
-          $container[0].style.removeProperty('background-image');
-        } else {
-          if (darkUrl) $container[0].style.setProperty('background-image', 'url(' + darkUrl + ')', 'important');
-        }
-      } else {
-        if (lightUrl) $container[0].style.setProperty('background-image', 'url(' + lightUrl + ')', 'important');
-      }
-    });
-
-    // Handle streamgraph (D3 SVG) watermark
-    // Dark mode: CSS ::before on #ohloh_streamgraph handles watermark — clear SVG inline style
-    // Light mode: restore watermark on SVG since html.dark class is gone
-    var $streamgraph = $('#ohloh_streamgraph[data-dark-watermark]');
-    if ($streamgraph.length) {
-      var $svg = $streamgraph.find('svg.background-watermark');
-      if ($svg.length) {
-        if (isDark) {
-          $svg[0].style.removeProperty('background-image');
-        } else {
-          var lightUrl = $streamgraph.data('light-watermark');
-          if (lightUrl) $svg[0].style.backgroundImage = 'url(' + lightUrl + ')';
-        }
-      }
-    }
-  },
 
   commit_volume_formatter: function() {
     return '<strong>' + this.series.name + '</strong><br/>' + this.y + ' Commits (' + Math.floor(this.percentage) + '%)';

app/assets/javascripts/enlistments.js.coffee

@@ -14,7 +14,7 @@ class App.EnlistmentSelect
   showSpinnerAndSubmit = ->
     $(this).attr('disabled', 'disabled')
     $('.enlistment .spinner').show()
-    $('.well.enlistment form').submit()
+    $('.enlistment form').submit()
 
   hideAllScmInfo = ->
     $('.enlistment .scm_info').hide()

app/assets/javascripts/theme_toggle.js

@@ -147,10 +147,6 @@ var ThemeToggle = {
     }
 
     this.setCookie(this.COOKIE_NAME, theme, this.COOKIE_DAYS);
-
-    if (typeof Charts !== 'undefined') {
-      Charts.updateWatermarks(theme === 'dark');
-    }
   },
 
   toggleTheme: function() {

app/assets/stylesheets/api/custom.sass

@@ -1687,59 +1687,43 @@
         padding: 6px
 
   #cve-cvss3, #cvss3, #cve-cvss3-mobile, #cvss3-mobile
-    background: asset-url("charts/watermark_340.png") no-repeat center
-    background-size: contain
     position: relative
     width: 100%
     height: 100%
 
-    html.dark &
-      background-image: none
-
-      &::before
-        content: ''
-        position: absolute
-        top: 0
-        left: 0
-        right: 0
-        bottom: 0
-        background: asset-url("charts/watermark_340.png") no-repeat center
-        background-size: contain
-        filter: hue-rotate(260deg) saturate(1.2) brightness(0.3)
-        opacity: 0.2
-        pointer-events: none
-
-      .highcharts-axis-labels text,
-      .highcharts-axis-title text
-        fill: #d1d5db !important
-        stroke: none !important
-        stroke-width: 0 !important
-        -webkit-text-stroke: 0 !important
-        paint-order: stroke fill !important
-
-      .highcharts-legend text
-        fill: #d1d5db !important
-        stroke: none !important
-        stroke-width: 0 !important
-        -webkit-text-stroke: 0 !important
-        paint-order: stroke fill !important
-
-      svg text
-        stroke: none !important
-        stroke-width: 0 !important
-        -webkit-text-stroke: 0 !important
-
-      text[stroke]
-        stroke: none !important
-        stroke-width: 0 !important
-        -webkit-text-stroke: 0 !important
-
-      .highcharts-axis-line
-        stroke: #6b7280 !important
-
-      .highcharts-grid-line
-        stroke: #374151 !important
-        opacity: 0.3
+html.dark
+  #cve-cvss3, #cvss3, #cve-cvss3-mobile, #cvss3-mobile
+    .highcharts-axis-labels text,
+    .highcharts-axis-title text
+      fill: #d1d5db !important
+      stroke: none !important
+      stroke-width: 0 !important
+      -webkit-text-stroke: 0 !important
+      paint-order: stroke fill !important
+
+    .highcharts-legend text
+      fill: #d1d5db !important
+      stroke: none !important
+      stroke-width: 0 !important
+      -webkit-text-stroke: 0 !important
+      paint-order: stroke fill !important
+
+    svg text
+      stroke: none !important
+      stroke-width: 0 !important
+      -webkit-text-stroke: 0 !important
+
+    text[stroke]
+      stroke: none !important
+      stroke-width: 0 !important
+      -webkit-text-stroke: 0 !important
+
+    .highcharts-axis-line
+      stroke: #6b7280 !important
+
+    .highcharts-grid-line
+      stroke: #374151 !important
+      opacity: 0.3
 
 .search-container
   display: flex

app/assets/stylesheets/charts.sass

@@ -1,28 +1,3 @@
-.watermark340 .highcharts-container
-  background: asset-url("charts/watermark_340.png") no-repeat center
-  background-size: contain
-
-.watermark440 .highcharts-container
-  background: asset-url("charts/watermark_440.png") no-repeat center
-  background-size: contain
-
-#project_contributions .highcharts-container
-  background: asset-url("charts/watermark_692.png") no-repeat 18% 50%
-  background-size: contain
-
-.watermark860 .highcharts-container
-  background: asset-url("charts/watermark_860.png") no-repeat center
-  background-size: contain
-
-.watermark900white .highcharts-container
-  background: asset-url("charts/watermark_white_900.png") no-repeat center
-  background-size: contain
-  background-color: #ffffff
-
-.watermark914 .highcharts-container,
-#all_projects .highcharts-container
-  background: asset-url("charts/watermark_914.png") no-repeat center
-  background-size: contain
 
 #vulnerabilities_index_page,
 #vulnerability_version_chart

app/assets/stylesheets/dark_theme.sass

@@ -459,48 +459,6 @@ html.dark
   #all_projects
     .highcharts-container
       background-image: none
-      position: relative
-      &::before
-        content: ''
-        position: absolute
-        top: 0
-        left: 0
-        right: 0
-        bottom: 0
-        z-index: 1
-        background: asset-url("charts/watermark_340.png") no-repeat center
-        background-size: contain
-        filter: hue-rotate(260deg) saturate(1.2) brightness(0.3)
-        opacity: 0.2
-        pointer-events: none
-
-// Per-class background overrides — shared block above always uses watermark_340.png
-html.dark
-  .watermark440
-    .highcharts-container
-      &::before
-        background: asset-url("charts/watermark_440.png") no-repeat center
-        background-size: contain
-html.dark
-  .watermark860
-    .highcharts-container
-      &::before
-        background: asset-url("charts/watermark_860.png") no-repeat center
-        background-size: contain
-html.dark
-  .watermark900white
-    .highcharts-container
-      background-color: #1D0631 !important
-      &::before
-        background: asset-url("charts/watermark_white_900.png") no-repeat center
-        background-size: contain
-html.dark
-  .watermark914,
-  #all_projects
-    .highcharts-container
-      &::before
-        background: asset-url("charts/watermark_914.png") no-repeat center
-        background-size: contain
 
 // Vulnerability all-version chart dark mode (index page — no .project-show-redesign wrapper)
 html.dark #vulnerability_all_version_chart

app/assets/stylesheets/streamgraph.sass

@@ -61,50 +61,6 @@
   font-size: 12px
   line-height: 1
 
-.full
-  .background-watermark
-    background: asset_url('charts/watermark_860.png') no-repeat center
-
-.regular
-  .background-watermark
-    background: asset_url('charts/watermark_692.png') no-repeat center left
-    background-size: contain
-
-html.dark .regular .background-watermark
-  background: none
-
-html.dark #ohloh_streamgraph.regular
-  position: relative
-  &::before
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background: asset_url('charts/watermark_692.png') no-repeat center left
-    background-size: contain
-    filter: hue-rotate(260deg) saturate(1.2) brightness(0.3)
-    opacity: 0.2
-    pointer-events: none
-
-html.dark .full .background-watermark
-  background: none
-
-html.dark #ohloh_streamgraph.full
-  position: relative
-  &::before
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background: asset_url('charts/watermark_860.png') no-repeat center
-    background-size: contain
-    filter: hue-rotate(260deg) saturate(1.2) brightness(0.3)
-    opacity: 0.2
-    pointer-events: none
 @media only all and (min-width: 320px) and (max-width: 480px)
   #ohloh_streamgraph
     &.languages

app/decorators/analysis/code_history_chart.rb

@@ -9,13 +9,12 @@ def initialize(analysis)
   end
 
   def data
-    series_and_range_data(@defaults).deep_merge(chart_watermark)
+    series_and_range_data(@defaults)
   end
 
   def data_for_lines_of_code
     data.deep_merge(ANALYSIS_CHARTS_OPTIONS['no_auxillaries'])
         .deep_merge(ANALYSIS_CHARTS_OPTIONS['lines_of_code'])
-        .deep_merge(chart_watermark)
   end
 
   private