score:0

Accepted answer
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
  TextInput,
  Picker,
  Button,
} from 'react-native';
import MenuDrawer from 'react-native-side-drawer';
import { useState, useEffect, useCallback } from 'react';
import {
  Chart,
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
} from 'react-native-chart-kit';

const initialData = [12, 19, 12, 25, 22, 10];
const initialFrom = '0';
const initialToMonth = '7';
const months = [
  { month: 'Jan', value: '0' },
  { month: 'Feb', value: '1' },
  { month: 'Mar', value: '2' },
  { month: 'April', value: '3' },
  { month: 'May', value: '4' },
  { month: 'June', value: '5' },
];
const initialLevelsArr = ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'];
const initialLabels = ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'];

export default function App() {
  const [open, setOpen] = useState(false);

  const toggleOpen = () => {
    setOpen(!open);
  };

  /*const toggleClose = () => {
   setOpen(false)
 };*/
  const [filterLimit, setfilterLimit] = useState(100);
  const [lessThanOrGreaterThan, setlessThanOrGreaterThan] = useState(
    'greaterThan'
  );
  const [datas, setDatas] = useState(initialData);
  const [from, setFrom] = useState(initialFrom);
  const [toMonth, setToMonth] = useState(initialToMonth);
  const [labels, setLabels] = useState(initialLabels);

  const applyFilter = () => {
    const isLessThan = lessThanOrGreaterThan === 'greaterThan';
    const value = filterLimit;
    // update instance variable
    const newDatas = initialData.map((v) => {
      if (isLessThan ? v >= value : v <= value) return v;
      return 0;
    });

    setDatas(newDatas);
  };

  const applyDateFilter = () => {
    const newLabels = initialLevelsArr.slice(
      parseInt(from),
      parseInt(toMonth) + 1
    );
    const newDatas = initialData.slice(parseInt(from), parseInt(toMonth) + 1);

    setLabels(newLabels);
    setDatas(newDatas);
  };

  const dataset = {
    labels: labels,
    datasets: [
      {
        data: datas,
        colors: [
          (opacity = 1) => `red`,
          (opacity = 1) => `blue`,
          (opacity = 1) => `yellow`,
          (opacity = 1) => `green`,
          (opacity = 1) => `purple`,
          (opacity = 1) => `orange`,
        ],
      },
    ],
  };

  const drawerContent = () => {
    return (
      <SafeAreaView style={styles.chartContainer}>
        <TouchableOpacity onPress={toggleOpen} style={styles.animatedBox}>
          <Text>Close</Text>
        </TouchableOpacity>
        <View>
          <TextInput
            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
            numeric
            placeholder="Filter Limit"
            value={filterLimit}
            onChangeText={(text) => setfilterLimit(text)}
          />
        </View>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={lessThanOrGreaterThan}
            style={{ height: 50, alignSelf: 'stretch' }}
            onValueChange={(itemValue, itemIndex) =>
              setlessThanOrGreaterThan(itemValue)
            }>
            <Picker.Item label="Greater Than" value="greaterThan" />
            <Picker.Item label="Less Than" value="lessThan" />
          </Picker>
        </View>
        <View style={styles.filterContainer}>
          <Button
            onPress={() => applyFilter()}
            title="Apply Filter"
            color="#841584"
          />
        </View>
      </SafeAreaView>
    );
  };

  return (
    <View style={styles.container}>
      <MenuDrawer
        open={open}
        drawerContent={drawerContent()}
        drawerPercentage={45}
        animationTime={250}
        overlay={true}
        opacity={0.4}>
        <TouchableOpacity onPress={toggleOpen} style={styles.body}>
          <Text>Open</Text>
        </TouchableOpacity>
        <BarChart
          data={dataset}
          width={300}
          height={220}
          withCustomBarColorFromData={true}
          flatColor={true}
          fromZero={true}
          chartConfig={{
            backgroundColor: '#ffffff',
            backgroundGradientFrom: '#ffffff',
            backgroundGradientTo: '#ffffff',
            data: dataset.datasets,
            color: (opacity = 1) => '#fff',
            labelColor: () => '#6a6a6a',
          }}
        />
      </MenuDrawer>
    </View>
  );
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1,
    zIndex: 5,
    backgroundColor: '#F5FCFF',
  },
  pickerContainer: {
    alignSelf: 'stretch',
  },
  inputContainer: {
    marginTop: 12,
    paddingHorizontal: 24,
  },
  filterContainer: {
    marginTop: 100,
    paddingHorizontal: 24,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 30,
    zIndex: 0,
  },
  animatedBox: {
    flex: 1,
    backgroundColor: '#38C8EC',
    padding: 10,
  },
  body: {
    alignSelf: 'stretch',
    height: 50,
    marginTop: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812',
  },
});


Related Query

More Query from same tag