Re-engineering the core abstract-chart code.

README.md

@@ -89,7 +89,17 @@ const chartConfig = {
   color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
   strokeWidth: 2, // optional, default 3
   barPercentage: 0.5,
-  useShadowColorFromDataset: false // optional
+  useShadowColorFromDataset: false, // optional
+  gutterTop: 10, // optional, default dynamic size: 10% * innerHeight after paddingTop and paddingBottom
+  horizontalLabelWidth: 30, // optional, default dynamic size：20% * innerHeight after paddingTop and paddingBottom
+  verticalLabelHeight: 30, // optional, default dynamic size: 15% * innerWidth after paddingLeft and paddingRight
+  chartStyle: { //optional
+    borderRadius: 10, //default 0
+    paddingTop: 10, //default 0
+    paddingBottom: 10,
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
 };
 ```
 
@@ -108,6 +118,9 @@ const chartConfig = {
 | barRadius                     | Number             | Defines the radius of each bar                                                                         |
 | propsForBackgroundLines       | props              | Override styles of the background lines, refer to react-native-svg's Line documentation                |
 | propsForLabels                | props              | Override styles of the labels, refer to react-native-svg's Text documentation                          |
+| gutterTop                     | number             | Define the gap between highest coordinate and padding                           |
+| horizontalLabelWidth          | number             | Define the width of horizontal labels                          |
+| verticalLabelHeight           | number             | Define the height of vertical labels                         |
 
 ## Responsive charts
 
@@ -415,14 +428,23 @@ const commitsData = [
   chartConfig={chartConfig}
 />
 ```
+Extra chartStyle for heatmap
+```js
+const chartConfig = {
+  chartStyle: {
+    justifyContent: 'start' || 'center' || 'end', //optional, defualt is 'start';
+    alignItems: 'start' || 'center' || 'end', //optional,  default is 'start';
+  },
+};
+```
 
 | Property           | Type     | Description                                                                                 |
 | ------------------ | -------- | ------------------------------------------------------------------------------------------- |
 | data               | Object   | Data for the chart - see example above                                                      |
 | width              | Number   | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |
 | height             | Number   | Height of the chart                                                                         |
 | gutterSize         | Number   | Size of the gutters between the squares in the chart                                        |
-| squareSize         | Number   | Size of the squares in the chart                                                            |
+| squareSize         | Number   | Optional, Size of the squares in the chart, dynamic size will be auto applied if prop is not provided                                                           |
 | horizontal         | boolean  | Should graph be laid out horizontally? Defaults to `true`                                   |
 | showMonthLabels    | boolean  | Should graph include labels for the months? Defaults to `true`                              |
 | showOutOfRangeDays | boolean  | Should graph be filled with squares, including days outside the range? Defaults to `false`  |

index.d.ts

@@ -68,6 +68,8 @@ export interface LineChartProps {
    * Show inner dashed lines - default: True.
    */
 
+  defMax?: number;
+  defMin?: number;
   withScrollableDot?: boolean;
   withInnerLines?: boolean;
   /**
@@ -230,20 +232,26 @@ export interface BarChartProps {
   data: ChartData;
   width: number;
   height: number;
-  fromZero?: boolean;
+  defMax?: number;
+  defMin?: number;
   withInnerLines?: boolean;
   yAxisLabel: string;
   yAxisSuffix: string;
   chartConfig: ChartConfig;
   style?: ViewStyle;
   horizontalLabelRotation?: number;
   verticalLabelRotation?: number;
+  hideLabelsAtIndex?: (number | null)[];
+  barWidth?: number;
+  decorator?: ({}:any) => JSX.Element;
   /**
    * The number of horizontal lines
    */
   segments?: number;
   showBarTops?: boolean;
   showValuesOnTopOfBars?: boolean;
+  withHorizontalLabels?: boolean;
+  withVerticalLabels?: boolean;
 }
 
 export class BarChart extends React.Component<BarChartProps> {}
@@ -306,6 +314,7 @@ export class PieChart extends React.Component<PieChartProps> {}
 
 // ContributionGraph
 export interface ContributionGraphProps {
+  style?: ViewStyle;
   values: Array<any>;
   endDate: Date;
   numDays: number;
@@ -320,6 +329,9 @@ export interface ContributionGraphProps {
   accessor?: string;
   getMonthLabel?: (monthIndex: number) => string;
   onDayPress?: ({ count: number, date: Date }) => void;
+  toggleTooltip?: boolean;
+  tooltipContent?: (dateInfo: { date: string, [accessor: string]: string},
+    args: {x:number, y:number, index:number}) => JSX.Element;
 }
 
 export class ContributionGraph extends React.Component<