[FE] Spike on "vulnerabilities over time" for group dashboard

What does this MR do and why?

This is a spike to demonstrate using getDataURL to extract the chart as a SVG.

Note: <gl-sparkline-chart> is done individually for each severity, so the SVG is also separate. I think we should stick with sending them individually and assemble them on the BE, as this will provide more control over the PDF layout and reduce extra processing on the FE.

SVG demo	JSON payload proposal

JSON Payload Proposal

The data will be dynamic and reflect the current UI selections. Example:

{
  "title": "Vulnerabilities over time",
  "dateRangeDisplay": "March 26th to today",
  "selectedDayRange": 60,
  "charts": [
    {
      "severity": "critical",
      "svg": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22347%22%20height%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20baseProfile%3D%22full%22%20viewBox%3D%220%200%20347%2032%22%3E%0A%3Crect%20width%3D%22347%22%20height%3D%2232%22%20x%3D%220%22%20y%3D%220%22%20id%3D%220%22%20fill%3D%22none%22%20fill-opacity%3D%221%22%3E%3C%2Frect%3E%0A%3Cg%20clip-path%3D%22url(%23zr4-c0)%22%3E%0A%3Cpath%20d%3D%22M3%2017.3L8.7%2017.3L14.4%2017.3L20%2017.3L25.7%2017.3L31.4%2017.3L37.1%2017.3L42.8%2017.3L48.5%2017.3L54.2%2017.3L59.8%2017.3L65.5%2017.3L71.2%2017.3L76.9%2017.3L82.6%2017.3L88.3%2017.3L93.9%2017.3L99.6%2017.3L105.3%2017.3L111%2017.3L116.7%2017.3L122.3%2017.3L128%2017.3L133.7%2017.3L139.4%2017.3L145.1%2017.3L150.8%2017.3L156.4%2017.3L162.1%2017.3L167.8%2017.3L173.5%2017.3L179.2%2017.3L184.9%2017.3L190.6%2017.3L196.2%2017.3L201.9%2017.3L207.6%2017.3L213.3%2017.3L219%2017.3L224.6%2017.3L230.3%2017.3L236%2017.3L241.7%2017.3L247.4%2017.3L253.1%2017.3L258.8%2017.3L264.4%2017.3L270.1%2017.3L275.8%2017.3L281.5%2017.3L287.2%2017.3L292.9%2017.3L298.5%2017.3L304.2%2017.3L309.9%2017.3L315.6%2017.3L321.3%2017.3L327%2017.3L332.6%2017.3L338.3%2017.3L344%2017.3%22%20fill%3D%22none%22%20stroke%3D%22%23617ae2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22bevel%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3Cdefs%20%3E%0A%3CclipPath%20id%3D%22zr4-c0%22%3E%0A%3Cpath%20d%3D%22M2%202l343%200l0%2028l-343%200Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E",
      "changeInPercent": "+0%",
      "currentCount": 31
    },
    {
      "severity": "high",
      "svg": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22347%22%20height%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20baseProfile%3D%22full%22%20viewBox%3D%220%200%20347%2032%22%3E%0A%3Crect%20width%3D%22347%22%20height%3D%2232%22%20x%3D%220%22%20y%3D%220%22%20id%3D%220%22%20fill%3D%22none%22%20fill-opacity%3D%221%22%3E%3C%2Frect%3E%0A%3Cg%20clip-path%3D%22url(%23zr5-c0)%22%3E%0A%3Cpath%20d%3D%22M3%2016.2L8.7%2016.2L14.4%2016.2L20%2016.2L25.7%2016.2L31.4%2016.2L37.1%2016.2L42.8%2016.2L48.5%2016.2L54.2%2016.2L59.8%2016.2L65.5%2016.2L71.2%2016.2L76.9%2016.2L82.6%2016.2L88.3%2016.2L93.9%2016.2L99.6%2016.2L105.3%2016.2L111%2016.2L116.7%2016.2L122.3%2016.2L128%2016.2L133.7%2016.2L139.4%2016.2L145.1%2016.2L150.8%2016.2L156.4%2016.2L162.1%2016.2L167.8%2016.2L173.5%2016.2L179.2%2016.2L184.9%2016.2L190.6%2016.2L196.2%2016.2L201.9%2016.2L207.6%2016.2L213.3%2016.2L219%2016.2L224.6%2016.2L230.3%2016.2L236%2016.2L241.7%2016.2L247.4%2016.2L253.1%2016.2L258.8%2016.2L264.4%2016.2L270.1%2016.2L275.8%2016.2L281.5%2016.2L287.2%2016.2L292.9%2016.2L298.5%2016.2L304.2%2016.2L309.9%2016.2L315.6%2016.2L321.3%2016.2L327%2016.2L332.6%2016.2L338.3%2016.2L344%2016.2%22%20fill%3D%22none%22%20stroke%3D%22%23617ae2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22bevel%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3Cdefs%20%3E%0A%3CclipPath%20id%3D%22zr5-c0%22%3E%0A%3Cpath%20d%3D%22M2%202l343%200l0%2028l-343%200Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E",
      "changeInPercent": "+0%",
      "currentCount": 158
    },
    {
      "severity": "medium",
      "svg": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22347%22%20height%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20baseProfile%3D%22full%22%20viewBox%3D%220%200%20347%2032%22%3E%0A%3Crect%20width%3D%22347%22%20height%3D%2232%22%20x%3D%220%22%20y%3D%220%22%20id%3D%220%22%20fill%3D%22none%22%20fill-opacity%3D%221%22%3E%3C%2Frect%3E%0A%3Cg%20clip-path%3D%22url(%23zr6-c0)%22%3E%0A%3Cpath%20d%3D%22M3%205.6L8.7%2029L14.4%205.6L20%205.6L25.7%205.6L31.4%205.6L37.1%205.6L42.8%205.6L48.5%205.6L54.2%205.6L59.8%205.6L65.5%205.6L71.2%205.6L76.9%205.6L82.6%205.6L88.3%205.6L93.9%205.6L99.6%205.6L105.3%205.6L111%205.6L116.7%205.6L122.3%205.6L128%205.6L133.7%205.6L139.4%205.6L145.1%205.6L150.8%205.6L156.4%204.8L162.1%204.8L167.8%204.8L173.5%204.8L179.2%204.8L184.9%204.8L190.6%204.8L196.2%204.8L201.9%204.8L207.6%204.8L213.3%204.8L219%204.8L224.6%204.8L230.3%204.8L236%204.8L241.7%204.8L247.4%204.8L253.1%204.8L258.8%204.8L264.4%204.8L270.1%204.8L275.8%204.8L281.5%204.8L287.2%204.8L292.9%204.8L298.5%204.8L304.2%204.8L309.9%204.8L315.6%204.8L321.3%204.8L327%204.8L332.6%204.8L338.3%204.8L344%204.8%22%20fill%3D%22none%22%20stroke%3D%22%23617ae2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22bevel%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3Cdefs%20%3E%0A%3CclipPath%20id%3D%22zr6-c0%22%3E%0A%3Cpath%20d%3D%22M2%202l343%200l0%2028l-343%200Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E",
      "changeInPercent": "+1%",
      "currentCount": 165
    },
    {
      "severity": "low",
      "svg": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22347%22%20height%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20baseProfile%3D%22full%22%20viewBox%3D%220%200%20347%2032%22%3E%0A%3Crect%20width%3D%22347%22%20height%3D%2232%22%20x%3D%220%22%20y%3D%220%22%20id%3D%220%22%20fill%3D%22none%22%20fill-opacity%3D%221%22%3E%3C%2Frect%3E%0A%3Cg%20clip-path%3D%22url(%23zr7-c0)%22%3E%0A%3Cpath%20d%3D%22M3%203L8.7%2029L14.4%203L20%203L25.7%203L31.4%203L37.1%203L42.8%203L48.5%203L54.2%203L59.8%203L65.5%203L71.2%203L76.9%203L82.6%203L88.3%203L93.9%203L99.6%203L105.3%203L111%203L116.7%203L122.3%203L128%203L133.7%203L139.4%203L145.1%203L150.8%203L156.4%203L162.1%203L167.8%203L173.5%203L179.2%203L184.9%203L190.6%203L196.2%203L201.9%203L207.6%203L213.3%203L219%203L224.6%203L230.3%203L236%203L241.7%203L247.4%203L253.1%203L258.8%203L264.4%203L270.1%203L275.8%203L281.5%203L287.2%203L292.9%203L298.5%203L304.2%203L309.9%203L315.6%203L321.3%203L327%203L332.6%203L338.3%203L344%203%22%20fill%3D%22none%22%20stroke%3D%22%23617ae2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22bevel%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3Cdefs%20%3E%0A%3CclipPath%20id%3D%22zr7-c0%22%3E%0A%3Cpath%20d%3D%22M2%202l343%200l0%2028l-343%200Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E",
      "changeInPercent": "+0%",
      "currentCount": 19
    }
  ]
}

