text: import React from 'react';
  import {
    View,
    Dimensions,
  } from 'react-native';
  import {
    RkComponent,
    RkTheme,
    RkText,
  } from 'react-native-ui-kitten';
  
  import {
    VictoryChart,
    VictoryAxis,
    VictoryArea,
    VictoryScatter,
    VictoryGroup,
  } from 'victory-native';
  
  
  export class AreaChart extends RkComponent {
    state = {
      data: [
        { x: 1, y: 1 },
        { x: 2, y: 2 },
        { x: 3, y: 1 },
        { x: 4, y: 2 },
        { x: 5, y: 3 },
        { x: 6, y: 3 },
        { x: 7, y: 4 },
        { x: 8, y: 3 },
        { x: 9, y: 2 },
        { x: 10, y: 4 },
      ],
    };
  
    componentWillMount() {
      this.size = Dimensions.get('window').width;
    }
  
    componentDidMount() {
      this.setStateInterval = setInterval(() => {
        let positive = Math.random() > 0.5;
        let newValue = this.state.data[this.state.data.length - 1].y;
        if (newValue > 3) {
          positive = false;
        } else if (newValue < 2) {
          positive = true;
        }
        newValue = positive ? newValue + 1 : newValue - 1;
        const newData = this.state.data.map((d, i) => ({
          x: d.x,
          y: i === this.state.data.length - 1 ? newValue : this.state.data[i + 1].y,
        }));
        this.setState({
          data: newData,
        });
      }, 3000);
    }
  
    componentWillUnmount() {
      clearInterval(this.setStateInterval);
    }
  
    render = () => (
      <View>
        <RkText rkType='header4'>REAL TIME VISITORS</RkText>
        <VictoryChart
          padding={{
              top: 20, left: 40, right: 5, bottom: 5,
            }}
          width={this.size - 60}>
          <VictoryAxis
            tickValues={[]}
            style={{
                axis: { stroke: 'transparent' },
              }}
          />
          <VictoryAxis
            dependentAxis
            tickValues={['50', '100', '150', '200']}
            style={{
                axis: { stroke: 'transparent' },
                grid: { stroke: RkTheme.current.colors.disabled, strokeWidth: 0.5 },
                tickLabels: {
                  fontSize: 14,
                  stroke: RkTheme.current.colors.text.secondary,
                  fill: RkTheme.current.colors.text.secondary,
                  fontFamily: RkTheme.current.fonts.family.regular,
                  strokeWidth: 0.5,
                },
              }}
          />
          <VictoryGroup data={this.state.data}>
            <VictoryArea
              style={{
                  data: {
                    fill: RkTheme.current.colors.charts.area.fill,
                    fillOpacity: 0.5,
                    stroke: RkTheme.current.colors.charts.area.stroke,
                    strokeOpacity: 0.8,
                    strokeWidth: 1.5,
                  },
                }}
            />
            <VictoryScatter
              style={{
                  data: {
                    fill: 'white',
                    stroke: RkTheme.current.colors.charts.area.stroke,
                    strokeOpacity: 0.8,
                    strokeWidth: 1.5,
                  },
                }}
            />
          </VictoryGroup>
        </VictoryChart>
      </View>
    );
  }
  