Skip to content

Commit

Permalink
Add fillShadowGradientTo option (#513)
Browse files Browse the repository at this point in the history 
* feat(line-chart): add fillShadowGradient To and From

* feat(line-chart): set fillShadowGradientToOpacity

* feat(line-chart): maintain backwards compatibility

* feat(readme): update chart style object docs

* feat(abstract): update option comments

* feat(abstract): add offset options

* feat(readme): update documentation

* feat(readme): update documentation

* feat(package): specify dependency resolutions

* feat(abstract-chart): fix backwards compatibility

Co-authored-by: Ezra Burga <ezra.burga@deepwatch.com>
  • Loading branch information
@ezrafree @ezradw
ezrafree and ezradw committed Feb 8, 2022
1 parent a37be65 commit f30a37d
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 34 deletions.
38 changes: 21 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,23 +93,27 @@ const chartConfig = {
};
```

| Property | Type | Description |
| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------ |
| backgroundGradientFrom | string | Defines the first color in the linear gradient of a chart's background |
| backgroundGradientFromOpacity | Number | Defines the first color opacity in the linear gradient of a chart's background |
| backgroundGradientTo | string | Defines the second color in the linear gradient of a chart's background |
| backgroundGradientToOpacity | Number | Defines the second color opacity in the linear gradient of a chart's background |
| fillShadowGradient | string | Defines the color of the area under data |
| fillShadowGradientOpacity | Number | Defines the initial opacity of the area under data |
| useShadowColorFromDataset | Boolean | Defines the option to use color from dataset to each chart data. Default is false |
| color | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart |
| strokeWidth | Number | Defines the base stroke width in a chart |
| barPercentage | Number | Defines the percent (0-1) of the available width each bar width in a chart |
| 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 |
| propsForVerticalLabels | props | Override styles of vertical labels, refer to react-native-svg's Text documentation |
| propsForHorizontalLabels | props | Override styles of horizontal labels, refer to react-native-svg's Text documentation |
| Property | Type | Description |
| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| backgroundGradientFrom | string | Defines the first color in the linear gradient of a chart's background |
| backgroundGradientFromOpacity | Number | Defines the first color opacity in the linear gradient of a chart's background |
| backgroundGradientTo | string | Defines the second color in the linear gradient of a chart's background |
| backgroundGradientToOpacity | Number | Defines the second color opacity in the linear gradient of a chart's background |
| fillShadowGradientFrom | string | Defines the first color in the linear gradient of the area under data (can also be specified as `fillShadowGradient`) |
| fillShadowGradientFromOpacity | Number | Defines the first color opacity in the linear gradient of the area under data (can also be specified as `fillShadowGradientOpacity`) |
| fillShadowGradientFromOffset | Number | Defines the first color offset (0-1) in the linear gradient of the area under data |
| fillShadowGradientTo | string | Defines the second color in the linear gradient of the area under data |
| fillShadowGradientToOpacity | Number | Defines the second color opacity in the linear gradient of the area under data |
| fillShadowGradientToOffset | Number | Defines the second color offset (0-1) in the linear gradient of the area under data |
| useShadowColorFromDataset | Boolean | Defines the option to use color from dataset to each chart data. Default is false |
| color | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart |
| strokeWidth | Number | Defines the base stroke width in a chart |
| barPercentage | Number | Defines the percent (0-1) of the available width each bar width in a chart |
| 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 |
| propsForVerticalLabels | props | Override styles of vertical labels, refer to react-native-svg's Text documentation |
| propsForHorizontalLabels | props | Override styles of horizontal labels, refer to react-native-svg's Text documentation |

## Responsive charts

Expand Down
5 changes: 4 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,5 +66,8 @@
"repository": {
"type": "git",
"url": "https://github.com/indiespirit/react-native-chart-kit"
},
"resolutions": {
"@types/react": "16.14.8"
}
}
}
76 changes: 63 additions & 13 deletions src/AbstractChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,12 @@ class AbstractChart<
| "backgroundGradientToOpacity"
| "fillShadowGradient"
| "fillShadowGradientOpacity"
| "fillShadowGradientFrom"
| "fillShadowGradientFromOpacity"
| "fillShadowGradientFromOffset"
| "fillShadowGradientTo"
| "fillShadowGradientToOpacity"
| "fillShadowGradientToOffset"
>,
| "width"
| "height"
Expand All @@ -392,6 +398,12 @@ class AbstractChart<
| "backgroundGradientToOpacity"
| "fillShadowGradient"
| "fillShadowGradientOpacity"
| "fillShadowGradientFrom"
| "fillShadowGradientFromOpacity"
| "fillShadowGradientFromOffset"
| "fillShadowGradientTo"
| "fillShadowGradientToOpacity"
| "fillShadowGradientToOffset"
>
) => {
const {
Expand Down Expand Up @@ -420,6 +432,40 @@ class AbstractChart<
? config.fillShadowGradientOpacity
: 0.1;

const fillShadowGradientFrom = config.hasOwnProperty(
"fillShadowGradientFrom"
)
? config.fillShadowGradientFrom
: fillShadowGradient;

const fillShadowGradientFromOpacity = config.hasOwnProperty(
"fillShadowGradientFromOpacity"
)
? config.fillShadowGradientFromOpacity
: fillShadowGradientOpacity;

const fillShadowGradientFromOffset = config.hasOwnProperty(
"fillShadowGradientFromOffset"
)
? config.fillShadowGradientFromOffset
: 0;

const fillShadowGradientTo = config.hasOwnProperty("fillShadowGradientTo")
? config.fillShadowGradientTo
: this.props.chartConfig.color(1.0);

const fillShadowGradientToOpacity = config.hasOwnProperty(
"fillShadowGradientToOpacity"
)
? config.fillShadowGradientToOpacity
: 0.1;

const fillShadowGradientToOffset = config.hasOwnProperty(
"fillShadowGradientToOffset"
)
? config.fillShadowGradientToOffset
: 1;

return (
<Defs>
<LinearGradient
Expand All @@ -444,7 +490,7 @@ class AbstractChart<
{useShadowColorFromDataset ? (
data.map((dataset, index) => (
<LinearGradient
id={`fillShadowGradient_${index}`}
id={`fillShadowGradientFrom_${index}`}
key={`${index}`}
x1={0}
y1={0}
Expand All @@ -453,38 +499,42 @@ class AbstractChart<
gradientUnits="userSpaceOnUse"
>
<Stop
offset="0"
offset={fillShadowGradientFromOffset}
stopColor={
dataset.color ? dataset.color(1.0) : fillShadowGradient
dataset.color ? dataset.color(1.0) : fillShadowGradientFrom
}
stopOpacity={fillShadowGradientOpacity}
stopOpacity={fillShadowGradientFromOpacity}
/>
<Stop
offset="1"
offset={fillShadowGradientToOffset}
stopColor={
dataset.color
? dataset.color(fillShadowGradientOpacity)
: fillShadowGradient
? dataset.color(fillShadowGradientFromOpacity)
: fillShadowGradientFrom
}
stopOpacity="0"
stopOpacity={fillShadowGradientToOpacity || 0}
/>
</LinearGradient>
))
) : (
<LinearGradient
id="fillShadowGradient"
id="fillShadowGradientFrom"
x1={0}
y1={0}
x2={0}
y2={height}
gradientUnits="userSpaceOnUse"
>
<Stop
offset="0"
stopColor={fillShadowGradient}
stopOpacity={fillShadowGradientOpacity}
offset={fillShadowGradientFromOffset}
stopColor={fillShadowGradientFrom}
stopOpacity={fillShadowGradientFromOpacity}
/>
<Stop
offset={fillShadowGradientToOffset}
stopColor={fillShadowGradientTo || fillShadowGradientFrom}
stopOpacity={fillShadowGradientToOpacity || 0}
/>
<Stop offset="1" stopColor={fillShadowGradient} stopOpacity="0" />
</LinearGradient>
)}
</Defs>
Expand Down
2 changes: 1 addition & 1 deletion src/BarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
fill={
withCustomBarColorFromData
? `url(#customColor_0_${i})`
: "url(#fillShadowGradient)"
: "url(#fillShadowGradientFrom)"
}
/>
);
Expand Down
27 changes: 27 additions & 0 deletions src/HelperTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,35 @@ export interface ChartConfig {
* Defines the second color opacity in the linear gradient of a chart's background
*/
backgroundGradientToOpacity?: number;
/**
* Defines the previous options to maintain backwards compatibility
*/
fillShadowGradient?: string;
fillShadowGradientOpacity?: number;
/**
* Defines the first color in the linear gradient of the area under data
*/
fillShadowGradientFrom?: string;
/**
* Defines the first color opacity in the linear gradient of the area under data
*/
fillShadowGradientFromOpacity?: number;
/**
* Defines the first color offset in the linear gradient of the area under data
*/
fillShadowGradientFromOffset?: number;
/**
* Defines the second color in the linear gradient of the area under data
*/
fillShadowGradientTo?: string;
/**
* Defines the second color opacity in the linear gradient of the area under data
*/
fillShadowGradientToOpacity?: number;
/**
* Defines the second color offset in the linear gradient of the area under data
*/
fillShadowGradientToOffset?: number;
/**
* Defines the option to use color from dataset to each chart data
*/
Expand Down
4 changes: 2 additions & 2 deletions src/line-chart/LineChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
(dataset.data.length - 1)},${(height / 4) * 3 +
paddingTop} ${paddingRight},${(height / 4) * 3 + paddingTop}`
}
fill={`url(#fillShadowGradient${
fill={`url(#fillShadowGradientFrom${
useColorFromDataset ? `_${index}` : ""
})`}
strokeWidth={0}
Expand Down Expand Up @@ -766,7 +766,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
<Path
key={index}
d={d}
fill={`url(#fillShadowGradient${
fill={`url(#fillShadowGradientFrom${
useColorFromDataset ? `_${index}` : ""
})`}
strokeWidth={0}
Expand Down

0 comments on commit f30a37d

Please sign in to comment.