@d3plus/docs 3.0.0-alpha.3

package/args/core/charts/Viz.args.jsx

@@ -0,0 +1,1383 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+import {argTypes as baseClassArgTypes} from "../utils/BaseClass.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {Viz as D3plusViz} from "@d3plus/react";
+export const Viz = ({ config }) => <D3plusViz config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the BaseClass primitive and
+   * overrides any defaults that have been changed in Viz
+   */
+  Object.keys(baseClassArgTypes)
+    .reduce((obj, k) => (obj[k] = baseClassArgTypes[k], obj), {}),
+
+  /**
+   * Viz-specific methods
+   */
+  
+  {
+    active: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    aggs: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{}",
+      table: {
+        defaultValue: {
+          summary: "{}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    ariaHidden: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    attribution: {
+      control: {
+        type: "htmlstring"
+      },
+      defaultValue: false,
+      description: "= false",
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: true,
+        summary: "htmlstring | boolean"
+      }
+    },
+    attributionStyle: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{background: rgba(255, 255, 255, 0.75), border: 1px solid rgba(0, 0, 0, 0.25), color: rgba(0, 0, 0, 0.75), display: block, font: `400 11px/11px ${fontFamilyStringify(fontFamily)}`, margin: 5px, opacity: 0.75, padding: 4px 6px 3px}",
+      table: {
+        defaultValue: {
+          summary: "{background: rgba(255, 255, 255, 0.75), border: 1px solid rgba(0, 0, 0, 0.25), color: rgba(0, 0, 0, 0.75), display: block, font: `400 11px/11px ${fontFamilyStringify(fontFamily)}`, margin: 5px, opacity: 0.75, padding: 4px 6px 3px}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    backConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fontSize: 10, padding: 5, resize: false}",
+      table: {
+        defaultValue: {
+          summary: "{fontSize: 10, padding: 5, resize: false}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    cache: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    color: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "(d, i) => this._groupBy.0(d, i)",
+      table: {
+        defaultValue: {
+          detail: "(d, i) => this._groupBy.0(d, i)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string | false"
+      }
+    },
+    colorScale: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string | false"
+      }
+    },
+    colorScaleConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{axisConfig: {rounding: inside}, scale: jenks}",
+      table: {
+        defaultValue: {
+          summary: "{axisConfig: {rounding: inside}, scale: jenks}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    colorScaleMaxSize: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 600,
+      table: {
+        defaultValue: {
+          summary: 600
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    colorScalePadding: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "defaultPadding",
+      table: {
+        defaultValue: {
+          summary: "defaultPadding"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    colorScalePosition: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "() => this._width > this._height * 1.5 ? right : bottom",
+      table: {
+        defaultValue: {
+          detail: "() => this._width > this._height * 1.5 ? right : bottom",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string | boolean"
+      }
+    },
+    data: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "[\n\n]",
+      description: "= []",
+      table: {
+        defaultValue: {
+          summary: "[\n\n]"
+        }
+      },
+      type: {
+        required: true,
+        summary: "array | string"
+      }
+    },
+    dataCutoff: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 100,
+      table: {
+        defaultValue: {
+          summary: 100
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    depth: {
+      control: {
+        type: "number"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    detectResize: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      description: "= true",
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: true,
+        summary: "boolean"
+      }
+    },
+    detectResizeDelay: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 400,
+      description: "= 400",
+      table: {
+        defaultValue: {
+          summary: 400
+        }
+      },
+      type: {
+        required: true,
+        summary: "number"
+      }
+    },
+    detectVisible: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      description: "= true",
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: true,
+        summary: "boolean"
+      }
+    },
+    detectVisibleInterval: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 1000,
+      description: "= 1000",
+      table: {
+        defaultValue: {
+          summary: 1000
+        }
+      },
+      type: {
+        required: true,
+        summary: "number"
+      }
+    },
+    discrete: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    downloadButton: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    downloadConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{type: png}",
+      table: {
+        defaultValue: {
+          summary: "{type: png}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    downloadPosition: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "top",
+      table: {
+        defaultValue: {
+          summary: "top"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    duration: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 600,
+      table: {
+        defaultValue: {
+          summary: 600
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    filter: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    fontFamily: {
+      control: {},
+      defaultValue: "fontFamily",
+      table: {
+        defaultValue: {
+          summary: "fontFamily"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    groupBy: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "[\nd => d[\"id\"]\n]",
+      table: {
+        defaultValue: {
+          detail: "[\nd => d[\"id\"]\n]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | function | array"
+      }
+    },
+    height: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "window.innerHeight",
+      table: {
+        defaultValue: {
+          summary: "window.innerHeight"
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    hiddenColor: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "#aaa",
+      table: {
+        defaultValue: {
+          summary: "#aaa"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    hiddenOpacity: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 0.5,
+      table: {
+        defaultValue: {
+          summary: 0.5
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    hover: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    labelPosition: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "\"auto\"",
+      table: {
+        defaultValue: {
+          summary: "\"auto\""
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    legend: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "(config, arr) => {\n  const maxGrouped = max(arr, (d, i)=>{\n      const id = this._groupBy[this._legendDepth].bind(this)(d, i);\n      return id instanceof Array ? id.length : 1;\n  });\n  return arr.length > 1 && maxGrouped <= 2;\n}",
+      table: {
+        defaultValue: {
+          detail: "(config, arr) => {\n  const maxGrouped = max(arr, (d, i)=>{\n      const id = this._groupBy[this._legendDepth].bind(this)(d, i);\n      return id instanceof Array ? id.length : 1;\n  });\n  return arr.length > 1 && maxGrouped <= 2;\n}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    legendConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{label: legendLabel.bind(this), shapeConfig: {ariaLabel: legendLabel.bind(this), labelConfig: {fontColor: undefined, fontResize: false, padding: 0}}}",
+      table: {
+        defaultValue: {
+          summary: "{label: legendLabel.bind(this), shapeConfig: {ariaLabel: legendLabel.bind(this), labelConfig: {fontColor: undefined, fontResize: false, padding: 0}}}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    legendFilterInvert: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    legendPadding: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "defaultPadding",
+      table: {
+        defaultValue: {
+          summary: "defaultPadding"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    legendPosition: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "() => this._width > this._height * 1.5 ? right : bottom",
+      table: {
+        defaultValue: {
+          detail: "() => this._width > this._height * 1.5 ? right : bottom",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    legendSort: {
+      control: {},
+      defaultValue: "(a, b) => this._drawLabel(a).localeCompare(this._drawLabel(b))",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => this._drawLabel(a).localeCompare(this._drawLabel(b))",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function"
+      }
+    },
+    legendTooltip: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{}",
+      table: {
+        defaultValue: {
+          summary: "{}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    loadingHTML: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "() => `\n    <div style=\"left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);\">\n      <strong>${this._translate(Loading Visualization)}</strong>\n      <sub style=\"bottom: 0; display: block; line-height: 1; margin-top: 5px;\"><a href=\"https://d3plus.org\" target=\"_blank\">${this._translate(Powered by D3plus)}</a></sub>\n    </div>`",
+      table: {
+        defaultValue: {
+          detail: "() => `\n    <div style=\"left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);\">\n      <strong>${this._translate(Loading Visualization)}</strong>\n      <sub style=\"bottom: 0; display: block; line-height: 1; margin-top: 5px;\"><a href=\"https://d3plus.org\" target=\"_blank\">${this._translate(Powered by D3plus)}</a></sub>\n    </div>`",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    loadingMessage: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    messageMask: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "rgba(0, 0, 0, 0.05)",
+      table: {
+        defaultValue: {
+          summary: "rgba(0, 0, 0, 0.05)"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | string"
+      }
+    },
+    messageStyle: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{bottom: 0, left: 0, position: absolute, right: 0, text-align: center, top: 0}",
+      table: {
+        defaultValue: {
+          summary: "{bottom: 0, left: 0, position: absolute, right: 0, text-align: center, top: 0}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    noDataHTML: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "() => `\n    <div style=\"left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);\">\n      <strong>${this._translate(No Data Available)}</strong>\n    </div>`",
+      table: {
+        defaultValue: {
+          detail: "() => `\n    <div style=\"left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);\">\n      <strong>${this._translate(No Data Available)}</strong>\n    </div>`",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    noDataMessage: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    on: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "{click.shape: clickShape.bind(this), click.legend: clickLegend.bind(this), mouseenter: mouseenter.bind(this), mouseleave: mouseleave.bind(this), mousemove.shape: mousemoveShape.bind(this), mousemove.legend: mousemoveLegend.bind(this)}",
+      table: {
+        defaultValue: {
+          summary: "{click.shape: clickShape.bind(this), click.legend: clickLegend.bind(this), mouseenter: mouseenter.bind(this), mouseleave: mouseleave.bind(this), mousemove.shape: mousemoveShape.bind(this), mousemove.legend: mousemoveLegend.bind(this)}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    parent: {
+      control: {
+        type: "object"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    render: {
+      control: {},
+      description: "An optional callback function that, if passed, will be called after animation is complete.",
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    resizeContainer: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "typeofwindow === undefined ?  : window",
+      table: {
+        defaultValue: {
+          summary: "typeofwindow === undefined ?  : window"
+        }
+      },
+      type: {
+        required: true,
+        summary: "string | htmlelement"
+      }
+    },
+    scrollContainer: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "typeofwindow === undefined ?  : window",
+      table: {
+        defaultValue: {
+          summary: "typeofwindow === undefined ?  : window"
+        }
+      },
+      type: {
+        required: true,
+        summary: "string | htmlelement"
+      }
+    },
+    select: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | htmlelement"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Rect",
+      table: {
+        defaultValue: {
+          summary: "Rect"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    shapeConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{ariaLabel: (d, i) => this._drawLabel(d, i), fill: (d, i) => {\n  while(d.__d3plus__ && d.data){\n      d = d.data;\n      i = d.i;\n  }\n  if (this._colorScale) {\n      const c = this._colorScale(d, i);\n      if (c !== undefined && c !== null) {\n          const scale = this._colorScaleClass._colorScale;\n          const colors = this._colorScaleClass.color();\n          if (!scale) return colors instanceof Array ? colors[colors.length - 1] : colors;\n          else if (!scale.domain().length) return scale.range()[scale.range().length - 1];\n          return scale(c);\n      }\n  }\n  const c = this._color(d, i);\n  if (color(c)) return c;\n  return colorAssign(typeof c === \"string\" ? c : JSON.stringify(c), this._colorDefaults);\n}, labelConfig: {fontColor: (d, i) => {\n  const c = typeof this._shapeConfig.fill === \"function\" ? this._shapeConfig.fill(d, i) : this._shapeConfig.fill;\n  return colorContrast(c);\n}}, opacity: 1, stroke: (d, i) => {\n  const c = typeof this._shapeConfig.fill === \"function\" ? this._shapeConfig.fill(d, i) : this._shapeConfig.fill;\n  return color(c).darker(0.25);\n}, role: presentation, strokeWidth: 0}",
+      table: {
+        defaultValue: {
+          detail: "{ariaLabel: (d, i) => this._drawLabel(d, i), fill: (d, i) => {\n  while(d.__d3plus__ && d.data){\n      d = d.data;\n      i = d.i;\n  }\n  if (this._colorScale) {\n      const c = this._colorScale(d, i);\n      if (c !== undefined && c !== null) {\n          const scale = this._colorScaleClass._colorScale;\n          const colors = this._colorScaleClass.color();\n          if (!scale) return colors instanceof Array ? colors[colors.length - 1] : colors;\n          else if (!scale.domain().length) return scale.range()[scale.range().length - 1];\n          return scale(c);\n      }\n  }\n  const c = this._color(d, i);\n  if (color(c)) return c;\n  return colorAssign(typeof c === \"string\" ? c : JSON.stringify(c), this._colorDefaults);\n}, labelConfig: {fontColor: (d, i) => {\n  const c = typeof this._shapeConfig.fill === \"function\" ? this._shapeConfig.fill(d, i) : this._shapeConfig.fill;\n  return colorContrast(c);\n}}, opacity: 1, stroke: (d, i) => {\n  const c = typeof this._shapeConfig.fill === \"function\" ? this._shapeConfig.fill(d, i) : this._shapeConfig.fill;\n  return color(c).darker(0.25);\n}, role: presentation, strokeWidth: 0}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    subtitle: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    subtitleConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{ariaHidden: true, fontSize: 12, padding: 5, resize: false, textAnchor: middle}",
+      table: {
+        defaultValue: {
+          summary: "{ariaHidden: true, fontSize: 12, padding: 5, resize: false, textAnchor: middle}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    subtitlePadding: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "defaultPadding",
+      table: {
+        defaultValue: {
+          summary: "defaultPadding"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    svgDesc: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "",
+      table: {
+        defaultValue: {
+          summary: ""
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    svgTitle: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "",
+      table: {
+        defaultValue: {
+          summary: ""
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    threshold: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 0.0001,
+      table: {
+        defaultValue: {
+          summary: 0.0001
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    thresholdKey: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "undefined",
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    thresholdName: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "() => this._translate(Values)",
+      table: {
+        defaultValue: {
+          detail: "() => this._translate(Values)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    time: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    timeFilter: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    timeline: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    timelineConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{brushing: false, padding: 5}",
+      table: {
+        defaultValue: {
+          summary: "{brushing: false, padding: 5}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    timelineDefault: {
+      control: {
+        type: "date"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "date | string | array"
+      }
+    },
+    timelinePadding: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "defaultPadding",
+      table: {
+        defaultValue: {
+          summary: "defaultPadding"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    title: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    titleConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{ariaHidden: true, fontSize: 16, padding: 5, resize: false, textAnchor: middle}",
+      table: {
+        defaultValue: {
+          summary: "{ariaHidden: true, fontSize: 16, padding: 5, resize: false, textAnchor: middle}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    titlePadding: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "defaultPadding",
+      table: {
+        defaultValue: {
+          summary: "defaultPadding"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    tooltip: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    tooltipConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{pointerEvents: none, titleStyle: {max-width: 200px}}",
+      table: {
+        defaultValue: {
+          summary: "{pointerEvents: none, titleStyle: {max-width: 200px}}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    total: {
+      control: {
+        type: "boolean"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function | string"
+      }
+    },
+    totalConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fontSize: 10, padding: 5, resize: false, textAnchor: middle}",
+      table: {
+        defaultValue: {
+          summary: "{fontSize: 10, padding: 5, resize: false, textAnchor: middle}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    totalFormat: {
+      control: {},
+      defaultValue: "(d) => `${this._translate(Total)}: ${formatAbbreviate(d, this._locale)}`",
+      table: {
+        defaultValue: {
+          detail: "(d) => `${this._translate(Total)}: ${formatAbbreviate(d, this._locale)}`",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function"
+      }
+    },
+    totalPadding: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "defaultPadding",
+      table: {
+        defaultValue: {
+          summary: "defaultPadding"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    width: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "window.innerWidth",
+      table: {
+        defaultValue: {
+          summary: "window.innerWidth"
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    zoom: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: false,
+      description: "= false",
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: true,
+        summary: "boolean"
+      }
+    },
+    zoomBrushHandleSize: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 1,
+      description: "= 1",
+      table: {
+        defaultValue: {
+          summary: 1
+        }
+      },
+      type: {
+        required: true,
+        summary: "number"
+      }
+    },
+    zoomBrushHandleStyle: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fill: #444}",
+      table: {
+        defaultValue: {
+          summary: "{fill: #444}"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object | boolean"
+      }
+    },
+    zoomBrushSelectionStyle: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fill: #777, stroke-width: 0}",
+      table: {
+        defaultValue: {
+          summary: "{fill: #777, stroke-width: 0}"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object | boolean"
+      }
+    },
+    zoomControlStyle: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{background: rgba(255, 255, 255, 0.75), border: 1px solid rgba(0, 0, 0, 0.75), color: rgba(0, 0, 0, 0.75), display: block, font: `900 15px/21px ${fontFamilyStringify(fontFamily)}`, height: 20px, margin: 5px, opacity: 0.75, padding: 0, text-align: center, width: 20px}",
+      table: {
+        defaultValue: {
+          summary: "{background: rgba(255, 255, 255, 0.75), border: 1px solid rgba(0, 0, 0, 0.75), color: rgba(0, 0, 0, 0.75), display: block, font: `900 15px/21px ${fontFamilyStringify(fontFamily)}`, height: 20px, margin: 5px, opacity: 0.75, padding: 0, text-align: center, width: 20px}"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object | boolean"
+      }
+    },
+    zoomControlStyleActive: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{background: rgba(0, 0, 0, 0.75), color: rgba(255, 255, 255, 0.75), opacity: 1}",
+      table: {
+        defaultValue: {
+          summary: "{background: rgba(0, 0, 0, 0.75), color: rgba(255, 255, 255, 0.75), opacity: 1}"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object | boolean"
+      }
+    },
+    zoomControlStyleHover: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{cursor: pointer, opacity: 1}",
+      table: {
+        defaultValue: {
+          summary: "{cursor: pointer, opacity: 1}"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object | boolean"
+      }
+    },
+    zoomFactor: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 2,
+      description: "= 2",
+      table: {
+        defaultValue: {
+          summary: 2
+        }
+      },
+      type: {
+        required: true,
+        summary: "number"
+      }
+    },
+    zoomMax: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 16,
+      description: "= 16",
+      table: {
+        defaultValue: {
+          summary: 16
+        }
+      },
+      type: {
+        required: true,
+        summary: "number"
+      }
+    },
+    zoomPadding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 20,
+      description: "= 20",
+      table: {
+        defaultValue: {
+          summary: 20
+        }
+      },
+      type: {
+        required: true,
+        summary: "number"
+      }
+    },
+    zoomPan: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      description: "= true",
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: true,
+        summary: "boolean"
+      }
+    },
+    zoomScroll: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    }
+  }
+);