refactor: lift D3Chart mixin into impl class

Author: waxlamp

packages/d3chart/src/Axes.js

@@ -1,6 +1,6 @@
 import { axisLeft, axisBottom } from 'd3-axis';
 
-import { Margin } from './Margin';
+import { D3Chart } from './D3Chart';
 
 const scaleFuncMap = {
   left: axisLeft,
@@ -62,8 +62,7 @@ class AxesImpl {
 
     let axis = this.group[direction];
     if (!axis) {
-      // TODO: make the dependency on D3Chart explicit.
-      axis = this.group[direction] = this.that[direction].append('g');
+      axis = this.group[direction] = this.that.d3chart[direction].append('g');
       axis.append('text')
         .attr('fill', '#000')
         .style('font-size', '11pt')
@@ -109,7 +108,7 @@ class AxesImpl {
   }
 }
 
-export const Axes = Base => class extends Margin(Base) {
+export const Axes = Base => class extends D3Chart(Base) {
   constructor () {
     super(...arguments);
     this.axes = new AxesImpl(this);

packages/d3chart/src/Crosshairs.js

@@ -1,4 +1,4 @@
-import { Margin } from './Margin';
+import { D3Chart } from './D3Chart';
 
 class CrosshairsImpl {
   constructor (that) {
@@ -13,13 +13,13 @@ class CrosshairsImpl {
     const that = this.that;
 
     const plotBounds = that.margin.bounds('plot');
-    this.target = that.plot.append('rect', ':first-child')
+    this.target = that.d3chart.plot.append('rect', ':first-child')
       .classed('crosshairs-target', true)
       .attr('width', plotBounds.width)
       .attr('height', plotBounds.height)
       .style('opacity', 0.0);
 
-    const g = that.plot.append('g')
+    const g = that.d3chart.plot.append('g')
       .classed('crosshairs', true)
       .style('pointer-events', 'none');
 
@@ -83,7 +83,7 @@ class CrosshairsImpl {
   }
 }
 
-export const Crosshairs = Base => class extends Margin(Base) {
+export const Crosshairs = Base => class extends D3Chart(Base) {
   constructor () {
     super(...arguments);
     if (!this.crosshairs) {

packages/d3chart/src/D3Chart.js

@@ -6,11 +6,11 @@ import 'd3-transition';
 
 import { Margin } from './Margin';
 
-export const D3Chart = Base => class extends Margin(InitSize(Base)) {
-  constructor () {
-    super(...arguments);
+class D3ChartImpl {
+  constructor (that) {
+    this.that = that;
 
-    this.svg = select(this.el)
+    this.svg = select(this.that.el)
       .append('svg')
       .attr('xmlns', 'http://www.w3.org/2000/svg');
 
@@ -32,18 +32,27 @@ export const D3Chart = Base => class extends Margin(InitSize(Base)) {
       .classed('plot', true);
   }
 
-  initD3Chart () {
-    this.svg.attr('width', this.width)
-      .attr('height', this.height);
+  init () {
+    this.svg.attr('width', this.that.width)
+      .attr('height', this.that.height);
 
-    const margin = this.margin.get();
+    const margin = this.that.margin.get();
 
     this.left.attr('transform', `translate(0,${margin.top})`);
-    this.bottom.attr('transform', `translate(${margin.left},${this.height - margin.bottom})`);
-    this.right.attr('transform', `translate(${this.width - margin.right},${margin.top})`);
+    this.bottom.attr('transform', `translate(${margin.left},${this.that.height - margin.bottom})`);
+    this.right.attr('transform', `translate(${this.that.width - margin.right},${margin.top})`);
     this.top.attr('transform', `translate(${margin.left},0)`);
     this.plot.attr('transform', `translate(${margin.left},${margin.top})`);
   }
+}
+
+export const D3Chart = Base => class extends Margin(InitSize(Base)) {
+  constructor () {
+    super(...arguments);
+    if (!this.d3chart) {
+      this.d3chart = new D3ChartImpl(this);
+    }
+  }
 };
 
 export class Swatches extends D3Chart(VisComponent) {
@@ -52,44 +61,44 @@ export class Swatches extends D3Chart(VisComponent) {
 
     this.width = options.width;
     this.height = options.height;
-    this.margin.set(options.margin)
-      .initD3Chart();
+    this.margin.set(options.margin);
+    this.d3chart.init();
 
     const margin = this.margin.get();
 
-    this.left.append('rect')
+    this.d3chart.left.append('rect')
       .attr('x', 0)
       .attr('y', 0)
       .attr('width', margin.left)
       .attr('height', this.height - margin.bottom - margin.top)
       .style('stroke', 'black')
       .style('fill', 'red');
 
-    this.bottom.append('rect')
+    this.d3chart.bottom.append('rect')
       .attr('x', 0)
       .attr('y', 0)
       .attr('width', this.width - margin.left - margin.right)
       .attr('height', margin.bottom)
       .style('stroke', 'black')
       .style('fill', 'green');
 
-    this.right.append('rect')
+    this.d3chart.right.append('rect')
       .attr('x', 0)
       .attr('y', 0)
       .attr('width', margin.right)
       .attr('height', this.height - margin.bottom - margin.top)
       .style('stroke', 'black')
       .style('fill', 'cyan');
 
-    this.top.append('rect')
+    this.d3chart.top.append('rect')
       .attr('x', 0)
       .attr('y', 0)
       .attr('width', this.width - margin.left - margin.right)
       .attr('height', margin.top)
       .style('stroke', 'black')
       .style('fill', 'yellow');
 
-    this.plot.append('rect')
+    this.d3chart.plot.append('rect')
       .attr('x', 0)
       .attr('y', 0)
       .attr('width', this.width - margin.left - margin.right)