From 63b528c2e718b9a9384d1c20c65cbbf303527788 Mon Sep 17 00:00:00 2001 From: Ethan Roseman Date: Sat, 23 Jan 2021 18:17:16 +0900 Subject: [PATCH 1/3] Bytes% out of total known bytes --- src/ProgressPane.jsx | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/ProgressPane.jsx b/src/ProgressPane.jsx index 78ad804..1024368 100644 --- a/src/ProgressPane.jsx +++ b/src/ProgressPane.jsx @@ -23,7 +23,7 @@ async function fetchData() { const csv = await fetch("https://papermar.io/reports/progress.csv") .then(response => response.text()) - return csv + const rows = csv .split("\n") .filter(row => row.length) .map(row => { @@ -35,10 +35,15 @@ async function fetchData() { obj[key] = transform(data.shift()) } - obj.percentBytes = Math.round((obj.matchingBytes / obj.totalBytes) * 100) - return obj }) + + const latest = rows[rows.length - 1] + for (const row of rows) { + row.percentBytes = (row.matchingBytes / latest.totalBytes) * 100 + } + + return rows } let cachedData = null @@ -92,15 +97,6 @@ function DataView({ data, captionPortal, nonce }) { const maxPercent = Math.ceil(latest.percentBytes / 25) * 25 return <> - {/* - - - - - - -
Matched{Math.round((latest.matchingBytes / latest.totalBytes) * 10000) / 100}%
*/} -
@@ -162,7 +158,7 @@ function EntryInfo({ entry, isLatest }) { /*const [commitMessage, setCommitMessage] = useState(null) useEffect(async () => { - fetch(`https://api.github.com/repos/ethteck/papermario/commits/${entry.commit}`) + fetch(`https://api.github.com/repos/pmret/papermario/commits/${entry.commit}`) .then(resp => resp.json()) .then(resp => { setCommitMessage(resp.commit.message.split("\n")[0]) @@ -170,7 +166,7 @@ function EntryInfo({ entry, isLatest }) { }, [entry.commit])*/ return
- + {entry.commit.substr(0, 8)} {isLatest && " (latest)"} @@ -179,7 +175,7 @@ function EntryInfo({ entry, isLatest }) { Matched - {Math.round((entry.matchingBytes / entry.totalBytes) * 10000) / 100}% + {Math.round((entry.percentBytes) * 100) / 100}% ({entry.matchingFuncs}/{entry.totalFuncs} functions) From 66142b2f6d1bed5fb977e7f155ff8e216bb2e313 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 22 Feb 2021 09:57:38 +0000 Subject: [PATCH 2/3] Versioning (#1) * progress caption wording * initial party impl * rm old index.js * many things * scrolling clouds in background --- src/Contributors.jsx | 75 ++++++++++++++++++++++++ src/ProgressPane.jsx | 41 ++++++------- src/bg/green-checker.png | Bin 0 -> 97 bytes src/bg/mrn-clouds.png | Bin 0 -> 174807 bytes src/bg/mrn-toad-town.png | Bin 0 -> 2373296 bytes src/bg/teal-checker.png | Bin 0 -> 97 bytes src/cdown.svg | 19 +++++++ src/index.css | 120 +++++++++++++++++++++++++++++++++++---- src/index.html | 2 +- src/index.js | 14 ----- src/main.jsx | 30 +++++++--- 11 files changed, 246 insertions(+), 55 deletions(-) create mode 100644 src/Contributors.jsx create mode 100644 src/bg/green-checker.png create mode 100644 src/bg/mrn-clouds.png create mode 100644 src/bg/mrn-toad-town.png create mode 100644 src/bg/teal-checker.png create mode 100644 src/cdown.svg delete mode 100644 src/index.js 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 }) {
-