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.

Sign up for GitHub

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

feat: add minInterval option for custom xDomain #240

Merged
merged 12 commits into from
Jun 19, 2019
Merged

feat: add minInterval option for custom xDomain #240

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ed2a6ec
feat: setup test data for discover series
emmacunningham Jun 13, 2019
bdaded6
feat: add custom minInterval
emmacunningham Jun 14, 2019
ff523a6
chore: resolve merge conflict
emmacunningham Jun 14, 2019
e242144
fix: throw error iff xDomain defined
emmacunningham Jun 14, 2019
39c1f31
fix: fix linting errors
emmacunningham Jun 14, 2019
55e5685
test(x_domain): add tests for isDomainWithInterval
emmacunningham Jun 14, 2019
bd84a92
refactor(domain): add minInterval to DomainRange
emmacunningham Jun 14, 2019
f171e24
refactor: remove unused property and resolve merg conflict
emmacunningham Jun 14, 2019
674f3cb
docs: add knob for minInterval
emmacunningham Jun 14, 2019
f31e9b6
feat: add validation for custom minInterval and tests
emmacunningham Jun 14, 2019
9de618a
refactor: add JSDocs to domain properties & refactor
emmacunningham Jun 17, 2019
ad51d74
fix(domain): allow any minInterval for single datum set
emmacunningham Jun 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/lib/series/domains/x_domain.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,4 +642,35 @@ describe('X Domain', () => {
const errorMessage = 'xDomain for ordinal scale should be an array of values, not a DomainRange object';
expect(attemptToMerge).toThrowError(errorMessage);
});

