chore: add userflow integration to dashboard filter panel, drag-n-dro…

…p chart library, and wearables dashboard
luzmo-official · Aug 29, 2024 · 41149dc · 41149dc
1 parent 6acdbfe
commit 41149dc
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 7 deletions.
diff --git a/dashboard-filter-panel/package-lock.json b/dashboard-filter-panel/package-lock.json
diff --git a/dashboard-filter-panel/package.json b/dashboard-filter-panel/package.json
@@ -47,6 +47,7 @@
     "thememirror": "^2.0.1",
     "three": "^0.164.1",
     "tslib": "^2.3.0",
+    "userflow.js": "^2.12.1",
     "util": "^0.12.5",
     "zone.js": "~0.14.0"
   },

diff --git a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.html b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar>
   <div class="flex w-full items-center">
-    <div class="grow flex justify-center items-center">
+    <div class="grow flex justify-center items-center userflow-filter-panel">
       <span class="mr-3">Dashboard with filter panel</span>
     </div>
 

diff --git a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.scss b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.scss
@@ -6,4 +6,6 @@
 }
 .dashboard-with-filter-panel {
   width: 100%;
-}
+}
+/* Userflow is only necessary for the Luzmo hosted showcases */
+.userflow-filter-panel {}
diff --git a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.ts b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.ts
@@ -14,6 +14,11 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { DashboardFilterPanelSettingsDialogComponent } from './settings-dialog/settings-dialog.component';
 
+// Userflow is only necessary for the Luzmo hosted showcases
+import userflow from 'userflow.js'
+userflow.init('ct_65z5oczamna45bveai47cpcbpe');
+userflow.identifyAnonymous();
+
 @Component({
   selector: 'app-dashboard-filter-panel',
   standalone: true,

diff --git a/drag-n-drop-chart-library/package-lock.json b/drag-n-drop-chart-library/package-lock.json
diff --git a/drag-n-drop-chart-library/package.json b/drag-n-drop-chart-library/package.json
@@ -14,6 +14,7 @@
     "react-dom": "^18.3.1",
     "react-rnd": "^10.4.11",
     "react-scripts": "5.0.1",
+    "userflow.js": "^2.12.1",
     "web-vitals": "^2.1.4"
   },
   "homepage": "https://showcases.luzmo.com/drag-n-drop-chart-library",
@@ -22,7 +23,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "build:ci" : "CI=true npx react-scripts build"
+    "build:ci": "CI=true npx react-scripts build"
   },
   "eslintConfig": {
     "extends": [

diff --git a/drag-n-drop-chart-library/src/App.js b/drag-n-drop-chart-library/src/App.js
@@ -3,6 +3,13 @@ import FlexComponent from "./Components/FlexComponent";
 import { Rnd } from "react-rnd";
 import ChartDrawer from "./Components/ChartDrawer";
 import { Button, Box} from "@mui/material";
+import './App.css';
+
+// Userflow is only necessary for the Luzmo hosted showcases
+import userflow from 'userflow.js'
+userflow.init('ct_65z5oczamna45bveai47cpcbpe');
+userflow.identifyAnonymous();
+
 
 export default function App() {
   const [open, setOpen] = React.useState(false);
@@ -18,7 +25,7 @@ export default function App() {
 
   return (
     <Box sx={{ width: "100%" }}>
-      <div
+      <div class="userflow-drag-n-drop"
         style={{
           maxWidth: "fit-content",
           marginInline: "auto",

diff --git a/wearables-dashboard/package-lock.json b/wearables-dashboard/package-lock.json
diff --git a/wearables-dashboard/package.json b/wearables-dashboard/package.json
@@ -18,7 +18,8 @@
     "@mui/icons-material": "^5.16.4",
     "@mui/lab": "^5.0.0-alpha.172",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "userflow.js": "^2.12.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/wearables-dashboard/src/App.tsx b/wearables-dashboard/src/App.tsx
@@ -4,6 +4,11 @@ import { Grid, Box, createTheme, ThemeProvider } from "@mui/material";
 
 import { Topnav } from "./components";
 
+// Userflow is only necessary for the Luzmo hosted showcases
+import userflow from 'userflow.js'
+userflow.init('ct_65z5oczamna45bveai47cpcbpe');
+userflow.identifyAnonymous();
+
 const theme = createTheme({
   typography: {
     fontFamily: "Lato",
@@ -29,7 +34,7 @@ function App() {
       <UserContext.Provider value={{ user, switchUser }}>
         <ThemeProvider theme={theme}>
           <Topnav selectedTab={selectedTab} onTabChange={setSelectedTab} />
-          <Grid container spacing={2} paddingX={2} paddingBottom={2}>
+          <Grid container spacing={2} paddingX={2} paddingBottom={2} class="userflow-wearables">
             {selectedTab === "analytics" && <Analytics />}
             {selectedTab === "settings" && (
               <Grid item xs={12}>

diff --git a/wearables-dashboard/src/index.css b/wearables-dashboard/src/index.css
@@ -66,3 +66,6 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* Userflow is only necessary for the Luzmo hosted showcases */
+userflow-wearables {}