how to draw excel style data bars in angular?

Question

I want to add databars behind values in the selected column in my grid like the Data Bars Conditional Formatting option in Excel.

This answer show me the thing using jquery data table, Can anyone give me the idea for this in angular 6.

Note: I am not using any 3rd party grid, I have created this grid from my own.

It should look something like this.

Answer 1

Not sure in what scenario you want to add this, but have a look at this: https://css-tricks.com/css3-progress-bars/

This is classic HTML and CSS "trick" to create a bar which you can define length of.

The basics of it is that you have a "wrapper" element that defines the maximum length, and a "bar" element inside that you set width: [0-100]% and a background color of that.

This would be an example on how to create a 50% wide blue bar.

.wrapper {
    width: 100%;
}

.bar {
    background: blue;
    height: 5px;
}

<div class="wrapper">
    <div class="bar" style="width: 50%"></div>
</div>

Use that to create an angular component that you can send you width to, something like this:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-bar',
    template: `
      <div class="wrapper">
          <div class="bar" [style.width]="width"></div>
      </div>
    `,
    styles: [`
    .wrapper {
        width: 100%;
    }
    .bar {
        background: blue;
        height: 5px;
    }
    `]
})

export class BarComponent {
    @Input() width: number;
}

Answer 2

This will do the job.

@Component({
  selector: 'my-app',
  template: `
  <div class="holder">
    <div class="bar" *ngFor="let item of data">
      <div #bar class="{{item >= 0 ? 'positive' : 'negative'}}">
        <div class="size" [style.width.px]="getWidth(item, bar)">
          {{item}}
        </div>
      </div>
    </div>
  </div>
  `
})
class AppComponent {  
  maxValue = 100;  
  data: Number[] = [
    10,20,30,-45,90,-90,-80,50,100
  ]

  getWidth(dataItem: number, bar: HTMLElement):number {
    return (parseInt(bar.offsetWidth) / this.maxValue)  * Math.abs(dataItem);
  }
}

CSS:

.holder {
  border: 1px solid black;
  margin: 10px;
  padding: 5px;
  width: 200px;
}

.bar {
  border: 1px solid grey;
  padding: 3px;
  margin: 10px 5px;
  text-align: center;
}

.positive {
  color: blue;
  width: 90px;
  margin-left: 90px;
}

.negative {
  color: red;
  width: 90px;
  margin-right: 90px;

  .size {
    margin-left: auto
  }
}

.size {
  background: green;
}