Skip to content

Commit

Permalink
[Lens] Don't use auto interval to get interval for single bar (elasti…
Browse files Browse the repository at this point in the history 
…c#64502) (elastic#64784)

* 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>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
@mbondyra @elasticmachine
mbondyra and elasticmachine committed Apr 29, 2020
1 parent 02d8a13 commit 074b6f8
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 9 deletions.
1 change: 1 addition & 0 deletions x-pack/plugins/lens/public/xy_visualization/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
})
);

Expand Down
32 changes: 29 additions & 3 deletions x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' } },
],
Expand Down Expand Up @@ -156,6 +156,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down Expand Up @@ -203,6 +204,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down Expand Up @@ -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,
}
`);
});
Expand All @@ -271,6 +275,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -279,7 +284,7 @@ describe('xy_expression', () => {
Object {
"max": 1546491600000,
"min": 1546405200000,
"minInterval": 10000,
"minInterval": 1728000,
}
`);
});
Expand Down Expand Up @@ -307,6 +312,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down Expand Up @@ -350,6 +356,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down Expand Up @@ -383,6 +390,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -398,6 +406,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -414,6 +423,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -430,6 +440,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down Expand Up @@ -472,6 +483,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down Expand Up @@ -510,6 +522,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -527,6 +540,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -547,6 +561,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -565,6 +580,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="CEST"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -582,6 +598,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -606,6 +623,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -624,6 +642,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down Expand Up @@ -684,6 +703,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down Expand Up @@ -878,6 +898,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -894,6 +915,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -910,6 +932,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -927,6 +950,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand All @@ -943,6 +967,7 @@ describe('xy_expression', () => {
args={{ ...args, layers: [{ ...args.layers[0], accessors: ['a'] }] }}
formatFactory={getFormatSpy}
chartTheme={{}}
histogramBarTarget={50}
timeZone="UTC"
executeTriggerActions={executeTriggerActions}
/>
Expand All @@ -963,6 +988,7 @@ describe('xy_expression', () => {
formatFactory={getFormatSpy}
timeZone="UTC"
chartTheme={{}}
histogramBarTarget={50}
executeTriggerActions={executeTriggerActions}
/>
);
Expand Down
25 changes: 19 additions & 6 deletions x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import {
Chart,
Settings,
Expand Down Expand Up @@ -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> &
Expand All @@ -58,6 +59,7 @@ type XYChartRenderProps = XYChartProps & {
chartTheme: PartialTheme;
formatFactory: FormatFactory;
timeZone: string;
histogramBarTarget: number;
executeTriggerActions: UiActionsStart['executeTriggerActions'];
};

Expand Down Expand Up @@ -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',
Expand All @@ -130,6 +133,7 @@ export const getXyChartRenderer = (dependencies: {
formatFactory={formatFactory}
chartTheme={dependencies.chartTheme}
timeZone={dependencies.timeZone}
histogramBarTarget={dependencies.histogramBarTarget}
executeTriggerActions={executeTriggerActions}
/>
</I18nProvider>,
Expand Down Expand Up @@ -169,6 +173,7 @@ export function XYChart({
formatFactory,
timeZone,
chartTheme,
histogramBarTarget,
executeTriggerActions,
}: XYChartRenderProps) {
const { legend, layers } = args;
Expand Down Expand Up @@ -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 (
Expand Down

0 comments on commit 074b6f8

Please sign in to comment.