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]);
}
view raw xAxis.js hosted with ❤ by GitHub