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(bullet): improve header layout and positioning #2243

Merged
merged 5 commits into from
Nov 13, 2023
Merged

feat(bullet): improve header layout and positioning #2243

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab20254
fix(bullet): header layout
nickofthyme Nov 11, 2023
8311e40
feat(bullet): improve label wrapping and stacking breakpoints
nickofthyme Nov 12, 2023
38a233a
fix: subtitle wrapping logic
nickofthyme Nov 12, 2023
f1be5be
revert: value font size increase
nickofthyme Nov 12, 2023
ac3f220
test(vrt): update screenshots [skip ci]
elastic-datavis[bot] Nov 13, 2023
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
58 changes: 36 additions & 22 deletions packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet_graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@ import { BulletDimensions } from '../../selectors/get_panel_dimensions';
import { BulletGraphSpec, BulletGraphSubtype } from '../../spec';
import {
BulletGraphStyle,
FONT_PADDING,
HEADER_PADDING,
SUBTITLE_FONT,
SUBTITLE_FONT_SIZE,
SUBTITLE_LINE_HEIGHT,
TARGET_FONT,
TARGET_FONT_SIZE,
TITLE_FONT,
TITLE_FONT_SIZE,
TITLE_LINE_HEIGHT,
TITLE_LINE_SPACING,
VALUE_FONT,
VALUE_FONT_SIZE,
getMaxTargetValueAssent,
getTextAscentHeight,
} from '../../theme';

/** @internal */
Expand Down Expand Up @@ -71,7 +73,7 @@ export function renderBulletGraph(
renderDebugRect(ctx, panel);
}

// move into the panel position
// move to panel origin
ctx.translate(panel.x, panel.y);

