From 94fba3e9701ca40f4b5ac0fe2ef3844d82c0c425 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Fri, 8 Jul 2022 10:53:11 -0400 Subject: [PATCH 1/5] toggleGroups toggling --- .../src/components/Toolbar/ToolbarContent.tsx | 19 +- .../Toolbar/ToolbarExpandableContent.tsx | 7 +- .../components/Toolbar/ToolbarToggleGroup.tsx | 171 +- .../src/components/Toolbar/ToolbarUtils.tsx | 8 +- .../src/generated/charts/area-chart/react.js | 1370 + .../src/generated/charts/bar-chart/react.js | 1199 + .../generated/charts/bullet-chart/react.js | 845 + .../src/generated/charts/donut-chart/react.js | 428 + .../charts/donut-utilization-chart/react.js | 747 + .../src/generated/charts/legends/react.js | 412 + .../src/generated/charts/line-chart/react.js | 1190 + .../src/generated/charts/patterns/react.js | 3371 +++ .../src/generated/charts/pie-chart/react.js | 370 + .../generated/charts/resize-observer/react.js | 2503 ++ .../generated/charts/scatter-chart/react.js | 1398 + .../generated/charts/sparkline-chart/react.js | 975 + .../src/generated/charts/stack-chart/react.js | 1193 + .../src/generated/charts/themes/react.js | 184 + .../generated/charts/threshold-chart/react.js | 1169 + .../src/generated/charts/tooltips/react.js | 386 + .../generated/components/about-modal/react.js | 142 + .../generated/components/accordion/react.js | 218 + .../generated/components/action-list/react.js | 116 + .../generated/components/alert-group/react.js | 338 + .../src/generated/components/alert/react.js | 316 + .../components/application-launcher/react.js | 326 + .../src/generated/components/avatar/react.js | 95 + .../components/back-to-top/react-demos.js | 50 + .../generated/components/back-to-top/react.js | 74 + .../generated/components/backdrop/react.js | 62 + .../components/background-image/react.js | 60 + .../src/generated/components/badge/react.js | 67 + .../components/banner/react-demos.js | 43 + .../src/generated/components/banner/react.js | 70 + .../src/generated/components/brand/react.js | 137 + .../generated/components/breadcrumb/react.js | 187 + .../components/button/react-demos.js | 35 + .../src/generated/components/button/react.js | 245 + .../components/calendar-month/react.js | 236 + .../generated/components/card/react-demos.js | 165 + .../src/generated/components/card/react.js | 494 + .../generated/components/checkbox/react.js | 151 + .../generated/components/chip-group/react.js | 189 + .../src/generated/components/chip/react.js | 95 + .../components/clipboard-copy/react.js | 289 + .../generated/components/code-block/react.js | 110 + .../generated/components/code-editor/react.js | 625 + .../components/context-selector/react.js | 230 + .../components/data-list/react-demos.js | 41 + .../generated/components/data-list/react.js | 616 + .../components/date-picker/react-demos.js | 74 + .../generated/components/date-picker/react.js | 268 + .../components/description-list/react.js | 588 + .../src/generated/components/divider/react.js | 119 + .../components/drag-and-drop/react.js | 173 + .../src/generated/components/drawer/react.js | 452 + .../generated/components/dropdown/react.js | 675 + .../components/dual-list-selector/react.js | 632 + .../generated/components/empty-state/react.js | 175 + .../components/expandable-section/react.js | 210 + .../file-upload---multiple/react-demos.js | 39 + .../file-upload---multiple/react.js | 298 + .../generated/components/file-upload/react.js | 649 + .../generated/components/form-select/react.js | 215 + .../src/generated/components/form/react.js | 794 + .../components/helper-text/react-demos.js | 169 + .../generated/components/helper-text/react.js | 167 + .../src/generated/components/hint/react.js | 109 + .../generated/components/input-group/react.js | 115 + .../components/jump-links/react-demos.js | 125 + .../generated/components/jump-links/react.js | 184 + .../components/label-group/react-demos.js | 41 + .../generated/components/label-group/react.js | 310 + .../src/generated/components/label/react.js | 189 + .../src/generated/components/list/react.js | 157 + .../generated/components/login-page/react.js | 534 + .../components/masthead/react-demos.js | 39 + .../generated/components/masthead/react.js | 236 + .../generated/components/menu-toggle/react.js | 168 + .../src/generated/components/menu/react.js | 578 + .../src/generated/components/modal/react.js | 575 + .../components/navigation/react-demos.js | 121 + .../generated/components/navigation/react.js | 392 + .../components/notification-badge/react.js | 101 + .../notification-drawer/react-demos.js | 98 + .../components/notification-drawer/react.js | 355 + .../components/number-input/react.js | 182 + .../components/options-menu/react.js | 366 + .../components/overflow-menu/react.js | 192 + .../generated/components/page/react-demos.js | 121 + .../src/generated/components/page/react.js | 640 + .../generated/components/pagination/react.js | 384 + .../src/generated/components/panel/react.js | 181 + .../src/generated/components/popover/react.js | 332 + .../progress-stepper/react-demos.js | 33 + .../components/progress-stepper/react.js | 210 + .../components/progress/react-demos.js | 46 + .../generated/components/progress/react.js | 229 + .../src/generated/components/radio/react.js | 167 + .../components/search-input/react-demos.js | 101 + .../components/search-input/react.js | 241 + .../src/generated/components/select/react.js | 744 + .../src/generated/components/sidebar/react.js | 183 + .../generated/components/simple-list/react.js | 185 + .../generated/components/skeleton/react.js | 97 + .../components/skip-to-content/react.js | 65 + .../src/generated/components/slider/react.js | 235 + .../src/generated/components/spinner/react.js | 94 + .../src/generated/components/switch/react.js | 133 + .../components/table/react-composable.js | 2541 ++ .../generated/components/table/react-demos.js | 239 + .../components/table/react-legacy.js | 1331 + .../generated/components/tabs/react-demos.js | 99 + .../src/generated/components/tabs/react.js | 606 + .../generated/components/text-area/react.js | 102 + .../text-input-group/react-demos.js | 141 + .../components/text-input-group/react.js | 162 + .../generated/components/text-input/react.js | 182 + .../src/generated/components/text/react.js | 177 + .../generated/components/tile/react-demos.js | 38 + .../src/generated/components/tile/react.js | 127 + .../generated/components/time-picker/react.js | 227 + .../src/generated/components/title/react.js | 78 + .../components/toggle-group/react.js | 159 + .../components/toolbar/react-demos.js | 55 + .../src/generated/components/toolbar/react.js | 514 + .../src/generated/components/tooltip/react.js | 236 + .../generated/components/tree-view/react.js | 330 + .../generated/components/truncate/react.js | 88 + .../components/wizard/react-demos.js | 71 + .../src/generated/components/wizard/react.js | 716 + .../generated/consoles/desktopviewer/react.js | 169 + .../generated/demos/card-view/react-demos.js | 65 + .../demos/composable-menu/react-demos.js | 163 + .../demos/date-and-time-picker/react-demos.js | 49 + .../demos/password-generator/react-demos.js | 39 + .../demos/password-strength/react-demos.js | 48 + .../demos/primary-detail/react-demos.js | 109 + .../open-ui-automation/react.js | 324 + .../release-notes/react.js | 23211 ++++++++++++++++ .../upgrade-guide/react.js | 2424 ++ .../extensions/access-consoles/react.js | 85 + .../catalog-view-filter-side-panel/react.js | 198 + .../catalog-view-item-header/react.js | 97 + .../react.js | 102 + .../extensions/catalog-view-tile/react.js | 186 + .../catalog-view-vertical-tabs/react.js | 148 + .../extensions/log-viewer/react-demos.js | 74 + .../generated/extensions/log-viewer/react.js | 180 + .../extensions/virtual-scroll-table/react.js | 93 + .../virtual-scroll-window-scroller/react.js | 66 + packages/react-docs/src/generated/index.js | 1395 + .../src/generated/layouts/bullseye/react.js | 61 + .../src/generated/layouts/flex/react.js | 407 + .../src/generated/layouts/gallery/react.js | 125 + .../src/generated/layouts/grid/react.js | 263 + .../src/generated/layouts/level/react.js | 78 + .../src/generated/layouts/split/react.js | 109 + .../src/generated/layouts/stack/react.js | 97 + 159 files changed, 77532 insertions(+), 104 deletions(-) create mode 100644 packages/react-docs/src/generated/charts/area-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/bar-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/bullet-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/donut-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/donut-utilization-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/legends/react.js create mode 100644 packages/react-docs/src/generated/charts/line-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/patterns/react.js create mode 100644 packages/react-docs/src/generated/charts/pie-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/resize-observer/react.js create mode 100644 packages/react-docs/src/generated/charts/scatter-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/sparkline-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/stack-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/themes/react.js create mode 100644 packages/react-docs/src/generated/charts/threshold-chart/react.js create mode 100644 packages/react-docs/src/generated/charts/tooltips/react.js create mode 100644 packages/react-docs/src/generated/components/about-modal/react.js create mode 100644 packages/react-docs/src/generated/components/accordion/react.js create mode 100644 packages/react-docs/src/generated/components/action-list/react.js create mode 100644 packages/react-docs/src/generated/components/alert-group/react.js create mode 100644 packages/react-docs/src/generated/components/alert/react.js create mode 100644 packages/react-docs/src/generated/components/application-launcher/react.js create mode 100644 packages/react-docs/src/generated/components/avatar/react.js create mode 100644 packages/react-docs/src/generated/components/back-to-top/react-demos.js create mode 100644 packages/react-docs/src/generated/components/back-to-top/react.js create mode 100644 packages/react-docs/src/generated/components/backdrop/react.js create mode 100644 packages/react-docs/src/generated/components/background-image/react.js create mode 100644 packages/react-docs/src/generated/components/badge/react.js create mode 100644 packages/react-docs/src/generated/components/banner/react-demos.js create mode 100644 packages/react-docs/src/generated/components/banner/react.js create mode 100644 packages/react-docs/src/generated/components/brand/react.js create mode 100644 packages/react-docs/src/generated/components/breadcrumb/react.js create mode 100644 packages/react-docs/src/generated/components/button/react-demos.js create mode 100644 packages/react-docs/src/generated/components/button/react.js create mode 100644 packages/react-docs/src/generated/components/calendar-month/react.js create mode 100644 packages/react-docs/src/generated/components/card/react-demos.js create mode 100644 packages/react-docs/src/generated/components/card/react.js create mode 100644 packages/react-docs/src/generated/components/checkbox/react.js create mode 100644 packages/react-docs/src/generated/components/chip-group/react.js create mode 100644 packages/react-docs/src/generated/components/chip/react.js create mode 100644 packages/react-docs/src/generated/components/clipboard-copy/react.js create mode 100644 packages/react-docs/src/generated/components/code-block/react.js create mode 100644 packages/react-docs/src/generated/components/code-editor/react.js create mode 100644 packages/react-docs/src/generated/components/context-selector/react.js create mode 100644 packages/react-docs/src/generated/components/data-list/react-demos.js create mode 100644 packages/react-docs/src/generated/components/data-list/react.js create mode 100644 packages/react-docs/src/generated/components/date-picker/react-demos.js create mode 100644 packages/react-docs/src/generated/components/date-picker/react.js create mode 100644 packages/react-docs/src/generated/components/description-list/react.js create mode 100644 packages/react-docs/src/generated/components/divider/react.js create mode 100644 packages/react-docs/src/generated/components/drag-and-drop/react.js create mode 100644 packages/react-docs/src/generated/components/drawer/react.js create mode 100644 packages/react-docs/src/generated/components/dropdown/react.js create mode 100644 packages/react-docs/src/generated/components/dual-list-selector/react.js create mode 100644 packages/react-docs/src/generated/components/empty-state/react.js create mode 100644 packages/react-docs/src/generated/components/expandable-section/react.js create mode 100644 packages/react-docs/src/generated/components/file-upload---multiple/react-demos.js create mode 100644 packages/react-docs/src/generated/components/file-upload---multiple/react.js create mode 100644 packages/react-docs/src/generated/components/file-upload/react.js create mode 100644 packages/react-docs/src/generated/components/form-select/react.js create mode 100644 packages/react-docs/src/generated/components/form/react.js create mode 100644 packages/react-docs/src/generated/components/helper-text/react-demos.js create mode 100644 packages/react-docs/src/generated/components/helper-text/react.js create mode 100644 packages/react-docs/src/generated/components/hint/react.js create mode 100644 packages/react-docs/src/generated/components/input-group/react.js create mode 100644 packages/react-docs/src/generated/components/jump-links/react-demos.js create mode 100644 packages/react-docs/src/generated/components/jump-links/react.js create mode 100644 packages/react-docs/src/generated/components/label-group/react-demos.js create mode 100644 packages/react-docs/src/generated/components/label-group/react.js create mode 100644 packages/react-docs/src/generated/components/label/react.js create mode 100644 packages/react-docs/src/generated/components/list/react.js create mode 100644 packages/react-docs/src/generated/components/login-page/react.js create mode 100644 packages/react-docs/src/generated/components/masthead/react-demos.js create mode 100644 packages/react-docs/src/generated/components/masthead/react.js create mode 100644 packages/react-docs/src/generated/components/menu-toggle/react.js create mode 100644 packages/react-docs/src/generated/components/menu/react.js create mode 100644 packages/react-docs/src/generated/components/modal/react.js create mode 100644 packages/react-docs/src/generated/components/navigation/react-demos.js create mode 100644 packages/react-docs/src/generated/components/navigation/react.js create mode 100644 packages/react-docs/src/generated/components/notification-badge/react.js create mode 100644 packages/react-docs/src/generated/components/notification-drawer/react-demos.js create mode 100644 packages/react-docs/src/generated/components/notification-drawer/react.js create mode 100644 packages/react-docs/src/generated/components/number-input/react.js create mode 100644 packages/react-docs/src/generated/components/options-menu/react.js create mode 100644 packages/react-docs/src/generated/components/overflow-menu/react.js create mode 100644 packages/react-docs/src/generated/components/page/react-demos.js create mode 100644 packages/react-docs/src/generated/components/page/react.js create mode 100644 packages/react-docs/src/generated/components/pagination/react.js create mode 100644 packages/react-docs/src/generated/components/panel/react.js create mode 100644 packages/react-docs/src/generated/components/popover/react.js create mode 100644 packages/react-docs/src/generated/components/progress-stepper/react-demos.js create mode 100644 packages/react-docs/src/generated/components/progress-stepper/react.js create mode 100644 packages/react-docs/src/generated/components/progress/react-demos.js create mode 100644 packages/react-docs/src/generated/components/progress/react.js create mode 100644 packages/react-docs/src/generated/components/radio/react.js create mode 100644 packages/react-docs/src/generated/components/search-input/react-demos.js create mode 100644 packages/react-docs/src/generated/components/search-input/react.js create mode 100644 packages/react-docs/src/generated/components/select/react.js create mode 100644 packages/react-docs/src/generated/components/sidebar/react.js create mode 100644 packages/react-docs/src/generated/components/simple-list/react.js create mode 100644 packages/react-docs/src/generated/components/skeleton/react.js create mode 100644 packages/react-docs/src/generated/components/skip-to-content/react.js create mode 100644 packages/react-docs/src/generated/components/slider/react.js create mode 100644 packages/react-docs/src/generated/components/spinner/react.js create mode 100644 packages/react-docs/src/generated/components/switch/react.js create mode 100644 packages/react-docs/src/generated/components/table/react-composable.js create mode 100644 packages/react-docs/src/generated/components/table/react-demos.js create mode 100644 packages/react-docs/src/generated/components/table/react-legacy.js create mode 100644 packages/react-docs/src/generated/components/tabs/react-demos.js create mode 100644 packages/react-docs/src/generated/components/tabs/react.js create mode 100644 packages/react-docs/src/generated/components/text-area/react.js create mode 100644 packages/react-docs/src/generated/components/text-input-group/react-demos.js create mode 100644 packages/react-docs/src/generated/components/text-input-group/react.js create mode 100644 packages/react-docs/src/generated/components/text-input/react.js create mode 100644 packages/react-docs/src/generated/components/text/react.js create mode 100644 packages/react-docs/src/generated/components/tile/react-demos.js create mode 100644 packages/react-docs/src/generated/components/tile/react.js create mode 100644 packages/react-docs/src/generated/components/time-picker/react.js create mode 100644 packages/react-docs/src/generated/components/title/react.js create mode 100644 packages/react-docs/src/generated/components/toggle-group/react.js create mode 100644 packages/react-docs/src/generated/components/toolbar/react-demos.js create mode 100644 packages/react-docs/src/generated/components/toolbar/react.js create mode 100644 packages/react-docs/src/generated/components/tooltip/react.js create mode 100644 packages/react-docs/src/generated/components/tree-view/react.js create mode 100644 packages/react-docs/src/generated/components/truncate/react.js create mode 100644 packages/react-docs/src/generated/components/wizard/react-demos.js create mode 100644 packages/react-docs/src/generated/components/wizard/react.js create mode 100644 packages/react-docs/src/generated/consoles/desktopviewer/react.js create mode 100644 packages/react-docs/src/generated/demos/card-view/react-demos.js create mode 100644 packages/react-docs/src/generated/demos/composable-menu/react-demos.js create mode 100644 packages/react-docs/src/generated/demos/date-and-time-picker/react-demos.js create mode 100644 packages/react-docs/src/generated/demos/password-generator/react-demos.js create mode 100644 packages/react-docs/src/generated/demos/password-strength/react-demos.js create mode 100644 packages/react-docs/src/generated/demos/primary-detail/react-demos.js create mode 100644 packages/react-docs/src/generated/developer-resources/open-ui-automation/react.js create mode 100644 packages/react-docs/src/generated/developer-resources/release-notes/react.js create mode 100644 packages/react-docs/src/generated/developer-resources/upgrade-guide/react.js create mode 100644 packages/react-docs/src/generated/extensions/access-consoles/react.js create mode 100644 packages/react-docs/src/generated/extensions/catalog-view-filter-side-panel/react.js create mode 100644 packages/react-docs/src/generated/extensions/catalog-view-item-header/react.js create mode 100644 packages/react-docs/src/generated/extensions/catalog-view-properties-side-panel/react.js create mode 100644 packages/react-docs/src/generated/extensions/catalog-view-tile/react.js create mode 100644 packages/react-docs/src/generated/extensions/catalog-view-vertical-tabs/react.js create mode 100644 packages/react-docs/src/generated/extensions/log-viewer/react-demos.js create mode 100644 packages/react-docs/src/generated/extensions/log-viewer/react.js create mode 100644 packages/react-docs/src/generated/extensions/virtual-scroll-table/react.js create mode 100644 packages/react-docs/src/generated/extensions/virtual-scroll-window-scroller/react.js create mode 100644 packages/react-docs/src/generated/index.js create mode 100644 packages/react-docs/src/generated/layouts/bullseye/react.js create mode 100644 packages/react-docs/src/generated/layouts/flex/react.js create mode 100644 packages/react-docs/src/generated/layouts/gallery/react.js create mode 100644 packages/react-docs/src/generated/layouts/grid/react.js create mode 100644 packages/react-docs/src/generated/layouts/level/react.js create mode 100644 packages/react-docs/src/generated/layouts/split/react.js create mode 100644 packages/react-docs/src/generated/layouts/stack/react.js diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx index f510296e3e2..bc7e8166962 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx @@ -39,6 +39,7 @@ export class ToolbarContent extends React.Component { static displayName = 'ToolbarContent'; private expandableContentRef = React.createRef(); private chipContainerRef = React.createRef(); + private contentRef = React.createRef(); private static currentId = 0; static defaultProps: ToolbarContentProps = { @@ -70,13 +71,11 @@ export class ToolbarContent extends React.Component { formatBreakpointMods(visibility, styles, '', getBreakpoint(width)), className )} + ref={this.contentRef} {...props} > {({ - clearAllFilters: clearAllFiltersContext, - clearFiltersButtonText: clearFiltersButtonContext, - showClearFiltersButton: showClearFiltersButtonContext, toolbarId: toolbarIdContext }) => { const expandableContentId = `${ @@ -85,9 +84,8 @@ export class ToolbarContent extends React.Component { return (
{ > {children}
- ); }} diff --git a/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx index 1bef7ee02ac..3001a3f91cc 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx @@ -10,6 +10,8 @@ import { ToolbarContext } from './ToolbarUtils'; import { PickOptional } from '../../helpers/typeUtils'; export interface ToolbarExpandableContentProps extends React.HTMLProps { + /** Content displayed in the expandable content */ + children?: React.ReactNode; /** Classes added to the root element of the data toolbar expandable content */ className?: string; /** Flag indicating the expandable content is expanded */ @@ -37,6 +39,7 @@ export class ToolbarExpandableContent extends React.Component - +
+ {children} {numberOfFilters > 0 && ( diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx index e5040aad334..590beb0e94c 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx @@ -8,8 +8,10 @@ import { Button } from '../Button'; import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg'; import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util'; import { PageContext } from '../Page/PageContext'; +import { ToolbarExpandableContent } from './ToolbarExpandableContent'; +import { Popper } from '../../helpers'; -export interface ToolbarToggleGroupProps extends ToolbarGroupProps { +export interface ToolbarToggleGroupProps extends ToolbarGroupProps{ /** An icon to be rendered when the toggle group has collapsed down */ toggleIcon: React.ReactNode; /** Controls when filters are shown and when the toggle button is hidden. */ @@ -48,98 +50,103 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps { }; } -export class ToolbarToggleGroup extends React.Component { - static displayName = 'ToolbarToggleGroup'; - isContentPopup = () => { +export const ToolbarToggleGroup: React.FunctionComponent = ({ + toggleIcon, + variant, + visibility, + visiblity, + breakpoint, + alignment, + spacer, + spaceItems, + className, + children, + ...props + }: ToolbarToggleGroupProps +) => { + const { width, getBreakpoint } = React.useContext(PageContext); + const { isExpanded, toggleIsExpanded } = React.useContext(ToolbarContext); + const { contentRef } = React.useContext(ToolbarContentContext); + + const isContentPopup = () => { const viewportSize = canUseDOM ? window.innerWidth : 1200; const lgBreakpointValue = parseInt(globalBreakpointLg.value); return viewportSize < lgBreakpointValue; }; - render() { - const { - toggleIcon, - variant, - visibility, - breakpoint, - alignment, - spacer, - spaceItems, - className, - children, - ...props - } = this.props; - + React.useEffect(() => { if (!breakpoint && !toggleIcon) { // eslint-disable-next-line no-console console.error('ToolbarToggleGroup will not be visible without a breakpoint or toggleIcon.'); } - return ( - - {({ width, getBreakpoint }) => ( - - {({ isExpanded, toggleIsExpanded }) => ( - - {({ expandableContentRef, expandableContentId }) => { - if (expandableContentRef.current && expandableContentRef.current.classList) { - if (isExpanded) { - expandableContentRef.current.classList.add(styles.modifiers.expanded); - } else { - expandableContentRef.current.classList.remove(styles.modifiers.expanded); - } - } + if (visiblity !== undefined) { + // eslint-disable-next-line no-console + console.warn( + 'The ToolbarToggleGroup visiblity prop has been deprecated. ' + + 'Please use the correctly spelled visibility prop instead.' + ); + } + }, [breakpoint, toggleIcon, visiblity]); - const breakpointMod: { - md?: 'show'; - lg?: 'show'; - xl?: 'show'; - '2xl'?: 'show'; - } = {}; - breakpointMod[breakpoint] = 'show'; + const breakpointMod: { + md?: 'show'; + lg?: 'show'; + xl?: 'show'; + '2xl'?: 'show'; + } = {}; + breakpointMod[breakpoint] = 'show'; - return ( -
-
- -
- {isExpanded - ? (ReactDOM.createPortal( - children, - expandableContentRef.current.firstElementChild - ) as React.ReactElement) - : children} -
- ); - }} - - )} - - )} - - ); + const expandableContent = () => { + console.log(children); + return ( + + {children} + + ); } + + const popper = ( +
+ +
+ ); + + return ( +
+ + { !isExpanded && children } +
+ ); } +ToolbarToggleGroup.displayName = 'ToolbarToggleGroup'; diff --git a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx index 9ee37c99f85..be18ff7ef5d 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx @@ -28,15 +28,13 @@ export const ToolbarContext = React.createContext({ }); interface ToolbarContentContextProps { - expandableContentRef: RefObject; - expandableContentId: string; chipContainerRef: RefObject; + contentRef: RefObject; } export const ToolbarContentContext = React.createContext({ - expandableContentRef: null, - expandableContentId: '', - chipContainerRef: null + chipContainerRef: null, + contentRef: null }); export const globalBreakpoints = { diff --git a/packages/react-docs/src/generated/charts/area-chart/react.js b/packages/react-docs/src/generated/charts/area-chart/react.js new file mode 100644 index 00000000000..bad868321b4 --- /dev/null +++ b/packages/react-docs/src/generated/charts/area-chart/react.js @@ -0,0 +1,1370 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; +const pageData = { + "id": "Area chart", + "section": "charts", + "source": "react", + "slug": "/charts/area-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartArea/examples/ChartArea.md", + "propComponents": [ + { + "name": "Chart", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "backgroundComponent", + "type": "React.ReactElement", + "description": "The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the\nChart's style component includes background styles. The new element created from the passed backgroundComponent\nwill be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.\nAll of these props on Background should take prececence over what VictoryChart is trying to set." + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "endAngle", + "type": "number", + "description": "The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with\nstartAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart.\nThis prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and\nproceeding counterclockwise." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "Chart uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.height" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis." + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When the innerRadius prop is set, polar charts will be hollow rather than circular." + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showAxis", + "type": "boolean", + "description": "Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via\nchart styles.", + "defaultValue": "true" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag." + }, + { + "name": "startAngle", + "type": "number", + "description": "The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction\nwith endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the\nchart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position,\nand proceeding counterclockwise." + }, + { + "name": "style", + "type": "{ parent: object, background: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object with styles defined\nfor data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified\nvia props as they determine relative layout for components in Chart.\n\n\n@propType { parent: object, background: object }" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getChartTheme(themeColor, showAxis)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.width" + } + ] + }, + { + "name": "ChartArea", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartArea: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use its default Area component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[] | number[]", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartArea events.\nSince ChartArea only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartArea uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartArea. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartAxis", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axisComponent prop takes in an entire component which will be used\nto create the axis line. The new element created from the passed axisComponent\nwill be supplied with the following properties: x1, y1, x2, y2, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If an axisComponent\nis not supplied, ChartAxis will render its default AxisLine component." + }, + { + "name": "axisLabelComponent", + "type": "React.ReactElement", + "description": "The axisLabelComponent prop takes in an entire component which will be used\nto create the axis label. The new element created from the passed axisLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, transform, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an axisLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "axisValue", + "type": "number | string | object | Date", + "description": "The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when\ndependent axes should line up with values on the independent axis." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartAxis: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartAxis will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "crossAxis", + "type": "boolean", + "description": "This prop specifies whether a given axis is intended to cross another axis." + }, + { + "name": "dependentAxis", + "type": "boolean", + "description": "The dependentAxis prop specifies whether the axis corresponds to the\ndependent variable (usually y). This prop is useful when composing axis\nwith other components to form a chart." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your axis will include. This prop should be\ngiven as a array of the minimum and maximum expected values for your axis.\nIf this value is not given it will be calculated based on the scale or tickValues.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"axis\", \"axisLabel\", \"ticks\", \"tickLabels\", and \"grid\" are\nall valid targets for ChartAxis events. The eventKey may optionally be used to select a\nsingle element by index rather than an entire set. The eventHandlers object\nshould be given as an object whose keys are standard event names (i.e. onClick)\nand whose values are event callbacks. The return value of an event handler\nbe used to modify other elemnts. The return value should be given as an object or\nan array of objects with optional target and eventKey keys, and a mutation\nkey whose value is a function. The target and eventKey keys will default to those\ncorresponding to the element the event handler was attached to. The mutation\nfunction will be called with the calculated props for the individual selected\nelement (i.e. a single tick), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"grid\",\n eventKey: 2,\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"tickLabels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartAxis uses the standard externalEventMutations prop." + }, + { + "name": "fixLabelOverlap", + "type": "boolean", + "description": "When true, this prop reduces the number of tick labels to fit the length of the axis.\nLabels are removed at approximately even intervals from the original array of labels.\nThis feature only works well for labels that are approximately evenly spaced." + }, + { + "name": "gridComponent", + "type": "React.ReactElement", + "description": "The gridComponent prop takes in an entire component which will be used\nto create grid lines. The new element created from the passed gridComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a gridComponent\nis not supplied, ChartAxis will render its default GridLine component." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "invertAxis", + "type": "boolean", + "description": "If true, this value will flip the domain of a given axis." + }, + { + "name": "label", + "type": "any", + "description": "The label prop defines the label that will appear along the axis. This\nprop should be given as a value or an entire, HTML-complete label\ncomponent. If a label component is given, it will be cloned. The new\nelement's properties x, y, textAnchor, verticalAnchor, and transform\nwill have defaults provided by the axis; styles filled out with\ndefaults provided by the axis, and overrides from the label component.\nIf a value is given, a new ChartLabel will be created with props and\nstyles from the axis." + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "ChartAxis uses the standard name prop" + }, + { + "name": "offsetX", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the x-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "offsetY", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the y-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop specifies the position and orientation of your axis.\nValid values are 'top', 'bottom', 'left' and 'right'." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showGrid", + "type": "boolean", + "description": "Show axis grid and ticks", + "defaultValue": "false" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartAxis with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object\nwith styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg\nstyles are supported, but width, height, and padding should be specified via props as they\ndetermine relative layout for components in Chart. Functional styles may be defined for\ngrid, tick, and tickLabel style properties, and they will be evaluated with each tick.\n\nNote: When a component is rendered as a child of another Victory component, or within a custom\n element with standalone={false} parent styles will be applied to the enclosing tag.\nMany styles that can be applied to a parent will not be expressed when applied to a .\n\nNote: custom angle and verticalAnchor properties may be included in labels styles." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartAxis as a solo component, implement the theme directly on\nChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "tickComponent", + "type": "React.ReactElement", + "description": "The tickComponent prop takes in an entire component which will be used\nto create tick lines. The new element created from the passed tickComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a tickComponent\nis not supplied, ChartAxis will render its default Tick component." + }, + { + "name": "tickCount", + "type": "number", + "description": "The tickCount prop specifies approximately how many ticks should be drawn on the axis if\ntickValues are not explicitly provided. This value is calculated by d3 scale and\nprioritizes returning \"nice\" values and evenly spaced ticks over an exact number of ticks.\nIf you need an exact number of ticks, please specify them via the tickValues prop.\nThis prop must have a value greater than zero." + }, + { + "name": "tickFormat", + "type": "any[] | ((tick: any, index: number, ticks: any[]) => string | number)", + "description": "The tickFormat prop specifies how tick values should be expressed visually.\ntickFormat can be given as a function to be applied to every tickValue, or as\nan array of display values for each tickValue.\n\n@example d3.time.format(\"%Y\"), (x) => x.toPrecision(2), [\"first\", \"second\", \"third\"]" + }, + { + "name": "tickLabelComponent", + "type": "React.ReactElement", + "description": "The tickLabelComponent prop takes in an entire component which will be used\nto create the tick labels. The new element created from the passed tickLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, tick, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an tickLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "tickValues", + "type": "any[]", + "description": "The tickValues prop explicitly specifies which tick values to draw on the axis.\n\n@example [\"apples\", \"bananas\", \"oranges\"], [2, 4, 6, 8]" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: innerRadius may need to be set when using this property." + } + ] + }, + { + "name": "ChartGroup", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "color", + "type": "string", + "description": "The color prop is an optional prop that defines a single color to be applied to the\nchildren of ChartGroup. The color prop will override colors specified via colorScale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartGroup will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartGroup: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartGroup will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartGroup events.\nSince ChartGroup only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartGroup uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartGroup. If individual labels are required for each\ndata point, they should be created by composing ChartGroup with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "offset", + "type": "number", + "description": "The offset prop determines the number of pixels each element in a group should\nbe offset from its original position of the on the independent axis. In the\ncase of groups of bars, this number should be equal to the width of the bar\nplus the desired spacing between bars." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart,\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartGroup with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartGroup. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar or ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartThreshold", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartLine: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use the default ChartContainer component.\n\n@example " + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartLine: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use its default Line component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: [number, number] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartLine events.\nSince ChartLine only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a line), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartLine uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartLine. If individual labels are required for each\ndata point, they should be created by composing ChartLine with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "[number, number] | { x: [number, number], y: [number, number] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "string | string[] | Function", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartLine with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartLine. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}", + "defaultValue": "{}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartLine as a solo component, implement the theme directly on\nChartLine. If you are wrapping ChartLine in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getThresholdTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartLine.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartVoronoiContainer", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When the activateData prop is set to true, the active prop will be set to true on all\ndata components within a voronoi area. When this prop is set to false, the onActivated\nand onDeactivated callbacks will still fire, but no mutations to data components will\noccur via Victory’s event system." + }, + { + "name": "activateLabels", + "type": "boolean", + "description": "When the activateLabels prop is set to true, the active prop will be set to true on all\nlabels corresponding to points within a voronoi area. When this prop is set to false,\nthe onActivated and onDeactivated callbacks will still fire, but no mutations to label\ncomponents will occur via Victory’s event system. Labels defined directly on\nChartVoronoiContainer via the labels prop will still appear when this prop is set to false." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by the container" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "disable", + "type": "boolean", + "description": "When the disable prop is set to true, ChartVoronoiContainer events will not fire." + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop specified the component that will be rendered when labels are defined\non ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered.", + "defaultValue": "" + }, + { + "name": "labels", + "type": "(point: any, index: number, points: any[]) => string", + "description": "When a labels prop is provided to ChartVoronoiContainer it will render a label component\nrather than activating labels on the child components it renders. This is useful for\ncreating multi- point tooltips. This prop should be given as a function which will be called\nonce for each active point. The labels function will be called with the arguments point,\nindex, and points, where point refers to a single active point, index refers to the position\nof that point in the array of active points, and points is an array of all active points." + }, + { + "name": "mouseFollowTooltips", + "type": "boolean", + "description": "When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip\nfollows the position of the mouse." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "onActivated", + "type": "Function", + "description": "The onActivated prop accepts a function to be called whenever new data points are activated.\nThe function is called with the parameters points (an array of active data objects) and props\n(the props used by ChartVoronoiContainer)." + }, + { + "name": "onDeactivated", + "type": "Function", + "description": "The onDeactivated prop accepts a function to be called whenever points are deactivated. The\nfunction is called with the parameters points (an array of the newly-deactivated data objects)\nand props (the props used by ChartVoronoiContainer)." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. ChartTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "radius", + "type": "number", + "description": "When the radius prop is set, the voronoi areas associated with each data point will be no larger\nthan the given radius. This prop should be given as a number." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height.\n\n@default true" + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "voronoiBlacklist", + "type": "string[]", + "description": "The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a\nshared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist\narray will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as\nactive, and will not contribute date to shared tooltips or labels." + }, + { + "name": "voronoiDimension", + "type": "'x' | 'y'", + "description": "When the voronoiDimension prop is set, voronoi selection will only take the given dimension into\naccount. For example, when dimension is set to “x”, all data points matching a particular x mouse\nposition will be activated regardless of y value. When this prop is not given, voronoi selection\nis determined by both x any y values." + }, + { + "name": "voronoiPadding", + "type": "number", + "description": "When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\nof a given chart may trigger voronoi events. This prop should be given as a number." + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + } + ], + "examples": [ + "Basic with right aligned legend", + "Cyan with bottom aligned legend and axis label", + "Multi-color (unordered) bottom-left aligned legend and responsive container" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartGroup, + ChartThreshold, + ChartThemeColor, + ChartLegendTooltip, + ChartVoronoiContainer, + createContainer, + getResizeObserver +}; +pageData.examples = { + 'Basic with right aligned legend': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={200}\n maxDomain={{y: 9}}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n width={800}\n >\n \n \n \n \n \n \n \n \n
\n)","title":"Basic with right aligned legend","lang":"js"}}> + + , + 'Cyan with bottom aligned legend and axis label': props => + \n `${datum.y}`}\n labelComponent={ datum.x}/>}\n mouseFollowTooltips\n voronoiDimension=\"x\"\n voronoiPadding={50}\n />\n }\n legendData={legendData}\n legendPosition=\"bottom\"\n height={250}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50,\n }}\n maxDomain={{y: 9}}\n themeColor={ChartThemeColor.cyan}\n width={650}\n >\n \n \n \n \n \n \n \n \n
\n );\n }\n}","title":"Cyan with bottom aligned legend and axis label","lang":"js"}}> + +

+ {`This demonstrates how to combine cursor and voronoi containers to display tooltips along with a cursor.`} +

+ , + 'Multi-color (unordered) bottom-left aligned legend and responsive container': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n\n return (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}\n legendPosition=\"bottom-left\"\n height={225}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50,\n }}\n maxDomain={{y: 9}}\n themeColor={ChartThemeColor.multiUnordered}\n width={width}\n >\n \n \n \n \n \n \n \n \n
\n );\n }\n}","title":"Multi-color (unordered) bottom-left aligned legend and responsive container","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build an area chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic with right aligned legend"])} + {React.createElement(pageData.examples["Cyan with bottom aligned legend and axis label"])} + {React.createElement(pageData.examples["Multi-color (unordered) bottom-left aligned legend and responsive container"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
  • + {`The `} + + {`theme`} + + {` and `} + + {`themeColor`} + + {` props should be applied at the most top level component`} +
    • +
  • + {`Use `} + + {`ChartGroup`} + + {` to apply theme color scales and other properties to multiple components`} +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`Chart`} + + {` props, see `} + + {`VictoryChart`} + +
    • +
  • + {`For `} + + {`ChartArea`} + + {` props, see `} + + {`VictoryArea`} + +
    • +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartGroup`} + + {` props, see `} + + {`VictoryGroup`} + +
    • +
  • + {`For `} + + {`ChartVoronoiContainer`} + + {` props, see `} + + {`VictoryVoronoiContainer`} + +
    • +
+ +); +Component.displayName = 'ChartsAreaChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/bar-chart/react.js b/packages/react-docs/src/generated/charts/bar-chart/react.js new file mode 100644 index 00000000000..5d99e7ea6df --- /dev/null +++ b/packages/react-docs/src/generated/charts/bar-chart/react.js @@ -0,0 +1,1199 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { VictoryZoomContainer } from 'victory-zoom-container'; +const pageData = { + "id": "Bar chart", + "section": "charts", + "source": "react", + "slug": "/charts/bar-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartBar/examples/ChartBar.md", + "propComponents": [ + { + "name": "Chart", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "backgroundComponent", + "type": "React.ReactElement", + "description": "The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the\nChart's style component includes background styles. The new element created from the passed backgroundComponent\nwill be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.\nAll of these props on Background should take prececence over what VictoryChart is trying to set." + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "endAngle", + "type": "number", + "description": "The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with\nstartAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart.\nThis prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and\nproceeding counterclockwise." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "Chart uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.height" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis." + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When the innerRadius prop is set, polar charts will be hollow rather than circular." + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showAxis", + "type": "boolean", + "description": "Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via\nchart styles.", + "defaultValue": "true" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag." + }, + { + "name": "startAngle", + "type": "number", + "description": "The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction\nwith endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the\nchart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position,\nand proceeding counterclockwise." + }, + { + "name": "style", + "type": "{ parent: object, background: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object with styles defined\nfor data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified\nvia props as they determine relative layout for components in Chart.\n\n\n@propType { parent: object, background: object }" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getChartTheme(themeColor, showAxis)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.width" + } + ] + }, + { + "name": "ChartAxis", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axisComponent prop takes in an entire component which will be used\nto create the axis line. The new element created from the passed axisComponent\nwill be supplied with the following properties: x1, y1, x2, y2, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If an axisComponent\nis not supplied, ChartAxis will render its default AxisLine component." + }, + { + "name": "axisLabelComponent", + "type": "React.ReactElement", + "description": "The axisLabelComponent prop takes in an entire component which will be used\nto create the axis label. The new element created from the passed axisLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, transform, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an axisLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "axisValue", + "type": "number | string | object | Date", + "description": "The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when\ndependent axes should line up with values on the independent axis." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartAxis: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartAxis will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "crossAxis", + "type": "boolean", + "description": "This prop specifies whether a given axis is intended to cross another axis." + }, + { + "name": "dependentAxis", + "type": "boolean", + "description": "The dependentAxis prop specifies whether the axis corresponds to the\ndependent variable (usually y). This prop is useful when composing axis\nwith other components to form a chart." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your axis will include. This prop should be\ngiven as a array of the minimum and maximum expected values for your axis.\nIf this value is not given it will be calculated based on the scale or tickValues.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"axis\", \"axisLabel\", \"ticks\", \"tickLabels\", and \"grid\" are\nall valid targets for ChartAxis events. The eventKey may optionally be used to select a\nsingle element by index rather than an entire set. The eventHandlers object\nshould be given as an object whose keys are standard event names (i.e. onClick)\nand whose values are event callbacks. The return value of an event handler\nbe used to modify other elemnts. The return value should be given as an object or\nan array of objects with optional target and eventKey keys, and a mutation\nkey whose value is a function. The target and eventKey keys will default to those\ncorresponding to the element the event handler was attached to. The mutation\nfunction will be called with the calculated props for the individual selected\nelement (i.e. a single tick), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"grid\",\n eventKey: 2,\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"tickLabels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartAxis uses the standard externalEventMutations prop." + }, + { + "name": "fixLabelOverlap", + "type": "boolean", + "description": "When true, this prop reduces the number of tick labels to fit the length of the axis.\nLabels are removed at approximately even intervals from the original array of labels.\nThis feature only works well for labels that are approximately evenly spaced." + }, + { + "name": "gridComponent", + "type": "React.ReactElement", + "description": "The gridComponent prop takes in an entire component which will be used\nto create grid lines. The new element created from the passed gridComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a gridComponent\nis not supplied, ChartAxis will render its default GridLine component." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "invertAxis", + "type": "boolean", + "description": "If true, this value will flip the domain of a given axis." + }, + { + "name": "label", + "type": "any", + "description": "The label prop defines the label that will appear along the axis. This\nprop should be given as a value or an entire, HTML-complete label\ncomponent. If a label component is given, it will be cloned. The new\nelement's properties x, y, textAnchor, verticalAnchor, and transform\nwill have defaults provided by the axis; styles filled out with\ndefaults provided by the axis, and overrides from the label component.\nIf a value is given, a new ChartLabel will be created with props and\nstyles from the axis." + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "ChartAxis uses the standard name prop" + }, + { + "name": "offsetX", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the x-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "offsetY", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the y-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop specifies the position and orientation of your axis.\nValid values are 'top', 'bottom', 'left' and 'right'." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showGrid", + "type": "boolean", + "description": "Show axis grid and ticks", + "defaultValue": "false" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartAxis with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object\nwith styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg\nstyles are supported, but width, height, and padding should be specified via props as they\ndetermine relative layout for components in Chart. Functional styles may be defined for\ngrid, tick, and tickLabel style properties, and they will be evaluated with each tick.\n\nNote: When a component is rendered as a child of another Victory component, or within a custom\n element with standalone={false} parent styles will be applied to the enclosing tag.\nMany styles that can be applied to a parent will not be expressed when applied to a .\n\nNote: custom angle and verticalAnchor properties may be included in labels styles." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartAxis as a solo component, implement the theme directly on\nChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "tickComponent", + "type": "React.ReactElement", + "description": "The tickComponent prop takes in an entire component which will be used\nto create tick lines. The new element created from the passed tickComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a tickComponent\nis not supplied, ChartAxis will render its default Tick component." + }, + { + "name": "tickCount", + "type": "number", + "description": "The tickCount prop specifies approximately how many ticks should be drawn on the axis if\ntickValues are not explicitly provided. This value is calculated by d3 scale and\nprioritizes returning \"nice\" values and evenly spaced ticks over an exact number of ticks.\nIf you need an exact number of ticks, please specify them via the tickValues prop.\nThis prop must have a value greater than zero." + }, + { + "name": "tickFormat", + "type": "any[] | ((tick: any, index: number, ticks: any[]) => string | number)", + "description": "The tickFormat prop specifies how tick values should be expressed visually.\ntickFormat can be given as a function to be applied to every tickValue, or as\nan array of display values for each tickValue.\n\n@example d3.time.format(\"%Y\"), (x) => x.toPrecision(2), [\"first\", \"second\", \"third\"]" + }, + { + "name": "tickLabelComponent", + "type": "React.ReactElement", + "description": "The tickLabelComponent prop takes in an entire component which will be used\nto create the tick labels. The new element created from the passed tickLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, tick, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an tickLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "tickValues", + "type": "any[]", + "description": "The tickValues prop explicitly specifies which tick values to draw on the axis.\n\n@example [\"apples\", \"bananas\", \"oranges\"], [2, 4, 6, 8]" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: innerRadius may need to be set when using this property." + } + ] + }, + { + "name": "ChartBar", + "description": "", + "props": [ + { + "name": "alignment", + "type": "string", + "description": "The alignment prop specifies how bars should be aligned relative to their data points.\nThis prop may be given as “start”, “middle” or “end”. When this prop is not specified,\nbars will have “middle” alignment relative to their data points." + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "barRatio", + "type": "number", + "description": "The barRatio prop specifies an approximate ratio between bar widths and spaces between bars.\nWhen width is not specified via the barWidth prop or in bar styles, the barRatio prop will\nbe used to calculate a default width for each bar given the total number of bars in the data series\nand the overall width of the chart." + }, + { + "name": "barWidth", + "type": "number | Function", + "description": "The barWidth prop is used to specify the width of each bar. This prop may be given as\na number of pixels or as a function that returns a number. When this prop is given as\na function, it will be evaluated with the arguments datum, and active. When this value\nis not given, a default value will be calculated based on the overall dimensions of\nthe chart, and the number of bars." + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartBar: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartBar will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "Function | number | { top, bottom, topLeft, topRight, bottomLeft, bottomRight }", + "description": "The cornerRadius prop specifies a radius to apply to each bar.\nIf this prop is given as a single number, the radius will only be applied to the top of each bar.\nWhen this prop is given as a function, it will be evaluated with the arguments datum, and active.\n\n\n@example {topLeft: ({ datum }) => datum.x * 4}" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create a bar.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartBar: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartBar will use its default Bar component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for VictoryBar events.\nThe eventKey may optionally be used to select a single element by index rather than an entire\nset. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: \"thisOne\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: \"theOtherOne\",\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: \"theOtherOne\",\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartBar uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether the bars will be laid vertically or\nhorizontally. The bars will be vertical if this prop is false or unspecified,\nor horizontal if the prop is set to true." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the bar. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartBar. If individual labels are required for each\ndata point, they should be created by composing ChartBar with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartBar with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartBar. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartBar as a solo component, implement the theme directly on\nChartBar. If you are wrapping ChartBar in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartGroup", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "color", + "type": "string", + "description": "The color prop is an optional prop that defines a single color to be applied to the\nchildren of ChartGroup. The color prop will override colors specified via colorScale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartGroup will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartGroup: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartGroup will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartGroup events.\nSince ChartGroup only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartGroup uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartGroup. If individual labels are required for each\ndata point, they should be created by composing ChartGroup with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "offset", + "type": "number", + "description": "The offset prop determines the number of pixels each element in a group should\nbe offset from its original position of the on the independent axis. In the\ncase of groups of bars, this number should be equal to the width of the bar\nplus the desired spacing between bars." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart,\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartGroup with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartGroup. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar or ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartVoronoiContainer", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When the activateData prop is set to true, the active prop will be set to true on all\ndata components within a voronoi area. When this prop is set to false, the onActivated\nand onDeactivated callbacks will still fire, but no mutations to data components will\noccur via Victory’s event system." + }, + { + "name": "activateLabels", + "type": "boolean", + "description": "When the activateLabels prop is set to true, the active prop will be set to true on all\nlabels corresponding to points within a voronoi area. When this prop is set to false,\nthe onActivated and onDeactivated callbacks will still fire, but no mutations to label\ncomponents will occur via Victory’s event system. Labels defined directly on\nChartVoronoiContainer via the labels prop will still appear when this prop is set to false." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by the container" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "disable", + "type": "boolean", + "description": "When the disable prop is set to true, ChartVoronoiContainer events will not fire." + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop specified the component that will be rendered when labels are defined\non ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered.", + "defaultValue": "" + }, + { + "name": "labels", + "type": "(point: any, index: number, points: any[]) => string", + "description": "When a labels prop is provided to ChartVoronoiContainer it will render a label component\nrather than activating labels on the child components it renders. This is useful for\ncreating multi- point tooltips. This prop should be given as a function which will be called\nonce for each active point. The labels function will be called with the arguments point,\nindex, and points, where point refers to a single active point, index refers to the position\nof that point in the array of active points, and points is an array of all active points." + }, + { + "name": "mouseFollowTooltips", + "type": "boolean", + "description": "When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip\nfollows the position of the mouse." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "onActivated", + "type": "Function", + "description": "The onActivated prop accepts a function to be called whenever new data points are activated.\nThe function is called with the parameters points (an array of active data objects) and props\n(the props used by ChartVoronoiContainer)." + }, + { + "name": "onDeactivated", + "type": "Function", + "description": "The onDeactivated prop accepts a function to be called whenever points are deactivated. The\nfunction is called with the parameters points (an array of the newly-deactivated data objects)\nand props (the props used by ChartVoronoiContainer)." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. ChartTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "radius", + "type": "number", + "description": "When the radius prop is set, the voronoi areas associated with each data point will be no larger\nthan the given radius. This prop should be given as a number." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height.\n\n@default true" + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "voronoiBlacklist", + "type": "string[]", + "description": "The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a\nshared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist\narray will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as\nactive, and will not contribute date to shared tooltips or labels." + }, + { + "name": "voronoiDimension", + "type": "'x' | 'y'", + "description": "When the voronoiDimension prop is set, voronoi selection will only take the given dimension into\naccount. For example, when dimension is set to “x”, all data points matching a particular x mouse\nposition will be activated regardless of y value. When this prop is not given, voronoi selection\nis determined by both x any y values." + }, + { + "name": "voronoiPadding", + "type": "number", + "description": "When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\nof a given chart may trigger voronoi events. This prop should be given as a number." + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + } + ], + "examples": [ + "Basic with right aligned legend", + "Purple with bottom aligned legend", + "Multi-color (ordered) with bottom-left aligned legend", + "Single with right aligned legend" + ] +}; +pageData.liveContext = { + Chart, + ChartAxis, + ChartBar, + ChartGroup, + ChartThemeColor, + ChartTooltip, + ChartVoronoiContainer, + VictoryZoomContainer +}; +pageData.examples = { + 'Basic with right aligned legend': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n domain={{y: [0,9]}}\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={250}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n width={600}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Basic with right aligned legend","lang":"js"}}> + + , + 'Purple with bottom aligned legend': props => + `${datum.name}: ${datum.y}`;\n\n return (\n
\n \n \n \n \n }\n />\n }\n />\n }\n />\n }\n />\n \n \n
\n );\n }\n}","title":"Purple with bottom aligned legend","lang":"js"}}> + +

+ {`This demonstrates an alternate way of applying tooltips using data labels.`} +

+ , + 'Multi-color (ordered) with bottom-left aligned legend': props => + (\n
\n }\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}\n legendPosition=\"bottom-left\"\n height={400}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 100, // Adjusted to accommodate tooltip\n top: 50\n }}\n themeColor={ChartThemeColor.multiOrdered}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Multi-color (ordered) with bottom-left aligned legend","lang":"js"}}> + +

+ {`This demonstrates zoom for both the x and y axis.`} +

+ , + 'Single with right aligned legend': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n domain={{y: [0,9]}}\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={250}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n width={600}\n >\n \n \n
\n)","title":"Single with right aligned legend","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build a bar chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic with right aligned legend"])} + {React.createElement(pageData.examples["Purple with bottom aligned legend"])} + {React.createElement(pageData.examples["Multi-color (ordered) with bottom-left aligned legend"])} + {React.createElement(pageData.examples["Single with right aligned legend"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
  • + {`The `} + + {`theme`} + + {` and `} + + {`themeColor`} + + {` props should be applied at the most top level component`} +
    • +
  • + {`Use `} + + {`ChartGroup`} + + {` to apply theme color scales and other properties to multiple components`} +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`Chart`} + + {` props, see `} + + {`VictoryChart`} + +
    • +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartBar`} + + {` props, see `} + + {`VictoryBar`} + +
    • +
  • + {`For `} + + {`ChartGroup`} + + {` props, see `} + + {`VictoryGroup`} + +
    • +
  • + {`For `} + + {`ChartVoronoiContainer`} + + {` props, see `} + + {`VictoryVoronoiContainer`} + +
    • +
+ +); +Component.displayName = 'ChartsBarChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/bullet-chart/react.js b/packages/react-docs/src/generated/charts/bullet-chart/react.js new file mode 100644 index 00000000000..92c12a5e9d7 --- /dev/null +++ b/packages/react-docs/src/generated/charts/bullet-chart/react.js @@ -0,0 +1,845 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor, getResizeObserver } from '@patternfly/react-charts'; +const pageData = { + "id": "Bullet chart", + "section": "charts", + "source": "react", + "slug": "/charts/bullet-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md", + "propComponents": [ + { + "name": "ChartAxis", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axisComponent prop takes in an entire component which will be used\nto create the axis line. The new element created from the passed axisComponent\nwill be supplied with the following properties: x1, y1, x2, y2, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If an axisComponent\nis not supplied, ChartAxis will render its default AxisLine component." + }, + { + "name": "axisLabelComponent", + "type": "React.ReactElement", + "description": "The axisLabelComponent prop takes in an entire component which will be used\nto create the axis label. The new element created from the passed axisLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, transform, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an axisLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "axisValue", + "type": "number | string | object | Date", + "description": "The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when\ndependent axes should line up with values on the independent axis." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartAxis: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartAxis will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "crossAxis", + "type": "boolean", + "description": "This prop specifies whether a given axis is intended to cross another axis." + }, + { + "name": "dependentAxis", + "type": "boolean", + "description": "The dependentAxis prop specifies whether the axis corresponds to the\ndependent variable (usually y). This prop is useful when composing axis\nwith other components to form a chart." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your axis will include. This prop should be\ngiven as a array of the minimum and maximum expected values for your axis.\nIf this value is not given it will be calculated based on the scale or tickValues.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"axis\", \"axisLabel\", \"ticks\", \"tickLabels\", and \"grid\" are\nall valid targets for ChartAxis events. The eventKey may optionally be used to select a\nsingle element by index rather than an entire set. The eventHandlers object\nshould be given as an object whose keys are standard event names (i.e. onClick)\nand whose values are event callbacks. The return value of an event handler\nbe used to modify other elemnts. The return value should be given as an object or\nan array of objects with optional target and eventKey keys, and a mutation\nkey whose value is a function. The target and eventKey keys will default to those\ncorresponding to the element the event handler was attached to. The mutation\nfunction will be called with the calculated props for the individual selected\nelement (i.e. a single tick), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"grid\",\n eventKey: 2,\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"tickLabels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartAxis uses the standard externalEventMutations prop." + }, + { + "name": "fixLabelOverlap", + "type": "boolean", + "description": "When true, this prop reduces the number of tick labels to fit the length of the axis.\nLabels are removed at approximately even intervals from the original array of labels.\nThis feature only works well for labels that are approximately evenly spaced." + }, + { + "name": "gridComponent", + "type": "React.ReactElement", + "description": "The gridComponent prop takes in an entire component which will be used\nto create grid lines. The new element created from the passed gridComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a gridComponent\nis not supplied, ChartAxis will render its default GridLine component." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "invertAxis", + "type": "boolean", + "description": "If true, this value will flip the domain of a given axis." + }, + { + "name": "label", + "type": "any", + "description": "The label prop defines the label that will appear along the axis. This\nprop should be given as a value or an entire, HTML-complete label\ncomponent. If a label component is given, it will be cloned. The new\nelement's properties x, y, textAnchor, verticalAnchor, and transform\nwill have defaults provided by the axis; styles filled out with\ndefaults provided by the axis, and overrides from the label component.\nIf a value is given, a new ChartLabel will be created with props and\nstyles from the axis." + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "ChartAxis uses the standard name prop" + }, + { + "name": "offsetX", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the x-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "offsetY", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the y-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop specifies the position and orientation of your axis.\nValid values are 'top', 'bottom', 'left' and 'right'." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showGrid", + "type": "boolean", + "description": "Show axis grid and ticks", + "defaultValue": "false" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartAxis with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object\nwith styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg\nstyles are supported, but width, height, and padding should be specified via props as they\ndetermine relative layout for components in Chart. Functional styles may be defined for\ngrid, tick, and tickLabel style properties, and they will be evaluated with each tick.\n\nNote: When a component is rendered as a child of another Victory component, or within a custom\n element with standalone={false} parent styles will be applied to the enclosing tag.\nMany styles that can be applied to a parent will not be expressed when applied to a .\n\nNote: custom angle and verticalAnchor properties may be included in labels styles." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartAxis as a solo component, implement the theme directly on\nChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "tickComponent", + "type": "React.ReactElement", + "description": "The tickComponent prop takes in an entire component which will be used\nto create tick lines. The new element created from the passed tickComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a tickComponent\nis not supplied, ChartAxis will render its default Tick component." + }, + { + "name": "tickCount", + "type": "number", + "description": "The tickCount prop specifies approximately how many ticks should be drawn on the axis if\ntickValues are not explicitly provided. This value is calculated by d3 scale and\nprioritizes returning \"nice\" values and evenly spaced ticks over an exact number of ticks.\nIf you need an exact number of ticks, please specify them via the tickValues prop.\nThis prop must have a value greater than zero." + }, + { + "name": "tickFormat", + "type": "any[] | ((tick: any, index: number, ticks: any[]) => string | number)", + "description": "The tickFormat prop specifies how tick values should be expressed visually.\ntickFormat can be given as a function to be applied to every tickValue, or as\nan array of display values for each tickValue.\n\n@example d3.time.format(\"%Y\"), (x) => x.toPrecision(2), [\"first\", \"second\", \"third\"]" + }, + { + "name": "tickLabelComponent", + "type": "React.ReactElement", + "description": "The tickLabelComponent prop takes in an entire component which will be used\nto create the tick labels. The new element created from the passed tickLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, tick, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an tickLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "tickValues", + "type": "any[]", + "description": "The tickValues prop explicitly specifies which tick values to draw on the axis.\n\n@example [\"apples\", \"bananas\", \"oranges\"], [2, 4, 6, 8]" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: innerRadius may need to be set when using this property." + } + ] + }, + { + "name": "ChartBullet", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers." + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers." + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axis component to render with the chart", + "defaultValue": "" + }, + { + "name": "bulletSize", + "type": "number", + "description": "Specifies the size of the bullet chart. For a horizontal chart, this adjusts bar height; although, it\ntechnically scales the underlying barWidth property.\n\nNote: Values should be >= 125, the default is 140", + "defaultValue": "theme.chart.height" + }, + { + "name": "comparativeErrorMeasureComponent", + "type": "React.ReactElement", + "description": "The comparative error measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "comparativeErrorMeasureData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example comparativeErrorMeasureData={[{ y: 50 }]}" + }, + { + "name": "comparativeErrorMeasureDataY", + "type": "number | string | Function | string[]", + "description": "The comparativeErrorMeasureDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "comparativeErrorMeasureLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "comparativeWarningMeasureComponent", + "type": "React.ReactElement", + "description": "The comparative warning measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "comparativeWarningMeasureData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example comparativeWarningMeasureData={[{ y: 50 }]}" + }, + { + "name": "comparativeWarningMeasureDataY", + "type": "number | string | Function | string[]", + "description": "The comparativeWarningMeasureDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "comparativeWarningMeasureLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "comparativeZeroMeasureComponent", + "type": "React.ReactElement", + "description": "The comparative zero measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\nNote: The x domain is expected to be `x: [0, 2]` in order to position all measures properly\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n{x: [0, 2], y: [0, 100]}", + "defaultValue": "getBulletDomain({\n comparativeErrorMeasureComponent,\n comparativeErrorMeasureData,\n comparativeWarningMeasureComponent,\n comparativeWarningMeasureData,\n maxDomain,\n minDomain,\n primaryDotMeasureComponent,\n primaryDotMeasureData,\n primarySegmentedMeasureComponent,\n primarySegmentedMeasureData,\n qualitativeRangeComponent,\n qualitativeRangeData\n})" + }, + { + "name": "groupSubTitle", + "type": "string", + "description": "The subtitle to render for grouped bullets" + }, + { + "name": "groupTitle", + "type": "string", + "description": "The title to render for grouped bullets" + }, + { + "name": "groupTitleComponent", + "type": "React.ReactElement", + "description": "The group title component to render for grouped bullets", + "defaultValue": "" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "horizontal ? theme.chart.height : theme.chart.width" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.", + "defaultValue": "true" + }, + { + "name": "invert", + "type": "boolean", + "description": "Invert the color scales used to represent primary measures and qualitative ranges.", + "defaultValue": "false" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.", + "defaultValue": "" + }, + { + "name": "legendItemsPerRow", + "type": "number", + "description": "The legendItemsPerRow prop determines how many items to render in each row\nof a horizontal legend, or in each column of a vertical legend. This\nprop should be given as an integer. When this prop is not given,\nlegend items will be rendered in a single row or column." + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "'bottom'" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}\n\nNote: The x domain is expected to be `x: 2` in order to position all measures properly" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}\n\nNote: The x domain is expected to be `x: 0` in order to position all measures properly" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right.\n\nNote: The underlying bullet chart is a different size than height and width. For a horizontal chart, left and right\npadding may need to be applied at (approx) 2 to 1 scale." + }, + { + "name": "primaryDotMeasureComponent", + "type": "React.ReactElement", + "description": "The primary dot measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "primaryDotMeasureData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example primaryDotMeasureData={[{ y: 50 }]}" + }, + { + "name": "primaryDotMeasureDataY", + "type": "number | string | Function | string[]", + "description": "The primaryDotMeasureDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "primaryDotMeasureLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "primarySegmentedMeasureComponent", + "type": "React.ReactElement", + "description": "The primary segmented measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "primarySegmentedMeasureData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example primarySegmentedMeasureData={[{ y: 50 }]}" + }, + { + "name": "primarySegmentedMeasureDataY", + "type": "number | string | Function | string[]", + "description": "The primarySegmentedMeasureDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "primarySegmentedMeasureLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "qualitativeRangeComponent", + "type": "React.ReactElement", + "description": "The qualitative range component to render with the chart", + "defaultValue": "" + }, + { + "name": "qualitativeRangeData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example qualitativeRangeData={[{ y: 50 }]}" + }, + { + "name": "qualitativeRangeDataY", + "type": "number | string | Function | string[]", + "description": "The qualitativeRangeDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "qualitativeRangeDataY0", + "type": "number | string | Function | string[]", + "description": "Use qualitativeRangeDataY0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + }, + { + "name": "qualitativeRangeLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "subTitle", + "type": "string", + "description": "The subtitle for the chart" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getBulletThemeWithLegendColorScale({\n comparativeErrorMeasureData,\n comparativeErrorMeasureLegendData,\n comparativeWarningMeasureData,\n comparativeWarningMeasureLegendData,\n invert,\n primaryDotMeasureData,\n primaryDotMeasureLegendData,\n primarySegmentedMeasureData,\n primarySegmentedMeasureLegendData,\n qualitativeRangeData,\n qualitativeRangeLegendData,\n themeColor\n})" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string", + "description": "The title for the chart" + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The label component to render the chart title.", + "defaultValue": "" + }, + { + "name": "titlePosition", + "type": "'left' | 'top-left'", + "description": "The title position relation to the chart. Valid values are 'left', and 'top-left'\n\nNote: These properties are only valid for horizontal layouts" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "horizontal ? theme.chart.width : theme.chart.height" + } + ] + }, + { + "name": "ChartContainer", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactElement | React.ReactElement[]", + "description": "The children prop specifies the child or children that will be rendered within the container. It will be set by\nwhatever Victory component is rendering the container." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by ChartContainer" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "containerRef", + "type": "React.RefObject", + "description": "The containerRef prop may be used to attach a ref to the outermost element rendered by the container.\n\n@example containerRef={(ref) => { this.chartRef = ref; }}" + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. VictoryTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height." + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string", + "description": "The title prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers. The more descriptive this title is, the more\nuseful it will be. If no title prop is passed, it will default to Chart.\n\n@example \"Popularity of Dog Breeds by Percentage\"" + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + } + ], + "examples": [ + "Basic", + "Segmented primary measure", + "Responsive container with bottom aligned legend", + "Primary measure dot", + "Error measure and custom axis ticks", + "Primary measure outside range", + "Negative primary measure", + "Reversed with right aligned legend", + "Negative and positive primary measures", + "Vertical with segmented primary measure", + "Vertical primary measure outside max range", + "Custom labels", + "Custom size", + "Horizontal group", + "Vertical group", + "Horizontal group with title", + "Vertical group with title" + ] +}; +pageData.liveContext = { + ChartAxis, + ChartBullet, + ChartContainer, + ChartThemeColor, + getResizeObserver +}; +pageData.examples = { + 'Basic': props => + (\n
\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n width={600}\n />\n
\n)","title":"Basic","lang":"js"}}> + + , + 'Segmented primary measure': props => + (\n
\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n
\n)","title":"Segmented primary measure","lang":"js"}}> + + , + 'Responsive container with bottom aligned legend': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n return (\n
\n `${datum.name}: ${datum.y}`}\n legendAllowWrap\n legendPosition=\"bottom-left\"\n maxDomain={{y: 100}}\n padding={{\n bottom: 50,\n left: 50,\n right: 50,\n top: 100 // Adjusted to accommodate labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n titlePosition=\"top-left\"\n width={width}\n />\n
\n );\n }\n}","title":"Responsive container with bottom aligned legend","lang":"js"}}> + +

+ {`This demonstrates a responsive legend which wraps when items are wider than its container.`} +

+ , + 'Primary measure dot': props => + (\n
\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 50\n }}\n primaryDotMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n primaryDotMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n
\n)","title":"Primary measure dot","lang":"js"}}> + + , + 'Error measure and custom axis ticks': props => + (\n
\n }\n comparativeErrorMeasureData={[{name: 'Error', y: 120}]}\n comparativeErrorMeasureLegendData={[{ name: 'Error' }]}\n comparativeWarningMeasureData={[{name: 'Warning', y: 80}]}\n comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}\n constrainToVisibleArea\n height={200}\n labels={({ datum }) => `${datum.name}: ${datum.y}`}\n legendItemsPerRow={3}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 75 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 65 }, { name: 'Range', y: 100 }, { name: 'Range', y: 150 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n themeColor={ChartThemeColor.green}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n
\n)","title":"Error measure and custom axis ticks","lang":"js"}}> + +

+ {`This is a green bullet chart with error measure and custom axis ticks with 3 legend items per row.`} +

+ , + 'Primary measure outside range': props => + (\n
\n `${datum.name}: ${datum.y}`}\n height={200}\n maxDomain={{y: 125}}\n minDomain={{y: 50}}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accommodate labels\n right: 75,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 75 }, { name: 'Measure', y: 135 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 85 }, { name: 'Range', y: 125 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n themeColor={ChartThemeColor.gold}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n
\n)","title":"Primary measure outside range","lang":"js"}}> + +

+ {`This is a gold bullet chart with primary measure greater than max range.`} +

+ , + 'Negative primary measure': props => + (\n
\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 75}}\n minDomain={{y: -25}}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 65\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: -15 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }]}\n qualitativeRangeData={[{ name: 'Range', y: 25, y0: -25 }, { name: 'Range', y: 50 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n
\n)","title":"Negative primary measure","lang":"js"}}> + +

+ {`This bullet chart with negative primary measure is for measures considered to be bad when they are low.`} +

+ , + 'Reversed with right aligned legend': props => + (\n
\n `${datum.name}: ${datum.y}`}\n legendPosition=\"right\"\n legendOrientation=\"vertical\"\n maxDomain={{y: 0}}\n minDomain={{y: -100}}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accommodate labels\n right: 150, // Adjusted to accommodate legend\n top: 80\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: -60 }, { name: 'Measure', y: -25 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: -50 }, { name: 'Range', y: -75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={700}\n />\n
\n)","title":"Reversed with right aligned legend","lang":"js"}}> + +

+ {`This reversed bullet chart with right aligned legend is for measures considered to be good when they are low.`} +

+ , + 'Negative and positive primary measures': props => + (\n
\n `${datum.name}: ${datum.y}`}\n legendItemsPerRow={4}\n maxDomain={{y: 75}}\n minDomain={{y: -25}}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 65\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: -10 }, { name: 'Measure', y: -20 }, { name: 'Measure', y: 10 }, { name: 'Measure', y: 40 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }, { name: 'Measure 3' }, { name: 'Measure 4' }]}\n qualitativeRangeData={[{ name: 'Range', y: 25, y0: -25 }, { name: 'Range', y: 50 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n
\n)","title":"Negative and positive primary measures","lang":"js"}}> + +

+ {`This bullet chart with negative and positive primary measures has 4 legend items per row.`} +

+ , + 'Vertical with segmented primary measure': props => + (\n
\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 400,\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n
\n)","title":"Vertical with segmented primary measure","lang":"js"}}> + + , + 'Vertical primary measure outside max range': props => + (\n
\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 125}}\n minDomain={{y: 50}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 400,\n right: 50,\n top: 50 // Adjusted to accommodate primary segmented measure tooltip\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 75 }, { name: 'Measure', y: 135 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 85 }, { name: 'Range', y: 125 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n themeColor={ChartThemeColor.gold}\n width={500}\n />\n
\n)","title":"Vertical primary measure outside max range","lang":"js"}}> + + , + 'Custom labels': props => + (\n
\n {\n switch (val) {\n case 0:\n return 'New';\n case 25:\n return 'Beginner';\n case 50:\n return 'Intermediate';\n case 75:\n return 'Advanced';\n case 100:\n return 'Expert';\n }\n }}\n />\n }\n comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}\n constrainToVisibleArea\n height={150}\n labels={({ datum }) => `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n width={600}\n />\n
\n)","title":"Custom labels","lang":"js"}}> + + , + 'Custom size': props => + (\n
\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accomodate labels\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n
\n)","title":"Custom size","lang":"js"}}> + + , + 'Horizontal group': props => + (\n
\n \n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 75\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }]}\n qualitativeRangeData={[{ name: 'Range', y: 40 }, { name: 'Range', y: 65 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 300\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 525\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 35 }, { name: 'Measure', y: 70 }]}\n qualitativeRangeData={[{ name: 'Range', y: 60 }, { name: 'Range', y: 85 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 750\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 40 }, { name: 'Range', y: 65 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n \n
\n)","title":"Horizontal group","lang":"js"}}> + + , + 'Vertical group': props => + (\n
\n \n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 40 }, { name: 'Range', y: 65 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 300,\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 550,\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 35 }, { name: 'Measure', y: 70 }]}\n qualitativeRangeData={[{ name: 'Range', y: 60 }, { name: 'Range', y: 85 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 800,\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }]}\n qualitativeRangeData={[{ name: 'Range', y: 40 }, { name: 'Range', y: 65 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n \n
\n)","title":"Vertical group","lang":"js"}}> + + , + 'Horizontal group with title': props => + (\n
\n \n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 275 // Adjusted to accommodate group labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }]}\n qualitativeRangeData={[{ name: 'Range', y: 40 }, { name: 'Range', y: 65 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 500 // Adjusted to accommodate group labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 725 // Adjusted to accommodate group labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 35 }, { name: 'Measure', y: 70 }]}\n qualitativeRangeData={[{ name: 'Range', y: 60 }, { name: 'Range', y: 85 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 100, // Adjusted to accommodate legend\n left: 150, // Adjusted to accommodate labels\n right: 50,\n top: 950 // Adjusted to accommodate group labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 40 }, { name: 'Range', y: 65 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n \n
\n)","title":"Horizontal group with title","lang":"js"}}> + + , + 'Vertical group with title': props => + (\n
\n \n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 150 // Adjusted to accommodate group labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 40 }, { name: 'Range', y: 65 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 300,\n right: 50,\n top: 150 // Adjusted to accommodate group labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 550,\n right: 50,\n top: 150 // Adjusted to accommodate group labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 35 }, { name: 'Measure', y: 70 }]}\n qualitativeRangeData={[{ name: 'Range', y: 60 }, { name: 'Range', y: 85 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 800,\n right: 50,\n top: 150 // Adjusted to accommodate group labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 15 }, { name: 'Measure', y: 50 }]}\n qualitativeRangeData={[{ name: 'Range', y: 40 }, { name: 'Range', y: 65 }]}\n standalone={false}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={500}\n />\n \n
\n)","title":"Vertical group with title","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build a bullet chart using a Katacoda tutorial starting with a simple chart, adding qualitative ranges, primary comparative measures, a comparative warning measure, tooltips, labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Segmented primary measure"])} + {React.createElement(pageData.examples["Responsive container with bottom aligned legend"])} + {React.createElement(pageData.examples["Primary measure dot"])} + {React.createElement(pageData.examples["Error measure and custom axis ticks"])} + {React.createElement(pageData.examples["Primary measure outside range"])} + {React.createElement(pageData.examples["Negative primary measure"])} + {React.createElement(pageData.examples["Reversed with right aligned legend"])} + {React.createElement(pageData.examples["Negative and positive primary measures"])} + {React.createElement(pageData.examples["Vertical with segmented primary measure"])} + {React.createElement(pageData.examples["Vertical primary measure outside max range"])} + {React.createElement(pageData.examples["Custom labels"])} + {React.createElement(pageData.examples["Custom size"])} + {React.createElement(pageData.examples["Horizontal group"])} + {React.createElement(pageData.examples["Vertical group"])} + {React.createElement(pageData.examples["Horizontal group with title"])} + {React.createElement(pageData.examples["Vertical group with title"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartBullet`} + + {` props, see `} + + {`VictoryBar`} + +
    • +
  • + {`For `} + + {`ChartContainer`} + + {` props, see `} + + {`VictoryContainer`} + +
    • +
+ +); +Component.displayName = 'ChartsBulletChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/donut-chart/react.js b/packages/react-docs/src/generated/charts/donut-chart/react.js new file mode 100644 index 00000000000..91edc3cda49 --- /dev/null +++ b/packages/react-docs/src/generated/charts/donut-chart/react.js @@ -0,0 +1,428 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts'; +const pageData = { + "id": "Donut chart", + "section": "charts", + "source": "react", + "slug": "/charts/donut-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md", + "propComponents": [ + { + "name": "ChartDonut", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "capHeight", + "type": "number | string | Function", + "description": "The capHeight prop defines a text metric for the font being used: the expected height of capital letters.\nThis is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of\nline height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a\nunitless number, it is assumed to be ems.", + "defaultValue": "1.1" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the pie\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartDonut will automatically assign\nvalues from this color scale to the pie slices unless colors are explicitly provided in the\ndata object" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartDonut: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartDonut will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "Set the cornerRadius for every dataComponent (Slice by default) within ChartDonut" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted,\nwhere data X-value is the slice label (string or number),\nand Y-value is the corresponding number value represented by the slice\nData should be in the form of an array of data points.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire, HTML-complete data component which will be used to\ncreate slices for each datum in the pie chart. The new element created from the passed\ndataComponent will have the property datum set by the pie chart for the point it renders;\nproperties style and pathFunction calculated by ChartDonut; an index property set\ncorresponding to the location of the datum in the data provided to the pie; events bound to\nthe ChartDonut; and the d3 compatible slice object.\nIf a dataComponent is not provided, ChartDonut's Slice component will be used." + }, + { + "name": "endAngle", + "type": "number", + "description": "The overall end angle of the pie in degrees. This prop is used in conjunction with\nstartAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartDonut\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartDonut uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size)\nin order to accommodate the extra legend.\n\nBy default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate\nlegends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut height.\n\nTypically, the parent container is set to the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.height" + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When creating a donut chart, this prop determines the number of pixels between\nthe center of the chart and the inner edge." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartDonut. If individual labels are required for each\ndata point, they should be created by composing ChartDonut with VictoryScatter" + }, + { + "name": "labelPosition", + "type": "string | Function", + "description": "The labelPosition prop specifies the angular position of each label relative to its corresponding slice.\nWhen this prop is not given, the label will be positioned at the centroid of each slice." + }, + { + "name": "labelRadius", + "type": "number | Function", + "description": "The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.\nIf this prop is not set, the label radius will default to the radius of the pie + label padding." + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data." + }, + { + "name": "legendPosition", + "type": "'bottom' | 'right'", + "description": "The legend position relation to the donut chart. Valid values are 'bottom' and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padAngle", + "type": "number | Function", + "description": "The padAngle prop determines the amount of separation between adjacent data slices\nin number of degrees" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "radius", + "type": "number | Function", + "description": "Specifies the radius of the chart. If this property is not provided it is computed\nfrom width, height, and padding props" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartDonut with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "startAngle", + "type": "number", + "description": "The overall start angle of the pie in degrees. This prop is used in conjunction with\nendAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your pie. ChartDonut relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "subTitle", + "type": "string", + "description": "The subtitle for the donut chart" + }, + { + "name": "subTitleComponent", + "type": "React.ReactElement", + "description": "The label component to render the chart subTitle.\n\nWhen overriding the subTitleComponent prop, title and subTitle will be centered independently. You may choose to\nuse the x and y props of ChartLabel to adjust the center position. For example:\n\n
\nsubTitle=\"Pets\"\nsubTitleComponent={}\ntitle={100}\ntitleComponent={}\n
\n\nNote: Default label properties may be applied" + }, + { + "name": "subTitlePosition", + "type": "'bottom' | 'center' | 'right'", + "description": "The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'", + "defaultValue": "ChartDonutStyles.label.subTitlePosition" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartDonut as a solo component, implement the theme directly on\nChartDonut. If you are wrapping ChartDonut in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getDonutTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string", + "description": "The title for the donut chart" + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The label component to render the chart title.\n\nWhen centering both title and subTitle props, it's possible to override both styles via an array provided to\nChartLabel. The first item in the array is associated with title styles, while the second item in the array is\nassociated with subtitle styles.\n\n
\nsubTitle=\"Pets\"\ntitle={100}\ntitleComponent={\n  \n}\n
\n\nIn this case, both title and subTitle will be centered together. However, should you also override the\nsubTitleComponent prop, title and subTitle will be centered independently. You may choose to\nuse the x and y props of ChartLabel to adjust the center position. For example:\n\n
\nsubTitle=\"Pets\"\nsubTitleComponent={}\ntitle={100}\ntitleComponent={}\n
\n\nNote: Default label properties may be applied", + "defaultValue": "" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.width" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + } + ] + } + ], + "examples": [ + "Basic", + "Right aligned legend", + "Multi-color (ordered) with right aligned legend", + "Bottom aligned legend", + "Small", + "Small with right aligned legend", + "Small with bottom aligned subtitle", + "Small with right aligned subtitle" + ] +}; +pageData.liveContext = { + ChartDonut, + ChartThemeColor +}; +pageData.examples = { + 'Basic': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n subTitle=\"Pets\"\n title=\"100\"\n />\n
\n)","title":"Basic","lang":"js"}}> + + , + 'Right aligned legend': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"Pets\"\n title=\"100\"\n width={350}\n />\n
\n)","title":"Right aligned legend","lang":"js"}}> + + , + 'Multi-color (ordered) with right aligned legend': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"Pets\"\n title=\"100\"\n themeColor={ChartThemeColor.multiOrdered}\n width={350}\n />\n
\n)","title":"Multi-color (ordered) with right aligned legend","lang":"js"}}> + + , + 'Bottom aligned legend': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendPosition=\"bottom\"\n legendWidth={225}\n padding={{\n bottom: 65, // Adjusted to accommodate legend\n left: 20,\n right: 20,\n top: 20\n }}\n subTitle=\"Pets\"\n title=\"100\"\n width={300}\n />\n
\n)","title":"Bottom aligned legend","lang":"js"}}> + + , + 'Small': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n subTitle=\"Pets\"\n title=\"100\"\n width={150}\n />\n
\n)","title":"Small","lang":"js"}}> + + , + 'Small with right aligned legend': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 145, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"Pets\"\n title=\"100\"\n width={275}\n />\n
\n)","title":"Small with right aligned legend","lang":"js"}}> + + , + 'Small with bottom aligned subtitle': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 25, // Adjusted to accommodate subTitle\n left: 20,\n right: 145, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"Pets\"\n subTitlePosition=\"bottom\"\n title=\"100\"\n width={275}\n />\n
\n)","title":"Small with bottom aligned subtitle","lang":"js"}}> + + , + 'Small with right aligned subtitle': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendPosition=\"bottom\"\n padding={{\n bottom: 70, // Adjusted to accommodate legend\n left: 20,\n right: 50, // Adjusted to accommodate subTitle\n top: 20\n }}\n subTitle=\"Pets\"\n subTitlePosition=\"right\"\n title=\"100\"\n width={300}\n />\n
\n)","title":"Small with right aligned subtitle","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build a donut chart using a Katacoda tutorial starting with a simple chart, adding thresholds, tooltips, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Right aligned legend"])} + {React.createElement(pageData.examples["Multi-color (ordered) with right aligned legend"])} + {React.createElement(pageData.examples["Bottom aligned legend"])} + {React.createElement(pageData.examples["Small"])} + {React.createElement(pageData.examples["Small with right aligned legend"])} + {React.createElement(pageData.examples["Small with bottom aligned subtitle"])} + {React.createElement(pageData.examples["Small with right aligned subtitle"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`ChartDonut`} + + {` props, see `} + + {`VictoryPie`} + +
    • +
+ +); +Component.displayName = 'ChartsDonutChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/donut-utilization-chart/react.js b/packages/react-docs/src/generated/charts/donut-utilization-chart/react.js new file mode 100644 index 00000000000..610d6348faa --- /dev/null +++ b/packages/react-docs/src/generated/charts/donut-utilization-chart/react.js @@ -0,0 +1,747 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts'; +const pageData = { + "id": "Donut utilization chart", + "section": "charts", + "source": "react", + "slug": "/charts/donut-utilization-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md", + "propComponents": [ + { + "name": "ChartDonutThreshold", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the pie\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartDonutThreshold will automatically assign\nvalues from this color scale to the pie slices unless colors are explicitly provided in the\ndata object" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartDonutThreshold: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartDonutThreshold will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "Set the cornerRadius for every dataComponent (Slice by default) within ChartDonutThreshold" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted,\nwhere data X-value is the slice label (string or number),\nand Y-value is the corresponding number value represented by the slice\nData should be in the form of a single data point.\nThe data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\nNote: The Y-value is expected to represent a percentage\n\n@example data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}", + "defaultValue": "[]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire, HTML-complete data component which will be used to\ncreate slices for each datum in the pie chart. The new element created from the passed\ndataComponent will have the property datum set by the pie chart for the point it renders;\nproperties style and pathFunction calculated by ChartDonutThreshold; an index property set\ncorresponding to the location of the datum in the data provided to the pie; events bound to\nthe ChartDonutThreshold; and the d3 compatible slice object.\nIf a dataComponent is not provided, ChartDonutThreshold's Slice component will be used." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\nNote: Overridden by containerComponent\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "endAngle", + "type": "number", + "description": "The overall end angle of the pie in degrees. This prop is used in conjunction with\nstartAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartDonutThreshold\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartDonutThreshold uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same height in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.height" + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When creating a donut chart, this prop determines the number of pixels between\nthe center of the chart and the inner edge." + }, + { + "name": "invert", + "type": "boolean", + "description": "Invert the threshold color scale used to represent warnings, errors, etc.", + "defaultValue": "false" + }, + { + "name": "labelRadius", + "type": "number | Function", + "description": "The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.\nIf this prop is not set, the label radius will default to the radius of the pie + label padding." + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title", + "defaultValue": "[]" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padAngle", + "type": "number | Function", + "description": "The padAngle prop determines the amount of separation between adjacent data slices\nin number of degrees" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "radius", + "type": "number | Function", + "description": "Specifies the radius of the chart. If this property is not provided it is computed\nfrom width, height, and padding props" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartDonutThreshold with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "startAngle", + "type": "number", + "description": "The overall start angle of the pie in degrees. This prop is used in conjunction with\nendAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your pie. ChartDonutThreshold relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "subTitle", + "type": "string", + "description": "The subtitle for the donut chart" + }, + { + "name": "subTitlePosition", + "type": "'bottom' | 'center' | 'right'", + "description": "The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'", + "defaultValue": "ChartDonutStyles.label.subTitlePosition" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartDonutThreshold as a solo component, implement the theme directly on\nChartDonutThreshold. If you are wrapping ChartDonutThreshold in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getDonutThresholdStaticTheme(themeColor, invert)" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string", + "description": "The title for the donut chart" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.width" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + } + ] + }, + { + "name": "ChartDonutUtilization", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "capHeight", + "type": "number | string | Function", + "description": "The capHeight prop defines a text metric for the font being used: the expected height of capital letters.\nThis is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of\nline height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a\nunitless number, it is assumed to be ems." + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the pie\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartDonutUtilization will automatically assign\nvalues from this color scale to the pie slices unless colors are explicitly provided in the\ndata object" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartDonutUtilization: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartDonutUtilization will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "Set the cornerRadius for every dataComponent (Slice by default) within ChartDonutUtilization" + }, + { + "name": "data", + "type": "any", + "description": "The data prop specifies the data to be plotted,\nwhere data X-value is the slice label (string or number),\nand Y-value is the corresponding number value represented by the slice\nData should be in the form of a single data point.\nThe data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\nNote: The Y-value is expected to represent a percentage\n\n@example data={{ x: 'GBps capacity', y: 75 }}" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire, HTML-complete data component which will be used to\ncreate slices for each datum in the pie chart. The new element created from the passed\ndataComponent will have the property datum set by the pie chart for the point it renders;\nproperties style and pathFunction calculated by ChartDonutUtilization; an index property set\ncorresponding to the location of the datum in the data provided to the pie; events bound to\nthe ChartDonutUtilization; and the d3 compatible slice object.\nIf a dataComponent is not provided, ChartDonutUtilization's Slice component will be used." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\nNote: Overridden by containerComponent\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "endAngle", + "type": "number", + "description": "The overall end angle of the pie in degrees. This prop is used in conjunction with\nstartAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartDonutUtilization\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartDonutUtilization uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.height" + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When creating a donut chart, this prop determines the number of pixels between\nthe center of the chart and the inner edge." + }, + { + "name": "invert", + "type": "boolean", + "description": "Invert the threshold color scale used to represent warnings, errors, etc.\n\nInstead of showing a warning at 60% and an error at 90%; for example, this would allow users to show a warning\nbelow 60% and an error below 20%", + "defaultValue": "false" + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartDonutUtilization. If individual labels are required for each\ndata point, they should be created by composing ChartDonutUtilization with VictoryScatter" + }, + { + "name": "labelPosition", + "type": "string | Function", + "description": "The labelPosition prop specifies the angular position of each label relative to its corresponding slice.\nThis prop should be given as \"startAngle\", \"endAngle\", \"centroid\", or as a function that returns one of these\nvalues. When this prop is not given, the label will be positioned at the centroid of each slice." + }, + { + "name": "labelRadius", + "type": "number | Function", + "description": "The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.\nIf this prop is not set, the label radius will default to the radius of the pie + label padding." + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data." + }, + { + "name": "legendPosition", + "type": "'bottom' | 'right'", + "description": "The legend position relation to the donut chart. Valid values are 'bottom' and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padAngle", + "type": "number | Function", + "description": "The padAngle prop determines the amount of separation between adjacent data slices\nin number of degrees" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "radius", + "type": "number | Function", + "description": "Specifies the radius of the chart. If this property is not provided it is computed\nfrom width, height, and padding props" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartDonutUtilization with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "startAngle", + "type": "number", + "description": "The overall start angle of the pie in degrees. This prop is used in conjunction with\nendAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your pie. ChartDonutUtilization relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "subTitle", + "type": "string", + "description": "The subtitle for the donut chart label" + }, + { + "name": "subTitleComponent", + "type": "React.ReactElement", + "description": "The label component to render the chart subTitle.\n\nWhen overriding the subTitleComponent prop, title and subTitle will be centered independently. You may choose to\nuse the x and y props of ChartLabel to adjust the center position. For example:\n\n
\nsubTitle=\"Pets\"\nsubTitleComponent={}\ntitle={100}\ntitleComponent={}\n
\n\nNote: Default label properties may be applied" + }, + { + "name": "subTitlePosition", + "type": "'bottom' | 'center' | 'right'", + "description": "The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartDonutUtilization as a solo component, implement the theme directly on\nChartDonutUtilization. If you are wrapping ChartDonutUtilization in ChartChart, ChartGroup, or ChartThreshold\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getDonutUtilizationTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "thresholds", + "type": "any[]", + "description": "The dynamic portion of the chart will change colors when data reaches the given threshold. Colors may be\noverridden, but defaults shall be provided.\n\n@example thresholds={[{ value: 60, color: '#F0AB00' }, { value: 90, color: '#C9190B' }]}" + }, + { + "name": "title", + "type": "string", + "description": "The title for the donut chart label" + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The label component to render the donut chart title.\n\nWhen centering both title and subTitle props, it's possible to override both styles via an array provided to\nChartLabel. The first item in the array is associated with title styles, while the second item in the array is\nassociated with subtitle styles.\n\n
\nsubTitle=\"Pets\"\ntitle={100}\ntitleComponent={\n  \n}\n
\n\nIn this case, both title and subTitle will be centered together. However, should you also override the\nsubTitleComponent prop, title and subTitle will be centered independently. You may choose to\nuse the x and y props of ChartLabel to adjust the center position. For example:\n\n
\nsubTitle=\"Pets\"\nsubTitleComponent={}\ntitle={100}\ntitleComponent={}\n
\n\nNote: Default label properties may be applied" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.width" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + } + ] + } + ], + "examples": [ + "Basic", + "Right aligned legend", + "Inverted with right aligned legend", + "Right aligned vertical legend", + "Bottom aligned legend", + "Small", + "Small with right aligned legend", + "Small with bottom aligned subtitle", + "Small with right aligned subtitle", + "Static thresholds", + "Static thresholds with right aligned legend", + "Inverted static thresholds with right aligned legend", + "Static thresholds with custom legend", + "Static thresholds with bottom aligned legend", + "Small with static thresholds", + "Small with static thresholds and right aligned legend", + "Small with subtitle", + "Small with right aligned subtitle" + ] +}; +pageData.liveContext = { + ChartDonutThreshold, + ChartDonutUtilization, + ChartThemeColor +}; +pageData.examples = { + 'Basic': props => + (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n subTitle=\"of 100 GBps\"\n title=\"75%\"\n />\n
\n)","title":"Basic","lang":"js"}}> + + , + 'Right aligned legend': props => + {\n const { used } = this.state;\n const val = (used + 10) % 100;\n this.setState({\n spacer: val < 10 ? ' ' : '',\n used: val\n });\n }, 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n const { spacer, used } = this.state;\n return (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}\n legendOrientation=\"vertical\"\n padding={{\n bottom: 20,\n left: 20,\n right: 225, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"of 100 GBps\"\n title={`${used}%`}\n thresholds={[{ value: 60 }, { value: 90 }]}\n width={435}\n />\n
\n );\n }\n}","title":"Right aligned legend","lang":"js"}}> + + , + 'Inverted with right aligned legend': props => + {\n const { used } = this.state;\n const val = (((used - 10) % 100) + 100) % 100;\n this.setState({\n spacer: val < 10 ? ' ' : '',\n used: val\n });\n }, 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n const { spacer, used } = this.state;\n return (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}\n legendOrientation=\"vertical\"\n padding={{\n bottom: 20,\n left: 20,\n right: 225, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"of 100 GBps\"\n title={`${used}%`}\n thresholds={[{ value: 60 }, { value: 20 }]}\n width={435}\n />\n
\n );\n }\n}","title":"Inverted with right aligned legend","lang":"js"}}> + + , + 'Right aligned vertical legend': props => + {\n const { used } = this.state;\n const val = (used + 10) % 100;\n this.setState({\n spacer: val < 10 ? ' ' : '',\n used: val\n });\n }, 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n const { spacer, used } = this.state;\n return (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"bottom\"\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 20,\n right: 20,\n top: 20\n }}\n subTitle=\"of 100 GBps\"\n title={`${used}%`}\n themeColor={ChartThemeColor.green}\n thresholds={[{ value: 60 }, { value: 90 }]}\n width={230}\n />\n
\n );\n }\n}","title":"Right aligned vertical legend","lang":"js"}}> + + , + 'Bottom aligned legend': props => + (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}\n legendPosition=\"bottom\"\n padding={{\n bottom: 65, // Adjusted to accommodate legend\n left: 20,\n right: 20,\n top: 20\n }}\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n thresholds={[{ value: 60 }, { value: 90 }]}\n width={300}\n />\n
\n)","title":"Bottom aligned legend","lang":"js"}}> + + , + 'Small': props => + (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n subTitle=\"of 100 GBps\"\n title=\"75%\"\n width={175}\n />\n
\n)","title":"Small","lang":"js"}}> + + , + 'Small with right aligned legend': props => + {\n const { used } = this.state;\n const val = (used + 10) % 100;\n this.setState({\n spacer: val < 10 ? ' ' : '',\n used: val\n });\n }, 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n const { spacer, used } = this.state;\n return (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}\n legendOrientation=\"vertical\"\n padding={{\n bottom: 20,\n left: 20,\n right: 195, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"of 100 GBps\"\n title={`${used}%`}\n thresholds={[{ value: 60 }, { value: 90 }]}\n width={350}\n />\n
\n );\n }\n}","title":"Small with right aligned legend","lang":"js"}}> + + , + 'Small with bottom aligned subtitle': props => + (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}\n legendOrientation=\"vertical\"\n padding={{\n bottom: 25, // Adjusted to accommodate subTitle\n left: 20,\n right: 195, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"of 100 GBps\"\n subTitlePosition=\"bottom\"\n title=\"45%\"\n thresholds={[{ value: 60 }, { value: 90 }]}\n width={350}\n />\n
\n)","title":"Small with bottom aligned subtitle","lang":"js"}}> + +

+ {`This is a small donut utilization chart with bottom aligned legend and right aligned subtitle.`} +

+ , + 'Small with right aligned subtitle': props => + (\n
\n datum.x ? datum.x : null}\n padding={{\n bottom: 60, // Adjusted to accommodate legend\n left: 20,\n right: 20,\n top: 20\n }}\n subTitlePosition=\"right\"\n width={675}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: 45%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}\n legendPosition=\"bottom\"\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n thresholds={[{ value: 60 }, { value: 90 }]}\n />\n \n
\n)","title":"Small with right aligned subtitle","lang":"js"}}> + + , + 'Static thresholds': props => + (\n
\n datum.x ? datum.x : null}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n />\n \n
\n)","title":"Static thresholds","lang":"js"}}> + + , + 'Static thresholds with right aligned legend': props => + {\n const { used } = this.state;\n this.setState({ used: (used + 10) % 100 });\n }, 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n const { used } = this.state;\n return (\n
\n datum.x ? datum.x : null}\n padding={{\n bottom: 20,\n left: 20,\n right: 290, // Adjusted to accommodate legend\n top: 20\n }}\n width={500}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: ${used}%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}\n legendOrientation=\"vertical\"\n subTitle=\"of 100 GBps\"\n title={`${used}%`}\n thresholds={[{ value: 60 }, { value: 90 }]}\n />\n \n
\n );\n }\n}","title":"Static thresholds with right aligned legend","lang":"js"}}> + + , + 'Inverted static thresholds with right aligned legend': props => + {\n const { used } = this.state;\n const val = (((used - 10) % 100) + 100) % 100;\n this.setState({\n spacer: val < 10 ? ' ' : '',\n used: val\n });\n }, 1000);\n }\n \n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n const { used } = this.state;\n return (\n
\n datum.x ? datum.x : null}\n padding={{\n bottom: 20,\n left: 20,\n right: 290, // Adjusted to accommodate legend\n top: 20\n }}\n width={500}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: ${used}%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 20%' }]}\n legendOrientation=\"vertical\"\n subTitle=\"of 100 GBps\"\n title={`${used}%`}\n thresholds={[{ value: 60 }, { value: 20 }]}\n />\n \n
\n );\n }\n}","title":"Inverted static thresholds with right aligned legend","lang":"js"}}> + + , + 'Static thresholds with custom legend': props => + {\n const { used } = this.state;\n this.setState({ used: (used + 10) % 100 });\n }, 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n const { used } = this.state;\n return (\n
\n datum.x ? datum.x : null}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 20,\n right: 20,\n top: 20\n }}\n width={230}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: ${used}%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"bottom\"\n subTitle=\"of 100 GBps\"\n title={`${used}%`}\n themeColor={ChartThemeColor.green}\n thresholds={[{ value: 60 }, { value: 90 }]}\n />\n \n
\n );\n }\n}","title":"Static thresholds with custom legend","lang":"js"}}> + + , + 'Static thresholds with bottom aligned legend': props => + (\n
\n datum.x ? datum.x : null}\n padding={{\n bottom: 65, // Adjusted to accommodate legend\n left: 20,\n right: 20,\n top: 20\n }}\n width={675}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: 45%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}\n legendPosition=\"bottom\"\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n />\n \n
\n)","title":"Static thresholds with bottom aligned legend","lang":"js"}}> + + , + 'Small with static thresholds': props => + (\n
\n datum.x ? datum.x : null}\n width={185}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n />\n \n
\n)","title":"Small with static thresholds","lang":"js"}}> + + , + 'Small with static thresholds and right aligned legend': props => + {\n const { used } = this.state;\n this.setState({ used: (used + 10) % 100 });\n }, 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n const { used } = this.state;\n return (\n
\n datum.x ? datum.x : null}\n padding={{\n bottom: 20,\n left: 20,\n right: 260, // Adjusted to accommodate legend\n top: 20\n }}\n width={425}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: ${used}%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}\n legendOrientation=\"vertical\"\n subTitle=\"of 100 GBps\"\n title={`${used}%`}\n thresholds={[{ value: 60 }, { value: 90 }]}\n />\n \n
\n );\n }\n}","title":"Small with static thresholds and right aligned legend","lang":"js"}}> + + , + 'Small with subtitle': props => + (\n
\n datum.x ? datum.x : null}\n padding={{\n bottom: 30, // Adjusted to accommodate label\n left: 20,\n right: 260, // Adjusted to accommodate legend\n top: 20\n }}\n subTitlePosition=\"bottom\"\n width={425}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: 45%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}\n legendOrientation=\"vertical\"\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n thresholds={[{ value: 60 }, { value: 90 }]}\n />\n \n
\n)","title":"Small with subtitle","lang":"js"}}> + +

+ {`This is a small donut utilization chart with static thresholds with right aligned legend and bottom aligned subtitle.`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build a donut utilization chart using a Katacoda tutorial starting with a simple chart, adding thresholds, tooltips, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Donut utilization examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Right aligned legend"])} + {React.createElement(pageData.examples["Inverted with right aligned legend"])} + {React.createElement(pageData.examples["Right aligned vertical legend"])} + {React.createElement(pageData.examples["Bottom aligned legend"])} + {React.createElement(pageData.examples["Small"])} + {React.createElement(pageData.examples["Small with right aligned legend"])} + {React.createElement(pageData.examples["Small with bottom aligned subtitle"])} + {React.createElement(pageData.examples["Small with right aligned subtitle"])} + + {`Donut utilization threshold examples`} + + {React.createElement(pageData.examples["Static thresholds"])} + {React.createElement(pageData.examples["Static thresholds with right aligned legend"])} + {React.createElement(pageData.examples["Inverted static thresholds with right aligned legend"])} + {React.createElement(pageData.examples["Static thresholds with custom legend"])} + {React.createElement(pageData.examples["Static thresholds with bottom aligned legend"])} + {React.createElement(pageData.examples["Small with static thresholds"])} + {React.createElement(pageData.examples["Small with static thresholds and right aligned legend"])} + {React.createElement(pageData.examples["Small with subtitle"])} + {React.createElement(pageData.examples["Small with right aligned subtitle"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`ChartDonutThreshold`} + + {` props, see `} + + {`VictoryPie`} + +
    • +
  • + {`For `} + + {`ChartDonutUtilization`} + + {` props, see `} + + {`VictoryPie`} + +
    • +
+ +); +Component.displayName = 'ChartsDonutUtilizationChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/legends/react.js b/packages/react-docs/src/generated/charts/legends/react.js new file mode 100644 index 00000000000..345af1caeb7 --- /dev/null +++ b/packages/react-docs/src/generated/charts/legends/react.js @@ -0,0 +1,412 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartBullet, + ChartDonut, + ChartGroup, + ChartLabel, + ChartLegend, + ChartLegendTooltip, + ChartLine, + ChartPie, + ChartScatter, + ChartThemeColor, + ChartVoronoiContainer, + createContainer, + getInteractiveLegendEvents, + getInteractiveLegendItemStyles, + getResizeObserver +} from '@patternfly/react-charts'; +import chart_area_Opacity from '@patternfly/react-tokens/dist/esm/chart_area_Opacity'; +import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; +import '@patternfly/patternfly/patternfly-charts.css'; +const pageData = { + "id": "Legends", + "section": "charts", + "source": "react", + "slug": "/charts/legends/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md", + "propComponents": [ + { + "name": "ChartLegend", + "description": "", + "props": [ + { + "name": "borderComponent", + "type": "React.ReactElement", + "description": "The borderComponent prop takes a component instance which will be responsible\nfor rendering a border around the legend. The new element created from the passed\nborderComponent will be provided with the following properties calculated by\nChartLegend: x, y, width, height, and style. Any of these props may be\noverridden by passing in props to the supplied component, or modified or ignored\nwithin the custom component itself. If a borderComponent\nis not provided, ChartLegend will use its default Border component.\nPlease note that the default width and height calculated\nfor the border component is based on approximated\ntext measurements, and may need to be adjusted." + }, + { + "name": "borderPadding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The borderPadding specifies the amount of padding that should\nbe added between the legend items and the border. This prop may be given as\na number, or asanobject with values specified for top, bottom, left, and right.\nPlease note that the default width and height calculated for the border\ncomponent is based on approximated text measurements, so padding may need to be adjusted." + }, + { + "name": "centerTitle", + "type": "boolean", + "description": "The centerTitle boolean prop specifies whether a legend title should be centered." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop defines a color scale to be applied to each data\nsymbol in ChartLegend. This prop should be given as an array of CSS\ncolors, or as a string corresponding to one of the built in color\nscales. Colors will repeat when there are more symbols than colors in the\nprovided colorScale." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartLegend: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLegend will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "{\n name?: string;\n labels?: {\n fill?: string;\n };\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array." + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes a component instance which will be\nresponsible for rendering a data element used to associate a symbol\nor color with each data series. The new element created from the\npassed dataComponent will be provided with the following properties\ncalculated by ChartLegend: x, y, size, style, and symbol. Any of\nthese props may be overridden by passing in props to the supplied\ncomponent, or modified or ignored within the custom component itself.\nIf a dataComponent is not provided, ChartLegend will use its\ndefault Point component.", + "defaultValue": "" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[]", + "description": "ChartLegend uses the standard eventKey prop to specify how event targets\nare addressed. This prop is not commonly used." + }, + { + "name": "events", + "type": "object[]", + "description": "ChartLegend uses the standard events prop." + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartLegend uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "gutter", + "type": "number | { left: number; right: number }", + "description": "The gutter prop defines the number of pixels between legend rows or\ncolumns, depending on orientation. When orientation is horizontal,\ngutters are between columns. When orientation is vertical, gutters\nare the space between rows." + }, + { + "name": "itemsPerRow", + "type": "number", + "description": "The itemsPerRow prop determines how many items to render in each row\nof a horizontal legend, or in each column of a vertical legend. This\nprop should be given as an integer. When this prop is not given,\nlegend items will be rendered in a single row or column." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes a component instance which will be used\nto render each legend label. The new element created from the passed\nlabelComponent will be supplied with the following properties: x, y,\nstyle, and text. Any of these props may be overridden by passing in\nprops to the supplied component, or modified or ignored within the\ncustom component itself. If labelComponent is omitted, a new\nChartLabel will be created with the props described above.", + "defaultValue": "" + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container with a viewBox\nattribute, or a static container with absolute width and height.\n\nUseful when legend is located inside a chart -- default is false.\n\nNote: Not compatible with containerComponent prop", + "defaultValue": "true" + }, + { + "name": "rowGutter", + "type": "number | { top: number, bottom: number }", + "description": "The rowGutter prop defines the number of pixels between legend rows.\nThis prop may be given as a number, or as an object with values\nspecified for “top” and “bottom” gutters. To set spacing between columns,\nuse the gutter prop.\n\n\n@example { top: 0, bottom: 10 }" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartLegend with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ border: object, data: object, labels: object, parent: object, title: object }", + "description": "The style prop specifies styles for your pie. ChartLegend relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "symbolSpacer", + "type": "number", + "description": "The symbolSpacer prop defines the number of pixels between data\ncomponents and label components." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartLegend as a solo component, implement the theme directly on\nChartLegend. If you are wrapping ChartLegend in ChartChart or\nChartGroup, please call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string | string[]", + "description": "The title prop specifies a title to render with the legend.\nThis prop should be given as a string, or an array of strings for multi-line titles." + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The titleComponent prop takes a component instance which will be used to render\na title for the component. The new element created from the passed\nlabelComponent will be supplied with the following properties: x, y, index, data,\ndatum, verticalAnchor, textAnchor, style, text, and events. Any of these props\nmay be overridden by passing in props to the supplied component, or modified\nor ignored within the custom component itself. If labelComponent is omitted,\na new ChartLabel will be created with the props described above.", + "defaultValue": "" + }, + { + "name": "titleOrientation", + "type": "string", + "description": "The titleOrientation prop specifies where the a title should be rendered\nin relation to the rest of the legend. Possible values\nfor this prop are “top”, “bottom”, “left”, and “right”." + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "x", + "type": "number", + "description": "The x and y props define the base position of the legend element." + }, + { + "name": "y", + "type": "number", + "description": "The x and y props define the base position of the legend element." + } + ] + } + ], + "examples": [ + "Basic with right aligned legend", + "Bottom aligned legend", + "Responsive bottom-left aligned legend", + "Standalone legend", + "Interactive legend", + "Interactive legend with pie chart", + "Legend tooltips", + "Legend links", + "Legend layout" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartBullet, + ChartDonut, + ChartGroup, + ChartLabel, + ChartLegend, + ChartLegendTooltip, + ChartLine, + ChartPie, + ChartScatter, + ChartThemeColor, + ChartVoronoiContainer, + createContainer, + getInteractiveLegendEvents, + getInteractiveLegendItemStyles, + getResizeObserver, + chart_area_Opacity, + chart_color_black_500 +}; +pageData.examples = { + 'Basic with right aligned legend': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"Pets\"\n title=\"100\"\n width={350}\n />\n
\n)","title":"Basic with right aligned legend","lang":"js"}}> + + , + 'Bottom aligned legend': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}\n legendPosition=\"bottom\"\n height={275}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.purple}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Bottom aligned legend","lang":"js"}}> + + , + 'Responsive bottom-left aligned legend': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if(this.containerRef.current && this.containerRef.current.clientWidth){\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n return (\n
\n
\n `${datum.name}: ${datum.y}`}\n legendAllowWrap\n legendPosition=\"bottom-left\"\n maxDomain={{y: 100}}\n padding={{\n bottom: 50,\n left: 50,\n right: 50,\n top: 100 // Adjusted to accommodate labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n titlePosition=\"top-left\"\n width={width}\n />\n
\n
\n );\n }\n}","title":"Responsive bottom-left aligned legend","lang":"js"}}> + +

+ {`This demonstrates a responsive legend which wraps when items are wider than its container.`} +

+ , + 'Standalone legend': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.green}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n \n
\n)","title":"Standalone legend","lang":"js"}}> + +

+ {`This demonstrates a standalone legend vs. using the `} + + + {`legendData`} + + {` property.`} +

+ , + 'Interactive legend': props => + {};\n this.state = {\n hiddenSeries: new Set(),\n width: 0\n };\n this.series = [{\n datapoints: [\n { x: '2015', y: 3 },\n { x: '2016', y: 4 },\n { x: '2017', y: 8 },\n { x: '2018', y: 6 }\n ],\n legendItem: { name: 'Cats' }\n }, {\n datapoints: [\n { x: '2015', y: 2 },\n { x: '2016', y: 3 },\n { x: '2017', y: 4 },\n { x: '2018', y: 5 },\n { x: '2019', y: 6 }\n ],\n legendItem: { name: 'Dogs' }\n }, {\n datapoints: [\n { x: '2015', y: 1 },\n { x: '2016', y: 2 },\n { x: '2017', y: 3 },\n { x: '2018', y: 2 },\n { x: '2019', y: 4 }\n ],\n legendItem: { name: 'Birds' }\n }];\n\n // Returns groups of chart names associated with each data series\n this.getChartNames = () => {\n const result = [];\n this.series.map((_, index) => {\n // Each group of chart names are hidden / shown together\n result.push([`area-${index}`, `scatter-${index}`]);\n });\n return result;\n };\n\n // Returns onMouseOver, onMouseOut, and onClick events for the interactive legend\n this.getEvents = () => getInteractiveLegendEvents({\n chartNames: this.getChartNames(),\n isHidden: this.isHidden,\n legendName: 'legend',\n onLegendClick: this.handleLegendClick\n });\n\n // Returns legend data styled per hiddenSeries\n this.getLegendData = () => {\n const { hiddenSeries } = this.state;\n return this.series.map((s, index) => {\n return {\n childName: `area-${index}`, // Sync tooltip legend with the series associated with given chart name\n ...s.legendItem, // name property\n ...getInteractiveLegendItemStyles(hiddenSeries.has(index)) // hidden styles\n };\n });\n };\n\n // Hide each data series individually\n this.handleLegendClick = (props) => {\n if (!this.state.hiddenSeries.delete(props.index)) {\n this.state.hiddenSeries.add(props.index);\n }\n this.setState({ hiddenSeries: new Set(this.state.hiddenSeries) });\n };\n\n // Set chart width per current window size\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n\n // Returns true if data series is hidden\n this.isHidden = (index) => {\n const { hiddenSeries } = this.state; // Skip if already hidden \n return hiddenSeries.has(index);\n };\n\n this.isDataAvailable = () => {\n const { hiddenSeries } = this.state;\n return hiddenSeries.size !== this.series.length;\n };\n\n // Note: Container order is important\n const CursorVoronoiContainer = createContainer(\"voronoi\", \"cursor\");\n\n this.cursorVoronoiContainer = (\n datum.childName.includes('area-') && datum.y !== null ? `${datum.y}` : null}\n labelComponent={ datum.x}/>}\n mouseFollowTooltips\n voronoiDimension=\"x\"\n voronoiPadding={50}\n />\n );\n };\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n // Tips:\n // 1. Omitting hidden components will reassign color scale, use null data instead or custom colors\n // 2. Set domain or tick axis labels to account for when all data series are hidden\n // 3. Omit tooltip for ChartScatter component by checking childName prop\n // 4. Omit tooltip when all data series are hidden\n // 5. Clone original container to ensure tooltip events are not lost when data series are hidden / shown\n render() {\n const { hiddenSeries, width } = this.state;\n\n const container = React.cloneElement(\n this.cursorVoronoiContainer, \n {\n disable: !this.isDataAvailable()\n }\n );\n\n return (\n
\n
\n }\n legendPosition=\"bottom-left\"\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50,\n }}\n maxDomain={{y: 9}}\n themeColor={ChartThemeColor.multiUnordered}\n width={width}\n >\n \n \n \n {this.series.map((s, index) => {\n return (\n (active ? 5 : 3)}\n />\n );\n })}\n \n \n {this.series.map((s, index) => {\n return (\n \n );\n })}\n \n \n
\n
\n );\n }\n}","title":"Interactive legend","lang":"js"}}> + +

+ {`This demonstrates how to add an interactive legend using events such as `} + + + {`onMouseOver`} + + {`, `} + + + {`onMouseOut`} + + {`, and `} + + + {`onClick`} + + {`.`} +

+ , + 'Interactive legend with pie chart': props => + {\n const result = [];\n this.series.map((_, index) => {\n // Provide names for each series hidden / shown -- use the same name for a pie chart\n result.push(['pie']);\n });\n return result;\n };\n\n // Returns onMouseOver, onMouseOut, and onClick events for the interactive legend\n this.getEvents = () => getInteractiveLegendEvents({\n chartNames: this.getChartNames(),\n isHidden: this.isHidden,\n legendName: 'legend',\n onLegendClick: this.handleLegendClick\n });\n\n // Returns legend data styled per hiddenSeries\n this.getLegendData = () => {\n const { hiddenSeries } = this.state;\n return this.series.map((s, index) => {\n return {\n ...s.legendItem, // name property\n ...getInteractiveLegendItemStyles(hiddenSeries.has(index)) // hidden styles\n };\n });\n };\n\n // Hide each data series individually\n this.handleLegendClick = (props) => {\n if (!this.state.hiddenSeries.delete(props.index)) {\n this.state.hiddenSeries.add(props.index);\n }\n this.setState({ hiddenSeries: new Set(this.state.hiddenSeries) });\n };\n\n // Returns true if data series is hidden\n this.isHidden = (index) => {\n const { hiddenSeries } = this.state; // Skip if already hidden \n return hiddenSeries.has(index);\n };\n };\n\n render() {\n const { hiddenSeries, width } = this.state;\n\n const data = [];\n this.series.map((s, index) => {\n data.push(!hiddenSeries.has(index) ? s.datapoints : { y: null });\n });\n\n return (\n
\n }\n legendPosition=\"bottom\"\n padding={{\n bottom: 65,\n left: 20,\n right: 20,\n top: 20\n }}\n showAxis={false}\n themeColor={ChartThemeColor.multiUnordered}\n width={300}\n >\n `${datum.x}: ${datum.y}`}\n name=\"pie\"\n />\n \n
\n );\n }\n}","title":"Interactive legend with pie chart","lang":"js"}}> + +

+ {`This demonstrates how to add an interactive legend to a pie chart using events such as `} + + + {`onMouseOver`} + + {`, `} + + + {`onMouseOut`} + + {`, and `} + + + {`onClick`} + + {`.`} +

+ , + 'Legend tooltips': props => + (\n \n \n \n );\n\n // Custom legend component\n this.getLegend = (legendData) => (\n }\n />\n );\n }\n\n render() {\n return (\n
\n `${datum.x}: ${datum.y}`}\n legendComponent={this.getLegend([\n { name: 'Cats: 35' }, \n { name: 'Dogs: 55' }, \n { name: 'Birds: 10' }\n ])}\n legendPosition=\"bottom\"\n padding={{\n bottom: 65,\n left: 20,\n right: 20,\n top: 20\n }}\n themeColor={ChartThemeColor.multiOrdered}\n width={300}\n />\n
\n );\n }\n}","title":"Legend tooltips","lang":"js"}}> + +

+ {`This demonstrates an approach for applying tooltips to a legend using a custom label component. These tooltips are keyboard navigable.`} +

+ , + 'Legend links': props => + (\n \n \n \n );\n\n // Custom legend component\n this.getLegend = (legendData) => (\n }\n />\n );\n }\n\n render() {\n return (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendComponent={this.getLegend([\n { name: 'Cats' }, \n { name: 'Dogs' }, \n { name: 'Birds' },\n { name: 'Mice'}\n ])}\n legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}\n legendPosition=\"bottom\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50, \n top: 50\n }}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n
\n );\n }\n}","title":"Legend links","lang":"js"}}> + +

+ {`This demonstrates an approach for applying links to a legend using a custom label component. These links are keyboard navigable.`} +

+ , + 'Legend layout': props => + (\n \n );\n\n // Custom legend component\n this.getLegend = (legendData, values) => (\n }\n rowGutter={20}\n />\n );\n }\n\n render() {\n return (\n
\n `${datum.x}: ${datum.y}`}\n legendComponent={this.getLegend([\n { name: 'Cats' }, \n { name: 'Dogs' }, \n { name: 'Birds' }\n ], [ 35, 55, 10 ])}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"Pets\"\n title=\"100\"\n themeColor={ChartThemeColor.multiOrdered}\n width={350}\n />\n
\n );\n }\n}","title":"Legend layout","lang":"js"}}> + +

+ {`This demonstrates an approach for applying a different legend layout and styles using a custom label component.`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic with right aligned legend"])} + {React.createElement(pageData.examples["Bottom aligned legend"])} + {React.createElement(pageData.examples["Responsive bottom-left aligned legend"])} + {React.createElement(pageData.examples["Standalone legend"])} + {React.createElement(pageData.examples["Interactive legend"])} + {React.createElement(pageData.examples["Interactive legend with pie chart"])} + {React.createElement(pageData.examples["Legend tooltips"])} + {React.createElement(pageData.examples["Legend links"])} + {React.createElement(pageData.examples["Legend layout"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`ChartLegend`} + + {` props, see `} + + {`VictoryLegend`} + +
    • +
+ +); +Component.displayName = 'ChartsLegendsReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/line-chart/react.js b/packages/react-docs/src/generated/charts/line-chart/react.js new file mode 100644 index 00000000000..1d001138a96 --- /dev/null +++ b/packages/react-docs/src/generated/charts/line-chart/react.js @@ -0,0 +1,1190 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; +import { VictoryZoomContainer } from 'victory-zoom-container'; +const pageData = { + "id": "Line chart", + "section": "charts", + "source": "react", + "slug": "/charts/line-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartLine/examples/ChartLine.md", + "propComponents": [ + { + "name": "Chart", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "backgroundComponent", + "type": "React.ReactElement", + "description": "The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the\nChart's style component includes background styles. The new element created from the passed backgroundComponent\nwill be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.\nAll of these props on Background should take prececence over what VictoryChart is trying to set." + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "endAngle", + "type": "number", + "description": "The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with\nstartAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart.\nThis prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and\nproceeding counterclockwise." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "Chart uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.height" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis." + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When the innerRadius prop is set, polar charts will be hollow rather than circular." + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showAxis", + "type": "boolean", + "description": "Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via\nchart styles.", + "defaultValue": "true" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag." + }, + { + "name": "startAngle", + "type": "number", + "description": "The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction\nwith endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the\nchart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position,\nand proceeding counterclockwise." + }, + { + "name": "style", + "type": "{ parent: object, background: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object with styles defined\nfor data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified\nvia props as they determine relative layout for components in Chart.\n\n\n@propType { parent: object, background: object }" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getChartTheme(themeColor, showAxis)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.width" + } + ] + }, + { + "name": "ChartAxis", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axisComponent prop takes in an entire component which will be used\nto create the axis line. The new element created from the passed axisComponent\nwill be supplied with the following properties: x1, y1, x2, y2, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If an axisComponent\nis not supplied, ChartAxis will render its default AxisLine component." + }, + { + "name": "axisLabelComponent", + "type": "React.ReactElement", + "description": "The axisLabelComponent prop takes in an entire component which will be used\nto create the axis label. The new element created from the passed axisLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, transform, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an axisLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "axisValue", + "type": "number | string | object | Date", + "description": "The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when\ndependent axes should line up with values on the independent axis." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartAxis: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartAxis will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "crossAxis", + "type": "boolean", + "description": "This prop specifies whether a given axis is intended to cross another axis." + }, + { + "name": "dependentAxis", + "type": "boolean", + "description": "The dependentAxis prop specifies whether the axis corresponds to the\ndependent variable (usually y). This prop is useful when composing axis\nwith other components to form a chart." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your axis will include. This prop should be\ngiven as a array of the minimum and maximum expected values for your axis.\nIf this value is not given it will be calculated based on the scale or tickValues.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"axis\", \"axisLabel\", \"ticks\", \"tickLabels\", and \"grid\" are\nall valid targets for ChartAxis events. The eventKey may optionally be used to select a\nsingle element by index rather than an entire set. The eventHandlers object\nshould be given as an object whose keys are standard event names (i.e. onClick)\nand whose values are event callbacks. The return value of an event handler\nbe used to modify other elemnts. The return value should be given as an object or\nan array of objects with optional target and eventKey keys, and a mutation\nkey whose value is a function. The target and eventKey keys will default to those\ncorresponding to the element the event handler was attached to. The mutation\nfunction will be called with the calculated props for the individual selected\nelement (i.e. a single tick), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"grid\",\n eventKey: 2,\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"tickLabels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartAxis uses the standard externalEventMutations prop." + }, + { + "name": "fixLabelOverlap", + "type": "boolean", + "description": "When true, this prop reduces the number of tick labels to fit the length of the axis.\nLabels are removed at approximately even intervals from the original array of labels.\nThis feature only works well for labels that are approximately evenly spaced." + }, + { + "name": "gridComponent", + "type": "React.ReactElement", + "description": "The gridComponent prop takes in an entire component which will be used\nto create grid lines. The new element created from the passed gridComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a gridComponent\nis not supplied, ChartAxis will render its default GridLine component." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "invertAxis", + "type": "boolean", + "description": "If true, this value will flip the domain of a given axis." + }, + { + "name": "label", + "type": "any", + "description": "The label prop defines the label that will appear along the axis. This\nprop should be given as a value or an entire, HTML-complete label\ncomponent. If a label component is given, it will be cloned. The new\nelement's properties x, y, textAnchor, verticalAnchor, and transform\nwill have defaults provided by the axis; styles filled out with\ndefaults provided by the axis, and overrides from the label component.\nIf a value is given, a new ChartLabel will be created with props and\nstyles from the axis." + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "ChartAxis uses the standard name prop" + }, + { + "name": "offsetX", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the x-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "offsetY", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the y-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop specifies the position and orientation of your axis.\nValid values are 'top', 'bottom', 'left' and 'right'." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showGrid", + "type": "boolean", + "description": "Show axis grid and ticks", + "defaultValue": "false" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartAxis with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object\nwith styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg\nstyles are supported, but width, height, and padding should be specified via props as they\ndetermine relative layout for components in Chart. Functional styles may be defined for\ngrid, tick, and tickLabel style properties, and they will be evaluated with each tick.\n\nNote: When a component is rendered as a child of another Victory component, or within a custom\n element with standalone={false} parent styles will be applied to the enclosing tag.\nMany styles that can be applied to a parent will not be expressed when applied to a .\n\nNote: custom angle and verticalAnchor properties may be included in labels styles." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartAxis as a solo component, implement the theme directly on\nChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "tickComponent", + "type": "React.ReactElement", + "description": "The tickComponent prop takes in an entire component which will be used\nto create tick lines. The new element created from the passed tickComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a tickComponent\nis not supplied, ChartAxis will render its default Tick component." + }, + { + "name": "tickCount", + "type": "number", + "description": "The tickCount prop specifies approximately how many ticks should be drawn on the axis if\ntickValues are not explicitly provided. This value is calculated by d3 scale and\nprioritizes returning \"nice\" values and evenly spaced ticks over an exact number of ticks.\nIf you need an exact number of ticks, please specify them via the tickValues prop.\nThis prop must have a value greater than zero." + }, + { + "name": "tickFormat", + "type": "any[] | ((tick: any, index: number, ticks: any[]) => string | number)", + "description": "The tickFormat prop specifies how tick values should be expressed visually.\ntickFormat can be given as a function to be applied to every tickValue, or as\nan array of display values for each tickValue.\n\n@example d3.time.format(\"%Y\"), (x) => x.toPrecision(2), [\"first\", \"second\", \"third\"]" + }, + { + "name": "tickLabelComponent", + "type": "React.ReactElement", + "description": "The tickLabelComponent prop takes in an entire component which will be used\nto create the tick labels. The new element created from the passed tickLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, tick, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an tickLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "tickValues", + "type": "any[]", + "description": "The tickValues prop explicitly specifies which tick values to draw on the axis.\n\n@example [\"apples\", \"bananas\", \"oranges\"], [2, 4, 6, 8]" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: innerRadius may need to be set when using this property." + } + ] + }, + { + "name": "ChartGroup", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "color", + "type": "string", + "description": "The color prop is an optional prop that defines a single color to be applied to the\nchildren of ChartGroup. The color prop will override colors specified via colorScale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartGroup will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartGroup: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartGroup will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartGroup events.\nSince ChartGroup only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartGroup uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartGroup. If individual labels are required for each\ndata point, they should be created by composing ChartGroup with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "offset", + "type": "number", + "description": "The offset prop determines the number of pixels each element in a group should\nbe offset from its original position of the on the independent axis. In the\ncase of groups of bars, this number should be equal to the width of the bar\nplus the desired spacing between bars." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart,\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartGroup with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartGroup. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar or ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartLine", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartLine: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartLine: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use its default Line component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartLine events.\nSince ChartLine only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a line), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartLine uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartLine. If individual labels are required for each\ndata point, they should be created by composing ChartLine with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "string | string[] | Function", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartLine with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartLine. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartLine as a solo component, implement the theme directly on\nChartLine. If you are wrapping ChartLine in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartLine.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartVoronoiContainer", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When the activateData prop is set to true, the active prop will be set to true on all\ndata components within a voronoi area. When this prop is set to false, the onActivated\nand onDeactivated callbacks will still fire, but no mutations to data components will\noccur via Victory’s event system." + }, + { + "name": "activateLabels", + "type": "boolean", + "description": "When the activateLabels prop is set to true, the active prop will be set to true on all\nlabels corresponding to points within a voronoi area. When this prop is set to false,\nthe onActivated and onDeactivated callbacks will still fire, but no mutations to label\ncomponents will occur via Victory’s event system. Labels defined directly on\nChartVoronoiContainer via the labels prop will still appear when this prop is set to false." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by the container" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "disable", + "type": "boolean", + "description": "When the disable prop is set to true, ChartVoronoiContainer events will not fire." + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop specified the component that will be rendered when labels are defined\non ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered.", + "defaultValue": "" + }, + { + "name": "labels", + "type": "(point: any, index: number, points: any[]) => string", + "description": "When a labels prop is provided to ChartVoronoiContainer it will render a label component\nrather than activating labels on the child components it renders. This is useful for\ncreating multi- point tooltips. This prop should be given as a function which will be called\nonce for each active point. The labels function will be called with the arguments point,\nindex, and points, where point refers to a single active point, index refers to the position\nof that point in the array of active points, and points is an array of all active points." + }, + { + "name": "mouseFollowTooltips", + "type": "boolean", + "description": "When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip\nfollows the position of the mouse." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "onActivated", + "type": "Function", + "description": "The onActivated prop accepts a function to be called whenever new data points are activated.\nThe function is called with the parameters points (an array of active data objects) and props\n(the props used by ChartVoronoiContainer)." + }, + { + "name": "onDeactivated", + "type": "Function", + "description": "The onDeactivated prop accepts a function to be called whenever points are deactivated. The\nfunction is called with the parameters points (an array of the newly-deactivated data objects)\nand props (the props used by ChartVoronoiContainer)." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. ChartTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "radius", + "type": "number", + "description": "When the radius prop is set, the voronoi areas associated with each data point will be no larger\nthan the given radius. This prop should be given as a number." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height.\n\n@default true" + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "voronoiBlacklist", + "type": "string[]", + "description": "The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a\nshared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist\narray will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as\nactive, and will not contribute date to shared tooltips or labels." + }, + { + "name": "voronoiDimension", + "type": "'x' | 'y'", + "description": "When the voronoiDimension prop is set, voronoi selection will only take the given dimension into\naccount. For example, when dimension is set to “x”, all data points matching a particular x mouse\nposition will be activated regardless of y value. When this prop is not given, voronoi selection\nis determined by both x any y values." + }, + { + "name": "voronoiPadding", + "type": "number", + "description": "When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\nof a given chart may trigger voronoi events. This prop should be given as a number." + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + } + ], + "examples": [ + "Basic with right aligned legend", + "Green with bottom aligned legend", + "Multi-color (unordered) with responsive container" + ] +}; +pageData.liveContext = { + Chart, + ChartAxis, + ChartGroup, + ChartLine, + ChartThemeColor, + ChartLegendTooltip, + ChartVoronoiContainer, + createContainer, + getResizeObserver, + VictoryZoomContainer +}; +pageData.examples = { + 'Basic with right aligned legend': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={250}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n width={600}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Basic with right aligned legend","lang":"js"}}> + + , + 'Green with bottom aligned legend': props => + \n `${datum.y}`}\n labelComponent={ datum.x}/>}\n mouseFollowTooltips\n voronoiDimension=\"x\"\n voronoiPadding={50}\n />\n }\n legendData={legendData}\n legendPosition=\"bottom\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.green}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n \n );\n }\n}","title":"Green with bottom aligned legend","lang":"js"}}> + +

+ {`This demonstrates how to combine cursor and voronoi containers to display tooltips along with a cursor.`} +

+ , + 'Multi-color (unordered) with responsive container': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n \n return (\n
\n
\n }\n legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}\n legendPosition=\"bottom-left\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.multiUnordered}\n width={width}\n >\n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}","title":"Multi-color (unordered) with responsive container","lang":"js"}}> + +

+ {`This demonstrates zoom for the x axis only.`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build a line chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic with right aligned legend"])} + {React.createElement(pageData.examples["Green with bottom aligned legend"])} + {React.createElement(pageData.examples["Multi-color (unordered) with responsive container"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
  • + {`The `} + + {`theme`} + + {` and `} + + {`themeColor`} + + {` props should be applied at the most top level component`} +
    • +
  • + {`Use `} + + {`ChartGroup`} + + {` to apply theme color scales and other properties to multiple components`} +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`Chart`} + + {` props, see `} + + {`VictoryChart`} + +
    • +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartGroup`} + + {` props, see `} + + {`VictoryGroup`} + +
    • +
  • + {`For `} + + {`ChartLine`} + + {` props, see `} + + {`Victoryline`} + +
    • +
  • + {`For `} + + {`ChartVoronoiContainer`} + + {` props, see `} + + {`VictoryVoronoiContainer`} + +
    • +
  • + {`For `} + + {`VictoryZoomContainer`} + + {` props, see `} + + {`VictoryZoomContainerline`} + +
    • +
+ +); +Component.displayName = 'ChartsLineChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/patterns/react.js b/packages/react-docs/src/generated/charts/patterns/react.js new file mode 100644 index 00000000000..9b5d89f10ad --- /dev/null +++ b/packages/react-docs/src/generated/charts/patterns/react.js @@ -0,0 +1,3371 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartDonut, + ChartDonutThreshold, + ChartDonutUtilization, + ChartGroup, + ChartLegend, + ChartLegendTooltip, + ChartPie, + ChartScatter, + ChartStack, + ChartThemeColor, + ChartVoronoiContainer, + createContainer, + getInteractiveLegendEvents, + getInteractiveLegendItemStyles, + getResizeObserver +} from '@patternfly/react-charts'; +import chart_area_Opacity from '@patternfly/react-tokens/dist/esm/chart_area_Opacity'; +import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; +import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; +import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; +import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; +import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; +import '@patternfly/patternfly/patternfly-charts.css'; +const pageData = { + "id": "Patterns", + "section": "charts", + "source": "react", + "slug": "/charts/patterns/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/Patterns/examples/patterms.md", + "propComponents": [ + { + "name": "Chart", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "backgroundComponent", + "type": "React.ReactElement", + "description": "The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the\nChart's style component includes background styles. The new element created from the passed backgroundComponent\nwill be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.\nAll of these props on Background should take prececence over what VictoryChart is trying to set." + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "endAngle", + "type": "number", + "description": "The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with\nstartAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart.\nThis prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and\nproceeding counterclockwise." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "Chart uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.height" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis." + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When the innerRadius prop is set, polar charts will be hollow rather than circular." + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showAxis", + "type": "boolean", + "description": "Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via\nchart styles.", + "defaultValue": "true" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag." + }, + { + "name": "startAngle", + "type": "number", + "description": "The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction\nwith endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the\nchart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position,\nand proceeding counterclockwise." + }, + { + "name": "style", + "type": "{ parent: object, background: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object with styles defined\nfor data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified\nvia props as they determine relative layout for components in Chart.\n\n\n@propType { parent: object, background: object }" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getChartTheme(themeColor, showAxis)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.width" + } + ] + }, + { + "name": "ChartArea", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartArea: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use its default Area component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[] | number[]", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartArea events.\nSince ChartArea only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartArea uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartArea. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartAxis", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axisComponent prop takes in an entire component which will be used\nto create the axis line. The new element created from the passed axisComponent\nwill be supplied with the following properties: x1, y1, x2, y2, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If an axisComponent\nis not supplied, ChartAxis will render its default AxisLine component." + }, + { + "name": "axisLabelComponent", + "type": "React.ReactElement", + "description": "The axisLabelComponent prop takes in an entire component which will be used\nto create the axis label. The new element created from the passed axisLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, transform, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an axisLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "axisValue", + "type": "number | string | object | Date", + "description": "The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when\ndependent axes should line up with values on the independent axis." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartAxis: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartAxis will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "crossAxis", + "type": "boolean", + "description": "This prop specifies whether a given axis is intended to cross another axis." + }, + { + "name": "dependentAxis", + "type": "boolean", + "description": "The dependentAxis prop specifies whether the axis corresponds to the\ndependent variable (usually y). This prop is useful when composing axis\nwith other components to form a chart." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your axis will include. This prop should be\ngiven as a array of the minimum and maximum expected values for your axis.\nIf this value is not given it will be calculated based on the scale or tickValues.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"axis\", \"axisLabel\", \"ticks\", \"tickLabels\", and \"grid\" are\nall valid targets for ChartAxis events. The eventKey may optionally be used to select a\nsingle element by index rather than an entire set. The eventHandlers object\nshould be given as an object whose keys are standard event names (i.e. onClick)\nand whose values are event callbacks. The return value of an event handler\nbe used to modify other elemnts. The return value should be given as an object or\nan array of objects with optional target and eventKey keys, and a mutation\nkey whose value is a function. The target and eventKey keys will default to those\ncorresponding to the element the event handler was attached to. The mutation\nfunction will be called with the calculated props for the individual selected\nelement (i.e. a single tick), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"grid\",\n eventKey: 2,\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"tickLabels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartAxis uses the standard externalEventMutations prop." + }, + { + "name": "fixLabelOverlap", + "type": "boolean", + "description": "When true, this prop reduces the number of tick labels to fit the length of the axis.\nLabels are removed at approximately even intervals from the original array of labels.\nThis feature only works well for labels that are approximately evenly spaced." + }, + { + "name": "gridComponent", + "type": "React.ReactElement", + "description": "The gridComponent prop takes in an entire component which will be used\nto create grid lines. The new element created from the passed gridComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a gridComponent\nis not supplied, ChartAxis will render its default GridLine component." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "invertAxis", + "type": "boolean", + "description": "If true, this value will flip the domain of a given axis." + }, + { + "name": "label", + "type": "any", + "description": "The label prop defines the label that will appear along the axis. This\nprop should be given as a value or an entire, HTML-complete label\ncomponent. If a label component is given, it will be cloned. The new\nelement's properties x, y, textAnchor, verticalAnchor, and transform\nwill have defaults provided by the axis; styles filled out with\ndefaults provided by the axis, and overrides from the label component.\nIf a value is given, a new ChartLabel will be created with props and\nstyles from the axis." + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "ChartAxis uses the standard name prop" + }, + { + "name": "offsetX", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the x-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "offsetY", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the y-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop specifies the position and orientation of your axis.\nValid values are 'top', 'bottom', 'left' and 'right'." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showGrid", + "type": "boolean", + "description": "Show axis grid and ticks", + "defaultValue": "false" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartAxis with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object\nwith styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg\nstyles are supported, but width, height, and padding should be specified via props as they\ndetermine relative layout for components in Chart. Functional styles may be defined for\ngrid, tick, and tickLabel style properties, and they will be evaluated with each tick.\n\nNote: When a component is rendered as a child of another Victory component, or within a custom\n element with standalone={false} parent styles will be applied to the enclosing tag.\nMany styles that can be applied to a parent will not be expressed when applied to a .\n\nNote: custom angle and verticalAnchor properties may be included in labels styles." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartAxis as a solo component, implement the theme directly on\nChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "tickComponent", + "type": "React.ReactElement", + "description": "The tickComponent prop takes in an entire component which will be used\nto create tick lines. The new element created from the passed tickComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a tickComponent\nis not supplied, ChartAxis will render its default Tick component." + }, + { + "name": "tickCount", + "type": "number", + "description": "The tickCount prop specifies approximately how many ticks should be drawn on the axis if\ntickValues are not explicitly provided. This value is calculated by d3 scale and\nprioritizes returning \"nice\" values and evenly spaced ticks over an exact number of ticks.\nIf you need an exact number of ticks, please specify them via the tickValues prop.\nThis prop must have a value greater than zero." + }, + { + "name": "tickFormat", + "type": "any[] | ((tick: any, index: number, ticks: any[]) => string | number)", + "description": "The tickFormat prop specifies how tick values should be expressed visually.\ntickFormat can be given as a function to be applied to every tickValue, or as\nan array of display values for each tickValue.\n\n@example d3.time.format(\"%Y\"), (x) => x.toPrecision(2), [\"first\", \"second\", \"third\"]" + }, + { + "name": "tickLabelComponent", + "type": "React.ReactElement", + "description": "The tickLabelComponent prop takes in an entire component which will be used\nto create the tick labels. The new element created from the passed tickLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, tick, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an tickLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "tickValues", + "type": "any[]", + "description": "The tickValues prop explicitly specifies which tick values to draw on the axis.\n\n@example [\"apples\", \"bananas\", \"oranges\"], [2, 4, 6, 8]" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: innerRadius may need to be set when using this property." + } + ] + }, + { + "name": "ChartBar", + "description": "", + "props": [ + { + "name": "alignment", + "type": "string", + "description": "The alignment prop specifies how bars should be aligned relative to their data points.\nThis prop may be given as “start”, “middle” or “end”. When this prop is not specified,\nbars will have “middle” alignment relative to their data points." + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "barRatio", + "type": "number", + "description": "The barRatio prop specifies an approximate ratio between bar widths and spaces between bars.\nWhen width is not specified via the barWidth prop or in bar styles, the barRatio prop will\nbe used to calculate a default width for each bar given the total number of bars in the data series\nand the overall width of the chart." + }, + { + "name": "barWidth", + "type": "number | Function", + "description": "The barWidth prop is used to specify the width of each bar. This prop may be given as\na number of pixels or as a function that returns a number. When this prop is given as\na function, it will be evaluated with the arguments datum, and active. When this value\nis not given, a default value will be calculated based on the overall dimensions of\nthe chart, and the number of bars." + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartBar: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartBar will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "Function | number | { top, bottom, topLeft, topRight, bottomLeft, bottomRight }", + "description": "The cornerRadius prop specifies a radius to apply to each bar.\nIf this prop is given as a single number, the radius will only be applied to the top of each bar.\nWhen this prop is given as a function, it will be evaluated with the arguments datum, and active.\n\n\n@example {topLeft: ({ datum }) => datum.x * 4}" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create a bar.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartBar: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartBar will use its default Bar component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for VictoryBar events.\nThe eventKey may optionally be used to select a single element by index rather than an entire\nset. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: \"thisOne\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: \"theOtherOne\",\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: \"theOtherOne\",\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartBar uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether the bars will be laid vertically or\nhorizontally. The bars will be vertical if this prop is false or unspecified,\nor horizontal if the prop is set to true." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the bar. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartBar. If individual labels are required for each\ndata point, they should be created by composing ChartBar with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartBar with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartBar. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartBar as a solo component, implement the theme directly on\nChartBar. If you are wrapping ChartBar in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartDonut", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "capHeight", + "type": "number | string | Function", + "description": "The capHeight prop defines a text metric for the font being used: the expected height of capital letters.\nThis is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of\nline height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a\nunitless number, it is assumed to be ems.", + "defaultValue": "1.1" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the pie\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartDonut will automatically assign\nvalues from this color scale to the pie slices unless colors are explicitly provided in the\ndata object" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartDonut: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartDonut will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "Set the cornerRadius for every dataComponent (Slice by default) within ChartDonut" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted,\nwhere data X-value is the slice label (string or number),\nand Y-value is the corresponding number value represented by the slice\nData should be in the form of an array of data points.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire, HTML-complete data component which will be used to\ncreate slices for each datum in the pie chart. The new element created from the passed\ndataComponent will have the property datum set by the pie chart for the point it renders;\nproperties style and pathFunction calculated by ChartDonut; an index property set\ncorresponding to the location of the datum in the data provided to the pie; events bound to\nthe ChartDonut; and the d3 compatible slice object.\nIf a dataComponent is not provided, ChartDonut's Slice component will be used." + }, + { + "name": "endAngle", + "type": "number", + "description": "The overall end angle of the pie in degrees. This prop is used in conjunction with\nstartAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartDonut\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartDonut uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size)\nin order to accommodate the extra legend.\n\nBy default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate\nlegends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut height.\n\nTypically, the parent container is set to the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.height" + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When creating a donut chart, this prop determines the number of pixels between\nthe center of the chart and the inner edge." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartDonut. If individual labels are required for each\ndata point, they should be created by composing ChartDonut with VictoryScatter" + }, + { + "name": "labelPosition", + "type": "string | Function", + "description": "The labelPosition prop specifies the angular position of each label relative to its corresponding slice.\nWhen this prop is not given, the label will be positioned at the centroid of each slice." + }, + { + "name": "labelRadius", + "type": "number | Function", + "description": "The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.\nIf this prop is not set, the label radius will default to the radius of the pie + label padding." + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data." + }, + { + "name": "legendPosition", + "type": "'bottom' | 'right'", + "description": "The legend position relation to the donut chart. Valid values are 'bottom' and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padAngle", + "type": "number | Function", + "description": "The padAngle prop determines the amount of separation between adjacent data slices\nin number of degrees" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "radius", + "type": "number | Function", + "description": "Specifies the radius of the chart. If this property is not provided it is computed\nfrom width, height, and padding props" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartDonut with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "startAngle", + "type": "number", + "description": "The overall start angle of the pie in degrees. This prop is used in conjunction with\nendAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your pie. ChartDonut relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "subTitle", + "type": "string", + "description": "The subtitle for the donut chart" + }, + { + "name": "subTitleComponent", + "type": "React.ReactElement", + "description": "The label component to render the chart subTitle.\n\nWhen overriding the subTitleComponent prop, title and subTitle will be centered independently. You may choose to\nuse the x and y props of ChartLabel to adjust the center position. For example:\n\n
\nsubTitle=\"Pets\"\nsubTitleComponent={}\ntitle={100}\ntitleComponent={}\n
\n\nNote: Default label properties may be applied" + }, + { + "name": "subTitlePosition", + "type": "'bottom' | 'center' | 'right'", + "description": "The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'", + "defaultValue": "ChartDonutStyles.label.subTitlePosition" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartDonut as a solo component, implement the theme directly on\nChartDonut. If you are wrapping ChartDonut in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getDonutTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string", + "description": "The title for the donut chart" + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The label component to render the chart title.\n\nWhen centering both title and subTitle props, it's possible to override both styles via an array provided to\nChartLabel. The first item in the array is associated with title styles, while the second item in the array is\nassociated with subtitle styles.\n\n
\nsubTitle=\"Pets\"\ntitle={100}\ntitleComponent={\n  \n}\n
\n\nIn this case, both title and subTitle will be centered together. However, should you also override the\nsubTitleComponent prop, title and subTitle will be centered independently. You may choose to\nuse the x and y props of ChartLabel to adjust the center position. For example:\n\n
\nsubTitle=\"Pets\"\nsubTitleComponent={}\ntitle={100}\ntitleComponent={}\n
\n\nNote: Default label properties may be applied", + "defaultValue": "" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.width" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + } + ] + }, + { + "name": "ChartDonutThreshold", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the pie\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartDonutThreshold will automatically assign\nvalues from this color scale to the pie slices unless colors are explicitly provided in the\ndata object" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartDonutThreshold: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartDonutThreshold will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "Set the cornerRadius for every dataComponent (Slice by default) within ChartDonutThreshold" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted,\nwhere data X-value is the slice label (string or number),\nand Y-value is the corresponding number value represented by the slice\nData should be in the form of a single data point.\nThe data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\nNote: The Y-value is expected to represent a percentage\n\n@example data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}", + "defaultValue": "[]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire, HTML-complete data component which will be used to\ncreate slices for each datum in the pie chart. The new element created from the passed\ndataComponent will have the property datum set by the pie chart for the point it renders;\nproperties style and pathFunction calculated by ChartDonutThreshold; an index property set\ncorresponding to the location of the datum in the data provided to the pie; events bound to\nthe ChartDonutThreshold; and the d3 compatible slice object.\nIf a dataComponent is not provided, ChartDonutThreshold's Slice component will be used." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\nNote: Overridden by containerComponent\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "endAngle", + "type": "number", + "description": "The overall end angle of the pie in degrees. This prop is used in conjunction with\nstartAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartDonutThreshold\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartDonutThreshold uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same height in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.height" + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When creating a donut chart, this prop determines the number of pixels between\nthe center of the chart and the inner edge." + }, + { + "name": "invert", + "type": "boolean", + "description": "Invert the threshold color scale used to represent warnings, errors, etc.", + "defaultValue": "false" + }, + { + "name": "labelRadius", + "type": "number | Function", + "description": "The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.\nIf this prop is not set, the label radius will default to the radius of the pie + label padding." + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title", + "defaultValue": "[]" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padAngle", + "type": "number | Function", + "description": "The padAngle prop determines the amount of separation between adjacent data slices\nin number of degrees" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "radius", + "type": "number | Function", + "description": "Specifies the radius of the chart. If this property is not provided it is computed\nfrom width, height, and padding props" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartDonutThreshold with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "startAngle", + "type": "number", + "description": "The overall start angle of the pie in degrees. This prop is used in conjunction with\nendAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your pie. ChartDonutThreshold relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "subTitle", + "type": "string", + "description": "The subtitle for the donut chart" + }, + { + "name": "subTitlePosition", + "type": "'bottom' | 'center' | 'right'", + "description": "The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'", + "defaultValue": "ChartDonutStyles.label.subTitlePosition" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartDonutThreshold as a solo component, implement the theme directly on\nChartDonutThreshold. If you are wrapping ChartDonutThreshold in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getDonutThresholdStaticTheme(themeColor, invert)" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string", + "description": "The title for the donut chart" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.width" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + } + ] + }, + { + "name": "ChartDonutUtilization", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "capHeight", + "type": "number | string | Function", + "description": "The capHeight prop defines a text metric for the font being used: the expected height of capital letters.\nThis is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of\nline height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a\nunitless number, it is assumed to be ems." + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the pie\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartDonutUtilization will automatically assign\nvalues from this color scale to the pie slices unless colors are explicitly provided in the\ndata object" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartDonutUtilization: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartDonutUtilization will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "Set the cornerRadius for every dataComponent (Slice by default) within ChartDonutUtilization" + }, + { + "name": "data", + "type": "any", + "description": "The data prop specifies the data to be plotted,\nwhere data X-value is the slice label (string or number),\nand Y-value is the corresponding number value represented by the slice\nData should be in the form of a single data point.\nThe data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\nNote: The Y-value is expected to represent a percentage\n\n@example data={{ x: 'GBps capacity', y: 75 }}" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire, HTML-complete data component which will be used to\ncreate slices for each datum in the pie chart. The new element created from the passed\ndataComponent will have the property datum set by the pie chart for the point it renders;\nproperties style and pathFunction calculated by ChartDonutUtilization; an index property set\ncorresponding to the location of the datum in the data provided to the pie; events bound to\nthe ChartDonutUtilization; and the d3 compatible slice object.\nIf a dataComponent is not provided, ChartDonutUtilization's Slice component will be used." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\nNote: Overridden by containerComponent\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "endAngle", + "type": "number", + "description": "The overall end angle of the pie in degrees. This prop is used in conjunction with\nstartAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartDonutUtilization\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartDonutUtilization uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.height" + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When creating a donut chart, this prop determines the number of pixels between\nthe center of the chart and the inner edge." + }, + { + "name": "invert", + "type": "boolean", + "description": "Invert the threshold color scale used to represent warnings, errors, etc.\n\nInstead of showing a warning at 60% and an error at 90%; for example, this would allow users to show a warning\nbelow 60% and an error below 20%", + "defaultValue": "false" + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartDonutUtilization. If individual labels are required for each\ndata point, they should be created by composing ChartDonutUtilization with VictoryScatter" + }, + { + "name": "labelPosition", + "type": "string | Function", + "description": "The labelPosition prop specifies the angular position of each label relative to its corresponding slice.\nThis prop should be given as \"startAngle\", \"endAngle\", \"centroid\", or as a function that returns one of these\nvalues. When this prop is not given, the label will be positioned at the centroid of each slice." + }, + { + "name": "labelRadius", + "type": "number | Function", + "description": "The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.\nIf this prop is not set, the label radius will default to the radius of the pie + label padding." + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data." + }, + { + "name": "legendPosition", + "type": "'bottom' | 'right'", + "description": "The legend position relation to the donut chart. Valid values are 'bottom' and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padAngle", + "type": "number | Function", + "description": "The padAngle prop determines the amount of separation between adjacent data slices\nin number of degrees" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "radius", + "type": "number | Function", + "description": "Specifies the radius of the chart. If this property is not provided it is computed\nfrom width, height, and padding props" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartDonutUtilization with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "startAngle", + "type": "number", + "description": "The overall start angle of the pie in degrees. This prop is used in conjunction with\nendAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your pie. ChartDonutUtilization relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "subTitle", + "type": "string", + "description": "The subtitle for the donut chart label" + }, + { + "name": "subTitleComponent", + "type": "React.ReactElement", + "description": "The label component to render the chart subTitle.\n\nWhen overriding the subTitleComponent prop, title and subTitle will be centered independently. You may choose to\nuse the x and y props of ChartLabel to adjust the center position. For example:\n\n
\nsubTitle=\"Pets\"\nsubTitleComponent={}\ntitle={100}\ntitleComponent={}\n
\n\nNote: Default label properties may be applied" + }, + { + "name": "subTitlePosition", + "type": "'bottom' | 'center' | 'right'", + "description": "The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartDonutUtilization as a solo component, implement the theme directly on\nChartDonutUtilization. If you are wrapping ChartDonutUtilization in ChartChart, ChartGroup, or ChartThreshold\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getDonutUtilizationTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "thresholds", + "type": "any[]", + "description": "The dynamic portion of the chart will change colors when data reaches the given threshold. Colors may be\noverridden, but defaults shall be provided.\n\n@example thresholds={[{ value: 60, color: '#F0AB00' }, { value: 90, color: '#C9190B' }]}" + }, + { + "name": "title", + "type": "string", + "description": "The title for the donut chart label" + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The label component to render the donut chart title.\n\nWhen centering both title and subTitle props, it's possible to override both styles via an array provided to\nChartLabel. The first item in the array is associated with title styles, while the second item in the array is\nassociated with subtitle styles.\n\n
\nsubTitle=\"Pets\"\ntitle={100}\ntitleComponent={\n  \n}\n
\n\nIn this case, both title and subTitle will be centered together. However, should you also override the\nsubTitleComponent prop, title and subTitle will be centered independently. You may choose to\nuse the x and y props of ChartLabel to adjust the center position. For example:\n\n
\nsubTitle=\"Pets\"\nsubTitleComponent={}\ntitle={100}\ntitleComponent={}\n
\n\nNote: Default label properties may be applied" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.width" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + } + ] + }, + { + "name": "ChartGroup", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "color", + "type": "string", + "description": "The color prop is an optional prop that defines a single color to be applied to the\nchildren of ChartGroup. The color prop will override colors specified via colorScale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartGroup will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartGroup: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartGroup will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartGroup events.\nSince ChartGroup only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartGroup uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartGroup. If individual labels are required for each\ndata point, they should be created by composing ChartGroup with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "offset", + "type": "number", + "description": "The offset prop determines the number of pixels each element in a group should\nbe offset from its original position of the on the independent axis. In the\ncase of groups of bars, this number should be equal to the width of the bar\nplus the desired spacing between bars." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart,\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartGroup with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartGroup. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar or ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartLegend", + "description": "", + "props": [ + { + "name": "borderComponent", + "type": "React.ReactElement", + "description": "The borderComponent prop takes a component instance which will be responsible\nfor rendering a border around the legend. The new element created from the passed\nborderComponent will be provided with the following properties calculated by\nChartLegend: x, y, width, height, and style. Any of these props may be\noverridden by passing in props to the supplied component, or modified or ignored\nwithin the custom component itself. If a borderComponent\nis not provided, ChartLegend will use its default Border component.\nPlease note that the default width and height calculated\nfor the border component is based on approximated\ntext measurements, and may need to be adjusted." + }, + { + "name": "borderPadding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The borderPadding specifies the amount of padding that should\nbe added between the legend items and the border. This prop may be given as\na number, or asanobject with values specified for top, bottom, left, and right.\nPlease note that the default width and height calculated for the border\ncomponent is based on approximated text measurements, so padding may need to be adjusted." + }, + { + "name": "centerTitle", + "type": "boolean", + "description": "The centerTitle boolean prop specifies whether a legend title should be centered." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop defines a color scale to be applied to each data\nsymbol in ChartLegend. This prop should be given as an array of CSS\ncolors, or as a string corresponding to one of the built in color\nscales. Colors will repeat when there are more symbols than colors in the\nprovided colorScale." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartLegend: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLegend will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "{\n name?: string;\n labels?: {\n fill?: string;\n };\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array." + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes a component instance which will be\nresponsible for rendering a data element used to associate a symbol\nor color with each data series. The new element created from the\npassed dataComponent will be provided with the following properties\ncalculated by ChartLegend: x, y, size, style, and symbol. Any of\nthese props may be overridden by passing in props to the supplied\ncomponent, or modified or ignored within the custom component itself.\nIf a dataComponent is not provided, ChartLegend will use its\ndefault Point component.", + "defaultValue": "" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[]", + "description": "ChartLegend uses the standard eventKey prop to specify how event targets\nare addressed. This prop is not commonly used." + }, + { + "name": "events", + "type": "object[]", + "description": "ChartLegend uses the standard events prop." + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartLegend uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "gutter", + "type": "number | { left: number; right: number }", + "description": "The gutter prop defines the number of pixels between legend rows or\ncolumns, depending on orientation. When orientation is horizontal,\ngutters are between columns. When orientation is vertical, gutters\nare the space between rows." + }, + { + "name": "itemsPerRow", + "type": "number", + "description": "The itemsPerRow prop determines how many items to render in each row\nof a horizontal legend, or in each column of a vertical legend. This\nprop should be given as an integer. When this prop is not given,\nlegend items will be rendered in a single row or column." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes a component instance which will be used\nto render each legend label. The new element created from the passed\nlabelComponent will be supplied with the following properties: x, y,\nstyle, and text. Any of these props may be overridden by passing in\nprops to the supplied component, or modified or ignored within the\ncustom component itself. If labelComponent is omitted, a new\nChartLabel will be created with the props described above.", + "defaultValue": "" + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container with a viewBox\nattribute, or a static container with absolute width and height.\n\nUseful when legend is located inside a chart -- default is false.\n\nNote: Not compatible with containerComponent prop", + "defaultValue": "true" + }, + { + "name": "rowGutter", + "type": "number | { top: number, bottom: number }", + "description": "The rowGutter prop defines the number of pixels between legend rows.\nThis prop may be given as a number, or as an object with values\nspecified for “top” and “bottom” gutters. To set spacing between columns,\nuse the gutter prop.\n\n\n@example { top: 0, bottom: 10 }" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartLegend with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ border: object, data: object, labels: object, parent: object, title: object }", + "description": "The style prop specifies styles for your pie. ChartLegend relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "symbolSpacer", + "type": "number", + "description": "The symbolSpacer prop defines the number of pixels between data\ncomponents and label components." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartLegend as a solo component, implement the theme directly on\nChartLegend. If you are wrapping ChartLegend in ChartChart or\nChartGroup, please call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string | string[]", + "description": "The title prop specifies a title to render with the legend.\nThis prop should be given as a string, or an array of strings for multi-line titles." + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The titleComponent prop takes a component instance which will be used to render\na title for the component. The new element created from the passed\nlabelComponent will be supplied with the following properties: x, y, index, data,\ndatum, verticalAnchor, textAnchor, style, text, and events. Any of these props\nmay be overridden by passing in props to the supplied component, or modified\nor ignored within the custom component itself. If labelComponent is omitted,\na new ChartLabel will be created with the props described above.", + "defaultValue": "" + }, + { + "name": "titleOrientation", + "type": "string", + "description": "The titleOrientation prop specifies where the a title should be rendered\nin relation to the rest of the legend. Possible values\nfor this prop are “top”, “bottom”, “left”, and “right”." + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "x", + "type": "number", + "description": "The x and y props define the base position of the legend element." + }, + { + "name": "y", + "type": "number", + "description": "The x and y props define the base position of the legend element." + } + ] + }, + { + "name": "ChartLegendTooltip", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When true, tooltip events will set the active prop on both data and label elements." + }, + { + "name": "active", + "type": "boolean", + "description": "The active prop specifies whether the tooltip component should be displayed." + }, + { + "name": "angle", + "type": "string | number", + "description": "The angle prop specifies the angle to rotate the tooltip around its origin point." + }, + { + "name": "center", + "type": "{ x: number; y: number }", + "description": "The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object\nthat describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for\npositioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with\nChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set,\nnon-zero pointerLength values will no longer be respected.", + "defaultValue": "{ x: 0, y: 0 }" + }, + { + "name": "centerOffset", + "type": "{ x: number | Function, y: number | Function }", + "description": "The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout\npointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a\nfunction that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be\nrespected." + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders." + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number\nor a function of datum." + }, + { + "name": "data", + "type": "any[]", + "description": "Victory components can pass a data prop to their label component. This can be useful in custom components that need\nto make use of the entire dataset." + }, + { + "name": "datum", + "type": "{}", + "description": "Victory components can pass a datum prop to their label component. This can be used to calculate functional styles,\nand determine text." + }, + { + "name": "dx", + "type": "number | Function", + "description": "The dx prop defines a horizontal shift from the x coordinate." + }, + { + "name": "dy", + "type": "number | Function", + "description": "The dy prop defines a vertical shift from the y coordinate." + }, + { + "name": "events", + "type": "object", + "description": "The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of\nevent names and corresponding event handlers. When events are provided via Victory’s event system, event handlers\nwill be called with the event, the props of the component is attached to, and an eventKey.\n\n\n@example events={{onClick: (evt) => alert(\"x: \" + evt.clientX)}}" + }, + { + "name": "flyoutComponent", + "type": "React.ReactElement", + "description": "The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip.\nThe new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy,\nindex, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events.\nAny of these props may be overridden by passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If flyoutComponent is omitted, a default Flyout component will be created with props\ndescribed above.\n\n@example flyoutComponent={}, flyoutComponent={}" + }, + { + "name": "flyoutHeight", + "type": "number | Function", + "description": "The flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function\nof datum. If this prop is not set, height will be determined based on an approximate text size calculated from the\ntext and style props provided to ChartTooltip." + }, + { + "name": "flyoutStyle", + "type": "number | Function", + "description": "The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the\nflyoutComponent." + }, + { + "name": "flyoutWidth", + "type": "number | Function", + "description": "The flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a\nfunction of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size\ncalculated from the text and style props provided to VictoryTooltip." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes a component instance which will be used to create group elements for use within\ncontainer elements. This prop defaults to a tag.}" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom.\nThis is useful when an orientation prop is not provided, and data will determine the default orientation. i.e.\nnegative values result in a left orientation and positive values will result in a right orientation by default." + }, + { + "name": "index", + "type": "number | string", + "description": "The index prop represents the index of the datum in the data array." + }, + { + "name": "isCursorTooltip", + "type": "boolean", + "description": "The ChartLegendTooltip is based on ChartCursorTooltip, which is intended to be used with a voronoi cursor\ncontainer. When isCursorTooltip is true (default), ChartCursorTooltip is used. If false, ChartTooltip is used.", + "defaultValue": "true" + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element\ncreated from the passed labelComponent will be supplied with the following properties: x, y, index, datum,\nverticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to\nthe supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a\nnew ChartLabel will be created with the props described above.\n\n@example labelComponent={}, labelComponent={}", + "defaultValue": "" + }, + { + "name": "labelTextAnchor", + "type": "string | Function", + "description": "Defines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid\nvalues are 'start', 'middle', 'end', and 'inherit'." + }, + { + "name": "legendData", + "type": "{\n childName?: string;\n name?: string;\n labels?: {\n fill?: string;\n };\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an array of objects with name (required), symbol, and\nlabels properties. The childName is used to sync the data series associated with the given chart child name.\n\nThe data prop must be given as an array.\n\n@example\n\nlegendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}\nlegendData={[{ childName: `cats`, name: `Total cats` }, { childName: `dogs`, name: 'Total dogs' }]}" + }, + { + "name": "orientation", + "type": "string | Function", + "description": "The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on.\nThis prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these\nvalues. If this prop is not provided it will be determined from the sign of the datum, and the value of the\nhorizontal prop." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "pointerLength", + "type": "number | Function", + "description": "The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be\ngiven as a positive number or a function of datum." + }, + { + "name": "pointerOrientation", + "type": "string | Function", + "description": "This prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set,\nit will be determined based on the overall orientation of the flyout in relation to its data point, and any center\nor centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right." + }, + { + "name": "pointerWidth", + "type": "number | Function", + "description": "The pointerWidth prop determines the width of the base of the triangular pointer extending from\nthe flyout. This prop may be given as a positive number or a function of datum." + }, + { + "name": "renderInPortal", + "type": "boolean", + "description": "When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element\nwithin ChartContainer. Note: This prop should not be set to true when using a custom container element." + }, + { + "name": "style", + "type": "React.CSSProperties | React.CSSProperties[]", + "description": "The style prop applies CSS properties to the rendered `` element." + }, + { + "name": "text", + "type": "number | string | Function | string[] | number[]", + "description": "The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or\nfunction of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which\nChartLabel will split in to separate elements." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string | string[] | Function", + "description": "The title prop specifies a title to render with the legend.\nThis prop should be given as a string, or an array of strings for multi-line titles.\n\nExample: title={(datum) => datum.x}" + }, + { + "name": "x", + "type": "number", + "description": "The x prop defines the x coordinate to use as a basis for horizontal positioning." + }, + { + "name": "y", + "type": "number", + "description": "The y prop defines the y coordinate to use as a basis for vertical positioning." + } + ] + }, + { + "name": "ChartPie", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the pie\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartPie will automatically assign\nvalues from this color scale to the pie slices unless colors are explicitly provided in the\ndata object" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartPie: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartPie will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "Set the cornerRadius for every dataComponent (Slice by default) within ChartPie" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted,\nwhere data X-value is the slice label (string or number),\nand Y-value is the corresponding number value represented by the slice\nData should be in the form of an array of data points.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire, HTML-complete data component which will be used to\ncreate slices for each datum in the pie chart. The new element created from the passed\ndataComponent will have the property datum set by the pie chart for the point it renders;\nproperties style and pathFunction calculated by ChartPie; an index property set\ncorresponding to the location of the datum in the data provided to the pie; events bound to\nthe ChartPie; and the d3 compatible slice object.\nIf a dataComponent is not provided, ChartPie's Slice component will be used." + }, + { + "name": "endAngle", + "type": "number", + "description": "The overall end angle of the pie in degrees. This prop is used in conjunction with\nstartAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartPie uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: When adding a legend, height (the overall SVG height) may need to be larger than pieHeight (the pie size)\nin order to accommodate the extra legend.\n\nBy default, pieHeight is the min. of either height or width. This covers most use cases in order to accommodate\nlegends within the same SVG. However, pieHeight (not height) may need to be set in order to adjust the pie height.\n\nTypically, the parent container is set to the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.height" + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When creating a donut chart, this prop determines the number of pixels between\nthe center of the chart and the inner edge. When this prop is set to zero\na regular pie chart is rendered." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartPie. If individual labels are required for each\ndata point, they should be created by composing ChartPie with VictoryScatter", + "defaultValue": "allowTooltip ? (\n \n) : (\n undefined\n)" + }, + { + "name": "labelPosition", + "type": "string | Function", + "description": "The labelPosition prop specifies the angular position of each label relative to its corresponding slice.\nThis prop should be given as \"startAngle\", \"endAngle\", \"centroid\", or as a function that returns one of these\nvalues. When this prop is not given, the label will be positioned at the centroid of each slice." + }, + { + "name": "labelRadius", + "type": "number | Function", + "description": "The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.\nIf this prop is not set, the label radius will default to the radius of the pie + label padding." + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'right'", + "description": "The legend position relation to the pie chart. Valid values are 'bottom' and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padAngle", + "type": "number | Function", + "description": "The padAngle prop determines the amount of separation between adjacent data slices\nin number of degrees" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "radius", + "type": "number | Function", + "description": "Specifies the radius of the chart. If this property is not provided it is computed\nfrom width, height, and padding props" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the final dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartPie with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "startAngle", + "type": "number", + "description": "The overall start angle of the pie in degrees. This prop is used in conjunction with\nendAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your pie. ChartPie relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartPie as a solo component, implement the theme directly on\nChartPie. If you are wrapping ChartPie in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.width" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + } + ] + }, + { + "name": "ChartScatter", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "bubbleProperty", + "type": "string", + "description": "The bubbleProperty prop indicates which property of the data object should be used\nto scale data points in a bubble chart" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartScatter: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartScatter will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartScatter: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartScatter will use its default Line component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartScatter events.\nSince ChartScatter only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a line), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartScatter uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartScatter. If individual labels are required for each\ndata point, they should be created by composing ChartScatter with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxBubbleSize", + "type": "number", + "description": "The maxBubbleSize prop sets an upper limit for scaling data points in a bubble chart" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minBubbleSize", + "type": "number", + "description": "The minBubbleSize prop sets a lower limit for scaling data points in a bubble chart" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "size", + "type": "number | ((data: any) => number)", + "description": "The size prop determines how to scale each data point", + "defaultValue": "({ active }) => (active ? ChartScatterStyles.activeSize : ChartScatterStyles.size)" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartScatter with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartScatter. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "symbol", + "type": "string | Function", + "description": "The symbol prop determines which symbol should be drawn to represent data points. Options are: \"circle\", \"cross\",\n\"diamond\", \"plus\", \"minus\", \"square\", \"star\", \"triangleDown\", \"triangleUp\"." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartScatter as a solo component, implement the theme directly on\nChartScatter. If you are wrapping ChartScatter in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartScatter.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartStack", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese values for x and y. When categories are not given as an object\nWhen this prop is set on a wrapper component, it will dictate the categories of\nits the children. If this prop is not set, any categories on child component\nor catigorical data, will be merged to create a shared set of categories.\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "ChartStack works with any combination of the following children: ChartArea, ChartBar, VictoryCandlestick,\nVictoryErrorBar, ChartGroup, ChartLine, VictoryScatter, ChartStack, and ChartVoronoi. Children supplied to\nChartGroup will be cloned and rendered with new props so that all children share common props such as domain and\nscale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartStack will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, (i.e. \"data\" and \"labels\"). The childName will refer to an\nindividual child of ChartStack, either by its name prop, or by index. The eventKey\nmay optionally be used to select a single element by index or eventKey rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey and childName keys,\nand a mutation key whose value is a function. The target and eventKey and childName keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n childName: \"firstBar\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n childName: \"secondBar\",\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n childName: \"secondBar\",\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartStack uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether the bars will be laid vertically or\nhorizontally. The bars will be vertical if this prop is false or unspecified,\nor horizontal if the prop is set to true." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your grouped chart. These styles will be\napplied to all grouped children" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "xOffset", + "type": "number", + "description": "The xOffset prop is used for grouping stacks of bars. This prop will be set\nby the ChartGroup component wrapper, or can be set manually." + } + ] + }, + { + "name": "ChartVoronoiContainer", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When the activateData prop is set to true, the active prop will be set to true on all\ndata components within a voronoi area. When this prop is set to false, the onActivated\nand onDeactivated callbacks will still fire, but no mutations to data components will\noccur via Victory’s event system." + }, + { + "name": "activateLabels", + "type": "boolean", + "description": "When the activateLabels prop is set to true, the active prop will be set to true on all\nlabels corresponding to points within a voronoi area. When this prop is set to false,\nthe onActivated and onDeactivated callbacks will still fire, but no mutations to label\ncomponents will occur via Victory’s event system. Labels defined directly on\nChartVoronoiContainer via the labels prop will still appear when this prop is set to false." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by the container" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "disable", + "type": "boolean", + "description": "When the disable prop is set to true, ChartVoronoiContainer events will not fire." + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop specified the component that will be rendered when labels are defined\non ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered.", + "defaultValue": "" + }, + { + "name": "labels", + "type": "(point: any, index: number, points: any[]) => string", + "description": "When a labels prop is provided to ChartVoronoiContainer it will render a label component\nrather than activating labels on the child components it renders. This is useful for\ncreating multi- point tooltips. This prop should be given as a function which will be called\nonce for each active point. The labels function will be called with the arguments point,\nindex, and points, where point refers to a single active point, index refers to the position\nof that point in the array of active points, and points is an array of all active points." + }, + { + "name": "mouseFollowTooltips", + "type": "boolean", + "description": "When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip\nfollows the position of the mouse." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "onActivated", + "type": "Function", + "description": "The onActivated prop accepts a function to be called whenever new data points are activated.\nThe function is called with the parameters points (an array of active data objects) and props\n(the props used by ChartVoronoiContainer)." + }, + { + "name": "onDeactivated", + "type": "Function", + "description": "The onDeactivated prop accepts a function to be called whenever points are deactivated. The\nfunction is called with the parameters points (an array of the newly-deactivated data objects)\nand props (the props used by ChartVoronoiContainer)." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. ChartTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "radius", + "type": "number", + "description": "When the radius prop is set, the voronoi areas associated with each data point will be no larger\nthan the given radius. This prop should be given as a number." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height.\n\n@default true" + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "voronoiBlacklist", + "type": "string[]", + "description": "The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a\nshared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist\narray will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as\nactive, and will not contribute date to shared tooltips or labels." + }, + { + "name": "voronoiDimension", + "type": "'x' | 'y'", + "description": "When the voronoiDimension prop is set, voronoi selection will only take the given dimension into\naccount. For example, when dimension is set to “x”, all data points matching a particular x mouse\nposition will be activated regardless of y value. When this prop is not given, voronoi selection\nis determined by both x any y values." + }, + { + "name": "voronoiPadding", + "type": "number", + "description": "When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\nof a given chart may trigger voronoi events. This prop should be given as a number." + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + } + ], + "beta": true, + "examples": [ + "Basic pie chart", + "Bar chart", + "Stack chart", + "Donut chart", + "Donut utilization chart", + "Donut utilization chart with thresholds", + "Interactive legend with pie chart", + "Interactive legend with area chart", + "Custom pattern visibility", + "Custom color scale", + "Custom pattern defs", + "All patterns" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartDonut, + ChartDonutThreshold, + ChartDonutUtilization, + ChartGroup, + ChartLegend, + ChartLegendTooltip, + ChartPie, + ChartScatter, + ChartStack, + ChartThemeColor, + ChartVoronoiContainer, + createContainer, + getInteractiveLegendEvents, + getInteractiveLegendItemStyles, + getResizeObserver, + chart_area_Opacity, + chart_color_black_500, + chart_color_blue_300, + chart_color_green_300, + chart_color_cyan_300, + chart_color_gold_300 +}; +pageData.examples = { + 'Basic pie chart': props => + (\n
\n `${datum.x}: ${datum.y}`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n width={350}\n />\n
\n)","title":"Basic pie chart","lang":"js"}}> + + , + 'Bar chart': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}\n legendPosition=\"bottom\"\n hasPatterns\n height={275}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.purple}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Bar chart","lang":"js"}}> + + , + 'Stack chart': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n hasPatterns\n height={250}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n themeColor={ChartThemeColor.green}\n width={600}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Stack chart","lang":"js"}}> + + , + 'Donut chart': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"Pets\"\n title=\"100\"\n themeColor={ChartThemeColor.gold}\n width={350}\n />\n
\n)","title":"Donut chart","lang":"js"}}> + + , + 'Donut utilization chart': props => + (\n
\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}\n legendPosition=\"bottom\"\n padding={{\n bottom: 65, // Adjusted to accommodate legend\n left: 20,\n right: 20,\n top: 20\n }}\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n themeColor={ChartThemeColor.green}\n thresholds={[{ value: 60 }, { value: 90 }]}\n width={300}\n />\n
\n)","title":"Donut utilization chart","lang":"js"}}> + +

+ {`This demonstrates how to hide a pattern for the static, unused portion of the donut utilization chart.`} +

+ , + 'Donut utilization chart with thresholds': props => + (\n
\n datum.x ? datum.x : null}\n padding={{\n bottom: 65, // Adjusted to accommodate legend\n left: 20,\n right: 20,\n top: 20\n }}\n width={675}\n >\n datum.x ? `${datum.x}: ${datum.y}%` : null}\n legendData={[{ name: `Storage capacity: 45%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}\n legendPosition=\"bottom\"\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n themeColor={ChartThemeColor.orange}\n />\n \n
\n)","title":"Donut utilization chart with thresholds","lang":"js"}}> + +

+ {`This demonstrates how to apply patterns to thresholds.`} +

+ , + 'Interactive legend with pie chart': props => + {\n const result = [];\n this.series.map((_, index) => {\n // Provide names for each series hidden / shown -- use the same name for a pie chart\n result.push(['pie']);\n });\n return result;\n };\n\n // Returns onMouseOver, onMouseOut, and onClick events for the interactive legend\n this.getEvents = () => getInteractiveLegendEvents({\n chartNames: this.getChartNames(),\n isHidden: this.isHidden,\n legendName: 'legend',\n onLegendClick: this.handleLegendClick\n });\n\n // Returns legend data styled per hiddenSeries\n this.getLegendData = () => {\n const { hiddenSeries } = this.state;\n return this.series.map((s, index) => {\n return {\n ...s.legendItem, // name property\n ...getInteractiveLegendItemStyles(hiddenSeries.has(index)) // hidden styles\n };\n });\n };\n\n // Hide each data series individually\n this.handleLegendClick = (props) => {\n if (!this.state.hiddenSeries.delete(props.index)) {\n this.state.hiddenSeries.add(props.index);\n }\n this.setState({ hiddenSeries: new Set(this.state.hiddenSeries) });\n };\n\n // Returns true if data series is hidden\n this.isHidden = (index) => {\n const { hiddenSeries } = this.state; // Skip if already hidden \n return hiddenSeries.has(index);\n };\n };\n\n render() {\n const { hiddenSeries, width } = this.state;\n\n const data = [];\n this.series.map((s, index) => {\n data.push(!hiddenSeries.has(index) ? s.datapoints : { y: null });\n });\n \n return (\n
\n }\n legendPosition=\"bottom\"\n padding={{\n bottom: 65,\n left: 20,\n right: 20,\n top: 20\n }}\n showAxis={false}\n themeColor={ChartThemeColor.multiUnordered}\n width={500}\n >\n `${datum.x}: ${datum.y}`}\n name=\"pie\"\n />\n \n
\n );\n }\n}","title":"Interactive legend with pie chart","lang":"js"}}> + +

+ {`This demonstrates how to add an interactive legend to a pie chart using events such as `} + + + {`onMouseOver`} + + {`, `} + + + {`onMouseOut`} + + {`, and `} + + + {`onClick`} + + {`.`} +

+ , + 'Interactive legend with area chart': props => + {};\n this.state = {\n hiddenSeries: new Set(),\n width: 0\n };\n this.series = [{\n datapoints: [\n { x: '2015', y: 3 },\n { x: '2016', y: 4 },\n { x: '2017', y: 8 },\n { x: '2018', y: 6 }\n ],\n legendItem: { name: 'Cats' }\n }, {\n datapoints: [\n { x: '2015', y: 2 },\n { x: '2016', y: 3 },\n { x: '2017', y: 4 },\n { x: '2018', y: 5 },\n { x: '2019', y: 6 }\n ],\n legendItem: { name: 'Dogs' }\n }, {\n datapoints: [\n { x: '2015', y: 1 },\n { x: '2016', y: 2 },\n { x: '2017', y: 3 },\n { x: '2018', y: 2 },\n { x: '2019', y: 4 }\n ],\n legendItem: { name: 'Birds' }\n }];\n\n // Returns groups of chart names associated with each data series\n this.getChartNames = () => {\n const result = [];\n this.series.map((_, index) => {\n // Each group of chart names are hidden / shown together\n result.push([`area-${index}`, `scatter-${index}`]);\n });\n return result;\n };\n\n // Returns onMouseOver, onMouseOut, and onClick events for the interactive legend\n this.getEvents = () => getInteractiveLegendEvents({\n chartNames: this.getChartNames(),\n isHidden: this.isHidden,\n legendName: 'legend',\n onLegendClick: this.handleLegendClick\n });\n\n // Returns legend data styled per hiddenSeries\n this.getLegendData = () => {\n const { hiddenSeries } = this.state;\n return this.series.map((s, index) => {\n return {\n childName: `area-${index}`, // Sync tooltip legend with the series associated with given chart name\n ...s.legendItem, // name property\n ...getInteractiveLegendItemStyles(hiddenSeries.has(index)) // hidden styles\n };\n });\n };\n\n // Hide each data series individually\n this.handleLegendClick = (props) => {\n if (!this.state.hiddenSeries.delete(props.index)) {\n this.state.hiddenSeries.add(props.index);\n }\n this.setState({ hiddenSeries: new Set(this.state.hiddenSeries) });\n };\n\n // Set chart width per current window size\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n\n // Returns true if data series is hidden\n this.isHidden = (index) => {\n const { hiddenSeries } = this.state; // Skip if already hidden \n return hiddenSeries.has(index);\n };\n\n this.isDataAvailable = () => {\n const { hiddenSeries } = this.state;\n return hiddenSeries.size !== this.series.length;\n };\n\n // Note: Container order is important\n const CursorVoronoiContainer = createContainer(\"voronoi\", \"cursor\");\n\n this.cursorVoronoiContainer = (\n datum.childName.includes('area-') && datum.y !== null ? `${datum.y}` : null}\n labelComponent={ datum.x}/>}\n mouseFollowTooltips\n voronoiDimension=\"x\"\n voronoiPadding={50}\n />\n );\n };\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n // Tips:\n // 1. Omitting hidden components will reassign color scale, use null data instead or custom colors\n // 2. Set domain or tick axis labels to account for when all data series are hidden\n // 3. Omit tooltip for ChartScatter component by checking childName prop\n // 4. Omit tooltip when all data series are hidden\n // 5. Clone original container to ensure tooltip events are not lost when data series are hidden / shown\n render() {\n const { hiddenSeries, width } = this.state;\n\n const container = React.cloneElement(\n this.cursorVoronoiContainer, \n {\n disable: !this.isDataAvailable()\n }\n );\n\n return (\n
\n
\n }\n legendPosition=\"bottom-left\"\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50,\n }}\n maxDomain={{y: 9}}\n themeColor={ChartThemeColor.multiUnordered}\n width={width}\n >\n \n \n \n {this.series.map((s, index) => {\n return (\n (active ? 5 : 3)}\n />\n );\n })}\n \n \n {this.series.map((s, index) => {\n return (\n \n );\n })}\n \n \n
\n
\n );\n }\n}","title":"Interactive legend with area chart","lang":"js"}}> + +

+ {`This demonstrates how to add an interactive legend using events such as `} + + + {`onMouseOver`} + + {`, `} + + + {`onMouseOut`} + + {`, and `} + + + {`onClick`} + + {`.`} +

+ , + 'Custom pattern visibility': props => + (\n
\n `${datum.x}: ${datum.y}`}\n legendData={[{ name: 'Cats: 15' }, { name: 'Dogs: 15' }, { name: 'Birds: 15' }, { name: 'Fish: 25' }, { name: 'Rabbits: 30' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n themeColor={ChartThemeColor.multiUnordered}\n width={350}\n />\n
\n)","title":"Custom pattern visibility","lang":"js"}}> + +

+ {`This demonstrates how to omit patterns from pie chart segments.`} +

+ , + 'Custom color scale': props => + (\n
\n `${datum.x}: ${datum.y}`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n width={350}\n />\n
\n)","title":"Custom color scale","lang":"js"}}> + +

+ {`This demonstrates how to apply a custom color scale to patterns.`} +

+ , + 'Custom pattern defs': props => + (\n
\n \n \n \n \n \n \n \n \n \n \n `${datum.x}: ${datum.y}`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}\n themeColor={ChartThemeColor.multiUnordered}\n width={350}\n />\n
\n)","title":"Custom pattern defs","lang":"js"}}> + +

+ {`This demonstrates how to create custom patterns.`} +

+ , + 'All patterns': props => + (\n
\n `${datum.x}: ${datum.y}`}\n legendData={[\n { name: 'Cats: 6' },\n { name: 'Dogs: 6' },\n { name: 'Birds: 6' },\n { name: 'Fish: 6' },\n { name: 'Rabbits: 6' },\n { name: 'Squirels: 6' },\n { name: 'Chipmunks: 6' },\n { name: 'Bats: 6' },\n { name: 'Ducks: 6' },\n { name: 'Geese: 6' },\n { name: 'Bobcat: 6' },\n { name: 'Foxes: 6' },\n { name: 'Coyotes: 6' },\n { name: 'Deer: 6' },\n { name: 'Bears: 6' },\n ]}\n legendAllowWrap\n legendPosition=\"bottom\"\n padding={{\n bottom: 110,\n left: 20,\n right: 20,\n top: 20\n }}\n themeColor={ChartThemeColor.multiOrdered}\n width={600}\n />\n
\n)","title":"All patterns","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic pie chart"])} + {React.createElement(pageData.examples["Bar chart"])} + {React.createElement(pageData.examples["Stack chart"])} + {React.createElement(pageData.examples["Donut chart"])} + {React.createElement(pageData.examples["Donut utilization chart"])} + {React.createElement(pageData.examples["Donut utilization chart with thresholds"])} + {React.createElement(pageData.examples["Interactive legend with pie chart"])} + {React.createElement(pageData.examples["Interactive legend with area chart"])} + {React.createElement(pageData.examples["Custom pattern visibility"])} + {React.createElement(pageData.examples["Custom color scale"])} + {React.createElement(pageData.examples["Custom pattern defs"])} + {React.createElement(pageData.examples["All patterns"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`Chart`} + + {` props, see `} + + {`VictoryChart`} + +
    • +
  • + {`For `} + + {`ChartArea`} + + {` props, see `} + + {`VictoryArea`} + +
    • +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartBar`} + + {` props, see `} + + {`VictoryBar`} + +
    • +
  • + {`For `} + + {`ChartDonut`} + + {` props, see `} + + {`VictoryPie`} + +
    • +
  • + {`For `} + + {`ChartDonutThreshold`} + + {` props, see `} + + {`VictoryPie`} + +
    • +
  • + {`For `} + + {`ChartDonutUtilization`} + + {` props, see `} + + {`VictoryPie`} + +
    • +
  • + {`For `} + + {`ChartGroup`} + + {` props, see `} + + {`VictoryGroup`} + +
    • +
  • + {`For `} + + {`ChartLegend`} + + {` props, see `} + + {`VictoryLegend`} + +
    • +
  • + {`For `} + + {`ChartPie`} + + {` props, see `} + + {`VictoryPie`} + +
    • +
  • + {`For `} + + {`ChartScatter`} + + {` props, see `} + + {`VictoryScatter`} + +
    • +
  • + {`For `} + + {`ChartStack`} + + {` props, see `} + + {`VictoryStack`} + +
    • +
  • + {`For `} + + {`ChartVoronoiContainer`} + + {` props, see `} + + {`VictoryVoronoiContainer`} + +
    • +
+ +); +Component.displayName = 'ChartsPatternsReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/pie-chart/react.js b/packages/react-docs/src/generated/charts/pie-chart/react.js new file mode 100644 index 00000000000..742526edb4e --- /dev/null +++ b/packages/react-docs/src/generated/charts/pie-chart/react.js @@ -0,0 +1,370 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; +const pageData = { + "id": "Pie chart", + "section": "charts", + "source": "react", + "slug": "/charts/pie-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartPie/examples/ChartPie.md", + "propComponents": [ + { + "name": "ChartPie", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the pie\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartPie will automatically assign\nvalues from this color scale to the pie slices unless colors are explicitly provided in the\ndata object" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartPie: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartPie will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "Set the cornerRadius for every dataComponent (Slice by default) within ChartPie" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted,\nwhere data X-value is the slice label (string or number),\nand Y-value is the corresponding number value represented by the slice\nData should be in the form of an array of data points.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire, HTML-complete data component which will be used to\ncreate slices for each datum in the pie chart. The new element created from the passed\ndataComponent will have the property datum set by the pie chart for the point it renders;\nproperties style and pathFunction calculated by ChartPie; an index property set\ncorresponding to the location of the datum in the data provided to the pie; events bound to\nthe ChartPie; and the d3 compatible slice object.\nIf a dataComponent is not provided, ChartPie's Slice component will be used." + }, + { + "name": "endAngle", + "type": "number", + "description": "The overall end angle of the pie in degrees. This prop is used in conjunction with\nstartAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartPie uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: When adding a legend, height (the overall SVG height) may need to be larger than pieHeight (the pie size)\nin order to accommodate the extra legend.\n\nBy default, pieHeight is the min. of either height or width. This covers most use cases in order to accommodate\nlegends within the same SVG. However, pieHeight (not height) may need to be set in order to adjust the pie height.\n\nTypically, the parent container is set to the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.height" + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When creating a donut chart, this prop determines the number of pixels between\nthe center of the chart and the inner edge. When this prop is set to zero\na regular pie chart is rendered." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartPie. If individual labels are required for each\ndata point, they should be created by composing ChartPie with VictoryScatter", + "defaultValue": "allowTooltip ? (\n \n) : (\n undefined\n)" + }, + { + "name": "labelPosition", + "type": "string | Function", + "description": "The labelPosition prop specifies the angular position of each label relative to its corresponding slice.\nThis prop should be given as \"startAngle\", \"endAngle\", \"centroid\", or as a function that returns one of these\nvalues. When this prop is not given, the label will be positioned at the centroid of each slice." + }, + { + "name": "labelRadius", + "type": "number | Function", + "description": "The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.\nIf this prop is not set, the label radius will default to the radius of the pie + label padding." + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'right'", + "description": "The legend position relation to the pie chart. Valid values are 'bottom' and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padAngle", + "type": "number | Function", + "description": "The padAngle prop determines the amount of separation between adjacent data slices\nin number of degrees" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "radius", + "type": "number | Function", + "description": "Specifies the radius of the chart. If this property is not provided it is computed\nfrom width, height, and padding props" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the final dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartPie with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "startAngle", + "type": "number", + "description": "The overall start angle of the pie in degrees. This prop is used in conjunction with\nendAngle to create a pie that spans only a segment of a circle." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your pie. ChartPie relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartPie as a solo component, implement the theme directly on\nChartPie. If you are wrapping ChartPie in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.pie.width" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + } + ] + } + ], + "examples": [ + "Basic with right aligned legend", + "Orange with right aligned legend", + "Multi-color (ordered) with bottom aligned legend" + ] +}; +pageData.liveContext = { + ChartPie, + ChartThemeColor +}; +pageData.examples = { + 'Basic with right aligned legend': props => + (\n
\n `${datum.x}: ${datum.y}`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n width={350}\n />\n
\n)","title":"Basic with right aligned legend","lang":"js"}}> + + , + 'Orange with right aligned legend': props => + (\n
\n `${datum.x}: ${datum.y}`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n themeColor={ChartThemeColor.orange}\n width={350}\n />\n
\n)","title":"Orange with right aligned legend","lang":"js"}}> + + , + 'Multi-color (ordered) with bottom aligned legend': props => + (\n
\n `${datum.x}: ${datum.y}`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendPosition=\"bottom\"\n padding={{\n bottom: 65,\n left: 20,\n right: 20,\n top: 20\n }}\n themeColor={ChartThemeColor.multiOrdered}\n width={300}\n />\n
\n)","title":"Multi-color (ordered) with bottom aligned legend","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build a pie chart using a Katacoda tutorial starting with a simple chart, adding tooltips, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic with right aligned legend"])} + {React.createElement(pageData.examples["Orange with right aligned legend"])} + {React.createElement(pageData.examples["Multi-color (ordered) with bottom aligned legend"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`ChartPie`} + + {` props, see `} + + {`VictoryPie`} + +
    • +
+ +); +Component.displayName = 'ChartsPieChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/resize-observer/react.js b/packages/react-docs/src/generated/charts/resize-observer/react.js new file mode 100644 index 00000000000..24acf32b1ca --- /dev/null +++ b/packages/react-docs/src/generated/charts/resize-observer/react.js @@ -0,0 +1,2503 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartBullet, + ChartGroup, + ChartLegend, + ChartStack, + ChartThemeColor, + ChartThreshold, + ChartTooltip, + ChartVoronoiContainer, + getResizeObserver +} from '@patternfly/react-charts'; +import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; +import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; +import '@patternfly/patternfly/patternfly-charts.css'; +const pageData = { + "id": "Resize observer", + "section": "charts", + "source": "react", + "slug": "/charts/resize-observer/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md", + "propComponents": [ + { + "name": "Chart", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "backgroundComponent", + "type": "React.ReactElement", + "description": "The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the\nChart's style component includes background styles. The new element created from the passed backgroundComponent\nwill be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.\nAll of these props on Background should take prececence over what VictoryChart is trying to set." + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "endAngle", + "type": "number", + "description": "The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with\nstartAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart.\nThis prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and\nproceeding counterclockwise." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "Chart uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.height" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis." + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When the innerRadius prop is set, polar charts will be hollow rather than circular." + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showAxis", + "type": "boolean", + "description": "Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via\nchart styles.", + "defaultValue": "true" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag." + }, + { + "name": "startAngle", + "type": "number", + "description": "The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction\nwith endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the\nchart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position,\nand proceeding counterclockwise." + }, + { + "name": "style", + "type": "{ parent: object, background: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object with styles defined\nfor data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified\nvia props as they determine relative layout for components in Chart.\n\n\n@propType { parent: object, background: object }" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getChartTheme(themeColor, showAxis)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.width" + } + ] + }, + { + "name": "ChartArea", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartArea: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use its default Area component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[] | number[]", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartArea events.\nSince ChartArea only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartArea uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartArea. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartAxis", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axisComponent prop takes in an entire component which will be used\nto create the axis line. The new element created from the passed axisComponent\nwill be supplied with the following properties: x1, y1, x2, y2, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If an axisComponent\nis not supplied, ChartAxis will render its default AxisLine component." + }, + { + "name": "axisLabelComponent", + "type": "React.ReactElement", + "description": "The axisLabelComponent prop takes in an entire component which will be used\nto create the axis label. The new element created from the passed axisLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, transform, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an axisLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "axisValue", + "type": "number | string | object | Date", + "description": "The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when\ndependent axes should line up with values on the independent axis." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartAxis: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartAxis will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "crossAxis", + "type": "boolean", + "description": "This prop specifies whether a given axis is intended to cross another axis." + }, + { + "name": "dependentAxis", + "type": "boolean", + "description": "The dependentAxis prop specifies whether the axis corresponds to the\ndependent variable (usually y). This prop is useful when composing axis\nwith other components to form a chart." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your axis will include. This prop should be\ngiven as a array of the minimum and maximum expected values for your axis.\nIf this value is not given it will be calculated based on the scale or tickValues.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"axis\", \"axisLabel\", \"ticks\", \"tickLabels\", and \"grid\" are\nall valid targets for ChartAxis events. The eventKey may optionally be used to select a\nsingle element by index rather than an entire set. The eventHandlers object\nshould be given as an object whose keys are standard event names (i.e. onClick)\nand whose values are event callbacks. The return value of an event handler\nbe used to modify other elemnts. The return value should be given as an object or\nan array of objects with optional target and eventKey keys, and a mutation\nkey whose value is a function. The target and eventKey keys will default to those\ncorresponding to the element the event handler was attached to. The mutation\nfunction will be called with the calculated props for the individual selected\nelement (i.e. a single tick), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"grid\",\n eventKey: 2,\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"tickLabels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartAxis uses the standard externalEventMutations prop." + }, + { + "name": "fixLabelOverlap", + "type": "boolean", + "description": "When true, this prop reduces the number of tick labels to fit the length of the axis.\nLabels are removed at approximately even intervals from the original array of labels.\nThis feature only works well for labels that are approximately evenly spaced." + }, + { + "name": "gridComponent", + "type": "React.ReactElement", + "description": "The gridComponent prop takes in an entire component which will be used\nto create grid lines. The new element created from the passed gridComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a gridComponent\nis not supplied, ChartAxis will render its default GridLine component." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "invertAxis", + "type": "boolean", + "description": "If true, this value will flip the domain of a given axis." + }, + { + "name": "label", + "type": "any", + "description": "The label prop defines the label that will appear along the axis. This\nprop should be given as a value or an entire, HTML-complete label\ncomponent. If a label component is given, it will be cloned. The new\nelement's properties x, y, textAnchor, verticalAnchor, and transform\nwill have defaults provided by the axis; styles filled out with\ndefaults provided by the axis, and overrides from the label component.\nIf a value is given, a new ChartLabel will be created with props and\nstyles from the axis." + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "ChartAxis uses the standard name prop" + }, + { + "name": "offsetX", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the x-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "offsetY", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the y-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop specifies the position and orientation of your axis.\nValid values are 'top', 'bottom', 'left' and 'right'." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showGrid", + "type": "boolean", + "description": "Show axis grid and ticks", + "defaultValue": "false" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartAxis with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object\nwith styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg\nstyles are supported, but width, height, and padding should be specified via props as they\ndetermine relative layout for components in Chart. Functional styles may be defined for\ngrid, tick, and tickLabel style properties, and they will be evaluated with each tick.\n\nNote: When a component is rendered as a child of another Victory component, or within a custom\n element with standalone={false} parent styles will be applied to the enclosing tag.\nMany styles that can be applied to a parent will not be expressed when applied to a .\n\nNote: custom angle and verticalAnchor properties may be included in labels styles." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartAxis as a solo component, implement the theme directly on\nChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "tickComponent", + "type": "React.ReactElement", + "description": "The tickComponent prop takes in an entire component which will be used\nto create tick lines. The new element created from the passed tickComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a tickComponent\nis not supplied, ChartAxis will render its default Tick component." + }, + { + "name": "tickCount", + "type": "number", + "description": "The tickCount prop specifies approximately how many ticks should be drawn on the axis if\ntickValues are not explicitly provided. This value is calculated by d3 scale and\nprioritizes returning \"nice\" values and evenly spaced ticks over an exact number of ticks.\nIf you need an exact number of ticks, please specify them via the tickValues prop.\nThis prop must have a value greater than zero." + }, + { + "name": "tickFormat", + "type": "any[] | ((tick: any, index: number, ticks: any[]) => string | number)", + "description": "The tickFormat prop specifies how tick values should be expressed visually.\ntickFormat can be given as a function to be applied to every tickValue, or as\nan array of display values for each tickValue.\n\n@example d3.time.format(\"%Y\"), (x) => x.toPrecision(2), [\"first\", \"second\", \"third\"]" + }, + { + "name": "tickLabelComponent", + "type": "React.ReactElement", + "description": "The tickLabelComponent prop takes in an entire component which will be used\nto create the tick labels. The new element created from the passed tickLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, tick, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an tickLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "tickValues", + "type": "any[]", + "description": "The tickValues prop explicitly specifies which tick values to draw on the axis.\n\n@example [\"apples\", \"bananas\", \"oranges\"], [2, 4, 6, 8]" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: innerRadius may need to be set when using this property." + } + ] + }, + { + "name": "ChartBar", + "description": "", + "props": [ + { + "name": "alignment", + "type": "string", + "description": "The alignment prop specifies how bars should be aligned relative to their data points.\nThis prop may be given as “start”, “middle” or “end”. When this prop is not specified,\nbars will have “middle” alignment relative to their data points." + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "barRatio", + "type": "number", + "description": "The barRatio prop specifies an approximate ratio between bar widths and spaces between bars.\nWhen width is not specified via the barWidth prop or in bar styles, the barRatio prop will\nbe used to calculate a default width for each bar given the total number of bars in the data series\nand the overall width of the chart." + }, + { + "name": "barWidth", + "type": "number | Function", + "description": "The barWidth prop is used to specify the width of each bar. This prop may be given as\na number of pixels or as a function that returns a number. When this prop is given as\na function, it will be evaluated with the arguments datum, and active. When this value\nis not given, a default value will be calculated based on the overall dimensions of\nthe chart, and the number of bars." + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartBar: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartBar will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "Function | number | { top, bottom, topLeft, topRight, bottomLeft, bottomRight }", + "description": "The cornerRadius prop specifies a radius to apply to each bar.\nIf this prop is given as a single number, the radius will only be applied to the top of each bar.\nWhen this prop is given as a function, it will be evaluated with the arguments datum, and active.\n\n\n@example {topLeft: ({ datum }) => datum.x * 4}" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create a bar.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartBar: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartBar will use its default Bar component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for VictoryBar events.\nThe eventKey may optionally be used to select a single element by index rather than an entire\nset. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: \"thisOne\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: \"theOtherOne\",\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: \"theOtherOne\",\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartBar uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether the bars will be laid vertically or\nhorizontally. The bars will be vertical if this prop is false or unspecified,\nor horizontal if the prop is set to true." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the bar. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartBar. If individual labels are required for each\ndata point, they should be created by composing ChartBar with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartBar with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartBar. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartBar as a solo component, implement the theme directly on\nChartBar. If you are wrapping ChartBar in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartBullet", + "description": "", + "props": [ + { + "name": "allowTooltip", + "type": "boolean", + "description": "Specifies the tooltip capability of the container component. A value of true allows the chart to add a\nChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels\nproperty is also provided.", + "defaultValue": "true" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers." + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers." + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axis component to render with the chart", + "defaultValue": "" + }, + { + "name": "bulletSize", + "type": "number", + "description": "Specifies the size of the bullet chart. For a horizontal chart, this adjusts bar height; although, it\ntechnically scales the underlying barWidth property.\n\nNote: Values should be >= 125, the default is 140", + "defaultValue": "theme.chart.height" + }, + { + "name": "comparativeErrorMeasureComponent", + "type": "React.ReactElement", + "description": "The comparative error measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "comparativeErrorMeasureData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example comparativeErrorMeasureData={[{ y: 50 }]}" + }, + { + "name": "comparativeErrorMeasureDataY", + "type": "number | string | Function | string[]", + "description": "The comparativeErrorMeasureDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "comparativeErrorMeasureLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "comparativeWarningMeasureComponent", + "type": "React.ReactElement", + "description": "The comparative warning measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "comparativeWarningMeasureData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example comparativeWarningMeasureData={[{ y: 50 }]}" + }, + { + "name": "comparativeWarningMeasureDataY", + "type": "number | string | Function | string[]", + "description": "The comparativeWarningMeasureDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "comparativeWarningMeasureLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "comparativeZeroMeasureComponent", + "type": "React.ReactElement", + "description": "The comparative zero measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\nNote: The x domain is expected to be `x: [0, 2]` in order to position all measures properly\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n{x: [0, 2], y: [0, 100]}", + "defaultValue": "getBulletDomain({\n comparativeErrorMeasureComponent,\n comparativeErrorMeasureData,\n comparativeWarningMeasureComponent,\n comparativeWarningMeasureData,\n maxDomain,\n minDomain,\n primaryDotMeasureComponent,\n primaryDotMeasureData,\n primarySegmentedMeasureComponent,\n primarySegmentedMeasureData,\n qualitativeRangeComponent,\n qualitativeRangeData\n})" + }, + { + "name": "groupSubTitle", + "type": "string", + "description": "The subtitle to render for grouped bullets" + }, + { + "name": "groupTitle", + "type": "string", + "description": "The title to render for grouped bullets" + }, + { + "name": "groupTitleComponent", + "type": "React.ReactElement", + "description": "The group title component to render for grouped bullets", + "defaultValue": "" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "horizontal ? theme.chart.height : theme.chart.width" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.", + "defaultValue": "true" + }, + { + "name": "invert", + "type": "boolean", + "description": "Invert the color scales used to represent primary measures and qualitative ranges.", + "defaultValue": "false" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.", + "defaultValue": "" + }, + { + "name": "legendItemsPerRow", + "type": "number", + "description": "The legendItemsPerRow prop determines how many items to render in each row\nof a horizontal legend, or in each column of a vertical legend. This\nprop should be given as an integer. When this prop is not given,\nlegend items will be rendered in a single row or column." + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "'bottom'" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}\n\nNote: The x domain is expected to be `x: 2` in order to position all measures properly" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}\n\nNote: The x domain is expected to be `x: 0` in order to position all measures properly" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right.\n\nNote: The underlying bullet chart is a different size than height and width. For a horizontal chart, left and right\npadding may need to be applied at (approx) 2 to 1 scale." + }, + { + "name": "primaryDotMeasureComponent", + "type": "React.ReactElement", + "description": "The primary dot measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "primaryDotMeasureData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example primaryDotMeasureData={[{ y: 50 }]}" + }, + { + "name": "primaryDotMeasureDataY", + "type": "number | string | Function | string[]", + "description": "The primaryDotMeasureDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "primaryDotMeasureLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "primarySegmentedMeasureComponent", + "type": "React.ReactElement", + "description": "The primary segmented measure component to render with the chart", + "defaultValue": "" + }, + { + "name": "primarySegmentedMeasureData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example primarySegmentedMeasureData={[{ y: 50 }]}" + }, + { + "name": "primarySegmentedMeasureDataY", + "type": "number | string | Function | string[]", + "description": "The primarySegmentedMeasureDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "primarySegmentedMeasureLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "qualitativeRangeComponent", + "type": "React.ReactElement", + "description": "The qualitative range component to render with the chart", + "defaultValue": "" + }, + { + "name": "qualitativeRangeData", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `comparativeErrorMeasureDataY` accessor prop),\nbut by default, an object with y properties is expected.\n\n@example qualitativeRangeData={[{ y: 50 }]}" + }, + { + "name": "qualitativeRangeDataY", + "type": "number | string | Function | string[]", + "description": "The qualitativeRangeDataY prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "qualitativeRangeDataY0", + "type": "number | string | Function | string[]", + "description": "Use qualitativeRangeDataY0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + }, + { + "name": "qualitativeRangeLegendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag.", + "defaultValue": "true" + }, + { + "name": "subTitle", + "type": "string", + "description": "The subtitle for the chart" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getBulletThemeWithLegendColorScale({\n comparativeErrorMeasureData,\n comparativeErrorMeasureLegendData,\n comparativeWarningMeasureData,\n comparativeWarningMeasureLegendData,\n invert,\n primaryDotMeasureData,\n primaryDotMeasureLegendData,\n primarySegmentedMeasureData,\n primarySegmentedMeasureLegendData,\n qualitativeRangeData,\n qualitativeRangeLegendData,\n themeColor\n})" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string", + "description": "The title for the chart" + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The label component to render the chart title.", + "defaultValue": "" + }, + { + "name": "titlePosition", + "type": "'left' | 'top-left'", + "description": "The title position relation to the chart. Valid values are 'left', and 'top-left'\n\nNote: These properties are only valid for horizontal layouts" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "horizontal ? theme.chart.width : theme.chart.height" + } + ] + }, + { + "name": "ChartGroup", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "color", + "type": "string", + "description": "The color prop is an optional prop that defines a single color to be applied to the\nchildren of ChartGroup. The color prop will override colors specified via colorScale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartGroup will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartGroup: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartGroup will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartGroup events.\nSince ChartGroup only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartGroup uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartGroup. If individual labels are required for each\ndata point, they should be created by composing ChartGroup with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "offset", + "type": "number", + "description": "The offset prop determines the number of pixels each element in a group should\nbe offset from its original position of the on the independent axis. In the\ncase of groups of bars, this number should be equal to the width of the bar\nplus the desired spacing between bars." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart,\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartGroup with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartGroup. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar or ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartLegend", + "description": "", + "props": [ + { + "name": "borderComponent", + "type": "React.ReactElement", + "description": "The borderComponent prop takes a component instance which will be responsible\nfor rendering a border around the legend. The new element created from the passed\nborderComponent will be provided with the following properties calculated by\nChartLegend: x, y, width, height, and style. Any of these props may be\noverridden by passing in props to the supplied component, or modified or ignored\nwithin the custom component itself. If a borderComponent\nis not provided, ChartLegend will use its default Border component.\nPlease note that the default width and height calculated\nfor the border component is based on approximated\ntext measurements, and may need to be adjusted." + }, + { + "name": "borderPadding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The borderPadding specifies the amount of padding that should\nbe added between the legend items and the border. This prop may be given as\na number, or asanobject with values specified for top, bottom, left, and right.\nPlease note that the default width and height calculated for the border\ncomponent is based on approximated text measurements, so padding may need to be adjusted." + }, + { + "name": "centerTitle", + "type": "boolean", + "description": "The centerTitle boolean prop specifies whether a legend title should be centered." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop defines a color scale to be applied to each data\nsymbol in ChartLegend. This prop should be given as an array of CSS\ncolors, or as a string corresponding to one of the built in color\nscales. Colors will repeat when there are more symbols than colors in the\nprovided colorScale." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartLegend: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLegend will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "{\n name?: string;\n labels?: {\n fill?: string;\n };\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array." + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes a component instance which will be\nresponsible for rendering a data element used to associate a symbol\nor color with each data series. The new element created from the\npassed dataComponent will be provided with the following properties\ncalculated by ChartLegend: x, y, size, style, and symbol. Any of\nthese props may be overridden by passing in props to the supplied\ncomponent, or modified or ignored within the custom component itself.\nIf a dataComponent is not provided, ChartLegend will use its\ndefault Point component.", + "defaultValue": "" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[]", + "description": "ChartLegend uses the standard eventKey prop to specify how event targets\nare addressed. This prop is not commonly used." + }, + { + "name": "events", + "type": "object[]", + "description": "ChartLegend uses the standard events prop." + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartLegend uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "gutter", + "type": "number | { left: number; right: number }", + "description": "The gutter prop defines the number of pixels between legend rows or\ncolumns, depending on orientation. When orientation is horizontal,\ngutters are between columns. When orientation is vertical, gutters\nare the space between rows." + }, + { + "name": "itemsPerRow", + "type": "number", + "description": "The itemsPerRow prop determines how many items to render in each row\nof a horizontal legend, or in each column of a vertical legend. This\nprop should be given as an integer. When this prop is not given,\nlegend items will be rendered in a single row or column." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes a component instance which will be used\nto render each legend label. The new element created from the passed\nlabelComponent will be supplied with the following properties: x, y,\nstyle, and text. Any of these props may be overridden by passing in\nprops to the supplied component, or modified or ignored within the\ncustom component itself. If labelComponent is omitted, a new\nChartLabel will be created with the props described above.", + "defaultValue": "" + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container with a viewBox\nattribute, or a static container with absolute width and height.\n\nUseful when legend is located inside a chart -- default is false.\n\nNote: Not compatible with containerComponent prop", + "defaultValue": "true" + }, + { + "name": "rowGutter", + "type": "number | { top: number, bottom: number }", + "description": "The rowGutter prop defines the number of pixels between legend rows.\nThis prop may be given as a number, or as an object with values\nspecified for “top” and “bottom” gutters. To set spacing between columns,\nuse the gutter prop.\n\n\n@example { top: 0, bottom: 10 }" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartLegend with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ border: object, data: object, labels: object, parent: object, title: object }", + "description": "The style prop specifies styles for your pie. ChartLegend relies on Radium,\nso valid Radium style objects should work for this prop. Height, width, and\npadding should be specified via the height, width, and padding props.\n\n\n@example {data: {stroke: \"black\"}, label: {fontSize: 10}}" + }, + { + "name": "symbolSpacer", + "type": "number", + "description": "The symbolSpacer prop defines the number of pixels between data\ncomponents and label components." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartLegend as a solo component, implement the theme directly on\nChartLegend. If you are wrapping ChartLegend in ChartChart or\nChartGroup, please call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string | string[]", + "description": "The title prop specifies a title to render with the legend.\nThis prop should be given as a string, or an array of strings for multi-line titles." + }, + { + "name": "titleComponent", + "type": "React.ReactElement", + "description": "The titleComponent prop takes a component instance which will be used to render\na title for the component. The new element created from the passed\nlabelComponent will be supplied with the following properties: x, y, index, data,\ndatum, verticalAnchor, textAnchor, style, text, and events. Any of these props\nmay be overridden by passing in props to the supplied component, or modified\nor ignored within the custom component itself. If labelComponent is omitted,\na new ChartLabel will be created with the props described above.", + "defaultValue": "" + }, + { + "name": "titleOrientation", + "type": "string", + "description": "The titleOrientation prop specifies where the a title should be rendered\nin relation to the rest of the legend. Possible values\nfor this prop are “top”, “bottom”, “left”, and “right”." + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "x", + "type": "number", + "description": "The x and y props define the base position of the legend element." + }, + { + "name": "y", + "type": "number", + "description": "The x and y props define the base position of the legend element." + } + ] + }, + { + "name": "ChartStack", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese values for x and y. When categories are not given as an object\nWhen this prop is set on a wrapper component, it will dictate the categories of\nits the children. If this prop is not set, any categories on child component\nor catigorical data, will be merged to create a shared set of categories.\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "ChartStack works with any combination of the following children: ChartArea, ChartBar, VictoryCandlestick,\nVictoryErrorBar, ChartGroup, ChartLine, VictoryScatter, ChartStack, and ChartVoronoi. Children supplied to\nChartGroup will be cloned and rendered with new props so that all children share common props such as domain and\nscale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartStack will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, (i.e. \"data\" and \"labels\"). The childName will refer to an\nindividual child of ChartStack, either by its name prop, or by index. The eventKey\nmay optionally be used to select a single element by index or eventKey rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey and childName keys,\nand a mutation key whose value is a function. The target and eventKey and childName keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n childName: \"firstBar\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n childName: \"secondBar\",\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n childName: \"secondBar\",\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartStack uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether the bars will be laid vertically or\nhorizontally. The bars will be vertical if this prop is false or unspecified,\nor horizontal if the prop is set to true." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your grouped chart. These styles will be\napplied to all grouped children" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "xOffset", + "type": "number", + "description": "The xOffset prop is used for grouping stacks of bars. This prop will be set\nby the ChartGroup component wrapper, or can be set manually." + } + ] + }, + { + "name": "ChartThreshold", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartLine: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use the default ChartContainer component.\n\n@example " + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartLine: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use its default Line component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: [number, number] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartLine events.\nSince ChartLine only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a line), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartLine uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartLine. If individual labels are required for each\ndata point, they should be created by composing ChartLine with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "[number, number] | { x: [number, number], y: [number, number] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "string | string[] | Function", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartLine with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartLine. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}", + "defaultValue": "{}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartLine as a solo component, implement the theme directly on\nChartLine. If you are wrapping ChartLine in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getThresholdTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartLine.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartTooltip", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When true, tooltip events will set the active prop on both data and label elements." + }, + { + "name": "active", + "type": "boolean", + "description": "The active prop specifies whether the tooltip component should be displayed." + }, + { + "name": "angle", + "type": "string | number", + "description": "The angle prop specifies the angle to rotate the tooltip around its origin point." + }, + { + "name": "center", + "type": "{ x: number; y: number }", + "description": "The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object\nthat describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for\npositioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with\nChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set,\nnon-zero pointerLength values will no longer be respected." + }, + { + "name": "centerOffset", + "type": "{ x: number | Function, y: number | Function }", + "description": "The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout\npointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a\nfunction that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be\nrespected." + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number\nor a function of datum." + }, + { + "name": "data", + "type": "any[]", + "description": "Victory components can pass a data prop to their label component. This can be useful in custom components that need\nto make use of the entire dataset." + }, + { + "name": "datum", + "type": "{}", + "description": "Victory components can pass a datum prop to their label component. This can be used to calculate functional styles,\nand determine text." + }, + { + "name": "dx", + "type": "number | Function", + "description": "The dx prop defines a horizontal shift from the x coordinate." + }, + { + "name": "dy", + "type": "number | Function", + "description": "The dy prop defines a vertical shift from the y coordinate." + }, + { + "name": "events", + "type": "object", + "description": "The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of\nevent names and corresponding event handlers. When events are provided via Victory’s event system, event handlers\nwill be called with the event, the props of the component is attached to, and an eventKey.\n\n\n@example events={{onClick: (evt) => alert(\"x: \" + evt.clientX)}}" + }, + { + "name": "flyoutComponent", + "type": "React.ReactElement", + "description": "The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip.\nThe new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy,\nindex, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events.\nAny of these props may be overridden by passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If flyoutComponent is omitted, a default Flyout component will be created with props\ndescribed above.\n\n@example flyoutComponent={}, flyoutComponent={}" + }, + { + "name": "flyoutHeight", + "type": "number | Function", + "description": "The flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function\nof datum. If this prop is not set, height will be determined based on an approximate text size calculated from the\ntext and style props provided to ChartTooltip." + }, + { + "name": "flyoutStyle", + "type": "number | Function", + "description": "The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the\nflyoutComponent." + }, + { + "name": "flyoutWidth", + "type": "number | Function", + "description": "The flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a\nfunction of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size\ncalculated from the text and style props provided to VictoryTooltip." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes a component instance which will be used to create group elements for use within\ncontainer elements. This prop defaults to a tag.}" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom.\nThis is useful when an orientation prop is not provided, and data will determine the default orientation. i.e.\nnegative values result in a left orientation and positive values will result in a right orientation by default." + }, + { + "name": "index", + "type": "number | string", + "description": "The index prop represents the index of the datum in the data array." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element\ncreated from the passed labelComponent will be supplied with the following properties: x, y, index, datum,\nverticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to\nthe supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a\nnew ChartLabel will be created with the props described above.\n\n@example labelComponent={}, labelComponent={}", + "defaultValue": "" + }, + { + "name": "labelTextAnchor", + "type": "string | Function", + "description": "Defines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid\nvalues are 'start', 'middle', 'end', and 'inherit'." + }, + { + "name": "orientation", + "type": "string | Function", + "description": "The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on.\nThis prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these\nvalues. If this prop is not provided it will be determined from the sign of the datum, and the value of the\nhorizontal prop." + }, + { + "name": "pointerLength", + "type": "number | Function", + "description": "The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be\ngiven as a positive number or a function of datum." + }, + { + "name": "pointerOrientation", + "type": "string | Function", + "description": "This prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set,\nit will be determined based on the overall orientation of the flyout in relation to its data point, and any center\nor centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right." + }, + { + "name": "pointerWidth", + "type": "number | Function", + "description": "The pointerWidth prop determines the width of the base of the triangular pointer extending from\nthe flyout. This prop may be given as a positive number or a function of datum." + }, + { + "name": "renderInPortal", + "type": "boolean", + "description": "When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element\nwithin ChartContainer. Note: This prop should not be set to true when using a custom container element." + }, + { + "name": "style", + "type": "React.CSSProperties | React.CSSProperties[]", + "description": "The style prop applies CSS properties to the rendered `` element." + }, + { + "name": "text", + "type": "number | string | Function | string[] | number[]", + "description": "The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or\nfunction of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which\nChartLabel will split in to separate elements." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "x", + "type": "number", + "description": "The x prop defines the x coordinate to use as a basis for horizontal positioning." + }, + { + "name": "y", + "type": "number", + "description": "The y prop defines the y coordinate to use as a basis for vertical positioning." + } + ] + }, + { + "name": "ChartVoronoiContainer", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When the activateData prop is set to true, the active prop will be set to true on all\ndata components within a voronoi area. When this prop is set to false, the onActivated\nand onDeactivated callbacks will still fire, but no mutations to data components will\noccur via Victory’s event system." + }, + { + "name": "activateLabels", + "type": "boolean", + "description": "When the activateLabels prop is set to true, the active prop will be set to true on all\nlabels corresponding to points within a voronoi area. When this prop is set to false,\nthe onActivated and onDeactivated callbacks will still fire, but no mutations to label\ncomponents will occur via Victory’s event system. Labels defined directly on\nChartVoronoiContainer via the labels prop will still appear when this prop is set to false." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by the container" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "disable", + "type": "boolean", + "description": "When the disable prop is set to true, ChartVoronoiContainer events will not fire." + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop specified the component that will be rendered when labels are defined\non ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered.", + "defaultValue": "" + }, + { + "name": "labels", + "type": "(point: any, index: number, points: any[]) => string", + "description": "When a labels prop is provided to ChartVoronoiContainer it will render a label component\nrather than activating labels on the child components it renders. This is useful for\ncreating multi- point tooltips. This prop should be given as a function which will be called\nonce for each active point. The labels function will be called with the arguments point,\nindex, and points, where point refers to a single active point, index refers to the position\nof that point in the array of active points, and points is an array of all active points." + }, + { + "name": "mouseFollowTooltips", + "type": "boolean", + "description": "When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip\nfollows the position of the mouse." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "onActivated", + "type": "Function", + "description": "The onActivated prop accepts a function to be called whenever new data points are activated.\nThe function is called with the parameters points (an array of active data objects) and props\n(the props used by ChartVoronoiContainer)." + }, + { + "name": "onDeactivated", + "type": "Function", + "description": "The onDeactivated prop accepts a function to be called whenever points are deactivated. The\nfunction is called with the parameters points (an array of the newly-deactivated data objects)\nand props (the props used by ChartVoronoiContainer)." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. ChartTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "radius", + "type": "number", + "description": "When the radius prop is set, the voronoi areas associated with each data point will be no larger\nthan the given radius. This prop should be given as a number." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height.\n\n@default true" + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "voronoiBlacklist", + "type": "string[]", + "description": "The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a\nshared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist\narray will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as\nactive, and will not contribute date to shared tooltips or labels." + }, + { + "name": "voronoiDimension", + "type": "'x' | 'y'", + "description": "When the voronoiDimension prop is set, voronoi selection will only take the given dimension into\naccount. For example, when dimension is set to “x”, all data points matching a particular x mouse\nposition will be activated regardless of y value. When this prop is not given, voronoi selection\nis determined by both x any y values." + }, + { + "name": "voronoiPadding", + "type": "number", + "description": "When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\nof a given chart may trigger voronoi events. This prop should be given as a number." + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + } + ], + "examples": [ + "Responsive bullet chart with wrapping legend", + "Responsive threshold chart with wrapping legend", + "Responsive stack chart with reducible axis tick labels" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartBullet, + ChartGroup, + ChartLegend, + ChartStack, + ChartThemeColor, + ChartThreshold, + ChartTooltip, + ChartVoronoiContainer, + getResizeObserver, + chart_color_blue_300, + chart_color_orange_300 +}; +pageData.examples = { + 'Responsive bullet chart with wrapping legend': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n return (\n
\n `${datum.name}: ${datum.y}`}\n legendAllowWrap\n legendPosition=\"bottom-left\"\n maxDomain={{y: 100}}\n padding={{\n bottom: 50,\n left: 50,\n right: 50,\n top: 100 // Adjusted to accommodate labels\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n titlePosition=\"top-left\"\n width={width}\n />\n
\n );\n }\n}","title":"Responsive bullet chart with wrapping legend","lang":"js"}}> + +

+ {`This demonstrates how to use a `} + + + {`ResizeObserver`} + + {` to update the chart's width, while its height remains fixed. The `} + + + {`legendAllowWrap`} + + {` prop is used to automatically wrap legend items.`} +

+ , + 'Responsive threshold chart with wrapping legend': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n const itemsPerRow = width > 650 ? 4 : 2;\n\n return (\n
\n
\n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n legendPosition=\"bottom-left\"\n legendComponent={\n \n }\n height={250}\n padding={{\n bottom: 100, // Adjusted to accomodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n maxDomain={{ y: 9 }}\n themeColor={ChartThemeColor.multiUnordered}\n width={width}\n >\n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}","title":"Responsive threshold chart with wrapping legend","lang":"js"}}> + +

+ {`This demonstrates how to use a `} + + + {`ResizeObserver`} + + {` to update the chart's width, while its height remains fixed. In this example, `} + + + {`itemsPerRow`} + + {` is used to wrap legend items manually.`} +

+ , + 'Responsive stack chart with reducible axis tick labels': props => + {};\n this.state = {\n width: 0\n };\n\n this.handleResize = () => {\n if(this.containerRef.current && this.containerRef.current.clientWidth){\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n\n this.bars = [];\n for(let i = 1; i < 32; i++){\n this.bars.push({ x: `Aug. ${i}`, y: Math.floor(Math.random() * 6) + 1 });\n };\n\n this.renderSocketBars = () => {\n let socketBars = this.bars.map((tick, index) => {\n return {\n x: tick.x,\n y: tick.y,\n name: 'Sockets',\n label: `${tick.x} Sockets: ${tick.y}`\n };\n });\n return } />;\n }\n\n this.renderCoresBars = () => {\n let coresBars = this.bars.map((tick, index) => {\n return {\n x: tick.x,\n y: tick.y,\n name: 'Cores',\n label: `${tick.x} Cores: ${tick.y}`\n };\n });\n return } />;\n }\n\n this.renderNodesBars = () => {\n let nodesBars = this.bars.map((tick, index) => {\n return {\n key: index,\n x: tick.x,\n y: tick.y,\n name: 'Nodes',\n label: `${tick.x} Nodes: ${tick.y}`\n };\n });\n return } />;\n }\n\n this.getTickValues = (offset = 2) => {\n let tickValues = [];\n for(let i = 1; i < 32; i++){\n if (i % offset == 0){\n tickValues.push(`Aug. ${i}`);\n }\n }\n return tickValues;\n }\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render(){\n const { width } = this.state;\n return (\n
\n
\n \n \n \n \n { this.renderSocketBars() }\n { this.renderCoresBars() }\n { this.renderNodesBars() }\n \n \n
\n
\n )\n }\n}","title":"Responsive stack chart with reducible axis tick labels","lang":"js"}}> + +

+ {`This demonstrates how to use a `} + + + {`ResizeObserver`} + + {` to update the chart's width, while its height remains fixed. In this example, `} + + + {`fixLabelOverlap`} + + {` is used to dynamically adjust the number of axis tick labels.`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Charts scale within the parent container by default, so the `} + + {`width`} + + {` and `} + + {`height`} + + {` props do not actually determine the +width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number +of pixels will depend on the size of the container the chart is rendered into. In order to maintain the aspect ratio, +the parent container may be set to the same height and/or width.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Responsive bullet chart with wrapping legend"])} + {React.createElement(pageData.examples["Responsive threshold chart with wrapping legend"])} + {React.createElement(pageData.examples["Responsive stack chart with reducible axis tick labels"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`Chart`} + + {` props, see `} + + {`VictoryChart`} + +
    • +
  • + {`For `} + + {`ChartArea`} + + {` props, see `} + + {`VictoryArea`} + +
    • +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartBar`} + + {` props, see `} + + {`VictoryBar`} + +
    • +
  • + {`For `} + + {`ChartBullet`} + + {` props, see `} + + {`VictoryBar`} + +
    • +
  • + {`For `} + + {`ChartGroup`} + + {` props, see `} + + {`VictoryGroup`} + +
    • +
  • + {`For `} + + {`ChartLegend`} + + {` props, see `} + + {`VictoryLegend`} + +
    • +
  • + {`For `} + + {`ChartLine`} + + {` props, see `} + + {`Victoryline`} + +
    • +
  • + {`For `} + + {`ChartStack`} + + {` props, see `} + + {`VictoryStack`} + +
    • +
  • + {`For `} + + {`ChartTooltip`} + + {` props, see `} + + {`VictoryTooltip`} + +
    • +
  • + {`For `} + + {`ChartThreshold`} + + {` props, see `} + + {`VictoryLine`} + +
    • +
  • + {`For `} + + {`ChartVoronoiContainer`} + + {` props, see `} + + {`VictoryVoronoiContainer`} + +
    • +
+ +); +Component.displayName = 'ChartsResizeObserverReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/scatter-chart/react.js b/packages/react-docs/src/generated/charts/scatter-chart/react.js new file mode 100644 index 00000000000..5c17f5b901a --- /dev/null +++ b/packages/react-docs/src/generated/charts/scatter-chart/react.js @@ -0,0 +1,1398 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { + Chart, + ChartArea, + ChartAxis, + ChartGroup, + ChartLine, + ChartScatter, + ChartThemeColor, + ChartVoronoiContainer, + getResizeObserver +} from '@patternfly/react-charts'; +const pageData = { + "id": "Scatter chart", + "section": "charts", + "source": "react", + "slug": "/charts/scatter-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md", + "propComponents": [ + { + "name": "Chart", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "backgroundComponent", + "type": "React.ReactElement", + "description": "The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the\nChart's style component includes background styles. The new element created from the passed backgroundComponent\nwill be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.\nAll of these props on Background should take prececence over what VictoryChart is trying to set." + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "endAngle", + "type": "number", + "description": "The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with\nstartAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart.\nThis prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and\nproceeding counterclockwise." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "Chart uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.height" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis." + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When the innerRadius prop is set, polar charts will be hollow rather than circular." + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showAxis", + "type": "boolean", + "description": "Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via\nchart styles.", + "defaultValue": "true" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag." + }, + { + "name": "startAngle", + "type": "number", + "description": "The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction\nwith endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the\nchart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position,\nand proceeding counterclockwise." + }, + { + "name": "style", + "type": "{ parent: object, background: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object with styles defined\nfor data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified\nvia props as they determine relative layout for components in Chart.\n\n\n@propType { parent: object, background: object }" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getChartTheme(themeColor, showAxis)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.width" + } + ] + }, + { + "name": "ChartArea", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartArea: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use its default Area component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[] | number[]", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartArea events.\nSince ChartArea only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartArea uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartArea. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartAxis", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axisComponent prop takes in an entire component which will be used\nto create the axis line. The new element created from the passed axisComponent\nwill be supplied with the following properties: x1, y1, x2, y2, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If an axisComponent\nis not supplied, ChartAxis will render its default AxisLine component." + }, + { + "name": "axisLabelComponent", + "type": "React.ReactElement", + "description": "The axisLabelComponent prop takes in an entire component which will be used\nto create the axis label. The new element created from the passed axisLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, transform, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an axisLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "axisValue", + "type": "number | string | object | Date", + "description": "The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when\ndependent axes should line up with values on the independent axis." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartAxis: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartAxis will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "crossAxis", + "type": "boolean", + "description": "This prop specifies whether a given axis is intended to cross another axis." + }, + { + "name": "dependentAxis", + "type": "boolean", + "description": "The dependentAxis prop specifies whether the axis corresponds to the\ndependent variable (usually y). This prop is useful when composing axis\nwith other components to form a chart." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your axis will include. This prop should be\ngiven as a array of the minimum and maximum expected values for your axis.\nIf this value is not given it will be calculated based on the scale or tickValues.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"axis\", \"axisLabel\", \"ticks\", \"tickLabels\", and \"grid\" are\nall valid targets for ChartAxis events. The eventKey may optionally be used to select a\nsingle element by index rather than an entire set. The eventHandlers object\nshould be given as an object whose keys are standard event names (i.e. onClick)\nand whose values are event callbacks. The return value of an event handler\nbe used to modify other elemnts. The return value should be given as an object or\nan array of objects with optional target and eventKey keys, and a mutation\nkey whose value is a function. The target and eventKey keys will default to those\ncorresponding to the element the event handler was attached to. The mutation\nfunction will be called with the calculated props for the individual selected\nelement (i.e. a single tick), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"grid\",\n eventKey: 2,\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"tickLabels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartAxis uses the standard externalEventMutations prop." + }, + { + "name": "fixLabelOverlap", + "type": "boolean", + "description": "When true, this prop reduces the number of tick labels to fit the length of the axis.\nLabels are removed at approximately even intervals from the original array of labels.\nThis feature only works well for labels that are approximately evenly spaced." + }, + { + "name": "gridComponent", + "type": "React.ReactElement", + "description": "The gridComponent prop takes in an entire component which will be used\nto create grid lines. The new element created from the passed gridComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a gridComponent\nis not supplied, ChartAxis will render its default GridLine component." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "invertAxis", + "type": "boolean", + "description": "If true, this value will flip the domain of a given axis." + }, + { + "name": "label", + "type": "any", + "description": "The label prop defines the label that will appear along the axis. This\nprop should be given as a value or an entire, HTML-complete label\ncomponent. If a label component is given, it will be cloned. The new\nelement's properties x, y, textAnchor, verticalAnchor, and transform\nwill have defaults provided by the axis; styles filled out with\ndefaults provided by the axis, and overrides from the label component.\nIf a value is given, a new ChartLabel will be created with props and\nstyles from the axis." + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "ChartAxis uses the standard name prop" + }, + { + "name": "offsetX", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the x-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "offsetY", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the y-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop specifies the position and orientation of your axis.\nValid values are 'top', 'bottom', 'left' and 'right'." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showGrid", + "type": "boolean", + "description": "Show axis grid and ticks", + "defaultValue": "false" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartAxis with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object\nwith styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg\nstyles are supported, but width, height, and padding should be specified via props as they\ndetermine relative layout for components in Chart. Functional styles may be defined for\ngrid, tick, and tickLabel style properties, and they will be evaluated with each tick.\n\nNote: When a component is rendered as a child of another Victory component, or within a custom\n element with standalone={false} parent styles will be applied to the enclosing tag.\nMany styles that can be applied to a parent will not be expressed when applied to a .\n\nNote: custom angle and verticalAnchor properties may be included in labels styles." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartAxis as a solo component, implement the theme directly on\nChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "tickComponent", + "type": "React.ReactElement", + "description": "The tickComponent prop takes in an entire component which will be used\nto create tick lines. The new element created from the passed tickComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a tickComponent\nis not supplied, ChartAxis will render its default Tick component." + }, + { + "name": "tickCount", + "type": "number", + "description": "The tickCount prop specifies approximately how many ticks should be drawn on the axis if\ntickValues are not explicitly provided. This value is calculated by d3 scale and\nprioritizes returning \"nice\" values and evenly spaced ticks over an exact number of ticks.\nIf you need an exact number of ticks, please specify them via the tickValues prop.\nThis prop must have a value greater than zero." + }, + { + "name": "tickFormat", + "type": "any[] | ((tick: any, index: number, ticks: any[]) => string | number)", + "description": "The tickFormat prop specifies how tick values should be expressed visually.\ntickFormat can be given as a function to be applied to every tickValue, or as\nan array of display values for each tickValue.\n\n@example d3.time.format(\"%Y\"), (x) => x.toPrecision(2), [\"first\", \"second\", \"third\"]" + }, + { + "name": "tickLabelComponent", + "type": "React.ReactElement", + "description": "The tickLabelComponent prop takes in an entire component which will be used\nto create the tick labels. The new element created from the passed tickLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, tick, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an tickLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "tickValues", + "type": "any[]", + "description": "The tickValues prop explicitly specifies which tick values to draw on the axis.\n\n@example [\"apples\", \"bananas\", \"oranges\"], [2, 4, 6, 8]" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: innerRadius may need to be set when using this property." + } + ] + }, + { + "name": "ChartGroup", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "color", + "type": "string", + "description": "The color prop is an optional prop that defines a single color to be applied to the\nchildren of ChartGroup. The color prop will override colors specified via colorScale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartGroup will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartGroup: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartGroup will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartGroup events.\nSince ChartGroup only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartGroup uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartGroup. If individual labels are required for each\ndata point, they should be created by composing ChartGroup with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "offset", + "type": "number", + "description": "The offset prop determines the number of pixels each element in a group should\nbe offset from its original position of the on the independent axis. In the\ncase of groups of bars, this number should be equal to the width of the bar\nplus the desired spacing between bars." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart,\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartGroup with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartGroup. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar or ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartLine", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartLine: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartLine: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use its default Line component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartLine events.\nSince ChartLine only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a line), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartLine uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartLine. If individual labels are required for each\ndata point, they should be created by composing ChartLine with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "string | string[] | Function", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartLine with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartLine. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartLine as a solo component, implement the theme directly on\nChartLine. If you are wrapping ChartLine in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartLine.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartScatter", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "bubbleProperty", + "type": "string", + "description": "The bubbleProperty prop indicates which property of the data object should be used\nto scale data points in a bubble chart" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartScatter: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartScatter will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartScatter: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartScatter will use its default Line component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartScatter events.\nSince ChartScatter only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a line), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartScatter uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartScatter. If individual labels are required for each\ndata point, they should be created by composing ChartScatter with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxBubbleSize", + "type": "number", + "description": "The maxBubbleSize prop sets an upper limit for scaling data points in a bubble chart" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minBubbleSize", + "type": "number", + "description": "The minBubbleSize prop sets a lower limit for scaling data points in a bubble chart" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "size", + "type": "number | ((data: any) => number)", + "description": "The size prop determines how to scale each data point", + "defaultValue": "({ active }) => (active ? ChartScatterStyles.activeSize : ChartScatterStyles.size)" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartScatter with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartScatter. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "symbol", + "type": "string | Function", + "description": "The symbol prop determines which symbol should be drawn to represent data points. Options are: \"circle\", \"cross\",\n\"diamond\", \"plus\", \"minus\", \"square\", \"star\", \"triangleDown\", \"triangleUp\"." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartScatter as a solo component, implement the theme directly on\nChartScatter. If you are wrapping ChartScatter in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartScatter.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + } + ], + "examples": [ + "Area chart", + "Line chart" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartGroup, + ChartLine, + ChartScatter, + ChartThemeColor, + ChartVoronoiContainer, + getResizeObserver +}; +pageData.examples = { + 'Area chart': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n\n this.series = [\n {\n datapoints: [\n { name: 'Cats', x: '2015', y: 3 },\n { name: 'Cats', x: '2016', y: 4 },\n { name: 'Cats', x: '2017', y: 8 },\n { name: 'Cats', x: '2018', y: 6 }\n ],\n legendItem: { name: 'Cats' }\n },\n {\n datapoints: [\n { name: 'Dogs', x: '2015', y: 2 },\n { name: 'Dogs', x: '2016', y: 3 },\n { name: 'Dogs', x: '2017', y: 4 },\n { name: 'Dogs', x: '2018', y: 5 },\n { name: 'Dogs', x: '2019', y: 6 }\n ],\n legendItem: { name: 'Dogs' }\n },\n {\n datapoints: [\n { name: 'Birds', x: '2015', y: 1 },\n { name: 'Birds', x: '2016', y: 2 },\n { name: 'Birds', x: '2017', y: 3 },\n { name: 'Birds', x: '2018', y: 2 },\n { name: 'Birds', x: '2019', y: 4 }\n ],\n legendItem: { name: 'Birds' }\n }];\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n\n return (\n
\n
\n datum.childName.includes('area-') ? `${datum.name}: ${datum.y}` : null} \n constrainToVisibleArea \n />\n }\n height={225}\n legendData={this.series.map(s => s.legendItem)}\n legendPosition=\"bottom-left\"\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50,\n }}\n maxDomain={{y: 9}}\n themeColor={ChartThemeColor.multiUnordered}\n width={width}\n >\n \n \n \n {this.series.map((s, idx) => {\n return (\n \n );\n })}\n \n \n {this.series.map((s, idx) => {\n return (\n \n );\n })}\n \n \n
\n
\n );\n }\n}","title":"Area chart","lang":"js"}}> + +

+ {`This demonstrates how to add interactive data points to an area chart.`} +

+ , + 'Line chart': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n\n this.series = [\n {\n datapoints: [\n { name: 'Cats', x: '2015', y: 1 },\n { name: 'Cats', x: '2016', y: 2 },\n { name: 'Cats', x: '2017', y: 5 },\n { name: 'Cats', x: '2018', y: 3 }\n ],\n legendItem: { name: 'Cats' }\n },\n {\n datapoints: [\n { name: 'Dogs', x: '2015', y: 2 },\n { name: 'Dogs', x: '2016', y: 1 },\n { name: 'Dogs', x: '2017', y: 7 },\n { name: 'Dogs', x: '2018', y: 4 }\n ],\n legendItem: { name: 'Dogs' },\n style: {\n data: {\n strokeDasharray: '3,3'\n }\n }\n },\n {\n datapoints: [\n { name: 'Birds', x: '2015', y: 3 },\n { name: 'Birds', x: '2016', y: 4 },\n { name: 'Birds', x: '2017', y: 9 },\n { name: 'Birds', x: '2018', y: 5 }\n ],\n legendItem: { name: 'Birds' }\n },\n {\n datapoints: [\n { name: 'Mice', x: '2015', y: 3 },\n { name: 'Mice', x: '2016', y: 3 },\n { name: 'Mice', x: '2017', y: 8 },\n { name: 'Mice', x: '2018', y: 7 }\n ],\n legendItem: { name: 'Birds' }\n }];\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n\n return (\n
\n
\n datum.childName.includes('line-') ? `${datum.name}: ${datum.y}` : null} \n constrainToVisibleArea\n />\n }\n legendData={this.series.map(s => s.legendItem)}\n legendPosition=\"bottom-left\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.orange}\n width={width}\n >\n \n \n \n {this.series.map((s, idx) => {\n return (\n \n );\n })}\n \n \n {this.series.map((s, idx) => {\n return (\n \n );\n })}\n \n \n
\n
\n );\n }\n}","title":"Line chart","lang":"js"}}> + +

+ {`This demonstrates how to add interactive data points to a line chart.`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Area chart"])} + {React.createElement(pageData.examples["Line chart"])} + + {`Documentation`} + +
    +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop. See Victory's `} + {`FAQ`} +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`Chart`} + + {` props, see `} + + {`VictoryChart`} + +
    • +
  • + {`For `} + + {`ChartArea`} + + {` props, see `} + + {`VictoryArea`} + +
    • +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartGroup`} + + {` props, see `} + + {`VictoryGroup`} + +
    • +
  • + {`For `} + + {`ChartLine`} + + {` props, see `} + + {`VictoryLine`} + +
    • +
  • + {`For `} + + {`ChartScatter`} + + {` props, see `} + + {`VictoryScatter`} + +
    • +
+ +); +Component.displayName = 'ChartsScatterChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/sparkline-chart/react.js b/packages/react-docs/src/generated/charts/sparkline-chart/react.js new file mode 100644 index 00000000000..f40c2844ea4 --- /dev/null +++ b/packages/react-docs/src/generated/charts/sparkline-chart/react.js @@ -0,0 +1,975 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; +import '../../../../../react-charts/src/components/Sparkline/examples/./sparkline.css'; +const pageData = { + "id": "Sparkline chart", + "section": "charts", + "source": "react", + "slug": "/charts/sparkline-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/Sparkline/examples/sparkline.md", + "propComponents": [ + { + "name": "ChartArea", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartArea: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use its default Area component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[] | number[]", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartArea events.\nSince ChartArea only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartArea uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartArea. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartContainer", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactElement | React.ReactElement[]", + "description": "The children prop specifies the child or children that will be rendered within the container. It will be set by\nwhatever Victory component is rendering the container." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by ChartContainer" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "containerRef", + "type": "React.RefObject", + "description": "The containerRef prop may be used to attach a ref to the outermost element rendered by the container.\n\n@example containerRef={(ref) => { this.chartRef = ref; }}" + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. VictoryTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height." + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "title", + "type": "string", + "description": "The title prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers. The more descriptive this title is, the more\nuseful it will be. If no title prop is passed, it will default to Chart.\n\n@example \"Popularity of Dog Breeds by Percentage\"" + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + }, + { + "name": "ChartGroup", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "color", + "type": "string", + "description": "The color prop is an optional prop that defines a single color to be applied to the\nchildren of ChartGroup. The color prop will override colors specified via colorScale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartGroup will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartGroup: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartGroup will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartGroup events.\nSince ChartGroup only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartGroup uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartGroup. If individual labels are required for each\ndata point, they should be created by composing ChartGroup with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "offset", + "type": "number", + "description": "The offset prop determines the number of pixels each element in a group should\nbe offset from its original position of the on the independent axis. In the\ncase of groups of bars, this number should be equal to the width of the bar\nplus the desired spacing between bars." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart,\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartGroup with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartGroup. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar or ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartLabel", + "description": "", + "props": [ + { + "name": "active", + "type": "boolean", + "description": "The active prop specifies whether the label is active or not. The active prop is set by defaultEvents in components\nlike ChartTooltip and VictorySelectionContainer. The active prop is used when evaluating functional styles and\nprops." + }, + { + "name": "angle", + "type": "string | number", + "description": "Specifies the angle to rotate the text by." + }, + { + "name": "capHeight", + "type": "number | string | Function", + "description": "The capHeight prop defines a text metric for the font being used: the expected height of capital letters.\nThis is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of\nline height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a\nunitless number, it is assumed to be ems." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a class name that will be applied to the rendered text element." + }, + { + "name": "data", + "type": "any[]", + "description": "Labels that apply to an entire data series will recieve the entire series as `data` instead of an individual datum\nprop." + }, + { + "name": "datum", + "type": "{}", + "description": "Victory components can pass a datum prop to their label component. This can be used to calculate functional styles,\nand determine child text" + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more\ndescriptive this title is, the more useful it will be for people using screen readers." + }, + { + "name": "direction", + "type": "'rtl' | 'ltr' | 'inherit'", + "description": "The direction prop determines which text direction to apply to the rendered text element" + }, + { + "name": "dx", + "type": "number | string | Function", + "description": "The dx prop defines a horizontal shift from the `x` coordinate." + }, + { + "name": "dy", + "type": "number | string | Function", + "description": "The dy prop defines a vertical shift from the `y` coordinate. Since this component already accounts for\n`capHeight`, `lineHeight`, and `verticalAnchor`, this will usually not be necessary." + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the label component.\nEvent handlers are currently only called with their corresponding events." + }, + { + "name": "inline", + "type": "boolean", + "description": "When the text property contains an array of strings, the inline property lets the elements lay out next\nto each other. If this property is not specified, the elements will stack vertically instead." + }, + { + "name": "labelPlacement", + "type": "string", + "description": "The labelPlacement prop is used to specify the placement of labels relative to the data point they represent.\nThis prop may be given as “vertical”, “parallel” or “perpendicular”. This props is particularly useful in polar\ncharts, where it may be desireable to position a label either parallel or perpendicular to its corresponding angle.\nWhen this prop is not set, perpendicular label placement will be used for polar charts, and vertical label\nplacement will be used for cartesian charts." + }, + { + "name": "lineHeight", + "type": "number | string | Function", + "description": "The lineHeight prop defines how much space a single line of text should take up.\nNote that SVG has no notion of line-height, so the positioning may differ slightly from what you would expect with CSS,\nbut the result is similar: a roughly equal amount of extra space is distributed above and below the line of text.\nThe value should ideally use the same units as `capHeight` and `dy`, preferably ems.\nIf given a unitless number, it is assumed to be ems." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "renderInPortal", + "type": "boolean", + "description": "The renderInPortal prop specifies whether ChartLabel should render text in place or within a VictoryPortal.\nSetting renderInPortal to true is equivalent to wrapping ChartLabel in a VictoryPortal. This prop is false by default." + }, + { + "name": "style", + "type": "React.CSSProperties | React.CSSProperties[]", + "description": "The style prop applies CSS properties to the rendered `` element." + }, + { + "name": "text", + "type": "number | string | Function | string[]", + "description": "The text prop defines the text ChartLabel will render. The text prop may be given as a string, number, a function\nof datum, or an array of any of these. Strings may include newline characters, which ChartLabel will split into\nseparate elements. When text is given as an array, separate elements will be created for each\nelement in the array." + }, + { + "name": "textAnchor", + "type": "string | Function", + "description": "The textAnchor prop defines how the text is horizontally positioned relative to the given `x` and `y` coordinates.\nOptions are \"start\", \"middle\" and \"end\". Note that this overrides the style prop." + }, + { + "name": "transform", + "type": "string | {} | (() => string | {})", + "description": "The transform prop applies a transform to the rendered `` element.\nIn addition to being a string, it can be an object containing transform definitions for easier authoring." + }, + { + "name": "verticalAnchor", + "type": "string", + "description": "The verticalAnchor prop defines how the text is vertically positioned relative to the given `x` and `y`\ncoordinates. Options are \"start\", \"middle\" and \"end\"." + }, + { + "name": "x", + "type": "number", + "description": "The x prop defines the x coordinate to use as a basis for horizontal positioning." + }, + { + "name": "y", + "type": "number", + "description": "The y prop defines the y coordinate to use as a basis for vertical positioning." + } + ] + }, + { + "name": "ChartVoronoiContainer", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When the activateData prop is set to true, the active prop will be set to true on all\ndata components within a voronoi area. When this prop is set to false, the onActivated\nand onDeactivated callbacks will still fire, but no mutations to data components will\noccur via Victory’s event system." + }, + { + "name": "activateLabels", + "type": "boolean", + "description": "When the activateLabels prop is set to true, the active prop will be set to true on all\nlabels corresponding to points within a voronoi area. When this prop is set to false,\nthe onActivated and onDeactivated callbacks will still fire, but no mutations to label\ncomponents will occur via Victory’s event system. Labels defined directly on\nChartVoronoiContainer via the labels prop will still appear when this prop is set to false." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by the container" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "disable", + "type": "boolean", + "description": "When the disable prop is set to true, ChartVoronoiContainer events will not fire." + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop specified the component that will be rendered when labels are defined\non ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered.", + "defaultValue": "" + }, + { + "name": "labels", + "type": "(point: any, index: number, points: any[]) => string", + "description": "When a labels prop is provided to ChartVoronoiContainer it will render a label component\nrather than activating labels on the child components it renders. This is useful for\ncreating multi- point tooltips. This prop should be given as a function which will be called\nonce for each active point. The labels function will be called with the arguments point,\nindex, and points, where point refers to a single active point, index refers to the position\nof that point in the array of active points, and points is an array of all active points." + }, + { + "name": "mouseFollowTooltips", + "type": "boolean", + "description": "When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip\nfollows the position of the mouse." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "onActivated", + "type": "Function", + "description": "The onActivated prop accepts a function to be called whenever new data points are activated.\nThe function is called with the parameters points (an array of active data objects) and props\n(the props used by ChartVoronoiContainer)." + }, + { + "name": "onDeactivated", + "type": "Function", + "description": "The onDeactivated prop accepts a function to be called whenever points are deactivated. The\nfunction is called with the parameters points (an array of the newly-deactivated data objects)\nand props (the props used by ChartVoronoiContainer)." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. ChartTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "radius", + "type": "number", + "description": "When the radius prop is set, the voronoi areas associated with each data point will be no larger\nthan the given radius. This prop should be given as a number." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height.\n\n@default true" + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "voronoiBlacklist", + "type": "string[]", + "description": "The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a\nshared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist\narray will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as\nactive, and will not contribute date to shared tooltips or labels." + }, + { + "name": "voronoiDimension", + "type": "'x' | 'y'", + "description": "When the voronoiDimension prop is set, voronoi selection will only take the given dimension into\naccount. For example, when dimension is set to “x”, all data points matching a particular x mouse\nposition will be activated regardless of y value. When this prop is not given, voronoi selection\nis determined by both x any y values." + }, + { + "name": "voronoiPadding", + "type": "number", + "description": "When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\nof a given chart may trigger voronoi events. This prop should be given as a number." + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + } + ], + "examples": [ + "Basic", + "Green" + ] +}; +pageData.liveContext = { + ChartArea, + ChartContainer, + ChartGroup, + ChartLabel, + ChartThemeColor, + ChartVoronoiContainer +}; +pageData.examples = { + 'Basic': props => + (\n
\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n height={100}\n maxDomain={{y: 9}}\n padding={0}\n width={400}\n >\n \n \n
\n \n \n \n
\n)","title":"Basic","lang":"js"}}> + + , + 'Green': props => + (\n
\n
\n `${datum.name}: ${datum.y}`} />}\n height={100}\n maxDomain={{y: 9}}\n padding={0}\n themeColor={ChartThemeColor.green}\n width={400}\n >\n \n \n
\n \n \n \n
\n)","title":"Green","lang":"js"}}> + +

+ {`This demonstrates an alternate way of applying tooltips using CSS overflow`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build a sparkline chart using a Katacoda tutorial starting with a simple chart, adding tooltips, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Green"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + {`Use `} + + {`ChartGroup`} + + {` in place of `} + + {`Chart`} + + {` when an axis and labels are not desired`} +
    • +
  • + {`Themes are inherited, so a default theme may override `} + + {`themeColor`} + + {` for a child component`} +
    • +
  • + {`The `} + + {`theme`} + + {` and `} + + {`themeColor`} + + {` props should be applied at the most top level component`} +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`ChartArea`} + + {` props, see `} + + {`VictoryArea`} + +
    • +
  • + {`For `} + + {`ChartGroup`} + + {` props, see `} + + {`VictoryGroup`} + +
    • +
  • + {`For `} + + {`ChartLabel`} + + {` props, see `} + + {`VictoryLabel`} + +
    • +
  • + {`For `} + + {`ChartVoronoiContainer`} + + {` props, see `} + + {`VictoryVoronoiContainer`} + +
    • +
+ +); +Component.displayName = 'ChartsSparklineChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/stack-chart/react.js b/packages/react-docs/src/generated/charts/stack-chart/react.js new file mode 100644 index 00000000000..96dc9894ce9 --- /dev/null +++ b/packages/react-docs/src/generated/charts/stack-chart/react.js @@ -0,0 +1,1193 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartStack, + ChartLegendTooltip, + ChartThemeColor, + ChartTooltip, + ChartVoronoiContainer, + createContainer, + getResizeObserver +} from '@patternfly/react-charts'; +const pageData = { + "id": "Stack chart", + "section": "charts", + "source": "react", + "slug": "/charts/stack-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartStack/examples/ChartStack.md", + "propComponents": [ + { + "name": "Chart", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "backgroundComponent", + "type": "React.ReactElement", + "description": "The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the\nChart's style component includes background styles. The new element created from the passed backgroundComponent\nwill be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.\nAll of these props on Background should take prececence over what VictoryChart is trying to set." + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "endAngle", + "type": "number", + "description": "The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with\nstartAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart.\nThis prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and\nproceeding counterclockwise." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "Chart uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.height" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis." + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When the innerRadius prop is set, polar charts will be hollow rather than circular." + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showAxis", + "type": "boolean", + "description": "Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via\nchart styles.", + "defaultValue": "true" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag." + }, + { + "name": "startAngle", + "type": "number", + "description": "The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction\nwith endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the\nchart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position,\nand proceeding counterclockwise." + }, + { + "name": "style", + "type": "{ parent: object, background: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object with styles defined\nfor data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified\nvia props as they determine relative layout for components in Chart.\n\n\n@propType { parent: object, background: object }" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getChartTheme(themeColor, showAxis)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.width" + } + ] + }, + { + "name": "ChartArea", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartArea: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use its default Area component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function | string[] | number[]", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartArea events.\nSince ChartArea only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartArea uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartArea. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartBar", + "description": "", + "props": [ + { + "name": "alignment", + "type": "string", + "description": "The alignment prop specifies how bars should be aligned relative to their data points.\nThis prop may be given as “start”, “middle” or “end”. When this prop is not specified,\nbars will have “middle” alignment relative to their data points." + }, + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "barRatio", + "type": "number", + "description": "The barRatio prop specifies an approximate ratio between bar widths and spaces between bars.\nWhen width is not specified via the barWidth prop or in bar styles, the barRatio prop will\nbe used to calculate a default width for each bar given the total number of bars in the data series\nand the overall width of the chart." + }, + { + "name": "barWidth", + "type": "number | Function", + "description": "The barWidth prop is used to specify the width of each bar. This prop may be given as\na number of pixels or as a function that returns a number. When this prop is given as\na function, it will be evaluated with the arguments datum, and active. When this value\nis not given, a default value will be calculated based on the overall dimensions of\nthe chart, and the number of bars." + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartBar: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartBar will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "cornerRadius", + "type": "Function | number | { top, bottom, topLeft, topRight, bottomLeft, bottomRight }", + "description": "The cornerRadius prop specifies a radius to apply to each bar.\nIf this prop is given as a single number, the radius will only be applied to the top of each bar.\nWhen this prop is given as a function, it will be evaluated with the arguments datum, and active.\n\n\n@example {topLeft: ({ datum }) => datum.x * 4}" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example\n\n[{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create a bar.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartBar: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartBar will use its default Bar component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for VictoryBar events.\nThe eventKey may optionally be used to select a single element by index rather than an entire\nset. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: \"thisOne\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: \"theOtherOne\",\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: \"theOtherOne\",\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartBar uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether the bars will be laid vertically or\nhorizontally. The bars will be vertical if this prop is false or unspecified,\nor horizontal if the prop is set to true." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the bar. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartBar. If individual labels are required for each\ndata point, they should be created by composing ChartBar with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartBar with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartBar. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartBar as a solo component, implement the theme directly on\nChartBar. If you are wrapping ChartBar in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartStack", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese values for x and y. When categories are not given as an object\nWhen this prop is set on a wrapper component, it will dictate the categories of\nits the children. If this prop is not set, any categories on child component\nor catigorical data, will be merged to create a shared set of categories.\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "ChartStack works with any combination of the following children: ChartArea, ChartBar, VictoryCandlestick,\nVictoryErrorBar, ChartGroup, ChartLine, VictoryScatter, ChartStack, and ChartVoronoi. Children supplied to\nChartGroup will be cloned and rendered with new props so that all children share common props such as domain and\nscale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartStack will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, (i.e. \"data\" and \"labels\"). The childName will refer to an\nindividual child of ChartStack, either by its name prop, or by index. The eventKey\nmay optionally be used to select a single element by index or eventKey rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey and childName keys,\nand a mutation key whose value is a function. The target and eventKey and childName keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n childName: \"firstBar\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n childName: \"secondBar\",\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n childName: \"secondBar\",\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartStack uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether the bars will be laid vertically or\nhorizontally. The bars will be vertical if this prop is false or unspecified,\nor horizontal if the prop is set to true." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartArea. If individual labels are required for each\ndata point, they should be created by composing ChartArea with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartArea with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your grouped chart. These styles will be\napplied to all grouped children" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartArea as a solo component, implement the theme directly on\nChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "xOffset", + "type": "number", + "description": "The xOffset prop is used for grouping stacks of bars. This prop will be set\nby the ChartGroup component wrapper, or can be set manually." + } + ] + }, + { + "name": "ChartTooltip", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When true, tooltip events will set the active prop on both data and label elements." + }, + { + "name": "active", + "type": "boolean", + "description": "The active prop specifies whether the tooltip component should be displayed." + }, + { + "name": "angle", + "type": "string | number", + "description": "The angle prop specifies the angle to rotate the tooltip around its origin point." + }, + { + "name": "center", + "type": "{ x: number; y: number }", + "description": "The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object\nthat describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for\npositioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with\nChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set,\nnon-zero pointerLength values will no longer be respected." + }, + { + "name": "centerOffset", + "type": "{ x: number | Function, y: number | Function }", + "description": "The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout\npointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a\nfunction that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be\nrespected." + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number\nor a function of datum." + }, + { + "name": "data", + "type": "any[]", + "description": "Victory components can pass a data prop to their label component. This can be useful in custom components that need\nto make use of the entire dataset." + }, + { + "name": "datum", + "type": "{}", + "description": "Victory components can pass a datum prop to their label component. This can be used to calculate functional styles,\nand determine text." + }, + { + "name": "dx", + "type": "number | Function", + "description": "The dx prop defines a horizontal shift from the x coordinate." + }, + { + "name": "dy", + "type": "number | Function", + "description": "The dy prop defines a vertical shift from the y coordinate." + }, + { + "name": "events", + "type": "object", + "description": "The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of\nevent names and corresponding event handlers. When events are provided via Victory’s event system, event handlers\nwill be called with the event, the props of the component is attached to, and an eventKey.\n\n\n@example events={{onClick: (evt) => alert(\"x: \" + evt.clientX)}}" + }, + { + "name": "flyoutComponent", + "type": "React.ReactElement", + "description": "The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip.\nThe new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy,\nindex, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events.\nAny of these props may be overridden by passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If flyoutComponent is omitted, a default Flyout component will be created with props\ndescribed above.\n\n@example flyoutComponent={}, flyoutComponent={}" + }, + { + "name": "flyoutHeight", + "type": "number | Function", + "description": "The flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function\nof datum. If this prop is not set, height will be determined based on an approximate text size calculated from the\ntext and style props provided to ChartTooltip." + }, + { + "name": "flyoutStyle", + "type": "number | Function", + "description": "The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the\nflyoutComponent." + }, + { + "name": "flyoutWidth", + "type": "number | Function", + "description": "The flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a\nfunction of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size\ncalculated from the text and style props provided to VictoryTooltip." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes a component instance which will be used to create group elements for use within\ncontainer elements. This prop defaults to a tag.}" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom.\nThis is useful when an orientation prop is not provided, and data will determine the default orientation. i.e.\nnegative values result in a left orientation and positive values will result in a right orientation by default." + }, + { + "name": "index", + "type": "number | string", + "description": "The index prop represents the index of the datum in the data array." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element\ncreated from the passed labelComponent will be supplied with the following properties: x, y, index, datum,\nverticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to\nthe supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a\nnew ChartLabel will be created with the props described above.\n\n@example labelComponent={}, labelComponent={}", + "defaultValue": "" + }, + { + "name": "labelTextAnchor", + "type": "string | Function", + "description": "Defines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid\nvalues are 'start', 'middle', 'end', and 'inherit'." + }, + { + "name": "orientation", + "type": "string | Function", + "description": "The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on.\nThis prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these\nvalues. If this prop is not provided it will be determined from the sign of the datum, and the value of the\nhorizontal prop." + }, + { + "name": "pointerLength", + "type": "number | Function", + "description": "The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be\ngiven as a positive number or a function of datum." + }, + { + "name": "pointerOrientation", + "type": "string | Function", + "description": "This prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set,\nit will be determined based on the overall orientation of the flyout in relation to its data point, and any center\nor centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right." + }, + { + "name": "pointerWidth", + "type": "number | Function", + "description": "The pointerWidth prop determines the width of the base of the triangular pointer extending from\nthe flyout. This prop may be given as a positive number or a function of datum." + }, + { + "name": "renderInPortal", + "type": "boolean", + "description": "When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element\nwithin ChartContainer. Note: This prop should not be set to true when using a custom container element." + }, + { + "name": "style", + "type": "React.CSSProperties | React.CSSProperties[]", + "description": "The style prop applies CSS properties to the rendered `` element." + }, + { + "name": "text", + "type": "number | string | Function | string[] | number[]", + "description": "The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or\nfunction of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which\nChartLabel will split in to separate elements." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "x", + "type": "number", + "description": "The x prop defines the x coordinate to use as a basis for horizontal positioning." + }, + { + "name": "y", + "type": "number", + "description": "The y prop defines the y coordinate to use as a basis for vertical positioning." + } + ] + } + ], + "examples": [ + "Basic with right aligned legend", + "Horizontal with bottom aligned legend", + "Multi-color (ordered) horizontal with bottom aligned legend", + "Monthly data with responsive container", + "Multi-color (unordered) responsive container" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartStack, + ChartLegendTooltip, + ChartThemeColor, + ChartTooltip, + ChartVoronoiContainer, + createContainer, + getResizeObserver +}; +pageData.examples = { + 'Basic with right aligned legend': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={250}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n width={600}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Basic with right aligned legend","lang":"js"}}> + + , + 'Horizontal with bottom aligned legend': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}\n legendPosition=\"bottom\"\n height={275}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50, \n top: 50\n }}\n themeColor={ChartThemeColor.gold}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Horizontal with bottom aligned legend","lang":"js"}}> + + , + 'Multi-color (ordered) horizontal with bottom aligned legend': props => + (\n
\n \n \n \n \n }\n />\n }\n />\n }\n />\n }\n />\n \n \n
\n)","title":"Multi-color (ordered) horizontal with bottom aligned legend","lang":"js"}}> + +

+ {`This demonstrates an alternate way of applying tooltips using data labels.`} +

+ , + 'Monthly data with responsive container': props => + {};\n this.state = {\n width: 0\n };\n\n this.handleResize = () => {\n if(this.containerRef.current && this.containerRef.current.clientWidth){\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n\n this.bars = [];\n for(let i = 1; i < 32; i++){\n this.bars.push({ x: `Aug. ${i}`, y: Math.floor(Math.random() * 6) + 1 });\n };\n\n this.renderSocketBars = () => {\n let socketBars = this.bars.map((tick, index) => {\n return {\n x: tick.x,\n y: tick.y,\n name: 'Sockets',\n label: `${tick.x} Sockets: ${tick.y}`\n };\n });\n return } />;\n }\n\n this.renderCoresBars = () => {\n let coresBars = this.bars.map((tick, index) => {\n return {\n x: tick.x,\n y: tick.y,\n name: 'Cores',\n label: `${tick.x} Cores: ${tick.y}`\n };\n });\n return } />;\n }\n\n this.renderNodesBars = () => {\n let nodesBars = this.bars.map((tick, index) => {\n return {\n key: index,\n x: tick.x,\n y: tick.y,\n name: 'Nodes',\n label: `${tick.x} Nodes: ${tick.y}`\n };\n });\n return } />;\n }\n\n this.getTickValues = (offset = 2) => {\n let tickValues = [];\n for(let i = 1; i < 32; i++){\n if (i % offset == 0){\n tickValues.push(`Aug. ${i}`);\n }\n }\n return tickValues;\n }\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render(){\n const { width } = this.state;\n return (\n
\n
\n \n \n \n \n { this.renderSocketBars() }\n { this.renderCoresBars() }\n { this.renderNodesBars() }\n \n \n
\n
\n )\n }\n}","title":"Monthly data with responsive container","lang":"js"}}> + + , + 'Multi-color (unordered) responsive container': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if(this.containerRef.current && this.containerRef.current.clientWidth){\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n \n // Note: Container order is important\n const CursorVoronoiContainer = createContainer(\"voronoi\", \"cursor\");\n const legendData = [{ childName: 'cats', name: 'Cats' }, { childName: 'dogs', name: 'Dogs' }, { childName: 'birds', name: 'Birds' }];\n \n return (\n
\n
\n `${datum.y !== null ? datum.y : 'no data'}`}\n labelComponent={ datum.x}/>}\n mouseFollowTooltips\n voronoiDimension=\"x\"\n voronoiPadding={50}\n />\n }\n legendData={legendData}\n legendPosition=\"bottom-left\"\n height={225}\n padding={{\n bottom: 75, // Adjusted to accomodate legend\n left: 50,\n right: 50,\n top: 50,\n }}\n maxDomain={{y: 30}}\n themeColor={ChartThemeColor.multiUnordered}\n width={width}\n >\n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}","title":"Multi-color (unordered) responsive container","lang":"js"}}> + +

+ {`This demonstrates monthly data with a bottom aligned legend and responsiveness for mobile.`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+

+ {`Learn to build a stack chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.`} +

+

+ + {`Start course`} + +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic with right aligned legend"])} + {React.createElement(pageData.examples["Horizontal with bottom aligned legend"])} + {React.createElement(pageData.examples["Multi-color (ordered) horizontal with bottom aligned legend"])} + {React.createElement(pageData.examples["Monthly data with responsive container"])} + {React.createElement(pageData.examples["Multi-color (unordered) responsive container"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
  • + {`Themes are inherited, so a default theme may override `} + + {`themeColor`} + + {` for a child component`} +
    • +
  • + {`The `} + + {`theme`} + + {` and `} + + {`themeColor`} + + {` props should be applied at the most top level component`} +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`Chart`} + + {` props, see `} + + {`VictoryChart`} + +
    • +
  • + {`For `} + + {`ChartArea`} + + {` props, see `} + + {`VictoryArea`} + +
    • +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartBar`} + + {` props, see `} + + {`VictoryBar`} + +
    • +
  • + {`For `} + + {`ChartStack`} + + {` props, see `} + + {`VictoryStack`} + +
    • +
  • + {`For `} + + {`ChartTooltip`} + + {` props, see `} + + {`VictoryTooltip`} + +
    • +
+ +); +Component.displayName = 'ChartsStackChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/themes/react.js b/packages/react-docs/src/generated/charts/themes/react.js new file mode 100644 index 00000000000..ef40208e5f3 --- /dev/null +++ b/packages/react-docs/src/generated/charts/themes/react.js @@ -0,0 +1,184 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartDonut, + ChartGroup, + ChartLegend, + ChartLine, + ChartStack, + ChartThemeColor, + ChartThreshold, + ChartTooltip, + ChartVoronoiContainer, + mergeTheme +} from '@patternfly/react-charts'; +import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; +import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; +import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; +import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; +import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300'; +const pageData = { + "id": "Themes", + "section": "charts", + "source": "react", + "slug": "/charts/themes/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md", + "examples": [ + "Green", + "Multi-color (ordered)", + "Multi color (unordered)", + "Custom color scale", + "Custom stroke color", + "Custom theme" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartDonut, + ChartGroup, + ChartLegend, + ChartLine, + ChartStack, + ChartThemeColor, + ChartThreshold, + ChartTooltip, + ChartVoronoiContainer, + mergeTheme, + chart_color_blue_300, + chart_color_green_300, + chart_color_cyan_300, + chart_color_gold_300, + chart_color_purple_300 +}; +pageData.examples = { + 'Green': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}\n legendPosition=\"bottom\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.green}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Green","lang":"js"}}> + +

+ {`This demonstrates how to apply basic theme colors.`} +

+ , + 'Multi-color (ordered)': props => + (\n
\n `${datum.x}: ${datum.y}%`}\n legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n padding={{\n bottom: 20,\n left: 20,\n right: 140, // Adjusted to accommodate legend\n top: 20\n }}\n subTitle=\"Pets\"\n title=\"100\"\n themeColor={ChartThemeColor.multiOrdered}\n width={350}\n />\n
\n)","title":"Multi-color (ordered)","lang":"js"}}> + +

+ {`This demonstrates how to apply theme colors for ordered charts like bar, donut, pie, and stack.`} +

+ , + 'Multi color (unordered)': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={200}\n maxDomain={{y: 9}}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n themeColor={ChartThemeColor.multiUnordered}\n width={800}\n >\n \n \n \n \n \n \n \n \n
\n)","title":"Multi color (unordered)","lang":"js"}}> + +

+ {`This demonstrates how to apply theme colors for unordered charts like area, line, and sparkline.`} +

+ , + 'Custom color scale': props => + (\n
\n \n }\n legendPosition=\"bottom-left\"\n height={275}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.multiOrdered}\n width={450}\n >\n \n \n \n }\n />\n }\n />\n }\n />\n }\n />\n \n \n
\n)","title":"Custom color scale","lang":"js"}}> + +

+ {`This demonstrates an alternate way of applying a custom color scale and fill colors to individual charts.`} +

+ , + 'Custom stroke color': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendData={[\n { name: 'Cats' },\n { name: 'Birds' },\n { name: 'Mice' },\n { name: 'Cats Threshold', symbol: { fill: chart_color_blue_300.var, type: 'threshold' }}\n ]}\n legendPosition=\"bottom\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.multiUnordered}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n
\n)","title":"Custom stroke color","lang":"js"}}> + +

+ {`This demonstrates an alternate way of applying custom stroke and fill colors to a threshold chart.`} +

+ , + 'Custom theme': props => + \n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n domain={{y: [0,9]}}\n domainPadding={{ x: [30, 25] }}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={250}\n theme={this.myCustomTheme}\n width={600}\n >\n \n \n \n \n \n \n \n \n \n \n );\n }\n}","title":"Custom theme","lang":"js"}}> + +

+ {`This demonstrates custom theme properties, which may be applied across multiple charts.`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Green"])} + {React.createElement(pageData.examples["Multi-color (ordered)"])} + {React.createElement(pageData.examples["Multi color (unordered)"])} + {React.createElement(pageData.examples["Custom color scale"])} + {React.createElement(pageData.examples["Custom stroke color"])} + {React.createElement(pageData.examples["Custom theme"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`The `} + + {`theme`} + + {` and `} + + {`themeColor`} + + {` props should be applied at the most top level component`} +
    • +
  • + {`Use `} + + {`ChartGroup`} + + {` to apply theme color scales and other properties to multiple components`} +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For theme props, see `} + + {`VictoryTheme`} + +
    • +
+ +); +Component.displayName = 'ChartsThemesReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/threshold-chart/react.js b/packages/react-docs/src/generated/charts/threshold-chart/react.js new file mode 100644 index 00000000000..fffca2e41f2 --- /dev/null +++ b/packages/react-docs/src/generated/charts/threshold-chart/react.js @@ -0,0 +1,1169 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { + Chart, + ChartArea, + ChartAxis, + ChartGroup, + ChartLegend, + ChartThreshold, + ChartThemeColor, + ChartVoronoiContainer, + getResizeObserver +} from '@patternfly/react-charts'; +import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; +import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; +const pageData = { + "id": "Threshold chart", + "section": "charts", + "source": "react", + "slug": "/charts/threshold-chart/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md", + "propComponents": [ + { + "name": "Chart", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "backgroundComponent", + "type": "React.ReactElement", + "description": "The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the\nChart's style component includes background styles. The new element created from the passed backgroundComponent\nwill be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.\nAll of these props on Background should take prececence over what VictoryChart is trying to set." + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartArea: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartArea will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will include. This prop can be\ngiven as a array of the minimum and maximum expected values for your chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "endAngle", + "type": "number", + "description": "The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with\nstartAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart.\nThis prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and\nproceeding counterclockwise." + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop takes an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartPie\nevents. The eventKey may optionally be used to select a single element by index rather than\nan entire set. The eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a single bar), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventKey: 1,\n eventHandlers: {\n onClick: () => {\n return [\n {\n eventKey: 2,\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n eventKey: 2,\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "Chart uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.height" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the\nindependent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis." + }, + { + "name": "innerRadius", + "type": "number | Function", + "description": "When the innerRadius prop is set, polar charts will be hollow rather than circular." + }, + { + "name": "legendAllowWrap", + "type": "boolean", + "description": "Allows legend items to wrap. A value of true allows the legend to wrap onto the next line\nif its container is not wide enough.\n\nNote: This is overridden by the legendItemsPerRow property", + "defaultValue": "false" + }, + { + "name": "legendComponent", + "type": "React.ReactElement", + "description": "The legend component to render with chart.\n\nNote: Use legendData so the legend width can be calculated and positioned properly.\nDefault legend properties may be applied", + "defaultValue": "" + }, + { + "name": "legendData", + "type": "{\n name?: string;\n symbol?: {\n fill?: string;\n type?: string;\n };\n}[]", + "description": "Specify data via the data prop. ChartLegend expects data as an\narray of objects with name (required), symbol, and labels properties.\nThe data prop must be given as an array.\n\n@example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}" + }, + { + "name": "legendOrientation", + "type": "'horizontal' | 'vertical'", + "description": "The orientation prop takes a string that defines whether legend data\nare displayed in a row or column. When orientation is \"horizontal\",\nlegend items will be displayed in a single row. When orientation is\n\"vertical\", legend items will be displayed in a single column. Line\nand text-wrapping is not currently supported, so \"vertical\"\norientation is both the default setting and recommended for\ndisplaying many series of data.", + "defaultValue": "theme.legend.orientation" + }, + { + "name": "legendPosition", + "type": "'bottom' | 'bottom-left' | 'right'", + "description": "The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'\n\nNote: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some\ncases, the legend may not be visible until enough padding is applied.", + "defaultValue": "ChartCommonStyles.legend.position" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showAxis", + "type": "boolean", + "description": "Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via\nchart styles.", + "defaultValue": "true" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose Chart with other components within an enclosing tag." + }, + { + "name": "startAngle", + "type": "number", + "description": "The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction\nwith endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the\nchart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position,\nand proceeding counterclockwise." + }, + { + "name": "style", + "type": "{ parent: object, background: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object with styles defined\nfor data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified\nvia props as they determine relative layout for components in Chart.\n\n\n@propType { parent: object, background: object }" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getChartTheme(themeColor, showAxis)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set\nto the same width in order to maintain the aspect ratio.", + "defaultValue": "theme.chart.width" + } + ] + }, + { + "name": "ChartAxis", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "axisComponent", + "type": "React.ReactElement", + "description": "The axisComponent prop takes in an entire component which will be used\nto create the axis line. The new element created from the passed axisComponent\nwill be supplied with the following properties: x1, y1, x2, y2, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If an axisComponent\nis not supplied, ChartAxis will render its default AxisLine component." + }, + { + "name": "axisLabelComponent", + "type": "React.ReactElement", + "description": "The axisLabelComponent prop takes in an entire component which will be used\nto create the axis label. The new element created from the passed axisLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, transform, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an axisLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "axisValue", + "type": "number | string | object | Date", + "description": "The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when\ndependent axes should line up with values on the independent axis." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartAxis: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartAxis will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "crossAxis", + "type": "boolean", + "description": "This prop specifies whether a given axis is intended to cross another axis." + }, + { + "name": "dependentAxis", + "type": "boolean", + "description": "The dependentAxis prop specifies whether the axis corresponds to the\ndependent variable (usually y). This prop is useful when composing axis\nwith other components to form a chart." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your axis will include. This prop should be\ngiven as a array of the minimum and maximum expected values for your axis.\nIf this value is not given it will be calculated based on the scale or tickValues.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"axis\", \"axisLabel\", \"ticks\", \"tickLabels\", and \"grid\" are\nall valid targets for ChartAxis events. The eventKey may optionally be used to select a\nsingle element by index rather than an entire set. The eventHandlers object\nshould be given as an object whose keys are standard event names (i.e. onClick)\nand whose values are event callbacks. The return value of an event handler\nbe used to modify other elemnts. The return value should be given as an object or\nan array of objects with optional target and eventKey keys, and a mutation\nkey whose value is a function. The target and eventKey keys will default to those\ncorresponding to the element the event handler was attached to. The mutation\nfunction will be called with the calculated props for the individual selected\nelement (i.e. a single tick), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"grid\",\n eventKey: 2,\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"tickLabels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartAxis uses the standard externalEventMutations prop." + }, + { + "name": "fixLabelOverlap", + "type": "boolean", + "description": "When true, this prop reduces the number of tick labels to fit the length of the axis.\nLabels are removed at approximately even intervals from the original array of labels.\nThis feature only works well for labels that are approximately evenly spaced." + }, + { + "name": "gridComponent", + "type": "React.ReactElement", + "description": "The gridComponent prop takes in an entire component which will be used\nto create grid lines. The new element created from the passed gridComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a gridComponent\nis not supplied, ChartAxis will render its default GridLine component." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "Specifies the height the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into." + }, + { + "name": "invertAxis", + "type": "boolean", + "description": "If true, this value will flip the domain of a given axis." + }, + { + "name": "label", + "type": "any", + "description": "The label prop defines the label that will appear along the axis. This\nprop should be given as a value or an entire, HTML-complete label\ncomponent. If a label component is given, it will be cloned. The new\nelement's properties x, y, textAnchor, verticalAnchor, and transform\nwill have defaults provided by the axis; styles filled out with\ndefaults provided by the axis, and overrides from the label component.\nIf a value is given, a new ChartLabel will be created with props and\nstyles from the axis." + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "ChartAxis uses the standard name prop" + }, + { + "name": "offsetX", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the x-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "offsetY", + "type": "number", + "description": "This value describes how far from the \"edge\" of its permitted area each axis\nwill be set back in the y-direction. If this prop is not given,\nthe offset is calculated based on font size, axis orientation, and label padding." + }, + { + "name": "orientation", + "type": "string", + "description": "The orientation prop specifies the position and orientation of your axis.\nValid values are 'top', 'bottom', 'left' and 'right'." + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart, ChartStack, or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "showGrid", + "type": "boolean", + "description": "Show axis grid and ticks", + "defaultValue": "false" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartAxis with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }", + "description": "The style prop defines the style of the component. The style prop should be given as an object\nwith styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg\nstyles are supported, but width, height, and padding should be specified via props as they\ndetermine relative layout for components in Chart. Functional styles may be defined for\ngrid, tick, and tickLabel style properties, and they will be evaluated with each tick.\n\nNote: When a component is rendered as a child of another Victory component, or within a custom\n element with standalone={false} parent styles will be applied to the enclosing tag.\nMany styles that can be applied to a parent will not be expressed when applied to a .\n\nNote: custom angle and verticalAnchor properties may be included in labels styles." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartAxis as a solo component, implement the theme directly on\nChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "tickComponent", + "type": "React.ReactElement", + "description": "The tickComponent prop takes in an entire component which will be used\nto create tick lines. The new element created from the passed tickComponent\nwill be supplied with the following properties: x1, y1, x2, y2, tick, style and events.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a tickComponent\nis not supplied, ChartAxis will render its default Tick component." + }, + { + "name": "tickCount", + "type": "number", + "description": "The tickCount prop specifies approximately how many ticks should be drawn on the axis if\ntickValues are not explicitly provided. This value is calculated by d3 scale and\nprioritizes returning \"nice\" values and evenly spaced ticks over an exact number of ticks.\nIf you need an exact number of ticks, please specify them via the tickValues prop.\nThis prop must have a value greater than zero." + }, + { + "name": "tickFormat", + "type": "any[] | ((tick: any, index: number, ticks: any[]) => string | number)", + "description": "The tickFormat prop specifies how tick values should be expressed visually.\ntickFormat can be given as a function to be applied to every tickValue, or as\nan array of display values for each tickValue.\n\n@example d3.time.format(\"%Y\"), (x) => x.toPrecision(2), [\"first\", \"second\", \"third\"]" + }, + { + "name": "tickLabelComponent", + "type": "React.ReactElement", + "description": "The tickLabelComponent prop takes in an entire component which will be used\nto create the tick labels. The new element created from the passed tickLabelComponent\nwill be supplied with the following properties: x, y, verticalAnchor, textAnchor,\nangle, tick, style and events. Any of these props may be overridden by\npassing in props to the supplied component, or modified or ignored within\nthe custom component itself. If an tickLabelComponent is not supplied, a new\nChartLabel will be created with props described above" + }, + { + "name": "tickValues", + "type": "any[]", + "description": "The tickValues prop explicitly specifies which tick values to draw on the axis.\n\n@example [\"apples\", \"bananas\", \"oranges\"], [2, 4, 6, 8]" + }, + { + "name": "width", + "type": "number", + "description": "Specifies the width of the svg viewBox of the chart container. This value should be given as a\nnumber of pixels.\n\nBecause Victory renders responsive containers, the width and height props do not determine the width and\nheight of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of\npixels will depend on the size of the container the chart is rendered into.\n\nNote: innerRadius may need to be set when using this property." + } + ] + }, + { + "name": "ChartGroup", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "ariaDesc", + "type": "string", + "description": "The ariaDesc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers.\n\nNote: Overridden by the desc prop of containerComponent" + }, + { + "name": "ariaTitle", + "type": "string", + "description": "The ariaTitle prop specifies the title to be applied to the SVG to assist\naccessibility for screen readers.\n\nNote: Overridden by the title prop of containerComponent" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "children", + "type": "React.ReactNode | React.ReactNode[]", + "description": "The children to render with the chart" + }, + { + "name": "color", + "type": "string", + "description": "The color prop is an optional prop that defines a single color to be applied to the\nchildren of ChartGroup. The color prop will override colors specified via colorScale." + }, + { + "name": "colorScale", + "type": "string[]", + "description": "The colorScale prop is an optional prop that defines the color scale the chart's bars\nwill be created on. This prop should be given as an array of CSS colors, or as a string\ncorresponding to one of the built in color scales. ChartGroup will automatically assign\nvalues from this color scale to the bars unless colors are explicitly provided in the\n`dataAttributes` prop." + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartGroup: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartGroup will use the default ChartContainer component.\n\n@example ", + "defaultValue": "" + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: number[] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartGroup events.\nSince ChartGroup only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. an area), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {fill: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartGroup uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "hasPatterns", + "type": "boolean | boolean[]", + "description": "The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart.\nSVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected\ncolor theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar\nto the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized\npatterns would be displayed in that same order. Create custom patterns via the patternScale prop.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example hasPatterns={ true }\n@example hasPatterns={[ true, true, false ]}", + "beta": true + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartGroup. If individual labels are required for each\ndata point, they should be created by composing ChartGroup with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "offset", + "type": "number", + "description": "The offset prop determines the number of pixels each element in a group should\nbe offset from its original position of the on the independent axis. In the\ncase of groups of bars, this number should be equal to the width of the bar\nplus the desired spacing between bars." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "patternScale", + "type": "string[]", + "description": "The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be\ngiven as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there\nare more children than patterns in the provided patternScale. Use null to omit the pattern for a given index.\n\nNote: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc.\n\n@example patternScale={[ 'url(\"#pattern1\")', 'url(\"#pattern2\")', null ]}", + "beta": true + }, + { + "name": "polar", + "type": "boolean", + "description": "Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart." + }, + { + "name": "range", + "type": "number[] | { x: number[], y: number[] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart,\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "number | string | Function | string[]", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartGroup with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartGroup. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartBar or ChartArea.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartThreshold", + "description": "", + "props": [ + { + "name": "animate", + "type": "boolean | object", + "description": "The animate prop specifies props for VictoryAnimation to use.\nThe animate prop should also be used to specify enter and exit\ntransition configurations with the `onExit` and `onEnter` namespaces respectively.\n\n\n@example\n{duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}" + }, + { + "name": "categories", + "type": "string[] | { x: string[], y: string[] }", + "description": "The categories prop specifies how categorical data for a chart should be ordered.\nThis prop should be given as an array of string values, or an object with\nthese arrays of values specified for x and y. If this prop is not set,\ncategorical data will be plotted in the order it was given in the data array\n\n\n@example [\"dogs\", \"cats\", \"mice\"]" + }, + { + "name": "containerComponent", + "type": "React.ReactElement", + "description": "The containerComponent prop takes an entire component which will be used to\ncreate a container element for standalone charts.\nThe new element created from the passed containerComponent wil be provided with\nthese props from ChartLine: height, width, children\n(the chart itself) and style. Props that are not provided by the\nchild chart component include title and desc, both of which\nare intended to add accessibility to Victory components. The more descriptive these props\nare, the more accessible your data will be for people using screen readers.\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use the default ChartContainer component.\n\n@example " + }, + { + "name": "data", + "type": "any[]", + "description": "The data prop specifies the data to be plotted. Data should be in the form of an array\nof data points, or an array of arrays of data points for multiple datasets.\nEach data point may be any format you wish (depending on the `x` and `y` accessor props),\nbut by default, an object with x and y properties is expected.\n\n@example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]],\n[[{x: \"a\", y: 1}, {x: \"b\", y: 2}], [{x: \"a\", y: 2}, {x: \"b\", y: 3}]]" + }, + { + "name": "dataComponent", + "type": "React.ReactElement", + "description": "The dataComponent prop takes an entire component which will be used to create an area.\nThe new element created from the passed dataComponent will be provided with the\nfollowing properties calculated by ChartLine: a scale, style, events, interpolation,\nand an array of modified data objects (including x, y, and calculated y0 and y1).\nAny of these props may be overridden by passing in props to the supplied component,\nor modified or ignored within the custom component itself. If a dataComponent is\nnot provided, ChartLine will use its default Line component." + }, + { + "name": "domain", + "type": "number[] | { x: number[], y: number[] }", + "description": "The domain prop describes the range of values your chart will cover. This prop can be\ngiven as a array of the minimum and maximum expected values for your bar chart,\nor as an object that specifies separate arrays for x and y.\nIf this prop is not provided, a domain will be calculated from data, or other\navailable information.\n\n\n@example [low, high], { x: [low, high], y: [low, high] }\n\n[-1, 1], {x: [0, 100], y: [0, 1]}" + }, + { + "name": "domainPadding", + "type": "number | number[] | { x: number[], y: [number, number] }", + "description": "The domainPadding prop specifies a number of pixels of padding to add to the\nbeginning and end of a domain. This prop is useful for explicitly spacing ticks farther\nfrom the origin to prevent crowding. This prop should be given as an object with\nnumbers specified for x and y.\n\n\n@example [left, right], { x: [left, right], y: [bottom, top] }\n\n{x: [10, -10], y: 5}" + }, + { + "name": "eventKey", + "type": "number | string | Function", + "description": "Similar to data accessor props `x` and `y`, this prop may be used to functionally\nassign eventKeys to data" + }, + { + "name": "events", + "type": "object[]", + "description": "The event prop take an array of event objects. Event objects are composed of\na target, an eventKey, and eventHandlers. Targets may be any valid style namespace\nfor a given component, so \"data\" and \"labels\" are all valid targets for ChartLine events.\nSince ChartLine only renders a single element, the eventKey property is not used.\nThe eventHandlers object should be given as an object whose keys are standard\nevent names (i.e. onClick) and whose values are event callbacks. The return value\nof an event handler is used to modify elemnts. The return value should be given\nas an object or an array of objects with optional target and eventKey keys,\nand a mutation key whose value is a function. The target and eventKey keys\nwill default to those corresponding to the element the event handler was attached to.\nThe mutation function will be called with the calculated props for the individual selected\nelement (i.e. a line), and the object returned from the mutation function\nwill override the props of the selected element via object assignment.\n\n\n@example\nevents={[\n {\n target: \"data\",\n eventHandlers: {\n onClick: () => {\n return [\n {\n mutation: (props) => {\n return {style: merge({}, props.style, {stroke: \"orange\"})};\n }\n }, {\n target: \"labels\",\n mutation: () => {\n return {text: \"hey\"};\n }\n }\n ];\n }\n }\n }\n]}" + }, + { + "name": "externalEventMutations", + "type": "object[]", + "description": "ChartLine uses the standard externalEventMutations prop." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes an entire component which will be used to\ncreate group elements for use within container elements. This prop defaults\nto a tag on web, and a react-native-svg tag on mobile" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the chart container.\nThis value should be given as a number of pixels" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether data will be plotted horizontally.\nWhen this prop is set to true, the independent variable will be plotted on the y axis\nand the dependent variable will be plotted on the x axis." + }, + { + "name": "interpolation", + "type": "string | Function", + "description": "The interpolation prop determines how data points should be connected when plotting a line.\nPolar area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\".\nCartesian area charts may use the following interpolation options: \"basis\", \"cardinal\", \"catmullRom\", \"linear\",\n\"monotoneX\", \"monotoneY\", \"natural\", \"step\", \"stepAfter\", \"stepBefore\"." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes in an entire label component which will be used\nto create a label for the area. The new element created from the passed labelComponent\nwill be supplied with the following properties: x, y, index, data, verticalAnchor,\ntextAnchor, angle, style, text, and events. any of these props may be overridden\nby passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If labelComponent is omitted, a new ChartLabel\nwill be created with props described above. This labelComponent prop should be used to\nprovide a series label for ChartLine. If individual labels are required for each\ndata point, they should be created by composing ChartLine with VictoryScatter" + }, + { + "name": "labels", + "type": "string[] | number[] | ((data: any) => string | number | null)", + "description": "The labels prop defines labels that will appear above each bar in your chart.\nThis prop should be given as an array of values or as a function of data.\nIf given as an array, the number of elements in the array should be equal to\nthe length of the data array. Labels may also be added directly to the data object\nlike data={[{x: 1, y: 1, label: \"first\"}]}.\n\n@example [\"spring\", \"summer\", \"fall\", \"winter\"], (datum) => datum.title" + }, + { + "name": "maxDomain", + "type": "number | { x?: number; y?: number }", + "description": "The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum\ndomain of a chart is static, while the minimum value depends on data or other variable information. If the domain\nprop is set in addition to maximumDomain, domain will be used.\n\nNote: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nmaxDomain={0}\nmaxDomain={{ y: 0 }}" + }, + { + "name": "minDomain", + "type": "number | { x?: number; y?: number }", + "description": "The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum\ndomain of a chart is static, while the maximum value depends on data or other variable information. If the domain\nprop is set in addition to minimumDomain, domain will be used.\n\nNote: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the\ndependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to\nthe y axis.\n\n@example\n\nminDomain={0}\nminDomain={{ y: 0 }}" + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "padding", + "type": "number | { top: number, bottom: number, left: number, right: number }", + "description": "The padding props specifies the amount of padding in number of pixels between\nthe edge of the chart and any rendered child components. This prop can be given\nas a number or as an object with padding specified for top, bottom, left\nand right." + }, + { + "name": "range", + "type": "[number, number] | { x: [number, number], y: [number, number] }", + "description": "The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this\ncorresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this\ncorresponds to a range of angles and radii. When this value is not given it will be calculated from the width,\nheight, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given\nchart must share the same range, so setting this prop on children nested within Chart or\nChartGroup will have no effect. This prop is usually not set manually.\n\n\n@example [low, high] | { x: [low, high], y: [low, high] }\n\nCartesian: range={{ x: [50, 250], y: [50, 250] }}\nPolar: range={{ x: [0, 360], y: [0, 250] }}" + }, + { + "name": "samples", + "type": "number", + "description": "The samples prop specifies how many individual points to plot when plotting\ny as a function of x. Samples is ignored if x props are provided instead." + }, + { + "name": "scale", + "type": "string | { x: string, y: string }", + "description": "The scale prop determines which scales your chart should use. This prop can be\ngiven as a string specifying a supported scale (\"linear\", \"time\", \"log\", \"sqrt\"),\nas a d3 scale function, or as an object with scales specified for x and y\n\n\n@example d3Scale.time(), {x: \"linear\", y: \"log\"}" + }, + { + "name": "singleQuadrantDomainPadding", + "type": "boolean | { x?: boolean; y?: boolean }", + "description": "By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive\nvalues, no amount of padding applied by domainPadding will result in a domain with negative values. This is the\ndesired behavior in most cases. For users that need to apply padding without regard to quadrant, the\nsingleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values\nspecified for \"x\" and/or \"y\". When this prop is false (or false for a given dimension), padding will be applied\nwithout regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.\n\nNote: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y\nvalue refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable\nwill corresponds to the y axis.\n\n@example\n\nsingleQuadrantDomainPadding={false}\nsingleQuadrantDomainPadding={{ x: false }}" + }, + { + "name": "sortKey", + "type": "string | string[] | Function", + "description": "Use the sortKey prop to indicate how data should be sorted. This prop\nis given directly to the lodash sortBy function to be executed on the\nfinal dataset." + }, + { + "name": "sortOrder", + "type": "string", + "description": "The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order." + }, + { + "name": "standalone", + "type": "boolean", + "description": "The standalone prop determines whether the component will render a standalone svg\nor a tag that will be included in an external svg. Set standalone to false to\ncompose ChartLine with other components within an enclosing tag." + }, + { + "name": "style", + "type": "{ parent: object, data: object, labels: object }", + "description": "The style prop specifies styles for your ChartLine. Any valid inline style properties\nwill be applied. Height, width, and padding should be specified via the height,\nwidth, and padding props, as they are used to calculate the alignment of\ncomponents within chart.\n\n\n@example {data: {fill: \"red\"}, labels: {fontSize: 12}}", + "defaultValue": "{}" + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop takes a style object with nested data, labels, and parent objects.\nYou can create this object yourself, or you can use a theme provided by\nWhen using ChartLine as a solo component, implement the theme directly on\nChartLine. If you are wrapping ChartLine in ChartChart or ChartGroup,\nplease call the theme on the outermost wrapper component instead.", + "defaultValue": "getThresholdTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the chart container\nThis value should be given as a number of pixels" + }, + { + "name": "x", + "type": "number | string | Function | string[]", + "description": "The x prop specifies how to access the X value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y", + "type": "number | string | Function | string[]", + "description": "The y prop specifies how to access the Y value of each data point.\nIf given as a function, it will be run on each data point, and returned value will be used.\nIf given as an integer, it will be used as an array index for array-type data points.\nIf given as a string, it will be used as a property key for object-type data points.\nIf given as an array of strings, or a string containing dots or brackets,\nit will be used as a nested object property path (for details see Lodash docs for _.get).\nIf `null` or `undefined`, the data value will be used as is (identity function/pass-through).\n\n\n@example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)" + }, + { + "name": "y0", + "type": "number | string | Function | string[]", + "description": "Use y0 data accessor prop to determine how the component defines the baseline y0 data.\nThis prop is useful for defining custom baselines for components like ChartLine.\nThis prop may be given in a variety of formats.\n\n\n@example 'last_quarter_profit', () => 10, 1, 'employees.salary', [\"employees\", \"salary\"]" + } + ] + }, + { + "name": "ChartVoronoiContainer", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When the activateData prop is set to true, the active prop will be set to true on all\ndata components within a voronoi area. When this prop is set to false, the onActivated\nand onDeactivated callbacks will still fire, but no mutations to data components will\noccur via Victory’s event system." + }, + { + "name": "activateLabels", + "type": "boolean", + "description": "When the activateLabels prop is set to true, the active prop will be set to true on all\nlabels corresponding to points within a voronoi area. When this prop is set to false,\nthe onActivated and onDeactivated callbacks will still fire, but no mutations to label\ncomponents will occur via Victory’s event system. Labels defined directly on\nChartVoronoiContainer via the labels prop will still appear when this prop is set to false." + }, + { + "name": "className", + "type": "string", + "description": "The className prop specifies a className that will be applied to the outer-most div rendered by the container" + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "containerId", + "type": "number | string", + "description": "The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually\nset, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing." + }, + { + "name": "desc", + "type": "string", + "description": "The desc prop specifies the description of the chart/SVG to assist with\naccessibility for screen readers. The more info about the chart provided in\nthe description, the more usable it will be for people using screen readers.\nThis prop defaults to an empty string.\n\n@example \"Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are\nnot represented above 5% each.\"" + }, + { + "name": "disable", + "type": "boolean", + "description": "When the disable prop is set to true, ChartVoronoiContainer events will not fire." + }, + { + "name": "events", + "type": "React.DOMAttributes", + "description": "The events prop attaches arbitrary event handlers to the container component.\nEvent handlers passed from other Victory components are called with their\ncorresponding events as well as scale, style, width, height, and data when\napplicable. Use the invert method to convert event coordinate information to\ndata. `scale.x.invert(evt.offsetX)`.\n\n@example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}" + }, + { + "name": "height", + "type": "number", + "description": "The height props specifies the height the svg viewBox of the container.\nThis value should be given as a number of pixels. If no height prop\nis given, the height prop from the child component passed will be used." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop specified the component that will be rendered when labels are defined\non ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered.", + "defaultValue": "" + }, + { + "name": "labels", + "type": "(point: any, index: number, points: any[]) => string", + "description": "When a labels prop is provided to ChartVoronoiContainer it will render a label component\nrather than activating labels on the child components it renders. This is useful for\ncreating multi- point tooltips. This prop should be given as a function which will be called\nonce for each active point. The labels function will be called with the arguments point,\nindex, and points, where point refers to a single active point, index refers to the position\nof that point in the array of active points, and points is an array of all active points." + }, + { + "name": "mouseFollowTooltips", + "type": "boolean", + "description": "When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip\nfollows the position of the mouse." + }, + { + "name": "name", + "type": "string", + "description": "The name prop is used to reference a component instance when defining shared events." + }, + { + "name": "onActivated", + "type": "Function", + "description": "The onActivated prop accepts a function to be called whenever new data points are activated.\nThe function is called with the parameters points (an array of active data objects) and props\n(the props used by ChartVoronoiContainer)." + }, + { + "name": "onDeactivated", + "type": "Function", + "description": "The onDeactivated prop accepts a function to be called whenever points are deactivated. The\nfunction is called with the parameters points (an array of the newly-deactivated data objects)\nand props (the props used by ChartVoronoiContainer)." + }, + { + "name": "origin", + "type": "{ x: number, y: number }", + "description": "Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.\n\nNote: It will not typically be necessary to set an origin prop manually" + }, + { + "name": "portalComponent", + "type": "React.ReactElement", + "description": "The portalComponent prop takes a component instance which will be used as a container for children that should\nrender inside a top-level container so that they will always appear above other elements. ChartTooltip renders\ninside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should\nrender in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered\nelements from SVG to another type of element e.g., react-native-svg elements." + }, + { + "name": "portalZIndex", + "type": "number", + "description": "The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is\nnot set, the z-index of the enclosing div will be set to 99." + }, + { + "name": "radius", + "type": "number", + "description": "When the radius prop is set, the voronoi areas associated with each data point will be no larger\nthan the given radius. This prop should be given as a number." + }, + { + "name": "responsive", + "type": "boolean", + "description": "The responsive prop specifies whether the rendered container should be a responsive container\nwith a viewBox attribute, or a static container with absolute width and height.\n\n@default true" + }, + { + "name": "style", + "type": "React.CSSProperties", + "description": "The style prop specifies styles for your ChartContainer. Any valid inline style properties\nwill be applied. Height and width should be specified via the height\nand width props, as they are used to calculate the alignment of\ncomponents within the container. Styles from the child component will\nalso be passed, if any exist.\n\n@example {border: 1px solid red}" + }, + { + "name": "tabIndex", + "type": "number", + "description": "The tabIndex prop specifies the description of the chart/SVG to assist with accessibility." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "voronoiBlacklist", + "type": "string[]", + "description": "The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a\nshared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist\narray will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as\nactive, and will not contribute date to shared tooltips or labels." + }, + { + "name": "voronoiDimension", + "type": "'x' | 'y'", + "description": "When the voronoiDimension prop is set, voronoi selection will only take the given dimension into\naccount. For example, when dimension is set to “x”, all data points matching a particular x mouse\nposition will be activated regardless of y value. When this prop is not given, voronoi selection\nis determined by both x any y values." + }, + { + "name": "voronoiPadding", + "type": "number", + "description": "When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\nof a given chart may trigger voronoi events. This prop should be given as a number." + }, + { + "name": "width", + "type": "number", + "description": "The width props specifies the width of the svg viewBox of the container\nThis value should be given as a number of pixels. If no width prop\nis given, the width prop from the child component passed will be used." + } + ] + } + ], + "examples": [ + "Multi-color (unordered) with responsive container" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartGroup, + ChartLegend, + ChartThreshold, + ChartThemeColor, + ChartVoronoiContainer, + getResizeObserver, + chart_color_blue_300, + chart_color_orange_300 +}; +pageData.examples = { + 'Multi-color (unordered) with responsive container': props => + {};\n this.state = {\n width: 0\n };\n this.handleResize = () => {\n if (this.containerRef.current && this.containerRef.current.clientWidth) {\n this.setState({ width: this.containerRef.current.clientWidth });\n }\n };\n }\n\n componentDidMount() {\n this.observer = getResizeObserver(this.containerRef.current, this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n this.observer();\n }\n\n render() {\n const { width } = this.state;\n const itemsPerRow = width > 650 ? 4 : 2;\n\n return (\n
\n
\n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n legendPosition=\"bottom-left\"\n legendComponent={\n \n }\n height={250}\n padding={{\n bottom: 100, // Adjusted to accomodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n maxDomain={{ y: 9 }}\n themeColor={ChartThemeColor.multiUnordered}\n width={width}\n >\n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}","title":"Multi-color (unordered) with responsive container","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, +along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Multi-color (unordered) with responsive container"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
  • + {`For single data points or zero values, you may want to set the `} + + {`domain`} + + {` prop`} +
    • +
  • + + {`ChartLegend`} + + {` may be used as a standalone component, instead of using `} + + {`legendData`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`Chart`} + + {` props, see `} + + {`VictoryChart`} + +
    • +
  • + {`For `} + + {`ChartArea`} + + {` props, see `} + + {`VictoryArea`} + +
    • +
  • + {`For `} + + {`ChartAxis`} + + {` props, see `} + + {`VictoryAxis`} + +
    • +
  • + {`For `} + + {`ChartGroup`} + + {` props, see `} + + {`VictoryGroup`} + +
    • +
  • + {`For `} + + {`ChartLegend`} + + {` props, see `} + + {`VictoryLegend`} + +
    • +
  • + {`For `} + + {`ChartThreshold`} + + {` props, see `} + + {`VictoryLine`} + +
    • +
  • + {`For `} + + {`ChartVoronoiContainer`} + + {` props, see `} + + {`VictoryVoronoiContainer`} + +
    • +
+ +); +Component.displayName = 'ChartsThresholdChartReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/charts/tooltips/react.js b/packages/react-docs/src/generated/charts/tooltips/react.js new file mode 100644 index 00000000000..1772c76509a --- /dev/null +++ b/packages/react-docs/src/generated/charts/tooltips/react.js @@ -0,0 +1,386 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartContainer, + ChartCursorFlyout, + ChartCursorTooltip, + ChartDonut, + ChartDonutThreshold, + ChartDonutUtilization, + ChartGroup, + ChartLabel, + ChartLegend, + ChartLegendTooltip, + ChartLine, + ChartPie, + ChartPoint, + ChartStack, + ChartThemeColor, + ChartTooltip, + ChartVoronoiContainer, + createContainer, + mergeTheme +} from '@patternfly/react-charts'; +import '../../../../../react-charts/src/components/ChartTooltip/examples/./chart-tooltip.css'; +const pageData = { + "id": "Tooltips", + "section": "charts", + "source": "react", + "slug": "/charts/tooltips/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md", + "propComponents": [ + { + "name": "ChartTooltip", + "description": "", + "props": [ + { + "name": "activateData", + "type": "boolean", + "description": "When true, tooltip events will set the active prop on both data and label elements." + }, + { + "name": "active", + "type": "boolean", + "description": "The active prop specifies whether the tooltip component should be displayed." + }, + { + "name": "angle", + "type": "string | number", + "description": "The angle prop specifies the angle to rotate the tooltip around its origin point." + }, + { + "name": "center", + "type": "{ x: number; y: number }", + "description": "The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object\nthat describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for\npositioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with\nChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set,\nnon-zero pointerLength values will no longer be respected." + }, + { + "name": "centerOffset", + "type": "{ x: number | Function, y: number | Function }", + "description": "The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout\npointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a\nfunction that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be\nrespected." + }, + { + "name": "constrainToVisibleArea", + "type": "boolean", + "description": "The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of\nthe chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the\ncenter of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.", + "defaultValue": "false" + }, + { + "name": "cornerRadius", + "type": "number | Function", + "description": "The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number\nor a function of datum." + }, + { + "name": "data", + "type": "any[]", + "description": "Victory components can pass a data prop to their label component. This can be useful in custom components that need\nto make use of the entire dataset." + }, + { + "name": "datum", + "type": "{}", + "description": "Victory components can pass a datum prop to their label component. This can be used to calculate functional styles,\nand determine text." + }, + { + "name": "dx", + "type": "number | Function", + "description": "The dx prop defines a horizontal shift from the x coordinate." + }, + { + "name": "dy", + "type": "number | Function", + "description": "The dy prop defines a vertical shift from the y coordinate." + }, + { + "name": "events", + "type": "object", + "description": "The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of\nevent names and corresponding event handlers. When events are provided via Victory’s event system, event handlers\nwill be called with the event, the props of the component is attached to, and an eventKey.\n\n\n@example events={{onClick: (evt) => alert(\"x: \" + evt.clientX)}}" + }, + { + "name": "flyoutComponent", + "type": "React.ReactElement", + "description": "The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip.\nThe new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy,\nindex, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events.\nAny of these props may be overridden by passing in props to the supplied component, or modified or ignored within\nthe custom component itself. If flyoutComponent is omitted, a default Flyout component will be created with props\ndescribed above.\n\n@example flyoutComponent={}, flyoutComponent={}" + }, + { + "name": "flyoutHeight", + "type": "number | Function", + "description": "The flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function\nof datum. If this prop is not set, height will be determined based on an approximate text size calculated from the\ntext and style props provided to ChartTooltip." + }, + { + "name": "flyoutStyle", + "type": "number | Function", + "description": "The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the\nflyoutComponent." + }, + { + "name": "flyoutWidth", + "type": "number | Function", + "description": "The flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a\nfunction of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size\ncalculated from the text and style props provided to VictoryTooltip." + }, + { + "name": "groupComponent", + "type": "React.ReactElement", + "description": "The groupComponent prop takes a component instance which will be used to create group elements for use within\ncontainer elements. This prop defaults to a tag.}" + }, + { + "name": "horizontal", + "type": "boolean", + "description": "The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom.\nThis is useful when an orientation prop is not provided, and data will determine the default orientation. i.e.\nnegative values result in a left orientation and positive values will result in a right orientation by default." + }, + { + "name": "index", + "type": "number | string", + "description": "The index prop represents the index of the datum in the data array." + }, + { + "name": "labelComponent", + "type": "React.ReactElement", + "description": "The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element\ncreated from the passed labelComponent will be supplied with the following properties: x, y, index, datum,\nverticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to\nthe supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a\nnew ChartLabel will be created with the props described above.\n\n@example labelComponent={}, labelComponent={}", + "defaultValue": "" + }, + { + "name": "labelTextAnchor", + "type": "string | Function", + "description": "Defines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid\nvalues are 'start', 'middle', 'end', and 'inherit'." + }, + { + "name": "orientation", + "type": "string | Function", + "description": "The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on.\nThis prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these\nvalues. If this prop is not provided it will be determined from the sign of the datum, and the value of the\nhorizontal prop." + }, + { + "name": "pointerLength", + "type": "number | Function", + "description": "The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be\ngiven as a positive number or a function of datum." + }, + { + "name": "pointerOrientation", + "type": "string | Function", + "description": "This prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set,\nit will be determined based on the overall orientation of the flyout in relation to its data point, and any center\nor centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right." + }, + { + "name": "pointerWidth", + "type": "number | Function", + "description": "The pointerWidth prop determines the width of the base of the triangular pointer extending from\nthe flyout. This prop may be given as a positive number or a function of datum." + }, + { + "name": "renderInPortal", + "type": "boolean", + "description": "When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element\nwithin ChartContainer. Note: This prop should not be set to true when using a custom container element." + }, + { + "name": "style", + "type": "React.CSSProperties | React.CSSProperties[]", + "description": "The style prop applies CSS properties to the rendered `` element." + }, + { + "name": "text", + "type": "number | string | Function | string[] | number[]", + "description": "The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or\nfunction of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which\nChartLabel will split in to separate elements." + }, + { + "name": "theme", + "type": "object", + "description": "The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or\nprops defined in theme may be overwritten by props specified on the component instance.", + "defaultValue": "getTheme(themeColor)" + }, + { + "name": "themeColor", + "type": "string", + "description": "Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.\n\nNote: Not compatible with theme prop\n\n@example themeColor={ChartThemeColor.blue}" + }, + { + "name": "themeVariant", + "type": "string", + "description": "Specifies the theme variant. Valid values are 'dark' or 'light'\n\nNote: Not compatible with theme prop\n\n Use PatternFly's pf-theme-dark CSS selector", + "deprecated": true + }, + { + "name": "x", + "type": "number", + "description": "The x prop defines the x coordinate to use as a basis for horizontal positioning." + }, + { + "name": "y", + "type": "number", + "description": "The y prop defines the y coordinate to use as a basis for vertical positioning." + } + ] + } + ], + "examples": [ + "Voronoi container", + "Combined cursor and voronoi containers", + "Embedded legend", + "Embedded HTML", + "Data label", + "Legend", + "Left aligned", + "CSS overflow", + "Wrapped chart" + ] +}; +pageData.liveContext = { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartContainer, + ChartCursorFlyout, + ChartCursorTooltip, + ChartDonut, + ChartDonutThreshold, + ChartDonutUtilization, + ChartGroup, + ChartLabel, + ChartLegend, + ChartLegendTooltip, + ChartLine, + ChartPie, + ChartPoint, + ChartStack, + ChartThemeColor, + ChartTooltip, + ChartVoronoiContainer, + createContainer, + mergeTheme +}; +pageData.examples = { + 'Voronoi container': props => + (\n
\n `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={200}\n maxDomain={{y: 9}}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n width={800}\n >\n \n \n \n \n \n \n \n \n
\n)","title":"Voronoi container","lang":"js"}}> + +

+ {`This demonstrates how to use a voronoi container to display tooltips.`} +

+ , + 'Combined cursor and voronoi containers': props => + \n `${datum.name}: ${datum.y}`}\n mouseFollowTooltips\n voronoiDimension=\"x\"\n voronoiPadding={50}\n />\n }\n legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}\n legendPosition=\"bottom\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.orange}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n \n );\n }\n}","title":"Combined cursor and voronoi containers","lang":"js"}}> + +

+ {`This demonstrates how to combine cursor and voronoi containers to display tooltips along with a vertical cursor.`} +

+ , + 'Embedded legend': props => + \n `${datum.y !== null ? datum.y : 'no data'}`}\n labelComponent={ datum.x}/>}\n mouseFollowTooltips\n voronoiDimension=\"x\"\n voronoiPadding={50}\n />\n }\n legendData={legendData}\n legendPosition=\"bottom\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.green}\n width={450}\n >\n \n \n \n \n \n \n \n \n \n \n );\n }\n}","title":"Embedded legend","lang":"js"}}> + +

+ {`This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.`} +

+ , + 'Embedded HTML': props => + (\n \n \n \n \n \n \n \n \n \n {text.map((val, index) => (\n \n \n \n \n \n ))}\n \n
{title(datum)}
\n \n {}\n \n {legendData[index].name}{val}
\n \n \n );\n\n return (\n
\n `${datum.y}`}\n labelComponent={\n width > center.x + flyoutWidth + 10 ? offset : -offset}}\n flyout={}\n flyoutHeight={110}\n flyoutWidth={125}\n labelComponent={ datum.x} />}\n />\n }\n mouseFollowTooltips\n voronoiDimension=\"x\"\n voronoiPadding={50}\n />\n }\n legendData={legendData}\n legendPosition=\"bottom-left\"\n height={225}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50,\n }}\n maxDomain={{y: 9}}\n themeColor={ChartThemeColor.multiUnordered}\n width={650}\n >\n \n \n \n \n \n \n \n \n
\n );\n }\n}","title":"Embedded HTML","lang":"js"}}> + +

+ {`This demonstrates how to embed HTML within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.`} +

+ , + 'Data label': props => + (\n
\n \n \n \n \n }\n />\n }\n />\n }\n />\n }\n />\n \n \n
\n)","title":"Data label","lang":"js"}}> + +

+ {`This demonstrates an alternate way of applying tooltips using data labels.`} +

+ , + 'Legend': props => + (\n \n \n \n );\n\n // Custom legend component\n this.getLegend = (legendData) => (\n }\n />\n );\n }\n\n render() {\n return (\n
\n `${datum.x}: ${datum.y}`}\n legendComponent={this.getLegend([\n { name: 'Cats: 35' }, \n { name: 'Dogs: 55' }, \n { name: 'Birds: 10' }\n ])}\n legendPosition=\"bottom\"\n padding={{\n bottom: 65,\n left: 20,\n right: 20,\n top: 20\n }}\n themeColor={ChartThemeColor.multiOrdered}\n width={300}\n />\n
\n );\n }\n}","title":"Legend","lang":"js"}}> + +

+ {`This demonstrates an approach for applying tooltips to a legend using a custom label component.`} +

+ , + 'Left aligned': props => + \n `${datum.name}: ${datum.y}`} constrainToVisibleArea voronoiDimension=\"x\"/>}\n legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]}\n legendOrientation=\"vertical\"\n legendPosition=\"right\"\n height={250}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 50,\n left: 50,\n right: 200, // Adjusted to accommodate legend\n top: 50\n }}\n theme={this.myCustomTheme}\n width={600}\n >\n \n \n \n \n \n \n \n \n \n \n );\n }\n}","title":"Left aligned","lang":"js"}}> + +

+ {`This demonstrates how to customize tooltip label alignment using theme properties.`} +

+ , + 'CSS overflow': props => + (\n
\n
\n `${datum.name}: ${datum.y}`} />}\n height={100}\n maxDomain={{y: 9}}\n padding={0}\n themeColor={ChartThemeColor.green}\n width={400}\n >\n \n \n
\n \n \n \n
\n)","title":"CSS overflow","lang":"js"}}> + +

+ {`This demonstrates an alternate way of applying tooltips using CSS overflow instead of `} + {`constrainToVisibleArea`} + {`.`} +

+ , + 'Wrapped chart': props => + {\n this.setState({ isVisible: !this.state.isVisible });\n };\n }\n\n render() {\n const { isVisible } = this.state;\n\n return (\n
\n
\n My custom tooltip
} isVisible={isVisible} position={TooltipPosition.right} trigger=\"manual\">\n null}\n >\n null}\n subTitle=\"of 100 GBps\"\n title=\"45%\"\n />\n \n \n
\n
\n \n
\n \n );\n }\n}","title":"Wrapped chart","lang":"js"}}> + +

+ {`This demonstrates an alternate way of applying tooltips by wrapping charts with the Tooltip component.`} +

+ +}; + +const Component = () => ( + + + {`Introduction`} + +

+ {`Note: PatternFly React charts live in its own package at `} + + {`@patternfly/react-charts`} + + {`!`} +

+

+ {`PatternFly React charts are based on the `} + + {`Victory`} + + {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Voronoi container"])} + {React.createElement(pageData.examples["Combined cursor and voronoi containers"])} + {React.createElement(pageData.examples["Embedded legend"])} + {React.createElement(pageData.examples["Embedded HTML"])} + {React.createElement(pageData.examples["Data label"])} + {React.createElement(pageData.examples["Legend"])} + {React.createElement(pageData.examples["Left aligned"])} + {React.createElement(pageData.examples["CSS overflow"])} + {React.createElement(pageData.examples["Wrapped chart"])} + + {`Documentation`} + + + {`Tips`} + +
    +
  • + {`See Victory's `} + + {`FAQ`} + +
    • +
+ + {`Note`} + +

+ {`Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here:`} +

+
    +
  • + {`For `} + + {`ChartTooltip`} + + {` props, see `} + + {`VictoryTooltip`} + +
    • +
+ +); +Component.displayName = 'ChartsTooltipsReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/about-modal/react.js b/packages/react-docs/src/generated/components/about-modal/react.js new file mode 100644 index 00000000000..6e6e345757b --- /dev/null +++ b/packages/react-docs/src/generated/components/about-modal/react.js @@ -0,0 +1,142 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import brandImg from '../../../../../react-core/src/components/AboutModal/examples/./brandImg.svg'; +import bgImg from '../../../../../react-core/src/components/AboutModal/examples/./patternfly-orb.svg'; +const pageData = { + "id": "About modal", + "section": "components", + "source": "react", + "slug": "/components/about-modal/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/AboutModal/examples/AboutModal.md", + "propComponents": [ + { + "name": "AboutModal", + "description": "", + "props": [ + { + "name": "appendTo", + "type": "HTMLElement | (() => HTMLElement)", + "description": "The parent container to append the modal to. Defaults to document.body", + "defaultValue": "null" + }, + { + "name": "backgroundImageSrc", + "type": "string", + "description": "The URL of the image for the background", + "defaultValue": "''" + }, + { + "name": "brandImageAlt", + "type": "string", + "description": "The alternate text of the brand image", + "required": true + }, + { + "name": "brandImageSrc", + "type": "string", + "description": "The URL of the image for the brand", + "required": true + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the about modal", + "required": true + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the about modal", + "defaultValue": "''" + }, + { + "name": "closeButtonAriaLabel", + "type": "string", + "description": "Set aria label to the close button" + }, + { + "name": "disableFocusTrap", + "type": "boolean", + "description": "Flag to disable focus trap" + }, + { + "name": "isOpen", + "type": "boolean", + "description": "Flag to show the about modal", + "defaultValue": "false" + }, + { + "name": "noAboutModalBoxContentContainer", + "type": "boolean", + "description": "Prevents the about modal from rendering content inside a container; allows for more flexible layouts", + "defaultValue": "false" + }, + { + "name": "onClose", + "type": "() => void", + "description": "A callback for when the close button is clicked", + "defaultValue": "(): any => undefined" + }, + { + "name": "productName", + "type": "string", + "description": "Product name", + "defaultValue": "''" + }, + { + "name": "trademark", + "type": "string", + "description": "Trademark information", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-about-modal-box" + ], + "examples": [ + "Basic", + "Without product name", + "Complex user positioned content", + "Custom background image" + ] +}; +pageData.liveContext = { + brandImg, + bgImg +}; +pageData.examples = { + 'Basic': props => + {\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n\n const toggleModal = () => {\n setIsModalOpen(!isModalOpen);\n };\n\n return (\n \n \n \n \n \n CFME Version\n 5.5.3.4.20102789036450\n Cloudforms Version\n 4.1\n Server Name\n 40DemoMaster\n User Name\n Administrator\n User Role\n EvmRole-super_administrator\n Browser Version\n 601.2\n Browser OS\n Mac\n \n \n \n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Without product name': props => + {\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n\n const toggleModal = () => {\n setIsModalOpen(!isModalOpen);\n };\n\n return (\n \n \n \n \n \n CFME Version\n 5.5.3.4.20102789036450\n Cloudforms Version\n 4.1\n Server Name\n 40DemoMaster\n User Name\n Administrator\n User Role\n EvmRole-super_administrator\n Browser Version\n 601.2\n Browser OS\n Mac\n \n \n \n \n );\n};\n","title":"Without product name","lang":"ts"}}> + + , + 'Complex user positioned content': props => + {\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n\n const toggleModal = () => {\n setIsModalOpen(!isModalOpen);\n };\n\n return (\n \n \n \n \n

About

\n

Content here

\n \n \n \n \n CFME Version\n 5.5.3.4.20102789036450\n Cloudforms Version\n 4.1\n Server Name\n 40DemoMaster\n User Name\n Administrator\n User Role\n EvmRole-super_administrator\n Browser Version\n 601.2\n Browser OS\n Mac\n \n \n \n \n );\n};\n","title":"Complex user positioned content","lang":"ts"}}> + + , + 'Custom background image': props => + {\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n\n const toggleModal = () => {\n setIsModalOpen(!isModalOpen);\n };\n\n return (\n \n \n \n \n \n CFME Version\n 5.5.3.4.20102789036450\n \n \n \n \n );\n};\n","title":"Custom background image","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Without product name"])} + {React.createElement(pageData.examples["Complex user positioned content"])} + {React.createElement(pageData.examples["Custom background image"])} + +); +Component.displayName = 'ComponentsAboutModalReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/accordion/react.js b/packages/react-docs/src/generated/components/accordion/react.js new file mode 100644 index 00000000000..5c758982255 --- /dev/null +++ b/packages/react-docs/src/generated/components/accordion/react.js @@ -0,0 +1,218 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; +const pageData = { + "id": "Accordion", + "section": "components", + "source": "react", + "slug": "/components/accordion/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Accordion/examples/Accordion.md", + "propComponents": [ + { + "name": "Accordion", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the Accordion", + "defaultValue": "''" + }, + { + "name": "asDefinitionList", + "type": "boolean", + "description": "Flag to indicate whether use definition list or div", + "defaultValue": "true" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Accordion", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Accordion", + "defaultValue": "''" + }, + { + "name": "displaySize", + "type": "'default' | 'large'", + "description": "Display size variant.", + "defaultValue": "'default'" + }, + { + "name": "headingLevel", + "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "description": "Heading level to use", + "defaultValue": "'h3'" + }, + { + "name": "isBordered", + "type": "boolean", + "description": "Flag to indicate the accordion had a border", + "defaultValue": "false" + } + ] + }, + { + "name": "AccordionItem", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Accordion item", + "defaultValue": "null" + } + ] + }, + { + "name": "AccordionContent", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the Accordion content", + "defaultValue": "''" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Accordion", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Accordion content", + "defaultValue": "''" + }, + { + "name": "component", + "type": "React.ElementType", + "description": "Component to use as content container" + }, + { + "name": "id", + "type": "string", + "description": "Identify the AccordionContent item", + "defaultValue": "''" + }, + { + "name": "isCustomContent", + "type": "React.ReactNode", + "description": "Flag indicating content is custom. Expanded content Body wrapper will be removed from children. This allows multiple bodies to be rendered as content.", + "defaultValue": "false" + }, + { + "name": "isFixed", + "type": "boolean", + "description": "Flag to indicate Accordion content is fixed", + "defaultValue": "false" + }, + { + "name": "isHidden", + "type": "boolean", + "description": "Flag to show if the expanded content of the Accordion item is visible", + "defaultValue": "false" + } + ] + }, + { + "name": "AccordionToggle", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Accordion toggle", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Accordion Toggle", + "defaultValue": "''" + }, + { + "name": "component", + "type": "React.ElementType", + "description": "Container to override the default for toggle" + }, + { + "name": "id", + "type": "string", + "description": "Identify the Accordion toggle number", + "required": true + }, + { + "name": "isExpanded", + "type": "boolean", + "description": "Flag to show if the expanded content of the Accordion item is visible", + "defaultValue": "false" + } + ] + }, + { + "name": "AccordionExpandedContentBody", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the accordion content body", + "defaultValue": "null" + } + ] + } + ], + "cssPrefix": [ + "pf-c-accordion" + ], + "examples": [ + "Definition list", + "Single expand behavior", + "Fixed with multiple expand behavior", + "Bordered" + ] +}; +pageData.liveContext = { + ArrowRightIcon +}; +pageData.examples = { + 'Definition list': props => + {\n const [expanded, setExpanded] = React.useState('ex-toggle2');\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('');\n } else {\n setExpanded(id);\n }\n };\n\n return (\n \n \n {\n onToggle('ex-toggle1');\n }}\n isExpanded={expanded === 'ex-toggle1'}\n id=\"ex-toggle1\"\n >\n Item one\n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n\n \n {\n onToggle('ex-toggle2');\n }}\n isExpanded={expanded === 'ex-toggle2'}\n id=\"ex-toggle2\"\n >\n Item two\n \n \n

\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n ultrices, faucibus erat id, maximus nunc.\n

\n \n \n\n \n {\n onToggle('ex-toggle3');\n }}\n isExpanded={expanded === 'ex-toggle3'}\n id=\"ex-toggle3\"\n >\n Item three\n \n \n

Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

\n \n \n\n \n {\n onToggle('ex-toggle4');\n }}\n isExpanded={expanded === 'ex-toggle4'}\n id=\"ex-toggle4\"\n >\n Item four\n \n \n

\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n

\n \n \n\n \n {\n onToggle('ex-toggle5');\n }}\n isExpanded={expanded === 'ex-toggle5'}\n id=\"ex-toggle5\"\n >\n Item five\n \n \n

Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

\n \n \n \n );\n};\n","title":"Definition list","lang":"ts"}}> + + , + 'Single expand behavior': props => + {\n const [expanded, setExpanded] = React.useState('ex-toggle2');\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('');\n } else {\n setExpanded(id);\n }\n };\n\n return (\n \n \n {\n onToggle('ex-toggle1');\n }}\n isExpanded={expanded === 'ex-toggle1'}\n id=\"ex-toggle1\"\n >\n Item one\n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n\n \n {\n onToggle('ex-toggle2');\n }}\n isExpanded={expanded === 'ex-toggle2'}\n id=\"ex-toggle2\"\n >\n Item two\n \n \n

\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n ultrices, faucibus erat id, maximus nunc.\n

\n \n \n\n \n {\n onToggle('ex-toggle3');\n }}\n isExpanded={expanded === 'ex-toggle3'}\n id=\"ex-toggle3\"\n >\n Item three\n \n \n

Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

\n \n \n\n \n {\n onToggle('ex-toggle4');\n }}\n isExpanded={expanded === 'ex-toggle4'}\n id=\"ex-toggle4\"\n >\n Item four\n \n \n

\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n

\n \n \n\n \n {\n onToggle('ex-toggle5');\n }}\n isExpanded={expanded === 'ex-toggle5'}\n id=\"ex-toggle5\"\n >\n Item five\n \n \n

Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

\n \n \n \n );\n};\n","title":"Single expand behavior","lang":"ts"}}> + + , + 'Fixed with multiple expand behavior': props => + {\n const [expanded, setExpanded] = React.useState(['ex2-toggle4']);\n\n const toggle = id => {\n const index = expanded.indexOf(id);\n const newExpanded: string[] =\n index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];\n setExpanded(newExpanded);\n };\n\n return (\n \n \n toggle('ex2-toggle1')}\n isExpanded={expanded.includes('ex2-toggle1')}\n id=\"ex2-toggle1\"\n >\n Item one\n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n \n toggle('ex2-toggle2')}\n isExpanded={expanded.includes('ex2-toggle2')}\n id=\"ex2-toggle2\"\n >\n Item two\n \n \n

\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n ultrices, faucibus erat id, maximus nunc.\n

\n \n \n \n toggle('ex2-toggle3')}\n isExpanded={expanded.includes('ex2-toggle3')}\n id=\"ex2-toggle3\"\n >\n Item three\n \n \n

Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

\n \n \n \n toggle('ex2-toggle4')}\n isExpanded={expanded.includes('ex2-toggle4')}\n id=\"ex2-toggle4\"\n >\n Item four\n \n \n

\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n

\n \n \n \n toggle('ex2-toggle5')}\n isExpanded={expanded.includes('ex2-toggle5')}\n id=\"ex2-toggle5\"\n >\n Item five\n \n \n

Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

\n \n \n \n );\n};\n","title":"Fixed with multiple expand behavior","lang":"ts"}}> + + , + 'Bordered': props => + {\n const [expanded, setExpanded] = React.useState('ex-toggle4');\n const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);\n\n const displaySize = isDisplayLarge ? 'large' : 'default';\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('');\n } else {\n setExpanded(id);\n }\n };\n\n return (\n <>\n \n \n {\n onToggle('ex-toggle1');\n }}\n isExpanded={expanded === 'ex-toggle1'}\n id=\"ex-toggle1\"\n >\n Item one\n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n\n \n {\n onToggle('ex-toggle2');\n }}\n isExpanded={expanded === 'ex-toggle2'}\n id=\"ex-toggle2\"\n >\n Item two\n \n \n

\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n ultrices, faucibus erat id, maximus nunc.\n

\n \n \n\n \n {\n onToggle('ex-toggle3');\n }}\n isExpanded={expanded === 'ex-toggle3'}\n id=\"ex-toggle3\"\n >\n Item three\n \n \n

Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

\n \n \n\n \n {\n onToggle('ex-toggle4');\n }}\n isExpanded={expanded === 'ex-toggle4'}\n id=\"ex-toggle4\"\n >\n Item four\n \n \n \n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices\n posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper\n eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,\n pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.\n Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n \n \n \n \n \n \n \n {\n onToggle('ex-toggle5');\n }}\n isExpanded={expanded === 'ex-toggle5'}\n id=\"ex-toggle5\"\n >\n Item five\n \n \n

Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

\n \n \n \n
\n \n
\n \n );\n};\n","title":"Bordered","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Definition list"])} + {React.createElement(pageData.examples["Single expand behavior"])} + {React.createElement(pageData.examples["Fixed with multiple expand behavior"])} + {React.createElement(pageData.examples["Bordered"])} + +); +Component.displayName = 'ComponentsAccordionReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/action-list/react.js b/packages/react-docs/src/generated/components/action-list/react.js new file mode 100644 index 00000000000..2398921d510 --- /dev/null +++ b/packages/react-docs/src/generated/components/action-list/react.js @@ -0,0 +1,116 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'; +import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'; +const pageData = { + "id": "Action list", + "section": "components", + "source": "react", + "slug": "/components/action-list/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ActionList/examples/ActionList.md", + "propComponents": [ + { + "name": "ActionList", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Children of the action list" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the action list", + "defaultValue": "''" + }, + { + "name": "isIconList", + "type": "boolean", + "description": "Flag indicating the action list contains multiple icons and item padding should be removed" + } + ] + }, + { + "name": "ActionListGroup", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Children of the action list group" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the action list group", + "defaultValue": "''" + } + ] + }, + { + "name": "ActionListItem", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Children of the action list item" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the action list item", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-action-list" + ], + "examples": [ + "Action list single group", + "Action list with icons", + "Action list multiple groups", + "Action list with cancel button" + ] +}; +pageData.liveContext = { + TimesIcon, + CheckIcon +}; +pageData.examples = { + 'Action list single group': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (\n isOpen: boolean,\n event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent\n ) => {\n event.stopPropagation();\n setIsOpen(isOpen);\n };\n\n const onSelect = (event: React.SyntheticEvent) => {\n event.stopPropagation();\n setIsOpen(!isOpen);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n\n return (\n \n \n \n \n \n \n \n \n \n
\n With kebab\n \n \n \n \n \n \n \n \n }\n isOpen={isOpen}\n isPlain\n dropdownItems={dropdownItems}\n position=\"right\"\n />\n \n \n \n );\n};\n","title":"Action list single group","lang":"ts"}}> + + , + 'Action list with icons': props => + (\n \n \n \n \n \n \n \n \n);\n","title":"Action list with icons","lang":"ts"}}> + + , + 'Action list multiple groups': props => + (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n","title":"Action list multiple groups","lang":"ts"}}> + + , + 'Action list with cancel button': props => + (\n \n In modals, forms, data lists\n \n \n \n \n \n \n \n \n
\n In wizards\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n","title":"Action list with cancel button","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Action list single group"])} + {React.createElement(pageData.examples["Action list with icons"])} + {React.createElement(pageData.examples["Action list multiple groups"])} + {React.createElement(pageData.examples["Action list with cancel button"])} + +); +Component.displayName = 'ComponentsActionListReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/alert-group/react.js b/packages/react-docs/src/generated/components/alert-group/react.js new file mode 100644 index 00000000000..c3648bb6248 --- /dev/null +++ b/packages/react-docs/src/generated/components/alert-group/react.js @@ -0,0 +1,338 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Alert group", + "section": "components", + "source": "react", + "slug": "/components/alert-group/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/AlertGroup/examples/AlertGroup.md", + "propComponents": [ + { + "name": "Alert", + "description": "", + "props": [ + { + "name": "actionClose", + "type": "React.ReactNode", + "description": "Close button; use the alertActionCloseButton component" + }, + { + "name": "actionLinks", + "type": "React.ReactNode", + "description": "Action links; use a single alertActionLink component or multiple wrapped in an array or React.Fragment" + }, + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the alert", + "defaultValue": "`${capitalize(variant)} Alert`" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the alert", + "defaultValue": "''" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the alert", + "defaultValue": "''" + }, + { + "name": "customIcon", + "type": "React.ReactNode", + "description": "Set a custom icon to the alert. If not set the icon is set according to the variant" + }, + { + "name": "isExpandable", + "type": "boolean", + "description": "Flag indicating that the alert is expandable", + "defaultValue": "false" + }, + { + "name": "isInline", + "type": "boolean", + "description": "Flag to indicate if the alert is inline", + "defaultValue": "false" + }, + { + "name": "isLiveRegion", + "type": "boolean", + "description": "Flag to indicate if the alert is in a live region", + "defaultValue": "false" + }, + { + "name": "isPlain", + "type": "boolean", + "description": "Flag to indicate if the alert is plain", + "defaultValue": "false" + }, + { + "name": "onMouseEnter", + "type": "No type info", + "defaultValue": "() => {}" + }, + { + "name": "onMouseLeave", + "type": "No type info", + "defaultValue": "() => {}" + }, + { + "name": "onTimeout", + "type": "() => void", + "description": "Function to be executed on alert timeout. Relevant when the timeout prop is set", + "defaultValue": "() => {}" + }, + { + "name": "ouiaSafe", + "type": "No type info", + "defaultValue": "true" + }, + { + "name": "timeout", + "type": "number | boolean", + "description": "If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds.", + "defaultValue": "false" + }, + { + "name": "timeoutAnimation", + "type": "number", + "description": "If the user hovers over the alert and `timeout` expires, this is how long to wait before finally dismissing the alert", + "defaultValue": "3000" + }, + { + "name": "title", + "type": "React.ReactNode", + "description": "Title of the alert", + "required": true + }, + { + "name": "titleHeadingLevel", + "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "description": "Sets the heading level to use for the alert title. Default is h4.", + "defaultValue": "'h4'" + }, + { + "name": "toggleAriaLabel", + "type": "string", + "description": "Adds accessible text to the alert Toggle", + "defaultValue": "`${capitalize(variant)} alert details`" + }, + { + "name": "tooltipPosition", + "type": "TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'", + "description": "Position of the tooltip which is displayed if text is truncated" + }, + { + "name": "truncateTitle", + "type": "number", + "description": "Truncate title to number of lines", + "defaultValue": "0" + }, + { + "name": "variant", + "type": "'success' | 'danger' | 'warning' | 'info' | 'default'", + "description": "Adds alert variant styles", + "defaultValue": "AlertVariant.default" + }, + { + "name": "variantLabel", + "type": "string", + "description": "Variant label text for screen readers", + "defaultValue": "`${capitalize(variant)} alert:`" + } + ] + }, + { + "name": "AlertGroup", + "description": "", + "props": [ + { + "name": "appendTo", + "type": "HTMLElement | (() => HTMLElement)", + "description": "Determine where the alert is appended to" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Alerts to be rendered in the AlertGroup" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the AlertGroup" + }, + { + "name": "isLiveRegion", + "type": "boolean", + "description": "Turns the container into a live region so that changes to content within the AlertGroup, such as appending an Alert, are reliably announced to assistive technology." + }, + { + "name": "isToast", + "type": "boolean", + "description": "Toast notifications are positioned at the top right corner of the viewport" + }, + { + "name": "onOverflowClick", + "type": "() => void", + "description": "Function to call if user clicks on overflow message" + }, + { + "name": "overflowMessage", + "type": "string", + "description": "Custom text to show for the overflow message" + } + ] + }, + { + "name": "AlertActionCloseButton", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Aria Label for the Close button", + "defaultValue": "''" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the AlertActionCloseButton", + "defaultValue": "''" + }, + { + "name": "onClose", + "type": "() => void", + "description": "A callback for when the close button is clicked", + "defaultValue": "() => undefined as any" + }, + { + "name": "variantLabel", + "type": "string", + "description": "Variant Label for the Close button" + } + ] + }, + { + "name": "AlertActionLink", + "description": "", + "props": [ + { + "name": "children", + "type": "string", + "description": "Content rendered inside the AlertLinkAction" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the AlertActionLink", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-alert-group" + ], + "examples": [ + "Static alert group", + "Toast alert group", + "Toast alert group with overflow capture", + "Singular dynamic alert group", + "Singular dynamic alert group with overflow message", + "Multiple dynamic alert group", + "Async alert group" + ] +}; +pageData.examples = { + 'Static alert group': props => + (\n \n \n \n \n \n \n);\n","title":"Static alert group","lang":"ts"}}> + +

+ {`These alerts appear on page load and are discoverable from within the normal page content flow, and will not be announced individually/explicitly to assistive technology.`} +

+ , + 'Toast alert group': props => + {\n const [alerts, setAlerts] = React.useState[]>([]);\n\n const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {\n setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);\n };\n\n const removeAlert = (key: React.Key) => {\n setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);\n };\n\n const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');\n\n const getUniqueId = () => new Date().getTime();\n\n const addSuccessAlert = () => {\n addAlert('Toast success alert', 'success', getUniqueId());\n };\n\n const addDangerAlert = () => {\n addAlert('Toast danger alert', 'danger', getUniqueId());\n };\n\n const addInfoAlert = () => {\n addAlert('Toast info alert', 'info', getUniqueId());\n };\n\n return (\n \n \n \n \n \n \n \n {alerts.map(({ key, variant, title }) => (\n removeAlert(key)}\n />\n }\n key={key}\n />\n ))}\n \n \n );\n};\n","title":"Toast alert group","lang":"ts"}}> + +

+ {`Alerts asynchronously appended into dynamic AlertGroups with `} + + + {`isLiveRegion`} + + {` will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced.`} +

+ , + 'Toast alert group with overflow capture': props => + {\n const [alerts, setAlerts] = React.useState[]>([]);\n const [overflowMessage, setOverflowMessage] = React.useState('');\n\n const maxDisplayed = 4;\n\n const getOverflowMessage = (alertsNumber: number) => {\n const overflow = alertsNumber - maxDisplayed;\n if (overflow > 0) {\n return `View ${overflow} more alerts`;\n }\n return '';\n };\n\n const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {\n setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);\n setOverflowMessage(getOverflowMessage(alerts.length + 1));\n };\n\n const removeAlert = (key: React.Key) => {\n const newAlerts = alerts.filter(alert => alert.key !== key);\n setAlerts(newAlerts);\n setOverflowMessage(getOverflowMessage(newAlerts.length));\n };\n\n const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');\n\n const getUniqueId = () => new Date().getTime();\n\n const addSuccessAlert = () => {\n addAlert('Toast success alert', 'success', getUniqueId());\n };\n\n const addDangerAlert = () => {\n addAlert('Toast danger alert', 'danger', getUniqueId());\n };\n\n const addInfoAlert = () => {\n addAlert('Toast info alert', 'info', getUniqueId());\n };\n\n const onOverflowClick = () => {\n // eslint-disable-next-line no-console\n console.log('Overflow message clicked');\n };\n\n return (\n \n \n \n \n \n \n \n {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (\n removeAlert(key)}\n />\n }\n key={key}\n />\n ))}\n \n \n );\n};\n","title":"Toast alert group with overflow capture","lang":"ts","isBeta":true}}> + +

+ {`After a specified number of alerts displayed is reached, we will see an overflow message instead of new alerts. Alerts asynchronously appended into dynamic AlertGroups with `} + + + {`isLiveRegion`} + + {` will be announced to assistive technology at the moment the change happens. When the overflow message appears or is updated in AlertGroups with `} + + + {`isLiveRegion`} + + {`, the `} + + + {`View 1 more alert`} + + {` text will be read, but the alert message will not be read. screen reader user or keyboard user will need a way to navigate to and reveal the hidden alerts before they disappear. Alternatively, there should be a place that notifications or alerts are collected to be viewed or read later. In this example we are showing a max of 4 alerts.`} +

+ , + 'Singular dynamic alert group': props => + {\n const [alerts, setAlerts] = React.useState[]>([]);\n\n const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {\n setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);\n };\n\n const removeAlert = (key: React.Key) => {\n setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);\n };\n\n const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');\n\n const getUniqueId = () => new Date().getTime();\n\n const addSuccessAlert = () => {\n addAlert('Toast success alert', 'success', getUniqueId());\n };\n\n const addDangerAlert = () => {\n addAlert('Toast danger alert', 'danger', getUniqueId());\n };\n\n const addInfoAlert = () => {\n addAlert('Toast info alert', 'info', getUniqueId());\n };\n\n return (\n \n \n \n \n \n \n \n {alerts.map(({ title, variant, key }) => (\n removeAlert(key)}\n />\n }\n />\n ))}\n \n \n );\n};\n","title":"Singular dynamic alert group","lang":"ts"}}> + +

+ {`This alert will appear in the page, most likely in response to a user action.`} +

+ , + 'Singular dynamic alert group with overflow message': props => + {\n const [alerts, setAlerts] = React.useState[]>([]);\n const [overflowMessage, setOverflowMessage] = React.useState('');\n\n const maxDisplayed = 4;\n\n const getOverflowMessage = (alertsNumber: number) => {\n const overflow = alertsNumber - maxDisplayed;\n if (overflow > 0) {\n return `View ${overflow} more alerts`;\n }\n return '';\n };\n\n const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {\n setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);\n setOverflowMessage(getOverflowMessage(alerts.length + 1));\n };\n\n const removeAlert = (key: React.Key) => {\n const newAlerts = alerts.filter(alert => alert.key !== key);\n setAlerts(newAlerts);\n setOverflowMessage(getOverflowMessage(newAlerts.length));\n };\n\n const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');\n\n const getUniqueId = () => new Date().getTime();\n\n const addSuccessAlert = () => {\n addAlert('Toast success alert', 'success', getUniqueId());\n };\n\n const addDangerAlert = () => {\n addAlert('Toast danger alert', 'danger', getUniqueId());\n };\n\n const addInfoAlert = () => {\n addAlert('Toast info alert', 'info', getUniqueId());\n };\n\n const onOverflowClick = () => {\n // eslint-disable-next-line no-console\n console.log('Overflow message clicked');\n };\n\n return (\n \n \n \n \n \n \n \n {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (\n removeAlert(key)}\n />\n }\n key={key}\n />\n ))}\n \n \n );\n};\n","title":"Singular dynamic alert group with overflow message","lang":"ts","isBeta":true}}> + +

+ {`This alert will appear in the page, most likely in response to a user action. In this example we are showing a max of 4 alerts.`} +

+ , + 'Multiple dynamic alert group': props => + {\n const [alerts, setAlerts] = React.useState[]>([]);\n\n const addAlerts = (incomingAlerts: Partial[]) => {\n setAlerts(prevAlerts => [...prevAlerts, ...incomingAlerts]);\n };\n\n const removeAlert = (key: React.Key) => {\n setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);\n };\n\n const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');\n\n const getUniqueId = () => String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();\n\n const addAlertCollection = () => {\n addAlerts([\n { title: 'First alert notification.', variant: 'success', key: getUniqueId() },\n { title: 'Second alert notification.', variant: 'warning', key: getUniqueId() },\n { title: 'Third alert notification.', variant: 'danger', key: getUniqueId() }\n ]);\n };\n\n return (\n \n \n \n \n \n {alerts.map(({ title, variant, key }) => (\n removeAlert(key)}\n />\n }\n />\n ))}\n \n \n );\n};\n","title":"Multiple dynamic alert group","lang":"ts"}}> + +

+ {`These alerts will appear in the page, most likely in response to a user action.`} +

+ , + 'Async alert group': props => + {\n const [alerts, setAlerts] = React.useState[]>([]);\n const [isRunning, setIsRunning] = React.useState(false);\n\n const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');\n\n const getUniqueId = () => new Date().getTime();\n\n const addAlert = () => {\n setAlerts(prevAlerts => [\n ...prevAlerts,\n {\n title: `Async notification ${prevAlerts.length + 1} was added to the queue.`,\n variant: 'danger',\n key: getUniqueId()\n }\n ]);\n };\n\n const removeAlert = (key: React.Key) => {\n setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);\n };\n\n const startAsyncAlerts = () => {\n setIsRunning(true);\n };\n\n const stopAsyncAlerts = () => {\n setIsRunning(false);\n };\n\n useInterval(addAlert, isRunning ? 4500 : null);\n\n return (\n \n \n \n \n \n \n {alerts.map(({ title, variant, key }) => (\n removeAlert(key)}\n />\n }\n />\n ))}\n \n \n );\n};\n","title":"Async alert group","lang":"ts"}}> + +

+ {`This shows how an alert could be triggered by an asynchronous event in the application. Note how you can customize how the alert will be announced to assistive technology. See the alert group accessibility tab for more information.`} +

+ +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Static alert group"])} + {React.createElement(pageData.examples["Toast alert group"])} + {React.createElement(pageData.examples["Toast alert group with overflow capture"])} + {React.createElement(pageData.examples["Singular dynamic alert group"])} + {React.createElement(pageData.examples["Singular dynamic alert group with overflow message"])} + {React.createElement(pageData.examples["Multiple dynamic alert group"])} + {React.createElement(pageData.examples["Async alert group"])} + +); +Component.displayName = 'ComponentsAlertGroupReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/alert/react.js b/packages/react-docs/src/generated/components/alert/react.js new file mode 100644 index 00000000000..71c2c6473a6 --- /dev/null +++ b/packages/react-docs/src/generated/components/alert/react.js @@ -0,0 +1,316 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import '../../../../../react-core/src/components/Alert/examples/./alert.css'; +import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; +import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; +import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; +import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon'; +import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; +const pageData = { + "id": "Alert", + "section": "components", + "source": "react", + "slug": "/components/alert/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Alert/examples/Alert.md", + "propComponents": [ + { + "name": "Alert", + "description": "", + "props": [ + { + "name": "actionClose", + "type": "React.ReactNode", + "description": "Close button; use the alertActionCloseButton component" + }, + { + "name": "actionLinks", + "type": "React.ReactNode", + "description": "Action links; use a single alertActionLink component or multiple wrapped in an array or React.Fragment" + }, + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the alert", + "defaultValue": "`${capitalize(variant)} Alert`" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the alert", + "defaultValue": "''" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the alert", + "defaultValue": "''" + }, + { + "name": "customIcon", + "type": "React.ReactNode", + "description": "Set a custom icon to the alert. If not set the icon is set according to the variant" + }, + { + "name": "isExpandable", + "type": "boolean", + "description": "Flag indicating that the alert is expandable", + "defaultValue": "false" + }, + { + "name": "isInline", + "type": "boolean", + "description": "Flag to indicate if the alert is inline", + "defaultValue": "false" + }, + { + "name": "isLiveRegion", + "type": "boolean", + "description": "Flag to indicate if the alert is in a live region", + "defaultValue": "false" + }, + { + "name": "isPlain", + "type": "boolean", + "description": "Flag to indicate if the alert is plain", + "defaultValue": "false" + }, + { + "name": "onMouseEnter", + "type": "No type info", + "defaultValue": "() => {}" + }, + { + "name": "onMouseLeave", + "type": "No type info", + "defaultValue": "() => {}" + }, + { + "name": "onTimeout", + "type": "() => void", + "description": "Function to be executed on alert timeout. Relevant when the timeout prop is set", + "defaultValue": "() => {}" + }, + { + "name": "ouiaSafe", + "type": "No type info", + "defaultValue": "true" + }, + { + "name": "timeout", + "type": "number | boolean", + "description": "If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds.", + "defaultValue": "false" + }, + { + "name": "timeoutAnimation", + "type": "number", + "description": "If the user hovers over the alert and `timeout` expires, this is how long to wait before finally dismissing the alert", + "defaultValue": "3000" + }, + { + "name": "title", + "type": "React.ReactNode", + "description": "Title of the alert", + "required": true + }, + { + "name": "titleHeadingLevel", + "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "description": "Sets the heading level to use for the alert title. Default is h4.", + "defaultValue": "'h4'" + }, + { + "name": "toggleAriaLabel", + "type": "string", + "description": "Adds accessible text to the alert Toggle", + "defaultValue": "`${capitalize(variant)} alert details`" + }, + { + "name": "tooltipPosition", + "type": "TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'", + "description": "Position of the tooltip which is displayed if text is truncated" + }, + { + "name": "truncateTitle", + "type": "number", + "description": "Truncate title to number of lines", + "defaultValue": "0" + }, + { + "name": "variant", + "type": "'success' | 'danger' | 'warning' | 'info' | 'default'", + "description": "Adds alert variant styles", + "defaultValue": "AlertVariant.default" + }, + { + "name": "variantLabel", + "type": "string", + "description": "Variant label text for screen readers", + "defaultValue": "`${capitalize(variant)} alert:`" + } + ] + }, + { + "name": "AlertActionCloseButton", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Aria Label for the Close button", + "defaultValue": "''" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the AlertActionCloseButton", + "defaultValue": "''" + }, + { + "name": "onClose", + "type": "() => void", + "description": "A callback for when the close button is clicked", + "defaultValue": "() => undefined as any" + }, + { + "name": "variantLabel", + "type": "string", + "description": "Variant Label for the Close button" + } + ] + }, + { + "name": "AlertActionLink", + "description": "", + "props": [ + { + "name": "children", + "type": "string", + "description": "Content rendered inside the AlertLinkAction" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the AlertActionLink", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-alert" + ], + "examples": [ + "Types", + "Variations", + "Inline types", + "Inline variations", + "Inline plain types", + "Inline plain variations", + "Expandable", + "Static live region alert", + "Dynamic live region alert", + "Async live region alert", + "Alert timeout", + "Truncate", + "Custom icons" + ] +}; +pageData.liveContext = { + UsersIcon, + BoxIcon, + DatabaseIcon, + ServerIcon, + LaptopIcon +}; +pageData.examples = { + 'Types': props => + (\n \n \n \n \n \n \n \n)","title":"Types","lang":"ts"}}> + + , + 'Variations': props => + (\n \n alert('Clicked the close button')} />}\n actionLinks={\n \n alert('Clicked on View details')}>View details\n alert('Clicked on Ignore')}>Ignore\n \n }\n >\n

Success alert description. This should tell the user more information about the alert.

\n \n alert('Clicked the close button')} />}>\n

\n Success alert description. This should tell the user more information about the alert.{' '}\n This is a link.\n

\n \n alert('Clicked the close button')} />}\n actionLinks={\n \n alert('Clicked on View details')}>View details\n alert('Clicked on Ignore')}>Ignore\n \n }\n />\n alert('Clicked the close button')} />} />\n \n \n \n)","title":"Variations","lang":"ts"}}> + + , + 'Inline types': props => + (\n \n \n \n \n \n \n \n)","title":"Inline types","lang":"ts"}}> + + , + 'Inline variations': props => + (\n \n alert('Clicked the close button')} />}\n actionLinks={\n \n alert('Clicked on View details')}>View details\n alert('Clicked on Ignore')}>Ignore\n \n }\n >\n

Success alert description. This should tell the user more information about the alert.

\n \n alert('Clicked the close button')} />}>\n

\n Success alert description. This should tell the user more information about the alert.{' '}\n This is a link.\n

\n \n alert('Clicked the close button')} />}\n actionLinks={\n \n alert('Clicked on View details')}>View details\n alert('Clicked on Ignore')}>Ignore\n \n }\n />\n alert('Clicked the close button')} />}\n />\n \n \n)","title":"Inline variations","lang":"ts"}}> + + , + 'Inline plain types': props => + (\n \n \n \n \n \n \n \n)","title":"Inline plain types","lang":"ts"}}> + + , + 'Inline plain variations': props => + (\n \n

Success alert description. This should tell the user more information about the alert.

\n \n)","title":"Inline plain variations","lang":"ts"}}> + +

+ {`It is not recommended to use an inline plain alert with actionClose nor actionLinks.`} +

+ , + 'Expandable': props => + (\n \n alert('Clicked the close button')} />}\n actionLinks={\n \n alert('Clicked on View details')}>View details\n alert('Clicked on Ignore')}>Ignore\n \n }\n >\n

Success alert description. This should tell the user more information about the alert.

\n \n alert('Clicked the close button')} />}\n actionLinks={\n \n alert('Clicked on View details')}>View details\n alert('Clicked on Ignore')}>Ignore\n \n } \n >\n

Success alert description. This should tell the user more information about the alert.

\n \n \n)","title":"Expandable","lang":"ts"}}> + +

+ {`It is not recommended to use an expandable alert within a toast Alert group. In such a case, the Alert could timeout before users would have time to interact and view the entire Alert.`} +

+ , + 'Static live region alert': props => + (\n \n alert('Clicked the close button')} />}\n >\n This alert uses the recommended isLiveRegion prop to automatically set ARIA attributes and CSS classes.\n \n alert('Clicked the close button')} />}\n >\n You can alternatively omit the isLiveRegion prop to specify ARIA attributes and CSS manually on\n the containing element.\n \n \n)","title":"Static live region alert","lang":"ts"}}> + + , + 'Dynamic live region alert': props => + {\n const [alerts, setAlerts] = React.useState([]);\n const getUniqueId: () => number = () => new Date().getTime();\n const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');\n\n const addAlert = (alertInfo: AlertInfo) => {\n setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);\n };\n\n const addSuccessAlert = () => {\n addAlert({\n title: 'Single success alert',\n variant: AlertVariant.success,\n key: getUniqueId()\n });\n };\n const addInfoAlert = () => {\n addAlert({\n title: 'Single info alert',\n variant: AlertVariant.info,\n key: getUniqueId()\n });\n };\n const addDangerAlert = () => {\n addAlert({\n title: 'Single danger alert',\n variant: AlertVariant.danger,\n key: getUniqueId()\n });\n };\n\n return (\n \n \n \n \n \n \n \n {alerts.map(({ title, variant, key }) => (\n \n ))}\n \n \n );\n};\n","title":"Dynamic live region alert","lang":"ts"}}> + +

+ {`Alerts asynchronously appended into dynamic AlertGroups with isLiveRegion will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced.`} +

+ , + 'Async live region alert': props => + {\n const [alerts, setAlerts] = React.useState([]);\n const [isActive, setIsActive] = React.useState(false);\n const getUniqueId: () => number = () => new Date().getTime();\n\n const addAlert = (alertInfo: AlertInfo) => {\n setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);\n };\n\n React.useEffect(() => {\n let timer = null;\n if (isActive) {\n timer = setInterval(() => {\n addAlert({\n title: `Async alert number ${alerts.length + 1}`,\n variant: AlertVariant.info,\n key: getUniqueId()\n });\n }, 4500);\n } else {\n clearInterval(timer);\n }\n\n return () => {\n clearInterval(timer);\n };\n }, [isActive, alerts]);\n\n return (\n \n \n setIsActive(true)}\n />\n setIsActive(false)}\n />\n \n \n {alerts.map(({ title, variant, key }) => (\n \n ))}\n \n \n );\n};\n","title":"Async live region alert","lang":"ts"}}> + +

+ {`This shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the alert accessibility tab for more information.`} +

+ , + 'Alert timeout': props => + {\n const [alerts, setAlerts] = React.useState([]);\n const onClick = () => {\n const timeout = 8000;\n setAlerts(prevAlerts => {\n return [...prevAlerts,\n \n View details\n Ignore\n \n }>\n This alert will dismiss after {`${timeout / 1000} seconds`}\n \n ]\n });\n }\n\n return (\n \n \n \n \n {alerts}\n \n \n );\n};","title":"Alert timeout","lang":"ts"}}> + + , + 'Truncate': props => + (\n \n \n \n \n \n)","title":"Truncate","lang":"ts"}}> + + , + 'Custom icons': props => + (\n \n } title=\"Default alert title\" />\n } variant=\"info\" title=\"Info alert title\" />\n } variant=\"success\" title=\"Success alert title\" />\n } variant=\"warning\" title=\"Warning alert title\" />\n } variant=\"danger\" title=\"Danger alert title\" />\n \n)","title":"Custom icons","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Types"])} + {React.createElement(pageData.examples["Variations"])} + {React.createElement(pageData.examples["Inline types"])} + {React.createElement(pageData.examples["Inline variations"])} + {React.createElement(pageData.examples["Inline plain types"])} + {React.createElement(pageData.examples["Inline plain variations"])} + {React.createElement(pageData.examples["Expandable"])} + {React.createElement(pageData.examples["Static live region alert"])} + {React.createElement(pageData.examples["Dynamic live region alert"])} + {React.createElement(pageData.examples["Async live region alert"])} + {React.createElement(pageData.examples["Alert timeout"])} + {React.createElement(pageData.examples["Truncate"])} + {React.createElement(pageData.examples["Custom icons"])} + +); +Component.displayName = 'ComponentsAlertReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/application-launcher/react.js b/packages/react-docs/src/generated/components/application-launcher/react.js new file mode 100644 index 00000000000..ab6ed269fe9 --- /dev/null +++ b/packages/react-docs/src/generated/components/application-launcher/react.js @@ -0,0 +1,326 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import { Link } from '@reach/router'; +import pfLogoSm from '../../../../../react-core/src/components/ApplicationLauncher/examples/./pf-logo-small.svg'; +const pageData = { + "id": "Application launcher", + "section": "components", + "source": "react", + "slug": "/components/application-launcher/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md", + "propComponents": [ + { + "name": "ApplicationLauncher", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the button. Required for plain buttons", + "defaultValue": "'Application launcher'" + }, + { + "name": "className", + "type": "string", + "description": "Additional element css classes", + "defaultValue": "''" + }, + { + "name": "direction", + "type": "DropdownDirection | 'up' | 'down'", + "description": "Display menu above or below dropdown toggle", + "defaultValue": "DropdownDirection.down" + }, + { + "name": "favorites", + "type": "string[]", + "description": "ID list of favorited ApplicationLauncherItems", + "defaultValue": "[]" + }, + { + "name": "favoritesLabel", + "type": "string", + "description": "Label for the favorites group", + "defaultValue": "'Favorites'" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Render Application launcher toggle as disabled icon", + "defaultValue": "false" + }, + { + "name": "isGrouped", + "type": "boolean", + "description": "Flag to indicate if application launcher has groups", + "defaultValue": "false" + }, + { + "name": "isOpen", + "type": "boolean", + "description": "open bool", + "defaultValue": "false" + }, + { + "name": "items", + "type": "React.ReactNode[]", + "description": "Array of application launcher items" + }, + { + "name": "menuAppendTo", + "type": "HTMLElement | (() => HTMLElement) | 'inline' | 'parent'", + "description": "The container to append the menu to. Defaults to 'inline'.\nIf your menu is being cut off you can append it to an element higher up the DOM tree.\nSome examples:\nmenuAppendTo=\"parent\"\nmenuAppendTo={() => document.body}\nmenuAppendTo={document.getElementById('target')}", + "defaultValue": "'inline'" + }, + { + "name": "onFavorite", + "type": "(itemId: string, isFavorite: boolean) => void", + "description": "Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked" + }, + { + "name": "onSearch", + "type": "(textInput: string) => void", + "description": "Enables search. Callback called when text input is entered into search box" + }, + { + "name": "onSelect", + "type": "(event: any) => void", + "description": "Function callback called when user selects item", + "defaultValue": "(_event: any): any => undefined" + }, + { + "name": "onToggle", + "type": "(value: boolean) => void", + "description": "Callback called when application launcher toggle is clicked", + "defaultValue": "(_value: boolean): any => undefined" + }, + { + "name": "position", + "type": "DropdownPosition | 'right' | 'left'", + "description": "Indicates where menu will be alligned horizontally", + "defaultValue": "DropdownPosition.left" + }, + { + "name": "searchNoResultsText", + "type": "string", + "description": "Text for search input when no results are found", + "defaultValue": "'No results found'" + }, + { + "name": "searchPlaceholderText", + "type": "string", + "description": "Placeholder text for search input", + "defaultValue": "'Filter by name...'" + }, + { + "name": "searchProps", + "type": "any", + "description": "Additional properties for search input" + }, + { + "name": "toggleIcon", + "type": "React.ReactNode", + "description": "Toggle Icon, optional to override the icon used for the toggle", + "defaultValue": "" + }, + { + "name": "toggleId", + "type": "string", + "description": "ID of toggle" + } + ] + }, + { + "name": "ApplicationLauncherItem", + "description": "", + "props": [ + { + "name": "ariaIsFavoriteLabel", + "type": "string", + "description": "Aria label text for favoritable button when favorited", + "defaultValue": "'starred'" + }, + { + "name": "ariaIsNotFavoriteLabel", + "type": "string", + "description": "Aria label text for favoritable button when not favorited", + "defaultValue": "'not starred'" + }, + { + "name": "className", + "type": "No type info", + "defaultValue": "''" + }, + { + "name": "component", + "type": "React.ReactNode", + "description": "A ReactElement to render, or a string to use as the component tag.\nExample: component={Alert}\nExample: component=\"button\"", + "defaultValue": "'a'" + }, + { + "name": "customChild", + "type": "React.ReactNode", + "description": "" + }, + { + "name": "enterTriggersArrowDown", + "type": "boolean", + "description": "Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items.", + "defaultValue": "false" + }, + { + "name": "icon", + "type": "React.ReactNode", + "description": "Icon rendered before the text", + "defaultValue": "null" + }, + { + "name": "id", + "type": "string", + "description": "ID of the item. Required for tracking favorites." + }, + { + "name": "isExternal", + "type": "boolean", + "description": "If clicking on the item should open the page in a separate window", + "defaultValue": "false" + }, + { + "name": "isFavorite", + "type": "boolean", + "description": "Flag indicating if the item is favorited", + "defaultValue": "null" + }, + { + "name": "tooltip", + "type": "React.ReactNode", + "description": "Tooltip to display when hovered over the item", + "defaultValue": "null" + }, + { + "name": "tooltipProps", + "type": "any", + "description": "Additional tooltip props forwarded to the Tooltip component", + "defaultValue": "null" + } + ] + }, + { + "name": "ApplicationLauncherContent", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Main content to be rendered", + "required": true + } + ] + } + ], + "cssPrefix": [ + "pf-c-app-launcher" + ], + "examples": [ + "Basic", + "Router link", + "Disabled", + "Aligned right", + "Aligned top", + "With tooltip", + "With sections and icons", + "With favorites and search", + "With custom icon", + "Basic with menu appended to document body" + ] +}; +pageData.liveContext = { + HelpIcon, + Link, + pfLogoSm +}; +pageData.examples = { + 'Basic': props => + \n Application 1 (anchor link)\n ,\n alert('Clicked item 2')}>\n Application 2 (button with onClick)\n ,\n \n Unavailable application\n \n];\n\nexport const ApplicationLauncherBasic: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return ;\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Router link': props => + ;\n\nconst linkStyle: React.CSSProperties = {\n color: 'var(--pf-c-app-launcher__menu-item--Color)',\n textDecoration: 'none'\n};\n\nconst appLauncherItems: React.ReactElement[] = [\n \n @reach/router Link\n \n }\n />,\n \n @reach/router Link with icon\n \n }\n />,\n \n Application 1 (anchor link)\n ,\n alert('Clicked item 2')}>\n Application 2 (button with onClick)\n ,\n \n Unavailable application\n \n];\n\nexport const ApplicationLauncherRouterLink: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return ;\n};\n","title":"Router link","lang":"ts"}}> + + , + 'Disabled': props => + \n Application 1 (anchor link)\n ,\n alert('Clicked item 2')}>\n Application 2 (button with onClick)\n ,\n \n Unavailable application\n \n];\n\nexport const ApplicationLauncherDisabled: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return (\n \n );\n};\n","title":"Disabled","lang":"ts"}}> + + , + 'Aligned right': props => + \n Application 1 (anchor link)\n ,\n alert('Clicked item 2')}>\n Application 2 (button with onClick)\n ,\n \n Unavailable application\n \n];\n\nexport const ApplicationLauncherAlignRight: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return (\n \n );\n};\n","title":"Aligned right","lang":"ts"}}> + + , + 'Aligned top': props => + \n Application 1 (anchor link)\n ,\n alert('Clicked item 2')}>\n Application 2 (button with onClick)\n ,\n \n Unavailable application\n \n];\n\nexport const ApplicationLauncherAlignTop: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return (\n \n );\n};\n","title":"Aligned top","lang":"ts"}}> + + , + 'With tooltip': props => + Launch Application 1}>\n Application 1 (anchor link)\n ,\n Launch Application 2}\n tooltipProps={{ position: 'right' }}\n onClick={() => alert('Clicked item 2')}\n >\n Application 2 (onClick)\n ,\n Launch Application 3}\n tooltipProps={{ position: 'bottom' }}\n onClick={() => alert('Clicked item 3')}\n >\n Application 3 (onClick)\n \n];\n\nexport const ApplicationLauncherTooltip: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return ;\n};\n","title":"With tooltip","lang":"ts"}}> + + , + 'With sections and icons': props => + ;\n\nconst appLauncherItems: React.ReactElement[] = [\n \n \n Item without group title\n \n \n ,\n \n \n Group 2 button\n \n \n Group 2 anchor link\n \n \n ,\n \n \n Group 3 button\n \n \n Group 3 anchor link\n \n \n];\n\nexport const ApplicationLauncherSectionsAndIcons: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return (\n \n );\n};\n","title":"With sections and icons","lang":"ts"}}> + + , + 'With favorites and search': props => + ;\n\nconst appLauncherItems: React.ReactElement[] = [\n \n \n Item without group title\n \n \n ,\n \n \n Group 2 button\n \n \n Group 2 anchor link\n \n \n ,\n \n \n Group 3 button\n \n \n Group 3 anchor link\n \n \n];\n\nexport const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n const [favorites, setFavorites] = React.useState([]);\n const [filteredItems, setFilteredItems] = React.useState(null);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n\n const onFavorite = (itemId: string, isFavorite: boolean) => {\n let updatedFavorites: string[] = [...favorites, itemId];\n\n if (isFavorite) {\n updatedFavorites = favorites.filter(id => id !== itemId);\n }\n\n setFavorites(updatedFavorites);\n };\n\n const onSearch = (textInput: string) => {\n if (textInput === '') {\n setFilteredItems(null);\n } else {\n const filteredGroups = appLauncherItems\n .map((group: React.ReactElement) => {\n const filteredGroup = React.cloneElement(group, {\n children: group.props.children.filter((item: React.ReactElement) => {\n if (item.type === ApplicationLauncherSeparator) {\n return item;\n }\n\n return item.props.children.toLowerCase().includes(textInput.toLowerCase());\n })\n });\n\n if (\n filteredGroup.props.children.length > 0 &&\n filteredGroup.props.children[0].type !== ApplicationLauncherSeparator\n ) {\n return filteredGroup;\n }\n })\n .filter(newGroup => newGroup);\n\n if (filteredGroups.length > 0) {\n let lastGroup = filteredGroups.pop();\n\n lastGroup = React.cloneElement(lastGroup, {\n children: lastGroup.props.children.filter(item => item.type !== ApplicationLauncherSeparator)\n });\n\n filteredGroups.push(lastGroup);\n }\n\n setFilteredItems(filteredGroups);\n }\n };\n\n return (\n \n );\n};\n","title":"With favorites and search","lang":"ts"}}> + + , + 'With custom icon': props => + \n Application 1 (anchor link)\n ,\n alert('Clicked item 2')}>\n Application 2 (button with onClick)\n ,\n \n Unavailable application\n \n];\n\nexport const ApplicationLauncherCustomIcon: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return (\n }\n />\n );\n};\n","title":"With custom icon","lang":"ts"}}> + + , + 'Basic with menu appended to document body': props => + \n Application 1 (anchor link)\n ,\n alert('Clicked item 2')}>\n Application 2 (button with onClick)\n ,\n \n Unavailable application\n \n];\n\nexport const ApplicationLauncherDocumentBody: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);\n\n return (\n document.body}\n onSelect={onSelect}\n onToggle={onToggle}\n isOpen={isOpen}\n items={appLauncherItems}\n />\n );\n};\n","title":"Basic with menu appended to document body","lang":"ts"}}> + + +}; + +const Component = () => ( + +

+ {`Note: Application launcher is built on Dropdown, for extended API go to `} + + {`Dropdown`} + + {` documentation. +To add a tooltip, use the `} + + {`tooltip`} + + {` prop and optionally add more tooltip props by using `} + + {`tooltipProps`} + + {`. For more tooltip information go to `} + + {`Tooltip`} + + {`.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Router link"])} + {React.createElement(pageData.examples["Disabled"])} + {React.createElement(pageData.examples["Aligned right"])} + {React.createElement(pageData.examples["Aligned top"])} + {React.createElement(pageData.examples["With tooltip"])} + {React.createElement(pageData.examples["With sections and icons"])} + {React.createElement(pageData.examples["With favorites and search"])} + {React.createElement(pageData.examples["With custom icon"])} + {React.createElement(pageData.examples["Basic with menu appended to document body"])} + +); +Component.displayName = 'ComponentsApplicationLauncherReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/avatar/react.js b/packages/react-docs/src/generated/components/avatar/react.js new file mode 100644 index 00000000000..f3e0cb28dd6 --- /dev/null +++ b/packages/react-docs/src/generated/components/avatar/react.js @@ -0,0 +1,95 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import avatarImg from '../../../../../react-core/src/components/Avatar/examples/./avatarImg.svg'; +import avatarImgDark from '../../../../../react-core/src/components/Avatar/examples/./avatarImgDark.svg'; +import '../../../../../react-core/src/components/Avatar/examples/./example.css'; +const pageData = { + "id": "Avatar", + "section": "components", + "source": "react", + "slug": "/components/avatar/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Avatar/examples/Avatar.md", + "propComponents": [ + { + "name": "Avatar", + "description": "", + "props": [ + { + "name": "alt", + "type": "string", + "description": "Attribute that specifies the alternate text of the image for the Avatar.", + "required": true + }, + { + "name": "border", + "type": "'light' | 'dark'", + "description": "Border to add" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Avatar.", + "defaultValue": "''" + }, + { + "name": "size", + "type": "'sm' | 'md' | 'lg' | 'xl'", + "description": "Size variant of avatar." + }, + { + "name": "src", + "type": "string", + "description": "Attribute that specifies the URL of the image for the Avatar.", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-avatar" + ], + "examples": [ + "Basic", + "Size variations", + "Bordered - light", + "Bordered - dark" + ] +}; +pageData.liveContext = { + avatarImg, + avatarImgDark +}; +pageData.examples = { + 'Basic': props => + ;","title":"Basic","lang":"ts"}}> + + , + 'Size variations': props => + (\n \n Small\n
\n \n
\n Medium\n
\n \n
\n Large\n
\n \n
\n Extra Large\n
\n \n \n)","title":"Size variations","lang":"ts"}}> + + , + 'Bordered - light': props => + ;","title":"Bordered - light","lang":"ts"}}> + + , + 'Bordered - dark': props => + ;","title":"Bordered - dark","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Size variations"])} + {React.createElement(pageData.examples["Bordered - light"])} + {React.createElement(pageData.examples["Bordered - dark"])} + +); +Component.displayName = 'ComponentsAvatarReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/back-to-top/react-demos.js b/packages/react-docs/src/generated/components/back-to-top/react-demos.js new file mode 100644 index 00000000000..3c423670728 --- /dev/null +++ b/packages/react-docs/src/generated/components/back-to-top/react-demos.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import DashboardWrapper from '../../../../../react-core/src/demos/./examples/DashboardWrapper'; +import srcImportdefaulttoscrollwindow from './react-demos/default-to-scroll-window.png'; +import srcImportusingnameselector from './react-demos/using-name-selector.png'; +const pageData = { + "id": "Back to top", + "section": "components", + "source": "react-demos", + "slug": "/components/back-to-top/react-demos", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/BackToTop.md", + "fullscreenExamples": [ + "Using name selector" + ] +}; +pageData.liveContext = { + DashboardWrapper +}; +pageData.examples = { + 'Using name selector': props => + {\n const [isAlwaysVisible, setIsAlwaysVisible] = React.useState(false);\n\n const handleChange = isChecked => {\n setIsAlwaysVisible(isChecked);\n };\n\n return (\n \n \n \n \n Main title\n \n Body text should be Overpass Regular at 16px.It should have leading of 24px because
\n of it’s relative line height of 1.5.\n \n \n \n \n \n \n {Array.apply(0, Array(60)).map((_x: any, i: number) => (\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum et urna eget semper. Sed\n tincidunt purus diam, id sollicitudin est pellentesque eget. Ut eget massa dignissim dolor pretium\n finibus at sit amet purus. Duis vulputate odio ac tristique convallis. Praesent porttitor\n condimentum varius. Duis pharetra in ligula nec ornare. Vivamus tincidunt nulla a semper semper.\n Duis tincidunt gravida elit non vehicula. Nunc eu sem venenatis, lobortis lorem sed, consectetur\n erat. Nulla accumsan, justo ac fringilla imperdiet, risus magna mollis libero, sit amet malesuada\n quam enim vel odio. Nullam vitae feugiat sem. Suspendisse potenti. Mauris dolor enim, pretium a\n pulvinar ut, commodo at risus.\n \n \n \n ))}\n \n \n \n \n \n );\n};\n","title":"Using name selector","lang":"js","isFullscreen":true}}> + +

+ {`Note that `} + + + {`tabIndex={0}`} + + {` is added to the scrolling `} + + + {`PageSection`} + + {` of the page to allow keyboard users the ability to focus and scroll.`} +

+ +}; + +const Component = () => ( + + + {`Demos`} + + {React.createElement(pageData.examples["Using name selector"])} + +); +Component.displayName = 'ComponentsBackToTopReactDemosDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/back-to-top/react.js b/packages/react-docs/src/generated/components/back-to-top/react.js new file mode 100644 index 00000000000..2ad0330f7b4 --- /dev/null +++ b/packages/react-docs/src/generated/components/back-to-top/react.js @@ -0,0 +1,74 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import '../../../../../react-core/src/components/BackToTop/examples/./BackToTop.css' +const pageData = { + "id": "Back to top", + "section": "components", + "source": "react", + "slug": "/components/back-to-top/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/BackToTop/examples/BackToTop.md", + "propComponents": [ + { + "name": "BackToTop", + "description": "", + "props": [ + { + "name": "className", + "type": "string", + "description": "Additional classes added to the back to top." + }, + { + "name": "innerRef", + "type": "React.Ref", + "description": "Forwarded ref" + }, + { + "name": "isAlwaysVisible", + "type": "boolean", + "description": "Flag to always show back to top button, defaults to false." + }, + { + "name": "scrollableSelector", + "type": "string", + "description": "Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events." + }, + { + "name": "title", + "type": "string", + "description": "Title to appear in back to top button." + } + ] + } + ], + "cssPrefix": [ + "pf-c-back-to-top" + ], + "examples": [ + "Basic" + ] +}; +pageData.examples = { + 'Basic': props => + ;\n","title":"Basic","lang":"ts"}}> + + +}; + +const Component = () => ( + +

+ {`Below example does not demonstrate functionality see React demos for a full demonstration.`} +

+

+ {`Back to top only shows after overflowing element has been scrolled 400px.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + +); +Component.displayName = 'ComponentsBackToTopReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/backdrop/react.js b/packages/react-docs/src/generated/components/backdrop/react.js new file mode 100644 index 00000000000..5772f62212e --- /dev/null +++ b/packages/react-docs/src/generated/components/backdrop/react.js @@ -0,0 +1,62 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import srcImportbasic from './react/basic.png'; +import srcImportwithspinner from './react/with-spinner.png'; +const pageData = { + "id": "Backdrop", + "section": "components", + "source": "react", + "slug": "/components/backdrop/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Backdrop/examples/Backdrop.md", + "propComponents": [ + { + "name": "Backdrop", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "content rendered inside the backdrop", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "additional classes added to the button", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-backdrop" + ], + "fullscreenExamples": [ + "Basic", + "With spinner" + ] +}; +pageData.examples = { + 'Basic': props => + ;\n","title":"Basic","lang":"ts","isFullscreen":true}}> + + , + 'With spinner': props => + (\n \n \n \n \n \n);\n","title":"With spinner","lang":"ts","isFullscreen":true}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["With spinner"])} + +); +Component.displayName = 'ComponentsBackdropReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/background-image/react.js b/packages/react-docs/src/generated/components/background-image/react.js new file mode 100644 index 00000000000..afcfaed3c04 --- /dev/null +++ b/packages/react-docs/src/generated/components/background-image/react.js @@ -0,0 +1,60 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import srcImportbasic from './react/basic.png'; +const pageData = { + "id": "Background image", + "section": "components", + "source": "react", + "slug": "/components/background-image/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md", + "propComponents": [ + { + "name": "BackgroundImage", + "description": "", + "props": [ + { + "name": "className", + "type": "string", + "description": "Additional classes added to the background." + }, + { + "name": "filter", + "type": "React.ReactElement", + "description": "Override svg filter to use", + "defaultValue": "\n \n \n \n \n \n \n \n" + }, + { + "name": "src", + "type": "string | BackgroundImageSrcMap", + "description": "Override image styles using a string or BackgroundImageSrc", + "required": true + } + ] + } + ], + "cssPrefix": [ + "pf-c-background-image" + ], + "fullscreenExamples": [ + "Basic" + ] +}; +pageData.examples = { + 'Basic': props => + ;\n","title":"Basic","lang":"ts","isFullscreen":true}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + +); +Component.displayName = 'ComponentsBackgroundImageReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/badge/react.js b/packages/react-docs/src/generated/components/badge/react.js new file mode 100644 index 00000000000..06fd1f18288 --- /dev/null +++ b/packages/react-docs/src/generated/components/badge/react.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Badge", + "section": "components", + "source": "react", + "slug": "/components/badge/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Badge/examples/Badge.md", + "propComponents": [ + { + "name": "Badge", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "content rendered inside the Badge", + "defaultValue": "''" + }, + { + "name": "className", + "type": "string", + "description": "additional classes added to the Badge", + "defaultValue": "''" + }, + { + "name": "isRead", + "type": "boolean", + "description": "Adds styling to the badge to indicate it has been read", + "defaultValue": "false" + } + ] + } + ], + "cssPrefix": [ + "pf-c-badge" + ], + "examples": [ + "Read", + "Unread" + ] +}; +pageData.examples = { + 'Read': props => + (\n \n \n 7\n {' '}\n \n 24\n {' '}\n \n 240\n {' '}\n \n 999+\n \n \n);\n","title":"Read","lang":"ts"}}> + + , + 'Unread': props => + (\n \n 7 24 240 999+\n \n);\n","title":"Unread","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Read"])} + {React.createElement(pageData.examples["Unread"])} + +); +Component.displayName = 'ComponentsBadgeReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/banner/react-demos.js b/packages/react-docs/src/generated/components/banner/react-demos.js new file mode 100644 index 00000000000..f25ebfa801f --- /dev/null +++ b/packages/react-docs/src/generated/components/banner/react-demos.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import DashboardWrapper from '../../../../../react-core/src/demos/./examples/DashboardWrapper'; +import srcImportbasicstickybanner from './react-demos/basic-sticky-banner.png'; +import srcImporttopandbottombanner from './react-demos/top-and-bottom-banner.png'; +const pageData = { + "id": "Banner", + "section": "components", + "source": "react-demos", + "slug": "/components/banner/react-demos", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Banner.md", + "fullscreenExamples": [ + "Basic sticky banner", + "Top and bottom banner" + ] +}; +pageData.liveContext = { + DashboardWrapper +}; +pageData.examples = { + 'Basic sticky banner': props => + \n \n \n \n
Localhost
\n
\n This message is sticky to the top of the page.\n
\n
Drop some text on mobile, truncate if needed.
\n
Ned Username
\n \n \n \n \n Main title\n \n Body text should be Overpass Regular at 16px. It should have leading of 24px because
\n of it’s relative line height of 1.5.\n \n \n \n \n \n {Array.apply(0, Array(30)).map((x, i) => (\n \n \n This is a card\n \n \n ))}\n \n \n \n \n );\n }\n}","title":"Basic sticky banner","lang":"js","isFullscreen":true}}> + + , + 'Top and bottom banner': props => + \n \n \n \n \n
Localhost
\n
\n This message is sticky to the top of the page.\n
\n
Drop some text on mobile, truncate if needed.
\n
Ned Username
\n \n \n \n \n \n \n \n Main title\n \n Body text should be Overpass Regular at 16px. It should have leading of 24px because
\n of it’s relative line height of 1.5.\n \n \n \n \n \n {Array.apply(0, Array(30)).map((x, i) => (\n \n \n This is a card\n \n \n ))}\n \n \n \n \n \n \n \n
Localhost
\n
\n This message is sticky to the bottom of the page.\n
\n
Drop some text on mobile, truncate if needed.
\n
Ned Username
\n \n \n \n \n \n );\n }\n}","title":"Top and bottom banner","lang":"js","isFullscreen":true}}> + + +}; + +const Component = () => ( + + + {`Demos`} + + {React.createElement(pageData.examples["Basic sticky banner"])} + {React.createElement(pageData.examples["Top and bottom banner"])} + +); +Component.displayName = 'ComponentsBannerReactDemosDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/banner/react.js b/packages/react-docs/src/generated/components/banner/react.js new file mode 100644 index 00000000000..21255d64fbe --- /dev/null +++ b/packages/react-docs/src/generated/components/banner/react.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Banner", + "section": "components", + "source": "react", + "slug": "/components/banner/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Banner/examples/Banner.md", + "propComponents": [ + { + "name": "Banner", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the banner" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the banner" + }, + { + "name": "isSticky", + "type": "boolean", + "description": "If set to true, the banner sticks to the top of its container", + "defaultValue": "false" + }, + { + "name": "screenReaderText", + "type": "string", + "description": "Text announced by screen readers to indicate the type of banner. Defaults to \"${variant} banner\" if this prop is not passed in" + }, + { + "name": "variant", + "type": "'default' | 'info' | 'danger' | 'success' | 'warning'", + "description": "Variant styles for the banner", + "defaultValue": "'default'" + } + ] + } + ], + "cssPrefix": [ + "pf-c-banner" + ], + "examples": [ + "Basic" + ] +}; +pageData.examples = { + 'Basic': props => + (\n \n Default banner\n
\n \n Info banner\n \n
\n Danger banner\n
\n Success banner\n
\n Warning banner\n \n);\n","title":"Basic","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + +); +Component.displayName = 'ComponentsBannerReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/brand/react.js b/packages/react-docs/src/generated/components/brand/react.js new file mode 100644 index 00000000000..7ab326bcb62 --- /dev/null +++ b/packages/react-docs/src/generated/components/brand/react.js @@ -0,0 +1,137 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import pfLogo from '../../../../../react-core/src/components/Brand/examples/./pfLogo.svg'; +import logoXl from '../../../../../react-core/src/components/Brand/examples/./pf-c-brand--logo-on-xl.svg'; +import logoLg from '../../../../../react-core/src/components/Brand/examples/./pf-c-brand--logo-on-lg.svg'; +import logoMd from '../../../../../react-core/src/components/Brand/examples/./pf-c-brand--logo-on-md.svg'; +import logoSm from '../../../../../react-core/src/components/Brand/examples/./pf-c-brand--logo-on-sm.svg'; +import logo from '../../../../../react-core/src/components/Brand/examples/./pf-c-brand--logo.svg'; +import logoBase from '../../../../../react-core/src/components/Brand/examples/./pf-c-brand--logo-base.jpg'; +const pageData = { + "id": "Brand", + "section": "components", + "source": "react", + "slug": "/components/brand/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Brand/examples/Brand.md", + "propComponents": [ + { + "name": "Brand", + "description": "", + "props": [ + { + "name": "alt", + "type": "string", + "description": "Attribute that specifies the alt text of a Brand. For a Brand this specifies the fallback alt text.", + "required": true + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Transforms the Brand into a element from an element. Container for child elements." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the either type of Brand.", + "defaultValue": "''" + }, + { + "name": "heights", + "type": "{\n default?: string;\n sm?: string;\n md?: string;\n lg?: string;\n xl?: string;\n '2xl'?: string;\n}", + "description": "Heights at various breakpoints for a Brand." + }, + { + "name": "src", + "type": "string", + "description": "Attribute that specifies the URL of a Brand. For a Brand this specifies the fallback URL.", + "defaultValue": "''" + }, + { + "name": "widths", + "type": "{\n default?: string;\n sm?: string;\n md?: string;\n lg?: string;\n xl?: string;\n '2xl'?: string;\n}", + "description": "Widths at various breakpoints for a Brand." + } + ] + } + ], + "examples": [ + "Basic", + "Responsive" + ] +}; +pageData.liveContext = { + pfLogo, + logoXl, + logoLg, + logoMd, + logoSm, + logo, + logoBase +}; +pageData.examples = { + 'Basic': props => + ;\n","title":"Basic","lang":"ts"}}> + + , + 'Responsive': props => + (\n \n \n \n \n \n \n \n);\n","title":"Responsive","lang":"ts"}}> + +

+ {`Passing `} + + + {``} + + {` elements as children to `} + + + {`Brand`} + + {` will change the component from an `} + + + {``} + + {` to a `} + + + {``} + + {` element. In this form, breakpoint modifiers for width and height may be passed to `} + + + {`Brand`} + + {`. The `} + + + {`src`} + + {` and `} + + + {`alt`} + + {` properties should still be passed to populate the fallback `} + + + {`img`} + + {` of the brand.`} +

+ +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Responsive"])} + +); +Component.displayName = 'ComponentsBrandReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/breadcrumb/react.js b/packages/react-docs/src/generated/components/breadcrumb/react.js new file mode 100644 index 00000000000..4672be65297 --- /dev/null +++ b/packages/react-docs/src/generated/components/breadcrumb/react.js @@ -0,0 +1,187 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; +const pageData = { + "id": "Breadcrumb", + "section": "components", + "source": "react", + "slug": "/components/breadcrumb/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md", + "propComponents": [ + { + "name": "Breadcrumb", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Aria label added to the breadcrumb nav.", + "defaultValue": "'Breadcrumb'" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Children nodes be rendered to the BreadCrumb. Should be of type BreadCrumbItem.", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the breadcrumb nav.", + "defaultValue": "''" + }, + { + "name": "ouiaSafe", + "type": "No type info", + "defaultValue": "true" + } + ] + }, + { + "name": "BreadcrumbItem", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the breadcrumb item.", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the breadcrumb item.", + "defaultValue": "''" + }, + { + "name": "component", + "type": "React.ElementType", + "description": "Sets the base component to render. Defaults to ", + "defaultValue": "'a'" + }, + { + "name": "isActive", + "type": "boolean", + "description": "Flag indicating whether the item is active.", + "defaultValue": "false" + }, + { + "name": "isDropdown", + "type": "boolean", + "description": "Flag indicating whether the item contains a dropdown.", + "defaultValue": "false" + }, + { + "name": "render", + "type": "(props: BreadcrumbItemRenderArgs) => React.ReactNode", + "description": "A render function to render the component inside the breadcrumb item.", + "defaultValue": "undefined" + }, + { + "name": "showDivider", + "type": "boolean", + "description": "Internal prop set by Breadcrumb on all but the first crumb" + }, + { + "name": "target", + "type": "string", + "description": "Target for breadcrumb link.", + "defaultValue": "undefined" + }, + { + "name": "to", + "type": "string", + "description": "HREF for breadcrumb link.", + "defaultValue": "undefined" + } + ] + }, + { + "name": "BreadcrumbHeading", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the breadcrumb title.", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the breadcrumb item.", + "defaultValue": "''" + }, + { + "name": "component", + "type": "React.ReactNode", + "description": "Sets the base component to render. Defaults to ", + "defaultValue": "'a'" + }, + { + "name": "showDivider", + "type": "boolean", + "description": "Internal prop set by Breadcrumb on all but the first crumb" + }, + { + "name": "target", + "type": "string", + "description": "Target for breadcrumb link.", + "defaultValue": "undefined" + }, + { + "name": "to", + "type": "string", + "description": "HREF for breadcrumb link.", + "defaultValue": "undefined" + } + ] + } + ], + "cssPrefix": [ + "pf-c-breadcrumb" + ], + "examples": [ + "Basic", + "Without home link", + "With heading", + "With dropdown" + ] +}; +pageData.liveContext = { + AngleLeftIcon +}; +pageData.examples = { + 'Basic': props => + (\n \n Section home\n Section title\n Section title\n \n Section landing\n \n \n);\n","title":"Basic","lang":"ts"}}> + + , + 'Without home link': props => + (\n \n Section Home\n Section title\n Section title\n Section title\n Section title\n \n Section landing\n \n \n);\n","title":"Without home link","lang":"ts"}}> + + , + 'With heading': props => + (\n \n Section home\n Section title\n Section title\n Section title\n Section title\n \n);\n","title":"With heading","lang":"ts"}}> + + , + 'With dropdown': props => + }>\n Edit\n ,\n }>\n Deployment\n ,\n }>\n Applications\n \n];\n\nexport const BreadcrumbDropdown: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n const badgeToggleRef = React.useRef();\n\n const onToggle = (isOpen: boolean) => setIsOpen(isOpen);\n\n const onSelect = () => {\n setIsOpen((prevIsOpen: boolean) => !prevIsOpen);\n badgeToggleRef.current.focus();\n };\n\n return (\n \n Section home\n \n \n {dropdownItems.length}\n \n }\n isOpen={isOpen}\n dropdownItems={dropdownItems}\n />\n \n Section title\n \n );\n};\n","title":"With dropdown","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Without home link"])} + {React.createElement(pageData.examples["With heading"])} + {React.createElement(pageData.examples["With dropdown"])} + +); +Component.displayName = 'ComponentsBreadcrumbReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/button/react-demos.js b/packages/react-docs/src/generated/components/button/react-demos.js new file mode 100644 index 00000000000..bd6291e45e2 --- /dev/null +++ b/packages/react-docs/src/generated/components/button/react-demos.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +const pageData = { + "id": "Button", + "section": "components", + "source": "react-demos", + "slug": "/components/button/react-demos", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Button.md", + "examples": [ + "Progress button" + ] +}; +pageData.liveContext = { + CheckCircleIcon +}; +pageData.examples = { + 'Progress button': props => + {\n const [loginState, setLoginState] = React.useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');\n\n return (\n
\n \n \n \n \n \n \n \n {\n setLoginState('loading');\n setTimeout(() => {\n setLoginState('loggedIn');\n }, 3000);\n }\n : null\n }\n isLoading={loginState === 'loading'}\n icon={loginState === 'loggedIn' ? : null}\n spinnerAriaValueText=\"Loading...\"\n >\n {loginState === 'notLoggedIn' && 'Link account and log in'}\n {loginState === 'loading' && 'Linking account'}\n {loginState === 'loggedIn' && 'Logged in'}\n \n \n
\n );\n};","title":"Progress button","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Demos`} + + {React.createElement(pageData.examples["Progress button"])} + +); +Component.displayName = 'ComponentsButtonReactDemosDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/button/react.js b/packages/react-docs/src/generated/components/button/react.js new file mode 100644 index 00000000000..ff9f3688067 --- /dev/null +++ b/packages/react-docs/src/generated/components/button/react.js @@ -0,0 +1,245 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon'; +import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; +import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; +import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; +import { Link } from '@reach/router'; +const pageData = { + "id": "Button", + "section": "components", + "source": "react", + "slug": "/components/button/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Button/examples/Button.md", + "propComponents": [ + { + "name": "Button", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the button." + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the button" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the button" + }, + { + "name": "component", + "type": "React.ElementType | React.ComponentType", + "description": "Sets the base component to render. defaults to button" + }, + { + "name": "icon", + "type": "React.ReactNode | null", + "description": "Icon for the button. Usable by all variants except for plain." + }, + { + "name": "iconPosition", + "type": "'left' | 'right'", + "description": "Sets position of the link icon" + }, + { + "name": "innerRef", + "type": "React.Ref", + "description": "Forwarded ref" + }, + { + "name": "inoperableEvents", + "type": "string[]", + "description": "Events to prevent when the button is in an aria-disabled state" + }, + { + "name": "isActive", + "type": "boolean", + "description": "Adds active styling to button." + }, + { + "name": "isAriaDisabled", + "type": "boolean", + "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute" + }, + { + "name": "isBlock", + "type": "boolean", + "description": "Adds block styling to button" + }, + { + "name": "isDanger", + "type": "boolean", + "description": "Adds danger styling to secondary or link button variants" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Adds disabled styling and disables the button using the disabled html attribute" + }, + { + "name": "isInline", + "type": "boolean", + "description": "Adds inline styling to a link button" + }, + { + "name": "isLarge", + "type": "boolean", + "description": "Adds large styling to the button" + }, + { + "name": "isLoading", + "type": "boolean", + "description": "Adds progress styling to button" + }, + { + "name": "isSmall", + "type": "boolean", + "description": "Adds small styling to the button" + }, + { + "name": "spinnerAriaLabel", + "type": "string", + "description": "Accessible label for the spinner to describe what is loading" + }, + { + "name": "spinnerAriaLabelledBy", + "type": "string", + "description": "Id of element which describes what is being loaded" + }, + { + "name": "spinnerAriaValueText", + "type": "string", + "description": "Text describing that current loading status or progress" + }, + { + "name": "tabIndex", + "type": "number", + "description": "Sets the button tabindex." + }, + { + "name": "type", + "type": "'button' | 'submit' | 'reset'", + "description": "Sets button type" + }, + { + "name": "variant", + "type": "'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'", + "description": "Adds button variant styles" + } + ] + } + ], + "cssPrefix": [ + "pf-c-button" + ], + "examples": [ + "Variations", + "Disabled", + "Aria disabled", + "Aria disabled button with tooltip", + "Aria disabled link as button with tooltip", + "Links as buttons", + "Inline link as span", + "Block level", + "Types", + "Small", + "Call to action", + "Progress", + "Router link" + ] +}; +pageData.liveContext = { + TimesIcon, + PlusCircleIcon, + ExternalLinkSquareAltIcon, + CopyIcon, + ArrowRightIcon, + UploadIcon, + Link +}; +pageData.examples = { + 'Variations': props => + (\n \n {' '}\n {' '}\n {' '}\n \n
\n
\n {' '}\n {' '}\n {' '}\n \n
\n
\n \n
\n
\n {' '}\n \n \n);\n","title":"Variations","lang":"ts"}}> + + , + 'Disabled': props => + (\n \n {' '}\n {' '}\n {' '}\n {' '}\n \n
\n
\n {' '}\n {' '}\n {' '}\n {' '}\n \n \n);\n","title":"Disabled","lang":"ts"}}> + + , + 'Aria disabled': props => + (\n \n {' '}\n {' '}\n {' '}\n {' '}\n \n
\n
\n {' '}\n {' '}\n {' '}\n {' '}\n \n \n);\n","title":"Aria disabled","lang":"ts"}}> + + , + 'Aria disabled button with tooltip': props => + (\n \n \n \n);\n","title":"Aria disabled button with tooltip","lang":"ts"}}> + + , + 'Aria disabled link as button with tooltip': props => + (\n \n \n \n);\n","title":"Aria disabled link as button with tooltip","lang":"ts"}}> + + , + 'Links as buttons': props => + (\n \n {' '}\n {' '}\n {' '}\n \n \n);\n","title":"Links as buttons","lang":"ts"}}> + + , + 'Inline link as span': props => + ) => {\n const { key } = event;\n const isEnterKey: boolean = key === 'Enter';\n const isEnterOrSpaceKey: boolean = isEnterKey || key === 'Space';\n\n if (isEnterOrSpaceKey) {\n event.preventDefault();\n alert(`${isEnterKey ? 'Enter' : 'Space'} key default behavior stopped by onKeyDown`);\n }\n};\n\nexport const ButtonInlineSpanLink: React.FunctionComponent = () => (\n \n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.\n

\n\n
\n\n

\n Note that using a span as a button does not fire the onclick event for Enter or Space keys.\n \n Pressing the Enter or Space keys on the inline link as span above demonstrates this by triggering an alert.\n

\n \n);\n","title":"Inline link as span","lang":"ts"}}> + + , + 'Block level': props => + ;\n","title":"Block level","lang":"ts"}}> + + , + 'Types': props => + (\n \n \n \n);\n","title":"Types","lang":"ts"}}> + + , + 'Small': props => + (\n \n {' '}\n {' '}\n {' '}\n {' '}\n \n
\n
\n \n);\n","title":"Small","lang":"ts"}}> + + , + 'Call to action': props => + (\n \n {' '}\n {' '}\n {' '}\n \n
\n
\n \n);\n","title":"Call to action","lang":"ts"}}> + + , + 'Progress': props => + {\n const [isPrimaryLoading, setIsPrimaryLoading] = React.useState(true);\n const [isSecondaryLoading, setIsSecondaryLoading] = React.useState(true);\n const [isUploading, setIsUploading] = React.useState(false);\n\n const primaryLoadingProps = {} as LoadingPropsType;\n if (isPrimaryLoading) {\n primaryLoadingProps.spinnerAriaValueText = 'Loading';\n primaryLoadingProps.spinnerAriaLabelledBy = 'primary-loading-button';\n primaryLoadingProps.isLoading = true;\n }\n const secondaryLoadingProps = {} as LoadingPropsType;\n if (isSecondaryLoading) {\n secondaryLoadingProps.spinnerAriaValueText = 'Loading';\n secondaryLoadingProps.spinnerAriaLabel = 'Content being loaded';\n secondaryLoadingProps.isLoading = true;\n }\n const uploadingProps = {} as LoadingPropsType;\n if (isUploading) {\n uploadingProps.spinnerAriaValueText = 'Loading';\n uploadingProps.isLoading = true;\n uploadingProps.spinnerAriaLabel = 'Uploading data';\n }\n\n return (\n \n setIsPrimaryLoading(!isPrimaryLoading)}\n {...primaryLoadingProps}\n >\n {isPrimaryLoading ? 'Pause loading logs' : 'Resume loading logs'}\n {' '}\n {' '}\n setIsUploading(!isUploading)}\n icon={}\n {...uploadingProps}\n />\n
\n
\n \n );\n};\n","title":"Progress","lang":"ts"}}> + + , + 'Router link': props => + (\n \n);\n","title":"Router link","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Variations"])} + {React.createElement(pageData.examples["Disabled"])} + {React.createElement(pageData.examples["Aria disabled"])} + {React.createElement(pageData.examples["Aria disabled button with tooltip"])} + {React.createElement(pageData.examples["Aria disabled link as button with tooltip"])} + {React.createElement(pageData.examples["Links as buttons"])} + {React.createElement(pageData.examples["Inline link as span"])} + {React.createElement(pageData.examples["Block level"])} + {React.createElement(pageData.examples["Types"])} + {React.createElement(pageData.examples["Small"])} + {React.createElement(pageData.examples["Call to action"])} + {React.createElement(pageData.examples["Progress"])} + {React.createElement(pageData.examples["Router link"])} + +); +Component.displayName = 'ComponentsButtonReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/calendar-month/react.js b/packages/react-docs/src/generated/components/calendar-month/react.js new file mode 100644 index 00000000000..20823e47e5a --- /dev/null +++ b/packages/react-docs/src/generated/components/calendar-month/react.js @@ -0,0 +1,236 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Calendar month", + "section": "components", + "source": "react", + "slug": "/components/calendar-month/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md", + "propComponents": [ + { + "name": "CalendarMonth", + "description": "", + "props": [ + { + "name": "cellAriaLabel", + "type": "(date: Date) => string", + "description": "Aria-label for the date cells" + }, + { + "name": "className", + "type": "string", + "description": "Classname to add to outer div" + }, + { + "name": "date", + "type": "Date", + "description": "Month/year to base other dates around" + }, + { + "name": "dayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format days in buttons in table cells", + "defaultValue": "date => date.getDate()" + }, + { + "name": "isDateFocused", + "type": "boolean", + "description": "Flag to set browser focus on the passed date *", + "defaultValue": "false" + }, + { + "name": "locale", + "type": "string", + "description": "If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation", + "defaultValue": "undefined" + }, + { + "name": "longWeekdayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format days in header for screen readers", + "defaultValue": "date => date.toLocaleDateString(locale, { weekday: 'long' })" + }, + { + "name": "monthFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format months in Select", + "defaultValue": "date => date.toLocaleDateString(locale, { month: 'long' })" + }, + { + "name": "nextMonthAriaLabel", + "type": "string", + "description": "Aria-label for the next month button", + "defaultValue": "'Next month'" + }, + { + "name": "onChange", + "type": "(date: Date) => void", + "description": "Callback when date is selected", + "defaultValue": "() => {}" + }, + { + "name": "prevMonthAriaLabel", + "type": "string", + "description": "Aria-label for the previous month button", + "defaultValue": "'Previous month'" + }, + { + "name": "rangeStart", + "type": "Date", + "description": "Which date to start range styles from" + }, + { + "name": "validators", + "type": "((date: Date) => boolean)[]", + "description": "Functions that returns if a date is valid and selectable", + "defaultValue": "[() => true]" + }, + { + "name": "weekdayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format week days in header", + "defaultValue": "date => date.toLocaleDateString(locale, { weekday: 'narrow' })" + }, + { + "name": "weekStart", + "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday", + "description": "Day of week that starts the week. 0 is Sunday, 6 is Saturday.", + "defaultValue": "0" + }, + { + "name": "yearInputAriaLabel", + "type": "string", + "description": "Aria-label for the year input", + "defaultValue": "'Select year'" + } + ] + }, + { + "name": "CalendarFormat", + "description": "", + "props": [ + { + "name": "cellAriaLabel", + "type": "(date: Date) => string", + "description": "Aria-label for the date cells" + }, + { + "name": "dayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format days in buttons in table cells" + }, + { + "name": "locale", + "type": "string", + "description": "If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation" + }, + { + "name": "longWeekdayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format days in header for screen readers" + }, + { + "name": "monthFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format months in Select" + }, + { + "name": "nextMonthAriaLabel", + "type": "string", + "description": "Aria-label for the next month button" + }, + { + "name": "prevMonthAriaLabel", + "type": "string", + "description": "Aria-label for the previous month button" + }, + { + "name": "rangeStart", + "type": "Date", + "description": "Which date to start range styles from" + }, + { + "name": "weekdayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format week days in header" + }, + { + "name": "weekStart", + "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday", + "description": "Day of week that starts the week. 0 is Sunday, 6 is Saturday." + }, + { + "name": "yearInputAriaLabel", + "type": "string", + "description": "Aria-label for the year input" + } + ] + } + ], + "beta": true, + "cssPrefix": [ + "pf-c-calendar-month" + ], + "examples": [ + "Default", + "Selectable date", + "Date range" + ] +}; +pageData.examples = { + 'Default': props => + ;\n","title":"Default","lang":"ts"}}> + + , + 'Selectable date': props => + {\n const [date, setDate] = React.useState(new Date(2020, 10, 24));\n\n return (\n \n 
Selected date: {date.toString()}
\n \n \n );\n};\n","title":"Selectable date","lang":"ts"}}> + + , + 'Date range': props => + {\n const startDate = new Date(2020, 10, 11);\n const endDate = new Date(2020, 10, 24);\n const disablePreStartDates = (date: Date) => date >= startDate;\n\n return ;\n};\n","title":"Date range","lang":"ts"}}> + +

+ {`In this example, there are 2 dates selected: a range start date (via the `} + + + {`rangeStart`} + + {` prop) and a range end date (via the `} + + + {`date`} + + {` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `} + + + {`validators`} + + {` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.`} +

+ +

+ {`For this example, these dates are static and cannot be updated. For an interactive demo, see our `} + + + {`Date picker demos`} + + {`.`} +

+ +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Default"])} + {React.createElement(pageData.examples["Selectable date"])} + {React.createElement(pageData.examples["Date range"])} + +); +Component.displayName = 'ComponentsCalendarMonthReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/card/react-demos.js b/packages/react-docs/src/generated/components/card/react-demos.js new file mode 100644 index 00000000000..8d154f5e4f2 --- /dev/null +++ b/packages/react-docs/src/generated/components/card/react-demos.js @@ -0,0 +1,165 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon'; +import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon'; +import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons'; +import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; +import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts'; +import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; +import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; +import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; +import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100'; +import srcImportcardview from './react-demos/card-view.png'; +const pageData = { + "id": "Card", + "section": "components", + "source": "react-demos", + "slug": "/components/card/react-demos", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/CardDemos.md", + "examples": [ + "Horizontal card grid", + "Horizontal split", + "Details card", + "Aggregate status card", + "Status", + "Status Tabbed", + "Utilization card 1", + "Utilization card 2", + "Utilization card 3", + "Utilization card 4", + "Nested cards", + "With accordion", + "Trend card 1", + "Trend card 2", + "Log view", + "Events view" + ] +}; +pageData.liveContext = { + InfoCircleIcon, + ArrowRightIcon, + ExternalLinkAltIcon, + CheckCircleIcon, + ExclamationCircleIcon, + ExclamationTriangleIcon, + TimesCircleIcon, + BellIcon, + TableComposable, + Thead, + Tbody, + Tr, + Th, + Td, + ExpandableRowContent, + Chart, + ChartAxis, + ChartGroup, + ChartVoronoiContainer, + ChartStack, + ChartBar, + ChartTooltip, + ChartDonutThreshold, + ChartDonutUtilization, + ChartArea, + ChartContainer, + ChartLabel, + chart_color_gold_100, + chart_color_gold_300, + chart_color_orange_300, + chart_color_red_100 +}; +pageData.examples = { + 'Horizontal card grid': props => + {\n this.setState({\n isCardExpanded: !this.state.isCardExpanded\n });\n };\n\n this.onActionToggle = isDropdownOpen => {\n this.setState({\n isDropdownOpen\n });\n };\n\n this.onActionSelect = event => {\n this.setState({\n isDropdownOpen: !this.state.isDropdownOpen\n });\n };\n }\n\n render() {\n const { isCardExpanded, isDropdownOpen } = this.state;\n const dropdownItems = [\n \n Action 1\n ,\n \n Action 2\n ,\n \n Disabled Action 3\n ,\n \n Action 4\n \n ];\n return (\n \n \n \n }\n isOpen={isDropdownOpen}\n isPlain\n dropdownItems={dropdownItems}\n position=\"right\"\n />\n \n {isCardExpanded && Getting Started}\n {!isCardExpanded && (\n \n Getting Started\n \n \n \n \n \n \n \n )}\n \n \n \n \n \n \n \n

Continue setting up your cluster to access all you cain in the Console

\n \n \n Add identity provider\n \n \n Configure alert receivers\n \n \n Configure default ingress certificate\n \n \n \n \n \n \n \n \n

Tour some of the key features around the console

\n \n \n Tour the console\n \n \n Getting started with Serverless\n \n \n \n \n \n \n \n \n

Get started with features using our step-by-step documentation

\n \n \n Getting started with Serverless\n \n \n Explore virtualization\n \n \n Build pipelines\n \n \n \n \n \n \n \n \n

Learn about new features within the Console and get started with demo apps

\n \n \n See what's possible with the Explore page\n \n \n \n OpenShift 4.5: Top Tasks\n \n \n \n \n Try a demo app\n \n \n \n \n \n \n \n \n \n );\n }\n}","title":"Horizontal card grid","lang":"js"}}> + + , + 'Horizontal split': props => + {\n return (\n \n \n \n \n Headline\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu,\n tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in\n tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non\n faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.\n \n \n \n \n \n \n \n );\n};","title":"Horizontal split","lang":"js"}}> + + , + 'Details card': props => + {\n return (\n \n \n \n \n Details\n \n \n \n \n \n Cluster API Address\n \n https://api1.devcluster.openshift.com\n \n \n \n Cluster ID\n 63b97ac1-b850-41d9-8820-239becde9e86\n \n \n Provide\n AWS\n \n \n OpenShift Version\n 4.5.0.ci-2020-06-16-015028\n \n \n Update Channel\n stable-4.5\n \n \n \n \n \n View Settings\n \n \n \n \n \n Details\n \n \n \n \n \n Cluster API Address\n \n https://api2.devcluster.openshift.com\n \n \n \n Cluster ID\n 08908908-b850-41d9-8820-239becde9e86\n \n \n Provider\n Azure\n \n \n OpenShift Version\n 4.5.0.ci-2020-06-16-015026\n \n \n Update Channel\n stable-4.4\n \n \n \n \n \n View Settings\n \n \n \n );\n};","title":"Details card","lang":"js"}}> + + , + 'Aggregate status card': props => + \n }\n ],\n layout: 'icon'\n },\n {\n title: '15 Clusters',\n content: [\n {\n icon: \n }\n ],\n layout: 'icon'\n },\n {\n title: '3 Clusters',\n content: [\n {\n icon: \n }\n ],\n layout: 'icon'\n }\n ],\n iconWithCount: [\n {\n title: '10 Hosts',\n content: [\n {\n icon: ,\n count: 2\n },\n {\n icon: ,\n count: 1\n }\n ],\n layout: 'multiIcon'\n },\n {\n title: '50 Hosts',\n content: [\n {\n icon: ,\n count: 5\n },\n {\n icon: ,\n count: 12\n }\n ],\n layout: 'multiIcon'\n },\n {\n title: '12 Hosts',\n content: [\n {\n icon: ,\n count: 3\n },\n {\n icon: ,\n count: 7\n }\n ],\n layout: 'multiIcon'\n }\n ],\n withSubtitle: [\n {\n title: '13 Hosts',\n content: [\n {\n icon: ,\n status: '2 errors',\n subtitle: 'subtitle'\n },\n {\n icon: ,\n status: '1 warning',\n subtitle: 'subtitle'\n }\n ],\n layout: 'withSubtitle'\n },\n {\n title: '3 Hosts',\n content: [\n {\n icon: ,\n status: '2 successes',\n subtitle: 'subtitle'\n },\n {\n icon: ,\n status: '3 warnings',\n subtitle: 'subtitle'\n }\n ],\n layout: 'withSubtitle'\n },\n {\n title: '50 Hosts',\n content: [\n {\n icon: ,\n status: '7 warnings',\n subtitle: 'subtitle'\n },\n {\n icon: ,\n status: '1 error',\n subtitle: 'subtitle'\n }\n ],\n layout: 'withSubtitle'\n }\n ]\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst AggregateStatusCards: React.FunctionComponent = () => {\n const renderContent = (content, layout) => {\n if (layout === 'icon') {\n return content[0].icon;\n }\n if (layout === 'multiIcon') {\n return (\n \n {content.map(({ icon, count }, index: number) => (\n \n \n {icon}\n \n {count}\n \n \n {content.length > 1 && index === 0 && (\n \n )}\n \n ))}\n \n );\n }\n if (layout === 'withSubtitle') {\n return (\n \n {content.map(({ icon, status, subtitle }, index) => (\n \n {icon}\n \n {status}\n {subtitle}\n \n \n ))}\n \n );\n }\n };\n return (\n \n {Object.keys(cardData).map((cardGroup, groupIndex) => {\n let galleryWidth;\n let cardAlign;\n let titleAlign;\n if (cardGroup === 'withSubtitle') {\n galleryWidth = '260px';\n cardAlign = '';\n titleAlign = 'center';\n } else {\n cardAlign = 'center';\n }\n return (\n \n \n {cardData[cardGroup].map(({ title, content, layout }, cardIndex) => (\n \n {title}\n {renderContent(content, layout)}\n \n ))}\n \n \n );\n })}\n \n );\n};","title":"Aggregate status card","lang":"ts"}}> + + , + 'Status': props => + {\n const [drawerExpanded, setDrawerExpanded] = React.useState(false);\n const handleDrawerToggleClick = () => {\n setDrawerExpanded(!drawerExpanded);\n };\n\n const [rowsExpanded, setRowsExpanded] = React.useState([false, false, false]);\n const handleToggleExpand = (_: any, rowIndex: number) => {\n const newRowsExpanded = [...rowsExpanded];\n newRowsExpanded[rowIndex] = !rowsExpanded[rowIndex];\n setRowsExpanded(newRowsExpanded);\n };\n\n const header = (\n \n \n Status\n \n \n );\n\n const columns = ['Components', 'Response Rate'];\n\n const rows = [\n {\n content: ['API Servers', '20%'],\n child: (\n \n )\n },\n {\n content: ['Controller Managers', '100%'],\n child: (\n \n )\n },\n {\n content: ['etcd', '91%'],\n child: (\n \n )\n }\n ];\n\n const popoverBodyContent = (\n <>\n
\n Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.\n
\n \n \n \n \n {columns.map((column, columnIndex) => (\n \n {column}\n \n ))}\n \n \n {rows.map((row, rowIndex) => {\n const parentRow = (\n \n \n {row.content.map((cell, cellIndex) => (\n \n {cell}\n \n ))}\n \n );\n const childRow = row.child ? (\n \n \n {row.child}\n \n \n ) : null;\n return (\n \n {parentRow}\n {childRow}\n \n );\n })}\n \n \n );\n\n const body = (\n \n \n \n \n \n \n \n \n Cluster\n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}>\n Control Panel\n \n \n \n \n \n \n \n \n \n \n \n \n Operators\n \n \n 1 degraded\n \n \n \n \n \n \n \n \n \n \n \n Image Vulnerabilities\n \n \n 0 vulnerabilities\n \n \n \n \n \n \n );\n\n const drawerTitle = (\n \n \n Notifications\n \n \n \n \n \n \n \n );\n\n const drawer = (\n \n \n \n \n \n \n \n This is a long description to show how the title will wrap if it is long and wraps to multiple lines.\n \n \n \n \n \n This is a warning notification description.\n \n \n \n \n \n \n );\n\n return (\n \n {header}\n {body}\n \n {drawer}\n \n );\n};","title":"Status","lang":"ts"}}> + + , + 'Status Tabbed': props => + \n },\n {\n status: 'Ready',\n resourceName: 'Resource name that is long and can wrap',\n detail: '123 Systems',\n icon: \n },\n {\n status: 'Running',\n resourceName: 'Resource name that is long and can wrap',\n detail: '122 Systems',\n icon: \n },\n {\n status: 'Ready',\n resourceName: 'Resource name that is long and can wrap',\n detail: '124 Systems',\n icon: \n }\n];\n\nconst Status: React.FunctionComponent = () => {\n const [activeTabKey, setActiveTabKey] = React.useState(0);\n const handleTabClick = (event: React.MouseEvent, tabIndex: number) => {\n setActiveTabKey(tabIndex);\n };\n\n const tabContent = (\n \n {descriptionListData.map(({ status, resourceName, detail, icon }, index) => (\n \n \n \n {icon}\n \n \n {status}\n \n \n \n \n \n {resourceName}\n
{detail}
\n \n \n ))}\n \n );\n\n return (\n <>\n \n \n \n Status\n \n \n \n \n {[1, 2, 3].map((tab, tabIndex) => (\n {`Object ${tabIndex + 1}`}}\n tabContentId={`tabContent${tabIndex}`}\n />\n ))}\n \n \n \n {[1, 2, 3].map((tab, tabIndex) => (\n \n \n \n );\n};","title":"Status Tabbed","lang":"ts"}}> + + , + 'Utilization card 1': props => + (\n \n \n \n \n \n Top Utilized Clusters\n \n \n \n \n \n \n Cluster-1204\n 27.3 cores available\n \n \n \n `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n \n \n \n \n View details\n \n \n \n \n \n \n \n Abcdef-1204\n 50.6 cores available\n \n \n \n `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n \n \n \n \n View details\n \n \n \n \n \n View all clusters\n \n \n \n \n)","title":"Utilization card 1","lang":"ts"}}> + + , + 'Utilization card 2': props => + (\n \n \n \n \n \n Top Utilized Clusters\n \n \n \n \n \n \n Cluster-1204\n 27.3 cores available\n \n \n \n `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n Abcdef-1204\n 50.6 cores available\n \n \n \n `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n View all clusters\n \n \n \n \n)","title":"Utilization card 2","lang":"ts"}}> + + , + 'Utilization card 3': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const selectItems = [\n ,\n ,\n ,\n \n ];\n\n return (\n \n Note: Custom CSS is used in this demo to align the card title and select toggle text to{' '}\n baseline alignment.\n
\n
\n \n \n \n \n \n \n Recommendations\n \n \n \n setIsOpen(!isOpen)}\n onToggle={() => setIsOpen(!isOpen)}\n isOpen={isOpen}\n placeholderText=\"Filter\"\n position=\"right\"\n isPlain\n >\n {selectItems}\n \n \n \n \n \n \n System\n \n \n \n 25 incidents detected\n \n \n \n \n }\n />\n }\n />\n }\n />\n }\n />\n \n \n \n \n \n \n See details\n \n \n \n \n \n );\n};","title":"Utilization card 3","lang":"ts"}}> + + , + 'Utilization card 4': props => + (\n \n \n \n \n \n CPU Usage\n \n \n \n (datum.x ? datum.x : null)}\n padding={{\n bottom: 0,\n left: 10,\n right: 150,\n top: 0\n }}\n width={350}\n >\n (datum.x ? `${datum.x}: ${datum.y}%` : null)}\n legendData={[{ name: `Capacity: 80%` }, { name: 'Warning at 60%' }, { name: 'Danger at 90%' }]}\n legendOrientation=\"vertical\"\n title=\"80%\"\n subTitle=\"of 100 GBps\"\n thresholds={[{ value: 60 }, { value: 90 }]}\n />\n {' '}\n \n \n See details\n \n \n \n \n)","title":"Utilization card 4","lang":"ts"}}> + + , + 'Nested cards': props => + {\n const [isCardExpanded1, onCardExpand1] = React.useState(true);\n const [isCardExpanded2, onCardExpand2] = React.useState(false);\n const [isCardExpanded3, onCardExpand3] = React.useState(false);\n const [isToggleOnRight, onCheckClick] = React.useState(false);\n\n return (\n <>\n
\n onCheckClick(!isToggleOnRight)}\n />\n
\n \n \n \n \n {' '}\n Hardware Monitor{' '}\n \n \n \n \n onCardExpand1(!isCardExpanded1)}\n isToggleRightAligned={isToggleOnRight}\n toggleButtonProps={{\n id: 'toggle-button-1',\n 'aria-label': 'Details',\n 'aria-labelledby': 'nested-cards-toggle-group-1-title toggle-button-1',\n 'aria-expanded': isCardExpanded1\n }}\n >\n \n CPU 1\n \n \n \n \n \n \n \n \n \n Temperature\n \n \n \n 64C\n \n \n \n \n \n \n \n
100C
\n
50C
\n
0C
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 100 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n Speed\n \n \n \n 2.3Ghz\n \n \n \n \n \n \n \n
3.6Ghz
\n
1.5Ghz
\n
0GHZ
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 3.6 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n onCardExpand3(!isCardExpanded3)}\n isToggleRightAligned={isToggleOnRight}\n toggleButtonProps={{\n id: 'toggle-button-2',\n 'aria-label': 'Details',\n 'aria-labelledby': 'nested-cards-toggle-group-2-title toggle-button-2',\n 'aria-expanded': isCardExpanded3\n }}\n >\n \n CPU 2\n \n \n \n \n \n \n \n \n \n Temperature\n \n \n \n 64C\n \n \n \n \n \n \n \n
100C
\n
50C
\n
0C
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 100 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n Speed\n \n \n \n 2.3Ghz\n \n \n \n \n \n \n \n
3.6Ghz
\n
1.5Ghz
\n
0GHZ
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 3.6 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n onCardExpand2(!isCardExpanded2)}\n isToggleRightAligned={isToggleOnRight}\n toggleButtonProps={{\n id: 'toggle-button-3',\n 'aria-label': 'Details',\n 'aria-labelledby': 'nested-cards-toggle-group-3-title toggle-button-3',\n 'aria-expanded': isCardExpanded2\n }}\n >\n \n CPU 3\n \n \n \n \n \n \n \n \n \n Temperature\n \n \n \n 64C\n \n \n \n \n \n \n \n
100C
\n
50C
\n
0C
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 100 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n Speed\n \n \n \n 2.3Ghz\n \n \n \n \n \n \n \n
3.6Ghz
\n
1.5Ghz
\n
0GHZ
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 3.6 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};","title":"Nested cards","lang":"js"}}> + + , + 'With accordion': props => + {\n const [openCPU, setOpenCPU] = React.useState('cpu1');\n\n return (\n \n \n \n \n Hardware Monitor\n \n \n \n \n \n \n {\n if (openCPU === 'cpu1') {\n setOpenCPU(null);\n } else {\n setOpenCPU('cpu1');\n }\n }}\n isExpanded={openCPU === 'cpu1'}\n >\n CPU 1\n \n \n \n \n \n \n \n Temperature\n \n \n \n 64C\n \n \n \n \n \n \n \n
100C
\n
50C
\n
0C
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 100 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n Speed\n \n \n \n 2.3Ghz\n \n \n \n \n \n \n \n
3.6Ghz
\n
1.5Ghz
\n
0GHZ
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 3.6 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n {\n if (openCPU === 'cpu2') {\n setOpenCPU(null);\n } else {\n setOpenCPU('cpu2');\n }\n }}\n isExpanded={openCPU === 'cpu2'}\n >\n CPU 2\n \n \n \n \n \n \n \n Temperature\n \n \n \n 64C\n \n \n \n \n \n \n \n
100C
\n
50C
\n
0C
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 100 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n Speed\n \n \n \n 2.3Ghz\n \n \n \n \n \n \n \n
3.6Ghz
\n
1.5Ghz
\n
0GHZ
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 3.6 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n {\n if (openCPU === 'cpu3') {\n setOpenCPU(null);\n } else {\n setOpenCPU('cpu3');\n }\n }}\n isExpanded={openCPU === 'cpu3'}\n >\n CPU 3\n \n \n \n \n \n \n \n Temperature\n \n \n \n 64C\n \n \n \n \n \n \n \n
100C
\n
50C
\n
0C
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 100 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n Speed\n \n \n \n 2.3Ghz\n \n \n \n \n \n \n \n
3.6Ghz
\n
1.5Ghz
\n
0GHZ
\n \n \n \n `${datum.name}: ${datum.y}`}\n constrainToVisibleArea\n />\n }\n height={60}\n maxDomain={{ y: 3.6 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};","title":"With accordion","lang":"ts"}}> + + , + 'Trend card 1': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const selectItems = [\n ,\n ,\n ,\n \n ];\n return (\n \n Note: Custom CSS is used in this demo to align the card title and select toggle text to{' '}\n baseline alignment.\n
\n
\n \n \n \n \n \n \n \n 1,050,765 IOPS\n \n \n \n Workload\n \n \n \n setIsOpen(!isOpen)}\n onToggle={() => setIsOpen(!isOpen)}\n placeholderText=\"Filter\"\n isOpen={isOpen}\n position=\"right\"\n isPlain\n >\n {selectItems}\n \n \n \n \n `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n );\n};","title":"Trend card 1","lang":"ts"}}> + + , + 'Trend card 2': props => + (\n \n \n \n \n \n \n \n \n \n \n 842 TB\n \n \n \n \n Storage capacity\n \n \n \n \n `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n \n \n \n \n \n \n \n \n Action 1\n \n \n Action 2\n \n \n \n \n \n \n)","title":"Trend card 2","lang":"ts"}}> + + , + 'Log view': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onActionSelect = event => {\n setIsOpen(!isOpen);\n };\n\n const onActionToggle = isOpen => {\n setIsOpen(isOpen);\n };\n\n const selectItems = [\n ,\n ,\n ,\n \n ];\n\n return (\n \n Note: Custom CSS is used in this demo to align the card title and select toggle text to{' '}\n baseline alignment.\n
\n
\n \n \n \n \n \n {selectItems}\n \n \n \n \n Activity\n \n \n \n \n \n \n Readiness probe failed\n \n Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:\n connection refused\n \n \n \n \n \n \n Successful assignment\n \n Successfully assigned default/example to ip-10-0-130-149.ec2.internal\n \n \n \n \n \n \n Pulling image\n Pulling image \"openshift/hello-openshift\"\n \n \n \n \n \n Created container\n Created container hello-openshift\n \n \n \n \n \n \n \n \n View all activity\n \n \n \n \n );\n};","title":"Log view","lang":"js"}}> + + , + 'Events view': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onActionSelect = event => {\n setIsOpen(!isOpen);\n };\n\n const onActionToggle = isOpen => {\n setIsOpen(isOpen);\n };\n\n const selectItems = [\n ,\n ,\n \n ];\n\n return (\n \n Note: Custom CSS is used in this demo to align the card title and select toggle text to{' '}\n baseline alignment.\n
\n
\n \n \n \n \n \n {selectItems}\n \n \n \n \n Events\n \n \n \n \n \n \n \n \n \n \n \n \n Readiness probe failed\n \n \n \n \n Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:\n connection refused\n \n \n \n \n \n \n \n \n \n \n \n \n Successful assignment\n \n \n \n \n Successfully assigned default/example to ip-10-0-130-149.ec2.internal\n \n \n \n \n \n \n \n \n \n \n \n \n Pulling image\n \n \n \n Pulling image \"openshift/hello-openshift\"\n \n \n \n \n \n \n \n \n \n \n \n Created container\n \n \n \n Created container hello-openshift\n \n \n \n \n \n \n \n \n View all events\n \n \n \n \n );\n};","title":"Events view","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Demos`} + + {React.createElement(pageData.examples["Horizontal card grid"])} + {React.createElement(pageData.examples["Horizontal split"])} + {React.createElement(pageData.examples["Details card"])} + {React.createElement(pageData.examples["Aggregate status card"])} + {React.createElement(pageData.examples["Status"])} + {React.createElement(pageData.examples["Status Tabbed"])} + {React.createElement(pageData.examples["Utilization card 1"])} + {React.createElement(pageData.examples["Utilization card 2"])} + {React.createElement(pageData.examples["Utilization card 3"])} + {React.createElement(pageData.examples["Utilization card 4"])} + {React.createElement(pageData.examples["Nested cards"])} + {React.createElement(pageData.examples["With accordion"])} + {React.createElement(pageData.examples["Trend card 1"])} + {React.createElement(pageData.examples["Trend card 2"])} + {React.createElement(pageData.examples["Log view"])} + {React.createElement(pageData.examples["Events view"])} + +); +Component.displayName = 'ComponentsCardReactDemosDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/card/react.js b/packages/react-docs/src/generated/components/card/react.js new file mode 100644 index 00000000000..084c1ee80d9 --- /dev/null +++ b/packages/react-docs/src/generated/components/card/react.js @@ -0,0 +1,494 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import pfLogo from '../../../../../react-core/src/components/Card/examples/./pfLogo.svg'; +import pfLogoSmall from '../../../../../react-core/src/components/Card/examples/./pf-logo-small.svg'; +const pageData = { + "id": "Card", + "section": "components", + "source": "react", + "slug": "/components/card/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Card/examples/Card.md", + "propComponents": [ + { + "name": "Card", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Card", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Card", + "defaultValue": "''" + }, + { + "name": "component", + "type": "unknown", + "description": "Sets the base component to render. defaults to article", + "defaultValue": "'article'" + }, + { + "name": "hasSelectableInput", + "type": "boolean", + "description": "Flag indicating that the card should render a hidden input to make it selectable", + "defaultValue": "false" + }, + { + "name": "id", + "type": "string", + "description": "ID of the Card. Also passed back in the CardHeader onExpand callback.", + "defaultValue": "''" + }, + { + "name": "isCompact", + "type": "boolean", + "description": "Modifies the card to include compact styling. Should not be used with isLarge.", + "defaultValue": "false" + }, + { + "name": "isDisabledRaised", + "type": "boolean", + "description": "Modifies a raised selectable card to have disabled styling", + "defaultValue": "false", + "beta": true + }, + { + "name": "isExpanded", + "type": "boolean", + "description": "Flag indicating if a card is expanded. Modifies the card to be expandable.", + "defaultValue": "false" + }, + { + "name": "isFlat", + "type": "boolean", + "description": "Modifies the card to include flat styling", + "defaultValue": "false" + }, + { + "name": "isFullHeight", + "type": "boolean", + "description": "Cause component to consume the available height of its container", + "defaultValue": "false" + }, + { + "name": "isHoverable", + "type": "boolean", + "description": "to make a card hoverable, use isSelectable or isSelectableRaised.", + "defaultValue": "false", + "deprecated": true + }, + { + "name": "isLarge", + "type": "boolean", + "description": "Modifies the card to be large. Should not be used with isCompact.", + "defaultValue": "false" + }, + { + "name": "isPlain", + "type": "boolean", + "description": "Modifies the card to include plain styling; this removes border and background", + "defaultValue": "false" + }, + { + "name": "isRounded", + "type": "boolean", + "description": "Modifies the card to include rounded styling", + "defaultValue": "false" + }, + { + "name": "isSelectable", + "type": "boolean", + "description": "Modifies the card to include selectable styling", + "defaultValue": "false" + }, + { + "name": "isSelectableRaised", + "type": "boolean", + "description": "Specifies the card is selectable, and applies the new raised styling on hover and select", + "defaultValue": "false", + "beta": true + }, + { + "name": "isSelected", + "type": "boolean", + "description": "Modifies the card to include selected styling", + "defaultValue": "false" + }, + { + "name": "onSelectableInputChange", + "type": "(labelledBy: string, event: React.FormEvent) => void", + "description": "Callback that executes when the selectable input is changed", + "defaultValue": "() => {}" + }, + { + "name": "ouiaSafe", + "type": "No type info", + "defaultValue": "true" + }, + { + "name": "selectableInputAriaLabel", + "type": "string", + "description": "Aria label to apply to the selectable input if one is rendered" + } + ] + }, + { + "name": "CardActions", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Card Action", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Action", + "defaultValue": "''" + }, + { + "name": "hasNoOffset", + "type": "boolean", + "description": "Flag indicating that the actions have no offset", + "defaultValue": "false" + } + ] + }, + { + "name": "CardHeader", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the CardHeader", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the CardHeader", + "defaultValue": "''" + }, + { + "name": "id", + "type": "string", + "description": "ID of the card header." + }, + { + "name": "isToggleRightAligned", + "type": "boolean", + "description": "Whether to right-align expandable toggle button" + }, + { + "name": "onExpand", + "type": "(event: React.MouseEvent, id: string) => void", + "description": "Callback expandable card" + }, + { + "name": "toggleButtonProps", + "type": "any", + "description": "Additional props for expandable toggle button" + } + ] + }, + { + "name": "CardHeaderMain", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Card Head Main", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Card Head Main", + "defaultValue": "''" + } + ] + }, + { + "name": "CardTitle", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the CardTitle", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the CardTitle", + "defaultValue": "''" + }, + { + "name": "component", + "type": "unknown", + "description": "Sets the base component to render. defaults to div", + "defaultValue": "'div'" + } + ] + }, + { + "name": "CardBody", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Card Body", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Card Body", + "defaultValue": "''" + }, + { + "name": "component", + "type": "unknown", + "description": "Sets the base component to render. defaults to div", + "defaultValue": "'div'" + }, + { + "name": "isFilled", + "type": "boolean", + "description": "Enables the body Content to fill the height of the card", + "defaultValue": "true" + } + ] + }, + { + "name": "CardFooter", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Card Footer", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Footer", + "defaultValue": "''" + }, + { + "name": "component", + "type": "unknown", + "description": "Sets the base component to render. defaults to div", + "defaultValue": "'div'" + } + ] + }, + { + "name": "CardExpandableContent", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Card Body", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Card Body", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-card" + ], + "examples": [ + "Basic", + "With modifiers", + "With image and actions", + "Header in card head", + "Only actions in card head (no header/footer)", + "Only image in card head", + "With no footer", + "With no header", + "With only a body section", + "With multiple body sections", + "With only a body section that fills", + "Selectable", + "Selectable accessibility highlight", + "With heading element", + "Expandable", + "Expandable with icon", + "Legacy selectable" + ] +}; +pageData.liveContext = { + pfLogo, + pfLogoSmall +}; +pageData.examples = { + 'Basic': props => + (\n \n Header\n Body\n Footer\n \n);\n","title":"Basic","lang":"ts"}}> + + , + 'With modifiers': props => + {\n const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];\n const [modifiers, setModifiers] = React.useState({});\n\n return (\n \n
\n {mods.map(mod => (\n {\n modifiers[mod] = checked;\n setModifiers({ ...modifiers });\n }}\n />\n ))}\n
\n
\n \n Header\n Body\n Footer\n \n
\n \n );\n};\n","title":"With modifiers","lang":"ts"}}> + + , + 'With image and actions': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n const [isChecked, setIsChecked] = React.useState(false);\n const [hasNoOffset, setHasNoOffset] = React.useState(false);\n\n const onSelect = () => {\n setIsOpen(!isOpen);\n };\n const onClick = (checked: boolean) => {\n setIsChecked(checked);\n };\n const toggleOffset = (checked: boolean) => {\n setHasNoOffset(checked);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n\n return (\n <>\n \n \n \n \n \n \n }\n isOpen={isOpen}\n isPlain\n dropdownItems={dropdownItems}\n position={'right'}\n />\n \n \n \n Header\n Body\n Footer\n \n
\n \n
\n \n );\n};\n","title":"With image and actions","lang":"ts"}}> + + , + 'Header in card head': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n const [isChecked, setIsChecked] = React.useState(false);\n\n const onSelect = () => {\n setIsOpen(!isOpen);\n };\n const onClick = (checked: boolean) => {\n setIsChecked(checked);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n\n return (\n \n \n \n }\n isOpen={isOpen}\n isPlain\n dropdownItems={dropdownItems}\n position={'right'}\n />\n \n \n \n This is a really really really really really really really really really really long header\n \n \n Body\n Footer\n \n );\n};\n","title":"Header in card head","lang":"ts"}}> + + , + 'Only actions in card head (no header/footer)': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n const [isChecked, setIsChecked] = React.useState(false);\n\n const onSelect = () => {\n setIsOpen(!isOpen);\n };\n const onClick = (checked: boolean) => {\n setIsChecked(checked);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n\n return (\n \n \n \n }\n isOpen={isOpen}\n isPlain\n dropdownItems={dropdownItems}\n position={'right'}\n />\n \n \n \n This is the card body. There are only actions in the card head.\n \n );\n};\n","title":"Only actions in card head (no header/footer)","lang":"ts"}}> + + , + 'Only image in card head': props => + (\n \n \n \n \n \n \n Header\n Body\n Footer\n \n);\n","title":"Only image in card head","lang":"ts"}}> + + , + 'With no footer': props => + (\n \n Header\n This card has no footer\n \n);\n","title":"With no footer","lang":"ts"}}> + + , + 'With no header': props => + (\n \n This card has no header\n Footer\n \n);\n","title":"With no header","lang":"ts"}}> + + , + 'With only a body section': props => + (\n \n Body\n \n);\n","title":"With only a body section","lang":"ts"}}> + + , + 'With multiple body sections': props => + (\n \n Header\n Body\n Body\n Body\n Footer\n \n);\n","title":"With multiple body sections","lang":"ts"}}> + + , + 'With only a body section that fills': props => + (\n \n Header\n Body pf-m-no-fill\n Body pf-m-no-fill\n Body\n Footer\n \n);\n","title":"With only a body section that fills","lang":"ts"}}> + + , + 'Selectable': props => + {\n const [selected, setSelected] = React.useState('');\n const [isKebabOpen, setIsKebabOpen] = React.useState(false);\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n if (event.target !== event.currentTarget) {\n return;\n }\n if ([' ', 'Enter'].includes(event.key)) {\n event.preventDefault();\n const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;\n setSelected(newSelected);\n }\n };\n\n const onClick = (event: React.MouseEvent) => {\n const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;\n setSelected(newSelected);\n };\n\n const onChange = (labelledById: string, _event: React.FormEvent) => {\n const newSelected = labelledById === selected ? null : labelledById;\n setSelected(newSelected);\n };\n\n const onToggle = (\n isOpen: boolean,\n event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent\n ) => {\n event.stopPropagation();\n setIsKebabOpen(isOpen);\n };\n\n const onSelect = (event: React.SyntheticEvent) => {\n event.stopPropagation();\n setIsKebabOpen(false);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n\n return (\n \n \n \n \n }\n isOpen={isKebabOpen}\n isPlain\n dropdownItems={dropdownItems}\n position={'right'}\n />\n \n \n First card\n This is a selectable card. Click me to select me. Click again to deselect me.\n \n
\n \n Second card\n This is a selectable card. Click me to select me. Click again to deselect me.\n \n
\n \n Third card\n This is a raised but disabled card.\n \n \n );\n};\n","title":"Selectable","lang":"ts"}}> + + , + 'Selectable accessibility highlight': props => + {\n const [selected, setSelected] = React.useState('');\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n if (event.target !== event.currentTarget) {\n return;\n }\n if ([' ', 'Enter'].includes(event.key)) {\n event.preventDefault();\n const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;\n setSelected(newSelected);\n }\n };\n\n const onClick = (event: React.MouseEvent) => {\n const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;\n setSelected(newSelected);\n };\n\n const onChange = (labelledById: string, _event: React.FormEvent) => {\n const newSelected = labelledById === selected ? null : labelledById;\n setSelected(newSelected);\n };\n\n return (\n \n \n Selectable card with proper accessibility considerations\n \n When using a screen reader a checkbox will become navigable that indicates this card is selectable and\n communicate if it is currently selected.\n \n \n
\n \n Selectable card without proper accessibility considerations\n \n When using a screen reader there are no indications that this card is selectable or if it is currently\n selected.\n \n \n \n );\n};\n","title":"Selectable accessibility highlight","lang":"ts"}}> + +

+ {`This example demonstrates how the `} + + + {`hasSelectableInput`} + + {` and `} + + + {`onSelectableInputChange`} + + {` props improve accessibility for selectable cards.`} +

+ +

+ {`The first card sets `} + + + {`hasSelectableInput`} + + {` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, it communicates the current selection state as well.`} +

+ +

+ {`By default this input will have an aria-label that corresponds to the title given to the card if using the card title component. If you don't use the card title component in your selectable card, you must pass a custom aria-label for this input using the `} + + + {`selectableInputAriaLabel`} + + {` prop.`} +

+ +

+ {`The first card also (by passing an onchange callback to `} + + + {`onSelectableInputChange`} + + {`) enables the selection/deselection of the associated card by checking/unchecking the checkbox input.`} +

+ +

+ {`The second card does not set `} + + + {`hasSelectableInput`} + + {` to true, so the input is not rendered. It does not communicate to screen reader users that it is selectable or if it is currently selected.`} +

+ +

+ {`To best understand this example it is encouraged that you navigate both of these cards using a screen reader.`} +

+ , + 'With heading element': props => + (\n \n Header within an {'

'} element\n Body\n Footer\n \n);\n","title":"With heading element","lang":"ts"}}> + + , + 'Expandable': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n const [isChecked, setIsChecked] = React.useState(false);\n const [isExpanded, setIsExpanded] = React.useState(false);\n const [isToggleRightAligned, setIsToggleRightAligned] = React.useState(false);\n\n const onSelect = () => {\n setIsOpen(!isOpen);\n };\n\n const onClick = (checked: boolean) => {\n setIsChecked(checked);\n };\n\n const onExpand = (event: React.MouseEvent, id: string) => {\n // eslint-disable-next-line no-console\n console.log(id);\n setIsExpanded(!isExpanded);\n };\n\n const onRightAlign = () => {\n setIsToggleRightAligned(!isToggleRightAligned);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n\n return (\n \n
\n \n
\n \n \n \n }\n isOpen={isOpen}\n isPlain\n dropdownItems={dropdownItems}\n position={'right'}\n />\n \n \n Header\n \n \n Body\n Footer\n \n \n \n );\n};\n","title":"Expandable","lang":"ts"}}> + + , + 'Expandable with icon': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n const [isChecked, setIsChecked] = React.useState(false);\n const [isExpanded, setIsExpanded] = React.useState(false);\n\n const onSelect = () => {\n setIsOpen(!isOpen);\n };\n\n const onClick = (checked: boolean) => {\n setIsChecked(checked);\n };\n\n const onExpand = (event: React.MouseEvent, id: string) => {\n // eslint-disable-next-line no-console\n console.log(id);\n setIsExpanded(!isExpanded);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n\n return (\n \n \n \"PatternFly\n \n }\n isOpen={isOpen}\n isPlain\n dropdownItems={dropdownItems}\n position={'right'}\n />\n \n \n \n \n Body\n Footer\n \n \n );\n};\n","title":"Expandable with icon","lang":"ts"}}> + + , + 'Legacy selectable': props => + {\n const [selected, setSelected] = React.useState('');\n const [isKebabOpen, setIsKebabOpen] = React.useState(false);\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n if (event.target !== event.currentTarget) {\n return;\n }\n if ([13, 32].includes(event.keyCode)) {\n event.preventDefault();\n const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;\n setSelected(newSelected);\n }\n };\n\n const onClick = (event: React.MouseEvent) => {\n const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;\n setSelected(newSelected);\n };\n\n const onChange = (labelledById: string, _event: React.FormEvent) => {\n const newSelected = labelledById === selected ? null : labelledById;\n setSelected(newSelected);\n };\n\n const onToggle = (isOpen: boolean, event: any) => {\n event.stopPropagation();\n setIsKebabOpen(isOpen);\n };\n\n const onSelect = (event: React.SyntheticEvent) => {\n event.stopPropagation();\n setIsKebabOpen(!isKebabOpen);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n\n return (\n <>\n \n \n \n }\n isOpen={isKebabOpen}\n isPlain\n dropdownItems={dropdownItems}\n position={'right'}\n />\n \n \n First legacy selectable card\n This is a selectable card. Click me to select me. Click again to deselect me.\n \n
\n \n Second legacy selectable card\n This is a selectable card. Click me to select me. Click again to deselect me.\n \n \n );\n};\n","title":"Legacy selectable","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["With modifiers"])} + {React.createElement(pageData.examples["With image and actions"])} + {React.createElement(pageData.examples["Header in card head"])} + {React.createElement(pageData.examples["Only actions in card head (no header/footer)"])} + {React.createElement(pageData.examples["Only image in card head"])} + {React.createElement(pageData.examples["With no footer"])} + {React.createElement(pageData.examples["With no header"])} + {React.createElement(pageData.examples["With only a body section"])} + {React.createElement(pageData.examples["With multiple body sections"])} + {React.createElement(pageData.examples["With only a body section that fills"])} + {React.createElement(pageData.examples["Selectable"])} + {React.createElement(pageData.examples["Selectable accessibility highlight"])} + {React.createElement(pageData.examples["With heading element"])} + {React.createElement(pageData.examples["Expandable"])} + {React.createElement(pageData.examples["Expandable with icon"])} + {React.createElement(pageData.examples["Legacy selectable"])} + +); +Component.displayName = 'ComponentsCardReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/checkbox/react.js b/packages/react-docs/src/generated/components/checkbox/react.js new file mode 100644 index 00000000000..8abde7ff202 --- /dev/null +++ b/packages/react-docs/src/generated/components/checkbox/react.js @@ -0,0 +1,151 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import '../../../../../react-core/src/components/Checkbox/examples/./checkbox.css'; +const pageData = { + "id": "Checkbox", + "section": "components", + "source": "react", + "slug": "/components/checkbox/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Checkbox/examples/Checkbox.md", + "propComponents": [ + { + "name": "Checkbox", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Aria-label of the checkbox." + }, + { + "name": "body", + "type": "React.ReactNode", + "description": "Body text of the checkbox" + }, + { + "name": "checked", + "type": "boolean", + "description": "" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Checkbox.", + "defaultValue": "''" + }, + { + "name": "component", + "type": "React.ElementType", + "description": "Sets the input wrapper component to render. Defaults to
", + "defaultValue": "'div'" + }, + { + "name": "description", + "type": "React.ReactNode", + "description": "Description text of the checkbox." + }, + { + "name": "id", + "type": "string", + "description": "Id of the checkbox.", + "required": true + }, + { + "name": "isChecked", + "type": "boolean | null", + "description": "Flag to show if the Checkbox is checked. If null, the checkbox will be indeterminate (partially checked).", + "defaultValue": "false" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Flag to show if the Checkbox is disabled.", + "defaultValue": "false" + }, + { + "name": "isValid", + "type": "boolean", + "description": "Flag to show if the Checkbox selection is valid or invalid.", + "defaultValue": "true" + }, + { + "name": "label", + "type": "React.ReactNode", + "description": "Label text of the checkbox." + }, + { + "name": "onChange", + "type": "(checked: boolean, event: React.FormEvent) => void", + "description": "A callback for when the Checkbox selection changes.", + "defaultValue": "() => {}" + }, + { + "name": "ouiaSafe", + "type": "No type info", + "defaultValue": "true" + } + ] + } + ], + "cssPrefix": [ + "pf-c-check" + ], + "examples": [ + "Controlled", + "Uncontrolled", + "Disabled", + "Checkbox with description", + "Checkbox with body", + "Checkbox with description and body", + "Standalone input" + ] +}; +pageData.examples = { + 'Controlled': props => + {\n const [isChecked1, setIsChecked1] = React.useState(false);\n const [isChecked2, setIsChecked2] = React.useState(false);\n const [isChecked3, setIsChecked3] = React.useState(false);\n const [isChecked4, setIsChecked4] = React.useState(false);\n\n const handleChange = (checked: boolean, event: React.FormEvent) => {\n const target = event.currentTarget;\n const name = target.name;\n\n switch (name) {\n case 'check1':\n setIsChecked1(checked);\n break;\n case 'check2':\n setIsChecked2(checked);\n break;\n case 'check3':\n setIsChecked3(checked);\n break;\n case 'check4':\n setIsChecked4(checked);\n break;\n default:\n // eslint-disable-next-line no-console\n console.log(name);\n }\n };\n\n React.useEffect(() => {\n if (isChecked1 !== null) {\n setIsChecked2(isChecked1);\n setIsChecked3(isChecked1);\n }\n }, [isChecked1]);\n\n React.useEffect(() => {\n setIsChecked1((isChecked2 && isChecked3) || (isChecked2 || isChecked3 ? null : false));\n }, [isChecked2, isChecked3]);\n\n return (\n \n \n \n \n \n \n );\n};\n","title":"Controlled","lang":"ts"}}> + + , + 'Uncontrolled': props => + (\n \n \n \n \n);\n","title":"Uncontrolled","lang":"ts"}}> + + , + 'Disabled': props => + (\n \n \n \n \n);\n","title":"Disabled","lang":"ts"}}> + + , + 'Checkbox with description': props => + (\n \n);\n","title":"Checkbox with description","lang":"ts"}}> + + , + 'Checkbox with body': props => + (\n \n);\n","title":"Checkbox with body","lang":"ts"}}> + + , + 'Checkbox with description and body': props => + (\n \n);\n","title":"Checkbox with description and body","lang":"ts"}}> + + , + 'Standalone input': props => + (\n \n);\n","title":"Standalone input","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Controlled"])} + {React.createElement(pageData.examples["Uncontrolled"])} + {React.createElement(pageData.examples["Disabled"])} + {React.createElement(pageData.examples["Checkbox with description"])} + {React.createElement(pageData.examples["Checkbox with body"])} + {React.createElement(pageData.examples["Checkbox with description and body"])} + {React.createElement(pageData.examples["Standalone input"])} + +); +Component.displayName = 'ComponentsCheckboxReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/chip-group/react.js b/packages/react-docs/src/generated/components/chip-group/react.js new file mode 100644 index 00000000000..a3ba9571f32 --- /dev/null +++ b/packages/react-docs/src/generated/components/chip-group/react.js @@ -0,0 +1,189 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Chip group", + "section": "components", + "source": "react", + "slug": "/components/chip-group/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ChipGroup/examples/ChipGroup.md", + "propComponents": [ + { + "name": "Chip", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the chip text" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the chip item", + "defaultValue": "''" + }, + { + "name": "closeBtnAriaLabel", + "type": "string", + "description": "Aria Label for close button", + "defaultValue": "'close'" + }, + { + "name": "component", + "type": "React.ReactNode", + "description": "Component that will be used for chip. It is recommended that \n \n }\n >\n 2.3.4-2-redhat\n \n);\n","title":"Inline compact with additional action","lang":"ts"}}> + + , + 'Inline compact in sentence': props => + (\n \n Basic\n
\n Lorem ipsum{' '}\n {\n \n 2.3.4-2-redhat\n \n }\n dolor sit amet.\n

\n Long copy string\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}\n {\n \n https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890\n \n }{' '}\n Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.\n

\n Long copy string in block\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}\n {\n \n https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890\n \n }{' '}\n Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.\n \n);\n","title":"Inline compact in sentence","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Read Only"])} + {React.createElement(pageData.examples["Expanded"])} + {React.createElement(pageData.examples["Read only expanded"])} + {React.createElement(pageData.examples["Read only expanded by default"])} + {React.createElement(pageData.examples["Expanded with array"])} + {React.createElement(pageData.examples["JSON object (wrap code with pre)"])} + {React.createElement(pageData.examples["Inline compact"])} + {React.createElement(pageData.examples["Inline compact code"])} + {React.createElement(pageData.examples["Inline compact with additional action"])} + {React.createElement(pageData.examples["Inline compact in sentence"])} + +); +Component.displayName = 'ComponentsClipboardCopyReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/code-block/react.js b/packages/react-docs/src/generated/components/code-block/react.js new file mode 100644 index 00000000000..7a7263c2a73 --- /dev/null +++ b/packages/react-docs/src/generated/components/code-block/react.js @@ -0,0 +1,110 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; +const pageData = { + "id": "Code block", + "section": "components", + "source": "react", + "slug": "/components/code-block/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md", + "propComponents": [ + { + "name": "CodeBlock", + "description": "", + "props": [ + { + "name": "actions", + "type": "React.ReactNode", + "description": "Actions in the code block header. Should be wrapped with CodeBlockAction.", + "defaultValue": "null" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the code block", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes passed to the code block wrapper" + } + ] + }, + { + "name": "CodeBlockAction", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the code block action", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes passed to the code block action" + } + ] + }, + { + "name": "CodeBlockCode", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Code rendered inside the code block", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes passed to the code block pre wrapper" + }, + { + "name": "codeClassName", + "type": "string", + "description": "Additional classes passed to the code block code" + } + ] + } + ], + "cssPrefix": [ + "pf-c-code-block" + ], + "examples": [ + "Basic", + "Expandable" + ] +}; +pageData.liveContext = { + CopyIcon, + PlayIcon +}; +pageData.examples = { + 'Basic': props => + {\n const [copied, setCopied] = React.useState(false);\n\n const clipboardCopyFunc = (event, text) => {\n const clipboard = event.currentTarget.parentElement;\n const el = document.createElement('textarea');\n el.value = text.toString();\n clipboard.appendChild(el);\n el.select();\n document.execCommand('copy');\n clipboard.removeChild(el);\n };\n\n const onClick = (event, text) => {\n clipboardCopyFunc(event, text);\n setCopied(true);\n };\n\n const code = `apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo0oooo00ooo\nspec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n const actions = (\n \n \n onClick(e, code)}\n exitDelay={600}\n maxWidth=\"110px\"\n variant=\"plain\"\n >\n {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}\n \n \n \n \n \n \n );\n\n return (\n \n {code}\n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Expandable': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const [copied, setCopied] = React.useState(false);\n\n const onToggle = isExpanded => {\n setIsExpanded(isExpanded);\n };\n\n const clipboardCopyFunc = (event, text) => {\n const clipboard = event.currentTarget.parentElement;\n const el = document.createElement('textarea');\n el.value = text.toString();\n clipboard.appendChild(el);\n el.select();\n document.execCommand('copy');\n clipboard.removeChild(el);\n };\n\n const onClick = (event, text) => {\n clipboardCopyFunc(event, text);\n setCopied(true);\n };\n\n const copyBlock = `apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo\nspec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n const code = `apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo`;\n const expandedCode = `spec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n const actions = (\n \n \n onClick(e, copyBlock)}\n exitDelay={600}\n maxWidth=\"110px\"\n variant=\"plain\"\n >\n {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}\n \n \n \n \n \n \n );\n\n return (\n \n \n {code}\n \n {expandedCode}\n \n \n \n {isExpanded ? 'Show Less' : 'Show More'}\n \n \n );\n};\n","title":"Expandable","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Expandable"])} + +); +Component.displayName = 'ComponentsCodeBlockReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/code-editor/react.js b/packages/react-docs/src/generated/components/code-editor/react.js new file mode 100644 index 00000000000..9d74fd4e034 --- /dev/null +++ b/packages/react-docs/src/generated/components/code-editor/react.js @@ -0,0 +1,625 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; +const pageData = { + "id": "Code editor", + "section": "components", + "source": "react", + "slug": "/components/code-editor/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md", + "propComponents": [ + { + "name": "CodeEditor", + "description": "", + "props": [ + { + "name": "className", + "type": "string", + "description": "additional classes added to the code editor", + "defaultValue": "''" + }, + { + "name": "code", + "type": "string", + "description": "code displayed in code editor", + "defaultValue": "''" + }, + { + "name": "copyButtonAriaLabel", + "type": "string", + "description": "Accessible label for the copy button", + "defaultValue": "'Copy code to clipboard'" + }, + { + "name": "copyButtonSuccessTooltipText", + "type": "string", + "description": "Text to display in the tooltip on the copy button after code copied to clipboard", + "defaultValue": "'Content added to clipboard'" + }, + { + "name": "copyButtonToolTipText", + "type": "string", + "description": "Text to display in the tooltip on the copy button before text is copied", + "defaultValue": "'Copy to clipboard'" + }, + { + "name": "customControls", + "type": "React.ReactNode | React.ReactNode[]", + "description": "A single node or array of nodes - ideally CodeEditorControls - to display above code editor", + "defaultValue": "null" + }, + { + "name": "downloadButtonAriaLabel", + "type": "string", + "description": "Accessible label for the download button", + "defaultValue": "'Download code'" + }, + { + "name": "downloadButtonToolTipText", + "type": "string", + "description": "Text to display in the tooltip on the download button", + "defaultValue": "'Download'" + }, + { + "name": "downloadFileName", + "type": "string", + "description": "Name of the file if user downloads code to local file", + "defaultValue": "Date.now().toString()" + }, + { + "name": "emptyState", + "type": "React.ReactNode", + "description": "Content to display in space of the code editor when there is no code to display", + "defaultValue": "''" + }, + { + "name": "emptyStateBody", + "type": "React.ReactNode", + "description": "Override default empty state body text", + "defaultValue": "'Drag and drop a file or upload one.'" + }, + { + "name": "emptyStateButton", + "type": "React.ReactNode", + "description": "Override default empty state title text", + "defaultValue": "'Browse'" + }, + { + "name": "emptyStateLink", + "type": "React.ReactNode", + "description": "Override default empty state body text", + "defaultValue": "'Start from scratch'" + }, + { + "name": "emptyStateTitle", + "type": "React.ReactNode", + "description": "Override default empty state title text", + "defaultValue": "'Start editing'" + }, + { + "name": "headerMainContent", + "type": "string", + "description": "Editor header main content title", + "defaultValue": "''" + }, + { + "name": "height", + "type": "string | 'sizeToFit'", + "description": "Height of code editor. Defaults to 100%. 'sizeToFit' will automatically change the height to the height of the content.", + "defaultValue": "''" + }, + { + "name": "isCopyEnabled", + "type": "boolean", + "description": "Flag to add copy button to code editor actions", + "defaultValue": "false" + }, + { + "name": "isDarkTheme", + "type": "boolean", + "description": "Flag indicating the editor is styled using monaco's dark theme", + "defaultValue": "false" + }, + { + "name": "isDownloadEnabled", + "type": "boolean", + "description": "Flag to add download button to code editor actions", + "defaultValue": "false" + }, + { + "name": "isLanguageLabelVisible", + "type": "boolean", + "description": "Flag to include a label indicating the currently configured editor language", + "defaultValue": "false" + }, + { + "name": "isLineNumbersVisible", + "type": "boolean", + "description": "Flag indicating the editor is displaying line numbers", + "defaultValue": "true" + }, + { + "name": "isMinimapVisible", + "type": "boolean", + "description": "Flag to add the minimap to the code editor", + "defaultValue": "false" + }, + { + "name": "isReadOnly", + "type": "boolean", + "description": "Flag indicating the editor is read only", + "defaultValue": "false" + }, + { + "name": "isUploadEnabled", + "type": "boolean", + "description": "Flag to add upload button to code editor actions. Also makes the code editor accept a file using drag and drop", + "defaultValue": "false" + }, + { + "name": "language", + "type": "Language", + "description": "language displayed in the editor", + "defaultValue": "Language.plaintext" + }, + { + "name": "loading", + "type": "React.ReactNode", + "description": "The loading screen before the editor will be loaded. Defaults 'loading...'", + "defaultValue": "''" + }, + { + "name": "onChange", + "type": "ChangeHandler", + "description": "Function which fires each time the content of the code editor is manually changed. Does not fire when a file is uploaded." + }, + { + "name": "onCodeChange", + "type": "(value: string) => void", + "description": "Function which fires each time the code changes in the code editor", + "defaultValue": "() => {}" + }, + { + "name": "onEditorDidMount", + "type": "EditorDidMount", + "description": "Callback which fires after the code editor is mounted containing\na reference to the monaco editor and the monaco instance", + "defaultValue": "() => {}" + }, + { + "name": "options", + "type": "editor.IStandaloneEditorConstructionOptions", + "description": "Refer to Monaco interface {monaco.editor.IStandaloneEditorConstructionOptions}.", + "defaultValue": "{}" + }, + { + "name": "overrideServices", + "type": "editor.IEditorOverrideServices", + "description": "Refer to Monaco interface {monaco.editor.IEditorOverrideServices}.", + "defaultValue": "{}" + }, + { + "name": "shortcutsPopoverButtonText", + "type": "string", + "description": "Text to show in the button to open the shortcut popover", + "defaultValue": "'View Shortcuts'" + }, + { + "name": "shortcutsPopoverProps", + "type": "PopoverProps", + "description": "Properties for the shortcut popover", + "defaultValue": "{\n bodyContent: '',\n 'aria-label': 'Keyboard Shortcuts',\n ...Popover.defaultProps\n}" + }, + { + "name": "showEditor", + "type": "boolean", + "description": "Flag to show the editor", + "defaultValue": "true" + }, + { + "name": "toolTipCopyExitDelay", + "type": "number", + "description": "The delay before tooltip fades after code copied", + "defaultValue": "1600" + }, + { + "name": "toolTipDelay", + "type": "number", + "description": "The entry and exit delay for all tooltips", + "defaultValue": "300" + }, + { + "name": "toolTipMaxWidth", + "type": "string", + "description": "The max width of the tooltips on all button", + "defaultValue": "'100px'" + }, + { + "name": "toolTipPosition", + "type": "TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'", + "description": "The position of tooltips on all buttons", + "defaultValue": "'top'" + }, + { + "name": "uploadButtonAriaLabel", + "type": "string", + "description": "Accessible label for the upload button", + "defaultValue": "'Upload code'" + }, + { + "name": "uploadButtonToolTipText", + "type": "string", + "description": "Text to display in the tooltip on the upload button", + "defaultValue": "'Upload'" + }, + { + "name": "width", + "type": "string", + "description": "Width of code editor. Defaults to 100%", + "defaultValue": "''" + } + ] + }, + { + "name": "CodeEditorControl", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "accessible label for the code editor control" + }, + { + "name": "className", + "type": "string", + "description": "additional classes added to the Code editor control" + }, + { + "name": "entryDelay", + "type": "number", + "description": "Delay in ms before the tooltip appears.", + "defaultValue": "300" + }, + { + "name": "exitDelay", + "type": "number", + "description": "Delay in ms before the tooltip disappears.", + "defaultValue": "0" + }, + { + "name": "icon", + "type": "React.ReactNode", + "description": "icon rendered inside the code editor control", + "required": true + }, + { + "name": "isVisible", + "type": "boolean", + "description": "Flag indicating that the button is visible above the code editor", + "defaultValue": "true" + }, + { + "name": "maxWidth", + "type": "string", + "description": "Maximum width of the tooltip (default 150px).", + "defaultValue": "'100px'" + }, + { + "name": "onClick", + "type": "(code: string, event?: any) => void", + "description": "Event handler for the click of the button", + "defaultValue": "() => {}" + }, + { + "name": "position", + "type": "PopoverPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'", + "description": "Copy button popover position.", + "defaultValue": "'top'" + }, + { + "name": "toolTipText", + "type": "React.ReactNode", + "description": "Text to display in the tooltip", + "required": true + } + ] + }, + { + "name": "Popover", + "description": "", + "props": [ + { + "name": "alertSeverityScreenReaderText", + "type": "string", + "description": "Text announced by screen reader when alert severity variant is set to indicate severity level", + "beta": true + }, + { + "name": "alertSeverityVariant", + "type": "'default' | 'info' | 'warning' | 'success' | 'danger'", + "description": "Severity variants for an alert popover. This modifies the color of the header to match the severity.", + "beta": true + }, + { + "name": "animationDuration", + "type": "number", + "description": "CSS fade transition animation duration", + "defaultValue": "300" + }, + { + "name": "appendTo", + "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement)", + "description": "The element to append the popover to, defaults to body", + "defaultValue": "() => document.body" + }, + { + "name": "aria-label", + "type": "string", + "description": "Accessible label, required when header is not present", + "defaultValue": "''" + }, + { + "name": "bodyContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Body content\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. bodyContent={hide => }", + "required": true + }, + { + "name": "boundary", + "type": "'scrollParent' | 'window' | 'viewport' | HTMLElement", + "description": "- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead", + "deprecated": true + }, + { + "name": "children", + "type": "ReactElement", + "description": "The reference element to which the Popover is relatively placed to.\nIf you cannot wrap the reference with the Popover, you can use the reference prop instead.\nUsage: " + }, + { + "name": "className", + "type": "string", + "description": "Popover additional class", + "defaultValue": "''" + }, + { + "name": "closeBtnAriaLabel", + "type": "string", + "description": "Aria label for the Close button", + "defaultValue": "'Close'" + }, + { + "name": "distance", + "type": "number", + "description": "Distance of the popover to its target, defaults to 25", + "defaultValue": "25" + }, + { + "name": "enableFlip", + "type": "boolean", + "description": "If true, tries to keep the popover in view by flipping it if necessary.\nIf the position is set to 'auto', this prop is ignored", + "defaultValue": "true" + }, + { + "name": "flipBehavior", + "type": "'flip'\n| (\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'top-start'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-end'\n | 'left-start'\n | 'left-end'\n | 'right-start'\n | 'right-end'\n )[]", + "description": "The desired position to flip the popover to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space.\nYou can also pass an array of positions that determines the flip order. It should contain the initial position\nfollowed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to\n['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no\nspace to the right, so it finally shows the popover on the left.", + "defaultValue": "['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']" + }, + { + "name": "footerContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Footer content\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. footerContent={hide => }", + "defaultValue": "null" + }, + { + "name": "hasAutoWidth", + "type": "boolean", + "description": "Removes fixed-width and allows width to be defined by contents", + "defaultValue": "false" + }, + { + "name": "hasNoPadding", + "type": "boolean", + "description": "Allows content to touch edges of popover container", + "defaultValue": "false" + }, + { + "name": "headerComponent", + "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "description": "Sets the heading level to use for the popover header. Default is h6.", + "defaultValue": "'h6'" + }, + { + "name": "headerContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Simple header content to be placed within a title.\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. headerContent={hide => }", + "defaultValue": "null" + }, + { + "name": "headerIcon", + "type": "React.ReactNode", + "description": "Icon to be displayed in the popover header *", + "defaultValue": "null", + "beta": true + }, + { + "name": "hideOnOutsideClick", + "type": "boolean", + "description": "Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user)", + "defaultValue": "true" + }, + { + "name": "id", + "type": "string", + "description": "id used as part of the various popover elements (popover-${id}-header/body/footer)" + }, + { + "name": "isVisible", + "type": "boolean", + "description": "True to show the popover programmatically. Used in conjunction with the shouldClose prop.\nBy default, the popover child element handles click events automatically. If you want to control this programmatically,\nthe popover will not auto-close if the Close button is clicked, ESC key is used, or if a click occurs outside the popover.\nInstead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.", + "defaultValue": "null" + }, + { + "name": "maxWidth", + "type": "string", + "description": "Maximum width of the popover (default 18.75rem)", + "defaultValue": "popoverMaxWidth && popoverMaxWidth.value" + }, + { + "name": "minWidth", + "type": "string", + "description": "Minimum width of the popover (default 6.25rem)", + "defaultValue": "popoverMinWidth && popoverMinWidth.value" + }, + { + "name": "onHidden", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has fully transitioned out.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onHide", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover begins to transition out.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onMount", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has been mounted to the DOM.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onShow", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover begins to transition in.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onShown", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has fully transitioned in.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "position", + "type": "PopoverPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'", + "description": "Popover position. Note: With 'enableFlip' set to true,\nit will change the position if there is not enough space for the starting position.\nThe behavior of where it flips to can be controlled through the flipBehavior prop.", + "defaultValue": "'top'" + }, + { + "name": "reference", + "type": "HTMLElement | (() => HTMLElement) | React.RefObject", + "description": "The reference element to which the Popover is relatively placed to.\nIf you can wrap the reference with the Popover, you can use the children prop instead.\nUsage: document.getElementById('reference-element')} />" + }, + { + "name": "shouldClose", + "type": "(tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void", + "description": "Callback function that is only invoked when isVisible is also controlled. Called when the popover Close button is\nclicked, Enter key was used on it, or the ESC key is used.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "shouldOpen", + "type": "(showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void", + "description": "Callback function that is only invoked when isVisible is also controlled. Called when the Enter key is\nused on the focused trigger", + "defaultValue": "(): void => null" + }, + { + "name": "showClose", + "type": "boolean", + "description": "Whether to show the close button", + "defaultValue": "true" + }, + { + "name": "tippyProps", + "type": "Partial", + "description": "- no longer used", + "deprecated": true + }, + { + "name": "withFocusTrap", + "type": "boolean", + "description": "Whether to trap focus in the popover" + }, + { + "name": "zIndex", + "type": "number", + "description": "z-index of the popover", + "defaultValue": "9999" + } + ] + } + ], + "beta": true, + "cssPrefix": [ + "pf-c-code-editor" + ], + "examples": [ + "Basic", + "With sizeToFit height, height will grow/shrink with content", + "With shortcut menu and main header content", + "With actions", + "With custom control" + ] +}; +pageData.liveContext = { + CodeEditor, + CodeEditorControl, + Language, + PlayIcon +}; +pageData.examples = { + 'Basic': props => + {\n const [isDarkTheme, setIsDarkTheme] = React.useState(false);\n const [isLineNumbersVisible, setIsLineNumbersVisible] = React.useState(true);\n const [isReadOnly, setIsReadOnly] = React.useState(false);\n const [isMinimapVisible, setIsMinimapVisible] = React.useState(false);\n\n const toggleDarkTheme = checked => {\n setIsDarkTheme(checked);\n };\n\n const toggleLineNumbers = checked => {\n setIsLineNumbersVisible(checked);\n };\n const toggleReadOnly = checked => {\n setIsReadOnly(checked);\n };\n const toggleMinimap = checked => {\n setIsMinimapVisible(checked);\n };\n\n const onEditorDidMount = (editor, monaco) => {\n // eslint-disable-next-line no-console\n console.log(editor.getValue());\n editor.layout();\n editor.focus();\n monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });\n };\n\n const onChange = value => {\n // eslint-disable-next-line no-console\n console.log(value);\n };\n\n return (\n <>\n \n \n \n \n \n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'With sizeToFit height, height will grow/shrink with content': props => + {\n const onEditorDidMount = (editor, monaco) => {\n // eslint-disable-next-line no-console\n console.log(editor.getValue());\n editor.layout();\n editor.focus();\n monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });\n };\n\n const onChange = value => {\n // eslint-disable-next-line no-console\n console.log(value);\n };\n\n return (\n \n );\n};\n","title":"With sizeToFit height, height will grow/shrink with content","lang":"ts"}}> + + , + 'With shortcut menu and main header content': props => + {\n const onEditorDidMount = (editor, monaco) => {\n // eslint-disable-next-line no-console\n console.log(editor.getValue());\n editor.layout();\n editor.focus();\n monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });\n };\n\n const onChange = value => {\n // eslint-disable-next-line no-console\n console.log(value);\n };\n\n const shortcuts = [\n {\n keys: ['Opt', 'F1'],\n description: 'Accessibility helps'\n },\n {\n keys: ['F1'],\n description: 'View all editor shortcuts'\n },\n {\n keys: ['Ctrl', 'Space'],\n description: 'Activate auto complete'\n },\n {\n keys: ['Cmd', 'S'],\n description: 'Save'\n }\n ];\n const shortcutsPopoverProps = {\n bodyContent: (\n \n {shortcuts.map(s => (\n <>\n \n {s.keys\n .map(k => (\n \n {k}\n \n ))\n .reduce((prev, curr) => (\n <>{[prev, ' + ', curr]}\n ))}\n \n {s.description}\n \n ))}\n \n ),\n 'aria-label': 'Shortcuts'\n };\n\n return (\n \n );\n};\n","title":"With shortcut menu and main header content","lang":"ts"}}> + +

+ {`These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.`} +

+ , + 'With actions': props => + (\n \n);\n","title":"With actions","lang":"ts"}}> + + , + 'With custom control': props => + {\n const [code, setCode] = React.useState('');\n\n const onChange = code => {\n setCode(code);\n };\n\n const onExecuteCode = code => {\n // eslint-disable-next-line no-console\n console.log(code);\n };\n\n const customControl = (\n }\n aria-label=\"Execute code\"\n toolTipText=\"Execute code\"\n onClick={onExecuteCode}\n isVisible={code !== ''}\n />\n );\n\n return (\n \n );\n};\n","title":"With custom control","lang":"ts"}}> + + +}; + +const Component = () => ( + +

+ {`Note: Code editor lives in its own package at `} + + {`@patternfly/react-code-editor`} + + {` and has `} + + + {`required peer deps`} + + + {`.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["With sizeToFit height, height will grow/shrink with content"])} + {React.createElement(pageData.examples["With shortcut menu and main header content"])} + {React.createElement(pageData.examples["With actions"])} + {React.createElement(pageData.examples["With custom control"])} + +); +Component.displayName = 'ComponentsCodeEditorReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/context-selector/react.js b/packages/react-docs/src/generated/components/context-selector/react.js new file mode 100644 index 00000000000..de382c5c486 --- /dev/null +++ b/packages/react-docs/src/generated/components/context-selector/react.js @@ -0,0 +1,230 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Context selector", + "section": "components", + "source": "react", + "slug": "/components/context-selector/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ContextSelector/examples/ContextSelector.md", + "propComponents": [ + { + "name": "ContextSelector", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "content rendered inside the Context Selector", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Classes applied to root element of Context Selector", + "defaultValue": "''" + }, + { + "name": "disableFocusTrap", + "type": "boolean", + "description": "Flag to disable focus trap", + "defaultValue": "false" + }, + { + "name": "footer", + "type": "React.ReactNode", + "description": "Footer of the context selector", + "defaultValue": "null" + }, + { + "name": "isFlipEnabled", + "type": "boolean", + "description": "Flag for indicating that the context selector menu should automatically flip vertically when\nit reaches the boundary. This prop can only be used when the context selector component is not\nappended inline, e.g. `menuAppendTo=\"parent\"`", + "defaultValue": "false" + }, + { + "name": "isFullHeight", + "type": "boolean", + "description": "Flag indicating that the context selector should expand to full height" + }, + { + "name": "isOpen", + "type": "boolean", + "description": "Flag to indicate if Context Selector is opened", + "defaultValue": "false" + }, + { + "name": "isPlain", + "type": "boolean", + "description": "Flag to indicate the toggle has no border or background", + "defaultValue": "false" + }, + { + "name": "isText", + "type": "boolean", + "description": "Flag to indicate if toggle is textual toggle", + "defaultValue": "false" + }, + { + "name": "menuAppendTo", + "type": "HTMLElement | (() => HTMLElement) | 'inline' | 'parent'", + "description": "The container to append the menu to. Defaults to 'inline'.\nIf your menu is being cut off you can append it to an element higher up the DOM tree.\nSome examples:\nmenuAppendTo=\"parent\"\nmenuAppendTo={() => document.body}\nmenuAppendTo={document.getElementById('target')}", + "defaultValue": "'inline'" + }, + { + "name": "onSearchButtonClick", + "type": "(event?: React.SyntheticEvent) => void", + "description": "Function callback for when Search Button is clicked", + "defaultValue": "() => undefined as any" + }, + { + "name": "onSearchInputChange", + "type": "(value: string) => void", + "description": "Function callback called when user changes the Search Input", + "defaultValue": "() => undefined as any" + }, + { + "name": "onSelect", + "type": "(event: any, value: React.ReactNode) => void", + "description": "Function callback called when user selects item", + "defaultValue": "() => undefined as any" + }, + { + "name": "onToggle", + "type": "(event: any, value: boolean) => void", + "description": "Function callback called when user clicks toggle button", + "defaultValue": "() => undefined as any" + }, + { + "name": "ouiaSafe", + "type": "No type info", + "defaultValue": "true" + }, + { + "name": "screenReaderLabel", + "type": "string", + "description": "Labels the Context Selector for Screen Readers", + "defaultValue": "''" + }, + { + "name": "searchButtonAriaLabel", + "type": "string", + "description": "Aria-label for the Context Selector Search Button", + "defaultValue": "'Search menu items'" + }, + { + "name": "searchInputPlaceholder", + "type": "string", + "description": "Search Input placeholder", + "defaultValue": "'Search'" + }, + { + "name": "searchInputValue", + "type": "string", + "description": "Value in the Search field", + "defaultValue": "''" + }, + { + "name": "toggleText", + "type": "string", + "description": "Text that appears in the Context Selector Toggle", + "defaultValue": "''" + } + ] + }, + { + "name": "ContextSelectorItem", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything which can be rendered as Context Selector item", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Classes applied to root element of the Context Selector item", + "defaultValue": "''" + }, + { + "name": "href", + "type": "string", + "description": "Link href, indicates item should render as anchor tag", + "defaultValue": "null" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Render Context Selector item as disabled", + "defaultValue": "false" + }, + { + "name": "onClick", + "type": "(event: React.MouseEvent) => void", + "description": "Callback for click event", + "defaultValue": "(): any => undefined" + }, + { + "name": "sendRef", + "type": "(index: number, current: any) => void", + "description": "Internal callback for ref tracking", + "defaultValue": "() => {}" + } + ] + }, + { + "name": "ContextSelectorFooter", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the ContextSelectorFooter", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the ContextSelectorFooter", + "defaultValue": "''" + } + ] + } + ], + "examples": [ + "Basic", + "Plain with text", + "With footer" + ] +}; +pageData.examples = { + 'Basic': props => + {\n const items = [\n {\n text: 'Link',\n href: '#'\n },\n 'Action',\n {\n text: 'Disabled link',\n href: '#',\n isDisabled: true\n },\n {\n text: 'Disabled action',\n isDisabled: true\n },\n 'My project',\n 'OpenShift cluster',\n 'Production Ansible',\n 'AWS',\n 'Azure',\n 'My project 2',\n 'OpenShift cluster ',\n 'Production Ansible 2 ',\n 'AWS 2',\n 'Azure 2'\n ];\n\n const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;\n const [isOpen, setOpen] = React.useState(false);\n const [selected, setSelected] = React.useState(firstItemText);\n const [searchValue, setSearchValue] = React.useState('');\n const [filteredItems, setFilteredItems] = React.useState(items);\n\n const onToggle = (event: any, isOpen: boolean) => {\n setOpen(isOpen);\n };\n\n const onSelect = (event: any, value: React.ReactNode) => {\n setSelected(value as string);\n setOpen(!isOpen);\n };\n\n const onSearchInputChange = (value: string) => {\n setSearchValue(value);\n };\n\n const onSearchButtonClick = (_event: React.SyntheticEvent) => {\n const filtered =\n searchValue === ''\n ? items\n : items.filter(item => {\n const str = typeof item === 'string' ? item : item.text;\n return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;\n });\n\n setFilteredItems(filtered || []);\n };\n return (\n \n {filteredItems.map((item, index) => {\n const [text = null, href = null, isDisabled] =\n typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];\n return (\n \n {text || item}\n \n );\n })}\n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Plain with text': props => + {\n const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;\n const [isOpen, setOpen] = React.useState(false);\n const [selected, setSelected] = React.useState(firstItemText);\n const [searchValue, setSearchValue] = React.useState('');\n const [filteredItems, setFilteredItems] = React.useState(items);\n const onToggle = (event: any, isOpen: boolean) => {\n setOpen(isOpen);\n };\n\n const onSelect = (event: any, value: React.ReactNode) => {\n setSelected(value as string);\n setOpen(!isOpen);\n };\n\n const onSearchInputChange = (value: string) => {\n setSearchValue(value);\n };\n\n const onSearchButtonClick = (_event: React.SyntheticEvent) => {\n const filtered =\n searchValue === ''\n ? items\n : items.filter(item => {\n const str = typeof item === 'string' ? item : item.text;\n return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;\n });\n\n setFilteredItems(filtered || []);\n };\n return (\n \n {filteredItems.map((item, index) => {\n const [text, href = null, isDisabled = false] =\n typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];\n return (\n \n {text}\n \n );\n })}\n \n );\n};\n","title":"Plain with text","lang":"ts"}}> + + , + 'With footer': props => + {\n const items = [\n {\n text: 'Link',\n href: '#'\n },\n 'Action',\n {\n text: 'Disabled link',\n href: '#',\n isDisabled: true\n },\n {\n text: 'Disabled action',\n isDisabled: true\n },\n 'My project',\n 'OpenShift cluster',\n 'Production Ansible',\n 'AWS',\n 'Azure',\n 'My project 2',\n 'OpenShift cluster ',\n 'Production Ansible 2 ',\n 'AWS 2',\n 'Azure 2'\n ];\n const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;\n const [isOpen, setOpen] = React.useState(false);\n const [selected, setSelected] = React.useState(firstItemText);\n const [searchValue, setSearchValue] = React.useState('');\n const [filteredItems, setFilteredItems] = React.useState(items);\n\n const onToggle = (event: any, isOpen: boolean) => {\n setOpen(isOpen);\n };\n\n const onSelect = (event: any, value: React.ReactNode) => {\n setSelected(value as string);\n setOpen(!isOpen);\n };\n\n const onSearchInputChange = (value: string) => {\n setSearchValue(value);\n };\n\n const onSearchButtonClick = (_event: React.SyntheticEvent) => {\n const filtered =\n searchValue === ''\n ? items\n : items.filter(item => {\n const str = typeof item === 'string' ? item : item.text;\n return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;\n });\n\n setFilteredItems(filtered || []);\n };\n\n return (\n \n \n \n }\n >\n {filteredItems.map((item, index) => {\n const [text = null, href = null, isDisabled] =\n typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];\n return (\n \n {text || item}\n \n );\n })}\n \n );\n};\n","title":"With footer","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Plain with text"])} + {React.createElement(pageData.examples["With footer"])} + +); +Component.displayName = 'ComponentsContextSelectorReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/data-list/react-demos.js b/packages/react-docs/src/generated/components/data-list/react-demos.js new file mode 100644 index 00000000000..70316c97fe8 --- /dev/null +++ b/packages/react-docs/src/generated/components/data-list/react-demos.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; +import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; +import { css } from '@patternfly/react-styles'; +const pageData = { + "id": "Data list", + "section": "components", + "source": "react-demos", + "slug": "/components/data-list/react-demos", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/DataListDemo.md", + "examples": [ + "Expandable control in toolbar" + ] +}; +pageData.liveContext = { + CodeBranchIcon, + AngleDownIcon, + AngleRightIcon, + css +}; +pageData.examples = { + 'Expandable control in toolbar': props => + {\n this.setState(\n {\n allExpanded: !this.state.allExpanded\n },\n () => {\n if (this.state.allExpanded) {\n this.setState({\n expanded: ['ex-toggle1', 'ex-toggle2', 'ex-toggle3']\n });\n } else {\n this.setState({\n expanded: []\n });\n }\n }\n );\n };\n\n this.onToggle1 = isOpen1 => {\n this.setState({ isOpen1 });\n };\n\n this.onToggle2 = isOpen2 => {\n this.setState({ isOpen2 });\n };\n\n this.onToggle3 = isOpen3 => {\n this.setState({ isOpen3 });\n };\n\n this.onSelect1 = event => {\n this.setState(prevState => ({\n isOpen1: !prevState.isOpen1\n }));\n };\n\n this.onSelect2 = event => {\n this.setState(prevState => ({\n isOpen2: !prevState.isOpen2\n }));\n };\n\n this.onSelect3 = event => {\n this.setState(prevState => ({\n isOpen3: !prevState.isOpen3\n }));\n };\n }\n\n renderToolbar() {\n return (\n \n \n \n \n \n \n {this.state.allExpanded && 'Collapse all rows'}\n {!this.state.allExpanded && 'Expand all rows'}\n
\n }\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n\n render() {\n const toggle = id => {\n const expanded = this.state.expanded;\n const index = expanded.indexOf(id);\n const newExpanded =\n index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];\n this.setState(() => ({ expanded: newExpanded }));\n if (newExpanded.length === 3) {\n this.setState(() => ({ allExpanded: true }));\n } else if (newExpanded.length === 0) {\n this.setState(() => ({ allExpanded: false }));\n }\n };\n\n return (\n \n {this.renderToolbar()}\n
\n
\n \n \n \n toggle('ex-toggle1')}\n isExpanded={this.state.expanded.includes('ex-toggle1')}\n id=\"ex-toggle1\"\n aria-controls=\"ex-expand1\"\n />\n \n \n ,\n \n
Primary content
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n link\n ,\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n ,\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n \n \n toggle('ex-toggle2')}\n isExpanded={this.state.expanded.includes('ex-toggle2')}\n id=\"ex-toggle2\"\n aria-controls=\"ex-expand2\"\n />\n \n \n ,\n \n
Secondary content
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n ,\n \n Lorem ipsum dolor sit amet.\n ,\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n \n \n toggle('ex-toggle3')}\n isExpanded={this.state.expanded.includes('ex-toggle3')}\n id=\"ex-toggle3\"\n aria-controls=\"ex-expand3\"\n />\n \n \n ,\n \n
Tertiary content
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n ,\n \n Lorem ipsum dolor sit amet.\n ,\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n This expanded section has no padding.\n \n \n \n \n );\n }\n}","title":"Expandable control in toolbar","lang":"js"}}> + + +}; + +const Component = () => ( + + + {`Demos`} + + {React.createElement(pageData.examples["Expandable control in toolbar"])} + +); +Component.displayName = 'ComponentsDataListReactDemosDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/data-list/react.js b/packages/react-docs/src/generated/components/data-list/react.js new file mode 100644 index 00000000000..bbcfa27996e --- /dev/null +++ b/packages/react-docs/src/generated/components/data-list/react.js @@ -0,0 +1,616 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; +import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; +import { css } from '@patternfly/react-styles'; +const pageData = { + "id": "Data list", + "section": "components", + "source": "react", + "slug": "/components/data-list/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/DataList/examples/DataList.md", + "propComponents": [ + { + "name": "DataList", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the DataList list", + "required": true + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the DataList list", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the DataList list", + "defaultValue": "''" + }, + { + "name": "gridBreakpoint", + "type": "'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'", + "description": "Specifies the grid breakpoints", + "defaultValue": "'md'" + }, + { + "name": "isCompact", + "type": "boolean", + "description": "Flag indicating if DataList should have compact styling", + "defaultValue": "false" + }, + { + "name": "itemOrder", + "type": "string[]", + "description": "Order of items in a draggable DataList", + "deprecated": true + }, + { + "name": "onDragCancel", + "type": "() => void", + "description": "Optional informational callback for dragging, fired when dragging is cancelled", + "deprecated": true + }, + { + "name": "onDragFinish", + "type": "(newItemOrder: string[]) => void", + "description": "Optional callback to make DataList draggable, fired when dragging ends", + "deprecated": true + }, + { + "name": "onDragMove", + "type": "(oldIndex: number, newIndex: number) => void", + "description": "Optional informational callback for dragging, fired when an item moves", + "deprecated": true + }, + { + "name": "onDragStart", + "type": "(id: string) => void", + "description": "Optional informational callback for dragging, fired when dragging starts", + "deprecated": true + }, + { + "name": "onSelectDataListItem", + "type": "(id: string) => void", + "description": "Optional callback to make DataList selectable, fired when DataListItem selected" + }, + { + "name": "selectableRow", + "type": "SelectableRowObject", + "description": "Object that causes the data list to render hidden inputs which improve selectable item a11y", + "beta": true + }, + { + "name": "selectedDataListItemId", + "type": "string", + "description": "Id of DataList item currently selected", + "defaultValue": "''" + }, + { + "name": "wrapModifier", + "type": "DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'", + "description": "Determines which wrapping modifier to apply to the DataList", + "defaultValue": "null" + } + ] + }, + { + "name": "SelectableRowObject", + "description": "", + "props": [ + { + "name": "onChange", + "type": "(id: string, event: React.FormEvent) => void", + "description": "Callback that executes when the screen reader accessible element receives a change event", + "required": true + }, + { + "name": "type", + "type": "'multiple' | 'single'", + "description": "Determines if only one of the selectable rows should be selectable at a time", + "required": true + } + ] + }, + { + "name": "DataListAction", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the DataList Action", + "required": true + }, + { + "name": "aria-labelledby", + "type": "string", + "description": "Adds accessible text to the DataList Action", + "required": true + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered as DataList Action (e.g \n \n \n \n \n \n \n \n \n Primary content - Lorem ipsum dolor sit amet, consectetur\n adipisicing elit, sed do eiusmod.\n ,\n \n Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n \n ]}\n />\n \n }\n dropdownItems={[\n \n Primary\n ,\n \n Secondary\n ,\n \n Secondary\n ,\n \n Secondary\n \n ]}\n />\n \n \n \n \n \n \n \n \n \n \n );\n};\n","title":"Checkboxes, actions and additional cells","lang":"ts"}}> + + , + 'Actions: single and multiple': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n const [isDeleted, setIsDeleted] = React.useState(false);\n\n const onToggle = isOpen => {\n setIsOpen(isOpen);\n };\n\n const onSelect = () => {\n setIsOpen(!isOpen);\n };\n\n return (\n \n \n {!isDeleted && (\n \n \n \n Single actionable Primary content\n ,\n Single actionable Secondary content\n ]}\n />\n \n {\n if (confirm('Are you sure?')) {\n setIsDeleted(true);\n }\n }}\n variant=\"primary\"\n key=\"delete-action\"\n >\n Delete\n \n \n \n \n )}\n \n \n \n Multi actions Primary content\n ,\n Multi actions Secondary content\n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n \n \n );\n};\n","title":"Actions: single and multiple","lang":"ts"}}> + + , + 'Expandable': props => + {\n const [isOpen1, setIsOpen1] = React.useState(false);\n const [isOpen2, setIsOpen2] = React.useState(false);\n const [isOpen3, setIsOpen3] = React.useState(false);\n const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);\n\n const onToggle1 = isOpen1 => {\n setIsOpen1(isOpen1);\n };\n\n const onSelect1 = () => {\n setIsOpen1(!isOpen1);\n };\n\n const onToggle2 = isOpen2 => {\n setIsOpen2(isOpen2);\n };\n\n const onSelect2 = () => {\n setIsOpen2(!isOpen2);\n };\n const onToggle3 = isOpen3 => {\n setIsOpen3(isOpen3);\n };\n\n const onSelect3 = () => {\n setIsOpen3(!isOpen3);\n };\n\n const toggle = id => {\n const index = expanded.indexOf(id);\n const newExpanded =\n index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];\n setExpanded(newExpanded);\n };\n return (\n \n \n \n \n toggle('ex-toggle1')}\n isExpanded={expanded.includes('ex-toggle1')}\n id=\"ex-toggle1\"\n aria-controls=\"ex-expand1\"\n />\n \n \n ,\n \n
Primary content
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n link\n ,\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n ,\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n \n \n toggle('ex-toggle2')}\n isExpanded={expanded.includes('ex-toggle2')}\n id=\"ex-toggle2\"\n aria-controls=\"ex-expand2\"\n />\n \n \n ,\n \n
Secondary content
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n ,\n \n Lorem ipsum dolor sit amet.\n ,\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n \n \n toggle('ex-toggle3')}\n isExpanded={expanded.includes('ex-toggle3')}\n id=\"ex-toggle3\"\n aria-controls=\"ex-expand3\"\n />\n \n \n ,\n \n
Tertiary content
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n ,\n \n Lorem ipsum dolor sit amet.\n ,\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n This expanded section has no padding.\n \n \n \n \n );\n};\n","title":"Expandable","lang":"ts"}}> + + , + 'Width modifiers': props => + {\n const [show, setShow] = React.useState(true);\n const [isOpen1, setIsOpen1] = React.useState(false);\n const [isOpen2, setIsOpen2] = React.useState(false);\n\n const onToggle1 = isOpen1 => {\n setIsOpen1(isOpen1);\n };\n\n const onSelect1 = () => {\n setIsOpen1(!isOpen1);\n };\n\n const onToggle2 = isOpen2 => {\n setIsOpen2(isOpen2);\n };\n\n const onSelect2 = () => {\n setIsOpen2(!isOpen2);\n };\n\n const previewPlaceholder = {\n display: 'block',\n width: '100%',\n padding: '.25rem .5rem',\n color: '#004e8a',\n backgroundColor: '#def3ff',\n border: '1px solid rgba(0,0,0,.1)',\n borderRadius: '4px'\n };\n\n return (\n <>\n
\n \n Default fitting - example 1\n \n \n \n \n \n \n
\n default\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

\n
\n ,\n \n
\n default\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua.\n

\n
\n \n ]}\n />\n \n \n \n
\n
\n \n Flex modifiers - example 2\n \n \n \n \n \n \n
\n width 2\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

\n
\n ,\n \n
\n width 4\n

Lorem ipsum dolor sit amet.

\n
\n \n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n \n
\n
\n \n Flex modifiers - example 3\n \n \n \n \n setShow(!show)}\n />\n \n \n
\n width 5\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

\n
\n ,\n \n
\n width 2\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

\n
\n ,\n \n
default
\n \n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n

\n \n \n \n
\n \n );\n};\n","title":"Width modifiers","lang":"ts"}}> + + , + 'Selectable rows': props => + {\n const [isOpen1, setIsOpen1] = React.useState(false);\n const [isOpen2, setIsOpen2] = React.useState(false);\n const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');\n\n const onToggle1 = isOpen1 => {\n setIsOpen1(isOpen1);\n };\n\n const onSelect1 = () => {\n setIsOpen1(!isOpen1);\n };\n\n const onToggle2 = isOpen2 => {\n setIsOpen2(isOpen2);\n };\n\n const onSelect2 = () => {\n setIsOpen2(!isOpen2);\n };\n\n const onSelectDataListItem = id => {\n setSelectedDataListItemId(id);\n };\n\n const handleInputChange = (id: string, _event: React.FormEvent) => {\n setSelectedDataListItemId(id);\n };\n\n return (\n \n \n \n \n \n Single actionable Primary content\n ,\n Single actionable Secondary content\n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n \n \n \n Selectable actions Primary content\n ,\n Selectable actions Secondary content\n ]}\n />\n \n }\n dropdownItems={[\n Link,\n \n Action\n ,\n \n Disabled Link\n \n ]}\n />\n \n \n \n \n \n );\n};\n","title":"Selectable rows","lang":"ts"}}> + + , + 'Controlling text': props => + (\n \n \n \n \n Primary content\n ,\n \n Really really really really really really really really really really really really really really long\n description that should be truncated before it ends\n \n ]}\n />\n \n \n \n);\n","title":"Controlling text","lang":"ts"}}> + + , + 'Draggable': props => + \n Array.from({ length: count }, (_, idx) => idx).map(idx => ({\n id: `item-${idx}`,\n content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)\n }));\n\nconst reorder = (list: ItemType[], startIndex: number, endIndex: number) => {\n const result = list;\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n};\n\nexport const DataListDraggable: React.FunctionComponent = () => {\n const [items, setItems] = React.useState(getItems(10));\n const [liveText, setLiveText] = React.useState('');\n\n function onDrag(source) {\n setLiveText(`Started dragging ${items[source.index].content}`);\n // Return true to allow drag\n return true;\n }\n\n function onDragMove(source, dest) {\n const newText = dest ? `Move ${items[source.index].content} to ${items[dest.index].content}` : 'Invalid drop zone';\n if (newText !== liveText) {\n setLiveText(newText);\n }\n }\n\n function onDrop(source, dest) {\n if (dest) {\n const newItems = reorder(items, source.index, dest.index);\n setItems(newItems);\n\n setLiveText('Dragging finished.');\n return true; // Signal that this is a valid drop and not to animate the item returning home.\n } else {\n setLiveText('Dragging cancelled. List unchanged.');\n }\n }\n\n return (\n \n \n \n {items.map(({ id, content }) => (\n \n \n \n \n \n \n \n \n {content}\n \n ]}\n />\n \n \n \n ))}\n \n \n
\n {liveText}\n
\n \n );\n};\n","title":"Draggable","lang":"ts","isBeta":true}}> + +

+ {`Draggable data lists used to have their own HTML5-based API for drag and drop, which wasn't able to fulfill requirements such as custom styling on items being dragged. So we wrote generic `} + + + {`DragDrop`} + + {`, `} + + + {`Draggable`} + + {`, and `} + + + {`Droppable`} + + {` components for this purpose. Use those new components instead of the deprecated (and buggy!) HTML5-based API.`} +

+ +

+ {`Note: Keyboard accessibility and screen reader accessibility for the `} + + + {`DragDrop`} + + {` component are still in development.`} +

+ , + 'Small grid breakpoint': props => + (\n \n \n \n \n Primary content\n ,\n \n Really really really really really really really really really really really really really really long\n description that should be truncated before it ends\n \n ]}\n />\n \n \n \n);\n","title":"Small grid breakpoint","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Compact"])} + {React.createElement(pageData.examples["Checkboxes, actions and additional cells"])} + {React.createElement(pageData.examples["Actions: single and multiple"])} + {React.createElement(pageData.examples["Expandable"])} + {React.createElement(pageData.examples["Width modifiers"])} + {React.createElement(pageData.examples["Selectable rows"])} + {React.createElement(pageData.examples["Controlling text"])} + {React.createElement(pageData.examples["Draggable"])} + {React.createElement(pageData.examples["Small grid breakpoint"])} + +); +Component.displayName = 'ComponentsDataListReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/date-picker/react-demos.js b/packages/react-docs/src/generated/components/date-picker/react-demos.js new file mode 100644 index 00000000000..e7955770a94 --- /dev/null +++ b/packages/react-docs/src/generated/components/date-picker/react-demos.js @@ -0,0 +1,74 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Date picker", + "section": "components", + "source": "react-demos", + "slug": "/components/date-picker/react-demos", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/DatePicker/DatePicker.md", + "beta": true, + "examples": [ + "Date range picker", + "Date and time range picker", + "Date and time pickers in modal" + ] +}; +pageData.examples = { + 'Date range picker': props => + {\n const [from, setFrom] = React.useState();\n const [to, setTo] = React.useState();\n\n const toValidator = date => isValidDate(from) && date >= from ? '' : 'To date must be less than from date';\n const onFromChange = (_str, date) => {\n setFrom(new Date(date));\n if (isValidDate(date)) {\n date.setDate(date.getDate() + 1);\n setTo(yyyyMMddFormat(date));\n }\n else {\n setTo('');\n }\n };\n\n return (\n \n \n \n \n \n to\n \n \n setTo(date)}\n isDisabled={!isValidDate(from)}\n rangeStart={from}\n validators={[toValidator]}\n aria-label=\"End date\"\n placeholder=\"YYYY-MM-DD\"\n />\n \n \n );\n}","title":"Date range picker","lang":"js"}}> + +

+ {`This is intended to be used as a filter. After selecting a start date, the next date is automatically selected.`} +

+ , + 'Date and time range picker': props => + {\n const [from, setFrom] = React.useState();\n const [to, setTo] = React.useState();\n\n const toValidator = date => {\n return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from) ? '' : 'To date must after from date';\n };\n \n const onFromDateChange = (inputDate, newFromDate) => {\n if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {\n newFromDate.setHours(from.getHours());\n newFromDate.setMinutes(from.getMinutes());\n }\n if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {\n setFrom(new Date(newFromDate));\n }\n };\n \n const onFromTimeChange = (time, hour, minute) => {\n if (isValidDate(from)) {\n const updatedFromDate = new Date(from);\n updatedFromDate.setHours(hour);\n updatedFromDate.setMinutes(minute);\n setFrom(updatedFromDate);\n }\n };\n\n const onToDateChange = (inputDate, newToDate) => {\n if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {\n newToDate.setHours(to.getHours());\n newToDate.setMinutes(to.getMinutes());\n }\n if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)){\n setTo(newToDate);\n }\n };\n \n const onToTimeChange = (time, hour, minute) => {\n if (isValidDate(to)) {\n const updatedToDate = new Date(to);\n updatedToDate.setHours(hour);\n updatedToDate.setMinutes(minute);\n setTo(updatedToDate);\n }\n };\n\n return (\n \n \n \n \n \n \n \n \n to\n \n \n \n \n \n \n \n \n );\n}","title":"Date and time range picker","lang":"js"}}> + + , + 'Date and time pickers in modal': props => + {\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n const [isTimePickerOpen, setIsTimePickerOpen] = React.useState(false);\n const dateRef = React.useRef(null);\n\n const handleModalToggle = () => {\n setIsModalOpen(!isModalOpen);\n };\n\n const onEscapePress = (event: KeyboardEvent) => {\n if (dateRef && dateRef.current && dateRef.current.isCalendarOpen) {\n dateRef.current.toggleCalendar(false, event.key);\n } else if (isTimePickerOpen) {\n setIsTimePickerOpen(false);\n } else {\n handleModalToggle();\n }\n };\n\n return (\n \n \n \n Confirm\n ,\n \n ]}\n >\n \n document.getElementById('date-time-picker-modal')} />\n \n \n \n \n );\n};\n","title":"Date and time pickers in modal","lang":"ts"}}> + +

+ {`Modals trap focus and watch a few document level events. In order to place a date picker in a modal:`} +

+ +
    + + + +
  • + {`To avoid the modal's escape press event handler from overruling the date picker's escape press handlers, use the `} + + + {`DatePickerRef`} + + {` to close the calendar when it is open and the escape key is pressed.`} +
    • + + + +
  • + {`Append the calendar to the modal to keep it as close to the date picker in the DOM while maintaining correct layouts visually +In order to place a time picker in the modal, its menu must be appended to the time picker's parent.`} +
    • + + +
+ +}; + +const Component = () => ( + + + {`Demos`} + + {React.createElement(pageData.examples["Date range picker"])} + {React.createElement(pageData.examples["Date and time range picker"])} + {React.createElement(pageData.examples["Date and time pickers in modal"])} + +); +Component.displayName = 'ComponentsDatePickerReactDemosDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/date-picker/react.js b/packages/react-docs/src/generated/components/date-picker/react.js new file mode 100644 index 00000000000..1659978a060 --- /dev/null +++ b/packages/react-docs/src/generated/components/date-picker/react.js @@ -0,0 +1,268 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Date picker", + "section": "components", + "source": "react", + "slug": "/components/date-picker/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/DatePicker/examples/DatePicker.md", + "propComponents": [ + { + "name": "DatePicker", + "description": "", + "props": [ + { + "name": "appendTo", + "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent'", + "description": "The container to append the menu to. Defaults to 'parent'.\nIf your menu is being cut off you can append it to an element higher up the DOM tree.\nSome examples:\nmenuAppendTo={() => document.body}\nmenuAppendTo={document.getElementById('target')}", + "defaultValue": "'parent'" + }, + { + "name": "aria-label", + "type": "string", + "description": "Accessible label for the date picker", + "defaultValue": "'Date picker'" + }, + { + "name": "buttonAriaLabel", + "type": "string", + "description": "Aria label for the button to open the date picker", + "defaultValue": "'Toggle date picker'" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the date time picker." + }, + { + "name": "dateFormat", + "type": "(date: Date) => string", + "description": "How to format the date in the TextInput", + "defaultValue": "(date: Date) =>\n`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date\n .getDate()\n .toString()\n .padStart(2, '0')}`" + }, + { + "name": "dateParse", + "type": "(value: string) => Date", + "description": "How to format the date in the TextInput", + "defaultValue": "(val: string) => val.split('-').length === 3 && new Date(`${val}T00:00:00`)" + }, + { + "name": "helperText", + "type": "React.ReactNode", + "description": "Text for label" + }, + { + "name": "inputProps", + "type": "TextInputProps", + "description": "Additional props for input field", + "defaultValue": "{}" + }, + { + "name": "invalidFormatText", + "type": "string", + "description": "Error message to display when the TextInput cannot be parsed.", + "defaultValue": "'Invalid date'" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Flag indicating the date picker is disabled", + "defaultValue": "false" + }, + { + "name": "locale", + "type": "No type info", + "defaultValue": "undefined" + }, + { + "name": "onBlur", + "type": "(value: string, date?: Date) => void", + "description": "Callback called every time the input loses focus", + "defaultValue": "(): any => undefined" + }, + { + "name": "onChange", + "type": "(value: string, date?: Date) => void", + "description": "Callback called every time the input value changes", + "defaultValue": "(): any => undefined" + }, + { + "name": "placeholder", + "type": "string", + "description": "String to display in the empty date picker field as a hint for the expected date format", + "defaultValue": "'YYYY-MM-DD'" + }, + { + "name": "popoverProps", + "type": "Omit", + "description": "Props to pass to the Popover" + }, + { + "name": "style", + "type": "No type info", + "defaultValue": "{}" + }, + { + "name": "validators", + "type": "((date: Date) => string)[]", + "description": "Functions that returns an error message if a date is invalid", + "defaultValue": "[]" + }, + { + "name": "value", + "type": "string", + "description": "Value of TextInput", + "defaultValue": "''" + } + ] + }, + { + "name": "CalendarFormat", + "description": "", + "props": [ + { + "name": "cellAriaLabel", + "type": "(date: Date) => string", + "description": "Aria-label for the date cells" + }, + { + "name": "dayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format days in buttons in table cells" + }, + { + "name": "locale", + "type": "string", + "description": "If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation" + }, + { + "name": "longWeekdayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format days in header for screen readers" + }, + { + "name": "monthFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format months in Select" + }, + { + "name": "nextMonthAriaLabel", + "type": "string", + "description": "Aria-label for the next month button" + }, + { + "name": "prevMonthAriaLabel", + "type": "string", + "description": "Aria-label for the previous month button" + }, + { + "name": "rangeStart", + "type": "Date", + "description": "Which date to start range styles from" + }, + { + "name": "weekdayFormat", + "type": "(date: Date) => React.ReactNode", + "description": "How to format week days in header" + }, + { + "name": "weekStart", + "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday", + "description": "Day of week that starts the week. 0 is Sunday, 6 is Saturday." + }, + { + "name": "yearInputAriaLabel", + "type": "string", + "description": "Aria-label for the year input" + } + ] + }, + { + "name": "DatePickerRef", + "description": "", + "props": [ + { + "name": "isCalendarOpen", + "type": "boolean", + "description": "Current calendar open status", + "required": true + }, + { + "name": "setCalendarOpen", + "type": "(isOpen: boolean) => void", + "description": "Sets the calendar open status", + "required": true + }, + { + "name": "toggleCalendar", + "type": "(isOpen?: boolean, eventKey?: string) => void", + "description": "Toggles the calendar open status. If no parameters are passed, the calendar will simply toggle its open status.\nIf the isOpen parameter is passed, that will set the calendar open status to the value of the isOpen parameter.\nIf the eventKey parameter is set to 'Escape', that will invoke the date pickers onEscapePress event to toggle the\ncorrect control appropriately.", + "required": true + } + ] + } + ], + "beta": true, + "cssPrefix": [ + "pf-c-date-picker" + ], + "examples": [ + "Basic", + "American format", + "Helper text", + "Min and max date", + "French", + "Controlled", + "Controlling the date picker calendar state" + ] +}; +pageData.examples = { + 'Basic': props => + (\n console.log('onBlur', str, date)}\n // eslint-disable-next-line no-console\n onChange={(str, date) => console.log('onChange', str, date)}\n />\n);\n","title":"Basic","lang":"ts"}}> + + , + 'American format': props => + {\n const dateFormat = (date: Date) =>\n date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\\//g, '-');\n const dateParse = (date: string) => {\n const split = date.split('-');\n if (split.length !== 3) {\n return new Date();\n }\n const month = split[0];\n const day = split[1];\n const year = split[2];\n return new Date(`${year.padStart(4, '0')}-${month.padStart(2, '0')}-${day.padStart(2, '0')}T00:00:00`);\n };\n\n return ;\n};\n","title":"American format","lang":"ts"}}> + + , + 'Helper text': props => + (\n \n);\n","title":"Helper text","lang":"ts"}}> + + , + 'Min and max date': props => + {\n const minDate = new Date(2020, 2, 16);\n const maxDate = new Date(2020, 2, 20);\n const rangeValidator = (date: Date) => {\n if (date < minDate) {\n return 'Date is before the allowable range.';\n } else if (date > maxDate) {\n return 'Date is after the allowable range.';\n }\n\n return '';\n };\n return ;\n};\n","title":"Min and max date","lang":"ts"}}> + + , + 'French': props => + {\n const minDate = new Date(2020, 2, 16);\n const maxDate = new Date(2020, 2, 20);\n const rangeValidator = (date: Date) => {\n if (date < minDate) {\n return 'Cette date est antérieure à la première date valide.';\n } else if (date > maxDate) {\n return 'Cette date est postérieure à la dernière date valide.';\n }\n\n return '';\n };\n return (\n \n );\n};\n","title":"French","lang":"ts"}}> + + , + 'Controlled': props => + {\n const initialValue = '2020-03-17';\n const [value, setValue] = React.useState(initialValue);\n return (\n \n \n setValue(value)} />\n \n );\n};\n","title":"Controlled","lang":"ts"}}> + + , + 'Controlling the date picker calendar state': props => + {\n const dateRef = React.useRef(null);\n const onClick = () => {\n if (dateRef.current) {\n dateRef.current.toggleCalendar();\n }\n };\n return (\n \n \n \n \n );\n};\n","title":"Controlling the date picker calendar state","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["American format"])} + {React.createElement(pageData.examples["Helper text"])} + {React.createElement(pageData.examples["Min and max date"])} + {React.createElement(pageData.examples["French"])} + {React.createElement(pageData.examples["Controlled"])} + {React.createElement(pageData.examples["Controlling the date picker calendar state"])} + +); +Component.displayName = 'ComponentsDatePickerReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/description-list/react.js b/packages/react-docs/src/generated/components/description-list/react.js new file mode 100644 index 00000000000..1fdc6d5c1fc --- /dev/null +++ b/packages/react-docs/src/generated/components/description-list/react.js @@ -0,0 +1,588 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover } from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon'; +import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon'; +import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; +import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon'; +const pageData = { + "id": "Description list", + "section": "components", + "source": "react", + "slug": "/components/description-list/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md", + "propComponents": [ + { + "name": "DescriptionList", + "description": "", + "props": [ + { + "name": "autoFitMinModifier", + "type": "{\n default?: string;\n sm?: string;\n md?: string;\n lg?: string;\n xl?: string;\n '2xl'?: string;\n}", + "description": "Sets the minimum column size for the auto-fit (isAutoFit) layout at various breakpoints." + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered inside of the list", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the list", + "defaultValue": "''" + }, + { + "name": "columnModifier", + "type": "{\n default?: '1Col' | '2Col' | '3Col';\n sm?: '1Col' | '2Col' | '3Col';\n md?: '1Col' | '2Col' | '3Col';\n lg?: '1Col' | '2Col' | '3Col';\n xl?: '1Col' | '2Col' | '3Col';\n '2xl'?: '1Col' | '2Col' | '3Col';\n}", + "description": "Sets the number of columns on the description list at various breakpoints" + }, + { + "name": "horizontalTermWidthModifier", + "type": "{\n default?: string;\n sm?: string;\n md?: string;\n lg?: string;\n xl?: string;\n '2xl'?: string;\n}", + "description": "Sets the horizontal description list's term column width at various breakpoints." + }, + { + "name": "isAutoColumnWidths", + "type": "boolean", + "description": "Sets the description list to format automatically." + }, + { + "name": "isAutoFit", + "type": "boolean", + "description": "Sets the description list to auto fit." + }, + { + "name": "isCompact", + "type": "boolean", + "description": "Sets the description list to compact styling." + }, + { + "name": "isFillColumns", + "type": "boolean", + "description": "Sets the the default placement of description list groups to fill from top to bottom." + }, + { + "name": "isFluid", + "type": "boolean", + "description": "Sets a horizontal description list to have fluid styling." + }, + { + "name": "isHorizontal", + "type": "boolean", + "description": "Sets the description list component term and description pair to a horizontal layout.", + "defaultValue": "false" + }, + { + "name": "isInlineGrid", + "type": "boolean", + "description": "Modifies the description list display to inline-grid." + }, + { + "name": "orientation", + "type": "{\n sm?: 'vertical' | 'horizontal';\n md?: 'vertical' | 'horizontal';\n lg?: 'vertical' | 'horizontal';\n xl?: 'vertical' | 'horizontal';\n '2xl'?: 'vertical' | 'horizontal';\n}", + "description": "Indicates how the menu will align at various breakpoints." + } + ] + }, + { + "name": "DescriptionListDescription", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered inside of list description", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the DescriptionListDescription" + } + ] + }, + { + "name": "DescriptionListGroup", + "description": "", + "props": [ + { + "name": "children", + "type": "any", + "description": "Any elements that can be rendered in the list group" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the DescriptionListGroup" + } + ] + }, + { + "name": "DescriptionListTerm", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered inside of list term", + "required": true + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the DescriptionListTerm" + }, + { + "name": "icon", + "type": "React.ReactNode", + "description": "Icon that is rendered inside of list term to the left side of the children" + } + ] + }, + { + "name": "DescriptionListTermHelpText", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered inside of list term", + "required": true + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the DescriptionListTermHelpText" + } + ] + }, + { + "name": "DescriptionListTermHelpTextButton", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered inside of list term", + "required": true + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the DescriptionListTerm" + } + ] + }, + { + "name": "Popover", + "description": "", + "props": [ + { + "name": "alertSeverityScreenReaderText", + "type": "string", + "description": "Text announced by screen reader when alert severity variant is set to indicate severity level", + "beta": true + }, + { + "name": "alertSeverityVariant", + "type": "'default' | 'info' | 'warning' | 'success' | 'danger'", + "description": "Severity variants for an alert popover. This modifies the color of the header to match the severity.", + "beta": true + }, + { + "name": "animationDuration", + "type": "number", + "description": "CSS fade transition animation duration", + "defaultValue": "300" + }, + { + "name": "appendTo", + "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement)", + "description": "The element to append the popover to, defaults to body", + "defaultValue": "() => document.body" + }, + { + "name": "aria-label", + "type": "string", + "description": "Accessible label, required when header is not present", + "defaultValue": "''" + }, + { + "name": "bodyContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Body content\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. bodyContent={hide => }", + "required": true + }, + { + "name": "boundary", + "type": "'scrollParent' | 'window' | 'viewport' | HTMLElement", + "description": "- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead", + "deprecated": true + }, + { + "name": "children", + "type": "ReactElement", + "description": "The reference element to which the Popover is relatively placed to.\nIf you cannot wrap the reference with the Popover, you can use the reference prop instead.\nUsage: " + }, + { + "name": "className", + "type": "string", + "description": "Popover additional class", + "defaultValue": "''" + }, + { + "name": "closeBtnAriaLabel", + "type": "string", + "description": "Aria label for the Close button", + "defaultValue": "'Close'" + }, + { + "name": "distance", + "type": "number", + "description": "Distance of the popover to its target, defaults to 25", + "defaultValue": "25" + }, + { + "name": "enableFlip", + "type": "boolean", + "description": "If true, tries to keep the popover in view by flipping it if necessary.\nIf the position is set to 'auto', this prop is ignored", + "defaultValue": "true" + }, + { + "name": "flipBehavior", + "type": "'flip'\n| (\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'top-start'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-end'\n | 'left-start'\n | 'left-end'\n | 'right-start'\n | 'right-end'\n )[]", + "description": "The desired position to flip the popover to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space.\nYou can also pass an array of positions that determines the flip order. It should contain the initial position\nfollowed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to\n['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no\nspace to the right, so it finally shows the popover on the left.", + "defaultValue": "['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']" + }, + { + "name": "footerContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Footer content\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. footerContent={hide => }", + "defaultValue": "null" + }, + { + "name": "hasAutoWidth", + "type": "boolean", + "description": "Removes fixed-width and allows width to be defined by contents", + "defaultValue": "false" + }, + { + "name": "hasNoPadding", + "type": "boolean", + "description": "Allows content to touch edges of popover container", + "defaultValue": "false" + }, + { + "name": "headerComponent", + "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "description": "Sets the heading level to use for the popover header. Default is h6.", + "defaultValue": "'h6'" + }, + { + "name": "headerContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Simple header content to be placed within a title.\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. headerContent={hide => }", + "defaultValue": "null" + }, + { + "name": "headerIcon", + "type": "React.ReactNode", + "description": "Icon to be displayed in the popover header *", + "defaultValue": "null", + "beta": true + }, + { + "name": "hideOnOutsideClick", + "type": "boolean", + "description": "Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user)", + "defaultValue": "true" + }, + { + "name": "id", + "type": "string", + "description": "id used as part of the various popover elements (popover-${id}-header/body/footer)" + }, + { + "name": "isVisible", + "type": "boolean", + "description": "True to show the popover programmatically. Used in conjunction with the shouldClose prop.\nBy default, the popover child element handles click events automatically. If you want to control this programmatically,\nthe popover will not auto-close if the Close button is clicked, ESC key is used, or if a click occurs outside the popover.\nInstead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.", + "defaultValue": "null" + }, + { + "name": "maxWidth", + "type": "string", + "description": "Maximum width of the popover (default 18.75rem)", + "defaultValue": "popoverMaxWidth && popoverMaxWidth.value" + }, + { + "name": "minWidth", + "type": "string", + "description": "Minimum width of the popover (default 6.25rem)", + "defaultValue": "popoverMinWidth && popoverMinWidth.value" + }, + { + "name": "onHidden", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has fully transitioned out.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onHide", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover begins to transition out.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onMount", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has been mounted to the DOM.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onShow", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover begins to transition in.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onShown", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has fully transitioned in.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "position", + "type": "PopoverPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'", + "description": "Popover position. Note: With 'enableFlip' set to true,\nit will change the position if there is not enough space for the starting position.\nThe behavior of where it flips to can be controlled through the flipBehavior prop.", + "defaultValue": "'top'" + }, + { + "name": "reference", + "type": "HTMLElement | (() => HTMLElement) | React.RefObject", + "description": "The reference element to which the Popover is relatively placed to.\nIf you can wrap the reference with the Popover, you can use the children prop instead.\nUsage: document.getElementById('reference-element')} />" + }, + { + "name": "shouldClose", + "type": "(tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void", + "description": "Callback function that is only invoked when isVisible is also controlled. Called when the popover Close button is\nclicked, Enter key was used on it, or the ESC key is used.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "shouldOpen", + "type": "(showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void", + "description": "Callback function that is only invoked when isVisible is also controlled. Called when the Enter key is\nused on the focused trigger", + "defaultValue": "(): void => null" + }, + { + "name": "showClose", + "type": "boolean", + "description": "Whether to show the close button", + "defaultValue": "true" + }, + { + "name": "tippyProps", + "type": "Partial", + "description": "- no longer used", + "deprecated": true + }, + { + "name": "withFocusTrap", + "type": "boolean", + "description": "Whether to trap focus in the popover" + }, + { + "name": "zIndex", + "type": "number", + "description": "z-index of the popover", + "defaultValue": "9999" + } + ] + } + ], + "cssPrefix": [ + "pf-c-description-list" + ], + "examples": [ + "Basic", + "Term help text", + "Default 2 col", + "Default 3 col on lg", + "Horizontal", + "Horizontal using custom term width modifier", + "Horizontal 2 col", + "Horizontal 3 col on lg", + "Compact", + "Compact horizontal", + "Fluid horizontal", + "Column fill", + "Default responsive columns", + "Horizontal responsive columns", + "Responsive horizontal, vertical group layout", + "Default auto column width", + "Horizontal auto column width", + "Default inline grid", + "Auto-fit basic", + "Auto-fit, min width modified grid template columns", + "Auto-fit, min width modified, responsive grid template columns", + "Icons on terms" + ] +}; +pageData.liveContext = { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListDescription, + DescriptionListGroup, + DescriptionListTermHelpText, + DescriptionListTermHelpTextButton, + Popover, + PlusCircleIcon, + CubeIcon, + BookIcon, + KeyIcon, + GlobeIcon, + FlagIcon +}; +pageData.examples = { + 'Basic': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Basic","lang":"ts"}}> + + , + 'Term help text': props => + (\n \n \n \n Name} bodyContent={
Additional name info
}>\n Name \n \n \n Example\n \n \n \n Namespace} bodyContent={
Additional namespace info
}>\n Namespace \n \n \n \n mary-test\n \n \n \n \n Labels} bodyContent={
Additional labels info
}>\n Labels \n \n \n example\n \n \n \n Pod selector} bodyContent={
Additional pod selector info
}>\n Pod selector \n \n \n \n \n \n \n \n \n Annotation} bodyContent={
Additional annotation info
}>\n Annotation \n \n \n 2 Annotations\n \n \n);\n","title":"Term help text","lang":"ts"}}> + + , + 'Default 2 col': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Default 2 col","lang":"ts"}}> + + , + 'Default 3 col on lg': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Default 3 col on lg","lang":"ts"}}> + + , + 'Horizontal': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Horizontal","lang":"ts"}}> + + , + 'Horizontal using custom term width modifier': props => + (\n \n \n Name longer than the default term width\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Horizontal using custom term width modifier","lang":"ts"}}> + + , + 'Horizontal 2 col': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Horizontal 2 col","lang":"ts"}}> + + , + 'Horizontal 3 col on lg': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Horizontal 3 col on lg","lang":"ts"}}> + + , + 'Compact': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Compact","lang":"ts"}}> + + , + 'Compact horizontal': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Compact horizontal","lang":"ts"}}> + + , + 'Fluid horizontal': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Fluid horizontal","lang":"ts"}}> + + , + 'Column fill': props => + (\n \n \n Name\n \n This is a long description that should wrap to multiple lines in a multi-column layout.\n \n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Column fill","lang":"ts"}}> + + , + 'Default responsive columns': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Default responsive columns","lang":"ts"}}> + + , + 'Horizontal responsive columns': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Horizontal responsive columns","lang":"ts"}}> + + , + 'Responsive horizontal, vertical group layout': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Responsive horizontal, vertical group layout","lang":"ts"}}> + + , + 'Default auto column width': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Default auto column width","lang":"ts"}}> + + , + 'Horizontal auto column width': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Horizontal auto column width","lang":"ts"}}> + + , + 'Default inline grid': props => + (\n \n \n Name\n Example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Default inline grid","lang":"ts"}}> + + , + 'Auto-fit basic': props => + (\n \n \n Name\n example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Auto-fit basic","lang":"ts"}}> + + , + 'Auto-fit, min width modified grid template columns': props => + (\n \n \n Name\n example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Auto-fit, min width modified grid template columns","lang":"ts"}}> + + , + 'Auto-fit, min width modified, responsive grid template columns': props => + (\n \n \n Name\n example\n \n \n Namespace\n \n mary-test\n \n \n \n Labels\n example\n \n \n Pod selector\n \n \n \n \n \n Annotation\n 2 Annotations\n \n \n);\n","title":"Auto-fit, min width modified, responsive grid template columns","lang":"ts"}}> + + , + 'Icons on terms': props => + (\n \n \n }>Name\n Example\n \n \n }>Namespace\n \n mary-test\n \n \n \n }>Labels\n example\n \n \n }>Pod selector\n \n \n \n \n \n }>Annotation\n 2 Annotations\n \n \n);\n","title":"Icons on terms","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Term help text"])} + {React.createElement(pageData.examples["Default 2 col"])} + {React.createElement(pageData.examples["Default 3 col on lg"])} + {React.createElement(pageData.examples["Horizontal"])} + {React.createElement(pageData.examples["Horizontal using custom term width modifier"])} + {React.createElement(pageData.examples["Horizontal 2 col"])} + {React.createElement(pageData.examples["Horizontal 3 col on lg"])} + {React.createElement(pageData.examples["Compact"])} + {React.createElement(pageData.examples["Compact horizontal"])} + {React.createElement(pageData.examples["Fluid horizontal"])} + {React.createElement(pageData.examples["Column fill"])} + + {`Responsive column definitions`} + + {React.createElement(pageData.examples["Default responsive columns"])} + {React.createElement(pageData.examples["Horizontal responsive columns"])} + {React.createElement(pageData.examples["Responsive horizontal, vertical group layout"])} + + {`Auto-column-width`} + + {React.createElement(pageData.examples["Default auto column width"])} + {React.createElement(pageData.examples["Horizontal auto column width"])} + + {`Inline grid`} + + {React.createElement(pageData.examples["Default inline grid"])} + + {`Auto fit`} + + {React.createElement(pageData.examples["Auto-fit basic"])} + {React.createElement(pageData.examples["Auto-fit, min width modified grid template columns"])} + {React.createElement(pageData.examples["Auto-fit, min width modified, responsive grid template columns"])} + + {`With icons`} + + {React.createElement(pageData.examples["Icons on terms"])} + +); +Component.displayName = 'ComponentsDescriptionListReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/divider/react.js b/packages/react-docs/src/generated/components/divider/react.js new file mode 100644 index 00000000000..741c61a3344 --- /dev/null +++ b/packages/react-docs/src/generated/components/divider/react.js @@ -0,0 +1,119 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Divider", + "section": "components", + "source": "react", + "slug": "/components/divider/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Divider/examples/Divider.md", + "propComponents": [ + { + "name": "Divider", + "description": "", + "props": [ + { + "name": "className", + "type": "string", + "description": "Additional classes added to the divider" + }, + { + "name": "component", + "type": "'hr' | 'li' | 'div'", + "description": "The component type to use", + "defaultValue": "DividerVariant.hr" + }, + { + "name": "inset", + "type": "{\n default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n}", + "description": "Insets at various breakpoints." + }, + { + "name": "isVertical", + "type": "boolean", + "description": "Use `orientation` instead. Flag to indicate the divider is vertical (must be in a flex layout)", + "defaultValue": "false", + "deprecated": true + }, + { + "name": "orientation", + "type": "{\n default?: 'vertical' | 'horizontal';\n sm?: 'vertical' | 'horizontal';\n md?: 'vertical' | 'horizontal';\n lg?: 'vertical' | 'horizontal';\n xl?: 'vertical' | 'horizontal';\n '2xl'?: 'vertical' | 'horizontal';\n}", + "description": "Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout." + } + ] + } + ], + "cssPrefix": [ + "pf-c-divider" + ], + "examples": [ + "Using hr", + "Using li", + "Using div", + "Inset medium", + "Inset at various breakpoints", + "Vertical in flex layout", + "Vertical in flex layout, inset medium", + "Vertical in flex layout, inset at various breakpoints", + "Switch orientation at various breakpoints" + ] +}; +pageData.examples = { + 'Using hr': props => + ;\n","title":"Using hr","lang":"ts"}}> + + , + 'Using li': props => + (\n
    \n
  • List item one
    • \n \n
  • List item two
    • \n
\n);\n","title":"Using li","lang":"ts"}}> + + , + 'Using div': props => + ;\n","title":"Using div","lang":"ts"}}> + + , + 'Inset medium': props => + ;\n","title":"Inset medium","lang":"ts"}}> + + , + 'Inset at various breakpoints': props => + (\n \n);\n","title":"Inset at various breakpoints","lang":"ts"}}> + + , + 'Vertical in flex layout': props => + (\n \n first item\n \n second item\n \n);\n","title":"Vertical in flex layout","lang":"ts"}}> + + , + 'Vertical in flex layout, inset medium': props => + (\n \n first item\n \n second item\n \n);\n","title":"Vertical in flex layout, inset medium","lang":"ts"}}> + + , + 'Vertical in flex layout, inset at various breakpoints': props => + (\n \n first item\n \n second item\n \n);\n","title":"Vertical in flex layout, inset at various breakpoints","lang":"ts"}}> + + , + 'Switch orientation at various breakpoints': props => + (\n \n first item\n \n second item\n \n);\n","title":"Switch orientation at various breakpoints","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Using hr"])} + {React.createElement(pageData.examples["Using li"])} + {React.createElement(pageData.examples["Using div"])} + {React.createElement(pageData.examples["Inset medium"])} + {React.createElement(pageData.examples["Inset at various breakpoints"])} + {React.createElement(pageData.examples["Vertical in flex layout"])} + {React.createElement(pageData.examples["Vertical in flex layout, inset medium"])} + {React.createElement(pageData.examples["Vertical in flex layout, inset at various breakpoints"])} + {React.createElement(pageData.examples["Switch orientation at various breakpoints"])} + +); +Component.displayName = 'ComponentsDividerReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/drag-and-drop/react.js b/packages/react-docs/src/generated/components/drag-and-drop/react.js new file mode 100644 index 00000000000..bd80e4074ce --- /dev/null +++ b/packages/react-docs/src/generated/components/drag-and-drop/react.js @@ -0,0 +1,173 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Drag and drop", + "section": "components", + "source": "react", + "slug": "/components/drag-and-drop/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/DragDrop/examples/DragDrop.md", + "propComponents": [ + { + "name": "DragDrop", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Potentially Droppable and Draggable children" + }, + { + "name": "onDrag", + "type": "(source: DraggableItemPosition) => boolean", + "description": "Callback for drag event. Return true to allow drag, false to disallow.", + "defaultValue": "() => true" + }, + { + "name": "onDragMove", + "type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => void", + "description": "Callback on mouse move while dragging.", + "defaultValue": "() => {}" + }, + { + "name": "onDrop", + "type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => boolean", + "description": "Callback for drop event. Return true to allow drop, false to disallow.", + "defaultValue": "() => false" + } + ] + }, + { + "name": "Draggable", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside DragDrop" + }, + { + "name": "className", + "type": "string", + "description": "Class to add to outer div" + }, + { + "name": "hasNoWrapper", + "type": "boolean", + "description": "Don't wrap the component in a div. Requires passing a single child.", + "defaultValue": "false" + }, + { + "name": "style", + "type": "No type info", + "defaultValue": "{}" + } + ] + }, + { + "name": "Droppable", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside DragDrop" + }, + { + "name": "className", + "type": "string", + "description": "Class to add to outer div" + }, + { + "name": "droppableId", + "type": "string", + "description": "Id to be passed back on drop events", + "defaultValue": "'defaultId'" + }, + { + "name": "hasNoWrapper", + "type": "boolean", + "description": "Don't wrap the component in a div. Requires passing a single child.", + "defaultValue": "false" + }, + { + "name": "zone", + "type": "string", + "description": "Name of zone that items can be dragged between. Should specify if there is more than one Droppable on the page.", + "defaultValue": "'defaultZone'" + } + ] + }, + { + "name": "DraggableItemPosition", + "description": "", + "props": [ + { + "name": "droppableId", + "type": "string", + "description": "Parent droppableId", + "required": true + }, + { + "name": "index", + "type": "number", + "description": "Index of item in parent Droppable", + "required": true + } + ] + } + ], + "beta": true, + "examples": [ + "Basic", + "Multiple lists" + ] +}; +pageData.examples = { + 'Basic': props => + \n Array.from({ length: count }, (_, idx) => idx).map(idx => ({\n id: `item-${idx}`,\n content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)\n }));\n\nconst reorder = (list: ItemType[], startIndex: number, endIndex: number) => {\n const result = list;\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n};\n\nexport const DragDropBasic: React.FunctionComponent = () => {\n const [items, setItems] = React.useState(getItems(10));\n\n function onDrop(source: SourceType, dest: DestinationType) {\n if (dest) {\n const newItems = reorder(items, source.index, dest.index);\n setItems(newItems);\n\n return true;\n }\n return false;\n }\n\n return (\n \n \n {items.map(({ content }, i) => (\n \n {content}\n \n ))}\n \n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Multiple lists': props => + \n Array.from({ length: count }, (_, idx) => idx + startIndex).map(idx => ({\n id: `item-${idx}`,\n content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)\n }));\n\nconst reorder = (list: ItemType[], startIndex: number, endIndex: number) => {\n const result = list;\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n};\n\nconst move = (source: ItemType[], destination: ItemType[], sourceIndex: number, destIndex: number) => {\n const sourceClone = source;\n const destClone = destination;\n const [removed] = sourceClone.splice(sourceIndex, 1);\n destClone.splice(destIndex, 0, removed);\n return [sourceClone, destClone];\n};\n\nexport const DragDropMultipleLists: React.FunctionComponent = () => {\n const [items, setItems] = React.useState({\n items1: getItems(10, 0),\n items2: getItems(5, 10)\n });\n\n function onDrop(source: SourceType, dest: DestinationType) {\n // eslint-disable-next-line no-console\n console.log(source, dest);\n if (dest) {\n if (source.droppableId === dest.droppableId) {\n const newItems = reorder(\n source.droppableId === 'items1' ? items.items1 : items.items2,\n source.index,\n dest.index\n );\n if (source.droppableId === 'items1') {\n setItems({\n items1: newItems,\n items2: items.items2\n });\n } else {\n setItems({\n items1: items.items1,\n items2: newItems\n });\n }\n } else {\n const [newItems1, newItems2] = move(\n source.droppableId === 'items1' ? items.items1 : items.items2,\n dest.droppableId === 'items1' ? items.items1 : items.items2,\n source.index,\n dest.index\n );\n setItems({\n items1: source.droppableId === 'items1' ? newItems1 : newItems2,\n items2: dest.droppableId === 'items1' ? newItems1 : newItems2\n });\n }\n return true;\n }\n return false;\n }\n\n return (\n \n \n {Object.entries(items).map(([key, subitems]) => (\n \n \n {subitems.map(({ id, content }) => (\n \n {content}\n \n ))}\n \n \n ))}\n \n \n );\n};\n","title":"Multiple lists","lang":"ts"}}> + + +}; + +const Component = () => ( + +

+ {`You can use the `} + + {`DragDrop`} + + {` component to move items in or between lists. The `} + + {`DragDrop`} + + {` component should contain `} + + {`Droppable`} + + {` components which contain `} + + {`Draggable`} + + {` components.`} +

+ (\n \n {' '}\n {/* DragDrop houses the context for dragging and dropping */}\n \n You can put anything here! It will be wrapped in a styled div.\n You can have as many Draggables as you like.\n \n \n {' '}\n {/* You can also have many droppables! */}\n \n \n \n);","lang":"ts","noLive":true}}> + +

+ {`Note: Keyboard accessibility and screen reader accessibility are still in development.`} +

+ + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Multiple lists"])} + +); +Component.displayName = 'ComponentsDragAndDropReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/drawer/react.js b/packages/react-docs/src/generated/components/drawer/react.js new file mode 100644 index 00000000000..ca84a08ad3f --- /dev/null +++ b/packages/react-docs/src/generated/components/drawer/react.js @@ -0,0 +1,452 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Drawer", + "section": "components", + "source": "react", + "slug": "/components/drawer/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Drawer/examples/Drawer.md", + "propComponents": [ + { + "name": "Drawer", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered in the left hand panel" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Drawer.", + "defaultValue": "''" + }, + { + "name": "isExpanded", + "type": "boolean", + "description": "Indicates if the drawer is expanded", + "defaultValue": "false" + }, + { + "name": "isInline", + "type": "boolean", + "description": "Indicates if the content element and panel element are displayed side by side.", + "defaultValue": "false" + }, + { + "name": "isStatic", + "type": "boolean", + "description": "Indicates if the drawer will always show both content and panel.", + "defaultValue": "false" + }, + { + "name": "onExpand", + "type": "() => void", + "description": "Callback when drawer panel is expanded after waiting 250ms for animation to complete.", + "defaultValue": "() => {}" + }, + { + "name": "position", + "type": "'left' | 'right' | 'bottom'", + "description": "Position of the drawer panel", + "defaultValue": "'right'" + } + ] + }, + { + "name": "DrawerContent", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content to be rendered in the drawer." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Drawer.", + "defaultValue": "''" + }, + { + "name": "colorVariant", + "type": "DrawerColorVariant | 'light-200' | 'default'", + "description": "Color variant of the background of the drawer panel", + "defaultValue": "DrawerColorVariant.default" + }, + { + "name": "panelContent", + "type": "React.ReactNode", + "description": "Content rendered in the drawer panel.", + "required": true + } + ] + }, + { + "name": "DrawerPanelContent", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content to be rendered in the drawer panel." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the drawer.", + "defaultValue": "''" + }, + { + "name": "colorVariant", + "type": "DrawerColorVariant | 'light-200' | 'default'", + "description": "Color variant of the background of the drawer panel", + "defaultValue": "DrawerColorVariant.default" + }, + { + "name": "defaultSize", + "type": "string", + "description": "The starting size of a resizable drawer, in either pixels or percentage." + }, + { + "name": "hasNoBorder", + "type": "boolean", + "description": "Flag indicating that the drawer panel should not have a border.", + "defaultValue": "false" + }, + { + "name": "id", + "type": "string", + "description": "ID of the drawer panel" + }, + { + "name": "increment", + "type": "number", + "description": "The increment amount for keyboard drawer resizing, in pixels.", + "defaultValue": "5" + }, + { + "name": "isResizable", + "type": "boolean", + "description": "Flag indicating that the drawer panel should be resizable.", + "defaultValue": "false" + }, + { + "name": "maxSize", + "type": "string", + "description": "The maximum size of a drawer, in either pixels or percentage." + }, + { + "name": "minSize", + "type": "string", + "description": "The minimum size of a drawer, in either pixels or percentage." + }, + { + "name": "onResize", + "type": "(width: number, id: string) => void", + "description": "Callback for resize end." + }, + { + "name": "resizeAriaLabel", + "type": "string", + "description": "Aria label for the resizable drawer splitter.", + "defaultValue": "'Resize'" + }, + { + "name": "widths", + "type": "{\n default?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n lg?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n xl?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n}", + "description": "Width for drawer panel at various breakpoints. Overriden by resizable drawer minSize and defaultSize." + } + ] + }, + { + "name": "DrawerContentBody", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content to be rendered in the drawer" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Drawer.", + "defaultValue": "''" + }, + { + "name": "hasPadding", + "type": "boolean", + "description": "Indicates if there should be padding around the drawer content body", + "defaultValue": "false" + } + ] + }, + { + "name": "DrawerPanelBody", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content to be rendered in the drawer" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Drawer.", + "defaultValue": "''" + }, + { + "name": "hasNoPadding", + "type": "boolean", + "description": "Indicates if there should be no padding around the drawer panel body", + "defaultValue": "false" + } + ] + }, + { + "name": "DrawerSection", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content to be rendered in the drawer section." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the drawer section.", + "defaultValue": "''" + }, + { + "name": "colorVariant", + "type": "DrawerColorVariant | 'light-200' | 'default'", + "description": "Color variant of the background of the drawer Section", + "defaultValue": "DrawerColorVariant.default" + } + ] + }, + { + "name": "DrawerHead", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content to be rendered in the drawer head" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the drawer head.", + "defaultValue": "''" + }, + { + "name": "hasNoPadding", + "type": "boolean", + "description": "Indicates if there should be no padding around the drawer panel body of the head", + "defaultValue": "false" + } + ] + }, + { + "name": "DrawerActions", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Actions to be rendered in the panel head." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the drawer actions button.", + "defaultValue": "''" + } + ] + }, + { + "name": "DrawerCloseButton", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Accessible label for the drawer close button", + "defaultValue": "'Close drawer panel'" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the drawer close button outer
.", + "defaultValue": "''" + }, + { + "name": "onClose", + "type": "() => void", + "description": "A callback for when the close button is clicked", + "defaultValue": "() => undefined as any" + } + ] + } + ], + "cssPrefix": [ + "pf-c-drawer" + ], + "examples": [ + "Basic", + "Panel on right", + "Panel on left", + "Panel on bottom", + "Basic inline", + "Inline panel on right", + "Inline panel on left", + "Stacked content body elements", + "Modified content padding", + "Modified panel padding", + "Additional section above drawer content", + "Static drawer", + "Breakpoint", + "Resizable on right", + "Resizable on left", + "Resizable on bottom", + "Resizable on inline", + "Panel with light-200 background" + ] +}; +pageData.examples = { + 'Basic': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Panel on right': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Panel on right","lang":"ts"}}> + + , + 'Panel on left': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Panel on left","lang":"ts"}}> + + , + 'Panel on bottom': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n
\n \n \n {drawerContent}\n \n \n
\n \n );\n};\n","title":"Panel on bottom","lang":"ts"}}> + + , + 'Basic inline': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Basic inline","lang":"ts"}}> + + , + 'Inline panel on right': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Inline panel on right","lang":"ts"}}> + + , + 'Inline panel on left': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Inline panel on left","lang":"ts"}}> + + , + 'Stacked content body elements': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n

\n drawer title{' '}\n

\n \n \n \n drawer-panel\n \n drawer-panel with no padding\n drawer-panel\n \n );\n\n return (\n \n \n \n \n content-body\n content-body with padding\n content-body\n \n \n \n );\n};\n","title":"Stacked content body elements","lang":"ts"}}> + + , + 'Modified content padding': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n \n Drawer content padding. {drawerContent}\n \n \n \n \n );\n};\n","title":"Modified content padding","lang":"ts"}}> + + , + 'Modified panel padding': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Modified panel padding","lang":"ts"}}> + + , + 'Additional section above drawer content': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n drawer-section\n \n {drawerContent}\n \n \n \n );\n};\n","title":"Additional section above drawer content","lang":"ts"}}> + + , + 'Static drawer': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Static drawer","lang":"ts"}}> + +

+ + + {`Note:`} + + {` For mobile viewports, all drawer variants behave the same way. At the `} + + + {`md`} + + {` breakpoint, or where `} + + + {`.pf-m-static{-on-[lg, xl, 2xl]}`} + + {` is applied, the `} + + + {`static drawer`} + + {` variant’s `} + + + {`close button`} + + {` is automatically hidden because the drawer panel doesn’t close by design.`} +

+ , + 'Breakpoint': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Breakpoint","lang":"ts"}}> + + , + 'Resizable on right': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const onResize = (newWidth: number, id: string) => {\n // eslint-disable-next-line no-console\n console.log(`${id} has new width of: ${newWidth}`);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Resizable on right","lang":"ts"}}> + + , + 'Resizable on left': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Resizable on left","lang":"ts"}}> + + , + 'Resizable on bottom': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n
\n \n \n {drawerContent}\n \n \n
\n \n );\n};\n","title":"Resizable on bottom","lang":"ts"}}> + + , + 'Resizable on inline': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Resizable on inline","lang":"ts"}}> + + , + 'Panel with light-200 background': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n const [panelGray, setPanelGray] = React.useState(true);\n const [contentGray, setContentGray] = React.useState(false);\n const [sectionGray, setSectionGray] = React.useState(false);\n\n const drawerRef = React.useRef();\n\n const onExpand = () => {\n drawerRef.current && drawerRef.current.focus();\n };\n\n const onClick = () => {\n setIsExpanded(!isExpanded);\n };\n\n const onCloseClick = () => {\n setIsExpanded(false);\n };\n\n const togglePanelGray = (checked: boolean) => {\n setPanelGray(checked);\n };\n\n const toggleSectionGray = (checked: boolean) => {\n setSectionGray(checked);\n };\n\n const toggleContentGray = (checked: boolean) => {\n setContentGray(checked);\n };\n\n const panelContent = (\n \n \n \n drawer-panel\n \n \n \n \n \n \n );\n\n const drawerContent =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n return (\n \n \n \n \n
\n \n \n \n drawer-section\n \n \n {drawerContent}\n \n \n \n );\n};\n","title":"Panel with light-200 background","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Panel on right"])} + {React.createElement(pageData.examples["Panel on left"])} + {React.createElement(pageData.examples["Panel on bottom"])} + {React.createElement(pageData.examples["Basic inline"])} + {React.createElement(pageData.examples["Inline panel on right"])} + {React.createElement(pageData.examples["Inline panel on left"])} + {React.createElement(pageData.examples["Stacked content body elements"])} + {React.createElement(pageData.examples["Modified content padding"])} + {React.createElement(pageData.examples["Modified panel padding"])} + {React.createElement(pageData.examples["Additional section above drawer content"])} + {React.createElement(pageData.examples["Static drawer"])} + {React.createElement(pageData.examples["Breakpoint"])} + {React.createElement(pageData.examples["Resizable on right"])} + {React.createElement(pageData.examples["Resizable on left"])} + {React.createElement(pageData.examples["Resizable on bottom"])} + {React.createElement(pageData.examples["Resizable on inline"])} + {React.createElement(pageData.examples["Panel with light-200 background"])} + +); +Component.displayName = 'ComponentsDrawerReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/dropdown/react.js b/packages/react-docs/src/generated/components/dropdown/react.js new file mode 100644 index 00000000000..fd9023a5d71 --- /dev/null +++ b/packages/react-docs/src/generated/components/dropdown/react.js @@ -0,0 +1,675 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; +import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; +import { Link } from '@reach/router'; +import avatarImg from '../../../../../react-core/src/components/Dropdown/examples/../../Avatar/examples/avatarImg.svg'; +const pageData = { + "id": "Dropdown", + "section": "components", + "source": "react", + "slug": "/components/dropdown/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Dropdown/examples/Dropdown.md", + "propComponents": [ + { + "name": "Dropdown", + "description": "", + "props": [ + { + "name": "alignments", + "type": "{\n sm?: 'right' | 'left';\n md?: 'right' | 'left';\n lg?: 'right' | 'left';\n xl?: 'right' | 'left';\n '2xl'?: 'right' | 'left';\n}", + "description": "Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property." + }, + { + "name": "autoFocus", + "type": "boolean", + "description": "Flag to indicate if the first dropdown item should gain initial focus, set false when adding\na specific auto-focus item (like a current selection) otherwise leave as true" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything which can be rendered in a dropdown" + }, + { + "name": "className", + "type": "string", + "description": "Classes applied to root element of dropdown" + }, + { + "name": "contextProps", + "type": "DropdownContext", + "description": "Props for extreme customization of dropdown" + }, + { + "name": "direction", + "type": "DropdownDirection | 'up' | 'down'", + "description": "Display menu above or below dropdown toggle" + }, + { + "name": "dropdownItems", + "type": "any[]", + "description": "Array of DropdownItem nodes that will be rendered in the dropdown Menu list" + }, + { + "name": "isFlipEnabled", + "type": "boolean", + "description": "Flag for indicating that the dropdown menu should automatically flip vertically when\nit reaches the boundary. This prop can only be used when the dropdown component is not\nappended inline, e.g. `menuAppendTo=\"parent\"`", + "defaultValue": "false" + }, + { + "name": "isFullHeight", + "type": "boolean", + "description": "Flag indicating that the dropdown should expand to full height" + }, + { + "name": "isGrouped", + "type": "boolean", + "description": "Flag to indicate if dropdown has groups" + }, + { + "name": "isOpen", + "type": "boolean", + "description": "Flag to indicate if menu is opened" + }, + { + "name": "isPlain", + "type": "boolean", + "description": "Display the toggle with no border or background" + }, + { + "name": "isText", + "type": "boolean", + "description": "Display the toggle in text only mode" + }, + { + "name": "menuAppendTo", + "type": "HTMLElement | (() => HTMLElement) | 'inline' | 'parent'", + "description": "The container to append the menu to. Defaults to 'inline'.\nIf your menu is being cut off you can append it to an element higher up the DOM tree.\nSome examples:\nmenuAppendTo=\"parent\"\nmenuAppendTo={() => document.body}\nmenuAppendTo={document.getElementById('target')}", + "defaultValue": "'inline'" + }, + { + "name": "onSelect", + "type": "(event?: React.SyntheticEvent) => void", + "description": "Function callback called when user selects item" + }, + { + "name": "position", + "type": "DropdownPosition | 'right' | 'left'", + "description": "Indicates where menu will be aligned horizontally" + }, + { + "name": "toggle", + "type": "React.ReactElement", + "description": "Toggle for the dropdown, examples: or ", + "required": true + } + ] + }, + { + "name": "DropdownGroup", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Checkboxes within group", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the DropdownGroup control", + "defaultValue": "''" + }, + { + "name": "label", + "type": "React.ReactNode", + "description": "Group label", + "defaultValue": "''" + } + ] + }, + { + "name": "DropdownItem", + "description": "", + "props": [ + { + "name": "additionalChild", + "type": "React.ReactNode", + "description": "Additional node to include alongside item within the
  • " + }, + { + "name": "autoFocus", + "type": "boolean", + "description": "Initial focus on the item when the menu is opened (Note: Only applicable to one of the items)" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything which can be rendered as dropdown item" + }, + { + "name": "className", + "type": "string", + "description": "Classes applied to root element of dropdown item" + }, + { + "name": "component", + "type": "React.ReactNode", + "description": "A ReactElement to render, or a string to use as the component tag.\nExample: component={Alert}\nExample: component=\"button\"\nIf React.isValidElement(component) the className prop will be injected unless styleChildren=\"false\"", + "defaultValue": "'a'" + }, + { + "name": "componentID", + "type": "string", + "description": "ID for the component element" + }, + { + "name": "customChild", + "type": "React.ReactNode", + "description": "Custom item rendering that receives the DropdownContext" + }, + { + "name": "description", + "type": "React.ReactNode", + "description": "A short description of the dropdown item, displayed under the dropdown item content", + "defaultValue": "null" + }, + { + "name": "href", + "type": "string", + "description": "Default hyperlink location" + }, + { + "name": "icon", + "type": "React.ReactNode", + "description": "An image to display within the DropdownItem, appearing before any component children", + "defaultValue": "null" + }, + { + "name": "isAriaDisabled", + "type": "boolean", + "description": "Render dropdown item as aria-disabled option", + "defaultValue": "false" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Render dropdown item as disabled option", + "defaultValue": "false" + }, + { + "name": "isHovered", + "type": "boolean", + "description": "Forces display of the hover state of the element", + "defaultValue": "false" + }, + { + "name": "isPlainText", + "type": "boolean", + "description": "Render dropdown item as non-interactive item", + "defaultValue": "false" + }, + { + "name": "listItemClassName", + "type": "string", + "description": "Class to be applied to list item" + }, + { + "name": "styleChildren", + "type": "boolean", + "description": "Whether to set className on component when React.isValidElement(component)" + }, + { + "name": "tabIndex", + "type": "number | null", + "description": "tabIndex to use, null to unset it", + "defaultValue": "-1" + }, + { + "name": "tooltip", + "type": "React.ReactNode", + "description": "Tooltip to display when hovered over the item" + }, + { + "name": "tooltipProps", + "type": "any", + "description": "Additional tooltip props forwarded to the Tooltip component", + "defaultValue": "{}" + } + ] + }, + { + "name": "DropdownToggle", + "description": "", + "props": [ + { + "name": "aria-haspopup", + "type": "boolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree'", + "description": "Accessibility property to indicate correct has popup" + }, + { + "name": "aria-label", + "type": "string", + "description": "Accessible label for the dropdown toggle button" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything which can be rendered as dropdown toggle button", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Classes applied to root element of dropdown toggle button", + "defaultValue": "''" + }, + { + "name": "getMenuRef", + "type": "() => HTMLElement", + "description": "The menu element", + "defaultValue": "null" + }, + { + "name": "icon", + "type": "React.ReactNode", + "description": "An image to display within the dropdown toggle, appearing before any component children", + "defaultValue": "null" + }, + { + "name": "id", + "type": "string", + "description": "HTML ID of dropdown toggle", + "defaultValue": "''" + }, + { + "name": "isActive", + "type": "boolean", + "description": "Forces active state", + "defaultValue": "false" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Whether or not the
    has a disabled state", + "defaultValue": "false" + }, + { + "name": "isOpen", + "type": "boolean", + "description": "Flag to indicate if menu is opened", + "defaultValue": "false" + }, + { + "name": "isPlain", + "type": "boolean", + "description": "Display the toggle with no border or background", + "defaultValue": "false" + }, + { + "name": "isPrimary", + "type": "boolean", + "description": "Use `toggleVariant` instead. Whether or not the dropdown toggle button should have primary button styling", + "defaultValue": "false", + "deprecated": true + }, + { + "name": "isText", + "type": "boolean", + "description": "Display the toggle in text only mode", + "defaultValue": "false" + }, + { + "name": "onEnter", + "type": "(event?: React.MouseEvent) => void", + "description": "Callback called when the Enter key is pressed" + }, + { + "name": "onToggle", + "type": "(value: boolean, event: any) => void", + "description": "Callback called when toggle is clicked", + "defaultValue": "(_isOpen: boolean) => undefined as any" + }, + { + "name": "parentRef", + "type": "HTMLElement", + "description": "Element which wraps toggle", + "defaultValue": "null" + }, + { + "name": "splitButtonItems", + "type": "React.ReactNode[]", + "description": "Elements to display before the toggle button. When included, renders the toggle as a split button." + }, + { + "name": "splitButtonVariant", + "type": "'action' | 'checkbox'", + "description": "Variant of split button toggle", + "defaultValue": "'checkbox'" + }, + { + "name": "toggleIndicator", + "type": "React.ElementType | null", + "description": "The icon to display for the toggle, appearing after any component children. Defaults to CaretDownIcon. Set to null to not show an icon.", + "defaultValue": "CaretDownIcon" + }, + { + "name": "toggleVariant", + "type": "'primary' | 'secondary' | 'default'", + "description": "Alternate styles for the dropdown toggle button", + "defaultValue": "'default'" + }, + { + "name": "type", + "type": "'button' | 'submit' | 'reset'", + "description": "Type to put on the button" + } + ] + }, + { + "name": "DropdownToggleCheckbox", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Aria-label of the checkbox", + "required": true + }, + { + "name": "checked", + "type": "boolean | null", + "description": "Alternate Flag to show if the checkbox is checked" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Element to be rendered inside the " + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the DropdownToggleCheckbox", + "defaultValue": "''" + }, + { + "name": "id", + "type": "string", + "description": "Id of the checkbox", + "required": true + }, + { + "name": "isChecked", + "type": "boolean | null", + "description": "Flag to show if the checkbox is checked" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Flag to show if the checkbox is disabled", + "defaultValue": "false" + }, + { + "name": "isValid", + "type": "boolean", + "description": "Flag to show if the checkbox selection is valid or invalid", + "defaultValue": "true" + }, + { + "name": "onChange", + "type": "(checked: boolean, event: React.FormEvent) => void", + "description": "A callback for when the checkbox selection changes", + "defaultValue": "() => undefined as any" + } + ] + }, + { + "name": "DropdownToggleAction", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Aria-label of the action button" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Element to be rendered inside the ,\n onToggle(isOpen, 'available')}\n id=\"complex-available-toggle\"\n />\n }\n isOpen={isAvailableKebabOpen}\n isPlain\n dropdownItems={dropdownItems}\n key=\"availableDropdown\"\n />\n ];\n\n const chosenOptionsActions = [\n onSort('chosen')}\n aria-label=\"Sort chosen options\"\n key=\"chosenSortButton\"\n isDisabled={isDisabled}\n >\n \n ,\n onToggle(isOpen, 'chosen')}\n id=\"complex-chosen-toggle\"\n />\n }\n isOpen={isChosenKebabOpen}\n isPlain\n dropdownItems={dropdownItems}\n key=\"chosenDropdown\"\n />\n ];\n\n return (\n \n \n setIsDisabled(!isDisabled)}\n />\n \n );\n};\n","title":"Using more complex options with actions","lang":"ts"}}> + + , + 'With tree': props => + {\n const [availableOptions, setAvailableOptions] = React.useState([\n {\n id: 'F1',\n text: 'Folder 1',\n isChecked: false,\n checkProps: { 'aria-label': 'Folder 1' },\n hasBadge: true,\n badgeProps: { isRead: true },\n children: [\n { id: 'O1', text: 'Option 1', isChecked: false, checkProps: { 'aria-label': 'Option 1' } },\n {\n id: 'F1A',\n text: 'Folder 1A',\n isChecked: false,\n checkProps: { 'aria-label': 'Folder 1A' },\n children: [\n { id: 'O2', text: 'Option 2', isChecked: false, checkProps: { 'aria-label': 'Option 2' } },\n { id: 'O3', text: 'Option 3', isChecked: false, checkProps: { 'aria-label': 'Option 3' } }\n ]\n },\n { id: 'O4', text: 'Option 4', isChecked: false, checkProps: { 'aria-label': 'Option 4' } }\n ]\n },\n { id: 'O5', text: 'Option 5', isChecked: false, checkProps: { 'aria-label': 'Option 5' } },\n {\n id: 'F2',\n text: 'Folder 2',\n isChecked: false,\n checkProps: { 'aria-label': 'Folder 2' },\n children: [\n { id: 'O6', text: 'Option 6', isChecked: false, checkProps: { 'aria-label': 'Option 6' } },\n { id: 'O7', text: 'Option 5', isChecked: false, checkProps: { 'aria-label': 'Option 5 duplicate' } }\n ]\n }\n ]);\n\n const [chosenOptions, setChosenOptions] = React.useState([\n {\n id: 'CF1',\n text: 'Chosen Folder 1',\n isChecked: false,\n checkProps: { 'aria-label': 'Chosen Folder 1' },\n hasBadge: true,\n badgeProps: { isRead: true },\n children: [\n { id: 'CO1', text: 'Chosen Option 1', isChecked: false, checkProps: { 'aria-label': 'Chosen Option 1' } },\n {\n id: 'CF1A',\n text: 'Chosen Folder 1A',\n isChecked: false,\n checkProps: { 'aria-label': 'Chosen Folder 1A' },\n children: [\n {\n id: 'CO2',\n text: 'Chosen Option 2',\n isChecked: false,\n checkProps: { 'aria-label': 'Chosen Option 2' }\n },\n {\n id: 'CO3',\n text: 'Chosen Option 3',\n isChecked: false,\n checkProps: { 'aria-label': 'Chosen Option 3' }\n }\n ]\n },\n { id: 'CO4', text: 'Chosen Option 4', isChecked: false, checkProps: { 'aria-label': 'Chosen Option 4' } }\n ]\n }\n ]);\n\n const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {\n setAvailableOptions(newAvailableOptions.sort());\n setChosenOptions(newChosenOptions.sort());\n };\n\n return (\n \n );\n};\n","title":"With tree","lang":"ts"}}> + + , + 'Composable dual list selector': props => + {\n const [availableOptions, setAvailableOptions] = React.useState([\n { text: 'Apple', selected: false, isVisible: true },\n { text: 'Banana', selected: false, isVisible: true },\n { text: 'Pineapple', selected: false, isVisible: true },\n { text: 'Orange', selected: false, isVisible: true },\n { text: 'Grape', selected: false, isVisible: true },\n { text: 'Peach', selected: false, isVisible: true },\n { text: 'Strawberry', selected: false, isVisible: true }\n ]);\n const [chosenOptions, setChosenOptions] = React.useState([]);\n const [availableFilter, setAvailableFilter] = React.useState('');\n const [chosenFilter, setChosenFilter] = React.useState('');\n\n // callback for moving selected options between lists\n const moveSelected = (fromAvailable: boolean) => {\n const sourceOptions = fromAvailable ? availableOptions : chosenOptions;\n const destinationOptions = fromAvailable ? chosenOptions : availableOptions;\n for (let i = 0; i < sourceOptions.length; i++) {\n const option = sourceOptions[i];\n if (option.selected && option.isVisible) {\n sourceOptions.splice(i, 1);\n destinationOptions.push(option);\n option.selected = false;\n i--;\n }\n }\n if (fromAvailable) {\n setAvailableOptions([...sourceOptions]);\n setChosenOptions([...destinationOptions]);\n } else {\n setChosenOptions([...sourceOptions]);\n setAvailableOptions([...destinationOptions]);\n }\n };\n\n // callback for moving all options between lists\n const moveAll = (fromAvailable: boolean) => {\n if (fromAvailable) {\n setChosenOptions([...availableOptions.filter(option => option.isVisible), ...chosenOptions]);\n setAvailableOptions([...availableOptions.filter(option => !option.isVisible)]);\n } else {\n setAvailableOptions([...chosenOptions.filter(option => option.isVisible), ...availableOptions]);\n setChosenOptions([...chosenOptions.filter(option => !option.isVisible)]);\n }\n };\n\n // callback when option is selected\n const onOptionSelect = (\n event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,\n index: number,\n isChosen: boolean\n ) => {\n if (isChosen) {\n const newChosen = [...chosenOptions];\n newChosen[index].selected = !chosenOptions[index].selected;\n setChosenOptions(newChosen);\n } else {\n const newAvailable = [...availableOptions];\n newAvailable[index].selected = !availableOptions[index].selected;\n setAvailableOptions(newAvailable);\n }\n };\n\n // builds a search input - used in each dual list selector pane\n const buildSearchInput = (isAvailable: boolean) => {\n const onChange = (value: string) => {\n isAvailable ? setAvailableFilter(value) : setChosenFilter(value);\n const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];\n toFilter.forEach(option => {\n option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());\n });\n };\n\n return (\n onChange('')}\n />\n );\n };\n\n // builds a sort control - passed to both dual list selector panes\n const buildSort = (isAvailable: boolean) => {\n const onSort = () => {\n const toSort = isAvailable ? [...availableOptions] : [...chosenOptions];\n toSort.sort((a, b) => {\n if (a.text > b.text) {\n return 1;\n }\n if (a.text < b.text) {\n return -1;\n }\n return 0;\n });\n if (isAvailable) {\n setAvailableOptions(toSort);\n } else {\n setChosenOptions(toSort);\n }\n };\n\n return (\n \n );\n };\n\n return (\n \n option.selected && option.isVisible).length} of ${\n availableOptions.filter(option => option.isVisible).length\n } options selected`}\n searchInput={buildSearchInput(true)}\n actions={[buildSort(true)]}\n >\n \n {availableOptions.map((option, index) =>\n option.isVisible ? (\n onOptionSelect(e, index, false)}\n >\n {option.text}\n \n ) : null\n )}\n \n \n \n option.selected)}\n onClick={() => moveSelected(true)}\n aria-label=\"Add selected\"\n tooltipContent=\"Add selected\"\n >\n \n \n moveAll(true)}\n aria-label=\"Add all\"\n tooltipContent=\"Add all\"\n >\n \n \n moveAll(false)}\n aria-label=\"Remove all\"\n tooltipContent=\"Remove all\"\n >\n \n \n moveSelected(false)}\n isDisabled={!chosenOptions.some(option => option.selected)}\n aria-label=\"Remove selected\"\n tooltipContent=\"Remove selected\"\n >\n \n \n \n option.selected && option.isVisible).length} of ${\n chosenOptions.filter(option => option.isVisible).length\n } options selected`}\n searchInput={buildSearchInput(false)}\n actions={[buildSort(false)]}\n isChosen\n >\n \n {chosenOptions.map((option, index) =>\n option.isVisible ? (\n onOptionSelect(e, index, true)}\n >\n {option.text}\n \n ) : null\n )}\n \n \n \n );\n};\n","title":"Composable dual list selector","lang":"ts"}}> + +

    + {`For more flexibility, a dual list selector can be built using sub components. When doing so, the intended component relationships are arranged as follows:`} +

    + + \n \n \n \n \n \n\n \n /* The standard Dual list selector has 4 controls */\n \n\n \n \n \n \n \n","lang":"noLive"}}> + + +     , + 'Composable dual list selector with drag and drop': props => + {\n const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);\n const [availableOptions, setAvailableOptions] = React.useState([\n { text: 'Apple', selected: false, isVisible: true },\n { text: 'Banana', selected: false, isVisible: true },\n { text: 'Pineapple', selected: false, isVisible: true }\n ]);\n const [chosenOptions, setChosenOptions] = React.useState([\n { text: 'Orange', selected: false, isVisible: true },\n { text: 'Grape', selected: false, isVisible: true },\n { text: 'Peach', selected: false, isVisible: true },\n { text: 'Strawberry', selected: false, isVisible: true }\n ]);\n\n const moveSelected = (fromAvailable: boolean) => {\n const sourceOptions = fromAvailable ? availableOptions : chosenOptions;\n const destinationOptions = fromAvailable ? chosenOptions : availableOptions;\n for (let i = 0; i < sourceOptions.length; i++) {\n const option = sourceOptions[i];\n if (option.selected && option.isVisible) {\n sourceOptions.splice(i, 1);\n destinationOptions.push(option);\n option.selected = false;\n i--;\n }\n }\n if (fromAvailable) {\n setAvailableOptions([...sourceOptions]);\n setChosenOptions([...destinationOptions]);\n } else {\n setChosenOptions([...sourceOptions]);\n setAvailableOptions([...destinationOptions]);\n }\n };\n\n const moveAll = (fromAvailable: boolean) => {\n if (fromAvailable) {\n setChosenOptions([...availableOptions.filter(option => option.isVisible), ...chosenOptions]);\n setAvailableOptions([...availableOptions.filter(option => !option.isVisible)]);\n } else {\n setAvailableOptions([...chosenOptions.filter(option => option.isVisible), ...availableOptions]);\n setChosenOptions([...chosenOptions.filter(option => !option.isVisible)]);\n }\n };\n\n const onOptionSelect = (\n event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,\n index: number,\n isChosen: boolean\n ) => {\n if (ignoreNextOptionSelect) {\n setIgnoreNextOptionSelect(false);\n return;\n }\n if (isChosen) {\n const newChosen = [...chosenOptions];\n newChosen[index].selected = !chosenOptions[index].selected;\n setChosenOptions(newChosen);\n } else {\n const newAvailable = [...availableOptions];\n newAvailable[index].selected = !availableOptions[index].selected;\n setAvailableOptions(newAvailable);\n }\n };\n\n const onDrop = (source: SourceType, dest: DestinationType) => {\n if (dest) {\n const newList = [...chosenOptions];\n const [removed] = newList.splice(source.index, 1);\n newList.splice(dest.index, 0, removed);\n setChosenOptions(newList);\n return true;\n }\n return false;\n };\n\n return (\n \n option.selected && option.isVisible).length} of ${\n availableOptions.filter(option => option.isVisible).length\n } options selected`}\n >\n \n {availableOptions.map((option, index) =>\n option.isVisible ? (\n onOptionSelect(e, index, false)}\n >\n {option.text}\n \n ) : null\n )}\n \n \n \n option.selected)}\n onClick={() => moveSelected(true)}\n aria-label=\"Add selected\"\n >\n \n \n moveAll(true)}\n aria-label=\"Add all\"\n >\n \n \n moveAll(false)}\n aria-label=\"Remove all\"\n >\n \n \n moveSelected(false)}\n isDisabled={!chosenOptions.some(option => option.selected)}\n aria-label=\"Remove selected\"\n >\n \n \n \n {\n setIgnoreNextOptionSelect(true);\n return true;\n }}\n onDrop={onDrop}\n >\n option.selected && option.isVisible).length} of ${\n chosenOptions.filter(option => option.isVisible).length\n } options selected`}\n isChosen\n >\n \n \n {chosenOptions.map((option, index) =>\n option.isVisible ? (\n \n onOptionSelect(e, index, true)}\n isDraggable\n >\n {option.text}\n \n \n ) : null\n )}\n \n \n \n \n \n );\n};\n","title":"Composable dual list selector with drag and drop","lang":"ts"}}> + +

    + {`This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:`} +

    + +
      + + + +
    • + {`wrap the `} + + + {`DualListSelectorPane`} + + {` in a `} + + + {`DragDrop`} + + {` component`} +
      • + + + +
    • + {`wrap the `} + + + {`DualListSelectorList`} + + {` in a `} + + + {`Droppable`} + + {` component`} +
      • + + + +
    • + {`wrap the `} + + + {`DualListSelectorListItem`} + + {` components in a `} + + + {`Draggable`} + + {` component`} +
      • + + + +
    • + {`define an `} + + + {`onDrop`} + + {` callback which reorders the sortable options.`} + + + +
        + + + +
      • + {`The `} + + + {`onDrop`} + + {` function provides the starting location and destination location for a dragged item. It should return +true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's +old position.`} +
        • + + + +
      • + {`define an `} + + + {`onDrag`} + + {` callback which ensures that the drag event will not cross hairs with the `} + + + {`onOptionSelect`} + + {` click +event set on the option. Note: the `} + + + {`ignoreNextOptionSelect`} + + {` state value is used to prevent selection while dragging.`} +
        • + + +
      + + +
      • + + +
    + +

    + {`Note: Keyboard accessibility and screen reader accessibility for the `} + + + {`DragDrop`} + + {` component are still in development.`} +

    +     , + 'Composable dual list selector with tree': props => + = ({ data }: ExampleProps) => {\n const [checkedLeafIds, setCheckedLeafIds] = React.useState([]);\n const [chosenLeafIds, setChosenLeafIds] = React.useState(['beans', 'beef', 'chicken', 'tofu']);\n const [chosenFilter, setChosenFilter] = React.useState('');\n const [availableFilter, setAvailableFilter] = React.useState('');\n let hiddenChosen: string[] = [];\n let hiddenAvailable: string[] = [];\n\n // helper function to build memoized lists\n const buildTextById = (node: FoodNode): { [key: string]: string } => {\n let textById = {};\n if (!node) {\n return textById;\n }\n textById[node.id] = node.text;\n if (node.children) {\n node.children.forEach(child => {\n textById = { ...textById, ...buildTextById(child) };\n });\n }\n return textById;\n };\n\n // helper function to build memoized lists\n const getDescendantLeafIds = (node: FoodNode): string[] => {\n if (!node.children || !node.children.length) {\n return [node.id];\n } else {\n let childrenIds = [];\n node.children.forEach(child => {\n childrenIds = [...childrenIds, ...getDescendantLeafIds(child)];\n });\n return childrenIds;\n }\n };\n\n // helper function to build memoized lists\n const getLeavesById = (node: FoodNode): { [key: string]: string[] } => {\n let leavesById = {};\n if (!node.children || !node.children.length) {\n leavesById[node.id] = [node.id];\n } else {\n node.children.forEach(child => {\n leavesById[node.id] = getDescendantLeafIds(node);\n leavesById = { ...leavesById, ...getLeavesById(child) };\n });\n }\n return leavesById;\n };\n\n // Builds a map of child leaf nodes by node id - memoized so that it only rebuilds the list if the data changes.\n const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeText } = React.useMemo(() => {\n let leavesById = {};\n let allLeaves = [];\n let nodeTexts = {};\n data.forEach(foodNode => {\n nodeTexts = { ...nodeTexts, ...buildTextById(foodNode) };\n leavesById = { ...leavesById, ...getLeavesById(foodNode) };\n allLeaves = [...allLeaves, ...getDescendantLeafIds(foodNode)];\n });\n return {\n memoizedLeavesById: leavesById,\n memoizedAllLeaves: allLeaves,\n memoizedNodeText: nodeTexts\n };\n }, [data]);\n\n const moveChecked = (toChosen: boolean) => {\n setChosenLeafIds(\n prevChosenIds =>\n toChosen\n ? [...prevChosenIds, ...checkedLeafIds] // add checked ids to chosen list\n : [...prevChosenIds.filter(x => !checkedLeafIds.includes(x))] // remove checked ids from chosen list\n );\n\n // uncheck checked ids that just moved\n setCheckedLeafIds(prevChecked =>\n toChosen\n ? [...prevChecked.filter(x => chosenLeafIds.includes(x))]\n : [...prevChecked.filter(x => !chosenLeafIds.includes(x))]\n );\n };\n\n const moveAll = (toChosen: boolean) => {\n if (toChosen) {\n setChosenLeafIds(memoizedAllLeaves);\n } else {\n setChosenLeafIds([]);\n }\n };\n\n const areAllDescendantsSelected = (node: FoodNode, isChosen: boolean) =>\n memoizedLeavesById[node.id].every(\n id => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))\n );\n const areSomeDescendantsSelected = (node: FoodNode, isChosen: boolean) =>\n memoizedLeavesById[node.id].some(\n id => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))\n );\n\n const isNodeChecked = (node: FoodNode, isChosen: boolean) => {\n if (areAllDescendantsSelected(node, isChosen)) {\n return true;\n }\n if (areSomeDescendantsSelected(node, isChosen)) {\n return null;\n }\n return false;\n };\n\n const onOptionCheck = (\n event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,\n isChecked: boolean,\n node: DualListSelectorTreeItemData,\n isChosen: boolean\n ) => {\n const nodeIdsToCheck = memoizedLeavesById[node.id].filter(id =>\n isChosen\n ? chosenLeafIds.includes(id) && !hiddenChosen.includes(id)\n : !chosenLeafIds.includes(id) && !hiddenAvailable.includes(id)\n );\n if (isChosen) {\n hiddenChosen = [];\n } else {\n hiddenAvailable = [];\n }\n setCheckedLeafIds(prevChecked => {\n const otherCheckedNodeNames = prevChecked.filter(id => !nodeIdsToCheck.includes(id));\n return !isChecked ? otherCheckedNodeNames : [...otherCheckedNodeNames, ...nodeIdsToCheck];\n });\n };\n\n // builds a search input - used in each dual list selector pane\n const buildSearchInput = (isChosen: boolean) => {\n const onChange = value => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));\n\n return (\n onChange('')} />\n );\n };\n\n // Builds the DualListSelectorTreeItems from the FoodNodes\n const buildOptions = (\n isChosen: boolean,\n [node, ...remainingNodes]: FoodNode[],\n hasParentMatch: boolean\n ): DualListSelectorTreeItemData[] => {\n if (!node) {\n return [];\n }\n\n const isChecked = isNodeChecked(node, isChosen);\n\n const filterValue = isChosen ? chosenFilter : availableFilter;\n const descendentLeafIds = memoizedLeavesById[node.id];\n const descendentsOnThisPane = isChosen\n ? descendentLeafIds.filter(id => chosenLeafIds.includes(id))\n : descendentLeafIds.filter(id => !chosenLeafIds.includes(id));\n\n const hasMatchingChildren =\n filterValue && descendentsOnThisPane.some(id => memoizedNodeText[id].includes(filterValue));\n const isFilterMatch = filterValue && node.text.includes(filterValue) && descendentsOnThisPane.length > 0;\n\n // A node is displayed if either of the following is true:\n // - There is no filter value and this node or its descendents belong on this pane\n // - There is a filter value and this node or one of this node's descendents or ancestors match on this pane\n const isDisplayed =\n (!filterValue && descendentsOnThisPane.length > 0) ||\n hasMatchingChildren ||\n (hasParentMatch && descendentsOnThisPane.length > 0) ||\n isFilterMatch;\n\n if (!isDisplayed) {\n if (isChosen) {\n hiddenChosen.push(node.id);\n } else {\n hiddenAvailable.push(node.id);\n }\n }\n\n return [\n ...(isDisplayed\n ? [\n {\n id: node.id,\n text: node.text,\n isChecked,\n checkProps: { 'aria-label': `Select ${node.text}` },\n hasBadge: node.children && node.children.length > 0,\n badgeProps: { isRead: true },\n defaultExpanded: isChosen ? !!chosenFilter : !!availableFilter,\n children: node.children\n ? buildOptions(isChosen, node.children, isFilterMatch || hasParentMatch)\n : undefined\n }\n ]\n : []),\n ...(!isDisplayed && node.children && node.children.length\n ? buildOptions(isChosen, node.children, hasParentMatch)\n : []),\n ...(remainingNodes ? buildOptions(isChosen, remainingNodes, hasParentMatch) : [])\n ];\n };\n\n const buildPane = (isChosen: boolean): React.ReactNode => {\n const options: DualListSelectorTreeItemData[] = buildOptions(isChosen, data, false);\n const numOptions = isChosen ? chosenLeafIds.length : memoizedAllLeaves.length - chosenLeafIds.length;\n const numSelected = checkedLeafIds.filter(id =>\n isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)\n ).length;\n const status = `${numSelected} of ${numOptions} options selected`;\n return (\n \n \n onOptionCheck(e, isChecked, itemData, isChosen)}\n />\n \n \n );\n };\n\n return (\n \n {buildPane(false)}\n \n !chosenLeafIds.includes(x)).length}\n onClick={() => moveChecked(true)}\n aria-label=\"Add selected\"\n >\n \n \n moveAll(true)}\n aria-label=\"Add all\"\n >\n \n \n moveAll(false)}\n aria-label=\"Remove all\"\n >\n \n \n moveChecked(false)}\n isDisabled={!checkedLeafIds.filter(x => !!chosenLeafIds.includes(x)).length}\n aria-label=\"Remove selected\"\n >\n \n \n \n {buildPane(true)}\n \n );\n};\n\nexport const DualListSelectorComposableTreeExample: React.FunctionComponent = () => (\n \n);\n","title":"Composable dual list selector with tree","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Basic with tooltips"])} + {React.createElement(pageData.examples["Basic with search"])} + {React.createElement(pageData.examples["Using more complex options with actions"])} + {React.createElement(pageData.examples["With tree"])} + {React.createElement(pageData.examples["Composable dual list selector"])} + {React.createElement(pageData.examples["Composable dual list selector with drag and drop"])} + {React.createElement(pageData.examples["Composable dual list selector with tree"])} + +); +Component.displayName = 'ComponentsDualListSelectorReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/empty-state/react.js b/packages/react-docs/src/generated/components/empty-state/react.js new file mode 100644 index 00000000000..4481b5081ff --- /dev/null +++ b/packages/react-docs/src/generated/components/empty-state/react.js @@ -0,0 +1,175 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; +const pageData = { + "id": "Empty state", + "section": "components", + "source": "react", + "slug": "/components/empty-state/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/EmptyState/examples/EmptyState.md", + "propComponents": [ + { + "name": "EmptyState", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the EmptyState", + "required": true + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the EmptyState", + "defaultValue": "''" + }, + { + "name": "isFullHeight", + "type": "boolean", + "description": "Cause component to consume the available height of its container" + }, + { + "name": "variant", + "type": "'xs' | 'small' | 'large' | 'xl' | 'full'", + "description": "Modifies EmptyState max-width", + "defaultValue": "EmptyStateVariant.full" + } + ] + }, + { + "name": "EmptyStateBody", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the EmptyState" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the EmptyState", + "defaultValue": "''" + } + ] + }, + { + "name": "EmptyStateIcon", + "description": "", + "props": [ + { + "name": "className", + "type": "string", + "description": "Additional classes added to the EmptyState", + "defaultValue": "''" + }, + { + "name": "color", + "type": "string", + "description": "Changes the color of the icon." + }, + { + "name": "component", + "type": "React.ComponentType", + "description": "Component to be rendered inside the EmptyState on container variant" + }, + { + "name": "icon", + "type": "React.ComponentType", + "description": "Icon component to be rendered inside the EmptyState on icon variant\nUsually a CheckCircleIcon, ExclamationCircleIcon, LockIcon, PlusCircleIcon, RocketIcon\nSearchIcon, or WrenchIcon" + }, + { + "name": "variant", + "type": "'icon' | 'container'", + "description": "Adds empty state icon variant styles", + "defaultValue": "'icon'" + } + ] + }, + { + "name": "EmptyStateSecondaryActions", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the EmptyState", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the EmptyState", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-empty-state" + ], + "examples": [ + "Basic", + "Extra small", + "Small", + "Large", + "Extra large", + "Spinner", + "No match found" + ] +}; +pageData.liveContext = { + CubesIcon, + SearchIcon +}; +pageData.examples = { + 'Basic': props => + (\n \n \n \n Empty state\n \n \n This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible\n enough to meet a variety of needs.\n \n \n \n \n \n \n \n \n \n \n \n);\n","title":"Basic","lang":"ts"}}> + + , + 'Extra small': props => + (\n \n \n Empty state\n \n \n This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible\n enough to meet a variety of needs.\n \n \n \n \n \n \n \n \n \n \n);\n","title":"Extra small","lang":"ts"}}> + + , + 'Small': props => + (\n \n \n \n Empty state\n \n \n This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible\n enough to meet a variety of needs.\n \n \n \n \n \n \n \n \n \n \n \n);\n","title":"Small","lang":"ts"}}> + + , + 'Large': props => + (\n \n \n \n Empty state\n \n \n This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible\n enough to meet a variety of needs.\n \n \n \n \n \n \n \n \n \n \n \n);\n","title":"Large","lang":"ts"}}> + + , + 'Extra large': props => + (\n \n \n \n Empty state\n \n \n This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible\n enough to meet a variety of needs.\n \n \n \n \n \n \n \n \n \n \n \n);\n","title":"Extra large","lang":"ts"}}> + + , + 'Spinner': props => + (\n \n \n \n Loading\n \n \n);\n","title":"Spinner","lang":"ts"}}> + + , + 'No match found': props => + (\n \n \n \n No results found\n \n No results match the filter criteria. Clear all filters and try again.\n \n \n \n \n);\n","title":"No match found","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Extra small"])} + {React.createElement(pageData.examples["Small"])} + {React.createElement(pageData.examples["Large"])} + {React.createElement(pageData.examples["Extra large"])} + {React.createElement(pageData.examples["Spinner"])} + {React.createElement(pageData.examples["No match found"])} + +); +Component.displayName = 'ComponentsEmptyStateReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/expandable-section/react.js b/packages/react-docs/src/generated/components/expandable-section/react.js new file mode 100644 index 00000000000..8db06faae6b --- /dev/null +++ b/packages/react-docs/src/generated/components/expandable-section/react.js @@ -0,0 +1,210 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +const pageData = { + "id": "Expandable section", + "section": "components", + "source": "react", + "slug": "/components/expandable-section/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md", + "propComponents": [ + { + "name": "ExpandableSection", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Expandable Component" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Expandable Component", + "defaultValue": "''" + }, + { + "name": "contentId", + "type": "string", + "description": "ID of the content of the expandable section", + "defaultValue": "''" + }, + { + "name": "displaySize", + "type": "'default' | 'large'", + "description": "Display size variant. Set to large for disclosure styling.", + "defaultValue": "'default'" + }, + { + "name": "isActive", + "type": "boolean", + "description": "Forces active state", + "defaultValue": "false" + }, + { + "name": "isDetached", + "type": "boolean", + "description": "Indicates the expandable section has a detached toggle", + "defaultValue": "false" + }, + { + "name": "isExpanded", + "type": "boolean", + "description": "Flag to indicate if the content is expanded" + }, + { + "name": "isIndented", + "type": "boolean", + "description": "Flag to indicate if the content is indented", + "defaultValue": "false" + }, + { + "name": "isWidthLimited", + "type": "boolean", + "description": "Flag to indicate the width of the component is limited. Set to true for disclosure styling.", + "defaultValue": "false" + }, + { + "name": "onToggle", + "type": "(isExpanded: boolean) => void", + "description": "Callback function to toggle the expandable content. Detached expandable sections should use the onToggle property of ExpandableSectionToggle.", + "defaultValue": "(isExpanded): void => undefined" + }, + { + "name": "toggleContent", + "type": "React.ReactNode", + "description": "React node that appears in the attached toggle in place of toggle text" + }, + { + "name": "toggleText", + "type": "string", + "description": "Text that appears in the attached toggle", + "defaultValue": "''" + }, + { + "name": "toggleTextCollapsed", + "type": "string", + "description": "Text that appears in the attached toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text)", + "defaultValue": "''" + }, + { + "name": "toggleTextExpanded", + "type": "string", + "description": "Text that appears in the attached toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text)", + "defaultValue": "''" + } + ] + }, + { + "name": "ExpandableSectionToggle", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the expandable toggle." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the expandable toggle.", + "defaultValue": "''" + }, + { + "name": "contentId", + "type": "string", + "description": "ID of the toggle's respective expandable section content." + }, + { + "name": "direction", + "type": "'up' | 'down'", + "description": "Direction the toggle arrow should point when the expandable section is expanded.", + "defaultValue": "'down'" + }, + { + "name": "isExpanded", + "type": "boolean", + "description": "Flag indicating if the expandable section is expanded.", + "defaultValue": "false" + }, + { + "name": "onToggle", + "type": "(isExpanded: boolean) => void", + "description": "Callback function to toggle the expandable content." + } + ] + } + ], + "cssPrefix": [ + "pf-c-expandable-section" + ], + "examples": [ + "Basic", + "Uncontrolled", + "Uncontrolled with dynamic toggle text", + "Detached", + "Disclosure variation", + "Indented", + "With custom toggle content" + ] +}; +pageData.liveContext = { + CheckCircleIcon +}; +pageData.examples = { + 'Basic': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n\n const onToggle = (isExpanded: boolean) => {\n setIsExpanded(isExpanded);\n };\n\n return (\n \n This content is visible only when the component is expanded.\n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Uncontrolled': props => + (\n \n This content is visible only when the component is expanded.\n \n);\n","title":"Uncontrolled","lang":"ts"}}> + + , + 'Uncontrolled with dynamic toggle text': props => + (\n \n This content is visible only when the component is expanded.\n \n);\n","title":"Uncontrolled with dynamic toggle text","lang":"ts"}}> + + , + 'Detached': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n\n const onToggle = (isExpanded: boolean) => {\n setIsExpanded(isExpanded);\n };\n\n const contentId = 'detached-toggle-content';\n return (\n \n \n \n This content is visible only when the component is expanded.\n \n \n \n \n {isExpanded ? 'Show less' : 'Show more'}\n \n \n \n );\n};\n","title":"Detached","lang":"ts"}}> + + , + 'Disclosure variation': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n\n const onToggle = (isExpanded: boolean) => {\n setIsExpanded(isExpanded);\n };\n\n return (\n \n This content is visible only when the component is expanded.\n \n );\n};\n","title":"Disclosure variation","lang":"ts"}}> + + , + 'Indented': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n\n const onToggle = (isExpanded: boolean) => {\n setIsExpanded(isExpanded);\n };\n\n return (\n \n This content is visible only when the component is expanded.\n \n );\n};\n","title":"Indented","lang":"ts"}}> + + , + 'With custom toggle content': props => + {\n const [isExpanded, setIsExpanded] = React.useState(false);\n\n const onToggle = (isExpanded: boolean) => {\n setIsExpanded(isExpanded);\n };\n\n return (\n \n You can also use icons \n \n or badges \n 4\n !\n
    \n }\n onToggle={onToggle}\n isExpanded={isExpanded}\n >\n This content is visible only when the component is expanded.\n \n );\n};\n","title":"With custom toggle content","lang":"ts"}}> + +

    + {`By using the `} + + + {`toggleContent`} + + {` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.`} +

    + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Uncontrolled"])} + {React.createElement(pageData.examples["Uncontrolled with dynamic toggle text"])} + {React.createElement(pageData.examples["Detached"])} + {React.createElement(pageData.examples["Disclosure variation"])} + {React.createElement(pageData.examples["Indented"])} + {React.createElement(pageData.examples["With custom toggle content"])} + +); +Component.displayName = 'ComponentsExpandableSectionReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/file-upload---multiple/react-demos.js b/packages/react-docs/src/generated/components/file-upload---multiple/react-demos.js new file mode 100644 index 00000000000..957f43d1be0 --- /dev/null +++ b/packages/react-docs/src/generated/components/file-upload---multiple/react-demos.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; +const pageData = { + "id": "File upload - multiple", + "section": "components", + "source": "react-demos", + "slug": "/components/file-upload---multiple/react-demos", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/MultipleFileUploadDemos.md", + "beta": true, + "examples": [ + "Rejected file handling" + ] +}; +pageData.liveContext = { + UploadIcon +}; +pageData.examples = { + 'Rejected file handling': props => + {\n const [isHorizontal, setIsHorizontal] = React.useState(false);\n const [currentFiles, setCurrentFiles] = React.useState([]);\n const [readFileData, setReadFileData] = React.useState([]);\n const [showStatus, setShowStatus] = React.useState(false);\n const [statusIcon, setStatusIcon] = React.useState('inProgress');\n const [modalText, setModalText] = React.useState('');\n\n // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed\n if (!showStatus && currentFiles.length > 0) {\n setShowStatus(true);\n }\n\n // determine the icon that should be shown for the overall status list\n React.useEffect(() => {\n if (readFileData.length < currentFiles.length) {\n setStatusIcon('inProgress');\n } else if (readFileData.every(file => file.loadResult === 'success')) {\n setStatusIcon('success');\n } else {\n setStatusIcon('danger');\n }\n }, [readFileData, currentFiles]);\n\n // remove files from both state arrays based on their name\n const removeFiles = (namesOfFilesToRemove: string[]) => {\n const newCurrentFiles = currentFiles.filter(\n currentFile => !namesOfFilesToRemove.some(fileName => fileName === currentFile.name)\n );\n\n setCurrentFiles(newCurrentFiles);\n\n const newReadFiles = readFileData.filter(\n readFile => !namesOfFilesToRemove.some(fileName => fileName === readFile.fileName)\n );\n\n setReadFileData(newReadFiles);\n };\n\n // callback that will be called by the react dropzone with the newly dropped file objects\n const handleFileDrop = (droppedFiles: File[]) => {\n // identify what, if any, files are re-uploads of already uploaded files\n const currentFileNames = currentFiles.map(file => file.name);\n const reUploads = droppedFiles.filter(droppedFile => currentFileNames.includes(droppedFile.name));\n\n /** this promise chain is needed because if the file removal is done at the same time as the file adding react\n * won't realize that the status items for the re-uploaded files needs to be re-rendered */\n Promise.resolve()\n .then(() => removeFiles(reUploads.map(file => file.name)))\n .then(() => setCurrentFiles(prevFiles => [...prevFiles, ...droppedFiles]));\n };\n\n // callback called by the status item when a file is successfully read with the built-in file reader\n const handleReadSuccess = (data: string, file: File) => {\n setReadFileData(prevReadFiles => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);\n };\n\n // callback called by the status item when a file encounters an error while being read with the built-in file reader\n const handleReadFail = (error: DOMException, file: File) => {\n setReadFileData(prevReadFiles => [\n ...prevReadFiles,\n { loadError: error, fileName: file.name, loadResult: 'danger' }\n ]);\n };\n\n // dropzone prop that communicates to the user that files they've attempted to upload are not an appropriate type\n const handleDropRejected = (files: File[], _event: React.DragEvent) => {\n if (files.length === 1) {\n setModalText(`${files[0].name} is not an accepted file type`);\n } else {\n const rejectedMessages = files.reduce((acc, file) => (acc += `${file.name}, `), '');\n setModalText(`${rejectedMessages}are not accepted file types`);\n }\n };\n\n const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;\n\n return (\n <>\n \n }\n titleText=\"Drag and drop files here\"\n titleTextSeparator=\"or\"\n infoText=\"Accepted file types: JPEG, Doc, PDF, PNG\"\n />\n {showStatus && (\n \n {currentFiles.map(file => (\n removeFiles([file.name])}\n onReadSuccess={handleReadSuccess}\n onReadFail={handleReadFail}\n />\n ))}\n \n )}\n setModalText('')}\n >\n {modalText}\n \n \n setIsHorizontal(!isHorizontal)}\n />\n \n );\n};\n","title":"Rejected file handling","lang":"ts"}}> + +

    + {`This demo shows how to add a modal to alert users that the file(s) they attempted to drop was of a non-acceptable type.`} +

    +     +}; + +const Component = () => ( + + + {`Demos`} + + {React.createElement(pageData.examples["Rejected file handling"])} + +); +Component.displayName = 'ComponentsFileUpload-MultipleReactDemosDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/file-upload---multiple/react.js b/packages/react-docs/src/generated/components/file-upload---multiple/react.js new file mode 100644 index 00000000000..c46c44f7baf --- /dev/null +++ b/packages/react-docs/src/generated/components/file-upload---multiple/react.js @@ -0,0 +1,298 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; +const pageData = { + "id": "File upload - multiple", + "section": "components", + "source": "react", + "slug": "/components/file-upload---multiple/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md", + "propComponents": [ + { + "name": "MultipleFileUpload", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the multi upload field" + }, + { + "name": "className", + "type": "string", + "description": "Class to add to outer div" + }, + { + "name": "dropzoneProps", + "type": "DropzoneProps", + "description": "Optional extra props to customize react-dropzone.", + "defaultValue": "{}" + }, + { + "name": "isHorizontal", + "type": "boolean", + "description": "Flag setting the component to horizontal styling mode" + }, + { + "name": "onFileDrop", + "type": "(data: File[]) => void", + "description": "When files are dropped or uploaded this callback will be called with all accepted files", + "defaultValue": "() => {}" + } + ] + }, + { + "name": "MultipleFileUploadMain", + "description": "", + "props": [ + { + "name": "className", + "type": "string", + "description": "Class to add to outer div" + }, + { + "name": "infoText", + "type": "React.ReactNode", + "description": "Content rendered inside the info div" + }, + { + "name": "isUploadButtonHidden", + "type": "boolean", + "description": "Flag to prevent the upload button from being rendered" + }, + { + "name": "titleIcon", + "type": "React.ReactNode", + "description": "Content rendered inside the title icon div" + }, + { + "name": "titleText", + "type": "React.ReactNode", + "description": "Content rendered inside the title text div" + }, + { + "name": "titleTextSeparator", + "type": "React.ReactNode", + "description": "Content rendered inside the title text separator div" + } + ] + }, + { + "name": "MultipleFileUploadStatus", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside multi file upload status list" + }, + { + "name": "className", + "type": "string", + "description": "Class to add to outer div" + }, + { + "name": "statusToggleIcon", + "type": "'danger' | 'success' | 'inProgress' | React.ReactNode", + "description": "Icon to show in the status toggle" + }, + { + "name": "statusToggleText", + "type": "string", + "description": "String to show in the status toggle" + } + ] + }, + { + "name": "MultipleFileUploadStatusItem", + "description": "", + "props": [ + { + "name": "buttonAriaLabel", + "type": "string", + "description": "Adds accessibility text to the status item deletion button", + "defaultValue": "'Remove from list'" + }, + { + "name": "className", + "type": "string", + "description": "Class to add to outer div" + }, + { + "name": "customFileHandler", + "type": "(file: File) => void", + "description": "A callback to process file reading in a custom way" + }, + { + "name": "file", + "type": "File", + "description": "The file object being represented by the status item" + }, + { + "name": "fileIcon", + "type": "React.ReactNode", + "description": "A custom icon to show in place of the generic file icon" + }, + { + "name": "fileName", + "type": "string", + "description": "A custom name to display for the file rather than using built in functionality to auto-fill it" + }, + { + "name": "fileSize", + "type": "number", + "description": "A custom file size to display for the file rather than using built in functionality to auto-fill it" + }, + { + "name": "onClearClick", + "type": "React.MouseEventHandler", + "description": "Clear button was clicked", + "defaultValue": "() => {}" + }, + { + "name": "onReadFail", + "type": "(error: DOMException, onReadFail: File) => void", + "description": "A callback for when the FileReader API fails", + "defaultValue": "() => {}" + }, + { + "name": "onReadFinished", + "type": "(fileHandle: File) => void", + "description": "A callback for when a selected file finishes loading", + "defaultValue": "() => {}" + }, + { + "name": "onReadStarted", + "type": "(fileHandle: File) => void", + "description": "A callback for when a selected file starts loading", + "defaultValue": "() => {}" + }, + { + "name": "onReadSuccess", + "type": "(data: string, file: File) => void", + "description": "A callback for when the FileReader successfully reads the file", + "defaultValue": "() => {}" + }, + { + "name": "progressAriaLabel", + "type": "string", + "description": "Adds accessible text to the progress bar. Required when title not used and there is not any label associated with the progress bar" + }, + { + "name": "progressAriaLabelledBy", + "type": "string", + "description": "Associates the progress bar with it's label for accessibility purposes. Required when title not used" + }, + { + "name": "progressId", + "type": "string", + "description": "Unique identifier for progress. Generated if not specified." + }, + { + "name": "progressValue", + "type": "number", + "description": "A custom value to display for the progress component rather than using built in functionality to auto-fill it" + }, + { + "name": "progressVariant", + "type": "'danger' | 'success' | 'warning'", + "description": "A custom variant to apply to the progress component rather than using built in functionality to auto-fill it" + } + ] + } + ], + "beta": true, + "cssPrefix": [ + "pf-c-multiple-file-upload" + ], + "examples": [ + "Basic" + ] +}; +pageData.liveContext = { + UploadIcon +}; +pageData.examples = { + 'Basic': props => + {\n const [isHorizontal, setIsHorizontal] = React.useState(false);\n const [currentFiles, setCurrentFiles] = React.useState([]);\n const [readFileData, setReadFileData] = React.useState([]);\n const [showStatus, setShowStatus] = React.useState(false);\n const [statusIcon, setStatusIcon] = React.useState('inProgress');\n\n // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed\n if (!showStatus && currentFiles.length > 0) {\n setShowStatus(true);\n }\n\n // determine the icon that should be shown for the overall status list\n React.useEffect(() => {\n if (readFileData.length < currentFiles.length) {\n setStatusIcon('inProgress');\n } else if (readFileData.every(file => file.loadResult === 'success')) {\n setStatusIcon('success');\n } else {\n setStatusIcon('danger');\n }\n }, [readFileData, currentFiles]);\n\n // remove files from both state arrays based on their name\n const removeFiles = (namesOfFilesToRemove: string[]) => {\n const newCurrentFiles = currentFiles.filter(\n currentFile => !namesOfFilesToRemove.some(fileName => fileName === currentFile.name)\n );\n\n setCurrentFiles(newCurrentFiles);\n\n const newReadFiles = readFileData.filter(\n readFile => !namesOfFilesToRemove.some(fileName => fileName === readFile.fileName)\n );\n\n setReadFileData(newReadFiles);\n };\n\n // callback that will be called by the react dropzone with the newly dropped file objects\n const handleFileDrop = (droppedFiles: File[]) => {\n // identify what, if any, files are re-uploads of already uploaded files\n const currentFileNames = currentFiles.map(file => file.name);\n const reUploads = droppedFiles.filter(droppedFile => currentFileNames.includes(droppedFile.name));\n\n /** this promise chain is needed because if the file removal is done at the same time as the file adding react\n * won't realize that the status items for the re-uploaded files needs to be re-rendered */\n Promise.resolve()\n .then(() => removeFiles(reUploads.map(file => file.name)))\n .then(() => setCurrentFiles(prevFiles => [...prevFiles, ...droppedFiles]));\n };\n\n // callback called by the status item when a file is successfully read with the built-in file reader\n const handleReadSuccess = (data: string, file: File) => {\n setReadFileData(prevReadFiles => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);\n };\n\n // callback called by the status item when a file encounters an error while being read with the built-in file reader\n const handleReadFail = (error: DOMException, file: File) => {\n setReadFileData(prevReadFiles => [\n ...prevReadFiles,\n { loadError: error, fileName: file.name, loadResult: 'danger' }\n ]);\n };\n\n const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;\n\n return (\n <>\n \n }\n titleText=\"Drag and drop files here\"\n titleTextSeparator=\"or\"\n infoText=\"Accepted file types: JPEG, Doc, PDF, PNG\"\n />\n {showStatus && (\n \n {currentFiles.map(file => (\n removeFiles([file.name])}\n onReadSuccess={handleReadSuccess}\n onReadFail={handleReadFail}\n />\n ))}\n \n )}\n \n setIsHorizontal(!isHorizontal)}\n />\n \n );\n};\n","title":"Basic","lang":"ts"}}> + + +}; + +const Component = () => ( + +

    + {`File upload - multiple is able to:`} +

    +
      +
    • + {`Accept one or more files via browse or drag-and-drop`} +
      • +
    • + {`Provide their data to you using file objects via the `} + + {`onFileDrop`} + + {` callback prop`} +
      • +
    • + {`Read files as dataURLs, calling provided callbacks as needed when files start/finish being read, as well as when the read succeeds or fails`} +
      • +
    • + {`Display (in real time) the upload progress/status of each file`} +
        +
      • + {`Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic`} +
        • +
      • + {`If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the `} + + {`customFileHandler`} + + {`, `} + + {`fileName`} + + {`, `} + + {`fileSize`} + + {`, `} + + {`progressValue`} + + {`, and `} + + {`progressVariant`} + + {` props exist to allow you to do that`} +
        • +
      +
      • +
    + + {`Restricting file size and type`} + +

    + {`As with singular file upload, any `} + + {`props accepted by react-dropzone's Dropzone component`} + + {` can be passed as a dropzoneProps object in order to customize the behavior of the Dropzone, such as restricting the type of files allowed. The following examples will only accept the files they list as accepted. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the accept prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.`} +

    + + {`IMPORTANT: A note about security`} + +

    + {`Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.`} +

    + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} +     +); +Component.displayName = 'ComponentsFileUpload-MultipleReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/file-upload/react.js b/packages/react-docs/src/generated/components/file-upload/react.js new file mode 100644 index 00000000000..3d85bc4d049 --- /dev/null +++ b/packages/react-docs/src/generated/components/file-upload/react.js @@ -0,0 +1,649 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon'; +const pageData = { + "id": "File upload", + "section": "components", + "source": "react", + "slug": "/components/file-upload/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/FileUpload/examples/FileUpload.md", + "propComponents": [ + { + "name": "FileUpload", + "description": "", + "props": [ + { + "name": "allowEditingUploadedText", + "type": "boolean", + "description": "Flag to allow editing of a text file's contents after it is selected from disk" + }, + { + "name": "aria-label", + "type": "string", + "description": "Aria-label for the TextArea." + }, + { + "name": "browseButtonText", + "type": "string", + "description": "Text for the Browse button" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Additional children to render after (or instead of) the file preview.", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the FileUpload container element." + }, + { + "name": "clearButtonText", + "type": "string", + "description": "Text for the Clear button" + }, + { + "name": "dropzoneProps", + "type": "DropzoneProps", + "description": "Optional extra props to customize react-dropzone.", + "defaultValue": "{}" + }, + { + "name": "filename", + "type": "string", + "description": "Value to be shown in the read-only filename field.", + "defaultValue": "''" + }, + { + "name": "filenameAriaLabel", + "type": "string", + "description": "Aria-label for the read-only filename field" + }, + { + "name": "filenamePlaceholder", + "type": "string", + "description": "Placeholder string to display in the empty filename field" + }, + { + "name": "hideDefaultPreview", + "type": "boolean", + "description": "Flag to hide the built-in preview of the file (where available).\nIf true, you can use children to render an alternate preview." + }, + { + "name": "id", + "type": "string", + "description": "Unique id for the TextArea, also used to generate ids for accessible labels.", + "required": true + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Flag to show if the field is disabled." + }, + { + "name": "isLoading", + "type": "boolean", + "description": "Flag to show if a file is being loaded." + }, + { + "name": "isReadOnly", + "type": "boolean", + "description": "Flag to show if the field is read only." + }, + { + "name": "isRequired", + "type": "boolean", + "description": "Flag to show if the field is required." + }, + { + "name": "onChange", + "type": "(\n value: string | File,\n filename: string,\n event:\n | React.MouseEvent // Clear button was clicked\n | React.DragEvent // User dragged/dropped a file\n | React.ChangeEvent // User typed in the TextArea\n) => void", + "description": "A callback for when the file contents change. Please instead use onFileInputChange, onTextChange, onDataChange, onClearClick individually.", + "defaultValue": "() => {}", + "deprecated": true + }, + { + "name": "onClearClick", + "type": "React.MouseEventHandler", + "description": "Clear button was clicked" + }, + { + "name": "onClick", + "type": "(event: React.MouseEvent) => void", + "description": "Callback for clicking on the FileUploadField text area. By default, prevents a click in the text area from opening file dialog.", + "defaultValue": "event => event.preventDefault()" + }, + { + "name": "onDataChange", + "type": "(data: string) => void", + "description": "On data changed - if type='text' or type='dataURL' and file was loaded it will call this method" + }, + { + "name": "onFileInputChange", + "type": "(event: React.ChangeEvent | React.DragEvent, file: File) => void", + "description": "Change event emitted from the hidden \\ field associated with the component", + "defaultValue": "null" + }, + { + "name": "onReadFailed", + "type": "(error: DOMException, fileHandle: File) => void", + "description": "A callback for when the FileReader API fails", + "defaultValue": "() => {}" + }, + { + "name": "onReadFinished", + "type": "(fileHandle: File) => void", + "description": "A callback for when a selected file finishes loading", + "defaultValue": "() => {}" + }, + { + "name": "onReadStarted", + "type": "(fileHandle: File) => void", + "description": "A callback for when a selected file starts loading", + "defaultValue": "() => {}" + }, + { + "name": "onTextChange", + "type": "(text: string) => void", + "description": "Text area text changed" + }, + { + "name": "spinnerAriaValueText", + "type": "string", + "description": "Aria-valuetext for the loading spinner" + }, + { + "name": "type", + "type": "'text' | 'dataURL'", + "description": "What type of file. Determines what is is passed to `onChange` and expected by `value`\n(a string for 'text' and 'dataURL', or a File object otherwise." + }, + { + "name": "validated", + "type": "'success' | 'error' | 'default'", + "description": "Value to indicate if the field is modified to show that validation state.\nIf set to success, field will be modified to indicate valid state.\nIf set to error, field will be modified to indicate error state." + }, + { + "name": "value", + "type": "string | File", + "description": "Value of the file's contents\n(string if text file, File object otherwise)", + "defaultValue": "type === fileReaderType.text || type === fileReaderType.dataURL ? '' : null" + } + ] + }, + { + "name": "FileUploadField", + "description": "", + "props": [ + { + "name": "allowEditingUploadedText", + "type": "boolean", + "description": "Flag to allow editing of a text file's contents after it is selected from disk", + "defaultValue": "false" + }, + { + "name": "aria-label", + "type": "string", + "description": "Aria-label for the TextArea.", + "defaultValue": "'File upload'" + }, + { + "name": "browseButtonText", + "type": "string", + "description": "Text for the Browse button", + "defaultValue": "'Browse...'" + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Additional children to render after (or instead of) the file preview.", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the FileUploadField container element.", + "defaultValue": "''" + }, + { + "name": "clearButtonText", + "type": "string", + "description": "Text for the Clear button", + "defaultValue": "'Clear'" + }, + { + "name": "containerRef", + "type": "React.Ref", + "description": "A reference object to attach to the FileUploadField container element.", + "defaultValue": "null" + }, + { + "name": "filename", + "type": "string", + "description": "Value to be shown in the read-only filename field.", + "defaultValue": "''" + }, + { + "name": "filenameAriaLabel", + "type": "string", + "description": "Aria-label for the read-only filename field", + "defaultValue": "filename ? 'Read only filename' : filenamePlaceholder" + }, + { + "name": "filenamePlaceholder", + "type": "string", + "description": "Placeholder string to display in the empty filename field", + "defaultValue": "'Drag a file here or browse to upload'" + }, + { + "name": "hideDefaultPreview", + "type": "boolean", + "description": "Flag to hide the built-in preview of the file (where available).\nIf true, you can use children to render an alternate preview.", + "defaultValue": "false" + }, + { + "name": "id", + "type": "string", + "description": "Unique id for the TextArea, also used to generate ids for accessible labels", + "required": true + }, + { + "name": "isClearButtonDisabled", + "type": "boolean", + "description": "Flag to disable the Clear button", + "defaultValue": "!filename && !value" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Flag to show if the field is disabled.", + "defaultValue": "false" + }, + { + "name": "isDragActive", + "type": "boolean", + "description": "Flag to show if a file is being dragged over the field", + "defaultValue": "false" + }, + { + "name": "isLoading", + "type": "boolean", + "description": "Flag to show if a file is being loaded.", + "defaultValue": "false" + }, + { + "name": "isReadOnly", + "type": "boolean", + "description": "Flag to show if the field is read only.", + "defaultValue": "false" + }, + { + "name": "isRequired", + "type": "boolean", + "description": "Flag to show if the field is required.", + "defaultValue": "false" + }, + { + "name": "onBrowseButtonClick", + "type": "(event: React.MouseEvent) => void", + "description": "A callback for when the Browse button is clicked.", + "defaultValue": "() => {}" + }, + { + "name": "onChange", + "type": "(\n value: string,\n filename: string,\n event:\n | React.ChangeEvent // User typed in the TextArea\n | React.MouseEvent // User clicked Clear button\n) => void", + "description": "A callback for when the TextArea value changes.", + "defaultValue": "() => {}" + }, + { + "name": "onClearButtonClick", + "type": "(event: React.MouseEvent) => void", + "description": "A callback for when the Clear button is clicked.", + "defaultValue": "() => {}" + }, + { + "name": "onTextAreaBlur", + "type": "(event?: any) => void", + "description": "Callback for when focus is lost on the text area field" + }, + { + "name": "onTextAreaClick", + "type": "(event: React.MouseEvent) => void", + "description": "A callback from when the text area is clicked. Can also be set via the onClick property of FileUpload." + }, + { + "name": "onTextChange", + "type": "(text: string) => void", + "description": "Text area text changed" + }, + { + "name": "spinnerAriaValueText", + "type": "string", + "description": "Aria-valuetext for the loading spinner" + }, + { + "name": "textAreaPlaceholder", + "type": "string", + "description": "Placeholder string to display in the empty text area field", + "defaultValue": "''" + }, + { + "name": "type", + "type": "'text' | 'dataURL'", + "description": "What type of file. Determines what is is expected by `value`\n(a string for 'text' and 'dataURL', or a File object otherwise)." + }, + { + "name": "validated", + "type": "'success' | 'error' | 'default'", + "description": "Value to indicate if the field is modified to show that validation state.\nIf set to success, field will be modified to indicate valid state.\nIf set to error, field will be modified to indicate error state.", + "defaultValue": "'default'" + }, + { + "name": "value", + "type": "string | File", + "description": "Value of the file's contents\n(string if text file, File object otherwise)", + "defaultValue": "''" + } + ] + } + ], + "cssPrefix": [ + "pf-c-file-upload" + ], + "examples": [ + "Simple text file", + "Text file with edits allowed", + "Text file with restrictions", + "Simple file of any format", + "Custom file preview", + "Custom file upload" + ] +}; +pageData.liveContext = { + FileUploadIcon +}; +pageData.examples = { + 'Simple text file': props => + {\n const [value, setValue] = React.useState('');\n const [filename, setFilename] = React.useState('');\n const [isLoading, setIsLoading] = React.useState(false);\n\n const handleFileInputChange = (\n _event: React.ChangeEvent | React.DragEvent,\n file: File\n ) => {\n setFilename(file.name);\n };\n\n const handleTextOrDataChange = (value: string) => {\n setValue(value);\n };\n\n const handleClear = (_event: React.MouseEvent) => {\n setFilename('');\n setValue('');\n };\n\n const handleFileReadStarted = (_fileHandle: File) => {\n setIsLoading(true);\n };\n\n const handleFileReadFinished = (_fileHandle: File) => {\n setIsLoading(false);\n };\n\n return (\n \n );\n};\n","title":"Simple text file","lang":"ts"}}> + + , + 'Text file with edits allowed': props => + {\n const [value, setValue] = React.useState('');\n const [filename, setFilename] = React.useState('');\n const [isLoading, setIsLoading] = React.useState(false);\n\n const handleFileInputChange = (\n _event: React.ChangeEvent | React.DragEvent,\n file: File\n ) => {\n setFilename(file.name);\n };\n\n const handleTextOrDataChange = (value: string) => {\n setValue(value);\n };\n\n const handleClear = (_event: React.MouseEvent) => {\n setFilename('');\n setValue('');\n };\n\n const handleFileReadStarted = (_fileHandle: File) => {\n setIsLoading(true);\n };\n\n const handleFileReadFinished = (_fileHandle: File) => {\n setIsLoading(false);\n };\n\n return (\n \n );\n};\n","title":"Text file with edits allowed","lang":"ts"}}> + + , + 'Text file with restrictions': props => + {\n const [value, setValue] = React.useState('');\n const [filename, setFilename] = React.useState('');\n const [isLoading, setIsLoading] = React.useState(false);\n const [isRejected, setIsRejected] = React.useState(false);\n\n const handleFileInputChange = (\n _event: React.ChangeEvent | React.DragEvent,\n file: File\n ) => {\n setFilename(file.name);\n };\n\n const handleTextOrDataChange = (value: string) => {\n setValue(value);\n };\n\n const handleClear = (_event: React.MouseEvent) => {\n setFilename('');\n setValue('');\n setIsRejected(false);\n };\n\n const handleFileRejected = (_rejectedFiles: File[], _event: React.DragEvent) => {\n setIsRejected(true);\n };\n\n const handleFileReadStarted = (_fileHandle: File) => {\n setIsLoading(true);\n };\n\n const handleFileReadFinished = (_fileHandle: File) => {\n setIsLoading(false);\n };\n\n return (\n
    \n \n \n \n \n );\n};\n","title":"Text file with restrictions","lang":"ts"}}> + +
    , + 'Simple file of any format': props => + {\n const [value, setValue] = React.useState(null);\n const [filename, setFilename] = React.useState('');\n\n const handleFileInputChange = (\n _event: React.ChangeEvent | React.DragEvent,\n file: File\n ) => {\n setFilename(file.name);\n };\n\n const handleClear = (_event: React.MouseEvent) => {\n setFilename('');\n setValue('');\n };\n\n return (\n \n );\n};\n","title":"Simple file of any format","lang":"ts"}}> + + , + 'Custom file preview': props => + {\n const [value, setValue] = React.useState(null);\n const [filename, setFilename] = React.useState('');\n\n const handleFileInputChange = (\n _event: React.ChangeEvent | React.DragEvent,\n file: File\n ) => {\n setValue(file);\n setFilename(file.name);\n };\n\n const handleClear = (_event: React.MouseEvent) => {\n setFilename('');\n setValue('');\n };\n\n return (\n \n {value && (\n
    \n Custom preview here for your {value.size}-byte file named {value.name}\n
    \n )}\n \n );\n};\n","title":"Custom file preview","lang":"ts"}}> + +     , + 'Custom file upload': props => + {\n const properties = [\n 'filename',\n 'isClearButtonDisabled',\n 'isDragActive',\n 'isLoading',\n 'hideDefaultPreview',\n 'children',\n 'hasPlaceholderText'\n ];\n\n const [value, setValue] = React.useState('');\n const [filename, setFilename] = React.useState(false);\n const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);\n const [isLoading, setIsLoading] = React.useState(false);\n const [isDragActive, setIsDragActive] = React.useState(false);\n const [hideDefaultPreview, setHideDefaultPreview] = React.useState(false);\n const [children, setChildren] = React.useState(false);\n const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);\n const [checkedState, setCheckedState] = React.useState([\n filename,\n isClearButtonDisabled,\n isLoading,\n isDragActive,\n hideDefaultPreview,\n children,\n hasPlaceholderText\n ]);\n\n const handleTextAreaChange = (value: string) => {\n setValue(value);\n };\n\n const handleOnChange = (checked: boolean, stateKey: string, index: number) => {\n const updatedCheckedState = [...checkedState];\n switch (stateKey) {\n case 'filename':\n checked ? setFilename(true) : setFilename(false);\n break;\n\n case 'isClearButtonDisabled':\n checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);\n break;\n\n case 'isDragActive':\n checked ? setIsDragActive(true) : setIsDragActive(false);\n break;\n\n case 'isLoading':\n checked ? setIsLoading(true) : setIsLoading(false);\n // See notes above this example\n if (checked) {\n updatedCheckedState[properties.indexOf('hideDefaultPreview')] = false;\n setHideDefaultPreview(false);\n }\n break;\n\n case 'hideDefaultPreview':\n checked ? setHideDefaultPreview(true) : setHideDefaultPreview(false);\n // See notes above this example\n if (checked) {\n updatedCheckedState[properties.indexOf('isLoading')] = false;\n setIsLoading(false);\n }\n break;\n\n case 'children':\n checked ? setChildren(true) : setChildren(false);\n break;\n\n case 'hasPlaceholderText':\n checked ? setHasPlaceholderText(true) : setHasPlaceholderText(false);\n break;\n }\n updatedCheckedState[index] = checked;\n setCheckedState(updatedCheckedState);\n };\n\n return (\n
    \n {properties.map((stateKey, index) => (\n handleOnChange(checked, stateKey, index)}\n />\n ))}\n
    \n alert('Browse button clicked!')}\n onClearButtonClick={() => alert('Clear button clicked!')}\n isClearButtonDisabled={isClearButtonDisabled}\n isLoading={isLoading}\n isDragActive={isDragActive}\n hideDefaultPreview={hideDefaultPreview}\n browseButtonText=\"Upload\"\n textAreaPlaceholder={hasPlaceholderText ? 'File preview' : ''}\n >\n {children &&
    (A custom preview of the uploaded file can be passed as children)
    }\n \n
    \n );\n};\n","title":"Custom file upload","lang":"ts"}}> + +     +}; + +const Component = () => ( + + + {`Examples`} + +

    + {`The basic `} + + {`FileUpload`} + + {` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `} + + {`value`} + + {` and `} + + {`onFileInputChange`} + + {` event that is similar to `} + + {``} + + {` prop. The `} + + {`type`} + + {` prop determines how the `} + + {`FileUpload`} + + {` component behaves upon accepting a file, what type of value it passes to its `} + + {`onDataChange`} + + {` event.`} +

    + + {`Text files`} + +

    + {`If `} + + {`type="text"`} + + {` is passed (and `} + + {`hideDefaultPreview`} + + {` is not), a `} + + {`TextArea`} + + {` preview will be rendered underneath the filename bar. When a file is selected, its contents will be read into memory and passed to the `} + + {`onDataChange`} + + {` event as a string. Every filename change is passed to `} + + {`onFileInputChange`} + + {` same as it would do with the `} + + {``} + + {` element. +Pressing `} + + {`Clear`} + + {` button triggers `} + + {`onClearClick`} + + {` event.`} +

    + {React.createElement(pageData.examples["Simple text file"])} +

    + {`A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `} + + {`allowEditingUploadedText`} + + {` prop. +Typing/pasting text in the box will call `} + + {`onTextChange`} + + {` with a string, and a string value is expected for the `} + + {`value`} + + {` prop. :`} +

    + {React.createElement(pageData.examples["Text file with edits allowed"])} + + {`Restricting file size and type`} + +

    + {`Any `} + + {`props accepted by `} + + {`react-dropzone`} + + {`'s `} + + {`Dropzone`} + + {` component`} + + {` can be passed as a `} + + {`dropzoneProps`} + + {` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. The following example will only accept CSV files smaller than 1 KB. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the `} + + {`accept`} + + {` prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.`} +

    + + {`IMPORTANT: A note about security`} + +

    + {`Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.`} +

    + {React.createElement(pageData.examples["Text file with restrictions"])} + + {`Other file types`} + +

    + {`If no `} + + {`type`} + + {` prop is specified, the component will not read files directly. When a file is selected, a `} + + + {`File`} + + {` object`} + + {` will be passed as a second argument to `} + + {`onFileInputChange`} + + {` and your application will be responsible for reading from it (e.g. by using the `} + + {`FileReader API`} + + {` or attaching it to a `} + + {`FormData object`} + + {`). A `} + + {`File`} + + {` object will also be expected for the `} + + {`value`} + + {` prop instead of a string, and no preview of the file contents will be shown by default. The `} + + {`onReadStarted`} + + {` and `} + + {`onReadFinished`} + + {` callbacks will also not be called since the component is not reading the file.`} +

    + {React.createElement(pageData.examples["Simple file of any format"])} + + {`Customizing the file preview`} + +

    + {`Regardless of `} + + {`type`} + + {`, the preview area (the TextArea, or any future implementations of default previews for other types) can be removed by passing `} + + {`hideDefaultPreview`} + + {`, and a custom one can be rendered by passing `} + + {`children`} + + {`.`} +

    + {React.createElement(pageData.examples["Custom file preview"])} + + {`Bringing your own file browse logic`} + +

    + + {`FileUpload`} + + {` is a thin wrapper around the `} + + {`FileUploadField`} + + {` presentational component. If you need to implement your own logic for accepting files, you can instead render a `} + + {`FileUploadField`} + + {` directly, which does not include `} + + {`react-dropzone`} + + {` and requires additional props (e.g. `} + + {`onBrowseButtonClick`} + + {`, `} + + {`onClearButtonClick`} + + {`, `} + + {`isDragActive`} + + {`).`} +

    +

    + {`Note that the `} + + {`isLoading`} + + {` prop is styled to position the spinner dead center above the entire component, so it should not be used with `} + + {`hideDefaultPreview`} + + {` unless a custom empty-state preview is provided via `} + + {`children`} + + {`. The below example prevents `} + + {`isLoading`} + + {` and `} + + {`hideDefaultPreview`} + + {` from being used at the same time. You can always provide your own spinner as part of the `} + + {`children`} + + {`!`} +

    + {React.createElement(pageData.examples["Custom file upload"])} +     +); +Component.displayName = 'ComponentsFileUploadReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/form-select/react.js b/packages/react-docs/src/generated/components/form-select/react.js new file mode 100644 index 00000000000..867cff20aaa --- /dev/null +++ b/packages/react-docs/src/generated/components/form-select/react.js @@ -0,0 +1,215 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Form select", + "section": "components", + "source": "react", + "slug": "/components/form-select/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/FormSelect/examples/FormSelect.md", + "propComponents": [ + { + "name": "FormSelect", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Custom flag to show that the FormSelect requires an associated id or aria-label." + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "content rendered inside the FormSelect", + "required": true + }, + { + "name": "className", + "type": "string", + "description": "additional classes added to the FormSelect control", + "defaultValue": "''" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Flag indicating the FormSelect is disabled", + "defaultValue": "false" + }, + { + "name": "isIconSprite", + "type": "boolean", + "description": "Use the external file instead of a data URI", + "defaultValue": "false" + }, + { + "name": "isRequired", + "type": "boolean", + "description": "Sets the FormSelect required.", + "defaultValue": "false" + }, + { + "name": "onBlur", + "type": "(event: React.FormEvent) => void", + "description": "Optional callback for updating when selection loses focus", + "defaultValue": "(): any => undefined" + }, + { + "name": "onChange", + "type": "(value: string, event: React.FormEvent) => void", + "description": "Optional callback for updating when selection changes", + "defaultValue": "(): any => undefined" + }, + { + "name": "onFocus", + "type": "(event: React.FormEvent) => void", + "description": "Optional callback for updating when selection gets focus", + "defaultValue": "(): any => undefined" + }, + { + "name": "ouiaSafe", + "type": "No type info", + "defaultValue": "true" + }, + { + "name": "validated", + "type": "'success' | 'warning' | 'error' | 'default'", + "description": "Value to indicate if the select is modified to show that validation state.\nIf set to success, select will be modified to indicate valid state.\nIf set to error, select will be modified to indicate error state.", + "defaultValue": "'default'" + }, + { + "name": "value", + "type": "any", + "description": "value of selected option", + "defaultValue": "''" + } + ] + }, + { + "name": "FormSelectOption", + "description": "", + "props": [ + { + "name": "className", + "type": "string", + "description": "additional classes added to the Select Option", + "defaultValue": "''" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "flag indicating if the option is disabled", + "defaultValue": "false" + }, + { + "name": "isPlaceholder", + "type": "boolean", + "description": "flag indicating if option will have placeholder styling applied when selected *", + "defaultValue": "false" + }, + { + "name": "label", + "type": "string", + "description": "the label for the option", + "required": true + }, + { + "name": "value", + "type": "any", + "description": "the value for the option", + "defaultValue": "''" + } + ] + }, + { + "name": "FormSelectOptionGroup", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "content rendered inside the Select Option Group", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "additional classes added to the Select Option", + "defaultValue": "''" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "flag indicating if the Option Group is disabled", + "defaultValue": "false" + }, + { + "name": "label", + "type": "string", + "description": "the label for the option", + "required": true + } + ] + } + ], + "cssPrefix": [ + "pf-c-form-control" + ], + "examples": [ + "Basic", + "Validated", + "Disabled", + "Grouped", + "Icon sprite variant" + ] +}; +pageData.examples = { + 'Basic': props => + {\n const [formSelectValue, setFormSelectValue] = React.useState('mrs');\n\n const onChange = (value: string) => {\n setFormSelectValue(value);\n };\n\n const options = [\n { value: 'please choose', label: 'Select one', disabled: true },\n { value: 'mr', label: 'Mr', disabled: false },\n { value: 'miss', label: 'Miss', disabled: false },\n { value: 'mrs', label: 'Mrs', disabled: false },\n { value: 'ms', label: 'Ms', disabled: false },\n { value: 'dr', label: 'Dr', disabled: false },\n { value: 'other', label: 'Other', disabled: false }\n ];\n\n return (\n \n {options.map((option, index) => (\n \n ))}\n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Validated': props => + {\n const [formValue, setFormValue] = React.useState('');\n const [invalidText, setInvalidText] = React.useState('You must choose something');\n const [helperText, setHelperText] = React.useState('');\n const [validated, setValidated] = React.useState(ValidatedOptions.default);\n\n const simulateNetworkCall = (callback: () => void) => {\n setTimeout(callback, 2000);\n };\n\n const onChange = (value: string) => {\n setFormValue(value);\n setValidated(ValidatedOptions.default);\n setHelperText('Validating...');\n simulateNetworkCall(() => {\n if (value === '3') {\n setValidated(ValidatedOptions.success);\n setHelperText('You chose wisely');\n } else if (value === '') {\n setValidated(ValidatedOptions.warning);\n setHelperText('You must select a value');\n } else {\n setValidated(ValidatedOptions.error);\n setInvalidText('You must chose Three (thought that was obvious)');\n }\n });\n };\n\n const options = [\n { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },\n { value: '1', label: 'One', disabled: false, isPlaceholder: false },\n { value: '2', label: 'Two', disabled: false, isPlaceholder: false },\n { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }\n ];\n\n return (\n
    \n \n \n {options.map((option, index) => (\n \n ))}\n \n \n \n );\n};\n","title":"Validated","lang":"ts"}}> + +
    , + 'Disabled': props => + {\n const [formSelectValue, setFormSelectValue] = React.useState('mrs');\n\n const onChange = (value: string) => {\n setFormSelectValue(value);\n };\n\n const options = [\n { value: 'please choose', label: 'Select one', disabled: true },\n { value: 'mr', label: 'Mr', disabled: false },\n { value: 'miss', label: 'Miss', disabled: false },\n { value: 'mrs', label: 'Mrs', disabled: false },\n { value: 'ms', label: 'Ms', disabled: false },\n { value: 'dr', label: 'Dr', disabled: false },\n { value: 'other', label: 'Other', disabled: false }\n ];\n\n return (\n \n {options.map((option, index) => (\n \n ))}\n \n );\n};\n","title":"Disabled","lang":"ts"}}> + + , + 'Grouped': props => + {\n const [formSelectValue, setFormSelectValue] = React.useState('2');\n\n const onChange = (value: string) => {\n setFormSelectValue(value);\n };\n\n const groups = [\n {\n groupLabel: 'Group1',\n disabled: false,\n options: [\n { value: '1', label: 'The first option', disabled: false },\n { value: '2', label: 'Second option is selected by default', disabled: false }\n ]\n },\n {\n groupLabel: 'Group2',\n disabled: false,\n options: [\n { value: '3', label: 'The third option', disabled: false },\n { value: '4', label: 'The fourth option', disabled: false }\n ]\n },\n {\n groupLabel: 'Group3',\n disabled: true,\n options: [\n { value: '5', label: 'The fifth option', disabled: false },\n { value: '6', label: 'The sixth option', disabled: false }\n ]\n }\n ];\n\n return (\n \n {groups.map((group, index) => (\n \n {group.options.map((option, i) => (\n \n ))}\n \n ))}\n \n );\n};\n","title":"Grouped","lang":"ts"}}> + + , + 'Icon sprite variant': props => + {\n const [formSelectValue, setFormSelectValue] = React.useState('');\n const [validated, setValidated] = React.useState(ValidatedOptions.default);\n const [invalidText, setInvalidText] = React.useState('You must choose something');\n const [helperText, setHelperText] = React.useState('');\n\n const onChange = (value: string) => {\n if (value === '3') {\n setFormSelectValue(value);\n setValidated(ValidatedOptions.success);\n setHelperText('You chose wisely');\n } else if (value === '') {\n setFormSelectValue(value);\n setValidated(ValidatedOptions.warning);\n setHelperText('You must select a value');\n } else {\n setFormSelectValue(value);\n setValidated(ValidatedOptions.error);\n setInvalidText('You must chose Three (thought that was obvious)');\n }\n };\n\n const options = [\n { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },\n { value: '1', label: 'One', disabled: false, isPlaceholder: false },\n { value: '2', label: 'Two', disabled: false, isPlaceholder: false },\n { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }\n ];\n\n return (\n
    \n \n \n {options.map((option, index) => (\n \n ))}\n \n \n \n );\n};\n","title":"Icon sprite variant","lang":"ts","isBeta":true}}> + +

    + + + {`Note:`} + + {` The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `} + + + {`isIconSprite`} + + {` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.`} +

    +
    +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Validated"])} + {React.createElement(pageData.examples["Disabled"])} + {React.createElement(pageData.examples["Grouped"])} + {React.createElement(pageData.examples["Icon sprite variant"])} + +); +Component.displayName = 'ComponentsFormSelectReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/form/react.js b/packages/react-docs/src/generated/components/form/react.js new file mode 100644 index 00000000000..be31ad9c4dd --- /dev/null +++ b/packages/react-docs/src/generated/components/form/react.js @@ -0,0 +1,794 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import { +Button, +Form, +FormGroup, +Popover, +TextInput, +TextArea, +FormSelect, +FormHelperText, +FormFieldGroup, +FormFieldGroupHeader, +FormFieldGroupExpandable, +Checkbox, +ActionGroup, +Radio +} from '@patternfly/react-core'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; +const pageData = { + "id": "Form", + "section": "components", + "source": "react", + "slug": "/components/form/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Form/examples/Form.md", + "propComponents": [ + { + "name": "ActionGroup", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered as ActionGroup content.", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the ActionGroup.", + "defaultValue": "''" + } + ] + }, + { + "name": "Form", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered as Form content.", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Form.", + "defaultValue": "''" + }, + { + "name": "isHorizontal", + "type": "boolean", + "description": "Sets the Form to horizontal.", + "defaultValue": "false" + }, + { + "name": "isWidthLimited", + "type": "boolean", + "description": "Limits the max-width of the form.", + "defaultValue": "false" + }, + { + "name": "maxWidth", + "type": "string", + "description": "Sets a custom max-width for the form.", + "defaultValue": "''" + } + ] + }, + { + "name": "FormGroup", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered as FormGroup content.", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the FormGroup.", + "defaultValue": "''" + }, + { + "name": "fieldId", + "type": "string", + "description": "ID of an individual field or a group of multiple fields. Required when a role of \"group\" or \"radiogroup\" is passed in.\nIf only one field is included, its ID attribute and this prop must be the same." + }, + { + "name": "hasNoPaddingTop", + "type": "boolean", + "description": "Removes top spacer from label.", + "defaultValue": "false" + }, + { + "name": "helperText", + "type": "React.ReactNode", + "description": "Helper text regarding the field. It can be a simple text or an object." + }, + { + "name": "helperTextIcon", + "type": "React.ReactNode", + "description": "Icon displayed to the left of the helper text." + }, + { + "name": "helperTextInvalid", + "type": "React.ReactNode", + "description": "Helper text after the field when the field is invalid. It can be a simple text or an object." + }, + { + "name": "helperTextInvalidIcon", + "type": "React.ReactNode", + "description": "Icon displayed to the left of the helper text when the field is invalid." + }, + { + "name": "isHelperTextBeforeField", + "type": "boolean", + "description": "Flag to position the helper text before the field. False by default", + "defaultValue": "false" + }, + { + "name": "isInline", + "type": "boolean", + "description": "Sets the FormGroup isInline.", + "defaultValue": "false" + }, + { + "name": "isRequired", + "type": "boolean", + "description": "Sets the FormGroup required.", + "defaultValue": "false" + }, + { + "name": "isStack", + "type": "boolean", + "description": "Sets the FormGroupControl to be stacked", + "defaultValue": "false" + }, + { + "name": "label", + "type": "React.ReactNode", + "description": "Label text before the field." + }, + { + "name": "labelIcon", + "type": "React.ReactElement", + "description": "Sets an icon for the label. For providing additional context. Host element for Popover" + }, + { + "name": "labelInfo", + "type": "React.ReactNode", + "description": "Additional label information displayed after the label." + }, + { + "name": "role", + "type": "string", + "description": "Sets the role of the form group. Pass in \"radiogroup\" when the form group contains multiple\nradio inputs, or pass in \"group\" when the form group contains multiple of any other input type." + }, + { + "name": "validated", + "type": "'success' | 'warning' | 'error' | 'default'", + "description": "Sets the FormGroup validated. If you set to success, text color of helper text will be modified to indicate valid state.\nIf set to error, text color of helper text will be modified to indicate error state.\nIf set to warning, text color of helper text will be modified to indicate warning state.", + "defaultValue": "'default'" + } + ] + }, + { + "name": "FormSection", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the section" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the section", + "defaultValue": "''" + }, + { + "name": "title", + "type": "React.ReactNode", + "description": "Title for the section", + "defaultValue": "''" + }, + { + "name": "titleElement", + "type": "'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "description": "Element to wrap the section title", + "defaultValue": "'div'" + } + ] + }, + { + "name": "FormHelperText", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the Helper Text Item", + "defaultValue": "null" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the Helper Text Item", + "defaultValue": "''" + }, + { + "name": "component", + "type": "'p' | 'div'", + "description": "Component type of the form helper text", + "defaultValue": "'p'" + }, + { + "name": "icon", + "type": "React.ReactNode", + "description": "Icon displayed to the left of the helper text.", + "defaultValue": "null" + }, + { + "name": "isError", + "type": "boolean", + "description": "Adds error styling to the Helper Text *", + "defaultValue": "false" + }, + { + "name": "isHidden", + "type": "boolean", + "description": "Hides the helper text *", + "defaultValue": "true" + } + ] + }, + { + "name": "FormFieldGroup", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered as form field group content." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the form field group." + }, + { + "name": "header", + "type": "React.ReactNode", + "description": "Form field group header" + } + ] + }, + { + "name": "FormFieldGroupExpandable", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Anything that can be rendered as form field group content." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the form field group." + }, + { + "name": "header", + "type": "React.ReactNode", + "description": "Form field group header" + }, + { + "name": "isExpanded", + "type": "boolean", + "description": "Flag indicating if the form field group is initially expanded", + "defaultValue": "false" + }, + { + "name": "toggleAriaLabel", + "type": "string", + "description": "Aria-label to use on the form field group toggle button" + } + ] + }, + { + "name": "FormFieldGroupHeader", + "description": "", + "props": [ + { + "name": "actions", + "type": "React.ReactNode", + "description": "Field group header actions" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the section" + }, + { + "name": "titleDescription", + "type": "React.ReactNode", + "description": "Field group header title description" + }, + { + "name": "titleText", + "type": "FormFieldGroupHeaderTitleTextObject", + "description": "Field group header title text" + } + ] + }, + { + "name": "FormFieldGroupHeaderTitleTextObject", + "description": "", + "props": [] + }, + { + "name": "Button", + "description": "", + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Adds accessible text to the button." + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the button" + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the button" + }, + { + "name": "component", + "type": "React.ElementType | React.ComponentType", + "description": "Sets the base component to render. defaults to button" + }, + { + "name": "icon", + "type": "React.ReactNode | null", + "description": "Icon for the button. Usable by all variants except for plain." + }, + { + "name": "iconPosition", + "type": "'left' | 'right'", + "description": "Sets position of the link icon" + }, + { + "name": "innerRef", + "type": "React.Ref", + "description": "Forwarded ref" + }, + { + "name": "inoperableEvents", + "type": "string[]", + "description": "Events to prevent when the button is in an aria-disabled state" + }, + { + "name": "isActive", + "type": "boolean", + "description": "Adds active styling to button." + }, + { + "name": "isAriaDisabled", + "type": "boolean", + "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute" + }, + { + "name": "isBlock", + "type": "boolean", + "description": "Adds block styling to button" + }, + { + "name": "isDanger", + "type": "boolean", + "description": "Adds danger styling to secondary or link button variants" + }, + { + "name": "isDisabled", + "type": "boolean", + "description": "Adds disabled styling and disables the button using the disabled html attribute" + }, + { + "name": "isInline", + "type": "boolean", + "description": "Adds inline styling to a link button" + }, + { + "name": "isLarge", + "type": "boolean", + "description": "Adds large styling to the button" + }, + { + "name": "isLoading", + "type": "boolean", + "description": "Adds progress styling to button" + }, + { + "name": "isSmall", + "type": "boolean", + "description": "Adds small styling to the button" + }, + { + "name": "spinnerAriaLabel", + "type": "string", + "description": "Accessible label for the spinner to describe what is loading" + }, + { + "name": "spinnerAriaLabelledBy", + "type": "string", + "description": "Id of element which describes what is being loaded" + }, + { + "name": "spinnerAriaValueText", + "type": "string", + "description": "Text describing that current loading status or progress" + }, + { + "name": "tabIndex", + "type": "number", + "description": "Sets the button tabindex." + }, + { + "name": "type", + "type": "'button' | 'submit' | 'reset'", + "description": "Sets button type" + }, + { + "name": "variant", + "type": "'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'", + "description": "Adds button variant styles" + } + ] + }, + { + "name": "Popover", + "description": "", + "props": [ + { + "name": "alertSeverityScreenReaderText", + "type": "string", + "description": "Text announced by screen reader when alert severity variant is set to indicate severity level", + "beta": true + }, + { + "name": "alertSeverityVariant", + "type": "'default' | 'info' | 'warning' | 'success' | 'danger'", + "description": "Severity variants for an alert popover. This modifies the color of the header to match the severity.", + "beta": true + }, + { + "name": "animationDuration", + "type": "number", + "description": "CSS fade transition animation duration", + "defaultValue": "300" + }, + { + "name": "appendTo", + "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement)", + "description": "The element to append the popover to, defaults to body", + "defaultValue": "() => document.body" + }, + { + "name": "aria-label", + "type": "string", + "description": "Accessible label, required when header is not present", + "defaultValue": "''" + }, + { + "name": "bodyContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Body content\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. bodyContent={hide => }", + "required": true + }, + { + "name": "boundary", + "type": "'scrollParent' | 'window' | 'viewport' | HTMLElement", + "description": "- no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead", + "deprecated": true + }, + { + "name": "children", + "type": "ReactElement", + "description": "The reference element to which the Popover is relatively placed to.\nIf you cannot wrap the reference with the Popover, you can use the reference prop instead.\nUsage: " + }, + { + "name": "className", + "type": "string", + "description": "Popover additional class", + "defaultValue": "''" + }, + { + "name": "closeBtnAriaLabel", + "type": "string", + "description": "Aria label for the Close button", + "defaultValue": "'Close'" + }, + { + "name": "distance", + "type": "number", + "description": "Distance of the popover to its target, defaults to 25", + "defaultValue": "25" + }, + { + "name": "enableFlip", + "type": "boolean", + "description": "If true, tries to keep the popover in view by flipping it if necessary.\nIf the position is set to 'auto', this prop is ignored", + "defaultValue": "true" + }, + { + "name": "flipBehavior", + "type": "'flip'\n| (\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'top-start'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-end'\n | 'left-start'\n | 'left-end'\n | 'right-start'\n | 'right-end'\n )[]", + "description": "The desired position to flip the popover to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space.\nYou can also pass an array of positions that determines the flip order. It should contain the initial position\nfollowed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to\n['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no\nspace to the right, so it finally shows the popover on the left.", + "defaultValue": "['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']" + }, + { + "name": "footerContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Footer content\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. footerContent={hide => }", + "defaultValue": "null" + }, + { + "name": "hasAutoWidth", + "type": "boolean", + "description": "Removes fixed-width and allows width to be defined by contents", + "defaultValue": "false" + }, + { + "name": "hasNoPadding", + "type": "boolean", + "description": "Allows content to touch edges of popover container", + "defaultValue": "false" + }, + { + "name": "headerComponent", + "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "description": "Sets the heading level to use for the popover header. Default is h6.", + "defaultValue": "'h6'" + }, + { + "name": "headerContent", + "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)", + "description": "Simple header content to be placed within a title.\nIf you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the popover\ni.e. headerContent={hide => }", + "defaultValue": "null" + }, + { + "name": "headerIcon", + "type": "React.ReactNode", + "description": "Icon to be displayed in the popover header *", + "defaultValue": "null", + "beta": true + }, + { + "name": "hideOnOutsideClick", + "type": "boolean", + "description": "Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user)", + "defaultValue": "true" + }, + { + "name": "id", + "type": "string", + "description": "id used as part of the various popover elements (popover-${id}-header/body/footer)" + }, + { + "name": "isVisible", + "type": "boolean", + "description": "True to show the popover programmatically. Used in conjunction with the shouldClose prop.\nBy default, the popover child element handles click events automatically. If you want to control this programmatically,\nthe popover will not auto-close if the Close button is clicked, ESC key is used, or if a click occurs outside the popover.\nInstead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.", + "defaultValue": "null" + }, + { + "name": "maxWidth", + "type": "string", + "description": "Maximum width of the popover (default 18.75rem)", + "defaultValue": "popoverMaxWidth && popoverMaxWidth.value" + }, + { + "name": "minWidth", + "type": "string", + "description": "Minimum width of the popover (default 6.25rem)", + "defaultValue": "popoverMinWidth && popoverMinWidth.value" + }, + { + "name": "onHidden", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has fully transitioned out.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onHide", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover begins to transition out.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onMount", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has been mounted to the DOM.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onShow", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover begins to transition in.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "onShown", + "type": "(tip?: TippyInstance) => void", + "description": "Lifecycle function invoked when the popover has fully transitioned in.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "position", + "type": "PopoverPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'", + "description": "Popover position. Note: With 'enableFlip' set to true,\nit will change the position if there is not enough space for the starting position.\nThe behavior of where it flips to can be controlled through the flipBehavior prop.", + "defaultValue": "'top'" + }, + { + "name": "reference", + "type": "HTMLElement | (() => HTMLElement) | React.RefObject", + "description": "The reference element to which the Popover is relatively placed to.\nIf you can wrap the reference with the Popover, you can use the children prop instead.\nUsage: document.getElementById('reference-element')} />" + }, + { + "name": "shouldClose", + "type": "(tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void", + "description": "Callback function that is only invoked when isVisible is also controlled. Called when the popover Close button is\nclicked, Enter key was used on it, or the ESC key is used.\nNote: The tip argument is no longer passed and has been deprecated.", + "defaultValue": "(): void => null" + }, + { + "name": "shouldOpen", + "type": "(showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void", + "description": "Callback function that is only invoked when isVisible is also controlled. Called when the Enter key is\nused on the focused trigger", + "defaultValue": "(): void => null" + }, + { + "name": "showClose", + "type": "boolean", + "description": "Whether to show the close button", + "defaultValue": "true" + }, + { + "name": "tippyProps", + "type": "Partial", + "description": "- no longer used", + "deprecated": true + }, + { + "name": "withFocusTrap", + "type": "boolean", + "description": "Whether to trap focus in the popover" + }, + { + "name": "zIndex", + "type": "number", + "description": "z-index of the popover", + "defaultValue": "9999" + } + ] + } + ], + "cssPrefix": [ + "pf-c-form" + ], + "examples": [ + "Basic", + "Horizontal", + "Limit width", + "Invalid", + "Invalid with form alert", + "Validated", + "Horizontal stacked no padding top", + "Horizontal stacked helper text on top", + "Form group with additional label info", + "Form Sections", + "Grid form", + "Field Groups" + ] +}; +pageData.liveContext = { + Button, + Form, + FormGroup, + Popover, + TextInput, + TextArea, + FormSelect, + FormHelperText, + FormFieldGroup, + FormFieldGroupHeader, + FormFieldGroupExpandable, + Checkbox, + ActionGroup, + Radio, + ExclamationCircleIcon, + HelpIcon, + TrashIcon +}; +pageData.examples = { + 'Basic': props => + {\n const [name, setName] = React.useState('');\n const [email, setEmail] = React.useState('');\n const [phone, setPhone] = React.useState('');\n\n const handleNameChange = (name: string) => {\n setName(name);\n };\n\n const handleEmailChange = (email: string) => {\n setEmail(email);\n };\n\n const handlePhoneChange = (phone: string) => {\n setPhone(phone);\n };\n\n return (\n
    \n \n The{' '}\n \n name\n {' '}\n of a{' '}\n \n Person\n \n
    • \n }\n bodyContent={\n
    \n Often composed of{' '}\n \n givenName\n {' '}\n and{' '}\n \n familyName\n \n .\n
    \n }\n >\n e.preventDefault()}\n aria-describedby=\"simple-form-name-01\"\n className=\"pf-c-form__group-label-help\"\n >\n \n \n     \n }\n isRequired\n fieldId=\"simple-form-name-01\"\n helperText=\"Include your middle name if you have one.\"\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n","title":"Basic","lang":"ts"}}> + + , + 'Horizontal': props => + {\n const [name, setName] = React.useState('');\n const [email, setEmail] = React.useState('');\n const [experience, setExperience] = React.useState('');\n const [option, setOption] = React.useState('please choose');\n\n const handleNameChange = (name: string) => {\n setName(name);\n };\n\n const handleEmailChange = (email: string) => {\n setEmail(email);\n };\n\n const handleExperienceChange = (experience: string) => {\n setExperience(experience);\n };\n\n const handleOptionChange = (value: string, _event: React.FormEvent) => {\n setOption(value);\n };\n\n const options = [\n { value: 'select one', label: 'Select one', disabled: false },\n { value: 'mr', label: 'Mr', disabled: false },\n { value: 'miss', label: 'Miss', disabled: false },\n { value: 'mrs', label: 'Mrs', disabled: false },\n { value: 'ms', label: 'Ms', disabled: false },\n { value: 'dr', label: 'Dr', disabled: false },\n { value: 'other', label: 'Other', disabled: false }\n ];\n\n return (\n
    \n \n \n \n \n \n \n \n \n {options.map((option, index) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n","title":"Horizontal","lang":"ts"}}> + +
    , + 'Limit width': props => + {\n const [name, setName] = React.useState('');\n const [email, setEmail] = React.useState('');\n const [phone, setPhone] = React.useState('');\n\n const handleNameChange = (name: string) => {\n setName(name);\n };\n\n const handleEmailChange = (email: string) => {\n setEmail(email);\n };\n\n const handlePhoneChange = (phone: string) => {\n setPhone(phone);\n };\n\n return (\n
    \n \n The{' '}\n \n name\n {' '}\n of a{' '}\n \n Person\n \n \n }\n bodyContent={\n
    \n Often composed of{' '}\n \n givenName\n {' '}\n and{' '}\n \n familyName\n \n .\n
    \n }\n >\n e.preventDefault()}\n aria-describedby=\"simple-form-name-02\"\n className=\"pf-c-form__group-label-help\"\n >\n \n \n \n }\n isRequired\n fieldId=\"simple-form-name-02\"\n helperText=\"Include your middle name if you have one.\"\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n","title":"Limit width","lang":"ts"}}> + +
    , + 'Invalid': props => + {\n type validate = 'success' | 'warning' | 'error' | 'default';\n\n const [age, setAge] = React.useState('Five');\n const [validated, setValidated] = React.useState('error');\n\n const handleAgeChange = (age: string, _event: React.FormEvent) => {\n setAge(age);\n if (age === '') {\n setValidated('default');\n } else if (/^\\d+$/.test(age)) {\n setValidated('success');\n } else {\n setValidated('error');\n }\n };\n\n return (\n
    \n } isHidden={validated !== 'default'}>\n Please enter your age\n \n }\n helperTextInvalid=\"Must be a number\"\n helperTextInvalidIcon={}\n fieldId=\"age-1\"\n validated={validated}\n >\n \n \n \n );\n};\n","title":"Invalid","lang":"ts"}}> + +
    , + 'Invalid with form alert': props => + {\n type validate = 'success' | 'warning' | 'error' | 'default';\n\n const [age, setAge] = React.useState('Five');\n const [validated, setValidated] = React.useState('error');\n\n const handleAgeChange = (age: string, _event: React.FormEvent) => {\n setAge(age);\n if (age === '') {\n setValidated('default');\n } else if (/^\\d+$/.test(age)) {\n setValidated('success');\n } else {\n setValidated('error');\n }\n };\n\n return (\n
    \n {validated === 'error' && (\n \n \n \n )}\n } isHidden={validated !== 'default'}>\n Please enter your age\n \n }\n helperTextInvalid=\"Must be a number\"\n helperTextInvalidIcon={}\n fieldId=\"age-2\"\n validated={validated}\n >\n \n \n \n );\n};\n","title":"Invalid with form alert","lang":"ts"}}> + +
    , + 'Validated': props => + {\n type validate = 'success' | 'warning' | 'error' | 'default';\n\n const [age, setAge] = React.useState('Five');\n const [invalidText, setInvalidText] = React.useState('Must be a number');\n const [validated, setValidated] = React.useState('default');\n const [helperText, setHelperText] = React.useState('Enter your age to continue');\n\n const handleAgeChange = (age: string, _event: React.FormEvent) => {\n setAge(age);\n setValidated('default');\n setHelperText('Validating...');\n };\n\n // useEffect is used to simulate a server call to validate the age 2000ms after the user has entered a value, preventing calling the server on every keystroke\n React.useEffect(() => {\n const timer = setTimeout(() => {\n if (/^\\d+$/.test(age)) {\n if (parseInt(age) >= 21) {\n setValidated('success');\n setHelperText('Enjoy your stay');\n } else {\n setValidated('warning');\n setHelperText('You must be at least 21 years old to continue');\n }\n } else {\n setValidated('error');\n setInvalidText('Must be a number');\n }\n }, 2000);\n\n return () => clearTimeout(timer);\n }, [age]);\n\n return (\n
    \n }\n fieldId=\"age-3\"\n validated={validated}\n >\n \n \n \n );\n};\n","title":"Validated","lang":"ts"}}> + +
    , + 'Horizontal stacked no padding top': props => + (\n
    \n \n \n \n \n
    \n);\n","title":"Horizontal stacked no padding top","lang":"ts"}}> + +     , + 'Horizontal stacked helper text on top': props => + {\n const [helperText] = React.useState('Select all that apply:');\n\n return (\n
    \n \n \n \n \n \n );\n};\n","title":"Horizontal stacked helper text on top","lang":"ts"}}> + +
    , + 'Form group with additional label info': props => + {\n const [name, setName] = React.useState('');\n\n const handleNameChange = (name: string, _event: React.FormEvent) => {\n setName(name);\n };\n\n return (\n
    \n \n The{' '}\n \n name\n {' '}\n of a{' '}\n \n Person\n \n \n }\n bodyContent={\n
    \n Often composed of{' '}\n \n givenName\n {' '}\n and{' '}\n \n familyName\n \n .\n
    \n }\n >\n e.preventDefault()}\n aria-describedby=\"form-group-label-info\"\n className=\"pf-c-form__group-label-help\"\n >\n \n \n \n }\n isRequired\n fieldId=\"form-group-label-info\"\n helperText=\"Include your middle name if you have one.\"\n >\n \n \n \n );\n};\n","title":"Form group with additional label info","lang":"ts"}}> + +
    , + 'Form Sections': props => + {\n const [input1, setInput1] = React.useState('');\n const [input2, setInput2] = React.useState('');\n\n const handleInputChange1 = (input1: string, _event: React.FormEvent) => {\n setInput1(input1);\n };\n\n const handleInputChange2 = (input2: string, _event: React.FormEvent) => {\n setInput2(input2);\n };\n\n return (\n
    \n \n \n \n \n \n \n \n \n \n \n
    \n );\n};\n","title":"Form Sections","lang":"ts"}}> + +     , + 'Grid form': props => + {\n const [name, setName] = React.useState('');\n const [email, setEmail] = React.useState('');\n const [phone, setPhone] = React.useState('');\n\n const handleNameChange = (name: string) => {\n setName(name);\n };\n\n const handleEmailChange = (email: string) => {\n setEmail(email);\n };\n\n const handlePhoneChange = (phone: string) => {\n setPhone(phone);\n };\n\n return (\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n};\n","title":"Grid form","lang":"ts"}}> + +     , + 'Field Groups': props => + {\n const initialValues = {\n '0-label1': '',\n '0-label2': '',\n '1-expanded-group1-label1': '',\n '1-expanded-group1-label2': '',\n '1-expanded-group2-label1': '',\n '1-expanded-group2-label2': '',\n '1-expanded-group3-label1': '',\n '1-expanded-group3-label2': '',\n '1-group1-label1': '',\n '1-group1-label2': '',\n '2-label1': '',\n '2-label2': '',\n '3-label1': '',\n '3-label2': '',\n '3-nonexpand-group1-label1': '',\n '3-nonexpand-group1-label2': '',\n '3-nonexpand-group2-label1': '',\n '3-nonexpand-group2-label2': '',\n '4-nonexpand-label1': '',\n '4-nonexpand-label2': '',\n '0-label3': '',\n '0-label4': ''\n };\n\n const [inputValues, setInputValues] = React.useState(initialValues);\n\n const handleChange = (value: string, event: React.FormEvent) => {\n const { name } = event.currentTarget;\n setInputValues({ ...inputValues, [name]: value });\n };\n\n return (\n
    \n \n \n \n \n \n \n \n \n \n }\n />\n }\n >\n \n \n \n }\n />\n }\n >\n \n \n \n \n \n \n \n \n \n \n }\n />\n }\n >\n \n \n \n \n \n \n \n \n \n \n }\n />\n }\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n }\n />\n }\n >\n \n \n \n \n \n \n \n \n }\n >\n \n \n \n \n \n \n \n }\n >\n \n \n \n \n \n \n \n \n }\n >\n \n \n \n \n \n \n \n \n \n \n \n }\n />\n }\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n","title":"Field Groups","lang":"ts"}}> + +
    +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic"])} + {React.createElement(pageData.examples["Horizontal"])} + {React.createElement(pageData.examples["Limit width"])} + {React.createElement(pageData.examples["Invalid"])} + {React.createElement(pageData.examples["Invalid with form alert"])} + {React.createElement(pageData.examples["Validated"])} + {React.createElement(pageData.examples["Horizontal stacked no padding top"])} + {React.createElement(pageData.examples["Horizontal stacked helper text on top"])} + {React.createElement(pageData.examples["Form group with additional label info"])} + {React.createElement(pageData.examples["Form Sections"])} + {React.createElement(pageData.examples["Grid form"])} + {React.createElement(pageData.examples["Field Groups"])} + +); +Component.displayName = 'ComponentsFormReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/helper-text/react-demos.js b/packages/react-docs/src/generated/components/helper-text/react-demos.js new file mode 100644 index 00000000000..223fc0d0a16 --- /dev/null +++ b/packages/react-docs/src/generated/components/helper-text/react-demos.js @@ -0,0 +1,169 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; +const pageData = { + "id": "Helper text", + "section": "components", + "source": "react-demos", + "slug": "/components/helper-text/react-demos", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/HelperText.md", + "examples": [ + "Static variant with static text", + "Static variant with dynamic text", + "Dynamic variant with static text" + ] +}; +pageData.liveContext = { + MinusIcon, + ExclamationTriangleIcon, + CheckCircleIcon, + ExclamationCircleIcon, + CheckIcon, + TimesIcon +}; +pageData.examples = { + 'Static variant with static text': props => + {\n const [value, setValue] = React.useState('');\n\n const handleInputChange = (inputValue: string) => {\n setValue(inputValue);\n };\n\n return (\n
    \n \n \n \n \n Enter your middle name or your middle initial\n \n \n \n
    \n );\n};\n","title":"Static variant with static text","lang":"ts"}}> + +

    + {`In this demo, the static variant of the helper text item component (the default) is used, and the text itself will always be visible to users and will never change.`} +

    + +

    + {`The `} + + + {`aria-describedby`} + + {` attribute is passed into the text input component and is linked to the `} + + + {`id`} + + {` of the helper text component. This allows assistive technologies to notify users of the helper text content when the input receives focus, which can be helpful if a user navigates away from and then back to the input.`} +

    + +

    + {`Note that this demo does not validate the text input component. When it would need to be validated, there are other steps that would need to be taken to make it accessible, such as passing in `} + + + {`aria-invalid`} + + {` and `} + + + {`aria-live`} + + {` attributes to the appropriate components.`} +

    +     , + 'Static variant with dynamic text': props => + {\n const [value, setValue] = React.useState('');\n const [inputValidation, setInputValidation] = React.useState('default');\n\n const handleInputChange = (inputValue: string) => {\n setValue(inputValue);\n };\n\n React.useEffect(() => {\n if (value === '') {\n setInputValidation('default');\n } else if (value === 'johndoe') {\n setInputValidation('error');\n } else {\n setInputValidation('success');\n }\n }, [value]);\n\n return (\n
    \n \n \n \n \n {inputValidation !== 'success' && (\n \n {inputValidation === 'default' ? 'Please enter a username' : 'Username already exists'}\n \n )}\n \n \n \n
    \n );\n};\n","title":"Static variant with dynamic text","lang":"ts"}}> + +

    + {`In this demo, the static variant of the helper text item component (the default) is used with the `} + + + {`hasIcon`} + + {` prop passed in when there is an error, and the text itself dynamically updates based on the input value. When the input has a value of `} + + + {`johndoe`} + + {`, an error is rendered to simulate a username already being taken, while an empty input renders other helper text. When the input is valid, no helper text is rendered.`} +

    + +

    + {`The `} + + + {`aria-describedby`} + + {` attribute is passed into the text input component and is linked to the `} + + + {`id`} + + {` of the helper text component. Similar to the static variant with static text demo, this allows assistive technologies to notify users of the helper text content when the navigating to the input.`} +

    + +

    + {`An `} + + + {`aria-live`} + + {` region is passed into the helper text component, which allows assistive technologies to announce to users when any dynamic content within it updates, such as when the text content changes or gets rendered. Without this attribute, a user would have to navigate out of and back into the input field multiple times to check the status of their input.`} +

    + +

    + {`The `} + + + {`aria-invalid`} + + {` attribute is also passed into the text input, which allows assistive technologies to notify users that an input is invalid. When this attribute is true, it's important that users are notified of what is causing the input to be invalid; in this case, `} + + + {`aria-describedby`} + + {` and `} + + + {`aria-live`} + + {` help accomplish this.`} +

    +     , + 'Dynamic variant with static text': props => + {\n const [value, setValue] = React.useState('');\n const [inputValidation, setInputValidation] = React.useState({\n ruleLength: 'indeterminate',\n ruleCharacterTypes: 'indeterminate'\n });\n const { ruleLength, ruleCharacterTypes } = inputValidation;\n\n React.useEffect(() => {\n let lengthStatus = ruleLength;\n let typeStatus = ruleCharacterTypes;\n\n if (value === '') {\n setInputValidation({\n ruleLength: 'indeterminate',\n ruleCharacterTypes: 'indeterminate'\n });\n return;\n }\n\n if (!/\\d/g.test(value)) {\n typeStatus = 'error';\n } else {\n typeStatus = 'success';\n }\n\n if (value.length < 5) {\n lengthStatus = 'error';\n } else {\n lengthStatus = 'success';\n }\n\n setInputValidation({ ruleLength: lengthStatus, ruleCharacterTypes: typeStatus });\n }, [value, ruleLength, ruleCharacterTypes]);\n\n const handleInputChange = (inputValue: string) => {\n setValue(inputValue);\n };\n\n const filterValidations = () => Object.keys(inputValidation).filter(item => inputValidation[item] !== 'success');\n\n return (\n
    \n \n \n \n \n \n Must be at least 5 characters in length\n \n \n Must include at least 1 number\n \n \n \n \n
    \n );\n};\n","title":"Dynamic variant with static text","lang":"ts"}}> + +

    + {`In this demo, the helper text item components have the `} + + + {`isDynamic`} + + {` prop passed in. While the text content of the components is static, the icons and styling will change as the validation of the input changes.`} +

    + +

    + {`The `} + + + {`aria-describedby`} + + {` attribute is passed into the text input component and is linked to the id attribute of a helper text item that results in an invalid input. This will allow assistive technologies to only be notified of any outstanding criteria that has not been met when the input receives focus.`} +

    + +

    + {`Similar to the static variant with dynamic text example, the `} + + + {`aria-invalid`} + + {` attribute is passed in, allowing assistive technologies to announce to users when at least 1 item is causing the input to be invalid.`} +

    +     +}; + +const Component = () => ( + + + {`Demos`} + + {React.createElement(pageData.examples["Static variant with static text"])} + {React.createElement(pageData.examples["Static variant with dynamic text"])} + {React.createElement(pageData.examples["Dynamic variant with static text"])} + +); +Component.displayName = 'ComponentsHelperTextReactDemosDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/helper-text/react.js b/packages/react-docs/src/generated/components/helper-text/react.js new file mode 100644 index 00000000000..ede6c938bf6 --- /dev/null +++ b/packages/react-docs/src/generated/components/helper-text/react.js @@ -0,0 +1,167 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon'; +import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon'; +import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; +import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon'; +const pageData = { + "id": "Helper text", + "section": "components", + "source": "react", + "slug": "/components/helper-text/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/HelperText/examples/HelperText.md", + "propComponents": [ + { + "name": "HelperText", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the helper text container." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes applied to the helper text container." + }, + { + "name": "component", + "type": "'div' | 'ul'", + "description": "Component type of the helper text container", + "defaultValue": "'div'" + }, + { + "name": "id", + "type": "string", + "description": "ID for the helper text container. The value of this prop can be passed into a form component's\naria-describedby prop when you intend for all helper text items to be announced to\nassistive technologies." + }, + { + "name": "isLiveRegion", + "type": "boolean", + "description": "Flag for indicating whether the helper text container is a live region. Use this prop when you\nexpect or intend for any helper text items within the container to be dynamically updated.", + "defaultValue": "false" + } + ] + }, + { + "name": "HelperTextItem", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the helper text item." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes applied to the helper text item." + }, + { + "name": "component", + "type": "'div' | 'li'", + "description": "Sets the component type of the helper text item.", + "defaultValue": "'div'" + }, + { + "name": "hasIcon", + "type": "boolean", + "description": "Flag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not.", + "defaultValue": "isDynamic" + }, + { + "name": "icon", + "type": "React.ReactNode", + "description": "Custom icon prefixing the helper text. This property will override the default icon paired with each helper text variant." + }, + { + "name": "id", + "type": "string", + "description": "ID for the helper text item. The value of this prop can be passed into a form component's\naria-describedby prop when you intend for only specific helper text items to be announced to\nassistive technologies." + }, + { + "name": "isDynamic", + "type": "boolean", + "description": "Flag indicating the helper text item is dynamic. This prop should be used when the\ntext content of the helper text item will never change, but the icon and styling will\nbe dynamically updated via the `variant` prop.", + "defaultValue": "false" + }, + { + "name": "screenReaderText", + "type": "string", + "description": "Text that is only accessible to screen readers in order to announce the status of a helper text item.\nThis prop can only be used when the isDynamic prop is also passed in.", + "defaultValue": "`${variant} status`" + }, + { + "name": "variant", + "type": "'default' | 'indeterminate' | 'warning' | 'success' | 'error'", + "description": "Variant styling of the helper text item.", + "defaultValue": "'default'" + } + ] + } + ], + "cssPrefix": [ + "pf-c-helper-text" + ], + "examples": [ + "Static", + "Static with default icons", + "Static with custom icons", + "Multiple static", + "Dynamic", + "Dynamic list" + ] +}; +pageData.liveContext = { + InfoIcon, + QuestionIcon, + CheckIcon, + TimesIcon, + ExclamationIcon +}; +pageData.examples = { + 'Static': props => + (\n \n \n This is default helper text\n \n \n This is indeterminate helper text\n \n \n This is warning helper text\n \n \n This is success helper text\n \n \n This is error helper text\n \n \n);\n","title":"Static","lang":"ts"}}> + + , + 'Static with default icons': props => + (\n \n \n This is default helper text\n \n \n \n This is indeterminate helper text\n \n \n \n \n This is warning helper text\n \n \n \n \n This is success helper text\n \n \n \n \n This is error helper text\n \n \n \n);\n","title":"Static with default icons","lang":"ts"}}> + + , + 'Static with custom icons': props => + (\n \n \n }>This is default helper text\n \n \n }>\n This is indeterminate helper text\n \n \n \n }>\n This is warning helper text\n \n \n \n }>\n This is success helper text\n \n \n \n }>\n This is error helper text\n \n \n \n);\n","title":"Static with custom icons","lang":"ts"}}> + + , + 'Multiple static': props => + (\n \n This is default helper text\n This is another default helper text in the same block\n And this is more default text in the same block\n \n);\n","title":"Multiple static","lang":"ts"}}> + + , + 'Dynamic': props => + (\n \n \n This is default helper text\n \n \n \n This is indeterminate helper text\n \n \n \n \n This is warning helper text\n \n \n \n \n This is success helper text\n \n \n \n \n This is error helper text\n \n \n \n }>\n This is error helper text with a custom icon\n \n \n \n \n This is error helper text with no icon\n \n \n \n);\n","title":"Dynamic","lang":"ts"}}> + + , + 'Dynamic list': props => + (\n \n \n Must be at least 14 characters\n \n \n Cannot contain any variation of the word \"redhat\"\n \n \n Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols\n \n \n);\n","title":"Dynamic list","lang":"ts"}}> + + +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Static"])} + {React.createElement(pageData.examples["Static with default icons"])} + {React.createElement(pageData.examples["Static with custom icons"])} + {React.createElement(pageData.examples["Multiple static"])} + {React.createElement(pageData.examples["Dynamic"])} + {React.createElement(pageData.examples["Dynamic list"])} + +); +Component.displayName = 'ComponentsHelperTextReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/hint/react.js b/packages/react-docs/src/generated/components/hint/react.js new file mode 100644 index 00000000000..c9ee5f1a600 --- /dev/null +++ b/packages/react-docs/src/generated/components/hint/react.js @@ -0,0 +1,109 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; + +const pageData = { + "id": "Hint", + "section": "components", + "source": "react", + "slug": "/components/hint/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Hint/examples/Hint.md", + "propComponents": [ + { + "name": "Hint", + "description": "", + "props": [ + { + "name": "actions", + "type": "React.ReactNode", + "description": "Actions of the hint." + }, + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the hint." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes applied to the hint." + } + ] + }, + { + "name": "HintTitle", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the hint title." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes applied to the hint title." + } + ] + }, + { + "name": "HintBody", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the hint body." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes applied to the hint body." + } + ] + }, + { + "name": "HintFooter", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the hint footer." + }, + { + "name": "className", + "type": "string", + "description": "Additional classes applied to the hint footer." + } + ] + } + ], + "examples": [ + "Basic with title", + "Basic without title" + ] +}; +pageData.examples = { + 'Basic with title': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const onSelect = () => {\n setIsOpen(!isOpen);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n const actions = (\n }\n isOpen={isOpen}\n dropdownItems={dropdownItems}\n position=\"right\"\n isPlain\n />\n );\n return (\n \n Do more with Find it Fix it capabilities\n \n Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.\n \n \n \n \n \n );\n};\n","title":"Basic with title","lang":"ts"}}> + + , + 'Basic without title': props => + {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const onToggle = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const onSelect = () => {\n setIsOpen(!isOpen);\n };\n\n const dropdownItems = [\n Link,\n \n Action\n ,\n \n Disabled Link\n ,\n \n Disabled Action\n ,\n ,\n Separated Link,\n \n Separated Action\n \n ];\n const actions = (\n }\n isOpen={isOpen}\n dropdownItems={dropdownItems}\n position=\"right\"\n isPlain\n />\n );\n return (\n \n \n \n Welcome to the new documentation experience.\n \n \n \n
    \n \n \n Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.\n \n \n \n \n \n     \n );\n};\n","title":"Basic without title","lang":"ts"}}> + +     +}; + +const Component = () => ( + + + {`Examples`} + + {React.createElement(pageData.examples["Basic with title"])} + {React.createElement(pageData.examples["Basic without title"])} + +); +Component.displayName = 'ComponentsHintReactDocs'; +Component.pageData = pageData; + +export default Component; diff --git a/packages/react-docs/src/generated/components/input-group/react.js b/packages/react-docs/src/generated/components/input-group/react.js new file mode 100644 index 00000000000..bf0853e80c5 --- /dev/null +++ b/packages/react-docs/src/generated/components/input-group/react.js @@ -0,0 +1,115 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components'; +import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon'; +import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon'; +import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +const pageData = { + "id": "Input group", + "section": "components", + "source": "react", + "slug": "/components/input-group/react", + "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/InputGroup/examples/InputGroup.md", + "propComponents": [ + { + "name": "InputGroup", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the input group.", + "required": true + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the input group.", + "defaultValue": "''" + } + ] + }, + { + "name": "InputGroupText", + "description": "", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "Content rendered inside the input group text.", + "required": true + }, + { + "name": "className", + "type": "string", + "description": "Additional classes added to the input group text.", + "defaultValue": "''" + }, + { + "name": "component", + "type": "React.ReactNode", + "description": "Component that wraps the input group text.", + "defaultValue": "'span'" + }, + { + "name": "variant", + "type": "InputGroupTextVariant | 'default' | 'plain'", + "description": "Input group text variant", + "defaultValue": "InputGroupTextVariant.default" + } + ] + } + ], + "examples": [ + "Basic", + "With textarea", + "With dropdown", + "With popover", + "With multiple group siblings" + ] +}; +pageData.liveContext = { + AtIcon, + DollarSignIcon, + CalendarAltIcon, + QuestionCircleIcon +}; +pageData.examples = { + 'Basic': props => + (\n \n \n \n @example.com\n \n
    \n \n \n \n \n \n \n
    \n \n \n \n %\n \n \n     \n);\n","title":"Basic","lang":"ts"}}> + +     , + 'With textarea': props => + (\n \n \n