@d3fc/d3fc-series/build/d3fc-series.js

A collection of components for rendering data series to SVG and canvas, including line, bar, OHLC, candlestick and more

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@d3fc/d3fc-data-join'), require('d3-shape'), require('d3-selection'), require('@d3fc/d3fc-rebind'), require('d3-scale'), require('@d3fc/d3fc-webgl'), require('@d3fc/d3fc-shape'), require('d3-array'), require('d3-scale-chromatic')) :
    typeof define === 'function' && define.amd ? define(['exports', '@d3fc/d3fc-data-join', 'd3-shape', 'd3-selection', '@d3fc/d3fc-rebind', 'd3-scale', '@d3fc/d3fc-webgl', '@d3fc/d3fc-shape', 'd3-array', 'd3-scale-chromatic'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.fc = global.fc || {}, global.fc, global.d3, global.d3, global.fc, global.d3, global.fc, global.fc, global.d3, global.d3));
}(this, (function (exports, d3fcDataJoin, d3Shape, d3Selection, d3fcRebind, d3Scale, d3fcWebgl, d3fcShape, d3Array, d3ScaleChromatic) { 'use strict';

    var functor = (function (d) {
      return typeof d === 'function' ? d : function () {
        return d;
      };
    });

    // Checks that passed properties are 'defined', meaning that calling them with (d, i) returns non null values
    function defined() {
      var outerArguments = arguments;
      return function (d, i) {
        for (var c = 0, j = outerArguments.length; c < j; c++) {
          if (outerArguments[c](d, i) == null) {
            return false;
          }
        }

        return true;
      };
    }

    // determines the offset required along the cross scale based
    // on the series alignment
    var alignOffset = (function (align, width) {
      switch (align) {
        case 'left':
          return width / 2;

        case 'right':
          return -width / 2;

        default:
          return 0;
      }
    });

    var createBase = (function (initialValues) {
      var env = Object.assign({}, initialValues);

      var base = function base() {};

      Object.keys(env).forEach(function (key) {
        base[key] = function () {
          if (!arguments.length) {
            return env[key];
          }

          env[key] = arguments.length <= 0 ? undefined : arguments[0];
          return base;
        };
      });
      return base;
    });

    var xyBase = (function () {
      var baseValue = function baseValue() {
        return 0;
      };

      var crossValue = function crossValue(d) {
        return d.x;
      };

      var mainValue = function mainValue(d) {
        return d.y;
      };

      var align = 'center';

      var bandwidth = function bandwidth() {
        return 5;
      };

      var orient = 'vertical';
      var base = createBase({
        decorate: function decorate() {},
        defined: function defined$1(d, i) {
          return defined(baseValue, crossValue, mainValue)(d, i);
        },
        xScale: d3Scale.scaleIdentity(),
        yScale: d3Scale.scaleIdentity()
      });

      base.values = function (d, i) {
        var width = bandwidth(d, i);
        var offset = alignOffset(align, width);
        var xScale = base.xScale();
        var yScale = base.yScale();

        if (orient === 'vertical') {
          var y = yScale(mainValue(d, i), i);
          var y0 = yScale(baseValue(d, i), i);
          var x = xScale(crossValue(d, i), i) + offset;
          return {
            d: d,
            x: x,
            y: y,
            y0: y0,
            width: width,
            height: y - y0,
            origin: [x, y],
            baseOrigin: [x, y0],
            transposedX: x,
            transposedY: y
          };
        } else {
          var _y = xScale(mainValue(d, i), i);

          var _y2 = xScale(baseValue(d, i), i);

          var _x = yScale(crossValue(d, i), i) + offset;

          return {
            d: d,
            x: _x,
            y: _y,
            y0: _y2,
            width: width,
            height: _y - _y2,
            origin: [_y, _x],
            baseOrigin: [_y2, _x],
            transposedX: _y,
            transposedY: _x
          };
        }
      };

      base.xValues = function () {
        return orient === 'vertical' ? [crossValue] : [baseValue, mainValue];
      };

      base.yValues = function () {
        return orient !== 'vertical' ? [crossValue] : [baseValue, mainValue];
      };

      base.baseValue = function () {
        if (!arguments.length) {
          return baseValue;
        }

        baseValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.crossValue = function () {
        if (!arguments.length) {
          return crossValue;
        }

        crossValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.mainValue = function () {
        if (!arguments.length) {
          return mainValue;
        }

        mainValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.bandwidth = function () {
        if (!arguments.length) {
          return bandwidth;
        }

        bandwidth = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.align = function () {
        if (!arguments.length) {
          return align;
        }

        align = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      base.orient = function () {
        if (!arguments.length) {
          return orient;
        }

        orient = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      return base;
    });

    var red = '#c60';
    var green = '#6c0';
    var black = '#000';
    var gray = '#ddd';
    var darkGray = '#999';
    var colors = {
      red: red,
      green: green,
      black: black,
      gray: gray,
      darkGray: darkGray
    };

    var line = (function () {
      var base = xyBase();
      var lineData = d3Shape.line().x(function (d, i) {
        return base.values(d, i).transposedX;
      }).y(function (d, i) {
        return base.values(d, i).transposedY;
      });
      var join = d3fcDataJoin.dataJoin('path', 'line');

      var line = function line(selection) {
        if (d3fcDataJoin.isTransition(selection)) {
          join.transition(selection);
        }

        lineData.defined(base.defined());
        selection.each(function (data, index, group) {
          var path = join(d3Selection.select(group[index]), [data]);
          path.enter().attr('fill', 'none').attr('stroke', colors.black);
          path.attr('d', lineData);
          base.decorate()(path, data, index);
        });
      };

      d3fcRebind.rebindAll(line, base, d3fcRebind.exclude('baseValue', 'bandwidth', 'align'));
      d3fcRebind.rebind(line, join, 'key');
      d3fcRebind.rebind(line, lineData, 'curve');
      return line;
    });

    var line$1 = (function () {
      var base = xyBase();
      var lineData = d3Shape.line().x(function (d, i) {
        return base.values(d, i).transposedX;
      }).y(function (d, i) {
        return base.values(d, i).transposedY;
      });

      var line = function line(data) {
        var context = lineData.context();
        context.beginPath();
        context.strokeStyle = colors.black;
        context.fillStyle = 'transparent';
        base.decorate()(context, data);
        lineData.defined(base.defined())(data);
        context.fill();
        context.stroke();
        context.closePath();
      };

      d3fcRebind.rebindAll(line, base, d3fcRebind.exclude('baseValue', 'bandwidth', 'align'));
      d3fcRebind.rebind(line, lineData, 'curve', 'context');
      return line;
    });

    var line$2 = (function () {
      var base = xyBase();
      var crossValueAttribute = d3fcWebgl.webglAdjacentAttribute(0, 1);
      var crossNextValueAttribute = crossValueAttribute.offset(1);
      var mainValueAttribute = d3fcWebgl.webglAdjacentAttribute(0, 1);
      var mainNextValueAttribute = mainValueAttribute.offset(1);
      var definedAttribute = d3fcWebgl.webglAdjacentAttribute(0, 1).type(d3fcWebgl.webglTypes.UNSIGNED_BYTE);
      var definedNextAttribute = definedAttribute.offset(1);
      var draw = d3fcWebgl.webglSeriesLine().crossValueAttribute(crossValueAttribute).crossNextValueAttribute(crossNextValueAttribute).mainValueAttribute(mainValueAttribute).mainNextValueAttribute(mainNextValueAttribute).definedAttribute(definedAttribute).definedNextAttribute(definedNextAttribute);

      var equals = function equals(previousData, data) {
        return false;
      };

      var scaleMapper = d3fcWebgl.webglScaleMapper;
      var previousData = [];
      var previousXScale = null;
      var previousYScale = null;

      var line = function line(data) {
        var xScale = scaleMapper(base.xScale());
        var yScale = scaleMapper(base.yScale());
        var dataChanged = !equals(previousData, data);

        if (dataChanged) {
          previousData = data;
          definedAttribute.value(function (d, i) {
            return base.defined()(d, i);
          }).data(data);
        }

        if (dataChanged || xScale.scale !== previousXScale) {
          previousXScale = xScale.scale;

          if (base.orient() === 'vertical') {
            crossValueAttribute.value(function (d, i) {
              return xScale.scale(base.crossValue()(d, i));
            }).data(data);
          } else {
            crossValueAttribute.value(function (d, i) {
              return xScale.scale(base.mainValue()(d, i));
            }).data(data);
          }
        }

        if (dataChanged || yScale.scale !== previousYScale) {
          previousYScale = yScale.scale;

          if (base.orient() === 'vertical') {
            mainValueAttribute.value(function (d, i) {
              return yScale.scale(base.mainValue()(d, i));
            }).data(data);
          } else {
            mainValueAttribute.value(function (d, i) {
              return yScale.scale(base.crossValue()(d, i));
            }).data(data);
          }
        }

        draw.xScale(xScale.webglScale).yScale(yScale.webglScale).decorate(function (program) {
          return base.decorate()(program, data, 0);
        });
        draw(data.length);
      };

      line.equals = function () {
        if (!arguments.length) {
          return equals;
        }

        equals = arguments.length <= 0 ? undefined : arguments[0];
        return line;
      };

      line.scaleMapper = function () {
        if (!arguments.length) {
          return scaleMapper;
        }

        scaleMapper = arguments.length <= 0 ? undefined : arguments[0];
        return line;
      };

      d3fcRebind.rebindAll(line, base, d3fcRebind.exclude('baseValue', 'bandwidth', 'align'));
      d3fcRebind.rebind(line, draw, 'context', 'lineWidth', 'pixelRatio');
      return line;
    });

    var point = (function () {
      var symbol = d3Shape.symbol();
      var base = xyBase();
      var join = d3fcDataJoin.dataJoin('g', 'point');

      var containerTransform = function containerTransform(origin) {
        return 'translate(' + origin[0] + ', ' + origin[1] + ')';
      };

      var point = function point(selection) {
        if (d3fcDataJoin.isTransition(selection)) {
          join.transition(selection);
        }

        selection.each(function (data, index, group) {
          var filteredData = data.filter(base.defined());
          var g = join(d3Selection.select(group[index]), filteredData);
          g.enter().attr('transform', function (d, i) {
            return containerTransform(base.values(d, i).origin);
          }).attr('fill', colors.gray).attr('stroke', colors.black).append('path');
          g.attr('transform', function (d, i) {
            return containerTransform(base.values(d, i).origin);
          }).select('path').attr('d', symbol);
          base.decorate()(g, data, index);
        });
      };

      d3fcRebind.rebindAll(point, base, d3fcRebind.exclude('baseValue', 'bandwidth', 'align'));
      d3fcRebind.rebind(point, join, 'key');
      d3fcRebind.rebind(point, symbol, 'type', 'size');
      return point;
    });

    var point$1 = (function () {
      var symbol = d3Shape.symbol();
      var base = xyBase();

      var point = function point(data) {
        var filteredData = data.filter(base.defined());
        var context = symbol.context();
        filteredData.forEach(function (d, i) {
          context.save();
          var values = base.values(d, i);
          context.translate(values.origin[0], values.origin[1]);
          context.beginPath();
          context.strokeStyle = colors.black;
          context.fillStyle = colors.gray;
          base.decorate()(context, d, i);
          symbol(d, i);
          context.fill();
          context.stroke();
          context.closePath();
          context.restore();
        });
      };

      d3fcRebind.rebindAll(point, base, d3fcRebind.exclude('baseValue', 'bandwidth', 'align'));
      d3fcRebind.rebind(point, symbol, 'size', 'type', 'context');
      return point;
    });

    var point$2 = (function () {
      var base = xyBase();
      var size = functor(64);
      var type = d3Shape.symbolCircle;
      var crossValueAttribute = d3fcWebgl.webglAttribute();
      var mainValueAttribute = d3fcWebgl.webglAttribute();
      var sizeAttribute = d3fcWebgl.webglAttribute().type(d3fcWebgl.webglTypes.UNSIGNED_SHORT);
      var definedAttribute = d3fcWebgl.webglAttribute().type(d3fcWebgl.webglTypes.UNSIGNED_BYTE);
      var draw = d3fcWebgl.webglSeriesPoint().crossValueAttribute(crossValueAttribute).mainValueAttribute(mainValueAttribute).sizeAttribute(sizeAttribute).definedAttribute(definedAttribute);

      var equals = function equals(previousData, data) {
        return false;
      };

      var scaleMapper = d3fcWebgl.webglScaleMapper;
      var previousData = [];
      var previousXScale = null;
      var previousYScale = null;

      var point = function point(data) {
        var xScale = scaleMapper(base.xScale());
        var yScale = scaleMapper(base.yScale());
        var dataChanged = !equals(previousData, data);

        if (dataChanged) {
          previousData = data;
          sizeAttribute.value(function (d, i) {
            return size(d, i);
          }).data(data);
          definedAttribute.value(function (d, i) {
            return base.defined()(d, i);
          }).data(data);
        }

        if (dataChanged || xScale.scale !== previousXScale) {
          previousXScale = xScale.scale;

          if (base.orient() === 'vertical') {
            crossValueAttribute.value(function (d, i) {
              return xScale.scale(base.crossValue()(d, i));
            }).data(data);
          } else {
            crossValueAttribute.value(function (d, i) {
              return xScale.scale(base.mainValue()(d, i));
            }).data(data);
          }
        }

        if (dataChanged || yScale.scale !== previousYScale) {
          previousYScale = yScale.scale;

          if (base.orient() === 'vertical') {
            mainValueAttribute.value(function (d, i) {
              return yScale.scale(base.mainValue()(d, i));
            }).data(data);
          } else {
            mainValueAttribute.value(function (d, i) {
              return yScale.scale(base.crossValue()(d, i));
            }).data(data);
          }
        }

        draw.xScale(xScale.webglScale).yScale(yScale.webglScale).type(d3fcWebgl.webglSymbolMapper(type)).decorate(function (program) {
          return base.decorate()(program, data, 0);
        });
        draw(data.length);
      };

      point.size = function () {
        if (!arguments.length) {
          return size;
        }

        size = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return point;
      };

      point.type = function () {
        if (!arguments.length) {
          return type;
        }

        type = arguments.length <= 0 ? undefined : arguments[0];
        return point;
      };

      point.equals = function () {
        if (!arguments.length) {
          return equals;
        }

        equals = arguments.length <= 0 ? undefined : arguments[0];
        return point;
      };

      point.scaleMapper = function () {
        if (!arguments.length) {
          return scaleMapper;
        }

        scaleMapper = arguments.length <= 0 ? undefined : arguments[0];
        return point;
      };

      d3fcRebind.rebindAll(point, base, d3fcRebind.exclude('baseValue', 'bandwidth', 'align'));
      d3fcRebind.rebind(point, draw, 'context', 'pixelRatio');
      return point;
    });

    var bar = (function () {
      var pathGenerator = d3fcShape.shapeBar().x(0).y(0);
      var base = xyBase();
      var join = d3fcDataJoin.dataJoin('g', 'bar');

      var valueAxisDimension = function valueAxisDimension(generator) {
        return base.orient() === 'vertical' ? generator.height : generator.width;
      };

      var crossAxisDimension = function crossAxisDimension(generator) {
        return base.orient() === 'vertical' ? generator.width : generator.height;
      };

      var translation = function translation(origin) {
        return 'translate(' + origin[0] + ', ' + origin[1] + ')';
      };

      var bar = function bar(selection) {
        if (d3fcDataJoin.isTransition(selection)) {
          join.transition(selection);
        }

        selection.each(function (data, index, group) {
          var orient = base.orient();

          if (orient !== 'vertical' && orient !== 'horizontal') {
            throw new Error('The bar series does not support an orientation of ' + orient);
          }

          var filteredData = data.filter(base.defined());
          var projectedData = filteredData.map(base.values);
          pathGenerator.width(0).height(0);

          if (base.orient() === 'vertical') {
            pathGenerator.verticalAlign('top');
            pathGenerator.horizontalAlign('center');
          } else {
            pathGenerator.horizontalAlign('right');
            pathGenerator.verticalAlign('center');
          }

          var g = join(d3Selection.select(group[index]), filteredData); // within the enter selection the pathGenerator creates a zero
          // height bar on the baseline. As a result, when used with a transition the bar grows
          // from y0 to y1 (y)

          g.enter().attr('transform', function (_, i) {
            return translation(projectedData[i].baseOrigin);
          }).attr('class', 'bar ' + base.orient()).attr('fill', colors.darkGray).append('path').attr('d', function (d, i) {
            crossAxisDimension(pathGenerator)(projectedData[i].width);
            return pathGenerator([d]);
          }); // the container translation sets the origin to the 'tip'
          // of each bar as per the decorate pattern

          g.attr('transform', function (_, i) {
            return translation(projectedData[i].origin);
          }).select('path').attr('d', function (d, i) {
            crossAxisDimension(pathGenerator)(projectedData[i].width);
            valueAxisDimension(pathGenerator)(-projectedData[i].height);
            return pathGenerator([d]);
          });
          base.decorate()(g, filteredData, index);
        });
      };

      d3fcRebind.rebindAll(bar, base);
      d3fcRebind.rebind(bar, join, 'key');
      return bar;
    });

    var bar$1 = (function () {
      var base = xyBase();
      var pathGenerator = d3fcShape.shapeBar().x(0).y(0);

      var valueAxisDimension = function valueAxisDimension(generator) {
        return base.orient() === 'vertical' ? generator.height : generator.width;
      };

      var crossAxisDimension = function crossAxisDimension(generator) {
        return base.orient() === 'vertical' ? generator.width : generator.height;
      };

      var bar = function bar(data) {
        var context = pathGenerator.context();
        var filteredData = data.filter(base.defined());
        var projectedData = filteredData.map(base.values);

        if (base.orient() === 'vertical') {
          pathGenerator.verticalAlign('top');
          pathGenerator.horizontalAlign('center');
        } else {
          pathGenerator.horizontalAlign('right');
          pathGenerator.verticalAlign('center');
        }

        projectedData.forEach(function (datum, i) {
          context.save();
          context.beginPath();
          context.translate(datum.origin[0], datum.origin[1]);
          context.fillStyle = colors.darkGray;
          context.strokeStyle = 'transparent';
          base.decorate()(context, datum.d, i);
          valueAxisDimension(pathGenerator)(-datum.height);
          crossAxisDimension(pathGenerator)(datum.width);
          pathGenerator([datum]);
          context.fill();
          context.stroke();
          context.closePath();
          context.restore();
        });
      };

      d3fcRebind.rebindAll(bar, base);
      d3fcRebind.rebind(bar, pathGenerator, 'context');
      return bar;
    });

    var bar$2 = (function () {
      var base = xyBase();
      var crossValueAttribute = d3fcWebgl.webglAttribute();
      var mainValueAttribute = d3fcWebgl.webglAttribute();
      var baseValueAttribute = d3fcWebgl.webglAttribute();
      var bandwidthAttribute = d3fcWebgl.webglAttribute().type(d3fcWebgl.webglTypes.UNSIGNED_SHORT);
      var definedAttribute = d3fcWebgl.webglAttribute().type(d3fcWebgl.webglTypes.UNSIGNED_BYTE);
      var draw = d3fcWebgl.webglSeriesBar().crossValueAttribute(crossValueAttribute).mainValueAttribute(mainValueAttribute).baseValueAttribute(baseValueAttribute).bandwidthAttribute(bandwidthAttribute).definedAttribute(definedAttribute);

      var equals = function equals(previousData, data) {
        return false;
      };

      var scaleMapper = d3fcWebgl.webglScaleMapper;
      var previousData = [];
      var previousXScale = null;
      var previousYScale = null;

      var bar = function bar(data) {
        if (base.orient() !== 'vertical') {
          throw new Error("Unsupported orientation ".concat(base.orient()));
        }

        var xScale = scaleMapper(base.xScale());
        var yScale = scaleMapper(base.yScale());
        var dataChanged = !equals(previousData, data);

        if (dataChanged) {
          previousData = data;
          bandwidthAttribute.value(function (d, i) {
            return base.bandwidth()(d, i);
          }).data(data);
          definedAttribute.value(function (d, i) {
            return base.defined()(d, i);
          }).data(data);
        }

        if (dataChanged || xScale.scale !== previousXScale) {
          previousXScale = xScale.scale;
          crossValueAttribute.value(function (d, i) {
            return xScale.scale(base.crossValue()(d, i));
          }).data(data);
        }

        if (dataChanged || yScale.scale !== previousYScale) {
          previousYScale = yScale.scale;
          baseValueAttribute.value(function (d, i) {
            return yScale.scale(base.baseValue()(d, i));
          }).data(data);
          mainValueAttribute.value(function (d, i) {
            return yScale.scale(base.mainValue()(d, i));
          }).data(data);
        }

        draw.xScale(xScale.webglScale).yScale(yScale.webglScale).decorate(function (program) {
          return base.decorate()(program, data, 0);
        });
        draw(data.length);
      };

      bar.equals = function () {
        if (!arguments.length) {
          return equals;
        }

        equals = arguments.length <= 0 ? undefined : arguments[0];
        return bar;
      };

      bar.scaleMapper = function () {
        if (!arguments.length) {
          return scaleMapper;
        }

        scaleMapper = arguments.length <= 0 ? undefined : arguments[0];
        return bar;
      };

      d3fcRebind.rebindAll(bar, base, d3fcRebind.exclude('align'));
      d3fcRebind.rebind(bar, draw, 'context', 'pixelRatio');
      return bar;
    });

    var errorBarBase = (function () {
      var highValue = function highValue(d) {
        return d.high;
      };

      var lowValue = function lowValue(d) {
        return d.low;
      };

      var crossValue = function crossValue(d) {
        return d.cross;
      };

      var orient = 'vertical';
      var align = 'center';

      var bandwidth = function bandwidth() {
        return 5;
      };

      var base = createBase({
        decorate: function decorate() {},
        defined: function defined$1(d, i) {
          return defined(lowValue, highValue, crossValue)(d, i);
        },
        xScale: d3Scale.scaleIdentity(),
        yScale: d3Scale.scaleIdentity()
      });

      base.values = function (d, i) {
        var width = bandwidth(d, i);
        var offset = alignOffset(align, width);
        var xScale = base.xScale();
        var yScale = base.yScale();

        if (orient === 'vertical') {
          var y = yScale(highValue(d, i));
          return {
            origin: [xScale(crossValue(d, i)) + offset, y],
            high: 0,
            low: yScale(lowValue(d, i)) - y,
            width: width
          };
        } else {
          var x = xScale(lowValue(d, i));
          return {
            origin: [x, yScale(crossValue(d, i)) + offset],
            high: xScale(highValue(d, i)) - x,
            low: 0,
            width: width
          };
        }
      };

      base.xValues = function () {
        return orient === 'vertical' ? [crossValue] : [highValue, lowValue];
      };

      base.yValues = function () {
        return orient !== 'vertical' ? [crossValue] : [highValue, lowValue];
      };

      base.orient = function () {
        if (!arguments.length) {
          return orient;
        }

        orient = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      base.lowValue = function () {
        if (!arguments.length) {
          return lowValue;
        }

        lowValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.highValue = function () {
        if (!arguments.length) {
          return highValue;
        }

        highValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.crossValue = function () {
        if (!arguments.length) {
          return crossValue;
        }

        crossValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.bandwidth = function () {
        if (!arguments.length) {
          return bandwidth;
        }

        bandwidth = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.align = function () {
        if (!arguments.length) {
          return align;
        }

        align = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      return base;
    });

    var errorBar = (function () {
      var base = errorBarBase();
      var join = d3fcDataJoin.dataJoin('g', 'error-bar');
      var pathGenerator = d3fcShape.shapeErrorBar().value(0);

      var propagateTransition = function propagateTransition(maybeTransition) {
        return function (selection) {
          return d3fcDataJoin.isTransition(maybeTransition) ? selection.transition(maybeTransition) : selection;
        };
      };

      var containerTranslation = function containerTranslation(values) {
        return 'translate(' + values.origin[0] + ', ' + values.origin[1] + ')';
      };

      var errorBar = function errorBar(selection) {
        if (d3fcDataJoin.isTransition(selection)) {
          join.transition(selection);
        }

        var transitionPropagator = propagateTransition(selection);
        selection.each(function (data, index, group) {
          var filteredData = data.filter(base.defined());
          var projectedData = filteredData.map(base.values);
          var g = join(d3Selection.select(group[index]), filteredData);
          g.enter().attr('stroke', colors.black).attr('fill', colors.gray).attr('transform', function (d, i) {
            return containerTranslation(base.values(d, i)) + ' scale(1e-6, 1)';
          }).append('path');
          pathGenerator.orient(base.orient());
          g.each(function (d, i, g) {
            var values = projectedData[i];
            pathGenerator.high(values.high).low(values.low).width(values.width);
            transitionPropagator(d3Selection.select(g[i])).attr('transform', containerTranslation(values) + ' scale(1)').select('path').attr('d', pathGenerator([d]));
          });
          base.decorate()(g, data, index);
        });
      };

      d3fcRebind.rebindAll(errorBar, base);
      d3fcRebind.rebind(errorBar, join, 'key');
      return errorBar;
    });

    var errorBar$1 = (function () {
      var base = errorBarBase();
      var pathGenerator = d3fcShape.shapeErrorBar().value(0);

      var errorBar = function errorBar(data) {
        var filteredData = data.filter(base.defined());
        var context = pathGenerator.context();
        pathGenerator.orient(base.orient());
        filteredData.forEach(function (d, i) {
          context.save();
          var values = base.values(d, i);
          context.translate(values.origin[0], values.origin[1]);
          context.beginPath();
          context.strokeStyle = colors.black;
          context.fillStyle = colors.gray;
          base.decorate()(context, d, i);
          pathGenerator.high(values.high).width(values.width).low(values.low)([d]);
          context.fill();
          context.stroke();
          context.closePath();
          context.restore();
        });
      };

      d3fcRebind.rebindAll(errorBar, base);
      d3fcRebind.rebind(errorBar, pathGenerator, 'context');
      return errorBar;
    });

    var errorBar$2 = (function () {
      var base = errorBarBase();
      var crossValueAttribute = d3fcWebgl.webglAttribute();
      var highValueAttribute = d3fcWebgl.webglAttribute();
      var lowValueAttribute = d3fcWebgl.webglAttribute();
      var bandwidthAttribute = d3fcWebgl.webglAttribute().type(d3fcWebgl.webglTypes.UNSIGNED_SHORT);
      var definedAttribute = d3fcWebgl.webglAttribute().type(d3fcWebgl.webglTypes.UNSIGNED_BYTE);
      var draw = d3fcWebgl.webglSeriesErrorBar().crossValueAttribute(crossValueAttribute).highValueAttribute(highValueAttribute).lowValueAttribute(lowValueAttribute).bandwidthAttribute(bandwidthAttribute).definedAttribute(definedAttribute);

      var equals = function equals(previousData, data) {
        return false;
      };

      var scaleMapper = d3fcWebgl.webglScaleMapper;
      var previousData = [];
      var previousXScale = null;
      var previousYScale = null;

      var errorBar = function errorBar(data) {
        if (base.orient() !== 'vertical') {
          throw new Error("Unsupported orientation ".concat(base.orient()));
        }

        var xScale = scaleMapper(base.xScale());
        var yScale = scaleMapper(base.yScale());
        var dataChanged = !equals(previousData, data);

        if (dataChanged) {
          previousData = data;
          bandwidthAttribute.value(function (d, i) {
            return base.bandwidth()(d, i);
          }).data(data);
          definedAttribute.value(function (d, i) {
            return base.defined()(d, i);
          }).data(data);
        }

        if (dataChanged || xScale.scale !== previousXScale) {
          previousXScale = xScale.scale;
          crossValueAttribute.value(function (d, i) {
            return xScale.scale(base.crossValue()(d, i));
          }).data(data);
        }

        if (dataChanged || yScale.scale !== previousYScale) {
          previousYScale = yScale.scale;
          highValueAttribute.value(function (d, i) {
            return yScale.scale(base.highValue()(d, i));
          }).data(data);
          lowValueAttribute.value(function (d, i) {
            return yScale.scale(base.lowValue()(d, i));
          }).data(data);
        }

        draw.xScale(xScale.webglScale).yScale(yScale.webglScale).decorate(function (program) {
          return base.decorate()(program, data, 0);
        });
        draw(data.length);
      };

      errorBar.equals = function () {
        if (!arguments.length) {
          return equals;
        }

        equals = arguments.length <= 0 ? undefined : arguments[0];
        return errorBar;
      };

      errorBar.scaleMapper = function () {
        if (!arguments.length) {
          return scaleMapper;
        }

        scaleMapper = arguments.length <= 0 ? undefined : arguments[0];
        return errorBar;
      };

      d3fcRebind.rebindAll(errorBar, base, d3fcRebind.exclude('align'));
      d3fcRebind.rebind(errorBar, draw, 'context', 'lineWidth', 'pixelRatio');
      return errorBar;
    });

    var area = (function () {
      var base = xyBase();
      var areaData = d3Shape.area();
      var join = d3fcDataJoin.dataJoin('path', 'area');

      var area = function area(selection) {
        if (d3fcDataJoin.isTransition(selection)) {
          join.transition(selection);
        }

        areaData.defined(base.defined());
        selection.each(function (data, index, group) {
          var projectedData = data.map(base.values);
          areaData.x(function (_, i) {
            return projectedData[i].transposedX;
          }).y(function (_, i) {
            return projectedData[i].transposedY;
          });
          var valueComponent = base.orient() === 'vertical' ? 'y' : 'x';
          areaData[valueComponent + '0'](function (_, i) {
            return projectedData[i].y0;
          });
          areaData[valueComponent + '1'](function (_, i) {
            return projectedData[i].y;
          });
          var path = join(d3Selection.select(group[index]), [data]);
          path.enter().attr('fill', colors.gray);
          path.attr('d', areaData);
          base.decorate()(path, data, index);
        });
      };

      d3fcRebind.rebindAll(area, base, d3fcRebind.exclude('bandwidth', 'align'));
      d3fcRebind.rebind(area, join, 'key');
      d3fcRebind.rebind(area, areaData, 'curve');
      return area;
    });

    var area$1 = (function () {
      var base = xyBase();
      var areaData = d3Shape.area();

      var area = function area(data) {
        var context = areaData.context();
        areaData.defined(base.defined());
        var projectedData = data.map(base.values);
        areaData.x(function (_, i) {
          return projectedData[i].transposedX;
        }).y(function (_, i) {
          return projectedData[i].transposedY;
        });
        var valueComponent = base.orient() === 'vertical' ? 'y' : 'x';
        areaData[valueComponent + '0'](function (_, i) {
          return projectedData[i].y0;
        });
        areaData[valueComponent + '1'](function (_, i) {
          return projectedData[i].y;
        });
        context.beginPath();
        context.fillStyle = colors.gray;
        context.strokeStyle = 'transparent';
        base.decorate()(context, data);
        areaData(data);
        context.fill();
        context.stroke();
        context.closePath();
      };

      d3fcRebind.rebindAll(area, base, d3fcRebind.exclude('bandwidth', 'align'));
      d3fcRebind.rebind(area, areaData, 'curve', 'context');
      return area;
    });

    var area$2 = (function () {
      var base = xyBase();
      var crossValueAttribute = d3fcWebgl.webglAdjacentAttribute(0, 1);
      var crossNextValueAttribute = crossValueAttribute.offset(1);
      var mainValueAttribute = d3fcWebgl.webglAdjacentAttribute(0, 1);
      var mainNextValueAttribute = mainValueAttribute.offset(1);
      var baseValueAttribute = d3fcWebgl.webglAdjacentAttribute(0, 1);
      var baseNextValueAttribute = baseValueAttribute.offset(1);
      var definedAttribute = d3fcWebgl.webglAdjacentAttribute(0, 1).type(d3fcWebgl.webglTypes.UNSIGNED_BYTE);
      var definedNextAttribute = definedAttribute.offset(1);
      var draw = d3fcWebgl.webglSeriesArea().crossValueAttribute(crossValueAttribute).crossNextValueAttribute(crossNextValueAttribute).mainValueAttribute(mainValueAttribute).mainNextValueAttribute(mainNextValueAttribute).baseValueAttribute(baseValueAttribute).baseNextValueAttribute(baseNextValueAttribute).definedAttribute(definedAttribute).definedNextAttribute(definedNextAttribute);

      var equals = function equals(previousData, data) {
        return false;
      };

      var scaleMapper = d3fcWebgl.webglScaleMapper;
      var previousData = [];
      var previousXScale = null;
      var previousYScale = null;

      var area = function area(data) {
        if (base.orient() !== 'vertical') {
          throw new Error("Unsupported orientation ".concat(base.orient()));
        }

        var xScale = scaleMapper(base.xScale());
        var yScale = scaleMapper(base.yScale());
        var dataChanged = !equals(previousData, data);

        if (dataChanged) {
          previousData = data;
          definedAttribute.value(function (d, i) {
            return base.defined()(d, i);
          }).data(data);
        }

        if (dataChanged || xScale.scale !== previousXScale) {
          previousXScale = xScale.scale;
          crossValueAttribute.value(function (d, i) {
            return xScale.scale(base.crossValue()(d, i));
          }).data(data);
        }

        if (dataChanged || yScale.scale !== previousYScale) {
          previousYScale = yScale.scale;
          baseValueAttribute.value(function (d, i) {
            return yScale.scale(base.baseValue()(d, i));
          }).data(data);
          mainValueAttribute.value(function (d, i) {
            return yScale.scale(base.mainValue()(d, i));
          }).data(data);
        }

        draw.xScale(xScale.webglScale).yScale(yScale.webglScale).decorate(function (program) {
          return base.decorate()(program, data, 0);
        });
        draw(data.length);
      };

      area.equals = function () {
        if (!arguments.length) {
          return equals;
        }

        equals = arguments.length <= 0 ? undefined : arguments[0];
        return area;
      };

      area.scaleMapper = function () {
        if (!arguments.length) {
          return scaleMapper;
        }

        scaleMapper = arguments.length <= 0 ? undefined : arguments[0];
        return area;
      };

      d3fcRebind.rebindAll(area, base, d3fcRebind.exclude('bandwidth', 'align'));
      d3fcRebind.rebind(area, draw, 'context', 'pixelRatio');
      return area;
    });

    var ohlcBase = (function () {
      var base;

      var crossValue = function crossValue(d) {
        return d.date;
      };

      var openValue = function openValue(d) {
        return d.open;
      };

      var highValue = function highValue(d) {
        return d.high;
      };

      var lowValue = function lowValue(d) {
        return d.low;
      };

      var closeValue = function closeValue(d) {
        return d.close;
      };

      var bandwidth = function bandwidth() {
        return 5;
      };

      var align = 'center';

      var crossValueScaled = function crossValueScaled(d, i) {
        return base.xScale()(crossValue(d, i));
      };

      base = createBase({
        decorate: function decorate() {},
        defined: function defined$1(d, i) {
          return defined(crossValue, openValue, lowValue, highValue, closeValue)(d, i);
        },
        xScale: d3Scale.scaleIdentity(),
        yScale: d3Scale.scaleIdentity()
      });

      base.values = function (d, i) {
        var closeRaw = closeValue(d, i);
        var openRaw = openValue(d, i);
        var width = bandwidth(d, i);
        var offset = alignOffset(align, width);
        var direction = '';

        if (closeRaw > openRaw) {
          direction = 'up';
        } else if (closeRaw < openRaw) {
          direction = 'down';
        }

        return {
          cross: crossValueScaled(d, i) + offset,
          open: base.yScale()(openRaw),
          high: base.yScale()(highValue(d, i)),
          low: base.yScale()(lowValue(d, i)),
          close: base.yScale()(closeRaw),
          width: width,
          direction: direction
        };
      };

      base.xValues = function () {
        return [crossValue];
      };

      base.yValues = function () {
        return [openValue, highValue, lowValue, closeValue];
      };

      base.crossValue = function () {
        if (!arguments.length) {
          return crossValue;
        }

        crossValue = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      base.openValue = function () {
        if (!arguments.length) {
          return openValue;
        }

        openValue = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      base.highValue = function () {
        if (!arguments.length) {
          return highValue;
        }

        highValue = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      base.lowValue = function () {
        if (!arguments.length) {
          return lowValue;
        }

        lowValue = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      base.yValue = base.closeValue = function () {
        if (!arguments.length) {
          return closeValue;
        }

        closeValue = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      base.bandwidth = function () {
        if (!arguments.length) {
          return bandwidth;
        }

        bandwidth = functor(arguments.length <= 0 ? undefined : arguments[0]);
        return base;
      };

      base.align = function () {
        if (!arguments.length) {
          return align;
        }

        align = arguments.length <= 0 ? undefined : arguments[0];
        return base;
      };

      return base;
    });

    var ohlcBase$1 = (function (pathGenerator, seriesName) {
      var base = ohlcBase();
      var join = d3fcDataJoin.dataJoin('g', seriesName);

      var containerTranslation = function containerTranslation(values) {
        return 'translate(' + values.cross + ', ' + values.high + ')';
      };

      var propagateTransition = function propagateTransition(maybeTransition) {
        return function (selection) {
          return d3fcDataJoin.isTransition(maybeTransition) ? selection.transition(maybeTransition) : selection;
        };
      };

      var candlestick = function candlestick(selection) {
        if (d3fcDataJoin.isTransition(selection)) {
          join.transition(selection);
        }

        var transitionPropagator = propagateTransition(selection);
        selection.each(function (data, index, group) {
          var filteredData = data.filter(base.defined());
          var g = join(d3Selection.select(group[index]), filteredData);
          g.enter().attr('transform', function (d, i) {
            return containerTranslation(base.values(d, i)) + ' scale(1e-6, 1)';
          }).append('path');
          g.each(function (d, i, g) {
            var values = base.values(d, i);
            var color = values.direction === 'up' ? colors.green : colors.red;
            var singleCandlestick = transitionPropagator(d3Selection.select(g[i])).attr('class', seriesName + ' ' + values.direction).attr('stroke', color).attr('fill', color).attr('transform', function () {
              return containerTranslation(values) + ' scale(1)';
            });
            pathGenerator.x(0).width(values.width).open(function () {
              return values.open - values.high;
            }).high(0).low(function () {
              return values.low - values.high;
            }).close(function () {
              return values.close - values.high;
            });
            singleCandlestick.select('path').attr('d', pathGenerator([d]));
          });
          base.decorate()(g, data, index);
        });
      };

      d3fcRebind.rebind(candlestick, join, 'key');
      d3fcRebind.rebindAll(candlestick, base);
      return candlestick;
    });

    var candlestick = (function () {
      return ohlcBase$1(d3fcShape.shapeCandlestick(), 'candlestick');
    });

    var ohlcBase$2 = (function (pathGenerator) {
      var base = ohlcBase();

      var candlestick = function candlestick(data) {
        var filteredData = data.filter(base.defined());
        var context = pathGenerator.context();
        filteredData.forEach(function (d, i) {
          context.save();
          var values = base.values(d, i);
          context.translate(values.cross, values.high);
          context.beginPath();
          pathGenerator.x(0).open(function () {
            return values.open - values.high;
          }).width(values.width).high(0).low(function () {
            return values.low - values.high;
          }).close(function () {
            return values.close - values.high;
          })([d]);
          var color = values.direction === 'up' ? colors.green : colors.red;
          context.strokeStyle = color;
          context.fillStyle = color;
          base.decorate()(context, d, i);
          context.fill();
          context.stroke();
          context.closePath();
          context.restore();
        });
      };

      d3fcRebind.rebind(candlestick, pathGenerator, 'context');
      d3fcRebind.rebindAll(candlestick, base);
      return candlestick;
    });

    var candlestick$1 = (function () {
      return ohlcBase$2(d3fcShape.shapeCandlestick());
    });

    var ohlcBase$3 = (function (pathGenerator) {
      var base = ohlcBase();
      var crossValueAttribute = d3fcWebgl.webglAttribute();
      var openValueAttribute = d3fcWebgl.webglAttribute();
      var highValueAttribute = d3fcWebgl.webglAttribute();
      var lowValueAttribute = d3fcWebgl.webglAttribute();
      var closeValueAttribute = d3fcWebgl.webglAttribute();
      var bandwidthAttribute = d3fcWebgl.webglAttribute().type(d3fcWebgl.webglTypes.UNSIGNED_SHORT);
      var definedAttribute = d3fcWebgl.webglAttribute().type(d3fcWebgl.webglTypes.UNSIGNED_BYTE);
      pathGenerator.crossValueAttribute(crossValueAttribute).openValueAttribute(openValueAttribute).highValueAttribute(highValueAttribute).lowValueAttribute(lowValueAttribute).closeValueAttribute(closeValueAttribute).bandwidthAttribute(bandwidthAttribute).definedAttribute(definedAttribute);

      var equals = function equals(previousData, data) {
        return false;
      };

      var scaleMapper = d3fcWebgl.webglScaleMapper;
      var previousData = [];
      var previousXScale = null;
      var previousYScale = null;

      var candlestick = function candlestick(data) {
        var xScale = scaleMapper(base.xScale());
        var yScale = scaleMapper(base.yScale());
        var dataChanged = !equals(previousData, data);

        if (dataChanged) {
          previousData = data;
          bandwidthAttribute.value(function (d, i) {
            return base.bandwidth()(d, i);
          }).data(data);
          definedAttribute.value(function (d, i) {
            return base.defined()(d, i);
          }).data(data);
        }

        if (dataChanged || xScale.scale !== previousXScale) {
          previousXScale = xScale.scale;
          crossValueAttribute.value(function (d, i) {
            return xScale.scale(base.crossValue()(d, i));
          }).data(data);
        }

        if (dataChanged || yScale.scale !== previousYScale) {
          previousYScale = yScale.scale;
          openValueAttribute.value(function (d, i) {
            return yScale.scale(base.openValue()(d, i));
          }).data(data);
          highValueAttribute.value(function (d, i) {
            return yScale.scale(base.highValue()(d, i));
          }).data(data);
          lowValueAttribute.value(function (d, i) {
            return yScale.scale(base.lowValue()(d, i));
          }).data(data);
          closeValueAttribute.value(function (d, i) {
            return yScale.scale(base.closeValue()(d, i));
          }).data(data);
        }

        pathGenerator.xScale(xScale.webglScale).yScale(yScale.webglScale).decorate(function (program) {
          return base.decorate()(program, data, 0);
        });
        pathGenerator(data.length);
      };

      candlestick.equals = function () {
        if (!arguments.length) {
          return equals;
        }

        equals = arguments.length <= 0 ? undefined : arguments[0];
        return candlestick;
      };

      candlestick.scaleMapper = function () {
        if (!arguments.length) {
          return scaleMapper;
        }

        scaleMapper = arguments.length <= 0 ? undefined : arguments[0];
        return candlestick;
      };

      d3fcRebind.rebindAll(candlestick, base, d3fcRebind.exclude('align'));
      d3fcRebind.rebind(candlestick, pathGenerator, 'context', 'lineWidth', 'pixelRatio');
      return candlestick;
    });

    var candlestick$2 = (function () {
      return ohlcBase$3(d3fcWebgl.webglSeriesCandlestick());
    });

    var boxPlotBase = (function () {
      var upperQuartileValue = function upperQuartileValue(d) {
        return d.upperQuartile;
      };

      var lowerQuartileValue = function lowerQuartileValue(d) {
        return d.lowerQuartile;
      };

      var highValue = function highValue(d) {
        return d.high;
      };

      var lowValue = function lowValue(d) {
        return d.low;
      };

      var crossValue = function crossValue(d) {
        return d.value;
      };

      var medianValue = function medianValue(d) {
        return d.median;
      };

      var orient = 'vertical';
      var align = 'center';

      var bandwidth = function bandwidth() {
        return 5;
      };

      var base = createBase({
        decorate: function decorate() {},
        defined: function defined$1(d, i) {
          return defined(lowValue, highValue, lowerQuartileValue, upperQuartileValue, crossValue, medianValue)(d, i);
        },
        xScale: d3Scale.scaleIde