Change site as a test

components/leaderboard.tsx

@@ -1,6 +1,7 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import styles from '../styles/Home.module.css'
+import Script from 'next/script'
 import { createHash } from 'crypto'
 import { invertColor } from '../lib/color.js'
 import Link from 'next/link'
@@ -75,6 +76,7 @@ export default ({year, month, contractorHours, monthProjections}: {
         <title>Common Prefix Leaderboard</title>
       </Head>
 
+      <Script src="/assets/colorHours.js" strategy="beforeInteractive" />
       <main className={styles.main}>
         <h1 className={styles.title}>
           <span className={styles.titleCaption}>High Scores</span>
@@ -124,17 +126,18 @@ export default ({year, month, contractorHours, monthProjections}: {
                     <td className={styles.contractor}>{contractor.name}</td>
                     <td className={styles.progressBarContainer}>
                       <div></div>
-                      <div style={{
-                        backgroundColor: contractor.color,
-                        color: invertColor(contractor.color, true),
-                        width: (8 + 80 * contractor.percentage / 100) + '%',
-                      }} className={styles.progressBar}>
-                        {Math.round(100 * contractor.hours) / 100}
+                      <div>
+                      <canvas id={`canvas${contractor.name}`} width="150" height="15"></canvas>
+                      <Script id={`caller${contractor.name}`}>
+                      {`
+                        window.colorHours(document.getElementById(\`canvas${contractor.name}\`))
+                      `}
+                      </Script>
                       </div>
                       {
                         contractor.hoursProjection && contractor.percentageProjection?
                         <div style={{
-                          width: (8 + 80 * contractor.percentageProjection / 100) + '%',
+                          width: (contractor.percentageProjection) + '%',
                           borderRight:
                             contractor.hoursProjection < contractor.hours?
                             '3px dashed ' + invertColor(contractor.color, true):

lib/spreadsheet.ts

@@ -106,12 +106,12 @@ function parseDate(dateString: string) {
   year = parseInt(year)
   month = parseInt(month)
 
-  return { month, year }
+  return {month, year}
 }
 
 function filterLogByDate(desiredYear: number, desiredMonth: number) {
   return (entry: LogEntry): boolean => {
-    const { month, year } = parseDate(entry.date)
+    const {month, year} = parseDate(entry.date)
 
     return year == desiredYear && month == desiredMonth
   }
@@ -121,7 +121,7 @@ function filterLogByContractor(desiredContractor: string) {
   return (entry: LogEntry) => entry.contractor == desiredContractor
 }
 
-export async function getMonthHoursByContractor(year: number, month: number): Promise<{ [index: string]: number }> {
+export async function getMonthHours(year: number, month: number): Promise<{ [index: string]: number }> {
   let log = await getLog()
   const contractors: {[index: string]: number} = {}
 
@@ -138,42 +138,3 @@ export async function getMonthHoursByContractor(year: number, month: number): Pr
 
   return contractors
 }
-
-export async function getContractorHoursByMonth(contractor: string):
-  Promise<[number, number, number][]> {
-  let log = await getLog()
-  let ret: [number, number, number][] = []
-
-  log = log.filter(filterLogByContractor(contractor))
-
-  const dict: { [year: string]: { [month: string]: number } } = {}
-
-  for (const { date, hours } of log) {
-    const { month, year } = parseDate(date)
-
-    if (dict[year] === undefined) {
-      dict[year] = {}
-    }
-    if (dict[year][month] === undefined) {
-      dict[year][month] = 0
-    }
-    dict[year][month] += parseFloat(hours)
-  }
-
-  for (const year in dict) {
-    for (const month in dict[year]) {
-      ret.push([parseInt(year), parseInt(month), dict[year][month]])
-    }
-  }
-
-  ret = ret.sort(([year1, month1], [year2, month2]) => {
-    if (year1 == year2) {
-      return month1 - month2
-    }
-    return year1 - year2
-  })
-
-  console.log({ ret })
-
-  return ret
-}

pages/index.tsx

@@ -1,4 +1,4 @@
-import { getMonthHoursByContractor, getMonthProjections } from '../lib/spreadsheet'
+import { getMonthHours, getMonthProjections } from '../lib/spreadsheet'
 import Leaderboard from '../components/leaderboard'
 
 function getCurrentDate() {
@@ -14,7 +14,7 @@ export async function getServerSideProps() {
   const { year, month } = getCurrentDate()
   const contractorHours: {
     [index: string]: number
-  } = await getMonthHoursByContractor(year, month)
+  } = await getMonthHours(year, month)
   const monthProjections = await getMonthProjections(year, month)
 
   return {

pages/leaderboard/[...date].tsx

@@ -1,4 +1,4 @@
-import { getMonthHoursByContractor, getMonthProjections } from '../../lib/spreadsheet'
+import { getMonthHours, getMonthProjections } from '../../lib/spreadsheet'
 import Leaderboard from '../../components/leaderboard'
 
 function getCurrentDate() {
@@ -17,7 +17,7 @@ export async function getServerSideProps(context: any) {
 
   const contractorHours: {
     [index: string]: number
-  } = await getMonthHoursByContractor(year, month)
+  } = await getMonthHours(year, month)
 
   const monthProjections:{
     [index: string]: number

pages/profile/[username].tsx

@@ -1,84 +1,27 @@
 import styles from '../../styles/Home.module.css'
 import Head from 'next/head'
-import { getContractorHoursByMonth } from '../../lib/spreadsheet'
 
-function UserProfile(data:
-  { error?: string,
-    username: string,
-    log?: [number, number, number][],
-    maxHours?: number }) {
-  const { username } = data
-  let body
-
-  if (data.error) {
-    body = data.error
-  }
-  else {
-    let maxHours = data.maxHours!
-    body = <div className={styles.histogram}>
-      {
-        data.log!.map(([year, month, hours], index) =>
-          <div>
-            <div className={styles.histobar} style={{height: Math.round(100 * hours / maxHours) + '%'}}></div>
-            <div className={styles.histotext}>{ Math.round(hours) }</div>
-          </div>
-        )
-      }
-    </div>
-  }
+function UserProfile({ username }: { username: string }) {
+  console.log({ username })
 
   return <div className={styles.container}>
     <Head>
-      <title>{ `${username} - Common Prefix Leaderboard` }</title>
+      <title>Common Prefix Leaderboard</title>
     </Head>
 
     <main className={styles.main}>
       <h1 className={styles.title}>
         <span className={styles.titleCaption}>{ username }</span>
       </h1>
-
-      { body }
     </main>
   </div>
 }
 
 export async function getServerSideProps(context: any) {
   const username = context.params.username
-  let log
-
-  return {
-    props: {
-      username: 'dionyziz',
-      maxHours: 70,
-      log: [
-        [2023, 1, 30],
-        [2023, 2, 70],
-        [2023, 3, 17.5]
-      ]
-    }
-  }
-
-  try {
-    log = await getContractorHoursByMonth(username)
-  }
-  catch {
-    return {
-      props: {
-        username,
-        error: 'Failed to fetch data'
-      }
-    }
-  }
-  log = log.slice(-20)
-
-  let maxHours = 1
-
-  for (const [year, month, hours] of log) {
-    maxHours = Math.max(hours, maxHours)
-  }
 
   return {
-    props: { username, log, maxHours }
+    props: { username }
   }
 }
 

public/assets/colorHours.js

@@ -0,0 +1,4 @@
+window.colorHours = (canvas) => {
+  const ctx = canvas.getContext("2d")
+  ctx.fillText("a", 10, 10)
+}

styles/Home.module.css

@@ -110,29 +110,6 @@
   margin: 0;
 }
 
-.histogram {
-  display: flex;
-  flex-direction: row;
-}
-
-.histogram div {
-  padding: 5px;
-  margin: 5px;
-}
-
-.histogram>div {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  height: 500px;
-  width: 65px;
-  text-align: center;
-}
-
-.histogram div.histobar {
-  background-color: green;
-}
-
 @media (max-width: 800px) {
   .table, .table tbody, .table thead, .table tr, .table th, .table td {
     display: block;