Skip to content

Add fillShadowGradientTo option #513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hermanya merged 10 commits into from
Feb 8, 2022
Merged

Add fillShadowGradientTo option #513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
53a72d8
feat(line-chart): add fillShadowGradient To and From
ezradw May 27, 2021
c4bc44f
feat(line-chart): set fillShadowGradientToOpacity
ezradw May 27, 2021
03ecddb
feat(line-chart): maintain backwards compatibility
ezradw May 28, 2021
50cb0eb
feat(readme): update chart style object docs
ezradw May 28, 2021
495dfd9
feat(abstract): update option comments
ezradw May 28, 2021
af2e24b
feat(abstract): add offset options
ezradw May 28, 2021
c92c6de
feat(readme): update documentation
ezradw May 28, 2021
aefb196
feat(readme): update documentation
ezradw May 28, 2021
83b0eb3
feat(package): specify dependency resolutions
ezradw May 28, 2021
80a4740
feat(abstract-chart): fix backwards compatibility
ezradw May 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 21 additions & 17 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,12 @@ class AbstractChart<
| "backgroundGradientToOpacity"
| "fillShadowGradient"
| "fillShadowGradientOpacity"
| "fillShadowGradientFrom"
| "fillShadowGradientFromOpacity"
| "fillShadowGradientFromOffset"
| "fillShadowGradientTo"
| "fillShadowGradientToOpacity"
| "fillShadowGradientToOffset"
>,
| "width"
| "height"
Expand All @@ -389,6 +395,12 @@ class AbstractChart<
| "backgroundGradientToOpacity"
| "fillShadowGradient"
| "fillShadowGradientOpacity"
| "fillShadowGradientFrom"
| "fillShadowGradientFromOpacity"
| "fillShadowGradientFromOffset"
| "fillShadowGradientTo"
| "fillShadowGradientToOpacity"
| "fillShadowGradientToOffset"
>
) => {
const {
Expand Down Expand Up @@ -417,6 +429,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 @@ -441,7 +487,7 @@ class AbstractChart<
{useShadowColorFromDataset ? (
data.map((dataset, index) => (
<LinearGradient
id={`fillShadowGradient_${index}`}
id={`fillShadowGradientFrom_${index}`}
key={`${index}`}
x1={0}
y1={0}
Expand All @@ -450,38 +496,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -584,7 +584,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 @@ -761,7 +761,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
<Path
key={index}
d={d}
fill={`url(#fillShadowGradient${
fill={`url(#fillShadowGradientFrom${
useColorFromDataset ? `_${index}` : ""
})`}
strokeWidth={0}
Expand Down