[APM] Remove log-log descriptions from correlation charts (#119700) (#120178)

2025-04-23 17:28:26 -04:00 · 2021-12-02 00:24:16 +01:00 · 2021-12-02 00:24:16 +01:00 · 0bd9d7f9fe
commit 0bd9d7f9fe
parent a55ba0a093
10 changed files with 236 additions and 325 deletions
--- a/x-pack/plugins/apm/public/components/app/correlations/chart_title_tool_tip.tsx
+++ b/x-pack/plugins/apm/public/components/app/correlations/chart_title_tool_tip.tsx
@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export function ChartTitleToolTip() {
+  return (
+    <EuiIconTip
+      content={i18n.translate(
+        'xpack.apm.correlations.latencyCorrelations.titleHelp',
+        {
+          defaultMessage:
+            'The chart uses logarithmic scales on both axes to avoid outliers distorting it',
+        }
+      )}
+      position="right"
+    />
+  );
+}
--- a/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx
+++ b/x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx
@ -18,7 +18,6 @@ import {
  EuiTitle,
  EuiBetaBadge,
  EuiBadge,
-  EuiText,
  EuiToolTip,
  EuiSwitch,
  EuiIconTip,
@ -27,13 +26,11 @@ import type { EuiTableSortingType } from '@elastic/eui/src/components/basic_tabl
 import type { Direction } from '@elastic/eui/src/services/sort/sort_direction';

 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';

 import { useUiTracker } from '../../../../../observability/public';

 import { asPercent } from '../../../../common/utils/formatters';
 import { FailedTransactionsCorrelation } from '../../../../common/correlations/failed_transactions_correlations/types';
-import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../common/correlations/constants';
 import { FieldStats } from '../../../../common/correlations/field_stats_types';

 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
@ -48,18 +45,17 @@ import { CorrelationsTable } from './correlations_table';
 import { FailedTransactionsCorrelationsHelpPopover } from './failed_transactions_correlations_help_popover';
 import { getFailedTransactionsCorrelationImpactLabel } from './utils/get_failed_transactions_correlation_impact_label';
 import { getOverallHistogram } from './utils/get_overall_histogram';
-import {
-  TransactionDistributionChart,
-  TransactionDistributionChartData,
-} from '../../shared/charts/transaction_distribution_chart';
+import { TransactionDistributionChart } from '../../shared/charts/transaction_distribution_chart';
 import { CorrelationsEmptyStatePrompt } from './empty_state_prompt';
 import { CrossClusterSearchCompatibilityWarning } from './cross_cluster_search_warning';
 import { CorrelationsProgressControls } from './progress_controls';
-import { useTransactionColors } from './use_transaction_colors';
 import { CorrelationsContextPopover } from './context_popover';
 import { OnAddFilter } from './context_popover/top_values';

 import { useFailedTransactionsCorrelations } from './use_failed_transactions_correlations';
+import { getTransactionDistributionChartData } from './get_transaction_distribution_chart_data';
+import { ChartTitleToolTip } from './chart_title_tool_tip';
+import { MIN_TAB_TITLE_HEIGHT } from '../transaction_details/distribution';

 export function FailedTransactionsCorrelations({
  onFilter,
@ -67,7 +63,6 @@ export function FailedTransactionsCorrelations({
  onFilter: () => void;
 }) {
  const euiTheme = useTheme();
-  const transactionColors = useTransactionColors();

  const {
    core: { notifications },
@ -427,133 +422,75 @@ export function FailedTransactionsCorrelations({
    correlationTerms.length < 1 &&
    (progress.loaded === 1 || !progress.isRunning);

-  const transactionDistributionChartData: TransactionDistributionChartData[] =
-    [];
-
-  if (Array.isArray(overallHistogram)) {
-    transactionDistributionChartData.push({
-      id: i18n.translate(
-        'xpack.apm.transactionDistribution.chart.allTransactionsLabel',
-        { defaultMessage: 'All transactions' }
-      ),
-      histogram: overallHistogram,
-    });
-  }
-
-  if (Array.isArray(response.errorHistogram)) {
-    transactionDistributionChartData.push({
-      id: i18n.translate(
-        'xpack.apm.transactionDistribution.chart.failedTransactionsLabel',
-        { defaultMessage: 'Failed transactions' }
-      ),
-      histogram: response.errorHistogram,
-    });
-  }
-
-  if (selectedTerm && Array.isArray(selectedTerm.histogram)) {
-    transactionDistributionChartData.push({
-      id: `${selectedTerm.fieldName}:${selectedTerm.fieldValue}`,
-      histogram: selectedTerm.histogram,
-    });
-  }
+  const transactionDistributionChartData = getTransactionDistributionChartData({
+    euiTheme,
+    allTransactionsHistogram: overallHistogram,
+    failedTransactionsHistogram: response.errorHistogram,
+    selectedTerm,
+  });

  return (
    <div data-test-subj="apmFailedTransactionsCorrelationsTabContent">
-      <EuiFlexItem style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <EuiFlexGroup direction="row" gutterSize="s">
-          <EuiFlexItem grow={false}>
-            <EuiTitle
-              size="xs"
-              data-test-subj="apmFailedTransactionsCorrelationsTabTitle"
-            >
-              <h5 data-test-subj="apmFailedTransactionsCorrelationsChartTitle">
-                {i18n.translate(
-                  'xpack.apm.correlations.failedTransactions.panelTitle',
-                  {
-                    defaultMessage: 'Failed transactions latency distribution',
-                  }
-                )}
-              </h5>
-            </EuiTitle>
-          </EuiFlexItem>
+      <EuiFlexGroup
+        style={{ minHeight: MIN_TAB_TITLE_HEIGHT }}
+        alignItems="center"
+        gutterSize="s"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiTitle
+            size="xs"
+            data-test-subj="apmFailedTransactionsCorrelationsTabTitle"
+          >
+            <h5 data-test-subj="apmFailedTransactionsCorrelationsChartTitle">
+              {i18n.translate(
+                'xpack.apm.correlations.failedTransactions.panelTitle',
+                {
+                  defaultMessage: 'Failed transactions latency distribution',
+                }
+              )}
+            </h5>
+          </EuiTitle>
+        </EuiFlexItem>

-          <EuiFlexItem grow={false}>
-            <EuiBetaBadge
-              label={i18n.translate(
-                'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaLabel',
-                {
-                  defaultMessage: 'Beta',
-                }
-              )}
-              title={i18n.translate(
-                'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaTitle',
-                {
-                  defaultMessage: 'Failed transaction correlations',
-                }
-              )}
-              tooltipContent={i18n.translate(
-                'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaDescription',
-                {
-                  defaultMessage:
-                    'Failed transaction correlations is not GA. Please help us by reporting any bugs.',
-                }
-              )}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiBetaBadge
+            label={i18n.translate(
+              'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaLabel',
+              {
+                defaultMessage: 'Beta',
+              }
+            )}
+            title={i18n.translate(
+              'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaTitle',
+              {
+                defaultMessage: 'Failed transaction correlations',
+              }
+            )}
+            tooltipContent={i18n.translate(
+              'xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaDescription',
+              {
+                defaultMessage:
+                  'Failed transaction correlations is not GA. Please help us by reporting any bugs.',
+              }
+            )}
+          />
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <ChartTitleToolTip />
+        </EuiFlexItem>

        <EuiFlexItem grow={false}>
          <FailedTransactionsCorrelationsHelpPopover />
        </EuiFlexItem>
-      </EuiFlexItem>
-
-      {selectedTerm && (
-        <EuiText color="subdued" size="xs">
-          <FormattedMessage
-            id="xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsChartDescription"
-            defaultMessage="Log-log plot for latency (x) by transactions (y) with overlapping bands for {br}{allTransactions}, {failedTransactions} and {focusTransaction}."
-            values={{
-              br: <br />,
-              allTransactions: (
-                <span style={{ color: transactionColors.ALL_TRANSACTIONS }}>
-                  <FormattedMessage
-                    id="xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsChartAllTransactions"
-                    defaultMessage="all transactions"
-                  />
-                </span>
-              ),
-              failedTransactions: (
-                <span
-                  style={{ color: transactionColors.ALL_FAILED_TRANSACTIONS }}
-                >
-                  <FormattedMessage
-                    id="xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsChartFailedTransactions"
-                    defaultMessage="failed transactions"
-                  />
-                </span>
-              ),
-              focusTransaction: (
-                <span style={{ color: transactionColors.FOCUS_TRANSACTION }}>
-                  {selectedTerm?.fieldName}:{selectedTerm?.fieldValue}
-                </span>
-              ),
-            }}
-          />
-        </EuiText>
-      )}
+      </EuiFlexGroup>

      <EuiSpacer size="s" />

      <TransactionDistributionChart
-        markerPercentile={DEFAULT_PERCENTILE_THRESHOLD}
        markerValue={response.percentileThresholdValue ?? 0}
        data={transactionDistributionChartData}
        hasData={hasData}
-        palette={[
-          transactionColors.ALL_TRANSACTIONS,
-          transactionColors.ALL_FAILED_TRANSACTIONS,
-          transactionColors.FOCUS_TRANSACTION,
-        ]}
        status={status}
      />

--- a/x-pack/plugins/apm/public/components/app/correlations/get_transaction_distribution_chart_data.ts
+++ b/x-pack/plugins/apm/public/components/app/correlations/get_transaction_distribution_chart_data.ts
@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
+import type {
+  FieldValuePair,
+  HistogramItem,
+} from '../../../../common/correlations/types';
+import { TransactionDistributionChartData } from '../../shared/charts/transaction_distribution_chart';
+
+export function getTransactionDistributionChartData({
+  euiTheme,
+  allTransactionsHistogram,
+  failedTransactionsHistogram,
+  selectedTerm,
+}: {
+  euiTheme: EuiTheme;
+  allTransactionsHistogram?: HistogramItem[];
+  failedTransactionsHistogram?: HistogramItem[];
+  selectedTerm?: FieldValuePair & { histogram: HistogramItem[] };
+}) {
+  const transactionDistributionChartData: TransactionDistributionChartData[] =
+    [];
+
+  if (Array.isArray(allTransactionsHistogram)) {
+    transactionDistributionChartData.push({
+      id: i18n.translate(
+        'xpack.apm.transactionDistribution.chart.allTransactionsLabel',
+        { defaultMessage: 'All transactions' }
+      ),
+      histogram: allTransactionsHistogram,
+      areaSeriesColor: euiTheme.eui.euiColorVis1,
+    });
+  }
+
+  if (Array.isArray(failedTransactionsHistogram)) {
+    transactionDistributionChartData.push({
+      id: i18n.translate(
+        'xpack.apm.transactionDistribution.chart.failedTransactionsLabel',
+        { defaultMessage: 'Failed transactions' }
+      ),
+      histogram: failedTransactionsHistogram,
+      areaSeriesColor: euiTheme.eui.euiColorVis7,
+    });
+  }
+
+  if (selectedTerm && Array.isArray(selectedTerm.histogram)) {
+    transactionDistributionChartData.push({
+      id: `${selectedTerm.fieldName}:${selectedTerm.fieldValue}`,
+      histogram: selectedTerm.histogram,
+      areaSeriesColor: euiTheme.eui.euiColorVis2,
+    });
+  }
+
+  return transactionDistributionChartData;
+}
--- a/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx
+++ b/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx
@ -15,7 +15,6 @@ import {
  EuiFlexGroup,
  EuiFlexItem,
  EuiSpacer,
-  EuiText,
  EuiTitle,
  EuiToolTip,
 } from '@elastic/eui';
@ -23,22 +22,17 @@ import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
 import { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types';

 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';

 import { useUiTracker } from '../../../../../observability/public';

 import { asPreciseDecimal } from '../../../../common/utils/formatters';
-import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../common/correlations/constants';
 import { LatencyCorrelation } from '../../../../common/correlations/latency_correlations/types';
 import { FieldStats } from '../../../../common/correlations/field_stats_types';

 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';

-import {
-  TransactionDistributionChart,
-  TransactionDistributionChartData,
-} from '../../shared/charts/transaction_distribution_chart';
+import { TransactionDistributionChart } from '../../shared/charts/transaction_distribution_chart';
 import { push } from '../../shared/Links/url_helpers';

 import { CorrelationsTable } from './correlations_table';
@ -47,18 +41,21 @@ import { getOverallHistogram } from './utils/get_overall_histogram';
 import { CorrelationsEmptyStatePrompt } from './empty_state_prompt';
 import { CrossClusterSearchCompatibilityWarning } from './cross_cluster_search_warning';
 import { CorrelationsProgressControls } from './progress_controls';
-import { useTransactionColors } from './use_transaction_colors';
 import { CorrelationsContextPopover } from './context_popover';
 import { OnAddFilter } from './context_popover/top_values';
 import { useLatencyCorrelations } from './use_latency_correlations';
+import { getTransactionDistributionChartData } from './get_transaction_distribution_chart_data';
+import { useTheme } from '../../../hooks/use_theme';
+import { ChartTitleToolTip } from './chart_title_tool_tip';
+import { MIN_TAB_TITLE_HEIGHT } from '../transaction_details/distribution';

 export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
-  const transactionColors = useTransactionColors();
-
  const {
    core: { notifications },
  } = useApmPluginContext();

+  const euiTheme = useTheme();
+
  const { progress, response, startFetch, cancelFetch } =
    useLatencyCorrelations();
  const { overallHistogram, hasData, status } = getOverallHistogram(
@ -274,30 +271,20 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
  const showCorrelationsEmptyStatePrompt =
    histogramTerms.length < 1 && (progress.loaded === 1 || !progress.isRunning);

-  const transactionDistributionChartData: TransactionDistributionChartData[] =
-    [];
-
-  if (Array.isArray(overallHistogram)) {
-    transactionDistributionChartData.push({
-      id: i18n.translate(
-        'xpack.apm.transactionDistribution.chart.allTransactionsLabel',
-        { defaultMessage: 'All transactions' }
-      ),
-      histogram: overallHistogram,
-    });
-  }
-
-  if (selectedHistogram && Array.isArray(selectedHistogram.histogram)) {
-    transactionDistributionChartData.push({
-      id: `${selectedHistogram.fieldName}:${selectedHistogram.fieldValue}`,
-      histogram: selectedHistogram.histogram,
-    });
-  }
+  const transactionDistributionChartData = getTransactionDistributionChartData({
+    euiTheme,
+    allTransactionsHistogram: overallHistogram,
+    selectedTerm: selectedHistogram,
+  });

  return (
    <div data-test-subj="apmLatencyCorrelationsTabContent">
-      <EuiFlexGroup>
-        <EuiFlexItem style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <EuiFlexGroup
+        style={{ minHeight: MIN_TAB_TITLE_HEIGHT }}
+        alignItems="center"
+        gutterSize="s"
+      >
+        <EuiFlexItem grow={false}>
          <EuiTitle size="xs">
            <h5 data-test-subj="apmCorrelationsLatencyCorrelationsChartTitle">
              {i18n.translate(
@ -309,40 +296,19 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
            </h5>
          </EuiTitle>
        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <ChartTitleToolTip />
+        </EuiFlexItem>
+
        <EuiFlexItem grow={false}>
          <LatencyCorrelationsHelpPopover />
        </EuiFlexItem>
      </EuiFlexGroup>

-      {selectedHistogram && (
-        <EuiText color="subdued" size="xs">
-          <FormattedMessage
-            id="xpack.apm.transactionDetails.tabs.latencyCorrelationsChartDescription"
-            defaultMessage="Log-log plot for latency (x) by transactions (y) with overlapping bands for {br}{allTransactions} and {focusTransaction}."
-            values={{
-              br: <br />,
-              allTransactions: (
-                <span style={{ color: transactionColors.ALL_TRANSACTIONS }}>
-                  <FormattedMessage
-                    id="xpack.apm.transactionDetails.tabs.latencyCorrelationsChartAllTransactions"
-                    defaultMessage="all transactions"
-                  />
-                </span>
-              ),
-              focusTransaction: (
-                <span style={{ color: transactionColors.FOCUS_TRANSACTION }}>
-                  {selectedHistogram?.fieldName}:{selectedHistogram?.fieldValue}
-                </span>
-              ),
-            }}
-          />
-        </EuiText>
-      )}
-
      <EuiSpacer size="s" />

      <TransactionDistributionChart
-        markerPercentile={DEFAULT_PERCENTILE_THRESHOLD}
        markerValue={response.percentileThresholdValue ?? 0}
        data={transactionDistributionChartData}
        hasData={hasData}
--- a/x-pack/plugins/apm/public/components/app/correlations/use_transaction_colors.ts
+++ b/x-pack/plugins/apm/public/components/app/correlations/use_transaction_colors.ts
@ -1,17 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { useTheme } from '../../../hooks/use_theme';
-
-export const useTransactionColors = () => {
-  const euiTheme = useTheme();
-  return {
-    ALL_TRANSACTIONS: euiTheme.eui.euiColorVis1,
-    ALL_FAILED_TRANSACTIONS: euiTheme.eui.euiColorVis7,
-    FOCUS_TRANSACTION: euiTheme.eui.euiColorVis2,
-  };
-};
--- a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx
@ -18,18 +18,15 @@ import {
 } from '@elastic/eui';

 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';

 import { useUiTracker } from '../../../../../../observability/public';

 import { getDurationFormatter } from '../../../../../common/utils/formatters';
-import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../../common/correlations/constants';

 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';

 import { TransactionDistributionChart } from '../../../shared/charts/transaction_distribution_chart';
-import { useTransactionColors } from '../../correlations/use_transaction_colors';

 import type { TabContentProps } from '../types';
 import { useWaterfallFetcher } from '../use_waterfall_fetcher';
@ -37,10 +34,11 @@ import { WaterfallWithSummary } from '../waterfall_with_summary';

 import { useTransactionDistributionChartData } from './use_transaction_distribution_chart_data';
 import { HeightRetainer } from '../../../shared/HeightRetainer';
+import { ChartTitleToolTip } from '../../correlations/chart_title_tool_tip';

 // Enforce min height so it's consistent across all tabs on the same level
 // to prevent "flickering" behavior
-const MIN_TAB_TITLE_HEIGHT = 56;
+export const MIN_TAB_TITLE_HEIGHT = 56;

 type Selection = [number, number];

@ -69,7 +67,6 @@ export function TransactionDistribution({
  selection,
  traceSamples,
 }: TransactionDistributionProps) {
-  const transactionColors = useTransactionColors();
  const { urlParams } = useLegacyUrlParams();
  const { waterfall, status: waterfallStatus } = useWaterfallFetcher();

@ -108,8 +105,12 @@ export function TransactionDistribution({
  return (
    <HeightRetainer>
      <div data-test-subj="apmTransactionDistributionTabContent">
-        <EuiFlexGroup style={{ minHeight: MIN_TAB_TITLE_HEIGHT }}>
-          <EuiFlexItem style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <EuiFlexGroup
+          style={{ minHeight: MIN_TAB_TITLE_HEIGHT }}
+          alignItems="center"
+          gutterSize="s"
+        >
+          <EuiFlexItem grow={false}>
            <EuiTitle size="xs">
              <h5 data-test-subj="apmTransactionDistributionChartTitle">
                {i18n.translate(
@ -121,93 +122,65 @@ export function TransactionDistribution({
              </h5>
            </EuiTitle>
          </EuiFlexItem>
-          {hasData && !selection && (
-            <EuiFlexItem>
-              <EuiFlexGroup justifyContent="flexEnd" gutterSize="xs">
-                <EuiFlexItem
-                  grow={false}
-                  style={{ flexDirection: 'row', alignItems: 'center' }}
-                >
-                  <EuiIcon
-                    type="iInCircle"
-                    title={emptySelectionText}
-                    size="s"
-                  />
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                  style={{ flexDirection: 'row', alignItems: 'center' }}
-                >
-                  <EuiText size="xs">{emptySelectionText}</EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          )}
-          {hasData && selection && (
-            <EuiFlexItem grow={false}>
-              <EuiBadge
-                iconType="cross"
-                iconSide="left"
-                onClick={onTrackedClearSelection}
-                onClickAriaLabel={clearSelectionAriaLabel}
-                iconOnClick={onTrackedClearSelection}
-                iconOnClickAriaLabel={clearSelectionAriaLabel}
-                data-test-sub="apmTransactionDetailsDistributionClearSelectionBadge"
-              >
-                {i18n.translate(
-                  'xpack.apm.transactionDetails.distribution.selectionText',
-                  {
-                    defaultMessage: `Selection: {formattedSelection}`,
-                    values: {
-                      formattedSelection: getFormattedSelection(selection),
-                    },
-                  }
-                )}
-              </EuiBadge>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>

-        <EuiText color="subdued" size="xs">
-          <FormattedMessage
-            id="xpack.apm.transactionDetails.tabs.transactionDistributionChartDescription"
-            defaultMessage="Log-log plot for latency (x) by transactions (y) with overlapping bands for {allTransactions} and {failedTransactions}."
-            values={{
-              allTransactions: (
-                <span style={{ color: transactionColors.ALL_TRANSACTIONS }}>
-                  <FormattedMessage
-                    id="xpack.apm.transactionDetails.tabs.transactionDistributionChartAllTransactions"
-                    defaultMessage="all transactions"
-                  />
-                </span>
-              ),
-              failedTransactions: (
-                <span
-                  style={{ color: transactionColors.ALL_FAILED_TRANSACTIONS }}
-                >
-                  <FormattedMessage
-                    id="xpack.apm.transactionDetails.tabs.transactionDistributionChartFailedTransactions"
-                    defaultMessage="failed transactions"
-                  />
-                </span>
-              ),
-            }}
-          />
-        </EuiText>
+          <EuiFlexItem grow={false}>
+            <ChartTitleToolTip />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiFlexGroup
+              justifyContent="flexEnd"
+              alignItems="center"
+              gutterSize="xs"
+            >
+              {selection ? (
+                <EuiFlexItem grow={false}>
+                  <EuiBadge
+                    iconType="cross"
+                    iconSide="left"
+                    onClick={onTrackedClearSelection}
+                    onClickAriaLabel={clearSelectionAriaLabel}
+                    iconOnClick={onTrackedClearSelection}
+                    iconOnClickAriaLabel={clearSelectionAriaLabel}
+                    data-test-sub="apmTransactionDetailsDistributionClearSelectionBadge"
+                  >
+                    {i18n.translate(
+                      'xpack.apm.transactionDetails.distribution.selectionText',
+                      {
+                        defaultMessage: `Selection: {formattedSelection}`,
+                        values: {
+                          formattedSelection: getFormattedSelection(selection),
+                        },
+                      }
+                    )}
+                  </EuiBadge>
+                </EuiFlexItem>
+              ) : (
+                <>
+                  <EuiFlexItem grow={false}>
+                    <EuiIcon
+                      type="iInCircle"
+                      title={emptySelectionText}
+                      size="s"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiText size="xs">{emptySelectionText}</EuiText>
+                  </EuiFlexItem>
+                </>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>

        <EuiSpacer size="s" />

        <TransactionDistributionChart
          data={chartData}
          markerCurrentTransaction={markerCurrentTransaction}
-          markerPercentile={DEFAULT_PERCENTILE_THRESHOLD}
          markerValue={percentileThresholdValue ?? 0}
          onChartSelection={onTrackedChartSelection as BrushEndListener}
          hasData={hasData}
-          palette={[
-            transactionColors.ALL_TRANSACTIONS,
-            transactionColors.ALL_FAILED_TRANSACTIONS,
-          ]}
          selection={selection}
          status={status}
        />
--- a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/use_transaction_distribution_chart_data.ts
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/use_transaction_distribution_chart_data.ts
@ -6,23 +6,20 @@
 */

 import { useEffect } from 'react';
-
 import { i18n } from '@kbn/i18n';
-
 import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../../common/correlations/constants';
 import { EVENT_OUTCOME } from '../../../../../common/elasticsearch_fieldnames';
 import { EventOutcome } from '../../../../../common/event_outcome';
-
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { useFetcher, FETCH_STATUS } from '../../../../hooks/use_fetcher';
-
-import type { TransactionDistributionChartData } from '../../../shared/charts/transaction_distribution_chart';
-
 import { isErrorMessage } from '../../correlations/utils/is_error_message';
 import { useFetchParams } from '../../correlations/use_fetch_params';
+import { getTransactionDistributionChartData } from '../../correlations/get_transaction_distribution_chart_data';
+import { useTheme } from '../../../../hooks/use_theme';

 export const useTransactionDistributionChartData = () => {
  const params = useFetchParams();
+  const euiTheme = useTheme();

  const {
    core: { notifications },
@ -122,28 +119,11 @@ export const useTransactionDistributionChartData = () => {
    }
  }, [errorHistogramError, notifications.toasts]);

-  const transactionDistributionChartData: TransactionDistributionChartData[] =
-    [];
-
-  if (Array.isArray(overallLatencyHistogram)) {
-    transactionDistributionChartData.push({
-      id: i18n.translate(
-        'xpack.apm.transactionDistribution.chart.allTransactionsLabel',
-        { defaultMessage: 'All transactions' }
-      ),
-      histogram: overallLatencyHistogram,
-    });
-  }
-
-  if (Array.isArray(errorHistogramData.overallHistogram)) {
-    transactionDistributionChartData.push({
-      id: i18n.translate(
-        'xpack.apm.transactionDistribution.chart.failedTransactionsLabel',
-        { defaultMessage: 'Failed transactions' }
-      ),
-      histogram: errorHistogramData.overallHistogram,
-    });
-  }
+  const transactionDistributionChartData = getTransactionDistributionChartData({
+    euiTheme,
+    allTransactionsHistogram: overallLatencyHistogram,
+    failedTransactionsHistogram: errorHistogramData.overallHistogram,
+  });

  return {
    chartData: transactionDistributionChartData,
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx
@ -33,6 +33,7 @@ import { useChartTheme } from '../../../../../../observability/public';

 import { getDurationFormatter } from '../../../../../common/utils/formatters';
 import type { HistogramItem } from '../../../../../common/correlations/types';
+import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../../common/correlations/constants';

 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { useTheme } from '../../../../hooks/use_theme';
@ -42,6 +43,7 @@ import { ChartContainer } from '../chart_container';
 export interface TransactionDistributionChartData {
  id: string;
  histogram: HistogramItem[];
+  areaSeriesColor: string;
 }

 interface TransactionDistributionChartProps {
@ -49,9 +51,7 @@ interface TransactionDistributionChartProps {
  hasData: boolean;
  markerCurrentTransaction?: number;
  markerValue: number;
-  markerPercentile: number;
  onChartSelection?: BrushEndListener;
-  palette?: string[];
  selection?: [number, number];
  status: FETCH_STATUS;
 }
@ -98,19 +98,13 @@ export function TransactionDistributionChart({
  hasData,
  markerCurrentTransaction,
  markerValue,
-  markerPercentile,
  onChartSelection,
-  palette,
  selection,
  status,
 }: TransactionDistributionChartProps) {
  const chartTheme = useChartTheme();
  const euiTheme = useTheme();
-
-  const areaSeriesColors = palette ?? [
-    euiTheme.eui.euiColorVis1,
-    euiTheme.eui.euiColorVis2,
-  ];
+  const markerPercentile = DEFAULT_PERCENTILE_THRESHOLD;

  const annotationsDataValues: LineAnnotationDatum[] = [
    {
@ -265,7 +259,7 @@ export function TransactionDistributionChart({
              curve={CurveType.CURVE_STEP_AFTER}
              xAccessor="key"
              yAccessors={['doc_count']}
-              color={areaSeriesColors[i]}
+              color={d.areaSeriesColor}
              fit="lookahead"
              // To make the area appear without the orphaned points technique,
              // we changed the original data to replace values of 0 with 0.0001.
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -6263,13 +6263,9 @@
    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaDescription": "失敗したトランザクションの相関関係はGAではありません。不具合が発生したら報告してください。",
    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaLabel": "ベータ",
    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaTitle": "失敗したトランザクションの相関関係",
-    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsChartAllTransactions": "すべてのトランザクション",
    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsLabel": "失敗したトランザクションの相関関係",
-    "xpack.apm.transactionDetails.tabs.latencyCorrelationsChartAllTransactions": "すべてのトランザクション",
-    "xpack.apm.transactionDetails.tabs.latencyCorrelationsChartDescription": "{allTransactions}と{focusTransaction}の{br}重複する帯を使用した遅延（x）とトランザクション（y）の両対数プロット。",
    "xpack.apm.transactionDetails.tabs.latencyLabel": "遅延の相関関係",
    "xpack.apm.transactionDetails.tabs.traceSamplesLabel": "トレースのサンプル",
-    "xpack.apm.transactionDetails.tabs.transactionDistributionChartAllTransactions": "すべてのトランザクション",
    "xpack.apm.transactionDetails.traceNotFound": "選択されたトレースが見つかりません",
    "xpack.apm.transactionDetails.traceSampleTitle": "トレースのサンプル",
    "xpack.apm.transactionDetails.transactionLabel": "トランザクション",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -6306,13 +6306,9 @@
    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaDescription": "失败事务相关性不是 GA 版。请通过报告错误来帮助我们。",
    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaLabel": "公测版",
    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsBetaTitle": "失败事务相关性",
-    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsChartAllTransactions": "所有事务",
    "xpack.apm.transactionDetails.tabs.failedTransactionsCorrelationsLabel": "失败事务相关性",
-    "xpack.apm.transactionDetails.tabs.latencyCorrelationsChartAllTransactions": "所有事务",
-    "xpack.apm.transactionDetails.tabs.latencyCorrelationsChartDescription": "{allTransactions}和{focusTransaction}{br}带重叠的延迟 (x) 与事务 (y) 双对数坐标图。",
    "xpack.apm.transactionDetails.tabs.latencyLabel": "延迟相关性",
    "xpack.apm.transactionDetails.tabs.traceSamplesLabel": "跟踪样例",
-    "xpack.apm.transactionDetails.tabs.transactionDistributionChartAllTransactions": "所有事务",
    "xpack.apm.transactionDetails.traceNotFound": "找不到所选跟踪",
    "xpack.apm.transactionDetails.traceSampleTitle": "跟踪样例",
    "xpack.apm.transactionDetails.transactionLabel": "事务",