diff --git a/package.json b/package.json
index 0f98032..6df5955 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@vueuse/core": "^10.2.1",
     "chart.js": "^4.3.0",
+    "d3": "^7.8.5",
     "date-fns": "^2.30.0",
     "rollup-plugin-copy": "^3.4.0",
     "vue": "^3.2.47",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^0.12.2",
     "@kyvg/vue3-notification": "^2.9.1",
+    "@types/d3": "^7.4.0",
     "@types/webextension-polyfill": "^0.10.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vuepic/vue-datepicker": "^5.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef8692b..23f94d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,11 +3,13 @@ lockfileVersion: 5.4
 specifiers:
   '@intlify/unplugin-vue-i18n': ^0.12.2
   '@kyvg/vue3-notification': ^2.9.1
+  '@types/d3': ^7.4.0
   '@types/webextension-polyfill': ^0.10.0
   '@vitejs/plugin-vue': ^4.0.0
   '@vuepic/vue-datepicker': ^5.3.0
   '@vueuse/core': ^10.2.1
   chart.js: ^4.3.0
+  d3: ^7.8.5
   date-fns: ^2.30.0
   rollup-plugin-copy: ^3.4.0
   typescript: ^5.0.4
@@ -22,6 +24,7 @@ specifiers:
 dependencies:
   '@vueuse/core': 10.2.1_vue@3.2.47
   chart.js: 4.3.0
+  d3: 7.8.5
   date-fns: 2.30.0
   rollup-plugin-copy: 3.4.0
   vue: 3.2.47
@@ -31,6 +34,7 @@ dependencies:
 devDependencies:
   '@intlify/unplugin-vue-i18n': 0.12.2_vue-i18n@9.2.2
   '@kyvg/vue3-notification': 2.9.1_vue@3.2.47
+  '@types/d3': 7.4.0
   '@types/webextension-polyfill': 0.10.0
   '@vitejs/plugin-vue': 4.2.1_vite@4.3.3+vue@3.2.47
   '@vuepic/vue-datepicker': 5.3.0_vue@3.2.47
@@ -562,6 +566,185 @@ packages:
       defer-to-connect: 2.0.1
     dev: true
 
