Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@d3fc/d3fc-series

Package Overview
Dependencies
Maintainers
3
Versions
79
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@d3fc/d3fc-series - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

src/webgl/area.js

16

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log

# [4.2.0](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-series@4.1.1...@d3fc/d3fc-series@4.2.0) (2020-01-03)
### Bug Fixes
* fix cap function on boxPlot ([5d3f220](https://github.com/d3fc/d3fc/commit/5d3f220))
### Features
* webgl series implementations ([233ed25](https://github.com/d3fc/d3fc/commit/233ed25))
## [4.1.1](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-series@4.1.0...@d3fc/d3fc-series@4.1.1) (2019-11-28)

@@ -8,0 +24,0 @@

21

examples/area.js

@@ -22,3 +22,4 @@ var width = 500;

.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; });
.mainValue(function(d) { return d; })
.baseValue(10.5);

@@ -40,3 +41,19 @@ container.append('g')

.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; });
.mainValue(function(d) { return d; })
.baseValue(10.5);
canvasLine(data);
var webgl = d3.select('#area-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglArea = fc.seriesWebglArea()
.xScale(xScale)
.yScale(yScale)
.defined((_, i) => i % 20 !== 0)
.context(gl)
.crossValue((_, i) => i)
.mainValue((d) => d)
.baseValue(10.5);
webglArea(data);

4

examples/bar.js

@@ -32,3 +32,3 @@ var width = 500;

var canvasLine = fc.seriesCanvasBar()
var canvasBar = fc.seriesCanvasBar()
.xScale(xScale)

@@ -39,2 +39,2 @@ .yScale(yScale)

.mainValue(function(d) { return d; });
canvasLine(data);
canvasBar(data);

@@ -47,3 +47,3 @@ var width = 500;

var canvasBoxplot = fc.autoBandwidth(fc.seriesCanvasBoxPlot())
var canvasBoxPlot = fc.autoBandwidth(fc.seriesCanvasBoxPlot())
.context(ctx)

@@ -58,2 +58,19 @@ .xScale(xScale)

.lowValue(function(d) { return d.low; });
canvasBoxplot(data);
canvasBoxPlot(data);
var webgl = d3.select('#boxplot-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglBoxPlot = fc.autoBandwidth(fc.seriesWebglBoxPlot())
.context(gl)
.xScale(xScale)
.yScale(yScale)
.crossValue(function(d) { return d.value; })
.medianValue(function(d) { return d.median; })
.upperQuartileValue(function(d) { return d.upperQuartile; })
.lowerQuartileValue(function(d) { return d.lowerQuartile; })
.highValue(function(d) { return d.high; })
.lowValue(function(d) { return d.low; });
webglBoxPlot(data);

@@ -32,1 +32,14 @@ var width = 500;

canvasCandlestick(data);
var webgl = d3.select('#candlestick-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglCandlestick = fc.seriesWebglCandlestick()
.xScale(xScale)
.yScale(yScale)
.context(gl)
.bandwidth(10)
.lineWidth(2);
webglCandlestick(data);

@@ -49,1 +49,15 @@ var width = 500;

canvasErrorBar(data);
var webgl = d3.select('#errorbar-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglErrorBar = fc.seriesWebglErrorBar()
.context(gl)
.xScale(xScale)
.yScale(yScale)
.crossValue(function(d) { return d.value; })
.highValue(function(d) { return d.high; })
.lowValue(function(d) { return d.low; });
webglErrorBar(data);

@@ -41,1 +41,16 @@ var width = 500;

canvasLine(data);
var canvasgl = d3.select('#line-webgl').node();
canvasgl.width = width;
canvasgl.height = height;
var gl = canvasgl.getContext('webgl');
var webglLine = fc.seriesWebglLine()
.xScale(xScale)
.yScale(yScale)
.defined((_, i) => i % 20 !== 0)
.context(gl)
.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; });
webglLine(data);

@@ -54,1 +54,25 @@ var width = 500;

canvasMulti(data);
var webgl = d3.select('#multi-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglBar = fc.seriesWebglBar()
.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; })
.decorate((program) => {
fc.barFill().color('#999999')(program);
});
var webglLine = fc.seriesWebglLine()
.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; });
var webglMulti = fc.seriesWebglMulti()
.xScale(xScale)
.yScale(yScale)
.context(gl)
.series([fc.autoBandwidth(webglBar), webglLine]);
webglMulti(data);

