mauriciopoppe · mauriciopoppe · Dec 15, 2023 · Dec 16, 2023 · Dec 16, 2023
diff --git a/site/render-as-img.html → site/playground-render-as-img.html b/site/render-as-img.html → site/playground-render-as-img.html
diff --git a/site/scale.html → site/playground-scale.html b/site/scale.html → site/playground-scale.html
diff --git a/site/playground.html b/site/playground.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+	<meta charset="UTF-8">
+	<title>Function Plot</title>
+  <link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="./css/reset.css">
+<style>
+body, text {
+    font-family: Arial, sans-serif;
+    color: black;
+    font-size: 14px;
+}
+</style>
+</head>
+<body>
+  <div id="playground"></div>
+  <script src="function-plot.js"></script>
+<script>
+(function() {
+    functionPlot({
+        target: "#playground",
+        data: [
+            {
+                fn: "x^2"
+            }
+        ]
+    })
+})()
+</script>
+</body>
+</html>
diff --git a/site/sampling.html b/site/sampling.html
diff --git a/src/chart.ts b/src/chart.ts
@@ -1,14 +1,14 @@
 import { line as d3Line, Line } from 'd3-shape'
 import { format as d3Format } from 'd3-format'
-import { scaleLinear as d3ScaleLinear, scaleLog as d3ScaleLog, ScaleLinear, ScaleLogarithmic } from 'd3-scale'
+import { scaleLinear as d3ScaleLinear, scaleLog as d3ScaleLog } from 'd3-scale'
 import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis } from 'd3-axis'
 import { zoom as d3Zoom } from 'd3-zoom'
 // @ts-ignore
 import { select as d3Select, pointer as d3Pointer } from 'd3-selection'
 import { interpolateRound as d3InterpolateRound } from 'd3-interpolate'
 import EventEmitter from 'events'
 
-import { FunctionPlotOptions, FunctionPlotDatum } from './types'
+import { FunctionPlotOptions, FunctionPlotDatum, FunctionPlotScale } from './types'
 
 import annotations from './helpers/annotations'
 import mousetip from './tip'
