[gui] Fix statistics table coloring

web/server/vue-cli/src/components/Statistics/BaseStatisticsTable.vue

@@ -1,6 +1,7 @@
 <template>
   <v-data-table
     v-bind="{ ...$props }"
+    :row-props="getRowProps"
     :disable-pagination="true"
     :hide-default-footer="true"
     :custom-sort="customSort"
@@ -554,7 +555,7 @@
     </template>
 
     <template v-if="necessaryTotal" v-slot:body.append>
-      <tr>
+      <tr class="total-row">
         <td class="text-center" :colspan="colspan">
           <strong>Total</strong>
         </td>
@@ -606,7 +607,8 @@ const props = defineProps({
     default: () => [ "unreviewed", "confirmed", "outstanding",
       "falsePositive", "intentional", "suppressed","reports" ]
   },
-  necessaryTotal: { type: Boolean, default: false }
+  necessaryTotal: { type: Boolean, default: false },
+  itemClass: { type: Function, default: null }
 });
 
 defineEmits([ "enabled-click" ]);
@@ -616,6 +618,12 @@ const reportStatus = useReportStatus();
 const reviewStatus = useReviewStatus();
 const severity = useSeverity();
 
+function getRowProps({ item }) {
+  if (!props.itemClass) return {};
+  const className = props.itemClass(item);
+  return className ? { class: className } : {};
+}
+
 const severityFromCodeToString = computed(function() {
   return severity.severityFromCodeToString;
 });

web/server/vue-cli/src/components/Statistics/Checker/CheckerStatisticsTable.vue

