@dhiraj0720/report1chart 2.5.2 → 2.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/FrozenTableReport1A.jsx +106 -15
  3. package/src/components/FullScreenTableModal.jsx +92 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhiraj0720/report1chart",
3
- "version": "2.5.2",
3
+ "version": "2.5.3",
4
4
  "main": "src/index.jsx",
5
5
  "scripts": {
6
6
  "test": "echo 'No tests'"
package/src/components/FrozenTableReport1A.jsx CHANGED
@@ -1,47 +1,84 @@
1
1
  import React from 'react';
2
- import { View, Text, ScrollView, StyleSheet } from 'react-native';
2
+ import {
3
+ View,
4
+ Text,
5
+ ScrollView,
6
+ StyleSheet,
7
+ } from 'react-native';
3
8
 
4
- const Arrow = ({ value }) => (
5
- <Text style={{ color: value >= 0 ? 'green' : 'red', fontWeight: '700' }}>
6
- {value >= 0 ? '↑' : '↓'} {Math.abs(value)}%
7
- </Text>
8
- );
9
+ /* ======================
10
+ ARROW COMPONENT
11
+ ====================== */
12
+ const Arrow = ({ value }) => {
13
+ const num = Number(value) || 0;
14
+ const isPositive = num >= 0;
15
+
16
+ return (
17
+ <Text
18
+ style={[
19
+ styles.percent,
20
+ { color: isPositive ? '#2e7d32' : '#c62828' },
21
+ ]}
22
+ >
23
+ {isPositive ? '↑' : '↓'} {Math.abs(num)}%
24
+ </Text>
25
+ );
26
+ };
9
27
 
28
+ /* ======================
29
+ CELL COMPONENT
30
+ ====================== */
10
31
  const Cell = ({ children, bold }) => (
11
32
  <View style={styles.cell}>
12
- <Text style={[bold && styles.bold]}>{children}</Text>
33
+ <Text style={[styles.text, bold && styles.bold]}>
34
+ {children}
35
+ </Text>
13
36
  </View>
14
37
  );
15
38
 
16
- const FrozenTableReport1A = ({ rows }) => {
39
+ /* ======================
40
+ MAIN TABLE
41
+ ====================== */
42
+ const FrozenTableReport1A = ({ rows = [] }) => {
43
+ if (!rows.length) return null;
44
+
17
45
  return (
18
46
  <View style={styles.container}>
19
47
  {/* LEFT FROZEN COLUMN */}
20
48
  <View style={styles.frozen}>
21
49
  <Cell bold>FAALİYET</Cell>
50
+
22
51
  {rows.map((r, i) => (
23
- <Cell key={i} bold>{r.name}</Cell>
52
+ <Cell key={i} bold>
53
+ {r.name}
54
+ </Cell>
24
55
  ))}
25
56
  </View>
26
57
 
27
- {/* SCROLLABLE */}
28
- <ScrollView horizontal>
58
+ {/* RIGHT SCROLLABLE PART */}
59
+ <ScrollView horizontal showsHorizontalScrollIndicator={false}>
29
60
  <View>
61
+ {/* HEADER */}
30
62
  <View style={styles.headerRow}>
31
- <Cell bold>2024</Cell>
32
- <Cell bold>2025</Cell>
63
+ <Cell bold>2024 Fiili</Cell>
64
+ <Cell bold>2025 Fiili</Cell>
33
65
  <Cell bold>Artış %</Cell>
34
66
  <Cell bold>2025 Bütçe</Cell>
35
67
  <Cell bold>Sapma %</Cell>
36
68
  </View>
37
69
 
70
+ {/* ROWS */}
38
71
  {rows.map((r, i) => (
39
72
  <View key={i} style={styles.row}>
40
73
  <Cell>{r.actual2024}</Cell>
41
74
  <Cell>{r.actual2025}</Cell>
42
- <Cell><Arrow value={r.actualChangePercent} /></Cell>
75
+ <Cell>
76
+ <Arrow value={r.actualChangePercent} />
77
+ </Cell>
43
78
  <Cell>{r.budget2025}</Cell>
44
- <Cell><Arrow value={r.budgetVariancePercent} /></Cell>
79
+ <Cell>
80
+ <Arrow value={r.budgetVariancePercent} />
81
+ </Cell>
45
82
  </View>
46
83
  ))}
47
84
  </View>
@@ -51,3 +88,57 @@ const FrozenTableReport1A = ({ rows }) => {
51
88
  };
52
89
 
53
90
  export default FrozenTableReport1A;
91
+
92
+ /* ======================
93
+ STYLES
94
+ ====================== */
95
+ const styles = StyleSheet.create({
96
+ container: {
97
+ flexDirection: 'row',
98
+ borderRadius: 12,
99
+ overflow: 'hidden',
100
+ borderWidth: 1,
101
+ borderColor: '#e0e0e0',
102
+ backgroundColor: '#fff',
103
+ marginBottom: 16,
104
+ },
105
+
106
+ frozen: {
107
+ width: 160,
108
+ backgroundColor: '#f5f7fa',
109
+ borderRightWidth: 1,
110
+ borderRightColor: '#e0e0e0',
111
+ },
112
+
113
+ headerRow: {
114
+ flexDirection: 'row',
115
+ backgroundColor: '#f0f3f7',
116
+ },
117
+
118
+ row: {
119
+ flexDirection: 'row',
120
+ },
121
+
122
+ cell: {
123
+ width: 120,
124
+ paddingVertical: 12,
125
+ paddingHorizontal: 8,
126
+ justifyContent: 'center',
127
+ borderBottomWidth: 1,
128
+ borderBottomColor: '#ececec',
129
+ },
130
+
131
+ text: {
132
+ fontSize: 12,
133
+ color: '#222',
134
+ },
135
+
136
+ bold: {
137
+ fontWeight: '700',
138
+ },
139
+
140
+ percent: {
141
+ fontSize: 12,
142
+ fontWeight: '700',
143
+ },
144
+ });
package/src/components/FullScreenTableModal.jsx CHANGED
@@ -1,35 +1,106 @@
1
1
  import React, { useState } from 'react';
2
- import { Modal, View, Text, TouchableOpacity, Dimensions } from 'react-native';
2
+ import {
3
+ Modal,
4
+ View,
5
+ Text,
6
+ TouchableOpacity,
7
+ StyleSheet,
8
+ SafeAreaView,
9
+ } from 'react-native';
10
+
3
11
  import FrozenTableReport1A from './FrozenTableReport1A';
4
12
 
5
13
  const FullScreenTableModal = ({ visible, rows, onClose }) => {
6
14
  const [landscape, setLandscape] = useState(false);
7
- const { width, height } = Dimensions.get('window');
8
15
 
9
16
  return (
10
- <Modal visible={visible} animationType="slide">
11
- <View style={{ flex: 1, padding: 16 }}>
12
- {/* TOP BAR */}
13
- <View style={{
14
- flexDirection: 'row',
15
- justifyContent: 'space-between',
16
- marginBottom: 8,
17
- }}>
18
- <TouchableOpacity onPress={onClose}>
19
- <Text style={{ fontSize: 18 }}>✕</Text>
20
- </TouchableOpacity>
21
-
22
- <TouchableOpacity onPress={() => setLandscape(!landscape)}>
23
- <Text style={{ fontWeight: '700' }}>⟳ Rotate</Text>
24
- </TouchableOpacity>
25
- </View>
17
+ <Modal
18
+ visible={visible}
19
+ animationType="slide"
20
+ statusBarTranslucent
21
+ >
22
+ <SafeAreaView style={styles.safe}>
23
+ <View style={styles.container}>
24
+ {/* TOP BAR */}
25
+ <View style={styles.header}>
26
+ <TouchableOpacity onPress={onClose}>
27
+ <Text style={styles.close}>✕</Text>
28
+ </TouchableOpacity>
29
+
30
+ <Text style={styles.title}>
31
+ Full Table View
32
+ </Text>
26
33
 
27
- <View style={{ flex: 1 }}>
28
- <FrozenTableReport1A rows={rows} />
34
+ <TouchableOpacity
35
+ onPress={() => setLandscape(!landscape)}
36
+ >
37
+ <Text style={styles.rotate}>
38
+ ⟳ Rotate
39
+ </Text>
40
+ </TouchableOpacity>
41
+ </View>
42
+
43
+ {/* TABLE */}
44
+ <View
45
+ style={[
46
+ styles.tableWrapper,
47
+ landscape && styles.landscape,
48
+ ]}
49
+ >
50
+ <FrozenTableReport1A rows={rows} />
51
+ </View>
29
52
  </View>
30
- </View>
53
+ </SafeAreaView>
31
54
  </Modal>
32
55
  );
33
56
  };
34
57
 
35
58
  export default FullScreenTableModal;
59
+
60
+ /* ======================
61
+ STYLES
62
+ ====================== */
63
+ const styles = StyleSheet.create({
64
+ safe: {
65
+ flex: 1,
66
+ backgroundColor: '#fff',
67
+ },
68
+
69
+ container: {
70
+ flex: 1,
71
+ padding: 12,
72
+ },
73
+
74
+ header: {
75
+ flexDirection: 'row',
76
+ alignItems: 'center',
77
+ justifyContent: 'space-between',
78
+ marginBottom: 10,
79
+ },
80
+
81
+ close: {
82
+ fontSize: 20,
83
+ fontWeight: '700',
84
+ },
85
+
86
+ title: {
87
+ fontSize: 16,
88
+ fontWeight: '700',
89
+ },
90
+
91
+ rotate: {
92
+ fontSize: 14,
93
+ fontWeight: '700',
94
+ color: '#1565c0',
95
+ },
96
+
97
+ tableWrapper: {
98
+ flex: 1,
99
+ },
100
+
101
+ /* LANDSCAPE MODE */
102
+ landscape: {
103
+ flex: 1,
104
+ justifyContent: 'center',
105
+ },
106
+ });