From 51c0275ca9b237d68bbeed8842675bbcdf0bb0c7 Mon Sep 17 00:00:00 2001 From: freyavs Date: Mon, 10 Oct 2022 14:05:18 +0200 Subject: [PATCH 1/4] feat: convert to typescript --- .../javascripts/{punchcard.js => punchcard.ts} | 16 +++++++++------- app/javascript/packs/visualisations.js | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) rename app/assets/javascripts/{punchcard.js => punchcard.ts} (81%) diff --git a/app/assets/javascripts/punchcard.js b/app/assets/javascripts/punchcard.ts similarity index 81% rename from app/assets/javascripts/punchcard.js rename to app/assets/javascripts/punchcard.ts index 33cd8e8512..7c0baf5e11 100644 --- a/app/assets/javascripts/punchcard.js +++ b/app/assets/javascripts/punchcard.ts @@ -4,12 +4,14 @@ const containerSelector = "#punchcard-container"; const margin = { top: 10, right: 10, bottom: 20, left: 70 }; const labelsX = [...Array(24).keys()]; -function initPunchcard(url) { +type chartType = d3.Selection; + +function initPunchcard(url: string): void { // If this is defined outside of a function, the locale always defaults to "en". const labelsY = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"].map(k => I18n.t(`js.weekdays.long.${k}`)); const container = d3.select(containerSelector); - const width = container.node().getBoundingClientRect().width; + const width = (container.node() as Element).getBoundingClientRect().width; const innerWidth = width - margin.left - margin.right; const unitSize = innerWidth / 24; const innerHeight = unitSize * 7; @@ -37,7 +39,7 @@ function initPunchcard(url) { .attr("y", innerHeight / 2) .style("text-anchor", "middle"); - const processor = data => { + const processor = function (data): void { if (data["status"] === "not available yet") { setTimeout(() => d3.json(url).then(processor), 1000); return; @@ -50,18 +52,18 @@ function initPunchcard(url) { const xAxis = d3.axisBottom(x) .ticks(24) .tickSize(0) - .tickFormat((d, i) => labelsX[i]) + .tickFormat((_d, i) => (labelsX[i].toString())) .tickPadding(10); const yAxis = d3.axisLeft(y) .ticks(7) .tickSize(0) - .tickFormat((d, i) => labelsY[i]) + .tickFormat((_d, i) => labelsY[i]) .tickPadding(10); renderAxes(xAxis, yAxis, chart, innerHeight); } -function renderAxes(xAxis, yAxis, chart, innerHeight) { +function renderAxes(xAxis: d3.Axis, yAxis: d3.Axis, chart: chartType, innerHeight: number): void { chart.append("g") .attr("class", "axis") .attr("transform", `translate(0, ${innerHeight})`) @@ -75,7 +77,7 @@ function renderAxes(xAxis, yAxis, chart, innerHeight) { .style("display", "none"); } -function renderCard(data, unitSize, chart, x, y) { +function renderCard(data: Array<[string, number]>, unitSize: number, chart: chartType, x: d3.ScaleLinear, y: d3.ScaleLinear): void { const maxVal = d3.max(data, d => d[1]); const radius = d3.scaleSqrt() .domain([0, maxVal]) diff --git a/app/javascript/packs/visualisations.js b/app/javascript/packs/visualisations.js index 748fbb4be5..2666d62757 100644 --- a/app/javascript/packs/visualisations.js +++ b/app/javascript/packs/visualisations.js @@ -1,5 +1,5 @@ import { initHeatmap } from "heatmap.ts"; -import { initPunchcard } from "punchcard.js"; +import { initPunchcard } from "punchcard.ts"; window.dodona.initHeatmap = initHeatmap; window.dodona.initPunchcard = initPunchcard; From 6fc75300eba339d6e9ee2ac9d2535a3539c0e3a4 Mon Sep 17 00:00:00 2001 From: freyavs Date: Mon, 10 Oct 2022 15:24:53 +0200 Subject: [PATCH 2/4] feat: format x-axis as hours --- app/assets/javascripts/punchcard.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/punchcard.ts b/app/assets/javascripts/punchcard.ts index 7c0baf5e11..89bef69787 100644 --- a/app/assets/javascripts/punchcard.ts +++ b/app/assets/javascripts/punchcard.ts @@ -2,7 +2,6 @@ import * as d3 from "d3"; const containerSelector = "#punchcard-container"; const margin = { top: 10, right: 10, bottom: 20, left: 70 }; -const labelsX = [...Array(24).keys()]; type chartType = d3.Selection; @@ -52,7 +51,11 @@ function initPunchcard(url: string): void { const xAxis = d3.axisBottom(x) .ticks(24) .tickSize(0) - .tickFormat((_d, i) => (labelsX[i].toString())) + .tickFormat((hour: d3.NumberValue) => { + const now = new Date(); + now.setHours(hour.valueOf(), 0, 0, 0); + return d3.timeFormat("%H:%M")(now); + }) .tickPadding(10); const yAxis = d3.axisLeft(y) .ticks(7) From 7e391459c1540334acd663fa8e2b60ae9359a397 Mon Sep 17 00:00:00 2001 From: freyavs Date: Wed, 12 Oct 2022 14:06:15 +0200 Subject: [PATCH 3/4] chore: apply suggestions --- app/assets/javascripts/punchcard.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/punchcard.ts b/app/assets/javascripts/punchcard.ts index 89bef69787..1fa41246c5 100644 --- a/app/assets/javascripts/punchcard.ts +++ b/app/assets/javascripts/punchcard.ts @@ -38,7 +38,7 @@ function initPunchcard(url: string): void { .attr("y", innerHeight / 2) .style("text-anchor", "middle"); - const processor = function (data): void { + const processor = (data): void => { if (data["status"] === "not available yet") { setTimeout(() => d3.json(url).then(processor), 1000); return; @@ -80,7 +80,7 @@ function renderAxes(xAxis: d3.Axis, yAxis: d3.Axis, unitSize: number, chart: chartType, x: d3.ScaleLinear, y: d3.ScaleLinear): void { +function renderCard(data: Array<[string, number]>, unitSize: number, chart: chartType, x: d3.ScaleLinear, y: d3.ScaleLinear): void { const maxVal = d3.max(data, d => d[1]); const radius = d3.scaleSqrt() .domain([0, maxVal]) From f6c9a6d2b28c25fde371e2ce092dfff30b782a65 Mon Sep 17 00:00:00 2001 From: freyavs Date: Wed, 12 Oct 2022 14:56:09 +0200 Subject: [PATCH 4/4] chore: change hour formatting for x-axis --- app/assets/javascripts/punchcard.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/assets/javascripts/punchcard.ts b/app/assets/javascripts/punchcard.ts index 1fa41246c5..0518880ac9 100644 --- a/app/assets/javascripts/punchcard.ts +++ b/app/assets/javascripts/punchcard.ts @@ -51,11 +51,7 @@ function initPunchcard(url: string): void { const xAxis = d3.axisBottom(x) .ticks(24) .tickSize(0) - .tickFormat((hour: d3.NumberValue) => { - const now = new Date(); - now.setHours(hour.valueOf(), 0, 0, 0); - return d3.timeFormat("%H:%M")(now); - }) + .tickFormat(hour => `${hour < 10 ? "0" : ""}${hour}:00`) .tickPadding(10); const yAxis = d3.axisLeft(y) .ticks(7)