-
Notifications
You must be signed in to change notification settings - Fork 834
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
9 changed files
with
230 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| ## ChartLabel | ||
|
|
||
| When you are styling your chart sometimes you just want to take complete control of label placements. Maybe you want to annotate something, or maybe you just want to place your axis labels in a very specific place, ChartLabel allos you to do just that. Let's look at an example: | ||
|
|
||
| ```jsx | ||
| <XYPlot width={300} height={300}> | ||
| <HorizontalGridLines /> | ||
| <VerticalGridLines /> | ||
| <XAxis /> | ||
| <YAxis /> | ||
| <ChartLabel | ||
| text="X Axis" | ||
| className="alt-x-label" | ||
| includeMargin={false} | ||
| xPercent={0.025} | ||
| yPercent={1.01} | ||
| /> | ||
|
|
||
| <ChartLabel | ||
| text="Y Axis" | ||
| className="alt-y-label" | ||
| includeMargin={false} | ||
| xPercent={0.06} | ||
| yPercent={0.06} | ||
| style={{ | ||
| transform: 'rotate(-90)', | ||
| textAnchor: 'end' | ||
| }} | ||
| /> | ||
| <Line data={[{x: 1, y: 3}, {x: 2, y: 5}, {x: 3, y: 15}, {x: 4, y: 12}]} /> | ||
| </XYPlot> | ||
| ``` | ||
|
|
||
| This usage is the same as using title on the XAxis or YAxis, however it allows us greatly flexibility in terms of styles and placement. It is significantly more verbose than using the basic methods on Axis, but the it allows you to do whatever you want. You could place your axis label in the center! You could make them diagonal or a really big. The world is your oyster. | ||
|
|
||
| This element is different then the [LabelSeries](label-series.md) because the elements that it describes ARE NOT data carrying. This element will not affect the computed domain or range. It'll just go where you place it and it won't affect anything else. | ||
|
|
||
|
|
||
| ## API Reference | ||
|
|
||
|
|
||
| #### text | ||
|
|
||
| Type: `string` | ||
|
|
||
| The content of the label | ||
|
|
||
|
|
||
| #### className (optional) | ||
|
|
||
| Type: `string` | ||
|
|
||
| Provide an additional class name the label. | ||
|
|
||
|
|
||
| #### includeMargin (optional) | ||
|
|
||
| Type: `Boolean` | ||
|
|
||
| Defaults to true | ||
|
|
||
| Whether or not to use compute the percentage placement with the margins or not. | ||
|
|
||
|
|
||
| #### xPercent | ||
|
|
||
| Type: `Number` (between 0 and 1) | ||
|
|
||
| Where to place the label on the charts width, expressed as percentage (of the width). If the includeMargin flag is included, then this percentage is of the total width, if not then it is of just the inner chart area. | ||
|
|
||
|
|
||
| #### yPercent | ||
|
|
||
| Type: `Number` (between 0 and 1) | ||
|
|
||
| Where to place the label on the charts height, expressed as percentage (of the height). If the includeMargin flag is included, then this percentage is of the total height, if not then it is of just the inner chart area. | ||
|
|
||
|
|
||
| #### style | ||
|
|
||
| Type: `object` | ||
|
|
||
| The specific styles to apply to the text element of the label. These styles are applied directly to the dom object and are interpreted as SVG styles (as opposed to CSS styles). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| // Copyright (c) 2018 Uber Technologies, Inc. | ||
| // | ||
| // Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| // of this software and associated documentation files (the "Software"), to deal | ||
| // in the Software without restriction, including without limitation the rights | ||
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| // copies of the Software, and to permit persons to whom the Software is | ||
| // furnished to do so, subject to the following conditions: | ||
| // | ||
| // The above copyright notice and this permission notice shall be included in | ||
| // all copies or substantial portions of the Software. | ||
| // | ||
| // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| // THE SOFTWARE. | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import PropTypes from 'prop-types'; | ||
|
|
||
| class ChartLabel extends React.PureComponent { | ||
| static get requiresSVG() { | ||
| return true; | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| // rv defined | ||
| innerHeight, | ||
| innerWidth, | ||
| marginBottom, | ||
| marginLeft, | ||
| marginRight, | ||
| marginTop, | ||
| // user defined | ||
| className, | ||
| includeMargin, | ||
| style, | ||
| text, | ||
| xPercent, | ||
| yPercent | ||
| } = this.props; | ||
| const width = innerWidth + (includeMargin ? marginLeft + marginRight : 0); | ||
| const height = innerHeight + (includeMargin ? marginTop + marginBottom : 0); | ||
| const xPos = width * xPercent + (includeMargin ? 0 : marginLeft); | ||
| const yPos = height * yPercent + (includeMargin ? marginLeft : 0); | ||
| return ( | ||
| <g | ||
| transform={`translate(${xPos}, ${yPos})`} | ||
| className={`rv-xy-plot__axis__title ${className}`}> | ||
| <text {...style}>{text}</text> | ||
| </g> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ChartLabel.displayName = 'ChartLabel'; | ||
| ChartLabel.propTypes = { | ||
| className: PropTypes.string, | ||
| includeMargin: PropTypes.bool, | ||
| style: PropTypes.object, | ||
| text: PropTypes.string.isRequired, | ||
| xPercent: PropTypes.number.isRequired, | ||
| yPercent: PropTypes.number.isRequired | ||
| }; | ||
| ChartLabel.defaultProps = { | ||
| className: '', | ||
| includeMargin: true, | ||
| text: '', | ||
| xPercent: 0, | ||
| yPercent: 0, | ||
| style: {} | ||
| }; | ||
| export default ChartLabel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dd0ff5eThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mcnuttandrew Just wondering does this feature implement the ability to place an axis title on the outside of the axis itself as opposed to inside the graph? Trying to implement it here and can't seem to figure out how from the docs.
dd0ff5eThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It should allow you to place labels where ever you want! For instance if you wanted to place a label squarely in the center you could do like:
dd0ff5eThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That said it looks like there is a bug wrt to the offset of the labels. I'll try to file a PR later today, it should still work, but the xPercent and yPercent will probably be bigger than you expect