diff --git a/demos/blues.png b/demos/blues.png new file mode 100644 index 0000000..f4352ca Binary files /dev/null and b/demos/blues.png differ diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md index 5c09b21..c56fe31 100644 --- a/docs/BarChart/BarChartProps.md +++ b/docs/BarChart/BarChartProps.md @@ -25,6 +25,7 @@ | showLine | Boolean | To show a Line chart over the Bar chart with the same data | false | | lineData | Array of items | The data object for the line chart (use only when showLine is true) | data | | lineConfig | lineConfigType | Properties of the Line chart shown over the Bar chart (lineConfigType) is described below | defaultLineConfig | +| lineBehindBars | boolean | When set to true, the line chart will appear behind the Bars in case of overlap | false | | autoShiftLabels | Boolean | When set to true, automatically shifts the X axis labels for negative values | false | | scrollToEnd | Boolean | When set to true, the chart automatically scrolls to the rightmost bar | false | | scrollAnimation | Boolean | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | true | diff --git a/docs/PieChart/PieChartProps.md b/docs/PieChart/PieChartProps.md index 1c15388..5e53723 100644 --- a/docs/PieChart/PieChartProps.md +++ b/docs/PieChart/PieChartProps.md @@ -12,6 +12,7 @@ | focusOnPress | Boolean | When set to true, the pressed section of the Pie chart will have a bigger radius, hence appear focused | false | | toggleFocusOnPress | Boolean | When set to true, if the user presses an already focused pie section, it will be unfocused | true | | extraRadiusForFocused | number | Extra radius for the focused Pie section | radius/10 | +| sectionAutoFocus | boolean | In case you don't want focusOnPress but want a particular section to autofocus, this prop will be needed | false | | onLabelPress | Function | Callback function called on press of a Label (takes item and index as parameter) | onPress OR null | | tiltAngle | Angle in deg | The angle by which the chart should be tilted | '55deg' for 3D charts, otherwise 0 | | shadow | Boolean | Shadow to the Pie chart, when set to true, it enhances the 3D effect | false | @@ -86,8 +87,9 @@ The default value for labelsPosition is 'mid'. In case of donut and semicircle c | labelPosition | string | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | | onPress | Function | Callback function called on press of Pie sections (takes item and index as parameter) | | onLabelPress | Function | Callback function called on press of a Label (takes item and index as parameter) | -| strokeWidth | number | Stroke (line) width for the Pie chart and its section | -| strokeColor | ColorValue | Stroke (line) color | +| strokeWidth | number | Stroke (line) width for the Pie chart and its section | +| strokeColor | ColorValue | Stroke (line) color | +| focused | boolean | When set to true, the section for that item is focused, sectionAutoFocus must be set true in order to use this property | diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index 631eb16..f9688b6 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -62,6 +62,7 @@ type PropTypes = { showLine?: Boolean; lineData?: any; lineConfig?: lineConfigType; + lineBehindBars?: boolean; cappedBars?: Boolean; capThickness?: number; @@ -235,6 +236,7 @@ export const BarChart = (props: PropTypes) => { return props.data; }, [props.yAxisOffset, props.data]); const lineData = props.lineData || data; + const lineBehindBars = props.lineBehindBars || false; const defaultLineConfig = { initialSpacing: initialSpacing, curved: false, @@ -1434,7 +1436,7 @@ export const BarChart = (props: PropTypes) => { height: containerHeight + 10, bottom: 60, //stepHeight * -0.5 + xAxisThickness, width: animatedWidth, - zIndex: -1, + zIndex: lineBehindBars ? -1 : 100000, // backgroundColor: 'wheat', }}> @@ -1471,7 +1473,7 @@ export const BarChart = (props: PropTypes) => { height: containerHeight + 10, bottom: 60, //stepHeight * -0.5 + xAxisThickness, width: totalWidth, - zIndex: -1, + zIndex: lineBehindBars ? -1 : 100000, // backgroundColor: 'rgba(200,150,150,0.1)' }}> diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx index fb46c05..eae4434 100644 --- a/src/PieChart/index.tsx +++ b/src/PieChart/index.tsx @@ -45,6 +45,7 @@ type propTypes = { toggleFocusOnPress?: Boolean; selectedIndex?: number; setSelectedIndex?: Function; + sectionAutoFocus?: boolean; onLabelPress?: Function; extraRadiusForFocused?: number; }; @@ -69,13 +70,16 @@ type itemType = { onLabelPress?: Function; strokeWidth?: number; strokeColor?: string; + focused?: boolean; }; export const PieChart = (props: propTypes) => { const radius = props.radius || 120; const extraRadiusForFocused = props.extraRadiusForFocused || radius / 10; const pi = props.semiCircle ? Math.PI / 2 : Math.PI; - const [selectedIndex, setSelectedIndex] = useState(-1); + const [selectedIndex, setSelectedIndex] = useState( + props.data.findIndex(item => item.focused === true), + ); let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0); let total = 0; props.data.forEach(item => { @@ -96,7 +100,7 @@ export const PieChart = (props: propTypes) => { }}> {!( props.data.length <= 1 || - !props.focusOnPress || + !(props.focusOnPress || props.sectionAutoFocus) || selectedIndex === -1 ) && (