describe('should account for custom minInterval', () => {
const xValues = new Set([1, 2, 3, 4, 5]);
const specs: Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType'>[] = [
{ seriesType: 'bar', xScaleType: ScaleType.Linear },
];

test('with valid minInterval', () => {
const xDomain = { minInterval: 0.5 };
const mergedDomain = mergeXDomain(specs, xValues, xDomain);
expect(mergedDomain.minInterval).toEqual(0.5);
});

test('with invalid minInterval greater than computed minInterval', () => {
const invalidXDomain = { minInterval: 10 };
const attemptToMerge = () => {
mergeXDomain(specs, xValues, invalidXDomain);
};
const expectedError = 'custom xDomain is invalid, custom minInterval is greater than computed minInterval';
expect(attemptToMerge).toThrowError(expectedError);
});

test('with invalid minInterval less than 0', () => {
const invalidXDomain = { minInterval: -1 };
const attemptToMerge = () => {
mergeXDomain(specs, xValues, invalidXDomain);
};
const expectedError = 'custom xDomain is invalid, custom minInterval is less than 0';
expect(attemptToMerge).toThrowError(expectedError);
});
});
});
26 changes: 22 additions & 4 deletions src/lib/series/domains/x_domain.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export function mergeXDomain(
const values = [...xValues.values()];
let seriesXComputedDomains;
let minInterval = 0;

if (mainXScaleType.scaleType === ScaleType.Ordinal) {
seriesXComputedDomains = computeOrdinalDataDomain(values, identity, false, true);
if (xDomain) {
Expand All @@ -40,8 +41,16 @@ export function mergeXDomain(
}
} else {
seriesXComputedDomains = computeContinuousDataDomain(values, identity, true);
let customMinInterval: undefined | number;

if (xDomain) {
if (!Array.isArray(xDomain)) {
if (Array.isArray(xDomain)) {
throw new Error('xDomain for continuous scale should be a DomainRange object, not an array');
}

customMinInterval = xDomain.minInterval;

if (xDomain) {
const [computedDomainMin, computedDomainMax] = seriesXComputedDomains;

if (isCompleteBound(xDomain)) {
Expand All @@ -63,11 +72,20 @@ export function mergeXDomain(

seriesXComputedDomains = [computedDomainMin, xDomain.max];
}
} else {
throw new Error('xDomain for continuous scale should be a DomainRange object, not an array');
}
}
minInterval = findMinInterval(values);

const computedMinInterval = findMinInterval(values);
if (customMinInterval != null) {
if (customMinInterval > computedMinInterval) {
throw new Error('custom xDomain is invalid, custom minInterval is greater than computed minInterval');
}
if (customMinInterval < 0) {
throw new Error('custom xDomain is invalid, custom minInterval is less than 0');
}
}

minInterval = customMinInterval || computedMinInterval;
}

return {
Expand Down
9 changes: 8 additions & 1 deletion src/lib/series/specs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,25 @@ export type Rendering = 'canvas' | 'svg';

export interface LowerBoundedDomain {
min: number;
minInterval?: number;
}

export interface UpperBoundedDomain {
max: number;
minInterval?: number;
}

export interface CompleteBoundedDomain {
min: number;
max: number;
minInterval?: number;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you please add the jsdocs to documents the meaning of minInterval? It's important to stress that this should be the minimum interval available between data. If for example we are visualizing yearly data from 2016 to 2019 and we the consumer compute the first interval an error will occur: 2016 is a leap year this the interval is greater then the minComputedInterval of 365 days.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For a datum with monthly aggregation they should provide 28 days as the minInterval.
It's worth also having a look at the current data_histogram intervals https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-datehistogram-aggregation.html because with time intervals there is always a distinction between calendar intervals and fixed intervals.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would also suggest to check if there is a better way to specify that interval. In particular, for Time domains.
I'd like to avoid pushing the consumer to compute that minInterval in millis manually and rather accept also some data_histogram intervals values like 1D or 1M or similar. This facilitate the use of the library and enables the consumer to just specify a simple interval.
Keep also an eye on this deprecation: elastic/kibana#27410

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@markov00

See comment explaining minInterval with warnings about certain kinds of timeseries intervals here: 9de618a

It would certainly be possible to extend the type of minInterval to accept either a raw number which would match the same units as the raw datum or a shorthand for intervals specific to a certain unit that we internally use to compute the actual minInterval of a domain. We could do something like:

interface DomainMinInterval {
  minInterval?: number | TimeInterval;
}

And then TimeInterval could be defined either as just a string that we parse ourselves or an interface with explicit unit: string and length: number where valid units are restricted to a certain set of strings.

However, this seems to potentially duplicate efforts because on the Kibana side, we are already using @elastic/datemath and parseInterval (note that parseInterval is not a part of @elastic/datemath and is instead a function defined within Kibana) to transform the returned interval from Elasticsearch (a separate issue is that it seems the Discover query still uses the deprecated interval field instead of calendar_interval or fixed_interval). That is, in the Discover data, we get back chartData.ordered.interval which is a moment duration which requires no additional parsing or transformation and is passed directly in as the value of minInterval:

    // Note: this is using the deprecated `interval` field; see above
    const xInterval = chartData.ordered.interval; 

    const xDomain = {
      domainRange: {
        min: domainMin,
        max: domainMax,
      },
      minInterval: xInterval,
    };

So for developer users of elastic-charts in Kibana, they should already have the ability to directly pass in correctly formatted custom minInterval values given the tools that exist within Kibana.

If we want to support more custom time interval shorthands within elastic-charts itself, that seems to me to be an additional enhancement to consider outside of this PR (the functionality exposed by this PR is needed for the Discover replacement, which does not need support for interval shorthands; and any other app within Kibana should be able to use the parseInterval helper to get the milliseconds value) because we may want to consider how to avoid duplication of efforts between our own internal parser and Kibana's. (One small difference that may be an issue is that Kibana is using moment while elastic-charts using luxon which uses slightly different strings to define patterns.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @emmacunningham for the clarification. Yes let's keep it like it is for the moment


export type DomainRange = LowerBoundedDomain | UpperBoundedDomain | CompleteBoundedDomain;
export interface UnboundedDomainWithInterval {
minInterval: number;
}

export type DomainRange = LowerBoundedDomain | UpperBoundedDomain | CompleteBoundedDomain | UnboundedDomainWithInterval;

export interface DisplayValueSpec {
/** Show value label in chart element */
Expand Down
Loading