Merge pull request #393 from shikorism/add-eslint

eslintをいれる

.circleci/config.yml

@@ -105,6 +105,12 @@ jobs:
           command: yarn run stylelint
           when: always
 
+      # Run eslint
+      - run:
+          name: eslint
+          command: yarn run eslint
+          when: always
+
       # Run unit test
       - run:
           command: |

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2020: true,
+        node: true,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:vue/essential',
+        'plugin:prettier/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'prettier',
+        'prettier/@typescript-eslint',
+        'prettier/vue',
+    ],
+    parser: 'vue-eslint-parser',
+    parserOptions: {
+        ecmaVersion: 11,
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+    },
+    plugins: ['prettier', 'vue', '@typescript-eslint'],
+    rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 0,
+        '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    },
+};

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "arrowParens": "always",
+  "singleQuote": true,
+  "printWidth": 120
+}

package.json

@@ -8,6 +8,7 @@
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "eslint": "eslint --ext .js,.ts,.vue resources/",
     "stylelint": "stylelint resources/assets/sass/**/*"
   },
   "devDependencies": {
@@ -16,11 +17,17 @@
     "@types/chart.js": "^2.7.1",
     "@types/jquery": "^3.3.38",
     "@types/js-cookie": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^3.1.0",
+    "@typescript-eslint/parser": "^3.1.0",
     "bootstrap": "^4.5.0",
     "cal-heatmap": "^3.3.10",
     "chart.js": "^2.7.1",
     "cross-env": "^5.2.0",
     "date-fns": "^1.30.1",
+    "eslint": "^7.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
     "husky": "^1.3.1",
     "jquery": "^3.5.0",
     "js-cookie": "^2.2.0",
@@ -29,6 +36,7 @@
     "lint-staged": "^8.1.5",
     "open-iconic": "^1.1.1",
     "popper.js": "^1.14.7",
+    "prettier": "^2.0.5",
     "resolve-url-loader": "^2.3.1",
     "sass": "^1.17.0",
     "sass-loader": "^7.1.0",
@@ -54,6 +62,10 @@
       "stylelint --fix",
       "git add"
     ],
+    ".{ts,js,vue}" : [
+      "eslint --fix",
+      "git add"
+    ],
     "*.php": [
       "composer fix",
       "git add"

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;
 }

resources/assets/js/@types/vue-shims.d.ts

@@ -1,4 +1,4 @@
-declare module "*.vue" {
+declare module '*.vue' {
-    import Vue from "vue";
+    import Vue from 'vue';
     export default Vue;
-}
+}

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 });
             });
     }
 
@@ -29,7 +29,7 @@ $(() => {
         $deleteCheckinModal.modal('show', this);
     });
 
-    $(document).on('click', '[data-href]', function (event) {
+    $(document).on('click', '[data-href]', function (_event) {
         location.href = $(this).data('href');
     });
 
@@ -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) {
@@ -97,9 +97,9 @@ $(() => {
         }
     });
 
-    $(document).on('click', '.card-spoiler-overlay', function (event) {
+    $(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();
     });
 });

resources/assets/js/bootstrap.ts

@@ -8,8 +8,8 @@ if (!token) {
 } else {
     $.ajaxSetup({
         headers: {
-            'X-CSRF-TOKEN': token.content
+            'X-CSRF-TOKEN': token.content,
-        }
+        },
     });
 }
 

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
+                    url,
-                }
+                },
-            }).then(data => {
+            })
-                this.metadata = data;
+                .then((data) => {
-                this.metadataLoadState = MetadataLoadState.Success;
+                    this.metadata = data;
-            }).catch(e => {
+                    this.metadataLoadState = MetadataLoadState.Success;
-                this.metadata = null;
+                })
-                this.metadataLoadState = MetadataLoadState.Failed;
+                .catch((_e) => {
-            });
+                    this.metadata = null;
-        }
+                    this.metadataLoadState = MetadataLoadState.Failed;
-    }
+                });
+        },
+    },
 });

resources/assets/js/components/MetadataPreview.vue

