[ML] Explain Log Rate Spikes: fix chart showing as empty when filter matches field/value pair in hovered row (#142693)

* fix chart showing as empty when filter matches field/value pair in hovered row

* use both overall and split buckets to get timerange

* always pass along split stats as they are up to date

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Melissa Alvarez 2022-10-18 11:43:40 -06:00 committed by GitHub
parent 8cb51bda55
commit 253ed9c398
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 24 deletions

View file

@ -127,9 +127,17 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
// TODO Let user choose between ZOOM and BRUSH mode.
const [viewMode] = useState<VIEW_MODE>(VIEW_MODE.BRUSH);
const hasNoData = useMemo(
() =>
(chartPoints === undefined || chartPoints.length < 1) &&
(chartPointsSplit === undefined ||
(Array.isArray(chartPointsSplit) && chartPointsSplit.length < 1)),
[chartPoints, chartPointsSplit]
);
const adjustedChartPoints = useMemo(() => {
// Display empty chart when no data in range
if (chartPoints.length < 1) return [{ time: timeRangeEarliest, value: 0 }];
// Display empty chart when no data in range and no split data to show
if (hasNoData) return [{ time: timeRangeEarliest, value: 0 }];
// If chart has only one bucket
// it won't show up correctly unless we add an extra data point
@ -145,12 +153,11 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
const adjustedChartPointsSplit = useMemo(() => {
// Display empty chart when no data in range
if (!Array.isArray(chartPointsSplit) || chartPointsSplit.length < 1)
return [{ time: timeRangeEarliest, value: 0 }];
if (hasNoData) return [{ time: timeRangeEarliest, value: 0 }];
// If chart has only one bucket
// it won't show up correctly unless we add an extra data point
if (chartPointsSplit.length === 1) {
if (Array.isArray(chartPointsSplit) && chartPointsSplit.length === 1) {
return [
...chartPointsSplit,
{
@ -349,18 +356,20 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE}
/>
<HistogramBarSeries
id={SPEC_ID}
name={chartPointsSplit ? overallSeriesNameWithSplit : overallSeriesName}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor="time"
yAccessors={['value']}
data={adjustedChartPoints}
timeZone={timeZone}
yNice
/>
{chartPointsSplit && (
{adjustedChartPoints?.length && (
<HistogramBarSeries
id={SPEC_ID}
name={chartPointsSplit ? overallSeriesNameWithSplit : overallSeriesName}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor="time"
yAccessors={['value']}
data={adjustedChartPoints}
timeZone={timeZone}
yNice
/>
)}
{adjustedChartPointsSplit?.length && (
<HistogramBarSeries
id={`${SPEC_ID}_split`}
name={chartPointsSplitLabel}

View file

@ -49,8 +49,11 @@ export const DocumentCountContent: FC<DocumentCountContentProps> = ({
}, [windowParameters]);
const bucketTimestamps = Object.keys(documentCountStats?.buckets ?? {}).map((time) => +time);
const timeRangeEarliest = Math.min(...bucketTimestamps);
const timeRangeLatest = Math.max(...bucketTimestamps);
const splitBucketTimestamps = Object.keys(documentCountStatsSplit?.buckets ?? {}).map(
(time) => +time
);
const timeRangeEarliest = Math.min(...[...bucketTimestamps, ...splitBucketTimestamps]);
const timeRangeLatest = Math.max(...[...bucketTimestamps, ...splitBucketTimestamps]);
if (
documentCountStats === undefined ||

View file

@ -237,11 +237,7 @@ export const ExplainLogRateSpikesPage: FC<ExplainLogRateSpikesPageProps> = ({
brushSelectionUpdateHandler={setWindowParameters}
clearSelectionHandler={clearSelection}
documentCountStats={documentCountStats}
documentCountStatsSplit={
currentSelectedChangePoint || currentSelectedGroup
? documentCountStatsCompare
: undefined
}
documentCountStatsSplit={documentCountStatsCompare}
documentCountStatsSplitLabel={getDocumentCountStatsSplitLabel(
currentSelectedChangePoint,
currentSelectedGroup