Skip to content

Commit

Permalink
feat(website): migrate the axes guide to TypeScript
Browse files Browse the repository at this point in the history
  • Loading branch information
@plouc
plouc committed Dec 26, 2021
1 parent 12d0f39 commit 1f4f480
Show file tree
Hide file tree
Showing 8 changed files with 69 additions and 81 deletions.
14 changes: 6 additions & 8 deletions .../src/components/guides/axes/AxesLegend.js → ...src/components/guides/axes/AxesLegend.tsx
View file
@@ -1,11 +1,15 @@
import React from 'react'
import { ThemeProvider, MotionConfigProvider } from '@nivo/core'
import {
ThemeProvider,
// @ts-ignore
MotionConfigProvider,
} from '@nivo/core'
import { Axis } from '@nivo/axes'
import { linearXScale, linearYScale } from './scales'
import { FullWidthBanner, DescriptionBlock } from '../../styled'
import { useAxisTheme } from './theme'

const axisPositions = ['start', 'middle', 'end']
const axisPositions = ['start', 'middle', 'end'] as const

const AxesLegend = () => {
const theme = useAxisTheme()
Expand Down Expand Up @@ -42,9 +46,6 @@ const AxesLegend = () => {
axis="x"
scale={linearXScale}
length={280}
animate={false}
motionStiffness={0}
motionDamping={0}
legend={position}
legendPosition={position}
legendOffset={-32}
Expand All @@ -60,9 +61,6 @@ const AxesLegend = () => {
axis="y"
scale={linearYScale}
length={160}
animate={false}
motionStiffness={0}
motionDamping={0}
legend={position}
legendPosition={position}
legendOffset={-32}
Expand Down
9 changes: 5 additions & 4 deletions ...rc/components/guides/axes/AxesPosition.js → ...c/components/guides/axes/AxesPosition.tsx
View file
@@ -1,5 +1,9 @@
import React from 'react'
import { ThemeProvider, MotionConfigProvider } from '@nivo/core'
import {
ThemeProvider,
// @ts-ignore
MotionConfigProvider,
} from '@nivo/core'
import { Axes } from '@nivo/axes'
import { linearXScale, linearYScale } from './scales'
import { FullWidthBanner, DescriptionBlock } from '../../styled'
Expand Down Expand Up @@ -28,9 +32,6 @@ const AxesPosition = () => {
yScale={linearYScale}
width={280}
height={160}
animate={false}
motionStiffness={0}
motionDamping={0}
top={{
legend: 'axisTop',
legendPosition: 'middle',
Expand Down
26 changes: 9 additions & 17 deletions ...e/src/components/guides/axes/AxesTicks.js → .../src/components/guides/axes/AxesTicks.tsx
View file
@@ -1,5 +1,9 @@
import React from 'react'
import { ThemeProvider, MotionConfigProvider } from '@nivo/core'
import {
ThemeProvider,
// @ts-ignore
MotionConfigProvider,
} from '@nivo/core'
import { Axis } from '@nivo/axes'
import { linearXScale, pointXScale, timeXScale, timeXScaleHours } from './scales'
import { FullWidthBanner, DescriptionBlock } from '../../styled'
Expand Down Expand Up @@ -63,11 +67,9 @@ const AxesTicks = () => {
<g transform={`translate(50,50)`}>
<Axis
axis="x"
scale={pointXScale}
scale={pointXScale as any}
tickValues={['A', 'C', 'E', 'G', 'I']}
length={280}
theme={theme}
animate={false}
legend="point scale ['A', 'C', 'E', 'G', 'I']"
legendPosition="start"
legendOffset={-38}
Expand All @@ -80,8 +82,6 @@ const AxesTicks = () => {
scale={linearXScale}
tickValues={[0, 20, 40, 60, 80]}
length={280}
theme={theme}
animate={false}
legend="linear scale [0, 20, 40, 60, 80]"
legendPosition="start"
legendOffset={-38}
Expand All @@ -91,16 +91,14 @@ const AxesTicks = () => {
<g transform={`translate(50,190)`}>
<Axis
axis="x"
scale={timeXScale}
scale={timeXScale as any}
tickValues={[
new Date(2019, 0, 1, 0, 0, 0, 0),
new Date(2019, 6, 1, 0, 0, 0, 0),
new Date(2020, 0, 1, 0, 0, 0, 0),
]}
length={280}
theme={theme}
format="%Y/%m"
animate={false}
legend="time scale with three dates"
legendPosition="start"
legendOffset={-38}
Expand All @@ -112,12 +110,10 @@ const AxesTicks = () => {
<g transform={`translate(50,50)`}>
<Axis
axis="x"
scale={timeXScaleHours}
scale={timeXScaleHours as any}
tickValues="every 15 minutes"
format="%H:%M"
length={280}
theme={theme}
animate={false}
legend="time scale, every 15 minutes"
legendPosition="start"
legendOffset={-38}
Expand All @@ -130,8 +126,6 @@ const AxesTicks = () => {
scale={linearXScale}
tickValues={5}
length={280}
theme={theme}
animate={false}
legend="linear scale, tickValues: 5"
legendPosition="start"
legendOffset={-38}
Expand All @@ -141,12 +135,10 @@ const AxesTicks = () => {
<g transform={`translate(50,190)`}>
<Axis
axis="x"
scale={timeXScale}
scale={timeXScale as any}
tickValues={5}
length={280}
theme={theme}
format="%Y/%m"
animate={false}
legend="time scale, tickValues: 5"
legendPosition="start"
legendOffset={-38}
Expand Down
7 changes: 3 additions & 4 deletions website/src/components/guides/axes/scales.js → ...ite/src/components/guides/axes/scales.tsx
View file
@@ -1,10 +1,9 @@
import { scaleLinear, scalePoint, scaleTime } from 'd3-scale'
import { castLinearScale } from '@nivo/scales'

export const linearXScale = scaleLinear().range([0, 280]).domain([0, 80])
linearXScale.type = 'linear'
export const linearXScale = castLinearScale(scaleLinear().range([0, 280]).domain([0, 80]))

export const linearYScale = scaleLinear().range([160, 0]).domain([0, 35])
linearYScale.type = 'linear'
export const linearYScale = castLinearScale(scaleLinear().range([160, 0]).domain([0, 35]))

export const pointXScale = scalePoint()
.range([0, 280])
Expand Down
13 changes: 7 additions & 6 deletions website/src/components/guides/axes/theme.js → website/src/components/guides/axes/theme.tsx
View file
@@ -1,24 +1,25 @@
import { useMemo } from 'react'
import { Theme } from '@nivo/core'
import { useTheme } from '../../../theming/context'

export const useAxisTheme = () => {
export const useAxisTheme = (): Theme => {
const theme = useTheme()
const nivoTheme = useMemo(() => {
const nivoTheme: Theme = useMemo(() => {
return {
...theme.nivo,
axis: {
...theme.nivo.axis,
domain: {
...theme.nivo.axis.domain,
...theme.nivo.axis!.domain,
line: {
...theme.nivo.axis.domain.line,
...theme.nivo.axis!.domain!.line,
strokeWidth: 1,
},
},
legend: {
...theme.nivo.axis.legend,
...theme.nivo.axis!.legend,
text: {
...theme.nivo.axis.legend.text,
...theme.nivo.axis!.legend!.text,
fill: theme.colors.accent,
},
},
Expand Down
66 changes: 33 additions & 33 deletions website/src/pages/guides/axes.tsx
View file
@@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React from 'react'
import { Link } from 'gatsby'
import Layout from '../../components/Layout'
import { Seo } from '../../components/Seo'
Expand All @@ -8,36 +8,36 @@ import AxesTicks from '../../components/guides/axes/AxesTicks'
import AxesLegend from '../../components/guides/axes/AxesLegend'
import { DescriptionBlock } from '../../components/styled'

export default class Axes extends Component {
render() {
return (
<Layout>
<Seo title="Axes Guide" />
<PageContent>
<div className="guide__header">
<h1>Axes</h1>
</div>
</PageContent>
<DescriptionBlock>
<h2>Using axes in nivo components</h2>
<p>
Axes are built on top of{' '}
<a
href="https://github.com/d3/d3-scale"
target="_blank"
rel="noopener noreferrer"
>
d3 scales
</a>
. A lot of nivo components make use of it (<Link to="/bar">Bar</Link>,{' '}
<Link to="/line">Line</Link>, <Link to="/scatterplot">ScatterPlot</Link>
…).
</p>
</DescriptionBlock>
<AxesPosition />
<AxesTicks />
<AxesLegend />
</Layout>
)
}
const AxesGuide = () => {
return (
<Layout>
<Seo title="Axes Guide" />
<PageContent>
<div className="guide__header">
<h1>Axes</h1>
</div>
</PageContent>
<DescriptionBlock>
<h2>Using axes in nivo components</h2>
<p>
Axes are built on top of{' '}
<a
href="https://github.com/d3/d3-scale"
target="_blank"
rel="noopener noreferrer"
>
d3 scales
</a>
. A lot of nivo components make use of it (<Link to="/bar/">Bar</Link>,{' '}
<Link to="/line/">Line</Link>, <Link to="/scatterplot/">ScatterPlot</Link>
…).
</p>
</DescriptionBlock>
<AxesPosition />
<AxesTicks />
<AxesLegend />
</Layout>
)
}

export default AxesGuide
9 changes: 0 additions & 9 deletions website/src/theming/context.js
View file

This file was deleted.

6 changes: 6 additions & 0 deletions website/src/theming/context.tsx
View file
@@ -0,0 +1,6 @@
import { createContext, useContext } from 'react'
import { DefaultTheme } from 'styled-components'

export const themeContext = createContext<DefaultTheme>({} as any)

export const useTheme = (): DefaultTheme => useContext(themeContext)

0 comments on commit 1f4f480

Please sign in to comment.