xAxis.js

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