Gráficos

polijrorg · Jun 26, 2024 · 7ef01ec · 7ef01ec
1 parent f35dd01
commit 7ef01ec
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 56 deletions.
diff --git 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<BarChartProps> = ({}) => {
+const BarChartComponent: React.FC<BarChartProps> = ({ type }) => {
   const data = {
     labels: ['6', '7', '8', '9', '10'],
     datasets: [
@@ -35,25 +37,23 @@ const BarChartComponent: React.FC<BarChartProps> = ({}) => {
 
   return (
     <S.Container>
-      <S.TitleSlider>Matriz IC Implementação | Conhecimento</S.TitleSlider>
-      <S.WrapperChart>
-        <BarChart
-          data={data}
-          // eslint-disable-next-line react-native/no-inline-styles
-          style={{ borderRadius: 4, padding: 12 }}
-          width={Dimensions.get('window').width - 90}
-          height={220}
-          yAxisLabel=""
-          yAxisSuffix=""
-          chartConfig={chartConfig}
-          verticalLabelRotation={0}
-          showValuesOnTopOfBars
-          showBarTops={false}
-          flatColor
-          withInnerLines={false}
-          withCustomBarColorFromData
-        />
-      </S.WrapperChart>
+      {type === 'modulo' && <S.TitleSlider>Médias por módulo</S.TitleSlider>}
+      {type === 'competencia' && <S.TitleSlider>Médias por competência</S.TitleSlider>}
+      {type === 'matrixxz' && <S.TitleSlider>Médias por MatrixXZ</S.TitleSlider>}
+      <BarChart
+        data={data}
+        style={{ borderRadius: 4, padding: 8 }}
+        width={Dimensions.get('window').width - 50}
+        height={200}
+        yAxisLabel=""
+        yAxisSuffix=""
+        chartConfig={chartConfig}
+        showValuesOnTopOfBars
+        showBarTops={false}
+        flatColor
+        withInnerLines={false}
+        withCustomBarColorFromData
+      />
     </S.Container>
   );
 };

diff --git 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
@@ -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<ScrollView>(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 (
     <S.Wrapper>
-      <Carousel
-        loop
-        width={400}
-        height={300}
-        data={[...new Array(2).keys()]}
-        scrollAnimationDuration={1000}
-        onSnapToItem={(index) => console.log('current index:', index)}
-        renderItem={({ index }) => (
-          <View
-            style={{
-              flex: 1,
-              borderWidth: 1,
-              justifyContent: 'center',
-            }}
-          >
-            <Text style={{ textAlign: 'center', fontSize: 30 }}>{index}</Text>
+      <ScrollView
+        ref={scrollRef}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+      >
+        {data.map((_, index) => (
+          <View key={index} style={{ width: windowWidth, borderBottomWidth: 1, borderTopWidth: 1, borderColor: '#d1d1d1' }}>
+            <BarChartComponent type="modulo" />
           </View>
-        )}
-      />
+        ))}
+      </ScrollView>
     </S.Wrapper>
   );
 };

diff --git 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
 `;