@@ -5,23 +5,34 @@
                 <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"
+                                    <li
+                                        v-for="tag in suggestions"
                                         :class="tagClasses(tag)"
-                                        @click="addTag(tag.name)"><span class="oi oi-tag"></span> {{ tag.name }}</li>
+                                        @click="addTag(tag.name)"
+                                        :key="tag.name"
+                                    >
+                                        <span class="oi oi-tag"></span> {{ tag.name }}
+                                    </li>
                                 </ul>
                             </template>
                         </div>
@@ -30,7 +41,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 +53,104 @@
 </template>
 
 <script lang="ts">
-    import {Vue, Component, Prop} from "vue-property-decorator";
+import { Vue, Component, Prop } from 'vue-property-decorator';
-    import {bus, MetadataLoadState} from "../checkin";
+import { bus, MetadataLoadState } from '../checkin';
 
-    type Metadata = {
+type Metadata = {
-        url: string,
+    url: string;
-        title: string,
+    title: string;
-        description: string,
+    description: string;
-        image: string,
+    image: string;
-        expires_at: string | null,
+    expires_at: string | null;
-        tags: {
+    tags: {
-            name: string
+        name: string;
-        }[],
+    }[];
-    };
+};
 
-    type Suggestion = {
+type Suggestion = {
-        name: string,
+    name: string;
-        used: boolean,
+    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(): void {
+        bus.$on('change-tag', (tags: string[]) => (this.tags = tags));
+        bus.$emit('resend-tag');
     }
 
-    @Component
+    addTag(tag: string): void {
-    export default class MetadataPreview extends Vue {
+        bus.$emit('add-tag', tag);
-        @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,
-            };
-        }
     }
+
+    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 {
+.link-card-mini {
-        $height: 150px;
+    $height: 150px;
-        overflow: hidden;
+    overflow: hidden;
 
-        .row > div:first-child {
+    .row > div:first-child {
-            display: flex;
+        display: flex;
 
-            &:not([display=none]) {
+        &:not([display='none']) {
-                min-height: $height;
+            min-height: $height;
 
-                img {
+            img {
-                    position: absolute;
+                position: absolute;
-                }
             }
         }
-
-        .card-text {
-            white-space: pre-line;
-        }
     }
 
-    .metadata-tag-item {
+    .card-text {
-        cursor: pointer;
+        white-space: pre-line;
-        user-select: none;
     }
+}
+
+.metadata-tag-item {
+    cursor: pointer;
+    user-select: none;
+}
 </style>

resources/assets/js/components/TagInput.vue

@@ -1,96 +1,96 @@
 <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"
+            <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>
+                @click="removeTag(i)"
+                :key="tag"
+            >
+                <span class="oi oi-tag"></span> {{ tag }} | x
+            </li>
         </ul>
-        <input :id="id"
+        <input :id="id" ref="input" type="text" class="tag-input" v-model="buffer" @keydown="onKeyDown" />
-               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 { Vue, Component, Prop, Watch } from 'vue-property-decorator';
-    import {bus} from "../checkin";
+import { bus } from '../checkin';
 
-    @Component
+@Component
-    export default class TagInput extends Vue {
+export default class TagInput extends Vue {
-        @Prop(String) readonly id!: string;
+    @Prop(String) readonly id!: string;
-        @Prop(String) readonly name!: string;
+    @Prop(String) readonly name!: string;
-        @Prop(String) readonly value!: string;
+    @Prop(String) readonly value!: string;
-        @Prop(Boolean) readonly isInvalid!: boolean;
+    @Prop(Boolean) readonly isInvalid!: boolean;
 
-        tags: string[] = this.value.trim() !== "" ? this.value.trim().split(" ") : [];
+    tags: string[] = this.value.trim() !== '' ? this.value.trim().split(' ') : [];
-        buffer: string = "";
+    buffer = '';
 
-        created() {
+    created() {
-            bus.$on("add-tag", (tag: string) => this.tags.indexOf(tag) === -1 && this.tags.push(tag));
+        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));
+        bus.$on('resend-tag', () => bus.$emit('change-tag', this.tags));
-        }
+    }
 
-        onKeyDown(event: KeyboardEvent) {
+    onKeyDown(event: KeyboardEvent) {
-            if (this.buffer.trim() !== "") {
+        if (this.buffer.trim() !== '') {
-                switch (event.key) {
+            switch (event.key) {
-                    case 'Tab':
+                case 'Tab':
-                    case 'Enter':
+                case 'Enter':
-                    case ' ':
+                case ' ':
-                        if ((event as any).isComposing !== true) {
+                    if ((event as any).isComposing !== true) {
-                            this.tags.push(this.buffer.trim());
+                        this.tags.push(this.buffer.trim());
-                            this.buffer = "";
+                        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':
+                    break;
-                        // 実際にテキストボックスに入力されている文字を見に行く (フォールバック処理)
-                        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();
             }
-        }
+        } else if (event.key === 'Enter') {
-
+            // 誤爆防止
-        removeTag(index: number) {
+            event.preventDefault();
-            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(" ");
         }
     }
+
+    removeTag(index: number) {
+        this.tags.splice(index, 1);
+    }
+
+    @Watch('tags')
+    onTagsChanged() {
+        bus.$emit('change-tag', this.tags);
+    }
+
+    get containerClass() {
+        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 {
+.tag-item {
-        cursor: pointer;
+    cursor: pointer;
-    }
+}
 
-    .tag-input {
+.tag-input {
-        border: 0;
+    border: 0;
-        outline: 0;
+    outline: 0;
-    }
+}
 </style>

resources/assets/js/home.ts

@@ -1,38 +1,47 @@
 import * as Chart from 'chart.js';
 
 const graph = document.getElementById('global-count-graph') as HTMLCanvasElement;
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const labels = JSON.parse(document.getElementById('global-count-labels')!.textContent as string);
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const data = JSON.parse(document.getElementById('global-count-data')!.textContent as string);
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 new Chart(graph.getContext('2d')!, {
     type: 'bar',
     data: {
         labels,
-        datasets: [{
+        datasets: [
-            data,
+            {
-            backgroundColor: 'rgba(0, 0, 0, .1)',
+                data,
-            borderColor: 'rgba(0, 0, 0, .25)',
+                backgroundColor: 'rgba(0, 0, 0, .1)',
-            borderWidth: 1
+                borderColor: 'rgba(0, 0, 0, .25)',
-        }]
+                borderWidth: 1,
+            },
+        ],
     },
     options: {
         maintainAspectRatio: false,
         legend: {
-            display: false
+            display: false,
         },
         elements: {
-            line: {}
+            line: {},
         },
         scales: {
-            xAxes: [{
+            xAxes: [
-                display: false
+                {
-            }],
+                    display: false,
-            yAxes: [{
+                },
-                display: false,
+            ],
-                ticks: {
+            yAxes: [
-                    beginAtZero: true
+                {
-                }
+                    display: false,
-            }]
+                    ticks: {
-        }
+                        beginAtZero: true,
-    }
+                    },
+                },
+            ],
+        },
+    },
 });

resources/assets/js/setting/privacy.ts

@@ -1,5 +1,7 @@
 $('#protected').on('change', function () {
     if (!$(this).prop('checked')) {
-        alert('チェックイン履歴を公開に切り替えると、個別に非公開設定されているものを除いた全てのチェックインが誰でも閲覧できるようになります。\nご注意ください。');
+        alert(
+            'チェックイン履歴を公開に切り替えると、個別に非公開設定されているものを除いた全てのチェックインが誰でも閲覧できるようになります。\nご注意ください。'
+        );
     }
-});
+});

resources/assets/js/tissue.ts

@@ -1,9 +1,11 @@
 (function ($) {
-
     $.fn.linkCard = function (options) {
-        const settings = $.extend({
+        const settings = $.extend(
-            endpoint: '/api/checkin/card'
+            {
-        }, options);
+                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,21 @@
 
     $.fn.deleteCheckinModal = function () {
         return this.each(function () {
-            $(this).on('show.bs.modal', function (event) {
+            $(this)
-                const target = $(event.relatedTarget!);
+                .on('show.bs.modal', function (event) {
-                const modal = $(this);
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                modal.find('.modal-body .date-label').text(target.data('date'));
+                    const target = $(event.relatedTarget!);
-                modal.data('id', target.data('id'));
+                    const modal = $(this);
-            }).find('.btn-danger').on('click', function (event) {
+                    modal.find('.modal-body .date-label').text(target.data('date'));
-                const modal = $('#deleteCheckinModal');
+                    modal.data('id', target.data('id'));
-                const form = modal.find('form');
+                })
-                form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
+                .find('.btn-danger')
-                form.submit();
+                .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);

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({
@@ -10,7 +10,8 @@ if (document.getElementById('cal-heatmap')) {
         weekStartOnMonday: false,
         start: subMonths(new Date(), 9),
         range: 10,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         data: JSON.parse(document.getElementById('count-by-day')!.textContent as string),
-        legend: [1, 2, 3, 4]
+        legend: [1, 2, 3, 4],
     });
 }

resources/assets/js/user/stats.ts

@@ -1,75 +1,86 @@
 import * as CalHeatMap from 'cal-heatmap';
 import * as Chart from 'chart.js';
-import {addMonths, format} from 'date-fns';
+import { addMonths, format } from 'date-fns';
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const graphData = JSON.parse(document.getElementById('graph-data')!.textContent as string);
 
 function createLineGraph(id: string, labels: string[], data: any) {
     const context = (document.getElementById(id) as HTMLCanvasElement).getContext('2d');
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     return new Chart(context!, {
         type: 'line',
         data: {
             labels: labels,
-            datasets: [{
+            datasets: [
-                data: data,
+                {
-                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    data: data,
-                borderColor: 'rgba(255, 99, 132, 1)',
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
-                borderWidth: 1
+                    borderColor: 'rgba(255, 99, 132, 1)',
-            }]
+                    borderWidth: 1,
+                },
+            ],
         },
         options: {
             legend: {
-                display: false
+                display: false,
             },
             elements: {
                 line: {
-                    tension: 0
+                    tension: 0,
-                }
+                },
             },
             scales: {
-                yAxes: [{
+                yAxes: [
-                    ticks: {
+                    {
-                        beginAtZero: true
+                        ticks: {
-                    }
+                            beginAtZero: true,
-                }]
+                        },
+                    },
+                ],
             },
             tooltips: {
                 mode: 'index',
                 intersect: false,
-            }
+            },
-        }
+        },
     });
 }
 
 function createBarGraph(id: string, labels: string[], data: any) {
     const context = (document.getElementById(id) as HTMLCanvasElement).getContext('2d');
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     new Chart(context!, {
         type: 'bar',
         data: {
             labels: labels,
-            datasets: [{
+            datasets: [
-                data: data,
+                {
-                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    data: data,
-                borderColor: 'rgba(255, 99, 132, 1)',
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
-                borderWidth: 1
+                    borderColor: 'rgba(255, 99, 132, 1)',
-            }]
+                    borderWidth: 1,
+                },
+            ],
         },
         options: {
             legend: {
-                display: false
+                display: false,
             },
             scales: {
-                yAxes: [{
+                yAxes: [
-                    ticks: {
+                    {
-                        beginAtZero: true
+                        ticks: {
-                    }
+                            beginAtZero: true,
-                }]
+                        },
+                    },
+                ],
             },
             tooltips: {
                 mode: 'index',
                 intersect: false,
-            }
+            },
-        }
+        },
     });
 }
 
@@ -84,7 +95,7 @@ function createMonthlyGraphData(from: Date) {
         values.push(graphData.monthlySum[yearAndMonth] || 0);
     }
 
-    return {keys, values};
+    return { keys, values };
 }
 
 function getCurrentYear(): number {
@@ -106,12 +117,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')) {