Category: javascript

I know how to apply conditional filling thanks to this post. That post works for two different columns from same data set/array (in that case, VALUE1 and VALUE2 columns from rawdata2 array). I would like to apply conditional filling for same column taken from two different dataset/array (in my case, VALUEORI column from rawdata_n array and VALUEORI column for rawdata_AAn array). To do so, I updated answer from @pernifloss:

// For rawdata_n
let separated_n = rawdata_n.reduce((a, b, index) => {
    let sub = b.VALUEORI;
    if (sub > 0) {
        return { positive: [...a.positive, { ...b, index }], negative: [...a.negative] };
    }
    return { positive: [...a.positive], negative: [...a.negative, { ...b, index }] };
}, { positive: [], negative: [] });

const positiveSets_n = [];
let previous_n = undefined;

separated_n.positive.forEach((e) => {
    // If not contiguous
    if (!previous_n || previous_n.index + 1 !== e.index) {
        // Create a new set
        positiveSets_n.push([e]);
    } else {
        // Append value to the previous set
        positiveSets_n[positiveSets_n.length - 1] = [...positiveSets_n[positiveSets_n.length - 1], e];
    }
    previous_n = e;
});

const negativeSets_n = [];
previous_n = undefined;
separated_n.negative.forEach((e) => {
    if (!previous_n || previous_n.index + 1 !== e.index) {
        negativeSets_n.push([e]);
    } else {
        negativeSets_n[negativeSets_n.length - 1] = [...negativeSets_n[negativeSets_n.length - 1], e];
    }
    previous_n = e;
});

const posG_n = svg.selectAll('.positive').data(positiveSets_n);

posG_n.enter().append('path')
    .attr('class', 'positive')
    .attr('fill', 'blue') // "positive" color
    .attr("d", (d) => area
        .innerRadius(d => y(d.VALUEORI))
        .outerRadius(d => y(d.VALUEORI))
        (d));

const negG_n = svg.selectAll('.negative').data(negativeSets_n);

negG_n.enter().append('path')
    .attr('class', 'negative') // "negative" color
    .attr('fill', 'red')
    .attr("d", (d) => area
        .innerRadius(d => y(d.VALUEORI))
        .outerRadius(d => y(d.VALUEORI))
        (d));


// For rawdata_AAn
let separated_AAn = rawdata_AAn.reduce((a, b, index) => {
    let sub = b.VALUEORI;
    if (sub > 0) {
        return { positive: [...a.positive, { ...b, index }], negative: [...a.negative] };
    }
    return { positive: [...a.positive], negative: [...a.negative, { ...b, index }] };
}, { positive: [], negative: [] });

const positiveSets_AAn = [];
let previous_AAn = undefined;

separated_AAn.positive.forEach((e) => {
    // If not contiguous
    if (!previous_AAn || previous_AAn.index + 1 !== e.index) {
        // Create a new set
        positiveSets_AAn.push([e]);
    } else {
        // Append value to the previous set
        positiveSets_AAn[positiveSets_AAn.length - 1] = [...positiveSets_AAn[positiveSets_AAn.length - 1], e];
    }
    previous_AAn = e;
});

const negativeSets_AAn = [];
previous_AAn = undefined;
separated_AAn.negative.forEach((e) => {
    if (!previous_AAn || previous_AAn.index + 1 !== e.index) {
        negativeSets_AAn.push([e]);
    } else {
        negativeSets_AAn[negativeSets_AAn.length - 1] = [...negativeSets_AAn[negativeSets_AAn.length - 1], e];
    }
    previous_AAn = e;
});

const posG_AAn = svg.selectAll('.positive').data(positiveSets_AAn);

posG_AAn.enter().append('path')
    .attr('class', 'positive')
    .attr('fill', 'blue') // "positive" color
    .attr("d", (d) => area
        .innerRadius(d => y(d.VALUEORI))
        .outerRadius(d => y(d.VALUEORI))
        (d));

const negG_AAn = svg.selectAll('.negative').data(negativeSets_AAn);

negG_AAn.enter().append('path')
    .attr('class', 'negative') // "negative" color
    .attr('fill', 'red')
    .attr("d", (d) => area
        .innerRadius(d => y(d.VALUEORI))
        .outerRadius(d => y(d.VALUEORI))
        (d));

However, the resulting plot does not fill the area between the green and red line. I expect the are between those lines to be filled.

Here is my complete code:

<!--

This is an HTML document that includes a D3.js script. It starts with the head section where the document's title, character encoding, and D3.js library are included. Then, the document's body starts with a header h1 tag, followed by a script tag where the D3.js code is written.

-->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>D3 CSV Example</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>

