Skip to content

Commit

Permalink
fix(charts): remove option to set zeros instead of null values & do i…
Browse files Browse the repository at this point in the history 
…t by default (#863)
  • Loading branch information
@EnkiP
EnkiP authored Oct 27, 2023
1 parent 5f01a20 commit 5f88663
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 63 deletions.
19 changes: 4 additions & 15 deletions packages/datasource-customizer/src/decorators/chart/result-builder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import {
} from '@forestadmin/datasource-toolkit';
import { DateTime, DateTimeUnit } from 'luxon';

import { TimeBasedChartOptions } from './types';

export default class ResultBuilder {
private static readonly formats: Record<DateOperation, string> = {
Day: 'dd/MM/yyyy',
Expand All @@ -36,8 +34,6 @@ export default class ResultBuilder {
* @param {Array<{ date: Date; value: number | null }> | Record<string, number>} values -
* This can be an array of objects with 'date' and 'value' properties,
* or a record (object) with date-value pairs.
* @param {TimeBasedChartOptions} options - displayMissingPointsAsZeros:
* display a continuous line even if some data is missing.
*
* @returns {TimeBasedChart} Returns a TimeBasedChart representing the data within the specified
* time range.
Expand All @@ -55,20 +51,19 @@ export default class ResultBuilder {
timeBased(
timeRange: DateOperation,
values: Array<{ date: Date; value: number | null }> | Record<string, number | null>,
options?: TimeBasedChartOptions,
): TimeBasedChart {
if (!values) return [];

if (Array.isArray(values)) {
return ResultBuilder.buildTimeBasedChartResult(timeRange, values, options);
return ResultBuilder.buildTimeBasedChartResult(timeRange, values);
}

const formattedValues = Object.entries(values).map(([stringDate, value]) => ({
date: new Date(stringDate),
value,
}));

return ResultBuilder.buildTimeBasedChartResult(timeRange, formattedValues, options);
return ResultBuilder.buildTimeBasedChartResult(timeRange, formattedValues);
}

/**
Expand All @@ -81,8 +76,6 @@ export default class ResultBuilder {
* @param {Array<{ label: string; values: Array<number | null> }>} lines - An array of lines,
* each containing a label and an array of numeric data values (or null)
* corresponding to the dates.
* @param {TimeBasedChartOptions} options - displayMissingPointsAsZeros:
* display a continuous line even if some data is missing.
*
* @returns {MultipleTimeBasedChart} Returns a MultipleTimeBasedChart representing multiple
* lines of data within the specified time range.
Expand All @@ -105,7 +98,6 @@ export default class ResultBuilder {
timeRange: DateOperation,
dates: Date[],
lines: Array<{ label: string; values: Array<number | null> }>,
options?: TimeBasedChartOptions,
): MultipleTimeBasedChart {
if (!dates || !lines) return { labels: null, values: null };

Expand All @@ -117,7 +109,7 @@ export default class ResultBuilder {
return computed;
}, []);

const buildTimeBased = ResultBuilder.buildTimeBasedChartResult(timeRange, values, options);
const buildTimeBased = ResultBuilder.buildTimeBasedChartResult(timeRange, values);
if (!formattedTimes) formattedTimes = buildTimeBased.map(timeBased => timeBased.label);

return { key: line.label, values: buildTimeBased.map(timeBased => timeBased.values.value) };
Expand Down Expand Up @@ -164,7 +156,6 @@ export default class ResultBuilder {
private static buildTimeBasedChartResult(
timeRange: DateOperation,
points: Array<{ date: Date; value: number | null }>,
options?: TimeBasedChartOptions,
): TimeBasedChart {
if (!points.length) return [];

Expand All @@ -188,11 +179,9 @@ export default class ResultBuilder {
const first = dates[0].startOf(timeRange.toLowerCase() as DateTimeUnit);
const last = dates[dates.length - 1];

const defaultValue = options?.displayMissingPointsAsZeros ? 0 : null;

for (let current = first; current <= last; current = current.plus({ [timeRange]: 1 })) {
const label = current.toFormat(format);
dataPoints.push({ label, values: { value: formatted[label] ?? defaultValue } });
dataPoints.push({ label, values: { value: formatted[label] ?? 0 } });
}

return dataPoints;
Expand Down
4 changes: 0 additions & 4 deletions packages/datasource-customizer/src/decorators/chart/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,3 @@ export type CollectionChartDefinition<
S extends TSchema = TSchema,
N extends TCollectionName<S> = TCollectionName<S>,
> = (context: CollectionChartContext<S, N>, resultBuilder: ResultBuilder) => Promise<Chart> | Chart;

export type TimeBasedChartOptions = {
displayMissingPointsAsZeros?: boolean;
};
51 changes: 7 additions & 44 deletions packages/datasource-customizer/test/decorators/chart/result-builder.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ describe('Chart result builder', () => {
expect(result).toStrictEqual([
{ label: '26/10/1985', values: { value: 1 } },
{ label: '27/10/1985', values: { value: 2 } },
{ label: '28/10/1985', values: { value: null } },
{ label: '29/10/1985', values: { value: null } },
{ label: '28/10/1985', values: { value: 0 } },
{ label: '29/10/1985', values: { value: 0 } },
{ label: '30/10/1985', values: { value: 3 } },
]);
});
Expand All @@ -40,7 +40,7 @@ describe('Chart result builder', () => {

expect(result).toStrictEqual([
{ label: 'W52-1985', values: { value: 1 } },
{ label: 'W1-1986', values: { value: null } },
{ label: 'W1-1986', values: { value: 0 } },
{ label: 'W2-1986', values: { value: 7 } },
]);
});
Expand All @@ -56,7 +56,7 @@ describe('Chart result builder', () => {
expect(result).toStrictEqual([
{ label: 'Oct 85', values: { value: 1 } },
{ label: 'Nov 85', values: { value: 2 } },
{ label: 'Dec 85', values: { value: null } },
{ label: 'Dec 85', values: { value: 0 } },
{ label: 'Jan 86', values: { value: 7 } },
]);
});
Expand Down Expand Up @@ -86,24 +86,6 @@ describe('Chart result builder', () => {
expect(result).toStrictEqual([]);
});

test('timeBased() should replace null values with zeros if option set to true', () => {
const result = builder.timeBased(
'Year',
{
'1985-10-26': 1,
'1986-01-07': null,
'1987-01-08': 4,
},
{ displayMissingPointsAsZeros: true },
);

expect(result).toStrictEqual([
{ label: '1985', values: { value: 1 } },
{ label: '1986', values: { value: 0 } },
{ label: '1987', values: { value: 4 } },
]);
});

test('percentage() is the identify function', () => {
expect(builder.percentage(34)).toStrictEqual(34);
});
Expand Down Expand Up @@ -158,7 +140,7 @@ describe('Chart result builder', () => {
});

describe('when there are only null values for a time range', () => {
it('should display null value', () => {
it('should display 0', () => {
const result = builder.multipleTimeBased(
'Year',
[
Expand All @@ -172,7 +154,7 @@ describe('Chart result builder', () => {

expect(result).toStrictEqual({
labels: ['1985', '1986'],
values: [{ key: 'firstLine', values: [null, 5] }],
values: [{ key: 'firstLine', values: [0, 5] }],
});
});
});
Expand All @@ -198,25 +180,7 @@ describe('Chart result builder', () => {
});

describe('when there is no value for a time range', () => {
it('should display null value', () => {
const result = builder.multipleTimeBased(
'Year',
[
new Date('1985-10-26'),
new Date('1986-01-07'),
new Date('1986-01-08'),
new Date('1985-10-27'),
],
[{ label: 'firstLine', values: [0] }],
);

expect(result).toStrictEqual({
labels: ['1985', '1986'],
values: [{ key: 'firstLine', values: [0, null] }],
});
});

it('should display zeros if option displayMissingPointsAsZeros set to true', () => {
it('should display 0', () => {
const result = builder.multipleTimeBased(
'Year',
[
Expand All @@ -226,7 +190,6 @@ describe('Chart result builder', () => {
new Date('1985-10-27'),
],
[{ label: 'firstLine', values: [0] }],
{ displayMissingPointsAsZeros: true },
);

expect(result).toStrictEqual({
Expand Down

0 comments on commit 5f88663

Please sign in to comment.