ref(cache): update transaction title, update chart tooltips, remove legend (#70599)

1. Update `txn` titles to `transaction`
2. Add more human readible tooltip on cache miss rate chart and
transaction duration chart
3. Remove legend on cache miss chart as it only has one series.

Author: DominikB2014

static/app/views/performance/cache/cacheLandingPage.tsx

@@ -37,6 +37,7 @@ import {useMetrics, useSpanMetrics} from 'sentry/views/starfish/queries/useDisco
 import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useDiscoverSeries';
 import {SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
+import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 const {CACHE_MISS_RATE} = SpanFunction;
 const {CACHE_ITEM_SIZE} = SpanMetricsField;
@@ -168,7 +169,10 @@ export function CacheLandingPage() {
             </ModuleLayout.Full>
             <ModuleLayout.Half>
               <CacheHitMissChart
-                series={cacheHitRateData[`${CACHE_MISS_RATE}()`]}
+                series={{
+                  seriesName: DataTitles.cacheMissRate,
+                  data: cacheHitRateData[`${CACHE_MISS_RATE}()`]?.data,
+                }}
                 isLoading={isCacheHitRateLoading}
                 error={cacheHitRateError}
               />

static/app/views/performance/cache/charts/hitMissChart.tsx

@@ -16,7 +16,6 @@ export function CacheHitMissChart({series, isLoading, error}: Props) {
   return (
     <ChartPanel title={DataTitles.cacheMissRate}>
       <Chart
-        showLegend
         height={CHART_HEIGHT}
         grid={{
           left: '4px',

static/app/views/performance/cache/samplePanel/charts/transactionDurationChart.tsx

@@ -1,3 +1,4 @@
+import {t} from 'sentry/locale';
 import type {EChartHighlightHandler} from 'sentry/types/echarts';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
@@ -73,7 +74,7 @@ export function TransactionDurationChart({
   };
 
   return (
-    <ChartPanel title={DataTitles.transactionDuration}>
+    <ChartPanel title={DataTitles['transaction.duration']}>
       <Chart
         height={CHART_HEIGHT}
         grid={{
@@ -83,7 +84,13 @@ export function TransactionDurationChart({
           bottom: '0',
         }}
         scatterPlot={sampledSpanDataSeries}
-        data={[data['avg(transaction.duration)']]}
+        data={[
+          {
+            seriesName: t('Average Transaction Duration'),
+            data: data['avg(transaction.duration)'].data,
+          },
+        ]}
+        aggregateOutputFormat="duration"
         loading={isLoading}
         onHighlight={handleChartHighlight}
         chartColors={[AVG_COLOR]}

static/app/views/starfish/views/spans/types.tsx

@@ -25,7 +25,7 @@ export type DataKey =
   | 'httpCodeBreakdown'
   | 'cacheMissRate'
   | 'avg(cache.item_size)'
-  | 'transactionDuration';
+  | 'transaction.duration';
 
 export const DataTitles: Record<DataKey, string> = {
   change: t('Change'),
@@ -45,12 +45,12 @@ export const DataTitles: Record<DataKey, string> = {
   'avg(http.response_content_length)': t('Avg Encoded Size'),
   'avg(http.decoded_response_content_length)': t('Avg Decoded Size'),
   'avg(http.response_transfer_size)': t('Avg Transfer Size'),
-  'avg(transaction.duration)': t('Avg Txn Duration'),
+  'avg(transaction.duration)': t('Avg Transaction Duration'),
   'avg(cache.item_size)': t('Avg Value Size'),
   unsuccessfulHTTPCodes: t('Response Codes (3XX, 4XX, 5XX)'),
   httpCodeBreakdown: t('Response Code Breakdown'),
   cacheMissRate: t('Miss Rate'),
-  transactionDuration: t('Transaction Duration'),
+  'transaction.duration': t('Transaction Duration'),
 };
 
 export const getThroughputTitle = (