0;
const theme = useTheme();
@@ -50,9 +56,6 @@ export function InstancesLatencyDistributionChart({
bubbleSeriesStyle: {
point: { strokeWidth: 0, fill: theme.eui.euiColorVis1, radius: 4 },
},
- // This additional padding makes it so items with small values don't look like
- // zeroes right up against the origin.
- chartPaddings: { top: 0, left: 10, right: 10, bottom: 10 },
};
const maxLatency = Math.max(...items.map((item) => item.latency ?? 0));
@@ -66,10 +69,34 @@ export function InstancesLatencyDistributionChart({
),
};
- // When we only have a single point, we want to use an ordinal scale instead
- // of linear because an ordinal scale will place the point in the middle, while
- // linear will place it at the origin.
- const xScaleType = items.length === 1 ? ScaleType.Ordinal : ScaleType.Linear;
+ /**
+ * Handle click events on the items.
+ *
+ * Due to how we handle filtering by using the kuery bar, it's difficult to
+ * modify existing queries. If you have an existing query in the bar, this will
+ * wipe it out. This is ok for now, since we probably will be replacing this
+ * interaction with something nicer in a future release.
+ *
+ * The event object has an array two items for each point, one of which has
+ * the serviceNodeName, so we flatten the list and get the items we need to
+ * form a query.
+ */
+ const handleElementClick: ElementClickListener = (event) => {
+ const serviceNodeNamesQuery = event
+ .flat()
+ .flatMap((value) => (value as GeometryValue).datum?.serviceNodeName)
+ .filter((serviceNodeName) => !!serviceNodeName)
+ .map((serviceNodeName) => `${SERVICE_NODE_NAME}:"${serviceNodeName}"`)
+ .join(' OR ');
+
+ urlHelpers.push(history, { query: { kuery: serviceNodeNamesQuery } });
+ };
+
+ // With a linear scale, if all the instances have similar throughput (or if
+ // there's just a single instance) they'll show along the origin. Make sure
+ // the x-axis domain always starts at 0 and goes to double the max of the items
+ const maxThroughput = Math.max(...items.map((item) => item.throughput ?? 0));
+ const xDomain = { min: 0, max: maxThroughput };
return (
@@ -84,9 +111,11 @@ export function InstancesLatencyDistributionChart({
item.throughput}
- xScaleType={xScaleType}
+ xScaleType={ScaleType.Linear}
yAccessors={[(item) => item.latency]}
yScaleType={ScaleType.Linear}
/>
diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx
index 2f0c709b9a5acf..c574645d485d53 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx
@@ -74,7 +74,7 @@ Example.args = {
],
} as InstancesLatencyDistributionChartProps;
-export function SingleInstance({
+export function SimilarThroughputInstances({
items,
}: InstancesLatencyDistributionChartProps) {
return (
@@ -85,13 +85,24 @@ export function SingleInstance({
/>
);
}
-SingleInstance.args = {
+SimilarThroughputInstances.args = {
items: [
{
serviceNodeName:
- '2f3221afa3f00d3bc07069d69efd5bd4c1607be6155a204551c8fe2e2b5dd750',
- latency: 1130156.5424836602,
- throughput: 9.71285705065604,
+ '21e1c648bd73434a8a1bf6e849817930e8b43eacf73a5c39c30520ee3b79d8c0',
+ latency: 40713854.354498595,
+ throughput: 0.3261219384041683,
+ },
+ {
+ serviceNodeName:
+ 'a1c99c8675372af4c74bb01cc48e75989faa6f010a4ccb027df1c410dde0c72c',
+ latency: 18565471.348388012,
+ throughput: 0.3261219384041683,
+ },
+ {
+ serviceNodeName: '_service_node_name_missing_',
+ latency: 20065471.348388012,
+ throughput: 0.3261219384041683,
},
],
} as InstancesLatencyDistributionChartProps;