[APM] Fix Transaction duration distribution barchart clickarea (#84394)…

… (#85816) * [APM] select transaction distribution by clicking on the entire bucket * fixing margins and bucket click * changing annotation color * adding tooltip placement bottom * addressing pr comments Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Dec 15, 2020 · bab33f6 · bab33f6
1 parent ddf8035
commit bab33f6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
@@ -7,10 +7,9 @@
 import {
   Axis,
   Chart,
-  ElementClickListener,
-  GeometryValue,
   HistogramBarSeries,
   Position,
+  ProjectionClickListener,
   RectAnnotation,
   ScaleType,
   Settings,
@@ -24,11 +23,11 @@ import d3 from 'd3';
 import { isEmpty } from 'lodash';
 import React from 'react';
 import { ValuesType } from 'utility-types';
-import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { useTheme } from '../../../../../../observability/public';
 import { getDurationFormatter } from '../../../../../common/utils/formatters';
 import type { IUrlParams } from '../../../../context/url_params_context/types';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
+import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { unit } from '../../../../style/variables';
 import { ChartContainer } from '../../../shared/charts/chart_container';
 import { EmptyMessage } from '../../../shared/EmptyMessage';
@@ -145,10 +144,9 @@ export function TransactionDistribution({
     },
   };
 
-  const onBarClick: ElementClickListener = (elements) => {
-    const chartPoint = elements[0][0] as GeometryValue;
+  const onBarClick: ProjectionClickListener = ({ x }) => {
     const clickedBucket = distribution?.buckets.find((bucket) => {
-      return bucket.key === chartPoint.x;
+      return bucket.key === x;
     });
     if (clickedBucket) {
       onBucketClick(clickedBucket);
@@ -194,10 +192,11 @@ export function TransactionDistribution({
           <Settings
             xDomain={{ min: xMin, max: xMax }}
             tooltip={tooltipProps}
-            onElementClick={onBarClick}
+            onProjectionClick={onBarClick}
           />
           {selectedBucket && (
             <RectAnnotation
+              zIndex={-1}
               id="highlighted_bucket"
               dataValues={[
                 {
@@ -207,7 +206,7 @@ export function TransactionDistribution({
               style={{
                 fill: 'transparent',
                 strokeWidth: 1,
-                stroke: theme.eui.euiColorVis1,
+                stroke: theme.eui.euiColorPrimary,
                 opacity: 1,
               }}
             />

diff --git a/x-pack/plugins/observability/public/hooks/use_chart_theme.tsx b/x-pack/plugins/observability/public/hooks/use_chart_theme.tsx
@@ -14,6 +14,12 @@ export function useChartTheme() {
 
   return {
     ...baseChartTheme,
+    chartMargins: {
+      left: 10,
+      right: 10,
+      top: 10,
+      bottom: 10,
+    },
     background: {
       ...baseChartTheme.background,
       color: 'transparent',