ref(charts): Rename tooltip-date to tooltip-footer and add total volume info - (#41745)

static/app/components/charts/baseChart.tsx

@@ -587,7 +587,7 @@ function BaseChartUnwrapped({
 const getTooltipStyles = (p: {theme: Theme}) => css`
   /* Tooltip styling */
   .tooltip-series,
-  .tooltip-date {
+  .tooltip-footer {
     color: ${p.theme.subText};
     font-family: ${p.theme.text.family};
     font-variant-numeric: tabular-nums;
@@ -607,6 +607,9 @@ const getTooltipStyles = (p: {theme: Theme}) => css`
     font-weight: normal;
     color: ${p.theme.textColor};
   }
+  .tooltip-label-value {
+    color: ${p.theme.textColor};
+  }
   .tooltip-label-indent {
     margin-left: 18px;
   }
@@ -615,12 +618,15 @@ const getTooltipStyles = (p: {theme: Theme}) => css`
     justify-content: space-between;
     align-items: baseline;
   }
-  .tooltip-date {
+  .tooltip-footer {
     border-top: solid 1px ${p.theme.innerBorder};
     text-align: center;
     position: relative;
     width: auto;
     border-radius: ${p.theme.borderRadiusBottom};
+    display: flex;
+    justify-content: space-between;
+    gap: ${space(3)};
   }
   .tooltip-arrow {
     top: 100%;

static/app/components/charts/components/tooltip.tsx

@@ -5,6 +5,7 @@ import type {TooltipComponentFormatterCallback, TooltipComponentOption} from 'ec
 import moment from 'moment';
 
 import BaseChart from 'sentry/components/charts/baseChart';
+import {tct} from 'sentry/locale';
 import {DataPoint} from 'sentry/types/echarts';
 import {getFormattedDate, getTimeFormat} from 'sentry/utils/dates';
 import toArray from 'sentry/utils/toArray';
@@ -178,7 +179,7 @@ function getFormatter({
           ${truncatedName}: ${formattedValue}
         </div>`,
         '</div>',
-        `<div class="tooltip-date">${label}</div>`,
+        `<div class="tooltip-footer">${label}</div>`,
         '</div>',
       ].join('');
     }
@@ -204,45 +205,64 @@ function getFormatter({
         seriesParamsOrParam
       );
 
-    return [
-      '<div class="tooltip-series">',
-      seriesParams
-        .filter(getFilter)
-        .map(s => {
-          const formattedLabel = nameFormatter(
-            truncationFormatter(s.seriesName ?? '', truncate)
-          );
-          const value = valueFormatter(getSeriesValue(s, 1), s.seriesName, s);
-
-          const marker = markerFormatter(s.marker ?? '', s.seriesName);
-
-          const filteredSubLabels = subLabels.filter(
-            subLabel => subLabel.parentLabel === s.seriesName
-          );
-
-          if (filteredSubLabels.length) {
-            const labelWithSubLabels = [
-              `<div><span class="tooltip-label">${marker} <strong>${formattedLabel}</strong></span> ${value}</div>`,
-            ];
-
-            for (const subLabel of filteredSubLabels) {
-              labelWithSubLabels.push(
-                `<div><span class="tooltip-label tooltip-label-indent"><strong>${
-                  subLabel.label
-                }</strong></span> ${valueFormatter(
-                  subLabel.data[s.dataIndex].value
-                )}</div>`
-              );
-            }
-
-            return labelWithSubLabels.join('');
+    const {series, total} = seriesParams.filter(getFilter).reduce(
+      (acc, serie) => {
+        const formattedLabel = nameFormatter(
+          truncationFormatter(serie.seriesName ?? '', truncate)
+        );
+
+        const value = valueFormatter(getSeriesValue(serie, 1), serie.seriesName, serie);
+
+        const marker = markerFormatter(serie.marker ?? '', serie.seriesName);
+
+        const filteredSubLabels = subLabels.filter(
+          subLabel => subLabel.parentLabel === serie.seriesName
+        );
+
+        if (filteredSubLabels.length) {
+          const labelWithSubLabels = [
+            `<div><span class="tooltip-label">${marker} <strong>${formattedLabel}</strong></span> <strong>${value}</strong></div>`,
+          ];
+
+          for (const subLabel of filteredSubLabels) {
+            const serieValue = subLabel.data[serie.dataIndex].value;
+
+            labelWithSubLabels.push(
+              `<div><span class="tooltip-label tooltip-label-indent"><strong>${
+                subLabel.label
+              }</strong></span> ${valueFormatter(serieValue)}</div>`
+            );
+
+            acc.total = acc.total + subLabel.data[serie.dataIndex].value;
           }
 
-          return `<div><span class="tooltip-label">${marker} <strong>${formattedLabel}</strong></span> ${value}</div>`;
-        })
-        .join(''),
+          acc.series.push(labelWithSubLabels.join(''));
+          return acc;
+        }
+
+        acc.total = acc.total + getSeriesValue(serie, 1);
+
+        acc.series.push(
+          `<div><span class="tooltip-label">${marker} <strong>${formattedLabel}</strong></span> <strong>${value}</strong></div>`
+        );
+        return acc;
+      },
+      {
+        series: [],
+        total: 0,
+      }
+    );
+
+    return [
+      `<div class="tooltip-series">${series.join('')}</div>`,
+      '<div class="tooltip-footer">',
+      `<div>${tct(`[term:Date:] [value]`, {term: <strong />, value: date})}</div>`,
+      `<div>${tct(`[term:Total:] [value]`, {
+        term: <strong />,
+        value: valueFormatter(total),
+      })}</div>`,
+
       '</div>',
-      `<div class="tooltip-date">${date}</div>`,
       '<div class="tooltip-arrow"></div>',
     ].join('');
   };

static/app/components/charts/percentageAreaChart.tsx

@@ -91,7 +91,7 @@ export default class PercentageAreaChart extends Component<Props> {
                 )
                 .join(''),
               '</div>',
-              `<div class="tooltip-date">${date}</div>`,
+              `<div class="tooltip-footer">${date}</div>`,
               '<div class="tooltip-arrow"></div>',
             ].join('');
           },

