Skip to content

Commit fcc84c8

Browse files
parmentelatparmentelat
committed
more statistics: a button to download data as csv
1 parent 61188b9 commit fcc84c8

11 files changed

+158
-70
lines changed

‎assets/altair/altair-config-day.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/stats/day"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by day)"}, "field": "period-middle", "timeUnit": "yearmonthdate", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_1", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (day)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}
1+
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/api/stats/period/day"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by day)"}, "field": "period-middle", "timeUnit": "yearmonthdate", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_1", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (day)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}

‎assets/altair/altair-config-month.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/stats/month"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by month)"}, "field": "period-middle", "timeUnit": "yearmonth", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_3", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (month)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}
1+
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/api/stats/period/month"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by month)"}, "field": "period-middle", "timeUnit": "yearmonth", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_3", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (month)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}

‎assets/altair/altair-config-quarter.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/stats/quarter"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by quarter)"}, "field": "period-middle", "timeUnit": "yearquarter", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_4", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (quarter)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}
1+
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/api/stats/period/quarter"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by quarter)"}, "field": "period-middle", "timeUnit": "yearquarter", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_4", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (quarter)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}

‎assets/altair/altair-config-week.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/stats/week"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by week)"}, "field": "period-middle", "timeUnit": "yearweek", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_2", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (week)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}
1+
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/api/stats/period/week"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by week)"}, "field": "period-middle", "timeUnit": "yearweek", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_2", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (week)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}

‎assets/altair/altair-config-year.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/stats/year"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by year)"}, "field": "period-middle", "timeUnit": "year", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_5", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (year)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}
1+
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "legend": {"cornerRadius": 10, "fillColor": "#EEEEEE", "labelFontSize": 18, "orient": "top-left", "padding": 10, "strokeColor": "gray", "titleFontSize": 20}}, "data": {"url": "/api/stats/period/year"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "legend": {"symbolSize": 500, "title": "by Family"}, "scale": {"domain": ["admin", "academia/diana", "academia/slices", "academia/others", "industry", "unknown"], "range": ["black", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#377eb8"]}, "title": "Family", "type": "nominal"}, "order": {"field": "family-order", "sort": "ascending", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by year)"}, "field": "period-middle", "timeUnit": "year", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_5", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "title": "Usage by family (year)", "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}

‎assets/altair/vega-embed-issue.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}}, "data": {"url": "/stats/quarter"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by quarter)"}, "field": "period-middle", "timeUnit": "yearquarter", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_4", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}
1+
{"config": {"view": {"continuousWidth": 300, "continuousHeight": 300}}, "data": {"url": "/api/stats/period/quarter"}, "mark": {"type": "bar"}, "encoding": {"color": {"field": "family", "type": "nominal"}, "tooltip": [{"field": "name", "type": "nominal"}, {"field": "period", "type": "nominal"}, {"field": "family", "type": "nominal"}, {"aggregate": "sum", "field": "duration", "type": "quantitative"}], "x": {"axis": {"title": "Period (by quarter)"}, "field": "period-middle", "timeUnit": "yearquarter", "type": "temporal"}, "y": {"aggregate": "sum", "field": "duration", "title": "Duration (hours)", "type": "quantitative"}}, "height": "container", "params": [{"name": "param_4", "select": {"type": "interval", "encodings": ["x", "y"]}, "bind": "scales"}], "width": "container", "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json"}

‎markdown/stats.md‎

Lines changed: 57 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ responsiveness is not perfect, please reload the page after resizing
2323
<label for="until">until month:</label><br>
2424
<input type="month" id="until" name="until"><br>
2525
</span>
26+
2627
<span>
2728
<label for="by-period">by:</label>
2829
<select name="by-period" id="by-period">
@@ -33,7 +34,10 @@ responsiveness is not perfect, please reload the page after resizing
3334
<option value="day">Day</option>
3435
</select>
3536
</span>
36-
<input type="submit" value="Submit">
37+
<div id="submits">
38+
<input type="submit" value="Submit">
39+
<span id="csv">csv</span>
40+
</div>
3741
</form>
3842

