diff --git a/resources/assets/js/@types/jquery-bootstrap.d.ts b/resources/assets/js/@types/jquery-bootstrap.d.ts
index 7fd97d5..e020e43 100644
--- a/resources/assets/js/@types/jquery-bootstrap.d.ts
+++ b/resources/assets/js/@types/jquery-bootstrap.d.ts
@@ -1,4 +1,4 @@
 // @types/bootstrap に足りないもの
 interface JQuery<TElement = HTMLElement> {
-    modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose", relatedTarget?: TElement): this;
+    modal(action: 'toggle' | 'show' | 'hide' | 'handleUpdate' | 'dispose', relatedTarget?: TElement): this;
 }
diff --git a/resources/assets/js/@types/vue-shims.d.ts b/resources/assets/js/@types/vue-shims.d.ts
index ad17f79..1a9f5b5 100644
--- a/resources/assets/js/@types/vue-shims.d.ts
+++ b/resources/assets/js/@types/vue-shims.d.ts
@@ -1,4 +1,4 @@
-declare module "*.vue" {
-    import Vue from "vue";
+declare module '*.vue' {
+    import Vue from 'vue';
     export default Vue;
-}
\ No newline at end of file
+}
diff --git a/resources/assets/js/app.ts b/resources/assets/js/app.ts
index 75486b1..0a80a02 100644
--- a/resources/assets/js/app.ts
+++ b/resources/assets/js/app.ts
@@ -8,10 +8,10 @@ $(() => {
         $('body').removeClass('tis-need-agecheck');
     } else {
         $('#ageCheckModal')
-            .modal({backdrop: 'static'})
+            .modal({ backdrop: 'static' })
             .on('hide.bs.modal', function () {
                 $('body').removeClass('tis-need-agecheck');
-                Cookies.set('agechecked', '1', {expires: 365});
+                Cookies.set('agechecked', '1', { expires: 365 });
             });
     }
 
@@ -52,7 +52,7 @@ $(() => {
             $.ajax({
                 url: '/api/likes/' + encodeURIComponent(targetId),
                 method: 'delete',
-                type: 'json'
+                type: 'json',
             })
                 .then(callback)
                 .catch(function (xhr: jqXHR) {
@@ -78,8 +78,8 @@ $(() => {
                 method: 'post',
                 type: 'json',
                 data: {
-                    id: targetId
-                }
+                    id: targetId,
+                },
             })
                 .then(callback)
                 .catch(function (xhr: jqXHR) {
@@ -99,7 +99,7 @@ $(() => {
 
     $(document).on('click', '.card-spoiler-overlay', function (event) {
         const $this = $(this);
-        $this.siblings(".card-link").removeClass("card-spoiler");
+        $this.siblings('.card-link').removeClass('card-spoiler');
         $this.remove();
     });
 });
diff --git a/resources/assets/js/bootstrap.ts b/resources/assets/js/bootstrap.ts
index 615345b..99d9e9b 100644
--- a/resources/assets/js/bootstrap.ts
+++ b/resources/assets/js/bootstrap.ts
@@ -8,8 +8,8 @@ if (!token) {
 } else {
     $.ajaxSetup({
         headers: {
-            'X-CSRF-TOKEN': token.content
-        }
+            'X-CSRF-TOKEN': token.content,
+        },
     });
 }
 
diff --git a/resources/assets/js/checkin.ts b/resources/assets/js/checkin.ts
index cb31293..60e87fb 100644
--- a/resources/assets/js/checkin.ts
+++ b/resources/assets/js/checkin.ts
@@ -1,8 +1,8 @@
 import Vue from 'vue';
-import TagInput from "./components/TagInput.vue";
+import TagInput from './components/TagInput.vue';
 import MetadataPreview from './components/MetadataPreview.vue';
 
-export const bus = new Vue({name: "EventBus"});
+export const bus = new Vue({ name: 'EventBus' });
 
 export enum MetadataLoadState {
     Inactive,
@@ -19,11 +19,11 @@ new Vue({
     },
     components: {
         TagInput,
-        MetadataPreview
+        MetadataPreview,
     },
     mounted() {
         // オカズリンクにURLがセットされている場合は、すぐにメタデータを取得する
-        const linkInput = this.$el.querySelector<HTMLInputElement>("#link");
+        const linkInput = this.$el.querySelector<HTMLInputElement>('#link');
         if (linkInput && /^https?:\/\//.test(linkInput.value)) {
             this.fetchMetadata(linkInput.value);
         }
@@ -52,15 +52,17 @@ new Vue({
                 method: 'get',
                 type: 'json',
                 data: {
-                    url
-                }
-            }).then(data => {
-                this.metadata = data;
-                this.metadataLoadState = MetadataLoadState.Success;
-            }).catch(e => {
-                this.metadata = null;
-                this.metadataLoadState = MetadataLoadState.Failed;
-            });
-        }
-    }
+                    url,
+                },
+            })
+                .then((data) => {
+                    this.metadata = data;
+                    this.metadataLoadState = MetadataLoadState.Success;
+                })
+                .catch((e) => {
+                    this.metadata = null;
+                    this.metadataLoadState = MetadataLoadState.Failed;
+                });
+        },
+    },
 });
