Refactor helper functions (derivative, secant) to become graph-types

Author: mauriciopoppe

src/chart.ts

@@ -14,7 +14,6 @@ import { Mark } from './graph-types/mark.js'
 import { annotation, interval, polyline, scatter, text } from './graph-types/index.js'
 
 import mousetip from './tip.js'
-import { helpers } from './helpers/index.js'
 import datumDefaults from './datum-defaults.js'
 import datumValidation from './datum-validation.js'
 import globals from './globals.mjs'
@@ -553,7 +552,7 @@ export class Chart extends EventEmitter.EventEmitter {
     // enter
     const annotationsEnter = annotations.enter().append('g').attr('class', 'annotations')
     // enter + update
-    annotations.merge(annotationsEnter).each(function (d: Mark | FunctionPlotDatum, index: number) {
+    annotations.merge(annotationsEnter).each(function (d: Mark | FunctionPlotDatum) {
       const selection = d3Select(this)
       const ann = annotation(d)
       ann.chart = self
@@ -617,8 +616,6 @@ export class Chart extends EventEmitter.EventEmitter {
 
       mark.chart = self
       mark.render(selection)
-
-      selection.call(helpers(self))
     })
     this.generation += 1
   }

src/graph-types/derivative.ts

@@ -0,0 +1,80 @@
+import { select as d3Select } from 'd3-selection'
+import type { Selection } from 'd3-selection'
+
+import { Polyline } from '../graph-types/index.js'
+import { builtIn as builtInEvaluator } from '../samplers/eval.mjs'
+import datumDefaults from '../datum-defaults.js'
+import { infinity } from '../utils.mjs'
+import { Mark } from '../graph-types/mark.js'
+
+import type { FunctionPlotDatum, LinearFunction } from '../types.js'
+
+export class Derivative extends Mark {
+  private derivativeDatum: LinearFunction
+
+  constructor(options: any) {
+    super(options)
+    this.derivativeDatum = datumDefaults({
+      isHelper: true,
+      skipTip: true,
+      skipBoundsCheck: true,
+      nSamples: 2,
+      graphType: 'polyline'
+    }) as LinearFunction
+  }
+
+  private computeLine(d: FunctionPlotDatum) {
+    if (!d.derivative) {
+      return []
+    }
+    const x0 = typeof d.derivative.x0 === 'number' ? d.derivative.x0 : infinity()
+    this.derivativeDatum.index = d.index
+    this.derivativeDatum.scope = {
+      m: builtInEvaluator(d.derivative, 'fn', { x: x0 }),
+      x0,
+      y0: builtInEvaluator(d, 'fn', { x: x0 })
+    }
+    this.derivativeDatum.fn = 'm * (x - x0) + y0'
+    return [this.derivativeDatum]
+  }
+
+  private checkAutoUpdate(d: FunctionPlotDatum, selection: Selection<any, FunctionPlotDatum, any, any>) {
+    if (!d.derivative) {
+      return
+    }
+    if (d.derivative.updateOnMouseMove && !d.derivative.$$mouseListener) {
+      d.derivative.$$mouseListener = ({ x }: any) => {
+        if (d.derivative) {
+          d.derivative.x0 = x
+        }
+        this.render(selection)
+      }
+      this.chart.on('tip:update', d.derivative.$$mouseListener)
+    }
+  }
+
+  render(selection: Selection<any, FunctionPlotDatum, any, any>) {
+    selection.each((d, i, nodes) => {
+      const el = d3Select(nodes[i])
+      const data = this.computeLine(d)
+      this.checkAutoUpdate(d, selection)
+      const innerSelection = el.selectAll('g.derivative').data(data)
+
+      const innerSelectionEnter = innerSelection.enter().append('g').attr('class', 'derivative')
+
+      innerSelection.merge(innerSelectionEnter).each((innerData: any, i, innerNodes) => {
+        const polyline = new Polyline(innerData)
+        polyline.chart = this.chart
+        polyline.render(d3Select(innerNodes[i]))
+      })
+
+      innerSelection.merge(innerSelectionEnter).selectAll('path').attr('opacity', 0.5)
+
+      innerSelection.exit().remove()
+    })
+  }
+}
+
+export function derivative(options: any) {
+  return new Derivative(options)
+}

src/graph-types/helpers.ts

@@ -0,0 +1,25 @@
+import { select as d3Select } from 'd3-selection'
+import type { Selection } from 'd3-selection'
+
+import { derivative, type Derivative } from './derivative.js'
+import { secant, type Secant } from './secant.js'
+import { Chart } from '../chart.js'
+
+export function helpers(chart: Chart) {
+  function helper(selection: Selection<any, any, any, any>) {
+    selection.each(function (d: any) {
+      const el = d3Select(this)
+
+      let mark: Derivative | Secant
+      mark = derivative(d)
+      mark.chart = chart
+      mark.render(el)
+
+      mark = secant(d)
+      mark.chart = chart
+      mark.render(el)
+    })
+  }
+
+  return helper
+}

src/graph-types/interval.ts

@@ -2,6 +2,7 @@ import type { Selection } from 'd3-selection'
 
 import { asyncIntervalEvaluate, intervalEvaluate } from '../evaluate-datum.js'
 import { infinity, color } from '../utils.mjs'
+import { helpers } from './helpers.js'
 
 import { Mark } from './mark.js'
 import type { Interval as TInterval, FunctionPlotDatum, FunctionPlotScale } from '../types.js'
@@ -133,6 +134,8 @@ export class Interval extends Mark {
     }
 
     innerSelection.exit().remove()
+
+    selection.call(helpers(this.chart))
   }
 }
 

src/graph-types/polyline.ts

@@ -4,6 +4,7 @@ import { line as d3Line, area as d3Area, curveLinear as d3CurveLinear } from 'd3
 
 import { color, infinity, clamp } from '../utils.mjs'
 import { builtInEvaluate } from '../evaluate-datum.js'
+import { helpers } from './helpers.js'
 
 import { Mark } from './mark.js'
 import type { FunctionPlotDatum } from '../types.js'
@@ -158,6 +159,8 @@ export class Polyline extends Mark {
 
     // exit
     innerSelection.exit().remove()
+
+    selection.call(helpers(this.chart))
   }
 }
 

