Skip to content

Commit

Permalink
docs(storybook): add polygon story (#3586)
Browse files Browse the repository at this point in the history
<!--- Provide a general summary of your changes in the Title above -->

## Description

<!--- Describe your changes in detail -->
Polygon story files and initial simple story following examples of other
shapes.

Leave out undocumented "internal" props `connectNulls` and
`baseLinePoints`. These show in the args table but aren't called out in
the current documentation. I don't know enough about them to add proper
descriptions to them.

## Related Issue

<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
Continue to document things in storybook

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->
See screenshot. Tested locally, tests continue to pass.

## Screenshots (if appropriate):

![image](https://github.com/recharts/recharts/assets/25180830/5dac1f82-27f3-46b2-a525-f41cf65835c9)


## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [x] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.

Co-authored-by: Coltin Kifer <ckifer@amazon.com>
  • Loading branch information
ckifer and Coltin Kifer committed May 15, 2023
1 parent 31bcac3 commit 758205a
Show file tree
Hide file tree
Showing 2 changed files with 390 additions and 0 deletions.
15 changes: 15 additions & 0 deletions storybook/stories/API/shapes/Polygon.mdx
@@ -0,0 +1,15 @@
import { ArgTypes, Canvas } from '@storybook/blocks';
import * as PolygonStories from './Polygon.stories';

# Polygon

The Polygon is a shape that itself is not a valid child in any component.
It can be used to implement custom elements, returning it from within a

```jsx
<Customized component={<Polygon {...polygonProps} />} />
```

or other custom components (i.e. a custom line)

<ArgTypes of={PolygonStories} sort="requiredFirst" />
375 changes: 375 additions & 0 deletions storybook/stories/API/shapes/Polygon.stories.tsx
@@ -0,0 +1,375 @@
import React from 'react';
import { Customized, ComposedChart, ResponsiveContainer, Polygon } from '../../../../src';
import { GeneralStyle } from '../props/Styles';
import {
onAbort,
onAbortCapture,
onAnimationEnd,
onAnimationEndCapture,
onAnimationIteration,
onAnimationIterationCapture,
onAnimationStart,
onAnimationStartCapture,
onAuxClick,
onAuxClickCapture,
onBeforeInput,
onBeforeInputCapture,
onBlur,
onBlurCapture,
onCanPlay,
onCanPlayCapture,
onCanPlayThrough,
onCanPlayThroughCapture,
onChange,
onChangeCapture,
onClick,
onClickCapture,
onCompositionEnd,
onCompositionEndCapture,
onCompositionStart,
onCompositionStartCapture,
onCompositionUpdate,
onCompositionUpdateCapture,
onContextMenu,
onContextMenuCapture,
onCopy,
onCopyCapture,
onCut,
onCutCapture,
onDoubleClick,
onDoubleClickCapture,
onDrag,
onDragCapture,
onDragEnd,
onDragEndCapture,
onDragEnter,
onDragEnterCapture,
onDragExit,
onDragExitCapture,
onDragLeave,
onDragLeaveCapture,
onDragOver,
onDragOverCapture,
onDragStart,
onDragStartCapture,
onDrop,
onDropCapture,
onDurationChange,
onDurationChangeCapture,
onEmptied,
onEmptiedCapture,
onEncrypted,
onEncryptedCapture,
onEnded,
onEndedCapture,
onError,
onErrorCapture,
onFocus,
onFocusCapture,
onGotPointerCapture,
onGotPointerCaptureCapture,
onInput,
onInputCapture,
onInvalid,
onInvalidCapture,
onKeyDown,
onKeyDownCapture,
onKeyPress,
onKeyPressCapture,
onKeyUp,
onKeyUpCapture,
onLoad,
onLoadCapture,
onLoadedData,
onLoadedDataCapture,
onLoadedMetadata,
onLoadedMetadataCapture,
onLoadStart,
onLoadStartCapture,
onLostPointerCapture,
onLostPointerCaptureCapture,
onMouseDown,
onMouseDownCapture,
onMouseEnter,
onMouseLeave,
onMouseMove,
onMouseMoveCapture,
onMouseOut,
onMouseOutCapture,
onMouseOver,
onMouseOverCapture,
onMouseUp,
onMouseUpCapture,
onPaste,
onPasteCapture,
onPause,
onPauseCapture,
onPlay,
onPlayCapture,
onPlaying,
onPlayingCapture,
onPointerCancel,
onPointerCancelCapture,
onPointerDown,
onPointerDownCapture,
onPointerEnter,
onPointerLeave,
onPointerMove,
onPointerMoveCapture,
onPointerOut,
onPointerOutCapture,
onPointerOver,
onPointerOverCapture,
onPointerUp,
onPointerUpCapture,
onProgress,
onProgressCapture,
onRateChange,
onRateChangeCapture,
onReset,
onResetCapture,
onScroll,
onScrollCapture,
onSeeked,
onSeekedCapture,
onSeeking,
onSeekingCapture,
onSelect,
onSelectCapture,
onStalled,
onStalledCapture,
onSubmit,
onSubmitCapture,
onSuspend,
onSuspendCapture,
onTimeUpdate,
onTimeUpdateCapture,
onTouchCancel,
onTouchCancelCapture,
onTouchEnd,
onTouchEndCapture,
onTouchMove,
onTouchMoveCapture,
onTouchStart,
onTouchStartCapture,
onTransitionEnd,
onTransitionEndCapture,
onVolumeChange,
onVolumeChangeCapture,
onWaiting,
onWaitingCapture,
onWheel,
onWheelCapture,
} from '../props/EventHandlers';

const pointDefault = [
{ x: 100, y: 100 },
{ x: 300, y: 100 },
{ x: 100, y: 300 },
{ x: 300, y: 300 },
];

export default {
component: Polygon,
argTypes: {
points: {
description: 'The coordinates of all the vertexes of the polygon, like [{ x, y }].',
table: {
type: { summary: 'Coordinate[]' },
category: 'General',
},
defaultValue: pointDefault,
},
stroke: GeneralStyle.stroke,
fill: GeneralStyle.fill,
// Deprecated
dangerouslySetInnerHTML: { table: { category: 'Deprecated', disable: true } },
onPointerEnterCapture: { table: { category: 'Deprecated', disable: true } },
onPointerLeaveCapture: { table: { category: 'Deprecated', disable: true } },
// Event Handlers available
onCopy,
onCopyCapture,
onCut,
onCutCapture,
onPaste,
onPasteCapture,
onCompositionEnd,
onCompositionEndCapture,
onCompositionStart,
onCompositionStartCapture,
onCompositionUpdate,
onCompositionUpdateCapture,
onFocus,
onFocusCapture,
onBlur,
onBlurCapture,
onChange,
onChangeCapture,
onBeforeInput,
onBeforeInputCapture,
onInput,
onInputCapture,
onReset,
onResetCapture,
onSubmit,
onSubmitCapture,
onInvalid,
onInvalidCapture,
onLoad,
onLoadCapture,
onError,
onErrorCapture,
onKeyDown,
onKeyDownCapture,
onKeyPress,
onKeyPressCapture,
onKeyUp,
onKeyUpCapture,
onAbort,
onAbortCapture,
onCanPlay,
onCanPlayCapture,
onCanPlayThrough,
onCanPlayThroughCapture,
onDurationChange,
onDurationChangeCapture,
onEmptied,
onEmptiedCapture,
onEncrypted,
onEncryptedCapture,
onEnded,
onEndedCapture,
onLoadedData,
onLoadedDataCapture,
onLoadedMetadata,
onLoadedMetadataCapture,
onLoadStart,
onLoadStartCapture,
onPause,
onPauseCapture,
onPlay,
onPlayCapture,
onPlaying,
onPlayingCapture,
onProgress,
onProgressCapture,
onRateChange,
onRateChangeCapture,
onSeeked,
onSeekedCapture,
onSeeking,
onSeekingCapture,
onStalled,
onStalledCapture,
onSuspend,
onSuspendCapture,
onTimeUpdate,
onTimeUpdateCapture,
onVolumeChange,
onVolumeChangeCapture,
onWaiting,
onWaitingCapture,
onAuxClick,
onAuxClickCapture,
onClick,
onClickCapture,
onContextMenu,
onContextMenuCapture,
onDoubleClick,
onDoubleClickCapture,
onDrag,
onDragCapture,
onDragEnd,
onDragEndCapture,
onDragEnter,
onDragEnterCapture,
onDragExit,
onDragExitCapture,
onDragLeave,
onDragLeaveCapture,
onDragOver,
onDragOverCapture,
onDragStart,
onDragStartCapture,
onDrop,
onDropCapture,
onMouseDown,
onMouseDownCapture,
onMouseEnter,
onMouseLeave,
onMouseMove,
onMouseMoveCapture,
onMouseOut,
onMouseOutCapture,
onMouseOver,
onMouseOverCapture,
onMouseUp,
onMouseUpCapture,
onSelect,
onSelectCapture,
onTouchCancel,
onTouchCancelCapture,
onTouchEnd,
onTouchEndCapture,
onTouchMove,
onTouchMoveCapture,
onTouchStart,
onTouchStartCapture,
onPointerDown,
onPointerDownCapture,
onPointerMove,
onPointerMoveCapture,
onPointerUp,
onPointerUpCapture,
onPointerCancel,
onPointerCancelCapture,
onPointerEnter,
onPointerLeave,
onPointerOver,
onPointerOverCapture,
onPointerOut,
onPointerOutCapture,
onGotPointerCapture,
onGotPointerCaptureCapture,
onLostPointerCapture,
onLostPointerCaptureCapture,
onScroll,
onScrollCapture,
onWheel,
onWheelCapture,
onAnimationStart,
onAnimationStartCapture,
onAnimationEnd,
onAnimationEndCapture,
onAnimationIteration,
onAnimationIterationCapture,
onTransitionEnd,
onTransitionEndCapture,
},
};

export const Simple = {
render: (args: Record<string, any>) => {
return (
<ResponsiveContainer width="100%" height={500}>
<ComposedChart
width={500}
height={300}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<Customized component={<Polygon {...args} />} />
</ComposedChart>
</ResponsiveContainer>
);
},
args: {
points: pointDefault,
stroke: '#000',
fill: 'red',
},
};

0 comments on commit 758205a

Please sign in to comment.