@d3plus/docs 3.0.0-alpha.3

package/args/core/components/AxisTop.args.jsx

@@ -0,0 +1,42 @@
+// 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 axisArgTypes} from "./Axis.args.jsx";
+import {assign} from "@d3plus/dom";
+
+import {AxisTop as D3plusAxisTop} from "@d3plus/react";
+export const AxisTop = ({ config }) => <D3plusAxisTop config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Axis primitive and
+   * overrides any defaults that have been changed in AxisTop
+   */
+  Object.keys(axisArgTypes)
+    .reduce((obj, k) => (obj[k] = axisArgTypes[k], obj), {}),
+
+  /**
+   * AxisTop-specific methods
+   */
+  
+  {
+    orient: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "top",
+      description: "Supports `\"top\"`, `\"right\"`, `\"bottom\"`, and `\"left\"` orientations.",
+      table: {
+        defaultValue: {
+          summary: "top"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    }
+  }
+);

package/args/core/components/ColorScale.args.jsx

@@ -0,0 +1,456 @@
+// 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 {ColorScale as D3plusColorScale} from "@d3plus/react";
+export const ColorScale = ({ config }) => <D3plusColorScale config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the BaseClass primitive and
+   * overrides any defaults that have been changed in ColorScale
+   */
+  Object.keys(baseClassArgTypes)
+    .reduce((obj, k) => (obj[k] = baseClassArgTypes[k], obj), {}),
+
+  /**
+   * ColorScale-specific methods
+   */
+  
+  {
+    align: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "middle",
+      description: "Supports `\"left\"` and `\"center\"` and `\"right\"`.",
+      table: {
+        defaultValue: {
+          summary: "middle"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    axisConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{gridSize: 0}",
+      table: {
+        defaultValue: {
+          summary: "{gridSize: 0}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    bucketAxis: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    bucketFormat: {
+      control: {},
+      defaultValue: "(tick, i, ticks, allValues) => {\n  const format = this._axisConfig.tickFormat ? this._axisConfig.tickFormat : formatAbbreviate;\n  const next = ticks[i + 1];\n  const prev = i ? ticks[i - 1] : false;\n  const last = i === ticks.length - 1;\n  if (tick === next || last) {\n      const suffix = last && tick < max(allValues) ? \"+\" : \"\";\n      return `${format(tick)}${suffix}`;\n  } else {\n      const mod = next ? next / 100 : tick / 100;\n      const pow = mod >= 1 || mod <= -1 ? Math.round(mod).toString().length - 1 : mod.toString().split(\".\")[1].replace(/([1-9])[1-9].*$/, \"$1\").length * -1;\n      const ten = Math.pow(10, pow);\n      const prevValue = prev === tick && i === 1 ? format(min([\n          tick + ten,\n          allValues.find((d)=>d > tick && d < next)\n      ])) : format(tick);\n      const nextValue = tick && i === 1 ? format(next) : format(max([\n          next - ten,\n          allValues.reverse().find((d)=>d > tick && d < next)\n      ]));\n      return this._bucketJoiner(prevValue, nextValue);\n  }\n}",
+      table: {
+        defaultValue: {
+          detail: "(tick, i, ticks, allValues) => {\n  const format = this._axisConfig.tickFormat ? this._axisConfig.tickFormat : formatAbbreviate;\n  const next = ticks[i + 1];\n  const prev = i ? ticks[i - 1] : false;\n  const last = i === ticks.length - 1;\n  if (tick === next || last) {\n      const suffix = last && tick < max(allValues) ? \"+\" : \"\";\n      return `${format(tick)}${suffix}`;\n  } else {\n      const mod = next ? next / 100 : tick / 100;\n      const pow = mod >= 1 || mod <= -1 ? Math.round(mod).toString().length - 1 : mod.toString().split(\".\")[1].replace(/([1-9])[1-9].*$/, \"$1\").length * -1;\n      const ten = Math.pow(10, pow);\n      const prevValue = prev === tick && i === 1 ? format(min([\n          tick + ten,\n          allValues.find((d)=>d > tick && d < next)\n      ])) : format(tick);\n      const nextValue = tick && i === 1 ? format(next) : format(max([\n          next - ten,\n          allValues.reverse().find((d)=>d > tick && d < next)\n      ]));\n      return this._bucketJoiner(prevValue, nextValue);\n  }\n}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    bucketJoiner: {
+      control: {},
+      defaultValue: "(a, b) => a !== b ? `${a} - ${b}` : `${a}`",
+      table: {
+        defaultValue: {
+          detail: "(a, b) => a !== b ? `${a} - ${b}` : `${a}`",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    buckets: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 5,
+      table: {
+        defaultValue: {
+          summary: 5
+        }
+      },
+      type: {
+        required: false,
+        summary: "number | array"
+      }
+    },
+    centered: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    color: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "[\n#54478C,\n#2C699A,\n#0DB39E,\n#83E377,\n#EFEA5A\n]",
+      table: {
+        defaultValue: {
+          summary: "[\n#54478C,\n#2C699A,\n#0DB39E,\n#83E377,\n#EFEA5A\n]"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | array"
+      }
+    },
+    colorMax: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "colorDefaults.on",
+      table: {
+        defaultValue: {
+          summary: "colorDefaults.on"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    colorMid: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "colorDefaults.light",
+      table: {
+        defaultValue: {
+          summary: "colorDefaults.light"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    colorMin: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "colorDefaults.off",
+      table: {
+        defaultValue: {
+          summary: "colorDefaults.off"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    data: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "[\n\n]",
+      table: {
+        defaultValue: {
+          summary: "[\n\n]"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array"
+      }
+    },
+    domain: {
+      control: {
+        type: "array"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array"
+      }
+    },
+    duration: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 600,
+      table: {
+        defaultValue: {
+          summary: 600
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    height: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 200,
+      table: {
+        defaultValue: {
+          summary: 200
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    labelConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fontColor: colorDefaults.dark, fontSize: 12}",
+      table: {
+        defaultValue: {
+          summary: "{fontColor: colorDefaults.dark, fontSize: 12}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    labelMax: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    labelMin: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    legendConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{shapeConfig: {stroke: colorDefaults.dark, strokeWidth: 1}}",
+      table: {
+        defaultValue: {
+          summary: "{shapeConfig: {stroke: colorDefaults.dark, strokeWidth: 1}}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    midpoint: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 0,
+      table: {
+        defaultValue: {
+          summary: 0
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    orient: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "bottom",
+      table: {
+        defaultValue: {
+          summary: "bottom"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    padding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 5,
+      table: {
+        defaultValue: {
+          summary: 5
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    rectConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{stroke: #999, strokeWidth: 1}",
+      table: {
+        defaultValue: {
+          summary: "{stroke: #999, strokeWidth: 1}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    render: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    scale: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "linear",
+      description: "Can either be \"linear\", \"jenks\", or \"buckets\".",
+      table: {
+        defaultValue: {
+          summary: "linear"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    select: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d3.select(\"body\").append(\"svg\")",
+      table: {
+        defaultValue: {
+          summary: "d3.select(\"body\").append(\"svg\")"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | htmlelement"
+      }
+    },
+    size: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 10,
+      table: {
+        defaultValue: {
+          summary: 10
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    value: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"value\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"value\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    width: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 400,
+      table: {
+        defaultValue: {
+          summary: 400
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    }
+  }
+);