6

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. enter image description here

Nimish goel
  • 2,561
  • 6
  • 27
  • 42

3 Answers3

4

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;
}
Johan Kvint
  • 907
  • 1
  • 8
  • 17
  • thanks for your suggestion, But I need to show the negative values as well. this way, We can go for positive values, But it will fail for negative values. – Nimish goel Sep 26 '18 at 07:17
  • @Nimishgoel Well with a little fantasy, you can have two bars starting in the middle of the wrapper. One goes right, indication positive values, and one goes left indicating negative values – Johan Kvint Sep 27 '18 at 10:11
1

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;
}
Chiffie
  • 581
  • 3
  • 18
0

You can use primeNg data table, and their cell formatting feature, we can format each cell based on certain condition like changing the color or painting it, this may help you. PrimeNg Cell Style

Abhinav Kumar
  • 2,883
  • 1
  • 17
  • 30