+  /@types/d3-array/3.0.6:
+    resolution: {integrity: sha512-NHkizg870sKYQn45oZT5ItoHqcgRgJD7KAiWZp4Udc6YdrFH2W0tZ2vv4shRHP+SXHoJ1G8B4I1GWb5oQSGypA==}
+    dev: true
+
+  /@types/d3-axis/3.0.3:
+    resolution: {integrity: sha512-SE3x/pLO/+GIHH17mvs1uUVPkZ3bHquGzvZpPAh4yadRy71J93MJBpgK/xY8l9gT28yTN1g9v3HfGSFeBMmwZw==}
+    dependencies:
+      '@types/d3-selection': 3.0.6
+    dev: true
+
+  /@types/d3-brush/3.0.3:
+    resolution: {integrity: sha512-MQ1/M/B5ifTScHSe5koNkhxn2mhUPqXjGuKjjVYckplAPjP9t2I2sZafb/YVHDwhoXWZoSav+Q726eIbN3qprA==}
+    dependencies:
+      '@types/d3-selection': 3.0.6
+    dev: true
+
+  /@types/d3-chord/3.0.3:
+    resolution: {integrity: sha512-keuSRwO02c7PBV3JMWuctIfdeJrVFI7RpzouehvBWL4/GGUB3PBNg/9ZKPZAgJphzmS2v2+7vr7BGDQw1CAulw==}
+    dev: true
+
+  /@types/d3-color/3.1.0:
+    resolution: {integrity: sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==}
+    dev: true
+
+  /@types/d3-contour/3.0.3:
+    resolution: {integrity: sha512-x7G/tdDZt4m09XZnG2SutbIuQqmkNYqR9uhDMdPlpJbcwepkEjEWG29euFcgVA1k6cn92CHdDL9Z+fOnxnbVQw==}
+    dependencies:
+      '@types/d3-array': 3.0.6
+      '@types/geojson': 7946.0.10
+    dev: true
+
+  /@types/d3-delaunay/6.0.1:
+    resolution: {integrity: sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==}
+    dev: true
+
+  /@types/d3-dispatch/3.0.3:
+    resolution: {integrity: sha512-Df7KW3Re7G6cIpIhQtqHin8yUxUHYAqiE41ffopbmU5+FifYUNV7RVyTg8rQdkEagg83m14QtS8InvNb95Zqug==}
+    dev: true
+
+  /@types/d3-drag/3.0.3:
+    resolution: {integrity: sha512-82AuQMpBQjuXeIX4tjCYfWjpm3g7aGCfx6dFlxX2JlRaiME/QWcHzBsINl7gbHCODA2anPYlL31/Trj/UnjK9A==}
+    dependencies:
+      '@types/d3-selection': 3.0.6
+    dev: true
+
+  /@types/d3-dsv/3.0.2:
+    resolution: {integrity: sha512-DooW5AOkj4AGmseVvbwHvwM/Ltu0Ks0WrhG6r5FG9riHT5oUUTHz6xHsHqJSVU8ZmPkOqlUEY2obS5C9oCIi2g==}
+    dev: true
+
+  /@types/d3-ease/3.0.0:
+    resolution: {integrity: sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==}
+    dev: true
+
+  /@types/d3-fetch/3.0.3:
+    resolution: {integrity: sha512-/EsDKRiQkby3Z/8/AiZq8bsuLDo/tYHnNIZkUpSeEHWV7fHUl6QFBjvMPbhkKGk9jZutzfOkGygCV7eR/MkcXA==}
+    dependencies:
+      '@types/d3-dsv': 3.0.2
+    dev: true
+
+  /@types/d3-force/3.0.5:
+    resolution: {integrity: sha512-EGG+IWx93ESSXBwfh/5uPuR9Hp8M6o6qEGU7bBQslxCvrdUBQZha/EFpu/VMdLU4B0y4Oe4h175nSm7p9uqFug==}
+    dev: true
+
+  /@types/d3-format/3.0.1:
+    resolution: {integrity: sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==}
+    dev: true
+
+  /@types/d3-geo/3.0.4:
+    resolution: {integrity: sha512-kmUK8rVVIBPKJ1/v36bk2aSgwRj2N/ZkjDT+FkMT5pgedZoPlyhaG62J+9EgNIgUXE6IIL0b7bkLxCzhE6U4VQ==}
+    dependencies:
+      '@types/geojson': 7946.0.10
+    dev: true
+
+  /@types/d3-hierarchy/3.1.3:
+    resolution: {integrity: sha512-GpSK308Xj+HeLvogfEc7QsCOcIxkDwLhFYnOoohosEzOqv7/agxwvJER1v/kTC+CY1nfazR0F7gnHo7GE41/fw==}
+    dev: true
+
+  /@types/d3-interpolate/3.0.1:
+    resolution: {integrity: sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==}
+    dependencies:
+      '@types/d3-color': 3.1.0
+    dev: true
+
+  /@types/d3-path/3.0.0:
+    resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
+    dev: true
+
+  /@types/d3-polygon/3.0.0:
+    resolution: {integrity: sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==}
+    dev: true
+
+  /@types/d3-quadtree/3.0.2:
+    resolution: {integrity: sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==}
+    dev: true
+
+  /@types/d3-random/3.0.1:
+    resolution: {integrity: sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==}
+    dev: true
+
+  /@types/d3-scale-chromatic/3.0.0:
+    resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==}
+    dev: true
+
+  /@types/d3-scale/4.0.4:
+    resolution: {integrity: sha512-eq1ZeTj0yr72L8MQk6N6heP603ubnywSDRfNpi5enouR112HzGLS6RIvExCzZTraFF4HdzNpJMwA/zGiMoHUUw==}
+    dependencies:
+      '@types/d3-time': 3.0.0
+    dev: true
+
+  /@types/d3-selection/3.0.6:
+    resolution: {integrity: sha512-2ACr96USZVjXR9KMD9IWi1Epo4rSDKnUtYn6q2SPhYxykvXTw9vR77lkFNruXVg4i1tzQtBxeDMx0oNvJWbF1w==}
+    dev: true
+
+  /@types/d3-shape/3.1.2:
+    resolution: {integrity: sha512-NN4CXr3qeOUNyK5WasVUV8NCSAx/CRVcwcb0BuuS1PiTqwIm6ABi1SyasLZ/vsVCFDArF+W4QiGzSry1eKYQ7w==}
+    dependencies:
+      '@types/d3-path': 3.0.0
+    dev: true
+
+  /@types/d3-time-format/4.0.0:
+    resolution: {integrity: sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==}
+    dev: true
+
+  /@types/d3-time/3.0.0:
+    resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==}
+    dev: true
+
+  /@types/d3-timer/3.0.0:
+    resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==}
+    dev: true
+
+  /@types/d3-transition/3.0.4:
+    resolution: {integrity: sha512-512a4uCOjUzsebydItSXsHrPeQblCVk8IKjqCUmrlvBWkkVh3donTTxmURDo1YPwIVDh5YVwCAO6gR4sgimCPQ==}
+    dependencies:
+      '@types/d3-selection': 3.0.6
+    dev: true
+
+  /@types/d3-zoom/3.0.4:
+    resolution: {integrity: sha512-cqkuY1ah9ZQre2POqjSLcM8g40UVya/qwEUrNYP2/rCVljbmqKCVcv+ebvwhlI5azIbSEL7m+os6n+WlYA43aA==}
+    dependencies:
+      '@types/d3-interpolate': 3.0.1
+      '@types/d3-selection': 3.0.6
+    dev: true
+
+  /@types/d3/7.4.0:
+    resolution: {integrity: sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==}
+    dependencies:
+      '@types/d3-array': 3.0.6
+      '@types/d3-axis': 3.0.3
+      '@types/d3-brush': 3.0.3
+      '@types/d3-chord': 3.0.3
+      '@types/d3-color': 3.1.0
+      '@types/d3-contour': 3.0.3
+      '@types/d3-delaunay': 6.0.1
+      '@types/d3-dispatch': 3.0.3
+      '@types/d3-drag': 3.0.3
+      '@types/d3-dsv': 3.0.2
+      '@types/d3-ease': 3.0.0
+      '@types/d3-fetch': 3.0.3
+      '@types/d3-force': 3.0.5
+      '@types/d3-format': 3.0.1
+      '@types/d3-geo': 3.0.4
+      '@types/d3-hierarchy': 3.1.3
+      '@types/d3-interpolate': 3.0.1
+      '@types/d3-path': 3.0.0
+      '@types/d3-polygon': 3.0.0
+      '@types/d3-quadtree': 3.0.2
+      '@types/d3-random': 3.0.1
+      '@types/d3-scale': 4.0.4
+      '@types/d3-scale-chromatic': 3.0.0
+      '@types/d3-selection': 3.0.6
+      '@types/d3-shape': 3.1.2
+      '@types/d3-time': 3.0.0
+      '@types/d3-time-format': 4.0.0
+      '@types/d3-timer': 3.0.0
+      '@types/d3-transition': 3.0.4
+      '@types/d3-zoom': 3.0.4
+    dev: true
+
   /@types/estree/1.0.1:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
     dev: true
