Skip to content

Commit 0e1c535

Browse files
julia-scriptjulia-script
authored
docs: adds more docs
1 parent 85d35c1 commit 0e1c535

File tree

13 files changed

+149
-136
lines changed

13 files changed

+149
-136
lines changed

‎packages/docs/src/app/favicon.ico‎

-22.7 KB
Binary file not shown.

‎packages/docs/src/app/graph/page.tsx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@ import {
1818
import Link from "next/link";
1919
import { useLayoutEffect, useState } from "react";
2020

21+
22+
const easeInOut = (t: number) => {
23+
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
24+
};
25+
26+
const loopAnimation = (t: number, duration: number) => {
27+
if (t > duration / 2) {
28+
return easeInOut((duration - t) / (duration / 2));
29+
}
30+
return easeInOut(t / (duration / 2));
31+
};
32+
2133
const waveF = (a: number, b: number) => (x: number) =>
2234
Math.sin(((x - a) * Math.PI * 2) / (b - a));
2335

@@ -29,18 +41,21 @@ const Hero = () => {
2941
const [[a1, b1], setWave1] = useState([-3, -0.5]);
3042
const [[a2, b2], setWave2] = useState([0.7, 3.26]);
3143
const [interacted, setInteracted] = useState(false);
32-
const { t, pause } = useStopwatch({
33-
autoplay: true,
34-
repeat: true,
35-
duration: 30_000,
36-
});
3744

38-
useLayoutEffect(() => {
39-
if (interacted) return;
40-
const tLoop = loopAnimation(t, 0, 1);
41-
setWave1([lerp(-3, -2, tLoop), lerp(-0.5, -1, tLoop)]);
42-
setWave2([lerp(0.7, 0, tLoop), lerp(3.26, 5, tLoop)]);
43-
}, [t]);
45+
const { pause } = useStopwatch(
46+
(t) => {
47+
if (interacted) return;
48+
const tLoop = loopAnimation(t, 2);
49+
setWave1([lerp(-3, -2, tLoop), lerp(-0.5, -1, tLoop)]);
50+
setWave2([lerp(0.7, 0, tLoop), lerp(3.26, 5, tLoop)]);
51+
},
52+
{
53+
to: 2,
54+
autoplay: true,
55+
repeat: true,
56+
duration: 30_000,
57+
}
58+
);
4459

4560
useLayoutEffect(() => {
4661
if (!interacted) return;
@@ -52,7 +67,6 @@ const Hero = () => {
5267
padding={20}
5368
className="bg-dark-950 max-h-[700px]"
5469
width="100%"
55-
height={"50vh"}
5670
coordBox={coordBox}
5771
onCoordBoxChange={setCoordBox}
5872
theme={{
@@ -141,7 +155,6 @@ const Hero = () => {
141155
<Plot.ofX
142156
f={(x) => waveF(a1, b1)(x) + waveF(a2, b2)(x)}
143157
strokeColor={1}
144-
filter="url(#neon)"
145158
/>
146159
<LabelContainer
147160
className="transition-opacity duration-500"
@@ -161,17 +174,7 @@ const Hero = () => {
161174
</Graph>
162175
);
163176
};
164-
const easeInOut = (t: number) => {
165-
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
166-
};
167177

168-
const loopAnimation = (t: number, start: number, end: number) => {
169-
const duration = end - start;
170-
if (t > 0.5) {
171-
return start + (1 - easeInOut((t - 0.5) * 2)) * duration;
172-
}
173-
return start + easeInOut(t * 2) * duration;
174-
};
175178
export default function Page() {
176179
return (
177180
<div>

‎packages/docs/src/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { Footer } from "@/components/Footer";
66
const inter = Inter({ subsets: ["latin"] });
77

88
export const metadata = {
9-
title: "Create Next App",
10-
description: "Generated by create next app",
9+
title: "@coord/graph",
10+
description: "A graphing library for React",
1111
};
1212

1313
export default function RootLayout({

‎packages/docs/src/components/GraphLogo.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Graph, Plot } from "@coord/graph";
2+
3+
export const GraphLogo = ({
4+
size = 400,
5+
globalMultiplier = 1,
6+
}: {
7+
size?: number;
8+
globalMultiplier?: number;
9+
}) => {
10+
const PI2 = Math.PI * 2;
11+
const [a1, b1, a2, b2] = [PI2 * 0.04, PI2 * 1, PI2 * 0.27, PI2 * 0.93];
12+
const dashMultiplier = size / 400;
13+
const dasharray = [15 * dashMultiplier, 20 * dashMultiplier];
14+
const domain: [number, number] = [-3, 3];
15+
const f = (x: number, a: number, b: number) =>
16+
Math.sin(((x - a) * Math.PI * 2) / (b - a));
17+
return (
18+
<Graph
19+
coordBox={[-2.5, 2.5, 2.5, -2.5]}
20+
width={size}
21+
height={size}
22+
viewBox={`0 0 ${size} ${size}`}
23+
xmlns="http://www.w3.org/2000/svg"
24+
>
25+
<Plot.ofX
26+
domain={domain}
27+
f={(x) => f(x, a1, b1)}
28+
strokeColor={0}
29+
strokeWidth={`${0.12 * globalMultiplier}cs`}
30+
strokeDasharray={dasharray.map((v) => v + "px").join(" ")}
31+
/>
32+
<Plot.ofX
33+
domain={domain}
34+
f={(x) => f(x, a2, b2)}
35+
strokeColor={2}
36+
strokeWidth={`${0.12 * globalMultiplier}cs`}
37+
strokeDasharray={dasharray.map((v) => v + "px").join(" ")}
38+
/>
39+
<Plot.ofX
40+
domain={domain}
41+
f={(x) => f(x, a1, b1) + f(x, a2, b2)}
42+
strokeColor={1}
43+
strokeWidth={`${0.3 * globalMultiplier}cs`}
44+
/>
45+
</Graph>
46+
);
47+
};

‎packages/docs/src/content/graph/docs/components/graph.mdx‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -170,21 +170,37 @@ You can also define a custom theme by passing an object to the theme prop. This
170170

171171
```tsx
172172
const customTheme: Theme = {
173-
background: "#f5f5f5",
174-
body: "#1c1e21",
175-
text: "#1c1e21",
176-
fontSize: 12,
177-
fontWeight: 400,
178-
fontFamily: "monospace",
179-
grid: {
180-
stepStrokeColor: "#d3d3d3",
181-
stepStrokeWidth: 1,
182-
maxStepSize: 100,
183-
axisStrokeColor: ["#797e86", "#797e86"],
184-
axisStrokeWidth: 3,
185-
labelsColor: ["#1c1e21", "#1c1e21"],
186-
labelsFontSize: 12,
173+
background: {
174+
fill: "#1c1e21",
187175
},
176+
177+
body: "#ffffff",
178+
179+
text: {
180+
fill: "#ffffff",
181+
fontSize: 12,
182+
fontWeight: 400,
183+
fontFamily: "monospace",
184+
},
185+
186+
gridMaxStepSize: 100,
187+
188+
gridStep: {
189+
stroke: "#2c2e31",
190+
strokeWidth: 1,
191+
},
192+
193+
gridAxis: {
194+
stroke: "#797e86",
195+
strokeWidth: 3,
196+
},
197+
198+
gridLabels: {
199+
fill: "#ffffff",
200+
fontSize: 12,
201+
fontFamily: "monospace",
202+
},
203+
188204
palette: [
189205
"#FFB84C",
190206
"#5cb7b6",

‎packages/docs/src/content/graph/docs/components/label.mdx‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,9 @@ import {
4444

4545
export default function MyGraph() {
4646
const [position, setPosition] = useCoordState([0, 0]);
47+
const [direction, setDirection] = useState(0);
4748

48-
const { t: direction } = useStopwatch({
49+
useStopwatch(setDirection, {
4950
from: 0,
5051
to: Math.PI * 2,
5152
duration: 10_000,
@@ -83,14 +84,7 @@ export default function MyGraph() {
8384
8485
```jsx live
8586
import { useState } from "react";
86-
import {
87-
Graph,
88-
Grid,
89-
Label,
90-
Marker,
91-
useCoordState,
92-
useStopwatch,
93-
} from "@coord/graph";
87+
import { Graph, Grid, Label, Marker, useCoordState } from "@coord/graph";
9488
9589
export default function MyGraph() {
9690
const [position, setPosition] = useCoordState([0, 0]);
@@ -128,14 +122,7 @@ export default function MyGraph() {
128122
129123
```jsx live
130124
import { useState } from "react";
131-
import {
132-
Graph,
133-
Grid,
134-
Label,
135-
Marker,
136-
useCoordState,
137-
useStopwatch,
138-
} from "@coord/graph";
125+
import { Graph, Grid, Label, Marker, useCoordState } from "@coord/graph";
139126
140127
export default function MyGraph() {
141128
const [position, setPosition] = useCoordState([0, 0]);
@@ -190,14 +177,7 @@ export default function MyGraph() {
190177
191178
```jsx live
192179
import { useState } from "react";
193-
import {
194-
Graph,
195-
Grid,
196-
Label,
197-
Marker,
198-
useCoordState,
199-
useStopwatch,
200-
} from "@coord/graph";
180+
import { Graph, Grid, Label, Marker, useCoordState } from "@coord/graph";
201181
202182
export default function MyGraph() {
203183
const [position, setPosition] = useCoordState([0, 0]);

‎packages/docs/src/content/graph/docs/interactions/dragging-elements.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ import {
6868
Label,
6969
Marker,
7070
useCoordState,
71-
useStopwatch,
7271
Text,
7372
point,
7473
} from "@coord/graph";

‎packages/docs/src/content/graph/docs/interfaces/scalar-types.mdx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -103,22 +103,24 @@ export default function MyGraph() {
103103
padding: 10,
104104
fontSize: 12,
105105
};
106-
const { t, pause } = useStopwatch({
107-
duration: 5_000,
108-
to: Math.PI * 2,
109-
autoplay: true,
110-
repeat: true,
111-
});
112-
113-
useLayoutEffect(() => {
114-
const x = Math.sin(t) * 3;
115-
const y = Math.cos(t) * 3;
116-
117-
setCoordBox({
118-
horizontal: initialCoordBox.horizontal.add(point(x, x)),
119-
vertical: initialCoordBox.vertical.add(point(y, y)),
120-
});
121-
}, [t]);
106+
107+
const { pause } = useStopwatch(
108+
(t) => {
109+
const x = Math.sin(t) * 3;
110+
const y = Math.cos(t) * 3;
111+
112+
setCoordBox({
113+
horizontal: initialCoordBox.horizontal.add(point(x, x)),
114+
vertical: initialCoordBox.vertical.add(point(y, y)),
115+
});
116+
},
117+
{
118+
duration: 5_000,
119+
to: Math.PI * 2,
120+
autoplay: true,
121+
repeat: true,
122+
}
123+
);
122124

123125
return (
124126
<Graph
@@ -135,7 +137,8 @@ export default function MyGraph() {
135137
<Marker position={p0} color={1} />
136138
<Label target={p0} direction={"s"} strokeColor={1}>
137139
<div style={labelStyle}>
138-
I'm a label positioned at <strong>[{p1.toString()}]</strong>, So I'm
140+
141+
I'm a label positioned at <strong>[{p0.toString()}]</strong>, So I'm
139142
relative to the graph viewport.
140143
</div>
141144
</Label>

‎packages/graph/src/components/Grid.tsx‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,6 @@ const Component = ({
7777
<rect
7878
width={renderNumber(viewSpaceStepSize)}
7979
height={renderNumber(viewSpaceStepSize)}
80-
// stroke={computeColor(theme.grid.stepStrokeColor)}
81-
// strokeWidth={projectAbsoluteSize(
82-
// theme.grid.stepStrokeWidth,
83-
// "viewspace"
84-
// )}
8580
{...theme.gridStep}
8681
fill="none"
8782
/>
@@ -98,17 +93,13 @@ const Component = ({
9893
x2={renderNumber(origin.x)}
9994
y1={"0%"}
10095
y2={"100%"}
101-
// stroke={computeColor(theme.grid.axisStrokeColor[1])}
102-
// strokeWidth={theme.grid.axisStrokeWidth}
10396
{...theme.gridAxis}
10497
/>
10598
<line
10699
x1={"0%"}
107100
x2={"100%"}
108101
y1={renderNumber(origin.y)}
109102
y2={renderNumber(origin.y)}
110-
// stroke={computeColor(theme.grid.axisStrokeColor[0])}
111-
// strokeWidth={theme.grid.axisStrokeWidth}
112103
{...theme.gridAxis}
113104
/>
114105
</>
@@ -131,19 +122,11 @@ const Component = ({
131122
y2={isOrigin ? originRotation.y * 6 : 6}
132123
x1={0}
133124
y1={0}
134-
// strokeWidth={theme.grid.axisStrokeWidth}
135-
// stroke={computeColor(theme.grid.axisStrokeColor[0])}
136125
{...theme.gridAxis}
137126
/>
138127
<text
139128
x={isOrigin ? originRotation.x * 14 : 0}
140129
y={isOrigin ? originRotation.y * 14 : 14}
141-
// fill={computeColor(theme.grid.labelsColor[0])}
142-
// fontSize={projectAbsoluteSize(
143-
// theme.grid.labelsFontSize,
144-
// "viewspace"
145-
// )}
146-
// fontFamily={theme.fontFamily}
147130
textAnchor={stepX === 0 ? "end" : "middle"}
148131
dominantBaseline={"hanging"}
149132
{...theme.gridLabels}
@@ -171,19 +154,11 @@ const Component = ({
171154
y1={0}
172155
x2={-6}
173156
y2={0}
174-
// strokeWidth={theme.grid.axisStrokeWidth}
175-
// stroke={computeColor(theme.grid.axisStrokeColor[1])}
176157
{...theme.gridAxis}
177158
/>
178159
<text
179160
x={-14}
180161
y={0}
181-
// fill={computeColor(theme.grid.labelsColor[1])}
182-
// fontSize={projectAbsoluteSize(
183-
// theme.grid.labelsFontSize,
184-
// "viewspace"
185-
// )}
186-
// fontFamily={theme.fontFamily}
187162
textAnchor="end"
188163
dominantBaseline={"middle"}
189164
{...theme.gridLabels}

0 commit comments

Comments
 (0)