@@ -32,1 +32,14 @@ var width = 500;

canvasCandlestick(data);
var webgl = d3.select('#ohlc-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglOhlc = fc.seriesWebglOhlc()
.xScale(xScale)
.yScale(yScale)
.context(gl)
.bandwidth(10)
.lineWidth(2);
webglOhlc(data);

@@ -21,3 +21,4 @@ var width = 500;

.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; });
.mainValue(function(d) { return d; })
.type(d3.symbolCircle);

@@ -33,3 +34,3 @@ container.append('g')

var canvasLine = fc.seriesCanvasPoint()
var canvasPoint = fc.seriesCanvasPoint()
.xScale(xScale)

@@ -39,3 +40,41 @@ .yScale(yScale)

.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; });
canvasLine(data);
.mainValue(function(d) { return d; })
.type(d3.symbolCircle);
canvasPoint(data);
var webgl = d3.select('#point-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglPoint = fc.seriesWebglPoint()
.xScale(xScale)
.yScale(yScale)
.context(gl)
.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; })
.type(d3.symbolCircle)
.decorate(function(program) {
fc.pointFill()(program);
fc.pointStroke()(program);
fc.pointAntiAlias()(program);
});
webglPoint(data);
d3.select('#point-symbol').on('change', function() {
var newSymbolString = d3.select(this).property('value');
var newSymbol = d3[newSymbolString];
svgPoint.type(newSymbol);
container.select('g')
.datum(data)
.call(svgPoint);
canvas.width = width;
canvasPoint.type(newSymbol);
canvasPoint(data);
gl.clear(gl.COLOR_BUFFER_BIT);
webglPoint.type(newSymbol);
webglPoint(data);
});

@@ -55,2 +55,22 @@ d3.text('repeat-data.csv', function(text) {

canvasMulti(data);
var webgl = d3.select('#repeat-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglLine = fc.seriesWebglLine()
.crossValue(function(_, i) { return i; })
.mainValue(function(d) { return d; });
var webglMulti = fc.seriesWebglRepeat()
.xScale(xScale)
.yScale(yScale)
.context(gl)
.series(webglLine)
.decorate(function(context, _, index) {
fc.barFill().color(color(index))(context);
});
webglMulti(data);
});

@@ -103,1 +103,20 @@ var width = 500;

});
var webgl = d3.select('#stacked-webgl').node();
webgl.width = width;
webgl.height = height;
var gl = webgl.getContext('webgl');
var webglBarSeries = fc.seriesWebglBar()
.xScale(x)
.yScale(y)
.crossValue(function(d) { return d.data.State; })
.mainValue(function(d) { return d[1]; })
.baseValue(function(d) { return d[0]; })
.context(gl);
series.forEach(function(s, i) {
webglBarSeries
.decorate((program) => {
fc.barFill().color(color(i))(program);
})(s);
});
export { default as seriesSvgLine } from './src/svg/line';
export { default as seriesCanvasLine } from './src/canvas/line';
export { default as seriesWebglLine } from './src/webgl/line';
export { default as seriesSvgPoint } from './src/svg/point';
export { default as seriesCanvasPoint } from './src/canvas/point';
export { default as seriesWebglPoint } from './src/webgl/point';
export { default as seriesSvgBar } from './src/svg/bar';
export { default as seriesCanvasBar } from './src/canvas/bar';
export { default as seriesWebglBar } from './src/webgl/bar';
export { default as seriesSvgErrorBar } from './src/svg/errorBar';
export { default as seriesCanvasErrorBar } from './src/canvas/errorBar';
export { default as seriesWebglErrorBar } from './src/webgl/errorBar';
export { default as seriesSvgArea } from './src/svg/area';
export { default as seriesCanvasArea } from './src/canvas/area';
export { default as seriesWebglArea } from './src/webgl/area';
export { default as seriesSvgCandlestick } from './src/svg/candlestick';
export { default as seriesCanvasCandlestick } from './src/canvas/candlestick';
export { default as seriesWebglCandlestick } from './src/webgl/candlestick';
export { default as seriesSvgBoxPlot } from './src/svg/boxPlot';
export { default as seriesCanvasBoxPlot } from './src/canvas/boxPlot';
export { default as seriesWebglBoxPlot } from './src/webgl/boxPlot';
export { default as seriesSvgOhlc } from './src/svg/ohlc';
export { default as seriesCanvasOhlc } from './src/canvas/ohlc';
export { default as seriesWebglOhlc } from './src/webgl/ohlc';
export { default as seriesSvgMulti } from './src/svg/multi';
export { default as seriesCanvasMulti } from './src/canvas/multi';
export { default as seriesWebglMulti } from './src/canvas/multi';

