Function showData

scripts/web_timer_main.js:259–319

({
  fromDate = new Date(),
  endDate,
  dateType = DATE_TYPE.DAY,
  displayType = DISPLAY_TYPE.TOTAL,
})

}

function showData({
  fromDate = new Date(),
  endDate,
  dateType = DATE_TYPE.DAY,
  displayType = DISPLAY_TYPE.TOTAL,
}) {
  const { chartData = [], allData = [] } =
    getData({ fromDate, endDate, dateType, displayType }) || {};

  // draw chart
  let chart = Donut(280, chartData, 50, 2);
  chartContainer.innerHTML = "";
  chartContainer.appendChild(chart);

  // draw controller
  dataContainer.innerHTML = "";

  // total row
  let totalTime = allData.reduce((acc, curr) => acc + curr.value, 0);
  let totalRow = document.createElement("div");
  totalRow.classList.add("row", "total");
  totalRow.innerHTML = `
    <div>
      <div class="label">${t({ vi: "Tổng", en: "Total" })}</div>
    </div>
    <div>
      <div class="percentage">100.00 %</div>
      <div class="timer">${splitHidden(formatSeconds(totalTime, true))}</div>
    </div>
  `;
  dataContainer.append(totalRow);

  // all rows
  allData.forEach((d) => {
    let row = document.createElement("div");
    row.classList.add("row");
    row.setAttribute("ufs-website", d.website);
    row.innerHTML = `
      <div>
        <div class="color" style="background-color: ${d.color}"></div>
        <div class="label" >${d.website}</div>
      </div>
      <div>
        <div class="percentage">${d.percentage} %</div>
        <div class="timer">
          ${splitHidden(formatSeconds(d.value, true))}
        </div>
      </div>
    `;
    row.addEventListener("mouseover", () => {
      document.querySelector("g.active")?.classList.remove("active");
      document
        .querySelector("g[ufs-website='" + d.website + "']")
        ?.dispatchEvent(new Event("mouseover", { bubbles: true }));
    });
    row.addEventListener("click", () => {});
    dataContainer.appendChild(row);
  });