react-native-gifted-charts 0.2.9 → 1.0.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 (3) hide show
  1. package/README.md +6 -5
  2. package/package.json +1 -1
  3. package/src/PieChart/index.tsx +59 -23
package/README.md CHANGED
@@ -19,7 +19,7 @@ The most complete library for Bar, Line, Area, Pie, and Donut charts in React Na
19
19
 
20
20
  ![alt text](/demos/altBars.svg)
21
21
  ![alt text](/demos/barPairs.svg)
22
- <img src='/demos/animatedDataLineChart.gif' alt='' width=300/>
22
+ <img src='/demos/animatedDataLine.gif' alt='' width=300/>
23
23
  <img src='/demos/pielabbelled.svg' alt='' height=280 width=270/>
24
24
  <img src='/demos/movingBars.gif' alt='' width=300/>
25
25
  <img src='/demos/lineLabelled.png' alt='' height=370 width=360/>
@@ -96,10 +96,11 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
96
96
 
97
97
  ## Common issues
98
98
 
99
- | Issue | Solution |
100
- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
101
- | [BarChart - Value and section line don't match](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/35) | [Comment by the owner](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/35#issuecomment-972673281) |
102
- | **Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.** | install `react-native-webview` |
99
+ | Issue | Solution |
100
+ | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
101
+ | [BarChart - Value and section line don't match](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/35) | [Comment by the owner](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/35#issuecomment-972673281) |
102
+ | **Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.** | install `react-native-webview` |
103
+ | Setting `height`, `maxValue`, `stepValue`, `stepHeight`, or `noOfSections` breaks the chart | Please make sure that<br/> `maxValue = noOfSections * stepValue;` <br/>is followed. [See this](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/71) |
103
104
 
104
105
  ## License
105
106
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-gifted-charts",
3
- "version": "0.2.9",
3
+ "version": "1.0.0",
4
4
  "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
5
5
  "main": "src/index.tsx",
6
6
  "files": [
package/src/PieChart/index.tsx CHANGED
@@ -2,8 +2,6 @@ import React from 'react';
2
2
  import {ColorValue, View} from 'react-native';
3
3
  import Canvas from 'react-native-canvas';
4
4
 
5
- const pi = Math.PI;
6
-
7
5
  type propTypes = {
8
6
  radius?: number;
9
7
  isThreeD?: Boolean;
@@ -21,6 +19,7 @@ type propTypes = {
21
19
  strokeColor?: string;
22
20
  backgroundColor?: string;
23
21
  data: Array<itemType>;
22
+ semiCircle?: Boolean;
24
23
 
25
24
  showText?: Boolean;
26
25
  textColor?: string;
@@ -59,6 +58,7 @@ export const PieChart = (props: propTypes) => {
59
58
  const backgroundColor = props.backgroundColor || 'white';
60
59
  const shadowColor = props.shadowColor || 'lightgray';
61
60
  let total = 0;
61
+ let pi = Math.PI;
62
62
  const shadow = props.shadow || false;
63
63
  const donut = props.donut || false;
64
64
  const innerRadius = props.innerRadius || radius / 2;
@@ -79,7 +79,7 @@ export const PieChart = (props: propTypes) => {
79
79
 
80
80
  const showTextBackground = props.showTextBackground || false;
81
81
  const showValuesAsLabels = props.showValuesAsLabels || false;
82
-
82
+ const semiCircle = props.semiCircle || false;
83
83
  const fontStyleList = ['normal', 'italic', 'oblique'];
84
84
  const fontWeightList = [
85
85
  'normal',
@@ -105,6 +105,10 @@ export const PieChart = (props: propTypes) => {
105
105
  }
106
106
  });
107
107
 
108
+ if (semiCircle) {
109
+ pi = Math.PI / 2;
110
+ }
111
+
108
112
  const canvasHeight = isThreeD ? radius * 2.5 + 60 : radius * 2 + 60;
109
113
  const canvasWidth = radius * 2 + 60;
110
114
 
@@ -125,7 +129,7 @@ export const PieChart = (props: propTypes) => {
125
129
  const initialValue = 30;
126
130
 
127
131
  /****************** SHADOW ***************/
128
- if (isThreeD && shadow) {
132
+ if (!semiCircle && isThreeD && shadow) {
129
133
  ctx.beginPath();
130
134
  ctx.moveTo(initialValue, radius + initialValue);
131
135
  ctx.lineTo(initialValue, shadowWidth + initialValue);
@@ -230,7 +234,7 @@ export const PieChart = (props: propTypes) => {
230
234
  radius + initialValue + shiftY,
231
235
  );
232
236
 
233
- ctx.fillStyle = dataItem.color || colors[i++ % 8];
237
+ ctx.fillStyle = dataItem.color || colors[i++ % 9];
234
238
  ctx.fill();
235
239
 
236
240
  // Stroke at the end again
@@ -297,29 +301,41 @@ export const PieChart = (props: propTypes) => {
297
301
 
298
302
  // console.log('semisum==>>', semiSum);
299
303
  // console.log('sin(semisum)==>>', Math.sin(semiSum));
300
- if (semiSum > 0 && semiSum <= pi / 2) {
301
- xx -= 40;
302
- yy -= 10;
303
- } else if (semiSum > pi / 2 && semiSum <= pi) {
304
- xx += 10;
305
- yy -= 10;
306
- } else if (semiSum > pi && semiSum <= 1.5 * pi) {
307
- xx += 10;
308
- yy += 24;
304
+ if (semiCircle) {
305
+ if (semiSum > 0 && semiSum <= pi / 2) {
306
+ yy -= 6;
307
+ } else if (semiSum > pi / 2 && semiSum <= pi) {
308
+ yy -= 10;
309
+ } else if (semiSum > pi && semiSum <= 1.5 * pi) {
310
+ xx += 10;
311
+ yy -= 20;
312
+ } else {
313
+ xx += 25;
314
+ yy -= 8;
315
+ }
309
316
  } else {
310
- xx -= 40;
311
- yy += 24;
317
+ if (semiSum > 0 && semiSum <= pi / 2) {
318
+ xx -= 20;
319
+ } else if (semiSum > pi && semiSum <= 1.5 * pi) {
320
+ xx += 10;
321
+ yy += 16;
322
+ } else if (semiSum > 1.5 * pi) {
323
+ xx -= 16;
324
+ yy += 16;
325
+ }
312
326
  }
313
327
 
314
328
  if (showTextBackground && (dataItem.text || showValuesAsLabels)) {
315
329
  let textBackgroundX =
316
- xx +
330
+ xx -
331
+ (semiCircle ? 18 : 0) +
317
332
  (props.textBackgroundRadius ||
318
333
  dataItem.textBackgroundRadius ||
319
334
  textSize) /
320
335
  2;
321
336
  let textBackgroundY =
322
- yy -
337
+ yy +
338
+ (semiCircle ? 8 : 0) -
323
339
  (props.textBackgroundRadius ||
324
340
  dataItem.textBackgroundRadius ||
325
341
  textSize) /
@@ -332,7 +348,7 @@ export const PieChart = (props: propTypes) => {
332
348
  dataItem.textBackgroundRadius ||
333
349
  textSize,
334
350
  0,
335
- 2 * pi,
351
+ 2 * Math.PI,
336
352
  false,
337
353
  );
338
354
  ctx.fillStyle =
@@ -345,12 +361,20 @@ export const PieChart = (props: propTypes) => {
345
361
  xx += shiftTextX;
346
362
  yy += shiftTextY;
347
363
 
348
- ctx.fillStyle = dataItem.textColor || textColor || colors[i++ % 8];
364
+ ctx.fillStyle = dataItem.textColor || textColor || colors[i++ % 9];
349
365
  let labelText = dataItem.text || '';
350
366
  if (showValuesAsLabels && !labelText) {
351
367
  labelText = dataItem.value.toString();
352
368
  }
353
- ctx.fillText(labelText, xx, yy);
369
+ if (semiCircle) {
370
+ ctx.translate(xx, yy);
371
+ ctx.rotate(Math.PI);
372
+ ctx.fillText(labelText, 4, 4);
373
+ ctx.rotate(Math.PI);
374
+ ctx.translate(-xx, -yy);
375
+ } else {
376
+ ctx.fillText(labelText, xx, yy);
377
+ }
354
378
  }
355
379
 
356
380
  /****************************************************************************************/
@@ -361,7 +385,10 @@ export const PieChart = (props: propTypes) => {
361
385
 
362
386
  return total === 0 ? null : (
363
387
  <View style={{transform: [{scaleY: tilt}]}}>
364
- <Canvas ref={handleCanvas} />
388
+ <Canvas
389
+ style={semiCircle && {transform: [{rotate: '180deg'}]}}
390
+ ref={handleCanvas}
391
+ />
365
392
  {(props.centerLabelComponent || (donut && !isDataShifted)) && (
366
393
  <View
367
394
  style={[
@@ -375,7 +402,8 @@ export const PieChart = (props: propTypes) => {
375
402
  top:
376
403
  canvasHeight / 2 -
377
404
  innerRadius * (isThreeD ? 1.5 : 1) +
378
- shiftInnerCenterY,
405
+ shiftInnerCenterY +
406
+ (isThreeD && semiCircle ? radius / 2 : 0),
379
407
  borderWidth: innerCircleBorderWidth,
380
408
  borderColor: innerCircleBorderColor,
381
409
  backgroundColor: innerCircleColor,
@@ -388,6 +416,14 @@ export const PieChart = (props: propTypes) => {
388
416
  ? innerCircleBorderWidth * 2
389
417
  : innerCircleBorderWidth,
390
418
  },
419
+ semiCircle && {
420
+ borderTopWidth: isThreeD
421
+ ? innerCircleBorderWidth * 5
422
+ : innerCircleBorderWidth,
423
+ borderLeftWidth: 0.001,
424
+ borderBottomWidth: 0,
425
+ borderRightWidth: 0.001,
426
+ },
391
427
  ]}>
392
428
  {props.centerLabelComponent ? props.centerLabelComponent() : null}
393
429
  </View>