diff --git a/resources/assets/js/components/MetadataPreview.vue b/resources/assets/js/components/MetadataPreview.vue
index 895b692..f3e5c7c 100644
--- a/resources/assets/js/components/MetadataPreview.vue
+++ b/resources/assets/js/components/MetadataPreview.vue
@@ -5,23 +5,29 @@
                 <div v-if="state === MetadataLoadState.Loading" class="row no-gutters">
                     <div class="col-12">
                         <div class="card-body">
-                            <h6 class="card-title text-center font-weight-bold text-info" style="font-size: small;"><span class="oi oi-loop-circular"></span> オカズの情報を読み込んでいます…</h6>
+                            <h6 class="card-title text-center font-weight-bold text-info" style="font-size: small;">
+                                <span class="oi oi-loop-circular"></span> オカズの情報を読み込んでいます…
+                            </h6>
                         </div>
                     </div>
                 </div>
                 <div v-else-if="state === MetadataLoadState.Success" class="row no-gutters">
                     <div v-if="hasImage" class="col-4 justify-content-center align-items-center">
-                        <img :src="metadata.image" alt="Thumbnail" class="w-100 bg-secondary">
+                        <img :src="metadata.image" alt="Thumbnail" class="w-100 bg-secondary" />
                     </div>
                     <div :class="descClasses">
                         <div class="card-body">
                             <h6 class="card-title font-weight-bold" style="font-size: small;">{{ metadata.title }}</h6>
                             <template v-if="suggestions.length > 0">
-                                <p class="card-text mb-2" style="font-size: small;">タグ候補<br><span class="text-secondary">(クリックするとタグ入力欄にコピーできます)</span></p>
+                                <p class="card-text mb-2" style="font-size: small;">
+                                    タグ候補<br /><span class="text-secondary"
+                                        >(クリックするとタグ入力欄にコピーできます)</span
+                                    >
+                                </p>
                                 <ul class="list-inline d-inline">
-                                    <li v-for="tag in suggestions"
-                                        :class="tagClasses(tag)"
-                                        @click="addTag(tag.name)"><span class="oi oi-tag"></span> {{ tag.name }}</li>
+                                    <li v-for="tag in suggestions" :class="tagClasses(tag)" @click="addTag(tag.name)">
+                                        <span class="oi oi-tag"></span> {{ tag.name }}
+                                    </li>
                                 </ul>
                             </template>
                         </div>
@@ -30,7 +36,9 @@
                 <div v-else class="row no-gutters">
                     <div class="col-12">
                         <div class="card-body">
-                            <h6 class="card-title text-center font-weight-bold text-danger" style="font-size: small;"><span class="oi oi-circle-x"></span> オカズの情報を読み込めませんでした</h6>
+                            <h6 class="card-title text-center font-weight-bold text-danger" style="font-size: small;">
+                                <span class="oi oi-circle-x"></span> オカズの情報を読み込めませんでした
+                            </h6>
                         </div>
                     </div>
                 </div>
@@ -40,104 +48,104 @@
 </template>
 
 <script lang="ts">
-    import {Vue, Component, Prop} from "vue-property-decorator";
-    import {bus, MetadataLoadState} from "../checkin";
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { bus, MetadataLoadState } from '../checkin';
 
-    type Metadata = {
-        url: string,
-        title: string,
-        description: string,
-        image: string,
-        expires_at: string | null,
-        tags: {
-            name: string
-        }[],
-    };
+type Metadata = {
+    url: string;
+    title: string;
+    description: string;
+    image: string;
+    expires_at: string | null;
+    tags: {
+        name: string;
+    }[];
+};
 
