Refactor graph types to classes.

Having classes instead of plain objects allows having
aliases for known graph types, it also allows the addition
of new graphs if they follow the same structure as other
graph types.

Example of the new API:

```javascript
functionPlot({
  target: '#playground',
  data: [
    functionPlot.interval({ fn: 'x^2' }),
    functionPlot.scatter({ fn: 'sin(x)', nSamples: 50 }),
    functionPlot.polyline({ fn: 'x^3' }),
    functionPlot.text({ text: 'foo', location: [1, 2] })
  ]
})
```

The existing object API is still supported and transformed into
the classes, moving forward, the class API is preferred.

Author: mauriciopoppe

site/playground-rerender.html

@@ -42,18 +42,13 @@
 
     upd.addEventListener('click', evt => {
       obj.data[0] = { fn: 'x', nSamples: 10, graphType: 'scatter' }
-
-      // obj.data[0].nSamples = 10
-      // obj.data[0].graphType = 'scatter'
       console.log(obj)
       functionPlot(obj)
     })
 
     redefine.addEventListener('click', evt => {
-      obj.data = [{
-          fn: 'x', nSamples: 10, graphType: 'scatter'
-      }]
-      console.log(obj)
+      obj.data = [functionPlot.text({ text: 'foo', location: [1, 2] })]
+      console.log(obj.data)
       functionPlot(obj)
     })
 

site/playground.html

@@ -29,9 +29,10 @@
       functionPlot({
         target: '#playground',
         data: [
-          { fn: 'x^2', nSamples: 4000, sampler: 'asyncInterval' },
-          { fn: 'sin(x)', nSamples: 4000, sampler: 'asyncInterval' },
-          { fn: '1/x', nSamples: 4000, sampler: 'asyncInterval' }
+          functionPlot.interval({ fn: 'x^2' }),
+          functionPlot.scatter({ fn: 'sin(x)', nSamples: 50 }),
+          functionPlot.polyline({ fn: 'x^3' }),
+          functionPlot.text({ text: 'foo', location: [1, 2] })
         ]
       })
       // functionPlot({

src/chart.ts

@@ -7,11 +7,14 @@ import { select as d3Select, pointer as d3Pointer } from 'd3-selection'
 import { interpolateRound as d3InterpolateRound } from 'd3-interpolate'
 import EventEmitter from 'events'
 
