View datapoint values

static/css/datapoints.css

@@ -109,6 +109,17 @@ label {
 #datapoints div {
   white-space: nowrap;
 }
+#datapoints .icons {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+#values {
+  display: grid;
+  grid-template-columns: repeat(2, min-content);
+  gap: 16px;
+  white-space: nowrap;
+}
 .widgets {
   display: grid;
   grid-template-columns: min-content 1fr;

static/css/main.css

@@ -101,7 +101,6 @@ label {
   display: grid;
   grid-template-areas: "menu content";
   grid-template-columns: 64px 1fr;
-  grid-template-rows: 100% 100%;
   height: 100vh;
 }
 #menu {

static/images/values.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="18.500002"
+   height="15"
+   viewBox="0 0 4.8947921 3.9687501"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
+   sodipodi:docname="points.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="-33"
+     inkscape:cy="-79"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1093"
+     inkscape:window-height="1404"
+     inkscape:window-x="1463"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d6d6d6"
+     showborder="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-81.359375,-211.79896)">
+    <title
+       id="title1">format-list-bulleted</title>
+    <path
+       d="m 82.55,211.93125 h 3.704167 v 0.52917 H 82.55 v -0.52917 m 0,2.11667 v -0.52917 h 3.704167 v 0.52917 H 82.55 m -0.79375,-2.24896 a 0.396875,0.396875 0 0 1 0.396875,0.39687 0.396875,0.396875 0 0 1 -0.396875,0.39688 0.396875,0.396875 0 0 1 -0.396875,-0.39688 0.396875,0.396875 0 0 1 0.396875,-0.39687 m 0,1.5875 a 0.396875,0.396875 0 0 1 0.396875,0.39687 0.396875,0.396875 0 0 1 -0.396875,0.39688 0.396875,0.396875 0 0 1 -0.396875,-0.39688 0.396875,0.396875 0 0 1 0.396875,-0.39687 m 0.79375,2.24896 v -0.52917 h 3.704167 v 0.52917 H 82.55 m -0.79375,-0.66146 a 0.396875,0.396875 0 0 1 0.396875,0.39687 0.396875,0.396875 0 0 1 -0.396875,0.39688 0.396875,0.396875 0 0 1 -0.396875,-0.39688 0.396875,0.396875 0 0 1 0.396875,-0.39687 z"
+       id="path1"
+       style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#fb4934;fill-opacity:1;stroke-width:0.384845;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" />
+  </g>
+</svg>

static/less/datapoints.less

@@ -13,6 +13,19 @@
 	div {
 		white-space: nowrap;
 	}
+
+	.icons {
+		display: flex;
+		gap: 12px;
+		align-items: center;
+	}
+}
+
+#values {
+	display: grid;
+	grid-template-columns: repeat(2, min-content);
+	gap: 16px;
+	white-space: nowrap;
 }
 
 .widgets {

static/less/main.less

@@ -4,8 +4,6 @@
 	display: grid;
 	grid-template-areas: "menu content";
 	grid-template-columns: 64px 1fr;
-	grid-template-rows:
-		100% 100%;
 	height: 100vh;
 }