export async function renderDependencyHeatmap()

in ui/changes/src/common.js [1923:2012]

• 63 lines of code
• 5 McCabe index (conditional complexity)

export async function renderDependencyHeatmap(
  chartEl,
  title,
  source_components = null,
  target_components = null
) {
  if (!source_components) {
    source_components = allComponents;
  }

  if (!target_components) {
    target_components = allComponents;
  }

  const dependencyType = getOption("dependencyType");
  const map = await getComponentDependencyMap(dependencyType);

  target_components = target_components.filter(
    (target_component) => target_component in map
  );
  source_components = source_components.filter((source_component) =>
    target_components.some(
      (target_component) => source_component in map[target_component]
    )
  );

  const series = target_components.map((target_component) => {
    let values = {};
    values.name = target_component;
    values.data = [];

    for (const source_component of source_components) {
      const obj = {};
      obj.x = source_component;
      obj.y =
        source_component in map[target_component]
          ? Math.trunc(map[target_component][source_component] * 100)
          : 0;

      values.data.push(obj);
    }

    return values;
  });

  const options = {
    series,
    chart: {
      height: 700,
      type: "heatmap",
      animations: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    colors: ["#008FFB"],
    xaxis: {
      type: "category",
    },
    title: {
      text: title,
      align: "left",
    },
    tooltip: {
      custom: function ({ series, seriesIndex, dataPointIndex, w }) {
        const source = source_components[dataPointIndex];
        const target = target_components[seriesIndex];
        const perc = series[seriesIndex][dataPointIndex];

        let text;
        if (dependencyType == "regressions") {
          text = `Regressions caused by changes to <b>${source}</b> files are filed in <b>${target}</b> ${perc}% of the times.`;
        } else if (dependencyType == "test-failures") {
          text = `Failures caused by changes fixing <b>${source}</b> bugs are in tests belonging to <b>${target}</b> ${perc}% of the times.`;
        }

        return (
          `<div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">` +
          `<span class="apexcharts-tooltip-text-label">${text}</span>` +
          `</div>`
        );
      },
    },
  };

  const chart = new ApexCharts(chartEl, options);
  chart.render();
}