react-native-gifted-charts 1.0.10 → 1.0.13

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/BarChart/index.tsx +6 -0
  3. package/src/LineChart/index.tsx +74 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-gifted-charts",
3
- "version": "1.0.10",
3
+ "version": "1.0.13",
4
4
  "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
5
5
  "main": "src/index.tsx",
6
6
  "files": [
package/src/BarChart/index.tsx CHANGED
@@ -44,6 +44,8 @@ type PropTypes = {
44
44
  xAxisColor?: ColorValue;
45
45
  yAxisThickness?: number;
46
46
  yAxisColor?: ColorValue;
47
+ yAxisLabelContainerStyle?: any;
48
+ horizontalRulesStyle?: any;
47
49
  yAxisTextStyle?: any;
48
50
  yAxisLabelWidth?: number;
49
51
  hideYAxisText?: Boolean;
@@ -360,6 +362,8 @@ export const BarChart = (props: PropTypes) => {
360
362
  : props.yAxisThickness || 1;
361
363
  const yAxisColor = props.yAxisColor || 'black';
362
364
  const yAxisTextStyle = props.yAxisTextStyle;
365
+ const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
366
+ const horizontalRulesStyle = props.horizontalRulesStyle;
363
367
  const showFractionalValues = props.showFractionalValues || false;
364
368
  const yAxisLabelWidth = props.yAxisLabelWidth || 35;
365
369
  const hideYAxisText = props.hideYAxisText || false;
@@ -630,6 +634,7 @@ export const BarChart = (props: PropTypes) => {
630
634
  : props.width || totalWidth + 11,
631
635
  },
632
636
  yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
637
+ horizontalRulesStyle,
633
638
  ]}>
634
639
  <View
635
640
  style={[
@@ -647,6 +652,7 @@ export const BarChart = (props: PropTypes) => {
647
652
  index === noOfSections ? stepHeight / 2 : stepHeight,
648
653
  width: yAxisLabelWidth,
649
654
  },
655
+ yAxisLabelContainerStyle,
650
656
  ]}>
651
657
  {!hideYAxisText ? (
652
658
  <Text
package/src/LineChart/index.tsx CHANGED
@@ -49,6 +49,12 @@ type propTypes = {
49
49
  thickness3?: number;
50
50
  thickness4?: number;
51
51
  thickness5?: number;
52
+ strokeDashArray?: Array<number>;
53
+ strokeDashArray1?: Array<number>;
54
+ strokeDashArray2?: Array<number>;
55
+ strokeDashArray3?: Array<number>;
56
+ strokeDashArray4?: Array<number>;
57
+ strokeDashArray5?: Array<number>;
52
58
  rotateLabel?: Boolean;
53
59
  isAnimated?: Boolean;
54
60
  animateOnDataChange?: Boolean;
@@ -136,6 +142,8 @@ type propTypes = {
136
142
  color5?: string;
137
143
  yAxisThickness?: number;
138
144
  yAxisColor?: ColorValue;
145
+ yAxisLabelContainerStyle?: any;
146
+ horizontalRulesStyle?: any;
139
147
  yAxisTextStyle?: any;
140
148
  showFractionalValues?: Boolean;
141
149
  roundToDigits?: number;
@@ -1116,11 +1124,18 @@ export const LineChart = (props: propTypes) => {
1116
1124
  const stepValue = props.stepValue || maxValue / noOfSections;
1117
1125
  const noOfSectionsBelowXAxis =
1118
1126
  props.noOfSectionsBelowXAxis || -minValue / stepValue;
1119
- const thickness1 = props.thickness1;
1120
- const thickness2 = props.thickness2;
1121
- const thickness3 = props.thickness3;
1122
- const thickness4 = props.thickness4;
1123
- const thickness5 = props.thickness5;
1127
+ const thickness1 = props.thickness1 === 0 ? 0 : props.thickness || 1;
1128
+ const thickness2 = props.thickness2 === 0 ? 0 : props.thickness || 1;
1129
+ const thickness3 = props.thickness3 === 0 ? 0 : props.thickness || 1;
1130
+ const thickness4 = props.thickness4 === 0 ? 0 : props.thickness || 1;
1131
+ const thickness5 = props.thickness5 === 0 ? 0 : props.thickness || 1;
1132
+
1133
+ const strokeDashArray1 = props.strokeDashArray1 || props.strokeDashArray;
1134
+ const strokeDashArray2 = props.strokeDashArray2 || props.strokeDashArray;
1135
+ const strokeDashArray3 = props.strokeDashArray3 || props.strokeDashArray;
1136
+ const strokeDashArray4 = props.strokeDashArray4 || props.strokeDashArray;
1137
+ const strokeDashArray5 = props.strokeDashArray5 || props.strokeDashArray;
1138
+
1124
1139
  const rotateLabel = props.rotateLabel || false;
1125
1140
  const isAnimated = props.isAnimated || false;
1126
1141
  const hideDataPoints1 =
@@ -1198,6 +1213,8 @@ export const LineChart = (props: propTypes) => {
1198
1213
  const yAxisThickness = props.yAxisThickness || 1;
1199
1214
  const yAxisColor = props.yAxisColor || 'black';
1200
1215
  const yAxisTextStyle = props.yAxisTextStyle;
1216
+ const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
1217
+ const horizontalRulesStyle = props.horizontalRulesStyle;
1201
1218
  const showFractionalValues = props.showFractionalValues || false;
1202
1219
  const yAxisLabelWidth = props.yAxisLabelWidth || 35;
1203
1220
  const hideYAxisText = props.hideYAxisText || false;
@@ -1461,6 +1478,7 @@ export const LineChart = (props: propTypes) => {
1461
1478
  width: (props.width ? props.width : totalWidth) + 15,
1462
1479
  },
1463
1480
  yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
1481
+ horizontalRulesStyle,
1464
1482
  ]}>
1465
1483
  <View
1466
1484
  style={[
@@ -1470,6 +1488,7 @@ export const LineChart = (props: propTypes) => {
1470
1488
  index === noOfSections ? stepHeight / 2 : stepHeight,
1471
1489
  width: yAxisLabelWidth,
1472
1490
  },
1491
+ yAxisLabelContainerStyle,
1473
1492
  ]}>
1474
1493
  {!hideYAxisText ? (
1475
1494
  <Text
@@ -1937,6 +1956,7 @@ export const LineChart = (props: propTypes) => {
1937
1956
  endFillColor: string,
1938
1957
  startOpacity: number,
1939
1958
  endOpacity: number,
1959
+ strokeDashArray: Array<number> | undefined | null,
1940
1960
  ) => {
1941
1961
  return (
1942
1962
  <View
@@ -1949,12 +1969,25 @@ export const LineChart = (props: propTypes) => {
1949
1969
  // backgroundColor: 'rgba(200,150,150,0.6)'
1950
1970
  }}>
1951
1971
  <Svg>
1952
- <Path
1953
- d={points}
1954
- fill="none"
1955
- stroke={color}
1956
- strokeWidth={currentLineThickness || thickness}
1957
- />
1972
+ {strokeDashArray &&
1973
+ strokeDashArray.length === 2 &&
1974
+ typeof strokeDashArray[0] === 'number' &&
1975
+ typeof strokeDashArray[1] === 'number' ? (
1976
+ <Path
1977
+ d={points}
1978
+ fill="none"
1979
+ stroke={color}
1980
+ strokeWidth={currentLineThickness || thickness}
1981
+ strokeDasharray={strokeDashArray}
1982
+ />
1983
+ ) : (
1984
+ <Path
1985
+ d={points}
1986
+ fill="none"
1987
+ stroke={color}
1988
+ strokeWidth={currentLineThickness || thickness}
1989
+ />
1990
+ )}
1958
1991
 
1959
1992
  {/*********************** For Area Chart ************/}
1960
1993
 
@@ -2080,6 +2113,7 @@ export const LineChart = (props: propTypes) => {
2080
2113
  endFillColor: string,
2081
2114
  startOpacity: number,
2082
2115
  endOpacity: number,
2116
+ strokeDashArray: Array<number> | undefined | null,
2083
2117
  ) => {
2084
2118
  // console.log('animatedWidth is-------->', animatedWidth);
2085
2119
  return (
@@ -2093,12 +2127,25 @@ export const LineChart = (props: propTypes) => {
2093
2127
  // backgroundColor: 'wheat',
2094
2128
  }}>
2095
2129
  <Svg>
2096
- <Path
2097
- d={points}
2098
- fill="none"
2099
- stroke={color}
2100
- strokeWidth={currentLineThickness || thickness}
2101
- />
2130
+ {strokeDashArray &&
2131
+ strokeDashArray.length === 2 &&
2132
+ typeof strokeDashArray[0] === 'number' &&
2133
+ typeof strokeDashArray[1] === 'number' ? (
2134
+ <Path
2135
+ d={points}
2136
+ fill="none"
2137
+ stroke={color}
2138
+ strokeWidth={currentLineThickness || thickness}
2139
+ strokeDasharray={strokeDashArray}
2140
+ />
2141
+ ) : (
2142
+ <Path
2143
+ d={points}
2144
+ fill="none"
2145
+ stroke={color}
2146
+ strokeWidth={currentLineThickness || thickness}
2147
+ />
2148
+ )}
2102
2149
 
2103
2150
  {/*********************** For Area Chart ************/}
2104
2151
 
@@ -2308,6 +2355,7 @@ export const LineChart = (props: propTypes) => {
2308
2355
  endFillColor1,
2309
2356
  startOpacity1,
2310
2357
  endOpacity1,
2358
+ strokeDashArray1,
2311
2359
  )
2312
2360
  : renderLine(
2313
2361
  points,
@@ -2318,6 +2366,7 @@ export const LineChart = (props: propTypes) => {
2318
2366
  endFillColor1,
2319
2367
  startOpacity1,
2320
2368
  endOpacity1,
2369
+ strokeDashArray1,
2321
2370
  )}
2322
2371
  {points2
2323
2372
  ? isAnimated
@@ -2331,6 +2380,7 @@ export const LineChart = (props: propTypes) => {
2331
2380
  endFillColor2,
2332
2381
  startOpacity2,
2333
2382
  endOpacity2,
2383
+ strokeDashArray2,
2334
2384
  )
2335
2385
  : renderLine(
2336
2386
  points2,
@@ -2341,6 +2391,7 @@ export const LineChart = (props: propTypes) => {
2341
2391
  endFillColor2,
2342
2392
  startOpacity2,
2343
2393
  endOpacity2,
2394
+ strokeDashArray2,
2344
2395
  )
2345
2396
  : null}
2346
2397
  {points3
@@ -2355,6 +2406,7 @@ export const LineChart = (props: propTypes) => {
2355
2406
  endFillColor3,
2356
2407
  startOpacity3,
2357
2408
  endOpacity3,
2409
+ strokeDashArray3,
2358
2410
  )
2359
2411
  : renderLine(
2360
2412
  points3,
@@ -2365,6 +2417,7 @@ export const LineChart = (props: propTypes) => {
2365
2417
  endFillColor3,
2366
2418
  startOpacity3,
2367
2419
  endOpacity3,
2420
+ strokeDashArray3,
2368
2421
  )
2369
2422
  : null}
2370
2423
  {points4
@@ -2379,6 +2432,7 @@ export const LineChart = (props: propTypes) => {
2379
2432
  endFillColor4,
2380
2433
  startOpacity4,
2381
2434
  endOpacity4,
2435
+ strokeDashArray4,
2382
2436
  )
2383
2437
  : renderLine(
2384
2438
  points4,
@@ -2389,6 +2443,7 @@ export const LineChart = (props: propTypes) => {
2389
2443
  endFillColor4,
2390
2444
  startOpacity4,
2391
2445
  endOpacity4,
2446
+ strokeDashArray4,
2392
2447
  )
2393
2448
  : null}
2394
2449
  {points5
@@ -2403,6 +2458,7 @@ export const LineChart = (props: propTypes) => {
2403
2458
  endFillColor5,
2404
2459
  startOpacity5,
2405
2460
  endOpacity5,
2461
+ strokeDashArray5,
2406
2462
  )
2407
2463
  : renderLine(
2408
2464
  points5,
@@ -2413,6 +2469,7 @@ export const LineChart = (props: propTypes) => {
2413
2469
  endFillColor5,
2414
2470
  startOpacity5,
2415
2471
  endOpacity5,
2472
+ strokeDashArray5,
2416
2473
  )
2417
2474
  : null}
2418
2475
  {data.map((item: itemType, index: number) => {