Skip to content

Commit

Permalink
refactor(xy): prepare for time axis improvements (opensearch-project#…
Browse files Browse the repository at this point in the history 
…1208)
  • Loading branch information
@monfera
monfera authored Jun 21, 2021
1 parent 789a187 commit 7da0942
Show file tree
Hide file tree
Showing 20 changed files with 374 additions and 682 deletions.
33 changes: 9 additions & 24 deletions packages/osd-charts/src/chart_types/xy_chart/axes/axes_sizes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,41 +19,26 @@

import { SmallMultiplesSpec } from '../../../specs';
import { Position } from '../../../utils/common';
import { getSimplePadding } from '../../../utils/dimensions';
import { getSimplePadding, PerSideDistance } from '../../../utils/dimensions';
import { AxisId } from '../../../utils/ids';
import { AxisStyle, Theme } from '../../../utils/themes/theme';
import { getSpecsById } from '../state/utils/spec';
import { isVerticalAxis } from '../utils/axis_type_utils';
import { AxisTicksDimensions, getTitleDimension, shouldShowTicks } from '../utils/axis_utils';
import { AxisViewModel, getTitleDimension, shouldShowTicks } from '../utils/axis_utils';
import { AxisSpec } from '../utils/specs';

/**
* Compute the axes required size around the chart
* @param chartTheme the theme style of the chart
* @param axisDimensions the axis dimensions
* @param axesStyles a map with all the custom axis styles
* @param axisSpecs the axis specs
* @internal
*/
const nullPadding = (): PerSideDistance => ({ left: 0, right: 0, top: 0, bottom: 0 });

