☰

MAL Summary+Profile Stats With Percentages + Hours

See your profile stats in % + Hours, and see the Summary Stats in %

// ==UserScript==
// @name         MAL Summary+Profile Stats With Percentages + Hours
// @namespace    http://tampermonkey.net/
// @version      6
// @description  See your profile stats in % + Hours, and see the Summary Stats in %
// @author       Only_Brad (& commented by hacker09)
// @include      /^https:\/\/myanimelist\.net\/(anime|manga)\/[\d]+\/.*\/stats/
// @match        https://myanimelist.net/profile/*
// @exclude      https://myanimelist.net/*/*/clubs
// @exclude      https://myanimelist.net/*/*/reviews
// @exclude      https://myanimelist.net/*/*/friends
// @exclude      https://myanimelist.net/*/*/recommendations
// @icon         https://www.google.com/s2/favicons?domain=myanimelist.net
// @run-at       document-end
// @grant        GM_addStyle
// ==/UserScript==

// Functions to select the days txt and day numbers to convert then to txt hours and numbers in hours later
(function() {
  if (location.href.match('profile') !== null) //If the current url is the profile of some user
  { //Starts the if condition
    GM_addStyle(".profile .user-statistics .stats-status{width: 200px;}");
    document.head.insertAdjacentHTML('afterend', '<style>span.di-ib.fl-r.lh10 {position: absolute!important; text-indent: 10px!important;}</style>'); //Fixes new dark mode bug
    const days = document.querySelector(".di-tc.al.pl8.fs12.fw-b"),
      hours = days.cloneNode(true),
      hoursText = hours.querySelector("span"),
      hoursValueNode = hoursText.nextSibling,
      hoursValue = parseFloat(hoursValueNode.textContent.replace(/,/g, ""));

    // Add the symbol // On the beginning the 2 lines below "disable" the total hours,then you can have just the mal percentages feature
    hoursText.textContent = "Hours: ";
    hoursValueNode.textContent = (hoursValue * 24).toFixed(1);
    days.insertAdjacentElement("afterend", hours);

    // Functions to select all the animes stats and the Total stats
    const total = parseInt(document.querySelector(".stats-data.fl-r span:nth-child(2)").textContent.replace(/,/g, ""));
    const [watching, completed, onHold, dropped, planToWatch] = document.querySelectorAll(".di-ib.fl-r.lh10");

    // Functions to add the percentage after the total number of each watching,completed,onHold,dropped,planToWatch
    [watching, completed, onHold, dropped, planToWatch].forEach(addPercentage);

    // Functions that do the math
    function getPercentage(node) {
      const value = parseInt(node.textContent.replace(/,/g, ""));
      if (total === 0) return "0.00";
      return (value * 100 / total).toFixed(2);
    }

    // Functions to show and append the scores after each watching,completed,onHold,dropped,planToWatch
    function addPercentage(node) {
      const percentage = getPercentage(node);
      node.textContent = `${node.textContent} (${percentage}%)`;
    }
  } //Finishes the if condition
  else //If the user is on the summary page
  { //Starts the else condition
    const [, , , watching, completed, onHold, dropped, planToWatch, total] = document.querySelectorAll("#content > table > tbody > tr > td:nth-child(2) > div.js-scrollfix-bottom-rel > div");
    const totalValue = getValue(total);

    [watching, completed, onHold, dropped, planToWatch].forEach(addPercentage);

    //Uncomment the below code to swap "Watching" and "Completed" positions
    //watching.before(completed);

    function getValue(node) {
      const text = node.querySelector("span");
      return parseInt(text.nextSibling.textContent.replace(/,/g, ""));
    }

    function getPercentage(node) {
      if (totalValue === 0) return "0.00";
      const value = getValue(node);
      return (value * 100 / totalValue).toFixed(2);
    }

    function addPercentage(node) {
      const text = node.querySelector("span");
      const valueNode = text.nextSibling;
      const percentage = getPercentage(node);
      valueNode.textContent = `${valueNode.textContent} (${percentage}%)`;
      addBar(node, percentage);
    }

    function addBar(node, percentage) {
      const percentageText = convertTextNodeToSpan(node);
      percentageText.style = "font-weight: normal";

      const textNode = node.querySelector(".dark_text");
      textNode.appendChild(percentageText);

      const bar = document.createElement("div");
      bar.setAttribute("class", "updatesBar");
      bar.style = `display: block; height: 15px; width: ${percentage}%;`;

      textNode.after(bar);
    }

    function convertTextNodeToSpan(node) {
      for (const child of node.childNodes) {
        if (child.nodeType === Node.TEXT_NODE) {
          const text = child.textContent;
          child.remove();
          const span = document.createElement("span");
          span.textContent = text;
          node.appendChild(span);
          return span;
        }
      }
    }
  } //Finishes the else condition
})()