-import { FunctionPlotOptions, FunctionPlotDatum, FunctionPlotScale, FunctionPlotOptionsAxis } from './types.js'
+import { FunctionPlotDatum, FunctionPlotOptions, FunctionPlotScale, FunctionPlotOptionsAxis } from './types.js'
+
+import { Mark } from './graph-types/mark.js'
+import { 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 { helpers } from './helpers/index.js'
 import datumDefaults from './datum-defaults.js'
 import datumValidation from './datum-validation.js'
 import globals from './globals.mjs'
@@ -565,7 +568,7 @@ export class Chart extends EventEmitter.EventEmitter {
     const graphsEnter = graphs.enter().append('g').attr('class', 'graph')
 
     // enter + update
-    graphs.merge(graphsEnter).each(function (d: FunctionPlotDatum, index: number) {
+    graphs.merge(graphsEnter).each(function (d: Mark | FunctionPlotDatum, index: number) {
       // additional options needed in the graph-types/helpers
       d.index = index
 
@@ -574,7 +577,31 @@ export class Chart extends EventEmitter.EventEmitter {
       d.generation = self.generation
 
       const selection = d3Select(this)
-      selection.call(globals.graphTypes[d.graphType](self))
+
+      // To preserve compatibility with v1. Convert the plain object into a mark.
+      let mark: Mark
+      if (!(d instanceof Mark)) {
+        if (d.graphType === 'interval') {
+          mark = interval(d)
+        } else if (d.graphType === 'polyline') {
+          mark = polyline(d)
+        } else if (d.graphType === 'scatter') {
+          mark = scatter(d)
+        } else if (d.graphType === 'text') {
+          mark = text(d)
+        } else {
+          throw new Error(
+            `Cannot convert datum=${d} to be graph of type Interval, Polyline, Scatter or Text.\n` +
+              `Check that a datum is an instance of Mark or that it can converted to any graph type above.`
+          )
+        }
+      } else {
+        mark = d
+      }
+
+      mark.chart = self
+      mark.render(selection)
+
       selection.call(helpers(self))
     })
     this.generation += 1
@@ -731,8 +758,9 @@ export class Chart extends EventEmitter.EventEmitter {
         const xScaleClone = transform.rescaleX(self.meta.zoomBehavior.xScale).interpolate(d3InterpolateRound)
         const yScaleClone = transform.rescaleY(self.meta.zoomBehavior.yScale).interpolate(d3InterpolateRound)
 
-        // update the scales's metadata
-        // NOTE: setting self.meta.xScale = self.meta.zoomBehavior.xScale creates artifacts and weird lines
+        // update the scales' metadata
+        // setting self.meta.xScale = self.meta.zoomBehavior.xScale creates artifacts and weird lines
+        // so that's why the domain and range are cloned and then assigned.
         self.meta.xScale
           .domain(xScaleClone.domain())
           // @ts-ignore domain always returns typeof this.meta.yDomain

src/globals.mjs

@@ -19,7 +19,6 @@ const Globals = {
   DEFAULT_ITERATIONS: null,
   TIP_X_EPS: 1,
   MAX_ITERATIONS: 0,
-  graphTypes: {},
 
   /** @type {null | any} */
   _workerPool: null,
@@ -39,12 +38,4 @@ const Globals = {
 
 Globals.MAX_ITERATIONS = Globals.DEFAULT_WIDTH * 10
 
-function registerGraphType(graphType, graphTypeBulder) {
-  if (Object.hasOwn(Globals.graphTypes, graphType)) {
-    throw new Error(`registerGraphType: graphType ${graphType} is already registered.`)
-  }
-  Globals.graphTypes[graphType] = graphTypeBulder
-}
-
-export { registerGraphType }
 export default Globals

src/graph-types/index.ts

@@ -1,6 +1,6 @@
-import polyline from './polyline.js'
-import interval from './interval.js'
-import scatter from './scatter.js'
-import text from './text.js'
+import { Interval, interval } from './interval.js'
+import { Polyline, polyline } from './polyline.js'
+import { Scatter, scatter } from './scatter.js'
+import { Text, text } from './text.js'
 
-export { polyline, interval, scatter, text }
+export { Polyline, polyline, Scatter, scatter, Interval, interval, Text, text }

src/graph-types/interval.ts

@@ -3,8 +3,8 @@ import { select as d3Select, Selection } from 'd3-selection'
 import { asyncIntervalEvaluate, intervalEvaluate } from '../evaluate-datum.js'
 import { infinity, color } from '../utils.mjs'
 
-import { Chart } from '../index.js'
-import { Interval, FunctionPlotDatum, FunctionPlotScale, LinearFunction } from '../types.js'
+import { Mark } from './mark.js'
+import { Interval as TInterval, FunctionPlotDatum, FunctionPlotScale } from '../types.js'
 import { IntervalSamplerResult } from '../samplers/types.js'
 
 function clampRange(minWidthHeight: number, vLo: number, vHi: number, gLo: number, gHi: number) {
@@ -39,7 +39,7 @@ export function createPathD(
   xScale: FunctionPlotScale,
   yScale: FunctionPlotScale,
   minWidthHeight: number,
-  points: Array<[Interval, Interval]>,
+  points: Array<[TInterval, TInterval]>,
   closed: boolean
 ) {
   let path = ''
@@ -75,54 +75,67 @@ export function createPathD(
   return path
 }
 
-export default function interval(chart: Chart) {
-  const xScale = chart.meta.xScale
-  const yScale = chart.meta.yScale
+export class Interval extends Mark {
+  fn?: any
+  closed: boolean
+  fnType: string
+  sampler: string
+  range?: [number, number]
+  nSamples: number
 
-  function plotLine(selection: Selection<any, FunctionPlotDatum, any, any>) {
-    selection.each(async function (d) {
-      const el = ((plotLine as any).el = d3Select(this))
-      const index = d.index
-      const closed = d.closed
-      let evaluatedData: IntervalSamplerResult
-      if (d.fnType === 'linear' && typeof (d as LinearFunction).fn === 'string' && d.sampler === 'asyncInterval') {
-        evaluatedData = await asyncIntervalEvaluate(chart, d)
-      } else {
-        evaluatedData = intervalEvaluate(chart, d)
-      }
-      const innerSelection = el.selectAll(':scope > path.line').data(evaluatedData)
+  constructor(options: any) {
+    super(options)
+    this.fn = options.fn
+    this.fnType = options.fnType || 'linear'
+    this.sampler = options.sampler || 'interval'
+    this.closed = options.closed
+    this.range = options.range
+    this.nSamples = options.nSamples
+  }
 
-      // the min height/width of the rects drawn by the path generator
-      const minWidthHeight = Math.max((evaluatedData[0] as any).scaledDx, 1)
+  async render(selection: Selection<any, FunctionPlotDatum, any, any>) {
+    const index = this.index
+    const closed = this.closed
+    let evaluatedData: IntervalSamplerResult
+    if (this.fnType === 'linear' && typeof this.fn === 'string' && this.sampler === 'asyncInterval') {
+      evaluatedData = await asyncIntervalEvaluate(this.chart, this as any)
+    } else {
+      evaluatedData = intervalEvaluate(this.chart, this as any)
+    }
+    const innerSelection = selection.selectAll(':scope > path.line').data(evaluatedData)
 
-      const cls = `line line-${index}`
-      const innerSelectionEnter = innerSelection.enter().append('path').attr('class', cls).attr('fill', 'none')
+    // the min height/width of the rects drawn by the path generator
+    const minWidthHeight = Math.max((evaluatedData[0] as any).scaledDx, 1)
 
-      // enter + update
-      const selection = innerSelection
-        .merge(innerSelectionEnter)
-        .attr('stroke-width', minWidthHeight)
-        .attr('stroke', color(d, index) as any)
-        .attr('opacity', closed ? 0.5 : 1)
-        .attr('d', function (d: Array<[Interval, Interval]>) {
-          return createPathD(xScale, yScale, minWidthHeight, d, closed)
-        })
+    const cls = `line line-${index}`
+    const innerSelectionEnter = innerSelection.enter().append('path').attr('class', cls).attr('fill', 'none')
 
-      if (d.attr) {
-        for (const k in d.attr) {
-          // If the attribute to modify is class then append the default class
-          // or otherwise the d3 selection won't work.
-          let val = d.attr[k]
-          if (k === 'class') {
-            val = `${cls} ${d.attr[k]}`
-          }
-          selection.attr(k, val)
+    // enter + update
+    innerSelection
+      .merge(innerSelectionEnter)
+      .attr('stroke-width', minWidthHeight)
+      .attr('stroke', color(this, index) as any)
+      .attr('opacity', closed ? 0.5 : 1)
+      .attr('d', (d: Array<[TInterval, TInterval]>) => {
+        return createPathD(this.chart.meta.xScale, this.chart.meta.yScale, minWidthHeight, d, closed)
+      })
+
+    if (this.attr) {
+      for (const k in this.attr) {
+        // If the attribute to modify is class then append the default class
+        // or otherwise the d3 selection won't work.
+        let val = this.attr[k]
+        if (k === 'class') {
+          val = `${cls} ${this.attr[k]}`
         }
+        selection.attr(k, val)
       }
+    }
 
-      innerSelection.exit().remove()
-    })
+    innerSelection.exit().remove()
   }
+}
 
-  return plotLine
+export function interval(options: any) {
+  return new Interval(options)
 }

src/graph-types/mark.ts

@@ -0,0 +1,23 @@
+import { Chart } from '../index.js'
+
+interface Attr {
+  [key: string]: any
+}
+
+export class Mark {
+  id: string
+  index: number
+  color: string
+  attr: Attr
+
+  chart: Chart
+
+  constructor(options: any) {
+    this.id = options.id
+    this.index = options.index
+    this.attr = options.attr
+    this.color = options.color
+  }
+
+  render(selection: any) {}
+}