3943
</div>
@@ -101,11 +105,28 @@ responsiveness is not perfect, please reload the page after resizing
101105
margin-bottom: 0;
102106
margin-right: 1em;
103107
}
104-
input[type="submit"] {
108+
#submits {
109+
display: flex;
110+
flex-flow: column nowrap;
111+
align-items: stretch;
105112
margin-left: 1em;
106-
border-radius: 8px;
107-
padding-top: 5px;
108-
background-color: #A0D683;
113+
114+
input[type="submit"] {
115+
padding-top: 5px;
116+
padding-bottom: 0px;
117+
border-width: 0px;
118+
border-radius: 8px;
119+
background-color: #A0D683;
120+
}
121+
#csv {
122+
width: 100%;
123+
text-align: center;
124+
margin-top: 4px;
125+
background-color: #E6C767;
126+
border-width: 0px;
127+
border-radius: 8px;
128+
cursor: alias;
129+
}
109130
}
110131
}
111132

@@ -133,14 +154,10 @@ responsiveness is not perfect, please reload the page after resizing
133154

134155
<script>
135156
const displayStatsFromDialog = () => {
136-
const byBin = document.getElementById("by-period").value;
157+
const byPeriod = document.getElementById("by-period").value;
137158
const fromMonth = document.getElementById("from").value;
138159
const untilMonth = document.getElementById("until").value;
139-
console.log("from", fromMonth, "until", untilMonth, "by", byBin);
140-
// if (fromMonth === "") { alert("Please provide a from date"); return; }
141-
// if (untilMonth === "") { alert("Please provide a until date"); return; }
142-
console.log("displayStatsFromDialog", byBin, fromMonth, untilMonth)
143-
displayStats(vegaEmbed, byBin, fromMonth, untilMonth);
160+
displayStats(vegaEmbed, byPeriod, fromMonth, untilMonth);
144161
}
145162

146163
const displayStats = (vegaEmbed, byPeriod, fromMonth, untilMonth) => {
@@ -151,7 +168,7 @@ responsiveness is not perfect, please reload the page after resizing
151168
.then(spec => {
152169
spec.data.url += `/${fromMonth}`
153170
if (untilMonth) { spec.data.url += `/${untilMonth}` }
154-
console.log(spec)
171+
// console.log(spec)
155172

156173
const embedOpt = { mode: "vega-lite" };
157174

@@ -171,10 +188,36 @@ responsiveness is not perfect, please reload the page after resizing
171188
.catch((error) => showError(el, error));
172189
})
173190
}
191+
192+
const download = (download_as, text) => {
193+
const element = document.createElement('a')
194+
element.setAttribute(
195+
'href',
196+
'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
197+
element.setAttribute('download', download_as)
198+
element.style.display = 'none'
199+
document.body.appendChild(element)
200+
element.click()
201+
document.body.removeChild(element)
202+
}
203+
204+
const dowloadCsv = () => {
205+
const fromMonth = document.getElementById("from").value
206+
const untilMonth = document.getElementById("until").value || "now"
207+
const url = `/api/stats/slice/csv/${fromMonth}/${untilMonth}`
208+
fetch (url)
209+
.then(response => response.text())
210+
.then(
211+
text => download(
212+
`r2lab-stats-${fromMonth}-${untilMonth}.csv`, text))
213+
}
214+
174215
window.addEventListener("DOMContentLoaded", () => {
175216
displayStatsFromDialog()
217+
document.getElementById("by-period")
218+
.addEventListener("change", displayStatsFromDialog)
219+
document.getElementById("csv")
220+
.addEventListener("click", dowloadCsv)
176221
})
177-
// temporary, while we can't choose dates yet
178-
document.getElementById("by-period").addEventListener("change", displayStatsFromDialog)
179222
// document.querySelector('input[type="submit"]').style.display="none"
180223
</script>

0 commit comments

Comments
 (0)