Export function to register new graph types

Author: mauriciopoppe

src/chart.ts

@@ -1,7 +1,6 @@
 import { FunctionPlotDatum } from './types'
 
-
-export default function datumDefaults (d: FunctionPlotDatum) {
+export default function datumDefaults(d: FunctionPlotDatum) {
   // default graphType uses boxes i.e. 2d intervals
   if (!('graphType' in d)) {
     d.graphType = 'interval'
@@ -10,9 +9,7 @@ export default function datumDefaults (d: FunctionPlotDatum) {
   // if the graphType is not `interval` then the sampler is `builtIn`
   // because the interval sampler returns a box instead of a point
   if (!('sampler' in d)) {
-    d.sampler = d.graphType !== 'interval'
-      ? 'builtIn'
-      : 'interval'
+    d.sampler = d.graphType !== 'interval' ? 'builtIn' : 'interval'
   }
 
   // TODO: handle default fnType

src/datum-defaults.ts

@@ -1,7 +1,23 @@
-import { hsl as d3Hsl } from 'd3-color'
+import { hsl as d3Hsl, HSLColor } from 'd3-color'
 
-// var d3 = window.d3
-const Globals = {
+import { GraphTypeBuilder } from './graph-types/types'
+
+type TGlobals = {
+  COLORS: Array<HSLColor>
+  DEFAULT_WIDTH: number
+  DEFAULT_HEIGHT: number
+  DEFAULT_ITERATIONS: number
+  MAX_ITERATIONS: number
+  TIP_X_EPS: number
+
+  /**
+   * graphTypes are the graph types registered in functionPlot,
+   * to register a new graphType use `registerGraphType`
+   */
+  graphTypes: { [key: string]: GraphTypeBuilder }
+}
+
+const Globals: TGlobals = {
   COLORS: [
     'steelblue',
     'red',
@@ -17,13 +33,20 @@ const Globals = {
   }),
   DEFAULT_WIDTH: 550,
   DEFAULT_HEIGHT: 350,
+  DEFAULT_ITERATIONS: null,
   TIP_X_EPS: 1,
-  DEFAULT_ITERATIONS: Infinity,
-  MAX_ITERATIONS: 0
+  MAX_ITERATIONS: 0,
+  graphTypes: {}
 }
 
-Globals.DEFAULT_ITERATIONS = null
 Globals.MAX_ITERATIONS = Globals.DEFAULT_WIDTH * 10
 
-// module.exports.Globals = Globals
+function registerGraphType(graphType: string, graphTypeBulder: GraphTypeBuilder) {
+  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/globals.ts

@@ -0,0 +1,22 @@
+import { Selection } from 'd3-selection'
+import { FunctionPlotDatum } from '../types'
+import { Chart } from '../chart'
+
+/**
+ * GraphTypeBuilder is the returned Plotter instance, this function is called
+ * every time there's an update in the canvas, it corresponds to the `my` function
+ * described in detail in https://bost.ocks.org/mike/chart/
+ *
+ * @param {Chart} Is a reference to the Chart instance.
+ */
+type GraphTypePlotter = (selection: Selection<any, FunctionPlotDatum, any, any>) => any
+
+/**
+ * GraphTypeBuilder is a graph type builder, functionPlot uses the standard d3 reusable char pattern,
+ * it corresponds to the `chart` function descripbed in detail in https://bost.ocks.org/mike/chart/
+ *
+ * @param {Chart} Is a reference to the Chart instance.
+ */
+type GraphTypeBuilder = (chart: Chart) => GraphTypePlotter
+
+export { GraphTypePlotter, GraphTypeBuilder }