lucid-ui
Version:
A UI component library from AppNexus.
1,778 lines (1,777 loc) • 337 kB
JSON
{
"Accordion.Item": {
"displayName": "Item",
"description": "",
"componentRef": "ExpanderPanel"
},
"Accordion.Header": {
"displayName": "Header",
"description": "",
"componentRef": "ExpanderPanel.Header"
},
"Accordion": {
"description": "This is a container that renders panels and controls its expansion/retraction.",
"displayName": "Accordion",
"methods": [
{
"name": "handleToggle",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "isExpanded",
"type": null
},
{
"name": "index",
"type": null
},
{
"name": "event",
"type": null
}
],
"returns": null
}
],
"isPrivateComponent": false,
"props": {
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root\nelement."
},
"selectedIndex": {
"type": {
"name": "number"
},
"required": false,
"description": "Indicates which item is expanded."
},
"onSelect": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when the user clicks on the component's header of an item.\n\nSignature: `(itemIndex, { event, props }) => {}`",
"defaultValue": {
"value": "_.noop",
"computed": true
}
},
"style": {
"type": {
"name": "object"
},
"required": false,
"description": "Passed through to the root element."
},
"Header": {
"type": {
"name": "any"
},
"required": false,
"description": "prop alternative to Header child component\npassed through to the underlying ExpanderPanel"
}
},
"childComponents": [
{
"displayName": "Item",
"description": "",
"componentRef": "ExpanderPanel"
},
{
"displayName": "Header",
"description": "",
"componentRef": "ExpanderPanel.Header"
}
],
"customData": {
"categories": [
"layout"
],
"madeFrom": [
"ExpanderPanel"
]
}
},
"Autocomplete": {
"description": "A text input with suggested values displayed in an attached menu.",
"displayName": "Autocomplete",
"methods": [
{
"name": "handleSelect",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "optionIndex",
"type": null
},
{
"name": "{ event }",
"type": null
}
],
"returns": null
},
{
"name": "handleInput",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "event",
"type": null
}
],
"returns": null
},
{
"name": "getInputValue",
"docblock": null,
"modifiers": [],
"params": [],
"returns": null
},
{
"name": "setInputValue",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "value",
"type": null
}
],
"returns": null
},
{
"name": "handleInputKeydown",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "event",
"type": null
}
],
"returns": null
},
{
"name": "handleControlClick",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "event",
"type": null
}
],
"returns": null
}
],
"isPrivateComponent": true,
"props": {
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root elements."
},
"style": {
"type": {
"name": "object"
},
"required": false,
"description": "Styles that are passed through to root element."
},
"isDisabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Disables the Autocomplete from being clicked or focused.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"suggestions": {
"type": {
"name": "arrayOf",
"value": {
"name": "string"
}
},
"required": false,
"description": "Array of suggested text input values shown in drop menu.",
"defaultValue": {
"value": "[]",
"computed": false
}
},
"value": {
"type": {
"name": "string"
},
"required": false,
"description": "Text value of the input.",
"defaultValue": {
"value": "''",
"computed": false
}
},
"DropMenu": {
"type": {
"name": "shape",
"value": "DropMenu.propTypes",
"computed": true
},
"required": false,
"description": "Object of DropMenu props which are passed thru to the underlying DropMenu component.",
"defaultValue": {
"value": "DropMenu.getDefaultProps()",
"computed": true
}
},
"onChange": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when the input value changes.\nHas the signature `(value, {props, event}) => {}` where value is a string.",
"defaultValue": {
"value": "_.noop",
"computed": true
}
},
"onSelect": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when a suggestion is selected from the menu.\nHas the signature `(optionIndex, {props, event}) => {}` where optionIndex is a number.",
"defaultValue": {
"value": "_.noop",
"computed": true
}
},
"onExpand": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when menu is expected to expand.\nHas the signature `({props, event}) => {}`.",
"defaultValue": {
"value": "_.noop",
"computed": true
}
}
},
"childComponents": [],
"customData": {
"categories": [
"controls",
"text"
],
"madeFrom": [
"DropMenu"
]
}
},
"Axis": {
"description": "*For use within an `svg`*\n\nAxes are used to help render human-readable reference marks on charts. They\ncan either be horizontal or vertical and really only need a scale to be able\nto draw properly.\n\nThis component is a very close sister to d3's svg axis and most of the logic\nwas ported from there.",
"displayName": "Axis",
"methods": [],
"isPrivateComponent": false,
"props": {
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root element."
},
"scale": {
"type": {
"name": "func"
},
"required": true,
"description": "Must be a d3 scale. Lucid exposes the `lucid.d3Scale` library for use\nhere."
},
"innerTickSize": {
"type": {
"name": "number"
},
"required": false,
"description": "Size of the ticks for each discrete tick mark.",
"defaultValue": {
"value": "6",
"computed": false
}
},
"outerTickSize": {
"type": {
"name": "number"
},
"required": false,
"description": "Size of the tick marks found at the beginning and end of the axis. It's\ncommon to set this to `0` to remove them.",
"defaultValue": {
"value": "6",
"computed": false
}
},
"tickFormat": {
"type": {
"name": "func"
},
"required": false,
"description": "An optional function that can format ticks. Generally this shouldn't be\nneeded since d3 has very good default formatters for most data.\n\nSignature: `(tick) => {}`"
},
"ticks": {
"type": {
"name": "array"
},
"required": false,
"description": "If you need fine grained control over the axis ticks, you can pass them\nin this array."
},
"tickPadding": {
"type": {
"name": "number"
},
"required": false,
"description": "Determines the spacing between each tick and its text.",
"defaultValue": {
"value": "3",
"computed": false
}
},
"orient": {
"type": {
"name": "enum",
"value": [
{
"value": "'top'",
"computed": false
},
{
"value": "'bottom'",
"computed": false
},
{
"value": "'left'",
"computed": false
},
{
"value": "'right'",
"computed": false
}
]
},
"required": false,
"description": "Determines the orientation of the ticks. `left` and `right` will\ngenerate a vertical axis, whereas `top` and `bottom` will generate a\nhorizontal axis.",
"defaultValue": {
"value": "'bottom'",
"computed": false
}
},
"tickCount": {
"type": {
"name": "number"
},
"required": false,
"description": "Control the number of ticks displayed.\n\nIf the scale is time based or linear, this number acts a \"hint\" per the\ndefault behavior of D3. If it's an ordinal scale, this number is treated\nas an absolute number of ticks to display and is powered by our own\nutility function `discreteTicks`.",
"defaultValue": {
"value": "null",
"computed": false
}
}
},
"childComponents": [],
"customData": {
"categories": [
"visualizations",
"chart primitives"
]
}
},
"AxisLabel": {
"description": "*For use within an `svg`*\n\nCentered labels for axes that typically are fit into the margins of a chart.",
"displayName": "AxisLabel",
"methods": [],
"isPrivateComponent": false,
"props": {
"style": {
"type": {
"name": "object"
},
"required": false,
"description": "Passed through to the root element."
},
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root element."
},
"height": {
"type": {
"name": "number"
},
"required": true,
"description": "Height of the margin this label should fit into."
},
"width": {
"type": {
"name": "number"
},
"required": true,
"description": "Width of the margin this label should fit into."
},
"color": {
"type": {
"name": "string"
},
"required": false,
"description": "Strings should match an existing color class unless they start with a\n'#' for specific colors. E.g.:\n\n- `COLOR_0`\n- `COLOR_GOOD`\n- `'#123abc'`",
"defaultValue": {
"value": "'#000'",
"computed": false
}
},
"label": {
"type": {
"name": "string"
},
"required": false,
"description": "Contents of the label, should only ever be a string since we use a `text`\nunder the hood."
},
"orient": {
"type": {
"name": "enum",
"value": [
{
"value": "'top'",
"computed": false
},
{
"value": "'bottom'",
"computed": false
},
{
"value": "'left'",
"computed": false
},
{
"value": "'right'",
"computed": false
}
]
},
"required": false,
"description": "Determine orientation of the label."
}
},
"childComponents": [],
"customData": {
"categories": [
"visualizations",
"chart primitives"
]
}
},
"Badge": {
"description": "`Badge` is a quick utility component to create a badge around any\nelement(s). Do not wrap existing `Icon`s in a badge, rather add the\n`isBadge` prop to any Icon component to turn it into a badge.",
"displayName": "Badge",
"methods": [],
"isPrivateComponent": false,
"props": {
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "class names that are appended to the defaults"
},
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "any valid React children"
}
},
"childComponents": [],
"customData": {
"categories": [
"visual design",
"icons"
]
}
},
"Banner": {
"description": "A basic Banner. Any props that are not explicitly called out below will be\npassed through to the native `Banner` component.\n\nShort single line content can be passed in as a simple string. Multi line\nmessages should be passed wrapped in a `<p>` tag.\n\nIt is valid to use `strong` or `em` within a `Banner` message.",
"displayName": "Banner",
"methods": [
{
"name": "handleClose",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "event",
"type": null
}
],
"returns": null
}
],
"isPrivateComponent": false,
"props": {
"hasIcon": {
"type": {
"name": "bool"
},
"required": false,
"description": "Pass in a bool to display predefined icon based on `kind`.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"icon": {
"type": {
"name": "element"
},
"required": false,
"description": "Pass in a icon component for custom icons within `Banner`.",
"defaultValue": {
"value": "null",
"computed": false
}
},
"isCloseable": {
"type": {
"name": "bool"
},
"required": false,
"description": "Set this to `true` if you want to have a `x` close icon.",
"defaultValue": {
"value": "true",
"computed": false
}
},
"hasRoundedCorners": {
"type": {
"name": "bool"
},
"required": false,
"description": "Set this value to `false` if you want to remove the rounded corners on\nthe `Banner`. **default is `true`**",
"defaultValue": {
"value": "true",
"computed": false
}
},
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Class names that are appended to the defaults."
},
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Any valid React children."
},
"kind": {
"type": {
"name": "enum",
"value": [
{
"value": "'primary'",
"computed": false
},
{
"value": "'success'",
"computed": false
},
{
"value": "'warning'",
"computed": false
},
{
"value": "'danger'",
"computed": false
},
{
"value": "'info'",
"computed": false
},
{
"value": "'default'",
"computed": false
}
]
},
"required": false,
"description": "Style variations of the `Banner`.",
"defaultValue": {
"value": "'default'",
"computed": false
}
},
"isSmall": {
"type": {
"name": "bool"
},
"required": false,
"description": "If set to `true` the banner have smaller padding on the inside.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onClose": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when the user closes the `Banner`.\n\nSignature: `({ event, props }) => {}`",
"defaultValue": {
"value": "_.noop",
"computed": true
}
},
"isClosed": {
"type": {
"name": "bool"
},
"required": false,
"description": "Controls the visibility of the `Banner`."
}
},
"childComponents": [],
"customData": {
"categories": [
"communication"
],
"madeFrom": [
"DangerIcon",
"InfoIcon",
"SuccessIcon",
"WarningIcon"
]
}
},
"Bar": {
"description": "*For use within an `svg`*\n\nBars are typically used for bar charts and are pretty much a thin wrapper\naround svg rects.",
"displayName": "Bar",
"methods": [],
"isPrivateComponent": false,
"props": {
"style": {
"type": {
"name": "object"
},
"required": false,
"description": "Passed through to the root element."
},
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root element."
},
"x": {
"type": {
"name": "number"
},
"required": false,
"description": "x coordinate.",
"defaultValue": {
"value": "0",
"computed": false
}
},
"y": {
"type": {
"name": "number"
},
"required": false,
"description": "y coordinate.",
"defaultValue": {
"value": "0",
"computed": false
}
},
"height": {
"type": {
"name": "number"
},
"required": false,
"description": "Height of the bar.",
"defaultValue": {
"value": "0",
"computed": false
}
},
"width": {
"type": {
"name": "number"
},
"required": false,
"description": "Width of the bar.",
"defaultValue": {
"value": "0",
"computed": false
}
},
"hasStroke": {
"type": {
"name": "bool"
},
"required": false,
"description": "Determines if the bar has a white stroke around it."
},
"color": {
"type": {
"name": "string"
},
"required": false,
"description": "Strings should match an existing color class unless they start with a\n'#' for specific colors. E.g.:\n\n- `COLOR_0`\n- `COLOR_GOOD`\n- `'#123abc'`",
"defaultValue": {
"value": "chartConstants.COLOR_0",
"computed": true
}
}
},
"childComponents": [],
"customData": {
"categories": [
"visualizations",
"geoms"
]
}
},
"BarChart.EmptyStateWrapper": {
"displayName": "EmptyStateWrapper",
"description": "",
"componentRef": "EmptyStateWrapper"
},
"BarChart": {
"description": "Bar charts are great for showing data that fits neatly in to \"buckets\". The\nx axis data must be strings, and the y axis data must be numeric.",
"displayName": "BarChart",
"methods": [],
"isPrivateComponent": false,
"props": {
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root element."
},
"height": {
"type": {
"name": "number"
},
"required": false,
"description": "Height of the chart.",
"defaultValue": {
"value": "400",
"computed": false
}
},
"width": {
"type": {
"name": "number"
},
"required": false,
"description": "Width of the chart.",
"defaultValue": {
"value": "1000",
"computed": false
}
},
"margin": {
"type": {
"name": "shape",
"value": {
"top": {
"name": "number",
"required": false
},
"right": {
"name": "number",
"required": false
},
"bottom": {
"name": "number",
"required": false
},
"left": {
"name": "number",
"required": false
}
}
},
"required": false,
"description": "An object defining the margins of the chart. These margins typically\ncontain the axis and labels.",
"defaultValue": {
"value": "{\n top: 10,\n right: 20,\n bottom: 50,\n left: 80,\n}",
"computed": false
}
},
"data": {
"type": {
"name": "arrayOf",
"value": {
"name": "object"
}
},
"required": false,
"description": "Data for the chart. E.g.\n\n [\n { x: 'Monday' , y: 1 } ,\n { x: 'Tuesday' , y: 2 } ,\n { x: 'Wednesday' , y: 3 } ,\n { x: 'Thursday' , y: 2 } ,\n { x: 'Friday' , y: 5 } ,\n ]"
},
"legend": {
"type": {
"name": "object"
},
"required": false,
"description": "An object with human readable names for fields that will be used for\nlegends and tooltips. E.g:\n\n {\n x: 'Date',\n y: 'Impressions',\n }"
},
"isLoading": {
"type": {
"name": "bool"
},
"required": false,
"description": "Controls the visibility of the `LoadingMessage`."
},
"hasToolTips": {
"type": {
"name": "bool"
},
"required": false,
"description": "Show tool tips on hover.",
"defaultValue": {
"value": "true",
"computed": false
}
},
"hasLegend": {
"type": {
"name": "bool"
},
"required": false,
"description": "Show a legend at the bottom of the chart.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"palette": {
"type": {
"name": "arrayOf",
"value": {
"name": "string"
}
},
"required": false,
"description": "Takes one of the palettes exported from `lucid.chartConstants`.\nAvailable palettes:\n\n- `PALETTE_6` (default)\n- `PALETTE_30`\n- `PALETTE_MONOCHROME_0_5`\n- `PALETTE_MONOCHROME_1_5`\n- `PALETTE_MONOCHROME_2_5`\n- `PALETTE_MONOCHROME_3_5`\n- `PALETTE_MONOCHROME_4_5`\n- `PALETTE_MONOCHROME_5_5`",
"defaultValue": {
"value": "chartConstants.PALETTE_6",
"computed": true
}
},
"colorMap": {
"type": {
"name": "object"
},
"required": false,
"description": "You can pass in an object if you want to map x values to\n`lucid.chartConstants` or custom colors:\n\n {\n 'imps': COLOR_0,\n 'rev': COLOR_3,\n 'clicks': '#abc123',\n }"
},
"xAxisField": {
"type": {
"name": "string"
},
"required": false,
"description": "The field we should look up your x data by. Your actual x data must be\nstrings.",
"defaultValue": {
"value": "'x'",
"computed": false
}
},
"xAxisTickCount": {
"type": {
"name": "number"
},
"required": false,
"description": "There are some cases where you need to only show a \"sampling\" of ticks\non the x axis. This number will control that.",
"defaultValue": {
"value": "null",
"computed": false
}
},
"xAxisFormatter": {
"type": {
"name": "func"
},
"required": false,
"description": "An optional function used to format your x axis data. If you don't\nprovide anything, we'll use an identity function.",
"defaultValue": {
"value": "_.identity",
"computed": true
}
},
"xAxisTitle": {
"type": {
"name": "string"
},
"required": false,
"description": "Set a title for the x axis.",
"defaultValue": {
"value": "null",
"computed": false
}
},
"xAxisTitleColor": {
"type": {
"name": "union",
"value": [
{
"name": "number"
},
{
"name": "string"
}
]
},
"required": false,
"description": "Set a color for the x axis title. Use the color constants exported off\n`lucid.chartConstants`. E.g.:\n\n- `COLOR_0`\n- `COLOR_GOOD`\n- `'#123abc'` // custom color hex\n\n`number` is supported only for backwards compatability.",
"defaultValue": {
"value": "'#000'",
"computed": false
}
},
"yAxisFields": {
"type": {
"name": "array"
},
"required": false,
"description": "An array of your y axis fields. Typically this will just be a single\nitem unless you need to display grouped or stacked bars. The order of\nthe array determines the series order in the chart.",
"defaultValue": {
"value": "['y']",
"computed": false
}
},
"yAxisMin": {
"type": {
"name": "number"
},
"required": false,
"description": "The minimum number the y axis should display. Typically this\nshould be be `0`.",
"defaultValue": {
"value": "0",
"computed": false
}
},
"yAxisMax": {
"type": {
"name": "number"
},
"required": false,
"description": "The maximum number the y axis should display. This should almost always\nbe the largest number from your dataset."
},
"yAxisFormatter": {
"type": {
"name": "func"
},
"required": false,
"description": "An optional function used to format your y axis data. If you don't\nprovide anything, we use the default D3 number formatter."
},
"yAxisIsStacked": {
"type": {
"name": "bool"
},
"required": false,
"description": "Stack the y axis data instead of showing it as groups. This is only\nuseful if you have multiple `yAxisFields`. Stacking will cause the chart\nto be aggregated by sum.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"yAxisTickCount": {
"type": {
"name": "number"
},
"required": false,
"description": "There are some cases where you need to only show a \"sampling\" of ticks\non the y axis. This number will control that.",
"defaultValue": {
"value": "null",
"computed": false
}
},
"yAxisTitle": {
"type": {
"name": "string"
},
"required": false,
"description": "Set a title for the y axis.",
"defaultValue": {
"value": "null",
"computed": false
}
},
"yAxisTitleColor": {
"type": {
"name": "union",
"value": [
{
"name": "number"
},
{
"name": "string"
}
]
},
"required": false,
"description": "Set a color for the y axis title. Use the color constants exported off\n`lucid.chartConstants`. E.g.:\n\n- `COLOR_0`\n- `COLOR_GOOD`\n- `'#123abc'` // custom color hex\n\n`number` is supported only for backwards compatability.",
"defaultValue": {
"value": "'#000'",
"computed": false
}
},
"yAxisTooltipFormatter": {
"type": {
"name": "func"
},
"required": false,
"description": "An optional function used to format your y axis titles and data in the\ntooltips. The first value is the name of your y field, the second value\nis your post-formatted y value, and the third value is your non-formatted\ny-value.\n\nSignature: `(yField, yValueFormatted, yValue) => {}`",
"defaultValue": {
"value": "(yField, yValueFormatted) => `${yField}: ${yValueFormatted}`",
"computed": false
}
},
"yAxisTooltipDataFormatter": {
"type": {
"name": "func"
},
"required": false,
"description": "An optional function used to format data in the tooltips."
}
},
"childComponents": [
{
"displayName": "EmptyStateWrapper",
"description": "",
"componentRef": "EmptyStateWrapper"
}
],
"customData": {
"categories": [
"visualizations",
"charts"
],
"madeFrom": [
"ContextMenu",
"ToolTip"
]
}
},
"Bars": {
"description": "*For use within an `svg`*\n\nBars are typically used to represent categorical data and can be stacked or\ngrouped.",
"displayName": "Bars",
"methods": [],
"isPrivateComponent": false,
"props": {
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root element."
},
"data": {
"type": {
"name": "arrayOf",
"value": {
"name": "object"
}
},
"required": true,
"description": "De-normalized data\n\n [\n { x: 'one', y0: 1, y1: 2, y2: 3, y3: 5 },\n { x: 'two', y0: 2, y1: 3, y2: 4, y3: 6 },\n { x: 'three', y0: 2, y1: 4, y2: 5, y3: 6 },\n { x: 'four', y0: 3, y1: 6, y2: 7, y3: 7 },\n { x: 'five', y0: 4, y1: 8, y2: 9, y3: 8 },\n ]"
},
"legend": {
"type": {
"name": "object"
},
"required": false,
"description": "An object with human readable names for fields that will be used for\ntooltips. E.g:\n\n {\n rev: 'Revenue',\n imps: 'Impressions',\n }"
},
"hasToolTips": {
"type": {
"name": "bool"
},
"required": false,
"description": "Show tool tips on hover.",
"defaultValue": {
"value": "true",
"computed": false
}
},
"palette": {
"type": {
"name": "arrayOf",
"value": {
"name": "string"
}
},
"required": false,
"description": "Takes one of the palettes exported from `lucid.chartConstants`.\nAvailable palettes:\n\n- `PALETTE_6` (default)\n- `PALETTE_30`\n- `PALETTE_MONOCHROME_0_5`\n- `PALETTE_MONOCHROME_1_5`\n- `PALETTE_MONOCHROME_2_5`\n- `PALETTE_MONOCHROME_3_5`\n- `PALETTE_MONOCHROME_4_5`\n- `PALETTE_MONOCHROME_5_5`",
"defaultValue": {
"value": "chartConstants.PALETTE_6",
"computed": true
}
},
"colorMap": {
"type": {
"name": "object"
},
"required": false,
"description": "You can pass in an object if you want to map fields to\n`lucid.chartConstants` or custom colors:\n\n {\n 'imps': COLOR_0,\n 'rev': COLOR_3,\n 'clicks': '#abc123',\n }"
},
"xScale": {
"type": {
"name": "func"
},
"required": true,
"description": "The scale for the x axis. Must be a d3 band scale. Lucid exposes the\n`lucid.d3Scale.scaleBand` library for use here."
},
"xField": {
"type": {
"name": "string"
},
"required": false,
"description": "The field we should look up your x data by.",
"defaultValue": {
"value": "'x'",
"computed": false
}
},
"xFormatter": {
"type": {
"name": "func"
},
"required": false,
"description": "Function to format the x data.",
"defaultValue": {
"value": "_.identity",
"computed": true
}
},
"yScale": {
"type": {
"name": "func"
},
"required": true,
"description": "The scale for the y axis. Must be a d3 scale. Lucid exposes the\n`lucid.d3Scale` library for use here."
},
"yFields": {
"type": {
"name": "arrayOf",
"value": {
"name": "string"
}
},
"required": false,
"description": "The field(s) we should look up your y data by. Each entry represents a\nseries. Your actual y data should be numeric.",
"defaultValue": {
"value": "['y']",
"computed": false
}
},
"yFormatter": {
"type": {
"name": "func"
},
"required": false,
"description": "Function to format the y data.",
"defaultValue": {
"value": "_.identity",
"computed": true
}
},
"yStackedMax": {
"type": {
"name": "number"
},
"required": false,
"description": "Typically this number can be derived from the yScale. However when we're\n`isStacked` we need to calculate a new domain for the yScale based on\nthe sum of the data. If you need explicit control of the y max when\nstacking, pass it in here."
},
"yTooltipFormatter": {
"type": {
"name": "func"
},
"required": false,
"description": "An optional function used to format your y axis titles and data in the\ntooltips. The first value is the name of your y field, the second value\nis your post-formatted y value, and the third value is your non-formatted\ny-value.\n\nSignature: `(yField, yValueFormatted, yValue) => {}`",
"defaultValue": {
"value": "(yField, yValueFormatted) => `${yField}: ${yValueFormatted}`",
"computed": false
}
},
"isStacked": {
"type": {
"name": "bool"
},
"required": false,
"description": "This will stack the data instead of grouping it. In order to stack the\ndata we have to calculate a new domain for the y scale that is based on\nthe `sum` of the data.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"colorOffset": {
"type": {
"name": "number"
},
"required": false,
"description": "Sometimes you might not want the colors to start rotating at the blue\ncolor, this number will be added the bar index in determining which\ncolor the bars are.",
"defaultValue": {
"value": "0",
"computed": false
}
}
},
"childComponents": [],
"customData": {
"categories": [
"visualizations",
"chart primitives"
],
"madeFrom": [
"Bar",
"ToolTip",
"Legend"
]
}
},
"Breadcrumb.SeparatorIcon": {
"displayName": "SeparatorIcon",
"description": "",
"componentRef": "SeparatorIcon"
},
"Breadcrumb.Item": {
"description": "",
"displayName": "Item",
"methods": [],
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": ""
}
}
},
"Breadcrumb": {
"description": "Navigation component to show a user's place in a navigation hierarchy and\nprovide links to return to higher points in the hierarchy",
"displayName": "Breadcrumb",
"methods": [],
"isPrivateComponent": false,
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "All children should be `Breadcrumb.Item`s. Others are ignored."
},
"className": {
"type": {
"name": "any"
},
"required": false,
"description": "Appended to the component-specific class names set on the root\nelement. Value is run through the `classnames` library."
}
},
"childComponents": [
{
"displayName": "SeparatorIcon",
"description": "",
"componentRef": "SeparatorIcon"
},
{
"description": "",
"displayName": "Item",
"methods": [],
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": ""
}
}
}
],
"customData": {
"categories": [
"navigation"
],
"madeFrom": [
"SeparatorIcon"
]
}
},
"Button": {
"description": "A basic button. Any props that are not explicitly called out below will be\npassed through to the native `button` component.",
"displayName": "Button",
"methods": [
{
"name": "handleClick",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "event",
"type": null
}
],
"returns": null
}
],
"isPrivateComponent": false,
"props": {
"isDisabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Disables the Button by greying it out",
"defaultValue": {
"value": "false",
"computed": false
}
},
"isActive": {
"type": {
"name": "bool"
},
"required": false,
"description": "Activates the Button by giving it a \"pressed down\" look",
"defaultValue": {
"value": "false",
"computed": false
}
},
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Class names that are appended to the defaults"
},
"hasOnlyIcon": {
"type": {
"name": "bool"
},
"required": false,
"description": "Set this to `true` if you want the Button to only contain\nan icon.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"children": {
"type": {
"name": "union",
"value": [
{
"name": "node"
},
{
"name": "arrayOf",
"value": {
"name": "node"
}
}
]
},
"required": false,
"description": "Any valid React children"
},
"kind": {
"type": {
"name": "enum",
"value": [
{
"value": "'primary'",
"computed": false
},
{
"value": "'link'",
"computed": false
},
{
"value": "'success'",
"computed": false
},
{
"value": "'warning'",
"computed": false
},
{
"value": "'danger'",
"computed": false
},
{
"value": "'info'",
"computed": false
}
]
},
"required": false,
"description": "Style variations of the Button"
},
"size": {
"type": {
"name": "enum",
"value": [
{
"value": "'short'",
"computed": false
},
{
"value": "'small'",
"computed": false
},
{
"value": "'large'",
"computed": false
}
]
},
"required": false,
"description": "Size variations of the Button"
},
"onClick": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when the user clicks the `Button`.\n\nSignature: `({ event, props }) => {}`",
"defaultValue": {
"value": "_.noop",
"computed": true
}
},
"type": {
"type": {
"name": "string"
},
"required": false,
"description": "Form element type variations of Button. Defaults to 'button' to avoid\nbeing triggered by 'Enter' anywhere on the page. Passed through to DOM\nButton.",
"defaultValue": {
"value": "'button'",
"computed": false
}
}
},
"childComponents": [],
"customData": {
"categories": [
"controls",
"buttons"
]
}
},
"ButtonGroup.Button": {
"description": "Renders a `<Button`> inside the `ButtonGroup`.",
"displayName": "Button",
"methods": []
},
"ButtonGroup": {
"description": "Button groups allow you to pair buttons together to form a seamless cluster.\nAny props not explicitly called out are spread on to the root component.",
"displayName": "ButtonGroup",
"methods": [
{
"name": "handleSelect",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "{ event, props: childProps }",
"type": null
}
],
"returns": null
}
],
"isPrivateComponent": false,
"props": {
"onSelect": {
"type": {
"name": "func"
},
"required": false,
"description": "A function that is called with the index of the child button clicked.\n`props` refers to the child button props.\n\nSignature: `(selectedIndex, { event, props }) => {}`",
"defaultValue": {
"value": "_.noop",
"computed": true
}
},
"className": {
"type": {
"name": "any"
},
"required": false,
"description": "Appended to the component-specific class names set on the root\nelement. Value is run through the `classnames` library.",
"defaultValue": {
"value": "null",
"computed": false
}
},
"children": {
"type": {
"name": "any"
},
"required": false,
"description": "All children should be `ButtonGroup.Button`s and they support the same\nprops as `Button`s.",
"defaultValue": {
"value": "null",
"computed": false
}
},
"selectedIndices": {
"type": {
"name": "arrayOf",
"value": {
"name": "number"
}
},
"required": false,
"description": "An array of currently selected `ButtonGroup.Button`s indices. You can\nalso pass the prop `isActive` to individual `ButtonGroup.Button`\ncomponents.",
"defaultValue": {
"value": "[]",
"computed": false
}
}
},
"childComponents": [
{
"description": "Renders a `<Button`> inside the `ButtonGroup`.",
"displayName": "Button",
"methods": []
}
],
"customData": {
"categories": [
"controls",
"buttons"
],
"madeFrom": [
"Button"
]
}
},
"Checkbox": {
"description": "This is a checkbox. It's a component that is in one of two particular states\nat any given moment. It features a custom visualization of the native\ncheckbox button control to reflect its current state.\n\nIt uses a hidden native checkbox control under the hood but leverages other\nHTML elements to visualize its state.",
"displayName": "Checkbox",
"methods": [
{
"name": "handleSpanClick",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "e",
"type": null
}
],
"returns": null
},
{
"name": "handleClicked",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "event",
"type": null
}
],
"returns": null
}
],
"isPrivateComponent": false,
"props": {
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root\nelement."
},
"isIndeterminate": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates whether the component should appear in an \"indeterminate\"\nor \"partially checked\" state. This prop takes precedence over\n`isSelected`.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"isDisabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates whether the component should appear and act disabled by\nhaving a \"greyed out\" palette and ignoring user interactions.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"isSelected": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates that the component is in the \"selected\" state when true\nand in the \"unselected\" state when false. This props is ignored if\n`isIndeterminate` is `true`.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onSelect": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when the user clicks on the component or when they press the\nspace key while the component is in focus.\n\nSignature: `(isSelected, { event, props }) => {}`",
"defaultValue": {
"value": "_.noop",
"computed": true
}
},
"style": {
"type": {
"name": "object"
},
"required": false,
"description": "Passed through to the root element."
}
},
"childComponents": [],
"customData": {
"categories": [
"controls",
"toggles"
]
}
},
"CheckboxLabeled.Label": {
"description": "",
"displayName": "Label",
"methods": [],
"propName": "Label",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Used to identify the purpose of this checkbox to the user -- can\nbe any renderable content."
}
}
},
"CheckboxLabeled": {
"description": "This is a composite of the `Checkbox` component and the native `label`\nelement.",
"displayName": "CheckboxLabeled",
"methods": [],
"isPrivateComponent": false,
"props": {
"className": {
"type": {
"name": "string"
},
"required": false,
"description": "Appended to the component-specific class names set on the root\nelement."
},
"style": {
"type": {
"name": "object"
},
"required": false,
"description": "Passed through to the root element."
},
"Label": {
"type": {
"name": "any"
},
"required": false,
"description": "Child element whose children are used to identify the purpose of this\ncheckbox to the user."
},
"isIndeterminate": {
"defaultValue": {
"value": "false",
"computed": false
}
},
"isDisabled": {
"defaultValue": {
"value": "false",
"computed": false
}
},
"isSelected": {
"defaultValue": {
"value": "false",
"computed": false
}
},
"onSelect": {
"defaultValue": {
"value": "_.noop",
"computed": true
}
}
},
"composes": [
"../Checkbox/Checkbox"
],
"childComponents": [
{
"description": "",
"displayName": "Label",
"methods": [],
"propName": "Label",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Used to identify the purpose of this checkbox to the user -- can\nbe any renderable content."
}
}
}
],
"customData": {
"categories": [
"controls",
"toggles"
],
"extend": "Checkbox",