</head>
<body>
  <h1>D3 CSV Example</h1>
  <script>

    /* ++++++++++++++++++++++++ These are constant variables that define the dimensions of the visualization. The width and height variables define the overall dimensions of the SVG element that will contain the visualization. The margin variable is used to set a margin between the SVG element and the chart. The innerRadius and outerRadius variables define the radii of the two circles that will be used to represent the data. ++++++++++++++++ */
    const width = 954;
    const height = width;
    const margin = 10;
    const innerRadius = width / 5;
    const outerRadius = width / 2 - margin;
    /* ++++++++++++++++++++++++++++++++++++++++++  +++++++++++++++++++++++ +++++++++++++++++++++++++++++*/

    // ++++++++++++++++++++++++++++++++++++++++ Step 1) Parsing the CSV file ++++++++++++++++++++++++++++
    d3.csv("v2_synthetic_data.csv", function(d) {
      // Parse the CSV data and return a JavaScript object
      // with the desired properties
      return {
        DATE_TIME: new Date(d.DATE_TIME),
        ID: +d.ID,
        VALUEORI: +d.VALUEORI,
        VALUE2: +d.VALUE2,
        INSPECTION: +d.INSPECTION,
        STATE: +d.STATE,
      };
    }).then(function(rawdata) {
      // Convert DATE_TIME column to minute-precise time
      rawdata.forEach(function(d) {
        const hour = d.DATE_TIME.getHours();
        const minute = d.DATE_TIME.getMinutes();
        d.minuteTime = hour * 60 + minute;
      });
// console.log(rawdata)
      const minuteScale = d3.scaleLinear()
        .domain([0, 1439]) // 0 to 23:59 (24 hours * 60 minutes without -1 or else change to 1439 //- 1)
        .range([0, 2 * Math.PI]);

      const minuteTimeValues = rawdata.map(d => d.minuteTime);

      const rawdata_n = rawdata.filter(function (d) {
        return d.ID === 1 && d.INSPECTION === 1 && d.STATE === 0;
      });

      const rawdata_AAn = rawdata.filter(function (d) {
        return d.ID === 1 && d.INSPECTION === 1 && d.STATE === 1;
      });

      // console.log(rawdata_n)



      const x = d3.scaleTime()
        .domain([0, 1439]) // Set the domain using the extent of the "minuteTime" values
        .range([0, 2 * Math.PI]); // Set the desired range

      // console.log(rawdata2)

      const minValue1 = d3.min(rawdata_n, d => d.VALUEORI);
      const minValue2 = d3.min(rawdata_AAn, d => d.VALUEORI);
      const maxValue1 = d3.max(rawdata_n, d => d.VALUEORI);
      const maxValue2 = d3.max(rawdata_AAn, d => d.VALUEORI);

      const yMin = minValue1 < minValue2 ? minValue1 : minValue2;
      const yMax = maxValue1 > maxValue2 ? maxValue1 : maxValue2;
      // console.log(minValue1)
      const y = d3.scaleLinear()
                  .domain([yMin, yMax])
                  .range([innerRadius, outerRadius]);

// Modify the xAxis generator to display only the hour and add padding
const xAxis = (g) => g
  .attr("font-family", "sans-serif")
  .attr("font-size", 10)
  .call((g) => g.selectAll("g")
    .data(d3.range(0, 24)) // create an array of hour values
    .join("g")
      .each((d, i) => d.id = `hour-${i}`)
      .call((g) => g.append("path")
          .attr("stroke", "#000")
          .attr("stroke-opacity", 0.2)
          .attr("d", (d) => `
            M${d3.pointRadial(x(d * 60), innerRadius)}
            L${d3.pointRadial(x(d * 60), outerRadius)}
          `))
      .call((g) => g.append("path")
          .attr("id", (d) => `hour-${d}`)
          .datum((d) => [d * 60, (d + 1) * 60])
          .attr("fill", "none")
          .attr("d", ([a, b]) => `
            M${d3.pointRadial(x(a), innerRadius-10)}
            A${innerRadius},${innerRadius} 0,0,1 ${d3.pointRadial(x(b), innerRadius)}
          `))
      .call((g) => g.append("text")
        .append("textPath")
          .attr("startOffset", 6)
          .attr("href", (d) => `#hour-${d}`)
          .text((d) => d.toString().padStart(2, "0"))
          .attr("text-anchor", "middle")
          .attr("alignment-baseline", "middle")
          .attr("transform", (d) => {
            const angle = x(d * 60);
            const radius = innerRadius - 20; // reduce the radius to move the labels closer to the center
                        return `translate(${d3.pointRadial(x(d * 60), radius)})`;
          })
      )
  );



      const yAxis = g => g
        .attr("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .attr("font-size", 10)
        .call(g => g.selectAll("g")
          .data(y.ticks().reverse())
          .join("g")
          .attr("fill", "none")
          .call(g => g.append("circle")
            .attr("stroke", "#000")
            .attr("stroke-opacity", 0.2)
            .attr("r", y))
          .call(g => g.append("text")
            .attr("y", d => -y(d))
            .attr("dy", "0.35em")
            .attr("stroke", "#fff")
            .attr("stroke-width", 5)
            .text((x, i) => `${x.toFixed(0)}${i ? "" : ""}`)
          .clone(true)
            .attr("y", d => y(d))
          .selectAll(function() { return [this, this.previousSibling]; })
          .clone(true)
            .attr("fill", "currentColor")
            .attr("stroke", "none")));

      const line = d3.lineRadial()
                    .curve(d3.curveLinear)
                    .angle(d => x(d.minuteTime));

      const area = d3.areaRadial()
                    .curve(d3.curveLinear)
                    .angle(d => x(d.minuteTime))

      const svg = d3.create("svg")
        .attr("viewBox", [-width / 2, -height / 2, width, height])
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round");


svg.append("path")
  .attr("fill", "none")
  .attr("stroke", "red")
  .attr("stroke-width", 3)
  .attr("d", line
    .radius(d => y(d.VALUEORI))
    (rawdata_n));

svg.append("path")
  .attr("fill", "none")
  .attr("stroke", "green")
  .attr("stroke-width", 3)
  .attr("d", line
    .radius(d => y(d.VALUEORI))
    (rawdata_AAn));



// ++++++++++++++++++++++++++++++++ vv separate data in positive and negative value vv ++++++++++++++++++++++++++++++++

// For rawdata_n
let separated_n = rawdata_n.reduce((a, b, index) => {
    let sub = b.VALUEORI;
    if (sub > 0) {
        return { positive: [...a.positive, { ...b, index }], negative: [...a.negative] };
    }
    return { positive: [...a.positive], negative: [...a.negative, { ...b, index }] };
}, { positive: [], negative: [] });

const positiveSets_n = [];
let previous_n = undefined;

separated_n.positive.forEach((e) => {
    // If not contiguous
    if (!previous_n || previous_n.index + 1 !== e.index) {
        // Create a new set
        positiveSets_n.push([e]);
    } else {
        // Append value to the previous set
        positiveSets_n[positiveSets_n.length - 1] = [...positiveSets_n[positiveSets_n.length - 1], e];
    }
    previous_n = e;
});

const negativeSets_n = [];
previous_n = undefined;
separated_n.negative.forEach((e) => {
    if (!previous_n || previous_n.index + 1 !== e.index) {
        negativeSets_n.push([e]);
    } else {
        negativeSets_n[negativeSets_n.length - 1] = [...negativeSets_n[negativeSets_n.length - 1], e];
    }
    previous_n = e;
});

const posG_n = svg.selectAll('.positive').data(positiveSets_n);

posG_n.enter().append('path')
    .attr('class', 'positive')
    .attr('fill', 'blue') // "positive" color
    .attr("d", (d) => area
        .innerRadius(d => y(d.VALUEORI))
        .outerRadius(d => y(d.VALUEORI))
        (d));

const negG_n = svg.selectAll('.negative').data(negativeSets_n);

negG_n.enter().append('path')
    .attr('class', 'negative') // "negative" color
    .attr('fill', 'red')
    .attr("d", (d) => area
        .innerRadius(d => y(d.VALUEORI))
        .outerRadius(d => y(d.VALUEORI))
        (d));


// For rawdata_AAn
let separated_AAn = rawdata_AAn.reduce((a, b, index) => {
    let sub = b.VALUEORI;
    if (sub > 0) {
        return { positive: [...a.positive, { ...b, index }], negative: [...a.negative] };
    }
    return { positive: [...a.positive], negative: [...a.negative, { ...b, index }] };
}, { positive: [], negative: [] });

const positiveSets_AAn = [];
let previous_AAn = undefined;

separated_AAn.positive.forEach((e) => {
    // If not contiguous
    if (!previous_AAn || previous_AAn.index + 1 !== e.index) {
        // Create a new set
        positiveSets_AAn.push([e]);
    } else {
        // Append value to the previous set
        positiveSets_AAn[positiveSets_AAn.length - 1] = [...positiveSets_AAn[positiveSets_AAn.length - 1], e];
    }
    previous_AAn = e;
});

const negativeSets_AAn = [];
previous_AAn = undefined;
separated_AAn.negative.forEach((e) => {
    if (!previous_AAn || previous_AAn.index + 1 !== e.index) {
        negativeSets_AAn.push([e]);
    } else {
        negativeSets_AAn[negativeSets_AAn.length - 1] = [...negativeSets_AAn[negativeSets_AAn.length - 1], e];
    }
    previous_AAn = e;
});

const posG_AAn = svg.selectAll('.positive').data(positiveSets_AAn);

posG_AAn.enter().append('path')
    .attr('class', 'positive')
    .attr('fill', 'blue') // "positive" color
    .attr("d", (d) => area
        .innerRadius(d => y(d.VALUEORI))
        .outerRadius(d => y(d.VALUEORI))
        (d));

const negG_AAn = svg.selectAll('.negative').data(negativeSets_AAn);

negG_AAn.enter().append('path')
    .attr('class', 'negative') // "negative" color
    .attr('fill', 'red')
    .attr("d", (d) => area
        .innerRadius(d => y(d.VALUEORI))
        .outerRadius(d => y(d.VALUEORI))
        (d));




// ++++++++++++++++++++++++++++++++ ^^ separate data in positive and negative value ^^ ++++++++++++++++++++++++++++++++


      svg.append("g")
        .call(xAxis);

      svg.append("g")
        .call(yAxis);

      const container = d3.select("body").append("div");
      container.node().appendChild(svg.node());
    });

  </script>
</body>
</html>

In case you need, here is my CSV file:

DATE_TIME,ID,VALUEORI,VALUE2,INSPECTION,STATE
2022-11-01 00:00:00,1,116,87,1,0
2022-11-01 00:08:00,1,111,90,1,0
2022-11-01 00:16:00,1,120,72,1,0
2022-11-01 00:24:00,1,99,61,1,0
2022-11-01 00:32:00,1,90,83,1,0
2022-11-01 00:40:00,1,94,52,1,0
2022-11-01 00:48:00,1,94,65,1,0
2022-11-01 00:56:00,1,90,76,1,0
2022-11-01 01:04:00,1,101,79,1,0
2022-11-01 01:12:00,1,101,60,1,0
2022-11-01 01:20:00,1,104,84,1,0
2022-11-01 01:28:00,1,110,62,1,0
2022-11-01 01:36:00,1,92,60,1,0
2022-11-01 01:44:00,1,115,53,1,0
2022-11-01 01:52:00,1,119,87,1,0
2022-11-01 02:00:00,1,135,52,1,0
2022-11-01 02:08:00,1,90,77,1,0
2022-11-01 02:16:00,1,90,55,1,0
2022-11-01 02:24:00,1,131,87,1,0
2022-11-01 02:32:00,1,116,82,1,0
2022-11-01 02:40:00,1,123,55,1,0
2022-11-01 02:48:00,1,122,89,1,0
2022-11-01 02:56:00,1,126,80,1,0
2022-11-01 03:04:00,1,127,88,1,0
2022-11-01 03:12:00,1,132,82,1,0
2022-11-01 03:20:00,1,123,69,1,0
2022-11-01 03:28:00,1,105,63,1,0
2022-11-01 03:36:00,1,99,66,1,0
2022-11-01 03:44:00,1,126,81,1,0
2022-11-01 03:52:00,1,119,79,1,0
2022-11-01 04:00:00,1,130,77,1,0
2022-11-01 04:08:00,1,93,68,1,0
2022-11-01 04:16:00,1,124,62,1,0
2022-11-01 04:24:00,1,118,89,1,0
2022-11-01 04:32:00,1,126,52,1,0
2022-11-01 04:40:00,1,125,61,1,0
2022-11-01 04:48:00,1,108,85,1,0
2022-11-01 04:56:00,1,127,79,1,0
2022-11-01 05:04:00,1,94,57,1,0
2022-11-01 05:12:00,1,120,70,1,0
2022-11-01 05:20:00,1,121,69,1,0
2022-11-01 05:28:00,1,122,75,1,0
2022-11-01 05:36:00,1,91,59,1,0
2022-11-01 05:44:00,1,105,54,1,0
2022-11-01 05:52:00,1,99,52,1,0
2022-11-01 06:00:00,1,106,77,1,0
2022-11-01 06:08:00,1,113,75,1,0
2022-11-01 06:16:00,1,131,63,1,0
2022-11-01 06:24:00,1,100,65,1,0
2022-11-01 06:32:00,1,125,51,1,0
2022-11-01 06:40:00,1,93,87,1,0
2022-11-01 06:48:00,1,98,58,1,0
2022-11-01 06:56:00,1,96,70,1,0
2022-11-01 07:04:00,1,99,56,1,0
2022-11-01 07:12:00,1,102,76,1,0
2022-11-01 07:20:00,1,124,70,1,0
2022-11-01 07:28:00,1,111,89,1,0
2022-11-01 07:36:00,1,99,69,1,0
2022-11-01 07:44:00,1,114,77,1,0
2022-11-01 07:52:00,1,134,62,1,0
2022-11-01 08:00:00,1,131,62,1,0
2022-11-01 08:08:00,1,128,83,1,0
2022-11-01 08:16:00,1,129,90,1,0
2022-11-01 08:24:00,1,95,83,1,0
2022-11-01 08:32:00,1,118,64,1,0
2022-11-01 08:40:00,1,101,51,1,0
2022-11-01 08:48:00,1,121,69,1,0
2022-11-01 08:56:00,1,90,61,1,0
2022-11-01 09:04:00,1,120,61,1,0
2022-11-01 09:12:00,1,94,80,1,0
2022-11-01 09:20:00,1,105,72,1,0
2022-11-01 09:28:00,1,117,51,1,0
2022-11-01 09:36:00,1,101,70,1,0
2022-11-01 09:44:00,1,117,50,1,0
2022-11-01 09:52:00,1,132,73,1,0
2022-11-01 10:00:00,1,115,76,1,0
2022-11-01 10:08:00,1,135,79,1,0
2022-11-01 10:16:00,1,95,87,1,0
2022-11-01 10:24:00,1,121,82,1,0
2022-11-01 10:32:00,1,123,76,1,0
2022-11-01 10:40:00,1,98,66,1,0
2022-11-01 10:48:00,1,135,87,1,0
2022-11-01 10:56:00,1,109,87,1,0
2022-11-01 11:04:00,1,115,61,1,0
2022-11-01 11:12:00,1,125,54,1,0
2022-11-01 11:20:00,1,98,72,1,0
2022-11-01 11:28:00,1,105,64,1,0
2022-11-01 11:36:00,1,131,83,1,0
2022-11-01 11:44:00,1,107,51,1,0
2022-11-01 11:52:00,1,122,69,1,0
2022-11-01 12:00:00,1,123,82,1,0
2022-11-01 12:08:00,1,92,68,1,0
2022-11-01 12:16:00,1,124,72,1,0
2022-11-01 12:24:00,1,112,84,1,0
2022-11-01 12:32:00,1,118,90,1,0
2022-11-01 12:40:00,1,135,64,1,0
2022-11-01 12:48:00,1,105,80,1,0
2022-11-01 12:56:00,1,130,69,1,0
2022-11-01 13:04:00,1,92,88,1,0
2022-11-01 13:12:00,1,115,84,1,0
2022-11-01 13:20:00,1,125,75,1,0
2022-11-01 13:28:00,1,108,79,1,0
2022-11-01 13:36:00,1,113,90,1,0
2022-11-01 13:44:00,1,93,70,1,0
2022-11-01 13:52:00,1,98,79,1,0
2022-11-01 14:00:00,1,124,90,1,0
2022-11-01 14:08:00,1,106,58,1,0
2022-11-01 14:16:00,1,131,77,1,0
2022-11-01 14:24:00,1,97,81,1,0
2022-11-01 14:32:00,1,103,75,1,0
2022-11-01 14:40:00,1,111,57,1,0
2022-11-01 14:48:00,1,129,89,1,0
2022-11-01 14:56:00,1,117,79,1,0
2022-11-01 15:04:00,1,126,85,1,0
2022-11-01 15:12:00,1,129,82,1,0
2022-11-01 15:20:00,1,118,85,1,0
2022-11-01 15:28:00,1,101,52,1,0
2022-11-01 15:36:00,1,107,65,1,0
2022-11-01 15:44:00,1,121,89,1,0
2022-11-01 15:52:00,1,103,50,1,0
2022-11-01 16:00:00,1,110,80,1,0
2022-11-01 16:08:00,1,105,58,1,0
2022-11-01 16:16:00,1,130,51,1,0
2022-11-01 16:24:00,1,97,57,1,0
2022-11-01 16:32:00,1,134,88,1,0
2022-11-01 16:40:00,1,102,71,1,0
2022-11-01 16:48:00,1,115,58,1,0
2022-11-01 16:56:00,1,101,63,1,0
2022-11-01 17:04:00,1,134,76,1,0
2022-11-01 17:12:00,1,128,64,1,0
2022-11-01 17:20:00,1,108,70,1,0
2022-11-01 17:28:00,1,126,67,1,0
2022-11-01 17:36:00,1,97,80,1,0
2022-11-01 17:44:00,1,128,51,1,0
2022-11-01 17:52:00,1,104,83,1,0
2022-11-01 18:00:00,1,106,79,1,0
2022-11-01 18:08:00,1,135,82,1,0
2022-11-01 18:16:00,1,104,90,1,0
2022-11-01 18:24:00,1,125,85,1,0
2022-11-01 18:32:00,1,109,57,1,0
2022-11-01 18:40:00,1,106,78,1,0
2022-11-01 18:48:00,1,102,70,1,0
2022-11-01 18:56:00,1,118,76,1,0
2022-11-01 19:04:00,1,117,86,1,0
2022-11-01 19:12:00,1,114,79,1,0
2022-11-01 19:20:00,1,98,67,1,0
2022-11-01 19:28:00,1,118,77,1,0
2022-11-01 19:36:00,1,121,57,1,0
2022-11-01 19:44:00,1,132,77,1,0
2022-11-01 19:52:00,1,102,80,1,0
2022-11-01 20:00:00,1,100,78,1,0
2022-11-01 20:08:00,1,100,71,1,0
2022-11-01 20:16:00,1,90,60,1,0
2022-11-01 20:24:00,1,135,83,1,0
2022-11-01 20:32:00,1,114,52,1,0
2022-11-01 20:40:00,1,124,57,1,0
2022-11-01 20:48:00,1,124,71,1,0
2022-11-01 20:56:00,1,116,76,1,0
2022-11-01 21:04:00,1,99,60,1,0
2022-11-01 21:12:00,1,126,75,1,0
2022-11-01 21:20:00,1,90,78,1,0
2022-11-01 21:28:00,1,120,68,1,0
2022-11-01 21:36:00,1,122,65,1,0
2022-11-01 21:44:00,1,115,87,1,0
2022-11-01 21:52:00,1,109,75,1,0
2022-11-01 22:00:00,1,129,85,1,0
2022-11-01 22:08:00,1,134,82,1,0
2022-11-01 22:16:00,1,121,57,1,0
2022-11-01 22:24:00,1,118,73,1,0
2022-11-01 22:32:00,1,123,59,1,0
2022-11-01 22:40:00,1,130,82,1,0
2022-11-01 22:48:00,1,103,85,1,0
2022-11-01 22:56:00,1,133,56,1,0
2022-11-01 23:04:00,1,91,50,1,0
2022-11-01 23:12:00,1,97,77,1,0
2022-11-01 23:20:00,1,106,65,1,0
2022-11-01 23:28:00,1,113,83,1,0
2022-11-01 23:36:00,1,133,85,1,0
2022-11-01 23:44:00,1,92,81,1,0
2022-11-01 23:52:00,1,104,70,1,0
2022-11-01 02:00:00,1,100,72,1,1
2022-11-01 02:09:00,1,109,61,1,1
2022-11-01 02:18:00,1,113,75,1,1
2022-11-01 02:27:00,1,105,77,1,1
2022-11-01 02:36:00,1,100,68,1,1
2022-11-01 02:45:00,1,110,76,1,1
2022-11-01 02:54:00,1,120,66,1,1
2022-11-01 03:03:00,1,112,69,1,1
2022-11-01 03:12:00,1,118,77,1,1
2022-11-01 03:21:00,1,112,70,1,1
2022-11-01 03:30:00,1,115,60,1,1
2022-11-01 03:39:00,1,115,72,1,1
2022-11-01 03:48:00,1,119,67,1,1
2022-11-01 03:57:00,1,102,60,1,1
2022-11-01 04:06:00,1,114,70,1,1
2022-11-01 04:15:00,1,115,68,1,1
2022-11-01 04:24:00,1,116,65,1,1
2022-11-01 04:33:00,1,108,67,1,1
2022-11-01 04:42:00,1,100,63,1,1
2022-11-01 04:51:00,1,107,64,1,1
2022-11-01 05:00:00,1,108,66,1,1
2022-11-01 05:09:00,1,120,72,1,1
2022-11-01 05:18:00,1,104,66,1,1
2022-11-01 05:27:00,1,109,70,1,1
2022-11-01 05:36:00,1,117,66,1,1
2022-11-01 05:45:00,1,109,66,1,1
2022-11-01 05:54:00,1,101,68,1,1
2022-11-01 06:03:00,1,108,77,1,1
2022-11-01 06:12:00,1,103,75,1,1
2022-11-01 06:21:00,1,105,74,1,1
2022-11-01 06:30:00,1,103,69,1,1
2022-11-01 06:39:00,1,106,70,1,1
2022-11-01 06:48:00,1,110,68,1,1
2022-11-01 06:57:00,1,115,77,1,1
2022-11-01 07:06:00,1,118,72,1,1
2022-11-01 07:15:00,1,100,61,1,1
2022-11-01 07:24:00,1,104,73,1,1
2022-11-01 07:33:00,1,108,62,1,1
2022-11-01 07:42:00,1,120,60,1,1
2022-11-01 07:51:00,1,115,75,1,1
2022-11-01 08:00:00,1,105,76,1,1
2022-11-01 08:09:00,1,113,71,1,1
2022-11-01 08:18:00,1,108,67,1,1
2022-11-01 08:27:00,1,112,71,1,1
2022-11-01 08:36:00,1,104,76,1,1
2022-11-01 08:45:00,1,109,80,1,1
2022-11-01 08:54:00,1,117,70,1,1
2022-11-01 09:03:00,1,120,62,1,1
2022-11-01 09:12:00,1,114,75,1,1
2022-11-01 09:21:00,1,102,60,1,1
2022-11-01 09:30:00,1,101,67,1,1
2022-11-01 09:39:00,1,113,65,1,1
2022-11-01 09:48:00,1,119,68,1,1
2022-11-01 09:57:00,1,101,60,1,1
2022-11-01 10:06:00,1,102,77,1,1
2022-11-01 10:15:00,1,103,70,1,1
2022-11-01 10:24:00,1,115,70,1,1
2022-11-01 10:33:00,1,105,72,1,1
2022-11-01 10:42:00,1,101,64,1,1
2022-11-01 10:51:00,1,111,78,1,1
2022-11-01 11:00:00,1,118,66,1,1
2022-11-01 11:09:00,1,101,64,1,1
2022-11-01 11:18:00,1,117,61,1,1
2022-11-01 11:27:00,1,116,74,1,1
2022-11-01 11:36:00,1,103,76,1,1
2022-11-01 11:45:00,1,120,69,1,1
2022-11-01 11:54:00,1,120,74,1,1
2022-11-01 12:03:00,1,105,75,1,1
2022-11-01 12:12:00,1,106,66,1,1
2022-11-01 12:21:00,1,102,63,1,1
2022-11-01 12:30:00,1,104,77,1,1
2022-11-01 12:39:00,1,103,62,1,1
2022-11-01 12:48:00,1,102,68,1,1
2022-11-01 12:57:00,1,116,64,1,1
2022-11-01 13:06:00,1,118,79,1,1
2022-11-01 13:15:00,1,105,67,1,1
2022-11-01 13:24:00,1,102,73,1,1
2022-11-01 13:33:00,1,110,70,1,1
2022-11-01 13:42:00,1,114,61,1,1
2022-11-01 13:51:00,1,108,70,1,1
2022-11-01 14:00:00,1,107,79,1,1
2022-11-01 14:09:00,1,118,61,1,1
2022-11-01 14:18:00,1,118,73,1,1
2022-11-01 14:27:00,1,100,74,1,1
2022-11-01 14:36:00,1,112,71,1,1
2022-11-01 14:45:00,1,113,63,1,1
2022-11-01 14:54:00,1,106,78,1,1
2022-11-01 15:03:00,1,105,66,1,1
2022-11-01 15:12:00,1,118,69,1,1
2022-11-01 15:21:00,1,118,69,1,1
2022-11-01 15:30:00,1,100,67,1,1
2022-11-01 15:39:00,1,113,70,1,1
2022-11-01 15:48:00,1,101,74,1,1
2022-11-01 15:57:00,1,108,78,1,1
2022-11-01 16:06:00,1,112,71,1,1
2022-11-01 16:15:00,1,111,71,1,1
2022-11-01 16:24:00,1,118,65,1,1
2022-11-01 16:33:00,1,103,65,1,1
2022-11-01 16:42:00,1,104,65,1,1
2022-11-01 16:51:00,1,100,61,1,1
2022-11-01 17:00:00,1,100,60,1,1
2022-11-01 17:09:00,1,110,65,1,1
2022-11-01 17:18:00,1,107,68,1,1
2022-11-01 17:27:00,1,102,78,1,1
2022-11-01 17:36:00,1,106,76,1,1
2022-11-01 17:45:00,1,100,76,1,1
2022-11-01 17:54:00,1,104,78,1,1
2022-11-01 18:03:00,1,116,62,1,1
2022-11-01 18:12:00,1,104,62,1,1
2022-11-01 18:21:00,1,113,76,1,1
2022-11-01 18:30:00,1,103,73,1,1
2022-11-01 18:39:00,1,116,80,1,1
2022-11-01 18:48:00,1,104,61,1,1
2022-11-01 18:57:00,1,109,66,1,1
2022-11-01 19:06:00,1,104,62,1,1
2022-11-01 19:15:00,1,111,74,1,1
2022-11-01 19:24:00,1,109,63,1,1
2022-11-01 19:33:00,1,115,78,1,1
2022-11-01 19:42:00,1,114,61,1,1
2022-11-01 19:51:00,1,120,71,1,1
2022-11-01 20:00:00,1,111,78,1,1
2022-11-01 20:09:00,1,107,69,1,1
2022-11-01 20:18:00,1,113,80,1,1
2022-11-01 20:27:00,1,106,61,1,1
2022-11-01 20:36:00,1,115,77,1,1
2022-11-01 20:45:00,1,100,66,1,1
2022-11-01 20:54:00,1,115,63,1,1
2022-11-01 21:03:00,1,115,72,1,1
2022-11-01 21:12:00,1,101,61,1,1
2022-11-01 21:21:00,1,109,65,1,1
2022-11-01 21:30:00,1,103,79,1,1
2022-11-01 21:39:00,1,118,61,1,1
2022-11-01 21:48:00,1,113,77,1,1
2022-11-01 21:57:00,1,105,62,1,1
2022-11-01 22:06:00,1,103,79,1,1
2022-11-01 22:15:00,1,106,67,1,1
2022-11-01 22:24:00,1,111,68,1,1
2022-11-01 22:33:00,1,116,66,1,1
2022-11-01 22:42:00,1,109,66,1,1
2022-11-01 22:51:00,1,111,60,1,1
2022-11-01 23:00:00,1,106,80,1,1
2022-11-01 23:09:00,1,103,71,1,1
2022-11-01 23:18:00,1,118,72,1,1
2022-11-01 23:27:00,1,107,60,1,1
2022-11-01 23:36:00,1,106,68,1,1
2022-11-01 23:45:00,1,112,69,1,1
2022-11-01 23:54:00,1,105,76,1,1

Using JavaScript and speech recognition API Can I build a visualizer to reflect user speech like the one in the link below, without using getUserMedia.

The reason of my request because getUserMedia and speechrecognition are not working simultaneously on mobile devices like Samsung/Android.

Using getUserMedia example
https://mdn.github.io/webaudio-examples/voice-change-o-matic/

I don’t know where to start, but I think onresult event of speechrecognition should be used to implement such effect.

I have a dynamic dropdown data & I want to know which one dropdown clicked.

I’m trying with event.target.value but not getting the data.

Sandbox Url

Thanks for your efforts!

  ->I have two array's one is Product andother is newLiveStockList which is shown in the image.
  
 -> In newLiveStockList array we can see (product array) in each element, now I want to remove that array inside product
   and add object which is inside product array.
   
  ->Same process i need to repeat it till last iteration (all the four objects present inside product array should replace with 

product array which is inside newLiveStockList array).

I’m trying to embed a widget

which contains iframe and script

In this structure:

<script defer="" type="text/javascript" src="XXXXXXXXXXXX"></script>
<iframe seamless="" width="100%" height="1000px" frameborder="0" class="XXXXXXXXX" src="XXXXXXXXX" ></iframe>

It cannot be displayed and you see an error message:

The server IP address of ******* could not be found.

But when I remove the class it works but it is not good because it is necessary.

What causes a class to prevent loading and how can it be displayed properly together with the necessary class??

What causes a class to prevent loading and how can it be displayed properly together with the necessary class??

so im very new to javascript world and and i went to d3 to make a line chart without the wihte background and the extra styling i dont need so i used var containerWidth = container.offsetWidth;
its apply it to the svg but when i look at it in the inspector its way more and the chart line dont apppear fully any more becuase of the width here is my code

    import * as d3 from "d3";

    export function drawWeatherChart(dataa) {
        var container = document.getElementById('chartHold');
        var containerWidth = container.offsetWidth;
        var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svgElement.setAttribute("width", containerWidth);
        svgElement.setAttribute("height", "300");
        svgElement.setAttribute("id", "myChart");
        document.body.appendChild(svgElement);

        var svg = d3.select("#myChart");
        var height = +svg.attr("height");

        var minTemp = d3.min(dataa, function(d) {
            return +d.temp;
        });
        var maxTemp = d3.max(dataa, function(d) {
            return +d.temp;
        });

        var x = d3.scaleTime().domain([new Date("2023-07-13"), new Date("2023-07-20")]).range([0, containerWidth]);
        var y = d3.scaleLinear().domain([minTemp, maxTemp]).range([height, 0]);

        dataa.sort(function(a, b) {
            return d3.ascending(new Date(a.date), new Date(b.date)) || d3.descending(+a.temp, +b.temp);
        });

        var line = d3.line()
            .curve(d3.curveBasis)
            .x(function(d) {
                return x(new Date(d.date));
            })
            .y(function(d) {
                return y(+d.temp);
            });

        var path = svg.append("path")
            .datum(dataa)
            .attr("fill", "none")
            .attr("stroke", "#CEB398")
            .attr("stroke-width", 2)
            .attr("preserveAspectRatio", "xMinYMin meet")
            .attr("viewBox", "0 0 960 500")
            .attr("d", line);

        var totalLength = path.node().getTotalLength();

        path.attr("stroke-dasharray", totalLength + " " + totalLength)
            .attr("stroke-dashoffset", totalLength)
            .transition()
            .duration(2000)
            .ease(d3.easeLinear)
            .attr("stroke-dashoffset", 0);
        return svgElement;

    }

i want the chart line to be fully taken the widht of the parent div and dont cut the chart line

I’ve fallen in love with the website https://www.quentin.xyz/ and my ultimate goal is to build a similar site like this.

Can somebody guide me on how to create this? I am relatively new to website development and would appreciate further help.

I am writing a project on Express and MongoDB 5.0.18.

I have a list of ids [id1, id2, id3 ...], that I request from the client, and I want to respond with a list of objects like [{title1, theme1}, {title2, theme2}, ....]. (theme, topic and id are parts of some mongoose Model)

My question is what is the fastest and most productive way to do it?

I know about the "$in" operator, but I don’t think it is the best choice for me. I’m right?

I have this code snippet of a table with items. After I select my items I want to pass them to my function. It it possible do it in the html?

<p-table [value]=items>
<ng-template pTemplate="body" let-item>
<tr [pSelectableRow]="item">
    <td>
         <p-tableCheckbox
          [pSelectableRow]="applicationProject"
          [value]="item"
          ></p-tableCheckbox>
   </td>
   <td class="cell-breakWord">
         {{ item.name }}
   </td>
   <td>{{ item.id }}</td>
   ...
</tr>
</p-table>
<p-button (onClick) = "function(selectedItemsIWantToPass)">Button</p-button>

Hi I am trying to get these functions to trigger on click event, however one of these functions currently gets triggered on a submit event.

This is the first switch, I want to use for the trigger

    `      `<button
    id="themeMood"
    class="dark-mode-switch h-[28px] w-[28px] lg:h-[32px] lg:w-[32px] lg:bg-gray-500-f7 bg-    slate-50 dark:bg-slate-900 lg:dark:bg-slate-900 dark:text-white text-slate-900 cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center">
    <iconify-icon
        class="text-slate-800 dark:text-white text-xl dark:block hidden"
        id="moonIcon"
        icon="line-md:sunny-outline-to-moon-alt-loop-transition"></iconify-icon>
    <iconify-icon
        class="text-slate-800 dark:text-white text-xl dark:hidden block"
        id="sunIcon"
        icon="line-md:moon-filled-to-sunny-filled-loop-transition"></iconify-icon>
</button>`

 `    /*===================================
   Dark and light theme change
  =====================================*/
   let currentTheme = localStorage.getItem("theme");
   const themes = [
    {
        name: "dark",
        class: "dark",
        checked: false,
    },
    {
        name: "semiDark",
        class: "semiDark",
        checked: false,
    },
    {
        name: "light",
        class: "light",
        checked: false,
    },
];

    // Loop through themes and add event listener for changes
    themes.forEach((theme) => {
    const radioBtn = $(`#${theme.class}`);
    radioBtn.prop("checked", theme.name === currentTheme);
    radioBtn.on("change", function () {
        if (this.checked) {
            currentTheme = theme.name;
            localStorage.theme = theme.name;
            location.reload();
        }
    });
    });

    // Theme Change by Header Button
    $("#themeMood").on("click", function () {
    if (currentTheme === "light") {
        currentTheme = "dark";
    } else {
        currentTheme = "light";
    }
    localStorage.theme = currentTheme;
    location.reload();
    });`

`
This is the second switch:

`// Switch to Dark/Light mode
$("body").on("click", ".dark-mode-switch", function () {
    if ($(this).attr("data-mode") == "0") {
        $(this).attr("data-mode", "1");
        $(this).removeClass("far");
        $(this).addClass("fas");
        dark_mode = "dark";
    } else {
        $(this).attr("data-mode", "0");
        $(this).removeClass("fas");
        $(this).addClass("far");
        dark_mode = "light";
    }
});`

Which I think also triggers this update settings event to store the change in the DB

`  function updateSettings() {
   const formData = new FormData($("#update-settings")[0]);
   if (messengerColor) {
    formData.append("messengerColor", messengerColor);
  }
  if (dark_mode) {
    formData.append("dark_mode", dark_mode);
   }
   $.ajax({
    url: url + "/updateSettings",
    method: "POST",
    data: formData,
    dataType: "JSON",
    processData: false,
    contentType: false,
    beforeSend: () => {
        // close settings modal
        app_modal({
            show: false,
            name: "settings",
        });
        // Show waiting alert modal
        app_modal({
            show: true,
            name: "alert",
            buttons: false,
            body: loadingSVG("32px", null, "margin:auto"),
        });
    },
    success: (data) => {
        if (data.error) {
            // Show error message in alert modal
            app_modal({
                show: true,
                name: "alert",
                buttons: true,
                body: data.msg,
            });
        } else {
            // Hide alert modal
            app_modal({
                show: false,
                name: "alert",
                buttons: true,
                body: "",
            });

            // reload the page
            location.reload(true);
        }
    },
    error: () => {
        console.error("Server error, check your response");
    },
    });
     }`

This is the form used for the second switch

          ` <form id="update-settings" action="{{ route('avatar.update') }}" enctype="multipart/form-data"    method="POST">
              @csrf
              {{-- <div class="app-modal-header">Update your profile settings</div> --}}
              <div class="app-modal-body">

                  {{-- Dark/Light Mode  --}}
                  <p class="divider"></p>
                  <p class="app-modal-header">Dark Mode <span class="
                    {{ Auth::user()->dark_mode > 0 ? 'fas' : 'far' }} fa-moon dark-mode-switch"
                     data-mode="{{ Auth::user()->dark_mode > 0 ? 1 : 0 }}"></span></p>
                 

                  </div>
                 </div>
                  <div class="app-modal-footer">
                  <a href="javascript:void(0)" class="app-btn cancel">Cancel</a>
                      <input type="submit" class="app-btn a-btn-success update" value="Save Changes"     />
              </div>
          </form>`

I tried to merge the two js files like this

 `    // Theme Change by Header Button
    $("#themeMood").on("click", function () {
    if (currentTheme === "light" && $(this).attr("data-mode") == "0"){
        
        $(this).attr("data-mode", "1");
        $(this).removeClass("far");
        $(this).addClass("fas");
        dark_mode = "dark";
        currentTheme = "dark";
    } else {
        $(this).attr("data-mode", "0");
        $(this).removeClass("fas");
        $(this).addClass("far");
        dark_mode = "light";
        currentTheme = "light";
    }
    localStorage.theme = currentTheme;
    location.reload();
    });`

I suspect because the update settings is not getting triggered? any suggestions on how I can get this to work?

I have a problem with the image slider. When I click on the next or previous buttons this error pops up app.js:96 Uncaught TypeError: Cannot read properties of undefined (reading ‘classList’)
at changeModalRad (app.js:96:8)
at HTMLImageElement.nextModalRad

This is my code

HTML

<div class="modal">
            <img src="./images/close.png" class="closeBtn">
            <div class="modalimg">img1</div>
            <div class="modalimg">img2</div>
            <div class="modalimg">img3</div>
            <div class="modalimg">img4</div>
            <div class="slideArrow">
                <img  src="./images/arrow-left-red.svg" class="arrowLeft ">
                <img  src="./images/arrow-right-red.svg" class="arrowRight ">
             </div>
        </div>

JS

const modalimgRad = document.querySelectorAll('.b-radGalerie__modalImg');
let currentModalRad = 0;
let maxModalRad = modalimgRad.length;


const changeModalRad = (currentModalRad) => {
    modalimgRad.forEach((modal) => {
        modal.classList.remove('active');
    })

    const el = modalimgRad[currentModalRad];
    el.classList.add('active');
    console.log(el);



}

const nextModalRad = () => {
    if (currentModal === maxModalRad - 1) {
        currentModal = 0;
    } else {
        currentModalRad++;
    }

    changeModalRad(currentModalRad);
}

const prevModalRad = () => {
    if (currentModalRad === 0) {
        currentModal === maxModalRad - 1;
    } else {
        currentModalRad--;
    }
    changeModalRad(currentModalRad);
}

arrowLeftRad.addEventListener('click', prevModalRad);
arrowRightRad.addEventListener('click', nextModalRad);

I think I have a problem with the closeModalRad function but I can not seem to figure it out.

This is how the slider works when clicked on the left/right buttons

I am making something move in HTML and CSS. Here is the code:

@keyframes lively{
    from{
        top:200px;
    }
    to{
        top:-100px;
    }
}

#maincheck{
    background-color:white;
    width:350px;
    height:100px;
    padding: 5px 5px 5px 5px;
    border-radius:5px;
    position:relative;
    top:200px;
    left:400px;
    
}
.animationclass{
    animation: lively 4s 
}

