Add overview page

client/pie-chart-component.js

@@ -0,0 +1,120 @@
+"use strict";
+
+import m from "mithril";
+
+const drawChart = function(chartData) {
+  let slices = chartData.slices;
+  let total = Array.from(Object.values(chartData.slices)).reduce(
+    (a, s) => a + s.count,
+    0
+  );
+  let legend = [];
+  let paths = [];
+  let links = [];
+  let currentProgressPercentage = 0;
+  let startX = Math.cos(2 * Math.PI * currentProgressPercentage) * 100;
+  let startY = Math.sin(2 * Math.PI * currentProgressPercentage) * 100;
+  let endX, endY;
+
+  for (let slice of Object.values(slices)) {
+    let percent = total > 0 ? slice.count / total : 0;
+    legend.push(
+      m(".legend-line", [
+        m("span.color", {
+          style: `background-color: ${slice.color} !important;`
+        }),
+        `${slice.label}: `,
+        m(
+          "a",
+          {
+            href: `/#!/devices/?${m.buildQueryString({
+              filter: slice.filter
+            })}`
+          },
+          slice.count
+        ),
+        ` (${(percent * 100).toFixed(2)}%)`
+      ])
+    );
+
+    if (percent > 0) {
+      currentProgressPercentage += percent;
+      endX = Math.cos(2 * Math.PI * currentProgressPercentage) * 100;
+      endY = Math.sin(2 * Math.PI * currentProgressPercentage) * 100;
+      let isBigArc = percent > 0.5 ? 1 : 0;
+
+      let sketch =
+        `M ${startX} ${startY} ` + // Move to the starting point
+        `A 100 100 0 ${isBigArc} 1 ${endX} ${endY} ` + // Draw an Arc from starting point to ending point
+        `L 0 0 z`; // complete the shape by drawing a line to the center of circle
+
+      startX = endX;
+      startY = endY;
+
+      paths.push(
+        m("path", {
+          d: sketch,
+          fill: slice.color
+        })
+      );
+
+      let percentageX =
+        Math.cos(2 * Math.PI * (currentProgressPercentage - percent / 2)) * 50;
+      let percentageY =
+        Math.sin(2 * Math.PI * (currentProgressPercentage - percent / 2)) * 50;
+
+      links.push(
+        m(
+          "a",
+          {
+            href: `/#!/devices/?${m.buildQueryString({
+              filter: slice.filter
+            })}`
+          },
+          [
+            m("path", {
+              d: sketch,
+              "fill-opacity": 0
+            }),
+            m(
+              "text",
+              {
+                x: percentageX,
+                y: percentageY,
+                "dominant-baseline": "middle",
+                "text-anchor": "middle"
+              },
+              `${(percent * 100).toFixed(2)}%`
+            )
+          ]
+        )
+      );
+    }
+  }
+
+  legend.push(m("span.legend-total", `Total: ${total}`));
+
+  return m("div", { class: "pie-chart" }, [
+    m(
+      "svg",
+      {
+        // Adding 2 as padding; strokes must not be more than 2
+        viewBox: "-102 -102 204 204",
+        width: "204px",
+        height: "204px",
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink"
+      },
+      paths.concat(links)
+    ),
+    m(".legend", legend)
+  ]);
+};
+
+const component = {
+  view: vnode => {
+    return drawChart(vnode.attrs.chart);
+  }
+};
+
+export default component;