export async function renderTimeToConfirmChart()

in ui/changes/src/common.js [1355:1453]

• 62 lines of code
• 4 McCabe index (conditional complexity)

export async function renderTimeToConfirmChart(chartEl, bugSummaries) {
  bugSummaries = bugSummaries.filter(
    (bugSummary) => bugSummary.time_to_confirm !== null
  );

  if (bugSummaries.length == 0) {
    return;
  }

  let minDate = getPlainDate(
    bugSummaries.reduce((minSummary, summary) =>
      Temporal.PlainDate.compare(
        getPlainDate(summary.creation_date),
        getPlainDate(minSummary.creation_date)
      ) < 0
        ? summary
        : minSummary
    ).creation_date
  );

  let summaryData = await getSummaryData(
    bugSummaries,
    getOption("grouping"),
    minDate,
    (counterObj, bug) => {
      counterObj.times_to_confirm.push(bug.time_to_confirm);
    },
    null,
    (summary) => summary.creation_date,
    () => []
  );

  let categories = [];
  let ninthdecile_time_to_confirm = [];
  let median_time_to_confirm = [];
  const bugs_number = [];
  for (let date in summaryData) {
    categories.push(date);
    ninthdecile_time_to_confirm.push(
      quantile(summaryData[date].times_to_confirm, 0.9).toFixed(1)
    );
    median_time_to_confirm.push(
      median(summaryData[date].times_to_confirm).toFixed(1)
    );
    bugs_number.push(summaryData[date].times_to_confirm.length);
  }

  renderChart(
    chartEl,
    [
      {
        name: "90% time to confirm",
        data: ninthdecile_time_to_confirm,
      },
      {
        name: "Median time to confirm",
        data: median_time_to_confirm,
      },
    ],
    categories,
    "Time to confirm",
    "Days",
    {},
    {
      custom: function ({ series, seriesIndex, dataPointIndex, w }) {
        return (
          `<div class="apexcharts-tooltip-title">${categories[dataPointIndex]}</div>` +
          `<div class="apexcharts-tooltip-series-group apexcharts-active" style="order: 1; display: flex;">` +
          `<span class="apexcharts-tooltip-marker" style="background-color: rgb(0, 143, 251);"></span>` +
          `<div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">` +
          `<div class="apexcharts-tooltip-y-group">` +
          `<span class="apexcharts-tooltip-text-label">90% time to confirm: </span>` +
          `<span class="apexcharts-tooltip-text-value">${ninthdecile_time_to_confirm[dataPointIndex]}</span>` +
          `</div>` +
          `</div>` +
          `</div>` +
          `<div class="apexcharts-tooltip-series-group apexcharts-active" style="order: 2; display: flex;">` +
          `<span class="apexcharts-tooltip-marker" style="background-color: rgb(0, 227, 150);"></span>` +
          `<div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">` +
          `<div class="apexcharts-tooltip-y-group">` +
          `<span class="apexcharts-tooltip-text-label">Median time to confirm: </span>` +
          `<span class="apexcharts-tooltip-text-value">${median_time_to_confirm[dataPointIndex]}</span>` +
          `</div>` +
          `</div>` +
          `</div>` +
          `<div class="apexcharts-tooltip-series-group apexcharts-active" style="order: 3; display: flex;">` +
          `<span class="apexcharts-tooltip-marker" style=""></span>` +
          `<div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">` +
          `<div class="apexcharts-tooltip-y-group">` +
          `<span class="apexcharts-tooltip-text-label">Number of bugs: </span>` +
          `<span class="apexcharts-tooltip-text-value">${bugs_number[dataPointIndex]}</span>` +
          `</div>` +
          `</div>` +
          `</div>`
        );
      },
    }
  );
}