@d3plus/docs 3.0.0-alpha.3

package/args/core/charts/Sankey.args.jsx

@@ -0,0 +1,248 @@
+// 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 vizArgTypes} from "./Viz.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {Sankey as D3plusSankey} from "@d3plus/react";
+export const Sankey = ({ config }) => <D3plusSankey config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Sankey
+   */
+  Object.keys(vizArgTypes)
+    .filter(k => !k.match(/^(zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Sankey-specific methods
+   */
+  
+  {
+    hover: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    links: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "d => d[\"links\"]",
+      description: "= []",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"links\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "array"
+      }
+    },
+    linksSource: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "source",
+      table: {
+        defaultValue: {
+          summary: "source"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    linksTarget: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "target",
+      table: {
+        defaultValue: {
+          summary: "target"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    noDataMessage: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    nodeAlign: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "sankeyAligns.justify",
+      table: {
+        defaultValue: {
+          summary: "sankeyAligns.justify"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    nodeId: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"id\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"id\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    nodePadding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 8,
+      table: {
+        defaultValue: {
+          summary: 8
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    nodeWidth: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 30,
+      table: {
+        defaultValue: {
+          summary: 30
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    nodes: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "d => d[\"nodes\"]",
+      description: "= []",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"nodes\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "array"
+      }
+    },
+    on: {
+      control: {
+        type: "text"
+      },
+      defaultValue: {
+        mouseenter: "() => {\n  }",
+        "mouseleave.shape": "() => {\n  this.hover(false);\n}",
+        "mousemove.shape": "(d, i, x, event) => {\n  defaultMouseMove(d, i, x, event);\n  if (this._focus && this._focus === d.id) {\n      this.hover(false);\n      this._on.mouseenter.bind(this)(d, i, x, event);\n      this._focus = undefined;\n  } else {\n      const id = this._nodeId(d, i), node = this._nodeLookup[id], nodeLookup = Object.keys(this._nodeLookup).reduce((all, item)=>{\n          all[this._nodeLookup[item]] = !isNaN(item) ? parseInt(item, 10) : item;\n          return all;\n      }, {});\n      const links = this._linkLookup[node];\n      const filterIds = [\n          id\n      ];\n      links.forEach((l)=>{\n          filterIds.push(nodeLookup[l]);\n      });\n      this.hover((h, x)=>{\n          if (h.source && h.target) {\n              return h.source.id === id || h.target.id === id;\n          } else {\n              return filterIds.includes(this._nodeId(h, x));\n          }\n      });\n  }\n}"
+      },
+      table: {
+        defaultValue: {
+          summary: {
+            mouseenter: "() => {\n  }",
+            "mouseleave.shape": "() => {\n  this.hover(false);\n}",
+            "mousemove.shape": "(d, i, x, event) => {\n  defaultMouseMove(d, i, x, event);\n  if (this._focus && this._focus === d.id) {\n      this.hover(false);\n      this._on.mouseenter.bind(this)(d, i, x, event);\n      this._focus = undefined;\n  } else {\n      const id = this._nodeId(d, i), node = this._nodeLookup[id], nodeLookup = Object.keys(this._nodeLookup).reduce((all, item)=>{\n          all[this._nodeLookup[item]] = !isNaN(item) ? parseInt(item, 10) : item;\n          return all;\n      }, {});\n      const links = this._linkLookup[node];\n      const filterIds = [\n          id\n      ];\n      links.forEach((l)=>{\n          filterIds.push(nodeLookup[l]);\n      });\n      this.hover((h, x)=>{\n          if (h.source && h.target) {\n              return h.source.id === id || h.target.id === id;\n          } else {\n              return filterIds.includes(this._nodeId(h, x));\n          }\n      });\n  }\n}"
+          }
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Rect",
+      table: {
+        defaultValue: {
+          summary: "Rect"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    shapeConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign(this._shapeConfig, {Path: {fill: none, hoverStyle: {stroke-width: (d) => Math.max(1, Math.abs(d.source.y1 - d.source.y0) * (d.value / d.source.value) - 2)}, label: false, stroke: #DBDBDB, strokeOpacity: 0.5, strokeWidth: (d) => Math.max(1, Math.abs(d.source.y1 - d.source.y0) * (d.value / d.source.value) - 2)}, Rect: {}})",
+      table: {
+        defaultValue: {
+          detail: "assign(this._shapeConfig, {Path: {fill: none, hoverStyle: {stroke-width: (d) => Math.max(1, Math.abs(d.source.y1 - d.source.y0) * (d.value / d.source.value) - 2)}, label: false, stroke: #DBDBDB, strokeOpacity: 0.5, strokeWidth: (d) => Math.max(1, Math.abs(d.source.y1 - d.source.y0) * (d.value / d.source.value) - 2)}, Rect: {}})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    value: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 1,
+      table: {
+        defaultValue: {
+          summary: 1
+        }
+      },
+      type: {
+        required: true,
+        summary: "function | number"
+      }
+    }
+  }
+);

package/args/core/charts/StackedArea.args.jsx

@@ -0,0 +1,26 @@
+// 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 areaArgTypes} from "../shapes/Area.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {StackedArea as D3plusStackedArea} from "@d3plus/react";
+export const StackedArea = ({ config }) => <D3plusStackedArea config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Area primitive and
+   * overrides any defaults that have been changed in StackedArea
+   */
+  Object.keys(areaArgTypes)
+    .filter(k => !k.match(/^(shape|zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = areaArgTypes[k], obj), {}),
+
+  /**
+   * StackedArea-specific methods
+   */
+  
+  {}
+);

package/args/core/charts/Tree.args.jsx

@@ -0,0 +1,88 @@
+// 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 vizArgTypes} from "./Viz.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {Tree as D3plusTree} from "@d3plus/react";
+export const Tree = ({ config }) => <D3plusTree config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Tree
+   */
+  Object.keys(vizArgTypes)
+    .filter(k => !k.match(/^(zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Tree-specific methods
+   */
+  
+  {
+    orient: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "vertical",
+      description: "Accepts either \"vertical\" or \"horizontal\".",
+      table: {
+        defaultValue: {
+          summary: "vertical"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    separation: {
+      control: {},
+      defaultValue: "(a, b) => a.parent === b.parent ? 1 : 2",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => a.parent === b.parent ? 1 : 2",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Circle",
+      table: {
+        defaultValue: {
+          summary: "Circle"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    shapeConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign(this._shapeConfig, {ariaLabel: (d, i) => this._treeData ? `${this._treeData.i.depth}. ${this._drawLabel(d, i)}.` : , labelConfig: {fontColor: #444}, Path: {fill: none, stroke: #ccc, strokeWidth: 1}, r: 5, width: 10, height: 10})",
+      table: {
+        defaultValue: {
+          detail: "assign(this._shapeConfig, {ariaLabel: (d, i) => this._treeData ? `${this._treeData.i.depth}. ${this._drawLabel(d, i)}.` : , labelConfig: {fontColor: #444}, Path: {fill: none, stroke: #ccc, strokeWidth: 1}, r: 5, width: 10, height: 10})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    }
+  }
+);

package/args/core/charts/Treemap.args.jsx

@@ -0,0 +1,181 @@
+// 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 vizArgTypes} from "./Viz.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {Treemap as D3plusTreemap} from "@d3plus/react";
+export const Treemap = ({ config }) => <D3plusTreemap config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Treemap
+   */
+  Object.keys(vizArgTypes)
+    .filter(k => !k.match(/^(shape|zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Treemap-specific methods
+   */
+  
+  {
+    layoutPadding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 1,
+      table: {
+        defaultValue: {
+          summary: 1
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    legend: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "(config, arr) => {\n  if (arr.length === this._filteredData.length) return false;\n  return defaultLegend.bind(this)(config, arr);\n}",
+      table: {
+        defaultValue: {
+          detail: "(config, arr) => {\n  if (arr.length === this._filteredData.length) return false;\n  return defaultLegend.bind(this)(config, arr);\n}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    legendSort: {
+      control: {},
+      defaultValue: "(a, b) => this._sum(b) - this._sum(a)",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => this._sum(b) - this._sum(a)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function"
+      }
+    },
+    legendTooltip: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign({}, this._legendTooltip, {tbody: [\n\n]})",
+      table: {
+        defaultValue: {
+          summary: "assign({}, this._legendTooltip, {tbody: [\n\n]})"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    shapeConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign({}, this._shapeConfig, {ariaLabel: (d, i) => {\n  const rank = this._rankData ? `${this._rankData.indexOf(d) + 1}. ` : \"\";\n  return `${rank}${this._drawLabel(d, i)}, ${this._sum(d, i)}.`;\n}, labelConfig: {fontMax: 32, fontMin: 8, fontResize: true, padding: 5}})",
+      table: {
+        defaultValue: {
+          detail: "assign({}, this._shapeConfig, {ariaLabel: (d, i) => {\n  const rank = this._rankData ? `${this._rankData.indexOf(d) + 1}. ` : \"\";\n  return `${rank}${this._drawLabel(d, i)}, ${this._sum(d, i)}.`;\n}, labelConfig: {fontMax: 32, fontMin: 8, fontResize: true, padding: 5}})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    sort: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "(a, b) => {\n  const aggA = isAggregated(a);\n  const aggB = isAggregated(b);\n  return aggA && !aggB ? 1 : !aggA && aggB ? -1 : b.value - a.value;\n}",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => {\n  const aggA = isAggregated(a);\n  const aggB = isAggregated(b);\n  return aggA && !aggB ? 1 : !aggA && aggB ? -1 : b.value - a.value;\n}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array"
+      }
+    },
+    sum: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "d => d[\"value\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"value\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    thresholdKey: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "this._sum",
+      table: {
+        defaultValue: {
+          summary: "this._sum"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    tile: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "treemapSquarify",
+      table: {
+        defaultValue: {
+          summary: "treemapSquarify"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | function"
+      }
+    },
+    tooltipConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign({}, this._tooltipConfig, {tbody: [\n[\n() => this._translate(Share),\n(d, i, x) => `${formatAbbreviate(x.share * 100, this._locale)}%`\n]\n]})",
+      table: {
+        defaultValue: {
+          detail: "assign({}, this._tooltipConfig, {tbody: [\n[\n() => this._translate(Share),\n(d, i, x) => `${formatAbbreviate(x.share * 100, this._locale)}%`\n]\n]})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    }
+  }
+);