Refactor annotation to a class

Author: mauriciopoppe

site/js/site.js

@@ -212,7 +212,7 @@ function onSiteDependenciesLoaded() {
    *
    * - `x`: x coordinate of a line parallel to the y-axis
    * - `y`: y coordinate of a line parallel to the x-axis
-   * - `text` (optional) text shown next to the parallel line
+   * - `label` (optional) text shown next to the parallel line
    *
    * NOTE: either `x` or `y` need to be set on the object, setting both of them
    * will raise an exception
@@ -231,11 +231,11 @@ function onSiteDependenciesLoaded() {
       },
       {
         x: 1,
-        text: 'x = 1'
+        label: 'x = 1'
       },
       {
         y: 2,
-        text: 'y = 2'
+        label: 'y = 2'
       }
     ]
   })

site/partials/examples.html

@@ -113,7 +113,7 @@
 <ul>
 <li><code>x</code>: x coordinate of a line parallel to the y-axis</li>
 <li><code>y</code>: y coordinate of a line parallel to the x-axis</li>
-<li><code>text</code> (optional) text shown next to the parallel line</li>
+<li><code>label</code> (optional) text shown next to the parallel line</li>
 </ul>
 <p>NOTE: either <code>x</code> or <code>y</code> need to be set on the object, setting both of them 
 will raise an exception</p></div><div class="code"><pre><code class="javascript">functionPlot({
@@ -130,11 +130,11 @@
     },
     {
       x: 1,
-      text: 'x = 1'
+      label: 'x = 1'
     },
     {
       y: 2,
-      text: 'y = 2'
+      label: 'y = 2'
     }
   ]
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="annotations"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Range and closed path</h3>

src/chart.ts

@@ -11,9 +11,8 @@ import { FunctionPlotDatum, FunctionPlotOptions, FunctionPlotScale, FunctionPlot
 import { IntervalWorkerPool } from './samplers/interval_worker_pool.js'
 
 import { Mark } from './graph-types/mark.js'
-import { interval, polyline, scatter, text } from './graph-types/index.js'
+import { annotation, interval, polyline, scatter, text } from './graph-types/index.js'
 
-import annotations from './helpers/annotations.js'
 import mousetip from './tip.js'
 import { helpers } from './helpers/index.js'
 import datumDefaults from './datum-defaults.js'
@@ -543,7 +542,12 @@ export class Chart extends EventEmitter.EventEmitter {
     }
 
     // annotations
-    content.merge(contentEnter).call(annotations({ owner: self }))
+    content.merge(contentEnter).each(function (d: Mark | FunctionPlotDatum) {
+      const selection = d3Select(this)
+      const ann = annotation(d)
+      ann.chart = self
+      ann.render(selection as any)
+    })
 
     // content construction
     // - join options.data to <g class='graph'> elements

src/graph-types/annotation.ts

@@ -0,0 +1,102 @@
+import { line as d3Line } from 'd3-shape'
+import { Selection } from 'd3-selection'
+
+import { FunctionPlotOptions } from '../types.js'
+import { Mark } from '../graph-types/mark.js'
+
+const line = d3Line()
+  .x((d) => d[0])
+  .y((d) => d[1])
+
+export class Annotation extends Mark {
+  constructor(options: any) {
+    super(options)
+  }
+
+  render(parentSelection: Selection<any, FunctionPlotOptions, any, any>) {
+    // join
+    const selection = parentSelection.selectAll('g.annotations').data(function (d: FunctionPlotOptions) {
+      return d.annotations || []
+    })
+
+    // enter
+    const enter = selection.enter().append('g').attr('class', 'annotations')
+
+    const xScale = this.chart.meta.xScale
+    const yScale = this.chart.meta.yScale
+
+    // enter + update
+    // - path
+    const yRange = yScale.range()
+    const xRange = xScale.range()
+
+    // prettier-ignore
+    const path = selection.merge(enter).selectAll('path')
+        .data(function (d) {
+          if ('x' in d) {
+            return [[[0, yRange[0]], [0, yRange[1]]]]
+          } else {
+            return [[[xRange[0], 0], [xRange[1], 0]]]
+          }
+        })
+    // enter
+    const pathEnter = path.enter().append('path')
+    // enter + update
+    path
+      .merge(pathEnter)
+      .attr('stroke', '#eee')
+      .attr('d', line as any)
+    path.exit().remove()
+
+    // join
+    const text = selection
+      .merge(enter)
+      .selectAll('text')
+      .data((d) => [
+        {
+          label: d.label || '',
+          // used to determine if x or y is set.
+          xIsSet: 'x' in d
+        }
+      ])
+    // enter
+    const textEnter = text.enter().append('text')
+    // enter + update
+    text
+      .merge(textEnter)
+      .text((d) => d.label)
+      .attr('y', function (d) {
+        return d.xIsSet ? 3 : 0
+      })
+      .attr('x', function (d) {
+        return d.xIsSet ? 0 : 3
+      })
+      .attr('dy', function (d) {
+        return d.xIsSet ? 5 : -5
+      })
+      .attr('text-anchor', function (d) {
+        return d.xIsSet ? 'end' : ''
+      })
+      .attr('transform', function (d) {
+        return d.xIsSet ? 'rotate(-90)' : ''
+      })
+    text.exit().remove()
+
+    // enter + update
+    // move group
+    selection.merge(enter).attr('transform', function (d) {
+      if ('x' in d) {
+        return 'translate(' + xScale(d.x) + ', 0)'
+      } else {
+        return 'translate(0, ' + yScale(d.y) + ')'
+      }
+    })
+
+    // exit
+    selection.exit().remove()
+  }
+}
+
+export function annotation(options: any) {
+  return new Annotation(options)
+}

src/graph-types/index.ts

@@ -2,6 +2,7 @@ import { Interval, interval } from './interval.js'
 import { Polyline, polyline } from './polyline.js'
 import { Scatter, scatter } from './scatter.js'
 import { Text, text } from './text.js'
+import { Annotation, annotation } from './annotation.js'
 import { Attr, Mark } from './mark.js'
 
-export { Polyline, polyline, Scatter, scatter, Interval, interval, Text, text, Attr, Mark }
+export { Polyline, polyline, Scatter, scatter, Interval, interval, Text, text, Annotation, annotation, Attr, Mark }