These are all the class and ids.
I am then using Javascript to maneuver everything. Here is that:

const maincheck = document.getElementById("maincheck")
maincheck.addEventListener("mousedown", function(event){
    event.preventDefault()  
    if(event.button == 2){
       maincheck.className = "animationclass"
       console.log("Is")
       }
})

Techincally everything works. Apart from one thing of course otherwise I wouldn’t be herre!
When i right click the div, It does go up, but as soon as it reaches the place where the css keyframe has said, it pops back down. In other words, at the end of the run the div was where it was in the first place- it goes upthen back down again.

What’s going on? Note: I have no errors and the if statement is working.

We’re building two different applications which operate under same domain, and are hosted in different servers.

First application is in Next js and contains all pages available before login.

Second application is in Create React app and contains all info available only after user is logged in.

Login and all backend routes are handled on separate express server. After successful login jwt token is stored in session cookie, and in all requests to backend from CRA app jwt token is automatically added in headers.

So in first application next js, user can be logged in or simple guest, but depending of that we need to show different headers. This is the part where I don’t have clear understanding how to retrieve info is user logged in or not.

I made proxy in next js

 async rewrites() {
    return [
      {
        source: "/user",
        destination: "https://someurl/api/auth/user/", // Proxy to  Backend
      },
      {
        source: "/logout",
        destination: "https://someurl/api/auth/user/logout", // Proxy to  Backend
      },
      
    ];
  }

