@d3plus/docs 3.0.0-alpha.3

package/args/core/charts/BarChart.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 plotArgTypes} from "./Plot.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {BarChart as D3plusBarChart} from "@d3plus/react";
+export const BarChart = ({ config }) => <D3plusBarChart config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Plot primitive and
+   * overrides any defaults that have been changed in BarChart
+   */
+  Object.keys(plotArgTypes)
+    .filter(k => !k.match(/^(shape|zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = plotArgTypes[k], obj), {}),
+
+  /**
+   * BarChart-specific methods
+   */
+  
+  {
+    baseline: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 0,
+      table: {
+        defaultValue: {
+          summary: 0
+        }
+      },
+      type: {
+        required: true,
+        summary: "number"
+      }
+    },
+    discrete: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "x",
+      table: {
+        defaultValue: {
+          summary: "x"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    legend: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: "(config, arr) => {\n  const legendIds = arr.map(this._groupBy[this._legendDepth].bind(this)).sort().join();\n  const barIds = this._filteredData.map(this._groupBy[this._legendDepth].bind(this)).sort().join();\n  if (legendIds === barIds) return false;\n  return defaultLegend.bind(this)(config, arr);\n}",
+      table: {
+        defaultValue: {
+          detail: "(config, arr) => {\n  const legendIds = arr.map(this._groupBy[this._legendDepth].bind(this)).sort().join();\n  const barIds = this._filteredData.map(this._groupBy[this._legendDepth].bind(this)).sort().join();\n  if (legendIds === barIds) return false;\n  return defaultLegend.bind(this)(config, arr);\n}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean | function"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Bar",
+      table: {
+        defaultValue: {
+          summary: "Bar"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    }
+  }
+);

package/args/core/charts/BoxWhisker.args.jsx

@@ -0,0 +1,73 @@
+// 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 {BoxWhisker as D3plusBoxWhisker} from "@d3plus/react";
+export const BoxWhisker = ({ config }) => <D3plusBoxWhisker config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Plot primitive and
+   * overrides any defaults that have been changed in BoxWhisker
+   */
+  Object.keys(plotArgTypes)
+    .filter(k => !k.match(/^(shape|zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = plotArgTypes[k], obj), {}),
+
+  /**
+   * BoxWhisker-specific methods
+   */
+  
+  {
+    discrete: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "x",
+      table: {
+        defaultValue: {
+          summary: "x"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Box",
+      table: {
+        defaultValue: {
+          summary: "Box"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    tooltipConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign(this._tooltipConfig, {title: (d, i) => {\n  if (!d) return \"\";\n  while(d.__d3plus__ && d.data){\n      d = d.data;\n      i = d.i;\n  }\n  if (this._label) return this._label(d, i);\n  const l = this._ids(d, i).slice(0, this._drawDepth);\n  return l[l.length - 1];\n}})",
+      table: {
+        defaultValue: {
+          detail: "assign(this._tooltipConfig, {title: (d, i) => {\n  if (!d) return \"\";\n  while(d.__d3plus__ && d.data){\n      d = d.data;\n      i = d.i;\n  }\n  if (this._label) return this._label(d, i);\n  const l = this._ids(d, i).slice(0, this._drawDepth);\n  return l[l.length - 1];\n}})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    }
+  }
+);

package/args/core/charts/BumpChart.args.jsx

@@ -0,0 +1,133 @@
+// 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 {BumpChart as D3plusBumpChart} from "@d3plus/react";
+export const BumpChart = ({ config }) => <D3plusBumpChart config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Plot primitive and
+   * overrides any defaults that have been changed in BumpChart
+   */
+  Object.keys(plotArgTypes)
+    .filter(k => !k.match(/^(shape|zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = plotArgTypes[k], obj), {}),
+
+  /**
+   * BumpChart-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"
+      }
+    },
+    y2: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "(d) => this._y(d)",
+      table: {
+        defaultValue: {
+          detail: "(d) => this._y(d)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function | string"
+      }
+    },
+    y2Config: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{tickFormat: (val) => {\n  const data = this._formattedData;\n  const xMax = data[data.length - 1].x instanceof Date ? data[data.length - 1].x.getTime() : data[data.length - 1].x;\n  const endData = data.filter((d)=>(d.x instanceof Date ? d.x.getTime() : d.x) === xMax);\n  const d = endData.find((d)=>d.y === val);\n  return d ? this._drawLabel(d, d.i) : \"\";\n}}",
+      table: {
+        defaultValue: {
+          detail: "{tickFormat: (val) => {\n  const data = this._formattedData;\n  const xMax = data[data.length - 1].x instanceof Date ? data[data.length - 1].x.getTime() : data[data.length - 1].x;\n  const endData = data.filter((d)=>(d.x instanceof Date ? d.x.getTime() : d.x) === xMax);\n  const d = endData.find((d)=>d.y === val);\n  return d ? this._drawLabel(d, d.i) : \"\";\n}}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object"
+      }
+    },
+    y2Sort: {
+      control: {},
+      defaultValue: "(a, b) => this._y(b) - this._y(a)",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => this._y(b) - this._y(a)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function"
+      }
+    },
+    yConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{tickFormat: (val) => {\n  const data = this._formattedData;\n  const xMin = data[0].x instanceof Date ? data[0].x.getTime() : data[0].x;\n  const startData = data.filter((d)=>(d.x instanceof Date ? d.x.getTime() : d.x) === xMin);\n  const d = startData.find((d)=>d.y === val);\n  return d ? this._drawLabel(d, d.i) : \"\";\n}}",
+      table: {
+        defaultValue: {
+          detail: "{tickFormat: (val) => {\n  const data = this._formattedData;\n  const xMin = data[0].x instanceof Date ? data[0].x.getTime() : data[0].x;\n  const startData = data.filter((d)=>(d.x instanceof Date ? d.x.getTime() : d.x) === xMin);\n  const d = startData.find((d)=>d.y === val);\n  return d ? this._drawLabel(d, d.i) : \"\";\n}}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "object"
+      }
+    },
+    ySort: {
+      control: {},
+      defaultValue: "(a, b) => this._y(b) - this._y(a)",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => this._y(b) - this._y(a)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function"
+      }
+    }
+  }
+);

package/args/core/charts/Donut.args.jsx

@@ -0,0 +1,58 @@
+// 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 pieArgTypes} from "./Pie.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {Donut as D3plusDonut} from "@d3plus/react";
+export const Donut = ({ config }) => <D3plusDonut config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Pie primitive and
+   * overrides any defaults that have been changed in Donut
+   */
+  Object.keys(pieArgTypes)
+    .filter(k => !k.match(/^(shape|zoom.*)$/))
+    .reduce((obj, k) => (obj[k] = pieArgTypes[k], obj), {}),
+
+  /**
+   * Donut-specific methods
+   */
+  
+  {
+    innerRadius: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "() => min([\nthis._width - this._margin.left - this._margin.right,\nthis._height - this._margin.top - this._margin.bottom\n]) / 4",
+      table: {
+        defaultValue: {
+          detail: "() => min([\nthis._width - this._margin.left - this._margin.right,\nthis._height - this._margin.top - this._margin.bottom\n]) / 4",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    padPixel: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 2,
+      table: {
+        defaultValue: {
+          summary: 2
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    }
+  }
+);

package/args/core/charts/Geomap.args.jsx

@@ -0,0 +1,363 @@
+// 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 {Geomap as D3plusGeomap} from "@d3plus/react";
+export const Geomap = ({ config }) => <D3plusGeomap config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Viz primitive and
+   * overrides any defaults that have been changed in Geomap
+   */
+  Object.keys(vizArgTypes)
+    .reduce((obj, k) => (obj[k] = vizArgTypes[k], obj), {}),
+
+  /**
+   * Geomap-specific methods
+   */
+  
+  {
+    fitFilter: {
+      control: {
+        type: "number"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "number | string | array | function"
+      }
+    },
+    fitKey: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: true,
+        summary: "string"
+      }
+    },
+    fitObject: {
+      control: {
+        type: "object"
+      },
+      defaultValue: false,
+      description: "= `undefined`",
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: true,
+        summary: "object | string"
+      }
+    },
+    noDataMessage: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    ocean: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "#d4dadc",
+      table: {
+        defaultValue: {
+          summary: "#d4dadc"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    point: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "d => d[\"point\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"point\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | array"
+      }
+    },
+    pointSize: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 1,
+      table: {
+        defaultValue: {
+          summary: 1
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | number"
+      }
+    },
+    pointSizeMax: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 10,
+      table: {
+        defaultValue: {
+          summary: 10
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    pointSizeMin: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 5,
+      table: {
+        defaultValue: {
+          summary: 5
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    projection: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d3Geo.geoMercator()",
+      description: "= \"geoMercator\"",
+      table: {
+        defaultValue: {
+          summary: "d3Geo.geoMercator()"
+        }
+      },
+      type: {
+        required: true,
+        summary: "function | string"
+      }
+    },
+    projectionPadding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "parseSides(20)",
+      table: {
+        defaultValue: {
+          summary: "parseSides(20)"
+        }
+      },
+      type: {
+        required: false,
+        summary: "number | string"
+      }
+    },
+    projectionRotate: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "[0, 0]",
+      table: {
+        defaultValue: {
+          summary: "[0, 0]"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array"
+      }
+    },
+    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._drawLabel(d, i)}, ${this._pointSize(d, i)}`, hoverOpacity: 1, Path: {ariaLabel: (d, i) => {\n  const validColorScale = this._colorScale ? `, ${this._colorScale(d, i)}` : \"\";\n  return `${this._drawLabel(d, i)}${validColorScale}.`;\n}, fill: (d, i) => {\n  if (this._colorScale && !this._coordData.features.includes(d)) {\n      const c = this._colorScale(d);\n      if (c !== undefined && c !== null) {\n          if (this._colorScaleClass._colorScale) {\n              return this._colorScaleClass._colorScale(c);\n          } else {\n              let color = this._colorScaleClass.color();\n              if (color instanceof Array) color = color[color.length - 1];\n              return color;\n          }\n      }\n  }\n  return this._topojsonFill(d, i);\n}, on: {mouseenter: (d, i, x, event) => !this._coordData.features.includes(d) ? this._on.mouseenter.bind(this)(d, i, x, event) : null, mousemove.shape: (d, i, x, event) => !this._coordData.features.includes(d) ? this._on.mousemove.shape.bind(this)(d, i, x, event) : null, mouseleave: (d, i, x, event) => !this._coordData.features.includes(d) ? this._on.mouseleave.bind(this)(d, i, x, event) : null}, stroke: (d, i) => {\n  const c = typeof this._shapeConfig.Path.fill === \"function\" ? this._shapeConfig.Path.fill(d, i) : this._shapeConfig.Path.fill;\n  return color(c).darker();\n}, strokeWidth: 1}})",
+      table: {
+        defaultValue: {
+          detail: "assign(this._shapeConfig, {ariaLabel: (d, i) => `${this._drawLabel(d, i)}, ${this._pointSize(d, i)}`, hoverOpacity: 1, Path: {ariaLabel: (d, i) => {\n  const validColorScale = this._colorScale ? `, ${this._colorScale(d, i)}` : \"\";\n  return `${this._drawLabel(d, i)}${validColorScale}.`;\n}, fill: (d, i) => {\n  if (this._colorScale && !this._coordData.features.includes(d)) {\n      const c = this._colorScale(d);\n      if (c !== undefined && c !== null) {\n          if (this._colorScaleClass._colorScale) {\n              return this._colorScaleClass._colorScale(c);\n          } else {\n              let color = this._colorScaleClass.color();\n              if (color instanceof Array) color = color[color.length - 1];\n              return color;\n          }\n      }\n  }\n  return this._topojsonFill(d, i);\n}, on: {mouseenter: (d, i, x, event) => !this._coordData.features.includes(d) ? this._on.mouseenter.bind(this)(d, i, x, event) : null, mousemove.shape: (d, i, x, event) => !this._coordData.features.includes(d) ? this._on.mousemove.shape.bind(this)(d, i, x, event) : null, mouseleave: (d, i, x, event) => !this._coordData.features.includes(d) ? this._on.mouseleave.bind(this)(d, i, x, event) : null}, stroke: (d, i) => {\n  const c = typeof this._shapeConfig.Path.fill === \"function\" ? this._shapeConfig.Path.fill(d, i) : this._shapeConfig.Path.fill;\n  return color(c).darker();\n}, strokeWidth: 1}})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    tileUrl: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png",
+      table: {
+        defaultValue: {
+          summary: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    tiles: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    topojson: {
+      control: {
+        type: "object"
+      },
+      defaultValue: false,
+      description: "= []",
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: true,
+        summary: "object | string"
+      }
+    },
+    topojsonFill: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "#f5f5f3",
+      description: "= string",
+      table: {
+        defaultValue: {
+          summary: "#f5f5f3"
+        }
+      },
+      type: {
+        required: true,
+        summary: "string | function"
+      }
+    },
+    topojsonFilter: {
+      control: {
+        type: "number"
+      },
+      defaultValue: "(d) => ![\n010\n].includes(d.id)",
+      table: {
+        defaultValue: {
+          detail: "(d) => ![\n010\n].includes(d.id)",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "number | string | array | function"
+      }
+    },
+    topojsonId: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"id\"]",
+      description: "= \"id\"",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"id\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: true,
+        summary: "string | function"
+      }
+    },
+    topojsonKey: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: true,
+        summary: "string"
+      }
+    },
+    zoom: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      description: "= false",
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: true,
+        summary: "boolean"
+      }
+    }
+  }
+);