@d3plus/docs 3.0.0-alpha.3

package/args/core/components/Timeline.args.jsx

@@ -0,0 +1,401 @@
+// 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 {Timeline as D3plusTimeline} from "@d3plus/react";
+export const Timeline = ({ config }) => <D3plusTimeline config={config} />;
+
+export const argTypes = assign(
+
+  /**
+   * Filters out unused argTypes from the Axis primitive and
+   * overrides any defaults that have been changed in Timeline
+   */
+  Object.keys(axisArgTypes)
+    .reduce((obj, k) => (obj[k] = axisArgTypes[k], obj), {}),
+
+  /**
+   * Timeline-specific methods
+   */
+  
+  {
+    barConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign({}, this._barConfig, {stroke: () => this._buttonBehaviorCurrent === buttons ? transparent : colorMid, stroke-width: () => this._buttonBehaviorCurrent === buttons ? 0 : 1})",
+      table: {
+        defaultValue: {
+          detail: "assign({}, this._barConfig, {stroke: () => this._buttonBehaviorCurrent === buttons ? transparent : colorMid, stroke-width: () => this._buttonBehaviorCurrent === buttons ? 0 : 1})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    brushFilter: {
+      control: {},
+      defaultValue: "(event) => !event.button && event.detail < 2",
+      table: {
+        defaultValue: {
+          detail: "(event) => !event.button && event.detail < 2",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    brushMin: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 1,
+      table: {
+        defaultValue: {
+          summary: 1
+        }
+      },
+      type: {
+        required: false,
+        summary: "number | function"
+      }
+    },
+    brushing: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    buttonAlign: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "middle",
+      table: {
+        defaultValue: {
+          summary: "middle"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    buttonBehavior: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "auto",
+      table: {
+        defaultValue: {
+          summary: "auto"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    buttonHeight: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 24,
+      table: {
+        defaultValue: {
+          summary: 24
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    buttonPadding: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 10,
+      table: {
+        defaultValue: {
+          summary: 10
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    domain: {
+      control: {
+        type: "array"
+      },
+      defaultValue: "[\n2001,\n2010\n]",
+      table: {
+        defaultValue: {
+          summary: "[\n2001,\n2010\n]"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array"
+      }
+    },
+    gridSize: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 0,
+      table: {
+        defaultValue: {
+          summary: 0
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    handleConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fill: colorDefaults.light, stroke: #228be6, stroke-width: 2, rx: 2, ry: 2}",
+      table: {
+        defaultValue: {
+          summary: "{fill: colorDefaults.light, stroke: #228be6, stroke-width: 2, rx: 2, ry: 2}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    handleSize: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 6,
+      table: {
+        defaultValue: {
+          summary: 6
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    height: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 100,
+      table: {
+        defaultValue: {
+          summary: 100
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    labelOffset: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    on: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "{}",
+      table: {
+        defaultValue: {
+          summary: "{}"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    orient: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "bottom",
+      description: "Supports `\"top\"`, `\"right\"`, `\"bottom\"`, and `\"left\"` orientations.",
+      table: {
+        defaultValue: {
+          summary: "bottom"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    playButton: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    },
+    playButtonConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fontColor: colorDefaults.dark, fontSize: 15, text: () => this._playTimer ? &#x23f8;&#xFE0E; : ⏵, textAnchor: middle, verticalAlign: middle}",
+      table: {
+        defaultValue: {
+          detail: "{fontColor: colorDefaults.dark, fontSize: 15, text: () => this._playTimer ? &#x23f8;&#xFE0E; : ⏵, textAnchor: middle, verticalAlign: middle}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    playButtonInterval: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 1000,
+      table: {
+        defaultValue: {
+          summary: 1000
+        }
+      },
+      type: {
+        required: false,
+        summary: "number"
+      }
+    },
+    render: {
+      control: {},
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "function"
+      }
+    },
+    selection: {
+      control: {
+        type: "array"
+      },
+      table: {
+        defaultValue: {
+          summary: "undefined"
+        }
+      },
+      type: {
+        required: false,
+        summary: "array | date | number | string"
+      }
+    },
+    selectionConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "{fill: #228be6, fill-opacity: () => this._buttonBehaviorCurrent === buttons ? 0.3 : 1, stroke-width: 0}",
+      table: {
+        defaultValue: {
+          detail: "{fill: #228be6, fill-opacity: () => this._buttonBehaviorCurrent === buttons ? 0.3 : 1, stroke-width: 0}",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    shape: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Rect",
+      table: {
+        defaultValue: {
+          summary: "Rect"
+        }
+      },
+      type: {
+        required: false,
+        summary: "string"
+      }
+    },
+    shapeConfig: {
+      control: {
+        type: "object"
+      },
+      defaultValue: "assign({}, this._shapeConfig, {labelBounds: (d) => this._buttonBehaviorCurrent === buttons ? {x: d.labelBounds.x, y: -this._buttonHeight / 2 + 1, width: d.labelBounds.width, height: this._buttonHeight} : d.labelBounds, labelConfig: {fontColor: colorDefaults.dark, fontSize: () => 12, verticalAlign: () => this._buttonBehaviorCurrent === buttons ? middle : top}, fill: () => this._buttonBehaviorCurrent === buttons ? #fff : colorMid, stroke: () => this._buttonBehaviorCurrent === buttons ? colorMid : transparent, height: (d) => this._buttonBehaviorCurrent === buttons ? this._buttonHeight : d.tick ? this._handleSize : 0, width: (d) => this._buttonBehaviorCurrent === buttons ? this._ticksWidth / this._availableTicks.length : d.tick ? this._domain.map(Number).includes(d.id) ? 2 : 1 : 0, y: (d) => this._buttonBehaviorCurrent === buttons ? this._align === middle ? this._height / 2 : this._align === start ? this._margin.top + this._buttonHeight / 2 : this._height - this._buttonHeight / 2 - this._margin.bottom : d.y, rx: (d) => this._buttonBehaviorCurrent === buttons ? 0 : this._domain.map(Number).includes(d.id) ? 1 : 0, ry: (d) => this._buttonBehaviorCurrent === buttons ? 0 : this._domain.map(Number).includes(d.id) ? 1 : 0})",
+      table: {
+        defaultValue: {
+          detail: "assign({}, this._shapeConfig, {labelBounds: (d) => this._buttonBehaviorCurrent === buttons ? {x: d.labelBounds.x, y: -this._buttonHeight / 2 + 1, width: d.labelBounds.width, height: this._buttonHeight} : d.labelBounds, labelConfig: {fontColor: colorDefaults.dark, fontSize: () => 12, verticalAlign: () => this._buttonBehaviorCurrent === buttons ? middle : top}, fill: () => this._buttonBehaviorCurrent === buttons ? #fff : colorMid, stroke: () => this._buttonBehaviorCurrent === buttons ? colorMid : transparent, height: (d) => this._buttonBehaviorCurrent === buttons ? this._buttonHeight : d.tick ? this._handleSize : 0, width: (d) => this._buttonBehaviorCurrent === buttons ? this._ticksWidth / this._availableTicks.length : d.tick ? this._domain.map(Number).includes(d.id) ? 2 : 1 : 0, y: (d) => this._buttonBehaviorCurrent === buttons ? this._align === middle ? this._height / 2 : this._align === start ? this._margin.top + this._buttonHeight / 2 : this._height - this._buttonHeight / 2 - this._margin.bottom : d.y, rx: (d) => this._buttonBehaviorCurrent === buttons ? 0 : this._domain.map(Number).includes(d.id) ? 1 : 0, ry: (d) => this._buttonBehaviorCurrent === buttons ? 0 : this._domain.map(Number).includes(d.id) ? 1 : 0})",
+          summary: "function"
+        }
+      },
+      type: {
+        required: false,
+        summary: "object"
+      }
+    },
+    snapping: {
+      control: {
+        type: "boolean"
+      },
+      defaultValue: true,
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      },
+      type: {
+        required: false,
+        summary: "boolean"
+      }
+    }
+  }
+);