Untitled
unknown
plain_text
2 years ago
7.6 kB
4
Indexable
/* eslint-disable react/no-unstable-nested-components */ import React, { useState } from 'react'; import { View, Text } from 'react-native-ui-lib'; import { VictoryChart, VictoryArea, VictoryAxis } from 'victory-native'; import { useColors } from '../../../hooks/useColors'; import { GradientArea } from './GradientArea'; import { SecondaryTabs } from '../../ui/SecondaryTabs'; import { StyleSheet } from 'react-native'; export function CurrencyChart() { const { colors }: any = useColors(); const data = [ { x: 'June 2021', domestic: 10000000, foreign: 11000000, netForeign: 4000000 }, { x: 'Sep 2021', domestic: 14000000, foreign: 9000000, netForeign: 4000000 }, { x: 'Dec 2021', domestic: 20000000, foreign: 12000000, netForeign: 6000000 }, { x: 'Mar 2022', domestic: 9000000, foreign: 13000000, netForeign: 5000000 }, ]; const [isSelected, setIsSelected] = useState<string[] | string>([]); const bottomTabs: any[] = [ { desc: '1', label: 'June 2021', selected: true, key: '1' }, { desc: '1', label: 'Sep 2021', selected: false, key: '2' }, { desc: '1', label: 'Dec 2021', selected: false, key: '3' }, { desc: '1', label: 'Mar 2022', selected: false, key: '4' }, ]; const CustomTickLabel = (props: any) => { const { x, text } = props; const splitText = text.split(' '); return ( <View style={{ position: 'absolute', left: x, top: -60 }}> {splitText.map((split: any, index: any) => ( <Text key={index} style={{ color: colors.secondaryText, fontSize: 11 }}> {split} </Text> ))} </View> ); }; function formatNumberToMillions(number: any) { return (number / 1000000).toFixed(0) + 'M'; } const domesticTotal = data.reduce((total, item) => total + item.domestic, 0); const foreignTotal = data.reduce((total, item) => total + item.foreign, 0); const netForeignTotal = data.reduce((total, item) => total + item.netForeign, 0); function formatNumberWithCommas(number: any) { return number.toLocaleString(); } return ( <View> <View style={styles(colors).chartContainer}> <VictoryChart marginT-20> <VictoryAxis tickFormat={() => ''} style={{ axis: { stroke: 'none' }, ticks: { stroke: 'none' }, }} /> <VictoryAxis dependentAxis orientation="right" tickFormat={formatNumberToMillions} style={{ axis: { stroke: 'none' }, ticks: { stroke: 'none' }, tickLabels: { fill: colors.secondaryText, fontSize: 11, }, }} /> <VictoryArea interpolation="natural" data={data} x="x" y="domestic" style={{ data: { fill: colors.middleGreenDarkCl, fillOpacity: 0.2, strokeWidth: 2 } }} dataComponent={ <GradientArea gradientColorStops={[ { color: colors.middleGreenDarkCl }, { offset: 0.8, color: 'transparent', stopOpacity: 0.2 }, ]} gradientStrokeStops={[{ color: colors.middleGreenDarkCl }]} strokeWidth={2} /> } /> <VictoryArea interpolation="natural" data={data} x="x" y="foreign" style={{ data: { fill: colors.malibuDarkCl, fillOpacity: 0.2, strokeWidth: 2 } }} dataComponent={ <GradientArea gradientColorStops={[ { color: colors.malibuDarkCl }, { offset: 0.8, color: 'transparent', stopOpacity: 0.2 }, ]} gradientStrokeStops={[{ color: colors.malibuDarkCl }]} strokeWidth={2} /> } /> <VictoryArea interpolation="natural" data={data} x="x" y="netForeign" style={{ data: { fill: colors.lavenderDarkCl, fillOpacity: 0.2, strokeWidth: 2 } }} dataComponent={ <GradientArea gradientColorStops={[ { color: colors.lavenderDarkCl }, { offset: 0.8, color: 'transparent', stopOpacity: 0.2 }, ]} gradientStrokeStops={[{ color: colors.lavenderDarkCl }]} strokeWidth={2} /> } /> </VictoryChart> <View style={styles(colors).xAxisTickContainer}> {data.map((point, index) => ( <CustomTickLabel key={index} x={(index * 100) / (data.length - 1)} text={point.x} /> ))} </View> </View> <View style={styles(colors).topBorder} row> <SecondaryTabs extraStyle={styles(colors).tabs} data={bottomTabs} fillScreen zeroSelected={false} isSelected={isSelected} setIsSelected={setIsSelected} /> </View> <View marginT-20> <View height={40} style={styles(colors).viewBg} row paddingL-10 paddingR-10> <View style={styles(colors).dotContainer} row flex-1> <View style={[styles(colors).dot, styles(colors).greenStyle]} /> <Text primaryText marginL-20 flex-1> Domestic Sales </Text> <Text primaryText flex-0 style={styles(colors).sumText}> {formatNumberWithCommas(domesticTotal)} </Text> </View> </View> <View height={40} row paddingL-10 paddingR-10> <View style={styles(colors).dotContainer} row flex-1> <View style={[styles(colors).dot, styles(colors).blueStyle]} /> <Text primaryText marginL-20 flex-1> Foreign Sales </Text> <Text primaryText flex-0 style={styles(colors).sumText}> {formatNumberWithCommas(foreignTotal)} </Text> </View> </View> <View height={40} style={styles(colors).viewBg} row paddingL-10 paddingR-10> <View style={styles(colors).dotContainer} row flex-1> <View style={[styles(colors).dot, styles(colors).purpleStyle]} /> <Text primaryText marginL-20 flex-1> Net Foreign Currency </Text> <Text primaryText flex-0 style={styles(colors).sumText}> {formatNumberWithCommas(netForeignTotal)} </Text> </View> </View> </View> </View> ); } const styles = (colors: any) => StyleSheet.create({ tabs: { paddingVertical: 3, marginTop: 20 }, topBorder: { borderTopWidth: 1, borderColor: colors.white20, marginTop: 10, alignItems: 'center', }, chartContainer: { marginLeft: -30, justifyContent: 'center', alignItems: 'center', }, dotContainer: { alignItems: 'center', }, dot: { width: 12, height: 12, borderRadius: 6, alignItems: 'center', }, greenStyle: { backgroundColor: colors.middleGreenDarkCl, }, blueStyle: { backgroundColor: colors.malibuDarkCl, }, purpleStyle: { backgroundColor: colors.lavenderDarkCl, }, viewBg: { backgroundColor: colors.blockBg4DarkCl, }, sumText: { fontSize: 12, }, xAxisTickContainer: { flexDirection: 'row', paddingHorizontal: 50, }, });
Editor is loading...