@dhiraj0720/report1chart 2.6.0 → 2.6.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
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View, Text, ScrollView, StyleSheet } from 'react-native';
|
|
3
|
+
|
|
4
|
+
// Format numbers with commas: 556000000 → 556,000,000
|
|
5
|
+
const formatNumber = (value) => {
|
|
6
|
+
if (value === null || value === undefined || value === '') return '-';
|
|
7
|
+
return Number(value).toLocaleString('en-US');
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// Percentage cell with arrow and color
|
|
11
|
+
const PercentCell = ({ value }) => {
|
|
12
|
+
if (value === null || value === undefined) return <Text>-</Text>;
|
|
13
|
+
const positive = value >= 0;
|
|
14
|
+
return (
|
|
15
|
+
<Text style={[
|
|
16
|
+
styles.percentText,
|
|
17
|
+
{ color: positive ? '#2e7d32' : '#d32f2f' }
|
|
18
|
+
]}>
|
|
19
|
+
{positive ? '↑' : '↓'} {Math.abs(value)}%
|
|
20
|
+
</Text>
|
|
21
|
+
);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// Reusable Cell Component
|
|
25
|
+
const Cell = ({ children, bold = false, highlight = false }) => (
|
|
26
|
+
<View style={[
|
|
27
|
+
styles.cell,
|
|
28
|
+
bold && styles.boldCell,
|
|
29
|
+
highlight && styles.highlightCell
|
|
30
|
+
]}>
|
|
31
|
+
<Text style={[
|
|
32
|
+
styles.cellText,
|
|
33
|
+
bold && styles.boldText
|
|
34
|
+
]}>
|
|
35
|
+
{children}
|
|
36
|
+
</Text>
|
|
37
|
+
</View>
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
const FrozenTableReport3A = ({ rows = [] }) => {
|
|
41
|
+
if (!rows || rows.length === 0) {
|
|
42
|
+
return <Text style={{ textAlign: 'center', padding: 20, color: '#666' }}>
|
|
43
|
+
No data available
|
|
44
|
+
</Text>;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<View style={styles.container}>
|
|
49
|
+
{/* Frozen Left Column - AY */}
|
|
50
|
+
<View style={styles.frozenColumn}>
|
|
51
|
+
<Cell bold>AY</Cell>
|
|
52
|
+
{rows.map((row, index) => {
|
|
53
|
+
const isTotal = row.monthLabel === 'Total';
|
|
54
|
+
return (
|
|
55
|
+
<Cell
|
|
56
|
+
key={index}
|
|
57
|
+
bold={isTotal}
|
|
58
|
+
highlight={isTotal}
|
|
59
|
+
>
|
|
60
|
+
{row.monthLabel}
|
|
61
|
+
</Cell>
|
|
62
|
+
);
|
|
63
|
+
})}
|
|
64
|
+
</View>
|
|
65
|
+
|
|
66
|
+
{/* Scrollable Columns */}
|
|
67
|
+
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
|
68
|
+
<View>
|
|
69
|
+
{/* Header Row */}
|
|
70
|
+
<View style={styles.headerRow}>
|
|
71
|
+
{[
|
|
72
|
+
'2024 Yük',
|
|
73
|
+
'2025 Yük',
|
|
74
|
+
'Yük %',
|
|
75
|
+
'2024 Gelir',
|
|
76
|
+
'2025 Gelir',
|
|
77
|
+
'Gelir %',
|
|
78
|
+
'2025 Bütçe',
|
|
79
|
+
'Bütçe %'
|
|
80
|
+
].map((header) => (
|
|
81
|
+
<Cell key={header} bold>
|
|
82
|
+
{header}
|
|
83
|
+
</Cell>
|
|
84
|
+
))}
|
|
85
|
+
</View>
|
|
86
|
+
|
|
87
|
+
{/* Data Rows */}
|
|
88
|
+
{rows.map((row, index) => {
|
|
89
|
+
const isTotal = row.monthLabel === 'Total';
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<View key={index} style={styles.dataRow}>
|
|
93
|
+
<Cell highlight={isTotal}>{formatNumber(row.loadCount2024)}</Cell>
|
|
94
|
+
<Cell highlight={isTotal}>{formatNumber(row.loadCount2025)}</Cell>
|
|
95
|
+
<Cell highlight={isTotal}>
|
|
96
|
+
<PercentCell value={row.loadCountChangePercent} />
|
|
97
|
+
</Cell>
|
|
98
|
+
|
|
99
|
+
<Cell highlight={isTotal}>{formatNumber(row.revenueTl2024)}</Cell>
|
|
100
|
+
<Cell highlight={isTotal}>{formatNumber(row.revenueTl2025)}</Cell>
|
|
101
|
+
<Cell highlight={isTotal}>
|
|
102
|
+
<PercentCell value={row.revenueChangePercent} />
|
|
103
|
+
</Cell>
|
|
104
|
+
|
|
105
|
+
<Cell highlight={isTotal}>{formatNumber(row.budgetRevenueTl2025)}</Cell>
|
|
106
|
+
<Cell highlight={isTotal}>
|
|
107
|
+
<PercentCell value={row.budgetChangePercent} />
|
|
108
|
+
</Cell>
|
|
109
|
+
</View>
|
|
110
|
+
);
|
|
111
|
+
})}
|
|
112
|
+
</View>
|
|
113
|
+
</ScrollView>
|
|
114
|
+
</View>
|
|
115
|
+
);
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
export default FrozenTableReport3A;
|
|
119
|
+
|
|
120
|
+
const styles = StyleSheet.create({
|
|
121
|
+
container: {
|
|
122
|
+
flexDirection: 'row',
|
|
123
|
+
borderWidth: 1,
|
|
124
|
+
borderColor: '#ddd',
|
|
125
|
+
borderRadius: 10,
|
|
126
|
+
overflow: 'hidden',
|
|
127
|
+
marginVertical: 12,
|
|
128
|
+
backgroundColor: '#fff',
|
|
129
|
+
},
|
|
130
|
+
frozenColumn: {
|
|
131
|
+
width: 120,
|
|
132
|
+
backgroundColor: '#f4f6f8',
|
|
133
|
+
borderRightWidth: 1,
|
|
134
|
+
borderColor: '#ddd',
|
|
135
|
+
},
|
|
136
|
+
headerRow: {
|
|
137
|
+
flexDirection: 'row',
|
|
138
|
+
backgroundColor: '#f4f6f8',
|
|
139
|
+
},
|
|
140
|
+
dataRow: {
|
|
141
|
+
flexDirection: 'row',
|
|
142
|
+
},
|
|
143
|
+
cell: {
|
|
144
|
+
width: 140,
|
|
145
|
+
paddingVertical: 12,
|
|
146
|
+
paddingHorizontal: 8,
|
|
147
|
+
justifyContent: 'center',
|
|
148
|
+
borderBottomWidth: 1,
|
|
149
|
+
borderColor: '#e0e0e0',
|
|
150
|
+
},
|
|
151
|
+
cellText: {
|
|
152
|
+
fontSize: 12,
|
|
153
|
+
textAlign: 'center',
|
|
154
|
+
color: '#333',
|
|
155
|
+
},
|
|
156
|
+
boldCell: {
|
|
157
|
+
backgroundColor: '#e9f0f8',
|
|
158
|
+
},
|
|
159
|
+
boldText: {
|
|
160
|
+
fontWeight: '700',
|
|
161
|
+
},
|
|
162
|
+
highlightCell: {
|
|
163
|
+
backgroundColor: '#e9f0f8',
|
|
164
|
+
},
|
|
165
|
+
percentText: {
|
|
166
|
+
fontWeight: '700',
|
|
167
|
+
fontSize: 12,
|
|
168
|
+
textAlign: 'center',
|
|
169
|
+
},
|
|
170
|
+
});
|