@@ -572,6 +755,10 @@ packages:
       '@types/node': 18.16.3
     dev: false
 
+  /@types/geojson/7946.0.10:
+    resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
+    dev: true
+
   /@types/glob/7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
@@ -1297,6 +1484,11 @@ packages:
       graceful-readlink: 1.0.1
     dev: true
 
+  /commander/7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /commander/9.5.0:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
     engines: {node: ^12.20.0 || >=14}
@@ -1393,6 +1585,254 @@ packages:
   /csstype/2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
 
+  /d3-array/3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 2.0.3
+    dev: false
+
+  /d3-axis/3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-brush/3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1_d3-selection@3.0.0
+    dev: false
+
+  /d3-chord/3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-color/3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-contour/4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-delaunay/6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+    dependencies:
+      delaunator: 5.0.0
+    dev: false
+
+  /d3-dispatch/3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-drag/3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+    dev: false
+
+  /d3-dsv/3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+    dev: false
+
+  /d3-ease/3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-fetch/3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dsv: 3.0.1
+    dev: false
+
+  /d3-force/3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-format/3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-geo/3.1.0:
+    resolution: {integrity: sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-hierarchy/3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate/3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-path/3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-polygon/3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-quadtree/3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-random/3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-scale-chromatic/3.0.0:
+    resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+    dev: false
+
+  /d3-scale/4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
+
+  /d3-selection/3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-shape/3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-time-format/4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
+
+  /d3-time/3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-timer/3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-transition/3.0.1_d3-selection@3.0.0:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-zoom/3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1_d3-selection@3.0.0
+    dev: false
+
+  /d3/7.8.5:
+    resolution: {integrity: sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.0
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.0.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1_d3-selection@3.0.0
+      d3-zoom: 3.0.0
+    dev: false
+
   /dashdash/1.14.1:
     resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
     engines: {node: '>=0.10'}
@@ -1498,6 +1938,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /delaunator/5.0.0:
+    resolution: {integrity: sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==}
+    dependencies:
+      robust-predicates: 3.0.2
+    dev: false
+
   /delayed-stream/1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -2246,6 +2692,13 @@ packages:
     engines: {node: '>=8.12.0'}
     dev: true
 
+  /iconv-lite/0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: false
+
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
@@ -2302,6 +2755,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /internmap/2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /invert-kv/3.0.1:
     resolution: {integrity: sha512-CYdFeFexxhv/Bcny+Q0BfOV+ltRlJcd4BBZBYFX/O0u4npJrgZtIcjokegtiSMAvlMTJ+Koq0GBCc//3bueQxw==}
     engines: {node: '>=8'}
@@ -3392,6 +3850,10 @@ packages:
       glob: 7.2.3
     dev: true
 
+  /robust-predicates/3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+    dev: false
+
   /rollup-plugin-copy/3.4.0:
     resolution: {integrity: sha512-rGUmYYsYsceRJRqLVlE9FivJMxJ7X6jDlP79fmFkL8sJs7VVMSVyA2yfyL+PGyO/vJs4A87hwhgVfz61njI+uQ==}
     engines: {node: '>=8.3'}
@@ -3416,6 +3878,10 @@ packages:
     dependencies:
       queue-microtask: 1.2.3
 
+  /rw/1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+    dev: false
+
   /safe-buffer/5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
     dev: true
@@ -3437,7 +3903,6 @@ packages:
 
   /safer-buffer/2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-    dev: true
 
   /sax/1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json
index 99968ef..c7dcba4 100644
--- a/src/_locales/de/messages.json
+++ b/src/_locales/de/messages.json
@@ -298,5 +298,15 @@
   "showChangelog": {
     "message": "Änderungsliste anzeigen",
     "description": "Zeigen Sie die Liste der Änderungen nach dem Aktualisieren der Erweiterung an"
+  },
+  "byHours": {
+    "message": "Stundenweise"
+  },
+  "intervals": {
+    "message": "Intervalle"
+  },
+  "intervalsChart": {
+    "message": "Nur Zeitintervalle größer als",
+    "description": "werden angezeigt"
   }
 }
\ No newline at end of file
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 7d3bc55..0f7390d 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -298,5 +298,15 @@
   "showChangelog": {
     "message": "Show changelog",
     "description": "Show the list of changes after updating extension"
+  },
+  "byHours": {
+    "message": "Horly"
+  },
+  "intervals": {
+    "message": "Intervals"
+  },
+  "intervalsChart": {
+    "message": "Only time intervals greater than",
+    "description": "are shown"
   }
 }
diff --git a/src/_locales/ru/messages.json b/src/_locales/ru/messages.json
index 404df3a..e3f9ccc 100644
--- a/src/_locales/ru/messages.json
+++ b/src/_locales/ru/messages.json
@@ -298,5 +298,16 @@
   "showChangelog": {
     "message": "Показывать список изменений",
     "description": "Показывать список изменений после обновления расширения"
+  },
+  "byHours": {
+    "message": "По часам"
+  },
+  "intervals": {
+    "message": "Интервальны",
+    "description": "Отображаются только временные интервалы, превышающие 5 секунд"
+  },
+  "intervalsChart": {
+    "message": "Отображаются только временные интервалы, превышающие",
+    "description": ""
   }
 }
