mirror
/
wakapi
mirror of https://github.com/muety/wakapi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor to server-rendered app.

This commit is contained in:
Ferdinand Mütsch 2020-02-20 14:28:55 +01:00
parent d583dd312b
commit b7f700e7a5
14 changed files with 405 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
main.go
View File

@ -108,6 +108,11 @@ func main() {
summarySrvc := &services.SummaryService{Config: config, Db: db, HeartbeatService: heartbeatSrvc, AliasService: aliasSrvc}
aggregationSrvc := &services.AggregationService{Config: config, Db: db, UserService: userSrvc, SummaryService: summarySrvc, HeartbeatService: heartbeatSrvc}
services := []services.Initializable{aliasSrvc, heartbeatSrvc, summarySrvc, userSrvc, aggregationSrvc}
for _, s := range services {
s.Init()
}
// Aggregate heartbeats to summaries and persist them
go aggregationSrvc.Schedule()
@ -117,6 +122,7 @@ func main() {
// Middlewares
authenticateMiddleware := &middlewares.AuthenticateMiddleware{UserSrvc: userSrvc}
basicAuthMiddleware := &middlewares.RequireBasicAuthMiddleware{}
corsMiddleware := cors.New(cors.Options{
AllowedOrigins: []string{"*"},
AllowedHeaders: []string{"*"},
@ -125,23 +131,36 @@ func main() {
// Setup Routing
router := mux.NewRouter()
mainRouter := mux.NewRouter().PathPrefix("").Subrouter()
apiRouter := mux.NewRouter().PathPrefix("/api").Subrouter()
// Main Routes
index := mainRouter.Path("/").Subrouter()
index.Methods(http.MethodGet).Path("/").HandlerFunc(summaryHandler.Index)
// API Routes
heartbeats := apiRouter.Path("/heartbeat").Subrouter()
heartbeats.Methods(http.MethodPost).HandlerFunc(heartbeatHandler.Post)
// Static Routes
router.PathPrefix("/assets").Handler(negroni.Classic().With(negroni.Wrap(http.FileServer(http.Dir("./static")))))
aggreagations := apiRouter.Path("/summary").Subrouter()
aggreagations.Methods(http.MethodGet).HandlerFunc(summaryHandler.Get)
// Sub-Routes Setup
router.PathPrefix("/").Handler(negroni.Classic().
With(negroni.HandlerFunc(basicAuthMiddleware.Handle),
negroni.HandlerFunc(authenticateMiddleware.Handle),
negroni.Wrap(mainRouter),
))
router.PathPrefix("/api").Handler(negroni.Classic().
With(corsMiddleware).
With(
negroni.HandlerFunc(authenticateMiddleware.Handle),
negroni.Wrap(apiRouter),
))
router.PathPrefix("/").Handler(negroni.Classic().With(negroni.Wrap(http.FileServer(http.Dir("./static")))))
// Listen HTTP
portString := config.Addr + ":" + strconv.Itoa(config.Port)

14
middlewares/basicauth.go Normal file
View File

@ -0,0 +1,14 @@
package middlewares
import (
"net/http"
)
type RequireBasicAuthMiddleware struct{}
func (m *RequireBasicAuthMiddleware) Init() {}
func (m *RequireBasicAuthMiddleware) Handle(w http.ResponseWriter, r *http.Request, next http.HandlerFunc) {
w.Header().Set("WWW-Authenticate", `Basic realm="Restricted"`)
next(w, r)
}

92
routes/summary.go
View File

@ -1,16 +1,15 @@
package routes
import (
"crypto/md5"
"errors"
"html/template"
"net/http"
"strconv"
"path"
"time"
"github.com/n1try/wakapi/models"
"github.com/n1try/wakapi/services"
"github.com/n1try/wakapi/utils"
cache "github.com/patrickmn/go-cache"
uuid "github.com/satori/go.uuid"
)
const (
@ -23,15 +22,23 @@ const (
)
type SummaryHandler struct {
SummarySrvc *services.SummaryService
Cache *cache.Cache
Initialized bool
SummarySrvc *services.SummaryService
Initialized bool
indexTemplate *template.Template
}
func (m *SummaryHandler) Init() {
if m.Cache == nil {
m.Cache = cache.New(24*time.Hour, 24*time.Hour)
indexTplPath := "views/index.tpl.html"
indexTpl, err := template.New(path.Base(indexTplPath)).Funcs(template.FuncMap{
"json": utils.Json,
}).ParseFiles(indexTplPath)
if err != nil {
panic(err)
}
m.indexTemplate = indexTpl
m.Initialized = true
}
@ -45,6 +52,37 @@ func (h *SummaryHandler) Get(w http.ResponseWriter, r *http.Request) {
h.Init()
}
summary, err, status := loadUserSummary(r, h.SummarySrvc)
if err != nil {
w.WriteHeader(status)
w.Write([]byte(err.Error()))
return
}
utils.RespondJSON(w, http.StatusOK, summary)
}
func (h *SummaryHandler) Index(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodGet {
w.WriteHeader(http.StatusMethodNotAllowed)
return
}
if !h.Initialized {
h.Init()
}
summary, err, status := loadUserSummary(r, h.SummarySrvc)
if err != nil {
w.WriteHeader(status)
w.Write([]byte(err.Error()))
return
}
h.indexTemplate.Execute(w, summary)
}
func loadUserSummary(r *http.Request, summaryService *services.SummaryService) (*models.Summary, error, int) {
user := r.Context().Value(models.UserKey).(*models.User)
params := r.URL.Query()
interval := params.Get("interval")
@ -64,9 +102,7 @@ func (h *SummaryHandler) Get(w http.ResponseWriter, r *http.Request) {
case IntervalAny:
from = time.Time{}
default:
w.WriteHeader(http.StatusBadRequest)
w.Write([]byte("missing 'from' parameter"))
return
return nil, errors.New("missing 'from' parameter"), http.StatusBadRequest
}
}
@ -78,34 +114,10 @@ func (h *SummaryHandler) Get(w http.ResponseWriter, r *http.Request) {
}
var summary *models.Summary
var cacheKey string
if !recompute {
cacheKey = getHash([]time.Time{from, to}, user)
} else {
cacheKey = uuid.NewV4().String()
}
if cachedSummary, ok := h.Cache.Get(cacheKey); !ok {
// Cache Miss
summary, err = h.SummarySrvc.Construct(from, to, user, recompute) // 'to' is always constant
if err != nil {
w.WriteHeader(http.StatusInternalServerError)
return
}
if !live && !recompute {
h.Cache.Set(cacheKey, summary, cache.DefaultExpiration)
}
} else {
summary = cachedSummary.(*models.Summary)
summary, err = summaryService.Construct(from, to, user, recompute) // 'to' is always constant
if err != nil {
return nil, err, http.StatusInternalServerError
}
utils.RespondJSON(w, http.StatusOK, summary)
}
func getHash(times []time.Time, user *models.User) string {
digest := md5.New()
for _, t := range times {
digest.Write([]byte(strconv.Itoa(int(t.Unix()))))
}
digest.Write([]byte(user.ID))
return string(digest.Sum(nil))
return summary, nil, http.StatusOK
}

2
services/aggregation.go
View File

@ -28,6 +28,8 @@ type AggregationJob struct {
To time.Time
}
func (srv *AggregationService) Init() {}
// Schedule a job to (re-)generate summaries every day shortly after midnight
// TODO: Make configurable
func (srv *AggregationService) Schedule() {

2
services/alias.go
View File

@ -15,6 +15,8 @@ type AliasService struct {
var userAliases sync.Map
func (srv *AliasService) Init() {}
func (srv *AliasService) LoadUserAliases(userId string) error {
var aliases []*models.Alias
if err := srv.Db.

5
services/common.go Normal file
View File

@ -0,0 +1,5 @@
package services
type Initializable interface {
Init()
}

2
services/heartbeat.go
View File

@ -15,6 +15,8 @@ type HeartbeatService struct {
Db *gorm.DB
}
func (srv *HeartbeatService) Init() {}
func (srv *HeartbeatService) InsertBatch(heartbeats []*models.Heartbeat) error {
var batch []interface{}
for _, h := range heartbeats {

27
services/summary.go
View File

@ -1,9 +1,12 @@
package services
import (
"crypto/md5"
"errors"
"github.com/patrickmn/go-cache"
"math"
"sort"
"strconv"
"time"
"github.com/jinzhu/gorm"
@ -12,6 +15,7 @@ import (
type SummaryService struct {
Config *models.Config
Cache *cache.Cache
Db *gorm.DB
HeartbeatService *HeartbeatService
AliasService *AliasService
@ -22,11 +26,21 @@ type Interval struct {
End time.Time
}
func (srv *SummaryService) Init() {
srv.Cache = cache.New(24*time.Hour, 24*time.Hour)
}
func (srv *SummaryService) Construct(from, to time.Time, user *models.User, recompute bool) (*models.Summary, error) {
var existingSummaries []*models.Summary
var cacheKey string
if recompute {
existingSummaries = make([]*models.Summary, 0)
} else {
cacheKey = getHash([]time.Time{from, to}, user)
if result, ok := srv.Cache.Get(cacheKey); ok {
return result.(*models.Summary), nil
}
summaries, err := srv.GetByUserWithin(user, from, to)
if err != nil {
return nil, err
@ -94,6 +108,10 @@ func (srv *SummaryService) Construct(from, to time.Time, user *models.User, reco
return nil, err
}
if cacheKey != "" {
srv.Cache.SetDefault(cacheKey, summary)
}
return summary, nil
}
@ -283,3 +301,12 @@ func mergeSummaryItems(existing []*models.SummaryItem, new []*models.SummaryItem
return itemList
}
func getHash(times []time.Time, user *models.User) string {
digest := md5.New()
for _, t := range times {
digest.Write([]byte(strconv.Itoa(int(t.Unix()))))
}
digest.Write([]byte(user.ID))
return string(digest.Sum(nil))
}

2
services/user.go
View File

@ -10,6 +10,8 @@ type UserService struct {
Db *gorm.DB
}
func (srv *UserService) Init() {}
func (srv *UserService) GetUserById(userId string) (*models.User, error) {
u := &models.User{}
if err := srv.Db.Where(&models.User{ID: userId}).First(u).Error; err != nil {

44
static/assets/app.css Normal file
View File

@ -0,0 +1,44 @@
body {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
color: #666;
}
h1 {
margin-bottom: 10px;
}
h3 {
margin: 10px 0 20px 0;
}
.grid-container {
width: 75%;
display: grid;
grid-template-areas: 'header header header' 'sec1 sec1 sec2' 'sec1 sec1 sec3' 'sec1 sec1 sec4' 'footer footer footer';
grid-gap: 10px;
visibility: hidden;
}
.projects-container {
grid-area: sec1
}
.os-container {
grid-area: sec2
}
.editor-container {
grid-area: sec3
}
.language-container {
grid-area: sec4
}
.header-container {
grid-area: header
}
.input {
width: 300px;
}

167
static/assets/app.js Normal file
View File

@ -0,0 +1,167 @@
const SHOW_TOP_N = 10
const projectsCanvas = document.getElementById("chart-projects")
const osCanvas = document.getElementById("chart-os")
const editorsCanvas = document.getElementById("chart-editor")
const languagesCanvas = document.getElementById("chart-language")
let charts = []
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10)
var hours = Math.floor(sec_num / 3600)
var minutes = Math.floor((sec_num - (hours * 3600)) / 60)
var seconds = sec_num - (hours * 3600) - (minutes * 60)
if (hours < 10) {
hours = '0' + hours
}
if (minutes < 10) {
minutes = '0' + minutes
}
if (seconds < 10) {
seconds = '0' + seconds
}
return hours + ':' + minutes + ':' + seconds
}
function draw() {
let titleOptions = {
display: true,
fontSize: 16
}
function getTooltipOptions(key, type) {
return {
mode: 'single',
callbacks: {
label: (item) => {
let idx = type === 'pie' ? item.index : item.datasetIndex
let d = wakapiData[key][idx]
return `${d.key}: ${d.total.toString().toHHMMSS()}`
}
}
}
}
charts.forEach(c => c.destroy())
let projectChart = new Chart(projectsCanvas.getContext('2d'), {
type: 'horizontalBar',
data: {
datasets: wakapiData.projects
.slice(0, Math.min(SHOW_TOP_N, wakapiData.projects.length))
.map(p => {
return {
label: p.key,
data: [parseInt(p.total)],
backgroundColor: getRandomColor(p.key)
}
})
},
options: {
title: Object.assign(titleOptions, {text: `Projects (top ${SHOW_TOP_N})`}),
tooltips: getTooltipOptions('projects', 'bar'),
legend: {
display: false
}
}
})
let osChart = new Chart(osCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: wakapiData.operatingSystems
.slice(0, Math.min(SHOW_TOP_N, wakapiData.operatingSystems.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.operatingSystems.map(p => getRandomColor(p.key))
}],
labels: wakapiData.operatingSystems
.slice(0, Math.min(SHOW_TOP_N, wakapiData.operatingSystems.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, {text: `Operating Systems (top ${SHOW_TOP_N})`}),
tooltips: getTooltipOptions('operatingSystems', 'pie')
}
})
let editorChart = new Chart(editorsCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: wakapiData.editors
.slice(0, Math.min(SHOW_TOP_N, wakapiData.editors.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.editors.map(p => getRandomColor(p.key))
}],
labels: wakapiData.editors
.slice(0, Math.min(SHOW_TOP_N, wakapiData.editors.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, {text: `Editors (top ${SHOW_TOP_N})`}),
tooltips: getTooltipOptions('editors', 'pie')
}
})
let languageChart = new Chart(languagesCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: wakapiData.languages
.slice(0, Math.min(SHOW_TOP_N, wakapiData.languages.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.languages.map(p => getRandomColor(p.key))
}],
labels: wakapiData.languages
.slice(0, Math.min(SHOW_TOP_N, wakapiData.languages.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, {text: `Languages (top ${SHOW_TOP_N})`}),
tooltips: getTooltipOptions('languages', 'pie')
}
})
getTotal(wakapiData.operatingSystems)
document.getElementById('grid-container').style.visibility = 'visible'
charts = [projectChart, osChart, editorChart, languageChart]
}
function getTotal(data) {
let total = data.reduce((acc, d) => acc + d.total, 0)
document.getElementById("total-span").innerText = total.toString().toHHMMSS()
}
function getRandomColor(seed) {
seed = seed ? seed : '1234567';
Math.seedrandom(seed);
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// https://koddsson.com/posts/emoji-favicon/
const favicon = document.querySelector("link[rel=icon]");
if (favicon) {
const emoji = favicon.getAttribute("data-emoji");
if (emoji) {
const canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;
const ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText(emoji, 0, 64);
favicon.href = canvas.toDataURL();
}
}
window.addEventListener('load', function() {
draw()
})

288
static/index.html
View File

@ -1,288 +0,0 @@
<html>
<head>
<title>Coding Stats</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="icon" data-emoji="📊" type="image/png">
<style>
body {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
color: #666;
}
h1 {
margin-bottom: 10px;
}
h3 {
margin: 10px 0 20px 0;
}
.grid-container {
width: 75%;
display: grid;
grid-template-areas:
'header header header'
'sec1 sec1 sec2'
'sec1 sec1 sec3'
'sec1 sec1 sec4'
'footer footer footer';
grid-gap: 10px;
visibility: hidden;
}
.projects-container {
grid-area: sec1
}
.os-container {
grid-area: sec2
}
.editor-container {
grid-area: sec3
}
.language-container {
grid-area: sec4
}
.header-container {
grid-area: header
}
.input {
width: 300px;
}
</style>
</head>
<body>
<h1>Wakapi</h1>
<h3>Your Coding Statistics Dashboard</h3>
<div class="input-container" id="input-container">
<div>
<label for="user">User: </label>
<input type="text" class="input" id="user-input" name="user" placeholder="Enter Username">
<label for="pw">Password: </label>
<input type="password" class="input" id="password-input" name="pw" placeholder="Enter Password">
</div>
<div style="margin-top: 10px">
<span>Shortcuts: </span>
<button onclick="load('today', true)">Today (live)</button>
<button onclick="load('day', false)">Yesterday</button>
<button onclick="load('week', false)">This Week</button>
<button onclick="load('month', false)">This Month</button>
<button onclick="load('year', false)">This Year</button>
<button onclick="load('any', false)">All Time</button>
</div>
</div>
<div class="grid-container" id="grid-container">
<div class="header-container">
<p>
<strong>Total:</strong> <span id="total-span"></span><br>
</p>
</div>
<div class="projects-container" id="projects-container">
<canvas id="chart-projects"></canvas>
</div>
<div class="os-container" id="os-container">
<canvas id="chart-os"></canvas>
</div>
<div class="editor-container" id="editor-container">
<canvas id="chart-editor"></canvas>
</div>
<div class="language-container" id="language-container">
<canvas id="chart-language"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.4/seedrandom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script>
const SHOW_TOP_N = 10
const projectsCanvas = document.getElementById("chart-projects")
const osCanvas = document.getElementById("chart-os")
const editorsCanvas = document.getElementById("chart-editor")
const languagesCanvas = document.getElementById("chart-language")
let charts = []
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) { hours = "0" + hours; }
if (minutes < 10) { minutes = "0" + minutes; }
if (seconds < 10) { seconds = "0" + seconds; }
return hours + ':' + minutes + ':' + seconds;
}
function load(interval, live) {
let user = document.getElementById('user-input').value
let password = document.getElementById('password-input').value
let hashed = btoa(`${user}:${password}`)
fetch(`${window.location.href}/api/summary?interval=${interval}&live=${live}`, {
method: 'GET',
headers: {
'Accept': 'application/json',
'Authorization': `Basic ${hashed}`
}
})
.then((res) => {
if (res.status === 401) {
console.error('Unauthorized')
alert('Unauthorized')
}
return res
})
.then((res) => res.json())
.then((json) => draw(json))
.catch(err => console.error(err));
}
function draw(data) {
let titleOptions = {
display: true,
fontSize: 16
}
function getTooltipOptions(key, type) {
return {
mode: 'single',
callbacks: {
label: (item) => {
let idx = type === 'pie' ? item.index : item.datasetIndex
let d = data[key][idx]
return `${d.key}: ${d.total.toString().toHHMMSS()}`
}
}
}
}
charts.forEach(c => c.destroy())
let projectChart = new Chart(projectsCanvas.getContext('2d'), {
type: 'horizontalBar',
data: {
datasets: data.projects
.slice(0, Math.min(SHOW_TOP_N, data.projects.length))
.map(p => {
return {
label: p.key,
data: [parseInt(p.total)],
backgroundColor: getRandomColor(p.key)
}
})
},
options: {
title: Object.assign(titleOptions, { text: `Projects (top ${SHOW_TOP_N})` }),
tooltips: getTooltipOptions('projects', 'bar'),
legend: {
display: false
}
}
});
let osChart = new Chart(osCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: data.operating_systems
.slice(0, Math.min(SHOW_TOP_N, data.operating_systems.length))
.map(p => parseInt(p.total)),
backgroundColor: data.operating_systems.map(p => getRandomColor(p.key))
}],
labels: data.operating_systems
.slice(0, Math.min(SHOW_TOP_N, data.operating_systems.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, { text: `Operating Systems (top ${SHOW_TOP_N})` }),
tooltips: getTooltipOptions('operating_systems', 'pie')
}
});
let editorChart = new Chart(editorsCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: data.editors
.slice(0, Math.min(SHOW_TOP_N, data.editors.length))
.map(p => parseInt(p.total)),
backgroundColor: data.editors.map(p => getRandomColor(p.key))
}],
labels: data.editors
.slice(0, Math.min(SHOW_TOP_N, data.editors.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, { text: `Editors (top ${SHOW_TOP_N})` }),
tooltips: getTooltipOptions('editors', 'pie')
}
});
let languageChart = new Chart(languagesCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: data.languages
.slice(0, Math.min(SHOW_TOP_N, data.languages.length))
.map(p => parseInt(p.total)),
backgroundColor: data.languages.map(p => getRandomColor(p.key))
}],
labels: data.languages
.slice(0, Math.min(SHOW_TOP_N, data.languages.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, { text: `Languages (top ${SHOW_TOP_N})` }),
tooltips: getTooltipOptions('languages', 'pie')
}
});
getTotal(data.operating_systems)
document.getElementById('grid-container').style.visibility = 'visible';
charts = [projectChart, osChart, editorChart, languageChart]
}
function getRandomColor(seed) {
seed = seed ? seed : '1234567';
Math.seedrandom(seed);
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getTotal(data) {
let total = data.reduce((acc, d) => acc + d.total, 0)
document.getElementById("total-span").innerText = total.toString().toHHMMSS()
}
// https://koddsson.com/posts/emoji-favicon/
const favicon = document.querySelector("link[rel=icon]");
if (favicon) {
const emoji = favicon.getAttribute("data-emoji");
if (emoji) {
const canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;
const ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText(emoji, 0, 64);
favicon.href = canvas.toDataURL();
}
}
</script>
</body>
</html>

14
utils/template.go Normal file
View File

@ -0,0 +1,14 @@
package utils
import (
"encoding/json"
"html/template"
)
func Json(data interface{}) template.JS {
d, err := json.Marshal(data)
if err != nil {
return ""
}
return template.JS(d)
}

54
views/index.tpl.html Normal file
View File

@ -0,0 +1,54 @@
<html>
<head>
<title>Coding Stats</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="icon" data-emoji="📊" type="image/png">
<link rel="stylesheet" href="/assets/app.css">
</head>
<body>
<h1>Wakapi</h1>
<h3>Your Coding Statistics Dashboard</h3>
<div>
<a href="/?interval=today">Today (live)</a>
<a href="/?interval=day">Yesterday</a>
<a href="/?interval=week">This Week</a>
<a href="/?interval=month">This Month</a>
<a href="/?interval=year">This Year</a>
<a href="/?interval=any">All Time</a>
</div>
<div class="grid-container" id="grid-container">
<div class="header-container">
<p>
<strong>Total:</strong> <span id="total-span"></span><br>
</p>
</div>
<div class="projects-container" id="projects-container">
<canvas id="chart-projects"></canvas>
</div>
<div class="os-container" id="os-container">
<canvas id="chart-os"></canvas>
</div>
<div class="editor-container" id="editor-container">
<canvas id="chart-editor"></canvas>
</div>
<div class="language-container" id="language-container">
<canvas id="chart-language"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.4/seedrandom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script>
let wakapiData = {}
wakapiData.projects = {{ json .Projects }}
wakapiData.operatingSystems = {{ .OperatingSystems | json }}
wakapiData.editors = {{ .Editors | json }}
wakapiData.languages = {{ .Languages | json }}
</script>
<script src="/assets/app.js"></script>
</body>
</html>