@@ -33,2 +42,3 @@ export { default as seriesSvgGrouped } from './src/svg/grouped';

export { default as seriesCanvasRepeat } from './src/canvas/repeat';
export { default as seriesWebglRepeat } from './src/canvas/repeat';

@@ -35,0 +45,0 @@ export { default as autoBandwidth } from './src/autoBandwidth';

{
"name": "@d3fc/d3fc-series",
"version": "4.1.1",
"version": "4.2.0",
"description": "A collection of components for rendering data series to SVG and canvas, including line, bar, OHLC, candlestick and more",

@@ -35,2 +35,3 @@ "license": "MIT",

"@d3fc/d3fc-shape": "^5.0.19",
"@d3fc/d3fc-webgl": "^1.1.0",
"d3-array": "^1.0.0",

@@ -44,3 +45,3 @@ "d3-scale": "^1.0.1",

},
"gitHead": "de82a1a109ddce4b5721fc4e0d2039ddd497817d"
"gitHead": "e031afe3755ffe2fc98b9c17671ca2c1a8e29d05"
}
# d3fc-series
A collection of components for rendering data series to SVG and canvas, including line, bar, OHLC, candlestick and more.
A collection of components for rendering data series to SVG, canvas and WebGL, including line, bar, OHLC, candlestick and more.

@@ -46,2 +46,3 @@ <table>

