CODEWITHSUNDEEP
javascriptcssangulartypescriptsvg
Panda
Panda

Reputation: 415

How make the svg filler dynamic in angular

here's the code: https://stackblitz.com/edit/angular-cbayxe?file=src%2Fapp%2Fapp.component.html

HTML

 <div *ngFor="let item of data;let i = index">
        <svg xmlns="http://www.w3.org/2000/svg" width="180px" height="180px" viewBox="0 0 54 54" aria-hidden="true" attr.fill="url(#color-{{i}})">
            <defs>
                <linearGradient id="color-{{i}}" x1="0%" y1="100%" x2="0%" y2="0%">
                    <stop offset="0%" stop-color="rgb(132, 219, 255)" />
                    <stop [attr.offset]="item.humidity | humidityPipe" stop-color="rgb(132, 219, 255)" />
                    <stop [attr.offset]="item.humidity | humidityPipe" stop-color="rgb(255, 255, 255)" />
                    <stop offset="100%" stop-color="rgb(255, 255, 255)" />
                </linearGradient>
            </defs>

        <path stroke="#000" d="M15 6 
               Q 15 6, 25 18
               A 12.8 12.8 0 1 1 5 18
               Q 15 6 15 6z" />
        </svg>
    </div>

TS

data = [
  {
    name: 'server1',
    humidity: '50.9'
  },
  {
    name: 'server2',
    humidity: '52.9',
  },
  {
    name: 'server3',
    humidity: '53.9',
  }
]
  humidityPercentage: any;
  constructor() { }

  ngOnInit() {
  }
}

what I'm trying to do here is, there's a limit which is 67% then when it reach more than 67% what I want to do is to make it color red.

how to make the more than 67% turn to color red.

cause when I try to change it to color red and change the humidity value to 20% it turns color red.

Upvotes: 0

Views: 161

Answers (1)

hlobit
hlobit

Reputation: 166

Here are the needed steps in your linear gradient to achieve what you want:

export class AppComponent implements OnInit  {
  min = Math.min
  threshold = 67
  ...
}

<linearGradient id="color-{{i}}" x1="0%" y1="100%" x2="0%" y2="0%">
  <stop [attr.offset]="min(item.humidity, threshold) | humidityPipe" stop-color="rgb(132, 219, 255)" />
  <stop [attr.offset]="item.humidity | humidityPipe" stop-color="rgb(255, 0, 0)" />
  <stop stop-color="rgb(255, 255, 255)" />
</linearGradient>

If I understood correctly, I think what you want is blue to the minimum among humidity level and a threshold (67%), then a gradient red to humidity level, and then, white from humidity level to the end.

Upvotes: 1

Related Questions