Skip to content

Commit

Permalink
fix(heatmap): adjust pageSize based available chart height (#849)
Browse files Browse the repository at this point in the history
  • Loading branch information
@markov00
markov00 authored Oct 6, 2020
1 parent 9ebd879 commit 9aa396b
Show file tree
Hide file tree
Showing 13 changed files with 333 additions and 106 deletions.
149 changes: 130 additions & 19 deletions .playground/playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,133 @@ import React from 'react';
import { Chart, Heatmap, HeatmapConfig, RecursivePartial, ScaleType, Settings } from '../src';
import { HeatmapSpec } from '../src/chart_types/heatmap/specs';
import { BABYNAME_DATA } from '../src/utils/data_samples/babynames';
import { SWIM_LANE_DATA } from '../src/utils/data_samples/test_anomaly_swim_lane';

export const SWIM_LANE_DATA = [
{
laneLabel: 'Overall',
time: 1572825600,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572829200,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572832800,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572836400,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572840000,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572843600,
value: 1.066358,
},
{
laneLabel: 'Overall',
time: 1572847200,
value: 1.813946,
},
{
laneLabel: 'Overall',
time: 1572850800,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572854400,
value: 0.05191579,
},
{
laneLabel: 'Overall',
time: 1572858000,
value: 1.63678,
},
{
laneLabel: 'Overall',
time: 1572861600,
value: 2.031104,
},
{
laneLabel: 'Overall',
time: 1572865200,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572868800,
value: 1.09738,
},
{
laneLabel: 'Overall',
time: 1572872400,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572876000,
value: 0.2232534,
},
{
laneLabel: 'Overall',
time: 1572879600,
value: 19.49729,
},
{
laneLabel: 'Overall',
time: 1572883200,
value: 34.10214,
},
{
laneLabel: 'Overall',
time: 1572886800,
value: 0,
},
{
laneLabel: 'Overall',
time: 1572890400,
value: 55.18972,
},
{
laneLabel: 'Overall',
time: 1572894000,
value: 0.9794427671013135,
},
{
laneLabel: 'Overall',
time: 1572897600,
value: 1.2711643855082817,
},
{
laneLabel: 'Overall',
time: 1572901200,
value: 0.12110509647944609,
},
{
laneLabel: 'Overall',
time: 1572904800,
value: 0.9807310648820486,
},
{
laneLabel: 'Overall',
time: 1572908400,
value: 1.0793822204067567,
},
];
export class Playground extends React.Component<any, { highlightedData?: HeatmapSpec['highlightedData'] }> {
constructor(props: any) {
super(props);
this.state = {
highlightedData: {
x: [1572908400000, 1572910200000],
y: ['i-ca80c01a'],
},
};
this.state = {};
}

onBrushEnd: HeatmapConfig['onBrushEnd'] = (e) => {
Expand All @@ -46,8 +162,7 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
const heatmapConfig: RecursivePartial<HeatmapConfig> = {
grid: {
cellHeight: {
min: 20,
max: 20, // 'fill',
max: 30,
},
stroke: {
width: 1,
Expand All @@ -65,20 +180,16 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
strokeWidth: 0,
},
},
brushArea: {
fill: 'red',
},
yAxisLabel: {
name: 'instance',
visible: true,
width: { max: 50 },
padding: 5,
fill: '#6a717d',
},
xAxisLabel: {
fill: '#6a717d',
width: 170,
// eui color subdued
fill: `#6a717d`,
padding: 8,
},
onBrushEnd: this.onBrushEnd,
maxLegendHeight: 20,
};
console.log(
BABYNAME_DATA.filter(([year]) => year > 1950).map((d) => {
Expand All @@ -87,7 +198,7 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
);
return (
<div>
<div className="chart" style={{ height: '500px', overflow: 'auto' }}>
<div className="chart" style={{ height: '88px', overflow: 'auto' }}>
<Chart>
<Settings
onElementClick={console.log}
Expand Down
2 changes: 2 additions & 0 deletions api/charts.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -832,6 +832,8 @@ export interface HeatmapConfig {
// (undocumented)
maxColumnWidth: Pixels;
// (undocumented)
maxLegendHeight?: number;
// (undocumented)
maxRowHeight: Pixels;
// Warning: (ae-forgotten-export) The symbol "HeatmapBrushEvent" needs to be exported by the entry point index.d.ts
//
Expand Down
Binary file modified ...ual-tests-for-all-stories-heatmap-alpha-basic-visually-looks-correct-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/chart_types/heatmap/layout/types/config_types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ export interface Config {
stroke: Color;
};
};
maxLegendHeight?: number;
}

export type HeatmapBrushEvent = {
Expand Down
37 changes: 0 additions & 37 deletions src/chart_types/heatmap/layout/viewmodel/grid.ts
View file

This file was deleted.

37 changes: 12 additions & 25 deletions src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { stringToRGB } from '../../../partition_chart/layout/utils/color_library
import { HeatmapSpec } from '../../specs';
import { HeatmapTable } from '../../state/selectors/compute_chart_dimensions';
import { ColorScaleType } from '../../state/selectors/get_color_scale';
import { GridHeightParams } from '../../state/selectors/get_grid_full_height';
import { Config } from '../types/config_types';
import {
Cell,
Expand All @@ -39,7 +40,6 @@ import {
PickHighlightedArea,
ShapeViewModel,
} from '../types/viewmodel_types';
import { getGridCellHeight } from './grid';

export interface HeatmapCellDatum {
x: string | number;
Expand Down Expand Up @@ -84,11 +84,11 @@ export function shapeViewModel(
heatmapTable: HeatmapTable,
colorScale: ColorScaleType,
filterRanges: Array<[number, number | null]>,
{ height, pageSize }: GridHeightParams,
): ShapeViewModel {
const gridStrokeWidth = config.grid.stroke.width ?? 1;

const { table, yValues } = heatmapTable;
const { xDomain } = heatmapTable;
const { table, yValues, xDomain } = heatmapTable;

// measure the text width of all rows values to get the grid area width
const boxedYValues = yValues.map<Box & { value: string | number }>((value) => {
Expand All @@ -99,26 +99,13 @@ export function shapeViewModel(
};
});

const maxGridAreaWidth = chartDimensions.width;
const maxGridAreaHeight = chartDimensions.height;

// compute the grid cell height
const gridCellHeight = getGridCellHeight(yValues, config);
const maxHeight = gridCellHeight * yValues.length;

// compute the pageSize: how many rows can be fitted into the current panel height
const pageSize: number =
gridCellHeight > 0 && maxHeight > maxGridAreaHeight
? Math.floor(maxGridAreaHeight / gridCellHeight)
: yValues.length;

// compute the scale for the rows positions
const yScale = scaleBand<string | number>()
.domain(yValues)
.range([0, maxHeight]);
.range([0, height]);

const yInvertedScale = scaleQuantize<string | number>()
.domain([0, maxHeight])
.domain([0, height])
.range(yValues);

let xValues = xDomain.domain;
Expand All @@ -129,7 +116,7 @@ export function shapeViewModel(
{
type: ScaleType.Time,
domain: xDomain.domain,
range: [0, maxGridAreaWidth],
range: [0, chartDimensions.width],
},
{
ticks: getTicks(chartDimensions.width, config.xAxisLabel),
Expand All @@ -152,10 +139,10 @@ export function shapeViewModel(
// compute the scale for the columns positions
const xScale = scaleBand<string | number>()
.domain(xValues)
.range([0, maxGridAreaWidth]);
.range([0, chartDimensions.width]);

const xInvertedScale = scaleQuantize<string | number>()
.domain([0, maxGridAreaWidth])
.domain([0, chartDimensions.width])
.range(xValues);

// compute the cell width (can be smaller then the available size depending on config
Expand Down Expand Up @@ -370,22 +357,22 @@ export function shapeViewModel(
const width = endFromScale - startFromScale + (isOutOfRange ? cellWidth : 0);

// resolve Y coordinated making sure the order is correct
const { y: yStart, height } = y.reduce(
const { y: yStart, totalHeight } = y.reduce(
(acc, current, i) => {
if (i === 0) {
acc.y = yScale(current) || 0;
}
acc.height += cellHeight;
acc.totalHeight += cellHeight;
return acc;
},
{ y: 0, height: 0 },
{ y: 0, totalHeight: 0 },
);

return {
x: xStart,
y: yStart,
width,
height,
height: totalHeight,
};
};

Expand Down
4 changes: 2 additions & 2 deletions src/chart_types/heatmap/renderer/canvas/connected_component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ import { bindActionCreators, Dispatch } from 'redux';

import { onChartRendered } from '../../../../state/actions/chart';
import { GlobalChartState } from '../../../../state/chart_state';
import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions';
import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
import { Dimensions } from '../../../../utils/dimensions';
import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
import { geometries } from '../../state/selectors/geometries';
import { getHeatmapContainerSizeSelector } from '../../state/selectors/get_heatmap_container_size';
import { renderCanvas2d } from './canvas_renderers';

interface ReactiveChartStateProps {
Expand Down Expand Up @@ -145,7 +145,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
return {
initialized: true,
geometries: geometries(state),
chartContainerDimensions: getChartContainerDimensionsSelector(state),
chartContainerDimensions: getHeatmapContainerSizeSelector(state),
};
};

Expand Down
Loading

0 comments on commit 9aa396b

Please sign in to comment.