@dhiraj0720/report1chart 2.1.1 → 2.2.0

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 (4) hide show
  1. package/package.json +6 -36
  2. package/src/components/charts/BarChart.jsx +13 -13
  3. package/src/components/charts/ChartUtils.jsx +0 -13
  4. package/src/components/charts/LineChart.jsx +15 -15
package/package.json CHANGED
@@ -1,55 +1,25 @@
1
1
  {
2
2
  "name": "@dhiraj0720/report1chart",
3
- "version": "2.1.1",
3
+ "version": "2.2.0",
4
4
  "main": "src/index.jsx",
5
5
  "scripts": {
6
- "build": "echo 'Build step would go here'",
7
- "test": "jest",
8
- "lint": "eslint src/",
9
- "prepare": "npm run build"
6
+ "test": "echo 'No tests'"
10
7
  },
11
8
  "dependencies": {
12
- "axios": "^1.6.0",
13
- "react": ">=16.8.0",
14
- "react-native": ">=0.60.0",
15
- "react-native-device-info": "^15.0.1"
9
+ "axios": "^1.6.0"
16
10
  },
17
11
  "peerDependencies": {
18
12
  "react": ">=16.8.0",
19
13
  "react-native": ">=0.60.0"
20
14
  },
21
- "devDependencies": {
22
- "@babel/core": "^7.23.0",
23
- "@babel/preset-env": "^7.22.0",
24
- "@babel/preset-react": "^7.22.0",
25
- "eslint": "^8.53.0",
26
- "eslint-plugin-react": "^7.33.2",
27
- "jest": "^29.7.0"
28
- },
29
15
  "keywords": [
30
16
  "reports",
31
17
  "charts",
32
18
  "tables",
33
19
  "analytics",
34
- "dashboard",
35
- "react-native",
36
- "api",
37
- "data-visualization"
20
+ "react-native"
38
21
  ],
39
22
  "author": "Dhiraj",
40
23
  "license": "MIT",
41
- "description": "A comprehensive report chart and table package for React Native with built-in API fetching, data transformation, and error handling",
42
- "repository": {
43
- "type": "git",
44
- "url": "https://github.com/dhiraj0720/report1chart.git"
45
- },
46
- "bugs": {
47
- "url": "https://github.com/dhiraj0720/report1chart/issues"
48
- },
49
- "homepage": "https://github.com/dhiraj0720/report1chart#readme",
50
- "files": [
51
- "src/",
52
- "README.md",
53
- "LICENSE"
54
- ]
55
- }
24
+ "description": "A simple report chart and table package for React Native"
25
+ }
package/src/components/charts/BarChart.jsx CHANGED
@@ -3,7 +3,6 @@ import {
3
3
  View,
4
4
  Text,
5
5
  ScrollView,
6
- Dimensions,
7
6
  StyleSheet,
8
7
  } from 'react-native';
9
8
 
