Canceling changing color on refresh-CodePudding

I'am working with chartjs and i get new colors every time i refresh the page. i want to have random colors but those colors needed to be fixed so they will not change after i refresh or reload the page. this the function i'am working with :

getRandomRgb() {
    var num = Math.round(0xffffff * Math.random());
 
    var r = num >> 16;
    var g = (num >> 8) & 255;
    var b = num & 255;
    return "rgb("   r   ", "   g   ", "   b   ")";
  }

this is where i used

this.currentResponseItems.forEach((x) => {
            x.Items.forEach((z) => {
              if (!colorMap[z.Description]) {
                colorMap[z.Description] = this.getRandomColor();
              }
              console.log(z.Description, " : ", colorMap[z.Description]);
              z["phaseId"] = x.Id;
              let zData = [];

              let number = array.indexOf(z.phaseId);
              if (z.Number != 0) {
                zData[number] = z.Number;

                this.barChartData.push({
                  data: zData,
                  stack: x.Id,
                  label: z.Description,
                  fill: false,
                  grouped: true,
                  idStatoAffiliazione: x.Id,
                  channelID: z.Id,
                  backgroundColor: colorMap[z.Description],
                  hoverBackgroundColor: colorMap[z.Description],
                  pointBackgroundColor: colorMap[z.Description],
                  pointBorderColor:colorMap[z.Description],
                  pointHoverBackgroundColor:colorMap[z.Description],
                  pointHoverBorderColor: colorMap[z.Description],
                
                });

And this the chartjs in html :

 <div  fxLayout="row" *ngIf="barChartData.length > 0" fxLayoutGap="20px">
                <canvas baseChart fxFlex="100" [chartType]="'horizontalBar'" [datasets]="barChartData" [options]="barChartOptions" [labels]="barChartLabels" [colors]="graphColors" ></canvas>
                <!-- <graph-legend fxFlex="20" [configs]="graphLegendConfig"></graph-legend> -->
            </div>

CodePudding user response：

Am assuming that colorMap is your array where you have all colors, you should save this array in localStorage but you should stringify it first and then change your if statement in something like this

// save into local storage use this when your array is completly generated
localStorage.setItem("colorMap", JSON.stringify(colorMap));

your statement should looks like this

//check if there is colors saved in localStorage 
if(!localStorage.getItem("colorMap")){
  // generate new random values
} else { 
  // retrieve your saved array from local storage
  colorMap = JSON.parse(localStorage.getItem("colorMap"));
}

CodePudding user response：

If you want to persist the color on refresh without the use of a server, you'll have to store it in the browser of the user. For example, you can do this by storing it in localStorage. Using this, your function could look like this:

function getRandomRgb(colorId) {
    if (localStorage.hasOwnProperty(`randomRgb-${colorId}`)) return localStorage.getItem(`randomRgb-${colorId}`)

    var num = Math.round(0xffffff * Math.random());
    var r = num >> 16;
    var g = (num >> 8) & 255;
    var b = num & 255;
    var randomRgb = "rgb("   r   ", "   g   ", "   b   ")";

    localStorage.setItem(`randomRgb-${colorId}`, randomRgb)
    return randomRgb
}

To generate a color for a certain colorId in your example, you could do:

getRandomRgb(colorMap[z.Description])

Another way would be to store your entire colorMap in localStorage, instead of specific colors.