status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added background for Pie chart labels

This commit is contained in:
abhinandan1234 2021-08-05 14:13:15 +05:30
parent ab8d6dc7e0
commit da43ff8d94
5 changed files with 131 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
App.js
View File

@ -18,13 +18,29 @@ const App = () => {
// {value: 100, text: 'May'},
// ];
const data = [{value: 50}, {value: 80}, {value: 90}, {value: 70}];
const data = [
{value: 150},
{value: 80, text: 80},
{value: 90, text: 90, textColor: 'green', textBackgroundColor: 'pink'},
{value: 70},
];
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<BarChart data={data} />
<BarChart
showGradient
gradientColor="gray"
frontColor="white"
data={data}
/>
<LineChart data={data} />
<PieChart data={data} />
<PieChart
showText
showTextBackground
showValuesAsLabels
textSize={14}
data={data}
/>
{/* <LineChart data={data} curved /> */}
{/* <BarChart
data={data}

17
docs/PieChart/PieChartProps.md
View File

@ -1,7 +1,7 @@
# Pie Chart props
| Prop | Type | Description | Default value |
| --------------- | -------------- | -------------------------------------------------------------------------------- | ------------- |
| -------------------- | -------------- | -------------------------------------------------------------------------------- | ------------- |
| data | Array of items | An item object represents a section in the Pie chart. Descibed in the next table | \_ |
| radius | number | Radius of the Pie chart | 120 |
| isThreeD | Boolean | If set to true, it rotates and translates the chart to give it a 3D effect | false |
@ -10,19 +10,28 @@
| shadowWidth | number | Width of the shadow | radius\*4/3 |
| strokeWidth | number | Stroke (line) width for the Pie chart and its section | 0 |
| strokeColor | ColorValue | Stroke (line) color | gray |
| textColor | ColorValue | Color of the label texts | random colors |
| textSize | number | Size of the label texts (max allowed: radius / 5) | 24 |
| backgroundColor | ColorValue | Background color of the container that contains the Pie chart | white |
| showText | Boolean | When set to true, displays text on the Pie sections | false |
| textColor | ColorValue | Color of the label texts | random colors |
| textSize | number | Size of the label texts (max allowed: radius / 5) | 16 |
| showTextBackground | Boolean | When set to true, displays background for text on the Pie sections | false |
| textBackgroundColor | ColorValue | Background color for the label texts | white |
| textBackgroundRadius | number | Radius for the background of the text labels | textSize |
| showValuesAsLabels | Boolean | When set to true, the values of the Pie sections are displayed as labels | false |
### Item description
| Prop | Type | Description |
| --------- | ---------- | ---------------------------------------------------------------------- |
| -------------------- | ---------- | ---------------------------------------------------------------------- |
| value | number | Value of the item, representing a section of the Pie chart |
| shiftX | number | Translates (shifts) the particular section horizontally by given value |
| shiftY | number | Translates (shifts) the particular section vertically by given value |
| color | ColorValue | Color (background color) of the section |
| text | string | Label text for the sections |
| textColor | ColorValue | Color of the text (label) inside the section |
| textSize | number | Size of the text (label) inside the section |
| textBackgroundColor | ColorValue | Background color for the label text |
| textBackgroundRadius | number | Radius for the background of the text label |
### Donut chart related props

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "0.0.4",
"version": "0.0.5",
"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.",
"main": "src/index.tsx",
"files": [

2
src/BarChart/index.tsx
View File

@ -318,7 +318,7 @@ export const BarChart = (props: PropTypes) => {
{
marginLeft: initialSpacing + 6,
position: 'absolute',
bottom: stepHeight * -0.5 - 60,
bottom: stepHeight * -0.5 - 60 + xAxisThickness,
},
horizontal && {width: totalWidth},
]}

74
src/PieChart/index.tsx
View File

@ -19,20 +19,30 @@ type propTypes = {
shadowWidth?: number;
strokeWidth?: number;
strokeColor?: string;
textColor?: string;
textSize?: number;
backgroundColor?: string;
data: Array<itemType>;
showText?: Boolean;
textColor?: string;
textSize?: number;
showTextBackground?: Boolean;
textBackgroundColor?: string;
textBackgroundRadius?: number;
showValuesAsLabels?: Boolean;
};
type itemType = {
value: number;
shiftX?: number;
shiftY?: number;
color?: string;
text?: string;
textColor?: string;
textSize?: number;
textBackgroundColor?: string;
textBackgroundRadius?: number;
};
export const PieChart = (props: propTypes) => {
const {data, isThreeD, textColor} = props;
const {data, isThreeD} = props;
const radius = props.radius || 120;
const shadowWidth = props.shadowWidth || (4 * radius) / 3;
const backgroundColor = props.backgroundColor || 'white';
@ -50,7 +60,14 @@ export const PieChart = (props: propTypes) => {
const strokeWidth = props.strokeWidth || 0;
const strokeColor =
props.strokeColor || (strokeWidth ? 'gray' : 'transparent');
const textSize = props.textSize ? Math.min(props.textSize, radius / 5) : 24;
const showText = props.showText || false;
const textColor = props.textColor || '';
const textSize = props.textSize ? Math.min(props.textSize, radius / 5) : 16;
const showTextBackground = props.showTextBackground || false;
const showValuesAsLabels = props.showValuesAsLabels || false;
let isDataShifted = false;
data.forEach((item: any) => {
total += item.value;
@ -80,7 +97,6 @@ export const PieChart = (props: propTypes) => {
}
canvas.width = canvasWidth;
const ctx = canvas.getContext('2d');
ctx.font = textSize + 'px Comic Sans MS';
ctx.lineWidth = strokeWidth;
ctx.strokeStyle = strokeColor;
const initialValue = 30;
@ -177,9 +193,22 @@ export const PieChart = (props: propTypes) => {
ctx.fillStyle = dataItem.color || colors[i++ % 8];
ctx.fill();
/************************* Displaying Text Labels **********************/
if (showText) {
let fontSize;
if (props.textSize) {
fontSize = Math.min(props.textSize, radius / 5);
} else if (dataItem.textSize) {
fontSize = Math.min(dataItem.textSize, radius / 5);
} else {
fontSize = 16;
}
ctx.font = fontSize + 'px Comic Sans MS';
semiSum = angleSum + (pi * dataItem.value) / total;
yy = Math.sin(semiSum) * radius + (radius + initialValue + shiftX);
xx = Math.cos(semiSum) * radius + (radius + initialValue + shiftY);
// console.log('semisum==>>', semiSum);
// console.log('sin(semisum)==>>', Math.sin(semiSum));
if (semiSum > 0 && semiSum <= pi / 2) {
@ -196,15 +225,36 @@ export const PieChart = (props: propTypes) => {
yy += 24;
}
// console.log('xx-->', xx)
// console.log('yy-->', yy)
// ctx.moveTo(xx, yy)
// ctx.arc(xx, yy, 10, 0, 2 * pi)
if (showTextBackground && (dataItem.text || showValuesAsLabels)) {
let textBackgroundX = xx + textSize / 2;
let textBackgroundY = yy - textSize / 2 + 1;
ctx.beginPath();
ctx.arc(
textBackgroundX,
textBackgroundY,
props.textBackgroundRadius ||
dataItem.textBackgroundRadius ||
textSize,
0,
2 * pi,
false,
);
ctx.fillStyle =
props.textBackgroundColor ||
dataItem.textBackgroundColor ||
'white';
ctx.fill();
}
ctx.fillStyle = dataItem.textColor || textColor || colors[i++ % 8];
ctx.fillText(dataItem.value.toString(), xx, yy);
let labelText = dataItem.text || '';
if (showValuesAsLabels && !labelText) {
labelText = dataItem.value.toString();
}
ctx.fillText(labelText, xx, yy);
}
/****************************************************************************************/
angleSum += (2 * pi * dataItem.value) / total;
});