// paint right border
Expand All @@ -94,45 +96,57 @@ export function renderBulletGraph(
// this helps render the header without considering paddings
ctx.translate(HEADER_PADDING.left, HEADER_PADDING.top);

ctx.textBaseline = 'alphabetic';

const MAX_TARGET_VALUE_ASCENT = getMaxTargetValueAssent(bulletGraph.target);
const commonYBaseline = // to share baseline with value and target
Math.max(
getTextAscentHeight(TITLE_FONT_SIZE, verticalAlignment.maxTitleRows, TITLE_LINE_SPACING) +
(verticalAlignment.maxSubtitleRows > 0 ? FONT_PADDING : 0) +
getTextAscentHeight(SUBTITLE_FONT_SIZE, verticalAlignment.maxSubtitleRows),
verticalAlignment.multiline ? 0 : MAX_TARGET_VALUE_ASCENT,
);

// Title
ctx.fillStyle = props.style.textColor;
ctx.textBaseline = 'top';
ctx.textAlign = 'start';
ctx.font = cssFontShorthand(TITLE_FONT, TITLE_FONT_SIZE);
bulletGraph.title.forEach((titleLine, lineIndex) => {
const y = lineIndex * TITLE_LINE_HEIGHT;
ctx.fillText(titleLine, 0, y);
});

const titleYBaseline =
commonYBaseline -
getTextAscentHeight(SUBTITLE_FONT_SIZE, verticalAlignment.maxSubtitleRows) -
(verticalAlignment.maxSubtitleRows > 0 ? FONT_PADDING : 0);

bulletGraph.title
.slice()
.reverse()
.forEach((titleLine, lineIndex) => {
const y = titleYBaseline - lineIndex * (getTextAscentHeight(TITLE_FONT_SIZE) + TITLE_LINE_SPACING);
ctx.fillText(titleLine, 0, y);
});

// Subtitle
if (bulletGraph.subtitle) {
const y = verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT;
ctx.font = cssFontShorthand(SUBTITLE_FONT, SUBTITLE_FONT_SIZE);
ctx.fillText(bulletGraph.subtitle, 0, y);
ctx.fillText(bulletGraph.subtitle, 0, commonYBaseline);
}

// Value
ctx.textBaseline = 'alphabetic';
ctx.font = cssFontShorthand(VALUE_FONT, VALUE_FONT_SIZE);
if (!multiline) ctx.textAlign = 'end';
{
const y =
verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT +
verticalAlignment.maxSubtitleRows * SUBTITLE_LINE_HEIGHT +
(multiline ? TARGET_FONT_SIZE : 0);
const y = commonYBaseline + (multiline ? MAX_TARGET_VALUE_ASCENT + FONT_PADDING : 0);
const x = multiline ? 0 : bulletGraph.header.width - bulletGraph.targetWidth;

ctx.fillText(bulletGraph.value, x, y);
}

// Target
ctx.font = cssFontShorthand(TARGET_FONT, TARGET_FONT_SIZE);
if (!multiline) ctx.textAlign = 'end';
{
if (bulletGraph.target) {
ctx.font = cssFontShorthand(TARGET_FONT, TARGET_FONT_SIZE);
if (!multiline) ctx.textAlign = 'end';
const x = multiline ? bulletGraph.valueWidth : bulletGraph.header.width;
const y =
verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT +
verticalAlignment.maxSubtitleRows * SUBTITLE_LINE_HEIGHT +
(multiline ? TARGET_FONT_SIZE : 0);
const y = commonYBaseline + (multiline ? MAX_TARGET_VALUE_ASCENT + FONT_PADDING : 0);
ctx.fillText(bulletGraph.target, x, y);
}

Expand Down
7 changes: 5 additions & 2 deletions packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,8 @@ class Component extends React.Component<Props> {
return null;
}

const valueLabels = mergeValueLabels(spec.valueLabels);

return (
<figure
aria-labelledby={a11y.labelId}
Expand Down Expand Up @@ -176,10 +178,11 @@ class Component extends React.Component<Props> {
subtitle: datum.subtitle,
domain: datum.domain,
niceDomain: datum.niceDomain,
valueLabels: mergeValueLabels(spec.valueLabels),
valueLabels,
extra: datum.target ? (
<span>
target: <strong>{(datum.targetFormatter ?? datum.valueFormatter)(datum.target)}</strong>
{valueLabels.target}:{' '}
<strong>{(datum.targetFormatter ?? datum.valueFormatter)(datum.target)}</strong>
</span>
) : undefined,
};
Expand Down
108 changes: 78 additions & 30 deletions packages/charts/src/chart_types/bullet_graph/selectors/get_layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,19 @@ import { withTextMeasure } from '../../../utils/bbox/canvas_text_bbox_calculator
import { Size } from '../../../utils/dimensions';
import { wrapText } from '../../../utils/text/wrap';
import {
FONT_PADDING,
HEADER_PADDING,
SUBTITLE_FONT,
SUBTITLE_FONT_SIZE,
SUBTITLE_LINE_HEIGHT,
TARGET_FONT,
TARGET_FONT_SIZE,
TITLE_FONT,
TITLE_FONT_SIZE,
TITLE_LINE_HEIGHT,
TITLE_LINE_SPACING,
VALUE_FONT,
VALUE_FONT_SIZE,
VALUE_LINE_HEIGHT,
getMaxTargetValueAssent,
getTextAscentHeight,
} from '../theme';

/** @internal */
Expand All @@ -49,6 +50,7 @@ export interface BulletLayoutAlignment {
maxTitleRows: number;
maxSubtitleRows: number;
multiline: boolean;
headerHeight: number;
minHeight: number;
minWidth: number;
}
Expand Down Expand Up @@ -107,32 +109,62 @@ export const getLayout = createCustomCachedSelector(
target: cell.target ? `/ ${(cell.targetFormatter ?? cell.valueFormatter)(cell.target)}` : '',
datum: cell,
};
const size = {
const widths = {
title: textMeasurer(content.title.trim(), TITLE_FONT, TITLE_FONT_SIZE).width,
subtitle: content.subtitle ? textMeasurer(content.subtitle, TITLE_FONT, TITLE_FONT_SIZE).width : 0,
value: textMeasurer(content.value, VALUE_FONT, VALUE_FONT_SIZE).width,
target: textMeasurer(content.target, TARGET_FONT, TARGET_FONT_SIZE).width,
};
return { content, size };
return { content, widths };
}),
);

const goesToMultiline = header.some((row) => {
const valueAlignedWithSubtitle = row.some((cell) => cell?.content.subtitle);
const valueIsBelowTitles = header.some((row) => {
return row.some((cell) => {
if (!cell) return false;
const valuesWidth = cell.size.value + cell.size.target;
return valueAlignedWithSubtitle
? cell.size.subtitle + valuesWidth > headerSize.width || cell.size.title > headerSize.width
: cell.size.title + valuesWidth > headerSize.width;
const valuesWidth = cell.widths.value + cell.widths.target;
const availableWidth = 0.95 * (headerSize.width - valuesWidth);

if (
availableWidth < 0.5 * headerSize.width &&
(cell.widths.title > availableWidth || cell.widths.subtitle > availableWidth)
) {
return true;
}

const titleTruncated = wrapText(
cell.content.title,
TITLE_FONT,
TITLE_FONT_SIZE,
availableWidth,
2,
textMeasurer,
locale,
).meta.truncated;
const subtitleTruncated = cell.content.subtitle
? wrapText(
cell.content.subtitle,
SUBTITLE_FONT,
SUBTITLE_FONT_SIZE,
availableWidth,
1,
textMeasurer,
locale,
).meta.truncated
: false;

return titleTruncated || subtitleTruncated;
});
});

const headerLayout = header.map((row) => {
return row.map((cell) => {
if (!cell) return null;

if (goesToMultiline) {
const valuesWidth = cell.widths.value + cell.widths.target;
const availableWidth = 0.95 * (headerSize.width - valuesWidth);

if (valueIsBelowTitles) {
return {
panel,
header: headerSize,
Expand Down Expand Up @@ -160,48 +192,64 @@ export const getLayout = createCustomCachedSelector(
value: cell.content.value,
target: cell.content.target,
multiline: true,
valueWidth: cell.size.value,
targetWidth: cell.size.target,
sizes: cell.size,
valueWidth: cell.widths.value,
targetWidth: cell.widths.target,
sizes: cell.widths,
datum: cell.content.datum,
};
}

return {
panel,
header: headerSize,
title: [cell.content.title],
subtitle: cell.content.subtitle ? cell.content.subtitle : undefined,
title: wrapText(cell.content.title, TITLE_FONT, TITLE_FONT_SIZE, availableWidth, 2, textMeasurer, locale),
subtitle: cell.content.subtitle
? wrapText(
cell.content.subtitle,
SUBTITLE_FONT,
SUBTITLE_FONT_SIZE,
availableWidth,
1,
textMeasurer,
locale,
)[0]
: undefined,
value: cell.content.value,
target: cell.content.target,
multiline: false,
valueWidth: cell.size.value,
targetWidth: cell.size.target,
sizes: cell.size,
valueWidth: cell.widths.value,
targetWidth: cell.widths.target,
sizes: cell.widths,
datum: cell.content.datum,
};
});
});
const layoutAlignment = headerLayout.map((curr) => {
return curr.reduce(
return curr.reduce<BulletLayoutAlignment>(
(rowStats, cell) => {
const MAX_TARGET_VALUE_ASCENT = getMaxTargetValueAssent(cell?.target);
const multiline = cell?.multiline ?? false;
const maxTitleRows = Math.max(rowStats.maxTitleRows, cell?.title.length ?? 0);
const maxSubtitleRows = Math.max(rowStats.maxSubtitleRows, cell?.subtitle ? 1 : 0);
const leftHeaderHeight =
getTextAscentHeight(TITLE_FONT_SIZE, maxTitleRows, TITLE_LINE_SPACING) +
(maxSubtitleRows > 0 ? FONT_PADDING : 0) +
getTextAscentHeight(SUBTITLE_FONT_SIZE, maxSubtitleRows) +
(cell?.multiline ? MAX_TARGET_VALUE_ASCENT + FONT_PADDING : 0);
const rightHeaderHeight = cell?.multiline ? 0 : MAX_TARGET_VALUE_ASCENT;
const headerHeight =
Math.max(leftHeaderHeight, rightHeaderHeight) + HEADER_PADDING.top + HEADER_PADDING.bottom;

return {
multiline,
maxTitleRows,
maxSubtitleRows,
multiline: cell?.multiline ?? false,
minHeight:
maxTitleRows * TITLE_LINE_HEIGHT +
maxSubtitleRows * SUBTITLE_LINE_HEIGHT +
(cell?.multiline ? VALUE_LINE_HEIGHT : 0) +
HEADER_PADDING.top +
HEADER_PADDING.bottom +
minChartHeights[spec.subtype],
headerHeight,
minHeight: headerHeight + minChartHeights[spec.subtype],
minWidth: minChartWidths[spec.subtype],
};
},
{ maxTitleRows: 0, maxSubtitleRows: 0, multiline: false, minHeight: 0, minWidth: 0 },
{ maxTitleRows: 0, maxSubtitleRows: 0, multiline: false, headerHeight: 0, minHeight: 0, minWidth: 0 },
);
});

Expand Down
17 changes: 2 additions & 15 deletions packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,7 @@ import { GenericDomain, Range } from '../../../utils/domain';
import { Point } from '../../../utils/point';
import { ANGULAR_TICK_INTERVAL, TICK_INTERVAL } from '../renderer/canvas/constants';
import { BulletDatum, BulletGraphSpec, BulletGraphSubtype } from '../spec';
import {
BulletGraphStyle,
GRAPH_PADDING,
HEADER_PADDING,
SUBTITLE_LINE_HEIGHT,
TITLE_LINE_HEIGHT,
VALUE_LINE_HEIGHT,
} from '../theme';
import { BulletGraphStyle, GRAPH_PADDING } from '../theme';
import { getAngledChartSizing, getAnglesBySize } from '../utils/angular';
import { ColorTick, getColorBands } from '../utils/color';
import { TickOptions, getTicks } from '../utils/ticks';
Expand Down Expand Up @@ -78,13 +71,7 @@ export const getPanelDimensions = createCustomCachedSelector(

const graphSize = {
width: panel.width,
height:
panel.height -
HEADER_PADDING.top -
verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT -
verticalAlignment.maxSubtitleRows * SUBTITLE_LINE_HEIGHT -
(multiline ? VALUE_LINE_HEIGHT : 0) -
HEADER_PADDING.bottom,
height: panel.height - verticalAlignment.headerHeight,
};

return {
Expand Down
Loading