packages/lib/docs/Components.md
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
### Table of Contents
- [Point][1]
- [Parameters][2]
- [mountTo][3]
- [Parameters][4]
- [update][5]
- [Parameters][6]
- [Legend][7]
- [Parameters][8]
- [darkenColor][9]
- [Parameters][10]
- [clamp][11]
- [Parameters][12]
- [mountTo][13]
- [Parameters][14]
- [Rect][15]
- [Parameters][16]
- [mountTo][17]
- [Parameters][18]
- [update][19]
- [Parameters][20]
- [AbstractShape][21]
- [Parameters][22]
- [mountTo][23]
- [Parameters][24]
- [hide][25]
- [update][26]
- [Parameters][27]
- [updateGeneric][28]
- [Parameters][29]
- [updateColor][30]
- [Parameters][31]
- [updateOpacity][32]
- [Parameters][33]
- [updateStroke][34]
- [Parameters][35]
- [updateProp][36]
- [Parameters][37]
- [dismount][38]
- [Scale][39]
- [Parameters][40]
- [getScaleObject][41]
- [Parameters][42]
- [Rug][43]
- [Parameters][44]
- [mountTo][45]
- [Parameters][46]
- [Line][47]
- [Parameters][48]
- [mountTo][49]
- [Parameters][50]
- [Tooltip][51]
- [Parameters][52]
- [setTextFunction][53]
- [Parameters][54]
- [baseTextFunction][55]
- [Parameters][56]
- [update][57]
- [Parameters][58]
- [hide][59]
- [mountTo][60]
- [Parameters][61]
- [addText][62]
- [Area][63]
- [Parameters][64]
- [mountTo][65]
- [Parameters][66]
- [Delaunay][67]
- [Parameters][68]
- [mountDelaunay][69]
- [Parameters][70]
- [normalizePoints][71]
- [Parameters][72]
- [gotPoint][73]
- [Parameters][74]
- [clickedPoint][75]
- [Parameters][76]
- [mountTo][77]
- [Parameters][78]
- [Axis][79]
- [Parameters][80]
- [setLabelOffset][81]
- [Parameters][82]
- [setupAxisObject][83]
- [domainObject][84]
- [labelObject][85]
- [mountTo][86]
- [Parameters][87]
- [diffToTimeFormat][88]
- [stringToFormat][89]
- [Parameters][90]
## Point
**Extends AbstractShape**
Create a new point.
### Parameters
- `args` **[Object][91]** argument object. See [AbstractShape][21] for general parameters.
- `args.xAccessor` **[Function][92]** function to access the x value of the point.
- `args.yAccessor` **[Function][92]** function to access the y value of the point.
- `args.radius` **[Number][93]** radius of the point. (optional, default `1`)
- `args.args` **...any**
### mountTo
Mount the point to the given node.
#### Parameters
- `svg` **[Object][91]** d3 node to mount the point to.
Returns **void**
### update
Update the point.
#### Parameters
- `data` **[Object][91]** point object
- `data.data`
- `data.args` **...any**
Returns **void**
## Legend
Set up a new legend.
### Parameters
- `args` **[Object][91]** argument object.
- `args.legend` **[Array][94]** array of descriptive legend strings.
- `args.colorScheme` **[Array][94]** colors used for the legend. Will be darkened for better visibility.
- `args.symbol` **[String][95]** used in the legend (line, circle, square).
- `args.symbolType`
### darkenColor
- **See: [https://css-tricks.com/snippets/javascript/lighten-darken-color/][96]
**
Darken a given color by a given amount.
#### Parameters
- `color` **[String][95]** hex color specifier
- `amount` **[Number][93]** how much to darken the color.
Returns **[String][95]** darkened color in hex representation.
### clamp
Clamp a number between 0 and 255.
#### Parameters
- `number` **[Number][93]** number to be clamped.
Returns **[Number][93]** clamped number.
### mountTo
Mount the legend to the given node.
#### Parameters
- `node` **([String][95] \| [Object][91])** d3 specifier or d3 node to mount the legend to.
Returns **void**
## Rect
**Extends AbstractShape**
Create a new rectangle.
### Parameters
- `args` **[Object][91]** argument object. See [AbstractShape][21] for general parameters.
- `args.xAccessor` **[Function][92]** function to access the x value of the rectangle.
- `args.yAccessor` **[Function][92]** function to access the y value of the rectangle.
- `args.widthAccessor` **[Function][92]** function to access the width of the rectangle.
- `args.heightAccessor` **[Function][92]** function to access the height of the rectangle.
- `args.args` **...any**
### mountTo
Mount the rectangle to the given node.
#### Parameters
- `svg` **[Object][91]** d3 node to mount the rectangle to.
Returns **void**
### update
Update the rectangle.
#### Parameters
- `data` **[Object][91]** updated data object.
- `data.data`
- `data.args` **...any**
Returns **void**
## AbstractShape
Create a new abstract shape.
This is an abstract class and not meant to be directly instantiated.
### Parameters
- `args` **[Object][91]** argument object.
- `args.data` **[Object][91]** data point used to generate the shape.
- `args.xScale` **[Scale][97]** scale used to compute x values.
- `args.yScale` **[Scale][97]** scale used to compute y values.
- `args.color` **[String][95]** color used for fill and stroke.
- `args.fillOpacity` **[Number][93]** opacity of the shape fill. (optional, default `1`)
- `args.strokeWidth` **[Number][93]** width of the stroke around the shape. (optional, default `0`)
### mountTo
Render the shape and mount it to the given node.
Implemented by classes extending AbstractShape.
#### Parameters
- `svg` **[Object][91]** D3 node to mount the shape to
Returns **void**
### hide
Hide the shape by setting the opacity to 0. This doesn't remove the shape.
Returns **void**
### update
Update the given parameters of the object.
Implemented by classes extending AbstractShape.
#### Parameters
- `args` **[Object][91]** parameters to be updated
Returns **void**
### updateGeneric
Update generic properties of the shape.
This method can be used in the implementations of [AbstractShape#update][98].
#### Parameters
- `$0` **[Object][91]**
- `$0.color`
- `$0.fillOpacity`
- `$0.strokeWidth`
- `color` **[String][95]** new color of the shape.
- `fillOpacity` **[Number][93]** new fill opacity of the shape.
- `strokeWidth` **[Number][93]** new stroke width of the shape.
Returns **void**
### updateColor
Update the color of the shape.
#### Parameters
- `color` **[String][95]** new color of the shape.
Returns **void**
### updateOpacity
Update the fill opacity of the shape.
#### Parameters
- `fillOpacity` **[Number][93]** new fill opacity of the shape.
Returns **void**
### updateStroke
Update the stroke width of the shape.
#### Parameters
- `strokeWidth` **[Number][93]** new stroke width of the shape.
Returns **void**
### updateProp
Update an attribute of the raw shape node.
#### Parameters
- `name` **[String][95]** attribute name
- `value` **any** new value
Returns **void**
### dismount
Remove the shape.
Returns **void**
## Scale
Set up a new scale.
### Parameters
- `args` **[Object][91]** argument object.
- `args.type` **[String][95]** type of scale. Can currently only be linear. (optional, default `'linear'`)
- `args.range` **[Array][94]?** range of the scale.
- `args.domain` **[Array][94]?** domain of the scale.
- `args.minValue` **[Number][93]?** overwrites the lower bound of the domain.
- `args.maxValue` **[Number][93]?** overwrites the upper bound of the domain.
- `args.scaleObject`
### getScaleObject
Get the d3 scale object for a given scale type.
#### Parameters
- `type` **[String][95]** scale type
Returns **[Object][91]** d3 scale type
## Rug
Set up a new rug.
### Parameters
- `args` **[Object][91]** argument object.
- `args.accessor` **[Function][92]** accessor used to get the rug value for a given data point.
- `args.scale` **[Scale][97]** scale function of the rug.
- `args.tickLength` **[Number][93]** length of the rug's ticks. (optional, default `5`)
- `args.colors` **[Array][94]** color scheme of the rug ticks. (optional, default `schemeCategory10`)
- `args.orientation` **[String][95]** orientation of the rug, either vertical or horizontal. (optional, default `'horizontal'`)
- `args.left` **[Number][93]** left margin of the rug. (optional, default `0`)
- `args.top` **[Number][93]** top margin of the rug. (optional, default `0`)
- `args.data`
### mountTo
Mount the rug to the given node.
#### Parameters
- `svg` **[Object][91]** d3 node to mount the rug to.
Returns **void**
## Line
Create a new line.
### Parameters
- `args` **[Object][91]** argument object.
- `args.data` **[Array][94]** array of data points used to create the line.
- `args.xAccessor` **[Function][92]** function to access the x value for a given data point.
- `args.yAccessor` **[Function][92]** function to access the y value for a given data point.
- `args.xScale` **[Scale][97]** scale used to compute x values.
- `args.yScale` **[Scale][97]** scale used to compute y values.
- `args.curve` **[Function][92]** curving function used to draw the line. See [https://github.com/d3/d3-shape#curves][99] for curves available in d3. (optional, default `catmullRom`)
- `args.color` **[String][95]** color of the line.
- `args.defined` **[Function][92]?** optional function specifying whether or not to show a given datapoint.
### mountTo
Mount the line to the given d3 node.
#### Parameters
- `svg` **[Object][91]** d3 node to mount the line to.
Returns **void**
## Tooltip
Set up a new tooltip.
### Parameters
- `args` **[Object][91]** argument object. (optional, default `{}`)
- `args.legendObject` **[String][95]** symbol to show in the tooltip (circle, line, square). (optional, default `'line'`)
- `args.legend` **[Array][94]** legend used to correctly describe data in multi-dimensional cases. (optional, default `[]`)
- `args.colors` **[Array][94]** color scheme for multi-dimensional cases. (optional, default `schemeCategory10`)
- `args.textFunction` **[Function][92]?** custom text function for the tooltip text. Generated from xAccessor and yAccessor if not
- `args.data` **[Array][94]** entries to show in the tooltip. This is usually empty when first instantiating the tooltip. (optional, default `[]`)
- `args.left` **[Number][93]** margin to the left of the tooltip. (optional, default `0`)
- `args.top` **[Number][93]** margin to the top of the tooltip. (optional, default `0`)
- `args.xAccessor` **[Function][92]?** if no custom text function is specified, this function specifies how to get the x value from a specific data point.
- `args.yAccessor` **[Function][92]?** if no custom text function is specified, this function specifies how to get the y value from a specific data point.
### setTextFunction
Sets the text function for the tooltip.
#### Parameters
- `textFunction` **[Function][92]?** custom text function for the tooltip text. Generated from xAccessor and yAccessor if not
- `xAccessor` **[Function][92]?** if no custom text function is specified, this function specifies how to get the x value from a specific data point.
- `yAccessor` **[Function][92]?** if no custom text function is specified, this function specifies how to get the y value from a specific data point.
Returns **void**
### baseTextFunction
If no textFunction was specified when creating the tooltip instance, this method generates a text function based on the xAccessor and yAccessor.
#### Parameters
- `$0` **[Object][91]**
- `$0.xAccessor`
- `$0.yAccessor`
- `xAccessor` **[Function][92]** returns the x value of a given data point.
- `yAccessor` **[Function][92]** returns the y value of a given data point.
Returns **[Function][92]** base text function used to render the tooltip for a given datapoint.
### update
Update the tooltip.
#### Parameters
- `$0` **[Object][91]**
- `$0.data`
- `$0.legendObject`
- `$0.legend`
- `data` **[Array][94]** array of data points to be shown in the tooltip.
- `legendObject` **[String][95]** update the type of legend object to be shown in the tooltip (line, circle, square).
- `legend` **[Array][94]** legend used by the graph.
Returns **void**
### hide
Hide the tooltip (without destroying it).
Returns **void**
### mountTo
Mount the tooltip to the given d3 node.
#### Parameters
- `svg` **[Object][91]** d3 node to mount the tooltip to.
Returns **void**
### addText
Adds the text to the tooltip.
For each datapoint in the data array, one line is added to the tooltip.
Returns **void**
## Area
Create a new area shape.
Meant to be used together with a [Line][47].
### Parameters
- `args` **[Object][91]** argument object.
- `args.data` **[Array][94]** data for which the shape should be created.
- `args.xAccessor` **[Function][92]** x accessor function.
- `args.yAccessor` **[Function][92]** y accessor function.
- `args.y0Accessor` **[Function][92]** y base accessor function. Defaults to static 0.
- `args.y1Accessor` **[Function][92]** alternative to yAccessor.
- `args.xScale` **[Scale][97]** scale used to scale elements in x direction.
- `args.yScale` **[Scale][97]** scale used to scale elements in y direction.
- `args.curve` **[Function][92]** curving function. See [https://github.com/d3/d3-shape#curves][99] for available curves in d3.
- `args.color` **[String][95]** color of the area. (optional, default `'none'`)
- `args.defined` **[Function][92]?** optional function specifying whether or not to show a given datapoint. (optional, default `null`)
### mountTo
Mount the area to a given d3 node.
#### Parameters
- `svg` **[Object][91]** d3 node to mount the area to.
Returns **void**
## Delaunay
Instantiate a new delaunay computation instance.
### Parameters
- `args` **[Object][91]** argument object.
- `args.points` **[Array][94]** raw data basis for delaunay computations. Can be nested. (optional, default `[]`)
- `args.xAccessor` **[Function][92]** function to access the x value for a given data point.
- `args.yAccessor` **[Function][92]** function to access the y value for a given data point.
- `args.xScale` **[Scale][97]** scale used to scale elements in x direction.
- `args.yScale` **[Scale][97]** scale used to scale elements in y direction.
- `args.onPoint` **[Function][92]?** function called with the array of nearest points on mouse movement. If aggregate is false, the array will contain at most one element.
- `args.onLeave` **[Function][92]?** function called when the delaunay area is left.
- `args.onClick` **[Function][92]?** function called with the array of nearest points on mouse click in the delaunay area. If aggregate is false, the array will contain at most one element.
- `args.nested` **[Boolean][100]** whether or not the points array contains sub-arrays. (optional, default `false`)
- `args.aggregate` **[Boolean][100]** if multiple points have the same x value and should be shown together, aggregate can be set to true. (optional, default `false`)
- `args.defined` **[Function][92]?** optional function specifying whether or not to show a given datapoint. (optional, default `null`)
### mountDelaunay
Create a new delaunay triangulation.
#### Parameters
- `isNested` **[Boolean][100]** whether or not the data is nested
- `aggregate` **[Boolean][100]** whether or not to aggregate points based on their x value
Returns **void**
### normalizePoints
Normalize the passed data points.
#### Parameters
- `args` **[Object][91]** argument object
- `args.points` **[Array][94]** raw data array
- `args.isNested` **[Boolean][100]** whether or not the points are nested
- `args.aggregate` **[Boolean][100]** whether or not to aggregate points based on their x value
- `args.defined` **[Function][92]?** optional function specifying whether or not to show a given datapoint. (optional, default `null`)
Returns **void**
### gotPoint
Handle raw mouse movement inside the delaunay rect.
Finds the nearest data point(s) and calls onPoint.
#### Parameters
- `rawX` **[Number][93]** raw x coordinate of the cursor.
- `rawY` **[Number][93]** raw y coordinate of the cursor.
Returns **void**
### clickedPoint
Handle raw mouse clicks inside the delaunay rect.
Finds the nearest data point(s) and calls onClick.
#### Parameters
- `rawX` **[Number][93]** raw x coordinate of the cursor.
- `rawY` **[Number][93]** raw y coordinate of the cursor.
Returns **void**
### mountTo
Mount the delaunator to a given d3 node.
#### Parameters
- `svg` **[Object][91]** d3 selection to mount the delaunay elements to.
Returns **void**
## Axis
Instantiate a new axis.
### Parameters
- `args` **[Object][91]** argument object.
- `args.orientation` **[String][95]** orientation of the axis. Can be top, bottom, left, right. (optional, default `'bottom'`)
- `args.label` **[String][95]?** optional label to place beside the axis.
- `args.labelOffset` **[Number][93]?** offset between label and axis.
- `args.top` **[Number][93]** translation from the top of the chart's box to render the axis. (optional, default `0`)
- `args.left` **[Number][93]** translation from the left of the chart's to render the axis. (optional, default `0`)
- `args.height` **[Number][93]** if extended ticks are used, this parameter specifies the inner length of ticks. (optional, default `0`)
- `args.scale` **[Scale][97]** scale of the axis.
- `args.tickFormat` **([String][95] \| [Function][92])?** can be 1) a function to format a given tick or a specifier, or 2) one of the available standard formatting types (date, number, percentage) or a string for d3-format.
- `args.tickCount` **[Number][93]?** number of ticks to render. Defaults to 3 for vertical and 6 for horizontal axes.
- `args.compact` **[Boolean][100]** whether or not to render a compact version of the axis (clamps the main axis line at the outermost ticks). (optional, default `false`)
- `args.buffer` **[Number][93]** buffer used by the chart. Necessary to compute margins.
- `args.prefix` **[String][95]** prefix for tick labels. (optional, default `''`)
- `args.suffix` **[String][95]** suffix for tick labels. (optional, default `''`)
- `args.tickLength` **[Number][93]?** overwrite d3's default tick lengths.
- `args.extendedTicks` **[Boolean][100]** draw extended ticks into the graph (used to make a grid). (optional, default `false`)
### setLabelOffset
Set the label offset.
#### Parameters
- `labelOffset` **[Number][93]?** offset of the label.
Returns **void**
### setupAxisObject
Set up the main axis object.
Returns **void**
### domainObject
Get the domain object call function.
Returns **[Function][92]** that mounts the domain when called.
### labelObject
Get the label object call function.
Returns **[Function][92]** that mounts the label when called.
### mountTo
Mount the axis to the given d3 node.
#### Parameters
- `svg` **[Object][91]** d3 node.
Returns **void**
### diffToTimeFormat
Compute the time formatting function based on the time domain.
Returns **[Function][92]** d3 function for formatting time.
### stringToFormat
Get the d3 number formatting function for an abstract number type.
#### Parameters
- `formatType` **[String][95]** abstract format to be converted (number, date, percentage)
Returns **[Function][92]** d3 formatting function for the given abstract number type.
[1]: #point
[2]: #parameters
[3]: #mountto
[4]: #parameters-1
[5]: #update
[6]: #parameters-2
[7]: #legend
[8]: #parameters-3
[9]: #darkencolor
[10]: #parameters-4
[11]: #clamp
[12]: #parameters-5
[13]: #mountto-1
[14]: #parameters-6
[15]: #rect
[16]: #parameters-7
[17]: #mountto-2
[18]: #parameters-8
[19]: #update-1
[20]: #parameters-9
[21]: #abstractshape
[22]: #parameters-10
[23]: #mountto-3
[24]: #parameters-11
[25]: #hide
[26]: #update-2
[27]: #parameters-12
[28]: #updategeneric
[29]: #parameters-13
[30]: #updatecolor
[31]: #parameters-14
[32]: #updateopacity
[33]: #parameters-15
[34]: #updatestroke
[35]: #parameters-16
[36]: #updateprop
[37]: #parameters-17
[38]: #dismount
[39]: #scale
[40]: #parameters-18
[41]: #getscaleobject
[42]: #parameters-19
[43]: #rug
[44]: #parameters-20
[45]: #mountto-4
[46]: #parameters-21
[47]: #line
[48]: #parameters-22
[49]: #mountto-5
[50]: #parameters-23
[51]: #tooltip
[52]: #parameters-24
[53]: #settextfunction
[54]: #parameters-25
[55]: #basetextfunction
[56]: #parameters-26
[57]: #update-3
[58]: #parameters-27
[59]: #hide-1
[60]: #mountto-6
[61]: #parameters-28
[62]: #addtext
[63]: #area
[64]: #parameters-29
[65]: #mountto-7
[66]: #parameters-30
[67]: #delaunay
[68]: #parameters-31
[69]: #mountdelaunay
[70]: #parameters-32
[71]: #normalizepoints
[72]: #parameters-33
[73]: #gotpoint
[74]: #parameters-34
[75]: #clickedpoint
[76]: #parameters-35
[77]: #mountto-8
[78]: #parameters-36
[79]: #axis
[80]: #parameters-37
[81]: #setlabeloffset
[82]: #parameters-38
[83]: #setupaxisobject
[84]: #domainobject
[85]: #labelobject
[86]: #mountto-9
[87]: #parameters-39
[88]: #difftotimeformat
[89]: #stringtoformat
[90]: #parameters-40
[91]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[92]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[93]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[94]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[95]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[96]: https://css-tricks.com/snippets/javascript/lighten-darken-color/
[97]: #scale
[98]: #abstractshapeupdate
[99]: https://github.com/d3/d3-shape#curves
[100]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean