| // 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() } | |
| } |