src/graph-types/scatter.ts

@@ -3,7 +3,7 @@ import { hsl as d3Hsl } from 'd3-color'
 
 import { color } from '../utils.mjs'
 import { builtInEvaluate } from '../evaluate-datum.js'
-
+import { helpers } from './helpers.js'
 import { Mark } from './mark.js'
 import type { FunctionPlotDatum } from '../types.js'
 
@@ -66,6 +66,8 @@ export class Scatter extends Mark {
     }
 
     innerSelection.exit().remove()
+
+    selection.call(helpers(this.chart))
   }
 }
 

src/graph-types/secant.ts

@@ -0,0 +1,109 @@
+import { select as d3Select } from 'd3-selection'
+import type { Selection } from 'd3-selection'
+
+import { builtIn as builtInEvaluator } from '../samplers/eval.mjs'
+import datumDefaults from '../datum-defaults.js'
+import { Polyline } from '../graph-types/index.js'
+import { infinity } from '../utils.mjs'
+import { Mark } from '../graph-types/mark.js'
+
+import type { FunctionPlotDatum, FunctionPlotDatumScope, LinearFunction, SecantDatum } from '../types.js'
+
+export class Secant extends Mark {
+  private secantDefaults: LinearFunction
+
+  constructor(options: any) {
+    super(options)
+    this.secantDefaults = datumDefaults({
+      isHelper: true,
+      skipTip: true,
+      skipBoundsCheck: true,
+      nSamples: 2,
+      graphType: 'polyline'
+    }) as LinearFunction
+  }
+
+  private computeSlope(scope: FunctionPlotDatumScope) {
+    scope.m = (scope.y1 - scope.y0) / (scope.x1 - scope.x0)
+  }
+
+  private updateLine(d: FunctionPlotDatum, secant: SecantDatum) {
+    if (!('x0' in secant)) {
+      throw Error('secant must have the property `x0` defined')
+    }
+    secant.scope = secant.scope || {}
+
+    const x0 = secant.x0
+    const x1 = typeof secant.x1 === 'number' ? secant.x1 : infinity()
+    Object.assign(secant.scope, {
+      x0,
+      x1,
+      y0: builtInEvaluator(d, 'fn', { x: x0 }),
+      y1: builtInEvaluator(d, 'fn', { x: x1 })
+    })
+    this.computeSlope(secant.scope)
+  }
+
+  private setFn(d: FunctionPlotDatum, secant: SecantDatum) {
+    this.updateLine(d, secant)
+    secant.fn = 'm * (x - x0) + y0'
+  }
+
+  private setMouseListener(
+    d: FunctionPlotDatum,
+    secantObject: SecantDatum,
+    selection: Selection<any, FunctionPlotDatum, any, any>
+  ) {
+    if (secantObject.updateOnMouseMove && !secantObject.$$mouseListener) {
+      secantObject.$$mouseListener = ({ x }: any) => {
+        secantObject.x1 = x
+        this.updateLine(d, secantObject)
+        this.render(selection)
+      }
+      this.chart.on('tip:update', secantObject.$$mouseListener)
+    }
+  }
+
+  private computeLines(d: FunctionPlotDatum, selection: Selection<any, FunctionPlotDatum, any, any>) {
+    const data = []
+    d.secants = d.secants || []
+    for (let i = 0; i < d.secants.length; i += 1) {
+      const secant = (d.secants[i] = Object.assign({}, this.secantDefaults, d.secants[i]))
+      // necessary to make the secant have the same color as d
+      secant.index = d.index
+      if (!secant.fn) {
+        this.setFn(d, secant)
+        this.setMouseListener(d, secant, selection)
+      }
+      data.push(secant)
+    }
+    return data
+  }
+
+  render(selection: Selection<any, FunctionPlotDatum, any, any>) {
+    selection.each((d, i, nodes) => {
+      const el = d3Select(nodes[i])
+      const data = this.computeLines(d, selection)
+      const innerSelection = el.selectAll('g.secant').data(data)
+
+      const innerSelectionEnter = innerSelection.enter().append('g').attr('class', 'secant')
+
+      // enter + update
+      innerSelection.merge(innerSelectionEnter).each((d: any, i, nodes) => {
+        const polyline = new Polyline(d)
+        polyline.chart = this.chart
+        polyline.render(d3Select(nodes[i]))
+      })
+
+      // change the opacity of the secants
+      innerSelection.merge(innerSelectionEnter).selectAll('path').attr('opacity', 0.5)
+
+      // exit
+      innerSelection.exit().remove()
+    })
+  }
+}
+
+export function secant(options: any) {
+  return new Secant(options)
+}