progressbar.js | multiple progress bar control and tiny chart | Runtime Evironment library

For each .round div, there is a data-value(%) which is static at the moment, but eventually going to be dynamic. Trying to call it in my JS for if data-value <= 0.50 display the bar as red, if data-value >0.50 && data-value <=0.75 display the bar as yellow and if data-value > 0.75 display it as green to call that value and wrap the Circle function in a conditional, how would I go about that?

I tried the following and it told Cannot read property 'getAttribute' of null: I tried this.getAttribute('data-value');

This is the JS with the above "solution" but doesn't populate anything:

I'd like to know if there is a way to modify the Kanban Column ProgressBar in order to allow a second sum_field, to show it beside the existing sum_field.

I found out the progressbar js code seems to be in addons/web/static/src/js/views/kanban/kanban_column_progressbar.js, but I don't know how or what to do to add that second sum_field.

Should I inherit the js file in some way? If so, how can I do that?

This is the progressbar I'm talking about:

Odoo CRM Kanban ProgressBar

This is the idea I have in mind:

Same ProgressBar, but with a second computed field besides

I'm having trouble to show to my localhost both of my states (i have the following message : TypeError: Cannot read property 'map' of undefined).

Skills.js

So I am trying to localhost a project but I get an error when opening localhost. I provided what the console states, what I see when on localhost:3000 and the packageJson from both the frontend and the backend. I figured It could have to do with a wrong version that's making it break since I have seen similar posts but I'm unsure. I'm happy to provide more information if necessary.

This is what the console shows:

I'm currently writing a web application in Flask and using Blueprints. However, a blueprint uses the wrong static folder, although the configuration should be the same. Where is my mistake?

Main.py

I'm making a HTTP call and I get two values. I need to map the highest value to 1, because I'm using a progress bar library that only accepts values between 0 and 1. It would be something like:

let delivered = 1000;

let pending = 250;

then I need to substract those two values (I'll get 75 in this example) but I need this value to be 0.75.

if delivered = 1250 and pending = 0, then I need a total variable to be 1, so that the progress bar span to 100%.

Here's a 'working' snippet:

I found this cool loading progress project available in JavaScript and React. In their example at the bottom they have a progress loading circle in shape of a .svg picture (Heart). I want to do the same with a custom .svg and in React, but I struggle to get a working example. I installed it with npm, but how to import it and how to use it?

I'm running it in vscode and when I run my site, the spot where the javascript should be, is just a blank area. I tried a console.log message to test it and that isn't coming through either.

Here's where I'm trying to add a progress bar.

Help me please realize one thing please.

I created a simple progressbar.js line under slider. Each slide has various value (timing in seconds) which should pass to progressbar duration.

I take current timing value with ".slick-current" but value doesn't dynamically change in var bar. I get only the first value that was received at page loading...