Made a way better graph

Author: Liototo

package.json

@@ -49,6 +49,7 @@
     "watch": "lerna run watch"
   },
   "devDependencies": {
+    "@types/react-plotly.js": "^2.6.3",
     "@typescript-eslint/eslint-plugin": "~5.55.0",
     "@typescript-eslint/parser": "~5.55.0",
     "eslint": "~8.36.0",
@@ -65,5 +66,8 @@
     "stylelint-prettier": "^3.0.0",
     "typedoc": "~0.23.28",
     "typescript": "~5.0.4"
+  },
+  "dependencies": {
+    "react-plotly.js": "^2.6.0"
   }
 }

packages/collaboration/src/activeusersdisplay.ts

@@ -6,7 +6,7 @@ class ActiveUsersDisplay extends Widget {
     constructor(cell: Cell) {
         super();
 
-        this.addClass('active-users-display');
+        this.addClass('jp-active-users-display');
 
         this.updateContent(cell);
     }
@@ -25,7 +25,7 @@ class ActiveUsersDisplay extends Widget {
 
 export function addDisplay(cell: Cell) {
 
-    const display = cell.node.getElementsByClassName('active-users-display')[0];
+    const display = cell.node.getElementsByClassName('jp-active-users-display')[0];
     const activeUsersDisplay = new ActiveUsersDisplay(cell);
 
 

packages/collaboration/src/activitydisplay.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { INotebookTracker, Notebook, NotebookPanel } from '@jupyterlab/notebook';
+import Plot from 'react-plotly.js';
 
 export class ActivityDisplay extends ReactWidget {
 
@@ -68,11 +69,22 @@ const ActivityDisplayComponent: React.FC<ActivityDisplayComponentProps> = ({trac
         }
 
     }, [tracker]);
-
-    const graph = state.map((count, index) => (
-        <div key={index} style={{height: '8px', width: count*5, backgroundColor: 'green', margin: '2px'}}/>
-    ))
-
-    return <div>{graph}</div>;
+    
+    const data = [{
+        y: state.map((_, index) => index + 1),
+        x: state,
+        type: 'bar',
+        orientation: 'h',
+        marker: {color: 'green'}
+    }] as Plotly.Data[];
+
+    const layout = {
+        width: 300,
+        height: 500,
+        xaxis: {title: 'Active users'},
+        yaxis: {title: 'Cell', autorange: 'reversed' as const}
+    };
+
+    return <Plot className='jp-graph' data={data} layout={layout}/>
 
 }

packages/collaboration/style/sidepanel.css

@@ -334,6 +334,14 @@
 /************************************************************
                 Activity tracking
 *************************************************************/
-.active-users-display {
+.jp-active-users-display {
   padding-left: 75px;
+}
+
+.jp-graph {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  margin-top: 3px;
+  margin-left: 3px;
 }