-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
48 lines (45 loc) · 2.07 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
file = './api/data.json'
const chart = document.querySelector('.graph')
const days = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]
const currentDay = new Date().getDay()
function createChart() {
getData(file)
async function getData(file) {
const rawData = await fetch(file)
const JSONdata = await rawData.json()
for (let i = 0; i < JSONdata.length; i++) {
const chartData = JSONdata[i];
// create chart-wrapper
const chartWrapDiv = document.createElement('div')
chartWrapDiv.style = `display:grid; justify-items:center; color:var(--medium-brown);`
chart.appendChild(chartWrapDiv)
chartWrapDiv.classList.add("chart-wrapper")
//create actual chart
const displayAmount = document.createElement('div')
displayAmount.classList.add("tooltip")
chartWrapDiv.append(displayAmount)
const chartDiv = document.createElement('div');
const day = document.createElement('p');
day.innerText = chartData.day;
day.style = `margin-bottom:10px;`
chartWrapDiv.appendChild(chartDiv)
chartWrapDiv.appendChild(day)
chartDiv.classList.add('chart')
const realAmount = chartData.amount + 5
barHeight = (realAmount / 7).toFixed(9)
if (days[currentDay] === day.innerText) {
chartDiv.style = `height:${ barHeight }em;background-color:var(--cyan);`
} else {
chartDiv.style = `height:${ barHeight }em;background-color:var(--soft-red);`
}
chartDiv.addEventListener('mouseover', () => {
displayAmount.innerHTML = "$" + chartData.amount
displayAmount.style = `margin-bottom: 10px;padding: 5px 5px;border-radius: 1vmax;font-size: 18px;background-color: var(--dark-brown); color:white; font-weight:700;`
})
chartDiv.addEventListener('mouseout', () => {
displayAmount.style = `display:none;`
})
}
}
}
createChart()