static/app/components/charts/pieChart.tsx

@@ -151,7 +151,7 @@ class PieChart extends Component<Props> {
               '<div class="tooltip-series">',
               `<div><span class="tooltip-label">${data.marker}<strong>${data.name}</strong></span> ${data.percent}%</div>`,
               '</div>',
-              `<div class="tooltip-date">${data.value}</div>`,
+              `<div class="tooltip-footer">${data.value}</div>`,
               '</div>',
               '<div class="tooltip-arrow"></div>',
             ].join('');

static/app/components/charts/releaseSeries.tsx

@@ -279,7 +279,7 @@ class ReleaseSeries extends Component<Props, State> {
               'Release'
             )}</strong></span> ${version}</div>`,
             '</div>',
-            '<div class="tooltip-date">',
+            '<div class="tooltip-footer">',
             time,
             '</div>',
             '</div>',

static/app/components/events/interfaces/performance/spanCountChart.tsx

@@ -66,7 +66,7 @@ export function SpanCountChart({issue, event, location, organization}: Props) {
           ].join('');
         });
         const seriesLabel = seriesData[0].value[0];
-        contents.push(`<div class="tooltip-date">${seriesLabel}</div>`);
+        contents.push(`<div class="tooltip-footer">${seriesLabel}</div>`);
 
         contents.push('<div class="tooltip-arrow"></div>');
         return contents.join('');

static/app/components/group/releaseChart.tsx

@@ -98,7 +98,7 @@ export function getGroupReleaseChartMarkers(
         '<div class="tooltip-series">',
         `<div><span class="tooltip-label"><strong>${data.name}</strong></span></div>`,
         '</div>',
-        `<div class="tooltip-date">${time}</div>`,
+        `<div class="tooltip-footer">${time}</div>`,
         '</div>',
         '<div class="tooltip-arrow"></div>',
       ].join('');

static/app/views/alerts/rules/metric/details/metricChart.tsx

@@ -423,7 +423,7 @@ class MetricChart extends PureComponent<Props, State> {
                           comparisonSeries &&
                             `<div><span class="tooltip-label">${comparisonSeries.marker} <strong>${comparisonSeriesName}</strong></span>${comparisonPointYFormatted}</div>`,
                           `</div>`,
-                          `<div class="tooltip-date">`,
+                          `<div class="tooltip-footer">`,
                           `<span>${startTime} &mdash; ${endTime}</span>`,
                           comparisonPointY !== undefined &&
                             Math.abs(changePercentage) !== Infinity &&

static/app/views/alerts/rules/metric/details/metricChartOption.tsx

@@ -98,7 +98,7 @@ function createIncidentSeries(
           : ''
       }`,
       `</div></div>`,
-      `<div class="tooltip-date">${time}</div>`,
+      `<div class="tooltip-footer">${time}</div>`,
       '<div class="tooltip-arrow"></div>',
     ].join('');
   };

static/app/views/organizationStats/teamInsights/teamReleases.tsx

@@ -236,7 +236,7 @@ class TeamReleases extends AsyncComponent<Props, State> {
                   `<div><span class="tooltip-label">${series.marker} <strong>${series.seriesName}</strong></span> ${series.data[1]}</div>`,
                   `<div><span class="tooltip-label"><strong>Last ${period} Average</strong></span> ${totalPeriodAverage}</div>`,
                   '</div>',
-                  `<div class="tooltip-date">${startDate} - ${endDate}</div>`,
+                  `<div class="tooltip-footer">${startDate} - ${endDate}</div>`,
                   '<div class="tooltip-arrow"></div>',
                 ].join('');
               },