@zeesoft/i18n-verify 1.0.0 → 2.0.0

package/dist/utils/reportFactory/html/template/html.js

@@ -24,6 +24,22 @@ const renderHtml = ({
       content="I18n verification report"
     />
     <title>I18n Verification Report | ${reportTime}</title>
+        <!-- 3rd party dependecies -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css"
+    />
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
+      integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
+      crossorigin="anonymous"
+      defer
+    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts" defer></script>
+    <script
+      src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"
+      defer
+    ></script>
     <style>
       ${style}
     </style>
@@ -37,7 +53,7 @@ const renderHtml = ({
 </html>
 `;
 exports.renderHtml = renderHtml;
-const getBodyData = () => ` <header><div class="logo">zI18n-Verify</div></header>
+const getBodyData = () => `<header><div class="logo">zI18n-Verify</div></header>
     <main>
       <div class="sidebar">
         <ul class="menu" id="menu">
@@ -46,33 +62,96 @@ const getBodyData = () => ` <header><div class="logo">zI18n-Verify</div></header
           </li>
           <li class="menu-item has-submenu" data-page="insights">
             <a href="#" data-page="insights">Insights</a>
-            <ul class="submenu">
-              <li class="sub-menu-item" data-locale="en_US">
-                <a href="#">en_US</a>
-              </li>
-              <li class="sub-menu-item" data-locale="fr_CA">
-                <a href="#">fr_CA</a>
-              </li>
-            </ul>
+            <ul class="submenu"></ul>
           </li>
         </ul>
+        <div class="footer"></div>
       </div>
       <div class="content-wrapper">
         <div id="overview" class="content">
-          <div class="overall-quality">
-            <span class="title">Overall I18n Quality</span>
+          <div class="overall-quality card">
+            <span class="title">Overall I18n Coverage</span>
+            <div class="section">
+              <div class="block">
+                <article>
+                  <p class="desc">
+                    zI18n-Verify report provides a comprehensive information
+                    about the I18n and L10n quailty of your application.
+                  </p>
+                  <ul class="items">
+                    <li>
+                      <h4>Reviewed:</h4>
+                      <p class="detail">
+                        Total strings which are captured and processed by
+                        zI18n-Verify.
+                      </p>
+                    </li>
+                    <li>
+                      <h4>Internationlized:</h4>
+                      <p class="detail">
+                        Different types of value like string, number, date-time
+                        which are properly Internationalized.
+                      </p>
+                    </li>
+                    <li>
+                      <h4>Not Internationalized:</h4>
+                      <p class="detail">
+                        Values which are not Internationalized. Also includes
+                        Partially Localized strings and Encoding Issues.
+                      </p>
+                    </li>
+                    <li>
+                      <h4>Skipped:</h4>
+                      <p class="detail">
+                        Values which are skipped from processing because they
+                        are listed in DNT / Ignored lists or contains Auto
+                        Ignored pattern / User input pattern.
+                      </p>
+                    </li>
+                  </ul>
+                </article>
+              </div>
+              <div class="block">
+                <div class="graph"></div>
+              </div>
+            </div>
+          </div>
+          <div class="string-quality card">
+            <span class="title">String Coverage</span>
+            <div class="graph"></div>
+          </div>
+          <div class="skipped-items card">
+            <span class="title">Skipped Items</span>
+            <div class="graph"></div>
+          </div>
+          <div class="number-quality card">
+            <span class="title">Number Coverage</span>
+            <div class="graph"></div>
+          </div>
+          <div class="datetime-quality card">
+            <span class="title">DateTime Coverage</span>
+            <div class="graph"></div>
           </div>
-          <div><span class="title">String Quality</span></div>
-          <div><span class="title">Number Quality</span></div>
-          <div><span class="title">DateTime Quality</span></div>
         </div>
         <div id="insights" class="content">
           <div class="cards">
-            <span class="title">Locale wise info cards</span>
+            <span class="title">Locale Quality</span>
+            <div class="holder"></div>
           </div>
         </div>
         <div id="locale" class="content">
-          <div class="string-data"><span class="title">String Data</span></div>
+          <span class="title">Locale Quality</span>
+          <div class="coverage-info">
+            <table class="row-border hover order-column stripe"></table>
+          </div>
+          <div id="imageViewer" class="image-viewer">
+            <span class="close-button" onclick="closeImageViewer()"
+              >&times;</span
+            >
+            <div class="image-container">
+              <img id="imageView" src="" alt="Image" />
+            </div>
+          </div>
         </div>
       </div>
     </main>`;

package/dist/utils/reportFactory/html/template/javascript/data.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = (locales, stats, statsByLocale) => ``;
+exports.default = _default;

package/dist/utils/reportFactory/html/template/javascript/grid.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => `
+//grid view
+(() => {
+        document.addEventListener("DOMContentLoaded", function () {
+          let table;
+          document.querySelectorAll(".sub-menu-item").forEach((menu) => {
+            menu.addEventListener("click", (e) => {
+              render(e.currentTarget.dataset.locale);
+            });
+          });
+
+          const updateTitle = (locale) => {
+            document.querySelector(
+              "#locale .title"
+            ).textContent = \`\${locale} I18n Coverage Details\`;
+          };
+
+          const buildGrid = (_locale) => {
+            const data = DataStore.getDataByLocale(_locale);
+            $.fn.dataTable.ext.errMode = "none";
+            const locale = ["en_US", "fr_FR"];
+            const type = [
+              "I18n Str",
+              "Not I18n Str",
+              "Parially Localized",
+              "Utranslated",
+              "Encoding",
+              "DNT",
+              "I18n Date",
+              "I18n Number",
+              "Not I18n DateTime",
+            ];
+            const testPages = [
+              "Welcome-Page",
+              "Settings-Page",
+              "User-Profile-Page",
+              "Dashboard-Page",
+            ];
+
+            const dataSet = Array(100)
+              .fill()
+              .map((i, v) => [
+                \`sample text \${v}\`,
+                locale[Math.floor(Math.random() * 2)],
+                type[Math.floor(Math.random() * 9)],
+                testPages[Math.floor(Math.random() * 3)],
+                \`link-\${v}.png\`,
+              ]);
+            table = new DataTable("#locale .coverage-info table", {
+              columns: [
+                { title: "String" },
+                { title: "Locale" },
+                { title: "Type" },
+                { title: "Page" },
+                { title: "Screenshot" },
+              ],
+              columnDefs: [
+                {
+                  targets: 4,
+                  orderable: false,
+                  searchable: false,
+                  data: null,
+                  render: function (data) {
+                    return \`<a href="#" class="view-screenshot-btn" onclick="openImageViewer('\${data[4]}')">View Screenshot</a>\`;
+                  },
+                },
+              ],
+              data: dataSet,
+              initComplete: function () {
+                this.api()
+                  .columns()
+                  .every(function () {
+                    const column = this;
+
+                    if (column[0][0] === 4) {
+                      return;
+                    }
+
+                    const select = $(
+                      '<select class="filter dt-input"><option value="">Filter By</option></select>'
+                    )
+                      .appendTo($(column.header()).before())
+                      .on("change", function () {
+                        const val = $.fn.dataTable.util.escapeRegex(
+                          $(this).val()
+                        );
+
+                        column
+                          .search(val ? "^" + val + "$" : "", true, false)
+                          .draw();
+                      })
+                      .on("click", function (e) {
+                        e.stopPropagation();
+                        e.stopImmediatePropagation();
+                      });
+
+                    column
+                      .data()
+                      .unique()
+                      .sort()
+                      .each(function (d, j) {
+                        select.append(
+                          '<option value="' + d + '">' + d + "</option>"
+                        );
+                      });
+                  });
+              },
+              sScrollY:
+                document
+                  .querySelector("#locale .coverage-info")
+                  .getBoundingClientRect().height - 142,
+              pageLength: 25,
+              lengthMenu: [10, 25, 50, 100],
+            });
+
+            // Event handler when position select is changed
+            $(table.columns(1).header())
+              .find("select")
+              .on("change", function () {
+                var nextSelect = $(table.columns(2).header()).find("select");
+                var nextColumn = table.column(2);
+                var nextColumnResults = table.column(2, { search: "applied" });
+                nextColumn.search("").draw();
+                nextSelect.empty();
+                nextSelect.append('<option value="">Filter By</option>');
+                nextColumnResults
+                  .data()
+                  .unique()
+                  .sort()
+                  .each(function (d, j) {
+                    nextSelect.append(
+                      '<option value="' + d + '">' + d + "</option>"
+                    );
+                  });
+              });
+          };
+
+          const render = (locale) => {
+            updateTitle(locale);
+            buildGrid(locale);
+            if (table) {
+              $($(table.columns(1).header()).find("select")).val(locale);
+              table.columns(1).search(locale).draw();
+            }
+          };
+        });
+      })();
+`;
+exports.default = _default;

package/dist/utils/reportFactory/html/template/javascript/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _menuBar = _interopRequireDefault(require("./menuBar.js"));
+var _overview = _interopRequireDefault(require("./overview.js"));
+var _insight = _interopRequireDefault(require("./insight.js"));
+var _grid = _interopRequireDefault(require("./grid.js"));
+var _data = _interopRequireDefault(require("./data.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = metaData => `
+  ${(0, _data.default)(metaData.locales, metaData.stats, metaData.statsByLocale, metaData.stringData)}
+  ${(0, _menuBar.default)()}
+  ${(0, _overview.default)()}
+  ${(0, _insight.default)()}
+  ${(0, _grid.default)()}
+  `;
+exports.default = _default;

package/dist/utils/reportFactory/html/template/javascript/insight.js

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => `
+//Cards of locales
+ (() => {
+        document.addEventListener("DOMContentLoaded", function () {
+          renderCards();
+
+          // helper methods to generate cards and its sections
+          function createStatSection(data) {
+            const isDefaultLocale = false; // dynamically pass
+            const holder = document.createElement("div");
+            const table = document.createElement("table");
+            const tbody = document.createElement("tbody");
+            const name = document.createElement("div");
+            const tableData = {
+              Reviewed: 1000,
+              "Internationlized Strings": 600,
+              "Not Internationlized Strings": 100,
+              "Untranslated Strings": 50,
+              "Encoding Issue Strings": 15,
+              "DNT Strings": 15,
+              "Auto Ignored Strings": 20,
+              "Internationlized Numbers": 20,
+              "Not Internationlized Numbers": 20,
+              "Internationlized Currency": 20,
+              "Not Internationlized Currency": 20,
+              "Internationlized Date": 20,
+              "Not Internationlized Date": 20,
+              "Internationlized Time": 20,
+              "Not Internationlized Time": 20,
+              "Internationlized DateTime": 20,
+              "Not Internationlized DateTime": 20,
+            };
+            const addRow = (name, value) => {
+              const row = document.createElement("tr");
+
+              const col1 = document.createElement("td");
+              col1.classList.add("name");
+              col1.textContent = name;
+
+              const col2 = document.createElement("td");
+              col2.classList.add("value");
+              col2.textContent = value;
+
+              row.appendChild(col1);
+              row.appendChild(col2);
+              return row;
+            };
+
+            for (const rowData of Object.entries(tableData)) {
+              if (!isDefaultLocale || rowData[0] !== "Untranslated Strings") {
+                tbody.appendChild(addRow(rowData[0], rowData[1]));
+              }
+            }
+
+            holder.classList.add("stat");
+            name.classList.add("name");
+            name.textContent = "Summary";
+            holder.append(name);
+
+            table.appendChild(tbody);
+            holder.appendChild(table);
+            return holder;
+          }
+
+          function createStatusBarSection(data) {
+            const holder = document.createElement("div");
+            holder.classList.add("status-bar");
+
+            const generateBarEl = (name, total, current) => {
+              current = (current / total) * 100;
+              const holder = document.createElement("div");
+              holder.classList.add("bar-container");
+
+              const nameHolder = document.createElement("div");
+              nameHolder.classList.add("name");
+              nameHolder.textContent = name;
+
+              const barHolder = document.createElement("div");
+              barHolder.classList.add("bar-holder");
+
+              const bar = document.createElement("div");
+              bar.classList.add("bar");
+              bar.style.width = \`\${current}%\`;
+              bar.textContent = \`\${current}%\`;
+
+              barHolder.appendChild(bar);
+              holder.appendChild(nameHolder);
+              holder.appendChild(barHolder);
+
+              return holder;
+            };
+
+            const isDefaultLocale = false; // should be dynamically passed
+            const totalStrings = isDefaultLocale ? 100 : 100; // reviewed - ignore - dnt - autoignore - encoding
+            const totalI18nedStr = isDefaultLocale ? 100 : 70;
+            const totalLocStr = isDefaultLocale ? 100 : 90;
+            const totalI18nedNum = isDefaultLocale ? 100 : 50;
+            const totalI18nedDateTime = isDefaultLocale ? 100 : 80;
+
+            holder.appendChild(
+              generateBarEl("String I18n level", totalStrings, totalI18nedStr)
+            );
+            holder.appendChild(
+              generateBarEl("String L10n level", totalStrings, totalLocStr)
+            );
+            holder.appendChild(
+              generateBarEl("Number I18n level", totalStrings, totalI18nedNum)
+            );
+            holder.appendChild(
+              generateBarEl(
+                "DateTime I18n level",
+                totalStrings,
+                totalI18nedDateTime
+              )
+            );
+            return holder;
+          }
+
+          function generateCardContents(data) {
+            const cardContent = document.createElement("div");
+            cardContent.classList.add("card-content");
+
+            cardContent.appendChild(createStatusBarSection(data));
+            cardContent.appendChild(createStatSection(data));
+            return cardContent;
+          }
+
+          function createCardEl(locale, data) {
+            const card = document.createElement("div");
+            const title = document.createElement("div");
+            card.classList.add("card");
+            card.dataset.locale = locale;
+            title.classList.add("title");
+            title.textContent = \`\${locale} details\`;
+
+            // fire menu selection event on clicking the card
+            card.addEventListener("click", () => {
+              const previousSelectedSubMenu = document.querySelector(
+                '.sub-menu-item.selected'
+              );
+              if (previousSelectedSubMenu) {
+                window.previousSelectedLocale =
+                  previousSelectedSubMenu.dataset.locale;
+              }
+
+              document
+                .querySelector(\`.sub-menu-item[data-locale="\${locale}"]\`)
+                .click();
+            });
+
+            card.appendChild(title);
+            card.appendChild(generateCardContents(data));
+            return card;
+          }
+
+          function renderCards() {
+            // read from global variable appData;
+            const localeInfo = {
+              en_US: {
+                total: 1000,
+                localized: 700,
+                notLocalized: 100,
+                untranslated: 50,
+                encodingIssue: 20,
+                dnt: 15,
+                ignored: 10,
+                autoIgnored: 5,
+                currency: 20,
+                number: 20,
+                percentage: 15,
+                dateTime: 15,
+                date: 15,
+                time: 15,
+                notLocalizedcurrency: 20,
+                notLocalizednumber: 20,
+                notLocalizedpercentage: 15,
+                notLocalizeddateTime: 15,
+                notLocalizeddate: 15,
+                notLocalizedtime: 15,
+              },
+              fr_FR: {
+                total: 1000,
+                localized: 700,
+                notLocalized: 100,
+                untranslated: 50,
+                encodingIssue: 20,
+                dnt: 15,
+                ignored: 10,
+                autoIgnored: 5,
+                currency: 20,
+                number: 20,
+                percentage: 15,
+                dateTime: 15,
+                date: 15,
+                time: 15,
+                notLocalizedCurrency: 20,
+                notLocalizedNumber: 20,
+                notLocalizedPercentage: 15,
+                notLocalizedDateTime: 15,
+                notLocalizedDate: 15,
+                notLocalizedTime: 15,
+              },
+            };
+
+            if (Object.keys(localeInfo).length) {
+              const cardHolder = document.querySelector(
+                "#insights .cards .holder"
+              );
+              for (const locale in localeInfo) {
+                const cardEl = createCardEl(locale, localeInfo[locale]);
+                cardHolder.appendChild(cardEl);
+              }
+            }
+          }
+        });
+      })();
+`;
+exports.default = _default;

package/dist/utils/reportFactory/html/template/javascript/menuBar.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => `(() => {
+        // for sidebar menu
+        const loadContent = (section, highlightMenu = false) => {
+          if (highlightMenu) {
+            document
+              .querySelector('li[data-page="overview"]')
+              ?.classList.add("selected");
+          }
+
+          const contents = document.querySelectorAll(".content");
+          contents.forEach((content) => {
+            content.id !== section
+              ? content.classList.remove("active")
+              : content.classList.add("active");
+
+            section === "overview" &&
+              window.persistOverviewCharts &&
+              window.persistOverviewCharts();
+
+            window.currentPage = section;
+          });
+        };
+
+        document.addEventListener("DOMContentLoaded", function () {
+          const createMenuItems = (() => {
+            const ul = document.querySelector(".sidebar .submenu");
+            const createListItems = (locale) => {
+              const li = document.createElement("li");
+              li.classList.add("sub-menu-item");
+              li.dataset.locale = locale;
+
+              const a = document.createElement("a");
+              a.href = "#";
+              a.textContent = locale;
+
+              li.appendChild(a);
+              return li;
+            };
+
+            for (const locale of Object.keys(DataStore.getLocalesData())) {
+              ul.appendChild(createListItems(locale));
+            }
+          })();
+
+          const menuItems = document.querySelectorAll(".menu-item"),
+            submenuItems = document.querySelectorAll(".sub-menu-item");
+
+          menuItems.forEach((item) => {
+            item.addEventListener("click", function (event) {
+              const selectedMenuItem = document.querySelector(
+                  ".menu-item.selected"
+                ),
+                selectedSubmenu = document.querySelector(".submenu.active"),
+                page = item.dataset.page;
+
+              if (selectedMenuItem) {
+                selectedMenuItem.classList.remove("selected");
+              }
+
+              if (selectedSubmenu) {
+                selectedSubmenu.classList.remove("active");
+              }
+
+              if (item.classList.contains("has-submenu")) {
+                event.preventDefault();
+                item.classList.add("selected");
+                const submenu = item.querySelector(".submenu");
+                submenu.classList.add("active");
+              } else {
+                item.classList.add("selected");
+              }
+
+              if (selectedSubmenu) {
+                selectedSubmenu
+                  .querySelectorAll(".sub-menu-item")
+                  .forEach((submenuItem) => {
+                    submenuItem.textContent !== item.textContent &&
+                      submenuItem.classList.remove("selected");
+                  });
+              }
+
+              loadContent(page);
+            });
+
+            loadContent("overview", true);
+          });
+
+          submenuItems.forEach((sItem) => {
+            sItem.addEventListener("click", function (event) {
+              const selectedSubMenuItem = document.querySelector(
+                ".sub-menu-item.selected"
+              );
+              event.preventDefault();
+              event.stopPropagation();
+
+              if (selectedSubMenuItem) {
+                selectedSubMenuItem.classList.remove("selected");
+                window.previousSelectedLocale =
+                  selectedSubMenuItem.dataset.locale;
+              }
+
+              sItem.classList.add("selected");
+              loadContent("locale");
+            });
+          });
+
+          // update footer info
+          const footer = document.querySelector(".sidebar .footer");
+          footer.textContent = \`${new Date().getFullYear()} @ Zeesoft. All rights reserved.\`;
+        });
+      })();`;
+exports.default = _default;