Skip to content

Commit

Permalink
[demo] move axis inside <Group />
Browse files Browse the repository at this point in the history
  • Loading branch information
@hshoff
hshoff committed Apr 28, 2018
1 parent a354473 commit aa782dc
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 178 deletions.
180 changes: 91 additions & 89 deletions packages/vx-demo/components/tiles/axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,95 +88,97 @@ export default ({ width, height, margin }) => {
curve={curveBasis}
/>
</Group>
<AxisLeft
top={margin.top}
left={margin.left}
scale={yScale}
hideZero
numTicks={numTicksForHeight(height)}
label="Axis Left Label"
labelProps={{
fill: '#8e205f',
textAnchor: 'middle',
fontSize: 12,
fontFamily: 'Arial'
}}
stroke="#1b1a1e"
tickStroke="#8e205f"
tickLabelProps={(value, index) => ({
fill: '#8e205f',
textAnchor: 'end',
fontSize: 10,
fontFamily: 'Arial',
dx: '-0.25em',
dy: '0.25em'
})}
tickComponent={({ formattedValue, ...tickProps }) => (
<text {...tickProps}>{formattedValue}</text>
)}
/>
<AxisRight
top={margin.top}
left={xMax + margin.left}
scale={yScale}
hideZero
numTicks={numTicksForHeight(height)}
label="Axis Right Label"
labelProps={{
fill: '#8e205f',
textAnchor: 'middle',
fontSize: 12,
fontFamily: 'Arial'
}}
stroke="#1b1a1e"
tickStroke="#8e205f"
tickLabelProps={(value, index) => ({
fill: '#8e205f',
textAnchor: 'start',
fontSize: 10,
fontFamily: 'Arial',
dx: '0.25em',
dy: '0.25em'
})}
/>
<AxisBottom
top={height - margin.bottom}
left={margin.left}
scale={xScale}
numTicks={numTicksForWidth(width)}
label="Time"
>
{props => {
const tickLabelSize = 10;
const tickRotate = 45;
const tickColor = '#8e205f';
const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
return (
<g className="my-custom-bottom-axis">
{props.ticks.map((tick, i) => {
const tickX = tick.to.x;
const tickY = tick.to.y + tickLabelSize + props.tickLength;
return (
<Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
<Line from={tick.from} to={tick.to} stroke={tickColor} />
<text
transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
fontSize={tickLabelSize}
textAnchor="middle"
fill={tickColor}
>
{tick.formattedValue}
</text>
</Group>
);
})}
<text textAnchor="middle" transform={`translate(${axisCenter}, 50)`} fontSize="8">
{props.label}
</text>
</g>
);
}}
</AxisBottom>
<Group left={margin.left}>
<AxisLeft
top={margin.top}
left={0}
scale={yScale}
hideZero
numTicks={numTicksForHeight(height)}
label="Axis Left Label"
labelProps={{
fill: '#8e205f',
textAnchor: 'middle',
fontSize: 12,
fontFamily: 'Arial'
}}
stroke="#1b1a1e"
tickStroke="#8e205f"
tickLabelProps={(value, index) => ({
fill: '#8e205f',
textAnchor: 'end',
fontSize: 10,
fontFamily: 'Arial',
dx: '-0.25em',
dy: '0.25em'
})}
tickComponent={({ formattedValue, ...tickProps }) => (
<text {...tickProps}>{formattedValue}</text>
)}
/>
<AxisRight
top={margin.top}
left={xMax}
scale={yScale}
hideZero
numTicks={numTicksForHeight(height)}
label="Axis Right Label"
labelProps={{
fill: '#8e205f',
textAnchor: 'middle',
fontSize: 12,
fontFamily: 'Arial'
}}
stroke="#1b1a1e"
tickStroke="#8e205f"
tickLabelProps={(value, index) => ({
fill: '#8e205f',
textAnchor: 'start',
fontSize: 10,
fontFamily: 'Arial',
dx: '0.25em',
dy: '0.25em'
})}
/>
<AxisBottom
top={height - margin.bottom}
left={0}
scale={xScale}
numTicks={numTicksForWidth(width)}
label="Time"
>
{props => {
const tickLabelSize = 10;
const tickRotate = 45;
const tickColor = '#8e205f';
const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
return (
<g className="my-custom-bottom-axis">
{props.ticks.map((tick, i) => {
const tickX = tick.to.x;
const tickY = tick.to.y + tickLabelSize + props.tickLength;
return (
<Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
<Line from={tick.from} to={tick.to} stroke={tickColor} />
<text
transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
fontSize={tickLabelSize}
textAnchor="middle"
fill={tickColor}
>
{tick.formattedValue}
</text>
</Group>
);
})}
<text textAnchor="middle" transform={`translate(${axisCenter}, 50)`} fontSize="8">
{props.label}
</text>
</g>
);
}}
</AxisBottom>
</Group>
</svg>
);
};
180 changes: 91 additions & 89 deletions packages/vx-demo/pages/axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,95 +104,97 @@ export default ({ width, height, margin }) => {
curve={curveBasis}
/>
</Group>
<AxisLeft
top={margin.top}
left={margin.left}
scale={yScale}
hideZero
numTicks={numTicksForHeight(height)}
label="Axis Left Label"
labelProps={{
fill: '#8e205f',
textAnchor: 'middle',
fontSize: 12,
fontFamily: 'Arial'
}}
stroke="#1b1a1e"
tickStroke="#8e205f"
tickLabelProps={(value, index) => ({
fill: '#8e205f',
textAnchor: 'end',
fontSize: 10,
fontFamily: 'Arial',
dx: '-0.25em',
dy: '0.25em'
})}
tickComponent={({ formattedValue, ...tickProps }) => (
<text {...tickProps}>{formattedValue}</text>
)}
/>
<AxisRight
top={margin.top}
left={xMax + margin.left}
scale={yScale}
hideZero
numTicks={numTicksForHeight(height)}
label="Axis Right Label"
labelProps={{
fill: '#8e205f',
textAnchor: 'middle',
fontSize: 12,
fontFamily: 'Arial'
}}
stroke="#1b1a1e"
tickStroke="#8e205f"
tickLabelProps={(value, index) => ({
fill: '#8e205f',
textAnchor: 'start',
fontSize: 10,
fontFamily: 'Arial',
dx: '0.25em',
dy: '0.25em'
})}
/>
<AxisBottom
top={height - margin.bottom}
left={margin.left}
scale={xScale}
numTicks={numTicksForWidth(width)}
label="Time"
>
{props => {
const tickLabelSize = 10;
const tickRotate = 45;
const tickColor = '#8e205f';
const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
return (
<g className="my-custom-bottom-axis">
{props.ticks.map((tick, i) => {
const tickX = tick.to.x;
const tickY = tick.to.y + tickLabelSize + props.tickLength;
return (
<Group key={\`vx-tick-\${tick.value}-\${i}\`} className={'vx-axis-tick'}>
<Line from={tick.from} to={tick.to} stroke={tickColor} />
<text
transform={\`translate(\${tickX}, \${tickY}) rotate(\${tickRotate})\`}
fontSize={tickLabelSize}
textAnchor="middle"
fill={tickColor}
>
{tick.formattedValue}
</text>
</Group>
);
})}
<text textAnchor="middle" transform={\`translate(\${axisCenter}, 50)\`} fontSize="8">
{props.label}
</text>
</g>
);
}}
</AxisBottom>
<Group left={margin.left}>
<AxisLeft
top={margin.top}
left={0}
scale={yScale}
hideZero
numTicks={numTicksForHeight(height)}
label="Axis Left Label"
labelProps={{
fill: '#8e205f',
textAnchor: 'middle',
fontSize: 12,
fontFamily: 'Arial'
}}
stroke="#1b1a1e"
tickStroke="#8e205f"
tickLabelProps={(value, index) => ({
fill: '#8e205f',
textAnchor: 'end',
fontSize: 10,
fontFamily: 'Arial',
dx: '-0.25em',
dy: '0.25em'
})}
tickComponent={({ formattedValue, ...tickProps }) => (
<text {...tickProps}>{formattedValue}</text>
)}
/>
<AxisRight
top={margin.top}
left={xMax}
scale={yScale}
hideZero
numTicks={numTicksForHeight(height)}
label="Axis Right Label"
labelProps={{
fill: '#8e205f',
textAnchor: 'middle',
fontSize: 12,
fontFamily: 'Arial'
}}
stroke="#1b1a1e"
tickStroke="#8e205f"
tickLabelProps={(value, index) => ({
fill: '#8e205f',
textAnchor: 'start',
fontSize: 10,
fontFamily: 'Arial',
dx: '0.25em',
dy: '0.25em'
})}
/>
<AxisBottom
top={height - margin.bottom}
left={0}
scale={xScale}
numTicks={numTicksForWidth(width)}
label="Time"
>
{props => {
const tickLabelSize = 10;
const tickRotate = 45;
const tickColor = '#8e205f';
const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
return (
<g className="my-custom-bottom-axis">
{props.ticks.map((tick, i) => {
const tickX = tick.to.x;
const tickY = tick.to.y + tickLabelSize + props.tickLength;
return (
<Group key={\`vx-tick-\${tick.value}-\${i}\`} className={'vx-axis-tick'}>
<Line from={tick.from} to={tick.to} stroke={tickColor} />
<text
transform={\`translate(\${tickX}, \${tickY}) rotate(\${tickRotate})\`}
fontSize={tickLabelSize}
textAnchor="middle"
fill={tickColor}
>
{tick.formattedValue}
</text>
</Group>
);
})}
<text textAnchor="middle" transform={\`translate(\${axisCenter}, 50)\`} fontSize="8">
{props.label}
</text>
</g>
);
}}
</AxisBottom>
</Group>
</svg>
);
};`}
Expand Down

0 comments on commit aa782dc

Please sign in to comment.