feat: new graph type text

Author: mauriciopoppe

src/graph-types/index.ts

@@ -1,5 +1,6 @@
 import polyline from './polyline'
 import interval from './interval'
 import scatter from './scatter'
+import text from './text'
 
-export { polyline, interval, scatter }
+export { polyline, interval, scatter, text }

src/graph-types/scatter.ts

@@ -34,7 +34,7 @@ export default function Scatter(chart: Chart) {
 
       const selection = innerSelection
         .merge(innerSelectionEnter)
-        .attr('fill', d3Hsl(color.toString()).brighter(1.5).hex())
+        .attr('fill', d3Hsl(color.toString()).brighter(1.5).formatHex())
         .attr('stroke', color)
         .attr('opacity', 0.7)
         .attr('r', 1)

src/graph-types/text.ts

@@ -0,0 +1,44 @@
+import { select as d3Select, Selection } from 'd3-selection'
+import { hsl as d3Hsl } from 'd3-color'
+
+import utils from '../utils'
+
+import { Chart } from '../index'
+import { FunctionPlotDatum } from '../types'
+
+export default function Text(chart: Chart) {
+  const xScale = chart.meta.xScale
+  const yScale = chart.meta.yScale
+
+  function text(selection: Selection<any, FunctionPlotDatum, any, any>) {
+    selection.each(function (d) {
+      // Force some parameters to make it look like a vector.
+      d.sampler = 'builtIn'
+      d.fnType = 'vector'
+
+      const innerSelection = d3Select(this).selectAll(':scope > text.fn-text').data([d.location])
+      const innerSelectionEnter = innerSelection.enter().append('text').attr('class', `fn-text fn-text-${d.index}`)
+
+      const color = utils.color(d, d.index)
+
+      // enter + update
+      const selection = innerSelection
+        .merge(innerSelectionEnter)
+        .attr('fill', d3Hsl(color.toString()).brighter(1.5).formatHex())
+        .attr('x', (d) => xScale(d[0]))
+        .attr('y', (d) => yScale(d[1]))
+        .text(() => d.text)
+
+      if (d.attr) {
+        for (const k in d.attr) {
+          selection.attr(k, d.attr[k])
+        }
+      }
+
+      // exit
+      innerSelection.exit().remove()
+    })
+  }
+
+  return text
+}

src/index.ts

@@ -4,13 +4,14 @@ import { FunctionPlotOptions } from './types'
 import { Chart } from './chart'
 
 import globals, { registerGraphType } from './globals'
-import { polyline, interval, scatter } from './graph-types'
+import { polyline, interval, scatter, text } from './graph-types'
 import * as $eval from './helpers/eval'
 
 // register common graphTypes on library load.
 registerGraphType('polyline', polyline)
 registerGraphType('interval', interval)
 registerGraphType('scatter', scatter)
+registerGraphType('text', text)
 
 /**
  * functionPlot is a function plotter of 2d functions.

src/types.ts

@@ -154,7 +154,7 @@ export interface FunctionPlotDatum {
   /**
    * The type of function to render
    */
-  fnType?: 'linear' | 'parametric' | 'implicit' | 'polar' | 'points' | 'vector'
+  fnType?: 'linear' | 'parametric' | 'implicit' | 'polar' | 'points' | 'vector' | string
 
   /**
    * The sampler to take samples from `range`, available values are `interval|builtIn`
@@ -224,13 +224,23 @@ export interface FunctionPlotDatum {
   /**
    * An array of 2-number array which hold the coordinates of the points to render when `fnType: 'vector'`
    */
-  vector?: number[]
+  vector?: [number, number]
 
   /**
    * Vector offset when `fnType: 'vector'`
    */
   offset?: number[]
 
+  /**
+   * An array of 2-number array for the position of the text when `fnType: 'text'`
+   */
+  location?: [number, number]
+
+  /**
+   * Used as text if `graphType: 'text'`
+   */
+  text?: string
+
   // helper data
   /**
    * @private

test/e2e/__image_snapshots__/graphs-test-js-function-plot-should-render-text-1-snap.png

@@ -188,6 +188,31 @@ functionPlot({
     fn: 'x^2',
     graphType: 'interval'
   }]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should render text', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  data: [
+    {
+      graphType: "text",
+      location: [1, 1],
+      text: "hello world"
+    },
+    {
+      graphType: "text",
+      location: [-1, -1],
+      text: "foo bar",
+      attr: {
+        'text-anchor': 'end'
+      }
+    },
+  ]
 })
     `)
     const image = await page.screenshot()