mirror of
https://github.com/simon987/music-graph-ui.git
synced 2025-04-18 01:26:43 +00:00
Update packages
This commit is contained in:
simon987
parent
797fae9ec1
commit
fc431e5346
12
ui/.babelrc
Normal file
12
ui/.babelrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-vue-jsx", "transform-runtime"]
|
||||
}
|
||||
4
ui/.eslintignore
Normal file
4
ui/.eslintignore
Normal file
@ -0,0 +1,4 @@
|
||||
/build/
|
||||
/config/
|
||||
/dist/
|
||||
/*.js
|
||||
34
ui/.eslintrc.js
Normal file
34
ui/.eslintrc.js
Normal file
@ -0,0 +1,34 @@
|
||||
// https://eslint.org/docs/user-guide/configuring
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
extends: [
|
||||
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
||||
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
||||
'plugin:vue/essential',
|
||||
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
|
||||
'standard'
|
||||
],
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'vue'
|
||||
],
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// allow async-await
|
||||
'generator-star-spacing': 'off',
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
|
||||
"indent": "off",
|
||||
"indent-legacy": ["error", 4],
|
||||
"no-param-reassign": 0,
|
||||
"no-underscore-dangle": 0,
|
||||
}
|
||||
};
|
||||
10
ui/.postcssrc.js
Normal file
10
ui/.postcssrc.js
Normal file
@ -0,0 +1,10 @@
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
"plugins": {
|
||||
"postcss-import": {},
|
||||
"postcss-url": {},
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
7
ui/config/dev.env.js
Normal file
7
ui/config/dev.env.js
Normal file
@ -0,0 +1,7 @@
|
||||
'use strict'
|
||||
const merge = require('webpack-merge')
|
||||
const prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
76
ui/config/index.js
Normal file
76
ui/config/index.js
Normal file
@ -0,0 +1,76 @@
|
||||
'use strict'
|
||||
// Template version: 1.3.1
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
dev: {
|
||||
|
||||
// Paths
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
|
||||
// Various Dev Server settings
|
||||
host: 'localhost', // can be overwritten by process.env.HOST
|
||||
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||
autoOpenBrowser: false,
|
||||
errorOverlay: true,
|
||||
notifyOnErrors: true,
|
||||
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
||||
|
||||
// Use Eslint Loader?
|
||||
// If true, your code will be linted during bundling and
|
||||
// linting errors and warnings will be shown in the console.
|
||||
useEslint: true,
|
||||
// If true, eslint errors and warnings will also be shown in the error overlay
|
||||
// in the browser.
|
||||
showEslintErrorsInOverlay: false,
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
*/
|
||||
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
devtool: 'cheap-module-eval-source-map',
|
||||
|
||||
// If you have problems debugging vue-files in devtools,
|
||||
// set this to false - it *may* help
|
||||
// https://vue-loader.vuejs.org/en/options.html#cachebusting
|
||||
cacheBusting: true,
|
||||
|
||||
cssSourceMap: true
|
||||
},
|
||||
|
||||
build: {
|
||||
// Template for index.html
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
|
||||
// Paths
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
*/
|
||||
|
||||
productionSourceMap: true,
|
||||
// https://webpack.js.org/configuration/devtool/#production
|
||||
devtool: '#source-map',
|
||||
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report
|
||||
}
|
||||
}
|
||||
4
ui/config/prod.env.js
Normal file
4
ui/config/prod.env.js
Normal file
@ -0,0 +1,4 @@
|
||||
'use strict'
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
12
ui/index.html
Normal file
12
ui/index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>music_graph</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"modules": false
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
"lodash",
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-default"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
build/*.js
|
||||
config/*.js
|
||||
@ -1,53 +0,0 @@
|
||||
// http://eslint.org/docs/user-guide/configuring
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
sourceType: 'module'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
extends: 'airbnb-base',
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'html'
|
||||
],
|
||||
// check if imports actually resolve
|
||||
'settings': {
|
||||
'import/resolver': {
|
||||
'webpack': {
|
||||
'config': 'build/webpack.base.js'
|
||||
}
|
||||
}
|
||||
},
|
||||
// add your custom rules here
|
||||
'rules': {
|
||||
// Indent with 4 spaces
|
||||
"indent": ["error", 4],
|
||||
"no-param-reassign": 0,
|
||||
"no-underscore-dangle": 0,
|
||||
// don't require .vue extension when importing
|
||||
'import/extensions': ['error', 'always', {
|
||||
'js': 'never',
|
||||
'vue': 'never'
|
||||
}],
|
||||
// allow optionalDependencies
|
||||
'import/no-extraneous-dependencies': ['error', {
|
||||
'optionalDependencies': ['test/unit/index.js']
|
||||
}],
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
|
||||
},
|
||||
"globals": {
|
||||
"describe": true,
|
||||
"it": true,
|
||||
"expect": true,
|
||||
"window": true,
|
||||
"document": true,
|
||||
"__DEV__": true,
|
||||
"__PROD__": true,
|
||||
"__APP_MODE__": ""
|
||||
},
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
const API_URL = '//app.example.com/api';
|
||||
const API_VERSION = '2.0';
|
||||
const BASE_URL = `${API_URL}/${API_VERSION}`;
|
||||
|
||||
exports.getURL = url => BASE_URL + url;
|
||||
|
||||
module.exports = {
|
||||
appName: 'Some App Specific Mode',
|
||||
otherAPI: exports.getURL('/something/')
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
const API_URL = '//app.example.com/api';
|
||||
const API_VERSION = '1.0';
|
||||
const BASE_URL = `${API_URL}/${API_VERSION}`;
|
||||
|
||||
exports.getURL = url => BASE_URL + url;
|
||||
|
||||
module.exports = {
|
||||
appName: 'Default App',
|
||||
debug: false,
|
||||
sessionName: 'session_id',
|
||||
credential: 'same-origin',
|
||||
exampleAPI: exports.getURL('/thing/')
|
||||
};
|
||||
@ -1,26 +0,0 @@
|
||||
const path = require('path');
|
||||
const API_URL = '//localhost:7000/api';
|
||||
const API_VERSION = '1.0';
|
||||
const BASE_URL = `${API_URL}/${API_VERSION}`;
|
||||
|
||||
exports.getURL = url => BASE_URL + url;
|
||||
|
||||
module.exports = {
|
||||
appName: 'Dev App',
|
||||
debug: true,
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'assets',
|
||||
assetsPublicPath: '/',
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report,
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
const path = require('path');
|
||||
const API_URL = '//app.production.com/api';
|
||||
const API_VERSION = '2.0';
|
||||
const BASE_URL = `${API_URL}/${API_VERSION}`;
|
||||
|
||||
exports.getURL = url => BASE_URL + url;
|
||||
|
||||
module.exports = {
|
||||
appName: 'Prod App',
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'assets',
|
||||
assetsPublicPath: '/',
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report,
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
const merge = require('webpack-merge');
|
||||
|
||||
const DEV = 'development';
|
||||
const PROD = 'production';
|
||||
const env = process.env.NODE_ENV || DEV;
|
||||
const isDev = env === DEV;
|
||||
const isProd = env === PROD;
|
||||
|
||||
const appMode = process.env.NODE_APP_MODE || 'app';
|
||||
|
||||
const defaults = {
|
||||
env,
|
||||
isProd,
|
||||
isDev,
|
||||
appMode,
|
||||
};
|
||||
|
||||
const baseConfig = require('./config.base');
|
||||
const envConfig = require(`./config.${env}`);
|
||||
const appConfig = require(`./config.${appMode}`);
|
||||
|
||||
const config = merge(defaults, baseConfig, envConfig, appConfig);
|
||||
|
||||
module.exports = config;
|
||||
@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>music_graph</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,65 +0,0 @@
|
||||
{
|
||||
"name": "music_graph",
|
||||
"description": "wip",
|
||||
"version": "1.0.0",
|
||||
"author": "simon987 <>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development NODE_APP_MODE=app webpack-dev-server --open --hot",
|
||||
"build": "cross-env NODE_ENV=production NODE_APP_MODE=app webpack --progress --hide-modules",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3": "^5.9.2",
|
||||
"d3-force": "^2.0.1",
|
||||
"vue": "^2.4.2",
|
||||
"vue-router": "^2.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios": "^0.16.2",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-eslint": "^7.2.3",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"compression-webpack-plugin": "^1.0.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"cross-env": "^5.0.5",
|
||||
"css-loader": "^0.28.4",
|
||||
"eslint": "^4.4.1",
|
||||
"eslint-loader": "^1.9.0",
|
||||
"eslint-friendly-formatter": "^3.0.0",
|
||||
"eslint-plugin-html": "^3.2.0",
|
||||
"eslint-config-airbnb-base": "^11.3.1",
|
||||
"eslint-import-resolver-webpack": "^0.8.3",
|
||||
"eslint-plugin-import": "^2.7.0",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^0.11.2",
|
||||
"element-ui": "^1.4.2",
|
||||
"babel-plugin-component": "^0.10.0",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"lodash": "^4.17.4",
|
||||
"babel-plugin-lodash": "^3.2.11",
|
||||
"lodash-webpack-plugin": "^0.11.4",
|
||||
"node-sass": "^4.5.3",
|
||||
"optimize-css-assets-webpack-plugin": "^3.0.0",
|
||||
"sass-loader": "^6.0.6",
|
||||
"style-loader": "^0.18.2",
|
||||
"url-loader": "^0.5.9",
|
||||
"vue-loader": "^13.0.4",
|
||||
"vue-template-compiler": "^2.4.2",
|
||||
"webpack": "^3.5.4",
|
||||
"webpack-bundle-analyzer": "^2.9.0",
|
||||
"webpack-dev-server": "^2.7.1",
|
||||
"webpack-merge": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import 'element-ui/lib/theme-default/index.css';
|
||||
import App from './App';
|
||||
import router from './router';
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
render: h => h(App),
|
||||
});
|
||||
@ -1,15 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
import Hello from '../components/Hello';
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Hello',
|
||||
component: Hello,
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
/* eslint-disable */
|
||||
const webpackMerge = require('webpack-merge');
|
||||
|
||||
module.exports = () => {
|
||||
const env = process.env.NODE_ENV;
|
||||
|
||||
const baseConfig = require('./build/webpack.base');
|
||||
const envConfig = require(`./build/webpack.${env}`);
|
||||
|
||||
return webpackMerge(baseConfig, envConfig);
|
||||
};
|
||||
5253
ui/music_graph/package-lock.json → ui/package-lock.json
generated
5253
ui/music_graph/package-lock.json → ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
75
ui/package.json
Normal file
75
ui/package.json
Normal file
@ -0,0 +1,75 @@
|
||||
{
|
||||
"name": "music_graph",
|
||||
"version": "1.0.0",
|
||||
"description": "wip",
|
||||
"author": "simon987 <>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3": "^5.9.2",
|
||||
"d3-force": "^2.0.1",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-eslint": "^8.2.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||
"babel-preset-env": "^1.3.2",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"chalk": "^2.0.1",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"eslint": "^4.15.0",
|
||||
"eslint-config-standard": "^10.2.1",
|
||||
"eslint-friendly-formatter": "^3.0.0",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-import": "^2.7.0",
|
||||
"eslint-plugin-node": "^5.2.0",
|
||||
"eslint-plugin-promise": "^3.4.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"eslint-plugin-vue": "^4.0.0",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^1.1.4",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"node-notifier": "^5.1.2",
|
||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||
"ora": "^1.2.0",
|
||||
"portfinder": "^1.0.13",
|
||||
"postcss-import": "^11.0.0",
|
||||
"postcss-loader": "^2.0.8",
|
||||
"postcss-url": "^7.2.1",
|
||||
"rimraf": "^2.6.0",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-style-loader": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"webpack": "^3.9.1",
|
||||
"webpack-bundle-analyzer": "^2.9.0",
|
||||
"webpack-dev-server": "^2.9.1",
|
||||
"webpack-merge": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
22
ui/src/App.vue
Normal file
22
ui/src/App.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
@ -1,118 +1,120 @@
|
||||
<template>
|
||||
<div class='hello'>
|
||||
</div>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as d3 from 'd3';
|
||||
|
||||
function getNodeType(labels) {
|
||||
import * as d3 from 'd3'
|
||||
|
||||
function getNodeType (labels) {
|
||||
if (labels.find(l => l === 'Tag')) {
|
||||
return 'Tag';
|
||||
return 'Tag'
|
||||
} else if (labels.find(l => l === 'Group')) {
|
||||
return 'Group';
|
||||
return 'Group'
|
||||
} else if (labels.find(l => l === 'Artist')) {
|
||||
return 'Artist';
|
||||
return 'Artist'
|
||||
}
|
||||
return undefined;
|
||||
return undefined
|
||||
}
|
||||
|
||||
let data = {};
|
||||
let data = {}
|
||||
d3.json('../static/data.json')
|
||||
.then((r) => {
|
||||
data = r;
|
||||
data = r
|
||||
|
||||
const links = data.map(row => ({
|
||||
source: row._fields[1].start.low,
|
||||
target: row._fields[1].end.low,
|
||||
weight: row._fields[1].properties.weight.low,
|
||||
}));
|
||||
const nodes = [];
|
||||
function addNode(node) {
|
||||
weight: row._fields[1].properties.weight.low
|
||||
}))
|
||||
const nodes = []
|
||||
|
||||
function addNode (node) {
|
||||
if (nodes.find(n => n.id === node.id)) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
nodes.push(node);
|
||||
nodes.push(node)
|
||||
}
|
||||
|
||||
data.forEach((row) => {
|
||||
addNode({
|
||||
id: row._fields[0].identity.low,
|
||||
name: row._fields[0].properties.name,
|
||||
listeners: row._fields[0].properties.listeners.low,
|
||||
type: getNodeType(row._fields[0].labels),
|
||||
});
|
||||
type: getNodeType(row._fields[0].labels)
|
||||
})
|
||||
addNode({
|
||||
id: row._fields[2].identity.low,
|
||||
name: row._fields[2].properties.name,
|
||||
type: 'Tag',
|
||||
});
|
||||
});
|
||||
type: 'Tag'
|
||||
})
|
||||
})
|
||||
|
||||
function getRadius(node) {
|
||||
function getRadius (node) {
|
||||
if (node.type === 'Tag') {
|
||||
return 10;
|
||||
return 10
|
||||
}
|
||||
return Math.max(Math.sqrt(node.listeners / 5000), 15);
|
||||
return Math.max(Math.sqrt(node.listeners / 5000), 15)
|
||||
}
|
||||
|
||||
function getColor(node) {
|
||||
function getColor (node) {
|
||||
switch (node.type) {
|
||||
case 'Tag':
|
||||
return '#e0e0e0';
|
||||
return '#e0e0e0'
|
||||
case 'Artist':
|
||||
return '#42c3f7';
|
||||
return '#42c3f7'
|
||||
case 'Group':
|
||||
return '#00a5e9';
|
||||
return '#00a5e9'
|
||||
default:
|
||||
return '#DEADFB';
|
||||
return '#DEADFB'
|
||||
}
|
||||
}
|
||||
|
||||
const width = window.innerWidth - 5;
|
||||
const height = window.innerHeight - 5;
|
||||
const width = window.innerWidth - 5
|
||||
const height = window.innerHeight - 5
|
||||
|
||||
// ??
|
||||
const simulation = d3.forceSimulation(nodes)
|
||||
.force('link', d3.forceLink(links).id(d => d.id))
|
||||
.force('charge', d3.forceManyBody())
|
||||
.force('center', d3.forceCenter(width / 2, height / 2))
|
||||
;
|
||||
|
||||
let container;
|
||||
function zoomed() {
|
||||
container.attr('transform', d3.event.transform);
|
||||
let container
|
||||
|
||||
function zoomed () {
|
||||
container.attr('transform', d3.event.transform)
|
||||
}
|
||||
|
||||
function nodeZoomed() {
|
||||
function nodeZoomed () {
|
||||
// TODO
|
||||
}
|
||||
|
||||
function dragStarted(d) {
|
||||
function dragStarted (d) {
|
||||
if (!d3.event.active) {
|
||||
simulation.alphaTarget(0.3).restart();
|
||||
simulation.alphaTarget(0.3).restart()
|
||||
}
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
d.fx = d.x
|
||||
d.fy = d.y
|
||||
}
|
||||
|
||||
function dragged(d) {
|
||||
d.fx = d3.event.x;
|
||||
d.fy = d3.event.y;
|
||||
function dragged (d) {
|
||||
d.fx = d3.event.x
|
||||
d.fy = d3.event.y
|
||||
}
|
||||
|
||||
function dragEnded(d) {
|
||||
function dragEnded (d) {
|
||||
if (!d3.event.active) {
|
||||
simulation.alphaTarget(0);
|
||||
simulation.alphaTarget(0)
|
||||
}
|
||||
|
||||
d.fx = null;
|
||||
d.fy = null;
|
||||
d.fx = null
|
||||
d.fy = null
|
||||
}
|
||||
|
||||
const svg = d3.select('body')
|
||||
.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
.attr('height', height)
|
||||
|
||||
svg.append('rect')
|
||||
.attr('width', width)
|
||||
@ -121,10 +123,10 @@
|
||||
.style('fill', 'none')
|
||||
.call(d3.zoom()
|
||||
.scaleExtent([1 / 3, 5])
|
||||
.on('zoom', zoomed));
|
||||
.on('zoom', zoomed))
|
||||
|
||||
document.body.setAttribute('style', 'background: #E7EDEB');
|
||||
container = svg.append('g');
|
||||
document.body.setAttribute('style', 'background: #E7EDEB')
|
||||
container = svg.append('g')
|
||||
|
||||
const link = container.append('g')
|
||||
.attr('stroke', '#003a6b')
|
||||
@ -132,7 +134,7 @@
|
||||
.data(links)
|
||||
.join('line')
|
||||
.attr('stroke-opacity', rel => rel.weight / 15)
|
||||
.attr('stroke-width', rel => Math.sqrt(rel.weight) * 0.6);
|
||||
.attr('stroke-width', rel => Math.sqrt(rel.weight) * 0.6)
|
||||
|
||||
const node = container.append('g')
|
||||
.attr('stroke', '#ffffff')
|
||||
@ -146,31 +148,49 @@
|
||||
.on('start', dragStarted)
|
||||
.on('drag', dragged)
|
||||
.on('end', dragEnded))
|
||||
.on('wheel', nodeZoomed);
|
||||
.on('wheel', nodeZoomed)
|
||||
|
||||
node.append('title')
|
||||
.text(d => `${d.name} ${d.id}`);
|
||||
.text(d => `${d.name} ${d.id}`)
|
||||
|
||||
simulation.on('tick', () => {
|
||||
link
|
||||
.attr('x1', d => d.source.x)
|
||||
.attr('y1', d => d.source.y)
|
||||
.attr('x2', d => d.target.x)
|
||||
.attr('y2', d => d.target.y);
|
||||
.attr('y2', d => d.target.y)
|
||||
node
|
||||
.attr('cx', d => d.x)
|
||||
.attr('cy', d => d.y);
|
||||
});
|
||||
});
|
||||
.attr('cy', d => d.y)
|
||||
})
|
||||
})
|
||||
export default {
|
||||
name: 'hello',
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App',
|
||||
};
|
||||
},
|
||||
};
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
12
ui/src/main.js
Normal file
12
ui/src/main.js
Normal file
@ -0,0 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
render: h => h(App)
|
||||
})
|
||||
15
ui/src/router/index.js
Normal file
15
ui/src/router/index.js
Normal file
@ -0,0 +1,15 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import HelloWorld from '@/components/HelloWorld'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'HelloWorld',
|
||||
component: HelloWorld
|
||||
}
|
||||
]
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user