react-native#processColor JavaScript Examples

The following examples show how to use react-native#processColor. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ProfitChart.js    From inventory-management-rn with MIT License 4 votes vote down vote up 
Functional = () => {
  const [min_Vis, setMin_Vis] = useState(0);
  const [max_vis, setMax_vis] = useState(10);

  const get_month_name_from_data = data_month_string => {
    const month_name = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    const year = data_month_string.substr(2, 2);
    const month = data_month_string.substr(5, 2);
    const index = parseInt(month) - 1;
    const display_string = month_name[index] + '/' + year;
    return display_string;
  };

  const getRandomColor = () => {
    let color = '#0000ff';
    return color;
  };

  let simple_data = {
    'Total profit': [
      {month: 'Jan', val: 3},
      {month: 'Feb', val: 2},
      {month: 'Mar', val: 6},
      {month: 'Apr', val: 9},
      {month: 'May', val: 5},
      {month: 'Jun', val: 8},
    ],
  };

  let complex_data = {
    'Total profit': [
      {month: 'Jan1', val: 3},
      {month: 'Jan2', val: 4},
      {month: 'Jan3', val: 1},
      {month: 'Jan4', val: 2},
      {month: 'Feb1', val: 5},
      {month: 'Feb2', val: 1},
      {month: 'Feb3', val: 6},
      {month: 'Feb4', val: 3},
      {month: 'Mar1', val: 4},
      {month: 'Mar2', val: 7},
      {month: 'Mar3', val: 3},
      {month: 'Mar4', val: 9},
      {month: 'Apr1', val: 10},
      {month: 'Apr2', val: 3},
      {month: 'Apr3', val: 6},
      {month: 'Apr4', val: 6},
      {month: 'May1', val: 3},
      {month: 'May2', val: 1},
      {month: 'May3', val: 8},
      {month: 'May4', val: 4},
      {month: 'Jun1', val: 10},
      {month: 'Jun2', val: 4},
      {month: 'Jun3', val: 3},
      {month: 'Jun4', val: 8},
    ],
  };

  const [finalData, setFinalData] = useState([]);

  const get_data = async () => {
    const auth_key = await AsyncStorage.getItem('auth_key');
    fetch('http://chouhanaryan.pythonanywhere.com/api/profit/', {
      headers: {Authorization: `Token ${auth_key}`},
    })
      .then(data => {
        // this temp variable is a dummy data object which is being used because it has more months in its data
        const total = temp;

        /* uncomment this below line to display data from endpoint in the graph and comment the above line */
        // const total = data;

        const my_data = Object.keys(total).map(key => {
          return {month: key, value: total[key]};
        });
        setFinalData(my_data);
        setMax_vis(my_data.length);
      })
      .catch(err => console.log(err));
  };

  useEffect(() => {
    get_data();
  }, []);

  let dummy_time = [];

  for (let i = 0; i < finalData.length; i++) {
    // console.log(i)
    if (finalData[i].month != 'Total') {
      const month_name = get_month_name_from_data(finalData[i].month);
      dummy_time.push(month_name);
    }
  }

  let time = dummy_time;
  let datasetObject;
  let dataSetsValue = [];
  let dataStyle = {};
  let legendStyle = {};
  let xAxisStyle = {};
  let valueLegend = [];

  legendStyle = {
    enabled: true,
    textColor: processColor('blue'),
    textSize: 12,
    position: 'BELOW_CHART_RIGHT',
    form: 'SQUARE',
    formSize: 14,
    xEntrySpace: 10,
    yEntrySpace: 5,
    formToTextSpace: 5,
    wordWrapEnabled: true,
    maxSizePercent: 0.5,
  };

  dataStyle = {
    dataSets: dataSetsValue,
  };
  xAxisStyle = {
    valueFormatter: time,
    axisMinimum: min_Vis,
    axisMaximum: max_vis,
    granularity: 1,
  };
  const markers = {
    enabled: true,
    digits: 2,
    backgroundTint: processColor('teal'),
    markerColor: processColor('#F0C0FF8C'),
    textColor: processColor('white'),
  };

  for (let i = 0; i < finalData.length; i++) {
    if (finalData[i].month != 'Total')
      valueLegend.push({y: finalData[i].value.Total.earned});
  }

  datasetObject = {
    values: valueLegend,
    label: 'Total profit',
    config: {
      lineWidth: 1,
      drawCubicIntensity: 0.4,
      circleRadius: 3,
      drawHighlightIndicators: false,
      color: processColor(getRandomColor()),
      drawFilled: true,
      fillColor: processColor(getRandomColor()),
      fillAlpha: 40,
      circleColor: processColor(getRandomColor()),
      drawValues: true,
    },
  };
  dataSetsValue.push(datasetObject);

  const renderLine = () => {
    return (
      <LineChart
        style={styles.bar}
        visibleRange={{
          x: {min: 0, max: 10},
        }}
        // onChange={event => {
        //   if (event.nativeEvent.scaleX > 2.2) {
        //     console.log('scale greater')
        //     setMax_vis(24);
        //     setFinal_set(complex_data);
        //   } else {
        //     console.log('scale smaller')
        //     setMax_vis(6);
        //     setFinal_set(simple_data);
        //   }
        // }}
        autoScaleMinMaxEnabled={false}
        animation={{
          durationX: 300,
        }}
        data={dataStyle}
        chartDescription={{text: ''}}
        legend={legendStyle}
        marker={markers}
        xAxis={xAxisStyle}
        drawGridBackground={false}
        drawValues={false}
        dragDecelerationFrictionCoef={0.95}
        dragEnabled
        borderColor={processColor('teal')}
        borderWidth={1}
        drawBorders={true}
      />
    );
  };

  return renderLine();
}
Example #2
Source File: SalesOverTime.js    From inventory-management-rn with MIT License 4 votes vote down vote up 
Functional = () => {
  const [min_Vis, setMin_Vis] = useState(0);
  const [max_vis, setMax_vis] = useState(10);


  let datasetObject;
  let dataSetsValue = [];
  let dataStyle = {};
  let legendStyle = {};
  let xAxisStyle = {};
  let valueLegend = [];

  const [dropdownSelect, setDropdownSelect] = useState('earned');

  const get_month_name_from_data = data_month_string => {
    const month_name = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    const year = data_month_string.substr(2, 2);
    const month = data_month_string.substr(5, 2);
    const index = parseInt(month) - 1;
    const display_string = month_name[index] + '/' + year;
    // console.log(display_string)
    return display_string;
  };

  const getRandomColor = () => {
    let color = '#0000ff';
    return color;
  };

  const [finalData, setFinalData] = useState([]);

  const get_data = async () => {
    const auth_key = await AsyncStorage.getItem('auth_key');
    fetch('http://chouhanaryan.pythonanywhere.com/api/profit/', {
      headers: { Authorization: `Token ${auth_key}` },
    })
      .then((res) => res.json())
      .then(data => {
        // this temp variable is a dummy data object which is being used because it has more months in its data
        // const total = temp;

        /* uncomment this below line to display data from endpoint in the graph and comment the above line */
        const total = data;

        const my_data = Object.keys(total).map(key => {
          return { month: key, value: total[key] };
        });
        setFinalData(my_data);
        setMax_vis(my_data.length);
      })
      .catch(err => console.log(err));
  };

  useEffect(() => {
    get_data();
  }, []);

  let dummy_time = [];


  // for x axis values
  for (let i = 0; i < finalData.length; i++) {
    // console.log(i)
    if (finalData[i].month != 'Total') {
      const month_name = get_month_name_from_data(finalData[i].month);
      dummy_time.push(month_name);
    }
  }

  // for y axis values
  for (let i = 0; i < finalData.length; i++) {
    if (finalData[i].month != 'Total')
      valueLegend.push({ y: finalData[i].value.Total[dropdownSelect] });
  }

  let time = dummy_time;


  legendStyle = {
    enabled: true,
    textColor: processColor('blue'),
    textSize: 12,
    position: 'BELOW_CHART_RIGHT',
    form: 'SQUARE',
    formSize: 14,
    xEntrySpace: 10,
    yEntrySpace: 5,
    formToTextSpace: 5,
    wordWrapEnabled: true,
    maxSizePercent: 0.5,
  };

  dataStyle = {
    dataSets: dataSetsValue,
  };
  xAxisStyle = {
    valueFormatter: time,
    axisMinimum: min_Vis,
    axisMaximum: max_vis,
    granularity: 1,
  };
  const markers = {
    enabled: true,
    digits: 2,
    backgroundTint: processColor('teal'),
    markerColor: processColor('#F0C0FF8C'),
    textColor: processColor('white'),
  };



  datasetObject = {
    values: valueLegend,
    // label: 'Total profit',
    label: dropdownSelect === 'earned' ? 'Earned' : 'Spent',
    config: {
      lineWidth: 1,
      drawCubicIntensity: 0.4,
      circleRadius: 3,
      drawHighlightIndicators: false,
      color: processColor(getRandomColor()),
      drawFilled: true,
      fillColor: processColor(getRandomColor()),
      fillAlpha: 40,
      circleColor: processColor(getRandomColor()),
      drawValues: true,
    },
  };
  dataSetsValue.push(datasetObject);

  const renderLine = () => {
    return (
      <View style={{ alignItems: 'center' }}>
        <Content style={{ height: 100, marginTop: -70 }}>
          <Form
            style={{
              borderWidth: 1,
              borderColor: '#0006',
              flex: 0.8,
              borderRadius: 5,
              marginTop: 70
            }}>
            <Picker
              note
              style={{ borderColor: '#0f0', borderWidth: 1, width: 200 }}
              mode='dropdown'
              selectedValue={dropdownSelect}
              onValueChange={(value, index) => setDropdownSelect(value)}
            >
              <Picker.Item label="Earned" value="earned" />
              <Picker.Item label="Spent" value="spent" />
            </Picker>
          </Form>
        </Content>
        <TouchableOpacity onPress={() => console.log(dropdownSelect)}>
        </TouchableOpacity>
        <LineChart
          style={styles.bar}
          visibleRange={{
            x: { min: 0, max: 10 },
          }}
          autoScaleMinMaxEnabled={false}
          animation={{
            durationX: 300,
          }}
          data={dataStyle}
          chartDescription={{ text: '' }}
          legend={legendStyle}
          marker={markers}
          xAxis={xAxisStyle}
          drawGridBackground={false}
          drawValues={false}
          dragDecelerationFrictionCoef={0.95}
          dragEnabled
          borderColor={processColor('teal')}
          borderWidth={1}
          drawBorders={true}
        />
      </View>
    );
  };

  return renderLine();
}
Example #3
Source File: SalesPerItem.js    From inventory-management-rn with MIT License 4 votes vote down vote up 
Functional = () => {
  const [min_Vis, setMin_Vis] = useState(0);
  const [max_vis, setMax_vis] = useState(10);


  let datasetObject;
  let dataSetsValue = [];
  let dataStyle = {};
  let legendStyle = {};
  let xAxisStyle = {};
  let valueLegend = [];

  const [dropdownSelect, setDropdownSelect] = useState('earned');

  

  const getRandomColor = () => {
    let color = '#0000ff';
    return color;
  };

  

  const [finalData, setFinalData] = useState([]);

  const get_data = async () => {
    const auth_key = await AsyncStorage.getItem('auth_key');
    fetch('http://chouhanaryan.pythonanywhere.com/api/profit/', {
      headers: { Authorization: `Token ${auth_key}` },
    })
      .then((res) => res.json())
      .then(data => {
        // this temp variable is a dummy data object which is being used because it has more months in its data
        // const total = temp['Total'];

        /* uncomment this below line to display data from endpoint in the graph and comment the above line */
        const total = data['Total'];

        const my_data = Object.keys(total).map(key => {
          return { product: key, value: total[key] };
        });
        setFinalData(my_data);
        setMax_vis(my_data.length);
      })
      .catch(err => console.log(err));
  };

  useEffect(() => {
    get_data();
  }, []);

  let dummy_time = [];


  // for x axis values
  for (let i = 0; i < finalData.length; i++) {
    // console.log(i)
    if (finalData[i].product != 'Total') {
      dummy_time.push(finalData[i].product);
    }
  }

  // for y axis values
  for (let i = 0; i < finalData.length; i++) {
    if (finalData[i].product != 'Total')
      valueLegend.push({ y: finalData[i].value[dropdownSelect] });
  }

  let time = dummy_time;


  legendStyle = {
    enabled: true,
    textColor: processColor('blue'),
    textSize: 12,
    position: 'BELOW_CHART_RIGHT',
    form: 'SQUARE',
    formSize: 14,
    xEntrySpace: 10,
    yEntrySpace: 5,
    formToTextSpace: 5,
    wordWrapEnabled: true,
    maxSizePercent: 0.5,
  };

  dataStyle = {
    dataSets: dataSetsValue,
  };
  xAxisStyle = {
    valueFormatter: time,
    axisMinimum: min_Vis,
    axisMaximum: max_vis,
    granularity: 1,
  };
  const markers = {
    enabled: true,
    digits: 2,
    backgroundTint: processColor('teal'),
    markerColor: processColor('#F0C0FF8C'),
    textColor: processColor('white'),
  };



  datasetObject = {
    values: valueLegend,
    // label: 'Total profit',
    label: dropdownSelect === 'earned' ? 'Earned' : 'Spent',
    config: {
      lineWidth: 1,
      drawCubicIntensity: 0.4,
      circleRadius: 3,
      drawHighlightIndicators: false,
      color: processColor(getRandomColor()),
      drawFilled: true,
      fillColor: processColor(getRandomColor()),
      fillAlpha: 40,
      circleColor: processColor(getRandomColor()),
      drawValues: true,
    },
  };
  dataSetsValue.push(datasetObject);

  const renderLine = () => {
    return (
      <View style={{ alignItems: 'center' }}>
        <Content style={{ height: 100, marginTop: -70 }}>
          <Form
            style={{
              borderWidth: 1,
              borderColor: '#0006',
              flex: 0.8,
              borderRadius: 5,
              marginTop: 70
            }}>
            <Picker
              note
              style={{ borderColor: '#0f0', borderWidth: 1, width: 200 }}
              mode='dropdown'
              selectedValue={dropdownSelect}
              onValueChange={(value, index) => setDropdownSelect(value)}
            >
              <Picker.Item label="Earned" value="earned" />
              <Picker.Item label="Spent" value="spent" />
            </Picker>
          </Form>
        </Content>
        <TouchableOpacity onPress={() => console.log(dropdownSelect)}>
        </TouchableOpacity>
        <BarChart
          style={styles.bar}
          visibleRange={{
            x: { min: 0, max: 10 },
          }}
          autoScaleMinMaxEnabled={false}
          animation={{
            durationX: 300,
          }}
          data={dataStyle}
          chartDescription={{ text: '' }}
          legend={legendStyle}
          marker={markers}
          xAxis={xAxisStyle}
          drawGridBackground={false}
          drawValues={false}
          dragDecelerationFrictionCoef={0.95}
          dragEnabled
          borderColor={processColor('teal')}
          borderWidth={1}
          drawBorders={true}
        />
      </View>
    );
  };

  return renderLine();
}