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.

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(axis): small multiples axis improvements #1004

Merged
merged 20 commits into from
Feb 5, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
12 changes: 9 additions & 3 deletions api/charts.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,8 @@ export interface AxisStyle {
// (undocumented)
axisLine: StrokeStyle & Visible;
// (undocumented)
axisPanelTitle: TextStyle & Visible;
// (undocumented)
axisTitle: TextStyle & Visible;
// (undocumented)
gridLine: {
Expand Down Expand Up @@ -926,8 +928,13 @@ export const GroupBy: React.FunctionComponent<GroupByProps>;
// @alpha (undocumented)
export type GroupByAccessor = (spec: Spec, datum: any) => string | number;

// Warning: (ae-incompatible-release-tags) The symbol "GroupByFormatter" is marked as @public, but its signature references "GroupByAccessor" which is marked as @alpha
//
// @public
export type GroupByFormatter = (value: ReturnType<GroupByAccessor>) => string;

// @alpha (undocumented)
export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort'>;
export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort' | 'format'>;

// Warning: (ae-forgotten-export) The symbol "Predicate" needs to be exported by the entry point index.d.ts
//
Expand All @@ -936,9 +943,8 @@ export type GroupBySort = Predicate;

// @alpha (undocumented)
export interface GroupBySpec extends Spec {
// (undocumented)
by: GroupByAccessor;
// (undocumented)
format?: GroupByFormatter;
sort: GroupBySort;
}

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 31 additions & 1 deletion integration/tests/axis_stories.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import { Rotation } from '../../src';
import { Position, Rotation } from '../../src';
import { common } from '../page_objects';

describe('Axis stories', () => {
Expand Down Expand Up @@ -88,4 +88,34 @@ describe('Axis stories', () => {
`http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-disable axis overrides_general=true&knob-Tick label rotation_shared=${rotation}`,
);
});

describe('Small multiples', () => {
const allPositions = [Position.Top, Position.Right, Position.Bottom, Position.Left];
const showAllParams = allPositions.map((p) => `knob-Hide_${p}=false`).join('&');

it('should render four axes with titles and panel titles', async () => {
await common.expectChartAtUrlToMatchScreenshot(
`http://localhost:9001/?path=/story/small-multiples-alpha--grid-lines&${showAllParams}`,
);
});

it('should render four axes with no gridlines', async () => {
const hideAllGridParams = allPositions.map((p) => `knob-Show grid line_${p}=false`).join('&');
await common.expectChartAtUrlToMatchScreenshot(
`http://localhost:9001/?path=/story/small-multiples-alpha--grid-lines&${showAllParams}&${hideAllGridParams}`,
);
});

describe.each<Position>(allPositions)('Axis position - %s', (position) => {
it.each<[string, string]>([
['should hide title', `knob-Hide title_${position}=true`],
['should hide empty title', `knob-Title_${position}=%20&knob-Hide title_${position}=false`],
['should hide panel titles', `knob-Hide panel titles_${position}=true`],
])('%s', async (_, params) => {
await common.expectChartAtUrlToMatchScreenshot(
`http://localhost:9001/?path=/story/small-multiples-alpha--grid-lines&${showAllParams}&${params}`,
);
});
});
});
});
15 changes: 9 additions & 6 deletions src/chart_types/xy_chart/axes/axes_sizes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,14 @@
* specific language governing permissions and limitations
* under the License.
*/
import { SmallMultiplesSpec } from '../../../specs';
import { Position } from '../../../utils/common';
import { getSimplePadding } from '../../../utils/dimensions';
import { AxisId } from '../../../utils/ids';
import { AxisStyle, Theme } from '../../../utils/themes/theme';
import { getSpecsById } from '../state/utils/spec';
import { AxisTicksDimensions, shouldShowTicks } from '../utils/axis_utils';
import { isVerticalAxis } from '../utils/axis_type_utils';
import { AxisTicksDimensions, getTitleDimension, shouldShowTicks } from '../utils/axis_utils';
import { AxisSpec } from '../utils/specs';

/**
Expand All @@ -37,6 +39,7 @@ export function computeAxesSizes(
axisDimensions: Map<AxisId, AxisTicksDimensions>,
axesStyles: Map<AxisId, AxisStyle | null>,
axisSpecs: AxisSpec[],
smSpec?: SmallMultiplesSpec,
): { left: number; right: number; top: number; bottom: number; margin: { left: number } } {
const axisMainSize = {
left: 0,
Expand All @@ -56,17 +59,17 @@ export function computeAxesSizes(
if (!axisSpec || isHidden) {
return;
}
const { tickLine, axisTitle, tickLabel } = axesStyles.get(id) ?? sharedAxesStyles;
const { tickLine, axisTitle, axisPanelTitle, tickLabel } = axesStyles.get(id) ?? sharedAxesStyles;
const showTicks = shouldShowTicks(tickLine, axisSpec.hide);
const { position, title } = axisSpec;
const titlePadding = getSimplePadding(axisTitle.padding);
const labelPadding = getSimplePadding(tickLabel.padding);
const labelPaddingSum = tickLabel.visible ? labelPadding.inner + labelPadding.outer : 0;

const tickDimension = showTicks ? tickLine.size + tickLine.padding : 0;
const titleHeight =
title !== undefined && axisTitle.visible ? axisTitle.fontSize + titlePadding.outer + titlePadding.inner : 0;
const axisDimension = labelPaddingSum + tickDimension + titleHeight;
const titleDimension = title ? getTitleDimension(axisTitle) : 0;
const hasPanelTitle = Boolean(isVerticalAxis(position) ? smSpec?.splitVertically : smSpec?.splitHorizontally);
const panelTitleDimension = hasPanelTitle ? getTitleDimension(axisPanelTitle) : 0;
const axisDimension = labelPaddingSum + tickDimension + titleDimension + panelTitleDimension;
const maxAxisHeight = tickLabel.visible ? maxLabelBboxHeight + axisDimension : axisDimension;
const maxAxisWidth = tickLabel.visible ? maxLabelBboxWidth + axisDimension : axisDimension;

Expand Down
44 changes: 22 additions & 22 deletions src/chart_types/xy_chart/domains/y_domain.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ describe('Y Domain', () => {
],
store,
);
const { yDomain } = computeSeriesDomainsSelector(store.getState());
const { yDomains } = computeSeriesDomainsSelector(store.getState());

expect(yDomain).toEqual([
expect(yDomains).toEqual([
{
type: 'yDomain',
groupId: DEFAULT_GLOBAL_ID,
Expand All @@ -109,9 +109,9 @@ describe('Y Domain', () => {
],
store,
);
const { yDomain } = computeSeriesDomainsSelector(store.getState());
const { yDomains } = computeSeriesDomainsSelector(store.getState());

expect(yDomain).toEqual([
expect(yDomains).toEqual([
{
type: 'yDomain',
groupId: DEFAULT_GLOBAL_ID,
Expand Down Expand Up @@ -145,9 +145,9 @@ describe('Y Domain', () => {
],
store,
);
const { yDomain } = computeSeriesDomainsSelector(store.getState());
const { yDomains } = computeSeriesDomainsSelector(store.getState());

expect(yDomain).toEqual([
expect(yDomains).toEqual([
{
groupId: 'a',
domain: [2, 12],
Expand Down Expand Up @@ -183,9 +183,9 @@ describe('Y Domain', () => {
],
store,
);
const { yDomain } = computeSeriesDomainsSelector(store.getState());
const { yDomains } = computeSeriesDomainsSelector(store.getState());

expect(yDomain).toEqual([
expect(yDomains).toEqual([
{
groupId: 'a',
domain: [0, 17],
Expand Down Expand Up @@ -213,8 +213,8 @@ describe('Y Domain', () => {
],
store,
);
const { yDomain } = computeSeriesDomainsSelector(store.getState());
expect(yDomain).toEqual([
const { yDomains } = computeSeriesDomainsSelector(store.getState());
expect(yDomains).toEqual([
{
groupId: 'a',
domain: [0, 12],
Expand Down Expand Up @@ -402,9 +402,9 @@ describe('Y Domain', () => {
],
store,
);
const { yDomain } = computeSeriesDomainsSelector(store.getState());
const { yDomains } = computeSeriesDomainsSelector(store.getState());

expect(yDomain).toEqual([
expect(yDomains).toEqual([
{
type: 'yDomain',
groupId: 'a',
Expand All @@ -428,9 +428,9 @@ describe('Y Domain', () => {
],
store,
);
const { yDomain } = computeSeriesDomainsSelector(store.getState());
const { yDomains } = computeSeriesDomainsSelector(store.getState());

expect(yDomain).toEqual([
expect(yDomains).toEqual([
{
type: 'yDomain',
groupId: 'a',
Expand All @@ -456,7 +456,7 @@ describe('Y Domain', () => {
);

const {
yDomain: [{ domain }],
yDomains: [{ domain }],
} = computeSeriesDomainsSelector(store.getState());
expect(domain).toEqual([20, 20]);

Expand All @@ -478,8 +478,8 @@ describe('Y Domain', () => {
store,
);

const { yDomain } = computeSeriesDomainsSelector(store.getState());
expect(yDomain).toEqual([
const { yDomains } = computeSeriesDomainsSelector(store.getState());
expect(yDomains).toEqual([
{
type: 'yDomain',
groupId: 'a',
Expand All @@ -505,7 +505,7 @@ describe('Y Domain', () => {
);

const {
yDomain: [{ domain }],
yDomains: [{ domain }],
} = computeSeriesDomainsSelector(store.getState());
expect(domain).toEqual([-1, -1]);

Expand All @@ -528,8 +528,8 @@ describe('Y Domain', () => {
store,
);

const { yDomain } = computeSeriesDomainsSelector(store.getState());
expect(yDomain).toEqual([
const { yDomains } = computeSeriesDomainsSelector(store.getState());
expect(yDomains).toEqual([
{
groupId: 'a',
domain: [0, 1],
Expand All @@ -556,8 +556,8 @@ describe('Y Domain', () => {
],
store,
);
const { yDomain } = computeSeriesDomainsSelector(store.getState());
expect(yDomain).toEqual([
const { yDomains } = computeSeriesDomainsSelector(store.getState());
expect(yDomains).toEqual([
{
type: 'yDomain',
groupId: 'a',
Expand Down
Loading