Skip to content

Commit

Permalink
docs: a bunch more work for docs/docs site/uprades based on creating …
Browse files Browse the repository at this point in the history
…docs
  • Loading branch information
madams1 committed Dec 24, 2024
1 parent 3e05509 commit d6a179c
Show file tree
Hide file tree
Showing 135 changed files with 3,143 additions and 504 deletions.
6 changes: 5 additions & 1 deletion docs/components/Spacer/index.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
export const Spacer = () => <div style={{ height: '2rem' }} />
interface Props {
height?: string
}

export const Spacer = ({ height = '2rem' }: Props) => <div style={{ height }} />
4 changes: 2 additions & 2 deletions docs/components/demo/CodeEditor/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ body {
color: ${isDark ? '#fafafa' : '#111'};
background: ${isDark ? '#131313' : '#fff'};
transition: all 200ms linear;
margin: 0 0 0 2px;
margin: 2px 0 0 2px;
}`

interface Props {
Expand Down Expand Up @@ -86,7 +86,7 @@ export const CodeEditor = ({
additionalDeps = {},
additionalFiles = {},
src,
height = 455,
height = 456,
showTabs = false,
previewTitle = 'Preview',
}: Props) => {
Expand Down
12 changes: 6 additions & 6 deletions docs/components/demo/geoms/geom-histogram/additionalFiles.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import geom from '#/input/geom-histogram/build?raw'
import dts from '#/input/geom-histogram/build/dts'
import geomCol from '#/input/geom-col/build?raw'
import histogram from '#/input/geom-histogram/build?raw'
import histogramDts from '#/input/geom-histogram/build/dts'
import col from '#/input/geom-col/build?raw'

const [PKG_1, PKG_2] = ['geom-histogram', 'geom-col']

Expand All @@ -15,7 +15,7 @@ export const additionalFiles = {
},
[`/node_modules/@graphique/${PKG_2}/index.js`]: {
hidden: true,
code: geomCol,
code: col,
},
[`/node_modules/@graphique/${PKG_1}/package.json`]: {
hidden: true,
Expand All @@ -27,10 +27,10 @@ export const additionalFiles = {
},
[`/node_modules/@graphique/${PKG_1}/index.js`]: {
hidden: true,
code: geom,
code: histogram,
},
[`/node_modules/@graphique/${PKG_1}/index.d.ts`]: {
hidden: true,
code: dts,
code: histogramDts,
},
}
17 changes: 11 additions & 6 deletions docs/components/demo/geoms/geom-hline/additionalFiles.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import geom from '#/input/geom-hline/build?raw'
import dts from '#/input/geom-hline/build/dts'
import geomPoint from '#/input/geom-point/build?raw'
import hline from '#/input/geom-hline/build?raw'
import hlineDts from '#/input/geom-hline/build/dts'
import point from '#/input/geom-point/build?raw'
import pointDts from '#/input/geom-point/build/dts'

const [PKG_1, PKG_2] = ['geom-hline', 'geom-point']

Expand All @@ -15,7 +16,11 @@ export const additionalFiles = {
},
[`/node_modules/@graphique/${PKG_2}/index.js`]: {
hidden: true,
code: geomPoint,
code: point,
},
[`/node_modules/@graphique/${PKG_2}/index.d.ts`]: {
hidden: true,
code: pointDts,
},
[`/node_modules/@graphique/${PKG_1}/package.json`]: {
hidden: true,
Expand All @@ -27,10 +32,10 @@ export const additionalFiles = {
},
[`/node_modules/@graphique/${PKG_1}/index.js`]: {
hidden: true,
code: geom,
code: hline,
},
[`/node_modules/@graphique/${PKG_1}/index.d.ts`]: {
hidden: true,
code: dts,
code: hlineDts,
},
}
17 changes: 11 additions & 6 deletions docs/components/demo/geoms/geom-label/additionalFiles.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import geom from '#/input/geom-label/build?raw'
import dts from '#/input/geom-label/build/dts'
import geomPoint from '#/input/geom-point/build?raw'
import label from '#/input/geom-label/build?raw'
import labelDts from '#/input/geom-label/build/dts'
import point from '#/input/geom-point/build?raw'
import pointDts from '#/input/geom-point/build/dts'

const [PKG_1, PKG_2] = ['geom-label', 'geom-point']

Expand All @@ -15,7 +16,11 @@ export const additionalFiles = {
},
[`/node_modules/@graphique/${PKG_2}/index.js`]: {
hidden: true,
code: geomPoint,
code: point,
},
[`/node_modules/@graphique/${PKG_2}/index.d.ts`]: {
hidden: true,
code: pointDts,
},
[`/node_modules/@graphique/${PKG_1}/package.json`]: {
hidden: true,
Expand All @@ -27,10 +32,10 @@ export const additionalFiles = {
},
[`/node_modules/@graphique/${PKG_1}/index.js`]: {
hidden: true,
code: geom,
code: label,
},
[`/node_modules/@graphique/${PKG_1}/index.d.ts`]: {
hidden: true,
code: dts,
code: labelDts,
},
}
7 changes: 1 addition & 6 deletions docs/components/demo/geoms/geom-line/Basic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,7 @@ const App = () => (
x: (d) => new Date(d.date),
y: (d) => d.marketCap,
}}
margin={{
top: 20,
right: 5,
bottom: 20,
left: 50,
}}
margin={{ top: 20, right: 5, bottom: 20, left: 50 }}
height={350}
isContainerWidth
>
Expand Down
7 changes: 1 addition & 6 deletions docs/components/demo/geoms/geom-line/Legend.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,7 @@ const App = () => (
y: (d) => d.marketCap,
stroke: (d) => d.symbol,
}}
margin={{
top: 20,
right: 5,
bottom: 20,
left: 50,
}}
margin={{ top: 20, right: 5, bottom: 20, left: 50 }}
height={350}
isContainerWidth
>
Expand Down
7 changes: 1 addition & 6 deletions docs/components/demo/geoms/geom-line/Missing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,7 @@ const App = () => (
x: createMissingX,
y: createMissingY,
}}
margin={{
top: 20,
right: 5,
bottom: 20,
left: 50,
}}
margin={{ top: 20, right: 5, bottom: 20, left: 50 }}
height={350}
isContainerWidth
>
Expand Down
17 changes: 11 additions & 6 deletions docs/components/demo/geoms/geom-vline/additionalFiles.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import geom from '#/input/geom-vline/build?raw'
import dts from '#/input/geom-vline/build/dts'
import geomPoint from '#/input/geom-point/build?raw'
import vline from '#/input/geom-vline/build?raw'
import vlineDts from '#/input/geom-vline/build/dts'
import point from '#/input/geom-point/build?raw'
import pointDts from '#/input/geom-point/build/dts'

const [PKG_1, PKG_2] = ['geom-vline', 'geom-point']

Expand All @@ -15,7 +16,11 @@ export const additionalFiles = {
},
[`/node_modules/@graphique/${PKG_2}/index.js`]: {
hidden: true,
code: geomPoint,
code: point,
},
[`/node_modules/@graphique/${PKG_2}/index.d.ts`]: {
hidden: true,
code: pointDts,
},
[`/node_modules/@graphique/${PKG_1}/package.json`]: {
hidden: true,
Expand All @@ -27,10 +32,10 @@ export const additionalFiles = {
},
[`/node_modules/@graphique/${PKG_1}/index.js`]: {
hidden: true,
code: geom,
code: vline,
},
[`/node_modules/@graphique/${PKG_1}/index.d.ts`]: {
hidden: true,
code: dts,
code: vlineDts,
},
}
70 changes: 70 additions & 0 deletions docs/components/demo/graphique/labels/Basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import dependencies from '#/input/geom-point/build/dependencies'
import { CodeEditor } from '../../CodeEditor'
import { additionalFiles } from './additionalFiles'

const files = {
'penguinsStyles.module.css': {
code: `.header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 0.8rem;
padding: 0.5rem 0.1rem 1rem 0.1rem;
}
.title {
font-weight: bold;
}
.legend-title {
font-weight: 600;
font-size: 0.8rem;
}`,
},
}

const src = `import {
GG, Labels, BrushAction, LegendOrientation,
} from '@graphique/graphique';
import { penguins } from '@graphique/datasets';
import { GeomPoint, Legend } from '@graphique/geom-point';
import styles from './penguinsStyles.module.css'
const App = () => (
<GG
data={penguins}
aes={{
x: (d) => d.bodyMass,
y: (d) => d.flipperLength,
fill: (d) => d.species,
}}
margin={{ left: 45 }}
isContainerWidth
>
<GeomPoint brushAction={BrushAction.ZOOM} />
<Labels
header={
<div className={styles.header}>
<span className={styles.title}>🐧 Palmer Penguins</span>
<Legend
orientation={LegendOrientation.H}
title={<span className={styles["legend-title"]}>Species</span>}
/>
</div>
}
x="&rarr; Body mass (g)"
y="&uarr; Flipper length (mm)"
/>
</GG>
);`

export const Basic = () => (
<CodeEditor
src={src}
height={575}
additionalDeps={dependencies}
additionalFiles={{ ...additionalFiles, ...files }}
showTabs
/>
)
23 changes: 23 additions & 0 deletions docs/components/demo/graphique/labels/additionalFiles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import geom from '#/input/geom-point/build?raw'
import dts from '#/input/geom-point/build/dts'

const PKG = 'geom-point'

export const additionalFiles = {
[`/node_modules/@graphique/${PKG}/package.json`]: {
hidden: true,
code: JSON.stringify({
name: `@graphique/${PKG}`,
main: './index.js',
types: './index.d.ts',
}),
},
[`/node_modules/@graphique/${PKG}/index.js`]: {
hidden: true,
code: geom,
},
[`/node_modules/@graphique/${PKG}/index.d.ts`]: {
hidden: true,
code: dts,
},
}
1 change: 1 addition & 0 deletions docs/components/demo/graphique/labels/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Basic'
54 changes: 54 additions & 0 deletions docs/components/demo/graphique/theme/Basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import dependencies from '#/input/geom-point/build/dependencies'
import { CodeEditor } from '../../CodeEditor'
import { additionalFiles } from './additionalFiles'

const src = `import {
GG, Labels, BrushAction, LegendOrientation, Theme,
} from '@graphique/graphique';
import { penguins } from '@graphique/datasets';
import { GeomPoint, Legend } from '@graphique/geom-point';
const App = () => (
<GG
data={penguins}
aes={{
x: (d) => d.bodyMass,
y: (d) => d.flipperLength,
fill: (d) => d.species,
}}
margin={{ left: 45 }}
isContainerWidth
>
<GeomPoint brushAction={BrushAction.ZOOM} />
<Theme
animationDuration={300}
font={{ family: 'monospace' }}
grid={{ stroke: null }}
axis={{
showAxisLine: true,
stroke: 'dodgerblue',
tickStroke: 'dodgerblue',
tickLabel: { color: 'crimson' },
}}
headerColor="crimson"
legend={{ labelColor: 'dodgerblue' }}
tooltip={{ groupLabel: { fontSize: '1.1rem' } }}
/>
<Labels
header={
<Legend title="Species" orientation={LegendOrientation.H} />
}
x="Body mass (g)"
y="Flipper length (mm)"
/>
</GG>
);`

export const Basic = () => (
<CodeEditor
src={src}
height={530}
additionalDeps={dependencies}
additionalFiles={additionalFiles}
/>
)
23 changes: 23 additions & 0 deletions docs/components/demo/graphique/theme/additionalFiles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import geom from '#/input/geom-point/build?raw'
import dts from '#/input/geom-point/build/dts'

const PKG = 'geom-point'

export const additionalFiles = {
[`/node_modules/@graphique/${PKG}/package.json`]: {
hidden: true,
code: JSON.stringify({
name: `@graphique/${PKG}`,
main: './index.js',
types: './index.d.ts',
}),
},
[`/node_modules/@graphique/${PKG}/index.js`]: {
hidden: true,
code: geom,
},
[`/node_modules/@graphique/${PKG}/index.d.ts`]: {
hidden: true,
code: dts,
},
}
1 change: 1 addition & 0 deletions docs/components/demo/graphique/theme/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Basic'
Loading

0 comments on commit d6a179c

Please sign in to comment.