Function createPanelReportTable

docs/ui/src/js/createPanelReportTable.js:17–187

(colors, background, scaleType, level)

import chroma from 'chroma-js';

function createPanelReportTable(colors, background, scaleType, level) {
  if (!colors) {
    const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale;
    let scaleColors = colorClass.colors;
    if (scaleType === 'sequential') {
      colors = [scaleColors[0], scaleColors[scaleColors.length - 1]];
    } else {
      colors = [scaleColors[0], colorClass.middleKey, scaleColors[scaleColors.length - 1]];
    }
  }
  if (!background) {
    background = document.getElementById(`scales_bgColor`).value;
  }
  if (scaleType && !level) {
    let compliancePicker = document.getElementById(`scales_complianceLevel`);
    level = compliancePicker.value;
  }

  let bgArray = chroma(background).rgb();
  const minimumThreshold = 11;
  const WCAGmin = level === 'AA' ? 3 : 4.5;

  let reportWrapper = document.getElementById(`${scaleType}_a11yTable`);
  reportWrapper.innerHTML = ' ';

  let headers = ['Compared colors', 'Preview', 'Status', 'Contrast', 'Color difference'];
  let rows = [];

  for (let i = 0; i < colors.length; i++) {
    let fgArray = chroma(colors[i]).rgb();
    let contrast = Leo.contrast(fgArray, bgArray);
    if (contrast < 0) contrast = contrast * -1;

    let deltaE = getDifference(colors[i], background);
    let meterPercent = round(deltaE, 2);

    let uiClass = contrast < WCAGmin || deltaE < minimumThreshold ? 'negative' : 'positive';
    let uiStatus = contrast < WCAGmin || deltaE < minimumThreshold ? 'Fail' : 'Pass';

    let meterClass = deltaE < minimumThreshold ? 'is-negative' : 'is-positive';
    let color1;
    if (scaleType === 'sequential') {
      color1 = i === 0 ? 'Start color' : 'End color';
    } else {
      color1 = i === 0 ? 'Start color' : i === 1 ? 'Middle color' : 'End color';
    }
    let color2 = 'Background';

    let rowItem = [
      `${color1} vs ${color2}`,
      `<div class="dualSwatch">
        <div class="swatch" style="background-color: ${colors[i]}"></div>
        <div class="swatch" style="background-color: ${background}"></div>
      </div>`,
      `<span class="spectrum-Badge spectrum-Badge--sizeS spectrum-Badge--${uiClass}">${uiStatus}</span>`,
      `<span class="spectrum-Body spectrum-Body--sizeM">${round(contrast, 2)}:1</span>`,
      `<div">
        <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM deltaE-meter ${meterClass}" value="${meterPercent}" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">