Skip to content

Commit 73f9803

Browse files
wyzewyze
committed
feat(axes): init migration to typescript
Close #1217
1 parent 46d2ae0 commit 73f9803

23 files changed

+503
-473
lines changed

‎packages/axes/index.d.ts‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎packages/axes/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
],
2020
"main": "./dist/nivo-axes.cjs.js",
2121
"module": "./dist/nivo-axes.es.js",
22+
"typings": "./dist/types/index.d.ts",
2223
"files": [
2324
"README.md",
2425
"LICENSE.md",
25-
"index.d.ts",
2626
"dist/"
2727
],
2828
"dependencies": {
@@ -33,7 +33,10 @@
3333
"react-spring": "9.1.2"
3434
},
3535
"devDependencies": {
36-
"@nivo/core": "0.68.0"
36+
"@nivo/core": "0.68.0",
37+
"@types/d3-format": "^1.4.1",
38+
"@types/d3-time": "^1.1.1",
39+
"@types/d3-time-format": "^2.3.1"
3740
},
3841
"peerDependencies": {
3942
"@nivo/core": "0.68.0",

‎packages/axes/src/canvas.js‎ renamed to ‎packages/axes/src/canvas.ts‎

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
/*
2-
* This file is part of the nivo project.
3-
*
4-
* Copyright 2016-present, Raphaël Benitte.
5-
*
6-
* For the full copyright and license information, please view the LICENSE
7-
* file that was distributed with this source code.
8-
*/
9-
import { degreesToRadians } from './utils'
1+
import { degreesToRadians, CompleteTheme } from '@nivo/core'
102
import { computeCartesianTicks, getFormatter, computeGridLines } from './compute'
3+
import { TicksSpec, AllScales, AxisLegendPosition, CanvasAxisProp, ValueFormatter } from './types'
114

12-
export const renderAxisToCanvas = (
13-
ctx,
5+
export const renderAxisToCanvas = <Value>(
6+
ctx: CanvasRenderingContext2D,
147
{
158
axis,
169
scale,
@@ -30,6 +23,22 @@ export const renderAxisToCanvas = (
3023
legendOffset = 0,
3124

3225
theme,
26+
}: {
27+
axis: 'x' | 'y'
28+
scale: AllScales
29+
x?: number
30+
y?: number
31+
length: number
32+
ticksPosition: 'before' | 'after'
33+
tickValues?: TicksSpec<Value>
34+
tickSize?: number
35+
tickPadding?: number
36+
tickRotation?: number
37+
format?: ValueFormatter
38+
legend?: string
39+
legendPosition?: AxisLegendPosition
40+
legendOffset?: number
41+
theme: CompleteTheme
3342
}
3443
) => {
3544
const { ticks, textAlign, textBaseline } = computeCartesianTicks({
@@ -50,33 +59,45 @@ export const renderAxisToCanvas = (
5059
ctx.textBaseline = textBaseline
5160
ctx.font = `${theme.axis.ticks.text.fontSize}px ${theme.axis.ticks.text.fontFamily}`
5261

53-
if (theme.axis.domain.line.strokeWidth > 0) {
54-
ctx.lineWidth = theme.axis.domain.line.strokeWidth
62+
if ((theme.axis.domain.line.strokeWidth ?? 0) > 0) {
63+
ctx.lineWidth = Number(theme.axis.domain.line.strokeWidth)
5564
ctx.lineCap = 'square'
56-
ctx.strokeStyle = theme.axis.domain.line.stroke
65+
66+
if (theme.axis.domain.line.stroke) {
67+
ctx.strokeStyle = theme.axis.domain.line.stroke
68+
}
69+
5770
ctx.beginPath()
5871
ctx.moveTo(0, 0)
5972
ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length)
6073
ctx.stroke()
6174
}
6275

6376
ticks.forEach(tick => {
64-
if (theme.axis.ticks.line.strokeWidth > 0) {
65-
ctx.lineWidth = theme.axis.ticks.line.strokeWidth
77+
if ((theme.axis.ticks.line.strokeWidth ?? 0) > 0) {
78+
ctx.lineWidth = Number(theme.axis.ticks.line.strokeWidth)
6679
ctx.lineCap = 'square'
67-
ctx.strokeStyle = theme.axis.ticks.line.stroke
80+
81+
if (theme.axis.ticks.line.stroke) {
82+
ctx.strokeStyle = theme.axis.ticks.line.stroke
83+
}
84+
6885
ctx.beginPath()
6986
ctx.moveTo(tick.x, tick.y)
7087
ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY)
7188
ctx.stroke()
7289
}
7390

74-
const value = format !== undefined ? format(tick.value) : tick.value
91+
const value = format !== undefined ? format(String(tick.value)) : (tick.value as string)
7592

7693
ctx.save()
7794
ctx.translate(tick.x + tick.textX, tick.y + tick.textY)
7895
ctx.rotate(degreesToRadians(tickRotation))
79-
ctx.fillStyle = theme.axis.ticks.text.fill
96+
97+
if (theme.axis.ticks.text.fill) {
98+
ctx.fillStyle = theme.axis.ticks.text.fill
99+
}
100+
80101
ctx.fillText(value, 0, 0)
81102
ctx.restore()
82103
})
@@ -85,7 +106,7 @@ export const renderAxisToCanvas = (
85106
let legendX = 0
86107
let legendY = 0
87108
let legendRotation = 0
88-
let textAlign
109+
let textAlign: CanvasTextAlign = 'center'
89110

90111
if (axis === 'y') {
91112
legendRotation = -90
@@ -117,7 +138,11 @@ export const renderAxisToCanvas = (
117138
ctx.font = `${
118139
theme.axis.legend.text.fontWeight ? `${theme.axis.legend.text.fontWeight} ` : ''
119140
}${theme.axis.legend.text.fontSize}px ${theme.axis.legend.text.fontFamily}`
120-
ctx.fillStyle = theme.axis.legend.text.fill
141+
142+
if (theme.axis.legend.text.fill) {
143+
ctx.fillStyle = theme.axis.legend.text.fill
144+
}
145+
121146
ctx.textAlign = textAlign
122147
ctx.textBaseline = 'middle'
123148
ctx.fillText(legend, 0, 0)
@@ -126,10 +151,10 @@ export const renderAxisToCanvas = (
126151
ctx.restore()
127152
}
128153

129-
const positions = ['top', 'right', 'bottom', 'left']
154+
const positions = ['top', 'right', 'bottom', 'left'] as const
130155

131-
export const renderAxesToCanvas = (
132-
ctx,
156+
export const renderAxesToCanvas = <X, Y>(
157+
ctx: CanvasRenderingContext2D,
133158
{
134159
xScale,
135160
yScale,
@@ -142,6 +167,16 @@ export const renderAxesToCanvas = (
142167
left,
143168

144169
theme,
170+
}: {
171+
xScale: AllScales
172+
yScale: AllScales
173+
width: number
174+
height: number
175+
top?: CanvasAxisProp<X>
176+
right?: CanvasAxisProp<Y>
177+
bottom?: CanvasAxisProp<X>
178+
left?: CanvasAxisProp<Y>
179+
theme: CompleteTheme
145180
}
146181
) => {
147182
const axes = { top, right, bottom, left }
@@ -156,7 +191,7 @@ export const renderAxesToCanvas = (
156191
const scale = isXAxis ? xScale : yScale
157192
const format = getFormatter(axis.format, scale)
158193

159-
renderAxisToCanvas(ctx, {
194+
renderAxisToCanvas<unknown>(ctx, {
160195
...axis,
161196
axis: isXAxis ? 'x' : 'y',
162197
x: position === 'right' ? width : 0,
@@ -170,7 +205,22 @@ export const renderAxesToCanvas = (
170205
})
171206
}
172207

173-
export const renderGridLinesToCanvas = (ctx, { width, height, scale, axis, values }) => {
208+
export const renderGridLinesToCanvas = <Value>(
209+
ctx: CanvasRenderingContext2D,
210+
{
211+
width,
212+
height,
213+
scale,
214+
axis,
215+
values,
216+
}: {
217+
width: number
218+
height: number
219+
scale: AllScales
220+
axis: 'x' | 'y'
221+
values?: TicksSpec<Value>
222+
}
223+
) => {
174224
const lines = computeGridLines({ width, height, scale, axis, values })
175225

176226
lines.forEach(line => {

‎packages/axes/src/components/Axes.js‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎packages/axes/src/components/Axes.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react'
2+
import { Axis } from './Axis'
3+
import { AllScales, AxisProp } from '../types'
4+
5+
const positions = ['top', 'right', 'bottom', 'left'] as const
6+
7+
export const Axes = <X extends number | string | Date, Y extends number | string | Date>({
8+
xScale,
9+
yScale,
10+
width,
11+
height,
12+
top,
13+
right,
14+
bottom,
15+
left,
16+
}: {
17+
xScale: AllScales
18+
yScale: AllScales
19+
width: number
20+
height: number
21+
top?: AxisProp<X>
22+
right?: AxisProp<Y>
23+
bottom?: AxisProp<X>
24+
left?: AxisProp<Y>
25+
}) => {
26+
const axes = { top, right, bottom, left }
27+
28+
return (
29+
<>
30+
{positions.map(position => {
31+
const axis = axes[position]
32+
33+
if (!axis) return null
34+
35+
const isXAxis = position === 'top' || position === 'bottom'
36+
const ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'
37+
38+
return (
39+
<Axis
40+
key={position}
41+
{...axis}
42+
axis={isXAxis ? 'x' : 'y'}
43+
x={position === 'right' ? width : 0}
44+
y={position === 'bottom' ? height : 0}
45+
scale={isXAxis ? xScale : yScale}
46+
length={isXAxis ? width : height}
47+
ticksPosition={ticksPosition}
48+
/>
49+
)
50+
})}
51+
</>
52+
)
53+
}

0 commit comments

Comments
 (0)