Skip to content

Commit

Permalink
Merge pull request #376 from robinsoncol/grid-row-column-tick-values-…
Browse files Browse the repository at this point in the history 
…prop

[grid] Add tickValues prop
  • Loading branch information
@hshoff
hshoff committed Oct 21, 2018
2 parents 84ee1df + 097feeb commit 489bad2
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 41 deletions.
76 changes: 40 additions & 36 deletions packages/vx-grid/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,48 +28,52 @@ const grid = (<Grid

## `<Grid />`

| Name | Default | Type | Description |
|:--------------- |:------- |:-------- |:------------------------------------------------------------------------------------------ |
| top | | number | The top margin in pixels. |
| left | | number | The left margin in pixels. |
| xScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the xs. |
| yScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the ys. |
| width | | number | The pixel width of the grid. |
| height | | number | The pixel height of the grid. |
| className | | string | The class name for the Group element. |
| stroke | | string | The color for the stroke of the grid. |
| strokeWidth | | number | The width of the lines in the stroke. |
| strokeDasharray | | array | The [pattern of dashes](https://mzl.la/1l7EiTQ) in the stroke. |
| numTicksRows | | number | The number of row lines. |
| numTicksColumns | | number | The number of column lines. |
| Name | Default | Type | Description |
|:--------------- |:------- |:-------- |:--------------------------------------------------------------------------------------------------------------- |
| top | | number | The top margin in pixels. |
| left | | number | The left margin in pixels. |
| xScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the xs. |
| yScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the ys. |
| width | | number | The pixel width of the grid. |
| height | | number | The pixel height of the grid. |
| className | | string | The class name for the Group element. |
| stroke | | string | The color for the stroke of the grid. |
| strokeWidth | | number | The width of the lines in the stroke. |
| strokeDasharray | | array | The [pattern of dashes](https://mzl.la/1l7EiTQ) in the stroke. |
| numTicksRows | | number | The number of row lines. |
| numTicksColumns | | number | The number of column lines. |
| rowTickValues | | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain(). |
| columnTickValues | | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain(). |

## `<Rows />`

| Name | Default | Type | Description |
|:--------------- |:------- |:-------- |:-------------------------------------------------------------------------------------------- |
| top | | number | The top margin in pixels. |
| left | | number | The left margin in pixels. |
| scale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the rows. |
| width | | number | The pixel width of the grid. |
| stroke | #eaf0f6 | string | The color for the stroke of the lines. |
| strokeWidth | 1 | number | The width of the lines in the stroke. |
| strokeDasharray | | | The [pattern of dashes](https://mzl.la/1l7EiTQ) in the stroke. |
| className | | | The class name for the Group element. |
| numTicks | 10 | number | The number of row lines. |
| Name | Default | Type | Description |
|:--------------- |:------- |:-------- |:--------------------------------------------------------------------------------------------------------------- |
| top | | number | The top margin in pixels. |
| left | | number | The left margin in pixels. |
| scale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the rows. |
| width | | number | The pixel width of the grid. |
| stroke | #eaf0f6 | string | The color for the stroke of the lines. |
| strokeWidth | 1 | number | The width of the lines in the stroke. |
| strokeDasharray | | | The [pattern of dashes](https://mzl.la/1l7EiTQ) in the stroke. |
| className | | | The class name for the Group element. |
| numTicks | 10 | number | The number of row lines. |
| tickValues | | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain(). |

## `<Columns />`

| Name | Default | Type | Description |
|:--------------- |:------- |:-------- |:-------------------------------------------------------------------------------------------- |
| top | | number | The top margin in pixels. |
| left | | number | The left margin in pixels. |
| scale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the rows. |
| height | | number | The pixel height of the grid. |
| stroke | #eaf0f6 | string | The color for the stroke of the lines. |
| strokeWidth | 1 | number | The width of the lines in the stroke. |
| strokeDasharray | | | The [pattern of dashes](https://mzl.la/1l7EiTQ) in the stroke. |
| className | | | The class name for the Group element. |
| numTicks | 10 | number | The number of row lines. |
| Name | Default | Type | Description |
|:--------------- |:------- |:-------- |:--------------------------------------------------------------------------------------------------------------- |
| top | | number | The top margin in pixels. |
| left | | number | The left margin in pixels. |
| scale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the rows. |
| height | | number | The pixel height of the grid. |
| stroke | #eaf0f6 | string | The color for the stroke of the lines. |
| strokeWidth | 1 | number | The width of the lines in the stroke. |
| strokeDasharray | | | The [pattern of dashes](https://mzl.la/1l7EiTQ) in the stroke. |
| className | | | The class name for the Group element. |
| numTicks | 10 | number | The number of row lines. |
| tickValues | | Array | An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain(). |


## Source For Components
Expand Down
7 changes: 5 additions & 2 deletions packages/vx-grid/src/grids/Columns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ Columns.propTypes = {
lineStyle: PropTypes.object,
offset: PropTypes.number,
scale: PropTypes.func.isRequired,
height: PropTypes.number.isRequired
height: PropTypes.number.isRequired,
tickValues: PropTypes.array
};

export default function Columns({
Expand All @@ -31,9 +32,11 @@ export default function Columns({
numTicks = 10,
lineStyle,
offset,
tickValues,
...restProps
}) {
const ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain();
let ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain();
if (tickValues) ticks = tickValues;
return (
<Group className={cx('vx-columns', className)} top={top} left={left}>
{ticks.map((d, i) => {
Expand Down
8 changes: 7 additions & 1 deletion packages/vx-grid/src/grids/Grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ Grid.propTypes = {
xScale: PropTypes.func.isRequired,
yScale: PropTypes.func.isRequired,
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired
width: PropTypes.number.isRequired,
rowTickValues: PropTypes.array,
columnTickValues: PropTypes.array
};

export default function Grid({
Expand All @@ -41,6 +43,8 @@ export default function Grid({
columnLineStyle,
xOffset,
yOffset,
rowTickValues,
columnTickValues,
...restProps
}) {
return (
Expand All @@ -55,6 +59,7 @@ export default function Grid({
numTicks={numTicksRows}
style={rowLineStyle}
offset={yOffset}
tickValues={rowTickValues}
{...restProps}
/>
<Columns
Expand All @@ -67,6 +72,7 @@ export default function Grid({
numTicks={numTicksColumns}
style={columnLineStyle}
offset={xOffset}
tickValues={columnTickValues}
{...restProps}
/>
</Group>
Expand Down
7 changes: 5 additions & 2 deletions packages/vx-grid/src/grids/Rows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ Rows.propTypes = {
lineStyle: PropTypes.object,
offset: PropTypes.number,
scale: PropTypes.func.isRequired,
width: PropTypes.number.isRequired
width: PropTypes.number.isRequired,
tickValues: PropTypes.array
};

export default function Rows({
Expand All @@ -31,9 +32,11 @@ export default function Rows({
numTicks = 10,
lineStyle,
offset,
tickValues,
...restProps
}) {
const ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain();
let ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain();
if (tickValues) ticks = tickValues;
return (
<Group className={cx('vx-rows', className)} top={top} left={left}>
{ticks.map((d, i) => {
Expand Down

0 comments on commit 489bad2

Please sign in to comment.