Skip to content

Commit

Permalink
feat(charts): adding showGridLines prop to axis
Browse files Browse the repository at this point in the history 
Instead of setting a negative grid line, you can now set a prop.
  • Loading branch information
@markmcdowell
markmcdowell committed Jan 7, 2020
1 parent ead5c1a commit 2c0f7fe
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 84 deletions.
143 changes: 95 additions & 48 deletions packages/charts/src/axes/Axis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ class Axis extends React.Component<AxisProps> {
zoomCursorClassName: "",
};

private node?: GenericChartComponent;
private readonly chartRef = React.createRef<GenericChartComponent>();

public render() {
const {
Expand Down Expand Up @@ -92,7 +92,7 @@ class Axis extends React.Component<AxisProps> {
<g transform={`translate(${transform[0]}, ${transform[1]})`}>
{zoomCapture}
<GenericChartComponent
ref={this.saveNode}
ref={this.chartRef}
canvasToDraw={getAxisCanvas}
clip={false}
edgeClip={edgeClip}
Expand All @@ -104,25 +104,23 @@ class Axis extends React.Component<AxisProps> {
);
}

private readonly saveNode = (node: GenericChartComponent) => {
this.node = node;
}

private readonly getMoreProps = () => {
return this.node!.getMoreProps();
return this.chartRef.current!.getMoreProps();
}

private readonly renderSVG = (moreProps) => {
const { className } = this.props;
const { showDomain, showTicks, range, getScale } = this.props;
const { className, showDomain, showTicks, range, getScale } = this.props;

const ticks = showTicks ? axisTicksSVG(this.props, getScale(moreProps)) : null;
const scale = getScale(moreProps);
const ticks = showTicks ? axisTicksSVG(this.props, scale) : null;
const domain = showDomain ? axisLineSVG(this.props, range) : null;

return <g className={className}>
{ticks}
{domain}
</g>;
return (
<g className={className}>
{ticks}
{domain}
</g>
);
}

private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
Expand All @@ -131,13 +129,14 @@ class Axis extends React.Component<AxisProps> {
ctx.save();
ctx.translate(transform[0], transform[1]);

if (showDomain) {
drawAxisLine(ctx, this.props, range);
if (showTicks) {
const scale = getScale(moreProps);
const tickProps = tickHelper(this.props, scale);
drawTicks(ctx, tickProps, moreProps);
}

if (showTicks) {
const tickProps = tickHelper(this.props, getScale(moreProps));
drawTicks(ctx, tickProps);
if (showDomain) {
drawAxisLine(ctx, this.props, range);
}

ctx.restore();
Expand All @@ -164,6 +163,7 @@ function tickHelper(props, scale) {
tickStrokeOpacity,
tickInterval,
tickIntervalFunction,
...rest
} = props;

let tickValues;
Expand Down Expand Up @@ -268,6 +268,7 @@ function tickHelper(props, scale) {
}

return {
orient,
ticks,
scale,
tickStroke,
Expand All @@ -283,6 +284,7 @@ function tickHelper(props, scale) {
fontWeight,
format,
showTickLabel,
...rest,
};
}

Expand Down Expand Up @@ -316,7 +318,7 @@ function drawAxisLine(ctx: CanvasRenderingContext2D, props: AxisProps, range) {
const { orient, outerTickSize, stroke, strokeWidth, strokeOpacity } = props;

const sign = orient === "top" || orient === "left" ? -1 : 1;
const xAxis = (orient === "bottom" || orient === "top");
const xAxis = orient === "bottom" || orient === "top";

ctx.lineWidth = strokeWidth;
ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
Expand All @@ -339,23 +341,23 @@ function drawAxisLine(ctx: CanvasRenderingContext2D, props: AxisProps, range) {
}

interface TickProps {
children: string;
x1: number;
y1: number;
x2: number;
y2: number;
labelX: number;
labelY: number;
dy: string;
tickStroke?: string;
tickLabelFill?: string;
tickStrokeWidth?: number;
tickStrokeOpacity?: number;
tickStrokeDasharray?: strokeDashTypes;
textAnchor?: string;
fontSize?: number;
fontFamily?: string;
fontWeight?: number | string;
readonly children: string;
readonly dy: string;
readonly fontSize?: number;
readonly fontFamily?: string;
readonly fontWeight?: number | string;
readonly labelX: number;
readonly labelY: number;
readonly textAnchor?: string;
readonly tickStroke?: string;
readonly tickLabelFill?: string;
readonly tickStrokeWidth?: number;
readonly tickStrokeOpacity?: number;
readonly tickStrokeDasharray?: strokeDashTypes;
readonly x1: number;
readonly y1: number;
readonly x2: number;
readonly y2: number;
}

function Tick(props: TickProps) {
Expand All @@ -369,10 +371,15 @@ function Tick(props: TickProps) {
fontSize,
fontFamily,
fontWeight,
x1,
y1,
x2,
y2,
labelX,
labelY,
dy,
} = props;

const { x1, y1, x2, y2, labelX, labelY, dy } = props;

return (
<g className="tick">
<line
Expand All @@ -381,10 +388,14 @@ function Tick(props: TickProps) {
stroke={tickStroke}
strokeWidth={tickStrokeWidth}
strokeDasharray={getStrokeDasharray(tickStrokeDasharray)}
x1={x1} y1={y1}
x2={x2} y2={y2} />
x1={x1}
y1={y1}
x2={x2}
y2={y2} />
<text
dy={dy} x={labelX} y={labelY}
dy={dy}
x={labelX}
y={labelY}
fill={tickLabelFill}
fontSize={fontSize}
fontWeight={fontWeight}
Expand All @@ -400,9 +411,7 @@ function axisTicksSVG(props, scale) {
const result = tickHelper(props, scale);

const { tickLabelFill, tickStroke, tickStrokeOpacity, tickStrokeWidth, tickStrokeDasharray, textAnchor } = result;
const { fontSize, fontFamily, fontWeight, ticks, format } = result;

const { dy } = result;
const { fontSize, fontFamily, fontWeight, ticks, format, dy } = result;

return (
<g>
Expand All @@ -428,9 +437,9 @@ function axisTicksSVG(props, scale) {
);
}

function drawTicks(ctx: CanvasRenderingContext2D, result) {
function drawTicks(ctx: CanvasRenderingContext2D, result, moreProps) {

const { tickStroke, tickStrokeOpacity, tickLabelFill } = result;
const { showGridLines, tickStroke, tickStrokeOpacity, tickLabelFill } = result;
const { textAnchor, fontSize, fontFamily, fontWeight, ticks, showTickLabel } = result;

ctx.strokeStyle = colorToRGBA(tickStroke, tickStrokeOpacity);
Expand All @@ -441,6 +450,12 @@ function drawTicks(ctx: CanvasRenderingContext2D, result) {
drawEachTick(ctx, tick, result);
});

if (showGridLines) {
ticks.forEach((tick) => {
drawGridLine(ctx, tick, result, moreProps);
});
}

ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
ctx.fillStyle = tickLabelFill;
ctx.textAlign = textAnchor === "middle" ? "center" : textAnchor;
Expand All @@ -452,6 +467,35 @@ function drawTicks(ctx: CanvasRenderingContext2D, result) {
}
}

function drawGridLine(ctx: CanvasRenderingContext2D, tick, result, moreProps) {
const { orient, gridLinesStrokeWidth, gridLinesStroke, gridLinesStrokeDasharray } = result;

const { chartConfig } = moreProps;

const { height, width } = chartConfig;

ctx.strokeStyle = colorToRGBA(gridLinesStroke);
ctx.beginPath();

switch (orient) {
case "top":
case "bottom":
ctx.moveTo(tick.x1, 0);
ctx.lineTo(tick.x2, -height);
break;
default:
ctx.moveTo(0, tick.y1);
ctx.lineTo(-width, tick.y2);
break;
}
ctx.lineWidth = gridLinesStrokeWidth;

const lineDash = getStrokeDasharrayCanvas(gridLinesStrokeDasharray);

ctx.setLineDash(lineDash);
ctx.stroke();
}

function drawEachTick(ctx: CanvasRenderingContext2D, tick, result) {
const { tickStrokeWidth, tickStrokeDasharray } = result;

Expand All @@ -470,8 +514,11 @@ function drawEachTick(ctx: CanvasRenderingContext2D, tick, result) {
function drawEachTickLabel(ctx: CanvasRenderingContext2D, tick, result) {
const { canvas_dy, format } = result;

const text = format(tick.value);

ctx.beginPath();
ctx.fillText(format(tick.value), tick.labelX, tick.labelY + canvas_dy);

ctx.fillText(text, tick.labelX, tick.labelY + canvas_dy);
}

export default Axis;
29 changes: 20 additions & 9 deletions packages/charts/src/axes/XAxis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,16 @@ interface XAxisProps {
readonly fontSize?: number;
readonly fontWeight?: number;
readonly getMouseDelta?: (startXY: [number, number], mouseXY: [number, number]) => number;
readonly gridLinesStroke?: string;
readonly gridLinesStrokeWidth?: number;
readonly gridLinesStrokeDasharray?: strokeDashTypes;
readonly innerTickSize?: number;
readonly onContextMenu?: any; // func
readonly onDoubleClick?: any; // func
readonly orient?: "top" | "bottom";
readonly outerTickSize?: number;
readonly showDomain?: boolean;
readonly showGridLines?: boolean;
readonly showTicks?: boolean;
readonly showTickLabel?: boolean;
readonly stroke?: string;
Expand Down Expand Up @@ -49,13 +53,16 @@ export class XAxis extends React.Component<XAxisProps> {
fontSize: 12,
fontWeight: 400,
getMouseDelta: (startXY: [number, number], mouseXY: [number, number]) => startXY[0] - mouseXY[0],
gridLinesStroke: "#000000",
gridLinesStrokeWidth: 1,
opacity: 1,
orient: "bottom",
outerTickSize: 0,
innerTickSize: 5,
showDomain: true,
showGridLines: false,
showTicks: true,
showTickLabel: true,
showDomain: true,
stroke: "#000000",
strokeWidth: 1,
strokeOpacity: 1,
Expand Down Expand Up @@ -120,14 +127,18 @@ export class XAxis extends React.Component<XAxisProps> {
const w = width;
const h = xZoomHeight;

if (axisAt === "top") {
axisLocation = 0;
} else if (axisAt === "bottom") {
axisLocation = height;
} else if (axisAt === "middle") {
axisLocation = (height) / 2;
} else {
axisLocation = axisAt;
switch (axisAt) {
case "top":
axisLocation = 0;
break;
case "bottom":
axisLocation = height;
break;
case "middle":
axisLocation = (height) / 2;
break;
default:
axisLocation = axisAt;
}

const y = (orient === "top") ? -xZoomHeight : 0;
Expand Down
29 changes: 20 additions & 9 deletions packages/charts/src/axes/YAxis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,16 @@ interface YAxisProps {
readonly fontSize?: number;
readonly fontWeight?: number;
readonly getMouseDelta?: (startXY: number[], mouseXY: number[]) => number;
readonly gridLinesStroke?: string;
readonly gridLinesStrokeWidth?: number;
readonly gridLinesStrokeDasharray?: strokeDashTypes;
readonly innerTickSize?: number;
readonly onContextMenu?: any; // func
readonly onDoubleClick?: any; // func
readonly orient?: "left" | "right";
readonly outerTickSize?: number;
readonly showDomain?: boolean;
readonly showGridLines?: boolean;
readonly showTicks?: boolean;
readonly showTickLabel?: boolean;
readonly stroke?: string;
Expand Down Expand Up @@ -49,13 +53,16 @@ export class YAxis extends React.Component<YAxisProps> {
fontSize: 12,
fontWeight: 400,
getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
gridLinesStroke: "#000000",
gridLinesStrokeWidth: 1,
innerTickSize: 5,
outerTickSize: 0,
opacity: 1,
orient: "right",
showDomain: true,
showGridLines: false,
showTicks: true,
showTickLabel: true,
showDomain: true,
stroke: "#000000",
strokeWidth: 1,
strokeOpacity: 1,
Expand Down Expand Up @@ -119,14 +126,18 @@ export class YAxis extends React.Component<YAxisProps> {
const w = yZoomWidth;
const h = height;

if (axisAt === "left") {
axisLocation = 0;
} else if (axisAt === "right") {
axisLocation = width;
} else if (axisAt === "middle") {
axisLocation = (width) / 2;
} else {
axisLocation = axisAt;
switch (axisAt) {
case "left":
axisLocation = 0;
break;
case "right":
axisLocation = width;
break;
case "middle":
axisLocation = (width) / 2;
break;
default:
axisLocation = axisAt;
}

const x = (orient === "left") ? -yZoomWidth : 0;
Expand Down
Loading

0 comments on commit 2c0f7fe

Please sign in to comment.