@@ -69,7 +69,7 @@ const headers = [
 </script>
 
 <style lang="scss">
-@use "@/components/Statistics/style.scss" with (
+@use "@/components/Statistics/colored-columns" with (
   $class-name: ".checker-statistics"
 );
 </style>

web/server/vue-cli/src/components/Statistics/CheckerCoverage/CheckerCoverageStatisticsTable.vue

@@ -59,7 +59,7 @@ function enabledClick(_type, _checker_name) {
 </script>
 
 <style lang="scss">
-@use "@/components/Statistics/style.scss" with (
+@use "@/components/Statistics/base-table" with (
   $class-name: ".analysis-statistics"
 );
 </style>

web/server/vue-cli/src/components/Statistics/Component/ComponentStatisticsTable.vue

@@ -123,7 +123,7 @@ async function itemExpanded(expandedItem) {
 </script>
 
 <style lang="scss">
-@use "@/components/Statistics/style.scss" with (
+@use "@/components/Statistics/colored-columns" with (
   $class-name: ".component-statistics"
 );
 </style>

web/server/vue-cli/src/components/Statistics/Guideline/GuidelineStatisticsTable.vue

@@ -143,7 +143,7 @@ function getRowClass(item) {
 </script>
 
 <style lang="scss">
-@use "@/components/Statistics/style.scss" with (
+@use "@/components/Statistics/highlight-rows" with (
   $class-name: ".guideline-statistics-table"
 );
 </style>

web/server/vue-cli/src/components/Statistics/Severity/ComponentSeverityStatistics/ComponentSeverityStatisticsTable.vue

@@ -1,7 +1,7 @@
 <template>
   <base-statistics-table
     v-model:expanded="expanded"
-    class="component-statistics"
+    class="component-severity-statistics"
     :headers="headers"
     :items="items"
     :loading="loading"
@@ -125,6 +125,8 @@ async function itemExpanded(expandedItem) {
 }
 </script>
 
-<style lang="scss" scoped>
-// This section is needed to override the default inherited style.
+<style lang="scss">
+@use "@/components/Statistics/base-table" with (
+  $class-name: ".component-severity-statistics"
+);
 </style>

web/server/vue-cli/src/components/Statistics/Severity/SeverityStatisticsTable.vue

@@ -66,7 +66,7 @@ const headers = [
 </script>
 
 <style lang="scss">
-@use "@/components/Statistics/style.scss" with (
+@use "@/components/Statistics/colored-columns" with (
   $class-name: ".severity-statistics",
   $unreviewed_col: 2,
   $colspan: 0

web/server/vue-cli/src/components/Statistics/_base-table.scss

@@ -0,0 +1,10 @@
+$class-name: "" !default;
+
+$tr: "tr:not(.v-data-table__expanded__content)";
+
+#{$class-name} > table {
+  & > thead > #{$tr}:not(:last-child) > th:not(.v-data-table__mobile-row),
+  & > tbody > #{$tr}:not(:last-child) > td:not(.v-data-table__mobile-row) {
+    border-bottom: thin solid rgba(0, 0, 0, 0.12);
+  }
+}

web/server/vue-cli/src/components/Statistics/style.scss → web/server/vue-cli/src/components/Statistics/_colored-columns.scss

@@ -1,4 +1,4 @@
-$class-name: '' !default;
+$class-name: "" !default;
 $unreviewed_col: 3 !default;
 $colspan: 1 !default;
 
@@ -13,39 +13,50 @@ $border_before: (
   $suppressed_reports_col + 1
 ) !default;
 
+// The total row uses colspan to merge the leading columns into one cell,
+// so nth-child indices are shifted by (colspan - 1).
+$total-row-offset: $unreviewed_col - 2;
+
 $outstanding-bg-color: #fef5f6;
 $suppressed-bg-color: #f2f6eb;
 $darken: 2;
 
-$tr: 'tr:not(.v-data-table__expanded__content)';
+$tr: "tr:not(.v-data-table__expanded__content):not(.total-row)";
 
 @mixin set-cells-color($cols...) {
   #{$class-name} table {
     @each $col in $cols {
       th:nth-child(#{$col}),
-      td:nth-child(#{$col}) {
+      tbody #{$tr} td:nth-child(#{$col}) {
         @content;
       }
     }
   }
 }
 
-@mixin set-rows-color() {
-  #{$class-name} > table {
-    & > tbody > #{$tr} {
-      @content;
+@mixin set-total-row-color($cols...) {
+  #{$class-name} table tbody tr.total-row {
+    @each $col in $cols {
+      td:nth-child(#{$col - $total-row-offset}) {
+        @content;
+      }
     }
   }
 }
 
 @mixin set-bg-color($bg-color, $cols...) {
-  // Base color
+  // Header and regular body rows
   @include set-cells-color($cols...) {
     background-color: $bg-color;
   }
 
-  // Hover state
-  #{$class-name} table tbody tr:hover {
+  // Total row (shifted indices due to colspan)
+  @include set-total-row-color($cols...) {
+    background-color: $bg-color;
+  }
+
+  // Hover state for regular rows
+  #{$class-name} table tbody #{$tr}:hover {
     @each $col in $cols {
       td:nth-child(#{$col}) {
         background-color: darken($bg-color, 5%);
@@ -54,14 +65,14 @@ $tr: 'tr:not(.v-data-table__expanded__content)';
   }
 }
 
-// Set background color of outstanding report columns.
+// Set background color of outstanding report columns (red).
 @for $i from $unreviewed_col through $outstanding_reports_col {
   @include set-bg-color($outstanding-bg-color, $i);
 }
 
 @include set-bg-color(darken($outstanding-bg-color, $darken), $outstanding_reports_col);
 
-// Set background color of suppressed report columns.
+// Set background color of suppressed report columns (green).
 @for $i from $false_positive_col through $suppressed_reports_col {
   @include set-bg-color($suppressed-bg-color, $i);
 }
@@ -76,12 +87,8 @@ $tr: 'tr:not(.v-data-table__expanded__content)';
 }
 
 #{$class-name} > table {
-  & > thead > #{$tr}:not(:last-child) > th:not(.v-data-table__mobile-row),
-  & > tbody > #{$tr}:not(:last-child) > td:not(.v-data-table__mobile-row) {
+  & > thead > tr:not(:last-child) > th:not(.v-data-table__mobile-row),
+  & > tbody > tr:not(:last-child) > td:not(.v-data-table__mobile-row) {
     border-bottom: thin solid rgba(0, 0, 0, 0.12);
   }
 }
-
-#{$class-name} .highlight-row {
-  background-color: $outstanding-bg-color !important;
-}

web/server/vue-cli/src/components/Statistics/_highlight-rows.scss

@@ -0,0 +1,16 @@
+$class-name: "" !default;
+
+$outstanding-bg-color: #fef5f6;
+
+$tr: "tr:not(.v-data-table__expanded__content)";
+
+#{$class-name} tr.highlight-row td {
+  background-color: $outstanding-bg-color !important;
+}
+
+#{$class-name} > table {
+  & > thead > #{$tr}:not(:last-child) > th:not(.v-data-table__mobile-row),
+  & > tbody > #{$tr}:not(:last-child) > td:not(.v-data-table__mobile-row) {
+    border-bottom: thin solid rgba(0, 0, 0, 0.12);
+  }
+}