@d3plus/docs 3.0.0-alpha.3

package/args/core/components/Legend.args.jsx

@@ -0,0 +1,289 @@
+// 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 {Legend as D3plusLegend} from "@d3plus/react";
+export const Legend = ({ config }) => <D3plusLegend config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the BaseClass primitive and
+   * overrides any defaults that have been changed in Legend
+   */
+  Object.keys(baseClassArgTypes)
+    .reduce((obj, k) => (obj[k] = baseClassArgTypes[k], obj), {}),
+
+  /**
+   * Legend-specific methods
+   */
+  
+  {
+    active: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    align: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "center",
+      description: "Supports `\"left\"` and `\"center\"` and `\"right\"`.",
+      table: {
+        defaultValue: {
+          summary: "center"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    data: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "[\n\n]",
+      table: {
+        defaultValue: {
+          summary: "[\n\n]"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array"
+      }
+    },
+    direction: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "row",
+      table: {
+        defaultValue: {
+          summary: "row"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    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"
+      }
+    },
+    hover: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    id: {
+      control: {},
+      defaultValue: "d => d[\"id\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"id\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d => d[\"id\"]",
+      table: {
+        defaultValue: {
+          detail: "d => d[\"id\"]",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    padding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 5,
+      table: {
+        defaultValue: {
+          summary: 5
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    render: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    select: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "d3.select(\"body\").append(\"svg\")",
+      table: {
+        defaultValue: {
+          summary: "d3.select(\"body\").append(\"svg\")"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string | htmlelement"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Rect",
+      table: {
+        defaultValue: {
+          summary: "Rect"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function | string"
+      }
+    },
+    shapeConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fill: d => d[\"color\"], height: 12, hitArea: (dd, i) => {\n  const d = this._lineData[i], h = max([\n      d.height,\n      d.shapeHeight\n  ]);\n  return {\n      width: d.width + d.shapeWidth,\n      height: h,\n      x: -d.shapeWidth / 2,\n      y: -h / 2\n  };\n}, labelBounds: (dd, i) => {\n  const d = this._lineData[i];\n  let x = d.shapeWidth / 2;\n  if (d.shape === \"Circle\") x -= d.shapeR / 2;\n  const height = max([\n      d.shapeHeight,\n      d.height\n  ]);\n  const rtlMod = this._rtl ? d.shapeWidth + d.width + this._padding * 2 : 0;\n  return {\n      width: d.width,\n      height,\n      x: x + padding - rtlMod,\n      y: -height / 2\n  };\n}, labelConfig: {fontColor: colorDefaults.dark, fontFamily: this._titleClass.fontFamily(), fontResize: false, fontSize: 10, verticalAlign: middle}, opacity: 1, r: 6, width: 12, x: (d, i) => {\n  const datum = this._lineData[i];\n  const y = datum.y;\n  const pad = this._align === \"left\" || this._align === \"right\" && this._direction === \"column\" ? 0 : this._align === \"center\" ? (this._outerBounds.width - this._rowWidth(this._lineData.filter((l)=>y === l.y))) / 2 : this._outerBounds.width - this._rowWidth(this._lineData.filter((l)=>y === l.y));\n  const prevWords = this._lineData.slice(0, i).filter((l)=>y === l.y);\n  const rtlMod = this._rtl ? datum.width + this._padding : 0;\n  return this._rowWidth(prevWords) + this._padding * (prevWords.length ? datum.sentence ? 2 : 1 : 0) + this._outerBounds.x + datum.shapeWidth / 2 + pad + rtlMod;\n}, y: (d, i) => {\n  const ld = this._lineData[i];\n  return ld.y + this._titleHeight + this._outerBounds.y + max(this._lineData.filter((l)=>ld.y === l.y).map((l)=>l.height).concat(this._data.map((l, x)=>this._fetchConfig(\"height\", l, x)))) / 2;\n}}",
+      table: {
+        defaultValue: {
+          detail: "{fill: d => d[\"color\"], height: 12, hitArea: (dd, i) => {\n  const d = this._lineData[i], h = max([\n      d.height,\n      d.shapeHeight\n  ]);\n  return {\n      width: d.width + d.shapeWidth,\n      height: h,\n      x: -d.shapeWidth / 2,\n      y: -h / 2\n  };\n}, labelBounds: (dd, i) => {\n  const d = this._lineData[i];\n  let x = d.shapeWidth / 2;\n  if (d.shape === \"Circle\") x -= d.shapeR / 2;\n  const height = max([\n      d.shapeHeight,\n      d.height\n  ]);\n  const rtlMod = this._rtl ? d.shapeWidth + d.width + this._padding * 2 : 0;\n  return {\n      width: d.width,\n      height,\n      x: x + padding - rtlMod,\n      y: -height / 2\n  };\n}, labelConfig: {fontColor: colorDefaults.dark, fontFamily: this._titleClass.fontFamily(), fontResize: false, fontSize: 10, verticalAlign: middle}, opacity: 1, r: 6, width: 12, x: (d, i) => {\n  const datum = this._lineData[i];\n  const y = datum.y;\n  const pad = this._align === \"left\" || this._align === \"right\" && this._direction === \"column\" ? 0 : this._align === \"center\" ? (this._outerBounds.width - this._rowWidth(this._lineData.filter((l)=>y === l.y))) / 2 : this._outerBounds.width - this._rowWidth(this._lineData.filter((l)=>y === l.y));\n  const prevWords = this._lineData.slice(0, i).filter((l)=>y === l.y);\n  const rtlMod = this._rtl ? datum.width + this._padding : 0;\n  return this._rowWidth(prevWords) + this._padding * (prevWords.length ? datum.sentence ? 2 : 1 : 0) + this._outerBounds.x + datum.shapeWidth / 2 + pad + rtlMod;\n}, y: (d, i) => {\n  const ld = this._lineData[i];\n  return ld.y + this._titleHeight + this._outerBounds.y + max(this._lineData.filter((l)=>ld.y === l.y).map((l)=>l.height).concat(this._data.map((l, x)=>this._fetchConfig(\"height\", l, x)))) / 2;\n}}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    title: {
+      control: {
+        type: "text"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    titleConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fontSize: 12}",
+      table: {
+        defaultValue: {
+          summary: "{fontSize: 12}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    verticalAlign: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "middle",
+      description: "Supports `\"top\"` and `\"middle\"` and `\"bottom\"`.",
+      table: {
+        defaultValue: {
+          summary: "middle"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    width: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 400,
+      table: {
+        defaultValue: {
+          summary: 400
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    }
+  }
+);