|
// xAxis.js |
|
|
|
export default function xAxis({ width, height }) { // deconstruct width and height |
|
let axisValues = this.generateValues(); |
|
|
|
return ( |
|
<Surface width={width} height={height}> |
|
<Group x={70}> |
|
{axisValues.days.map((item, index) => ( |
|
<Text |
|
key={index} |
|
fill="#fff" |
|
/*x= THE NEXT STEP */ |
|
y={0} |
|
font={`12px Arial`} |
|
alignment='center' |
|
opacity={index === 6 ? 1: 0.6} |
|
> |
|
{item} |
|
</Text> |
|
))} |
|
|
|
{axisValues.nums.map((item, index) => ( |
|
<Text |
|
key={index} |
|
fill="#fff" |
|
/*x= THE NEXT STEP */ |
|
y={15} |
|
font={`12px Arial`} |
|
alignment='center' |
|
opacity={index === 6 ? 1: 0.6} |
|
> |
|
{item} |
|
</Text> |
|
))} |
|
</Group> |
|
</Surface> |
|
); |
|
} |
|
|
|
generateValues = () => { |
|
let days = []; |
|
let nums = []; |
|
Array(7).fill().forEach((i, index) => { |
|
days.push(moment().subtract(index, 'days').format('ddd')); |
|
nums.push(moment().subtract(index, 'days').format('D')); |
|
}); |
|
return { days: days.reverse(), nums: nums.reverse() } |
|
} |