/** @internal */
export function computeAxesSizes(
{ axes: sharedAxesStyles, chartMargins }: Theme,
axisDimensions: Map<AxisId, AxisTicksDimensions>,
axisDimensions: Map<AxisId, AxisViewModel>,
axesStyles: Map<AxisId, AxisStyle | null>,
axisSpecs: AxisSpec[],
smSpec?: SmallMultiplesSpec,
): { left: number; right: number; top: number; bottom: number; margin: { left: number } } {
const axisMainSize = {
left: 0,
right: 0,
top: 0,
bottom: 0,
};
const axisLabelOverflow = {
left: 0,
right: 0,
top: 0,
bottom: 0,
};
): PerSideDistance & { margin: { left: number } } {
const axisMainSize = nullPadding();
const axisLabelOverflow = nullPadding();

axisDimensions.forEach(({ maxLabelBboxWidth = 0, maxLabelBboxHeight = 0, isHidden }, id) => {
const axisSpec = getSpecsById<AxisSpec>(axisSpecs, id);
Expand Down
4 changes: 2 additions & 2 deletions packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/annotations/lines.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { Rotation } from '../../../../../utils/common';
import { Dimensions } from '../../../../../utils/dimensions';
import { LineAnnotationStyle } from '../../../../../utils/themes/theme';
import { AnnotationLineProps } from '../../../annotations/line/types';
import { renderLine } from '../primitives/line';
import { renderMultiLine } from '../primitives/line';
import { withPanelTransform } from '../utils/panel_transform';

/** @internal */
Expand All @@ -44,7 +44,7 @@ export function renderLineAnnotations(

annotations.forEach(({ linePathPoints, panel }) => {
withPanelTransform(ctx, panel, rotation, renderingArea, (ctx) => {
renderLine(ctx, linePathPoints, stroke);
renderMultiLine(ctx, [linePathPoints], stroke);
});
});
}
134 changes: 0 additions & 134 deletions packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/axes/global_title.ts
View file

This file was deleted.

133 changes: 10 additions & 123 deletions packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/axes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,34 +17,26 @@
* under the License.
*/

import { withContext } from '../../../../../renderers/canvas';
import { Position } from '../../../../../utils/common';
import { Dimensions, Size } from '../../../../../utils/dimensions';
import { AxisId } from '../../../../../utils/ids';
import { Point } from '../../../../../utils/point';
import { AxisStyle } from '../../../../../utils/themes/theme';
import { PerPanelAxisGeoms } from '../../../state/selectors/compute_per_panel_axes_geoms';
import { getSpecsById } from '../../../state/utils/spec';
import { isVerticalAxis } from '../../../utils/axis_type_utils';
import { AxisTick, AxisTicksDimensions, shouldShowTicks } from '../../../utils/axis_utils';
import { AxisTick, AxisViewModel, shouldShowTicks } from '../../../utils/axis_utils';
import { AxisSpec } from '../../../utils/specs';
import { renderDebugRect } from '../utils/debug';
import { renderTitle } from './global_title';
import { renderLine } from './line';
import { renderPanelTitle } from './panel_title';
import { renderAxisLine } from './line';
import { renderTick } from './tick';
import { renderTickLabel } from './tick_label';

/** @internal */
export interface AxisProps {
panelTitle?: string;
panelTitle?: string | undefined;
secondary?: boolean;
panelAnchor: Point;
axisStyle: AxisStyle;
axisSpec: AxisSpec;
size: Size;
anchorPoint: Point;
dimension: AxisTicksDimensions;
dimension: AxisViewModel;
ticks: AxisTick[];
debug: boolean;
renderingArea: Dimensions;
Expand All @@ -61,116 +53,11 @@ export interface AxesProps {
}

/** @internal */
export function renderAxes(ctx: CanvasRenderingContext2D, props: AxesProps) {
const { axesSpecs, perPanelAxisGeoms, axesStyles, sharedAxesStyle, debug, renderingArea } = props;
const seenAxesTitleIds = new Set<AxisId>();
export function renderAxis(ctx: CanvasRenderingContext2D, props: AxisProps) {
const { ticks, axisStyle, axisSpec, secondary } = props;
const showTicks = shouldShowTicks(axisStyle.tickLine, axisSpec.hide);

perPanelAxisGeoms.forEach(({ axesGeoms, panelAnchor }) => {
withContext(ctx, (ctx) => {
axesGeoms.forEach((geometry) => {
const {
axis: { panelTitle, id, position, secondary },
anchorPoint,
size,
dimension,
visibleTicks: ticks,
parentSize,
} = geometry;
const axisSpec = getSpecsById<AxisSpec>(axesSpecs, id);

if (!axisSpec || !dimension || !position || axisSpec.hide) {
return;
}

const axisStyle = axesStyles.get(axisSpec.id) ?? sharedAxesStyle;

if (!seenAxesTitleIds.has(id)) {
seenAxesTitleIds.add(id);

renderTitle(ctx, {
...props,
panelTitle,
size: parentSize,
anchorPoint,
dimension,
axisStyle,
axisSpec,
});
}

renderAxis(ctx, {
panelTitle,
secondary,
panelAnchor,
axisSpec,
anchorPoint,
size,
dimension,
ticks,
axisStyle,
debug,
renderingArea,
});
});
});
});
}

function renderAxis(ctx: CanvasRenderingContext2D, props: AxisProps) {
withContext(ctx, (ctx) => {
const { ticks, size, anchorPoint, debug, axisStyle, axisSpec, panelAnchor, secondary } = props;
const showTicks = shouldShowTicks(axisStyle.tickLine, axisSpec.hide);
const { position } = axisSpec;
const isVertical = isVerticalAxis(position);
const y = isVertical
? anchorPoint.y + panelAnchor.y
: anchorPoint.y + (position === Position.Top ? 1 : -1) * panelAnchor.y;
const x = isVertical
? anchorPoint.x + (position === Position.Right ? -1 : 1) * panelAnchor.x
: anchorPoint.x + panelAnchor.x;
const translate = {
y,
x,
};

ctx.translate(translate.x, translate.y);

if (debug && !secondary) {
renderDebugRect(ctx, {
x: 0,
y: 0,
...size,
});
}

withContext(ctx, (ctx) => {
renderLine(ctx, props);
});

// TODO: compute axis dimensions per panels
// For now just rendering axis line
if (secondary) return;

if (showTicks) {
withContext(ctx, (ctx) => {
ticks.forEach((tick) => {
renderTick(ctx, tick, props);
});
});
}

if (axisStyle.tickLabel.visible) {
withContext(ctx, (ctx) => {
ticks
.filter((tick) => tick.label !== null)
.forEach((tick) => {
renderTickLabel(ctx, tick, showTicks, props);
});
});
}

withContext(ctx, (ctx) => {
renderPanelTitle(ctx, props);
});
});
renderAxisLine(ctx, props); // render the axis line
if (!secondary && showTicks) ticks.forEach((tick) => renderTick(ctx, tick, props));
if (!secondary && axisStyle.tickLabel.visible) ticks.forEach((tick) => renderTickLabel(ctx, tick, showTicks, props));
}
Loading

0 comments on commit 7da0942

Please sign in to comment.