@@ -39,8 +39,8 @@ export interface ChartMeta {
    */
   height?: number
   zoomBehavior?: any
-  xScale?: ScaleLinear<number, number> | ScaleLogarithmic<number, number>
-  yScale?: ScaleLinear<number, number> | ScaleLogarithmic<number, number>
+  xScale?: FunctionPlotScale
+  yScale?: FunctionPlotScale
   xAxis?: Axis<any>
   yAxis?: Axis<any>
   xDomain?: number[]

diff --git a/src/evaluate.ts b/src/evaluate.ts
@@ -1,13 +1,11 @@
 import globals from './globals'
-import { interval, builtIn } from './samplers'
+import interval from './samplers/interval'
+import builtIn from './samplers/builtIn'
 
 import { Chart } from './index'
 import { FunctionPlotDatum } from './types'
 
-const evalTypeFn = {
-  interval,
-  builtIn
-}
+type SamplerTypeFn = typeof interval | typeof builtIn
 
 /**
  * Computes the endpoints x_lo, x_hi of the range
@@ -34,10 +32,27 @@ function computeEndpoints(scale: any, d: any): [number, number] {
  */
 function evaluate(chart: Chart, d: FunctionPlotDatum) {
   const range = computeEndpoints(chart.meta.xScale, d)
-  const evalFn = evalTypeFn[d.sampler]
+
+  let samplerFn: SamplerTypeFn
+  if (d.sampler === 'builtIn') {
+    samplerFn = builtIn
+  } else if (d.sampler === 'interval') {
+    samplerFn = interval
+  } else {
+    throw new Error(`Invalid sampler function ${d.sampler}`)
+  }
+
   const nSamples = d.nSamples || Math.min(globals.MAX_ITERATIONS, globals.DEFAULT_ITERATIONS || chart.meta.width * 2)
 
-  const data = evalFn(chart, d, range, nSamples)
+  const data = samplerFn({
+    d,
+    range,
+    xScale: chart.meta.xScale,
+    yScale: chart.meta.yScale,
+    xAxis: chart.options.xAxis,
+    yAxis: chart.options.yAxis,
+    nSamples
+  })
   // NOTE: it's impossible to listen for the first eval event
   // as the event is already fired when a listener is attached
   chart.emit('eval', data, d.index, d.isHelper)

diff --git a/src/helpers/secant.ts b/src/helpers/secant.ts
@@ -1,13 +1,13 @@
-import {select as d3Select, Selection} from 'd3-selection'
+import { select as d3Select, Selection } from 'd3-selection'
 
 import { builtIn as builtInEvaluator } from './eval'
 import datumDefaults from '../datum-defaults'
 import { polyline } from '../graph-types/'
 
-import { Chart } from "../index";
+import { Chart } from '../index'
 import { FunctionPlotDatumScope, FunctionPlotDatum, FunctionPlotDatumSecant } from '../types'
 
-export default function secant (chart: Chart) {
+export default function secant(chart: Chart) {
   const secantDefaults = datumDefaults({
     isHelper: true,
     skipTip: true,
@@ -16,11 +16,11 @@ export default function secant (chart: Chart) {
     graphType: 'polyline'
   })
 
-  function computeSlope (scope: FunctionPlotDatumScope) {
+  function computeSlope(scope: FunctionPlotDatumScope) {
     scope.m = (scope.y1 - scope.y0) / (scope.x1 - scope.x0)
   }
 
-  function updateLine (d: FunctionPlotDatum, secant: FunctionPlotDatumSecant) {
+  function updateLine(d: FunctionPlotDatum, secant: FunctionPlotDatumSecant) {
     if (!('x0' in secant)) {
       throw Error('secant must have the property `x0` defined')
     }
@@ -29,20 +29,20 @@ export default function secant (chart: Chart) {
     const x0 = secant.x0
     const x1 = typeof secant.x1 === 'number' ? secant.x1 : Infinity
     Object.assign(secant.scope, {
-      x0: x0,
-      x1: x1,
+      x0,
+      x1,
       y0: builtInEvaluator(d, 'fn', { x: x0 }),
       y1: builtInEvaluator(d, 'fn', { x: x1 })
     })
     computeSlope(secant.scope)
   }
 
-  function setFn (d: FunctionPlotDatum, secant: FunctionPlotDatumSecant) {
+  function setFn(d: FunctionPlotDatum, secant: FunctionPlotDatumSecant) {
     updateLine(d, secant)
     secant.fn = 'm * (x - x0) + y0'
   }
 
-  function setMouseListener (d: FunctionPlotDatum, secantObject: FunctionPlotDatumSecant) {
+  function setMouseListener(d: FunctionPlotDatum, secantObject: FunctionPlotDatumSecant) {
     const self = this
     if (secantObject.updateOnMouseMove && !secantObject.$$mouseListener) {
       secantObject.$$mouseListener = function ({ x }: any) {
@@ -54,12 +54,12 @@ export default function secant (chart: Chart) {
     }
   }
 
-  function computeLines (d: FunctionPlotDatum) {
+  function computeLines(d: FunctionPlotDatum) {
     const self = this
     const data = []
     d.secants = d.secants || []
     for (let i = 0; i < d.secants.length; i += 1) {
-      const secant = d.secants[i] = Object.assign({}, secantDefaults, d.secants[i])
+      const secant = (d.secants[i] = Object.assign({}, secantDefaults, d.secants[i]))
       // necessary to make the secant have the same color as d
       secant.index = d.index
       if (!secant.fn) {
@@ -71,25 +71,19 @@ export default function secant (chart: Chart) {
     return data
   }
 
-  const secant = function (selection: Selection<any, FunctionPlotDatum, any, any>) {
+  function secant(selection: Selection<any, FunctionPlotDatum, any, any>) {
     selection.each(function (d) {
       const el = d3Select(this)
       const data = computeLines.call(selection, d)
-      const innerSelection = el.selectAll('g.secant')
-        .data(data)
+      const innerSelection = el.selectAll('g.secant').data(data)
 
-      const innerSelectionEnter = innerSelection.enter()
-        .append('g')
-        .attr('class', 'secant')
+      const innerSelectionEnter = innerSelection.enter().append('g').attr('class', 'secant')
 
       // enter + update
-      innerSelection.merge(innerSelectionEnter)
-        .call(polyline(chart))
+      innerSelection.merge(innerSelectionEnter).call(polyline(chart))
 
       // change the opacity of the secants
-      innerSelection.merge(innerSelectionEnter)
-        .selectAll('path')
-        .attr('opacity', 0.5)
+      innerSelection.merge(innerSelectionEnter).selectAll('path').attr('opacity', 0.5)
 
       // exit
       innerSelection.exit().remove()