@d3plus/docs 3.0.0-alpha.3

package/args/core/charts/Priestley.args.jsx

@@ -0,0 +1,118 @@
+// 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 {Priestley as D3plusPriestley} from "@d3plus/react";
+export const Priestley = ({ config }) => <D3plusPriestley config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Priestley
+   */
+  Object.keys(vizArgTypes)
+    .filter(k => !k.match(/^(zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Priestley-specific methods
+   */
+  
+  {
+    axisConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{scale: time}",
+      table: {
+        defaultValue: {
+          summary: "{scale: time}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    end: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "end",
+      table: {
+        defaultValue: {
+          summary: "end"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    paddingInner: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 0.05,
+      table: {
+        defaultValue: {
+          summary: 0.05
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    paddingOuter: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 0.05,
+      table: {
+        defaultValue: {
+          summary: 0.05
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    shapeConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign({}, this._shapeConfig, {ariaLabel: (d, i) => `${this._drawLabel(d, i)}, ${this._start(d, i)} - ${this._end(d, i)}.`})",
+      table: {
+        defaultValue: {
+          detail: "assign({}, this._shapeConfig, {ariaLabel: (d, i) => `${this._drawLabel(d, i)}, ${this._start(d, i)} - ${this._end(d, i)}.`})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    start: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "start",
+      table: {
+        defaultValue: {
+          summary: "start"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    }
+  }
+);

package/args/core/charts/Radar.args.jsx

@@ -0,0 +1,120 @@
+// 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 {Radar as D3plusRadar} from "@d3plus/react";
+export const Radar = ({ config }) => <D3plusRadar config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Radar
+   */
+  Object.keys(vizArgTypes)
+    .filter(k => !k.match(/^(zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Radar-specific methods
+   */
+  
+  {
+    axisConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{shapeConfig: {fill: none, labelConfig: {fontColor: #999, padding: 0, textAnchor: (d, i, x) => x.textAnchor, verticalAlign: middle}, stroke: #eee, strokeWidth: 1}}",
+      table: {
+        defaultValue: {
+          detail: "{shapeConfig: {fill: none, labelConfig: {fontColor: #999, padding: 0, textAnchor: (d, i, x) => x.textAnchor, verticalAlign: middle}, stroke: #eee, strokeWidth: 1}}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object"
+      }
+    },
+    discrete: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "metric",
+      table: {
+        defaultValue: {
+          summary: "metric"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    metric: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"metric\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"metric\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function | string"
+      }
+    },
+    outerPadding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 100,
+      table: {
+        defaultValue: {
+          summary: 100
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Path",
+      table: {
+        defaultValue: {
+          summary: "Path"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    value: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"value\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"value\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function | string"
+      }
+    }
+  }
+);

package/args/core/charts/RadialMatrix.args.jsx

@@ -0,0 +1,197 @@
+// 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 {RadialMatrix as D3plusRadialMatrix} from "@d3plus/react";
+export const RadialMatrix = ({ config }) => <D3plusRadialMatrix config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in RadialMatrix
+   */
+  Object.keys(vizArgTypes)
+    .filter(k => !k.match(/^(zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * RadialMatrix-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: "{shapeConfig: {labelConfig: {fontColor: #000, padding: 5, textAnchor: (d) => [\n0,\n180\n].includes(d.angle) ? middle : [\n2,\n3\n].includes(d.quadrant) ? end : start, verticalAlign: (d) => [\n90,\n270\n].includes(d.angle) ? middle : [\n2,\n1\n].includes(d.quadrant) ? bottom : top}}}",
+      table: {
+        defaultValue: {
+          detail: "{shapeConfig: {labelConfig: {fontColor: #000, padding: 5, textAnchor: (d) => [\n0,\n180\n].includes(d.angle) ? middle : [\n2,\n3\n].includes(d.quadrant) ? end : start, verticalAlign: (d) => [\n90,\n270\n].includes(d.angle) ? middle : [\n2,\n1\n].includes(d.quadrant) ? bottom : top}}}",
+          summary: "function"
+        }
+      },
+      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"
+      }
+    },
+    innerRadius: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "(radius) => radius / 5",
+      table: {
+        defaultValue: {
+          detail: "(radius) => radius / 5",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    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"
+      }
+    },
+    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/Rings.args.jsx

@@ -0,0 +1,228 @@
+// 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 {Rings as D3plusRings} from "@d3plus/react";
+export const Rings = ({ config }) => <D3plusRings config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Rings
+   */
+  Object.keys(vizArgTypes)
+    .filter(k => !k.match(/^(zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Rings-specific methods
+   */
+  
+  {
+    center: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: true,
+        summary: "string"
+      }
+    },
+    hover: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    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"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      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.shape": "(d) => {\n  this._center = d.id;\n  this._margin = {\n      bottom: 0,\n      left: 0,\n      right: 0,\n      top: 0\n  };\n  this._padding = {\n      bottom: 0,\n      left: 0,\n      right: 0,\n      top: 0\n  };\n  this._draw();\n}",
+        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._nodeGroupBy && this._nodeGroupBy[this._drawDepth](d, i) ? this._nodeGroupBy[this._drawDepth](d, i) : this._id(d, i), links = this._linkLookup[id], node = this._nodeLookup[id];\n      const filterIds = [\n          node.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 === node.id || h.target.id === node.id;\n          else return filterIds.includes(this._ids(h, x)[this._drawDepth]);\n      });\n  }\n}"
+      },
+      table: {
+        defaultValue: {
+          summary: {
+            "click.shape": "(d) => {\n  this._center = d.id;\n  this._margin = {\n      bottom: 0,\n      left: 0,\n      right: 0,\n      top: 0\n  };\n  this._padding = {\n      bottom: 0,\n      left: 0,\n      right: 0,\n      top: 0\n  };\n  this._draw();\n}",
+            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._nodeGroupBy && this._nodeGroupBy[this._drawDepth](d, i) ? this._nodeGroupBy[this._drawDepth](d, i) : this._id(d, i), links = this._linkLookup[id], node = this._nodeLookup[id];\n      const filterIds = [\n          node.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 === node.id || h.target.id === node.id;\n          else return filterIds.includes(this._ids(h, x)[this._drawDepth]);\n      });\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, strokeWidth: 1}})",
+      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, strokeWidth: 1}})",
+          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"
+      }
+    }
+  }
+);