Conditional Formatting in Angular

Question

Here is the conditional formatting feature in Microsoft Excel where the color bars represent the percentage in comparing to the highest value.

Is there anyway to achieve this with HTML5 using either CSS or JavaScript? Or maybe using additional Angular library as well.

I'm thinking about using the clip-path to but this feature may not be widely supported on all browsers

Stwosch · Accepted Answer · 2017-08-21 22:17:41Z

1

Do you mean this?

You can do this simple in vanillaJS. You must get all elements

const elNodes = document.querySelectorAll('.element');
const elements = [...elNodes];

Get their values and find the max value

const elementsValues = elements.map((el) => parseFloat(el.children[1].textContent));
const maxValue = Math.max(...elementsValues);

Finally change the width of elements based on value:

elements.forEach((el) => {
    el.children[0].style.width = 100 / (maxValue / parseFloat(el.children[1].textContent)) + '%';
});

answered Aug 21, 2017 at 22:17

Stwosch

6422 gold badges7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LxL Over a year ago

This seems to work as I expected in Chrome but in Edge it fails right at the line const elements = [...elNodes]; with an error SCRIPT5002: Function expected test.html (13,13) learn.microsoft.com/en-us/scripting/javascript/misc/…. What ... means in javascript? it's really hard to google ... :(

Stwosch Over a year ago

It's spread operator, that means when you have for example an array with values, the spread operator will extract them all. developer.mozilla.org/en/docs/Web/JavaScript/Reference/… This is new feature, added in ES6, so you can replace it with: const elements = Array.prototype.slice.call(elNodes); That do exactly the same thing in the result. The reason why you must do this is because we get a Node elements from a DOM, not an array, so you must convert them to use it like an array.

Collectives™ on Stack Overflow

Conditional Formatting in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related