Merge branch '42677-neaten-up-tooltip-styling-on-cycle-analytics-duration-chart' into 'master'

Resolve "Neaten up tooltip styling on cycle analytics duration chart"

Closes #42677

See merge request gitlab-org/gitlab!22883

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -8,10 +8,10 @@ import { PROJECTS_PER_PAGE, DEFAULT_DAYS_IN_PAST } from '../constants';
 import GroupsDropdownFilter from '../../shared/components/groups_dropdown_filter.vue';
 import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
 import Scatterplot from '../../shared/components/scatterplot.vue';
+import { LAST_ACTIVITY_AT, dateFormats } from '../../shared/constants';
 import StageDropdownFilter from './stage_dropdown_filter.vue';
 import SummaryTable from './summary_table.vue';
 import StageTable from './stage_table.vue';
-import { LAST_ACTIVITY_AT } from '../../shared/constants';
 import TasksByTypeChart from './tasks_by_type_chart.vue';
 
 export default {
@@ -196,6 +196,7 @@ export default {
     with_shared: false,
     order_by: LAST_ACTIVITY_AT,
   },
+  durationChartTooltipDateFormat: dateFormats.defaultDate,
 };
 </script>
 
@@ -308,6 +309,7 @@ export default {
             v-if="durationChartPlottableData"
             :x-axis-title="s__('CycleAnalytics|Date')"
             :y-axis-title="s__('CycleAnalytics|Total days to completion')"
+            :tooltip-date-format="$options.durationChartTooltipDateFormat"
             :scatter-data="durationChartPlottableData"
           />
           <div v-else ref="duration-chart-no-data" class="bs-callout bs-callout-info">

ee/app/assets/javascripts/analytics/shared/components/scatterplot.vue

@@ -25,6 +25,11 @@ export default {
       required: false,
       default: () => [],
     },
+    tooltipDateFormat: {
+      type: String,
+      required: false,
+      default: dateFormats.defaultDateTime,
+    },
   },
   data() {
     return {
@@ -69,7 +74,7 @@ export default {
   methods: {
     renderTooltip({ data }) {
       const [, metric, dateTime] = data;
-      this.tooltipTitle = dateFormat(dateTime, dateFormats.defaultDateTime);
+      this.tooltipTitle = dateFormat(dateTime, this.tooltipDateFormat);
       this.tooltipContent = metric;
     },
   },
@@ -86,7 +91,7 @@ export default {
   >
     <div slot="tooltipTitle">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
     <div slot="tooltipContent" class="d-flex">
-      <div class="flex-grow-1">{{ yAxisTitle }}</div>
+      <div class="flex-grow-1">{{ yAxisTitle }}:&nbsp;</div>
       <div class="font-weight-bold">{{ tooltipContent }}</div>
     </div>
   </gl-discrete-scatter-chart>