@dhiraj0720/report1chart 2.7.9 → 2.8.1
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.
package/package.json
CHANGED
|
@@ -19,10 +19,10 @@ const PercentCell = ({ value }) => {
|
|
|
19
19
|
);
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
const Cell = ({ children, bold = false, highlight = false,
|
|
22
|
+
const Cell = ({ children, bold = false, highlight = false, isFrozen = false }) => (
|
|
23
23
|
<View style={[
|
|
24
24
|
styles.cell,
|
|
25
|
-
|
|
25
|
+
isFrozen && styles.frozenCell,
|
|
26
26
|
bold && styles.bold,
|
|
27
27
|
highlight && styles.highlightCell
|
|
28
28
|
]}>
|
|
@@ -34,49 +34,54 @@ const Cell = ({ children, bold = false, highlight = false, width }) => (
|
|
|
34
34
|
|
|
35
35
|
const FrozenTableReport2A = ({ rows = [], isFullscreen = false }) => {
|
|
36
36
|
if (!rows.length) {
|
|
37
|
-
return <Text style={{ textAlign: 'center', padding: 20 }}>No data available</Text>;
|
|
37
|
+
return <Text style={{ textAlign: 'center', padding: 20, color: '#666' }}>No data available</Text>;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
//
|
|
41
|
-
const frozenColumnWidth = isFullscreen ?
|
|
42
|
-
const cellWidth = isFullscreen ? 140 : 130;
|
|
40
|
+
// Frozen column slightly wider for better readability
|
|
41
|
+
const frozenColumnWidth = isFullscreen ? 160 : 130;
|
|
43
42
|
|
|
44
43
|
return (
|
|
45
44
|
<View style={styles.container}>
|
|
46
|
-
{/* Frozen Column */}
|
|
45
|
+
{/* Frozen Left Column - AY */}
|
|
47
46
|
<View style={[styles.frozenColumn, { width: frozenColumnWidth }]}>
|
|
48
|
-
<Cell bold
|
|
47
|
+
<Cell bold isFrozen>AY</Cell>
|
|
49
48
|
{rows.map((row, i) => {
|
|
50
49
|
const isTotal = row.monthLabel === 'Total';
|
|
51
50
|
return (
|
|
52
|
-
<Cell key={i} bold={isTotal} highlight={isTotal}
|
|
51
|
+
<Cell key={i} bold={isTotal} highlight={isTotal} isFrozen>
|
|
53
52
|
{row.monthLabel}
|
|
54
53
|
</Cell>
|
|
55
54
|
);
|
|
56
55
|
})}
|
|
57
56
|
</View>
|
|
58
57
|
|
|
59
|
-
{/* Scrollable Columns */}
|
|
58
|
+
{/* Scrollable Columns - Auto-fit width */}
|
|
60
59
|
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
|
61
60
|
<View>
|
|
61
|
+
{/* Header Row */}
|
|
62
62
|
<View style={styles.headerRow}>
|
|
63
|
-
{[
|
|
64
|
-
|
|
63
|
+
{[
|
|
64
|
+
'2024 TEU', '2025 TEU', 'TEU %',
|
|
65
|
+
'2024 Kar', '2025 Kar', 'Kar %',
|
|
66
|
+
'2025 Bütçe', 'Bütçe %'
|
|
67
|
+
].map((header) => (
|
|
68
|
+
<Cell key={header} bold>{header}</Cell>
|
|
65
69
|
))}
|
|
66
70
|
</View>
|
|
67
71
|
|
|
72
|
+
{/* Data Rows */}
|
|
68
73
|
{rows.map((row, i) => {
|
|
69
74
|
const isTotal = row.monthLabel === 'Total';
|
|
70
75
|
return (
|
|
71
76
|
<View key={i} style={styles.dataRow}>
|
|
72
|
-
<Cell highlight={isTotal}
|
|
73
|
-
<Cell highlight={isTotal}
|
|
74
|
-
<Cell highlight={isTotal}
|
|
75
|
-
<Cell highlight={isTotal}
|
|
76
|
-
<Cell highlight={isTotal}
|
|
77
|
-
<Cell highlight={isTotal}
|
|
78
|
-
<Cell highlight={isTotal}
|
|
79
|
-
<Cell highlight={isTotal}
|
|
77
|
+
<Cell highlight={isTotal}>{formatNumber(row.teu2024)}</Cell>
|
|
78
|
+
<Cell highlight={isTotal}>{formatNumber(row.teu2025)}</Cell>
|
|
79
|
+
<Cell highlight={isTotal}><PercentCell value={row.teuChangePercent} /></Cell>
|
|
80
|
+
<Cell highlight={isTotal}>{formatNumber(row.profitUsd2024)}</Cell>
|
|
81
|
+
<Cell highlight={isTotal}>{formatNumber(row.profitUsd2025)}</Cell>
|
|
82
|
+
<Cell highlight={isTotal}><PercentCell value={row.profitChangePercent} /></Cell>
|
|
83
|
+
<Cell highlight={isTotal}>{formatNumber(row.budgetProfitUsd2025)}</Cell>
|
|
84
|
+
<Cell highlight={isTotal}><PercentCell value={row.budgetChangePercent} /></Cell>
|
|
80
85
|
</View>
|
|
81
86
|
);
|
|
82
87
|
})}
|
|
@@ -103,22 +108,44 @@ const styles = StyleSheet.create({
|
|
|
103
108
|
borderRightWidth: 1,
|
|
104
109
|
borderColor: '#ddd',
|
|
105
110
|
},
|
|
106
|
-
headerRow: {
|
|
107
|
-
|
|
111
|
+
headerRow: {
|
|
112
|
+
flexDirection: 'row',
|
|
113
|
+
backgroundColor: '#f4f6f8',
|
|
114
|
+
},
|
|
115
|
+
dataRow: {
|
|
116
|
+
flexDirection: 'row',
|
|
117
|
+
},
|
|
108
118
|
cell: {
|
|
109
|
-
|
|
110
|
-
paddingHorizontal:
|
|
119
|
+
minWidth: 110, // Minimum width for small content
|
|
120
|
+
paddingHorizontal: 11, // +5 left + +5 right = +10 total
|
|
121
|
+
paddingVertical: 12,
|
|
111
122
|
justifyContent: 'center',
|
|
123
|
+
alignItems: 'center',
|
|
112
124
|
borderBottomWidth: 1,
|
|
113
125
|
borderColor: '#e0e0e0',
|
|
114
126
|
},
|
|
127
|
+
frozenCell: {
|
|
128
|
+
paddingHorizontal: 14, // Slightly more padding for frozen column
|
|
129
|
+
justifyContent: 'flex-start',
|
|
130
|
+
paddingLeft: 16,
|
|
131
|
+
},
|
|
115
132
|
cellText: {
|
|
116
|
-
fontSize: 12,
|
|
133
|
+
fontSize: 12.5,
|
|
117
134
|
textAlign: 'center',
|
|
118
135
|
color: '#333',
|
|
119
136
|
},
|
|
120
|
-
bold: {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
137
|
+
bold: {
|
|
138
|
+
backgroundColor: '#e9f0f8',
|
|
139
|
+
},
|
|
140
|
+
boldText: {
|
|
141
|
+
fontWeight: '700',
|
|
142
|
+
},
|
|
143
|
+
highlightCell: {
|
|
144
|
+
backgroundColor: '#e9f0f8',
|
|
145
|
+
},
|
|
146
|
+
percentText: {
|
|
147
|
+
fontWeight: '700',
|
|
148
|
+
fontSize: 12.5,
|
|
149
|
+
textAlign: 'center',
|
|
150
|
+
},
|
|
124
151
|
});
|
|
@@ -30,7 +30,7 @@ const Report1Screen = ({ endpoint, token, onBack }) => {
|
|
|
30
30
|
{/* HEADER WITH BACK ICON */}
|
|
31
31
|
<View style={styles.header}>
|
|
32
32
|
<TouchableOpacity onPress={onBack}>
|
|
33
|
-
<Text style={styles.backIcon}
|
|
33
|
+
<Text style={styles.backIcon}>‹</Text>
|
|
34
34
|
</TouchableOpacity>
|
|
35
35
|
<Text style={styles.headerTitle}>PERFORMANS RAPORU (USD)</Text>
|
|
36
36
|
</View>
|
|
@@ -106,46 +106,38 @@ const Report2AScreen = ({ api, token, onBack }) => {
|
|
|
106
106
|
</View>
|
|
107
107
|
|
|
108
108
|
<ScrollView style={styles.content}>
|
|
109
|
-
{/* FULL SCREEN BUTTON
|
|
110
|
-
<TouchableOpacity
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
</
|
|
115
|
-
|
|
116
|
-
</TouchableOpacity> */}
|
|
117
|
-
|
|
118
|
-
<TouchableOpacity
|
|
119
|
-
onPress={() => setFullscreen(true)} style={styles.fullScreenBtn}
|
|
120
|
-
>
|
|
121
|
-
<Text style={{ fontWeight: '700' }}>⤢ Full Screen</Text>
|
|
122
|
-
</TouchableOpacity>
|
|
109
|
+
{/* FULL SCREEN BUTTON - SIMPLE TEXT */}
|
|
110
|
+
<TouchableOpacity
|
|
111
|
+
onPress={() => setFullscreen(true)}
|
|
112
|
+
style={styles.fullScreenBtn}
|
|
113
|
+
>
|
|
114
|
+
<Text style={styles.fullScreenText}>⤢ Full Screen</Text>
|
|
115
|
+
</TouchableOpacity>
|
|
123
116
|
|
|
117
|
+
{/* TABLE */}
|
|
124
118
|
<FrozenTableReport2A rows={filteredRows} />
|
|
125
119
|
|
|
120
|
+
{/* LINE CHART */}
|
|
126
121
|
<View style={styles.chartContainer}>
|
|
127
122
|
<SvgLineChartCompact data={filteredLine} />
|
|
128
123
|
</View>
|
|
129
124
|
|
|
125
|
+
{/* BAR CHART */}
|
|
130
126
|
<View style={styles.chartContainer}>
|
|
131
127
|
<SvgBarLineChartCompact data={filteredBar} />
|
|
132
128
|
</View>
|
|
133
129
|
</ScrollView>
|
|
134
130
|
|
|
135
|
-
{/* FULL SCREEN MODAL
|
|
131
|
+
{/* FULL SCREEN MODAL */}
|
|
136
132
|
<Modal visible={fullscreen} supportedOrientations={['portrait', 'landscape']} animationType="fade">
|
|
137
133
|
<View style={styles.fullModal}>
|
|
138
|
-
{/* TOP BAR - ONE LINE */}
|
|
139
134
|
<View style={styles.fullHeader}>
|
|
140
|
-
<Text style={styles.fullHintText}>
|
|
141
|
-
Rotate device • Pinch to zoom
|
|
142
|
-
</Text>
|
|
135
|
+
<Text style={styles.fullHintText}>Rotate device • Pinch to zoom</Text>
|
|
143
136
|
<TouchableOpacity onPress={() => setFullscreen(false)}>
|
|
144
137
|
<Text style={styles.closeBtn}>✕</Text>
|
|
145
138
|
</TouchableOpacity>
|
|
146
139
|
</View>
|
|
147
140
|
|
|
148
|
-
{/* ZOOMABLE & FIT TABLE */}
|
|
149
141
|
<ScrollView
|
|
150
142
|
maximumZoomScale={3}
|
|
151
143
|
minimumZoomScale={0.7}
|
|
@@ -155,10 +147,7 @@ const Report2AScreen = ({ api, token, onBack }) => {
|
|
|
155
147
|
pinchGestureEnabled={true}
|
|
156
148
|
bouncesZoom={true}
|
|
157
149
|
>
|
|
158
|
-
<View style={[
|
|
159
|
-
styles.tableWrapper,
|
|
160
|
-
isLandscape && styles.landscapeFit
|
|
161
|
-
]}>
|
|
150
|
+
<View style={[styles.tableWrapper, isLandscape && styles.landscapeFit]}>
|
|
162
151
|
<FrozenTableReport2A rows={table.rows} isFullscreen />
|
|
163
152
|
</View>
|
|
164
153
|
</ScrollView>
|
|
@@ -199,18 +188,24 @@ const styles = StyleSheet.create({
|
|
|
199
188
|
filterText: { fontSize: 16, color: '#000', fontWeight: '600', marginLeft: 8 },
|
|
200
189
|
|
|
201
190
|
fullScreenBtn: {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
justifyContent: 'center',
|
|
205
|
-
padding: 14,
|
|
206
|
-
backgroundColor: '#f0f0f0',
|
|
207
|
-
borderRadius: 8,
|
|
191
|
+
alignSelf: 'flex-end',
|
|
192
|
+
marginRight: 12,
|
|
208
193
|
marginVertical: 12,
|
|
194
|
+
paddingHorizontal: 12,
|
|
195
|
+
paddingVertical: 6,
|
|
209
196
|
},
|
|
210
|
-
fullScreenText: {
|
|
197
|
+
fullScreenText: { fontSize: 16, fontWeight: '700', color: '#000' },
|
|
211
198
|
|
|
212
199
|
content: { flex: 1, padding: 12 },
|
|
213
|
-
|
|
200
|
+
|
|
201
|
+
chartContainer: {
|
|
202
|
+
borderWidth: 1,
|
|
203
|
+
borderColor: '#ddd',
|
|
204
|
+
borderRadius: 10,
|
|
205
|
+
overflow: 'hidden',
|
|
206
|
+
marginVertical: 12,
|
|
207
|
+
backgroundColor: '#fff',
|
|
208
|
+
},
|
|
214
209
|
|
|
215
210
|
fullModal: { flex: 1, backgroundColor: '#fff' },
|
|
216
211
|
fullHeader: {
|
|
@@ -239,15 +234,12 @@ const styles = StyleSheet.create({
|
|
|
239
234
|
padding: 20,
|
|
240
235
|
},
|
|
241
236
|
tableWrapper: {
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
shadowRadius: 8,
|
|
246
|
-
elevation: 5,
|
|
237
|
+
backgroundColor: '#fff',
|
|
238
|
+
borderRadius: 12,
|
|
239
|
+
overflow: 'hidden',
|
|
247
240
|
},
|
|
248
241
|
landscapeFit: {
|
|
249
|
-
transform: [{ scale: 1.
|
|
250
|
-
maxWidth: '100%',
|
|
242
|
+
transform: [{ scale: 1.45 }],
|
|
251
243
|
},
|
|
252
244
|
});
|
|
253
245
|
|