@d3plus/docs 3.0.0-alpha.3

package/args/core/charts/LinePlot.args.jsx

@@ -0,0 +1,57 @@
+// 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 plotArgTypes} from "./Plot.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {LinePlot as D3plusLinePlot} from "@d3plus/react";
+export const LinePlot = ({ config }) => <D3plusLinePlot config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Plot primitive and
+   * overrides any defaults that have been changed in LinePlot
+   */
+  Object.keys(plotArgTypes)
+    .filter(k => !k.match(/^(shape|zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = plotArgTypes[k], obj), {}),
+
+  /**
+   * LinePlot-specific methods
+   */
+  
+  {
+    discrete: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "x",
+      table: {
+        defaultValue: {
+          summary: "x"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Line",
+      table: {
+        defaultValue: {
+          summary: "Line"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    }
+  }
+);

package/args/core/charts/Matrix.args.jsx

@@ -0,0 +1,194 @@
+// 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 {Matrix as D3plusMatrix} from "@d3plus/react";
+export const Matrix = ({ config }) => <D3plusMatrix config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Matrix
+   */
+  Object.keys(vizArgTypes)
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Matrix-specific methods
+   */
+  
+  {
+    cellPadding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 2,
+      table: {
+        defaultValue: {
+          summary: 2
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    column: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"column\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"column\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | function"
+      }
+    },
+    columnConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign({orient: top}, defaultAxisConfig)",
+      table: {
+        defaultValue: {
+          summary: "assign({orient: top}, defaultAxisConfig)"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object"
+      }
+    },
+    columnList: {
+      control: {
+        type: "array"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array"
+      }
+    },
+    columnSort: {
+      control: {},
+      defaultValue: "(a, b) => `${a}`.localeCompare(`${b}`)",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => `${a}`.localeCompare(`${b}`)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "(d, i) => `${getProp.bind(this)(row, d, i)} / ${getProp.bind(this)(column, d, i)}`",
+      table: {
+        defaultValue: {
+          detail: "(d, i) => `${getProp.bind(this)(row, d, i)} / ${getProp.bind(this)(column, d, i)}`",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    on: {
+      control: {
+        type: "text"
+      },
+      defaultValue: {
+        "mousemove.shape": "(d, i, x, event) => {\n  defaultMouseMoveShape(d, i, x, event);\n  const row = getProp.bind(this)(\"row\", d, i);\n  const column = getProp.bind(this)(\"column\", d, i);\n  this.hover((h, ii)=>getProp.bind(this)(\"row\", h, ii) === row || getProp.bind(this)(\"column\", h, ii) === column);\n}"
+      },
+      table: {
+        defaultValue: {
+          summary: {
+            "mousemove.shape": "(d, i, x, event) => {\n  defaultMouseMoveShape(d, i, x, event);\n  const row = getProp.bind(this)(\"row\", d, i);\n  const column = getProp.bind(this)(\"column\", d, i);\n  this.hover((h, ii)=>getProp.bind(this)(\"row\", h, ii) === row || getProp.bind(this)(\"column\", h, ii) === column);\n}"
+          }
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    row: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"row\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"row\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | function"
+      }
+    },
+    rowConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign({orient: left}, defaultAxisConfig)",
+      table: {
+        defaultValue: {
+          summary: "assign({orient: left}, defaultAxisConfig)"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object"
+      }
+    },
+    rowList: {
+      control: {
+        type: "array"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array"
+      }
+    },
+    rowSort: {
+      control: {},
+      defaultValue: "(a, b) => `${a}`.localeCompare(`${b}`)",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => `${a}`.localeCompare(`${b}`)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    }
+  }
+);

package/args/core/charts/Network.args.jsx

@@ -0,0 +1,310 @@
+// 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 {Network as D3plusNetwork} from "@d3plus/react";
+export const Network = ({ config }) => <D3plusNetwork config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Network
+   */
+  Object.keys(vizArgTypes)
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Network-specific methods
+   */
+  
+  {
+    hover: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    linkSize: {
+      control: {
+        type: "name"
+      },
+      defaultValue: 1,
+      table: {
+        defaultValue: {
+          summary: 1
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | name"
+      }
+    },
+    linkSizeMin: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 1,
+      table: {
+        defaultValue: {
+          summary: 1
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    linkSizeScale: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "sqrt",
+      table: {
+        defaultValue: {
+          summary: "sqrt"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    links: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "[\n\n]",
+      description: "= []",
+      table: {
+        defaultValue: {
+          summary: "[\n\n]"
+        }
+      },
+      type: {
+        required: true,
+        summary: "array | string"
+      }
+    },
+    noDataMessage: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    nodeGroupBy: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "[\nd => d[\"id\"]\n]",
+      table: {
+        defaultValue: {
+          detail: "[\nd => d[\"id\"]\n]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | function | array"
+      }
+    },
+    nodes: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "[\n\n]",
+      description: "= []",
+      table: {
+        defaultValue: {
+          summary: "[\n\n]"
+        }
+      },
+      type: {
+        required: true,
+        summary: "array | string"
+      }
+    },
+    on: {
+      control: {
+        type: "text"
+      },
+      defaultValue: {
+        "click.legend": "(d, i, x, event) => {\n  const ids = this._id(d);\n  let id = this._ids(d);\n  id = id[id.length - 1];\n  if (this._hover && this._drawDepth >= this._groupBy.length - 1) {\n      if (this._focus && this._focus === ids) {\n          this.active(false);\n          this._focus = undefined;\n          this._zoomToBounds(null);\n      } else {\n          this.hover(false);\n          const nodes = ids.map((id)=>this._nodeLookup[id]);\n          const filterIds = [\n              `${id}`\n          ];\n          let xDomain = [\n              nodes[0].x - nodes[0].r,\n              nodes[0].x + nodes[0].r\n          ], yDomain = [\n              nodes[0].y - nodes[0].r,\n              nodes[0].y + nodes[0].r\n          ];\n          nodes.forEach((l)=>{\n              filterIds.push(l.id);\n              if (l.x - l.r < xDomain[0]) xDomain[0] = l.x - l.r;\n              if (l.x + l.r > xDomain[1]) xDomain[1] = l.x + l.r;\n              if (l.y - l.r < yDomain[0]) yDomain[0] = l.y - l.r;\n              if (l.y + l.r > yDomain[1]) yDomain[1] = l.y + l.r;\n          });\n          this.active((h, x)=>{\n              if (h.source && h.target) return filterIds.includes(h.source.id) && filterIds.includes(h.target.id);\n              else {\n                  const myIds = this._ids(h, x);\n                  return filterIds.includes(`${myIds[myIds.length - 1]}`);\n              }\n          });\n          this._focus = ids;\n          const t = zoomTransform(this._container.node());\n          xDomain = xDomain.map((d)=>d * t.k + t.x);\n          yDomain = yDomain.map((d)=>d * t.k + t.y);\n          this._zoomToBounds([\n              [\n                  xDomain[0],\n                  yDomain[0]\n              ],\n              [\n                  xDomain[1],\n                  yDomain[1]\n              ]\n          ]);\n      }\n      this._on.mouseenter.bind(this)(d, i, x, event);\n      this._on[\"mousemove.legend\"].bind(this)(d, i, x, event);\n  }\n}",
+        "click.shape": "(d, i, x, event) => {\n  this._tooltipClass.data([]).render();\n  if (this._hover && this._drawDepth >= this._groupBy.length - 1) {\n      const id = getNodeId.bind(this)(d, i);\n      if (this._focus && this._focus === id) {\n          this.active(false);\n          this._on.mouseenter.bind(this)(d, i, x, event);\n          this._focus = undefined;\n          this._zoomToBounds(null);\n      } else {\n          this.hover(false);\n          const links = this._linkLookup[id], node = this._nodeLookup[id];\n          const filterIds = [\n              id\n          ];\n          let xDomain = [\n              node.x - node.r,\n              node.x + node.r\n          ], yDomain = [\n              node.y - node.r,\n              node.y + node.r\n          ];\n          links.forEach((l)=>{\n              filterIds.push(l.id);\n              if (l.x - l.r < xDomain[0]) xDomain[0] = l.x - l.r;\n              if (l.x + l.r > xDomain[1]) xDomain[1] = l.x + l.r;\n              if (l.y - l.r < yDomain[0]) yDomain[0] = l.y - l.r;\n              if (l.y + l.r > yDomain[1]) yDomain[1] = l.y + l.r;\n          });\n          this.active((h, x)=>{\n              if (h.source && h.target) return h.source.id === id || h.target.id === id;\n              else return filterIds.includes(getNodeId.bind(this)(h, x));\n          });\n          this._focus = id;\n          const t = zoomTransform(this._container.node());\n          xDomain = xDomain.map((d)=>d * t.k + t.x);\n          yDomain = yDomain.map((d)=>d * t.k + t.y);\n          this._zoomToBounds([\n              [\n                  xDomain[0],\n                  yDomain[0]\n              ],\n              [\n                  xDomain[1],\n                  yDomain[1]\n              ]\n          ]);\n      }\n  }\n}",
+        mouseenter: "() => {\n  }",
+        "mouseleave.shape": "() => {\n  this.hover(false);\n}",
+        "mousemove.shape": "(d, i, x, event) => {\n  defaultMouseMove(d, i, x, event);\n  const id = getNodeId.bind(this)(d, i), links = this._linkLookup[id] || [], node = this._nodeLookup[id];\n  const filterIds = [\n      id\n  ];\n  const xDomain = [\n      node.x - node.r,\n      node.x + node.r\n  ], yDomain = [\n      node.y - node.r,\n      node.y + node.r\n  ];\n  links.forEach((l)=>{\n      filterIds.push(l.id);\n      if (l.x - l.r < xDomain[0]) xDomain[0] = l.x - l.r;\n      if (l.x + l.r > xDomain[1]) xDomain[1] = l.x + l.r;\n      if (l.y - l.r < yDomain[0]) yDomain[0] = l.y - l.r;\n      if (l.y + l.r > yDomain[1]) yDomain[1] = l.y + l.r;\n  });\n  this.hover((h, x)=>{\n      if (h.source && h.target) return h.source.id === id || h.target.id === id;\n      else return filterIds.includes(`${this._ids(h, x)[this._drawDepth]}`);\n  });\n}"
+      },
+      table: {
+        defaultValue: {
+          summary: {
+            "click.legend": "(d, i, x, event) => {\n  const ids = this._id(d);\n  let id = this._ids(d);\n  id = id[id.length - 1];\n  if (this._hover && this._drawDepth >= this._groupBy.length - 1) {\n      if (this._focus && this._focus === ids) {\n          this.active(false);\n          this._focus = undefined;\n          this._zoomToBounds(null);\n      } else {\n          this.hover(false);\n          const nodes = ids.map((id)=>this._nodeLookup[id]);\n          const filterIds = [\n              `${id}`\n          ];\n          let xDomain = [\n              nodes[0].x - nodes[0].r,\n              nodes[0].x + nodes[0].r\n          ], yDomain = [\n              nodes[0].y - nodes[0].r,\n              nodes[0].y + nodes[0].r\n          ];\n          nodes.forEach((l)=>{\n              filterIds.push(l.id);\n              if (l.x - l.r < xDomain[0]) xDomain[0] = l.x - l.r;\n              if (l.x + l.r > xDomain[1]) xDomain[1] = l.x + l.r;\n              if (l.y - l.r < yDomain[0]) yDomain[0] = l.y - l.r;\n              if (l.y + l.r > yDomain[1]) yDomain[1] = l.y + l.r;\n          });\n          this.active((h, x)=>{\n              if (h.source && h.target) return filterIds.includes(h.source.id) && filterIds.includes(h.target.id);\n              else {\n                  const myIds = this._ids(h, x);\n                  return filterIds.includes(`${myIds[myIds.length - 1]}`);\n              }\n          });\n          this._focus = ids;\n          const t = zoomTransform(this._container.node());\n          xDomain = xDomain.map((d)=>d * t.k + t.x);\n          yDomain = yDomain.map((d)=>d * t.k + t.y);\n          this._zoomToBounds([\n              [\n                  xDomain[0],\n                  yDomain[0]\n              ],\n              [\n                  xDomain[1],\n                  yDomain[1]\n              ]\n          ]);\n      }\n      this._on.mouseenter.bind(this)(d, i, x, event);\n      this._on[\"mousemove.legend\"].bind(this)(d, i, x, event);\n  }\n}",
+            "click.shape": "(d, i, x, event) => {\n  this._tooltipClass.data([]).render();\n  if (this._hover && this._drawDepth >= this._groupBy.length - 1) {\n      const id = getNodeId.bind(this)(d, i);\n      if (this._focus && this._focus === id) {\n          this.active(false);\n          this._on.mouseenter.bind(this)(d, i, x, event);\n          this._focus = undefined;\n          this._zoomToBounds(null);\n      } else {\n          this.hover(false);\n          const links = this._linkLookup[id], node = this._nodeLookup[id];\n          const filterIds = [\n              id\n          ];\n          let xDomain = [\n              node.x - node.r,\n              node.x + node.r\n          ], yDomain = [\n              node.y - node.r,\n              node.y + node.r\n          ];\n          links.forEach((l)=>{\n              filterIds.push(l.id);\n              if (l.x - l.r < xDomain[0]) xDomain[0] = l.x - l.r;\n              if (l.x + l.r > xDomain[1]) xDomain[1] = l.x + l.r;\n              if (l.y - l.r < yDomain[0]) yDomain[0] = l.y - l.r;\n              if (l.y + l.r > yDomain[1]) yDomain[1] = l.y + l.r;\n          });\n          this.active((h, x)=>{\n              if (h.source && h.target) return h.source.id === id || h.target.id === id;\n              else return filterIds.includes(getNodeId.bind(this)(h, x));\n          });\n          this._focus = id;\n          const t = zoomTransform(this._container.node());\n          xDomain = xDomain.map((d)=>d * t.k + t.x);\n          yDomain = yDomain.map((d)=>d * t.k + t.y);\n          this._zoomToBounds([\n              [\n                  xDomain[0],\n                  yDomain[0]\n              ],\n              [\n                  xDomain[1],\n                  yDomain[1]\n              ]\n          ]);\n      }\n  }\n}",
+            mouseenter: "() => {\n  }",
+            "mouseleave.shape": "() => {\n  this.hover(false);\n}",
+            "mousemove.shape": "(d, i, x, event) => {\n  defaultMouseMove(d, i, x, event);\n  const id = getNodeId.bind(this)(d, i), links = this._linkLookup[id] || [], node = this._nodeLookup[id];\n  const filterIds = [\n      id\n  ];\n  const xDomain = [\n      node.x - node.r,\n      node.x + node.r\n  ], yDomain = [\n      node.y - node.r,\n      node.y + node.r\n  ];\n  links.forEach((l)=>{\n      filterIds.push(l.id);\n      if (l.x - l.r < xDomain[0]) xDomain[0] = l.x - l.r;\n      if (l.x + l.r > xDomain[1]) xDomain[1] = l.x + l.r;\n      if (l.y - l.r < yDomain[0]) yDomain[0] = l.y - l.r;\n      if (l.y + l.r > yDomain[1]) yDomain[1] = l.y + l.r;\n  });\n  this.hover((h, x)=>{\n      if (h.source && h.target) return h.source.id === id || h.target.id === id;\n      else return filterIds.includes(`${this._ids(h, x)[this._drawDepth]}`);\n  });\n}"
+          }
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    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) => {\n  const validSize = this._size ? `, ${this._size(d, i)}` : \"\";\n  return `${this._drawLabel(d, i)}${validSize}.`;\n}, labelConfig: {duration: 0, fontMin: 1, fontResize: true, labelPadding: 0, textAnchor: middle, verticalAlign: middle}, Path: {fill: none, label: false, stroke: #eee}})",
+      table: {
+        defaultValue: {
+          detail: "assign(this._shapeConfig, {ariaLabel: (d, i) => {\n  const validSize = this._size ? `, ${this._size(d, i)}` : \"\";\n  return `${this._drawLabel(d, i)}${validSize}.`;\n}, labelConfig: {duration: 0, fontMin: 1, fontResize: true, labelPadding: 0, textAnchor: middle, verticalAlign: middle}, Path: {fill: none, label: false, stroke: #eee}})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    size: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    sizeMax: {
+      control: {
+        type: "number"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    sizeMin: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 5,
+      table: {
+        defaultValue: {
+          summary: 5
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    sizeScale: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "sqrt",
+      table: {
+        defaultValue: {
+          summary: "sqrt"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    x: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"x\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"x\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    y: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"y\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"y\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    zoom: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      description: "= false",
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: true,
+        summary: "boolean"
+      }
+    }
+  }
+);