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

fix(ticks): fill in additional ticks for histogram #251

Merged
merged 5 commits into from
Jul 5, 2019
Merged

fix(ticks): fill in additional ticks for histogram #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5b650aa
fix(ticks): fill in additional ticks for histogram
emmacunningham Jul 1, 2019
739c6c2
fix: handle single value series
emmacunningham Jul 1, 2019
78f3dff
test: add test for single value scale
emmacunningham Jul 1, 2019
d1eac5c
refactor: simplify logic for extra single value scale tick
emmacunningham Jul 1, 2019
5d33811
refactor: destructure value
emmacunningham Jul 5, 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
114 changes: 84 additions & 30 deletions src/lib/axes/axis_utils.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,36 +205,90 @@ describe('Axis computational utils', () => {
expect(xScale).toBeDefined();
});

test('should compute available ticks', () => {
const scale = getScaleForAxisSpec(verticalAxisSpec, xDomain, [yDomain], 0, 0, 100, 0);
const axisPositions = getAvailableTicks(verticalAxisSpec, scale!, 0, false);
const expectedAxisPositions = [
{ label: '0', position: 100, value: 0 },
{ label: '0.1', position: 90, value: 0.1 },
{ label: '0.2', position: 80, value: 0.2 },
{ label: '0.3', position: 70, value: 0.3 },
{ label: '0.4', position: 60, value: 0.4 },
{ label: '0.5', position: 50, value: 0.5 },
{ label: '0.6', position: 40, value: 0.6 },
{ label: '0.7', position: 30, value: 0.7 },
{ label: '0.8', position: 20, value: 0.8 },
{ label: '0.9', position: 10, value: 0.9 },
{ label: '1', position: 0, value: 1 },
];
expect(axisPositions).toEqual(expectedAxisPositions);

// histogram mode axis ticks should add an additional tick
const xBandDomain: XDomain = {
type: 'xDomain',
scaleType: ScaleType.Linear,
domain: [0, 100],
isBandScale: true,
minInterval: 10,
};
const xScale = getScaleForAxisSpec(horizontalAxisSpec, xBandDomain, [yDomain], 1, 0, 100, 0);
const histogramAxisPositions = getAvailableTicks(horizontalAxisSpec, xScale!, 1, true);
const histogramTickLabels = histogramAxisPositions.map((tick: AxisTick) => tick.label);
expect(histogramTickLabels).toEqual(['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110']);
describe('getAvailableTicks', () => {
test('should compute to end of domain when histogram mode not enabled', () => {
const enableHistogramMode = false;
const scale = getScaleForAxisSpec(verticalAxisSpec, xDomain, [yDomain], 0, 0, 100, 0);
const axisPositions = getAvailableTicks(verticalAxisSpec, scale!, 0, enableHistogramMode);
const expectedAxisPositions = [
{ label: '0', position: 100, value: 0 },
{ label: '0.1', position: 90, value: 0.1 },
{ label: '0.2', position: 80, value: 0.2 },
{ label: '0.3', position: 70, value: 0.3 },
{ label: '0.4', position: 60, value: 0.4 },
{ label: '0.5', position: 50, value: 0.5 },
{ label: '0.6', position: 40, value: 0.6 },
{ label: '0.7', position: 30, value: 0.7 },
{ label: '0.8', position: 20, value: 0.8 },
{ label: '0.9', position: 10, value: 0.9 },
{ label: '1', position: 0, value: 1 },
];
expect(axisPositions).toEqual(expectedAxisPositions);
});

test('should extend ticks to domain + minInterval in histogram mode for linear scale', () => {
const enableHistogramMode = true;
const xBandDomain: XDomain = {
type: 'xDomain',
scaleType: ScaleType.Linear,
domain: [0, 100],
isBandScale: true,
minInterval: 10,
};
const xScale = getScaleForAxisSpec(horizontalAxisSpec, xBandDomain, [yDomain], 1, 0, 100, 0);
const histogramAxisPositions = getAvailableTicks(horizontalAxisSpec, xScale!, 1, enableHistogramMode);
const histogramTickLabels = histogramAxisPositions.map(({ label }: AxisTick) => label);
expect(histogramTickLabels).toEqual(['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110']);
});

test('should extend ticks to domain + minInterval in histogram mode for time scale', () => {
const enableHistogramMode = true;
const xBandDomain: XDomain = {
type: 'xDomain',
scaleType: ScaleType.Time,
domain: [1560438420000, 1560438510000],
isBandScale: true,
minInterval: 90000,
};
const xScale = getScaleForAxisSpec(horizontalAxisSpec, xBandDomain, [yDomain], 1, 0, 100, 0);
const histogramAxisPositions = getAvailableTicks(horizontalAxisSpec, xScale!, 1, enableHistogramMode);
const histogramTickValues = histogramAxisPositions.map(({ value }: AxisTick) => value);

const expectedTickValues = [
1560438420000,
1560438435000,
1560438450000,
1560438465000,
1560438480000,
1560438495000,
1560438510000,
1560438525000,
1560438540000,
1560438555000,
1560438570000,
1560438585000,
1560438600000,
];

expect(histogramTickValues).toEqual(expectedTickValues);
});

test('should extend ticks to domain + minInterval in histogram mode for a scale with single datum', () => {
const enableHistogramMode = true;
const xBandDomain: XDomain = {
type: 'xDomain',
scaleType: ScaleType.Time,
domain: [1560438420000, 1560438420000], // a single datum scale will have the same value for domain start & end
isBandScale: true,
minInterval: 90000,
};
const xScale = getScaleForAxisSpec(horizontalAxisSpec, xBandDomain, [yDomain], 1, 0, 100, 0);
const histogramAxisPositions = getAvailableTicks(horizontalAxisSpec, xScale!, 1, enableHistogramMode);
const histogramTickValues = histogramAxisPositions.map(({ value }: AxisTick) => value);
const expectedTickValues = [1560438420000, 1560438510000];

expect(histogramTickValues).toEqual(expectedTickValues);
});
});
test('should compute visible ticks for a vertical axis', () => {
const allTicks = [
Expand Down
37 changes: 34 additions & 3 deletions src/lib/axes/axis_utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,17 +370,47 @@ export function getAvailableTicks(
enableHistogramMode: boolean,
): AxisTick[] {
const ticks = scale.ticks();
const isSingleValueScale = scale.domain[0] - scale.domain[1] === 0;
const hasAdditionalTicks = enableHistogramMode && scale.bandwidth > 0;

if (enableHistogramMode && scale.bandwidth > 0) {
const finalTick = ticks[ticks.length - 1] + scale.minInterval;
ticks.push(finalTick);
if (hasAdditionalTicks) {
const lastComputedTick = ticks[ticks.length - 1];

if (!isSingleValueScale) {
const penultimateComputedTick = ticks[ticks.length - 2];
const computedTickDistance = lastComputedTick - penultimateComputedTick;
const numTicks = scale.minInterval / computedTickDistance;

for (let i = 1; i <= numTicks; i++) {
ticks.push(i * computedTickDistance + lastComputedTick);
}
}
}

const shift = totalBarsInCluster > 0 ? totalBarsInCluster : 1;

const band = scale.bandwidth / (1 - scale.barsPadding);
const halfPadding = (band - scale.bandwidth) / 2;
const offset = enableHistogramMode ? -halfPadding : (scale.bandwidth * shift) / 2;

if (isSingleValueScale && hasAdditionalTicks) {
const firstTickValue = ticks[0];
const firstTick = {
value: firstTickValue,
label: axisSpec.tickFormat(firstTickValue),
position: scale.scale(firstTickValue) + offset,
};

const lastTickValue = firstTickValue + scale.minInterval;
const lastTick = {
value: lastTickValue,
label: axisSpec.tickFormat(lastTickValue),
position: scale.bandwidth + halfPadding * 2,
};

return [firstTick, lastTick];
}

return ticks.map((tick) => {
return {
value: tick,
Expand Down Expand Up @@ -420,6 +450,7 @@ export function getVisibleTicks(allTicks: AxisTick[], axisSpec: AxisSpec, axisDi
}
}
}

return visibleTicks;
}

Expand Down
33 changes: 33 additions & 0 deletions stories/bar_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1571,6 +1571,39 @@ storiesOf('Bar Chart', module)
</Chart>
);
})
.add('[test] single histogram bar chart', () => {
const formatter = timeFormatter(niceTimeFormatByDay(1));

const xDomain = {
minInterval: 60000,
};

return (
<Chart className={'story-chart'}>
<Settings xDomain={xDomain} />
<Axis
id={getAxisId('bottom')}
title={'timestamp per 1 minute'}
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={formatter}
/>
<Axis
id={getAxisId('left')}
title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
position={Position.Left}
/>
<HistogramBarSeries
id={getSpecId('bars')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 1)}
/>
</Chart>
);
})
.add('stacked only grouped areas', () => {
const data1 = [[1, 2], [2, 2], [3, 3], [4, 5], [5, 5], [6, 3], [7, 8], [8, 2], [9, 1]];
const data2 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 4], [7, 3], [8, 2], [9, 4]];
Expand Down