Willin Wang
retro
  • Dark
  • Light

Wakatime

ๅ‘่กจไบŽ๏ผš 2022-02-10
้˜…่ฏป้ข„่ฎก๏ผš 1 ๅˆ†้’Ÿ
ๆ–‡็ซ ๅญ—ๆ•ฐ๏ผš 146
Best day
9 hrs 39 mins
2022-02-07
Total Time
30 hrs 39 mins
Latest 7 days
Daily Average
4 hrs 22 mins
Latest 7 days
LanguageTimePercent
TypeScript15 hrs 27 mins50.46%
JavaScript6 hrs 49 mins22.25%
JSON2 hrs 29 mins8.14%
MDX1 hr 42 mins5.57%
TOML1 hr 9 mins3.8%
Markdown1 hr 9 mins3.76%
YAML51 mins2.79%
Other40 mins2.22%
CSS9 mins0.51%
Git Config4 mins0.22%
Bash3 mins0.18%
Git1 min0.08%
Makefile0 secs0.02%
EJS0 secs0.01%
HTML0 secs0%
ProjectTimePercent
willin.wang19 hrs 17 mins62.92%
serverless-demo3 hrs 8 mins10.22%
friday1 hr 51 mins6.06%
willin1 hr 44 mins5.71%
hr-bot1 hr 14 mins4.06%
manage-asa-apps1 hr 4 mins3.48%
Wechaty-Authing41 mins2.23%
blogsource38 mins2.08%
workflow-cron21 mins1.2%
github-readme-npm-downloads18 mins0.99%
hexo-wordcount15 mins0.83%
Unknown Project2 mins0.11%
workers1 min0.06%
xn--wkua.xn--6qq986b3xl1 min0.06%
import data from './data';

export function Wakatime() {
  return (
    <>
      <div className='shadow stats stats-vertical lg:stats-horizontal'>
        <div className='stat'>
          <div className='stat-title'>Best day</div>
          <div className='stat-value'>{data.best_day.text}</div>
          <div className='stat-desc'>{data.best_day.date}</div>
        </div>

        <div className='stat'>
          <div className='stat-title'>Total Time</div>
          <div className='stat-value'>
            {data.human_readable_total_including_other_language}
          </div>
          <div className='stat-desc'>Latest 7 days</div>
        </div>

        <div className='stat'>
          <div className='stat-title'>Daily Average</div>
          <div className='stat-value'>
            {data.human_readable_daily_average_including_other_language}
          </div>
          <div className='stat-desc'>Latest 7 days</div>
        </div>
      </div>
      <div className='flex'>
        <div className='mr-4 overflow-x-auto'>
          <table className='table w-full'>
            <thead>
              <tr>
                <th>Language</th>
                <th>Time</th>
                <th>Percent</th>
              </tr>
            </thead>
            <tbody>
              {data.languages
                .sort((a, b) => (a.percent > b.percent ? -1 : 1))
                .map((item) => (
                  <tr key={item.name}>
                    <th>{item.name}</th>
                    <td>{item.text}</td>
                    <td>{item.percent}%</td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>

        <div className='overflow-x-auto'>
          <table className='table w-full'>
            <thead>
              <tr>
                <th>Project</th>
                <th>Time</th>
                <th>Percent</th>
              </tr>
            </thead>
            <tbody>
              {data.projects
                .sort((a, b) => (a.percent > b.percent ? -1 : 1))
                .map((item) => (
                  <tr key={item.name}>
                    <th>{item.name}</th>
                    <td>{item.text}</td>
                    <td>{item.percent}%</td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}