init forgetting curve

components.d.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     AboutMe: typeof import('./src/components/presentation/AboutMe.vue')['default']
     AppHeader: typeof import('./src/components/AppHeader.vue')['default']
     BlogPosts: typeof import('./src/components/posts/BlogPosts.vue')['default']
+    ForgettingCurve: typeof import('./src/components/smart-notes/forgetting-curve.vue')['default']
     Island: typeof import('./node_modules/.pnpm/iles@0.8.7_sass@1.56.1/node_modules/iles/dist/client/app/components/Island.vue')['default']
     JulienCalixte: typeof import('./src/components/core/JulienCalixte.vue')['default']
     ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']

src/components/smart-notes/forgetting-curve.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import chart from 'chart.xkcd'
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  const svg = document.querySelector('.forgetting-curve')
+
+  new chart.Line(svg, {
+    title: 'The forgetting curve',
+    xLabel: '# days',
+    yLabel: 'Retention',
+    data: {
+      labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+      datasets: [{
+        label: 'Reality',
+        data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      }],
+    }
+  })
+})
+</script>
+
+<template>
+  <svg class="forgetting-curve"></svg>
+</template>
+
+<style scoped>
+svg {
+  min-height: 300px;
+  width: 500px;
+  margin: auto;
+}
+</style>