@@ -30,14 +29,17 @@ const BarChart = ({ data, title }) => {
30
29
 
31
30
  const maxValue = Math.max(...values, 1);
32
31
  const chartHeight = 200;
33
- const chartWidth = Dimensions.get('window').width - 64;
34
- const barWidth = Math.min(40, (chartWidth / values.length) - 10);
32
+ const barWidth = 40; // Fixed width, no Dimensions needed
35
33
 
36
34
  return (
37
35
  <View style={styles.container}>
38
36
  {title && <Text style={styles.title}>{title}</Text>}
39
- <ScrollView horizontal showsHorizontalScrollIndicator={false}>
40
- <View style={[styles.chart, { height: chartHeight, width: chartWidth }]}>
37
+ <ScrollView
38
+ horizontal
39
+ showsHorizontalScrollIndicator={true}
40
+ contentContainerStyle={styles.scrollContent}
41
+ >
42
+ <View style={[styles.chart, { height: chartHeight }]}>
41
43
  {values.map((value, index) => {
42
44
  const height = (value / maxValue) * chartHeight;
43
45
  const label = labels[index] || `Item ${index + 1}`;
@@ -68,11 +70,6 @@ const styles = StyleSheet.create({
68
70
  marginBottom: 16,
69
71
  borderWidth: 1,
70
72
  borderColor: '#e8e8e8',
71
- shadowColor: '#000',
72
- shadowOffset: { width: 0, height: 1 },
73
- shadowOpacity: 0.05,
74
- shadowRadius: 2,
75
- elevation: 2,
76
73
  },
77
74
  title: {
78
75
  fontSize: 18,
@@ -81,15 +78,18 @@ const styles = StyleSheet.create({
81
78
  marginBottom: 20,
82
79
  textAlign: 'center',
83
80
  },
81
+ scrollContent: {
82
+ paddingHorizontal: 8,
83
+ },
84
84
  chart: {
85
85
  flexDirection: 'row',
86
86
  alignItems: 'flex-end',
87
- justifyContent: 'space-between',
88
- paddingHorizontal: 8,
87
+ justifyContent: 'flex-start',
88
+ minWidth: 400,
89
89
  },
90
90
  barWrapper: {
91
91
  alignItems: 'center',
92
- marginHorizontal: 4,
92
+ marginHorizontal: 8,
93
93
  },
94
94
  bar: {
95
95
  borderRadius: 4,
package/src/components/charts/ChartUtils.jsx CHANGED
@@ -22,17 +22,4 @@ export const getColor = (index) => {
22
22
  export const calculatePercentageChange = (oldValue, newValue) => {
23
23
  if (!oldValue || oldValue === 0) return 0;
24
24
  return ((newValue - oldValue) / Math.abs(oldValue)) * 100;
25
- };
26
-
27
- export const getChartDimensions = (dataLength) => {
28
- const { width: screenWidth } = Dimensions.get('window');
29
- const minWidth = screenWidth - 64;
30
- const chartWidth = Math.max(minWidth, dataLength * 60);
31
- const barWidth = Math.max(20, (chartWidth / dataLength) - 10);
32
-
33
- return {
34
- chartHeight: 200,
35
- chartWidth,
36
- barWidth
37
- };
38
25
  };
package/src/components/charts/LineChart.jsx CHANGED
@@ -3,7 +3,6 @@ import {
3
3
  View,
4
4
  Text,
5
5
  ScrollView,
6
- Dimensions,
7
6
  StyleSheet,
8
7
  } from 'react-native';
9
8
 
@@ -43,14 +42,17 @@ const LineChart = ({ data, title }) => {
43
42
 
44
43
  const maxValue = Math.max(...values, 1);
45
44
  const chartHeight = 200;
46
- const chartWidth = Math.max(Dimensions.get('window').width - 64, values.length * 60);
47
- const barWidth = Math.max(20, (chartWidth / values.length) - 10);
48
-
45
+ const barWidth = 30; // Fixed width
46
+
49
47
  return (
50
48
  <View style={styles.container}>
51
49
  {title && <Text style={styles.title}>{title}</Text>}
52
- <ScrollView horizontal showsHorizontalScrollIndicator={false}>
53
- <View style={[styles.chart, { height: chartHeight, width: chartWidth }]}>
50
+ <ScrollView
51
+ horizontal
52
+ showsHorizontalScrollIndicator={true}
53
+ contentContainerStyle={styles.scrollContent}
54
+ >
55
+ <View style={[styles.chart, { height: chartHeight }]}>
54
56
  {values.map((value, index) => {
55
57
  const height = (value / maxValue) * chartHeight;
56
58
  const label = labels[index] || `M${index + 1}`;
@@ -59,7 +61,7 @@ const LineChart = ({ data, title }) => {
59
61
  <View key={index} style={styles.pointWrapper}>
60
62
  <View style={[styles.point, {
61
63
  height: Math.max(height, 2),
62
- width: barWidth
64
+ width: barWidth
63
65
  }]} />
64
66
  <View style={styles.connector} />
65
67
  <Text style={styles.pointLabel} numberOfLines={1}>{label}</Text>
@@ -81,11 +83,6 @@ const styles = StyleSheet.create({
81
83
  marginBottom: 16,
82
84
  borderWidth: 1,
83
85
  borderColor: '#e8e8e8',
84
- shadowColor: '#000',
85
- shadowOffset: { width: 0, height: 1 },
86
- shadowOpacity: 0.05,
87
- shadowRadius: 2,
88
- elevation: 2,
89
86
  },
90
87
  title: {
91
88
  fontSize: 18,
@@ -94,15 +91,18 @@ const styles = StyleSheet.create({
94
91
  marginBottom: 20,
95
92
  textAlign: 'center',
96
93
  },
94
+ scrollContent: {
95
+ paddingHorizontal: 8,
96
+ },
97
97
  chart: {
98
98
  flexDirection: 'row',
99
99
  alignItems: 'flex-end',
100
- justifyContent: 'space-between',
101
- paddingHorizontal: 8,
100
+ justifyContent: 'flex-start',
101
+ minWidth: 400,
102
102
  },
103
103
  pointWrapper: {
104
104
  alignItems: 'center',
105
- marginHorizontal: 4,
105
+ marginHorizontal: 8,
106
106
  },
107
107
  point: {
108
108
  backgroundColor: '#2196F3',