* [Canvas Rendering](#canvas-rendering)
* [WebGL Rendering](#webgl-rendering)
* [Decorate Pattern](#decorate-pattern)

@@ -67,3 +68,3 @@ * [Orientation](#orientation)

This packages contains a number of D3 components that render various standard series types. They all share a common API, with the typical configuration requiring x and y scales together with a number of value accessors. There are SVG and Canvas versions of each series type, sharing the same configuration properties.
This package contains a number of D3 components that render various standard series types. They all share a common API, with the typical configuration requiring x and y scales together with a number of value accessors. There are SVG, Canvas and WebGL versions of each series type, sharing the same configuration properties.

@@ -125,2 +126,30 @@ ### General API

#### WebGL rendering
***WebGL rendering does not yet have full feature parity with the other rendering methods. Please check the API documentation against the methods to see what is currently supported.***
The `seriesWebglLine` component has an API that is almost identical to its canvas counterpart, `seriesCanvasLine`. The only difference is the `context` property, which requires a `contextType` of `'webgl'`.
```javascript
const data = [
{x: 0, y: 0},
{x: 10, y: 5},
{x: 20, y: 0}
];
var ctx = canvas.getContext('webgl');
const line = fc.seriesWebglLine()
.crossValue(d => d.x)
.mainValue(d => d.y)
.xScale(xScale)
.yScale(yScale)
.context(ctx);
line(data);
```
As with the canvas, the components are invoked directly with the supplied data.
#### Decorate Pattern

@@ -195,2 +224,4 @@

The `decorate` property intentionally exposes the inner workings of components. With WebGL, the inner workings of the implementations (i.e. `d3fc-webgl`) have not been finalised. Therefore, expect that as the API matures, your decorate functions will also have to change.
#### Orientation

@@ -266,3 +297,3 @@

Notice that you do not have to set the `xScale` and `yScale` properties on each series - the scale are propagated down from the multi series.
Notice that you do not have to set the `xScale` and `yScale` properties on each series - the scales are propagated down from the multi series.

@@ -349,5 +380,6 @@ The canvas API is very similar:

<a name="seriesSvgLine" href="#seriesSvgLine">#</a> fc.**seriesSvgLine**()
<a name="seriesCanvasLine" href="#seriesCanvasLine">#</a> fc.**seriesCanvasLine**()
<a name="seriesCanvasLine" href="#seriesCanvasLine">#</a> fc.**seriesCanvasLine**()
<a name="seriesWebglLine" href="#seriesWebglLine">#</a> fc.**seriesWebglLine**()
Constructs a new line renderer for either canvas or SVG.
Constructs a new line renderer for canvas, WebGL or SVG.

@@ -372,2 +404,4 @@ #### Common properties

The WebGL implementation does not support this property.
If *curve* is specified, sets the curve factory and returns this series. If *curve* is not specified, returns the current curve factory.

@@ -377,8 +411,14 @@

#### Canvas specific properties
<a name="seriesLine_context" href="#seriesLine_context">#</a> *seriesLine*.**context**(*ctx*)
<a name="seriesCanvasLine_context" href="#seriesCanvasLine_context">#</a> *seriesCanvasLine*.**context**(*ctx*)
The SVG implementation does not support this property.
If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.
<a name="seriesLine_lineWidth" href="#seriesLine_lineWidth">#</a> *seriesLine*.**lineWidth**(*width*)
The SVG and canvas implementations do not support this property.
If *width* is specified, sets the line width and returns this series. If *width* is not specified, returns the current line width.
### Point

@@ -389,5 +429,6 @@

<a name="seriesSvgPoint" href="#seriesSvgPoint">#</a> fc.**seriesSvgPoint**()
<a name="seriesCanvasPoint" href="#seriesCanvasPoint">#</a> fc.**seriesCanvasPoint**()
<a name="seriesCanvasPoint" href="#seriesCanvasPoint">#</a> fc.**seriesCanvasPoint**()
<a name="seriesWebglPoint" href="#seriesWebglPoint">#</a> fc.**seriesWebglPoint**()
Constructs a new point series renderer for either canvas or SVG.
Constructs a new point series renderer for canvas, WebGL or SVG.

@@ -412,2 +453,4 @@ #### Common properties

The WebGL implementation does not support the following shapes: diamond, star, wye.
If *type* is specified, sets the symbol type to the specified function or symbol type and returns this point series renderer. If *type* is not specified, returns the current symbol type accessor.

@@ -423,5 +466,5 @@

#### Canvas specific properties
<a name="seriesPoint_context" href="#seriesPoint_context">#</a> *seriesPoint*.**context**(*ctx*)
<a name="seriesCanvasPoint_context" href="#seriesCanvasPoint_context">#</a> *seriesCanvasPoint*.**context**(*ctx*)
The SVG implementation does not support this property.

@@ -435,5 +478,6 @@ If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.

<a name="seriesSvgArea" href="#seriesSvgArea">#</a> fc.**seriesSvgArea**()
<a name="seriesCanvasArea" href="#seriesCanvasArea">#</a> fc.**seriesCanvasArea**()
<a name="seriesCanvasArea" href="#seriesCanvasArea">#</a> fc.**seriesCanvasArea**()
<a name="seriesWebglArea" href="#seriesWebglArea">#</a> fc.**seriesWebglArea**()
Constructs a new area series renderer for either canvas or SVG.
Constructs a new area series renderer for canvas, WebGL or SVG.

@@ -450,2 +494,4 @@ #### Common properties

The WebGL implementation does not support this property.
If *orientation* is specified, sets the orientation and returns this series. If *orientation* is not specified, returns the current orientation. The orientation value should be either `horizontal` (default) or `vertical`.

@@ -460,7 +506,9 @@

The WebGL implementation does not support this property.
If *curve* is specified, sets the curve factory and returns this series. If *curve* is not specified, returns the current curve factory.
#### Canvas specific properties
<a name="seriesArea_context" href="#seriesArea_context">#</a> *seriesArea*.**context**(*ctx*)
<a name="seriesCanvasArea_context" href="#seriesCanvasArea_context">#</a> *seriesCanvasArea*.**context**(*ctx*)
The SVG implementation does not support this property.

@@ -474,5 +522,6 @@ If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.

<a name="seriesSvgBar" href="#seriesSvgBar">#</a> fc.**seriesSvgBar**()
<a name="seriesCanvasBar" href="#seriesCanvasBar">#</a> fc.**seriesCanvasBar**()
<a name="seriesCanvasBar" href="#seriesCanvasBar">#</a> fc.**seriesCanvasBar**()
<a name="seriesWebglBar" href="#seriesWebglBar">#</a> fc.**seriesWebglBar**()
Constructs a new bar series renderer for either canvas or SVG.
Constructs a new bar series renderer for canvas, WebGL or SVG.

@@ -489,2 +538,4 @@ #### Common properties

The WebGL implementation does not support this property.
If *orientation* is specified, sets the orientation and returns this series. If *orientation* is not specified, returns the current orientation. The orientation value should be either `horizontal` (default) or `vertical`.

@@ -501,5 +552,5 @@

#### Canvas specific properties
<a name="seriesBar_context" href="#seriesBar_context">#</a> *seriesBar*.**context**(*ctx*)
<a name="seriesCanvasArea_context" href="#seriesCanvasArea_context">#</a> *seriesCanvasArea*.**context**(*ctx*)
The SVG implementation does not support this property.

@@ -514,5 +565,6 @@ If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.

<a name="seriesSvgCandlestick" href="#seriesSvgCandlestick">#</a> fc.**seriesSvgCandlestick**()
<a name="seriesCanvasCandlestick" href="#seriesCanvasCandlestick">#</a> fc.**seriesCanvasCandlestick**()
<a name="seriesCanvasCandlestick" href="#seriesCanvasCandlestick">#</a> fc.**seriesCanvasCandlestick**()
<a name="seriesWebglCandlestick" href="#seriesWebglCandlestick">#</a> fc.**seriesWebglCandlestick**()
Constructs a new candlestick renderer for either canvas or SVG.
Constructs a new candlestick renderer for canvas, WebGL or SVG.

@@ -540,2 +592,14 @@ <a name="seriesCandlestick_crossValue" href="#seriesCandlestick_crossValue">#</a> *seriesCandlestick*.**crossValue**(*accessorFunc*)

<a name="seriesCandlestick_context" href="#seriesCandlestick_context">#</a> *seriesCandlestick*.**context**(*ctx*)
The SVG implementation does not support this property.
If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.
<a name="seriesCandlestick_lineWidth" href="#seriesCandlestick_lineWidth">#</a> *seriesCandlestick*.**lineWidth**(*width*)
The SVG and canvas implementations do not support this property.
If *width* is specified, sets the line width and returns this series. If *width* is not specified, returns the current line width.
### OHLC

@@ -546,5 +610,6 @@

<a name="seriesSvgOhlc" href="#seriesSvgOhlc">#</a> fc.**seriesSvgOhlc**()
<a name="seriesCanvasOhlc" href="#seriesCanvasOhlc">#</a> fc.**seriesCanvasOhlc**()
<a name="seriesCanvasOhlc" href="#seriesCanvasOhlc">#</a> fc.**seriesCanvasOhlc**()
<a name="seriesWebglOhlc" href="#seriesWebglOhlc">#</a> fc.**seriesWebglOhlc**()
Constructs a new OHLC renderer for either canvas or SVG.
Constructs a new OHLC renderer for canvas, WebGL or SVG.

@@ -574,8 +639,14 @@ ### Common properties

#### Canvas specific properties
<a name="seriesOhlc_context" href="#seriesOhlc_context">#</a> *seriesOhlc*.**context**(*ctx*)
<a name="seriesCanvasOhlc_context" href="#seriesCanvasOhlc_context">#</a> *seriesCanvasOhlc*.**context**(*ctx*)
The SVG implementation does not support this property.
If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.
<a name="seriesOhlc_lineWidth" href="#seriesOhlc_lineWidth">#</a> *seriesOhlc*.**lineWidth**(*width*)
The SVG and canvas implementations do not support this property.
If *width* is specified, sets the line width and returns this series. If *width* is not specified, returns the current line width.
### Boxplot

@@ -586,5 +657,6 @@

<a name="seriesSvgBoxPlot" href="#seriesSvgBoxPlot">#</a> fc.**seriesSvgBoxPlot**()
<a name="seriesCanvasBoxPlot" href="#seriesCanvasBoxPlot">#</a> fc.**seriesCanvasBoxPlot**()
<a name="seriesCanvasBoxPlot" href="#seriesCanvasBoxPlot">#</a> fc.**seriesCanvasBoxPlot**()
<a name="seriesWebglBoxPlot" href="#seriesWebglBoxPlot">#</a> fc.**seriesWebglBoxPlot**()
Constructs a new boxplot renderer for either canvas or SVG.
Constructs a new boxplot renderer for canvas, WebGL or SVG.

@@ -598,4 +670,3 @@ #### Common properties

<a name="seriesBoxPlot_highValue" href="#seriesBoxPlot_highValue">#</a> *seriesBoxPlot*.**highValue**(*accessorFunc*)
<a name="seriesBoxPlot_lowValue" href="#seriesBoxPlot_lowValue">#</a> *seriesBoxPlot*.**lowValue**(*accessorFunc*)
<a name="seriesBoxPlot_width" href="#seriesBoxPlot_width">#</a> *seriesBoxPlot*.**width**(*accessorFunc*)
<a name="seriesBoxPlot_lowValue" href="#seriesBoxPlot_lowValue">#</a> *seriesBoxPlot*.**lowValue**(*accessorFunc*)

@@ -606,2 +677,4 @@ If *accessorFunc* is specified, sets the accessor to the specified function and returns this series. If *accessorFunc* is not specified, returns the current accessor. The `accessorFunc(datum, index)` function is called on each item of the data, returning the relevant value for the given accessor. The respective scale is applied to the value returned by the accessor before rendering.

The WebGL implementation does not support this property.
If *orientation* is specified, sets the orientation and returns this series. If *orientation* is not specified, returns the current orientation. The orientation value should be either `horizontal` (default) or `vertical`

@@ -618,2 +691,6 @@

<a name="seriesBoxPlot_cap" href="#seriesBoxPlot_cap">#</a> *seriesBoxPlot*.**cap**(*capFunc*)
If *capFunc* is specified, sets the cap function and returns this series. If *capFunc* is not specified, returns the current cap function. The `capFunc(item, index)` function is called on each item of the data, and returns the **proportion** of the box width that the caps width should be.
<a name="seriesBoxPlot_decorate" href="#seriesBoxPlot_decorate">#</a> *seriesBoxPlot*.**decorate**(*decorateFunc*)

@@ -623,8 +700,14 @@

#### Canvas specific properties
<a name="seriesBoxplot_context" href="#seriesBoxplot_context">#</a> *seriesBoxplot*.**context**(*ctx*)
<a name="seriesCanvasBoxplot_context" href="#seriesCanvasBoxplot_context">#</a> *seriesCanvasBoxplot*.**context**(*ctx*)
The SVG implementation does not support this property.
If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.
<a name="seriesBoxplot_lineWidth" href="#seriesBoxplot_lineWidth">#</a> *seriesBoxplot*.**lineWidth**(*width*)
The SVG and canvas implementations do not support this property.
If *width* is specified, sets the line width and returns this series. If *width* is not specified, returns the current line width.
### Errorbar

@@ -635,5 +718,6 @@

<a name="seriesSvgErrorBar" href="#seriesSvgErrorBar">#</a> fc.**seriesSvgErrorBar**()
<a name="seriesCanvasErrorBar" href="#seriesCanvasErrorBar">#</a> fc.**seriesCanvasErrorBar**()
<a name="seriesCanvasErrorBar" href="#seriesCanvasErrorBar">#</a> fc.**seriesCanvasErrorBar**()
<a name="seriesWebglErrorBar" href="#seriesWebglErrorBar">#</a> fc.**seriesWebglErrorBar**()
Constructs a new error bar renderer for either canvas or SVG.
Constructs a new error bar renderer for canvas, WebGL or SVG.

@@ -644,4 +728,3 @@ #### Common properties

<a name="seriesErrorBar_highValue" href="#seriesErrorBar_highValue">#</a> *seriesErrorBar*.**highValue**(*accessorFunc*)
<a name="seriesErrorBar_lowValue" href="#seriesErrorBar_lowValue">#</a> *seriesErrorBar*.**lowValue**(*accessorFunc*)
<a name="seriesErrorBar_width" href="#seriesErrorBar_width">#</a> *seriesErrorBar*.**width**(*accessorFunc*)
<a name="seriesErrorBar_lowValue" href="#seriesErrorBar_lowValue">#</a> *seriesErrorBar*.**lowValue**(*accessorFunc*)

@@ -652,2 +735,4 @@ If *accessorFunc* is specified, sets the accessor to the specified function and returns this series. If *accessorFunc* is not specified, returns the current accessor. The `accessorFunc(datum, index)` function is called on each item of the data, returning the relevant value for the given accessor. The respective scale is applied to the value returned by the accessor before rendering.

The SVG implementation does not support this property.
If *orientation* is specified, sets the orientation and returns this series. If *orientation* is not specified, returns the current orientation. The orientation value should be either `horizontal` (default) or `vertical`

@@ -668,8 +753,14 @@

#### Canvas specific properties
<a name="seriesErrorBar_context" href="#seriesErrorBar_context">#</a> *seriesErrorBar*.**context**(*ctx*)
<a name="seriesCanvasErrorBar_context" href="#seriesCanvasErrorBar_context">#</a> *seriesCanvasErrorBar*.**context**(*ctx*)
The SVG implementation does not support this property.
If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.
<a name="seriesErrorBar_lineWidth" href="#seriesErrorBar_lineWidth">#</a> *seriesErrorBar*.**lineWidth**(*width*)
The SVG and canvas implementations do not support this property.
If *width* is specified, sets the line width and returns this series. If *width* is not specified, returns the current line width.
### Heatmap

@@ -710,5 +801,5 @@

#### Canvas specific properties
<a name="seriesErrorBar_context" href="#seriesErrorBar_context">#</a> *seriesErrorBar*.**context**(*ctx*)
<a name="seriesCanvasErrorBar_context" href="#seriesCanvasErrorBar_context">#</a> *seriesCanvasErrorBar*.**context**(*ctx*)
The SVG implementation does not support this property.

@@ -722,5 +813,6 @@ If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.

<a name="seriesSvgMulti" href="#seriesSvgMulti">#</a> fc.**seriesSvgMulti**()
<a name="seriesCanvasMulti" href="#seriesCanvasMulti">#</a> fc.**seriesCanvasMulti**()
<a name="seriesCanvasMulti" href="#seriesCanvasMulti">#</a> fc.**seriesCanvasMulti**()
<a name="seriesWebglMulti" href="#seriesWebglMulti">#</a> fc.**seriesWebglMulti**()
Constructs a new multi series renderer for either canvas or SVG.
Constructs a new multi series renderer for canvas, WebGL or SVG.

@@ -765,7 +857,6 @@ #### Common properties

<a name="seriesMulti_context" href="#seriesMulti_context">#</a> *seriesMulti*.**context**(*ctx*)
#### Canvas specific properties
The SVG implementation does not support this property.
<a name="seriesMulti_context" href="#seriesMulti_context">#</a> *seriesMulti*.**context**(*ctx*)
If *ctx* is specified, sets the canvas context and returns this series. If *ctx* is not specified, returns the current context.

@@ -778,5 +869,6 @@

<a name="seriesSvgRepeat" href="#seriesSvgRepeat">#</a> fc.**seriesSvgRepeat**()
<a name="seriesCanvasRepeat" href="#seriesCanvasRepeat">#</a> fc.**seriesCanvasRepeat**()
<a name="seriesCanvasRepeat" href="#seriesCanvasRepeat">#</a> fc.**seriesCanvasRepeat**()
<a name="seriesWebglRepeat" href="#seriesWebglRepeat">#</a> fc.**seriesWebglRepeat**()
Constructs a new repeat series renderer for either canvas or SVG.
Constructs a new repeat series renderer for canvas, WebGL or SVG.

@@ -948,2 +1040,21 @@ The repeat series is very similar in function to the multi series, both are designed to render multiple series from the same bound data. The repeat series uses the same series type for each data series, e.g. multiple lines series, or multiple area series.

In both cases, the decorate pattern is used to set the color for each bar series.
With WebGL, the code is also very similar:
```javascript
var webglBarSeries = fc.seriesWebglBar()
.xScale(x)
.yScale(y)
.crossValue(d => d.data.State)
.mainValue(d => d[1])
.baseValue(d => d[0])
.context(ctx);
series.forEach(function(s, i) {
webglBarSeries
.decorate(function(program) {
fc.barFill().color(color(i))(program);
})(s);
});
```
In all cases, the decorate pattern is used to set the color for each bar series.

@@ -1,2 +0,2 @@

// Checks that passes properties are 'defined', meaning that calling them with (d, i) returns non null values
// Checks that passed properties are 'defined', meaning that calling them with (d, i) returns non null values
export default function defined() {

@@ -3,0 +3,0 @@ const outerArguments = arguments;

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc