Skip to content

Commit

Permalink
feat: chart padding; fix: chart dimension calc, axis measurement
Browse files Browse the repository at this point in the history
  • Loading branch information
@tannerlinsley
tannerlinsley committed Jul 19, 2021
1 parent 57dae6f commit c341137
Show file tree
Hide file tree
Showing 13 changed files with 18,287 additions and 8,970 deletions.
227 changes: 125 additions & 102 deletions src/components/AxisLinear.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
return anyAxis.outerScale.domain()
}

const resolvedHeight = isOuter ? height : gridDimensions.gridHeight
const resolvedWidth = isOuter ? width : gridDimensions.gridWidth
const resolvedHeight = isOuter ? height : gridDimensions.height
const resolvedWidth = isOuter ? width : gridDimensions.width

const [lineFrom, lineTo] =
axis.position === 'left'
Expand All @@ -71,14 +71,50 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
{ x: rangeEnd, y: resolvedHeight },
]

const ticks = getTicks().map(tick => {
const px = getTickPx(scale, tick)

const [from, to, gridTo] =
axis.position === 'left'
? [
{ x: 0, y: px },
{ x: -8, y: px },
{ x: resolvedWidth, y: px },
]
: axis.position === 'right'
? [
{ x: resolvedWidth, y: px },
{ x: resolvedWidth + 8, y: px },
{ x: 0, y: px },
]
: axis.position === 'top'
? [
{ x: px, y: 0 },
{ x: px, y: -8 },
{ x: px, y: resolvedHeight },
]
: [
{ x: px, y: resolvedHeight },
{ x: px, y: resolvedHeight + 8 },
{ x: px, y: 0 },
]

return {
value: tick,
from,
to,
gridTo,
}
})

return (
<g
key={`Axis-Group ${isOuter ? 'outer' : 'inner'}`}
className={`Axis-Group ${isOuter ? 'outer' : 'inner'}`}
style={{
transform: isOuter
? undefined
: translate(gridDimensions.gridX, gridDimensions.gridY),
: translate(gridDimensions.left, gridDimensions.top),
}}
>
<g
Expand All @@ -95,105 +131,92 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
}),
}}
>
<line
className="domain"
x1={lineFrom.x}
y1={lineFrom.y}
x2={lineTo.x}
y2={lineTo.y}
stroke={dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'}
/>
{getTicks().map((tick, i) => {
const px = getTickPx(scale, tick)

const [tickFrom, tickTo, gridTo] =
axis.position === 'left'
? [
{ x: 0, y: px },
{ x: -8, y: px },
{ x: resolvedWidth, y: px },
]
: axis.position === 'right'
? [
{ x: resolvedWidth, y: px },
{ x: resolvedWidth + 8, y: px },
{ x: 0, y: px },
]
: axis.position === 'top'
? [
{ x: px, y: 0 },
{ x: px, y: -8 },
{ x: px, y: resolvedHeight },
]
: [
{ x: px, y: resolvedHeight },
{ x: px, y: resolvedHeight + 8 },
{ x: px, y: 0 },
]

let { x: tickLabelX, y: tickLabelY } = tickTo

if (axis.position === 'top') {
tickLabelY -= 5
} else if (axis.position === 'bottom') {
tickLabelY += 5
} else if (axis.position === 'left') {
tickLabelX -= 5
} else if (axis.position === 'right') {
tickLabelX += 5
}

return (
<g key={`vx-tick-${tick}-${i}`} className={'tick'}>
{(axis.showGrid ?? true) && !isOuter ? (
<line
x1={tickFrom.x}
y1={tickFrom.y}
x2={gridTo.x}
y2={gridTo.y}
stroke={
dark ? 'rgba(255,255,255, .05)' : 'rgba(0,0,0, .05)'
}
/>
) : null}
{!isOuter ? (
<line
x1={tickFrom.x}
y1={tickFrom.y}
x2={tickTo.x}
y2={tickTo.y}
stroke={dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'}
/>
) : null}
<text
className="tickLabel"
style={{
fontSize: 10,
fill: dark ? 'rgba(255,255,255, .7)' : 'rgba(0,0,0, .7)',
dominantBaseline: isRotated
? 'central'
: axis.position === 'bottom'
? 'hanging'
: axis.position === 'top'
? 'alphabetic'
: 'central',
textAnchor: isRotated
? 'end'
: axis.position === 'right'
? 'start'
: axis.position === 'left'
? 'end'
: 'middle',
}}
transform={`translate(${tickLabelX}, ${tickLabelY}) rotate(${
isRotated ? (axis.position === 'top' ? 60 : -60) : 0
})`}
>
{(axis as AxisLinear<any>).formatters.scale(tick as number)}
</text>
</g>
)
})}
<g className="domainAndTicks">
<line
className="domain"
x1={lineFrom.x}
y1={lineFrom.y}
x2={lineTo.x}
y2={lineTo.y}
stroke={dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'}
/>
{ticks.map((tick, i) => {
let { x: tickLabelX, y: tickLabelY } = tick.to

if (axis.position === 'top') {
tickLabelY -= 5
} else if (axis.position === 'bottom') {
tickLabelY += 5
} else if (axis.position === 'left') {
tickLabelX -= 5
} else if (axis.position === 'right') {
tickLabelX += 5
}

return (
<g key={`vx-tick-${tick}-${i}`} className={'tick'}>
{!isOuter ? (
<line
x1={tick.from.x}
y1={tick.from.y}
x2={tick.to.x}
y2={tick.to.y}
stroke={
dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'
}
/>
) : null}
<text
className="tickLabel"
style={{
fontSize: 10,
fill: dark ? 'rgba(255,255,255, .7)' : 'rgba(0,0,0, .7)',
dominantBaseline: isRotated
? 'central'
: axis.position === 'bottom'
? 'hanging'
: axis.position === 'top'
? 'alphabetic'
: 'central',
textAnchor: isRotated
? 'end'
: axis.position === 'right'
? 'start'
: axis.position === 'left'
? 'end'
: 'middle',
}}
transform={`translate(${tickLabelX}, ${tickLabelY}) rotate(${
isRotated ? (axis.position === 'top' ? 60 : -60) : 0
})`}
>
{(axis as AxisLinear<any>).formatters.scale(
tick.value as number
)}
</text>
</g>
)
})}
</g>
<g className="grid">
{ticks.map((tick, i) => {
return (
<g key={`vx-tick-${tick}-${i}`} className={'tick'}>
{(axis.showGrid ?? true) && !isOuter ? (
<line
x1={tick.from.x}
y1={tick.from.y}
x2={tick.gridTo.x}
y2={tick.gridTo.y}
stroke={
dark ? 'rgba(255,255,255, .05)' : 'rgba(0,0,0, .05)'
}
/>
) : null}
</g>
)
})}
</g>
</g>
</g>
)
Expand Down
Loading

1 comment on commit c341137

@vercel
Copy link

@vercel vercel bot commented on c341137 Jul 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.