स्नैक मेरे पास फिल्टर के साथ एक बार चार्ट एप्लिकेशन है। मैंने ऐप में एक साइड मेनू शामिल किया है। मुझे बार चार्ट को मुख्य स्क्रीन पर प्रदर्शित करने और साइड मेनू में प्रदर्शित करने के लिए फ़िल्टर की आवश्यकता है। वर्तमान में, मेरा बार चार्ट साइड मेन्यू को इस तरह से ओवरलेयर कर रहा है- यहां छवि विवरण दर्ज करें यहां छवि विवरण दर्ज करें

मुझे यकीन नहीं है कि मुख्य स्क्रीन या साइड मेनू पर सामग्री को कैसे व्यवस्थित किया जाए। शायद मैं गलत पैकेज का उपयोग कर रहा हूँ? फिल्टर बार ग्राफ के साथ इंटरैक्ट करते हैं, इसलिए उन्हें विभिन्न कार्यों में नहीं लिखा जा सकता है।

स्नैक देखने पर स्क्रीन पर कहीं भी क्लिक करने से साइड मेन्यू खुल जाता है।

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, width: 150 }}
        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>
        </MenuDrawer>
        <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',
              }}
            />
      </View>
    );
}

const styles = StyleSheet.create({
  chartContainer: {
      flex: 1,
      backgroundColor: "#F5FCFF"
    },
    pickerContainer: {
     paddingHorizontal: 24,
     marginLeft: 100
   },
    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: {
    flex: 1,
    marginTop: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812'
  }
})
 
0
tallpotato 25 नवम्बर 2020, 08:26

1 उत्तर

सबसे बढ़िया उत्तर

मैंने स्क्रीन को फिट करने के लिए कुछ ui बदल दिए हैं आशा है कि आप ऐसा ही चाहते थे

नाश्ता:

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',
  },
});

0
Sarun UK 25 नवम्बर 2020, 05:49