❓ Question

I've included all the necessary information as displayed in the UI. However, I am worried that the FE is sending too many redundant data which could hurt request speed. Since the BE already has access to this data, we might only need to send the generated SVGs and the current selected date range. The BE can retrieve all other required information directly from its existing data sources.

Perhaps a better proposal would be:

{
  "title": "Vulnerabilities over time", // Static data: We should discuss what's a better identifier
  "selectedDayRange": 60, // Dynamic data, since it reflects what the user has selected
  "charts": [
    {
      "severity": "critical",
      "svg": "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22347%22%20height%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20baseProfile%3D%22full%22%20viewBox%3D%220%200%20347%2032%22%3E%0A%3Crect%20width%3D%22347%22%20height%3D%2232%22%20x%3D%220%22%20y%3D%220%22%20id%3D%220%22%20fill%3D%22none%22%20fill-opacity%3D%221%22%3E%3C%2Frect%3E%0A%3Cg%20clip-path%3D%22url(%23zr4-c0)%22%3E%0A%3Cpath%20d%3D%22M3%2017.3L8.7%2017.3L14.4%2017.3L20%2017.3L25.7%2017.3L31.4%2017.3L37.1%2017.3L42.8%2017.3L48.5%2017.3L54.2%2017.3L59.8%2017.3L65.5%2017.3L71.2%2017.3L76.9%2017.3L82.6%2017.3L88.3%2017.3L93.9%2017.3L99.6%2017.3L105.3%2017.3L111%2017.3L116.7%2017.3L122.3%2017.3L128%2017.3L133.7%2017.3L139.4%2017.3L145.1%2017.3L150.8%2017.3L156.4%2017.3L162.1%2017.3L167.8%2017.3L173.5%2017.3L179.2%2017.3L184.9%2017.3L190.6%2017.3L196.2%2017.3L201.9%2017.3L207.6%2017.3L213.3%2017.3L219%2017.3L224.6%2017.3L230.3%2017.3L236%2017.3L241.7%2017.3L247.4%2017.3L253.1%2017.3L258.8%2017.3L264.4%2017.3L270.1%2017.3L275.8%2017.3L281.5%2017.3L287.2%2017.3L292.9%2017.3L298.5%2017.3L304.2%2017.3L309.9%2017.3L315.6%2017.3L321.3%2017.3L327%2017.3L332.6%2017.3L338.3%2017.3L344%2017.3%22%20fill%3D%22none%22%20stroke%3D%22%23617ae2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22bevel%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3Cdefs%20%3E%0A%3CclipPath%20id%3D%22zr4-c0%22%3E%0A%3Cpath%20d%3D%22M2%202l343%200l0%2028l-343%200Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E",
      "changeInPercent": "+0%", // maybe redundant?
      "currentCount": 31 // maybe redundant?
    },
    { "severity": "high", ...},
    { "severity": "medium", ...},
    { "severity": "low", ...},
  ]
}

Related to #541937 (closed)