-    type Suggestion = {
-        name: string,
-        used: boolean,
+type Suggestion = {
+    name: string;
+    used: boolean;
+};
+
+@Component
+export default class MetadataPreview extends Vue {
+    @Prop() readonly state!: MetadataLoadState;
+    @Prop() readonly metadata!: Metadata | null;
+
+    // for use in v-if
+    private readonly MetadataLoadState = MetadataLoadState;
+
+    tags: string[] = [];
+
+    created() {
+        bus.$on('change-tag', (tags: string[]) => (this.tags = tags));
+        bus.$emit('resend-tag');
     }
 
-    @Component
-    export default class MetadataPreview extends Vue {
-        @Prop() readonly state!: MetadataLoadState;
-        @Prop() readonly metadata!: Metadata | null;
-
-        // for use in v-if
-        private readonly MetadataLoadState = MetadataLoadState;
-
-        tags: string[] = [];
-
-        created() {
-            bus.$on("change-tag", (tags: string[]) => this.tags = tags);
-            bus.$emit("resend-tag");
-        }
-
-        addTag(tag: string) {
-            bus.$emit("add-tag", tag);
-        }
-
-        tagClasses(s: Suggestion) {
-            return {
-                "list-inline-item": true,
-                "badge": true,
-                "badge-primary": !s.used,
-                "badge-secondary": s.used,
-                "metadata-tag-item": true,
-            };
-        }
-
-        get suggestions(): Suggestion[] {
-            if (this.metadata === null) {
-                return [];
-            }
-
-            return this.metadata.tags.map(t => {
-                return {
-                    name: t.name,
-                    used: this.tags.indexOf(t.name) !== -1
-                };
-            });
-        }
-
-        get hasImage() {
-            return this.metadata !== null && this.metadata.image !== ''
-        }
-
-        get descClasses() {
-            return {
-                "col-8": this.hasImage,
-                "col-12": !this.hasImage,
-            };
-        }
+    addTag(tag: string) {
+        bus.$emit('add-tag', tag);
     }
+
+    tagClasses(s: Suggestion) {
+        return {
+            'list-inline-item': true,
+            badge: true,
+            'badge-primary': !s.used,
+            'badge-secondary': s.used,
+            'metadata-tag-item': true,
+        };
+    }
+
+    get suggestions(): Suggestion[] {
+        if (this.metadata === null) {
+            return [];
+        }
+
+        return this.metadata.tags.map((t) => {
+            return {
+                name: t.name,
+                used: this.tags.indexOf(t.name) !== -1,
+            };
+        });
+    }
+
+    get hasImage() {
+        return this.metadata !== null && this.metadata.image !== '';
+    }
+
+    get descClasses() {
+        return {
+            'col-8': this.hasImage,
+            'col-12': !this.hasImage,
+        };
+    }
+}
 </script>
 
 <style lang="scss" scoped>
-    .link-card-mini {
-        $height: 150px;
-        overflow: hidden;
+.link-card-mini {
+    $height: 150px;
+    overflow: hidden;
 
-        .row > div:first-child {
-            display: flex;
+    .row > div:first-child {
+        display: flex;
 
-            &:not([display=none]) {
-                min-height: $height;
+        &:not([display='none']) {
+            min-height: $height;
 
-                img {
-                    position: absolute;
-                }
+            img {
+                position: absolute;
             }
         }
-
-        .card-text {
-            white-space: pre-line;
-        }
     }
 
-    .metadata-tag-item {
-        cursor: pointer;
-        user-select: none;
+    .card-text {
+        white-space: pre-line;
     }
+}
+
+.metadata-tag-item {
+    cursor: pointer;
+    user-select: none;
+}
 </style>
diff --git a/resources/assets/js/components/TagInput.vue b/resources/assets/js/components/TagInput.vue
index c1d10ef..1a248c4 100644
--- a/resources/assets/js/components/TagInput.vue
+++ b/resources/assets/js/components/TagInput.vue
@@ -1,96 +1,91 @@
 <template>
     <div :class="containerClass" @click="$refs.input.focus()">
-        <input :name="name" type="hidden" :value="tagValue">
+        <input :name="name" type="hidden" :value="tagValue" />
         <ul class="list-inline d-inline">
-            <li v-for="(tag, i) in tags"
-                class="list-inline-item badge badge-primary tag-item"
-                @click="removeTag(i)"><span class="oi oi-tag"></span> {{ tag }} | x</li>
+            <li v-for="(tag, i) in tags" class="list-inline-item badge badge-primary tag-item" @click="removeTag(i)">
+                <span class="oi oi-tag"></span> {{ tag }} | x
+            </li>
         </ul>
-        <input :id="id"
-               ref="input"
-               type="text"
-               class="tag-input"
-               v-model="buffer"
-               @keydown="onKeyDown">
+        <input :id="id" ref="input" type="text" class="tag-input" v-model="buffer" @keydown="onKeyDown" />
     </div>
 </template>
 
 <script lang="ts">
-    import {Vue, Component, Prop, Watch} from "vue-property-decorator";
-    import {bus} from "../checkin";
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { bus } from '../checkin';
 
-    @Component
-    export default class TagInput extends Vue {
-        @Prop(String) readonly id!: string;
-        @Prop(String) readonly name!: string;
-        @Prop(String) readonly value!: string;
-        @Prop(Boolean) readonly isInvalid!: boolean;
+@Component
+export default class TagInput extends Vue {
+    @Prop(String) readonly id!: string;
+    @Prop(String) readonly name!: string;
+    @Prop(String) readonly value!: string;
+    @Prop(Boolean) readonly isInvalid!: boolean;
 
-        tags: string[] = this.value.trim() !== "" ? this.value.trim().split(" ") : [];
-        buffer: string = "";
+    tags: string[] = this.value.trim() !== '' ? this.value.trim().split(' ') : [];
+    buffer = '';
 
-        created() {
-            bus.$on("add-tag", (tag: string) => this.tags.indexOf(tag) === -1 && this.tags.push(tag));
-            bus.$on("resend-tag", () => bus.$emit("change-tag", this.tags));
-        }
+    created() {
+        bus.$on('add-tag', (tag: string) => this.tags.indexOf(tag) === -1 && this.tags.push(tag));
+        bus.$on('resend-tag', () => bus.$emit('change-tag', this.tags));
+    }
 
-        onKeyDown(event: KeyboardEvent) {
-            if (this.buffer.trim() !== "") {
-                switch (event.key) {
-                    case 'Tab':
-                    case 'Enter':
-                    case ' ':
-                        if ((event as any).isComposing !== true) {
-                            this.tags.push(this.buffer.trim());
-                            this.buffer = "";
-                        }
+    onKeyDown(event: KeyboardEvent) {
+        if (this.buffer.trim() !== '') {
+            switch (event.key) {
+                case 'Tab':
+                case 'Enter':
+                case ' ':
+                    if ((event as any).isComposing !== true) {
+                        this.tags.push(this.buffer.trim());
+                        this.buffer = '';
+                    }
+                    event.preventDefault();
+                    break;
+                case 'Unidentified':
+                    // 実際にテキストボックスに入力されている文字を見に行く (フォールバック処理)
+                    if (event.srcElement && (event.srcElement as HTMLInputElement).value.slice(-1) == ' ') {
+                        this.tags.push(this.buffer.trim());
+                        this.buffer = '';
                         event.preventDefault();
-                        break;
-                    case 'Unidentified':
-                        // 実際にテキストボックスに入力されている文字を見に行く (フォールバック処理)
-                        if (event.srcElement && (event.srcElement as HTMLInputElement).value.slice(-1) == ' ') {
-                            this.tags.push(this.buffer.trim());
-                            this.buffer = "";
-                            event.preventDefault();
-                        }
-                        break;
-                }
-            } else if (event.key === "Enter") {
-                // 誤爆防止
-                event.preventDefault();
+                    }
+                    break;
             }
-        }
-
-        removeTag(index: number) {
-            this.tags.splice(index, 1);
-        }
-
-        @Watch("tags")
-        onTagsChanged() {
-            bus.$emit("change-tag", this.tags);
-        }
-
-        get containerClass(): object {
-            return {
-                "form-control": true,
-                "h-auto": true,
-                "is-invalid": this.isInvalid
-            };
-        }
-
-        get tagValue(): string {
-            return this.tags.join(" ");
+        } else if (event.key === 'Enter') {
+            // 誤爆防止
+            event.preventDefault();
         }
     }
+
+    removeTag(index: number) {
+        this.tags.splice(index, 1);
+    }
+
+    @Watch('tags')
+    onTagsChanged() {
+        bus.$emit('change-tag', this.tags);
+    }
+
+    get containerClass(): object {
+        return {
+            'form-control': true,
+            'h-auto': true,
+            'is-invalid': this.isInvalid,
+        };
+    }
+
+    get tagValue(): string {
+        return this.tags.join(' ');
+    }
+}
 </script>
 
 <style lang="scss" scoped>
-    .tag-item {
-        cursor: pointer;
-    }
+.tag-item {
+    cursor: pointer;
+}
 
-    .tag-input {
-        border: 0;
-        outline: 0;
-    }
+.tag-input {
+    border: 0;
+    outline: 0;
+}
 </style>
diff --git a/resources/assets/js/home.ts b/resources/assets/js/home.ts
index 55baa1e..3296c09 100644
--- a/resources/assets/js/home.ts
+++ b/resources/assets/js/home.ts
@@ -8,31 +8,37 @@ new Chart(graph.getContext('2d')!, {
     type: 'bar',
     data: {
         labels,
-        datasets: [{
-            data,
-            backgroundColor: 'rgba(0, 0, 0, .1)',
-            borderColor: 'rgba(0, 0, 0, .25)',
-            borderWidth: 1
-        }]
+        datasets: [
+            {
+                data,
+                backgroundColor: 'rgba(0, 0, 0, .1)',
+                borderColor: 'rgba(0, 0, 0, .25)',
+                borderWidth: 1,
+            },
+        ],
     },
     options: {
         maintainAspectRatio: false,
         legend: {
-            display: false
+            display: false,
         },
         elements: {
-            line: {}
+            line: {},
         },
         scales: {
-            xAxes: [{
-                display: false
-            }],
-            yAxes: [{
-                display: false,
-                ticks: {
-                    beginAtZero: true
-                }
-            }]
-        }
-    }
+            xAxes: [
+                {
+                    display: false,
+                },
+            ],
+            yAxes: [
+                {
+                    display: false,
+                    ticks: {
+                        beginAtZero: true,
+                    },
+                },
+            ],
+        },
+    },
 });
diff --git a/resources/assets/js/setting/privacy.ts b/resources/assets/js/setting/privacy.ts
index 4a042de..961c29e 100644
--- a/resources/assets/js/setting/privacy.ts
+++ b/resources/assets/js/setting/privacy.ts
@@ -1,5 +1,7 @@
 $('#protected').on('change', function () {
     if (!$(this).prop('checked')) {
-        alert('チェックイン履歴を公開に切り替えると、個別に非公開設定されているものを除いた全てのチェックインが誰でも閲覧できるようになります。\nご注意ください。');
+        alert(
+            'チェックイン履歴を公開に切り替えると、個別に非公開設定されているものを除いた全てのチェックインが誰でも閲覧できるようになります。\nご注意ください。'
+        );
     }
-});
\ No newline at end of file
+});
diff --git a/resources/assets/js/tissue.ts b/resources/assets/js/tissue.ts
index e1a5a73..39413ae 100644
--- a/resources/assets/js/tissue.ts
+++ b/resources/assets/js/tissue.ts
@@ -1,9 +1,11 @@
 (function ($) {
-
     $.fn.linkCard = function (options) {
-        const settings = $.extend({
-            endpoint: '/api/checkin/card'
-        }, options);
+        const settings = $.extend(
+            {
+                endpoint: '/api/checkin/card',
+            },
+            options
+        );
 
         return this.each(function () {
             const $this = $(this);
@@ -12,8 +14,8 @@
                 method: 'get',
                 type: 'json',
                 data: {
-                    url: $this.find('a').attr('href')
-                }
+                    url: $this.find('a').attr('href'),
+                },
             }).then(function (data) {
                 const $metaColumn = $this.find('.col-12:last-of-type');
                 const $imageColumn = $this.find('.col-12:first-of-type');
@@ -55,18 +57,20 @@
 
     $.fn.deleteCheckinModal = function () {
         return this.each(function () {
-            $(this).on('show.bs.modal', function (event) {
-                const target = $(event.relatedTarget!);
-                const modal = $(this);
-                modal.find('.modal-body .date-label').text(target.data('date'));
-                modal.data('id', target.data('id'));
-            }).find('.btn-danger').on('click', function (event) {
-                const modal = $('#deleteCheckinModal');
-                const form = modal.find('form');
-                form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
-                form.submit();
-            })
+            $(this)
+                .on('show.bs.modal', function (event) {
+                    const target = $(event.relatedTarget!);
+                    const modal = $(this);
+                    modal.find('.modal-body .date-label').text(target.data('date'));
+                    modal.data('id', target.data('id'));
+                })
+                .find('.btn-danger')
+                .on('click', function (event) {
+                    const modal = $('#deleteCheckinModal');
+                    const form = modal.find('form');
+                    form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
+                    form.submit();
+                });
         });
     };
-
 })(jQuery);
diff --git a/resources/assets/js/user/profile.ts b/resources/assets/js/user/profile.ts
index 809c4e1..e53c8cc 100644
--- a/resources/assets/js/user/profile.ts
+++ b/resources/assets/js/user/profile.ts
@@ -1,5 +1,5 @@
 import * as CalHeatMap from 'cal-heatmap';
-import {subMonths} from 'date-fns';
+import { subMonths } from 'date-fns';
 
 if (document.getElementById('cal-heatmap')) {
     new CalHeatMap().init({
@@ -11,6 +11,6 @@ if (document.getElementById('cal-heatmap')) {
         start: subMonths(new Date(), 9),
         range: 10,
         data: JSON.parse(document.getElementById('count-by-day')!.textContent as string),
-        legend: [1, 2, 3, 4]
+        legend: [1, 2, 3, 4],
     });
 }
diff --git a/resources/assets/js/user/stats.ts b/resources/assets/js/user/stats.ts
index 40b72bd..6fdf74e 100644
--- a/resources/assets/js/user/stats.ts
+++ b/resources/assets/js/user/stats.ts
@@ -1,6 +1,6 @@
 import * as CalHeatMap from 'cal-heatmap';
 import * as Chart from 'chart.js';
-import {addMonths, format} from 'date-fns';
+import { addMonths, format } from 'date-fns';
 
 const graphData = JSON.parse(document.getElementById('graph-data')!.textContent as string);
 
@@ -10,34 +10,38 @@ function createLineGraph(id: string, labels: string[], data: any) {
         type: 'line',
         data: {
             labels: labels,
-            datasets: [{
-                data: data,
-                backgroundColor: 'rgba(255, 99, 132, 0.2)',
-                borderColor: 'rgba(255, 99, 132, 1)',
-                borderWidth: 1
-            }]
+            datasets: [
+                {
+                    data: data,
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                    borderWidth: 1,
+                },
+            ],
         },
         options: {
             legend: {
-                display: false
+                display: false,
             },
             elements: {
                 line: {
-                    tension: 0
-                }
+                    tension: 0,
+                },
             },
             scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }
-                }]
+                yAxes: [
+                    {
+                        ticks: {
+                            beginAtZero: true,
+                        },
+                    },
+                ],
             },
             tooltips: {
                 mode: 'index',
                 intersect: false,
-            }
-        }
+            },
+        },
     });
 }
 
