@globalpayments/vega 2.13.0 → 2.50.0

package/dist/esm/legendInputProcessor-0b8dc09c.js

@@ -1,4766 +0,0 @@
-import { g as getLongestTextLengthFromArray } from './array-8c82516c.js';
-import { a as Typography } from './typography-a8fc4764.js';
-
-/** The GraphContextFactory class provides a method to create and return either a HTMLCanvasElement or SVGElement based on the specified mode and container element. */
-class GraphContextFactory {
-  /**
-   * This function returns either a HTMLCanvasElement or an SVGElement based on the specified mode and container.
-   *
-   * @param {ChartGraphMode} mode - A string that specifies the mode of the chart graph. It can be either 'canvas' or 'svg'.
-   * @param {HTMLElement} container - HTMLElement - the HTML element that will contain the chart/graph.
-   * @returns {SVGElement | HTMLCanvasElement} either a HTMLCanvasElement or an SVGElement depending on the value of the `mode` parameter.
-   */
-  static get(mode, container) {
-    if (mode === 'canvas') {
-      const canvas = container.querySelector('canvas');
-      let context;
-      if (canvas) {
-        context = canvas;
-      }
-      else {
-        context = document.createElement('canvas');
-        context = container.appendChild(context);
-      }
-      return context;
-    }
-    else {
-      const svg = container.querySelector('svg');
-      let context;
-      if (svg) {
-        context = svg;
-      }
-      else {
-        context = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        context = container.appendChild(context);
-      }
-      return context;
-    }
-  }
-}
-
-/**
- * defining an abstract class called `BaseRenderer` that takes a generic type `T` which
- * can be either an `SVGElement` or a `HTMLCanvasElement`
- */
-class BaseRenderer {
-  /**
-   * This is a constructor function that takes a parameter of type T and sets it as a protected property called "context".
-   *
-   * @param {unknown} context - The "context" parameter is a protected property of a class constructor that is
-   * of type "T". It is used to store a reference to an object or data that is required by the class
-   * methods to perform their tasks
-   */
-  constructor(context) {
-    this.context = context;
-  }
-}
-
-function identity$1(x) {
-  return x;
-}
-
-var top = 1,
-    right = 2,
-    bottom = 3,
-    left = 4,
-    epsilon$2 = 1e-6;
-
-function translateX(x) {
-  return "translate(" + x + ",0)";
-}
-
-function translateY(y) {
-  return "translate(0," + y + ")";
-}
-
-function number(scale) {
-  return d => +scale(d);
-}
-
-function center(scale, offset) {
-  offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
-  if (scale.round()) offset = Math.round(offset);
-  return d => +scale(d) + offset;
-}
-
-function entering() {
-  return !this.__axis;
-}
-
-function axis(orient, scale) {
-  var tickArguments = [],
-      tickValues = null,
-      tickFormat = null,
-      tickSizeInner = 6,
-      tickSizeOuter = 6,
-      tickPadding = 3,
-      offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5,
-      k = orient === top || orient === left ? -1 : 1,
-      x = orient === left || orient === right ? "x" : "y",
-      transform = orient === top || orient === bottom ? translateX : translateY;
-
-  function axis(context) {
-    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
-        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity$1) : tickFormat,
-        spacing = Math.max(tickSizeInner, 0) + tickPadding,
-        range = scale.range(),
-        range0 = +range[0] + offset,
-        range1 = +range[range.length - 1] + offset,
-        position = (scale.bandwidth ? center : number)(scale.copy(), offset),
-        selection = context.selection ? context.selection() : context,
-        path = selection.selectAll(".domain").data([null]),
-        tick = selection.selectAll(".tick").data(values, scale).order(),
-        tickExit = tick.exit(),
-        tickEnter = tick.enter().append("g").attr("class", "tick"),
-        line = tick.select("line"),
-        text = tick.select("text");
-
-    path = path.merge(path.enter().insert("path", ".tick")
-        .attr("class", "domain")
-        .attr("stroke", "currentColor"));
-
-    tick = tick.merge(tickEnter);
-
-    line = line.merge(tickEnter.append("line")
-        .attr("stroke", "currentColor")
-        .attr(x + "2", k * tickSizeInner));
-
-    text = text.merge(tickEnter.append("text")
-        .attr("fill", "currentColor")
-        .attr(x, k * spacing)
-        .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
-
-    if (context !== selection) {
-      path = path.transition(context);
-      tick = tick.transition(context);
-      line = line.transition(context);
-      text = text.transition(context);
-
-      tickExit = tickExit.transition(context)
-          .attr("opacity", epsilon$2)
-          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); });
-
-      tickEnter
-          .attr("opacity", epsilon$2)
-          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); });
-    }
-
-    tickExit.remove();
-
-    path
-        .attr("d", orient === left || orient === right
-            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1)
-            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1));
-
-    tick
-        .attr("opacity", 1)
-        .attr("transform", function(d) { return transform(position(d) + offset); });
-
-    line
-        .attr(x + "2", k * tickSizeInner);
-
-    text
-        .attr(x, k * spacing)
-        .text(format);
-
-    selection.filter(entering)
-        .attr("fill", "none")
-        .attr("font-size", 10)
-        .attr("font-family", "sans-serif")
-        .attr("text-anchor", orient === right ? "start" : orient === left ? "end" : "middle");
-
-    selection
-        .each(function() { this.__axis = position; });
-  }
-
-  axis.scale = function(_) {
-    return arguments.length ? (scale = _, axis) : scale;
-  };
-
-  axis.ticks = function() {
-    return tickArguments = Array.from(arguments), axis;
-  };
-
-  axis.tickArguments = function(_) {
-    return arguments.length ? (tickArguments = _ == null ? [] : Array.from(_), axis) : tickArguments.slice();
-  };
-
-  axis.tickValues = function(_) {
-    return arguments.length ? (tickValues = _ == null ? null : Array.from(_), axis) : tickValues && tickValues.slice();
-  };
-
-  axis.tickFormat = function(_) {
-    return arguments.length ? (tickFormat = _, axis) : tickFormat;
-  };
-
-  axis.tickSize = function(_) {
-    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
-  };
-
-  axis.tickSizeInner = function(_) {
-    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
-  };
-
-  axis.tickSizeOuter = function(_) {
-    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
-  };
-
-  axis.tickPadding = function(_) {
-    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
-  };
-
-  axis.offset = function(_) {
-    return arguments.length ? (offset = +_, axis) : offset;
-  };
-
-  return axis;
-}
-
-function axisBottom(scale) {
-  return axis(bottom, scale);
-}
-
-function axisLeft(scale) {
-  return axis(left, scale);
-}
-
-var noop = {value: () => {}};
-
-function dispatch() {
-  for (var i = 0, n = arguments.length, _ = {}, t; i < n; ++i) {
-    if (!(t = arguments[i] + "") || (t in _) || /[\s.]/.test(t)) throw new Error("illegal type: " + t);
-    _[t] = [];
-  }
-  return new Dispatch(_);
-}
-
-function Dispatch(_) {
-  this._ = _;
-}
-
-function parseTypenames$1(typenames, types) {
-  return typenames.trim().split(/^|\s+/).map(function(t) {
-    var name = "", i = t.indexOf(".");
-    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
-    if (t && !types.hasOwnProperty(t)) throw new Error("unknown type: " + t);
-    return {type: t, name: name};
-  });
-}
-
-Dispatch.prototype = dispatch.prototype = {
-  constructor: Dispatch,
-  on: function(typename, callback) {
-    var _ = this._,
-        T = parseTypenames$1(typename + "", _),
-        t,
-        i = -1,
-        n = T.length;
-
-    // If no callback was specified, return the callback of the given type and name.
-    if (arguments.length < 2) {
-      while (++i < n) if ((t = (typename = T[i]).type) && (t = get$1(_[t], typename.name))) return t;
-      return;
-    }
-
-    // If a type was specified, set the callback for the given type and name.
-    // Otherwise, if a null callback was specified, remove callbacks of the given name.
-    if (callback != null && typeof callback !== "function") throw new Error("invalid callback: " + callback);
-    while (++i < n) {
-      if (t = (typename = T[i]).type) _[t] = set$1(_[t], typename.name, callback);
-      else if (callback == null) for (t in _) _[t] = set$1(_[t], typename.name, null);
-    }
-
-    return this;
-  },
-  copy: function() {
-    var copy = {}, _ = this._;
-    for (var t in _) copy[t] = _[t].slice();
-    return new Dispatch(copy);
-  },
-  call: function(type, that) {
-    if ((n = arguments.length - 2) > 0) for (var args = new Array(n), i = 0, n, t; i < n; ++i) args[i] = arguments[i + 2];
-    if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
-    for (t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
-  },
-  apply: function(type, that, args) {
-    if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
-    for (var t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
-  }
-};
-
-function get$1(type, name) {
-  for (var i = 0, n = type.length, c; i < n; ++i) {
-    if ((c = type[i]).name === name) {
-      return c.value;
-    }
-  }
-}
-
-function set$1(type, name, callback) {
-  for (var i = 0, n = type.length; i < n; ++i) {
-    if (type[i].name === name) {
-      type[i] = noop, type = type.slice(0, i).concat(type.slice(i + 1));
-      break;
-    }
-  }
-  if (callback != null) type.push({name: name, value: callback});
-  return type;
-}
-
-var xhtml = "http://www.w3.org/1999/xhtml";
-
-const namespaces = {
-  svg: "http://www.w3.org/2000/svg",
-  xhtml: xhtml,
-  xlink: "http://www.w3.org/1999/xlink",
-  xml: "http://www.w3.org/XML/1998/namespace",
-  xmlns: "http://www.w3.org/2000/xmlns/"
-};
-
-function namespace(name) {
-  var prefix = name += "", i = prefix.indexOf(":");
-  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
-  return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name; // eslint-disable-line no-prototype-builtins
-}
-
-function creatorInherit(name) {
-  return function() {
-    var document = this.ownerDocument,
-        uri = this.namespaceURI;
-    return uri === xhtml && document.documentElement.namespaceURI === xhtml
-        ? document.createElement(name)
-        : document.createElementNS(uri, name);
-  };
-}
-
-function creatorFixed(fullname) {
-  return function() {
-    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
-  };
-}
-
-function creator(name) {
-  var fullname = namespace(name);
-  return (fullname.local
-      ? creatorFixed
-      : creatorInherit)(fullname);
-}
-
-function none() {}
-
-function selector(selector) {
-  return selector == null ? none : function() {
-    return this.querySelector(selector);
-  };
-}
-
-function selection_select(select) {
-  if (typeof select !== "function") select = selector(select);
-
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
-      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
-        if ("__data__" in node) subnode.__data__ = node.__data__;
-        subgroup[i] = subnode;
-      }
-    }
-  }
-
-  return new Selection$1(subgroups, this._parents);
-}
-
-// Given something array like (or null), returns something that is strictly an
-// array. This is used to ensure that array-like objects passed to d3.selectAll
-// or selection.selectAll are converted into proper arrays when creating a
-// selection; we don’t ever want to create a selection backed by a live
-// HTMLCollection or NodeList. However, note that selection.selectAll will use a
-// static NodeList as a group, since it safely derived from querySelectorAll.
-function array$1(x) {
-  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
-}
-
-function empty() {
-  return [];
-}
-
-function selectorAll(selector) {
-  return selector == null ? empty : function() {
-    return this.querySelectorAll(selector);
-  };
-}
-
-function arrayAll(select) {
-  return function() {
-    return array$1(select.apply(this, arguments));
-  };
-}
-
-function selection_selectAll(select) {
-  if (typeof select === "function") select = arrayAll(select);
-  else select = selectorAll(select);
-
-  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        subgroups.push(select.call(node, node.__data__, i, group));
-        parents.push(node);
-      }
-    }
-  }
-
-  return new Selection$1(subgroups, parents);
-}
-
-function matcher(selector) {
-  return function() {
-    return this.matches(selector);
-  };
-}
-
-function childMatcher(selector) {
-  return function(node) {
-    return node.matches(selector);
-  };
-}
-
-var find = Array.prototype.find;
-
-function childFind(match) {
-  return function() {
-    return find.call(this.children, match);
-  };
-}
-
-function childFirst() {
-  return this.firstElementChild;
-}
-
-function selection_selectChild(match) {
-  return this.select(match == null ? childFirst
-      : childFind(typeof match === "function" ? match : childMatcher(match)));
-}
-
-var filter = Array.prototype.filter;
-
-function children() {
-  return Array.from(this.children);
-}
-
-function childrenFilter(match) {
-  return function() {
-    return filter.call(this.children, match);
-  };
-}
-
-function selection_selectChildren(match) {
-  return this.selectAll(match == null ? children
-      : childrenFilter(typeof match === "function" ? match : childMatcher(match)));
-}
-
-function selection_filter(match) {
-  if (typeof match !== "function") match = matcher(match);
-
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
-      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
-        subgroup.push(node);
-      }
-    }
-  }
-
-  return new Selection$1(subgroups, this._parents);
-}
-
-function sparse(update) {
-  return new Array(update.length);
-}
-
-function selection_enter() {
-  return new Selection$1(this._enter || this._groups.map(sparse), this._parents);
-}
-
-function EnterNode(parent, datum) {
-  this.ownerDocument = parent.ownerDocument;
-  this.namespaceURI = parent.namespaceURI;
-  this._next = null;
-  this._parent = parent;
-  this.__data__ = datum;
-}
-
-EnterNode.prototype = {
-  constructor: EnterNode,
-  appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
-  insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
-  querySelector: function(selector) { return this._parent.querySelector(selector); },
-  querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
-};
-
-function constant$2(x) {
-  return function() {
-    return x;
-  };
-}
-
-function bindIndex(parent, group, enter, update, exit, data) {
-  var i = 0,
-      node,
-      groupLength = group.length,
-      dataLength = data.length;
-
-  // Put any non-null nodes that fit into update.
-  // Put any null nodes into enter.
-  // Put any remaining data into enter.
-  for (; i < dataLength; ++i) {
-    if (node = group[i]) {
-      node.__data__ = data[i];
-      update[i] = node;
-    } else {
-      enter[i] = new EnterNode(parent, data[i]);
-    }
-  }
-
-  // Put any non-null nodes that don’t fit into exit.
-  for (; i < groupLength; ++i) {
-    if (node = group[i]) {
-      exit[i] = node;
-    }
-  }
-}
-
-function bindKey(parent, group, enter, update, exit, data, key) {
-  var i,
-      node,
-      nodeByKeyValue = new Map,
-      groupLength = group.length,
-      dataLength = data.length,
-      keyValues = new Array(groupLength),
-      keyValue;
-
-  // Compute the key for each node.
-  // If multiple nodes have the same key, the duplicates are added to exit.
-  for (i = 0; i < groupLength; ++i) {
-    if (node = group[i]) {
-      keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + "";
-      if (nodeByKeyValue.has(keyValue)) {
-        exit[i] = node;
-      } else {
-        nodeByKeyValue.set(keyValue, node);
-      }
-    }
-  }
-
-  // Compute the key for each datum.
-  // If there a node associated with this key, join and add it to update.
-  // If there is not (or the key is a duplicate), add it to enter.
-  for (i = 0; i < dataLength; ++i) {
-    keyValue = key.call(parent, data[i], i, data) + "";
-    if (node = nodeByKeyValue.get(keyValue)) {
-      update[i] = node;
-      node.__data__ = data[i];
-      nodeByKeyValue.delete(keyValue);
-    } else {
-      enter[i] = new EnterNode(parent, data[i]);
-    }
-  }
-
-  // Add any remaining nodes that were not bound to data to exit.
-  for (i = 0; i < groupLength; ++i) {
-    if ((node = group[i]) && (nodeByKeyValue.get(keyValues[i]) === node)) {
-      exit[i] = node;
-    }
-  }
-}
-
-function datum(node) {
-  return node.__data__;
-}
-
-function selection_data(value, key) {
-  if (!arguments.length) return Array.from(this, datum);
-
-  var bind = key ? bindKey : bindIndex,
-      parents = this._parents,
-      groups = this._groups;
-
-  if (typeof value !== "function") value = constant$2(value);
-
-  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
-    var parent = parents[j],
-        group = groups[j],
-        groupLength = group.length,
-        data = arraylike(value.call(parent, parent && parent.__data__, j, parents)),
-        dataLength = data.length,
-        enterGroup = enter[j] = new Array(dataLength),
-        updateGroup = update[j] = new Array(dataLength),
-        exitGroup = exit[j] = new Array(groupLength);
-
-    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
-
-    // Now connect the enter nodes to their following update node, such that
-    // appendChild can insert the materialized enter node before this node,
-    // rather than at the end of the parent node.
-    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
-      if (previous = enterGroup[i0]) {
-        if (i0 >= i1) i1 = i0 + 1;
-        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
-        previous._next = next || null;
-      }
-    }
-  }
-
-  update = new Selection$1(update, parents);
-  update._enter = enter;
-  update._exit = exit;
-  return update;
-}
-
-// Given some data, this returns an array-like view of it: an object that
-// exposes a length property and allows numeric indexing. Note that unlike
-// selectAll, this isn’t worried about “live” collections because the resulting
-// array will only be used briefly while data is being bound. (It is possible to
-// cause the data to change while iterating by using a key function, but please
-// don’t; we’d rather avoid a gratuitous copy.)
-function arraylike(data) {
-  return typeof data === "object" && "length" in data
-    ? data // Array, TypedArray, NodeList, array-like
-    : Array.from(data); // Map, Set, iterable, string, or anything else
-}
-
-function selection_exit() {
-  return new Selection$1(this._exit || this._groups.map(sparse), this._parents);
-}
-
-function selection_join(onenter, onupdate, onexit) {
-  var enter = this.enter(), update = this, exit = this.exit();
-  if (typeof onenter === "function") {
-    enter = onenter(enter);
-    if (enter) enter = enter.selection();
-  } else {
-    enter = enter.append(onenter + "");
-  }
-  if (onupdate != null) {
-    update = onupdate(update);
-    if (update) update = update.selection();
-  }
-  if (onexit == null) exit.remove(); else onexit(exit);
-  return enter && update ? enter.merge(update).order() : update;
-}
-
-function selection_merge(context) {
-  var selection = context.selection ? context.selection() : context;
-
-  for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
-    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
-      if (node = group0[i] || group1[i]) {
-        merge[i] = node;
-      }
-    }
-  }
-
-  for (; j < m0; ++j) {
-    merges[j] = groups0[j];
-  }
-
-  return new Selection$1(merges, this._parents);
-}
-
-function selection_order() {
-
-  for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
-    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
-      if (node = group[i]) {
-        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
-        next = node;
-      }
-    }
-  }
-
-  return this;
-}
-
-function selection_sort(compare) {
-  if (!compare) compare = ascending;
-
-  function compareNode(a, b) {
-    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
-  }
-
-  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        sortgroup[i] = node;
-      }
-    }
-    sortgroup.sort(compareNode);
-  }
-
-  return new Selection$1(sortgroups, this._parents).order();
-}
-
-function ascending(a, b) {
-  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
-}
-
-function selection_call() {
-  var callback = arguments[0];
-  arguments[0] = this;
-  callback.apply(null, arguments);
-  return this;
-}
-
-function selection_nodes() {
-  return Array.from(this);
-}
-
-function selection_node() {
-
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
-      var node = group[i];
-      if (node) return node;
-    }
-  }
-
-  return null;
-}
-
-function selection_size() {
-  let size = 0;
-  for (const node of this) ++size; // eslint-disable-line no-unused-vars
-  return size;
-}
-
-function selection_empty() {
-  return !this.node();
-}
-
-function selection_each(callback) {
-
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
-      if (node = group[i]) callback.call(node, node.__data__, i, group);
-    }
-  }
-
-  return this;
-}
-
-function attrRemove$1(name) {
-  return function() {
-    this.removeAttribute(name);
-  };
-}
-
-function attrRemoveNS$1(fullname) {
-  return function() {
-    this.removeAttributeNS(fullname.space, fullname.local);
-  };
-}
-
-function attrConstant$1(name, value) {
-  return function() {
-    this.setAttribute(name, value);
-  };
-}
-
-function attrConstantNS$1(fullname, value) {
-  return function() {
-    this.setAttributeNS(fullname.space, fullname.local, value);
-  };
-}
-
-function attrFunction$1(name, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.removeAttribute(name);
-    else this.setAttribute(name, v);
-  };
-}
-
-function attrFunctionNS$1(fullname, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
-    else this.setAttributeNS(fullname.space, fullname.local, v);
-  };
-}
-
-function selection_attr(name, value) {
-  var fullname = namespace(name);
-
-  if (arguments.length < 2) {
-    var node = this.node();
-    return fullname.local
-        ? node.getAttributeNS(fullname.space, fullname.local)
-        : node.getAttribute(fullname);
-  }
-
-  return this.each((value == null
-      ? (fullname.local ? attrRemoveNS$1 : attrRemove$1) : (typeof value === "function"
-      ? (fullname.local ? attrFunctionNS$1 : attrFunction$1)
-      : (fullname.local ? attrConstantNS$1 : attrConstant$1)))(fullname, value));
-}
-
-function defaultView(node) {
-  return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
-      || (node.document && node) // node is a Window
-      || node.defaultView; // node is a Document
-}
-
-function styleRemove$1(name) {
-  return function() {
-    this.style.removeProperty(name);
-  };
-}
-
-function styleConstant$1(name, value, priority) {
-  return function() {
-    this.style.setProperty(name, value, priority);
-  };
-}
-
-function styleFunction$1(name, value, priority) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.style.removeProperty(name);
-    else this.style.setProperty(name, v, priority);
-  };
-}
-
-function selection_style(name, value, priority) {
-  return arguments.length > 1
-      ? this.each((value == null
-            ? styleRemove$1 : typeof value === "function"
-            ? styleFunction$1
-            : styleConstant$1)(name, value, priority == null ? "" : priority))
-      : styleValue(this.node(), name);
-}
-
-function styleValue(node, name) {
-  return node.style.getPropertyValue(name)
-      || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
-}
-
-function propertyRemove(name) {
-  return function() {
-    delete this[name];
-  };
-}
-
-function propertyConstant(name, value) {
-  return function() {
-    this[name] = value;
-  };
-}
-
-function propertyFunction(name, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) delete this[name];
-    else this[name] = v;
-  };
-}
-
-function selection_property(name, value) {
-  return arguments.length > 1
-      ? this.each((value == null
-          ? propertyRemove : typeof value === "function"
-          ? propertyFunction
-          : propertyConstant)(name, value))
-      : this.node()[name];
-}
-
-function classArray(string) {
-  return string.trim().split(/^|\s+/);
-}
-
-function classList(node) {
-  return node.classList || new ClassList(node);
-}
-
-function ClassList(node) {
-  this._node = node;
-  this._names = classArray(node.getAttribute("class") || "");
-}
-
-ClassList.prototype = {
-  add: function(name) {
-    var i = this._names.indexOf(name);
-    if (i < 0) {
-      this._names.push(name);
-      this._node.setAttribute("class", this._names.join(" "));
-    }
-  },
-  remove: function(name) {
-    var i = this._names.indexOf(name);
-    if (i >= 0) {
-      this._names.splice(i, 1);
-      this._node.setAttribute("class", this._names.join(" "));
-    }
-  },
-  contains: function(name) {
-    return this._names.indexOf(name) >= 0;
-  }
-};
-
-function classedAdd(node, names) {
-  var list = classList(node), i = -1, n = names.length;
-  while (++i < n) list.add(names[i]);
-}
-
-function classedRemove(node, names) {
-  var list = classList(node), i = -1, n = names.length;
-  while (++i < n) list.remove(names[i]);
-}
-
-function classedTrue(names) {
-  return function() {
-    classedAdd(this, names);
-  };
-}
-
-function classedFalse(names) {
-  return function() {
-    classedRemove(this, names);
-  };
-}
-
-function classedFunction(names, value) {
-  return function() {
-    (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
-  };
-}
-
-function selection_classed(name, value) {
-  var names = classArray(name + "");
-
-  if (arguments.length < 2) {
-    var list = classList(this.node()), i = -1, n = names.length;
-    while (++i < n) if (!list.contains(names[i])) return false;
-    return true;
-  }
-
-  return this.each((typeof value === "function"
-      ? classedFunction : value
-      ? classedTrue
-      : classedFalse)(names, value));
-}
-
-function textRemove() {
-  this.textContent = "";
-}
-
-function textConstant$1(value) {
-  return function() {
-    this.textContent = value;
-  };
-}
-
-function textFunction$1(value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    this.textContent = v == null ? "" : v;
-  };
-}
-
-function selection_text(value) {
-  return arguments.length
-      ? this.each(value == null
-          ? textRemove : (typeof value === "function"
-          ? textFunction$1
-          : textConstant$1)(value))
-      : this.node().textContent;
-}
-
-function htmlRemove() {
-  this.innerHTML = "";
-}
-
-function htmlConstant(value) {
-  return function() {
-    this.innerHTML = value;
-  };
-}
-
-function htmlFunction(value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    this.innerHTML = v == null ? "" : v;
-  };
-}
-
-function selection_html(value) {
-  return arguments.length
-      ? this.each(value == null
-          ? htmlRemove : (typeof value === "function"
-          ? htmlFunction
-          : htmlConstant)(value))
-      : this.node().innerHTML;
-}
-
-function raise() {
-  if (this.nextSibling) this.parentNode.appendChild(this);
-}
-
-function selection_raise() {
-  return this.each(raise);
-}
-
-function lower() {
-  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
-}
-
-function selection_lower() {
-  return this.each(lower);
-}
-
-function selection_append(name) {
-  var create = typeof name === "function" ? name : creator(name);
-  return this.select(function() {
-    return this.appendChild(create.apply(this, arguments));
-  });
-}
-
-function constantNull() {
-  return null;
-}
-
-function selection_insert(name, before) {
-  var create = typeof name === "function" ? name : creator(name),
-      select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
-  return this.select(function() {
-    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
-  });
-}
-
-function remove() {
-  var parent = this.parentNode;
-  if (parent) parent.removeChild(this);
-}
-
-function selection_remove() {
-  return this.each(remove);
-}
-
-function selection_cloneShallow() {
-  var clone = this.cloneNode(false), parent = this.parentNode;
-  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
-}
-
-function selection_cloneDeep() {
-  var clone = this.cloneNode(true), parent = this.parentNode;
-  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
-}
-
-function selection_clone(deep) {
-  return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
-}
-
-function selection_datum(value) {
-  return arguments.length
-      ? this.property("__data__", value)
-      : this.node().__data__;
-}
-
-function contextListener(listener) {
-  return function(event) {
-    listener.call(this, event, this.__data__);
-  };
-}
-
-function parseTypenames(typenames) {
-  return typenames.trim().split(/^|\s+/).map(function(t) {
-    var name = "", i = t.indexOf(".");
-    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
-    return {type: t, name: name};
-  });
-}
-
-function onRemove(typename) {
-  return function() {
-    var on = this.__on;
-    if (!on) return;
-    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
-      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
-        this.removeEventListener(o.type, o.listener, o.options);
-      } else {
-        on[++i] = o;
-      }
-    }
-    if (++i) on.length = i;
-    else delete this.__on;
-  };
-}
-
-function onAdd(typename, value, options) {
-  return function() {
-    var on = this.__on, o, listener = contextListener(value);
-    if (on) for (var j = 0, m = on.length; j < m; ++j) {
-      if ((o = on[j]).type === typename.type && o.name === typename.name) {
-        this.removeEventListener(o.type, o.listener, o.options);
-        this.addEventListener(o.type, o.listener = listener, o.options = options);
-        o.value = value;
-        return;
-      }
-    }
-    this.addEventListener(typename.type, listener, options);
-    o = {type: typename.type, name: typename.name, value: value, listener: listener, options: options};
-    if (!on) this.__on = [o];
-    else on.push(o);
-  };
-}
-
-function selection_on(typename, value, options) {
-  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
-
-  if (arguments.length < 2) {
-    var on = this.node().__on;
-    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
-      for (i = 0, o = on[j]; i < n; ++i) {
-        if ((t = typenames[i]).type === o.type && t.name === o.name) {
-          return o.value;
-        }
-      }
-    }
-    return;
-  }
-
-  on = value ? onAdd : onRemove;
-  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
-  return this;
-}
-
-function dispatchEvent(node, type, params) {
-  var window = defaultView(node),
-      event = window.CustomEvent;
-
-  if (typeof event === "function") {
-    event = new event(type, params);
-  } else {
-    event = window.document.createEvent("Event");
-    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
-    else event.initEvent(type, false, false);
-  }
-
-  node.dispatchEvent(event);
-}
-
-function dispatchConstant(type, params) {
-  return function() {
-    return dispatchEvent(this, type, params);
-  };
-}
-
-function dispatchFunction(type, params) {
-  return function() {
-    return dispatchEvent(this, type, params.apply(this, arguments));
-  };
-}
-
-function selection_dispatch(type, params) {
-  return this.each((typeof params === "function"
-      ? dispatchFunction
-      : dispatchConstant)(type, params));
-}
-
-function* selection_iterator() {
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
-      if (node = group[i]) yield node;
-    }
-  }
-}
-
-var root = [null];
-
-function Selection$1(groups, parents) {
-  this._groups = groups;
-  this._parents = parents;
-}
-
-function selection() {
-  return new Selection$1([[document.documentElement]], root);
-}
-
-function selection_selection() {
-  return this;
-}
-
-Selection$1.prototype = selection.prototype = {
-  constructor: Selection$1,
-  select: selection_select,
-  selectAll: selection_selectAll,
-  selectChild: selection_selectChild,
-  selectChildren: selection_selectChildren,
-  filter: selection_filter,
-  data: selection_data,
-  enter: selection_enter,
-  exit: selection_exit,
-  join: selection_join,
-  merge: selection_merge,
-  selection: selection_selection,
-  order: selection_order,
-  sort: selection_sort,
-  call: selection_call,
-  nodes: selection_nodes,
-  node: selection_node,
-  size: selection_size,
-  empty: selection_empty,
-  each: selection_each,
-  attr: selection_attr,
-  style: selection_style,
-  property: selection_property,
-  classed: selection_classed,
-  text: selection_text,
-  html: selection_html,
-  raise: selection_raise,
-  lower: selection_lower,
-  append: selection_append,
-  insert: selection_insert,
-  remove: selection_remove,
-  clone: selection_clone,
-  datum: selection_datum,
-  on: selection_on,
-  dispatch: selection_dispatch,
-  [Symbol.iterator]: selection_iterator
-};
-
-function d3Select(selector) {
-  return typeof selector === "string"
-      ? new Selection$1([[document.querySelector(selector)]], [document.documentElement])
-      : new Selection$1([[selector]], root);
-}
-
-function d3Create(name) {
-  return d3Select(creator(name).call(document.documentElement));
-}
-
-function define(constructor, factory, prototype) {
-  constructor.prototype = factory.prototype = prototype;
-  prototype.constructor = constructor;
-}
-
-function extend(parent, definition) {
-  var prototype = Object.create(parent.prototype);
-  for (var key in definition) prototype[key] = definition[key];
-  return prototype;
-}
-
-function Color() {}
-
-var darker = 0.7;
-var brighter = 1 / darker;
-
-var reI = "\\s*([+-]?\\d+)\\s*",
-    reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",
-    reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
-    reHex = /^#([0-9a-f]{3,8})$/,
-    reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`),
-    reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`),
-    reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`),
-    reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`),
-    reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`),
-    reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
-
-var named = {
-  aliceblue: 0xf0f8ff,
-  antiquewhite: 0xfaebd7,
-  aqua: 0x00ffff,
-  aquamarine: 0x7fffd4,
-  azure: 0xf0ffff,
-  beige: 0xf5f5dc,
-  bisque: 0xffe4c4,
-  black: 0x000000,
-  blanchedalmond: 0xffebcd,
-  blue: 0x0000ff,
-  blueviolet: 0x8a2be2,
-  brown: 0xa52a2a,
-  burlywood: 0xdeb887,
-  cadetblue: 0x5f9ea0,
-  chartreuse: 0x7fff00,
-  chocolate: 0xd2691e,
-  coral: 0xff7f50,
-  cornflowerblue: 0x6495ed,
-  cornsilk: 0xfff8dc,
-  crimson: 0xdc143c,
-  cyan: 0x00ffff,
-  darkblue: 0x00008b,
-  darkcyan: 0x008b8b,
-  darkgoldenrod: 0xb8860b,
-  darkgray: 0xa9a9a9,
-  darkgreen: 0x006400,
-  darkgrey: 0xa9a9a9,
-  darkkhaki: 0xbdb76b,
-  darkmagenta: 0x8b008b,
-  darkolivegreen: 0x556b2f,
-  darkorange: 0xff8c00,
-  darkorchid: 0x9932cc,
-  darkred: 0x8b0000,
-  darksalmon: 0xe9967a,
-  darkseagreen: 0x8fbc8f,
-  darkslateblue: 0x483d8b,
-  darkslategray: 0x2f4f4f,
-  darkslategrey: 0x2f4f4f,
-  darkturquoise: 0x00ced1,
-  darkviolet: 0x9400d3,
-  deeppink: 0xff1493,
-  deepskyblue: 0x00bfff,
-  dimgray: 0x696969,
-  dimgrey: 0x696969,
-  dodgerblue: 0x1e90ff,
-  firebrick: 0xb22222,
-  floralwhite: 0xfffaf0,
-  forestgreen: 0x228b22,
-  fuchsia: 0xff00ff,
-  gainsboro: 0xdcdcdc,
-  ghostwhite: 0xf8f8ff,
-  gold: 0xffd700,
-  goldenrod: 0xdaa520,
-  gray: 0x808080,
-  green: 0x008000,
-  greenyellow: 0xadff2f,
-  grey: 0x808080,
-  honeydew: 0xf0fff0,
-  hotpink: 0xff69b4,
-  indianred: 0xcd5c5c,
-  indigo: 0x4b0082,
-  ivory: 0xfffff0,
-  khaki: 0xf0e68c,
-  lavender: 0xe6e6fa,
-  lavenderblush: 0xfff0f5,
-  lawngreen: 0x7cfc00,
-  lemonchiffon: 0xfffacd,
-  lightblue: 0xadd8e6,
-  lightcoral: 0xf08080,
-  lightcyan: 0xe0ffff,
-  lightgoldenrodyellow: 0xfafad2,
-  lightgray: 0xd3d3d3,
-  lightgreen: 0x90ee90,
-  lightgrey: 0xd3d3d3,
-  lightpink: 0xffb6c1,
-  lightsalmon: 0xffa07a,
-  lightseagreen: 0x20b2aa,
-  lightskyblue: 0x87cefa,
-  lightslategray: 0x778899,
-  lightslategrey: 0x778899,
-  lightsteelblue: 0xb0c4de,
-  lightyellow: 0xffffe0,
-  lime: 0x00ff00,
-  limegreen: 0x32cd32,
-  linen: 0xfaf0e6,
-  magenta: 0xff00ff,
-  maroon: 0x800000,
-  mediumaquamarine: 0x66cdaa,
-  mediumblue: 0x0000cd,
-  mediumorchid: 0xba55d3,
-  mediumpurple: 0x9370db,
-  mediumseagreen: 0x3cb371,
-  mediumslateblue: 0x7b68ee,
-  mediumspringgreen: 0x00fa9a,
-  mediumturquoise: 0x48d1cc,
-  mediumvioletred: 0xc71585,
-  midnightblue: 0x191970,
-  mintcream: 0xf5fffa,
-  mistyrose: 0xffe4e1,
-  moccasin: 0xffe4b5,
-  navajowhite: 0xffdead,
-  navy: 0x000080,
-  oldlace: 0xfdf5e6,
-  olive: 0x808000,
-  olivedrab: 0x6b8e23,
-  orange: 0xffa500,
-  orangered: 0xff4500,
-  orchid: 0xda70d6,
-  palegoldenrod: 0xeee8aa,
-  palegreen: 0x98fb98,
-  paleturquoise: 0xafeeee,
-  palevioletred: 0xdb7093,
-  papayawhip: 0xffefd5,
-  peachpuff: 0xffdab9,
-  peru: 0xcd853f,
-  pink: 0xffc0cb,
-  plum: 0xdda0dd,
-  powderblue: 0xb0e0e6,
-  purple: 0x800080,
-  rebeccapurple: 0x663399,
-  red: 0xff0000,
-  rosybrown: 0xbc8f8f,
-  royalblue: 0x4169e1,
-  saddlebrown: 0x8b4513,
-  salmon: 0xfa8072,
-  sandybrown: 0xf4a460,
-  seagreen: 0x2e8b57,
-  seashell: 0xfff5ee,
-  sienna: 0xa0522d,
-  silver: 0xc0c0c0,
-  skyblue: 0x87ceeb,
-  slateblue: 0x6a5acd,
-  slategray: 0x708090,
-  slategrey: 0x708090,
-  snow: 0xfffafa,
-  springgreen: 0x00ff7f,
-  steelblue: 0x4682b4,
-  tan: 0xd2b48c,
-  teal: 0x008080,
-  thistle: 0xd8bfd8,
-  tomato: 0xff6347,
-  turquoise: 0x40e0d0,
-  violet: 0xee82ee,
-  wheat: 0xf5deb3,
-  white: 0xffffff,
-  whitesmoke: 0xf5f5f5,
-  yellow: 0xffff00,
-  yellowgreen: 0x9acd32
-};
-
-define(Color, color, {
-  copy(channels) {
-    return Object.assign(new this.constructor, this, channels);
-  },
-  displayable() {
-    return this.rgb().displayable();
-  },
-  hex: color_formatHex, // Deprecated! Use color.formatHex.
-  formatHex: color_formatHex,
-  formatHex8: color_formatHex8,
-  formatHsl: color_formatHsl,
-  formatRgb: color_formatRgb,
-  toString: color_formatRgb
-});
-
-function color_formatHex() {
-  return this.rgb().formatHex();
-}
-
-function color_formatHex8() {
-  return this.rgb().formatHex8();
-}
-
-function color_formatHsl() {
-  return hslConvert(this).formatHsl();
-}
-
-function color_formatRgb() {
-  return this.rgb().formatRgb();
-}
-
-function color(format) {
-  var m, l;
-  format = (format + "").trim().toLowerCase();
-  return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
-      : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
-      : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
-      : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
-      : null) // invalid hex
-      : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
-      : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
-      : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
-      : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
-      : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
-      : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
-      : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
-      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
-      : null;
-}
-
-function rgbn(n) {
-  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
-}
-
-function rgba(r, g, b, a) {
-  if (a <= 0) r = g = b = NaN;
-  return new Rgb(r, g, b, a);
-}
-
-function rgbConvert(o) {
-  if (!(o instanceof Color)) o = color(o);
-  if (!o) return new Rgb;
-  o = o.rgb();
-  return new Rgb(o.r, o.g, o.b, o.opacity);
-}
-
-function rgb(r, g, b, opacity) {
-  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
-}
-
-function Rgb(r, g, b, opacity) {
-  this.r = +r;
-  this.g = +g;
-  this.b = +b;
-  this.opacity = +opacity;
-}
-
-define(Rgb, rgb, extend(Color, {
-  brighter(k) {
-    k = k == null ? brighter : Math.pow(brighter, k);
-    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-  },
-  darker(k) {
-    k = k == null ? darker : Math.pow(darker, k);
-    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-  },
-  rgb() {
-    return this;
-  },
-  clamp() {
-    return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
-  },
-  displayable() {
-    return (-0.5 <= this.r && this.r < 255.5)
-        && (-0.5 <= this.g && this.g < 255.5)
-        && (-0.5 <= this.b && this.b < 255.5)
-        && (0 <= this.opacity && this.opacity <= 1);
-  },
-  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
-  formatHex: rgb_formatHex,
-  formatHex8: rgb_formatHex8,
-  formatRgb: rgb_formatRgb,
-  toString: rgb_formatRgb
-}));
-
-function rgb_formatHex() {
-  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
-}
-
-function rgb_formatHex8() {
-  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
-}
-
-function rgb_formatRgb() {
-  const a = clampa(this.opacity);
-  return `${a === 1 ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? ")" : `, ${a})`}`;
-}
-
-function clampa(opacity) {
-  return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
-}
-
-function clampi(value) {
-  return Math.max(0, Math.min(255, Math.round(value) || 0));
-}
-
-function hex(value) {
-  value = clampi(value);
-  return (value < 16 ? "0" : "") + value.toString(16);
-}
-
-function hsla(h, s, l, a) {
-  if (a <= 0) h = s = l = NaN;
-  else if (l <= 0 || l >= 1) h = s = NaN;
-  else if (s <= 0) h = NaN;
-  return new Hsl(h, s, l, a);
-}
-
-function hslConvert(o) {
-  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Color)) o = color(o);
-  if (!o) return new Hsl;
-  if (o instanceof Hsl) return o;
-  o = o.rgb();
-  var r = o.r / 255,
-      g = o.g / 255,
-      b = o.b / 255,
-      min = Math.min(r, g, b),
-      max = Math.max(r, g, b),
-      h = NaN,
-      s = max - min,
-      l = (max + min) / 2;
-  if (s) {
-    if (r === max) h = (g - b) / s + (g < b) * 6;
-    else if (g === max) h = (b - r) / s + 2;
-    else h = (r - g) / s + 4;
-    s /= l < 0.5 ? max + min : 2 - max - min;
-    h *= 60;
-  } else {
-    s = l > 0 && l < 1 ? 0 : h;
-  }
-  return new Hsl(h, s, l, o.opacity);
-}
-
-function hsl(h, s, l, opacity) {
-  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
-}
-
-function Hsl(h, s, l, opacity) {
-  this.h = +h;
-  this.s = +s;
-  this.l = +l;
-  this.opacity = +opacity;
-}
-
-define(Hsl, hsl, extend(Color, {
-  brighter(k) {
-    k = k == null ? brighter : Math.pow(brighter, k);
-    return new Hsl(this.h, this.s, this.l * k, this.opacity);
-  },
-  darker(k) {
-    k = k == null ? darker : Math.pow(darker, k);
-    return new Hsl(this.h, this.s, this.l * k, this.opacity);
-  },
-  rgb() {
-    var h = this.h % 360 + (this.h < 0) * 360,
-        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
-        l = this.l,
-        m2 = l + (l < 0.5 ? l : 1 - l) * s,
-        m1 = 2 * l - m2;
-    return new Rgb(
-      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
-      hsl2rgb(h, m1, m2),
-      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
-      this.opacity
-    );
-  },
-  clamp() {
-    return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
-  },
-  displayable() {
-    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
-        && (0 <= this.l && this.l <= 1)
-        && (0 <= this.opacity && this.opacity <= 1);
-  },
-  formatHsl() {
-    const a = clampa(this.opacity);
-    return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
-  }
-}));
-
-function clamph(value) {
-  value = (value || 0) % 360;
-  return value < 0 ? value + 360 : value;
-}
-
-function clampt(value) {
-  return Math.max(0, Math.min(1, value || 0));
-}
-
-/* From FvD 13.37, CSS Color Module Level 3 */
-function hsl2rgb(h, m1, m2) {
-  return (h < 60 ? m1 + (m2 - m1) * h / 60
-      : h < 180 ? m2
-      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
-      : m1) * 255;
-}
-
-const constant$1 = x => () => x;
-
-function linear(a, d) {
-  return function(t) {
-    return a + t * d;
-  };
-}
-
-function exponential(a, b, y) {
-  return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {
-    return Math.pow(a + t * b, y);
-  };
-}
-
-function gamma(y) {
-  return (y = +y) === 1 ? nogamma : function(a, b) {
-    return b - a ? exponential(a, b, y) : constant$1(isNaN(a) ? b : a);
-  };
-}
-
-function nogamma(a, b) {
-  var d = b - a;
-  return d ? linear(a, d) : constant$1(isNaN(a) ? b : a);
-}
-
-const interpolateRgb = (function rgbGamma(y) {
-  var color = gamma(y);
-
-  function rgb$1(start, end) {
-    var r = color((start = rgb(start)).r, (end = rgb(end)).r),
-        g = color(start.g, end.g),
-        b = color(start.b, end.b),
-        opacity = nogamma(start.opacity, end.opacity);
-    return function(t) {
-      start.r = r(t);
-      start.g = g(t);
-      start.b = b(t);
-      start.opacity = opacity(t);
-      return start + "";
-    };
-  }
-
-  rgb$1.gamma = rgbGamma;
-
-  return rgb$1;
-})(1);
-
-function interpolateNumber(a, b) {
-  return a = +a, b = +b, function(t) {
-    return a * (1 - t) + b * t;
-  };
-}
-
-var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
-    reB = new RegExp(reA.source, "g");
-
-function zero(b) {
-  return function() {
-    return b;
-  };
-}
-
-function one(b) {
-  return function(t) {
-    return b(t) + "";
-  };
-}
-
-function interpolateString(a, b) {
-  var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b
-      am, // current match in a
-      bm, // current match in b
-      bs, // string preceding current number in b, if any
-      i = -1, // index in s
-      s = [], // string constants and placeholders
-      q = []; // number interpolators
-
-  // Coerce inputs to strings.
-  a = a + "", b = b + "";
-
-  // Interpolate pairs of numbers in a & b.
-  while ((am = reA.exec(a))
-      && (bm = reB.exec(b))) {
-    if ((bs = bm.index) > bi) { // a string precedes the next number in b
-      bs = b.slice(bi, bs);
-      if (s[i]) s[i] += bs; // coalesce with previous string
-      else s[++i] = bs;
-    }
-    if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
-      if (s[i]) s[i] += bm; // coalesce with previous string
-      else s[++i] = bm;
-    } else { // interpolate non-matching numbers
-      s[++i] = null;
-      q.push({i: i, x: interpolateNumber(am, bm)});
-    }
-    bi = reB.lastIndex;
-  }
-
-  // Add remains of b.
-  if (bi < b.length) {
-    bs = b.slice(bi);
-    if (s[i]) s[i] += bs; // coalesce with previous string
-    else s[++i] = bs;
-  }
-
-  // Special optimization for only a single match.
-  // Otherwise, interpolate each of the numbers and rejoin the string.
-  return s.length < 2 ? (q[0]
-      ? one(q[0].x)
-      : zero(b))
-      : (b = q.length, function(t) {
-          for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
-          return s.join("");
-        });
-}
-
-var degrees = 180 / Math.PI;
-
-var identity = {
-  translateX: 0,
-  translateY: 0,
-  rotate: 0,
-  skewX: 0,
-  scaleX: 1,
-  scaleY: 1
-};
-
-function decompose(a, b, c, d, e, f) {
-  var scaleX, scaleY, skewX;
-  if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX;
-  if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX;
-  if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY;
-  if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX;
-  return {
-    translateX: e,
-    translateY: f,
-    rotate: Math.atan2(b, a) * degrees,
-    skewX: Math.atan(skewX) * degrees,
-    scaleX: scaleX,
-    scaleY: scaleY
-  };
-}
-
-var svgNode;
-
-/* eslint-disable no-undef */
-function parseCss(value) {
-  const m = new (typeof DOMMatrix === "function" ? DOMMatrix : WebKitCSSMatrix)(value + "");
-  return m.isIdentity ? identity : decompose(m.a, m.b, m.c, m.d, m.e, m.f);
-}
-
-function parseSvg(value) {
-  if (value == null) return identity;
-  if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  svgNode.setAttribute("transform", value);
-  if (!(value = svgNode.transform.baseVal.consolidate())) return identity;
-  value = value.matrix;
-  return decompose(value.a, value.b, value.c, value.d, value.e, value.f);
-}
-
-function interpolateTransform(parse, pxComma, pxParen, degParen) {
-
-  function pop(s) {
-    return s.length ? s.pop() + " " : "";
-  }
-
-  function translate(xa, ya, xb, yb, s, q) {
-    if (xa !== xb || ya !== yb) {
-      var i = s.push("translate(", null, pxComma, null, pxParen);
-      q.push({i: i - 4, x: interpolateNumber(xa, xb)}, {i: i - 2, x: interpolateNumber(ya, yb)});
-    } else if (xb || yb) {
-      s.push("translate(" + xb + pxComma + yb + pxParen);
-    }
-  }
-
-  function rotate(a, b, s, q) {
-    if (a !== b) {
-      if (a - b > 180) b += 360; else if (b - a > 180) a += 360; // shortest path
-      q.push({i: s.push(pop(s) + "rotate(", null, degParen) - 2, x: interpolateNumber(a, b)});
-    } else if (b) {
-      s.push(pop(s) + "rotate(" + b + degParen);
-    }
-  }
-
-  function skewX(a, b, s, q) {
-    if (a !== b) {
-      q.push({i: s.push(pop(s) + "skewX(", null, degParen) - 2, x: interpolateNumber(a, b)});
-    } else if (b) {
-      s.push(pop(s) + "skewX(" + b + degParen);
-    }
-  }
-
-  function scale(xa, ya, xb, yb, s, q) {
-    if (xa !== xb || ya !== yb) {
-      var i = s.push(pop(s) + "scale(", null, ",", null, ")");
-      q.push({i: i - 4, x: interpolateNumber(xa, xb)}, {i: i - 2, x: interpolateNumber(ya, yb)});
-    } else if (xb !== 1 || yb !== 1) {
-      s.push(pop(s) + "scale(" + xb + "," + yb + ")");
-    }
-  }
-
-  return function(a, b) {
-    var s = [], // string constants and placeholders
-        q = []; // number interpolators
-    a = parse(a), b = parse(b);
-    translate(a.translateX, a.translateY, b.translateX, b.translateY, s, q);
-    rotate(a.rotate, b.rotate, s, q);
-    skewX(a.skewX, b.skewX, s, q);
-    scale(a.scaleX, a.scaleY, b.scaleX, b.scaleY, s, q);
-    a = b = null; // gc
-    return function(t) {
-      var i = -1, n = q.length, o;
-      while (++i < n) s[(o = q[i]).i] = o.x(t);
-      return s.join("");
-    };
-  };
-}
-
-var interpolateTransformCss = interpolateTransform(parseCss, "px, ", "px)", "deg)");
-var interpolateTransformSvg = interpolateTransform(parseSvg, ", ", ")", ")");
-
-var frame = 0, // is an animation frame pending?
-    timeout$1 = 0, // is a timeout pending?
-    interval = 0, // are any timers active?
-    pokeDelay = 1000, // how frequently we check for clock skew
-    taskHead,
-    taskTail,
-    clockLast = 0,
-    clockNow = 0,
-    clockSkew = 0,
-    clock = typeof performance === "object" && performance.now ? performance : Date,
-    setFrame = typeof window === "object" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function(f) { setTimeout(f, 17); };
-
-function now() {
-  return clockNow || (setFrame(clearNow), clockNow = clock.now() + clockSkew);
-}
-
-function clearNow() {
-  clockNow = 0;
-}
-
-function Timer() {
-  this._call =
-  this._time =
-  this._next = null;
-}
-
-Timer.prototype = timer.prototype = {
-  constructor: Timer,
-  restart: function(callback, delay, time) {
-    if (typeof callback !== "function") throw new TypeError("callback is not a function");
-    time = (time == null ? now() : +time) + (delay == null ? 0 : +delay);
-    if (!this._next && taskTail !== this) {
-      if (taskTail) taskTail._next = this;
-      else taskHead = this;
-      taskTail = this;
-    }
-    this._call = callback;
-    this._time = time;
-    sleep();
-  },
-  stop: function() {
-    if (this._call) {
-      this._call = null;
-      this._time = Infinity;
-      sleep();
-    }
-  }
-};
-
-function timer(callback, delay, time) {
-  var t = new Timer;
-  t.restart(callback, delay, time);
-  return t;
-}
-
-function timerFlush() {
-  now(); // Get the current time, if not already set.
-  ++frame; // Pretend we’ve set an alarm, if we haven’t already.
-  var t = taskHead, e;
-  while (t) {
-    if ((e = clockNow - t._time) >= 0) t._call.call(undefined, e);
-    t = t._next;
-  }
-  --frame;
-}
-
-function wake() {
-  clockNow = (clockLast = clock.now()) + clockSkew;
-  frame = timeout$1 = 0;
-  try {
-    timerFlush();
-  } finally {
-    frame = 0;
-    nap();
-    clockNow = 0;
-  }
-}
-
-function poke() {
-  var now = clock.now(), delay = now - clockLast;
-  if (delay > pokeDelay) clockSkew -= delay, clockLast = now;
-}
-
-function nap() {
-  var t0, t1 = taskHead, t2, time = Infinity;
-  while (t1) {
-    if (t1._call) {
-      if (time > t1._time) time = t1._time;
-      t0 = t1, t1 = t1._next;
-    } else {
-      t2 = t1._next, t1._next = null;
-      t1 = t0 ? t0._next = t2 : taskHead = t2;
-    }
-  }
-  taskTail = t0;
-  sleep(time);
-}
-
-function sleep(time) {
-  if (frame) return; // Soonest alarm already set, or will be.
-  if (timeout$1) timeout$1 = clearTimeout(timeout$1);
-  var delay = time - clockNow; // Strictly less than if we recomputed clockNow.
-  if (delay > 24) {
-    if (time < Infinity) timeout$1 = setTimeout(wake, time - clock.now() - clockSkew);
-    if (interval) interval = clearInterval(interval);
-  } else {
-    if (!interval) clockLast = clock.now(), interval = setInterval(poke, pokeDelay);
-    frame = 1, setFrame(wake);
-  }
-}
-
-function timeout(callback, delay, time) {
-  var t = new Timer;
-  delay = delay == null ? 0 : +delay;
-  t.restart(elapsed => {
-    t.stop();
-    callback(elapsed + delay);
-  }, delay, time);
-  return t;
-}
-
-var emptyOn = dispatch("start", "end", "cancel", "interrupt");
-var emptyTween = [];
-
-var CREATED = 0;
-var SCHEDULED = 1;
-var STARTING = 2;
-var STARTED = 3;
-var RUNNING = 4;
-var ENDING = 5;
-var ENDED = 6;
-
-function schedule(node, name, id, index, group, timing) {
-  var schedules = node.__transition;
-  if (!schedules) node.__transition = {};
-  else if (id in schedules) return;
-  create(node, id, {
-    name: name,
-    index: index, // For context during callback.
-    group: group, // For context during callback.
-    on: emptyOn,
-    tween: emptyTween,
-    time: timing.time,
-    delay: timing.delay,
-    duration: timing.duration,
-    ease: timing.ease,
-    timer: null,
-    state: CREATED
-  });
-}
-
-function init(node, id) {
-  var schedule = get(node, id);
-  if (schedule.state > CREATED) throw new Error("too late; already scheduled");
-  return schedule;
-}
-
-function set(node, id) {
-  var schedule = get(node, id);
-  if (schedule.state > STARTED) throw new Error("too late; already running");
-  return schedule;
-}
-
-function get(node, id) {
-  var schedule = node.__transition;
-  if (!schedule || !(schedule = schedule[id])) throw new Error("transition not found");
-  return schedule;
-}
-
-function create(node, id, self) {
-  var schedules = node.__transition,
-      tween;
-
-  // Initialize the self timer when the transition is created.
-  // Note the actual delay is not known until the first callback!
-  schedules[id] = self;
-  self.timer = timer(schedule, 0, self.time);
-
-  function schedule(elapsed) {
-    self.state = SCHEDULED;
-    self.timer.restart(start, self.delay, self.time);
-
-    // If the elapsed delay is less than our first sleep, start immediately.
-    if (self.delay <= elapsed) start(elapsed - self.delay);
-  }
-
-  function start(elapsed) {
-    var i, j, n, o;
-
-    // If the state is not SCHEDULED, then we previously errored on start.
-    if (self.state !== SCHEDULED) return stop();
-
-    for (i in schedules) {
-      o = schedules[i];
-      if (o.name !== self.name) continue;
-
-      // While this element already has a starting transition during this frame,
-      // defer starting an interrupting transition until that transition has a
-      // chance to tick (and possibly end); see d3/d3-transition#54!
-      if (o.state === STARTED) return timeout(start);
-
-      // Interrupt the active transition, if any.
-      if (o.state === RUNNING) {
-        o.state = ENDED;
-        o.timer.stop();
-        o.on.call("interrupt", node, node.__data__, o.index, o.group);
-        delete schedules[i];
-      }
-
-      // Cancel any pre-empted transitions.
-      else if (+i < id) {
-        o.state = ENDED;
-        o.timer.stop();
-        o.on.call("cancel", node, node.__data__, o.index, o.group);
-        delete schedules[i];
-      }
-    }
-
-    // Defer the first tick to end of the current frame; see d3/d3#1576.
-    // Note the transition may be canceled after start and before the first tick!
-    // Note this must be scheduled before the start event; see d3/d3-transition#16!
-    // Assuming this is successful, subsequent callbacks go straight to tick.
-    timeout(function() {
-      if (self.state === STARTED) {
-        self.state = RUNNING;
-        self.timer.restart(tick, self.delay, self.time);
-        tick(elapsed);
-      }
-    });
-
-    // Dispatch the start event.
-    // Note this must be done before the tween are initialized.
-    self.state = STARTING;
-    self.on.call("start", node, node.__data__, self.index, self.group);
-    if (self.state !== STARTING) return; // interrupted
-    self.state = STARTED;
-
-    // Initialize the tween, deleting null tween.
-    tween = new Array(n = self.tween.length);
-    for (i = 0, j = -1; i < n; ++i) {
-      if (o = self.tween[i].value.call(node, node.__data__, self.index, self.group)) {
-        tween[++j] = o;
-      }
-    }
-    tween.length = j + 1;
-  }
-
-  function tick(elapsed) {
-    var t = elapsed < self.duration ? self.ease.call(null, elapsed / self.duration) : (self.timer.restart(stop), self.state = ENDING, 1),
-        i = -1,
-        n = tween.length;
-
-    while (++i < n) {
-      tween[i].call(node, t);
-    }
-
-    // Dispatch the end event.
-    if (self.state === ENDING) {
-      self.on.call("end", node, node.__data__, self.index, self.group);
-      stop();
-    }
-  }
-
-  function stop() {
-    self.state = ENDED;
-    self.timer.stop();
-    delete schedules[id];
-    for (var i in schedules) return; // eslint-disable-line no-unused-vars
-    delete node.__transition;
-  }
-}
-
-function interrupt(node, name) {
-  var schedules = node.__transition,
-      schedule,
-      active,
-      empty = true,
-      i;
-
-  if (!schedules) return;
-
-  name = name == null ? null : name + "";
-
-  for (i in schedules) {
-    if ((schedule = schedules[i]).name !== name) { empty = false; continue; }
-    active = schedule.state > STARTING && schedule.state < ENDING;
-    schedule.state = ENDED;
-    schedule.timer.stop();
-    schedule.on.call(active ? "interrupt" : "cancel", node, node.__data__, schedule.index, schedule.group);
-    delete schedules[i];
-  }
-
-  if (empty) delete node.__transition;
-}
-
-function selection_interrupt(name) {
-  return this.each(function() {
-    interrupt(this, name);
-  });
-}
-
-function tweenRemove(id, name) {
-  var tween0, tween1;
-  return function() {
-    var schedule = set(this, id),
-        tween = schedule.tween;
-
-    // If this node shared tween with the previous node,
-    // just assign the updated shared tween and we’re done!
-    // Otherwise, copy-on-write.
-    if (tween !== tween0) {
-      tween1 = tween0 = tween;
-      for (var i = 0, n = tween1.length; i < n; ++i) {
-        if (tween1[i].name === name) {
-          tween1 = tween1.slice();
-          tween1.splice(i, 1);
-          break;
-        }
-      }
-    }
-
-    schedule.tween = tween1;
-  };
-}
-
-function tweenFunction(id, name, value) {
-  var tween0, tween1;
-  if (typeof value !== "function") throw new Error;
-  return function() {
-    var schedule = set(this, id),
-        tween = schedule.tween;
-
-    // If this node shared tween with the previous node,
-    // just assign the updated shared tween and we’re done!
-    // Otherwise, copy-on-write.
-    if (tween !== tween0) {
-      tween1 = (tween0 = tween).slice();
-      for (var t = {name: name, value: value}, i = 0, n = tween1.length; i < n; ++i) {
-        if (tween1[i].name === name) {
-          tween1[i] = t;
-          break;
-        }
-      }
-      if (i === n) tween1.push(t);
-    }
-
-    schedule.tween = tween1;
-  };
-}
-
-function transition_tween(name, value) {
-  var id = this._id;
-
-  name += "";
-
-  if (arguments.length < 2) {
-    var tween = get(this.node(), id).tween;
-    for (var i = 0, n = tween.length, t; i < n; ++i) {
-      if ((t = tween[i]).name === name) {
-        return t.value;
-      }
-    }
-    return null;
-  }
-
-  return this.each((value == null ? tweenRemove : tweenFunction)(id, name, value));
-}
-
-function tweenValue(transition, name, value) {
-  var id = transition._id;
-
-  transition.each(function() {
-    var schedule = set(this, id);
-    (schedule.value || (schedule.value = {}))[name] = value.apply(this, arguments);
-  });
-
-  return function(node) {
-    return get(node, id).value[name];
-  };
-}
-
-function interpolate(a, b) {
-  var c;
-  return (typeof b === "number" ? interpolateNumber
-      : b instanceof color ? interpolateRgb
-      : (c = color(b)) ? (b = c, interpolateRgb)
-      : interpolateString)(a, b);
-}
-
-function attrRemove(name) {
-  return function() {
-    this.removeAttribute(name);
-  };
-}
-
-function attrRemoveNS(fullname) {
-  return function() {
-    this.removeAttributeNS(fullname.space, fullname.local);
-  };
-}
-
-function attrConstant(name, interpolate, value1) {
-  var string00,
-      string1 = value1 + "",
-      interpolate0;
-  return function() {
-    var string0 = this.getAttribute(name);
-    return string0 === string1 ? null
-        : string0 === string00 ? interpolate0
-        : interpolate0 = interpolate(string00 = string0, value1);
-  };
-}
-
-function attrConstantNS(fullname, interpolate, value1) {
-  var string00,
-      string1 = value1 + "",
-      interpolate0;
-  return function() {
-    var string0 = this.getAttributeNS(fullname.space, fullname.local);
-    return string0 === string1 ? null
-        : string0 === string00 ? interpolate0
-        : interpolate0 = interpolate(string00 = string0, value1);
-  };
-}
-
-function attrFunction(name, interpolate, value) {
-  var string00,
-      string10,
-      interpolate0;
-  return function() {
-    var string0, value1 = value(this), string1;
-    if (value1 == null) return void this.removeAttribute(name);
-    string0 = this.getAttribute(name);
-    string1 = value1 + "";
-    return string0 === string1 ? null
-        : string0 === string00 && string1 === string10 ? interpolate0
-        : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));
-  };
-}
-
-function attrFunctionNS(fullname, interpolate, value) {
-  var string00,
-      string10,
-      interpolate0;
-  return function() {
-    var string0, value1 = value(this), string1;
-    if (value1 == null) return void this.removeAttributeNS(fullname.space, fullname.local);
-    string0 = this.getAttributeNS(fullname.space, fullname.local);
-    string1 = value1 + "";
-    return string0 === string1 ? null
-        : string0 === string00 && string1 === string10 ? interpolate0
-        : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));
-  };
-}
-
-function transition_attr(name, value) {
-  var fullname = namespace(name), i = fullname === "transform" ? interpolateTransformSvg : interpolate;
-  return this.attrTween(name, typeof value === "function"
-      ? (fullname.local ? attrFunctionNS : attrFunction)(fullname, i, tweenValue(this, "attr." + name, value))
-      : value == null ? (fullname.local ? attrRemoveNS : attrRemove)(fullname)
-      : (fullname.local ? attrConstantNS : attrConstant)(fullname, i, value));
-}
-
-function attrInterpolate(name, i) {
-  return function(t) {
-    this.setAttribute(name, i.call(this, t));
-  };
-}
-
-function attrInterpolateNS(fullname, i) {
-  return function(t) {
-    this.setAttributeNS(fullname.space, fullname.local, i.call(this, t));
-  };
-}
-
-function attrTweenNS(fullname, value) {
-  var t0, i0;
-  function tween() {
-    var i = value.apply(this, arguments);
-    if (i !== i0) t0 = (i0 = i) && attrInterpolateNS(fullname, i);
-    return t0;
-  }
-  tween._value = value;
-  return tween;
-}
-
-function attrTween(name, value) {
-  var t0, i0;
-  function tween() {
-    var i = value.apply(this, arguments);
-    if (i !== i0) t0 = (i0 = i) && attrInterpolate(name, i);
-    return t0;
-  }
-  tween._value = value;
-  return tween;
-}
-
-function transition_attrTween(name, value) {
-  var key = "attr." + name;
-  if (arguments.length < 2) return (key = this.tween(key)) && key._value;
-  if (value == null) return this.tween(key, null);
-  if (typeof value !== "function") throw new Error;
-  var fullname = namespace(name);
-  return this.tween(key, (fullname.local ? attrTweenNS : attrTween)(fullname, value));
-}
-
-function delayFunction(id, value) {
-  return function() {
-    init(this, id).delay = +value.apply(this, arguments);
-  };
-}
-
-function delayConstant(id, value) {
-  return value = +value, function() {
-    init(this, id).delay = value;
-  };
-}
-
-function transition_delay(value) {
-  var id = this._id;
-
-  return arguments.length
-      ? this.each((typeof value === "function"
-          ? delayFunction
-          : delayConstant)(id, value))
-      : get(this.node(), id).delay;
-}
-
-function durationFunction(id, value) {
-  return function() {
-    set(this, id).duration = +value.apply(this, arguments);
-  };
-}
-
-function durationConstant(id, value) {
-  return value = +value, function() {
-    set(this, id).duration = value;
-  };
-}
-
-function transition_duration(value) {
-  var id = this._id;
-
-  return arguments.length
-      ? this.each((typeof value === "function"
-          ? durationFunction
-          : durationConstant)(id, value))
-      : get(this.node(), id).duration;
-}
-
-function easeConstant(id, value) {
-  if (typeof value !== "function") throw new Error;
-  return function() {
-    set(this, id).ease = value;
-  };
-}
-
-function transition_ease(value) {
-  var id = this._id;
-
-  return arguments.length
-      ? this.each(easeConstant(id, value))
-      : get(this.node(), id).ease;
-}
-
-function easeVarying(id, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (typeof v !== "function") throw new Error;
-    set(this, id).ease = v;
-  };
-}
-
-function transition_easeVarying(value) {
-  if (typeof value !== "function") throw new Error;
-  return this.each(easeVarying(this._id, value));
-}
-
-function transition_filter(match) {
-  if (typeof match !== "function") match = matcher(match);
-
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
-      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
-        subgroup.push(node);
-      }
-    }
-  }
-
-  return new Transition(subgroups, this._parents, this._name, this._id);
-}
-
-function transition_merge(transition) {
-  if (transition._id !== this._id) throw new Error;
-
-  for (var groups0 = this._groups, groups1 = transition._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
-    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
-      if (node = group0[i] || group1[i]) {
-        merge[i] = node;
-      }
-    }
-  }
-
-  for (; j < m0; ++j) {
-    merges[j] = groups0[j];
-  }
-
-  return new Transition(merges, this._parents, this._name, this._id);
-}
-
-function start(name) {
-  return (name + "").trim().split(/^|\s+/).every(function(t) {
-    var i = t.indexOf(".");
-    if (i >= 0) t = t.slice(0, i);
-    return !t || t === "start";
-  });
-}
-
-function onFunction(id, name, listener) {
-  var on0, on1, sit = start(name) ? init : set;
-  return function() {
-    var schedule = sit(this, id),
-        on = schedule.on;
-
-    // If this node shared a dispatch with the previous node,
-    // just assign the updated shared dispatch and we’re done!
-    // Otherwise, copy-on-write.
-    if (on !== on0) (on1 = (on0 = on).copy()).on(name, listener);
-
-    schedule.on = on1;
-  };
-}
-
-function transition_on(name, listener) {
-  var id = this._id;
-
-  return arguments.length < 2
-      ? get(this.node(), id).on.on(name)
-      : this.each(onFunction(id, name, listener));
-}
-
-function removeFunction(id) {
-  return function() {
-    var parent = this.parentNode;
-    for (var i in this.__transition) if (+i !== id) return;
-    if (parent) parent.removeChild(this);
-  };
-}
-
-function transition_remove() {
-  return this.on("end.remove", removeFunction(this._id));
-}
-
-function transition_select(select) {
-  var name = this._name,
-      id = this._id;
-
-  if (typeof select !== "function") select = selector(select);
-
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
-      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
-        if ("__data__" in node) subnode.__data__ = node.__data__;
-        subgroup[i] = subnode;
-        schedule(subgroup[i], name, id, i, subgroup, get(node, id));
-      }
-    }
-  }
-
-  return new Transition(subgroups, this._parents, name, id);
-}
-
-function transition_selectAll(select) {
-  var name = this._name,
-      id = this._id;
-
-  if (typeof select !== "function") select = selectorAll(select);
-
-  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        for (var children = select.call(node, node.__data__, i, group), child, inherit = get(node, id), k = 0, l = children.length; k < l; ++k) {
-          if (child = children[k]) {
-            schedule(child, name, id, k, children, inherit);
-          }
-        }
-        subgroups.push(children);
-        parents.push(node);
-      }
-    }
-  }
-
-  return new Transition(subgroups, parents, name, id);
-}
-
-var Selection = selection.prototype.constructor;
-
-function transition_selection() {
-  return new Selection(this._groups, this._parents);
-}
-
-function styleNull(name, interpolate) {
-  var string00,
-      string10,
-      interpolate0;
-  return function() {
-    var string0 = styleValue(this, name),
-        string1 = (this.style.removeProperty(name), styleValue(this, name));
-    return string0 === string1 ? null
-        : string0 === string00 && string1 === string10 ? interpolate0
-        : interpolate0 = interpolate(string00 = string0, string10 = string1);
-  };
-}
-
-function styleRemove(name) {
-  return function() {
-    this.style.removeProperty(name);
-  };
-}
-
-function styleConstant(name, interpolate, value1) {
-  var string00,
-      string1 = value1 + "",
-      interpolate0;
-  return function() {
-    var string0 = styleValue(this, name);
-    return string0 === string1 ? null
-        : string0 === string00 ? interpolate0
-        : interpolate0 = interpolate(string00 = string0, value1);
-  };
-}
-
-function styleFunction(name, interpolate, value) {
-  var string00,
-      string10,
-      interpolate0;
-  return function() {
-    var string0 = styleValue(this, name),
-        value1 = value(this),
-        string1 = value1 + "";
-    if (value1 == null) string1 = value1 = (this.style.removeProperty(name), styleValue(this, name));
-    return string0 === string1 ? null
-        : string0 === string00 && string1 === string10 ? interpolate0
-        : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));
-  };
-}
-
-function styleMaybeRemove(id, name) {
-  var on0, on1, listener0, key = "style." + name, event = "end." + key, remove;
-  return function() {
-    var schedule = set(this, id),
-        on = schedule.on,
-        listener = schedule.value[key] == null ? remove || (remove = styleRemove(name)) : undefined;
-
-    // If this node shared a dispatch with the previous node,
-    // just assign the updated shared dispatch and we’re done!
-    // Otherwise, copy-on-write.
-    if (on !== on0 || listener0 !== listener) (on1 = (on0 = on).copy()).on(event, listener0 = listener);
-
-    schedule.on = on1;
-  };
-}
-
-function transition_style(name, value, priority) {
-  var i = (name += "") === "transform" ? interpolateTransformCss : interpolate;
-  return value == null ? this
-      .styleTween(name, styleNull(name, i))
-      .on("end.style." + name, styleRemove(name))
-    : typeof value === "function" ? this
-      .styleTween(name, styleFunction(name, i, tweenValue(this, "style." + name, value)))
-      .each(styleMaybeRemove(this._id, name))
-    : this
-      .styleTween(name, styleConstant(name, i, value), priority)
-      .on("end.style." + name, null);
-}
-
-function styleInterpolate(name, i, priority) {
-  return function(t) {
-    this.style.setProperty(name, i.call(this, t), priority);
-  };
-}
-
-function styleTween(name, value, priority) {
-  var t, i0;
-  function tween() {
-    var i = value.apply(this, arguments);
-    if (i !== i0) t = (i0 = i) && styleInterpolate(name, i, priority);
-    return t;
-  }
-  tween._value = value;
-  return tween;
-}
-
-function transition_styleTween(name, value, priority) {
-  var key = "style." + (name += "");
-  if (arguments.length < 2) return (key = this.tween(key)) && key._value;
-  if (value == null) return this.tween(key, null);
-  if (typeof value !== "function") throw new Error;
-  return this.tween(key, styleTween(name, value, priority == null ? "" : priority));
-}
-
-function textConstant(value) {
-  return function() {
-    this.textContent = value;
-  };
-}
-
-function textFunction(value) {
-  return function() {
-    var value1 = value(this);
-    this.textContent = value1 == null ? "" : value1;
-  };
-}
-
-function transition_text(value) {
-  return this.tween("text", typeof value === "function"
-      ? textFunction(tweenValue(this, "text", value))
-      : textConstant(value == null ? "" : value + ""));
-}
-
-function textInterpolate(i) {
-  return function(t) {
-    this.textContent = i.call(this, t);
-  };
-}
-
-function textTween(value) {
-  var t0, i0;
-  function tween() {
-    var i = value.apply(this, arguments);
-    if (i !== i0) t0 = (i0 = i) && textInterpolate(i);
-    return t0;
-  }
-  tween._value = value;
-  return tween;
-}
-
-function transition_textTween(value) {
-  var key = "text";
-  if (arguments.length < 1) return (key = this.tween(key)) && key._value;
-  if (value == null) return this.tween(key, null);
-  if (typeof value !== "function") throw new Error;
-  return this.tween(key, textTween(value));
-}
-
-function transition_transition() {
-  var name = this._name,
-      id0 = this._id,
-      id1 = newId();
-
-  for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        var inherit = get(node, id0);
-        schedule(node, name, id1, i, group, {
-          time: inherit.time + inherit.delay + inherit.duration,
-          delay: 0,
-          duration: inherit.duration,
-          ease: inherit.ease
-        });
-      }
-    }
-  }
-
-  return new Transition(groups, this._parents, name, id1);
-}
-
-function transition_end() {
-  var on0, on1, that = this, id = that._id, size = that.size();
-  return new Promise(function(resolve, reject) {
-    var cancel = {value: reject},
-        end = {value: function() { if (--size === 0) resolve(); }};
-
-    that.each(function() {
-      var schedule = set(this, id),
-          on = schedule.on;
-
-      // If this node shared a dispatch with the previous node,
-      // just assign the updated shared dispatch and we’re done!
-      // Otherwise, copy-on-write.
-      if (on !== on0) {
-        on1 = (on0 = on).copy();
-        on1._.cancel.push(cancel);
-        on1._.interrupt.push(cancel);
-        on1._.end.push(end);
-      }
-
-      schedule.on = on1;
-    });
-
-    // The selection was empty, resolve end immediately
-    if (size === 0) resolve();
-  });
-}
-
-var id = 0;
-
-function Transition(groups, parents, name, id) {
-  this._groups = groups;
-  this._parents = parents;
-  this._name = name;
-  this._id = id;
-}
-
-function newId() {
-  return ++id;
-}
-
-var selection_prototype = selection.prototype;
-
-Transition.prototype = {
-  constructor: Transition,
-  select: transition_select,
-  selectAll: transition_selectAll,
-  selectChild: selection_prototype.selectChild,
-  selectChildren: selection_prototype.selectChildren,
-  filter: transition_filter,
-  merge: transition_merge,
-  selection: transition_selection,
-  transition: transition_transition,
-  call: selection_prototype.call,
-  nodes: selection_prototype.nodes,
-  node: selection_prototype.node,
-  size: selection_prototype.size,
-  empty: selection_prototype.empty,
-  each: selection_prototype.each,
-  on: transition_on,
-  attr: transition_attr,
-  attrTween: transition_attrTween,
-  style: transition_style,
-  styleTween: transition_styleTween,
-  text: transition_text,
-  textTween: transition_textTween,
-  remove: transition_remove,
-  tween: transition_tween,
-  delay: transition_delay,
-  duration: transition_duration,
-  ease: transition_ease,
-  easeVarying: transition_easeVarying,
-  end: transition_end,
-  [Symbol.iterator]: selection_prototype[Symbol.iterator]
-};
-
-function cubicInOut(t) {
-  return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
-}
-
-var defaultTiming = {
-  time: null, // Set on use.
-  delay: 0,
-  duration: 250,
-  ease: cubicInOut
-};
-
-function inherit(node, id) {
-  var timing;
-  while (!(timing = node.__transition) || !(timing = timing[id])) {
-    if (!(node = node.parentNode)) {
-      throw new Error(`transition ${id} not found`);
-    }
-  }
-  return timing;
-}
-
-function selection_transition(name) {
-  var id,
-      timing;
-
-  if (name instanceof Transition) {
-    id = name._id, name = name._name;
-  } else {
-    id = newId(), (timing = defaultTiming).time = now(), name = name == null ? null : name + "";
-  }
-
-  for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        schedule(node, name, id, i, group, timing || inherit(node, id));
-      }
-    }
-  }
-
-  return new Transition(groups, this._parents, name, id);
-}
-
-selection.prototype.interrupt = selection_interrupt;
-selection.prototype.transition = selection_transition;
-
-const pi$1 = Math.PI,
-    tau$1 = 2 * pi$1,
-    epsilon$1 = 1e-6,
-    tauEpsilon = tau$1 - epsilon$1;
-
-function append(strings) {
-  this._ += strings[0];
-  for (let i = 1, n = strings.length; i < n; ++i) {
-    this._ += arguments[i] + strings[i];
-  }
-}
-
-function appendRound(digits) {
-  let d = Math.floor(digits);
-  if (!(d >= 0)) throw new Error(`invalid digits: ${digits}`);
-  if (d > 15) return append;
-  const k = 10 ** d;
-  return function(strings) {
-    this._ += strings[0];
-    for (let i = 1, n = strings.length; i < n; ++i) {
-      this._ += Math.round(arguments[i] * k) / k + strings[i];
-    }
-  };
-}
-
-class Path {
-  constructor(digits) {
-    this._x0 = this._y0 = // start of current subpath
-    this._x1 = this._y1 = null; // end of current subpath
-    this._ = "";
-    this._append = digits == null ? append : appendRound(digits);
-  }
-  moveTo(x, y) {
-    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}`;
-  }
-  closePath() {
-    if (this._x1 !== null) {
-      this._x1 = this._x0, this._y1 = this._y0;
-      this._append`Z`;
-    }
-  }
-  lineTo(x, y) {
-    this._append`L${this._x1 = +x},${this._y1 = +y}`;
-  }
-  quadraticCurveTo(x1, y1, x, y) {
-    this._append`Q${+x1},${+y1},${this._x1 = +x},${this._y1 = +y}`;
-  }
-  bezierCurveTo(x1, y1, x2, y2, x, y) {
-    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x},${this._y1 = +y}`;
-  }
-  arcTo(x1, y1, x2, y2, r) {
-    x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
-
-    // Is the radius negative? Error.
-    if (r < 0) throw new Error(`negative radius: ${r}`);
-
-    let x0 = this._x1,
-        y0 = this._y1,
-        x21 = x2 - x1,
-        y21 = y2 - y1,
-        x01 = x0 - x1,
-        y01 = y0 - y1,
-        l01_2 = x01 * x01 + y01 * y01;
-
-    // Is this path empty? Move to (x1,y1).
-    if (this._x1 === null) {
-      this._append`M${this._x1 = x1},${this._y1 = y1}`;
-    }
-
-    // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
-    else if (!(l01_2 > epsilon$1));
-
-    // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
-    // Equivalently, is (x1,y1) coincident with (x2,y2)?
-    // Or, is the radius zero? Line to (x1,y1).
-    else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon$1) || !r) {
-      this._append`L${this._x1 = x1},${this._y1 = y1}`;
-    }
-
-    // Otherwise, draw an arc!
-    else {
-      let x20 = x2 - x0,
-          y20 = y2 - y0,
-          l21_2 = x21 * x21 + y21 * y21,
-          l20_2 = x20 * x20 + y20 * y20,
-          l21 = Math.sqrt(l21_2),
-          l01 = Math.sqrt(l01_2),
-          l = r * Math.tan((pi$1 - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
-          t01 = l / l01,
-          t21 = l / l21;
-
-      // If the start tangent is not coincident with (x0,y0), line to.
-      if (Math.abs(t01 - 1) > epsilon$1) {
-        this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`;
-      }
-
-      this._append`A${r},${r},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
-    }
-  }
-  arc(x, y, r, a0, a1, ccw) {
-    x = +x, y = +y, r = +r, ccw = !!ccw;
-
-    // Is the radius negative? Error.
-    if (r < 0) throw new Error(`negative radius: ${r}`);
-
-    let dx = r * Math.cos(a0),
-        dy = r * Math.sin(a0),
-        x0 = x + dx,
-        y0 = y + dy,
-        cw = 1 ^ ccw,
-        da = ccw ? a0 - a1 : a1 - a0;
-
-    // Is this path empty? Move to (x0,y0).
-    if (this._x1 === null) {
-      this._append`M${x0},${y0}`;
-    }
-
-    // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
-    else if (Math.abs(this._x1 - x0) > epsilon$1 || Math.abs(this._y1 - y0) > epsilon$1) {
-      this._append`L${x0},${y0}`;
-    }
-
-    // Is this arc empty? We’re done.
-    if (!r) return;
-
-    // Does the angle go the wrong way? Flip the direction.
-    if (da < 0) da = da % tau$1 + tau$1;
-
-    // Is this a complete circle? Draw two arcs to complete the circle.
-    if (da > tauEpsilon) {
-      this._append`A${r},${r},0,1,${cw},${x - dx},${y - dy}A${r},${r},0,1,${cw},${this._x1 = x0},${this._y1 = y0}`;
-    }
-
-    // Is this arc non-empty? Draw an arc!
-    else if (da > epsilon$1) {
-      this._append`A${r},${r},0,${+(da >= pi$1)},${cw},${this._x1 = x + r * Math.cos(a1)},${this._y1 = y + r * Math.sin(a1)}`;
-    }
-  }
-  rect(x, y, w, h) {
-    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}h${w = +w}v${+h}h${-w}Z`;
-  }
-  toString() {
-    return this._;
-  }
-}
-
-function constant(x) {
-  return function constant() {
-    return x;
-  };
-}
-
-const abs = Math.abs;
-const atan2 = Math.atan2;
-const cos = Math.cos;
-const max = Math.max;
-const min = Math.min;
-const sin = Math.sin;
-const sqrt = Math.sqrt;
-
-const epsilon = 1e-12;
-const pi = Math.PI;
-const halfPi = pi / 2;
-const tau = 2 * pi;
-
-function acos(x) {
-  return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);
-}
-
-function asin(x) {
-  return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);
-}
-
-function withPath(shape) {
-  let digits = 3;
-
-  shape.digits = function(_) {
-    if (!arguments.length) return digits;
-    if (_ == null) {
-      digits = null;
-    } else {
-      const d = Math.floor(_);
-      if (!(d >= 0)) throw new RangeError(`invalid digits: ${_}`);
-      digits = d;
-    }
-    return shape;
-  };
-
-  return () => new Path(digits);
-}
-
-function arcInnerRadius(d) {
-  return d.innerRadius;
-}
-
-function arcOuterRadius(d) {
-  return d.outerRadius;
-}
-
-function arcStartAngle(d) {
-  return d.startAngle;
-}
-
-function arcEndAngle(d) {
-  return d.endAngle;
-}
-
-function arcPadAngle(d) {
-  return d && d.padAngle; // Note: optional!
-}
-
-function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
-  var x10 = x1 - x0, y10 = y1 - y0,
-      x32 = x3 - x2, y32 = y3 - y2,
-      t = y32 * x10 - x32 * y10;
-  if (t * t < epsilon) return;
-  t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;
-  return [x0 + t * x10, y0 + t * y10];
-}
-
-// Compute perpendicular offset line of length rc.
-// http://mathworld.wolfram.com/Circle-LineIntersection.html
-function cornerTangents(x0, y0, x1, y1, r1, rc, cw) {
-  var x01 = x0 - x1,
-      y01 = y0 - y1,
-      lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),
-      ox = lo * y01,
-      oy = -lo * x01,
-      x11 = x0 + ox,
-      y11 = y0 + oy,
-      x10 = x1 + ox,
-      y10 = y1 + oy,
-      x00 = (x11 + x10) / 2,
-      y00 = (y11 + y10) / 2,
-      dx = x10 - x11,
-      dy = y10 - y11,
-      d2 = dx * dx + dy * dy,
-      r = r1 - rc,
-      D = x11 * y10 - x10 * y11,
-      d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),
-      cx0 = (D * dy - dx * d) / d2,
-      cy0 = (-D * dx - dy * d) / d2,
-      cx1 = (D * dy + dx * d) / d2,
-      cy1 = (-D * dx + dy * d) / d2,
-      dx0 = cx0 - x00,
-      dy0 = cy0 - y00,
-      dx1 = cx1 - x00,
-      dy1 = cy1 - y00;
-
-  // Pick the closer of the two intersection points.
-  // TODO Is there a faster way to determine which intersection to use?
-  if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;
-
-  return {
-    cx: cx0,
-    cy: cy0,
-    x01: -ox,
-    y01: -oy,
-    x11: cx0 * (r1 / r - 1),
-    y11: cy0 * (r1 / r - 1)
-  };
-}
-
-function d3Arc() {
-  var innerRadius = arcInnerRadius,
-      outerRadius = arcOuterRadius,
-      cornerRadius = constant(0),
-      padRadius = null,
-      startAngle = arcStartAngle,
-      endAngle = arcEndAngle,
-      padAngle = arcPadAngle,
-      context = null,
-      path = withPath(arc);
-
-  function arc() {
-    var buffer,
-        r,
-        r0 = +innerRadius.apply(this, arguments),
-        r1 = +outerRadius.apply(this, arguments),
-        a0 = startAngle.apply(this, arguments) - halfPi,
-        a1 = endAngle.apply(this, arguments) - halfPi,
-        da = abs(a1 - a0),
-        cw = a1 > a0;
-
-    if (!context) context = buffer = path();
-
-    // Ensure that the outer radius is always larger than the inner radius.
-    if (r1 < r0) r = r1, r1 = r0, r0 = r;
-
-    // Is it a point?
-    if (!(r1 > epsilon)) context.moveTo(0, 0);
-
-    // Or is it a circle or annulus?
-    else if (da > tau - epsilon) {
-      context.moveTo(r1 * cos(a0), r1 * sin(a0));
-      context.arc(0, 0, r1, a0, a1, !cw);
-      if (r0 > epsilon) {
-        context.moveTo(r0 * cos(a1), r0 * sin(a1));
-        context.arc(0, 0, r0, a1, a0, cw);
-      }
-    }
-
-    // Or is it a circular or annular sector?
-    else {
-      var a01 = a0,
-          a11 = a1,
-          a00 = a0,
-          a10 = a1,
-          da0 = da,
-          da1 = da,
-          ap = padAngle.apply(this, arguments) / 2,
-          rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),
-          rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),
-          rc0 = rc,
-          rc1 = rc,
-          t0,
-          t1;
-
-      // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.
-      if (rp > epsilon) {
-        var p0 = asin(rp / r0 * sin(ap)),
-            p1 = asin(rp / r1 * sin(ap));
-        if ((da0 -= p0 * 2) > epsilon) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;
-        else da0 = 0, a00 = a10 = (a0 + a1) / 2;
-        if ((da1 -= p1 * 2) > epsilon) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;
-        else da1 = 0, a01 = a11 = (a0 + a1) / 2;
-      }
-
-      var x01 = r1 * cos(a01),
-          y01 = r1 * sin(a01),
-          x10 = r0 * cos(a10),
-          y10 = r0 * sin(a10);
-
-      // Apply rounded corners?
-      if (rc > epsilon) {
-        var x11 = r1 * cos(a11),
-            y11 = r1 * sin(a11),
-            x00 = r0 * cos(a00),
-            y00 = r0 * sin(a00),
-            oc;
-
-        // Restrict the corner radius according to the sector angle. If this
-        // intersection fails, it’s probably because the arc is too small, so
-        // disable the corner radius entirely.
-        if (da < pi) {
-          if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {
-            var ax = x01 - oc[0],
-                ay = y01 - oc[1],
-                bx = x11 - oc[0],
-                by = y11 - oc[1],
-                kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),
-                lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);
-            rc0 = min(rc, (r0 - lc) / (kc - 1));
-            rc1 = min(rc, (r1 - lc) / (kc + 1));
-          } else {
-            rc0 = rc1 = 0;
-          }
-        }
-      }
-
-      // Is the sector collapsed to a line?
-      if (!(da1 > epsilon)) context.moveTo(x01, y01);
-
-      // Does the sector’s outer ring have rounded corners?
-      else if (rc1 > epsilon) {
-        t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);
-        t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);
-
-        context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);
-
-        // Have the corners merged?
-        if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);
-
-        // Otherwise, draw the two corners and the ring.
-        else {
-          context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);
-          context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);
-          context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);
-        }
-      }
-
-      // Or is the outer ring just a circular arc?
-      else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);
-
-      // Is there no inner ring, and it’s a circular sector?
-      // Or perhaps it’s an annular sector collapsed due to padding?
-      if (!(r0 > epsilon) || !(da0 > epsilon)) context.lineTo(x10, y10);
-
-      // Does the sector’s inner ring (or point) have rounded corners?
-      else if (rc0 > epsilon) {
-        t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);
-        t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);
-
-        context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);
-
-        // Have the corners merged?
-        if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);
-
-        // Otherwise, draw the two corners and the ring.
-        else {
-          context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);
-          context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);
-          context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);
-        }
-      }
-
-      // Or is the inner ring just a circular arc?
-      else context.arc(0, 0, r0, a10, a00, cw);
-    }
-
-    context.closePath();
-
-    if (buffer) return context = null, buffer + "" || null;
-  }
-
-  arc.centroid = function() {
-    var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,
-        a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;
-    return [cos(a) * r, sin(a) * r];
-  };
-
-  arc.innerRadius = function(_) {
-    return arguments.length ? (innerRadius = typeof _ === "function" ? _ : constant(+_), arc) : innerRadius;
-  };
-
-  arc.outerRadius = function(_) {
-    return arguments.length ? (outerRadius = typeof _ === "function" ? _ : constant(+_), arc) : outerRadius;
-  };
-
-  arc.cornerRadius = function(_) {
-    return arguments.length ? (cornerRadius = typeof _ === "function" ? _ : constant(+_), arc) : cornerRadius;
-  };
-
-  arc.padRadius = function(_) {
-    return arguments.length ? (padRadius = _ == null ? null : typeof _ === "function" ? _ : constant(+_), arc) : padRadius;
-  };
-
-  arc.startAngle = function(_) {
-    return arguments.length ? (startAngle = typeof _ === "function" ? _ : constant(+_), arc) : startAngle;
-  };
-
-  arc.endAngle = function(_) {
-    return arguments.length ? (endAngle = typeof _ === "function" ? _ : constant(+_), arc) : endAngle;
-  };
-
-  arc.padAngle = function(_) {
-    return arguments.length ? (padAngle = typeof _ === "function" ? _ : constant(+_), arc) : padAngle;
-  };
-
-  arc.context = function(_) {
-    return arguments.length ? ((context = _ == null ? null : _), arc) : context;
-  };
-
-  return arc;
-}
-
-function array(x) {
-  return typeof x === "object" && "length" in x
-    ? x // Array, TypedArray, NodeList, array-like
-    : Array.from(x); // Map, Set, iterable, string, or anything else
-}
-
-function Linear(context) {
-  this._context = context;
-}
-
-Linear.prototype = {
-  areaStart: function() {
-    this._line = 0;
-  },
-  areaEnd: function() {
-    this._line = NaN;
-  },
-  lineStart: function() {
-    this._point = 0;
-  },
-  lineEnd: function() {
-    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
-    this._line = 1 - this._line;
-  },
-  point: function(x, y) {
-    x = +x, y = +y;
-    switch (this._point) {
-      case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;
-      case 1: this._point = 2; // falls through
-      default: this._context.lineTo(x, y); break;
-    }
-  }
-};
-
-function curveLinear(context) {
-  return new Linear(context);
-}
-
-function x(p) {
-  return p[0];
-}
-
-function y(p) {
-  return p[1];
-}
-
-function d3Line(x$1, y$1) {
-  var defined = constant(true),
-      context = null,
-      curve = curveLinear,
-      output = null,
-      path = withPath(line);
-
-  x$1 = typeof x$1 === "function" ? x$1 : (x$1 === undefined) ? x : constant(x$1);
-  y$1 = typeof y$1 === "function" ? y$1 : (y$1 === undefined) ? y : constant(y$1);
-
-  function line(data) {
-    var i,
-        n = (data = array(data)).length,
-        d,
-        defined0 = false,
-        buffer;
-
-    if (context == null) output = curve(buffer = path());
-
-    for (i = 0; i <= n; ++i) {
-      if (!(i < n && defined(d = data[i], i, data)) === defined0) {
-        if (defined0 = !defined0) output.lineStart();
-        else output.lineEnd();
-      }
-      if (defined0) output.point(+x$1(d, i, data), +y$1(d, i, data));
-    }
-
-    if (buffer) return output = null, buffer + "" || null;
-  }
-
-  line.x = function(_) {
-    return arguments.length ? (x$1 = typeof _ === "function" ? _ : constant(+_), line) : x$1;
-  };
-
-  line.y = function(_) {
-    return arguments.length ? (y$1 = typeof _ === "function" ? _ : constant(+_), line) : y$1;
-  };
-
-  line.defined = function(_) {
-    return arguments.length ? (defined = typeof _ === "function" ? _ : constant(!!_), line) : defined;
-  };
-
-  line.curve = function(_) {
-    return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;
-  };
-
-  line.context = function(_) {
-    return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;
-  };
-
-  return line;
-}
-
-/**  This class is used to render charts using SVG elements. */
-class SVGRenderer extends BaseRenderer {
-  /**
-   * The function sets the layout of a chart using D3 and SVG.
-   *
-   * @param {number} width - chart width
-   * @param {number} height - chart height
-   * @param {number} top - chart margin top
-   * @param {number} left - chart margin left
-   */
-  setLayout(width, height, top, left) {
-    d3Select(this.context)
-      .attr('width', width)
-      .attr('height', height)
-      .attr('viewBox', [0, 0, width, height])
-      .attr('style', 'display:block;max-width:100%;height:auto;')
-      .call((g) => {
-      g.append('g')
-        .attr('class', 'vega-chart-draw-g')
-        .attr('transform', `translate(${left},${top})`);
-    })
-      .call((g) => {
-      g.append('g')
-        .attr('class', 'vega-chart-legend-g')
-        .attr('transform', `translate(${left / 3},${top / 4})`);
-    });
-  }
-  /**
-   * This function draws a line on a chart using D3.js library.
-   *
-   * @param {ChartPosition} from - The starting position of the line to be drawn on the chart. It is an
-   * object with two properties: x and y, representing the x and y coordinates of the starting point respectively.
-   * @param {ChartPosition} to - The "to" parameter is a ChartPosition object that represents the ending
-   * point of the line to be drawn. It contains the x and y coordinates of the point on the chart where the line should end.
-   * @param {string} color - The color of the line
-   */
-  drawLine(from, to, color) {
-    d3Select(this.context)
-      .select('.vega-chart-draw-g')
-      .append('line')
-      .attr('x1', from.x)
-      .attr('y1', from.y)
-      .attr('x2', to.x)
-      .attr('y2', to.y)
-      .attr('stroke', color);
-  }
-  /**
-   * This function draws an x-axis on a chart using D3 and a given scale and end point.
-   *
-   * @param {ChartExtend<unknown>} extend - which is an object that contains information about the chart's scale and end position on the y-axis. The `scale` property
-   * is a D3 scale object that maps data values to pixel positions on the x-axis
-   * @param {string} color - The stroke color of axis
-   * @param {string} textStyle - The text style of the axis
-   */
-  drawXAxis(extend, color, textStyle) {
-    const { scale, end, labelFormatter, direction, height } = extend;
-    let axis = axisBottom(scale);
-    if (labelFormatter) {
-      axis = axis.tickFormat(labelFormatter);
-    }
-    d3Select(this.context)
-      .select('.vega-chart-draw-g')
-      .append('g')
-      .attr('class', 'vega-chart-x-axis')
-      .attr('transform', `translate(0, ${end.y})`)
-      .call(axis)
-      .call((g) => {
-      g.select('.domain').attr('stroke-width', 2).attr('stroke', color);
-    })
-      .call((g) => {
-      g.selectAll('line').attr('stroke', color);
-      g.selectAll('text').attr('style', textStyle);
-    })
-      .call((g) => {
-      if (direction === 'horizontal') {
-        g.selectAll('line').clone().attr('y2', `${-height}`);
-        g.select('.domain').attr('stroke-width', 0);
-      }
-    });
-  }
-  /**
-   * This function draws the Y-axis of a chart using D3 and a given scale.
-   *
-   * @param {ChartExtend<unknown>} extend -  It likely contains additional information or settings related to the chart being drawn, but without more context it's
-   * difficult to say exactly what it contains.
-   * @param {string} color - The stroke color of the axis
-   * @param {string} textStyle - The text style of the axis
-   */
-  drawYAxis(extend, color, textStyle) {
-    const { scale, labelFormatter, width, tickSize, direction } = extend;
-    let axis = axisLeft(scale).ticks(tickSize);
-    if (labelFormatter) {
-      axis = axis.tickFormat(labelFormatter);
-    }
-    d3Select(this.context)
-      .select('.vega-chart-draw-g')
-      .append('g')
-      .attr('class', 'vega-chart-y-axis')
-      .call(axis)
-      .call((g) => {
-      g.select('.domain').attr('stroke-width', 0).attr('stroke', color);
-    })
-      .call((g) => {
-      g.selectAll('line').attr('stroke-width', 2).attr('stroke', color);
-      g.selectAll('text').attr('style', textStyle);
-    })
-      .call((g) => {
-      if (direction !== 'horizontal') {
-        g.selectAll('line').clone().attr('x2', `${width}`);
-      }
-      else {
-        g.select('.domain').attr('stroke-width', 2).attr('stroke', color);
-      }
-    });
-  }
-  /**
-   * This function draws a circle with a given center, radius, and color using D3.js.
-   *
-   * @param {ChartPosition} center - ChartPosition, which is an object containing the x and y coordinates of the center of the circle.
-   * @param {number} radius - The radius parameter is a number that specifies the radius of the circle to be drawn.
-   * @param {string} fillColor - The color parameter is a string that represents the color of the circle to be drawn
-   * @param {number} strokeWidth - the border width
-   * @param {string} strokeColor - the border color
-   */
-  drawCircle(center, radius, fillColor, strokeWidth, strokeColor) {
-    d3Select(this.context)
-      .select('.vega-chart-draw-g')
-      .append(() => this.getCircleNode(center, radius, fillColor, strokeWidth, strokeColor));
-  }
-  /**
-   * This function draws text on a chart at a specified position using D3.js.
-   *
-   * @param {ChartPosition} position - ChartPosition is an object that contains the x and y coordinates where the text will be positioned on the chart.
-   * @param {string} text - The text parameter is a string that represents the text that will be
-   * displayed on the chart. It is the content that will be added to the text element created by this function.
-   * @param {string} textStyle - The text style of the axis
-   * @param {TextAnchorType} textAnchor - text anchor
-   * @param {number} rotate - rotate of the text
-   */
-  drawText(position, text, textStyle, textAnchor, rotate) {
-    d3Select(this.context)
-      .select('.vega-chart-draw-g')
-      .append(() => this.getTextNode(position, text, textStyle, textAnchor, rotate));
-  }
-  /**
-   * This function draws a legend item with a colored circle and text at a specified position on a chart.
-   *
-   * @param {ChartPosition} position - The position parameter is an object that contains the x and y
-   * coordinates where the legend should be placed on the chart.
-   * @param {string} text - The text to be displayed in the legend.
-   * @param {string} color - Background color token type, which is a type of color
-   * used in the chart's background.
-   * @param {string} textStyle - The text style of the axis
-   * @returns {SVGGElement} svg g element
-   */
-  drawLegend(position, text, color, textStyle) {
-    return d3Select(this.context)
-      .select('.vega-chart-legend-g')
-      .append('g')
-      .attr('class', 'vega-chart-legend-item')
-      .attr('data-legend', text)
-      .attr('transform', `translate(${position.x},${position.y})`)
-      .call((g) => {
-      g.append(() => this.getCircleNode({
-        x: -4,
-        y: -4,
-      }, 4, color));
-      g.append(() => this.getTextNode({ x: 8, y: 0 }, text, textStyle));
-    })
-      .node();
-  }
-  /**
-   * This function draws a rectangle with a specified position, width, height, and optional color using D3.js.
-   *
-   * @param {ChartPosition} position - The position parameter is an object that contains the x and y coordinates of the top-left corner of the rectangle.
-   * @param {number} width - The width of the rectangle to be drawn.
-   * @param {number} height - The height parameter is a number that represents the height of the rectangle to be drawn.
-   * @param {string} [color] - The color parameter is an optional string that represents the color of the rectangle to be drawn. If it is not provided, the rectangle will have no fill color.
-   */
-  drawRect(position, width, height, color) {
-    d3Select(this.context)
-      .select('.vega-chart-draw-g')
-      .append('rect')
-      .attr('fill', color)
-      .attr('x', position.x)
-      .attr('y', position.y)
-      .attr('width', width)
-      .attr('height', height);
-  }
-  /**
-   * This function draws a path on a chart using D3 and SVG based on the provided positions and color.
-   *
-   * @param {ChartPosition[]} positions - An array of ChartPosition objects that represent the
-   * coordinates of the points on the path to be drawn. Each ChartPosition object contains an x and y
-   * value that represent the position of the point on the chart.
-   * @param {string} color - line color
-   * represents a color value. It is likely used to specify the color of the path that will be drawn on the chart.
-   */
-  drawLinePath(positions, color) {
-    d3Select(this.context)
-      .select('.vega-chart-draw-g')
-      .append('path')
-      .attr('class', 'vega-chart-line-path')
-      .datum(positions)
-      .attr('fill', 'none')
-      .attr('stroke', color)
-      .attr('stroke-width', 3)
-      .attr('stroke-linecap', 'round')
-      .attr('stroke-linejoin', 'round')
-      .attr('d', d3Line()
-      .x((position) => position.x)
-      .y((position) => position.y));
-  }
-  /**
-   * This function draws an arc path using D3 library and applies color and radius based on input parameters.
-   *
-   * @param {ChartPosition} center - the arc center position
-   * @param {ArcPathItem} record - an object containing data for the arc path to be drawn
-   * @param {string} color - The color parameter
-   * and is used to set the fill color of the arc path.
-   * @param {number} outerRadius - The outer radius parameter is a number that determines the outer
-   * radius of the arc path being drawn.
-   * @param {number} innerRadius - The inner radius of the arc path, specified as a number.
-   * @returns {SVGPathElement} svg arc path element.
-   */
-  drawArcPath(center, record, color, outerRadius, innerRadius) {
-    return d3Select(this.context)
-      .select('.vega-chart-draw-g')
-      .append('path')
-      .datum(record)
-      .attr('class', 'vega-chart-arc-path')
-      .attr('data-name', (item) => item.data.name)
-      .attr('transform', `translate(${center.x},${center.y})`)
-      .attr('fill', color)
-      .attr('stroke-width', 0)
-      .attr('d', d3Arc().innerRadius(innerRadius).outerRadius(outerRadius))
-      .attr('data-d', d3Arc()
-      .innerRadius(innerRadius)
-      .outerRadius(outerRadius + 10))
-      .node();
-  }
-  /**
-   * This function clears all elements within two specific classes in a D3 selection.
-   */
-  clear() {
-    d3Select(this.context).selectAll('.vega-chart-draw-g').remove();
-    d3Select(this.context).selectAll('.vega-chart-legend-g').remove();
-  }
-  /**
-   * This TypeScript function creates and returns an SVG text element with the given position and text.
-   *
-   * @param {ChartPosition} position - The position parameter is an object that contains the x and y
-   * coordinates where the text element will be placed on the SVG canvas.
-   * @param {string} text - The text parameter is a string that represents the text content that will be
-   * displayed in the SVGTextElement.
-   * @param {string} textStyle - The text style of the axis
-   * @param {TextAnchorType} textAnchor - text anchor
-   * @param {number} rotate - rotate of the text
-   * @returns {SVGTextElement} an SVGTextElement node.
-   */
-  getTextNode(position, text, textStyle, textAnchor = 'start', rotate = 0) {
-    const TextSelectionType = d3Create('svg:text')
-      .attr('style', textStyle)
-      .attr('x', position.x)
-      .attr('y', position.y)
-      .attr('text-anchor', textAnchor)
-      .attr('rotate', rotate)
-      .text(text);
-    return TextSelectionType.node();
-  }
-  /**
-   * This TypeScript function creates an SVG circle element with a specified center, radius, and color.
-   *
-   * @param {ChartPosition} center - The center position of the circle on the chart, specified as an
-   * object with `x` and `y` properties.
-   * @param {number} radius - The radius parameter is a number that represents the radius of the circle
-   * to be created.
-   * @param {string} fillColor - The color parameter
-   * and is used to determine the fill color of the circle. It is likely an enum or string type that maps
-   * to a specific color value.
-   * @param {number} strokeWidth - the border width
-   * @param {string} strokeColor - the border color
-   * @returns {SVGCircleElement} an SVG circle element.
-   */
-  getCircleNode(center, radius, fillColor, strokeWidth, strokeColor) {
-    const circleSelection = d3Create('svg:circle')
-      .attr('r', radius)
-      .attr('cx', center.x)
-      .attr('cy', center.y)
-      .attr('fill', fillColor)
-      .attr('stroke-width', strokeWidth || 0)
-      .attr('stroke', strokeColor);
-    return circleSelection.node();
-  }
-}
-
-/**
- * The CanvasRenderer class is a TypeScript class that extends the BaseRenderer class and provides
- * methods for drawing various shapes and elements on a canvas.
- */
-class CanvasRenderer extends BaseRenderer {
-  /**
-   * The function sets the layout of a chart.
-   *
-   * @param {number} width - chart width
-   * @param {number} height - chart height
-   */
-  setLayout(width, height) {
-    this.context.width = width;
-    this.context.height = height;
-    this.context.style.display = 'block';
-    this.initCanvasContext2d();
-  }
-  /**
-   * The function `drawLine` takes two `ChartPosition` parameters and draws a line between them.
-   *
-   * @param {ChartPosition} from - The starting position of the line on the chart. It is of type ChartPosition.
-   * @param {ChartPosition} to - The "to" parameter in the "drawLine" function is a ChartPosition object
-   * that represents the end point of the line to be drawn. It contains information about the x and y
-   * coordinates of the point on the chart where the line should end.
-   */
-  drawLine(from, to) {
-    const context2d = this.getContext2d();
-    context2d.beginPath();
-    context2d.moveTo(from.x, from.y);
-    context2d.lineTo(to.x, to.y);
-    context2d.closePath();
-  }
-  /**
-   * This function draws the X-axis on a chart and takes in a parameter of type ChartExtend.
-   *
-   * @param {ChartExtend<unknown>} extend - The parameter "extend" is of type "ChartExtend" which is a generic type that can
-   * take any data type as an argument. It is likely used to extend or modify the properties of the chart's X-axis
-   */
-  drawXAxis(extend) {
-    this.drawLine(extend.start, extend.end);
-  }
-  /**
-   * This function draws the Y-axis on a chart.
-   *
-   * @param {ChartExtend<unknown>} extend - The parameter "extend" is of type ChartExtend, which is a generic type that
-   * represents the range of values for a chart axis. It contains information such as the minimum and
-   * maximum values for the axis
-   */
-  drawYAxis(extend) {
-    this.drawLine(extend.start, extend.end);
-  }
-  /**
-   * The function `drawCircle` takes in a center position, radius, and color and draws a circle.
-   *
-   * @param {ChartPosition} center - The center of the circle, represented by a ChartPosition object
-   * that contains the x and y coordinates of the center point.
-   * @param {number} radius - The _radius parameter is a number that represents the radius of the
-   * circle to be drawn. The radius is the distance from the center of the circle to any point on its circumference.
-   * @param {string} fillColor - The _color,
-   * which is a type that represents a color value that can be used as a background color for a chart element
-   * @param {number} strokeWidth - the border width
-   * @param {string} strokeColor - the border color
-   */
-  drawCircle(center, radius, fillColor, strokeWidth, strokeColor) {
-    const context2d = this.getContext2d();
-    if (strokeWidth && strokeColor) {
-      context2d.fillStyle = strokeColor;
-      context2d.beginPath();
-      context2d.arc(center.x, center.y, radius, 0, Math.PI * 2);
-      context2d.fill();
-    }
-    context2d.fillStyle = fillColor;
-    context2d.beginPath();
-    context2d.arc(center.x, center.y, radius - (strokeWidth || 0), 0, Math.PI * 2);
-    context2d.fill();
-  }
-  /**
-   * The function draws a legend on a chart with a circle and text at a specified position and color.
-   *
-   * @param {ChartPosition} position - ChartPosition is a type that represents the position of an
-   * element on a chart. It could be an object with properties like x and y coordinates or a string that
-   * represents a predefined position.
-   * @param {string} text - The text parameter is a string that represents the label or name of the
-   * legend that will be displayed on the chart.
-   * @param {string} color - color string
-   * represents a color for the legend. It could be a string or a number that corresponds to a specific
-   * color value.
-   * @returns {HTMLCanvasElement} chart canvas element
-   */
-  drawLegend(position, text, color) {
-    this.drawCircle(position, 4, color);
-    this.drawText(position, text);
-    return this.context;
-  }
-  /**
-   * The function `drawText` takes a position and a string of text as parameters and does not return anything.
-   *
-   * @param {ChartPosition} position - ChartPosition is a data type that represents the position of the
-   * text on a chart. It could be an object with properties such as x and y coordinates, or it could be
-   * a string that represents a pre-defined position on the chart (e.g. "top-left", "bottom-right",
-   * etc.).
-   * @param {string} text - The text parameter is a string that represents the text that needs to be drawn on the chart.
-   */
-  drawText(position, text) {
-    this.getContext2d().fillText(text, position.x, position.y);
-  }
-  /**
-   * The function `drawRect` takes in a position, width, height, and optional color parameter to draw a rectangle.
-   *
-   * @param {ChartPosition} position - The position parameter is of type ChartPosition and represents
-   * the position of the rectangle on the chart. It could be an object with x and y properties
-   * representing the coordinates of the top-left corner of the rectangle.
-   * @param {number} width - The width parameter is a number that represents the width of the rectangle
-   * to be drawn. It determines how wide the rectangle will be on the chart.
-   * @param {number} height - The `height` parameter in the `drawRect` function specifies the height of
-   * the rectangle to be drawn. It is a required parameter and must be a number value.
-   * @param {string} [color] - The color parameter is an optional parameter that
-   * specifies the background color of the rectangle. It is of type string, which is
-   * a custom type that represents a color token
-   */
-  drawRect(position, width, height, color) {
-    const context2d = this.getContext2d();
-    context2d.fillStyle = color;
-    context2d.fillRect(position.x, position.y, width, height);
-  }
-  /**
-   * The function `drawLinePath` takes in an array of `ChartPosition` objects and a `string` color and draws a path.
-   *
-   * @param {ChartPosition[]} positions - An array of ChartPosition objects that represent the
-   * coordinates of points on a chart. Each ChartPosition object has an x and y property that represent
-   * the horizontal and vertical position of the point on the chart.
-   * @param {string} color - The `color` parameter is of type
-   * `string` and represents the color of the path to be drawn. This parameter is
-   * used to set the background color of the chart.
-   */
-  drawLinePath(positions, color) {
-    const pathNode = d3Create('svg:path')
-      .datum(positions)
-      .attr('d', d3Line()
-      .x((position) => position.x)
-      .y((position) => position.y))
-      .node();
-    const path = new Path2D(pathNode.getAttribute('d'));
-    const context2d = this.getContext2d();
-    context2d.lineWidth = 3;
-    context2d.strokeStyle = color;
-    context2d.stroke(path);
-  }
-  /**
-   * This function draws an arc path using D3 library and applies color and radius based on input parameters.
-   *
-   * @param {ChartPosition} center - arc center position
-   * @param {ArcPathItem} record - an object containing data for the arc path to be drawn
-   * @param {string} color - The color parameter
-   * and is used to set the fill color of the arc path.
-   * @param {number} outerRadius - The outer radius parameter is a number that determines the outer
-   * radius of the arc path being drawn.
-   * @param {number} innerRadius - The inner radius of the arc path, specified as a number.
-   * @returns {HTMLCanvasElement} chart canvas element.
-   */
-  drawArcPath(center, record, color, outerRadius, innerRadius) {
-    const context2d = this.getContext2d();
-    context2d.beginPath();
-    context2d.moveTo(center.x, center.y);
-    context2d.arc(center.x, center.y, outerRadius, record.startAngle, record.endAngle);
-    context2d.fillStyle = color;
-    context2d.fill();
-    if (innerRadius) {
-      this.drawCircle(center, innerRadius, '#F0F3F7');
-    }
-    return this.context;
-  }
-  /**
-   * The function "clear"
-   */
-  clear() {
-    this.getContext2d().clearRect(0, 0, this.context.width, this.context.height);
-  }
-  /**
-   * This function initializes a 2D canvas context.
-   */
-  initCanvasContext2d() {
-    this.canvasContext2d = this.context.getContext('2d');
-  }
-  /**
-   * This function returns the canvas 2D rendering context and initializes it if it doesn't exist.
-   *
-   * @returns {CanvasRenderingContext2D} The function `getContext2d()` returns the `CanvasRenderingContext2D` object.
-   */
-  getContext2d() {
-    if (!this.canvasContext2d) {
-      this.initCanvasContext2d();
-    }
-    return this.canvasContext2d;
-  }
-}
-
-/** The RendererFactory class provides a static method to create a renderer based on the type of context provided. */
-class RendererFactory {
-  /**
-   * This function returns a renderer based on the type of context provided (SVG or Canvas).
-   *
-   * @param {SVGElement | HTMLCanvasElement} context - The `context` parameter is either an
-   * SVGElement or a HTMLCanvasElement. It is used to determine which renderer to instantiate and
-   * return
-   * @returns {BaseRenderer<SVGElement | HTMLCanvasElement> } based on the type of the `context` parameter. If
-   * the `context` is an instance of `SVGElement`, an `SVGRenderer` object is returned
-   */
-  static get(context) {
-    if (context instanceof SVGElement) {
-      return new SVGRenderer(context);
-    }
-    else if (context instanceof HTMLCanvasElement) {
-      return new CanvasRenderer(context);
-    }
-    else {
-      throw new Error('Invalid context');
-    }
-  }
-}
-
-/**
- * The function parses a string representing a pixel value to a number, or returns the input if it is already a number.
- *
- * @param {number | string} input - The input parameter can be either a number or a string. If it is a
- * string, it should be in the format of a CSS pixel value (e.g. "10px").
- * @returns {number} returns a number. If the input is already a number, it returns the input as is. If the input is a string, it attempts to extract a number from the
- * string by removing the 'px' suffix and converting the remaining string to a number. If the string
- * cannot be converted to a number, it returns 0.
- */
-function parsePixelStringToNumber(input) {
-  return typeof input === 'number'
-    ? input
-    : input && !isNaN(Number(input.replace('px', '')))
-      ? Number(input.replace('px', ''))
-      : 0;
-}
-/**
- * The function takes a number or string input and returns a string with 'px' appended if the input is a number.
- *
- * @param {number | string} input - The input parameter can be either a number or a string. If it is a
- * number, the function will convert it to a string and append the 'px' unit to it. If it is already a string, the function will simply return it as is.
- * @returns {string} returns a string that represents a CSS pixel value. If the input is a number, it concatenates the number with the string 'px'. If the input is already a
- * string, it returns the input string as is.
- */
-function parseNumberToPixelString(input) {
-  return typeof input === 'number' ? input + 'px' : input;
-}
-
-const DEFAULT_LAYOUT = {
-  width: undefined,
-  height: undefined,
-  margin: {
-    top: 30,
-    right: 30,
-    bottom: 30,
-    left: 30,
-  },
-};
-const DEFAULT_MARGIN_TOP_WITH_LEGENDS = 60;
-const DEFAULT_MARGIN_LEFT_WITH_AXIS = 60;
-/** The ChartDimensionController class contains methods for setting and retrieving the width and height of a chart container element. */
-class ChartDimensionController {
-  /**
-   * This is a constructor function that takes an HTMLElement as a parameter and assigns it to a private property called "container".
-   *
-   * @param {HTMLElement} container - The "container" parameter is a reference to an HTML element that
-   * will be used as a container for the component or module being constructed. This parameter is
-   * typically passed in during the instantiation of the component or module and is used to specify
-   * where the component or module should be rendered in the DOM.
-   */
-  constructor(container) {
-    this.container = container;
-  }
-  /**
-   * This function sets the width and height of a container element based on a given layout object. if the layout is null, then will not update,
-   * prevent the original style is changed
-   *
-   * @param {ChartLayout} layout - ChartLayout object that contains the width and height values for the chart container.
-   */
-  setContainerWidthAndHeight(layout) {
-    const { width, height } = layout;
-    if (width !== undefined) {
-      this.container.style.width = parseNumberToPixelString(width);
-    }
-    if (height !== undefined) {
-      this.container.style.height = parseNumberToPixelString(height);
-    }
-  }
-  /**
-   * This function returns the client width of a container or parses the width from a layout object.
-   *
-   * @param {ChartLayout} layout - In this function, the layout parameter is used to determine the width of the chart container. If the container's
-   * clientWidth property is not available,
-   * @returns {number} returning a number. The number is either the client width of the container element or the parsed width value from the `ChartLayout` object.
-   */
-  getContainerClientWidth(layout) {
-    return (this.container.clientWidth ||
-      parsePixelStringToNumber((layout === null || layout === void 0 ? void 0 : layout.width) || this.container.style.width));
-  }
-  /**
-   * This function returns the height of a container element in pixels, either by accessing its clientHeight property or by parsing a string value from the layout object.
-   *
-   * @param {ChartLayout} layout -  the layout parameter is used to determine the height of the chart container if it is not already set.
-   * @returns {number} The function `getContainerClientHeight` returns a number which represents the height of
-   * the container client or the parsed height value from the `ChartLayout` object.
-   */
-  getContainerClientHeight(layout) {
-    return (this.container.clientHeight ||
-      parsePixelStringToNumber((layout === null || layout === void 0 ? void 0 : layout.height) || this.container.style.height));
-  }
-  /**
-   * This function calculates the inner width of a chart container by subtracting the left and right margins from the client width.
-   *
-   * @param {ChartLayout} layout - ChartLayout object that contains information about the chart layout,
-   * including the container width and margin.
-   * @returns {number} the inner width of a container element, which is calculated by subtracting the left and
-   * right margins from the client width of the container.
-   */
-  getContainerInnerWidth(layout) {
-    const width = this.getContainerClientWidth(layout);
-    const { left, right } = ((layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin);
-    return width ? width - right - left : 0;
-  }
-  /**
-   * This function calculates the inner height of a chart container by subtracting the top and bottom margins from the client height.
-   *
-   * @param {ChartLayout} layout - The `layout` parameter is an object of type `ChartLayout` which
-   * contains information about the layout of a chart, including its dimensions and margins.
-   * @returns {number} the inner height of a container element, which is calculated by subtracting the top and
-   * bottom margins from the client height of the container. The returned value is a number.
-   */
-  getContainerInnerHeight(layout) {
-    const height = this.getContainerClientHeight(layout);
-    const { top, bottom } = ((layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin);
-    return height ? height - top - bottom : 0;
-  }
-  /**
-   * This function merges a given chart layout with default values and returns the updated layout.
-   *
-   * @param {string} chartName - A string representing the name of the chart.
-   * @param {ChartLayout} layout - The `layout` parameter is an optional object that contains properties
-   * for the width, height, and margin of a chart. If provided, it will be merged with the default
-   * layout settings to create a new layout object. If not provided, the default layout settings will be
-   * used.
-   * @param {boolean} hasLegends - A boolean value indicating whether the chart has legends or not.
-   * @returns {ChartLayout} a ChartLayout object.
-   */
-  mergeLayout(chartName, layout, hasLegends) {
-    const defaultTop = hasLegends ? DEFAULT_MARGIN_TOP_WITH_LEGENDS : DEFAULT_LAYOUT.margin.top;
-    const defaultLeft = chartName === 'VEGA-LINE-CHART' || chartName === 'VEGA-BAR-CHART'
-      ? DEFAULT_MARGIN_LEFT_WITH_AXIS
-      : DEFAULT_LAYOUT.margin.left;
-    const newLayout = {
-      width: layout && layout.width ? layout.width : DEFAULT_LAYOUT.width,
-      height: layout && layout.height ? layout.height : DEFAULT_LAYOUT.height,
-      margin: Object.assign({}, DEFAULT_LAYOUT.margin, { top: defaultTop, left: defaultLeft }, layout && layout.margin ? layout.margin : {}),
-    };
-    return newLayout;
-  }
-}
-
-/**
- * This is a TypeScript code that defines an abstract class `BaseInteractor` with a generic type `T` that extends either `SVGElement` or `HTMLCanvasElement`.
- */
-class BaseInteractor {
-  /**
-   * This is a constructor function that takes a parameter of type T and sets it as a protected property called "context".
-   *
-   * @param {SVGElement | HTMLCanvasElement} context - The "context" parameter is a protected property of a class constructor that is
-   * of type "T". It is used to store a reference to an object or data that is required by the class
-   * methods to perform their tasks. The "protected" keyword means that the property can only be
-   * accessed within the class
-   */
-  constructor(context) {
-    this.context = context;
-    this.interactingEntryForEventRegistry = new Map();
-    this.interactingEntryForDrawerRegistry = new WeakMap();
-  }
-  /**
-   * This function registers an interacting entry with a drawer, draw piece, and event type in an interactor registry.
-   *
-   * @param {BaseDrawer<unknown>} drawer - The drawer parameter is an instance of a class that extends the BaseDrawer class,
-   * which is used for drawing on a canvas or other graphical surface.
-   * @param {DrawPiece} drawPiece - DrawPiece is a type that represents a specific piece that can be
-   * drawn on a canvas or other graphical surface. It could include information such as the shape,
-   * color, size, and position of the piece.
-   * @param {InteractingEntry} interactingEntry - InteractingEntry is a data structure that represents
-   * an interaction between a user and a graphical element on the screen. It contains information such
-   * as the type of event that triggered the interaction (e.g. mouse click, touch)
-   */
-  register(drawer, drawPiece, interactingEntry) {
-    /* eslint-disable @typescript-eslint/no-non-null-assertion */
-    const eventType = interactingEntry.eventType;
-    if (!this.interactingEntryForEventRegistry.get(eventType)) {
-      this.interactingEntryForEventRegistry.set(eventType, []);
-    }
-    this.interactingEntryForEventRegistry.get(eventType).push(interactingEntry);
-    if (!this.interactingEntryForDrawerRegistry.get(drawer)) {
-      this.interactingEntryForDrawerRegistry.set(drawer, new WeakMap());
-    }
-    if (!this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece)) {
-      this.interactingEntryForDrawerRegistry.get(drawer).set(drawPiece, []);
-    }
-    this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece).push(interactingEntry);
-    /* eslint-enable @typescript-eslint/no-non-null-assertion */
-  }
-  /**
-   * This function unregisters a drawer from the interactor registry.
-   *
-   * @param {BaseDrawer<unknown>} drawer - The parameter `drawer` is of type `BaseDrawer<unknown>`. It is an object that
-   * represents a drawer and is used to unregister the drawer from the `interactorRegistry`. The
-   * `interactorRegistry` is a `WeakMap` that stores a mapping between an `Interactor` and
-   */
-  unregisterByDrawer(drawer) {
-    /* eslint-disable @typescript-eslint/no-non-null-assertion */
-    const drawPiece = drawer.drawPiece;
-    if (drawPiece &&
-      this.interactingEntryForDrawerRegistry.has(drawer) &&
-      this.interactingEntryForDrawerRegistry.get(drawer) &&
-      this.interactingEntryForDrawerRegistry.get(drawer).has(drawPiece) &&
-      this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece)) {
-      this.interactingEntryForEventRegistry.forEach((value, key) => {
-        this.interactingEntryForEventRegistry.set(key, value.filter((interactingEntry) => {
-          return (this.interactingEntryForDrawerRegistry
-            .get(drawer)
-            .get(drawPiece)
-            .indexOf(interactingEntry) < 0);
-        }));
-      });
-      /* eslint-enable @typescript-eslint/no-non-null-assertion */
-    }
-    this.interactingEntryForDrawerRegistry.delete(drawer);
-  }
-  /**
-   * This function handles mouse events for registered interactor and drawers.
-   *
-   * @param {EventType} eventType - The type of event being registered in the registry, such as "click" or "mousemove".
-   * @param {MouseEvent} event - The `event` parameter is of type `MouseEvent`, which represents a
-   * mouse-related event (such as a click, double-click, or mouse movement) that occurred on the web
-   * page. It contains information about the event, such as the type of event, the target element that
-   * triggered the event
-   */
-  callRegistry(eventType, event) {
-    const interactingEntryArray = this.interactingEntryForEventRegistry.get(eventType);
-    if (interactingEntryArray) {
-      interactingEntryArray.forEach((interactingEntry) => {
-        if (interactingEntry.shouldHandle(event)) {
-          interactingEntry.handle(event);
-        }
-      });
-    }
-  }
-}
-
-/**
- * The CanvasInteractor class extends the BaseInteractor class and provides empty methods for handling mouse move, click, and hover events on a HTML canvas element.
- */
-class CanvasInteractor extends BaseInteractor {
-}
-
-/**
- *  The SVGInteractor class extends the BaseInteractor class and provides methods for handling mouse events on SVG elements.
- */
-class SVGInteractor extends BaseInteractor {
-  /**
-   * This is a constructor function that adds event listeners for click and mouseover events to an SVG element.
-   *
-   * @param {SVGElement} context - The context parameter is an SVGElement, which is the element that the
-   * constructor is being called on. It is used to add event listeners to the element for mouseover and
-   * click events.
-   */
-  constructor(context) {
-    super(context);
-    this.addContextListener();
-  }
-  /**
-   * This function adds event listeners for click and mouseover events to the context element and calls
-   * a registry function with the corresponding event type and event object.
-   */
-  addContextListener() {
-    this.context.addEventListener('click', (event) => {
-      this.callRegistry('click', event);
-    });
-    this.context.addEventListener('mouseover', (event) => {
-      this.callRegistry('mouseover', event);
-    });
-  }
-}
-
-/** The InteractorFactory class provides a static method to create and return an appropriate interactor based on the type of context provided. */
-class InteractorFactory {
-  /**
-   * This function returns a BaseInteractor object based on the type of context passed in (SVGElement or HTMLCanvasElement).
-   *
-   * @param {SVGElement | HTMLCanvasElement} context - The `context` parameter is either an SVGElement
-   * or an HTMLCanvasElement. It is used to determine which type of interactor to create and return. If
-   * the context is an SVGElement, an instance of SVGInteractor is returned. If the context is an
-   * HTMLCanvasElement, an instance of
-   * @returns {BaseInteractor<SVGElement | HTMLCanvasElement>} A `BaseInteractor` object that is either an instance of `SVGInteractor` or
-   * `CanvasInteractor`, depending on the type of the `context` parameter passed to the `get` method.
-   */
-  static get(context) {
-    if (context instanceof SVGElement) {
-      return new SVGInteractor(context);
-    }
-    else if (context instanceof HTMLCanvasElement) {
-      return new CanvasInteractor(context);
-    }
-    else {
-      throw new Error('Invalid context');
-    }
-  }
-}
-
-/** This is a TypeScript class called `BaseChart` that serves as a base class for creating charts */
-class BaseChart {
-  /**
-   * This is a constructor function that initializes a chart with options and creates a chain of drawers for rendering.
-   *
-   * @param {ChartOptions<unknown>} options - generic type that represents the configuration options for the chart
-   */
-  constructor(options) {
-    this.options = options;
-    this.isLayoutSet = false;
-    this.drawers = [];
-    const context = GraphContextFactory.get(options.mode, options.container.shadowRoot ? options.container.shadowRoot : options.container);
-    this.dimensionController = new ChartDimensionController(options.container);
-    this.renderer = RendererFactory.get(context);
-    this.interactor = InteractorFactory.get(context);
-    this.initLayoutOptions(options);
-  }
-  /**
-   * The function clears the renderer.
-   */
-  clear() {
-    this.renderer.clear();
-  }
-  /**
-   * This function updates the chart options, creates a new drawer chain, resets the layout, and renders the chart.
-   *
-   * @param {ChartOptions<unknown>} options - ChartOptions<T> is a generic type that represents the configuration options for a
-   * chart. It can include properties such as the chart type, data, labels, colors, and other stylingoptions
-   */
-  updateOptions(options) {
-    this.initLayoutOptions(options);
-    this.isLayoutSet = false;
-    this.render();
-  }
-  /**
-   * re render the chart using existing options
-   */
-  reRender() {
-    this.updateOptions(this.options);
-  }
-  /**
-   * sets the layout if it hasn't been set yet, and executes all the drawers. unregister the interactor by drawer
-   */
-  render() {
-    this.unregisterByDrawer();
-    this.drawers = this.createDrawerChain(this.renderer, this.interactor);
-    this.clear();
-    if (!this.isLayoutSet) {
-      this.setLayout();
-      this.isLayoutSet = true;
-    }
-    this.drawers.forEach((drawer) => drawer.execute());
-  }
-  /**
-   * sets the layout of a renderer using the options provided.
-   */
-  setLayout() {
-    const layout = this.options.layout;
-    const width = this.dimensionController.getContainerClientWidth(layout), height = this.dimensionController.getContainerClientHeight(layout), margin = (layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin;
-    this.renderer.setLayout(width, height, margin.top, margin.left);
-  }
-  /**
-   * This function initializes layout options for a chart.
-   *
-   * @param {ChartOptions} options - ChartOptions<T> is a generic type that represents the configuration options for a
-   * chart. It includes properties such as data, layout, and style.
-   */
-  initLayoutOptions(options) {
-    const newLayout = this.dimensionController.mergeLayout(options.container.tagName, options.layout, options.legends && options.legends.length ? true : false);
-    this.options = Object.assign(options, { layout: newLayout });
-    this.dimensionController.setContainerWidthAndHeight(newLayout);
-    this.options.container.style.display = 'block';
-  }
-  /**
-   * This function un-registers drawers from the interactor.
-   */
-  unregisterByDrawer() {
-    if (this.drawers) {
-      this.drawers.forEach((drawer) => {
-        this.interactor.unregisterByDrawer(drawer);
-      });
-    }
-  }
-}
-
-/* This file is generated by vega-design 2.0.77 */
-/* eslint-disable */
-/* tslint:disable */
-// prettier-ignore
-const BackgroundColorsMappingLight = {
-  "bg-brand": "#33393D",
-  "bg-page": "#F0F3F7",
-  "bg-primary": "#FCFCFC",
-  "bg-secondary": "#F5F7F7",
-  "bg-tertiary": "#F0F3F7",
-  "bg-quaternary": "#F1F8FB",
-  "bg-inverted-primary": "#04041C",
-  "bg-inverted-secondary": "#121227",
-  "bg-inverted-tertiary": "#181830",
-  "bg-inverted-quaternary": "#464765",
-  "bg-action": "#1362E2",
-  "bg-action-hover": "#0470EC",
-  "bg-action-focus": "#1362E2",
-  "bg-action-active": "#1D41C3",
-  "bg-action-quaternary": "#DEE1E3",
-  "bg-action-quaternary-hover": "#EFEFEF",
-  "bg-action-quaternary-active": "#CDD1D3",
-  "bg-action-secondary": "#FCFCFC",
-  "bg-action-secondary-hover": "#0470EC",
-  "bg-action-secondary-active": "#1D41C3",
-  "bg-action-tertiary": "#000000",
-  "bg-action-tertiary-hover": "#04041C",
-  "bg-action-tertiary-active": "#04041C",
-  "bg-app-header": "#F0F3F7",
-  "bg-backdrop-modal": "#121227",
-  "bg-backdrop-popover": "#203645",
-  "bg-backdrop-sidebar": "#121227",
-  "bg-chip": "#203645",
-  "bg-chip-hover": "#203645",
-  "bg-chip-active": "#203645",
-  "bg-danger": "#BD2947",
-  "bg-danger-hover": "#E94768",
-  "bg-danger-focus": "#BD2947",
-  "bg-danger-active": "#E63257",
-  "bg-danger-tertiary": "#000000",
-  "bg-danger-tertiary-hover": "#FF5772",
-  "bg-danger-tertiary-active": "#BD2947",
-  "bg-disabled": "#B0B4B5",
-  "bg-divider": "#ABC6D8",
-  "bg-divider-secondary": "#C7D9E5",
-  "bg-keypad-btn-active": "#E5EFFF",
-  "bg-loading-progress": "#99C0FF",
-  "bg-loading-track": "#E5EFFF",
-  "bg-segment-hover": "#CDD1D3",
-  "bg-segment-control": "#596063",
-  "bg-selected": "#0097FF",
-  "bg-sidebar": "#121227",
-  "bg-sidebar-icon": "#BCBAD5",
-  "bg-sidebar-icon-hover": "#121227",
-  "bg-sidebar-icon-selected": "#FCFCFC",
-  "bg-sidebar-item-hover": "#FCFCFC",
-  "bg-sidebar-item-selected": "#1362E2",
-  "bg-site-footer": "#33393D",
-  "bg-site-footer-action": "#ABC6D8",
-  "bg-site-footer-action-hover": "#C7D9E5",
-  "bg-site-footer-action-active": "#8FB3CB",
-  "bg-site-footer-field": "#596063",
-  "bg-slider-handle": "#FCFCFC",
-  "bg-status-error": "#FF6E8B",
-  "bg-status-info": "#CDD1D3",
-  "bg-status-success": "#A0E9A7",
-  "bg-status-warning": "#FFDC83",
-  "bg-tab": "#F0F3F7",
-  "bg-tab-hover": "#F5F7F7",
-  "bg-tab-selected": "#203645",
-  "bg-table-alt-row": "#F5F7F7",
-  "bg-table-header": "#F0F3F7",
-  "bg-table-row-hover": "#F1F8FB",
-  "bg-table-row-selected-expanded": "#E5EFFF",
-  "bg-table-selected-row": "#CCDFFF",
-  "bg-textarea-count": "#04041C",
-  "bg-tile": "#FCFCFC",
-  "bg-tile-hover": "#F5F7F7",
-  "bg-tile-selected": "#F2F7FF",
-  "bg-tile-selected-hover": "#E5EFFF",
-  "bg-toggle-switch": "#6B747D",
-  "bg-toggle-switch-hover": "#6B747D",
-  "bg-toggle-switch-selected-disabled": "#99C0FF",
-  "bg-transparent": "#000000",
-  "bg-accent1-primary": "#73E6DC",
-  "bg-accent1-secondary": "#C1F4EF",
-  "bg-accent1-tertiary": "#E0F9F7",
-  "bg-accent2-primary": "#806BFF",
-  "bg-accent2-secondary": "#C7BDFF",
-  "bg-accent2-tertiary": "#E3DEFF",
-  "bg-accent3-primary": "#FFDC83",
-  "bg-accent3-secondary": "#FFEFC8",
-  "bg-accent3-tertiary": "#FFF7E3",
-  "bg-accent4-primary": "#FF9571",
-  "bg-accent4-secondary": "#FFD0C0",
-  "bg-accent4-tertiary": "#FFE7DF",
-  "bg-accent5-primary": "#00BBFF",
-  "bg-accent5-secondary": "#8EDFF9",
-  "bg-accent5-tertiary": "#E3F7FD",
-  "bg-accent6-primary": "#FF82C9",
-  "bg-accent6-secondary": "#FFC7E7",
-  "bg-accent6-tertiary": "#FFE3F3",
-  "bg-accent7-primary": "#259F9F",
-  "bg-accent7-secondary": "#9BD4D6",
-  "bg-accent7-tertiary": "#D0EFEF",
-  "bg-accent8-primary": "#563D82",
-  "bg-accent8-secondary": "#C7A2CC",
-  "bg-accent8-tertiary": "#E6D6EA",
-  "bg-accent9-primary": "#FFBF3F",
-  "bg-accent9-secondary": "#FED78E",
-  "bg-accent9-tertiary": "#FBE2B9",
-  "bg-accent10-primary": "#ED7A23",
-  "bg-accent10-secondary": "#F19255",
-  "bg-accent10-tertiary": "#F5BB94",
-  "bg-date-picker-range": "#E5EFFF"
-};
-
-const CHART_DEFAULT_COLORS = [
-  'bg-accent1-primary',
-  'bg-accent2-primary',
-  'bg-accent3-primary',
-  'bg-accent4-primary',
-  'bg-accent5-primary',
-  'bg-accent6-primary',
-  'bg-accent7-primary',
-  'bg-accent8-primary',
-  'bg-accent9-primary',
-  'bg-accent10-primary',
-];
-const DEFAULT_FONT_FAMILY = 'font-family:"Inter", sans-serif;';
-const FONTSTYLEMAPPING = Object.keys(Typography).reduce((result, key) => {
-  result[key] =
-    DEFAULT_FONT_FAMILY +
-      Typography[key].filter((str) => str.indexOf('@apply') < 0).join(';');
-  return result;
-}, { 'v-text-secondary': `color:rgba(107, 116, 125, 1);` });
-/**
- * base drawer that provides a common structure for drawing charts using a renderer and options.
- */
-class BaseDrawer {
-  /**
-   * This is a constructor function that takes in a renderer and options for a chart drawer.
-   *
-   * @param {BaseRenderer<SVGElement | HTMLCanvasElement>} renderer - `renderer` parameter is an instance of a `BaseRenderer` class that can render either SVG elements or a 2D canvas context
-   * @param {BaseInteractor<SVGElement | HTMLCanvasElement>} interactor - `renderer` parameter is an instance of a `BaseInteractor` class
-   * @param {ChartDrawerOptions<unknown>} options - where `T` is a generic type parameter. This parameter contains various options that can be used to customize the chart being drawn
-   */
-  constructor(renderer, interactor, options) {
-    this.renderer = renderer;
-    this.interactor = interactor;
-    this.options = options;
-  }
-  /**
-   * The function executes a draw method.
-   */
-  execute() {
-    const drawPiece = this.draw();
-    this.drawPiece = drawPiece;
-    this.addInteractionSupport(drawPiece);
-  }
-  /**
-   * returns a color token based on an index and an optional array of colors.
-   *
-   * @param {number} index - The index parameter is a number that represents the index of the color to be returned from the colors array.
-   * @param {BackgroundColorsTokenType[]} [colors] - `colors` is an optional parameter of type `BackgroundColorsTokenType[]`
-   * @returns {BackgroundColorsTokenType} color token
-   */
-  getColorByIndex(index, colors) {
-    colors = colors && colors.length ? colors : CHART_DEFAULT_COLORS;
-    index = index % colors.length;
-    return colors[index];
-  }
-  /**
-   * This function takes a token representing a background color and returns the corresponding color value from a predefined mapping.
-   *
-   * @param {BackgroundColorsTokenType} token - a string representing the token for a background color
-   * @returns {string} The string value returned is the color code
-   */
-  getColorFromToken(token) {
-    return BackgroundColorsMappingLight[token];
-  }
-  /**
-   * The function takes a token as input and returns the corresponding CSS style text from a predefined mapping.
-   *
-   * @param {string} token - The `token` parameter is a string that represents a specific style mapping
-   * in the `FONTSTYLEMAPPING` object. The function returns the CSS style text associated with the given `token`.
-   * @returns {string} a string that represents the CSS style associated with the input token. If the input token
-   * matches a key in the `FONTSTYLEMAPPING` object, the corresponding CSS style string is returned.
-   */
-  getStyleTextFromToken(token) {
-    return token
-      .split(' ')
-      .map((item) => FONTSTYLEMAPPING[item])
-      .join(';');
-  }
-}
-
-/** The code is defining an abstract class called `InteractingEntryGenerator` with a generic type `T`. This class is responsible for generating an `InteractingEntry` object based on the provided options. */
-class InteractingEntryGenerator {
-  /**
-   * The function generates an InteractingEntry object based on the provided options.
-   *
-   * @param {unknown} options - The `options` parameter is a generic type `T` that represents the options or configuration for the `generate` function. It can be any type that you define when calling the `generate` function.
-   * @returns {InteractingEntry} An object of type InteractingEntry is being returned.
-   */
-  generate(options) {
-    return {
-      eventType: this.eventType,
-      shouldHandle: this.createShouldHandle(options),
-      handle: this.createHandle(options),
-    };
-  }
-}
-
-/** The PieLegendHoverGenerator class generates an InteractingEntry object that handles mouseover events on a legend of a D3 pie chart and triggers a mouseover event on the corresponding path element. */
-class PieLegendHoverGenerator extends InteractingEntryGenerator {
-  constructor() {
-    super(...arguments);
-    this.eventType = 'mouseover';
-  }
-  /**
-   * The function "createShouldHandle" returns a function that takes an event as a parameter and returns a boolean value.
-   *
-   * @returns {InteractingEntry['shouldHandle']} A function that takes an event as an argument and returns a boolean value.
-   */
-  createShouldHandle() {
-    return this.shouldHandle;
-  }
-  /**
-   * The function "createHandle" returns the handle property of an InteractingEntry object.
-   *
-   * @param {LegendInputType} options the legend render options
-   * @returns {InteractingEntry['handle']} The `handle` property of the `InteractingEntry` object is being returned.
-   */
-  createHandle(options) {
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    return (event) => {
-      this.handle(event, options);
-    };
-  }
-  /**
-   * This function checks if a mouse event should be handled based on whether the target or its parent element has a specific class.
-   *
-   * @param {MouseEvent} event - MouseEvent is a type of event that is triggered by a mouse action, such
-   * as clicking, hovering, or scrolling. It contains information about the event, such as the target
-   * element and the position of the mouse.
-   * @returns {boolean} A boolean value is being returned. The method `shouldHandle` checks if the target element
-   * or its parent element has a class of `vega-chart-legend-item` and returns `true` if it does, and
-   * `false` otherwise.
-   */
-  shouldHandle(event) {
-    var _a;
-    const target = event.target;
-    const currentTarget = event.currentTarget;
-    const container = currentTarget.parentElement && currentTarget.parentElement.nodeType !== 11
-      ? currentTarget.parentElement
-      : currentTarget.parentNode['host'];
-    return (container.tagName === 'VEGA-PIE-CHART' &&
-      (target.classList.contains('vega-chart-legend-item') ||
-        !!((_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('vega-chart-legend-item'))));
-  }
-  /**
-   * The function handles a mouse event on a legend and triggers a mouseover event on the corresponding path element in a D3 chart.
-   *
-   * @param {MouseEvent} event - The event parameter is a MouseEvent, which represents a user action
-   * (such as a click or hover) on a specific element in the DOM.
-   * @param {LegendInputType} options - LegendInputType is a custom type that likely contains
-   * information about the data being displayed in the chart, such as the names of the categories or
-   * series being plotted. It may also include information about the chart's appearance or behavior,
-   * such as the colors or labels used in the legend. Without more information about
-   */
-  handle(event, options) {
-    var _a;
-    const svgSelection = d3Select(event.currentTarget);
-    const target = event.target;
-    const targetTextNode = target.tagName === 'text'
-      ? target
-      : target.tagName === 'circle'
-        ? target.nextElementSibling
-        : target.querySelector('text');
-    const name = targetTextNode ? targetTextNode.textContent : '';
-    const index = name ? options.data.indexOf(name) : 0;
-    const paths = svgSelection
-      .selectAll(`path.vega-chart-arc-path`)
-      .nodes();
-    (_a = paths[index]) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-  }
-}
-
-/** The LegendDrawer class draws circles and text for each legend in a chart. */
-class LegendDrawer extends BaseDrawer {
-  constructor() {
-    super(...arguments);
-    this.pieLegendHoverGenerator = new PieLegendHoverGenerator();
-  }
-  /**
-   * This function adds interaction support to a chart by registering it with an interactor and providing a hover generator.
-   *
-   * @param {(SVGGElement | HTMLCanvasElement)[]} drawPiece - `drawPiece` is a parameter of type array
-   * that contains either `SVGGElement` or `HTMLCanvasElement` elements. It is used as a callback
-   * function to draw the legend items on the chart.
-   */
-  addInteractionSupport(drawPiece) {
-    var _a;
-    if ((_a = this.options.renderOptions.data) === null || _a === void 0 ? void 0 : _a.length) {
-      this.interactor.register(this, drawPiece, this.pieLegendHoverGenerator.generate(this.options.renderOptions));
-    }
-  }
-  /**
-   * This function draws a legend on a chart using input options.
-   *
-   * @returns {(SVGGElement | HTMLCanvasElement)[]}  draw piece
-   */
-  draw() {
-    const { data = [], colors, position, width } = this.options.renderOptions;
-    const options = this.getChartLegendOptions(data, colors, position);
-    if (options) {
-      const longestLegendLength = getLongestTextLengthFromArray(data);
-      return options.legends.map((legend, index) => {
-        const position = this.getLegendPosition(options.position, index, longestLegendLength, width);
-        return this.renderer.drawLegend(position, legend.field, legend.color, this.getStyleTextFromToken('v-font-footnote2-short'));
-      });
-    }
-  }
-  /**
-   * This function takes in an array of strings and an optional position parameter, and returns an object containing legend options for a chart.
-   *
-   * @param {string[]} data - an array of strings representing the legend labels
-   * @param {BackgroundColorsTokenType[]} [colors] - bg color token array
-   * @param {ChartPosition} [position] - The `position` parameter is an optional parameter of type
-   * `ChartPosition` which specifies the x and y coordinates of the chart legend on the chart. If it is
-   * not provided, the default position is `{x: 10, y: 0}`.
-   * @returns {ChartLegendOptions | undefined} an object of type `ChartLegendOptions`.
-   */
-  getChartLegendOptions(data, colors, position) {
-    if (data && data.length) {
-      position = position ? Object.assign({ x: 10, y: 0 }, position) : { x: 10, y: 0 };
-      const legendsMap = {
-        position,
-        legends: data.map((text, index) => {
-          return {
-            field: text,
-            color: this.getColorFromToken(this.getColorByIndex(index, colors)),
-            icon: '',
-          };
-        }),
-      };
-      return legendsMap;
-    }
-  }
-  /**
-   * This function calculates the position of a legend on a chart based on its index and the chart layout.
-   *
-   * @param {ChartPosition} position - The initial position of the legend on the chart, with x and y coordinates.
-   * @param {number} index - The index parameter is a number that represents the index of the legend item in the array of legends. It is used to calculate the position of the legend item on the chart.
-   * @param {number} longestTextLength - text length
-   * @param {number} width - chart width
-   * @returns {ChartPosition} an object of type `ChartPosition` with `x` and `y` properties.
-   */
-  getLegendPosition(position, index, longestTextLength, width) {
-    const maxWidth = width;
-    if (maxWidth) {
-      const restWidth = maxWidth - position.x;
-      const singleWidth = longestTextLength * 7 + 24;
-      const singleHeight = 18;
-      const column = Math.max(Number((restWidth / singleWidth).toFixed(0)), 1);
-      const row = parseInt((index / column).toString());
-      const x = position.x + singleWidth * (index % column);
-      const y = position.y + row * singleHeight;
-      return { x, y };
-    }
-    return { x: 0, y: 0 };
-  }
-}
-
-/** The LayoutInputProcessor class processes input chart options to calculate layout dimensions and margins. */
-class LayoutInputProcessor {
-  /**
-   * This function processes chart options and returns layout dimensions and margins.
-   *
-   * @param {ChartOptions<unknown>} input - A ChartOptions object containing the container and layout properties.
-   * @returns {LayoutProcessResultType} An object with properties `width`, `height`, `innerWidth`, `innerHeight`, `top`, `right`,
-   * `bottom`, and `left`.
-   */
-  process(input) {
-    const { container, layout } = input;
-    const { top, right, bottom, left } = ((layout === null || layout === void 0 ? void 0 : layout.margin) ||
-      DEFAULT_LAYOUT.margin);
-    const dimensionController = new ChartDimensionController(container);
-    return {
-      width: dimensionController.getContainerClientWidth(layout),
-      height: dimensionController.getContainerClientHeight(layout),
-      innerWidth: dimensionController.getContainerInnerWidth(layout),
-      innerHeight: dimensionController.getContainerInnerHeight(layout),
-      top,
-      right,
-      bottom,
-      left,
-    };
-  }
-}
-
-/** The `ProcessorChain` class takes an array of input processors, processes input through them, and returns the final output. */
-class ProcessorChain {
-  /**
-   * This is a constructor function that takes an array of input processors as a parameter.
-   *
-   * @param {InputProcessor<unknown, unknown, unknown>[]} processors - The `processors` parameter is a
-   * private property of the class that is of type `InputProcessor` which is an interface that takes
-   * three type parameters - `Input`, `Output`, and `Context`. It is an array of instances of classes
-   * that implement the `InputProcessor` interface. These processors are
-   */
-  constructor(processors) {
-    this.processors = processors;
-  }
-  /**
-   * This function processes input through a series of processors and returns the final output.
-   *
-   * @param {unknown} input - The input parameter is of type unknown, which means it can be any type of
-   * value. It is the data that will be processed by the processors.
-   * @returns {unknown} the output of the last processor in the `this.processors` array.
-   */
-  process(input) {
-    let previousOutput;
-    for (const processor of this.processors) {
-      previousOutput = processor.process(input, previousOutput);
-    }
-    return previousOutput;
-  }
-}
-
-/** The `LegendInputProcessor` class processes chart options and previous layout results to generate a legend input object for a line chart. */
-class LegendInputProcessor {
-  /**
-   * This function takes in chart options and previous layout results, and returns a legend input object with data, colors, position, width, and height properties.
-   *
-   *  @param {ChartOptions<LineChartDataType>} input - The input parameter is an object of type ChartOptions that contains the data and
-   * configuration options for a line chart.
-   * @param {LayoutProcessResultType} previousOutput - `previousOutput` is an optional parameter of
-   * type `LayoutProcessResultType` that represents the output of the previous layout process. It is
-   * used to retrieve the width and height of the chart, which are needed to properly position the
-   * legend. If no previous output is provided, the width and height will
-   * @returns {LegendInputType} an object of type `LegendInputType`. The object contains the following properties:
-   * - `data`: an array of legend items
-   * - `colors`: an array of colors used in the chart
-   * - `position`: an object with `x` and `y` properties representing the position of the legend
-   * - `width`: the width of the chart
-   * - `height`: the
-   */
-  process(input, previousOutput) {
-    const { colors, legends = [] } = input;
-    const { width, height } = previousOutput;
-    return {
-      data: legends,
-      colors,
-      position: { x: 10, y: 10 },
-      width,
-      height,
-    };
-  }
-}
-
-export { BaseDrawer as B, InteractingEntryGenerator as I, LayoutInputProcessor as L, ProcessorChain as P, BaseChart as a, LegendInputProcessor as b, LegendDrawer as c, constant$1 as d, color as e, interpolateRgb as f, interpolateString as g, array as h, interpolateNumber as i, constant as j, d3Select as k, tau as t };