@zeesoft/i18n-verify 1.0.0 → 2.0.1

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

@@ -0,0 +1,626 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => `
+  //Overview
+  (() => {
+        document.addEventListener("DOMContentLoaded", function () {
+          let overviewChart,
+            stringChart,
+            dateTimeChart,
+            numberChart,
+            ignoredChart;
+
+          window.persistOverviewCharts = () => {
+            const reset = (chart) => {
+              chart.resetSeries(true, true);
+            };
+
+            reset(overviewChart);
+            reset(stringChart);
+            reset(dateTimeChart);
+            reset(numberChart);
+            reset(ignoredChart);
+          };
+
+          renderOverallChart();
+          renderStringChart();
+          renderIgnoredChart();
+          renderNumberChart();
+          renderDatetimeChart();
+
+          function renderOverallChart() {
+            const reviewed = 2000;
+            const locales = 2;
+            const type = {
+                I18NED: "Internationalized",
+                NOT_I18NED: "Not Internationalized",
+                SKIPPED: "Skipped",
+              },
+              valueMap = {
+                [type.I18NED]: 1500,
+                [type.NOT_I18NED]: 400,
+                [type.SKIPPED]: 100,
+              },
+              percentageCalc = (value) => ((value / reviewed) * 100).toFixed(0);
+
+            var options = {
+              series: [
+                {
+                  name: "",
+                  data: [
+                    percentageCalc(valueMap[type.I18NED]),
+                    percentageCalc(valueMap[type.NOT_I18NED]),
+                    percentageCalc(valueMap[type.SKIPPED]),
+                  ],
+                },
+              ],
+              chart: {
+                type: "bar",
+                height: 200,
+                toolbar: {
+                  show: false,
+                },
+                animations: {
+                  enabled: true,
+                  easing: "easeinout",
+                  speed: 800,
+                  animateGradually: {
+                    enabled: true,
+                    delay: 150,
+                  },
+                  dynamicAnimation: {
+                    enabled: true,
+                    speed: 350,
+                  },
+                },
+              },
+              plotOptions: {
+                bar: {
+                  horizontal: true,
+                  borderRadius: 3,
+                  dataLabels: {
+                    position: "right",
+                  },
+                },
+              },
+              title: {
+                text: \`Total Reviewed strings in \${locales} locales: \${reviewed}\`,
+                align: "center",
+                floating: true,
+                style: {
+                  fontSize: "14px",
+                  fontWeight: "bold",
+                },
+              },
+              dataLabels: {
+                enabled: true,
+                style: {
+                  colors: ["#080404b0"],
+                },
+                formatter: (val) => {
+                  return \`\${val}%\`;
+                },
+              },
+              xaxis: {
+                categories: [type.I18NED, type.NOT_I18NED, type.SKIPPED],
+                min: 0,
+                max: 100,
+                labels: {
+                  formatter: (v) => \`\${v}%\`,
+                },
+              },
+              yaxis: {
+                labels: {
+                  style: {
+                    fontSize: "13px",
+                  },
+                },
+              },
+              colors: [
+                (v) => {
+                  switch (v.dataPointIndex) {
+                    case 0:
+                      return "#31E994"; //green
+                    case 1:
+                      return "#ff8173"; //red
+                    case 2:
+                      return "#f5eb5f"; //yellow
+                  }
+                },
+              ],
+              tooltip: {
+                theme: "dark",
+                x: {
+                  formatter: function (v) {
+                    switch (v) {
+                      case type.NOT_I18NED:
+                        return \`Total Number of \${v}, Partially Localized and Encoding issue instances\`;
+
+                      default:
+                        return \`Total Number of \${v} instances\`;
+                    }
+                  },
+                },
+                y: {
+                  formatter: function (v) {
+                    return \`\${v}%\`;
+                  },
+                },
+              },
+            };
+
+            (overviewChart = new ApexCharts(
+              document.querySelector(".overall-quality .graph"),
+              options
+            )).render();
+          }
+
+          function renderStringChart() {
+            const type = {
+                LOCALIZED: "Localized",
+                PARTIAL: "Partially Localized",
+                NOT_LOCALIZED: "Not Localized",
+                UNTRANSLATED: "Untranslated",
+                ENCODING: "Encoding Issue",
+                IGNORED: "Ignored",
+              },
+              valueMap = {
+                [type.LOCALIZED]: 8000,
+                [type.PARTIAL]: 1200,
+                [type.NOT_LOCALIZED]: 300,
+                [type.UNTRANSLATED]: 500,
+                [type.ENCODING]: 250,
+                [type.IGNORED]: 250,
+              },
+              total = Object.values(valueMap).reduce(
+                (acc, curr) => acc + curr,
+                0
+              ),
+              options = {
+                series: [
+                  valueMap[type.LOCALIZED],
+                  valueMap[type.PARTIAL],
+                  valueMap[type.NOT_LOCALIZED],
+                  valueMap[type.IGNORED],
+                  valueMap[type.ENCODING],
+                  valueMap[type.UNTRANSLATED],
+                ],
+                chart: {
+                  width: 430,
+                  type: "pie",
+                  animations: {
+                    enabled: true,
+                    easing: "easeinout",
+                    speed: 800,
+                    animateGradually: {
+                      enabled: true,
+                      delay: 150,
+                    },
+                    dynamicAnimation: {
+                      enabled: true,
+                      speed: 350,
+                    },
+                  },
+                },
+                labels: [
+                  type.LOCALIZED,
+                  type.PARTIAL,
+                  type.NOT_LOCALIZED,
+                  type.IGNORED,
+                  type.ENCODING,
+                  type.UNTRANSLATED,
+                ],
+                tooltip: {
+                  theme: "dark",
+                  y: {
+                    formatter: function (v, { config }) {
+                      return \`\${Number(
+                        (v /
+                          config.series.reduce((acc, curr) => acc + curr, 0)) *
+                          100
+                      ).toFixed(0)}%\`;
+                    },
+                    title: {
+                      formatter: function (a) {
+                        return \`Total Number of \${a} strings including all locales\`;
+                      },
+                    },
+                  },
+                },
+                colors: [
+                  ({ seriesIndex, w }) => {
+                    const currType = w.config.labels[seriesIndex];
+
+                    switch (currType) {
+                      case type.LOCALIZED:
+                        return "#31E994";
+                      case type.NOT_LOCALIZED:
+                        return "#E44242";
+                      case type.PARTIAL:
+                        return "#DADF40";
+                      case type.UNTRANSLATED:
+                        return "#4C57EC";
+                      case type.IGNORED:
+                        return "#AFA6AB";
+                      case type.ENCODING:
+                        return "#F44E9E";
+
+                      default:
+                        return "";
+                    }
+                  },
+                ],
+                legend: {
+                  offsetX: -50,
+                  width: 170,
+                  formatter: (seriesName, a, b, c) =>
+                    \`\${seriesName} (\${(
+                      (valueMap[seriesName] / total) *
+                      100
+                    ).toFixed(0)}%)\`,
+                },
+                dataLabels: {
+                  formatter: (v) => \`\${Number(v).toFixed(0)}%\`,
+                  dropShadow: { enabled: false },
+                  style: {
+                    colors: ["#080404b0"],
+                  },
+                },
+              };
+
+            (stringChart = new ApexCharts(
+              document.querySelector(".string-quality .graph"),
+              options
+            )).render();
+          }
+
+          function renderIgnoredChart() {
+            const type = {
+                DNT: "DNT",
+                IGNORED: "Ignored",
+                AUTO_IGNORED: "User Inputs",
+              },
+              valueMap = {
+                [type.DNT]: 50,
+                [type.IGNORED]: 10,
+                [type.AUTO_IGNORED]: 137,
+              },
+              total = Object.values(valueMap).reduce(
+                (acc, curr) => acc + curr,
+                0
+              );
+            options = {
+              series: [
+                valueMap[type.DNT],
+                valueMap[type.IGNORED],
+                valueMap[type.AUTO_IGNORED],
+              ],
+              chart: {
+                width: 385,
+                type: "pie",
+                animations: {
+                  enabled: true,
+                  easing: "easeinout",
+                  speed: 800,
+                  animateGradually: {
+                    enabled: true,
+                    delay: 150,
+                  },
+                  dynamicAnimation: {
+                    enabled: true,
+                    speed: 350,
+                  },
+                },
+              },
+              labels: [type.DNT, type.IGNORED, type.AUTO_IGNORED],
+              tooltip: {
+                theme: "dark",
+                y: {
+                  formatter: function (v, { config }) {
+                    return \`\${Number(
+                      (v / config.series.reduce((acc, curr) => acc + curr, 0)) *
+                        100
+                    ).toFixed(0)}%\`;
+                  },
+                  title: {
+                    formatter: function (a) {
+                      return \`Total Number of localized \${a} instances including all locales\`;
+                    },
+                  },
+                },
+              },
+              colors: [
+                ({ seriesIndex, w }) => {
+                  const currType = w.config.labels[seriesIndex];
+
+                  switch (currType) {
+                    case type.DNT:
+                      return "#31E994";
+                    case type.IGNORED:
+                      return "#3AD1F3";
+                    case type.AUTO_IGNORED:
+                      return "#DADF40";
+
+                    default:
+                      return "";
+                  }
+                },
+              ],
+              legend: {
+                offsetX: -40,
+                formatter: (seriesName) =>
+                  \`\${seriesName} (\${(
+  (valueMap[seriesName] / total) *
+  100
+).toFixed(0)}%)\`,
+              },
+              dataLabels: {
+                formatter: (v) => \`\${Number(v).toFixed(0)}%\`,
+                style: {
+                  colors: ["#080404b0"],
+                },
+                dropShadow: { enabled: false },
+              },
+            };
+
+            (ignoredChart = new ApexCharts(
+              document.querySelector(".skipped-items .graph"),
+              options
+            )).render();
+          }
+
+          function renderNumberChart() {
+            const types = ["Number", "Currency", "Percentage"],
+              data = {
+                number_i18n: 25,
+                currency_i18n: 10,
+                percentage_i18n: 4,
+                number_not_i18n: 10,
+                currency_not_i18n: 3,
+                percentage_not_i18n: 7,
+              },
+              total = Object.values(data).reduce((acc, curr) => acc + curr, 0),
+              percentageCalc = (v, t) => ((v / t) * 100).toFixed(0),
+              i18nPercentage = percentageCalc(
+                data.number_i18n + data.percentage_i18n + data.currency_i18n,
+                total
+              ),
+              nonI18nPercentage = percentageCalc(
+                data.number_not_i18n +
+                  data.percentage_not_i18n +
+                  data.currency_not_i18n,
+                total
+              ),
+              numberTotal = data.number_i18n + data.number_not_i18n,
+              currencyTotal = data.currency_i18n + data.currency_not_i18n,
+              percentageTotal = data.percentage_i18n + data.percentage_not_i18n,
+              numberI18n = percentageCalc(data.number_i18n, numberTotal),
+              currencyI18n = percentageCalc(data.currency_i18n, currencyTotal),
+              percentageI18n = percentageCalc(
+                data.percentage_i18n,
+                currencyTotal
+              ),
+              numberNotI18n = percentageCalc(data.number_not_i18n, numberTotal),
+              currencyNotI18n = percentageCalc(
+                data.currency_not_i18n,
+                currencyTotal
+              ),
+              percentageNotI18n = percentageCalc(
+                data.percentage_not_i18n,
+                currencyTotal
+              ),
+              options = {
+                series: [
+                  {
+                    name: "Internationalized",
+                    data: [numberI18n, currencyI18n, percentageI18n],
+                  },
+                  {
+                    name: "Not Internationalized",
+                    data: [numberNotI18n, currencyNotI18n, percentageNotI18n],
+                  },
+                ],
+                chart: {
+                  type: "bar",
+                  height: 220,
+                  width: 500,
+                  toolbar: {
+                    show: false,
+                  },
+                  animations: {
+                    enabled: true,
+                    easing: "easeinout",
+                    speed: 800,
+                    animateGradually: {
+                      enabled: true,
+                      delay: 150,
+                    },
+                    dynamicAnimation: {
+                      enabled: true,
+                      speed: 350,
+                    },
+                  },
+                },
+                dataLabels: {
+                  enabled: true,
+                  dropShadow: { enabled: false },
+                  style: {
+                    colors: ["#080404b0"],
+                  },
+                  formatter: (val) => {
+                    return \`\${val}%\`;
+                  },
+                },
+                stroke: {
+                  show: true,
+                  width: 1,
+                  colors: ["#fff"],
+                },
+                tooltip: {
+                  theme: "dark",
+                  shared: true,
+                  intersect: false,
+                },
+                xaxis: {
+                  categories: types,
+                },
+                yaxis: {
+                  min: 0,
+                  max: 100,
+                  labels: {
+                    formatter: (v) => \`\${v}%\`,
+                  },
+                },
+                colors: ["#31E994", "#ff8173"],
+                legend: {
+                  offsetX: -13,
+                  position: "right",
+                  formatter: (seriesName) => {
+                    if (seriesName === "Internationalized") {
+                      return \`\${seriesName} (\${i18nPercentage}%)\`;
+                    }
+                    return \`\${seriesName} (\${nonI18nPercentage}%)\`;
+                  },
+                },
+                plotOptions: {
+                  bar: {
+                    borderRadius: 3,
+                    columnWidth: "85%",
+                  },
+                },
+              };
+
+            (numberChart = new ApexCharts(
+              document.querySelector(".number-quality .graph"),
+              options
+            )).render();
+          }
+
+          function renderDatetimeChart() {
+            const types = ["Date", "Time", "DateTime"],
+              data = {
+                date_i18n: 10,
+                time_i18n: 35,
+                date_time_i18n: 17,
+                date_not_i18n: 28,
+                time_not_i18n: 12,
+                date_time_not_i18n: 5,
+              },
+              total = Object.values(data).reduce((acc, curr) => acc + curr, 0),
+              percentageCalc = (v, t) => ((v / t) * 100).toFixed(0),
+              i18nPercentage = percentageCalc(
+                data.date_i18n + data.time_i18n + data.date_time_i18n,
+                total
+              ),
+              nonI18nPercentage = percentageCalc(
+                data.date_not_i18n +
+                  data.time_not_i18n +
+                  data.date_time_not_i18n,
+                total
+              ),
+              dateTotal = data.date_i18n + data.date_not_i18n,
+              timeTotal = data.time_i18n + data.time_not_i18n,
+              dateTimeTotal = data.date_time_i18n + data.date_time_not_i18n,
+              dateI18n = percentageCalc(data.date_i18n, dateTotal),
+              timeI18n = percentageCalc(data.time_i18n, timeTotal),
+              dateTimeI18n = percentageCalc(data.date_time_i18n, dateTimeTotal),
+              dateNotI18n = percentageCalc(data.date_not_i18n, dateTotal),
+              timeNotI18n = percentageCalc(data.time_not_i18n, timeTotal),
+              dateTimeNotI18n = percentageCalc(
+                data.date_time_not_i18n,
+                dateTimeTotal
+              ),
+              options = {
+                series: [
+                  {
+                    name: "Internationalized",
+                    data: [dateI18n, timeI18n, dateTimeI18n],
+                  },
+                  {
+                    name: "Not Internationalized",
+                    data: [dateNotI18n, timeNotI18n, dateTimeNotI18n],
+                  },
+                ],
+                chart: {
+                  type: "bar",
+                  height: 220,
+                  width: 500,
+                  toolbar: {
+                    show: false,
+                  },
+                  animations: {
+                    enabled: true,
+                    easing: "easeinout",
+                    speed: 800,
+                    animateGradually: {
+                      enabled: true,
+                      delay: 150,
+                    },
+                    dynamicAnimation: {
+                      enabled: true,
+                      speed: 350,
+                    },
+                  },
+                },
+                dataLabels: {
+                  enabled: true,
+                  dropShadow: { enabled: false },
+                  style: {
+                    colors: ["#080404b0"],
+                  },
+                  formatter: (val) => {
+                    return \`\${val}%\`;
+                  },
+                },
+                stroke: {
+                  show: true,
+                  width: 1,
+                  colors: ["#fff"],
+                },
+                tooltip: {
+                  theme: "dark",
+                  shared: true,
+                  intersect: false,
+                },
+                xaxis: {
+                  categories: types,
+                },
+                yaxis: {
+                  min: 0,
+                  max: 100,
+                  labels: {
+                    formatter: (v) => \`\${v}%\`,
+                  },
+                },
+                colors: ["#31E994", "#ff8173"],
+                legend: {
+                  offsetX: 4,
+                  position: "right",
+                  formatter: (seriesName) => {
+                    if (seriesName === "Internationalized") {
+                      return \`\${seriesName} (\${i18nPercentage}%)\`;
+                    }
+                    return \`\${seriesName} (\${nonI18nPercentage}%)\`;
+                  },
+                },
+                plotOptions: {
+                  bar: {
+                    borderRadius: 3,
+                    columnWidth: "85%",
+                  },
+                },
+              };
+
+            (dateTimeChart = new ApexCharts(
+              document.querySelector(".datetime-quality .graph"),
+              options
+            )).render();
+          }
+        });
+      })();
+`;
+exports.default = _default;

package/dist/utils/reports.js

@@ -13,7 +13,7 @@ class Reports {
   static #baseReportPath;
   static setup() {
     const rootFolder = _path.default.resolve();
-    Reports.#baseReportPath = (0, _file.joinPaths)(rootFolder, 'l10nReports', Reports.#dateTime());
+    Reports.#baseReportPath = (0, _file.joinPaths)(rootFolder, _config.default.getL10nReportsPath(), Reports.#dateTime());
   }
   static reviewedReports(str = null, imgName = null) {
     return Reports.#generateFullReportPath('reviewed', str, imgName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeesoft/i18n-verify",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "Library to perform I18n verification over Nightwatch or WebdriverIO frameworks",
   "main": "dist/index.js",
   "exports": {