diff --git a/App.js b/App.js index 4e0466b..7c6d09f 100644 --- a/App.js +++ b/App.js @@ -187,8 +187,37 @@ const App = () => { /> */} {toggle ? ( { capThickness={4} barWidth={35} gradientColor={'rgba(200, 100, 244,0.8)'} - frontColor={'rgba(219, 182, 249,0.2)'} + frontColor={'rgb(78, 0, 142)'} + rulesType="dashed" + rulesColor={'rgba(0,200,0,0.4)'} + rulesThickness={1} + dashWidth={12} + dashGap={2} /> ) : ( | Array of label texts to be displayed along y 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 | +| Prop | Type | Description | Default value | +| ---------------------- | ------------------- | ---------------------------------------------------------------------------------- | ---------------------- | +| xAxisColor | ColorValue | X axis color | black | +| xAxisThickness | number | X axis thickness | 1 | +| yAxisColor | ColorValue | Y axis color | black | +| yAxisThickness | number | Y axis thickness | 1 | +| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | +| yAxisTextStyle | object | Style object for the Y axis text style | \_ | +| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | +| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 | +| hideYAxisText | Boolean | To hide Y axis label text | false | +| rulesColor | ColorValue | Color of the horizontal rules | lightgray | +| rulesThickness | number | Thickness of the horizontal rules | 1 | +| hideRules | Boolean | To hide the horizontal rules | false | +| rulesType | String | solid or dotted/dashed | solid | +| dashWidth | number | width of each dash | 4 | +| dashGap | number | gap between 2 dashes | 8 | +| showReferenceLine1 | Boolean | show reference line | false | +| referenceLine1Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ | +| referenceLine1Position | number | position of reference line | containerHeight / 2 | +| showReferenceLine2 | Boolean | show second reference line | false | +| referenceLine2Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ | +| referenceLine2Position | number | position of second reference line | 3\*containerHeight / 2 | +| showReferenceLine3 | Boolean | show third reference line | false | +| referenceLine3Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ | +| referenceLine3Position | number | position of third reference line | containerHeight / 3 | +| showVerticalLines | Boolean | To show vertical lines | false | +| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | +| verticallinesThickness | number | Thickness of the vertical lines | 1 | +| verticalLinesZIndex | number | Z index of the vertical lines | -1 | +| showXAxisIndices | Boolean | To show the pointers on the X axis | false | +| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | +| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | +| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | +| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | +| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | +| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | +| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | +| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | +| yAxisLabelTexts | Array | Array of label texts to be displayed along y 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 | + +ReferenceConfigType has following properties- + +```js +type referenceConfigType = { + thickness: number, + width: number, + color: ColorValue | String | any, + type: String, + dashWidth: number, + dashGap: number, +}; +``` --- @@ -122,22 +147,18 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab --- ### Animation related props - + | Prop | Type | Description | Default value | | ----------------- | ------- | --------------------------------------------------------------------- | ------------- | | isAnimated | Boolean | To show animates BarChart. Animation occurs onLoad and on valu change | false | | animationDuration | number | Duration of the animations | 800 | | animationEasing | Easing | Easing applied to the animation | Easing.ease | - **Alert!**\ -While rendering an Animated Bar chart, y axis labels may not appear sometimes. This can be fixed using a key prop as shown - - +While rendering an Animated Bar chart, y axis labels may not appear sometimes. This can be fixed using a key prop as shown - + ```js - + ``` --- diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index d9782af..f28d951 100644 --- a/docs/LineChart/LineChartProps.md +++ b/docs/LineChart/LineChartProps.md @@ -67,36 +67,61 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to ### Axes and rules related props -| Prop | Type | Description | Default value | -| ---------------------- | ------------- | ---------------------------------------------------------------------- | ------------- | -| xAxisColor | ColorValue | X axis color | black | -| xAxisThickness | number | X axis thickness | 1 | -| yAxisColor | ColorValue | Y axis color | black | -| yAxisThickness | number | Y axis thickness | 1 | -| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | -| yAxisTextStyle | object | Style object for the Y axis text style | \_ | -| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | -| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 | -| hideYAxisText | Boolean | To hide Y axis label text | false | -| rulesColor | ColorValue | Color of the horizontal rules | lightgray | -| rulesThickness | number | Thickness of the horizontal rules | 1 | -| hideRules | Boolean | To hide the horizontal rules | false | -| showVerticalLines | Boolean | To show vertical lines | false | -| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | -| verticallinesThickness | number | Thickness of the vertical lines | 1 | -| verticalLinesZIndex | number | Z index of the vertical lines | -1 | -| showXAxisIndices | Boolean | To show the pointers on the X axis | false | -| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | -| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | -| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | -| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | -| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | -| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | -| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | -| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | -| yAxisLabelTexts | Array | Array of label texts to be displayed along y 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 | +| Prop | Type | Description | Default value | +| ---------------------- | ------------------- | ---------------------------------------------------------------------------------- | ---------------------- | +| xAxisColor | ColorValue | X axis color | black | +| xAxisThickness | number | X axis thickness | 1 | +| yAxisColor | ColorValue | Y axis color | black | +| yAxisThickness | number | Y axis thickness | 1 | +| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | +| yAxisTextStyle | object | Style object for the Y axis text style | \_ | +| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | +| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 | +| hideYAxisText | Boolean | To hide Y axis label text | false | +| rulesColor | ColorValue | Color of the horizontal rules | lightgray | +| rulesThickness | number | Thickness of the horizontal rules | 1 | +| hideRules | Boolean | To hide the horizontal rules | false | +| rulesType | String | solid or dotted/dashed | solid | +| dashWidth | number | width of each dash | 4 | +| dashGap | number | gap between 2 dashes | 8 | +| showReferenceLine1 | Boolean | show reference line | false | +| referenceLine1Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ | +| referenceLine1Position | number | position of reference line | containerHeight / 2 | +| showReferenceLine2 | Boolean | show second reference line | false | +| referenceLine2Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ | +| referenceLine2Position | number | position of second reference line | 3\*containerHeight / 2 | +| showReferenceLine3 | Boolean | show third reference line | false | +| referenceLine3Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ | +| referenceLine3Position | number | position of third reference line | containerHeight / 3 | +| showVerticalLines | Boolean | To show vertical lines | false | +| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | +| verticallinesThickness | number | Thickness of the vertical lines | 1 | +| verticalLinesZIndex | number | Z index of the vertical lines | -1 | +| showXAxisIndices | Boolean | To show the pointers on the X axis | false | +| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | +| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | +| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | +| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | +| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | +| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | +| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | +| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | +| yAxisLabelTexts | Array | Array of label texts to be displayed along y 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 | + +ReferenceConfigType has following properties- + +```js +type referenceConfigType = { + thickness: number, + width: number, + color: ColorValue | String | any, + type: String, + dashWidth: number, + dashGap: number, +}; +``` --- @@ -142,7 +167,7 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to | dataPointsHeight3 | number | Height of data points for the third dataset (when data points' shape is rectangular) | 2 | | dataPointsWidth3 | number | Width of data points for the third dataset (when data points' shape is rectangular) | 2 | | dataPointsRadius3 | number | Radius of data points for the third dataset (when data points' shape is circular) | 3 | -| dataPointsColor3 | ColorValue | Color of data points for the third dataset | red | +| dataPointsColor3 | ColorValue | Color of data points for the third dataset | red | | dataPointsShape3 | string | Shape of data points for the third dataset (_'rectangular'_ or _'circular'_) | 'circular' | | textColor | ColorValue | Color of the dataPointText | 'black' | | textFontSize | number | Font size of the dataPointText | \_ | diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index d8fe841..ee9a09b 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -3,6 +3,7 @@ import {View, FlatList, Animated, Easing, Text, ColorValue} from 'react-native'; import {styles} from './styles'; import RenderBars from './RenderBars'; import RenderStackBars from './RenderStackBars'; +import Rule from '../Components/lineSvg'; type PropTypes = { width?: number; @@ -41,6 +42,18 @@ type PropTypes = { hideRules?: Boolean; rulesColor?: ColorValue; rulesThickness?: number; + rulesType?: String; + dashWidth?: number; + dashGap?: number; + showReferenceLine1?: Boolean; + referenceLine1Config?: referenceConfigType; + referenceLine1Position?: number; + showReferenceLine2?: Boolean; + referenceLine2Config?: referenceConfigType; + referenceLine2Position?: number; + showReferenceLine3?: Boolean; + referenceLine3Config?: referenceConfigType; + referenceLine3Position?: number; showVerticalLines?: Boolean; verticalLinesThickness?: number; verticalLinesColor?: ColorValue; @@ -83,6 +96,14 @@ type PropTypes = { labelWidth?: number; yAxisLabelTexts?: Array; }; +type referenceConfigType = { + thickness: number; + width: number; + color: ColorValue | String | any; + type: String; + dashWidth: number; + dashGap: number; +}; type sectionType = { value: string; }; @@ -209,6 +230,78 @@ export const BarChart = (props: PropTypes) => { const intactTopLabel = props.intactTopLabel || false; const hideOrigin = props.hideOrigin || false; + const rulesType = props.rulesType || 'line'; + const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4; + const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8; + + const defaultReferenceConfig = { + thickness: rulesThickness, + width: horizontal + ? props.width || totalWidth + : (props.width || totalWidth) + 11, + color: 'black', + type: rulesType, + dashWidth: dashWidth, + dashGap: dashGap, + }; + + const showReferenceLine1 = props.showReferenceLine1 || false; + const referenceLine1Position = + props.referenceLine1Position === 0 + ? 0 + : props.referenceLine1Position || containerHeight / 2; + const referenceLine1Config = props.referenceLine1Config + ? { + thickness: props.referenceLine1Config.thickness || rulesThickness, + width: horizontal + ? props.referenceLine1Config.width || props.width || totalWidth + : (props.referenceLine1Config.width || props.width || totalWidth) + + 11, + color: props.referenceLine1Config.color || 'black', + type: props.referenceLine1Config.type || rulesType, + dashWidth: props.referenceLine1Config.dashWidth || dashWidth, + dashGap: props.referenceLine1Config.dashGap || dashGap, + } + : defaultReferenceConfig; + + const showReferenceLine2 = props.showReferenceLine2 || false; + const referenceLine2Position = + props.referenceLine2Position === 0 + ? 0 + : props.referenceLine2Position || (3 * containerHeight) / 2; + const referenceLine2Config = props.referenceLine2Config + ? { + thickness: props.referenceLine2Config.thickness || rulesThickness, + width: horizontal + ? props.referenceLine2Config.width || props.width || totalWidth + : (props.referenceLine2Config.width || props.width || totalWidth) + + 11, + color: props.referenceLine2Config.color || 'black', + type: props.referenceLine2Config.type || rulesType, + dashWidth: props.referenceLine2Config.dashWidth || dashWidth, + dashGap: props.referenceLine2Config.dashGap || dashGap, + } + : defaultReferenceConfig; + + const showReferenceLine3 = props.showReferenceLine3 || false; + const referenceLine3Position = + props.referenceLine3Position === 0 + ? 0 + : props.referenceLine3Position || containerHeight / 3; + const referenceLine3Config = props.referenceLine3Config + ? { + thickness: props.referenceLine3Config.thickness || rulesThickness, + width: horizontal + ? props.referenceLine3Config.width || props.width || totalWidth + : (props.referenceLine3Config.width || props.width || totalWidth) + + 11, + color: props.referenceLine3Config.color || 'black', + type: props.referenceLine3Config.type || rulesType, + dashWidth: props.referenceLine3Config.dashWidth || dashWidth, + dashGap: props.referenceLine3Config.dashGap || dashGap, + } + : defaultReferenceConfig; + horizSections.pop(); for (let i = 0; i <= noOfSections; i++) { let value = maxValue - stepValue * i; @@ -264,7 +357,16 @@ export const BarChart = (props: PropTypes) => { <> {horizSections.map((sectionItems, index) => { return ( - + { ]} /> ) : hideRules ? null : ( - )} + {index === 0 && showReferenceLine1 ? ( + + + + ) : null} + {index === 0 && showReferenceLine2 ? ( + + + + ) : null} + {index === 0 && showReferenceLine3 ? ( + + + + ) : null} {showYAxisIndices && index !== noOfSections ? ( { position: 'absolute', bottom: stepHeight * -0.5 - 60 + xAxisThickness, }, + props.width && {width: props.width - 11}, horizontal && {width: totalWidth}, ]} scrollEnabled={!disableScroll} - contentContainerStyle={{ - height: containerHeight + 130, - width: totalWidth, - paddingLeft: - ((data && data[0] && data[0].barWidth) || props.barWidth || 30) / 2, - alignItems: 'flex-end', - }} + contentContainerStyle={[ + { + height: containerHeight + 130, + paddingLeft: + ((data && data[0] && data[0].barWidth) || props.barWidth || 30) / + 2, + alignItems: 'flex-end', + }, + !props.width && {width: totalWidth}, + ]} showsHorizontalScrollIndicator={showScrollIndicator} horizontal data={props.stackData || data} diff --git a/src/Components/lineSvg.tsx b/src/Components/lineSvg.tsx new file mode 100644 index 0000000..61691fd --- /dev/null +++ b/src/Components/lineSvg.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {ColorValue} from 'react-native'; +import Svg, {G, Path} from 'react-native-svg'; + +type ruleProps = { + thickness: number; + width: number; + color: ColorValue | String | any; + type: String; + dashWidth: number; + dashGap: number; +}; + +type configType = { + config: ruleProps; +}; + +function Rule(props: configType) { + const {thickness, width, color, type, dashWidth, dashGap} = props.config; + if (type === 'solid') { + return ( + + + + + + ); + } + return ( + + + + + + ); +} + +export default Rule; diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 3803e43..3add6a6 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect, useState } from 'react'; +import React, {Fragment, useEffect, useState} from 'react'; import { View, ScrollView, @@ -7,7 +7,7 @@ import { Text, ColorValue, } from 'react-native'; -import { styles } from './styles'; +import {styles} from './styles'; import Svg, { Path, LinearGradient, @@ -16,7 +16,8 @@ import Svg, { Rect, Text as CanvasText, } from 'react-native-svg'; -import { svgPath, bezierCommand } from '../utils'; +import {svgPath, bezierCommand} from '../utils'; +import Rule from '../Components/lineSvg'; type propTypes = { height?: number; @@ -43,6 +44,20 @@ type propTypes = { hideRules?: Boolean; rulesColor?: ColorValue; rulesThickness?: number; + + rulesType?: String; + dashWidth?: number; + dashGap?: number; + showReferenceLine1?: Boolean; + referenceLine1Config?: referenceConfigType; + referenceLine1Position?: number; + showReferenceLine2?: Boolean; + referenceLine2Config?: referenceConfigType; + referenceLine2Position?: number; + showReferenceLine3?: Boolean; + referenceLine3Config?: referenceConfigType; + referenceLine3Position?: number; + showVerticalLines?: Boolean; verticalLinesThickness?: number; verticalLinesColor?: ColorValue; @@ -137,6 +152,15 @@ type propTypes = { textShiftX?: number; textShiftY?: number; yAxisLabelTexts?: Array; + width?: number; +}; +type referenceConfigType = { + thickness: number; + width: number; + color: ColorValue | String | any; + type: String; + dashWidth: number; + dashGap: number; }; type itemType = { value?: number; @@ -195,7 +219,7 @@ export const LineChart = (props: propTypes) => { const maxValue = props.maxValue || maxItem; - const horizSections = [{ value: '0' }]; + const horizSections = [{value: '0'}]; const stepHeight = props.stepHeight || containerHeight / noOfSections; const stepValue = props.stepValue || maxValue / noOfSections; const initialSpacing = @@ -323,6 +347,70 @@ export const LineChart = (props: propTypes) => { const showScrollIndicator = props.showScrollIndicator || false; const hideOrigin = props.hideOrigin || false; + const rulesType = props.rulesType || 'line'; + const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4; + const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8; + + const defaultReferenceConfig = { + thickness: rulesThickness, + width: (props.width || totalWidth) + 11, + color: 'black', + type: rulesType, + dashWidth: dashWidth, + dashGap: dashGap, + }; + + const showReferenceLine1 = props.showReferenceLine1 || false; + const referenceLine1Position = + props.referenceLine1Position === 0 + ? 0 + : props.referenceLine1Position || containerHeight / 2; + const referenceLine1Config = props.referenceLine1Config + ? { + thickness: props.referenceLine1Config.thickness || rulesThickness, + width: + (props.referenceLine1Config.width || props.width || totalWidth) + 11, + color: props.referenceLine1Config.color || 'black', + type: props.referenceLine1Config.type || rulesType, + dashWidth: props.referenceLine1Config.dashWidth || dashWidth, + dashGap: props.referenceLine1Config.dashGap || dashGap, + } + : defaultReferenceConfig; + + const showReferenceLine2 = props.showReferenceLine2 || false; + const referenceLine2Position = + props.referenceLine2Position === 0 + ? 0 + : props.referenceLine2Position || (3 * containerHeight) / 2; + const referenceLine2Config = props.referenceLine2Config + ? { + thickness: props.referenceLine2Config.thickness || rulesThickness, + width: + (props.referenceLine2Config.width || props.width || totalWidth) + 11, + color: props.referenceLine2Config.color || 'black', + type: props.referenceLine2Config.type || rulesType, + dashWidth: props.referenceLine2Config.dashWidth || dashWidth, + dashGap: props.referenceLine2Config.dashGap || dashGap, + } + : defaultReferenceConfig; + + const showReferenceLine3 = props.showReferenceLine3 || false; + const referenceLine3Position = + props.referenceLine3Position === 0 + ? 0 + : props.referenceLine3Position || containerHeight / 3; + const referenceLine3Config = props.referenceLine3Config + ? { + thickness: props.referenceLine3Config.thickness || rulesThickness, + width: + (props.referenceLine3Config.width || props.width || totalWidth) + 11, + color: props.referenceLine3Config.color || 'black', + type: props.referenceLine3Config.type || rulesType, + dashWidth: props.referenceLine3Config.dashWidth || dashWidth, + dashGap: props.referenceLine3Config.dashGap || dashGap, + } + : defaultReferenceConfig; + // console.log('data', data); horizSections.pop(); for (let i = 0; i <= noOfSections; i++) { @@ -333,7 +421,7 @@ export const LineChart = (props: propTypes) => { horizSections.push({ value: props.yAxisLabelTexts ? props.yAxisLabelTexts[noOfSections - i] ?? value.toString() - : value.toString(), + : value.toString(), }); } @@ -357,7 +445,8 @@ export const LineChart = (props: propTypes) => { useEffect(() => { let pp = '', - pp2 = '', pp3 = ''; + pp2 = '', + pp3 = ''; if (!props.curved) { for (let i = 0; i < data.length; i++) { pp += @@ -396,7 +485,8 @@ export const LineChart = (props: propTypes) => { /*************************** For Area Charts *************************/ if (areaChart) { let ppp = '', - ppp2 = '', ppp3 = ''; + ppp2 = '', + ppp3 = ''; ppp = 'L' + @@ -478,7 +568,8 @@ export const LineChart = (props: propTypes) => { /*************************************************************************************/ } else { let p1Array = [], - p2Array = [], p3Array = []; + p2Array = [], + p3Array = []; for (let i = 0; i < data.length; i++) { p1Array.push([ initialSpacing - dataPointsWidth1 / 2 + spacing * i, @@ -488,16 +579,16 @@ export const LineChart = (props: propTypes) => { p2Array.push([ initialSpacing - dataPointsWidth2 / 2 + spacing * i, containerHeight + - 10 - - (data2[i].value * containerHeight) / maxValue, + 10 - + (data2[i].value * containerHeight) / maxValue, ]); } if (data3.length) { p3Array.push([ initialSpacing - dataPointsWidth3 / 2 + spacing * i, containerHeight + - 10 - - (data3[i].value * containerHeight) / maxValue, + 10 - + (data3[i].value * containerHeight) / maxValue, ]); } } @@ -619,18 +710,15 @@ export const LineChart = (props: propTypes) => { bottom: 30, zIndex: 10, width: spacing, - // borderColor: 'red', - // borderWidth: 0.5, - // top: (value * containerHeight / maxValue) - 10, - left: initialSpacing + spacing * index - spacing / 2, - // opacity: appearingOpacity, - // backgroundColor: 'yellow', + left: + index === 0 && initialSpacing < 10 + ? initialSpacing + spacing * index - spacing / 2 + 8 + : initialSpacing + spacing * index - spacing / 2, justifyContent: 'center', - // alignSelf: 'center' }, - rotateLabel && { transform: [{ rotate: '60deg' }] }, + rotateLabel && {transform: [{rotate: '60deg'}]}, ]}> - + {label || ''} @@ -648,19 +736,20 @@ export const LineChart = (props: propTypes) => { style={[ { height: rotateLabel ? 40 : 20, - // width: rotateLabel ? 30 : 100, // backgroundColor: 'yellow', position: 'absolute', bottom: rotateLabel ? 10 : 30, zIndex: 10, width: spacing, - // top: (value * containerHeight / maxValue) - 10, - left: initialSpacing + spacing * index - spacing / 2, + left: + index === 0 && initialSpacing < 10 + ? initialSpacing + spacing * index - spacing / 2 + 8 + : initialSpacing + spacing * index - spacing / 2, opacity: appearingOpacity, }, - rotateLabel && { transform: [{ rotate: '60deg' }] }, + rotateLabel && {transform: [{rotate: '60deg'}]}, ]}> - + {label || ''} @@ -747,7 +836,14 @@ export const LineChart = (props: propTypes) => { {props.hideAxesAndRules !== true && horizSections.map((sectionItems, index) => { return ( - + { ? sectionItems.value ? sectionItems.value : hideOrigin - ? '' - : '0' + ? '' + : '0' : sectionItems.value - ? sectionItems.value.toString().split('.')[0] - : hideOrigin - ? '' - : '0'} + ? sectionItems.value.toString().split('.')[0] + : hideOrigin + ? '' + : '0'} ) : null} @@ -796,20 +892,63 @@ export const LineChart = (props: propTypes) => { ) : hideRules ? null : ( - )} + {index === 0 && showReferenceLine1 ? ( + + + + ) : null} + {index === 0 && showReferenceLine2 ? ( + + + + ) : null} + {index === 0 && showReferenceLine3 ? ( + + + + ) : null} {showXAxisIndices && index !== noOfSections ? ( { {!hideDataPoints1 ? renderDataPoints( - data, - dataPointsShape1, - dataPointsWidth1, - dataPointsHeight1, - dataPointsColor1, - dataPointsRadius1, - textColor1, - textFontSize1, - ) + data, + dataPointsShape1, + dataPointsWidth1, + dataPointsHeight1, + dataPointsColor1, + dataPointsRadius1, + textColor1, + textFontSize1, + ) : renderSpecificDataPoints(data)} {!hideDataPoints2 ? renderDataPoints( - data2, - dataPointsShape2, - dataPointsWidth2, - dataPointsHeight2, - dataPointsColor2, - dataPointsRadius2, - textColor2, - textFontSize2, - ) + data2, + dataPointsShape2, + dataPointsWidth2, + dataPointsHeight2, + dataPointsColor2, + dataPointsRadius2, + textColor2, + textFontSize2, + ) : renderSpecificDataPoints(data2)} {!hideDataPoints3 ? renderDataPoints( - data3, - dataPointsShape3, - dataPointsWidth3, - dataPointsHeight3, - dataPointsColor3, - dataPointsRadius3, - textColor3, - textFontSize3, - ) + data3, + dataPointsShape3, + dataPointsWidth3, + dataPointsHeight3, + dataPointsColor3, + dataPointsRadius3, + textColor3, + textFontSize3, + ) : renderSpecificDataPoints(data3)} @@ -1197,39 +1336,39 @@ export const LineChart = (props: propTypes) => { {!hideDataPoints1 ? renderDataPoints( - data, - dataPointsShape1, - dataPointsWidth1, - dataPointsHeight1, - dataPointsColor1, - dataPointsRadius1, - textColor1, - textFontSize1, - ) + data, + dataPointsShape1, + dataPointsWidth1, + dataPointsHeight1, + dataPointsColor1, + dataPointsRadius1, + textColor1, + textFontSize1, + ) : renderSpecificDataPoints(data)} {!hideDataPoints2 ? renderDataPoints( - data2, - dataPointsShape2, - dataPointsWidth2, - dataPointsHeight2, - dataPointsColor2, - dataPointsRadius2, - textColor2, - textFontSize2, - ) + data2, + dataPointsShape2, + dataPointsWidth2, + dataPointsHeight2, + dataPointsColor2, + dataPointsRadius2, + textColor2, + textFontSize2, + ) : renderSpecificDataPoints(data2)} {!hideDataPoints3 ? renderDataPoints( - data3, - dataPointsShape3, - dataPointsWidth3, - dataPointsHeight3, - dataPointsColor3, - dataPointsRadius3, - textColor3, - textFontSize3, - ) + data3, + dataPointsShape3, + dataPointsWidth3, + dataPointsHeight3, + dataPointsColor3, + dataPointsRadius3, + textColor3, + textFontSize3, + ) : renderSpecificDataPoints(data3)} @@ -1237,24 +1376,30 @@ export const LineChart = (props: propTypes) => { }; return ( - + {props.hideAxesAndRules !== true && renderHorizSections()} {/* {sectionsOverlay()} */} + style={[ + { + marginLeft: yAxisLabelWidth + yAxisThickness, + position: 'absolute', + bottom: stepHeight * -0.5 - 60, //stepHeight * -0.5 + xAxisThickness, + paddingRight: 100, + }, + props.width && {width: props.width + 10}, + ]}> {showVerticalLines && data.map((item: itemType, index: number) => { return ( @@ -1296,73 +1441,73 @@ export const LineChart = (props: propTypes) => { {isAnimated ? renderAnimatedLine( - points, - animatedWidth, - thickness1, - color1, - fillPoints, - startFillColor1, - endFillColor1, - startOpacity1, - endOpacity1, - ) + points, + animatedWidth, + thickness1, + color1, + fillPoints, + startFillColor1, + endFillColor1, + startOpacity1, + endOpacity1, + ) : renderLine( - points, - thickness1, - color1, - fillPoints, - startFillColor1, - endFillColor1, - startOpacity1, - endOpacity1, - )} + points, + thickness1, + color1, + fillPoints, + startFillColor1, + endFillColor1, + startOpacity1, + endOpacity1, + )} {points2 ? isAnimated ? renderAnimatedLine( - points2, - animatedWidth2, - thickness2, - color2, - fillPoints2, - startFillColor2, - endFillColor2, - startOpacity2, - endOpacity2, - ) + points2, + animatedWidth2, + thickness2, + color2, + fillPoints2, + startFillColor2, + endFillColor2, + startOpacity2, + endOpacity2, + ) : renderLine( - points2, - thickness2, - color2, - fillPoints2, - startFillColor2, - endFillColor2, - startOpacity2, - endOpacity2, - ) + points2, + thickness2, + color2, + fillPoints2, + startFillColor2, + endFillColor2, + startOpacity2, + endOpacity2, + ) : null} {points3 ? isAnimated ? renderAnimatedLine( - points3, - animatedWidth3, - thickness3, - color3, - fillPoints3, - startFillColor3, - endFillColor3, - startOpacity3, - endOpacity3, - ) + points3, + animatedWidth3, + thickness3, + color3, + fillPoints3, + startFillColor3, + endFillColor3, + startOpacity3, + endOpacity3, + ) : renderLine( - points3, - thickness3, - color3, - fillPoints3, - startFillColor3, - endFillColor3, - startOpacity3, - endOpacity3, - ) + points3, + thickness3, + color3, + fillPoints3, + startFillColor3, + endFillColor3, + startOpacity3, + endOpacity3, + ) : null} {data.map((item: itemType, index: number) => { // console.log('item', item)