status-im/react-native-gifted-charts
2
0
Fork 0
mirror of https://github.com/status-im/react-native-gifted-charts.git synced 2025-02-22 16:48:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added adjustToWidth prop in Line and Area Charts, added xAxisLabelTexts and xAxisLabelTextStyle props to Bar, Line and Area charts

Browse Source
This commit is contained in:
Abhinandan-Kushwaha 2022-04-21 14:30:53 +05:30
parent 783a4a6304
commit 40aea30c92
7 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/BarChart/BarChartProps.md
View File

@ -154,6 +154,8 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| yAxisLabelTexts | Array<string> | Array of label texts to be displayed along y axis | null |
| xAxisLabelTexts | Array<string> | Array of label texts to be displayed below x axis | null |
| xAxisLabelTextStyle | object | Style of label texts to be displayed below x axis | null |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |
| labelWidth | number | Width of the Label text appearing below the bar (under the X axis) | barWidth |

3
docs/LineChart/LineChartProps.md
View File

@ -16,6 +16,7 @@
| stepValue | number | Value of 1 step/section in the Y axis | 20 |
| stepHeight | number | Height of 1 step/section in the Y axis | 20 |
| spacing | number | Distance between 2 consecutive bars in the Bar chart | 20 |
| adjustToWidth | Boolean | When set to true, it auto computes the spacing value to fit the Line chart in the available width | false |
| backgroundColor | ColorValue | Background color of the Bar chart | \_ |
| disableScroll | Boolean | To disable horizontal scroll | false |
| showScrollIndicator | Boolean | To show horizontal scroll indicator | false |
@ -142,6 +143,8 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| yAxisLabelTexts | Array<string> | Array of label texts to be displayed along y axis | null |
| xAxisLabelTexts | Array<string> | Array of label texts to be displayed below x axis | null |
| xAxisLabelTextStyle | object | Style of label texts to be displayed below x axis | null |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |

2
package.json
View File

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

7
src/BarChart/RenderBars.tsx
View File

@ -25,6 +25,7 @@ type Props = {
item: itemType;
index: number;
label: String;
containerHeight?: number;
maxValue: number;
spacing?: number;
@ -108,6 +109,8 @@ const RenderBars = (props: Props) => {
opacity,
animationDuration,
autoShiftLabels,
label,
labelTextStyle,
} = props;
const barMarginBottom =
@ -527,8 +530,8 @@ const RenderBars = (props: Props) => {
/>
)}
{isAnimated
? renderAnimatedLabel(item.label || '', item.labelTextStyle, item.value)
: renderLabel(item.label || '', item.labelTextStyle, item.value)}
? renderAnimatedLabel(label, labelTextStyle, item.value)
: renderLabel(label, labelTextStyle, item.value)}
</TouchableOpacity>
);
};

5
src/BarChart/RenderStackBars.tsx
View File

@ -11,6 +11,7 @@ type Props = {
topLabelComponent?: Component;
topLabelContainerStyle?: Style;
opacity?: number;
label: String;
labelTextStyle?: any;
disablePress?: boolean;
@ -66,6 +67,8 @@ const RenderStackBars = (props: Props) => {
spacing,
rotateLabel,
xAxisThickness,
label,
labelTextStyle,
} = props;
const disablePress = props.disablePress || false;
const renderLabel = (label: String, labelTextStyle: any) => {
@ -246,7 +249,7 @@ const RenderStackBars = (props: Props) => {
/>
)}
{static2DSimple(item)}
{renderLabel(item.label || '', item.labelTextStyle)}
{renderLabel(label || '', labelTextStyle)}
</View>
);
};

20
src/BarChart/index.tsx
View File

@ -119,6 +119,8 @@ type PropTypes = {
hideOrigin?: Boolean;
labelWidth?: number;
yAxisLabelTexts?: Array<string>;
xAxisLabelTexts?: Array<string>;
xAxisLabelTextStyle?: any;
yAxisLabelPrefix?: String;
yAxisLabelSuffix?: String;
autoShiftLabels?: Boolean;
@ -1385,6 +1387,15 @@ export const BarChart = (props: PropTypes) => {
barBorderRadius={props.barBorderRadius}
barBackgroundPattern={props.barBackgroundPattern}
patternId={props.patternId}
label={
item.label ||
(props.xAxisLabelTexts && props.xAxisLabelTexts[index]
? props.xAxisLabelTexts[index]
: '')
}
labelTextStyle={
item.labelTextStyle || props.xAxisLabelTextStyle
}
/>
);
})
@ -1436,6 +1447,15 @@ export const BarChart = (props: PropTypes) => {
barBackgroundPattern={props.barBackgroundPattern}
patternId={props.patternId}
barMarginBottom={props.barMarginBottom}
label={
item.label ||
(props.xAxisLabelTexts && props.xAxisLabelTexts[index]
? props.xAxisLabelTexts[index]
: '')
}
labelTextStyle={
item.labelTextStyle || props.xAxisLabelTextStyle
}
/>
))}
</Fragment>

27
src/LineChart/index.tsx
View File

@ -247,6 +247,8 @@ type propTypes = {
textShiftX?: number;
textShiftY?: number;
yAxisLabelTexts?: Array<string>;
xAxisLabelTexts?: Array<string>;
xAxisLabelTextStyle?: any;
width?: number;
yAxisLabelPrefix?: String;
yAxisLabelSuffix?: String;
@ -254,6 +256,7 @@ type propTypes = {
scrollAnimation?: Boolean;
noOfSectionsBelowXAxis?: number;
labelsExtraHeight?: number;
adjustToWidth?: Boolean;
};
type referenceConfigType = {
thickness: number;
@ -422,7 +425,15 @@ export const LineChart = (props: propTypes) => {
props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
const thickness = props.thickness || 2;
const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
const adjustToWidth = props.adjustToWidth || false;
const spacing =
props.spacing === 0
? 0
: props.spacing ||
(adjustToWidth
? ((props.width || 200) - initialSpacing) / data.length
: 60);
const xAxisThickness = props.xAxisThickness || 1;
const dataPointsHeight1 =
@ -2941,14 +2952,20 @@ export const LineChart = (props: propTypes) => {
{isAnimated
? renderAnimatedLabel(
index,
item.label,
item.labelTextStyle,
item.label ||
(props.xAxisLabelTexts && props.xAxisLabelTexts[index]
? props.xAxisLabelTexts[index]
: ''),
item.labelTextStyle || props.xAxisLabelTextStyle,
item.labelComponent,
)
: renderLabel(
index,
item.label,
item.labelTextStyle,
item.label ||
(props.xAxisLabelTexts && props.xAxisLabelTexts[index]
? props.xAxisLabelTexts[index]
: ''),
item.labelTextStyle || props.xAxisLabelTextStyle,
item.labelComponent,
)}
{/* {renderLabel(index, item.label, item.labelTextStyle)} */}