Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] Fix Transaction duration distribution barchart clickarea #84394

Merged
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@
import {
Axis,
Chart,
ElementClickListener,
GeometryValue,
HistogramBarSeries,
Position,
ProjectionClickListener,
RectAnnotation,
ScaleType,
Settings,
Expand All @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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={[
{
Expand All @@ -207,7 +206,7 @@ export function TransactionDistribution({
style={{
fill: 'transparent',
strokeWidth: 1,
stroke: theme.eui.euiColorVis1,
stroke: theme.eui.euiColorPrimary,
opacity: 1,
}}
/>
Expand Down
6 changes: 6 additions & 0 deletions x-pack/plugins/observability/public/hooks/use_chart_theme.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ export function useChartTheme() {

return {
...baseChartTheme,
chartMargins: {
cauemarcondes marked this conversation as resolved.
Show resolved Hide resolved
left: 10,
right: 10,
top: 10,
bottom: 10,
},
background: {
...baseChartTheme.background,
color: 'transparent',
Expand Down