Merge pull request #4 from polijrorg/Feat/edite-question

Feat/edite question

package.json

@@ -56,7 +56,7 @@
     "react-native-reanimated-carousel": "^3.5.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
+    "react-native-svg": "^15.3.0",
     "react-native-svg-charts": "^5.4.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-toast-notifications": "^3.4.0",
@@ -69,6 +69,7 @@
     "@types/axios": "^0.14.0",
     "@types/react-dom": "~18.2.25",
     "@types/react-native": "~0.69.1",
+    "@types/react-native-svg-charts": "^5.0.16",
     "@types/styled-components": "^5.1.26",
     "@types/styled-components-react-native": "^5.1.3",
     "@typescript-eslint/eslint-plugin": "^5.38.1",

src/components/BarChart/index.tsx

@@ -12,13 +12,15 @@ const BarChartComponent: React.FC<BarChartProps> = ({ type }) => {
     labels: ['6', '7', '8', '9', '10'],
     datasets: [
       {
-        data: [0, 32, 45, 42, 80, 180],
+        data: [13, 32, 45, 42, 80, 32],
         colors: [
-          (_opacity = 1) => '#338acc',
-          (_opacity = 1) => '#065d9e',
-          (_opacity = 1) => '#113f61',
-          (_opacity = 1) => '#065d9e',
-          (_opacity = 1) => '#113f61',
+          (_opacity = 1) => '#3E63DD',
+          (_opacity = 1) => '#3E63DD',
+          (_opacity = 1) => '#3E63DD',
+          (_opacity = 1) => '#3E63DD',
+          (_opacity = 1) => '#3E63DD',
+          (_opacity = 1) => '#3E63DD',
+
         ],
       },
     ],

src/components/Chart/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import * as S from './styles';
+import { Dimensions } from 'react-native';
+import { ScatterChart, Grid } from 'react-native-svg-charts';
+import { Circle, G } from 'react-native-svg';
+
+interface BarChartProps {
+  type: string;
+}
+
+const chartConfig = {
+  backgroundGradientFrom: '#F8F9FA',
+  backgroundGradientFromOpacity: 1,
+  backgroundGradientTo: '#F8F9FA',
+  backgroundGradientToOpacity: 1,
+  color: (opacity = 1) => `rgba(104, 112, 118, ${opacity})`,
+  strokeWidth: 0,
+  barPercentage: 0.7,
+  useShadowColorFromDataset: false,
+};
+
+const scatterChartData = [
+  { x: 1, y: 2 },
+  { x: 2, y: 4 },
+  { x: 3, y: 6 },
+  { x: 4, y: 8 },
+  { x: 5, y: 10 },
+];
+
+const Decorator = ({ x, y, data }) => {
+  return data.map((value, index) => (
+    <G key={index}>
+      <Circle cx={x(value.x)} cy={y(value.y)} r={5} stroke={'rgb(134, 65, 244)'} fill={'white'} />
+    </G>
+  ));
+};
+
+const BarChartComponent: React.FC<BarChartProps> = ({ type }) => {
+  return (
+    <S.Container>
+      {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>}
+
+      {type === 'matrixxz' ? (
+        <ScatterChart
+          style={{ height: 200, width: Dimensions.get('window').width - 50 }}
+          data={scatterChartData}
+          svg={{ fill: 'rgb(134, 65, 244)' }}
+          contentInset={{ top: 20, bottom: 20 }}
+          yAccessor={({ item }) => item.y}
+          xAccessor={({ item }) => item.x}
+        >
+          <Grid />
+          <Decorator x={item => item.x} y={item => item.y} data={scatterChartData} />
+        </ScatterChart>
+      ) : (
+        <></> // Renderização vazia para outros tipos, ajuste conforme necessário
+      )}
+    </S.Container>
+  );
+};
+
+export default BarChartComponent;

src/components/Chart/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native';
+import { Text, View } from 'react-native';
+
+export const Container = styled(View)`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+`;
+
+export const TitleSlider = styled(Text)`
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 16px;
+  font-weight: bold;
+`;
+
+export const Wrapper = styled(View)`
+  background-color: #f8f9fa;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

src/components/MatrizSlider/index.tsx

@@ -3,12 +3,11 @@ 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 data = ['modulo', 'competencia', 'matrixxz']; // Tipos de gráficos
 
   const handleScroll = (event) => {
     const offsetX = event.nativeEvent.contentOffset.x;
@@ -26,9 +25,9 @@ const MatrizSlider: React.FC = () => {
         onScroll={handleScroll}
         scrollEventThrottle={16}
       >
-        {data.map((_, index) => (
+        {data.map((type, index) => (
           <View key={index} style={{ width: windowWidth, borderBottomWidth: 1, borderTopWidth: 1, borderColor: '#d1d1d1' }}>
-            <BarChartComponent type="modulo" />
+            <BarChartComponent type={type} />
           </View>
         ))}
       </ScrollView>