[Lens] Don't use auto interval to get interval for single bar (#64502)
* feat: don't use auto interval to get interval for single bar * fix: fixing non auto intervals Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
a38c11cd10
commit
da4c33b022
|
@ -53,6 +53,7 @@ export class XyVisualization {
|
|||
? EUI_CHARTS_THEME_DARK.theme
|
||||
: EUI_CHARTS_THEME_LIGHT.theme,
|
||||
timeZone: getTimeZone(core.uiSettings),
|
||||
histogramBarTarget: core.uiSettings.get<number>('histogram:barTarget'),
|
||||
})
|
||||
);
|
||||
|
||||
|
|
|
@ -40,7 +40,7 @@ const createSampleDatatableWithRows = (rows: KibanaDatatableRow[]): KibanaDatata
|
|||
id: 'c',
|
||||
name: 'c',
|
||||
formatHint: { id: 'string' },
|
||||
meta: { type: 'date-histogram', aggConfigParams: { interval: '10s' } },
|
||||
meta: { type: 'date-histogram', aggConfigParams: { interval: 'auto' } },
|
||||
},
|
||||
{ id: 'd', name: 'ColD', formatHint: { id: 'string' } },
|
||||
],
|
||||
|
@ -156,6 +156,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -203,6 +204,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -237,15 +239,17 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
||||
// real auto interval is 30mins = 1800000
|
||||
expect(component.find(Settings).prop('xDomain')).toMatchInlineSnapshot(`
|
||||
Object {
|
||||
"max": 1546491600000,
|
||||
"min": 1546405200000,
|
||||
"minInterval": 10000,
|
||||
"minInterval": 1728000,
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
@ -271,6 +275,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -279,7 +284,7 @@ describe('xy_expression', () => {
|
|||
Object {
|
||||
"max": 1546491600000,
|
||||
"min": 1546405200000,
|
||||
"minInterval": 10000,
|
||||
"minInterval": 1728000,
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
@ -307,6 +312,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -350,6 +356,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -383,6 +390,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -398,6 +406,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -414,6 +423,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -430,6 +440,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -472,6 +483,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -510,6 +522,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -527,6 +540,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -547,6 +561,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -565,6 +580,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="CEST"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -582,6 +598,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -606,6 +623,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -624,6 +642,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -684,6 +703,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -878,6 +898,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -894,6 +915,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -910,6 +932,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -927,6 +950,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
@ -943,6 +967,7 @@ describe('xy_expression', () => {
|
|||
args={{ ...args, layers: [{ ...args.layers[0], accessors: ['a'] }] }}
|
||||
formatFactory={getFormatSpy}
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
timeZone="UTC"
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
|
@ -963,6 +988,7 @@ describe('xy_expression', () => {
|
|||
formatFactory={getFormatSpy}
|
||||
timeZone="UTC"
|
||||
chartTheme={{}}
|
||||
histogramBarTarget={50}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import moment from 'moment';
|
||||
import {
|
||||
Chart,
|
||||
Settings,
|
||||
|
@ -35,8 +36,8 @@ import { XYArgs, SeriesType, visualizationTypes } from './types';
|
|||
import { VisualizationContainer } from '../visualization_container';
|
||||
import { isHorizontalChart } from './state_helpers';
|
||||
import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
|
||||
import { parseInterval } from '../../../../../src/plugins/data/common';
|
||||
import { getExecuteTriggerActions } from './services';
|
||||
import { parseInterval } from '../../../../../src/plugins/data/common';
|
||||
|
||||
type InferPropType<T> = T extends React.FunctionComponent<infer P> ? P : T;
|
||||
type SeriesSpec = InferPropType<typeof LineSeries> &
|
||||
|
@ -58,6 +59,7 @@ type XYChartRenderProps = XYChartProps & {
|
|||
chartTheme: PartialTheme;
|
||||
formatFactory: FormatFactory;
|
||||
timeZone: string;
|
||||
histogramBarTarget: number;
|
||||
executeTriggerActions: UiActionsStart['executeTriggerActions'];
|
||||
};
|
||||
|
||||
|
@ -110,6 +112,7 @@ export const xyChart: ExpressionFunctionDefinition<
|
|||
export const getXyChartRenderer = (dependencies: {
|
||||
formatFactory: Promise<FormatFactory>;
|
||||
chartTheme: PartialTheme;
|
||||
histogramBarTarget: number;
|
||||
timeZone: string;
|
||||
}): ExpressionRenderDefinition<XYChartProps> => ({
|
||||
name: 'lens_xy_chart_renderer',
|
||||
|
@ -130,6 +133,7 @@ export const getXyChartRenderer = (dependencies: {
|
|||
formatFactory={formatFactory}
|
||||
chartTheme={dependencies.chartTheme}
|
||||
timeZone={dependencies.timeZone}
|
||||
histogramBarTarget={dependencies.histogramBarTarget}
|
||||
executeTriggerActions={executeTriggerActions}
|
||||
/>
|
||||
</I18nProvider>,
|
||||
|
@ -169,6 +173,7 @@ export function XYChart({
|
|||
formatFactory,
|
||||
timeZone,
|
||||
chartTheme,
|
||||
histogramBarTarget,
|
||||
executeTriggerActions,
|
||||
}: XYChartRenderProps) {
|
||||
const { legend, layers } = args;
|
||||
|
@ -212,18 +217,26 @@ export function XYChart({
|
|||
|
||||
const xTitle = (xAxisColumn && xAxisColumn.name) || args.xTitle;
|
||||
|
||||
// add minInterval only for single row value as it cannot be determined from dataset
|
||||
function calculateMinInterval() {
|
||||
// add minInterval only for single row value as it cannot be determined from dataset
|
||||
if (data.dateRange && layers.every(layer => data.tables[layer.layerId].rows.length <= 1)) {
|
||||
if (xAxisColumn?.meta?.aggConfigParams?.interval !== 'auto')
|
||||
return parseInterval(xAxisColumn?.meta?.aggConfigParams?.interval)?.asMilliseconds();
|
||||
|
||||
const minInterval = layers.every(layer => data.tables[layer.layerId].rows.length <= 1)
|
||||
? parseInterval(xAxisColumn?.meta?.aggConfigParams?.interval)?.asMilliseconds()
|
||||
: undefined;
|
||||
const { fromDate, toDate } = data.dateRange;
|
||||
const duration = moment(toDate).diff(moment(fromDate));
|
||||
const targetMs = duration / histogramBarTarget;
|
||||
return isNaN(targetMs) ? 0 : Math.max(Math.floor(targetMs), 1);
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const xDomain =
|
||||
data.dateRange && layers.every(l => l.xScaleType === 'time')
|
||||
? {
|
||||
min: data.dateRange.fromDate.getTime(),
|
||||
max: data.dateRange.toDate.getTime(),
|
||||
minInterval,
|
||||
minInterval: calculateMinInterval(),
|
||||
}
|
||||
: undefined;
|
||||
return (
|
||||
|
|
Loading…
Reference in a new issue