feat: init charts

package.json

@@ -35,6 +35,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
+    "echarts": "^5.5.1",
     "electron-store": "^10.0.0",
     "electron-updater": "^6.3.4",
     "electron-vite": "^2.3.0",

src/main/index.ts

@@ -174,8 +174,6 @@ app.whenReady().then(async () => {
     setupPeriodicSave()
     setupIPCListeners()
   })
-
-  emailService.scheduleEmailSend()
 })
 
 function handleUserLogout() {
@@ -191,7 +189,6 @@ function setupIPCListeners() {
     if (savedUser) {
       startActivityMonitoring()
       currentSiteTimeTrackers = store.get('siteTimeTrackers', [])
-      emailService.scheduleEmailSend()
     }
   })
   ipcMain.on('test-email-send', async () => await emailService.testEmailSend())

src/renderer/src/App.tsx

@@ -12,6 +12,7 @@ const Login = lazy(() => import('./Login'))
 const Signup = lazy(() => import('./Signup'))
 const Versions = lazy(() => import('./Versions'))
 const HelloWorld = () => <h1>Hello World!</h1>
+const BarChart = lazy(() => import('./BarChart'))
 
 const App = (props: ComponentProps<typeof Router>) => {
   const [isLoggedIn, setIsLoggedIn] = useAuth()
@@ -87,10 +88,11 @@ render(
     <AuthProvider>
       <Router root={App}>
         <Suspense fallback={<div>Loading...</div>}>
-          <Route path="/" component={Versions} />
+          <Route path="/" component={BarChart} />
           <Route path="/login" component={Login} />
           <Route path="/hello-world" component={HelloWorld} />
           <Route path="/signup" component={Signup} />
+          <Route path="/analytics" component={BarChart} />
         </Suspense>
       </Router>
     </AuthProvider>

src/renderer/src/BarChart.tsx

@@ -0,0 +1,51 @@
+import { onMount, onCleanup } from 'solid-js'
+import * as echarts from 'echarts'
+
+const BarChart = () => {
+  let chartDiv: HTMLElement | null | undefined
+
+  onMount(() => {
+    // Initialize the chart
+    const myChart = echarts.init(chartDiv, 'dark')
+
+    // Specify the chart options
+    const options = {
+      title: {
+        text: 'Deep Work Hours'
+      },
+      animationDuration: 3000,
+      tooltip: {},
+      xAxis: {
+        type: 'category',
+        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          name: 'Hours',
+          type: 'bar',
+          data: [5, 6, 7, 8, 4, 3, 6] // Example data
+        }
+      ]
+    }
+
+    // Set the options to the chart
+    myChart.setOption(options)
+
+    // Add resize listener to make the chart responsive
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+
+    // Clean up the chart on unmount
+    onCleanup(() => {
+      myChart.dispose()
+    })
+  })
+
+  return <div ref={chartDiv} style={{ width: '100%', height: '400px' }}></div>
+}
+
+export default BarChart