A simple doodling project β probably not that useful, but I enjoyed creating it π€·
I liked the way Wendover Productions displayed the HDI score in their video βThe News You Missed in 2021β, so of course I decided to create a widget like this for VueJS π
Here's a demo:
And here's how I made it:
To minimise the initial bootsrapping, I picked a framework I already know and absolutely love: Nuxt. Its upcoming version, v3, cuts all the bootstrapping crap to the minimum, while remaining highly flexible. All I had to do to start working were those commands:
npx nuxi init ProgressBar
cd ProgressBar
yarn
yarn dev -o
What they do is fetch a project template, install dependencies, start a development server and open http://localhost:3000/
in the browser.
Bootrapping done; now I can focus on work. It's a simple project, so only two files will be relevant:
app.vue
is the main entrypoint, the homepage. It contains what you see in the demo: just some introduction and lots of <AvrisProgressBar/>
components embedded to showcase their usage. I won't focus here on the app.vue
code, because it's really straightforward β you can check it out here. Sidenote: if I ever need to add multiple pages, I'll just create a routes
directory and move app.vue
to the appropriate structure inside of that folder, it's as simple as that! β and for the simplest case it's all already preconfigured and working!components/AvrisProgressBar.vue
is the actual component I'll be working on. Nuxt automatically configures everything so that throughout the application you can simply use the <AvrisProgressBar/>
tag.The template is really simple:
<template>
<div class="outer" :style="`background-color: ${colourOuter}`">
<div class="inner" :style="`width: ${percent}%; background-color: ${colourInner}`"
role="progressbar" :aria-valuenow="percent" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</template>
All we need is two divs:
And here's how I styled them:
<style scoped>
.outer {
--apb-height: 16px;
--apb-border-width: 0px;
--apb-border-color: #aaa;
}
.outer {
width: 100%;
border-radius: calc(var(--apb-height) / 2);
height: var(--apb-height);
margin: 4px;
padding: calc(var(--apb-height) / 4 - var(--apb-border-width));
display: inline-block;
border: var(--apb-border-width) solid var(--apb-border-color);
}
.outer .inner {
height: calc(var(--apb-height) / 2);
border-radius: calc(var(--apb-height) / 2);
}
</style>
I used CSS variables so that each usage of this widget can override the default height and border.
Now all we need to do is calculate percent
, colourOuter
and colourInner
. Easy!
Let's start with declaring props
of our component:
<script>
export default {
props: {
value: { required: true },
min: { 'default': 0 },
max: { 'default': 1000 },
colours: { 'default': () => {
return [
'#ff0000',
'#ffff00',
'#00ff00',
];
}}
},
};
</script>
We expect the user of our widget to provide a value (eg. <AvrisProgressBar :value="123"/>
) and we allow them to overwrite the default values of min
(0), max
(1000) and colours
(red, yellow, green) with their own (eg. <AvrisProgressBar :value="69" :min="24" :max="169"/>
).
Now let's calculate the percent
. It's pretty simple: we divide the current progress by the full range, and multiply by 100%. If min == 0
, the formula is trivial: 100% * value / max
. But in any other case we should add the min
to the formula: 100% * (value - min) / (max - min)
. Plus let's cut it at no less than 0 and no more than 100, just in case the user provides some weird input. Here's a Vue code that implements that:
computed: {
percent() {
let percent = 100 * (this.value - this.min) / (this.range);
if (percent < 0) { return 0; }
if (percent > 100) { return 100; }
return percent;
},
range() {
return this.max - this.min;
},
},
And for the remaining two properties that we need, let's first mock their values to simply be green and black respectively, just so that we can validate that percent
works well without worrying about the colours.
computed: {
colourOuter() {
return '#00ff00';
},
colourInner() {
return '#000000';
},
},
Of course, in a full-blown, production-ready library, we should cover a lot more ground than in my simple doodle: supporting multiple colour models, implementing colour mixing algorythms that adjust for human perception, etc. But here I wanted to keep it simple:
#C71585
),Actually, that's my main purpose for creating this widget β I'm curious whether such a simple setup would give a visually pleasant effect. Spoiler alert: it's not perfect, but it works well enough indeed!
So now, let's compute two more values that will help us in further calculations. coloursHighpoints
will be a map between the primary colours and the values where they should appear. In the default case, we have n = 3
colours (red, yellow, green) and a range from 0 to 1000, so to spread them out evenly we'd need red to be at 0, yellow at 500 and green at 1000. The code below splits the available range into n - 1
sections (so in this case sections have a width of 500) and then produces points at: min
, min + range
, min + 2*range
, β¦ So in our case the methods retuns a map like this: {0: "#ff0000", 500: "#ffff00", 1000: "#00ff00"}
:
coloursHighpoints() {
const highpoints = {};
const sectionRange = this.range / (this.colours.length - 1);
for (let i in this.colours) {
const point = parseInt(this.min + i * sectionRange, 10);
highpoints[point] = this.colours[i];
}
return highpoints;
},
The next step would be to figure out which colours to mix for a given value. Let's say our value = 400
. We know it's between 0 / red and 500 / yellow, so we expect it be an orange-ish yellow. But how do we put that into code?
We need a method that will return an object telling us what's the closest highpoint before our value, and what's the closest one after our value. Let's iterate over the highpoints and keep assigning their values to the variable left
as long as it's smaller than this.value
. As soon as a highpoint appears that's higher than this.value
, we assign it to the right
variable. And then let's handle the edge case of value >= max
. Here's the code for that, and it produces the following output for our parameters: {left: 0, right: 500}
.
coloursBetween() {
let left = null;
let right = null;
for (let val of Object.keys(this.coloursHighpoints)) {
val = parseInt(val);
if (val <= this.value) {
left = val;
continue;
}
right = val;
break;
}
if (!right) {
right = left;
}
return {left, right};
},
Before we actually calculate our colours, let's prepare some helpers that we'll need:
hexToDec
and decToHex
β simply converting the number base and adding some hex-colour specific padding,splitColour
: turns #C71585
into [199, 21, 133]
,mergeColour
: turns [199, 21, 133]
into #C71585
,adjustValue
: takes an RGB component and increases it by a given percent
,shadeColour
: splits a colour into components, adjusts their value and merges them back into a colour,mixColours
: takes two colours and a ratio in which they should be mixed, splits them into components, for each of them calculates a weighted average, and then merges them back into a colour.methods: {
hexToDec(hex) {
return parseInt(hex, 16);
},
decToHex(dec) {
return parseInt(dec, 10).toString(16).padStart(2, '0');
},
splitColour(colour) {
return [
this.hexToDec(colour.substring(1, 3)),
this.hexToDec(colour.substring(3, 5)),
this.hexToDec(colour.substring(5, 7)),
];
},
mergeColour(r, g, b) {
return `#${this.decToHex(r)}${this.decToHex(g)}${this.decToHex(b)}`;
},
adjustValue(val, percent) {
val = parseInt(val * (100 + percent) / 100);
if (val > 255) { val = 255; }
if (val < 0) { val = 0; }
return val;
},
shadeColour(colour, percent) {
const [r, g, b] = this.splitColour(colour);
return this.mergeColour(
this.adjustValue(r, percent),
this.adjustValue(g, percent),
this.adjustValue(b, percent),
);
},
mixColours(colour1, colour2, ratio) {
const [r1, g1, b1] = this.splitColour(colour1);
const [r2, g2, b2] = this.splitColour(colour2);
return this.mergeColour(
r1 * ratio + r2 * (1 - ratio),
g1 * ratio + g2 * (1 - ratio),
b1 * ratio + b2 * (1 - ratio),
);
},
},
And now it's finally time to put it all together.
To calculate colourOuter
we take the coloursBetween
and we calculate how far away from left
is our value. In our case that's (value - left) / (right - left) = (400 - 0) / (500 - 0) = 400 / 500 = 0.8
. We will use that value as our weight when calculating the weighted average between the colour in the left
highpoint and the colour in the right
highpoint.
And colourInner
will just be just colourOuter
darkened by 30%.
colourOuter() {
const {left, right} = this.coloursBetween;
const ratio = (this.value - left) / ((right - left) || 1);
return this.mixColours(
this.coloursHighpoints[left],
this.coloursHighpoints[right],
1 - ratio,
);
},
colourInner() {
return this.shadeColour(this.colourOuter, -30);
},
And that's it, we're done!
]]>