merge styles demo + sass example

build/webpack.base.conf.js

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

package.json

@@ -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",
+    "node-sass": "^4.5.0",
-    "semver": "^5.3.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"

src/d3-components/bars-style-basic.vue

@@ -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>

src/d3-components/bars-style-scoped.vue

@@ -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>

src/d3-components/bars-styles.vue

@@ -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>

src/router/demos.js

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