diff --git a/src/Contributors.jsx b/src/Contributors.jsx new file mode 100644 index 0000000..a375cf2 --- /dev/null +++ b/src/Contributors.jsx @@ -0,0 +1,75 @@ +import React, { useState } from "react" +import { createPortal } from "react-dom" +import clsx from "clsx" + +import cdownURL from "./cdown.svg" + +function CDown() { + return +} + +const contributors = [ + { + name: "Ethan", + avatar: "https://avatars2.githubusercontent.com/u/2985314?s=400", + url: "https://github.com/ethteck", + description:
+
, + }, + { + name: "stuckpixel", + avatar: "https://avatars3.githubusercontent.com/u/3634616?s=400", + url: "https://github.com/pixel-stuck", + description:
+
, + }, + { + name: "alex", + avatar: "https://avatars3.githubusercontent.com/u/9429556?s=400", + url: "https://github.com/nanaian", + description:
+
, + }, +] + +export default function Contributors({ captionPortal }) { + const [selected, setSelected] = useState(0) + const { name, description, url } = contributors[selected] + + return
+
+
+ {contributors.map((contributor, i) => { + let t = (Math.PI * 2) * ((i - selected) / contributors.length) + Math.PI/2 + + let x = 150 * Math.cos(t) + 200 + let y = 140 * Math.sin(t) + 200 + + return setSelected(i)} + src={contributor.avatar} + alt={contributor.name} + style={{ top: y + "px", left: x + "px", zIndex: y }} + /> + })} +
+ + +
+ +
+
+
+
+
+
+ + {captionPortal.current && createPortal(
+ {description} +
, captionPortal.current)} +
+} diff --git a/src/ProgressPane.jsx b/src/ProgressPane.jsx index 1024368..8073003 100644 --- a/src/ProgressPane.jsx +++ b/src/ProgressPane.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from "react" +import React, { useState, useEffect } from "react" import { createPortal } from "react-dom" import { Area, XAxis, YAxis, AreaChart, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" import { scalePow } from "d3-scale" @@ -19,8 +19,13 @@ const csvVersions = { }, } -async function fetchData() { - const csv = await fetch("https://papermar.io/reports/progress.csv") +const colors = { + yellow: { stroke: "#e3ac34", fill: "#edc97e" }, + green: { stroke: "#40e334", fill: "#91eb7f" }, +} + +async function fetchData(version) { + const csv = await fetch(`https://papermar.io/reports/progress_${version}.csv`) .then(response => response.text()) const rows = csv @@ -46,23 +51,18 @@ async function fetchData() { return rows } -let cachedData = null - -export default function ProgressPane({ captionPortal, nonce }) { - const [data, setData] = useState(cachedData) +export default function ProgressPane({ captionPortal, nonce, color, version }) { + const [data, setData] = useState([]) useEffect(() => { - fetchData() + fetchData(version) .then(data => { - cachedData = data - setData(cachedData) + setData(data) }) - }, []) - - // TODO: cute spin animation when data loads + }, [version]) return
- {data && } + {data && } {!data && "Loading..."}
} @@ -78,9 +78,10 @@ const monthDates = [] } } -function DataView({ data, captionPortal, nonce }) { +function DataView({ data, captionPortal, nonce, color }) { const latest = data[data.length - 1] const oldest = data[0] + const { stroke, fill } = colors[color] const [selectedEntry, setSelectedEntry] = useState(latest) @@ -94,7 +95,7 @@ function DataView({ data, captionPortal, nonce }) { return } - const maxPercent = Math.ceil(latest.percentBytes / 25) * 25 + const maxPercent = latest ? Math.ceil(latest.percentBytes / 25) * 25 : 25 return <>
@@ -111,8 +112,8 @@ function DataView({ data, captionPortal, nonce }) { type="linear" dataKey="percentBytes" unit="%" - stroke="#e3ac34" strokeWidth={2} - fill="#edc97e" + stroke={stroke} strokeWidth={2} + fill={fill} dot={true} isAnimationActive={false} /> @@ -123,7 +124,7 @@ function DataView({ data, captionPortal, nonce }) {
-