From 6eeed553056126e258cdffc9d7a55bf4b556170b Mon Sep 17 00:00:00 2001
From: Aslihan <aslihanozfidan@gmail.com>
Date: Mon, 3 Aug 2020 23:08:05 +0300
Subject: [PATCH 1/3] Refactor html template

---
 template/template.go | 681 +++++++++++--------------------------------
 1 file changed, 177 insertions(+), 504 deletions(-)

diff --git a/template/template.go b/template/template.go
index 5cdf8f0..a409a41 100644
--- a/template/template.go
+++ b/template/template.go
@@ -10,535 +10,177 @@ func GetHtml() string {
     <title>four-key Metrics</title>
 
     <link href="https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap" rel="stylesheet">
-    <script src="https://www.amcharts.com/lib/4/core.js"></script>
-    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
-    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
 
     <script type="text/javascript">
-        am4core.ready(function () {
-            var mtData = {mtData};
-            initMeanTime(mtData, groupBy(mtData, false));
-
-            var ltData = {ltData};
-            initLeadTime(ltData, groupBy(ltData, false));
-
-            var fpData = {fpData};
-            initFailPercentage(fpData, groupBy(fpData, false));
-
-            var dfData = {dfData};
-            initDeploymentFrequencies(dfData, groupBy(dfData, true));
-        });
-
-
-        function initMeanTime(data, groupped) {
-            for (var i = 0; i < groupped.length; i++) {
-                var monthOfYear = Object.keys(groupped[i]).map(function (key) {
-                    return {
-                        month: key,
-                        ...groupped[i][key],
-                    };
-                });
-
-                monthOfYear = monthOfYear.filter(function (key) {
-                    return !isNaN(parseInt(key.month));
-                });
-                monthOfYear.forEach(function (entry) {
-                    var date = new Date(entry[entry.month][0].date);
-                    data.push({
-                        date: date.getFullYear() + "-" + (date.getMonth() + 1) + "-15",
-                        monthValue: entry[entry.month].reduce((a, b) => a + b.value, 0),
-                    });
-                });
+        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}
             }
-
-            var monthData = data.filter(function (entry) {
-                return !isNaN(parseInt(entry.monthValue))
-            }).sort(function (a, b) {
-                return new Date(a.date) - new Date(b.date);
-            });
-            data.push({
-                date: monthData[0].date,
-                averageValue: monthData[0].monthValue,
-            });
-            data.push({
-                date: monthData[monthData.length - 1].date,
-                averageValue: monthData.reduce((a, b) => a + b.monthValue, 0) / monthData.length,
-            });
-
-            am4core.useTheme(am4themes_animated);
-
-            var chart = am4core.create("meanTimeDiv", am4charts.XYChart);
-
-            chart.colors.step = 2;
-
-            chart.data = data.sort(function (a, b) {
-                return new Date(a.date) - new Date(b.date);
-            });
-
-            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
-            dateAxis.renderer.minGridDistance = 50;
-
-            function createAxisAndSeries(field, name, opposite, selectedBullet, hidden) {
-                var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
-                if (chart.yAxes.indexOf(valueAxis) != 0) {
-                    valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
-                }
-
-                var series = chart.series.push(new am4charts.LineSeries());
-                series.dataFields.valueY = field;
-                series.dataFields.dateX = "date";
-                series.strokeWidth = 3;
-                series.yAxis = valueAxis;
-                series.name = name;
-                series.tooltipText = "[bold]{valueY}[/] hours";
-                series.showOnInit = true;
-                series.hidden = hidden;
-
-                var interfaceColors = new am4core.InterfaceColorSet();
-
-                var bullet = {};
-                switch (selectedBullet) {
-                    case "triangle":
-                        bullet = series.bullets.push(new am4charts.Bullet());
-                        bullet.width = 12;
-                        bullet.height = 12;
-                        bullet.horizontalCenter = "middle";
-                        bullet.verticalCenter = "middle";
-
-                        var triangle = bullet.createChild(am4core.Triangle);
-                        triangle.stroke = interfaceColors.getFor("background");
-                        triangle.strokeWidth = 3;
-                        triangle.direction = "top";
-                        triangle.width = 12;
-                        triangle.height = 12;
-                        break;
-                    case "rectangle":
-                        bullet = series.bullets.push(new am4charts.Bullet());
-                        bullet.width = 10;
-                        bullet.height = 10;
-                        bullet.horizontalCenter = "middle";
-                        bullet.verticalCenter = "middle";
-
-                        var rectangle = bullet.createChild(am4core.Rectangle);
-                        rectangle.stroke = interfaceColors.getFor("background");
-                        rectangle.strokeWidth = 3;
-                        rectangle.width = 10;
-                        rectangle.height = 10;
-                        break;
-                    default:
-                        bullet = series.bullets.push(new am4charts.CircleBullet());
-                        bullet.circle.stroke = interfaceColors.getFor("background");
-                        bullet.circle.strokeWidth = 3;
-                        break;
-                }
-
-                valueAxis.renderer.line.strokeOpacity = 1;
-                valueAxis.renderer.line.strokeWidth = 3;
-                valueAxis.renderer.line.stroke = series.stroke;
-                valueAxis.renderer.labels.template.fill = series.stroke;
-                valueAxis.renderer.opposite = opposite;
+            let charts = {
+                meanTimeChart: "",
+                leadTimeChart: "",
+                failPercengatesChart: "",
+                deploymentFrequencyChart: ""
             }
 
-            //initMeanTime
-            createAxisAndSeries("value", "Daily", false, "circle", false);
-            createAxisAndSeries("monthValue", "Monthly", false, "triangle", true);
-            createAxisAndSeries("averageValue", "Average", false, "rectangle", false);
+            function prepareData(data) {
+                let newData = Object.assign([], data)
+                let months = []
+                let years = []
+                let days = []
+                let monthly = []
 
-            chart.legend = new am4charts.Legend();
-            chart.cursor = new am4charts.XYCursor();
-        }
-
-        function initLeadTime(data, groupped) {
-            for (var i = 0; i < groupped.length; i++) {
-                var monthOfYear = Object.keys(groupped[i]).map(function (key) {
-                    return {
-                        month: key,
-                        ...groupped[i][key],
-                    };
+                newData.sort(function (a, b) {
+                    return new Date(a.date) - new Date(b.date);
                 });
 
-                monthOfYear = monthOfYear.filter(function (key) {
-                    return !isNaN(parseInt(key.month));
+                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()
+                    if (!item.month) {
+                        item.month = month
+                    }
+                    if (!item.day) {
+                        item.day = day
+                    }
+                    if (!item.year) {
+                        item.year = year
+                    }
+                    if (!days.includes(day)) {
+                        days.push(day)
+                    }
+                    if (!months.includes(month)) {
+                        months.push(month)
+                    }
+                    if (!years.includes(year)) {
+                        years.push(year)
+                    }
                 });
-                monthOfYear.forEach(function (entry) {
-                    var date = new Date(entry[entry.month][0].date);
-                    data.push({
-                        date: date.getFullYear() + "-" + (date.getMonth() + 1) + "-15",
-                        monthValue: entry[entry.month].reduce((a, b) => a + b.value, 0),
-                    });
-                });
-            }
 
-            var monthData = data.filter(function (entry) {
-                return !isNaN(parseInt(entry.monthValue))
-            }).sort(function (a, b) {
-                return new Date(a.date) - new Date(b.date);
-            });
-            data.push({
-                date: monthData[0].date,
-                averageValue: monthData[0].monthValue,
-            });
-            data.push({
-                date: monthData[monthData.length - 1].date,
-                averageValue: monthData.reduce((a, b) => a + b.monthValue, 0) / monthData.length,
-            });
+                years.forEach(year => {
+                    if (!monthly.includes(year)) {
+                        monthly[year] = []
+                    }
 
-            am4core.useTheme(am4themes_animated);
+                    let totalValue = 0
+                    totalValue = newData.filter(item => item.year == year).reduce(function getSum(total, item) {
+                        return total + parseInt(item.value);
+                    }, totalValue)
 
-            var chart = am4core.create("leadTimeDiv", am4charts.XYChart);
+                    ALL_MONTHS_SHORT.forEach(mon => {
+                        totalValue = 0
+                        totalValue = newData.filter(item => item.month == mon && item.year == year).reduce(function getSum(total, item) {
+                            return total + parseInt(item.value);
+                        }, totalValue)
 
-            chart.colors.step = 2;
-            chart.data = data.sort(function (a, b) {
-                return new Date(a.date) - new Date(b.date);
-            });
+                        monthly[year].push({
+                            label: mon,
+                            totalValue
+                        })
 
-            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
-            dateAxis.renderer.minGridDistance = 50;
+                    });
 
-            function createAxisAndSeries(field, name, opposite, selectedBullet, hidden) {
-                var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
-                if (chart.yAxes.indexOf(valueAxis) != 0) {
-                    valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
-                }
+                });
 
-                var series = chart.series.push(new am4charts.LineSeries());
-                series.dataFields.valueY = field;
-                series.dataFields.dateX = "date";
-                series.strokeWidth = 3;
-                series.yAxis = valueAxis;
-                series.name = name;
-                series.tooltipText = "[bold]{valueY}[/] hours";
-                series.showOnInit = true;
-                series.hidden = hidden;
-
-                var interfaceColors = new am4core.InterfaceColorSet();
-
-                var bullet = {};
-                switch (selectedBullet) {
-                    case "triangle":
-                        bullet = series.bullets.push(new am4charts.Bullet());
-                        bullet.width = 12;
-                        bullet.height = 12;
-                        bullet.horizontalCenter = "middle";
-                        bullet.verticalCenter = "middle";
-
-                        var triangle = bullet.createChild(am4core.Triangle);
-                        triangle.stroke = interfaceColors.getFor("background");
-                        triangle.strokeWidth = 3;
-                        triangle.direction = "top";
-                        triangle.width = 12;
-                        triangle.height = 12;
-                        break;
-                    case "rectangle":
-                        bullet = series.bullets.push(new am4charts.Bullet());
-                        bullet.width = 10;
-                        bullet.height = 10;
-                        bullet.horizontalCenter = "middle";
-                        bullet.verticalCenter = "middle";
-
-                        var rectangle = bullet.createChild(am4core.Rectangle);
-                        rectangle.stroke = interfaceColors.getFor("background");
-                        rectangle.strokeWidth = 3;
-                        rectangle.width = 10;
-                        rectangle.height = 10;
-                        break;
-                    default:
-                        bullet = series.bullets.push(new am4charts.CircleBullet());
-                        bullet.circle.stroke = interfaceColors.getFor("background");
-                        bullet.circle.strokeWidth = 3;
-                        break;
+                return {
+                    data: newData,
+                    monthly
                 }
-
-                valueAxis.renderer.line.strokeOpacity = 1;
-                valueAxis.renderer.line.strokeWidth = 3;
-                valueAxis.renderer.line.stroke = series.stroke;
-                valueAxis.renderer.labels.template.fill = series.stroke;
-                valueAxis.renderer.opposite = opposite;
             }
 
-            //initLeadTime
-            createAxisAndSeries("value", "Daily", false, "circle", false);
-            createAxisAndSeries("monthValue", "Monthly", false, "triangle", true);
-            createAxisAndSeries("averageValue", "Average", false, "rectangle", false);
+            function randomNum() {
+                return Math.floor(Math.random() * 256);
+            }
 
-            chart.legend = new am4charts.Legend();
-            chart.cursor = new am4charts.XYCursor();
-        }
+            function randomRGB() {
+                var red = randomNum();
+                var green = randomNum();
+                var blue = randomNum();
+                return red + ", " + green + ", 235";
+            }
 
-        function initFailPercentage(data, groupped) {
-            for (var i = 0; i < groupped.length; i++) {
-                var monthOfYear = Object.keys(groupped[i]).map(function (key) {
+            function getDataSets(data) {
+                const a = Object.entries(data).map(([key, values]) => {
                     return {
-                        month: key,
-                        ...groupped[i][key],
-                    };
-                });
-
-                monthOfYear = monthOfYear.filter(function (key) {
-                    return !isNaN(parseInt(key.month));
-                });
-                monthOfYear.forEach(function (entry) {
-                    var date = new Date(entry[entry.month][0].date);
-                    data.push({
-                        date: date.getFullYear() + "-" + (date.getMonth() + 1) + "-15",
-                        monthValue: entry[entry.month].reduce((a, b) => a + b.value, 0),
-                    });
-                });
+                        label: key,
+                        data: values.map(item => item.totalValue), fill: false,
+                        backgroundColor: [
+                            "rgba(" + randomRGB() + ", 0.2)"
+                        ],
+                        borderColor: [
+                            "rgba(" + randomRGB() + ", 1)"
+                        ],
+                        borderWidth: 5
+                    }
+                })
+
+                return a
             }
 
-            var monthData = data.filter(function (entry) {
-                return !isNaN(parseInt(entry.monthValue))
-            }).sort(function (a, b) {
-                return new Date(a.date) - new Date(b.date);
-            });
-            data.push({
-                date: monthData[0].date,
-                averageValue: monthData[0].monthValue,
-            });
-            data.push({
-                date: monthData[monthData.length - 1].date,
-                averageValue: monthData.reduce((a, b) => a + b.monthValue, 0) / monthData.length,
-            });
-
-            am4core.useTheme(am4themes_animated);
+            function getChartData(chartId, type) {
+                const data = prepareData(chartData[chartId])
+                const activeLabelType = LABEL_TYPES.find(labelType => labelType == type)
 
-            var chart = am4core.create("failPercentageDiv", am4charts.XYChart);
-
-            chart.colors.step = 2;
-            chart.data = data.sort(function (a, b) {
-                return new Date(a.date) - new Date(b.date);
-            });
-
-            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
-            dateAxis.renderer.minGridDistance = 50;
-
-            function createAxisAndSeries(field, name, opposite, selectedBullet, hidden) {
-                var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
-                if (chart.yAxes.indexOf(valueAxis) != 0) {
-                    valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
-                }
-
-                var series = chart.series.push(new am4charts.LineSeries());
-                series.dataFields.valueY = field;
-                series.dataFields.dateX = "date";
-                series.strokeWidth = 3;
-                series.yAxis = valueAxis;
-                series.name = name;
-                series.tooltipText = "%[bold]{valueY}[/]";
-                series.showOnInit = true;
-                series.hidden = hidden;
-
-                var interfaceColors = new am4core.InterfaceColorSet();
-
-                var bullet = {};
-                switch (selectedBullet) {
-                    case "triangle":
-                        bullet = series.bullets.push(new am4charts.Bullet());
-                        bullet.width = 12;
-                        bullet.height = 12;
-                        bullet.horizontalCenter = "middle";
-                        bullet.verticalCenter = "middle";
-
-                        var triangle = bullet.createChild(am4core.Triangle);
-                        triangle.stroke = interfaceColors.getFor("background");
-                        triangle.strokeWidth = 3;
-                        triangle.direction = "top";
-                        triangle.width = 12;
-                        triangle.height = 12;
-                        break;
-                    case "rectangle":
-                        bullet = series.bullets.push(new am4charts.Bullet());
-                        bullet.width = 10;
-                        bullet.height = 10;
-                        bullet.horizontalCenter = "middle";
-                        bullet.verticalCenter = "middle";
-
-                        var rectangle = bullet.createChild(am4core.Rectangle);
-                        rectangle.stroke = interfaceColors.getFor("background");
-                        rectangle.strokeWidth = 3;
-                        rectangle.width = 10;
-                        rectangle.height = 10;
-                        break;
-                    default:
-                        bullet = series.bullets.push(new am4charts.CircleBullet());
-                        bullet.circle.stroke = interfaceColors.getFor("background");
-                        bullet.circle.strokeWidth = 3;
-                        break;
+                return {
+                    labels: activeLabelType == "monthly" ? ALL_MONTHS_SHORT : Object.keys(data[activeLabelType]),
+                    datasets: getDataSets(data[activeLabelType])
                 }
-
-                valueAxis.renderer.line.strokeOpacity = 1;
-                valueAxis.renderer.line.strokeWidth = 3;
-                valueAxis.renderer.line.stroke = series.stroke;
-                valueAxis.renderer.labels.template.fill = series.stroke;
-                valueAxis.renderer.opposite = opposite;
             }
-            //FailPercentage
-            createAxisAndSeries("value", "Daily", false, "circle", false);
-            createAxisAndSeries("monthValue", "Monthly", false, "triangle", true);
-            createAxisAndSeries("averageValue", "Average", false, "rectangle", false);
 
-            chart.legend = new am4charts.Legend();
-            chart.cursor = new am4charts.XYCursor();
-        }
-
-        function initDeploymentFrequencies(data, groupped) {
-            for (var i = 0; i < groupped.length; i++) {
-                var monthOfYear = Object.keys(groupped[i]).map(function (key) {
-                    return {
-                        month: key,
-                        ...groupped[i][key],
-                    };
-                });
-
-                monthOfYear = monthOfYear.filter(function (key) {
-                    return !isNaN(parseInt(key.month));
-                });
-                monthOfYear.forEach(function (entry) {
-                    var date = new Date(entry[entry.month][0].date);
-                    data.push({
-                        date: date.getFullYear() + "-" + (date.getMonth() + 1) + "-15",
-                        monthValue: entry[entry.month].reduce((a, b) => a + b.value, 0),
-                    });
+            function createChart(chartId) {
+                const ctx = document.getElementById(chartId).getContext('2d');
+                charts[chartId] = new Chart(ctx, {
+                    type: 'line',
+                    data: getChartData(chartId, LABEL_TYPES[1]),
+                    options: {
+                        scales: {
+                            yAxes: [{
+                                ticks: {
+                                    beginAtZero: true
+                                }
+                            }]
+                        }
+                    }
                 });
             }
 
-            var monthData = data.filter(function (entry) {
-                return !isNaN(parseInt(entry.monthValue))
-            }).sort(function (a, b) {
-                return new Date(a.date) - new Date(b.date);
-            });
-            data.push({
-                date: monthData[0].date,
-                averageValue: monthData[0].monthValue,
-            });
-            data.push({
-                date: monthData[monthData.length - 1].date,
-                averageValue: monthData.reduce((a, b) => a + b.monthValue, 0) / monthData.length,
-            });
-
-            am4core.useTheme(am4themes_animated);
-
-            var chart = am4core.create("deploymentFrequencyDiv", am4charts.XYChart);
-
-            chart.colors.step = 2;
-            chart.data = data.sort(function (a, b) {
-                return new Date(a.date) - new Date(b.date);
-            });
-
-            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
-            dateAxis.renderer.minGridDistance = 50;
-
-            function createAxisAndSeries(field, name, opposite, selectedBullet, hidden) {
-                var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
-                if (chart.yAxes.indexOf(valueAxis) != 0) {
-                    valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
-                }
-
-                var series = chart.series.push(new am4charts.LineSeries());
-                series.dataFields.valueY = field;
-                series.dataFields.dateX = "date";
-                series.strokeWidth = 3;
-                series.yAxis = valueAxis;
-                series.name = name;
-                series.tooltipText = "{name}: [bold]{valueY}[/]";
-                series.showOnInit = true;
-                series.hidden = hidden;
-
-                var interfaceColors = new am4core.InterfaceColorSet();
-
-                var bullet = {};
-                switch (selectedBullet) {
-                    case "triangle":
-                        bullet = series.bullets.push(new am4charts.Bullet());
-                        bullet.width = 12;
-                        bullet.height = 12;
-                        bullet.horizontalCenter = "middle";
-                        bullet.verticalCenter = "middle";
-
-                        var triangle = bullet.createChild(am4core.Triangle);
-                        triangle.stroke = interfaceColors.getFor("background");
-                        triangle.strokeWidth = 3;
-                        triangle.direction = "top";
-                        triangle.width = 12;
-                        triangle.height = 12;
-                        break;
-                    case "rectangle":
-                        bullet = series.bullets.push(new am4charts.Bullet());
-                        bullet.width = 10;
-                        bullet.height = 10;
-                        bullet.horizontalCenter = "middle";
-                        bullet.verticalCenter = "middle";
-
-                        var rectangle = bullet.createChild(am4core.Rectangle);
-                        rectangle.stroke = interfaceColors.getFor("background");
-                        rectangle.strokeWidth = 3;
-                        rectangle.width = 10;
-                        rectangle.height = 10;
-                        break;
-                    default:
-                        bullet = series.bullets.push(new am4charts.CircleBullet());
-                        bullet.circle.stroke = interfaceColors.getFor("background");
-                        bullet.circle.strokeWidth = 3;
-                        break;
-                }
-
-                valueAxis.renderer.line.strokeOpacity = 1;
-                valueAxis.renderer.line.strokeWidth = 3;
-                valueAxis.renderer.line.stroke = series.stroke;
-                valueAxis.renderer.labels.template.fill = series.stroke;
-                valueAxis.renderer.opposite = opposite;
+            function updateChart(chartId, labelType) {
+                charts[chartId].config.data = getChartData(chartId, labelType)
+                charts[chartId].update()
             }
 
-            //initDeploymentFrequencies
-            createAxisAndSeries("value", "Daily", false, "circle", false);
-            createAxisAndSeries("monthValue", "Monthly", false, "triangle", true);
-            createAxisAndSeries("averageValue", "Average", false, "rectangle", false);
-
-            chart.legend = new am4charts.Legend();
-            chart.cursor = new am4charts.XYCursor();
-        }
+            createChart("deploymentFrequencyChart")
 
-        function groupBy(data, isDf) {
-            let res = {};
-
-            let fn = (o, year, month, array) => {
-                o[year][month] = {
-                    [month]: data.filter(({date: d}) => (year + "-" + month) === d.slice(0, 7))
-                };
-            };
-
-            for (var i = 0; i < data.length; i++) {
-                if (isDf && data.length > i + 1 && data[i].date === data[i + 1].date) {
-                    data[i].value += data[i + 1].value;
-                }
-
-                let [year, month] = data[i].date.match(/\d+/g);
-                if (!res[year]) res[year] = {};
-                fn(res, year, month, data);
-
-                if (isDf && data.length > i + 1 && data[i].date === data[i + 1].date) {
-                    data.splice(i + 1, 1);
-                    i--;
-                }
-            }
-
-            return Object.keys(res).map(function (key) {
-                return {
-                    year: parseInt(key),
-                    ...res[key]
-                };
+            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)
+                })
             });
-        }
-    </script>
+        })
+        </script>
 
-    <style>
+        <style>
         body {
             font-family: 'Rubik', sans-serif;
         }
 
         div {
             width: 100%;
-            height: 300px;
             max-width: 100%;
         }
 
@@ -574,29 +216,60 @@ func GetHtml() string {
             margin-left: 10px;
             font-weight: 400;
         }
-    </style>
-</head>
-<body>
-<div class="container">
-    <h4 class="title">four-key Metrics</h4>
-    <h6 class="subtitle">{repositoryName} <span>|</span> {teamName} <span>|</span> {startDate} - {endDate}</h6>
 
-    <h6 class="chart-title">Deployment Frequencies</h6>
-    <div id="deploymentFrequencyDiv"></div>
+        canvas {
+            margin: 50px 0;
+        }
 
-    <h6 class="chart-title">Lead Times</h6>
-    <div id="leadTimeDiv"></div>
+        .button-wrapper {
+            margin: auto;
+            width: max-content;
+        }
 
-    <h6 class="chart-title">Mean Times</h6>
-    <div id="meanTimeDiv"></div>
+        .btn-chart {
+            appearance: none;
+            border: 1px solid #767676;
+            background-color: transparent;
+            color: #767676;
+            padding: 7px 14px;
+            margin: 0 5px;
+            outline: none;
+            cursor: pointer;
+        }
 
-    <h6 class="chart-title">Fail Percentages</h6>
-    <div id="failPercentageDiv"></div>
-</div>
+        .btn-chart:hover {
+            border: 1px solid #2185d0;
+            color: #2185d0;
+        }
+    </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>
 </body>
 </html>
 
-
-
 	`
 }

From a7b9bba480d6dbd4911e739fd294ad929934f637 Mon Sep 17 00:00:00 2001
From: Aslihan <aslihanozfidan@gmail.com>
Date: Wed, 5 Aug 2020 00:15:17 +0300
Subject: [PATCH 2/3] Add weekly chart

---
 template/template.go | 57 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/template/template.go b/template/template.go
index a409a41..7daaace 100644
--- a/template/template.go
+++ b/template/template.go
@@ -33,12 +33,24 @@ func GetHtml() string {
                 deploymentFrequencyChart: ""
             }
 
+            
+            function getWeek(date) {
+                const dayNumber = (date.getDay() + 6) % 7;
+                date.setDate(date.getDate() - dayNumber + 3);
+
+                let tempDate = new Date(date.getFullYear(), 0, 4);
+                let dayDiff = (date - tempDate) / 86400000;
+                return 1 + Math.ceil(dayDiff / 7);
+            }
+
             function prepareData(data) {
                 let newData = Object.assign([], data)
                 let months = []
                 let years = []
+                let weeks = []
                 let days = []
                 let monthly = []
+                let weekly = []
 
                 newData.sort(function (a, b) {
                     return new Date(a.date) - new Date(b.date);
@@ -50,6 +62,8 @@ func GetHtml() string {
                     const month = ALL_MONTHS_SHORT[date.getMonth()]
                     const day = date.getDate()
                     const year = date.getFullYear()
+                    const week = getWeek(date)
+
                     if (!item.month) {
                         item.month = month
                     }
@@ -59,6 +73,9 @@ func GetHtml() string {
                     if (!item.year) {
                         item.year = year
                     }
+                    if (!item.week) {
+                        item.week = week
+                    }
                     if (!days.includes(day)) {
                         days.push(day)
                     }
@@ -68,6 +85,10 @@ func GetHtml() string {
                     if (!years.includes(year)) {
                         years.push(year)
                     }
+                    if (!weeks.includes(week)) {
+                        weeks.push({ week, year })
+                    }
+
                 });
 
                 years.forEach(year => {
@@ -75,10 +96,24 @@ func GetHtml() string {
                         monthly[year] = []
                     }
 
-                    let totalValue = 0
-                    totalValue = newData.filter(item => item.year == year).reduce(function getSum(total, item) {
-                        return total + parseInt(item.value);
-                    }, totalValue)
+                    if (!weekly.includes(year)) {
+                        weekly[year] = []
+                        for (let i = 0; i < 52; i++) {
+                            weekly[year].push({
+                                label: i + 1,
+                                totalValue: 0
+                            })
+                        }
+                    }
+
+                    weeks.forEach((week) => {
+                        totalValue = 0
+                        let totalWeeks = weeks.filter(item =>
+                            item.week == week.week && year == week.year
+                        )
+                        weekly[year][week.week - 1].totalValue = totalWeeks.length
+                    });
+
 
                     ALL_MONTHS_SHORT.forEach(mon => {
                         totalValue = 0
@@ -90,14 +125,14 @@ func GetHtml() string {
                             label: mon,
                             totalValue
                         })
-
                     });
-
                 });
 
+
                 return {
                     data: newData,
-                    monthly
+                    monthly,
+                    weekly
                 }
             }
 
@@ -109,11 +144,11 @@ func GetHtml() string {
                 var red = randomNum();
                 var green = randomNum();
                 var blue = randomNum();
-                return red + ", " + green + ", 235";
+                return red + ", " + green + ", " + blue;
             }
 
             function getDataSets(data) {
-                const a = Object.entries(data).map(([key, values]) => {
+                return Object.entries(data).map(([key, values]) => {
                     return {
                         label: key,
                         data: values.map(item => item.totalValue), fill: false,
@@ -126,8 +161,6 @@ func GetHtml() string {
                         borderWidth: 5
                     }
                 })
-
-                return a
             }
 
             function getChartData(chartId, type) {
@@ -135,7 +168,7 @@ func GetHtml() string {
                 const activeLabelType = LABEL_TYPES.find(labelType => labelType == type)
 
                 return {
-                    labels: activeLabelType == "monthly" ? ALL_MONTHS_SHORT : Object.keys(data[activeLabelType]),
+                    labels: Object.values(data[activeLabelType])[0].map(item => item.label),
                     datasets: getDataSets(data[activeLabelType])
                 }
             }

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 3/3] 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>