Chart.js HeatMap on Index

aceberg · Dec 23, 2023 · 5d8a967 · 5d8a967
1 parent 7036a9c
commit 5d8a967
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 7 deletions.
diff --git a/internal/models/models.go b/internal/models/models.go
@@ -52,10 +52,11 @@ type HeatMapData struct {
 
 // GuiData - web gui data
 type GuiData struct {
-	Config   Conf
-	Themes   []string
-	ExData   AllExData
-	GroupMap map[string]string
-	OneEx    Exercise
-	HeatMap  []HeatMapData
+	Config    Conf
+	Themes    []string
+	ExData    AllExData
+	GroupMap  map[string]string
+	OneEx     Exercise
+	HeatMap   []HeatMapData
+	HeatColor string
 }
diff --git a/internal/web/index.go b/internal/web/index.go
@@ -20,6 +20,8 @@ func indexHandler(c *gin.Context) {
 	guiData.Config = appConfig
 	guiData.ExData = exData
 	guiData.GroupMap = createGroupMap()
+	guiData.HeatMap = generateHeatMap()
+	guiData.HeatColor = "#03a70c"
 
 	// Sort exercises by Place
 	sort.Slice(guiData.ExData.Exs, func(i, j int) bool {

diff --git a/internal/web/public/js/heatmap.js b/internal/web/public/js/heatmap.js
@@ -0,0 +1,103 @@
+
+function lowerData(heat) {
+    var ldata = [];
+    let arrayLength = heat.length;
+    for (let i = 0 ; i < arrayLength; i++) {
+        let val = heat[i];
+        ldata.push({
+            x: val.X,
+            y: val.Y,
+            d: val.D,
+            v: val.V
+        });
+    }
+    console.log('LDATA =', ldata);
+    return ldata;
+};
+
+function makeChart(heat, hcolor) {
+    let ldata = lowerData(heat);
+    var ctx = document.getElementById('matrix-chart').getContext('2d');
+    window.myMatrix = new Chart(ctx, {
+        type: 'matrix',
+        data: {
+            datasets: [{
+                label: 'Heatmap',
+                data: ldata,
+                backgroundColor(context) {
+                    const value = context.dataset.data[context.dataIndex].v;
+                    const alpha = value / 7;
+                    return Chart.helpers.color(hcolor).alpha(alpha).rgbString();
+                },
+                borderColor(context) {
+                    const value = context.dataset.data[context.dataIndex].v;
+                    const alpha = 0.5;
+                    return Chart.helpers.color('grey').alpha(alpha).rgbString();
+                },
+                borderWidth: 1,
+                hoverBackgroundColor: 'lightgrey',
+                hoverBorderColor: 'grey',
+                width() {
+                    return 12;
+                },
+                height() {
+                    return 12;
+                }
+            }]
+        },
+        options: {
+            onClick: (e) => {
+                const res = window.myMatrix.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
+
+                console.log('res =', res[0].element.$context.raw.d);
+
+                // window.location.href = "/diary_show?from="+dayD+"&to="+dayD+"";
+            },
+            plugins: {
+                legend: false,
+                tooltip: {
+                    callbacks: {
+                        title() {
+                            return '';
+                        },
+                        label(context) {
+                            const v = context.dataset.data[context.dataIndex];
+                            return [v.v, v.d];
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    type: 'category',
+                    offset: true,
+                    reverse: false,
+                    ticks: {
+                        display: false
+                    },
+                    border: {
+                        display: false
+                    },
+                    grid: {
+                        display: false
+                    }
+                },
+                y: {
+                    type: 'category',
+                    labels: ['Mo', 'Tu', 'We','Th','Fr','Sa','Su'],
+                    reverse: false,
+                    ticks: {
+                        stepSize: 1,
+                        display: true
+                    },
+                    border: {
+                        display: false
+                    },
+                    grid: {
+                        display: false
+                    }
+                },
+            }
+        }
+    });
+};    
diff --git a/internal/web/templates/header.html b/internal/web/templates/header.html
@@ -16,6 +16,9 @@
     <link href="https://cdn.jsdelivr.net/gh/aceberg/aceberg-bootswatch-fork@v5/dist/{{ .Config.Theme }}/bootstrap.min.css" rel="stylesheet">
     <!-- JavaScript Bundle with Popper -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 </head>
 <body>
     <nav class="navbar navbar-expand-sm navbar-dark bg-primary">

diff --git a/internal/web/templates/index.html b/internal/web/templates/index.html
@@ -1,10 +1,24 @@
 {{ define "index.html" }}
 </head>
+<script src="./fs/public/js/heatmap.js"></script>
 <script src="./fs/public/js/index.js"></script>
 <link rel="stylesheet" type="text/css" href="./fs/public/css/index.css" />
-<body onload='setFormDateSets({{ .ExData.Sets }})'>
+<!-- <body onload='setFormDateSets({{ .ExData.Sets }})'> -->
+<body>
 <br>
 <div class="container">
+    <div class="row">
+      <div class="col">
+        <div class="card border-primary">
+          <div class="card-body">
+          <div class="chart-container">
+              <canvas id="matrix-chart" style="max-height: 100px; width: 820px;" class="m-auto">
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+    <br>
     <div class="row">
         <div class="col">
             <div class="accordion">
@@ -85,5 +99,10 @@ <h5 class="modal-title">Exercise details</h5>
         </div>
     </div>
 </div>
+
+<script>
+  setFormDateSets({{ .ExData.Sets }});
+  makeChart({{ .HeatMap }}, {{ .HeatColor }});
+</script>
 {{ template "footer.html" }}
 {{ end }}