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: fill multi-series with missing x values data points #409

Merged
merged 2 commits into from
Oct 9, 2019
Merged

feat: fill multi-series with missing x values data points #409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55fd383
feat: fill multi-series with missing x values data points
markov00 Oct 7, 2019
64a3c9e
feat(data): fill datasets with zeros with missing points when stacked
markov00 Oct 8, 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
2 changes: 1 addition & 1 deletion .playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
background: white;
position: relative;
width: 800px;
height: 150px;
height: 450px;
margin: 10px;
}
</style>
Expand Down
92 changes: 43 additions & 49 deletions .playground/playgroud.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,69 @@
import React, { Fragment } from 'react';
import {
Axis,
Chart,
getAxisId,
getSpecId,
Position,
ScaleType,
Settings,
BarSeries,
LineSeries,
AreaSeries,
} from '../src';
import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, Settings, AreaSeries } from '../src';

export class Playground extends React.Component {
render() {
return (
<Fragment>
<div className="chart">
<Chart className="story-chart">
<Settings
theme={{
areaSeriesStyle: {
point: {
visible: true,
},
},
}}
xDomain={{
max: 3.8,
}}
/>
<Chart>
<Settings showLegend theme={{ areaSeriesStyle: { point: { visible: true } } }} />
<Axis
id={getAxisId('bottom')}
position={Position.Bottom}
title={'Bottom axis'}
showOverlappingTicks={true}
/>
<Axis
id={getAxisId('left')}
id={getAxisId('left2')}
title={'Left axis'}
position={Position.Left}
domain={{
max: 5,
}}
/>

<BarSeries
id={getSpecId('bar')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={[[0, 1], [1, 2], [2, 10], [3, 4], [4, 5]]}
tickFormat={(d: any) => Number(d).toFixed(2)}
/>

<LineSeries
id={getSpecId('line')}
<AreaSeries
id={getSpecId('bars1')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={[[0, 1], [1, 2], [2, 10], [3, 4], [4, 5]]}
xAccessor="x"
yAccessors={['y']}
stackAccessors={['x']}
splitSeriesAccessors={['g']}
// curve={CurveType.CURVE_MONOTONE_X}
data={[
{ x: 0, y: 2, g: 'a' },
{ x: 1, y: 7, g: 'a' },
{ x: 2, y: 3, g: 'a' },
{ x: 3, y: 6, g: 'a' },
{ x: 0, y: 4, g: 'b' },
{ x: 1, y: 5, g: 'b' },
{ x: 2, y: 8, g: 'b' },
{ x: 3, y: 2, g: 'b' },
{ x: 4, y: 6, g: 'b' },
{ x: 5, y: 7, g: 'a' },
{ x: 5, y: 7, g: 'b' },
{ x: 6, y: 7, g: 'a' },
{ x: 6, y: 7, g: 'b' },
]}
/>

<AreaSeries
id={getSpecId('area')}
id={getSpecId('area2')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={[[0, 1], [1, 2], [2, 10], [3, 4], [4, 5]]}
xAccessor="x"
yAccessors={['y']}
stackAccessors={['x']}
splitSeriesAccessors={['g']}
// curve={CurveType.CURVE_MONOTONE_X}
data={[
{ x: 1, y: 7, g: 'a' },
{ x: 2, y: 3, g: 'a' },
{ x: 3, y: 6, g: 'a' },
{ x: 0, y: 4, g: 'b' },
{ x: 1, y: 5, g: 'b' },
{ x: 2, y: 8, g: 'b' },
{ x: 3, y: 2, g: 'b' },
{ x: 4, y: 6, g: 'b' },
]}
/>
</Chart>
</div>
Expand Down
11 changes: 7 additions & 4 deletions src/chart_types/xy_chart/domains/x_domain.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { isCompleteBound, isLowerBound, isUpperBound } from '../utils/axis_utils';
import { compareByValueAsc, identity } from '../../../utils/commons';
import { compareByValueAsc, identity, isNumberArray } from '../../../utils/commons';
import { computeContinuousDataDomain, computeOrdinalDataDomain, Domain } from '../../../utils/domain';
import { ScaleType } from '../../../utils/scales/scales';
import { BasicSeriesSpec, DomainRange } from '../utils/specs';
Expand All @@ -22,7 +22,7 @@ export type XDomain = BaseDomain & {
*/
export function mergeXDomain(
specs: Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType'>[],
xValues: Set<any>,
xValues: Set<string | number>,
customXDomain?: DomainRange | Domain,
): XDomain {
const mainXScaleType = convertXScaleTypes(specs);
Expand All @@ -46,7 +46,11 @@ export function mergeXDomain(
} else {
seriesXComputedDomains = computeContinuousDataDomain(values, identity, true);
let customMinInterval: undefined | number;

if (!isNumberArray(values)) {
throw new Error(
`Each X value in a ${mainXScaleType.scaleType} x scale needs be be a number. String or objects are not allowed`,
);
}
if (customXDomain) {
if (Array.isArray(customXDomain)) {
throw new Error('xDomain for continuous scale should be a DomainRange object, not an array');
Expand Down Expand Up @@ -78,7 +82,6 @@ export function mergeXDomain(
}
}
}

const computedMinInterval = findMinInterval(values);
if (customMinInterval != null) {
// Allow greater custom min iff xValues has 1 member.
Expand Down
10 changes: 5 additions & 5 deletions src/chart_types/xy_chart/rendering/rendering.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,9 +197,9 @@ export function renderPoints(
const isLogScale = isLogarithmicScale(yScale);
const pointGeometries = dataset.reduce(
(acc, datum) => {
const { x: xValue, y0, y1, initialY0, initialY1 } = datum;
// don't create the point if not within the xScale domain
if (!xScale.isValueInDomain(xValue)) {
const { x: xValue, y0, y1, initialY0, initialY1, filled } = datum;
// don't create the point if not within the xScale domain or it that point was filled
if (!xScale.isValueInDomain(xValue) || (filled && filled.y1 !== undefined)) {
return acc;
}
const x = xScale.scale(xValue);
Expand Down Expand Up @@ -286,9 +286,9 @@ export function renderBars(
const fontFamily = sharedSeriesStyle.displayValue.fontFamily;

dataset.forEach((datum) => {
const { y0, y1, initialY1 } = datum;
const { y0, y1, initialY1, filled } = datum;
// don't create a bar if the initialY1 value is null.
if (initialY1 === null) {
if (initialY1 === null || (filled && filled.y1 !== undefined)) {
return;
}
// don't create a bar if not within the xScale domain
Expand Down
4 changes: 2 additions & 2 deletions src/chart_types/xy_chart/store/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export function getLastValues(formattedDataSeries: {
if (last !== null) {
const { initialY1: y1, initialY0: y0 } = last;

if (y1 !== null || y0 !== null) {
if (!last.filled && (y1 !== null || y0 !== null)) {
lastValues.set(series.seriesColorKey, { y0, y1 });
}
}
Expand Down Expand Up @@ -165,7 +165,7 @@ export function computeSeriesDomains(
const xDomain = mergeXDomain(specsArray, xValues, customXDomain);
const yDomain = mergeYDomain(splittedSeries, specsArray, customYDomainsByGroupId);

const formattedDataSeries = getFormattedDataseries(specsArray, splittedSeries);
const formattedDataSeries = getFormattedDataseries(specsArray, splittedSeries, xValues, xDomain.scaleType);

// we need to get the last values from the formatted dataseries
// because we change the format if we are on percentage mode
Expand Down
Loading