From 6bd19c402f2f07cc8815a3b2471fb049471cda5e Mon Sep 17 00:00:00 2001 From: Abhinandan Kushwaha Date: Tue, 3 Aug 2021 17:54:08 +0530 Subject: [PATCH] Added props documentation --- docs/BarChart/BarChartProps.md | 48 +++++++++---- docs/LineChart/LineChartProps.md | 115 +++++++++++++++++++++++++++++++ src/LineChart/index.tsx | 21 ++---- 3 files changed, 156 insertions(+), 28 deletions(-) diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md index 8212839..4ea202c 100644 --- a/docs/BarChart/BarChartProps.md +++ b/docs/BarChart/BarChartProps.md @@ -2,18 +2,19 @@ ### Basic props -| Prop | Type | Description | Default value | -| --------------- | -------------- | ------------------------------------------------------------------------------------------------- | ------------------- | -| data | Array of items | An item object represents a bar in the bar chart. The item object is described in the next table. | \_ | -| width | number | Width of the Bar chart | width of the parent | -| height | number | Height of the Bar chart (excluding the bottom label) | 200 | -| noOfSections | number | Number of sections in the Y axis | 10 | -| maxValue | number | Maximum value shown in the Y axis | 200 | -| stepHeight | number | Height of 1 step/section in the Y axis | 20 | -| stepValue | number | Value of 1 step/section in the Y axis | 20 | -| spacing | number | Distance between 2 consecutive bars in the Bar chart | 20 | -| backgroundColor | ColorValue | Background color of the Bar chart | \_ | -| disableScroll | Boolean | To disable horizontal scroll | false | +| Prop | Type | Description | Default value | +| ------------------- | -------------- | ------------------------------------------------------------------------------------ | ------------------- | +| data | Array of items | An item object represents a bar in the bar chart. It is described in the next table. | \_ | +| width | number | Width of the Bar chart | width of the parent | +| height | number | Height of the Bar chart (excluding the bottom label) | 200 | +| noOfSections | number | Number of sections in the Y axis | 10 | +| maxValue | number | Maximum value shown in the Y axis | 200 | +| stepHeight | number | Height of 1 step/section in the Y axis | 20 | +| stepValue | number | Value of 1 step/section in the Y axis | 20 | +| spacing | number | Distance between 2 consecutive bars in the Bar chart | 20 | +| backgroundColor | ColorValue | Background color of the Bar chart | \_ | +| disableScroll | Boolean | To disable horizontal scroll | false | +| showScrollIndicator | Boolean | To show horizontal scroll indicator | false | ### Item description @@ -21,7 +22,7 @@ | ---------------------- | ---------- | ------------------------------------------------------------------------------ | | value | number | Value of the item representing height of the bar | | barWidth | number | Width of the bar | -| onPress | function | Function called on click of the bar | +| onPress | function | Function called on pressing the bar | | disablePress | Boolean | Prop to disable the press action, defaults to false | | frontColor | ColorValue | Color of the bar | | sideColor | ColorValue | Color of the side view of the bar, only for 3 D | @@ -67,18 +68,31 @@ | 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 | +| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false | ### Bar related props | Prop | Type | Description | Default value | | ------------- | ---------- | -------------------------------------------------------------------------- | ------------------------ | | barWidth | number | Width of the bar | 30 | +| isThreeD | Boolean | Prop to render 3 dimensional bars | false | | frontColor | ColorValue | Color of the bar | black for 2D, red for 3D | | sideColor | ColorValue | Color of the side view of the bar, only for 3 D | red | | topColor | ColorValue | Color of the top view of the bar, only for 3 D | red | | showGradient | Boolean | Prop to enable linear gradient for the bar color | false | | gradientColor | ColorValue | Along with frontColor, gradientColor constitutes the 2 colors for gradient | white | +| roundedTop | Boolean | To show rounded top | white | +| roundedBottom | Boolean | To show rounded bottom | white | | activeOpacity | number | activeOpacity on pressing the bar | 0.2 | +| disablePress | Boolean | Prop to disable the bar press action | false | + +#### 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 | #### Bar related props for making Capped Bar chart @@ -88,3 +102,11 @@ | capThickness | number | Thickness of the bar caps | 6 | | capColor | ColorValue | Color of the bar caps | gray | | capRadius | number | Border radius of the bar caps | 0 | + +#### Props for horizontal BarChart + +| Prop | Type | Description | Default value | +| -------------- | ------- | --------------------------------------------------------------------------------------------- | ------------- | +| horizontal | Boolean | Render horizontal BarChart | false | +| yAxisAtTop | Boolean | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | false | +| intactTopLabel | Boolean | To rotate the top label component to make it intact with the Bars | false | diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index e69de29..93edb1d 100644 --- a/docs/LineChart/LineChartProps.md +++ b/docs/LineChart/LineChartProps.md @@ -0,0 +1,115 @@ +# Line Chart props + +### Basic props + +| Prop | Type | Description | Default value | +| ------------------- | -------------- | --------------------------------------------------------------------------------------- | ------------------- | +| data | Array of items | An item object represents a point in the line chart. It is described in the next table. | \_ | +| data2 | Array of items | Second set of dataPoint for the second line | \_ | +| width | number | Width of the Bar chart | width of the parent | +| height | number | Height of the Bar chart (excluding the bottom label) | 200 | +| noOfSections | number | Number of sections in the Y axis | 10 | +| maxValue | number | Maximum value shown in the Y axis | 200 | +| stepHeight | number | Height of 1 step/section in the Y axis | 20 | +| stepValue | number | Value of 1 step/section in the Y axis | 20 | +| spacing | number | Distance between 2 consecutive bars in the Bar chart | 20 | +| backgroundColor | ColorValue | Background color of the Bar chart | \_ | +| disableScroll | Boolean | To disable horizontal scroll | false | +| showScrollIndicator | Boolean | To show horizontal scroll indicator | false | + +### Item description + +| Key | Value type | Description | +| -------------- | ---------- | ---------------------------------------------------------- | +| value | number | Value of the item representing representing its position | +| label | string | Label text appearing under the X axis | +| labelTextStyle | object | Style object for the label text appearing under the X axis | +| dataPointText | string | Text appearing near the data points | +| textShiftX | number | To shift the dataPointText text horizontally | +| textShiftY | number | To shift the dataPointText text vertically | +| textColor | ColorValue | Color of the dataPointText | +| textFontSize | number | Font size of the dataPointText | + +### 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 | +| 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 | +| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false | + +### Line related props + +| Prop | Type | Description | Default value | +| ---------- | ---------- | ------------------------------------------------------------ | ---------------------- | +| color | ColorValue | Color of the lines joining the data points | black | +| color1 | ColorValue | Color of the lines joining the first set of data points | color (from props) | +| color2 | ColorValue | Color of the lines joining the second set of data points | color (from props) | +| thickness | number | Thickness of the lines joining the data points | 2 | +| thickness1 | number | Thickness of the lines joining the first set of data points | thickness (from props) | +| thickness2 | number | Thickness of the lines joining the second set of data points | thickness (from props) | +| curved | Boolean | To show curved line joining the data points | false | + +### Data points related props + +| Prop | Type | Description | Default value | +| ----------------- | ---------- | ------------------------------------------------------------------------------------- | ------------- | +| hideDataPoints | Boolean | To hide data points | false | +| dataPointsHeight | number | Height of data points (when data points' shape is rectangular) | 2 | +| dataPointsWidth | number | Width of data points (when data points' shape is rectangular) | 2 | +| dataPointsRadius | number | Radius of data points (when data points' shape is circular) | 3 | +| dataPointsColor | ColorValue | Color of the data points | black | +| dataPointsShape | string | Shape of the data points (_'rectangular'_ or _'circular'_) | 'circular' | +| hideDataPoints1 | Boolean | To hide data points for the first set of data | false | +| dataPointsHeight1 | number | Height of data points for the first dataset (when data points' shape is rectangular) | 2 | +| dataPointsWidth1 | number | Width of data points for the first dataset (when data points' shape is rectangular) | 2 | +| dataPointsRadius1 | number | Radius of data points for the first dataset (when data points' shape is circular) | 3 | +| dataPointsColor1 | ColorValue | Color of data points for the first dataset | black | +| dataPointsShape1 | string | Shape of data points for the first dataset | 'circular' | +| hideDataPoints2 | Boolean | To hide data points for the second set of data | false | +| dataPointsHeight2 | number | Height of data points for the second dataset (when data points' shape is rectangular) | 2 | +| dataPointsWidth2 | number | Width of data points for the second dataset (when data points' shape is rectangular) | 2 | +| dataPointsRadius2 | number | Radius of data points for the second dataset (when data points' shape is circular) | 3 | +| dataPointsColor2 | ColorValue | Color of data points for the second dataset | blue | +| dataPointsShape2 | string | Shape of data points for the second dataset (_'rectangular'_ or _'circular'_) | 'circular' | + +### Props for Area Chart + +| Prop | Type | Description | Default value | +| ----------------- | ---------- | -------------------------------------------------------------- | ------------- | +| areaChart | Boolean | If set true, renders area chart instead of line chart | false | +| startFillColor | ColorValue | Start gradient color for the area chart | gray | +| endFillColor | ColorValue | End gradient color for the area chart | white | +| startOpacity | number | Start gradient opacity for the area chart | 1 | +| endOpacity | number | End gradient opacity for the area chart | 1 | +| startFillColor1 | ColorValue | Start gradient color for the first dataset of the area chart | gray | +| endFillColor1 | ColorValue | End gradient color for the first dataset of the area chart | white | +| startOpacity1 | number | Start gradient opacity for the first dataset of the area chart | 1 | +| endOpacity1 | number | End gradient opacity for the first dataset of the area chart | 1 | +| startFillColor2 | ColorValue | Start gradient color for the second dataset of the area chart | gray | +| endFillColor2 | ColorValue | End gradient color for the second dataset of the area chart | white | +| startOpacity2 | number | Start gradient color for the second dataset of the area chart | 1 | +| endOpacity2 | number | End gradient opacity for the second dataset of the area chart | 1 | +| gradientDirection | string | Direction of the gradient (_'horizontal'_ or _'vertical'_) | 'vertical' | diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 09f970c..b16837d 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -26,7 +26,7 @@ type propTypes = { stepValue?: number; spacing?: number; initialSpacing?: number; - data?: any; + data?: Array; data2?: any; thickness?: number; thickness1?: number; @@ -120,18 +120,9 @@ type propTypes = { }; type itemType = { value?: number; - onPress?: any; - frontColor?: ColorValue; - sideColor?: ColorValue; - topColor?: ColorValue; - showGradient?: Boolean; - gradientColor?: any; label: String; labelTextStyle?: any; - topLabelComponent?: Function; - topLabelContainerStyle?: any; - disablePress?: any; - text?: string; + dataPointText?: string; textShiftX?: number; textShiftY?: number; textColor?: string; @@ -675,7 +666,7 @@ export const LineChart = (props: propTypes) => { height={dataPointsHeight} fill={dataPointsColor} /> - {item.text && ( + {item.dataPointText && ( { (item.value * containerHeight) / maxValue + (item.textShiftY || 0) }> - {item.text} + {item.dataPointText} )} @@ -708,7 +699,7 @@ export const LineChart = (props: propTypes) => { r={dataPointsRadius} fill={dataPointsColor} /> - {item.text && ( + {item.dataPointText && ( { (item.value * containerHeight) / maxValue + (item.textShiftY || 0) }> - {item.text} + {item.dataPointText} )}