diff --git a/src/assets/css/general.css b/src/assets/css/general.css
index b179477..f1bfd71 100644
--- a/src/assets/css/general.css
+++ b/src/assets/css/general.css
@@ -23,6 +23,9 @@
 .mt-20 {
   margin-top: 20px;
 }
+.mb-20 {
+  margin-bottom: 20px;
+}
 .ml-10 {
   margin-left: 10px;
 }
diff --git a/src/components/Dashboad.vue b/src/components/Dashboad.vue
index 7e50b6d..345a7f5 100644
--- a/src/components/Dashboad.vue
+++ b/src/components/Dashboad.vue
@@ -2,13 +2,31 @@
   <div class="main">
     <div class="settings-item">
       <label class="setting-header"> {{ t('dashboard.message') }} </label>
-      <p class="description">{{ t('timeChartDescription.message') }}</p>
     </div>
     <div class="chart chartByHours">
-      <TimeIntervalChart />
+      <div class="mt-10 mb-20">
+        <input
+          type="button"
+          :class="['chart-btn', chart == TypeOfChart.Horly ? 'active' : '']"
+          :value="t('byHours.message')"
+          @click="openChart(TypeOfChart.Horly)"
+        />
+        <input
+          type="button"
+          :class="['ml-10', 'chart-btn', chart == TypeOfChart.Interval ? 'active' : '']"
+          :value="t('intervals.message')"
+          @click="openChart(TypeOfChart.Interval)"
+        />
+      </div>
+      <HourlyChart v-if="chart == TypeOfChart.Horly" />
+      <TimeIntervalChart v-if="chart == TypeOfChart.Interval" />
     </div>
-    <div class="chart mt-20">
-      <TabList :type="TypeOfList.Dashboard" :showAllStats="false" />
+    <div class="tab-items">
+      <TabList
+        :type="TypeOfList.Dashboard"
+        :showAllStats="false"
+        v-if="chart == TypeOfChart.Horly"
+      />
     </div>
   </div>
 </template>
@@ -22,10 +40,26 @@ export default {
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
 import TimeIntervalChart from './TimeIntervalChart.vue';
+import HourlyChart from './HourlyChart.vue';
 import TabList from '../components/TabList.vue';
 import { TypeOfList } from '../utils/enums';
+import { onMounted, ref } from 'vue';
 
 const { t } = useI18n();
+const chart = ref<TypeOfChart>();
+
+enum TypeOfChart {
+  Horly,
+  Interval,
+}
+
+onMounted(() => {
+  chart.value = TypeOfChart.Horly;
+});
+
+function openChart(type: TypeOfChart) {
+  chart.value = type;
+}
 </script>
 
 <style scoped>
@@ -34,10 +68,21 @@ const { t } = useI18n();
   margin: auto;
 }
 .chart {
-  margin: 20px;
+  margin: 20px 0;
   width: 80%;
 }
+.tab-items {
+  width: 80%;
+  margin-top: 100px;
+}
 .chartByHours {
-  height: 350px;
+  height: 390px;
+}
+.chart-btn {
+  background-color: rgb(202, 202, 202);
+}
+
+.chart-btn.active {
+  background-color: #428bff;
 }
 </style>
