oysteikt-skolearbeid/IT2805
oysteikt-skolearbeid
/
IT2805
1
0
Fork 0
Code Issues Pull Requests Activity

Last changes

This commit is contained in:
Oystein Kristoffer Tveit 2020-10-27 15:19:15 +01:00
parent b335ec2b16
commit c18355e9e5
2 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
Exercise 8/bar-chart-with-bars.html
View File

@ -42,11 +42,9 @@
* @param {number} step - Number to add to y axis
*/
const drawNLines = (n, step) => {
for (let i = 1; i <= n; i++) {
const y = canvas.height * (n - i + 1 ) / (n+1);
const text = step * i;
drawLineWithText(text, 50, y, canvas.width - 100, y);
}
const yOffset = i => canvas.height * (n - i + 1 ) / (n+1);
for (let i = 1; i <= n; i++)
drawLineWithText(step * i, 50, yOffset(i), canvas.width - 100, yOffset(i));
}
/**
@ -72,15 +70,13 @@
* @yields {string} A color
*/
function* colorCycler(colors) {
let i = 0;
while (true) {
yield colors[i];
i = (i + 1) % colors.length
}
while (true)
for (color of colors)
yield color;
}
/**
* Draw a legend entry on the canvas
* Draw a legend on the canvas
*
* @param {string[]} properties - An array of labels
* @param {[string[]} colorList - An array of colors to cycle when making labels
@ -89,14 +85,13 @@
const colors = colorCycler(colorList);
const drawLabel = (text, color, y) => {
drawText(text, canvas.width-45, y + 15)
drawText(text, canvas.width - 45, y + 15);
drawRectangle(canvas.width - 90, y, 40, 20, color);
}
const yOffset = canvas.height / 12
for (i in properties) {
drawLabel(properties[i], colors.next().value, yOffset+30*i);
}
const yOffset = i => canvas.height / 12 + 30 * i;
for (i in properties)
drawLabel(properties[i], colors.next().value, yOffset(i));
}
/**
@ -119,19 +114,22 @@
*/
const drawBars = ({x, width, adjustY, object, sep, colorList}) => {
const colors = colorCycler(colorList);
const values = Object.values(object)
const values = Object.values(object);
const drawBar = (value, x) => {
const y = adjustY(value);
const localWidth = width / (values.length) - sep;
const localHeight = canvas.height - y;
drawRectangle(x, y, localWidth, localHeight, colors.next().value);
}
const drawBar = (value, x) =>
drawRectangle(
x,
adjustY(value),
width / (values.length) - sep,
canvas.height - adjustY(value),
colors.next().value
);
const xOffset = i => x + i * (sep + width / (values.length));
for (let i=0; i<values.length; i++)
drawBar(values[i], xOffset(i));
for (let i=0; i<values.length; i++) {
const xOffset = x + i * (sep + width / (values.length));
drawBar(values[i], xOffset);
}
colors.return();
}
@ -149,7 +147,7 @@
const initialXOffset = 50 + columnSetWidth;
const xOffset = 2*columnSetWidth;
for (i in data) {
for (i in data)
drawBars({
x: initialXOffset + i*xOffset,
width: columnSetWidth,
@ -158,7 +156,6 @@
sep: 5,
colorList: colorList
});
}
}
/**
@ -174,7 +171,7 @@
const colorList = ['red', 'blue'];
drawLabels(Object.getOwnPropertyNames(data[0]), colorList);
const adjustY = val => canvas.height * ( 1 - val / (step * (range/step + 1)));
const adjustY = val => canvas.height * ( 1 - val / (range + step));
drawColumnSet(data, colorList, adjustY);
}

2
Exercise 8/bar-chart-with-labels.html
View File

@ -80,7 +80,7 @@
}
/**
* Draw a legend entry on the canvas
* Draw a legend on the canvas
*
* @param {string[]} properties - An array of labels
* @param {[string[]} colorList - An array of colors to cycle when making labels