[refactor][barchart] rewrite barchart as a more vuejs point of vue

instead of a d3js point of view
ICIJ · Mar 5, 2020 · eea3ec9 · eea3ec9
1 parent 093998f
commit eea3ec9
Showing 1 changed file with 51 additions and 55 deletions.
diff --git a/src/components/WidgetCreationDateOverTime.vue b/src/components/WidgetCreationDateOverTime.vue
@@ -4,7 +4,15 @@
       <h4 v-html="widget.title" class="m-0"></h4>
     </div>
     <div class="widget__content lead" :class="{ 'card-body': widget.card }">
-      <svg class="chart"></svg>
+      <svg class="chart" :height="height" :width="width">
+        <g :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }">
+          <g class="axis-x" :style="{ transform: `translate(0px, ${this.innerHeight}px)` }"></g>
+          <text transform="translate(445, 450)" style="text-anchor: middle;">Time</text>
+          <g class="axis-y"></g>
+          <text transform="rotate(-90)" y="-35" x="-190" style="text-anchor: middle;">Number of documents</text>
+          <rect v-for="(bar, index) in bars" :key="index" :x="bar.x" :y="bar.y" :height="bar.height" :width="bar.width"></rect>
+        </g>
+      </svg>
     </div>
   </div>
 </template>
@@ -25,7 +33,39 @@ export default {
   },
   data () {
     return {
-      data: []
+      data: [],
+      height: 500,
+      width: 960,
+      margin: { top: 20, right: 20, bottom: 100, left: 50 }
+    }
+  },
+  computed: {
+    innerHeight () {
+      return this.height - this.margin.top - this.margin.bottom
+    },
+    innerWidth () {
+      return this.width - this.margin.left - this.margin.right
+    },
+    x () {
+      return d3.scaleTime()
+        .domain([d3.min(this.data, d => d.date), d3.max(this.data, d => d.date)])
+        .range([0, this.innerWidth])
+        .nice()
+    },
+    y () {
+      return d3.scaleLinear()
+        .domain([0, d3.max(this.data, d => d.doc_count)])
+        .range([this.innerHeight, 0])
+    },
+    bars () {
+      return this.data.map(d => {
+        return {
+          x: this.x(d.date),
+          y: this.y(d.doc_count),
+          height: this.innerHeight - this.y(d.doc_count),
+          width: this.x(d3.timeDay.offset(d.date, 10)) - this.x(d.date)
+        }
+      })
     }
   },
   methods: {
@@ -41,61 +81,17 @@ export default {
       return sortBy(compact(dates), ['key'])
     },
     buildChart () {
-      const margin = { top: 20, right: 20, bottom: 100, left: 50 }
-      const height = 500 - margin.top - margin.bottom
-      const width = 960 - margin.left - margin.right
-
-      const svg = d3.select('.chart')
-        .attr('width', width + margin.left + margin.right)
-        .attr('height', height + margin.top + margin.bottom)
-        .append('g')
-        .attr('transform', `translate(${margin.left}, ${margin.top})`)
-
-      const x = d3.scaleTime()
-        .domain([d3.min(this.data, d => d.date), d3.max(this.data, d => d.date)])
-        .range([0, width])
-        .nice()
-
-      const y = d3.scaleLinear()
-        .domain([0, d3.max(this.data, d => d.doc_count)])
-        .range([height, 0])
-
-      svg.append('g')
-        .selectAll('rect')
-        .data(this.data)
-        .enter()
-        .append('rect')
-        .attr('x', d => x(d.date))
-        .attr('y', d => y(d.doc_count))
-        .attr('width', d => x(d3.timeDay.offset(d.date, 10)) - x(d.date))
-        .attr('height', d => height - y(d.doc_count))
-
       // Create the x axis
-      const xAxis = d3.axisBottom(x)
-        .tickValues(this.data.map(d => d.date))
-        .tickFormat(d3.timeFormat('%m-%Y'))
-      // Add the x axis
-      svg.append('g')
-        .attr('transform', `translate(0, ${height})`)
-        .call(xAxis)
-      svg.selectAll('.tick text')
+      const xAxis = d3.select('.axis-x').call(
+        d3.axisBottom(this.x)
+          .tickValues(this.data.map(d => d.date))
+          .tickFormat(d3.timeFormat('%m-%Y')))
+      xAxis.selectAll('.tick text')
         .attr('transform', 'translate(20, 20) rotate(45)')
-      // Text label for the x axis
-      svg.append('text')
-        .attr('transform', `translate(${(width / 2)}, ${(height + margin.top + 50)})`)
-        .style('text-anchor', 'middle')
-        .text('Time')
-
-      // Add the y axis
-      svg.append('g')
-        .call(d3.axisLeft(y))
-      // Text label for the y axis
-      svg.append('text')
-        .attr('transform', 'rotate(-90)')
-        .attr('y', 15 - margin.left)
-        .attr('x', 0 - (height / 2))
-        .style('text-anchor', 'middle')
-        .text('Number of documents')
+      // Create the y axis
+      d3.select('.axis-y').call(
+        d3.axisLeft(this.y)
+          .ticks(d3.max(this.data, d => d.doc_count)))
     }
   },
   async mounted () {