diff --git a/src/components/HourlyChart.vue b/src/components/HourlyChart.vue
new file mode 100644
index 0000000..95a11fd
--- /dev/null
+++ b/src/components/HourlyChart.vue
@@ -0,0 +1,213 @@
+<template>
+  <p class="description">{{ t('timeChartDescription.message') }}</p>
+  <Bar :data="data" :options="options" v-if="isLoaded" />
+</template>
+
+<script lang="ts">
+export default {
+  name: 'HourlyChart',
+};
+</script>
+
+<script lang="ts" setup>
+import { Bar } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  LinearScale,
+  CategoryScale,
+} from 'chart.js';
+import { onMounted, ref } from 'vue';
+import { injecStorage } from '../storage/inject-storage';
+import { StorageDeserializeParam } from '../storage/storage-params';
+import { TimeInterval } from '../entity/time-interval';
+import { todayLocalDate } from '../utils/date';
+import { convertHoursToTime, convertStringTimeIntervalToSeconds } from '../utils/converter';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+type DataForChart = {
+  summary: number;
+  hour: number;
+  domains: DomainsInterval[];
+};
+
+type DomainsInterval = {
+  hour: number;
+  summary: number;
+  domain: string;
+};
+
+const storage = injecStorage();
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+const options = ref<any>();
+const data = ref<any>();
+const isLoaded = ref<boolean>();
+
+const objects: DataForChart[] = [];
+const hours: number[] = [];
+
+isLoaded.value = false;
+
+function convertTimIntervalToObject(
+  timeInterval: string,
+  domain: string,
+): DomainsInterval[] | null {
+  const array = timeInterval.split('-');
+  const time1 = array[0].split(':');
+  const time2 = array[1].split(':');
+  if (time1[0] == time2[0]) {
+    return [
+      {
+        hour: Number(time1[0]),
+        summary:
+          convertStringTimeIntervalToSeconds(array[1]) -
+          convertStringTimeIntervalToSeconds(array[0]),
+        domain: domain,
+      },
+    ];
+  } else {
+    const arr = [];
+    const firstPart1 = array[0];
+    const firstPart2 = `${time1[0]}:59:59`;
+    const hourForFirstPart = firstPart1.split(':');
+    arr.push({
+      hour: Number(hourForFirstPart[0]),
+      summary:
+        convertStringTimeIntervalToSeconds(firstPart2) -
+        convertStringTimeIntervalToSeconds(firstPart1),
+      domain: domain,
+    });
+    const secondPart1 = `${time2[0]}:00:00`;
+    const secondPart2 = `${time2[0]}:${time2[1]}:${time2[2]}`;
+    const hourForsecondPart = secondPart1.split(':');
+    arr.push({
+      hour: Number(hourForsecondPart[0]),
+      summary:
+        convertStringTimeIntervalToSeconds(secondPart2) -
+        convertStringTimeIntervalToSeconds(secondPart1),
+      domain: domain,
+    });
+    return arr;
+  }
+}
+
+function fillData(timeIntervalList: TimeInterval[]) {
+  const items = timeIntervalList?.filter(x => x.day == todayLocalDate());
+  const domains = items.map(x => x.domain);
+  const result: any[] = [];
+  const intervalsObj: DomainsInterval[] = [];
+  domains.forEach(domain => {
+    const intervals = items.filter(x => x.domain == domain);
+    intervals.forEach(array => {
+      const i = array.intervals;
+      i.forEach(time => {
+        const objs = convertTimIntervalToObject(time, domain);
+        if (objs != null && objs.length > 0) {
+          objs.forEach(obj => {
+            const existDomain = intervalsObj.find(x => x.domain == domain && x.hour == obj.hour);
+            if (existDomain != undefined) {
+              existDomain.summary += obj.summary;
+            } else intervalsObj.push(obj);
+          });
+        }
+      });
+    });
+  });
+
+  const tempArray: number[] = [];
+  for (let index = 0; index < 24; index++) {
+    const obj = objects.find(x => x.hour == index);
+    const intervalObj = intervalsObj.filter(x => x.hour == index);
+    const summary =
+      intervalObj.length == 0 ? 0 : intervalObj.map(x => x.summary).reduce((a, b) => a + b);
+    if (obj == undefined) {
+      const newObj = {
+        summary: summary,
+        hour: index,
+        domains: intervalObj,
+      };
+      objects.push(newObj);
+    } else {
+      obj.summary += summary;
+      intervalObj.forEach(element => {
+        obj.domains.push(element);
+      });
+    }
+
+    tempArray.push(0);
+  }
+
+  objects.forEach(obj => {
+    const emptyArray: number[] = Object.assign([], tempArray);
+    emptyArray[obj.hour] = Number(obj.summary / 60);
+    result.push({
+      backgroundColor: ['#5668e2'],
+      data: emptyArray,
+    });
+  });
+
+  return result;
+}
+
+async function buildChart() {
+  const timeIntervalList = (await storage.getDeserializeList(
+    StorageDeserializeParam.TIMEINTERVAL_LIST,
+  )) as TimeInterval[];
+  for (let index = 0; index <= 23; index++) {
+    hours.push(index);
+  }
+  let minutes: number[] = [];
+  for (let index = 1; index < 60; index++) {
+    minutes.push(index);
+  }
+
+  const dataForChart = fillData(timeIntervalList);
+  data.value = {
+    labels: hours,
+    datasets: dataForChart,
+  };
+
+  options.value = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'none',
+      },
+      tooltip: {
+        callbacks: {
+          label: function (context: any) {
+            return `${context.label}:00-${Number(context.label) + 1}:00 ${convertHoursToTime(
+              context.raw,
+            )}`;
+          },
+        },
+      },
+    },
+    scales: {
+      y: {
+        min: 0,
+        max: 60,
+        ticks: {
+          stepSize: 5,
+        },
+      },
+      x: {
+        stacked: true,
+        min: 0,
+        max: 23,
+      },
+    },
+  };
+  isLoaded.value = true;
+}
+
+onMounted(async () => await buildChart());
+</script>
diff --git a/src/components/TimeIntervalChart.vue b/src/components/TimeIntervalChart.vue
index aa647f9..814f768 100644
--- a/src/components/TimeIntervalChart.vue
+++ b/src/components/TimeIntervalChart.vue
@@ -1,5 +1,17 @@
 <template>
