@zeesoft/i18n-verify 2.0.1 → 2.1.0

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

@@ -4,334 +4,429 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = () => `
-  //Overview
-  (() => {
-        document.addEventListener("DOMContentLoaded", function () {
-          let overviewChart,
-            stringChart,
-            dateTimeChart,
-            numberChart,
-            ignoredChart;
+var _default = () => `//overview content
+    (() => {
+      if (!DataStore.ranSuccessfully()) {
+        document.getElementById('overview').innerHtml =
+          'Unable to prepare zQA automation report for the project.';
+        return;
+      }
 
-          window.persistOverviewCharts = () => {
-            const reset = (chart) => {
-              chart.resetSeries(true, true);
-            };
+      document.addEventListener('DOMContentLoaded', function () {
+        let overviewChart,
+          stringChart,
+          dateTimeChart,
+          numberChart,
+          ignoredChart;
 
-            reset(overviewChart);
-            reset(stringChart);
-            reset(dateTimeChart);
-            reset(numberChart);
-            reset(ignoredChart);
+        window.persistOverviewCharts = () => {
+          const reset = (chart) => {
+            chart.resetSeries(true, true);
           };
 
-          renderOverallChart();
-          renderStringChart();
-          renderIgnoredChart();
-          renderNumberChart();
-          renderDatetimeChart();
+          reset(overviewChart);
+          reset(stringChart);
+          reset(dateTimeChart);
+          reset(numberChart);
+          reset(ignoredChart);
+        };
+
+        renderOverallChart();
+        renderStringChart();
+        renderIgnoredChart();
+        renderNumberChart();
+        renderDatetimeChart();
+
+        function renderOverallChart() {
+          const overallStats = DataStore.getOverallStats();
+          const reviewed = overallStats.reviewed;
+          const locales = DataStore.getLocales().length;
+          const type = {
+              I18NED: 'Internationalized',
+              NOT_I18NED: 'Not Internationalized',
+              SKIPPED: 'Skipped'
+            },
+            valueMap = {
+              [type.I18NED]:
+                overallStats.localizedStrings +
+                overallStats.partialStrings + // TODO: need to confirm
+                overallStats.untranslatedStrings +
+                overallStats.localizedDateTime +
+                overallStats.localizedDate +
+                overallStats.localizedTime +
+                overallStats.localizedNumber +
+                overallStats.localizedCurrency +
+                overallStats.localizedPercentage,
+              [type.NOT_I18NED]:
+                overallStats.notLocalizedStrings +
+                overallStats.notLocalizedDateTime +
+                overallStats.notLocalizedDate +
+                overallStats.notLocalizedTime +
+                overallStats.notLocalizedNumber +
+                overallStats.notLocalizedCurrency +
+                overallStats.notLocalizedPercentage,
+              [type.SKIPPED]:
+                overallStats.dnt +
+                overallStats.ignored +
+                overallStats.autoIgnored +
+                overallStats.userInput
+            },
+            percentageCalc = (value) => {
+              const val = ((value / reviewed) * 100).toFixed(0);
+              return isNaN(val) || !isFinite(val) ? 0 : val;
+            };
 
-          function renderOverallChart() {
-            const reviewed = 2000;
-            const locales = 2;
-            const type = {
-                I18NED: "Internationalized",
-                NOT_I18NED: "Not Internationalized",
-                SKIPPED: "Skipped",
+          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']
               },
-              valueMap = {
-                [type.I18NED]: 1500,
-                [type.NOT_I18NED]: 400,
-                [type.SKIPPED]: 100,
+              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: (v) => \`Total Number of \${v} instances:\`
               },
-              percentageCalc = (value) => ((value / reviewed) * 100).toFixed(0);
+              y: {
+                formatter: function (v, { dataPointIndex }) {
+                  let count = 0;
+                  switch (dataPointIndex) {
+                    case 0:
+                      count = valueMap[type.I18NED];
+                      break;
+                    case 1:
+                      count = valueMap[type.NOT_I18NED];
+                      break;
+                    case 2:
+                      count = valueMap[type.SKIPPED];
+                      break;
+                  }
+                  return \`\${v}% (\${count} strings)\`;
+                }
+              }
+            }
+          };
 
-            var options = {
-              series: [
-                {
-                  name: "",
-                  data: [
-                    percentageCalc(valueMap[type.I18NED]),
-                    percentageCalc(valueMap[type.NOT_I18NED]),
-                    percentageCalc(valueMap[type.SKIPPED]),
-                  ],
-                },
-              ],
+          (overviewChart = new ApexCharts(
+            document.querySelector('.overall-quality .graph'),
+            options
+          )).render();
+        }
+
+        function renderStringChart() {
+          const overallStats = DataStore.getOverallStats();
+          const type = {
+              LOCALIZED: 'Localized',
+              PARTIAL: 'Partially Localized',
+              NOT_LOCALIZED: 'Not Localized',
+              UNTRANSLATED: 'Untranslated',
+              ENCODING: 'Encoding Issue',
+              IGNORED: 'Ignored'
+            },
+            valueMap = {
+              [type.LOCALIZED]: overallStats.localizedStrings,
+              [type.PARTIAL]: overallStats.partialStrings,
+              [type.NOT_LOCALIZED]: overallStats.notLocalizedStrings,
+              [type.UNTRANSLATED]: overallStats.untranslatedStrings,
+              [type.ENCODING]: overallStats.encoding,
+              [type.IGNORED]:
+                overallStats.dnt +
+                overallStats.ignored +
+                overallStats.autoIgnored +
+                overallStats.userInput
+            },
+            total = Object.values(valueMap).reduce(
+              (acc, curr) => acc + curr,
+              0
+            ),
+            data = [
+              valueMap[type.LOCALIZED],
+              valueMap[type.PARTIAL],
+              valueMap[type.NOT_LOCALIZED],
+              valueMap[type.IGNORED],
+              valueMap[type.ENCODING],
+              valueMap[type.UNTRANSLATED]
+            ],
+            options = {
+              series:
+                data.reduce((acc, curr) => acc + curr, 0) === 0 ? [] : data,
               chart: {
-                type: "bar",
-                height: 200,
-                toolbar: {
-                  show: false,
-                },
+                width: 415,
+                type: 'pie',
                 animations: {
                   enabled: true,
-                  easing: "easeinout",
+                  easing: 'easeinout',
                   speed: 800,
                   animateGradually: {
                     enabled: true,
-                    delay: 150,
+                    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",
-                },
+                    speed: 350
+                  }
+                }
               },
-              dataLabels: {
-                enabled: true,
+              noData: {
+                text: 'No metrics available',
+                align: 'left',
+                verticalAlign: 'middle',
+                offsetX: 0,
+                offsetY: -50,
                 style: {
-                  colors: ["#080404b0"],
-                },
-                formatter: (val) => {
-                  return \`\${val}%\`;
-                },
-              },
-              xaxis: {
-                categories: [type.I18NED, type.NOT_I18NED, type.SKIPPED],
-                min: 0,
-                max: 100,
-                labels: {
-                  formatter: (v) => \`\${v}%\`,
-                },
+                  fontSize: '14px'
+                }
               },
-              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
-                  }
-                },
+              labels: [
+                type.LOCALIZED,
+                type.PARTIAL,
+                type.NOT_LOCALIZED,
+                type.IGNORED,
+                type.ENCODING,
+                type.UNTRANSLATED
               ],
               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\`;
-                    }
-                  },
-                },
+                theme: 'dark',
                 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(
+                  formatter: function (v, { config, dataPointIndex }) {
+                    let count = 0,
+                      value = 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";
+                      ).toFixed(0);
+                    value = isNaN(value) || !isFinite(value) ? 0 : value;
 
-                      default:
-                        return "";
+                    switch (dataPointIndex) {
+                      case 0:
+                        count = valueMap[type.LOCALIZED];
+                        break;
+                      case 1:
+                        count = valueMap[type.PARTIAL];
+                        break;
+                      case 2:
+                        count = valueMap[type.NOT_LOCALIZED];
+                        break;
+                      case 3:
+                        count = valueMap[type.IGNORED];
+                        break;
+                      case 4:
+                        count = valueMap[type.ENCODING];
+                        break;
+                      case 5:
+                        count = valueMap[type.UNTRANSLATED];
+                        break;
                     }
+
+                    return \`\${value}% (\${count} strings)\`;
                   },
-                ],
-                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"],
-                  },
-                },
-              };
+                  title: {
+                    formatter: function (a) {
+                      return \`Total Number of \${a} strings:\`;
+                    }
+                  }
+                }
+              },
+              colors: [
+                ({ seriesIndex, w }) => {
+                  const currType = w.config.labels[seriesIndex];
 
-            (stringChart = new ApexCharts(
-              document.querySelector(".string-quality .graph"),
-              options
-            )).render();
-          }
+                  switch (currType) {
+                    case type.LOCALIZED:
+                      return '#31E994';
+                    case type.NOT_LOCALIZED:
+                      return '#E44242';
+                    case type.PARTIAL:
+                      return '#DADF40';
+                    case type.UNTRANSLATED:
+                      return '#F44E9E';
+                    case type.IGNORED:
+                      return '#AFA6AB';
+                    case type.ENCODING:
+                      return '#3AD1F3';
 
-          function renderIgnoredChart() {
-            const type = {
-                DNT: "DNT",
-                IGNORED: "Ignored",
-                AUTO_IGNORED: "User Inputs",
-              },
-              valueMap = {
-                [type.DNT]: 50,
-                [type.IGNORED]: 10,
-                [type.AUTO_IGNORED]: 137,
+                    default:
+                      return '';
+                  }
+                }
+              ],
+              legend: {
+                offsetX: -50,
+                width: 170,
+                formatter: (seriesName, a, b, c) => {
+                  let value = ((valueMap[seriesName] / total) * 100).toFixed(0);
+                  value = isNaN(value) || !isFinite(value) ? 0 : value;
+                  return \`\${seriesName} (\${value}%)\`;
+                }
               },
-              total = Object.values(valueMap).reduce(
-                (acc, curr) => acc + curr,
-                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 overallStats = DataStore.getOverallStats();
+          const type = {
+              DNT: 'DNT',
+              IGNORED: 'Ignored',
+              USER_INPUTS: 'User Inputs'
+            },
+            valueMap = {
+              [type.DNT]: overallStats.dnt,
+              [type.IGNORED]: overallStats.ignored + overallStats.autoIgnored,
+              [type.USER_INPUTS]: overallStats.userInput
+            },
+            total = Object.values(valueMap).reduce(
+              (acc, curr) => acc + curr,
+              0
+            ),
+            data = [
+              valueMap[type.DNT],
+              valueMap[type.IGNORED],
+              valueMap[type.USER_INPUTS]
+            ],
             options = {
-              series: [
-                valueMap[type.DNT],
-                valueMap[type.IGNORED],
-                valueMap[type.AUTO_IGNORED],
-              ],
+              series:
+                data.reduce((acc, curr) => acc + curr, 0) === 0 ? [] : data,
               chart: {
-                width: 385,
-                type: "pie",
+                width: 360,
+                type: 'pie',
                 animations: {
                   enabled: true,
-                  easing: "easeinout",
+                  easing: 'easeinout',
                   speed: 800,
                   animateGradually: {
                     enabled: true,
-                    delay: 150,
+                    delay: 150
                   },
                   dynamicAnimation: {
                     enabled: true,
-                    speed: 350,
-                  },
-                },
+                    speed: 350
+                  }
+                }
               },
-              labels: [type.DNT, type.IGNORED, type.AUTO_IGNORED],
+              labels: [type.DNT, type.IGNORED, type.USER_INPUTS],
               tooltip: {
-                theme: "dark",
+                theme: 'dark',
                 y: {
-                  formatter: function (v, { config }) {
-                    return \`\${Number(
-                      (v / config.series.reduce((acc, curr) => acc + curr, 0)) *
-                        100
-                    ).toFixed(0)}%\`;
+                  formatter: function (v, { config, dataPointIndex }) {
+                    let count = 0,
+                      value = Number(
+                        (v /
+                          config.series.reduce((acc, curr) => acc + curr, 0)) *
+                          100
+                      ).toFixed(0);
+                    value = isNaN(value) || !isFinite(value) ? 0 : value;
+
+                    switch (dataPointIndex) {
+                      case 0:
+                        count = valueMap[type.DNT];
+                        break;
+                      case 1:
+                        count = valueMap[type.IGNORED];
+                        break;
+                      case 2:
+                        count = valueMap[type.USER_INPUTS];
+                        break;
+                    }
+
+                    return \`\${value}% (\${count} strings)\`;
                   },
                   title: {
                     formatter: function (a) {
-                      return \`Total Number of localized \${a} instances including all locales\`;
-                    },
-                  },
-                },
+                      return \`Total Number of \${a} strings:\`;
+                    }
+                  }
+                }
               },
               colors: [
                 ({ seriesIndex, w }) => {
@@ -339,288 +434,385 @@ var _default = () => `
 
                   switch (currType) {
                     case type.DNT:
-                      return "#31E994";
+                      return '#31E994';
                     case type.IGNORED:
-                      return "#3AD1F3";
-                    case type.AUTO_IGNORED:
-                      return "#DADF40";
+                      return '#3AD1F3';
+                    case type.USER_INPUTS:
+                      return '#DADF40';
 
                     default:
-                      return "";
+                      return '';
                   }
-                },
+                }
               ],
+              noData: {
+                text: 'No metrics available',
+                align: 'center',
+                verticalAlign: 'middle',
+                offsetX: -70,
+                offsetY: -25,
+                style: {
+                  fontSize: '14px'
+                }
+              },
               legend: {
                 offsetX: -40,
-                formatter: (seriesName) =>
-                  \`\${seriesName} (\${(
-  (valueMap[seriesName] / total) *
-  100
-).toFixed(0)}%)\`,
+                formatter: (seriesName) => {
+                  let value = ((valueMap[seriesName] / total) * 100).toFixed(0);
+                  value = isNaN(value) || !isFinite(value) ? 0 : value;
+                  return \`\${seriesName} (\${value}%)\`;
+                }
               },
               dataLabels: {
                 formatter: (v) => \`\${Number(v).toFixed(0)}%\`,
                 style: {
-                  colors: ["#080404b0"],
+                  colors: ['#080404b0']
                 },
-                dropShadow: { enabled: false },
-              },
+                dropShadow: { enabled: false }
+              }
             };
 
-            (ignoredChart = new ApexCharts(
-              document.querySelector(".skipped-items .graph"),
-              options
-            )).render();
-          }
+          (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(
+        function renderNumberChart() {
+          const overallStats = DataStore.getOverallStats();
+          const types = ['Number', 'Currency', 'Percentage'],
+            data = {
+              number_i18n: overallStats.localizedNumber,
+              currency_i18n: overallStats.localizedCurrency,
+              percentage_i18n: overallStats.localizedPercentage,
+              number_not_i18n: overallStats.notLocalizedNumber,
+              currency_not_i18n: overallStats.notLocalizedCurrency,
+              percentage_not_i18n: overallStats.notLocalizedPercentage
+            },
+            total = Object.values(data).reduce((acc, curr) => acc + curr, 0),
+            percentageCalc = (v, t) => {
+              const val = ((v / t) * 100).toFixed(0);
+              return isNaN(val) || !isFinite(val) ? 0 : val;
+            },
+            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,
-                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,
-                    },
-                  },
+              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]
                 },
-                dataLabels: {
+                {
+                  name: 'Not Internationalized',
+                  data: [numberNotI18n, currencyNotI18n, percentageNotI18n]
+                }
+              ],
+              chart: {
+                type: 'bar',
+                height: 220,
+                width: 500,
+                toolbar: {
+                  show: false
+                },
+                animations: {
                   enabled: true,
-                  dropShadow: { enabled: false },
-                  style: {
-                    colors: ["#080404b0"],
-                  },
-                  formatter: (val) => {
-                    return \`\${val}%\`;
+                  easing: 'easeinout',
+                  speed: 800,
+                  animateGradually: {
+                    enabled: true,
+                    delay: 150
                   },
+                  dynamicAnimation: {
+                    enabled: true,
+                    speed: 350
+                  }
+                }
+              },
+              dataLabels: {
+                enabled: true,
+                dropShadow: { enabled: false },
+                style: {
+                  colors: ['#080404b0']
                 },
-                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}%\`,
-                  },
+                formatter: (val) => {
+                  return \`\${val}%\`;
+                }
+              },
+              stroke: {
+                show: true,
+                width: 1,
+                colors: ['#fff']
+              },
+              tooltip: {
+                theme: 'dark',
+                shared: true,
+                intersect: false,
+                x: {
+                  formatter: (type) => \`\${type} instances:\`
                 },
-                colors: ["#31E994", "#ff8173"],
-                legend: {
-                  offsetX: -13,
-                  position: "right",
-                  formatter: (seriesName) => {
-                    if (seriesName === "Internationalized") {
-                      return \`\${seriesName} (\${i18nPercentage}%)\`;
+                y: {
+                  formatter: (v, { seriesIndex, dataPointIndex }) => {
+                    const getI18nCount = (type) => {
+                        switch (type) {
+                          case 'number':
+                            return data.number_i18n;
+                          case 'currency':
+                            return data.currency_i18n;
+                          case 'percentage':
+                            return data.percentage_i18n;
+                        }
+                      },
+                      getNonI18nCount = (type) => {
+                        switch (type) {
+                          case 'number':
+                            return data.number_not_i18n;
+                          case 'currency':
+                            return data.currency_not_i18n;
+                          case 'percentage':
+                            return data.percentage_not_i18n;
+                        }
+                      },
+                      getCount = (type) => {
+                        return seriesIndex === 0
+                          ? getI18nCount(type)
+                          : getNonI18nCount(type);
+                      };
+
+                    switch (dataPointIndex) {
+                      case 0:
+                        return getCount('number');
+                      case 1:
+                        return getCount('currency');
+                      case 2:
+                        return getCount('percentage');
                     }
-                    return \`\${seriesName} (\${nonI18nPercentage}%)\`;
-                  },
-                },
-                plotOptions: {
-                  bar: {
-                    borderRadius: 3,
-                    columnWidth: "85%",
-                  },
-                },
-              };
+                  }
+                }
+              },
+              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();
-          }
+          (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,
-                    },
-                  },
+        function renderDatetimeChart() {
+          const overallStats = DataStore.getOverallStats();
+          const types = ['Date', 'Time', 'DateTime'],
+            data = {
+              date_i18n: overallStats.localizedDate,
+              time_i18n: overallStats.localizedTime,
+              date_time_i18n: overallStats.localizedDateTime,
+              date_not_i18n: overallStats.notLocalizedDate,
+              time_not_i18n: overallStats.notLocalizedTime,
+              date_time_not_i18n: overallStats.notLocalizedDateTime
+            },
+            total = Object.values(data).reduce((acc, curr) => acc + curr, 0),
+            percentageCalc = (v, t) => {
+              const val = ((v / t) * 100).toFixed(0);
+              return isNaN(val) || !isFinite(val) ? 0 : val;
+            },
+            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]
                 },
-                dataLabels: {
+                {
+                  name: 'Not Internationalized',
+                  data: [dateNotI18n, timeNotI18n, dateTimeNotI18n]
+                }
+              ],
+              chart: {
+                type: 'bar',
+                height: 220,
+                width: 500,
+                toolbar: {
+                  show: false
+                },
+                animations: {
                   enabled: true,
-                  dropShadow: { enabled: false },
-                  style: {
-                    colors: ["#080404b0"],
-                  },
-                  formatter: (val) => {
-                    return \`\${val}%\`;
+                  easing: 'easeinout',
+                  speed: 800,
+                  animateGradually: {
+                    enabled: true,
+                    delay: 150
                   },
+                  dynamicAnimation: {
+                    enabled: true,
+                    speed: 350
+                  }
+                }
+              },
+              dataLabels: {
+                enabled: true,
+                dropShadow: { enabled: false },
+                style: {
+                  colors: ['#080404b0']
                 },
-                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}%\`,
-                  },
+                formatter: (val) => {
+                  return \`\${val}%\`;
+                }
+              },
+              stroke: {
+                show: true,
+                width: 1,
+                colors: ['#fff']
+              },
+              tooltip: {
+                theme: 'dark',
+                shared: true,
+                intersect: false,
+                x: {
+                  formatter: (type) => \`\${type} instances:\`
                 },
-                colors: ["#31E994", "#ff8173"],
-                legend: {
-                  offsetX: 4,
-                  position: "right",
-                  formatter: (seriesName) => {
-                    if (seriesName === "Internationalized") {
-                      return \`\${seriesName} (\${i18nPercentage}%)\`;
+                y: {
+                  formatter: (v, { seriesIndex, dataPointIndex }) => {
+                    const getI18nCount = (type) => {
+                        switch (type) {
+                          case 'date':
+                            return data.date_i18n;
+                          case 'time':
+                            return data.time_i18n;
+                          case 'date_time':
+                            return data.date_time_i18n;
+                        }
+                      },
+                      getNonI18nCount = (type) => {
+                        switch (type) {
+                          case 'date':
+                            return data.date_not_i18n;
+                          case 'time':
+                            return data.time_not_i18n;
+                          case 'date_time':
+                            return data.date_time_not_i18n;
+                        }
+                      },
+                      getCount = (type) => {
+                        return seriesIndex === 0
+                          ? getI18nCount(type)
+                          : getNonI18nCount(type);
+                      };
+
+                    switch (dataPointIndex) {
+                      case 0:
+                        return getCount('date');
+                      case 1:
+                        return getCount('time');
+                      case 2:
+                        return getCount('date_time');
                     }
-                    return \`\${seriesName} (\${nonI18nPercentage}%)\`;
-                  },
-                },
-                plotOptions: {
-                  bar: {
-                    borderRadius: 3,
-                    columnWidth: "85%",
-                  },
-                },
-              };
+                  }
+                }
+              },
+              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();
-          }
-        });
-      })();
-`;
+          (dateTimeChart = new ApexCharts(
+            document.querySelector('.datetime-quality .graph'),
+            options
+          )).render();
+        }
+      });
+    })();`;
 exports.default = _default;