marshallmurphy

// 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

marshallmurphy

getValuePosition = (index, values, width) => {
  let x = scaleBand().rangeRound([20, width - 75])
  x.domain(values.map(d => {
    return d;
  }));
  return x(values[index]);
}

marshallmurphy

{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}
    >

marshallmurphy

import React from 'react';
import { ART } from 'react-native';

import { scaleBand } from 'd3-scale';
import moment from 'moment';

const {
  Surface,
  Group,
  Text

marshallmurphy

// BarGraph/index.js  
...
let width = Dimensions.get('screen').width;
let xAxisHeight = 30;
let yAxisHeight = 325;

return (
  <View style={styles.main}>
    <YAxis
      height={yAxisHeight}

marshallmurphy

// BarGraph/yAxis.js

import React from 'react';
import { StyleSheet, ART } from 'react-native';
import { scaleLinear } from 'd3-scale';

const {
  Surface,
  Group,
  Shape,

marshallmurphy

import React from 'react';
import { StyleSheet, ART } from 'react-native';
import { scaleLinear } from 'd3-scale';

const {
  Surface,
  Group,
  Shape,
  Path,
  Text

marshallmurphy

// App.js
...
export default function App() {
  const color = '#FFC77D';

  const data = [
    {"duration": 4, column: 0},
    {"duration": 7, column: 1},
    {"duration": 6, column: 2},
    {"duration": 7, column: 3},

marshallmurphy

// BarGraph/index.js
import React  from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';

import Columns from './Columns';
import XAxis from './xAxis';
import YAxis from './yAxis';

export default function BarGraph({ data, color }) {
  let width = Dimensions.get('screen').width;

marshallmurphy

// BarGraph/Columns.js

import React from 'react';
import { ART } from 'react-native';
import { scaleBand, scaleLinear } from 'd3-scale';

const {
  Group,
  Shape,
  Path,