*

src/js/app.js

@@ -7,6 +7,7 @@ import {
   AreaChartWidget,
   PieChartWidget,
   StackedBarChartWidget,
+  SimpleGroupedBarChartWidget
 } from "@polaris/dashboard-sdk";
 import { CourseRatingChart } from "./custom-charts/courseRatingChart";
 
@@ -28,7 +29,14 @@ const subGrid = [
 /**
  * Setup initial widget position and sizes
  */
-const widgets_confgg = [
+const widgets_confgg = [  
+  {
+    x: 4,
+    y: 0,
+    w: 4,
+    h: 8,
+    widgetId: "first-widget",
+  },
   {
     x: 4,
     y: 0,
@@ -86,6 +94,7 @@ const widgets_confgg = [
     widgetId: "eleventh-widget",
   },
   { x: 0, y: 0, w: 8, h: 4, subGrid: { children: subGrid, id: "sub1_grid", class: "subgrid" } },
+
 ];
 
 /**
@@ -111,6 +120,35 @@ const showErrorModal = (message) => {
   modal.show();
 };
 
+
+const changeMeToDataFromTheRightsEngine = {
+  "2023-04-28": {
+      "accessed": 98,
+      "started": 7,
+      "graded": 7,
+      "submitted": 7,
+      "answered": 38,
+      "leftUnanswered": 4
+  },
+  "2023-04-29": {
+      "accessed": 2
+  },
+  "2023-04-30": {
+      "accessed": 1
+  },
+  "2023-05-01": {
+      "accessed": 1
+  },
+  "2023-05-02": {
+      "accessed": 45,
+      "started": 4,
+      "submitted": 4,
+      "answered": 16,
+      "leftUnanswered": 8,
+      "graded": 2
+  }
+}
+
 /**
  *  Built widgets from results data.
  * @param {*} data
@@ -118,6 +156,11 @@ const showErrorModal = (message) => {
  */
 const buildWidgets = (data) => {
   const widgets = {
+    "first-widget": new SimpleGroupedBarChartWidget(
+      "Grouped Statements H5P",
+      "",
+      changeMeToDataFromTheRightsEngine
+    ),
     "second-widget": new BarChartWidget(
       "Statements H5P",
       data["count_h5p_statements"]?.description,
@@ -265,6 +308,8 @@ const onInit = () => {
   /**
    * Get analytics engine results and render widgets
    */
+  // uncomment to show diagrams without data
+  //setupGrid({})
   getResult(token, url)
     .then(setupGrid)
     .catch((err) => {