Refactor annotation API to use label to be consistent with axis

Author: mauriciopoppe

jest.config.cjs

@@ -14,6 +14,9 @@ const config = {
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '<rootDir>/{src,test}/**/?(*.)+(spec|test).[jt]s?(x)'],
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!d3-\\.*|internmap)'],
   testEnvironment: 'node',
+  globals: {
+    __COMMIT_HASH__: 'unknown'
+  },
   extensionsToTreatAsEsm: ['.ts']
 }
 

src/helpers/annotations.ts

@@ -54,30 +54,25 @@ export default function annotations(options: { owner: Chart }) {
         .merge(enter)
         .selectAll('text')
         .data(function (d) {
-          return [
-            {
-              text: d.text || '',
-              hasX: 'x' in d
-            }
-          ]
+          return [{ text: d.label || '' }]
         })
       text
         .enter()
         .append('text')
         .attr('y', function (d) {
-          return d.hasX ? 3 : 0
+          return 'x' in d ? 3 : 0
         })
         .attr('x', function (d) {
-          return d.hasX ? 0 : 3
+          return 'x' in d ? 0 : 3
         })
         .attr('dy', function (d) {
-          return d.hasX ? 5 : -5
+          return 'x' in d ? 5 : -5
         })
         .attr('text-anchor', function (d) {
-          return d.hasX ? 'end' : ''
+          return 'x' in d ? 'end' : ''
         })
         .attr('transform', function (d) {
-          return d.hasX ? 'rotate(-90)' : ''
+          return 'x' in d ? 'rotate(-90)' : ''
         })
         .text(function (d) {
           return d.text

src/types.ts

@@ -151,14 +151,15 @@ export interface AbstractFunctionDatum {
   fnType?: 'linear' | 'parametric' | 'implicit' | 'polar' | 'points' | 'vector'
 
   /**
-   * The sampler to take samples from `range`, available values are `interval|builtIn`
+   * The sampler to take samples from `range`, available values are `builtIn|interval|asyncInterval`
    *
    * - **NOTE: `builtIn` should only be used when `graphType` is `polyline|scatter`**
    */
   sampler?: 'interval' | 'builtIn' | 'asyncInterval'
 
   /**
-   * The number of values to be taken from `range` to evaluate the function, note that if interval-arithmetic is used the function
+   * The number of values to be taken from `range` to evaluate the function,
+   * note that if interval-arithmetic is used the function
    * will be evaluated with intervals instead of single values
    */
   nSamples?: number
@@ -316,7 +317,7 @@ export interface TextDatum {
   text: string
 
   /**
-   * An array of 2-number array for the position of the text when `fnType: 'text'`
+   * An array of 2-number array for the position of the text when `graphType: 'text'`
    */
   location?: [number, number]
 }
@@ -345,9 +346,9 @@ export interface FunctionPlotAnnotation {
   y?: number
 
   /**
-   * The text displayed next to the line
+   * The label displayed next to the line
    */
-  text?: string
+  label?: string
 }
 
 export interface FunctionPlotOptions {

test/e2e/__image_snapshots__/graphs-test-ts-function-plot-should-destroy-the-svg-node-on-destroy-1-snap.png

@@ -131,10 +131,10 @@ const snippets = [
           x: -1
         }, {
           x: 1,
-          text: 'x = 1'
+          label: 'x = 1'
         }, {
           y: 2,
-          text: 'y = 2'
+          label: 'y = 2'
         }]
       })
     }
@@ -391,21 +391,7 @@ const snippets = [
     fn: function () {
       const instance = functionPlot({
         target: '#playground',
-        data: [
-          {
-            graphType: 'text',
-            location: [1, 1],
-            text: 'hello world'
-          } as TextFunction,
-          {
-            graphType: 'text',
-            location: [-1, -1],
-            text: 'foo bar',
-            attr: {
-              'text-anchor': 'end'
-            }
-          } as TextFunction
-        ]
+        data: [{ fn: 'x^2' } as LinearFunction]
       })
       instance.destroy()
     }