diff --git a/src/components/BarChart/index.tsx b/src/components/BarChart/index.tsx index 5b6c1d7..1bb5ecc 100644 --- a/src/components/BarChart/index.tsx +++ b/src/components/BarChart/index.tsx @@ -3,9 +3,11 @@ import * as S from './styles'; import { BarChart } from 'react-native-chart-kit'; import { Dimensions } from 'react-native'; -interface BarChartProps {} +interface BarChartProps { + type: string; +} -const BarChartComponent: React.FC = ({}) => { +const BarChartComponent: React.FC = ({ type }) => { const data = { labels: ['6', '7', '8', '9', '10'], datasets: [ @@ -35,25 +37,23 @@ const BarChartComponent: React.FC = ({}) => { return ( - Matriz IC Implementação | Conhecimento - - - + {type === 'modulo' && Médias por módulo} + {type === 'competencia' && Médias por competência} + {type === 'matrixxz' && Médias por MatrixXZ} + ); }; diff --git a/src/components/BarChart/styles.ts b/src/components/BarChart/styles.ts index 233a205..85fe846 100644 --- a/src/components/BarChart/styles.ts +++ b/src/components/BarChart/styles.ts @@ -4,25 +4,17 @@ import styled from 'styled-components/native'; export const Container = styled(View)` width: 100%; height: auto; - flex-direction: row; align-items: center; justify-content: center; border-radius: 8px; margin: 16px 0; `; -export const WrapperChart = styled(View)` - width: 100%; - display: flex; - justify-content: center; - align-items: center; -`; - export const TitleSlider = styled(Text)` color: #687076; font-size: 16px; font-weight: 400; - margin: 5px 0; + margin: 16px 32px; align-self: flex-start; align-items: flex-start; `; diff --git a/src/components/MatrizSlider/index.tsx b/src/components/MatrizSlider/index.tsx index 3ef2ca5..908b7e4 100644 --- a/src/components/MatrizSlider/index.tsx +++ b/src/components/MatrizSlider/index.tsx @@ -1,32 +1,37 @@ -/* eslint-disable react-native/no-inline-styles */ -import React from 'react'; -import { View, Text } from 'react-native'; -import Carousel from 'react-native-reanimated-carousel'; +import React, { useRef } from 'react'; +import { View, ScrollView, Dimensions } from 'react-native'; import BarChartComponent from '@components/BarChart'; import * as S from './styles'; + const MatrizSlider: React.FC = () => { + const scrollRef = useRef(null); + const { width: windowWidth } = Dimensions.get('window'); + + const data = [0, 1]; // Array de dados do carrossel + + const handleScroll = (event) => { + const offsetX = event.nativeEvent.contentOffset.x; + const index = Math.round(offsetX / windowWidth); + console.log('current index:', index); + }; + return ( - console.log('current index:', index)} - renderItem={({ index }) => ( - - {index} + + {data.map((_, index) => ( + + - )} - /> + ))} + ); }; diff --git a/src/components/MatrizSlider/styles.ts b/src/components/MatrizSlider/styles.ts index faf5217..f7a63db 100644 --- a/src/components/MatrizSlider/styles.ts +++ b/src/components/MatrizSlider/styles.ts @@ -4,12 +4,10 @@ import { theme } from '@styles/default.theme'; export const Wrapper = styled(View)` background-color: ${theme.colors.primary.main}; - width: 85%; - height: auto; + width: 100%; + height: 300px; // Altura ajustada para o carrossel margin: 0 auto; display: flex; align-items: center; justify-content: center; - border-bottom-width: 1px; - border-bottom-color: #d1d1d1; // Cor ajustada `;