Add color scheme options

[taisuke-j]

Add a prop/props to customize the color scheme, which is currently hardcoded internally.

[richard-flosi]

Would you be open to a pull request for this feature? I'd like to be able to control these two methods via props:

  private internalColors = [
    "#ff4f40", // red
    "#ffcd40", // yellow
    "#66a0ff", // blue
    "#30bf7a", // green
  ];

and

  private setColors = (percentage: number) => {
    let color: string;
    if (percentage <= 25) {
      color = this.colors[0];
    } else if (percentage <= 50) {
      color = this.colors[1];
    } else if (percentage <= 75) {
      color = this.colors[2];
    } else {
      color = this.colors[3];
    }
    this.ring.style.stroke = color;
    this.ringBackground.style.stroke = color;
    this.percentageText.style.fill = color;
  };

In our case we need 5 different colors and different breakpoints for the color change in setColor.

[taisuke-j]

Hi @richard-flosi , I didn't make start on this as I didn't come to a conclusion on what the most intuitive/flexible solutions are for this. You already have some ideas?

[taisuke-j]

I'm not sure if it's a good idea to include logics to handle responsive part, as I feel it should be handled by prop change (so the color scheme change is not just limited to screen width change)

[taisuke-j]

Please feel free to make a PR, yes we need improvement on this :+1:

[taisuke-j]

@richard-flosi I added colors prop to enable dynamic color steps.

<progress-ring percentage={percentage} colors='[[0,"#ff4f40"],[25, "#ffcd40"],[50, "#66a0ff"],[75, "#30bf7a"]]'></progress-ring>

// From 0%: "#ff4f40"
// From 25%: "#ffcd40"
// From 50%: "#66a0ff"
// From 75%: "#30bf7a"

For responsive part, maybe you could detect the resize event and run a necessary function.

// Call `updateColors` function which updates `colors` prop depending on the window width
window.addEventListener('resize', updateColors);

Hopefully it helps!