From 6dfa1d420fb73ccb49644068fefb42d6af7f1c66 Mon Sep 17 00:00:00 2001 From: Jeff Wang Date: Fri, 6 Apr 2018 11:44:01 -0700 Subject: [PATCH] Eslint precommit (#368) * Create pre-commit with ESLint * add vue-eslint-parser * Add prop-name-casing and script-indent to the eslint rule. * Update Javascript and Vue files with the proper style * Comment out ESlint pre-commit first to udpate styles --- .eslint_format.hook | 21 + .pre-commit-config.yaml | 8 + frontend/.eslintrc.js | 2 + frontend/package.json | 1 + frontend/src/App.vue | 32 +- frontend/src/audio/Audio.vue | 220 ++-- frontend/src/audio/index.js | 6 +- frontend/src/audio/ui/AudioPanel.vue | 170 +-- frontend/src/audio/ui/AudioPanelContainer.vue | 62 +- frontend/src/audio/ui/Config.vue | 24 +- frontend/src/common/component/AppMenu.vue | 90 +- frontend/src/common/component/ExpandPanel.vue | 26 +- .../component/Notification/Notification.js | 112 +- frontend/src/common/util/autoAdjustHeight.js | 16 +- frontend/src/common/util/downLoadFile.js | 82 +- frontend/src/common/util/http.js | 42 +- frontend/src/common/util/index.js | 2 +- frontend/src/common/util/number.js | 2 +- frontend/src/common/util/quantile.js | 36 +- frontend/src/common/util/routeTo.js | 6 +- frontend/src/graph/Graph.vue | 50 +- frontend/src/graph/index.js | 6 +- frontend/src/graph/ui/Chart.vue | 524 ++++----- frontend/src/graph/ui/Config.vue | 16 +- frontend/src/graph/ui/dragHelper.js | 30 +- .../src/high-dimensional/HighDimensional.vue | 90 +- frontend/src/high-dimensional/ui/Chart.vue | 322 ++--- frontend/src/high-dimensional/ui/Config.vue | 24 +- frontend/src/histogram/Histogram.vue | 204 ++-- frontend/src/histogram/histogramHelper.js | 102 +- frontend/src/histogram/index.js | 6 +- frontend/src/histogram/ui/Chart.vue | 912 +++++++-------- frontend/src/histogram/ui/ChartPage.vue | 74 +- frontend/src/histogram/ui/Config.vue | 38 +- frontend/src/images/Images.vue | 222 ++-- frontend/src/images/index.js | 6 +- frontend/src/images/ui/ChartPage.vue | 62 +- frontend/src/images/ui/Config.vue | 24 +- frontend/src/images/ui/Image.vue | 194 ++-- frontend/src/index.js | 18 +- frontend/src/scalars/Scalars.vue | 206 ++-- frontend/src/scalars/index.js | 12 +- frontend/src/scalars/ui/Chart.vue | 1034 ++++++++--------- frontend/src/scalars/ui/ChartPage.vue | 66 +- frontend/src/scalars/ui/Config.vue | 72 +- frontend/src/texts/Texts.vue | 218 ++-- frontend/src/texts/index.js | 6 +- frontend/src/texts/ui/Chart.vue | 172 +-- frontend/src/texts/ui/ChartPage.vue | 62 +- frontend/src/texts/ui/Config.vue | 24 +- 50 files changed, 2894 insertions(+), 2862 deletions(-) create mode 100755 .eslint_format.hook diff --git a/.eslint_format.hook b/.eslint_format.hook new file mode 100755 index 00000000..a08fa0a4 --- /dev/null +++ b/.eslint_format.hook @@ -0,0 +1,21 @@ +#!/bin/bash + +# if there are no staged changes, we can exit immediately +# this is fast and prevents issues when popping a stash we didn't create +STAGED_CHANGES=`git diff-index --cached HEAD --name-only --diff-filter ACMR` + +if [ -z "$STAGED_CHANGES" ]; then + exit 0 +fi + +# Capture the path to the eslint +cd frontend +ESLINT_EXECUTABLE=$(npm bin)/eslint +cd .. + +# Test against with both .js and .vue files +git diff --cached --name-only --diff-filter ACMR | egrep '.(js|vue)$' | xargs $ESLINT_EXECUTABLE --fix +RESULT=$? + +[ $RESULT -ne 0 ] && exit 1 +exit 0 diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index f70fa5d4..178ae537 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -33,3 +33,11 @@ entry: flake8 language: system files: \.(py)$ + +#- repo: local +# hooks: +# - id: eslint-format-checker +# name: eslint-format-checker +# description: Format files with ESLint. +# entry: bash ./.eslint_format.hook +# language: system diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 6f8e4660..f66d7f66 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -9,5 +9,7 @@ module.exports = { // override/add rules settings here, such as: 'vue/no-unused-vars': 'warn', 'max-len': ["warn", 120], + "vue/prop-name-casing": ["error"], + 'vue/script-indent': 'error', } } diff --git a/frontend/package.json b/frontend/package.json index eef44122..c5dc38f5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -73,6 +73,7 @@ "stylus": "^0.54.5", "stylus-loader": "^3.0.1", "url-loader": "^0.5.8", + "vue-eslint-parser": "^2.0.3", "vue-jest": "^1.0.2", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index d84d1a1b..ec4b8bbb 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -11,22 +11,22 @@ import AppMenu from './common/component/AppMenu'; export default { - name: 'App', - components: { - AppMenu, - }, - data() { - return { - initialRoute: 'scalars', - }; - }, - created() { - if (location.hash && location.hash != '#/') { - this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2]; - } else { - location.hash = '#/scalars'; - } - }, + name: 'App', + components: { + AppMenu, + }, + data() { + return { + initialRoute: 'scalars', + }; + }, + created() { + if (location.hash && location.hash != '#/') { + this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2]; + } else { + location.hash = '#/scalars'; + } + }, }; diff --git a/frontend/src/audio/Audio.vue b/frontend/src/audio/Audio.vue index 2a894064..e5ff7120 100644 --- a/frontend/src/audio/Audio.vue +++ b/frontend/src/audio/Audio.vue @@ -38,127 +38,127 @@ import Config from './ui/Config'; import AudioPanelContainer from './ui/AudioPanelContainer'; export default { - name: 'Images', - components: { - 'ui-config': Config, - 'ui-audio-container': AudioPanelContainer, - }, - data() { + name: 'Images', + components: { + 'ui-config': Config, + 'ui-audio-container': AudioPanelContainer, + }, + data() { + return { + runsArray: [], + tags: [], + config: { + groupNameReg: '.*', + isActualImageSize: false, + runs: [], + running: true, + }, + filteredTagsList: [], + }; + }, + computed: { + runsItems() { + let runsArray = this.runsArray || []; + return runsArray.map((item) => { return { - runsArray: [], - tags: [], - config: { - groupNameReg: '.*', - isActualImageSize: false, - runs: [], - running: true, - }, - filteredTagsList: [], + name: item, + value: item, }; + }); }, - computed: { - runsItems() { - let runsArray = this.runsArray || []; - return runsArray.map((item) => { - return { - name: item, - value: item, - }; - }); - }, - tagsList() { - let tags = this.tags; - - let runs = Object.keys(tags); - let tagsArray = runs.map((run) => Object.keys(tags[run])); - let allUniqTags = uniq(flatten(tagsArray)); + tagsList() { + let tags = this.tags; - // get the data for every chart - return allUniqTags.map((tag) => { - let tagList = runs.map((run) => { - return { - run, - tag: tags[run][tag], - }; - }).filter((item) => item.tag !== undefined); - return { - tagList, - tag, - group: tag.split('/')[0], - }; - }); - }, - groupedTags() { - let tagsList = this.tagsList || []; - // put data in group - let groupData = {}; - tagsList.forEach((item) => { - let group = item.group; - if (groupData[group] === undefined) { - groupData[group] = []; - groupData[group].push(item); - } else { - groupData[group].push(item); - } - }); + let runs = Object.keys(tags); + let tagsArray = runs.map((run) => Object.keys(tags[run])); + let allUniqTags = uniq(flatten(tagsArray)); - // to array - let groups = Object.keys(groupData); - return groups.map((group) => { - return { - group, - tags: groupData[group], - }; - }); - }, - filteredConfig() { - let config = this.config || {}; - let filteredConfig = {}; - Object.keys(config).forEach((key) => { - let val = config[key]; - filteredConfig[key] = val; - }); - return filteredConfig; - }, + // get the data for every chart + return allUniqTags.map((tag) => { + let tagList = runs.map((run) => { + return { + run, + tag: tags[run][tag], + }; + }).filter((item) => item.tag !== undefined); + return { + tagList, + tag, + group: tag.split('/')[0], + }; + }); }, - created() { - getPluginAudioTags().then(({errno, data}) => { - this.tags = data; - - // filter when inited - let groupNameReg = this.config.groupNameReg; - this.filterTagsList(groupNameReg); - }); + groupedTags() { + let tagsList = this.tagsList || []; + // put data in group + let groupData = {}; + tagsList.forEach((item) => { + let group = item.group; + if (groupData[group] === undefined) { + groupData[group] = []; + groupData[group].push(item); + } else { + groupData[group].push(item); + } + }); - getRuns().then(({errno, data}) => { - this.runsArray = data; - this.config.runs = data; - }); + // to array + let groups = Object.keys(groupData); + return groups.map((group) => { + return { + group, + tags: groupData[group], + }; + }); }, - mounted() { - autoAdjustHeight(); + filteredConfig() { + let config = this.config || {}; + let filteredConfig = {}; + Object.keys(config).forEach((key) => { + let val = config[key]; + filteredConfig[key] = val; + }); + return filteredConfig; }, - watch: { - 'config.groupNameReg': function(val) { - this.throttledFilterTagsList(); - }, + }, + created() { + getPluginAudioTags().then(({errno, data}) => { + this.tags = data; + + // filter when inited + let groupNameReg = this.config.groupNameReg; + this.filterTagsList(groupNameReg); + }); + + getRuns().then(({errno, data}) => { + this.runsArray = data; + this.config.runs = data; + }); + }, + mounted() { + autoAdjustHeight(); + }, + watch: { + 'config.groupNameReg': function(val) { + this.throttledFilterTagsList(); }, - methods: { - filterTagsList(groupNameReg) { - if (!groupNameReg) { - this.filteredTagsList = []; - return; - } - let tagsList = this.tagsList || []; - let regExp = new RegExp(groupNameReg); - this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag)); - }, - throttledFilterTagsList: _.debounce( - function() { - this.filterTagsList(this.config.groupNameReg); - }, 300 - ), + }, + methods: { + filterTagsList(groupNameReg) { + if (!groupNameReg) { + this.filteredTagsList = []; + return; + } + let tagsList = this.tagsList || []; + let regExp = new RegExp(groupNameReg); + this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag)); }, + throttledFilterTagsList: _.debounce( + function() { + this.filterTagsList(this.config.groupNameReg); + }, 300 + ), + }, }; diff --git a/frontend/src/audio/index.js b/frontend/src/audio/index.js index fac00d60..7ba6a3d8 100644 --- a/frontend/src/audio/index.js +++ b/frontend/src/audio/index.js @@ -3,7 +3,7 @@ import {router} from 'san-router'; import Audio from './Audio'; router.add({ - target: '#content', - rule: '/audio', - Component: Audio, + target: '#content', + rule: '/audio', + Component: Audio, }); diff --git a/frontend/src/audio/ui/AudioPanel.vue b/frontend/src/audio/ui/AudioPanel.vue index 1fd8ee91..bdd7bbd6 100644 --- a/frontend/src/audio/ui/AudioPanel.vue +++ b/frontend/src/audio/ui/AudioPanel.vue @@ -31,99 +31,99 @@ import {getPluginAudioAudio} from '../../service'; const intervalTime = 30; export default { - props: ['tagInfo', 'runs', 'running', 'runsItems'], - computed: { - steps() { - let data = this.data || []; - return data.length - 1; - }, + props: ['tagInfo', 'runs', 'running', 'runsItems'], + computed: { + steps() { + let data = this.data || []; + return data.length - 1; }, - filters: { - formatTime: function(value) { - if (!value) { - return; - } - // The value was made in seconds, must convert it to milliseconds - let time = new Date(value * 1000); - let options = { - weekday: 'short', year: 'numeric', month: 'short', - day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', - }; - return time.toLocaleDateString('en-US', options); - }, + }, + filters: { + formatTime: function(value) { + if (!value) { + return; + } + // The value was made in seconds, must convert it to milliseconds + let time = new Date(value * 1000); + let options = { + weekday: 'short', year: 'numeric', month: 'short', + day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', + }; + return time.toLocaleDateString('en-US', options); }, - data() { - return { - currentIndex: 0, - slider: { - value: '0', - label: '', - min: 0, - step: 1, - }, - audioData: {}, - data: [], + }, + data() { + return { + currentIndex: 0, + slider: { + value: '0', + label: '', + min: 0, + step: 1, + }, + audioData: {}, + data: [], + }; + }, + created() { + this.getOriginAudioData(); + }, + mounted() { + if (this.running) { + this.startInterval(); + } + }, + + beforeDestroy() { + this.stopInterval(); + }, + + watch: { + running: function(val) { + val ? this.startInterval() : this.stopInterval(); + }, + currentIndex: function(index) { + if (this.data && this.data[index]) { + let currentAudioInfo = this.data ? this.data[index] : {}; + let {query, step, wall_time} = currentAudioInfo; + let url = '/data/plugin/audio/individualAudio?ts=' + wall_time; + let audioSrc = [url, query].join('&'); + this.audioData = { + audioSrc, + step, + wall_time, }; + } }, - created() { + }, + methods: { + stopInterval() { + clearInterval(this.getOringDataInterval); + }, + // get origin data per {{intervalTime}} seconds + startInterval() { + this.getOringDataInterval = setInterval(() => { this.getOriginAudioData(); + }, intervalTime * 1000); }, - mounted() { - if (this.running) { - this.startInterval(); + getOriginAudioData() { + // let {run, tag} = this.tagInfo; + let run = this.tagInfo.run; + let tag = this.tagInfo.tag; + let {displayName, samples} = tag; + let params = { + run, + tag: displayName, + samples, + }; + getPluginAudioAudio(params).then(({status, data}) => { + if (status === 0) { + this.data = data; + this.currentIndex = data.length - 1; } + }); }, - - beforeDestroy() { - this.stopInterval(); - }, - - watch: { - running: function(val) { - val ? this.startInterval() : this.stopInterval(); - }, - currentIndex: function(index) { - if (this.data && this.data[index]) { - let currentAudioInfo = this.data ? this.data[index] : {}; - let {query, step, wall_time} = currentAudioInfo; - let url = '/data/plugin/audio/individualAudio?ts=' + wall_time; - let audioSrc = [url, query].join('&'); - this.audioData = { - audioSrc, - step, - wall_time, - }; - } - }, - }, - methods: { - stopInterval() { - clearInterval(this.getOringDataInterval); - }, - // get origin data per {{intervalTime}} seconds - startInterval() { - this.getOringDataInterval = setInterval(() => { - this.getOriginAudioData(); - }, intervalTime * 1000); - }, - getOriginAudioData() { - // let {run, tag} = this.tagInfo; - let run = this.tagInfo.run; - let tag = this.tagInfo.tag; - let {displayName, samples} = tag; - let params = { - run, - tag: displayName, - samples, - }; - getPluginAudioAudio(params).then(({status, data}) => { - if (status === 0) { - this.data = data; - this.currentIndex = data.length - 1; - } - }); - }, - }, + }, };