Added Elements

- Added primitive graph element
- Changed data

glob/script.js

@@ -73,6 +73,53 @@ function setTitle(title) {
     $('.navigationBar .title').html("<span>" + title + "</span>");
 }
 
+/**
+ * Draws a graph in a canvas element
+ * @param element
+ * @param data
+ * @param dimensions
+ * TODO: Draw background grid and x-values and control it via dimensions (rename it to options)
+ */
+function drawGraph(element, data, dimensions) {
+    let ctx = element.getContext('2d');
+    let canvWidth = element.width;
+    let canvHeight = element.height;
+    let xData = [];
+    let yData = [];
+    if (!dimensions) dimensions = {};
+
+    ctx.strokeStyle = $(element).css('color');
+
+    for (let dt of data) {
+        xData.push(dt[0]);
+        yData.push(dt[1]);
+    }
+    let xMax = dimensions.xMax || Math.max.apply(Math, xData);
+    let xMin = dimensions.xMin || Math.min.apply(Math, xData);
+    let yMax = dimensions.yMax || Math.max.apply(Math, yData);
+    let yMin = dimensions.yMin || Math.min.apply(Math, yData);
+
+    let xStep = canvWidth / (xMax - xMin);
+    let yStep = canvHeight / (yMax - yMin);
+
+    console.log(`yMax: ${yMax}; yMin: ${yMin}; ${JSON.stringify(dimensions)}`);
+
+    let x = 0;
+    let y = canvHeight;
+    if (data.length > 0) {
+        x = data[0][0];
+        y = data[0][1];
+    }
+    for (let dt of data) {
+        ctx.moveTo(x, y);
+        x = dt[0] * xStep;
+        y = canvHeight - ((dt[1] - yMin) * yStep);
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        console.log(x, y);
+    }
+}
+
 // -- Events --
 // Define what happens onLoad
 $(document).ready(function(){

glob/style/elements.sass

@@ -144,3 +144,10 @@
       height: calc(50% - 37.5px)
       left: 0
       overflow: auto
+    .graph
+      color: $cOnPrimary
+      position: absolute
+      left: $sPadding
+      top: 20%
+      height: calc(80% - 12.5px)
+      width: calc(100% - 25px)

res/html/data.htm

@@ -1,15 +1,15 @@
-<h1> Data </h1>
-<div id="app">
-	<div style="height: 100px; width: 100%">
-		<svg viewBox="0 0 100 100" style="height: 100%; width: 100%">
-			<polygon
-					v-bind:points="temperatureData">
-			</polygon>
-		</svg>
+<div class="panelContainer">
+	<div class="panel" style="width: 50%">
+		<span class="title">
+			Title
+		</span>
+		<canvas class="graph">
+
+		</canvas>
 	</div>
 </div>
-<script src="/data.js" type="text/javascript">
-</script>
 <script type="text/javascript">
 	setTitle('Data')
 </script>
+<script src="/data.js" type="text/javascript">
+</script>

res/scripts/data.js

@@ -1,28 +1,4 @@
-function getFormattedData(dataArray) {
-  let arrData = ["0,100"];
-  for (let d of dataArray) {
-    arrData.push(d[0]+","+(100-d[1]));
-  }
-  arrData.push("100,100");
-  return arrData.join(" ");
-}
-
-new Vue({
-  el: '#app',
-  data: {
-    temperatureData: [1,2,3,4],
-    percentData: [2,3,4,5],
-    labels: ["1", "2", "3", "4", "5"],
-    chartOptions: {
-      responsive: true,
-      maintainAspectRatio: false
-    }
-  },
-  mounted() {
-    let self = this;
-    $.getJSON('cpu.json', d => {
-      self.temperatureData = getFormattedData(d['100temp']),
-      self.percentData = getFormattedData(d['100perc'])
-    })
-  }
-})
+$.getJSON('cpu.json', data =>{
+    let c = document.querySelector('.graph');
+    drawGraph(c, data['100temp'], {yMax: 50, yMin: "0"});
+});