So when I’m logged in CRA localhost and I start Next js server when I manually go to http://localhost:3000/user I have information of current user whether he is logged in or not, on the other hand if I make this same request through getServerSideProps backend returns me that I’m logged out.
I suppose this is the issue unique session id, but since I can’t see this api request in Network tab I have no idea what is happening.

I would appreciate any thoughts and idea how to share information about login between these two applications if jwt is stored in session cookie as response from backend

Good morning,

On a site I have a request creation form, once this one has been posted, it is sent to an SQL database.

There is also the possibility of editing one of his requests, and this is where it bugs, indeed the previous data from the database reappears well on the form but if for example the user does not click ( and therefore does not modify) the benefit field this one is returned empty in the database (Although filled via a defaultValue) this bug on all fields, Input, tinyMCE and services (the latter are not even returned from the database data).

I have little code experience so this is probably a simple fix, but couldn’t find the solution through my research.

Here is a code snippet if needed:

export default function CreatePage() {

(...)
  const defaultDate = formatISO(add(new Date(), { months: 1 }), {
    representation: "date",
  });
  const maxDate = formatISO(add(new Date(), { years: 1 }), {
    representation: "date",
  });
  const minDate = formatISO(add(new Date(), { days: 7 }), {
    representation: "date",
  });
  let formattedDate = defaultDate;
  const serviceValues = {
    ADMINISTRATIF: "1",
    COMPTABILITE: "2",
    MARKETING: "3",
    "RESSOURCES HUMAINES": "4",
    COMMERCIAL: "5",
  };
  if (id) {
    useEffect(() => {
      fetch(`${import.meta.env.VITE_BACKEND_URL}/demands/${id}`)
        .then((response) => response.json())
        .then((data) => {
          const dateStr = data.Deadline;
          formattedDate = formatISO(new Date(dateStr), {
            representation: "date",
          });
          data.Deadline = formattedDate;
          setDemand(data);
        })
        .catch((error) => {
          console.error(error);
        });
    }, []);
  }

  const onSubmit = (data) => {
    console.info(data);

    const serviceImpactValues = selectedValues.map(
      (value) => serviceValues[value]
    );
    data.ServicesIds = serviceImpactValues;

    if (id) {
      fetch(`${import.meta.env.VITE_BACKEND_URL}/demands/update/${id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((response) => response.json())
        .then((result) => {
          console.info(result);
          setSelectedValues(result);
        })
        .catch((error) => {
          console.error(error);
        });
    } else {
      fetch(`${import.meta.env.VITE_BACKEND_URL}/demands/create`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((response) => response.json())
        .then((result) => {
          console.info(result);
        })
        .catch((error) => {
          console.error(error);
        });
    }
    setIsUpdated((old) => !old);
    console.log(isUpdated);
    navigate(window.history.back());
  };

  const addValue = useCallback((value) => {
    setSelectedValues((prevSelectedValues) => [...prevSelectedValues, value]);
  }, []);

  const removeValue = useCallback((value) => {
    setSelectedValues((prevSelectedValues) =>
      prevSelectedValues.filter((v) => v !== value)
    );
  }, []);

  const editorConfig = {
    (...)
  return (
    <main>
     (...)
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>
          <input
            {...register("Title")}
            className={styles.title}
            type="text"
            name="Title"
            placeholder="Titre de ta décision"
            required
            defaultValue={demand.Title}
          />
        </label>
        <div className={styles.editor}>
          <Controller
            {...demand.Content}
            control={control}
            name="Content"
            render={({ field: { onChange, onBlur, ref } }) => (
              <Editor
                {...demand.Content}
                onBlur={onBlur}
                onEditorChange={onChange}
                initialValue={id ? demand.Content : undefined}
                init={editorConfig}
                onInit={(evt, editor) => (ref.current = editor)}
              />
            )}
          />
        </div>
        <div className={styles.benefInc}>
          <textarea
            {...register("Benefice")}
            type="text"
            name="Benefice"
            placeholder="Quel en seront les bénéfices ?"
            required
            defaultValue={demand.Benefice}
          />
          <textarea
            {...register("Inconvenience")}
            type="text"
            name="Inconvenience"
            placeholder="Et les risques ?"
            required
            defaultValue={demand.Inconvenience}
          />
        </div>
        <p className={styles.label}>Service(s) impactés</p>
        <div className={styles.buttonServ}>
          <Button
            addValue={addValue}
            removeValue={removeValue}
            value={serviceValues.ADMINISTRATIF}
          >
            ADMINISTRATIF
          </Button>
          <Button
            addValue={addValue}
            removeValue={removeValue}
            value={serviceValues.COMPTABILITE}
          >
         (...)
        </div>
        <p className={styles.label}>Choix :</p>
        <div className={styles.buttonServ} id="selectedValue">
          {selectedValues.map((value) => (
            <button className={styles.buttonChoice} type="button" key={value}>
              {value}
            </button>
          ))}
        </div>
        <label className={styles.date}>
          Date de fin souhaitée :
          <input
            {...register("Deadline")}
            type="date"
            name="Deadline"
            placeholder={defaultDate}
            defaultValue={demand.Deadline}
            min={minDate}
            max={maxDate}
            className={styles.inputDate}
            required
          />
        </label>
        <button className={styles.btnSubmit} type="submit">
          Je propose mon idée !
        </button>
      </form>
    </main>
  );
}

The sending of all the data in the update of the update that the fields and were clicked or not and that the services clicked during creation appear during an update. Currently the fields are returned empty in the database if they are not clicked and the services are not reassembled during an update request

Thank you in advance for your assistance

I have tried giving rel=”preload” for the anchor tag but still it is not working. I need the image that is wrapped inside the div which is already inside anchor tag should be preloaded so that it will improve the page performance.

                                <a
                                key={index}
                                href={'/image/url/}
                                title={item.image.altText}
                                target={item?.link?.target}
                            >
                                <div
                                    key={index}
                                >
                                    <img
                                        src={item.image}
                                        alt={item.image && item.image.altText}
                                        
                                    />
                                </div>
                            </a>