-  <Bar :data="data" :options="options" v-if="isLoaded" />
+  <div>
+    <p class="description d-inline-block">{{ t('intervalsChart.message') }}</p>
+    <div class="d-inline-block mr-10 ml-10">
+      <select class="option" v-model="minValue" @change="refreshChart()">
+        <option :value="MinValue.Seconds_10">10 {{ t('sec.message') }}</option>
+        <option :value="MinValue.Min_1">1 {{ t('min.message') }}</option>
+        <option :value="MinValue.Min_5">5 {{ t('2min.message') }}</option>
+        <option :value="MinValue.Min_10">10 {{ t('mins.message') }}</option>
+      </select>
+    </div>
+    <p class="description d-inline-block">{{ t('intervalsChart.description') }}</p>
+  </div>
+  <div ref="chart" id="timeIntervalChartD3"></div>
 </template>
 
 <script lang="ts">
@@ -9,201 +21,218 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { Bar } from 'vue-chartjs';
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  LinearScale,
-  CategoryScale,
-} from 'chart.js';
 import { onMounted, ref } from 'vue';
 import { injecStorage } from '../storage/inject-storage';
 import { StorageDeserializeParam } from '../storage/storage-params';
 import { TimeInterval } from '../entity/time-interval';
 import { todayLocalDate } from '../utils/date';
-import { convertHoursToTime, convertStringTimeIntervalToSeconds } from '../utils/converter';
+import { useI18n } from 'vue-i18n';
+import * as d3 from 'd3';
+import { convertStringTimeIntervalToSeconds } from '../utils/converter';
+
+enum MinValue {
+  Seconds_10 = 10,
+  Min_1 = 60,
+  Min_5 = 300,
+  Min_10 = 600,
+}
 
-type DataForChart = {
-  summary: number;
-  hour: number;
-  domains: DomainsInterval[];
-};
+const { t } = useI18n();
+const storage = injecStorage();
+
+const chart = ref<any>();
+const minValue = ref<number>();
+const todayIntervals = ref<TimeInterval[]>();
 
