From 7faa1682b14b5dc27a2d2501f064e6749de78137 Mon Sep 17 00:00:00 2001
From: Aslihan <aslihanozfidan@gmail.com>
Date: Sat, 8 Aug 2020 21:49:16 +0300
Subject: [PATCH] Refactor chart

---
 helpers/repository_metric_helper.go |   4 +-
 template/template.go                | 360 ++++++++++++++++++----------
 2 files changed, 241 insertions(+), 123 deletions(-)

diff --git a/helpers/repository_metric_helper.go b/helpers/repository_metric_helper.go
index e8f1942..7ecc7f2 100644
--- a/helpers/repository_metric_helper.go
+++ b/helpers/repository_metric_helper.go
@@ -85,8 +85,8 @@ func CalculateMetrics(repo *git.Repository, request MetricsRequest) (FourKeyMetr
 			tagMetricDto := TagMetricDto{
 				TagName:                tagNameParse[len(tagNameParse)-1],
 				TagDate:                tagMetricDateRange.tagDate,
-				MeanTimeRestoreAverage: GetSecondsToHour(tagMetricDateRange.tagMeanTimeRestoreAverageSeconds),
-				LeadTime:               GetSecondsToHour(tagMetricDateRange.tagLeadTimeSeconds),
+				MeanTimeRestoreAverage: tagMetricDateRange.tagMeanTimeRestoreAverageSeconds,
+				LeadTime:               tagMetricDateRange.tagLeadTimeSeconds,
 				ChangeFailPercentage:   tagMetricDateRange.tagChangeFailPercentage,
 			}
 			tagMetricDtoList = append(tagMetricDtoList, tagMetricDto)
diff --git a/template/template.go b/template/template.go
index 7daaace..17d97cf 100644
--- a/template/template.go
+++ b/template/template.go
@@ -14,90 +14,97 @@ func GetHtml() string {
 
     <script type="text/javascript">
         document.addEventListener("DOMContentLoaded", function () {
-            const LABEL_TYPES = ["weekly", "monthly", "average"]
-            const ALL_MONTHS_LONG = ["January", "February", "March", "April", "May", "June",
-                "July", "August", "September", "October", "November", "December"];
-            const ALL_MONTHS_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
-            const chartButtons = Array.from(document.querySelectorAll('.btn-chart'))
-
-            let chartData = {
-                meanTimeChart: {mtData},
-                leadTimeChart: {ltData},
-                failPercengatesChart: {fpData},
-                deploymentFrequencyChart: {dfData}
-            }
-            let charts = {
-                meanTimeChart: "",
-                leadTimeChart: "",
-                failPercengatesChart: "",
-                deploymentFrequencyChart: ""
-            }
-
+            const COLORS = ["rgba(242,130,50,1)", "rgba(102,225,191,1)", "rgba(235,69,47,1)", "rgba(121,123,170,1)"];
+            const LABEL_TYPES = ["weekly", "monthly", "average"];
+            const CHART_NAMES = ["meanTimeChart", "leadTimeChart", "failPercengatesChart", "deploymentFrequencyChart"];
+            const ALL_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+            const chartButtons = Array.from(document.querySelectorAll('.btn-chart'));
+
+            let chartData = {};
+            let charts = {};
             
-            function getWeek(date) {
-                const dayNumber = (date.getDay() + 6) % 7;
-                date.setDate(date.getDate() - dayNumber + 3);
+            chartData[CHART_NAMES[0]] = {mtData};
+            chartData[CHART_NAMES[1]] = {ltData};
+            chartData[CHART_NAMES[2]] = {fpData};
+            chartData[CHART_NAMES[3]] = {dfData};
+            charts[CHART_NAMES[0]] = "";
+            charts[CHART_NAMES[1]] = "";
+            charts[CHART_NAMES[2]] = "";
+            charts[CHART_NAMES[3]] = "";
+
+            function getWeekAndYear(d) {
+                d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+                const firstDayOfYear = new Date(d.getUTCFullYear(), 0, 1)
+                let year = d.getUTCFullYear();
+                let weekNo = Math.ceil((((d - firstDayOfYear) / 86400000) + firstDayOfYear.getDay()) / 7);
+
+                if (weekNo > 52) {
+                    weekNo = 1;
+                    year = d.getUTCFullYear() + 1;
+                }
 
-                let tempDate = new Date(date.getFullYear(), 0, 4);
-                let dayDiff = (date - tempDate) / 86400000;
-                return 1 + Math.ceil(dayDiff / 7);
+                return {
+                    weekNo,
+                    year
+                };
             }
 
-            function prepareData(data) {
-                let newData = Object.assign([], data)
-                let months = []
-                let years = []
-                let weeks = []
-                let days = []
-                let monthly = []
-                let weekly = []
+            function prepareData(chartId) {
+                const data = chartData[chartId];
+                let newData = Object.assign([], data);
+                let months = [];
+                let years = [];
+                let weeks = [];
+                let days = [];
+                let monthly = [];
+                let weekly = [];
+                let totalValue;
 
                 newData.sort(function (a, b) {
                     return new Date(a.date) - new Date(b.date);
                 });
 
                 newData.forEach(item => {
-                    const splittedDate = item.date.split("-")
-                    const date = new Date(splittedDate[0] + "-" + splittedDate[1] + "-" + splittedDate[2])
-                    const month = ALL_MONTHS_SHORT[date.getMonth()]
-                    const day = date.getDate()
-                    const year = date.getFullYear()
-                    const week = getWeek(date)
+                    const splittedDate = item.date.split("-");
+                    const date = new Date(splittedDate[0] + "-" + splittedDate[1] + "-" + splittedDate[2]);
+                    const month = ALL_MONTHS[date.getMonth()];
+                    const day = date.getDate();
+                    const year = date.getFullYear();
+                    const weekAndYear = getWeekAndYear(date);
 
                     if (!item.month) {
-                        item.month = month
+                        item.month = month;
                     }
                     if (!item.day) {
-                        item.day = day
+                        item.day = day;
                     }
                     if (!item.year) {
-                        item.year = year
+                        item.year = year;
                     }
                     if (!item.week) {
-                        item.week = week
+                        item.week = weekAndYear.weekNo;
                     }
                     if (!days.includes(day)) {
-                        days.push(day)
+                        days.push(day);
                     }
                     if (!months.includes(month)) {
-                        months.push(month)
+                        months.push(month);
                     }
                     if (!years.includes(year)) {
-                        years.push(year)
+                        years.push(year);
                     }
-                    if (!weeks.includes(week)) {
-                        weeks.push({ week, year })
+                    if (!weeks.includes(weekAndYear.weekNo)) {
+                        weeks.push({ number: weekAndYear.weekNo, year: weekAndYear.year });
                     }
-
                 });
 
                 years.forEach(year => {
                     if (!monthly.includes(year)) {
-                        monthly[year] = []
+                        monthly[year] = [];
                     }
 
                     if (!weekly.includes(year)) {
-                        weekly[year] = []
+                        weekly[year] = [];
                         for (let i = 0; i < 52; i++) {
                             weekly[year].push({
                                 label: i + 1,
@@ -105,30 +112,48 @@ func GetHtml() string {
                             })
                         }
                     }
-
                     weeks.forEach((week) => {
-                        totalValue = 0
+                        totalValue = 0;
                         let totalWeeks = weeks.filter(item =>
-                            item.week == week.week && year == week.year
+                            item.number == week.number && year == week.year
                         )
-                        weekly[year][week.week - 1].totalValue = totalWeeks.length
+
+                        if (chartId === CHART_NAMES[0] || chartId === CHART_NAMES[1]) {
+                            totalValue = newData.filter(item =>
+                                item.week == week.number && item.year == year
+                            ).reduce(function getSum(total, item) {
+                                return total + parseFloat(item.value);
+                            }, totalValue);
+
+                            const timeLabel = secondsToString(totalValue);
+                            weekly[year][week.number - 1].totalValue = timeLabel.timeTextNumeric;
+                        } else {
+                            weekly[year][week.number - 1].totalValue = totalWeeks.length;
+                        }
                     });
 
 
-                    ALL_MONTHS_SHORT.forEach(mon => {
-                        totalValue = 0
+                    ALL_MONTHS.forEach(mon => {
+                        totalValue = 0;
                         totalValue = newData.filter(item => item.month == mon && item.year == year).reduce(function getSum(total, item) {
-                            return total + parseInt(item.value);
+                            return total + parseFloat(item.value);
                         }, totalValue)
 
-                        monthly[year].push({
-                            label: mon,
-                            totalValue
-                        })
+                        if (chartId === CHART_NAMES[0] || chartId === CHART_NAMES[1] && totalValue > 0) {
+                            const timeLabel = secondsToString(totalValue);
+                            monthly[year].push({
+                                label: mon,
+                                totalValue: timeLabel.timeTextNumeric
+                            })
+                        } else {
+                            monthly[year].push({
+                                label: mon,
+                                totalValue
+                            })
+                        }
                     });
                 });
 
-
                 return {
                     data: newData,
                     monthly,
@@ -136,27 +161,32 @@ func GetHtml() string {
                 }
             }
 
-            function randomNum() {
-                return Math.floor(Math.random() * 256);
-            }
+            function secondsToString(seconds) {
+                const dayNumber = Math.floor((seconds % 31536000) / 86400);
+                const hourNumber = Math.floor(((seconds % 31536000) % 86400) / 3600);
+                const minuteNumber = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
+                const totalHourNumber = (dayNumber * 24) + hourNumber;
+
+                return {
+                    timeText: totalHourNumber + "d " + minuteNumber + "m",
+                    timeTextNumeric: totalHourNumber + "." + minuteNumber,
+                    totalHourNumber,
+                };
 
-            function randomRGB() {
-                var red = randomNum();
-                var green = randomNum();
-                var blue = randomNum();
-                return red + ", " + green + ", " + blue;
             }
 
             function getDataSets(data) {
+                let index = -1;
                 return Object.entries(data).map(([key, values]) => {
+                    index++;
                     return {
                         label: key,
                         data: values.map(item => item.totalValue), fill: false,
                         backgroundColor: [
-                            "rgba(" + randomRGB() + ", 0.2)"
+                            COLORS[index]
                         ],
                         borderColor: [
-                            "rgba(" + randomRGB() + ", 1)"
+                            COLORS[index]
                         ],
                         borderWidth: 5
                     }
@@ -164,9 +194,8 @@ func GetHtml() string {
             }
 
             function getChartData(chartId, type) {
-                const data = prepareData(chartData[chartId])
-                const activeLabelType = LABEL_TYPES.find(labelType => labelType == type)
-
+                const data = prepareData(chartId);
+                const activeLabelType = LABEL_TYPES.find(labelType => labelType === type);
                 return {
                     labels: Object.values(data[activeLabelType])[0].map(item => item.label),
                     datasets: getDataSets(data[activeLabelType])
@@ -179,47 +208,86 @@ func GetHtml() string {
                     type: 'line',
                     data: getChartData(chartId, LABEL_TYPES[1]),
                     options: {
-                        scales: {
-                            yAxes: [{
-                                ticks: {
-                                    beginAtZero: true
+                        tooltips: {
+                            mode: 'point',
+                            intersect: false,
+                            callbacks: {
+                                label: function (tooltipItem, data) {
+                                    if (chartId === CHART_NAMES[0] || chartId === CHART_NAMES[1]) {
+                                        const label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '';
+                                        if (label.length > 1) {
+                                            const labelArr = label.split('.');
+                                            return labelArr[0] + "h " + labelArr[1] + "m";
+                                        } else {
+                                            return label
+                                        }
+
+                                    } else if (chartId === CHART_NAMES[3]) {
+                                        return data.datasets[tooltipItem.datasetIndex].label + ": " + tooltipItem.value + " Releases"
+                                    } else if (chartId === CHART_NAMES[2]) {
+                                        return data.datasets[tooltipItem.datasetIndex].label + ": " + "%" + parseFloat(tooltipItem.value).toFixed(2).replace(/\.?0+$/, '')
+                                    }
                                 }
-                            }]
+                            }
                         }
                     }
                 });
             }
 
             function updateChart(chartId, labelType) {
-                charts[chartId].config.data = getChartData(chartId, labelType)
-                charts[chartId].update()
+                charts[chartId].config.data = getChartData(chartId, labelType);
+                charts[chartId].update();
             }
 
-            createChart("deploymentFrequencyChart")
+            createChart("deploymentFrequencyChart");
+            createChart("leadTimeChart");
+            createChart("meanTimeChart");
+            createChart("failPercengatesChart");
 
             chartButtons.forEach(button => {
                 button.addEventListener("click", function (event) {
-                    const chartId = event.target.getAttribute("data-chart-id")
-                    const buttonType = event.target.getAttribute('data-button-type')
-                    updateChart(chartId, buttonType)
+                    const chartId = event.target.getAttribute("data-chart-id");
+                    const buttonType = event.target.getAttribute('data-button-type');
+                    chartButtons.forEach(btn => {
+                        if (btn.classList.contains('active') && button.getAttribute('data-chart-id') === btn.getAttribute('data-chart-id')) {
+                            btn.classList.remove('active');
+                        }
+                    });
+
+                    if (!button.classList.contains('active')) {
+                        button.classList.add('active');
+                    }
+
+                    updateChart(chartId, buttonType);
                 })
             });
         })
-        </script>
+    </script>
 
-        <style>
-        body {
+    <style>
+        * {
             font-family: 'Rubik', sans-serif;
         }
 
+        body {
+            margin: 0;
+            text-rendering: optimizeLegibility !important;
+            -webkit-font-smoothing: antialiased !important;
+            background-color: #f4f4f4;
+        }
+
         div {
             width: 100%;
             max-width: 100%;
         }
 
         .container {
-            height: 100%;
-            width: 100%;
+            height: auto;
+            width: 1000px;
+            max-width: 100%;
+            margin: 0 auto;
+            padding: 50px;
+            background-color: #ffffff;
         }
 
         .container .title {
@@ -244,7 +312,6 @@ func GetHtml() string {
         }
 
         .container .chart-title {
-            margin-block-end: 0.5em;
             font-size: 2rem;
             margin-left: 10px;
             font-weight: 400;
@@ -260,47 +327,98 @@ func GetHtml() string {
         }
 
         .btn-chart {
-            appearance: none;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+            -ms-progress-appearance: unset;
             border: 1px solid #767676;
             background-color: transparent;
             color: #767676;
+            font-size: 12px;
             padding: 7px 14px;
             margin: 0 5px;
             outline: none;
             cursor: pointer;
+            user-select: none;
         }
 
-        .btn-chart:hover {
+        .btn-chart:hover,
+        .btn-chart.active {
             border: 1px solid #2185d0;
             color: #2185d0;
         }
+
+        .btn-chart:disabled,
+        .btn-chart:disabled:hover {
+            border: none;
+            background-color: #767676;
+            color: #cdcdcd;
+            cursor: not-allowed;
+        }
+
+        @media (max-width: 1080px) {
+            .container {
+                width: 100%;
+                max-width: calc(100% - 40px);
+                padding: 50px 20px;
+            }
+        }
     </style>
-      </head>
-      <body>
-      <div class="container">
-      <h4 class="title">four-key Metrics</h4>
-      <h6 class="subtitle">allTeams <span>|</span> allTeams <span>|</span> 2019-01-01 - 2021-01-01</h6>
-
-      <div class="deployment-frequency-chart-wrapper">
-          <h6 class="chart-title">Deployment Frequencies</h6>
-          <canvas id="deploymentFrequencyChart"></canvas>
-          <div class="button-wrapper">
-              <button data-chart-id="deploymentFrequencyChart" data-button-type="weekly" class="btn-chart">Weekly</button>
-              <button data-chart-id="deploymentFrequencyChart" data-button-type="monthly" class="btn-chart">Monthly</button>
-              <button data-chart-id="deploymentFrequencyChart" data-button-type="average" class="btn-chart">Average</button>
-          </div>
-      </div>
-
-      <h6 class="chart-title">Lead Times</h6>
-      <canvas id="leadTimeChart"></canvas>
-
-      <h6 class="chart-title">Mean Times</h6>
-      <canvas id="meanTimeChart" width="400" height="400"></canvas>
-      <!--   <div id="meanTimeDiv"></div> -->
-
-      <h6 class="chart-title">Fail Percentages</h6>
-      <canvas id="failPercengatesChart"></canvas>
-  </div>
+</head>
+
+<body>
+    <div class="container">
+        <h4 class="title">four-key Metrics</h4>
+        <h6 class="subtitle">allTeams <span>|</span> allTeams <span>|</span> 2019-01-01 - 2021-01-01</h6>
+
+        <div class="deployment-frequency-chart-wrapper">
+            <h6 class="chart-title">Deployment Frequencies</h6>
+            <canvas id="deploymentFrequencyChart"></canvas>
+            <div class="button-wrapper">
+                <button data-chart-id="deploymentFrequencyChart" data-button-type="weekly"
+                    class="btn-chart">Weekly</button>
+                <button data-chart-id="deploymentFrequencyChart" data-button-type="monthly"
+                    class="btn-chart active">Monthly</button>
+                <button data-chart-id="deploymentFrequencyChart" data-button-type="average" class="btn-chart"
+                    disabled>Average</button>
+            </div>
+        </div>
+
+        <div class="lead-time-chart-wrapper">
+            <h6 class="chart-title">Lead Times</h6>
+            <canvas id="leadTimeChart"></canvas>
+            <div class="button-wrapper">
+                <button data-chart-id="leadTimeChart" data-button-type="weekly" class="btn-chart">Weekly</button>
+                <button data-chart-id="leadTimeChart" data-button-type="monthly"
+                    class="btn-chart active">Monthly</button>
+                <button data-chart-id="leadTimeChart" data-button-type="average" class="btn-chart"
+                    disabled>Average</button>
+            </div>
+        </div>
+
+        <div class="mean-time-chart-wrapper">
+            <h6 class="chart-title">Mean Times</h6>
+            <canvas id="meanTimeChart" width="400" height="400"></canvas>
+            <div class="button-wrapper">
+                <button data-chart-id="meanTimeChart" data-button-type="weekly" class="btn-chart">Weekly</button>
+                <button data-chart-id="meanTimeChart" data-button-type="monthly"
+                    class="btn-chart active">Monthly</button>
+                <button data-chart-id="meanTimeChart" data-button-type="average" class="btn-chart"
+                    disabled>Average</button>
+            </div>
+        </div>
+
+        <div class="fail-percengates-chart-wrapper">
+            <h6 class="chart-title">Fail Percentages</h6>
+            <canvas id="failPercengatesChart"></canvas>
+            <div class="button-wrapper">
+                <button data-chart-id="failPercengatesChart" data-button-type="weekly" class="btn-chart">Weekly</button>
+                <button data-chart-id="failPercengatesChart" data-button-type="monthly"
+                    class="btn-chart active">Monthly</button>
+                <button data-chart-id="failPercengatesChart" data-button-type="average" class="btn-chart"
+                    disabled>Average</button>
+            </div>
+        </div>
+    </div>
 </body>
 </html>