MG-93 - Add support for creating charts (#103)

* add charts support Signed-off-by: Musilah <[email protected]> * add bar and line charts Signed-off-by: Musilah <[email protected]> * add charts subdirectory Signed-off-by: Musilah <[email protected]> * fox service.go Signed-off-by: Musilah <[email protected]> * add dynamicdatachartmodal Signed-off-by: Musilah <[email protected]> * add images to widgets Signed-off-by: Musilah <[email protected]> * add chart widget images Signed-off-by: Musilah <[email protected]> * fix: remove copyright images Signed-off-by: Musilah <[email protected]> * remove comment from code Signed-off-by: ianmuchyri <[email protected]> --------- Signed-off-by: Musilah <[email protected]> Signed-off-by: ianmuchyri <[email protected]> Co-authored-by: ianmuchyri <[email protected]>
absmach · Feb 5, 2024 · c7ff4ca · c7ff4ca
1 parent c93e7c6
commit c7ff4ca
Show file tree

Hide file tree

Showing 18 changed files with 1,789 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.4",
     "prettier-plugin-go-template": "^0.0.15"
   }
 }
diff --git a/ui/charts.go b/ui/charts.go
@@ -0,0 +1,85 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+package ui
+
+type Item struct {
+	Id      int    `json:"id"`
+	Title   string `json:"title"`
+	Content string `json:"content"`
+	Image   string `json:"image"`
+	Widget  string `json:"widget"`
+}
+
+func CreateItem() []Item {
+	items := []Item{
+		{
+			Title:   "Time Series Line Chart",
+			Content: "This is simple cartesian axis time series line chart",
+			Image:   "https://www.jqueryscript.net/images/Simple-Canvas-Based-Line-Chart-Plugin-For-jQuery-Topup.jpg",
+			Widget:  "lineChart",
+		},
+		{
+			Title:   "Time Series Bar Chart",
+			Content: "This is simple cartesian axis time series bar chart",
+			Image:   "https://sigma-docs-screenshots.s3.us-west-2.amazonaws.com/Workbooks/Visualizations/Build+a+Bar+Chart/bar-chart.png",
+			Widget:  "barChart",
+		},
+		{
+			Title:   "Simple Analogue Gauge",
+			Content: "This is a radial analogue gauge",
+			Image:   "https://www.infragistics.com/products/indigo-design/help/images/[email protected]",
+			Widget:  "gauge",
+		},
+		{
+			Title:   "Pie Chart",
+			Content: "This is a pie chart",
+			Image:   "https://earthly.dev/blog/generated/assets/images/stop-using-pie-charts/pie-chart-800-a835136f5.png",
+			Widget:  "pieChart",
+		},
+		{
+			Title:   "Donut Chart",
+			Content: "This is a donut chart",
+			Image:   "https://media.geeksforgeeks.org/wp-content/uploads/20230322231450/Rplot07.png",
+			Widget:  "donut",
+		},
+		{
+			Title:   "Speed Gauge",
+			Content: "This is an analogue speed gauge",
+			Image:   "https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/5/b/5b953b24910ffe51767d97af48d8d6c9125039a8.png",
+			Widget:  "speedGauge",
+		},
+		{
+			Title:   "Range Chart",
+			Content: "This is a range chart",
+			Image:   "https://storage.googleapis.com/studio_v_0_0_2/HVUMTI2S/_desktop_preview_1655159666002.png",
+			Widget:  "stackedLineChart",
+		},
+		{
+			Title:   "Area Line Chart",
+			Content: "This is a stacked area line chart",
+			Image:   "https://i.stack.imgur.com/vTgJy.gif",
+			Widget:  "areaLineChart",
+		},
+		{
+			Title:   "Temperature Gauge",
+			Content: "This is an analogue temperature gauge",
+			Image:   "https://storage.googleapis.com/support-forums-api/attachment/thread-7015968-5764838897040940014.png",
+			Widget:  "tempGauge",
+		},
+		{
+			Title:   "Bar and Line Chart",
+			Content: "This is a dynamic data bar and line chart",
+			Image:   "https://i.stack.imgur.com/tYgjo.png",
+			Widget:  "dynamicDataChart",
+		},
+		{
+			Title:   "Horizontal Bar Chart",
+			Content: "This is a horizontal bar chart",
+			Image:   "https://datavizproject.com/wp-content/uploads/types/Bar-Chart-Horizontal.png",
+			Widget:  "horizontalBarChart",
+		},
+	}
+
+	return items
+}
diff --git a/ui/jsonObject.go b/ui/jsonObject.go
diff --git a/ui/service.go b/ui/service.go
@@ -28,7 +28,8 @@ import (
 )
 
 const (
-	templateDir             = "ui/web/templates"
+	templatesDir            = "ui/web/templates"
+	chartTemplatesDir       = "ui/web/templates/charts"
 	enabled                 = "enabled"
 	statePending            = "pending"
 	statusAll               = "all"
@@ -125,11 +126,22 @@ var (
 		"invitations",
 
 		"dashboard",
+	}
 
-		// Modals
+	chartTemplates = []string{
 		"linechartmodal",
 		"gaugemodal",
+		"barchartmodal",
+		"piechartmodal",
+		"donutmodal",
+		"speedgaugemodal",
+		"tempgaugemodal",
+		"stackedlinechartmodal",
+		"arealinechartmodal",
+		"horizontalbarchartmodal",
+		"dynamicdatachartmodal",
 	}
+
 	ErrToken                = errors.New("failed to create token")
 	ErrTokenRefresh         = errors.New("failed to refresh token")
 	ErrFailedCreate         = errors.New("failed to create entity")
@@ -2433,7 +2445,10 @@ func parseTemplates(mfsdk sdk.SDK, templates []string) (tpl *template.Template,
 
 	var tmplFiles []string
 	for _, value := range templates {
-		tmplFiles = append(tmplFiles, templateDir+"/"+value+".html")
+		tmplFiles = append(tmplFiles, templatesDir+"/"+value+".html")
+	}
+	for _, value := range chartTemplates {
+		tmplFiles = append(tmplFiles, chartTemplatesDir+"/"+value+".html")
 	}
 	tpl, err = tpl.ParseFiles(tmplFiles...)
 	if err != nil {

diff --git a/ui/web/static/js/dashboards.js b/ui/web/static/js/dashboards.js
@@ -20,7 +20,9 @@ function initGrid() {
 
 function saveLayout() {
   const itemData = grid.getItems().map((item) => ({
-    innerHTML: item.getElement().innerHTML,
+    innerHTML: item._element.innerHTML,
+    widgetID: item._element.children[1].children[0].id,
+    widgetScript: item._element.children[2].innerHTML,
   }));
 
   const gridState = {
@@ -63,6 +65,11 @@ function loadLayout(savedLayout) {
       const newItem = document.createElement("div");
       newItem.className = "item";
       newItem.innerHTML = itemData.innerHTML.trim();
+      var scriptTag = document.createElement("script");
+      scriptTag.type = "text/javascript";
+      scriptTag.defer = true;
+      scriptTag.innerHTML = itemData.widgetScript;
+      newItem.appendChild(scriptTag);
       const item = grid.add(newItem);
     });
 
@@ -92,6 +99,11 @@ function editGrid(grid) {
         const newItem = document.createElement("div");
         newItem.className = "item";
         newItem.innerHTML = itemData.innerHTML.trim();
+        var scriptTag = document.createElement("script");
+        scriptTag.type = "text/javascript";
+        scriptTag.defer = true;
+        scriptTag.innerHTML = itemData.widgetScript;
+        newItem.appendChild(scriptTag);
         const item = grid.add(newItem);
       });
       grid.layout(gridState.layout);