| import React from 'react'; | |
| import { ART } from 'react-native'; | |
| import { scaleBand } from 'd3-scale'; | |
| import moment from 'moment'; | |
| const { | |
| Surface, | |
| Group, | |
| Text | |
| } = ART; | |
| export default function xAxis({ width, height }) { | |
| let axisValues = this.generateValues(); | |
| return ( | |
| <Surface width={width} height={height}> | |
| <Group x={69}> | |
| {axisValues.days.map((item, index) => ( | |
| <Text | |
| key={index} | |
| fill="#fff" | |
| x={this.getValuePosition(index, axisValues.days, width)} | |
| 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={this.getValuePosition(index, axisValues.nums, width)} | |
| 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() } | |
| } | |
| getValuePosition = (index, values, width) => { | |
| let x = scaleBand().rangeRound([20, width - 75]) | |
| x.domain(values.map(d => { | |
| return d; | |
| })); | |
| return x(values[index]); | |
| } |