-type DomainsInterval = {
-  hour: number;
-  summary: number;
+type DataForChart = {
   domain: string;
+  interval: string;
 };
 
-const storage = injecStorage();
+onMounted(async () => {
+  minValue.value = MinValue.Seconds_10;
+  const timeIntervalList = (await storage.getDeserializeList(
+    StorageDeserializeParam.TIMEINTERVAL_LIST,
+  )) as TimeInterval[];
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-const options = ref<any>();
-const data = ref<any>();
-const isLoaded = ref<boolean>();
-
-const objects: DataForChart[] = [];
-const hours: number[] = [];
-
-isLoaded.value = false;
-
-function convertTimIntervalToObject(
-  timeInterval: string,
-  domain: string,
-): DomainsInterval[] | null {
-  const array = timeInterval.split('-');
-  const time1 = array[0].split(':');
-  const time2 = array[1].split(':');
-  if (time1[0] == time2[0]) {
-    return [
-      {
-        hour: Number(time1[0]),
-        summary:
-          convertStringTimeIntervalToSeconds(array[1]) -
-          convertStringTimeIntervalToSeconds(array[0]),
-        domain: domain,
-      },
-    ];
-  } else {
-    const arr = [];
-    const firstPart1 = array[0];
-    const firstPart2 = `${time1[0]}:59:59`;
-    const hourForFirstPart = firstPart1.split(':');
-    arr.push({
-      hour: Number(hourForFirstPart[0]),
-      summary:
-        convertStringTimeIntervalToSeconds(firstPart2) -
-        convertStringTimeIntervalToSeconds(firstPart1),
-      domain: domain,
+  todayIntervals.value = timeIntervalList?.filter(x => x.day == todayLocalDate());
+  renderChart();
+});
+
+function renderChart() {
+  const dataForChart: DataForChart[] = [];
+  todayIntervals.value?.forEach(interval => {
+    interval.intervals.forEach(int => {
+      const from = int.split('-')[0];
+      const to = int.split('-')[1];
+      if (
+        convertStringTimeIntervalToSeconds(to) - convertStringTimeIntervalToSeconds(from) >
+        minValue.value!
+      ) {
+        dataForChart.push({ domain: interval.domain, interval: convertInterval(int) });
+      }
     });
-    const secondPart1 = `${time2[0]}:00:00`;
-    const secondPart2 = `${time2[0]}:${time2[1]}:${time2[2]}`;
-    const hourForsecondPart = secondPart1.split(':');
-    arr.push({
-      hour: Number(hourForsecondPart[0]),
-      summary:
-        convertStringTimeIntervalToSeconds(secondPart2) -
-        convertStringTimeIntervalToSeconds(secondPart1),
-      domain: domain,
-    });
-    return arr;
+  });
+  drawIntervalChart(dataForChart);
+}
+
+function refreshChart() {
+  chart.value.innerHTML = '';
+  renderChart();
+}
+
+function convertInterval(interval: string): string {
+  function convert(item: string[]) {
+    item = item.map(x => (x.length == 1 ? `0${x}` : x));
+    return item.join(':');
   }
+
+  const sourceTimeFrom = interval.split('-')[0].split(':');
+  const sourceTimeTo = interval.split('-')[1].split(':');
+  return `${convert(sourceTimeFrom)}-${convert(sourceTimeTo)}`;
 }
 
-function fillData(timeIntervalList: TimeInterval[]) {
-  const items = timeIntervalList?.filter(x => x.day == todayLocalDate());
-  const domains = items.map(x => x.domain);
-  const result: any[] = [];
-  const intervalsObj: DomainsInterval[] = [];
-  domains.forEach(domain => {
-    const intervals = items.filter(x => x.domain == domain);
-    intervals.forEach(array => {
-      const i = array.intervals;
-      i.forEach(time => {
-        const objs = convertTimIntervalToObject(time, domain);
-        if (objs != null && objs.length > 0) {
-          objs.forEach(obj => {
-            const existDomain = intervalsObj.find(x => x.domain == domain && x.hour == obj.hour);
-            if (existDomain != undefined) {
-              existDomain.summary += obj.summary;
-            } else intervalsObj.push(obj);
-          });
-        }
-      });
-    });
+function drawIntervalChart(data: DataForChart[]) {
+  data.forEach(item => {
+    const hFrom = getHourFrom(item.interval);
+    const hTo = getHourTo(item.interval);
+    if (hFrom != hTo) {
+      const sourceTimeFrom = item.interval.split('-')[0].split(':');
+      const sourceTimeTo = item.interval.split('-')[1].split(':');
+      const timeTo = `${sourceTimeFrom[0]}:59:59`;
+      const timeFrom = `${sourceTimeTo[0]}:00:00`;
+      data.push({ domain: item.domain, interval: item.interval.split('-')[0] + '-' + timeTo });
+      data.push({ domain: item.domain, interval: timeFrom + '-' + item.interval.split('-')[1] });
+    }
   });
 
-  const tempArray: number[] = [];
-  for (let index = 0; index < 24; index++) {
-    const obj = objects.find(x => x.hour == index);
-    const intervalObj = intervalsObj.filter(x => x.hour == index);
-    const summary =
-      intervalObj.length == 0 ? 0 : intervalObj.map(x => x.summary).reduce((a, b) => a + b);
-    if (obj == undefined) {
-      const newObj = {
-        summary: summary,
-        hour: index,
-        domains: intervalObj,
-      };
-      objects.push(newObj);
-    } else {
-      obj.summary += summary;
-      intervalObj.forEach(element => {
-        obj.domains.push(element);
-      });
-    }
+  const margin = { top: 10, right: 10, bottom: 20, left: 20 };
+  const width = chart.value.offsetWidth;
+  const height = 400;
+
+  const tickDistance = 4.38;
+
+  const tooltip = d3
+    .select('#timeIntervalChartD3')
+    .append('div')
+    .style('opacity', 0)
+    .style('display', 'none')
+    .style('position', 'absolute')
+    .style('background-color', 'white')
+    .style('color', 'black')
+    .style('border', '1px solid grey')
+    .attr('class', 'tooltip')
+    .style('border-width', '1px')
+    .style('border-radius', '3px')
+    .style('padding', '5px');
+
+  const mouseover = function (e: any) {
+    tooltip.style('opacity', 1).style('display', 'block');
+    d3.select('.tooltip')
+      .style('left', e.layerX + 15 + 'px')
+      .style('top', e.layerY + 15 + 'px');
+  };
+  const mousemove = function (event: any, data: any) {
+    tooltip.html(`<b>${data.domain}</b><br>${data.interval}`);
+  };
+  const mouseleave = function (e: any) {
+    tooltip.style('opacity', 0).style('display', 'none');
+  };
 
-    tempArray.push(0);
+  //create the svg
+  const svg = d3
+    .select('#timeIntervalChartD3')
+    .append('svg')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+  const y = d3.scaleLinear([height, 0]).domain([0, 60]);
+  const yAxis = d3.axisLeft(y);
+
+  const x = d3.scaleLinear([0, width]).domain([0, 24]);
+  const xAxis = d3.axisBottom(x).ticks(24);
+
+  svg
+    .append('g')
+    .attr('class', 'grid')
+    .style('color', '#e5e5e5')
+    .attr('transform', `translate(0, ${height})`)
+    .call(xAxis.tickSize(-height));
+
+  svg.append('g').attr('class', 'grid').style('color', '#e5e5e5').call(yAxis.tickSize(-width));
+  svg.selectAll('text').style('fill', 'black');
+
+  //draw the bars, offset y and bar height based on data
+  svg
+    .selectAll('.bar')
+    .data(data)
+    .enter()
+    .append('rect')
+    .style('fill', '#5668e2')
+    .style('cursor', 'pointer')
+    .style('stroke-width', '1')
+    .attr('class', 'bar')
+    .attr('x', (data: any) => x(getHourFrom(data.interval)) + 2)
+    .attr('width', 25)
+    .attr('y', (data: any) => y(getMinutesTo(data.interval)) - 1)
+    .attr('height', (data: any) => {
+      const offset = getMinutesTo(data.interval) - getMinutesFrom(data.interval);
+      if (offset == 0) {
+        const offsetSeconds = getSecondsTo(data.interval) - getSecondsFrom(data.interval);
+        if (offsetSeconds <= 3) return 0;
+        else return 1;
+      } else return offset * tickDistance;
+    })
+    .on('mouseover', mouseover)
+    .on('mousemove', mousemove)
+    .on('mouseleave', mouseleave);
+
+  function getHourFrom(interval: string): number {
+    const time = interval.split('-')[0];
+    return Number(time.split(':')[0]);
   }
 
-  objects.forEach(obj => {
-    const emptyArray: number[] = Object.assign([], tempArray);
-    emptyArray[obj.hour] = Number(obj.summary / 60);
-    result.push({
-      backgroundColor: ['#5668e2'],
-      data: emptyArray,
-    });
-  });
+  function getHourTo(interval: string): number {
+    var time = interval.split('-')[1];
+    return Number(time.split(':')[0]);
+  }
 
-  return result;
-}
+  function getMinutesFrom(interval: string): number {
+    var time = interval.split('-')[0];
+    return Number(time.split(':')[1]);
+  }
 
-async function buildChart() {
-  const timeIntervalList = (await storage.getDeserializeList(
-    StorageDeserializeParam.TIMEINTERVAL_LIST,
-  )) as TimeInterval[];
-  for (let index = 0; index <= 23; index++) {
-    hours.push(index);
+  function getMinutesTo(interval: string): number {
+    var time = interval.split('-')[1];
+    return Number(time.split(':')[1]);
   }
-  let minutes: number[] = [];
-  for (let index = 1; index < 60; index++) {
-    minutes.push(index);
+
+  function getSecondsFrom(interval: string): number {
+    var time = interval.split('-')[0];
+    return Number(time.split(':')[2]);
   }
 
-  const dataForChart = fillData(timeIntervalList);
-  data.value = {
-    labels: hours,
-    datasets: dataForChart,
-  };
+  function getSecondsTo(interval: string): number {
+    var time = interval.split('-')[1];
+    return Number(time.split(':')[2]);
+  }
+}
+</script>
 
-  options.value = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: 'none',
-      },
-      tooltip: {
-        callbacks: {
-          label: function (context: any) {
-            return `${context.label}:00-${Number(context.label) + 1}:00 ${convertHoursToTime(
-              context.raw,
-            )}`;
-          },
-        },
-      },
-    },
-    scales: {
-      y: {
-        min: 0,
-        max: 60,
-        ticks: {
-          stepSize: 5,
-        },
-      },
-      x: {
-        stacked: true,
-        min: 0,
-        max: 23,
-      },
-    },
-  };
-  isLoaded.value = true;
+<style scoped>
+.block {
+  display: inline-block;
+  border: 1px rgb(197, 197, 197) solid;
+  background-color: white;
+  height: 40px;
+  width: 40px;
 }
 
-onMounted(async () => await buildChart());
-</script>
+.grid line {
+  stroke: gray;
+  stroke-opacity: 0.2;
+  color: black;
+}
+</style>