@dhiraj0720/report1chart 2.6.2 → 2.6.4

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 +2 -1
  2. package/src/components/FrozenTableReport1A.jsx +77 -31
  3. package/src/screens/Report1AScreen.jsx +29 -108
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@dhiraj0720/report1chart",
3
- "version": "2.6.2",
3
+ "version": "2.6.4",
4
4
  "main": "src/index.jsx",
5
5
  "scripts": {
6
6
  "test": "echo 'No tests'"
7
7
  },
8
8
  "dependencies": {
9
9
  "axios": "^1.13.2",
10
+ "react-native-gesture-handler": "^2.30.0",
10
11
  "react-native-svg": "^15.15.1"
11
12
  },
12
13
  "peerDependencies": {
package/src/components/FrozenTableReport1A.jsx CHANGED
@@ -1,33 +1,42 @@
1
1
  import React from 'react';
2
- import { View, Text, ScrollView, StyleSheet, Dimensions } from 'react-native';
3
-
4
- const { width, height } = Dimensions.get('window');
2
+ import { View, Text, ScrollView, StyleSheet } from 'react-native';
5
3
 
6
4
  const Arrow = ({ value }) => (
7
- <Text style={[styles.arrow, value >= 0 ? styles.up : styles.down]}>
5
+ <Text
6
+ style={[
7
+ styles.arrow,
8
+ value >= 0 ? styles.up : styles.down,
9
+ ]}
10
+ >
8
11
  {value >= 0 ? '↑' : '↓'} {Math.abs(value)}%
9
12
  </Text>
10
13
  );
11
14
 
12
15
  const Cell = ({ children, bold, frozen }) => (
13
- <View style={[styles.cell, frozen && styles.frozenCell]}>
14
- <Text style={[styles.text, bold && styles.bold]} numberOfLines={1}>
16
+ <View
17
+ style={[
18
+ styles.cell,
19
+ frozen && styles.frozenCell,
20
+ ]}
21
+ >
22
+ <Text
23
+ numberOfLines={1}
24
+ ellipsizeMode="tail"
25
+ style={[
26
+ styles.text,
27
+ bold && styles.bold,
28
+ ]}
29
+ >
15
30
  {children}
16
31
  </Text>
17
32
  </View>
18
33
  );
19
34
 
20
- const FrozenTableReport1A = ({ rows, isFullscreen = false }) => {
21
- const isLandscape = width > height;
22
-
23
- // Auto-adjust cell width in fullscreen landscape
24
- const cellWidth = isFullscreen && isLandscape ? 160 : 110;
25
- const frozenWidth = isFullscreen && isLandscape ? 200 : 150;
26
- const fontSize = isFullscreen ? 14 : 12;
27
-
35
+ const FrozenTableReport1A = ({ rows }) => {
28
36
  return (
29
37
  <View style={styles.container}>
30
- <View style={[styles.frozen, { width: frozenWidth }]}>
38
+ {/* LEFT FROZEN COLUMN */}
39
+ <View style={styles.frozen}>
31
40
  <Cell bold frozen>FAALİYET</Cell>
32
41
  {rows.map((r, i) => (
33
42
  <Cell key={i} frozen bold>
@@ -36,6 +45,7 @@ const FrozenTableReport1A = ({ rows, isFullscreen = false }) => {
36
45
  ))}
37
46
  </View>
38
47
 
48
+ {/* SCROLLABLE COLUMNS */}
39
49
  <ScrollView horizontal showsHorizontalScrollIndicator={false}>
40
50
  <View>
41
51
  <View style={styles.headerRow}>
@@ -48,10 +58,10 @@ const FrozenTableReport1A = ({ rows, isFullscreen = false }) => {
48
58
 
49
59
  {rows.map((r, i) => (
50
60
  <View key={i} style={styles.row}>
51
- <Cell>{r.actual2024?.toLocaleString()}</Cell>
52
- <Cell>{r.actual2025?.toLocaleString()}</Cell>
61
+ <Cell>{r.actual2024}</Cell>
62
+ <Cell>{r.actual2025}</Cell>
53
63
  <Cell><Arrow value={r.actualChangePercent} /></Cell>
54
- <Cell>{r.budget2025?.toLocaleString()}</Cell>
64
+ <Cell>{r.budget2025}</Cell>
55
65
  <Cell><Arrow value={r.budgetVariancePercent} /></Cell>
56
66
  </View>
57
67
  ))}
@@ -61,6 +71,11 @@ const FrozenTableReport1A = ({ rows, isFullscreen = false }) => {
61
71
  );
62
72
  };
63
73
 
74
+ export default FrozenTableReport1A;
75
+
76
+ /* ======================
77
+ STYLES (COMPACT)
78
+ ====================== */
64
79
  const styles = StyleSheet.create({
65
80
  container: {
66
81
  flexDirection: 'row',
@@ -70,24 +85,55 @@ const styles = StyleSheet.create({
70
85
  overflow: 'hidden',
71
86
  backgroundColor: '#fff',
72
87
  },
73
- frozen: { backgroundColor: '#f5f7fa' },
74
- frozenCell: { alignItems: 'flex-start', paddingHorizontal: 10 },
75
- headerRow: { flexDirection: 'row', backgroundColor: '#f0f0f0' },
76
- row: { flexDirection: 'row' },
88
+
89
+ frozen: {
90
+ width: 150, // 👈 fixed width
91
+ backgroundColor: '#f5f7fa',
92
+ },
93
+
94
+ frozenCell: {
95
+ alignItems: 'flex-start',
96
+ paddingHorizontal: 8,
97
+ },
98
+
99
+ headerRow: {
100
+ flexDirection: 'row',
101
+ backgroundColor: '#f0f0f0',
102
+ },
103
+
104
+ row: {
105
+ flexDirection: 'row',
106
+ },
107
+
77
108
  cell: {
78
- width: 110,
79
- paddingVertical: 8,
109
+ width: 110, // 👈 compact width
110
+ paddingVertical: 6, // 👈 reduced height
80
111
  paddingHorizontal: 6,
81
112
  borderBottomWidth: 1,
82
113
  borderColor: '#eee',
83
114
  justifyContent: 'center',
84
115
  alignItems: 'center',
85
116
  },
86
- text: { fontSize: 12, color: '#222' },
87
- bold: { fontWeight: '700' },
88
- arrow: { fontSize: 12, fontWeight: '700' },
89
- up: { color: '#2e7d32' },
90
- down: { color: '#d32f2f' },
91
- });
92
117
 
93
- export default FrozenTableReport1A;
118
+ text: {
119
+ fontSize: 12, // 👈 smaller text
120
+ color: '#222',
121
+ },
122
+
123
+ bold: {
124
+ fontWeight: '700',
125
+ },
126
+
127
+ arrow: {
128
+ fontSize: 12,
129
+ fontWeight: '700',
130
+ },
131
+
132
+ up: {
133
+ color: '#2e7d32',
134
+ },
135
+
136
+ down: {
137
+ color: '#d32f2f',
138
+ },
139
+ });
package/src/screens/Report1AScreen.jsx CHANGED
@@ -1,52 +1,45 @@
1
1
  import React, { useEffect, useState } from 'react';
2
- import {
3
- ScrollView,
4
- Text,
5
- TouchableOpacity,
6
- Modal,
7
- View,
8
- StyleSheet,
9
- Dimensions,
10
- Alert,
11
- } from 'react-native';
12
- import { PinchGestureHandler, State } from 'react-native-gesture-handler';
2
+ import { ScrollView, Text, TouchableOpacity } from 'react-native';
13
3
  import fetchReport1 from '../api/report1Fetcher';
14
4
  import FrozenTableReport1A from '../components/FrozenTableReport1A';
15
5
  import Report1Card from '../components/Report1Card';
6
+ import FullScreenTableModal from '../components/FullScreenTableModal';
16
7
 
17
8
  const Report1AScreen = ({ endpoint, token, onBack }) => {
18
9
  const [rows, setRows] = useState([]);
19
10
  const [fullscreen, setFullscreen] = useState(false);
20
- const [scale, setScale] = useState(1);
21
11
 
22
12
  useEffect(() => {
23
13
  fetchReport1(endpoint, token).then(setRows);
24
- }, [endpoint, token]);
25
-
26
- const openFullscreen = () => {
27
- setFullscreen(true);
28
- setScale(1);
29
- };
30
-
31
- const closeFullscreen = () => {
32
- setFullscreen(false);
33
- setScale(1);
34
- };
14
+ }, []);
35
15
 
36
16
  return (
37
17
  <>
38
- <ScrollView style={{ padding: 16, backgroundColor: '#f8f9fa' }}>
39
- <Text onPress={onBack} style={styles.backButton}>‹ Back</Text>
40
-
41
- <Text style={styles.title}>PERFORMANS RAPORU (USD)</Text>
42
-
43
- <TouchableOpacity onPress={openFullscreen} style={styles.fullscreenBtn}>
44
- <Text style={styles.fullscreenText}>⤢ Full Screen</Text>
18
+ <ScrollView style={{ padding: 16 }}>
19
+ <Text onPress={onBack} style={{ marginBottom: 12 }}>‹ Back</Text>
20
+
21
+ <Text style={{ fontSize: 18, fontWeight: '700', marginBottom: 12 }}>
22
+ PERFORMANS RAPORU (USD)
23
+ </Text>
24
+
25
+ {/* FULLSCREEN BUTTON */}
26
+ <TouchableOpacity
27
+ onPress={() => setFullscreen(true)}
28
+ style={{
29
+ alignSelf: 'flex-end',
30
+ marginBottom: 8,
31
+ padding: 6,
32
+ }}
33
+ >
34
+ <Text style={{ fontWeight: '700' }}>⤢ Full Screen</Text>
45
35
  </TouchableOpacity>
46
36
 
47
37
  <FrozenTableReport1A rows={rows} />
48
38
 
49
- <Text style={styles.sectionTitle}>Individual Reports</Text>
39
+ {/* BELOW TABLE → CARDS */}
40
+ <Text style={{ marginVertical: 12, fontWeight: '700' }}>
41
+ Individual Reports
42
+ </Text>
50
43
 
51
44
  {rows.map((r, i) => (
52
45
  <Report1Card key={i} item={r} />
@@ -54,85 +47,13 @@ const Report1AScreen = ({ endpoint, token, onBack }) => {
54
47
  </ScrollView>
55
48
 
56
49
  {/* FULL SCREEN MODAL */}
57
- <Modal
50
+ <FullScreenTableModal
58
51
  visible={fullscreen}
59
- supportedOrientations={['portrait', 'landscape']}
60
- onRequestClose={closeFullscreen}
61
- >
62
- <View style={styles.modalContainer}>
63
- {/* Header */}
64
- <View style={styles.modalHeader}>
65
- <TouchableOpacity
66
- onPress={() =>
67
- Alert.alert(
68
- 'Rotate Device',
69
- 'For best view, please rotate your device to landscape mode ↻',
70
- [{ text: 'OK' }]
71
- )
72
- }
73
- >
74
- <Text style={styles.rotateHint}>↻ Rotate Device</Text>
75
- </TouchableOpacity>
76
-
77
- <TouchableOpacity onPress={closeFullscreen}>
78
- <Text style={styles.closeBtn}>✕ Close</Text>
79
- </TouchableOpacity>
80
- </View>
81
-
82
- {/* Zoomable Table */}
83
- <PinchGestureHandler
84
- onGestureEvent={(e) => setScale(e.nativeEvent.scale)}
85
- onHandlerStateChange={(e) => {
86
- if (e.nativeEvent.state === State.END) {
87
- let newScale = e.nativeEvent.scale;
88
- newScale = Math.max(0.8, Math.min(newScale, 3));
89
- setScale(newScale);
90
- }
91
- }}
92
- >
93
- <View style={styles.zoomContainer}>
94
- <View style={{ transform: [{ scale }] }}>
95
- <FrozenTableReport1A rows={rows} isFullscreen />
96
- </View>
97
- </View>
98
- </PinchGestureHandler>
99
- </View>
100
- </Modal>
52
+ rows={rows}
53
+ onClose={() => setFullscreen(false)}
54
+ />
101
55
  </>
102
56
  );
103
57
  };
104
58
 
105
- const styles = StyleSheet.create({
106
- backButton: { fontSize: 20, color: '#1e88e5', marginBottom: 16, fontWeight: '600' },
107
- title: { fontSize: 18, fontWeight: '700', textAlign: 'center', marginVertical: 16 },
108
- fullscreenBtn: {
109
- alignSelf: 'flex-end',
110
- backgroundColor: '#1e88e5',
111
- paddingHorizontal: 16,
112
- paddingVertical: 10,
113
- borderRadius: 8,
114
- marginBottom: 16,
115
- },
116
- fullscreenText: { color: '#fff', fontWeight: '700' },
117
- sectionTitle: { fontSize: 16, fontWeight: '700', marginVertical: 16 },
118
-
119
- modalContainer: { flex: 1, backgroundColor: '#000' },
120
- modalHeader: {
121
- flexDirection: 'row',
122
- justifyContent: 'space-between',
123
- alignItems: 'center',
124
- padding: 16,
125
- backgroundColor: '#111',
126
- borderBottomWidth: 1,
127
- borderColor: '#333',
128
- },
129
- rotateHint: { color: '#fff', fontSize: 16, fontWeight: '700' },
130
- closeBtn: { color: '#fff', fontSize: 28, fontWeight: '300' },
131
- zoomContainer: {
132
- flex: 1,
133
- justifyContent: 'center',
134
- alignItems: 'center',
135
- },
136
- });
137
-
138
- export default Report1AScreen;
59
+ export default Report1AScreen;