@@ -47,29 +51,33 @@ function createBarGraph(id: string, labels: string[], data: any) {
         type: 'bar',
         data: {
             labels: labels,
-            datasets: [{
-                data: data,
-                backgroundColor: 'rgba(255, 99, 132, 0.2)',
-                borderColor: 'rgba(255, 99, 132, 1)',
-                borderWidth: 1
-            }]
+            datasets: [
+                {
+                    data: data,
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                    borderWidth: 1,
+                },
+            ],
         },
         options: {
             legend: {
-                display: false
+                display: false,
             },
             scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }
-                }]
+                yAxes: [
+                    {
+                        ticks: {
+                            beginAtZero: true,
+                        },
+                    },
+                ],
             },
             tooltips: {
                 mode: 'index',
                 intersect: false,
-            }
-        }
+            },
+        },
     });
 }
 
@@ -84,7 +92,7 @@ function createMonthlyGraphData(from: Date) {
         values.push(graphData.monthlySum[yearAndMonth] || 0);
     }
 
-    return {keys, values};
+    return { keys, values };
 }
 
 function getCurrentYear(): number {
@@ -106,12 +114,14 @@ if (document.getElementById('cal-heatmap')) {
         start: new Date(getCurrentYear(), 0, 1, 0, 0, 0, 0),
         range: 12,
         data: graphData.dailySum,
-        legend: [1, 2, 3, 4]
+        legend: [1, 2, 3, 4],
     });
 }
 
 if (document.getElementById('monthly-graph')) {
-    const {keys: monthlyKey, values: monthlySum} = createMonthlyGraphData(new Date(getCurrentYear(), 0, 1, 0, 0, 0, 0));
+    const { keys: monthlyKey, values: monthlySum } = createMonthlyGraphData(
+        new Date(getCurrentYear(), 0, 1, 0, 0, 0, 0)
+    );
     createLineGraph('monthly-graph', monthlyKey, monthlySum);
 }
 if (document.getElementById('yearly-graph')) {