Skip to content

Commit c341137

Browse files
tannerlinsleytannerlinsley
committed
feat: chart padding; fix: chart dimension calc, axis measurement
1 parent 57dae6f commit c341137

File tree

13 files changed

+18287
-8970
lines changed

13 files changed

+18287
-8970
lines changed

‎src/components/AxisLinear.tsx‎

Lines changed: 125 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
4747
return anyAxis.outerScale.domain()
4848
}
4949

50-
const resolvedHeight = isOuter ? height : gridDimensions.gridHeight
51-
const resolvedWidth = isOuter ? width : gridDimensions.gridWidth
50+
const resolvedHeight = isOuter ? height : gridDimensions.height
51+
const resolvedWidth = isOuter ? width : gridDimensions.width
5252

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

74+
const ticks = getTicks().map(tick => {
75+
const px = getTickPx(scale, tick)
76+
77+
const [from, to, gridTo] =
78+
axis.position === 'left'
79+
? [
80+
{ x: 0, y: px },
81+
{ x: -8, y: px },
82+
{ x: resolvedWidth, y: px },
83+
]
84+
: axis.position === 'right'
85+
? [
86+
{ x: resolvedWidth, y: px },
87+
{ x: resolvedWidth + 8, y: px },
88+
{ x: 0, y: px },
89+
]
90+
: axis.position === 'top'
91+
? [
92+
{ x: px, y: 0 },
93+
{ x: px, y: -8 },
94+
{ x: px, y: resolvedHeight },
95+
]
96+
: [
97+
{ x: px, y: resolvedHeight },
98+
{ x: px, y: resolvedHeight + 8 },
99+
{ x: px, y: 0 },
100+
]
101+
102+
return {
103+
value: tick,
104+
from,
105+
to,
106+
gridTo,
107+
}
108+
})
109+
74110
return (
75111
<g
76112
key={`Axis-Group ${isOuter ? 'outer' : 'inner'}`}
77113
className={`Axis-Group ${isOuter ? 'outer' : 'inner'}`}
78114
style={{
79115
transform: isOuter
80116
? undefined
81-
: translate(gridDimensions.gridX, gridDimensions.gridY),
117+
: translate(gridDimensions.left, gridDimensions.top),
82118
}}
83119
>
84120
<g
@@ -95,105 +131,92 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
95131
}),
96132
}}
97133
>
98-
<line
99-
className="domain"
100-
x1={lineFrom.x}
101-
y1={lineFrom.y}
102-
x2={lineTo.x}
103-
y2={lineTo.y}
104-
stroke={dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'}
105-
/>
106-
{getTicks().map((tick, i) => {
107-
const px = getTickPx(scale, tick)
108-
109-
const [tickFrom, tickTo, gridTo] =
110-
axis.position === 'left'
111-
? [
112-
{ x: 0, y: px },
113-
{ x: -8, y: px },
114-
{ x: resolvedWidth, y: px },
115-
]
116-
: axis.position === 'right'
117-
? [
118-
{ x: resolvedWidth, y: px },
119-
{ x: resolvedWidth + 8, y: px },
120-
{ x: 0, y: px },
121-
]
122-
: axis.position === 'top'
123-
? [
124-
{ x: px, y: 0 },
125-
{ x: px, y: -8 },
126-
{ x: px, y: resolvedHeight },
127-
]
128-
: [
129-
{ x: px, y: resolvedHeight },
130-
{ x: px, y: resolvedHeight + 8 },
131-
{ x: px, y: 0 },
132-
]
133-
134-
let { x: tickLabelX, y: tickLabelY } = tickTo
135-
136-
if (axis.position === 'top') {
137-
tickLabelY -= 5
138-
} else if (axis.position === 'bottom') {
139-
tickLabelY += 5
140-
} else if (axis.position === 'left') {
141-
tickLabelX -= 5
142-
} else if (axis.position === 'right') {
143-
tickLabelX += 5
144-
}
145-
146-
return (
147-
<g key={`vx-tick-${tick}-${i}`} className={'tick'}>
148-
{(axis.showGrid ?? true) && !isOuter ? (
149-
<line
150-
x1={tickFrom.x}
151-
y1={tickFrom.y}
152-
x2={gridTo.x}
153-
y2={gridTo.y}
154-
stroke={
155-
dark ? 'rgba(255,255,255, .05)' : 'rgba(0,0,0, .05)'
156-
}
157-
/>
158-
) : null}
159-
{!isOuter ? (
160-
<line
161-
x1={tickFrom.x}
162-
y1={tickFrom.y}
163-
x2={tickTo.x}
164-
y2={tickTo.y}
165-
stroke={dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'}
166-
/>
167-
) : null}
168-
<text
169-
className="tickLabel"
170-
style={{
171-
fontSize: 10,
172-
fill: dark ? 'rgba(255,255,255, .7)' : 'rgba(0,0,0, .7)',
173-
dominantBaseline: isRotated
174-
? 'central'
175-
: axis.position === 'bottom'
176-
? 'hanging'
177-
: axis.position === 'top'
178-
? 'alphabetic'
179-
: 'central',
180-
textAnchor: isRotated
181-
? 'end'
182-
: axis.position === 'right'
183-
? 'start'
184-
: axis.position === 'left'
185-
? 'end'
186-
: 'middle',
187-
}}
188-
transform={`translate(${tickLabelX}, ${tickLabelY}) rotate(${
189-
isRotated ? (axis.position === 'top' ? 60 : -60) : 0
190-
})`}
191-
>
192-
{(axis as AxisLinear<any>).formatters.scale(tick as number)}
193-
</text>
194-
</g>
195-
)
196-
})}
134+
<g className="domainAndTicks">
135+
<line
136+
className="domain"
137+
x1={lineFrom.x}
138+
y1={lineFrom.y}
139+
x2={lineTo.x}
140+
y2={lineTo.y}
141+
stroke={dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'}
142+
/>
143+
{ticks.map((tick, i) => {
144+
let { x: tickLabelX, y: tickLabelY } = tick.to
145+
146+
if (axis.position === 'top') {
147+
tickLabelY -= 5
148+
} else if (axis.position === 'bottom') {
149+
tickLabelY += 5
150+
} else if (axis.position === 'left') {
151+
tickLabelX -= 5
152+
} else if (axis.position === 'right') {
153+
tickLabelX += 5
154+
}
155+
156+
return (
157+
<g key={`vx-tick-${tick}-${i}`} className={'tick'}>
158+
{!isOuter ? (
159+
<line
160+
x1={tick.from.x}
161+
y1={tick.from.y}
162+
x2={tick.to.x}
163+
y2={tick.to.y}
164+
stroke={
165+
dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'
166+
}
167+
/>
168+
) : null}
169+
<text
170+
className="tickLabel"
171+
style={{
172+
fontSize: 10,
173+
fill: dark ? 'rgba(255,255,255, .7)' : 'rgba(0,0,0, .7)',
174+
dominantBaseline: isRotated
175+
? 'central'
176+
: axis.position === 'bottom'
177+
? 'hanging'
178+
: axis.position === 'top'
179+
? 'alphabetic'
180+
: 'central',
181+
textAnchor: isRotated
182+
? 'end'
183+
: axis.position === 'right'
184+
? 'start'
185+
: axis.position === 'left'
186+
? 'end'
187+
: 'middle',
188+
}}
189+
transform={`translate(${tickLabelX}, ${tickLabelY}) rotate(${
190+
isRotated ? (axis.position === 'top' ? 60 : -60) : 0
191+
})`}
192+
>
193+
{(axis as AxisLinear<any>).formatters.scale(
194+
tick.value as number
195+
)}
196+
</text>
197+
</g>
198+
)
199+
})}
200+
</g>
201+
<g className="grid">
202+
{ticks.map((tick, i) => {
203+
return (
204+
<g key={`vx-tick-${tick}-${i}`} className={'tick'}>
205+
{(axis.showGrid ?? true) && !isOuter ? (
206+
<line
207+
x1={tick.from.x}
208+
y1={tick.from.y}
209+
x2={tick.gridTo.x}
210+
y2={tick.gridTo.y}
211+
stroke={
212+
dark ? 'rgba(255,255,255, .05)' : 'rgba(0,0,0, .05)'
213+
}
214+
/>
215+
) : null}
216+
</g>
217+
)
218+
})}
219+
</g>
197220
</g>
198221
</g>
199222
)

0 commit comments

Comments
 (0)