corpglory
/
d3vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

merge styles demo + sass example

dependabot/npm_and_yarn/webpack-bundle-analyzer-3.6.0
Alexey Velikiy 7 years ago
parent
a70f3b1621
commit
81a63830a2
6 changed files with 129 additions and 148 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      build/webpack.base.conf.js
  2. 6
      package.json
  3. 67
      src/d3-components/bars-style-basic.vue
  4. 71
      src/d3-components/bars-style-scoped.vue
  5. 118
      src/d3-components/bars-styles.vue
  6. 11
      src/router/demos.js

4
build/webpack.base.conf.js
Unescape View File

@ -33,6 +33,10 @@ module.exports = {
},
module: {
rules: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.vue$/,
loader: 'vue-loader',

6
package.json
Unescape View File

@ -35,16 +35,18 @@
"function-bind": "^1.1.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"semver": "^5.3.0",
"node-sass": "^4.5.0",
"opn": "^4.0.2",
"ora": "^1.1.0",
"sass-loader": "^6.0.3",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"url-loader": "^0.5.7",
"vue-loader": "^10.3.0",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"webpack-merge": "^2.6.1"

67
src/d3-components/bars-style-basic.vue
Unescape View File

@ -1,67 +0,0 @@
<!--
Links:
.vue files: https://vuejs.org/v2/guide/single-file-components.html
Advanced:
D3.append: https://github.com/d3/d3-selection/blob/master/src/selection/index.js
-->
<template>
<svg id="bars-style-basic-svg" width="500" height="300"></svg>
</template>
<script>
const d3 = require('d3');
export default {
mounted: function() {
var svg = d3.select(this.$el);
var width = +svg.attr('width');
var height = +svg.attr('height');
var data = [
{name: 'one', val: 100},
{name: 'two', val: 150},
{name: 'three', val: 200}
]
var x = d3.scaleBand()
.rangeRound([0, width]).padding(0.1)
.domain(data.map(d => d.name));
var y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(data, d => d.val)])
svg
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', d => x(d.name))
.attr('class', d => d.name)
.attr('y', d => y(d.val))
.attr('width', x.bandwidth())
.attr('height', d => height - y(d.val))
}
}
</script>
<style>
/*
#bars-style-basic-svg
will be added to global namespace
*/
#bars-style-basic-svg .one {
fill: #ffc300
}
#bars-style-basic-svg .two {
fill: #c70039
}
#bars-style-basic-svg .three {
fill: #571845
}
#bars-style-basic-svg {
margin-top: 40px;
}
</style>

71
src/d3-components/bars-style-scoped.vue
Unescape View File

@ -1,71 +0,0 @@
<!--
Based on ./bars-style-basic.vue
Maybe there is a better solution.
Links:
Object attr: https://www.w3schools.com/xml/dom_attribute.asp
Scopes css: https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md
.vue files: https://vuejs.org/v2/guide/single-file-components.html
-->
<template>
<svg width="500" height="300"></svg>
</template>
<script>
const d3 = require('d3');
export default {
mounted: function() {
// vue loader will substitute data attribute for styles
var STYLE_MODULE_NAME = this.$el.attributes[0];
var svg = d3.select(this.$el);
var width = +svg.attr('width');
var height = +svg.attr('height');
var data = [
{name: 'one', val: 100},
{name: 'two', val: 150},
{name: 'three', val: 200}
]
var x = d3.scaleBand()
.rangeRound([0, width]).padding(0.1)
.domain(data.map(d => d.name));
var y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(data, d => d.val)])
svg
.selectAll('rect')
.data(data)
.enter()
.append('rect')
// We add attr here
.attr('data-v-0e55e99d', '')
.attr('x', d => x(d.name))
.attr('class', d => d.name)
.attr('y', d => y(d.val))
.attr('width', x.bandwidth())
.attr('height', d => height - y(d.val))
}
}
</script>
<style scoped>
.one {
fill: #154890
}
.two {
fill: #e1d4c0
}
.three {
fill: #ff6600
}
svg {
margin-top: 40px;
}
</style>

118
src/d3-components/bars-styles.vue
Unescape View File

@ -0,0 +1,118 @@
<!--
Links:
Object attr: https://www.w3schools.com/xml/dom_attribute.asp
Scopes css: https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md
.vue files: https://vuejs.org/v2/guide/single-file-components.html
D3.append: https://github.com/d3/d3-selection/blob/master/src/selection/index.js
Installation of SASS tutorial: https://www.youtube.com/watch?v=fIpLr04f8Ms
SASS: http://sass-lang.com/guide
-->
<template>
<svg width="500" height="300"></svg>
</template>
<script>
const d3 = require('d3');
export default {
mounted: function() {
var svg = d3.select(this.$el);
var width = +svg.attr('width');
var height = +svg.attr('height');
var data = [
{name: 'one', val: 100},
{name: 'two', val: 150},
{name: 'three', val: 200}
];
var x = d3.scaleBand()
.rangeRound([0, width]).padding(0.1)
.domain(data.map(d => d.name));
var y = d3.scaleLinear()
.rangeRound([height * 0.3 - 20, 0])
.domain([0, d3.max(data, d => d.val)])
function addRectsWithName(elem, name) {
elem
.append('text')
.text(name)
.attr('x', width / 2)
.attr('y', 5)
.attr('text-anchor', 'middle');
elem.selectAll('rect')
.data(data)
.enter()
.append('rect')
// We add attr here
.attr('x', d => x(d.name))
.attr('class', d => d.name)
.attr('y', d => y(d.val))
.attr('width', x.bandwidth())
.attr('height', d => y.range()[0] - y(d.val))
}
svg
.append('g')
.attr('id', 'bars-style')
.attr('transform', `translate(0, 20)`)
.call(addRectsWithName, 'Basic styles');
// vue loader will substitute data attribute for styles
var STYLE_MODULE_NAME = this.$el.attributes[0].name;
svg
.append('g')
.attr('transform', `translate(0, ${height * 0.3 + 20})`)
.call(addRectsWithName, 'Scoped styles')
.selectAll('rect')
.attr(STYLE_MODULE_NAME, '')
svg
.append('g')
.attr('id', 'bars-style-sass')
.attr('transform', `translate(0, ${height * 0.6 + 20})`)
.call(addRectsWithName, 'Sass styles');
}
}
</script>
<style>
#bars-style .one {
fill: #ffc300
}
#bars-style .two {
fill: #c70039
}
#bars-style .three {
fill: #571845
}
</style>
<style scoped>
.one {
fill: #154890
}
.two {
fill: #e1d4c0
}
.three {
fill: #ff6600
}
</style>
<style lang="sass">
#bars-style-sass
.one
fill: #AA5C39
.two
fill: #5B9632
.three
fill: #2A4F6E
</style>

11
src/router/demos.js
Unescape View File

@ -12,14 +12,9 @@ export const routes = [
component: require('d3-components/size-controller')
},
{
name: 'Bars: styles basic',
path: '/bars-style-basic',
component: require('d3-components/bars-style-basic')
},
{
name: 'Bars: styles scoped',
path: '/bars-style-scoped',
component: require('d3-components/bars-style-scoped')
name: 'Bars: styles',
path: '/bars-styles',
component: require('d3-components/bars-styles')
},
{
name: 'Pie chart: local component & props',

Write Preview
Loading…
Cancel
Save