Skip to content

Commit f30a37d

Browse files
ezrafreeezradw
ezrafree
and
ezradw
authored
Add fillShadowGradientTo option (#513)
* 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 <[email protected]>
1 parent a37be65 commit f30a37d

File tree

6 files changed

+118
-34
lines changed

6 files changed

+118
-34
lines changed

‎README.md‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -93,23 +93,27 @@ const chartConfig = {
9393
};
9494
```
9595

96-
| Property | Type | Description |
97-
| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------ |
98-
| backgroundGradientFrom | string | Defines the first color in the linear gradient of a chart's background |
99-
| backgroundGradientFromOpacity | Number | Defines the first color opacity in the linear gradient of a chart's background |
100-
| backgroundGradientTo | string | Defines the second color in the linear gradient of a chart's background |
101-
| backgroundGradientToOpacity | Number | Defines the second color opacity in the linear gradient of a chart's background |
102-
| fillShadowGradient | string | Defines the color of the area under data |
103-
| fillShadowGradientOpacity | Number | Defines the initial opacity of the area under data |
104-
| useShadowColorFromDataset | Boolean | Defines the option to use color from dataset to each chart data. Default is false |
105-
| color | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart |
106-
| strokeWidth | Number | Defines the base stroke width in a chart |
107-
| barPercentage | Number | Defines the percent (0-1) of the available width each bar width in a chart |
108-
| barRadius | Number | Defines the radius of each bar |
109-
| propsForBackgroundLines | props | Override styles of the background lines, refer to react-native-svg's Line documentation |
110-
| propsForLabels | props | Override styles of the labels, refer to react-native-svg's Text documentation |
111-
| propsForVerticalLabels | props | Override styles of vertical labels, refer to react-native-svg's Text documentation |
112-
| propsForHorizontalLabels | props | Override styles of horizontal labels, refer to react-native-svg's Text documentation |
96+
| Property | Type | Description |
97+
| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
98+
| backgroundGradientFrom | string | Defines the first color in the linear gradient of a chart's background |
99+
| backgroundGradientFromOpacity | Number | Defines the first color opacity in the linear gradient of a chart's background |
100+
| backgroundGradientTo | string | Defines the second color in the linear gradient of a chart's background |
101+
| backgroundGradientToOpacity | Number | Defines the second color opacity in the linear gradient of a chart's background |
102+
| fillShadowGradientFrom | string | Defines the first color in the linear gradient of the area under data (can also be specified as `fillShadowGradient`) |
103+
| fillShadowGradientFromOpacity | Number | Defines the first color opacity in the linear gradient of the area under data (can also be specified as `fillShadowGradientOpacity`) |
104+
| fillShadowGradientFromOffset | Number | Defines the first color offset (0-1) in the linear gradient of the area under data |
105+
| fillShadowGradientTo | string | Defines the second color in the linear gradient of the area under data |
106+
| fillShadowGradientToOpacity | Number | Defines the second color opacity in the linear gradient of the area under data |
107+
| fillShadowGradientToOffset | Number | Defines the second color offset (0-1) in the linear gradient of the area under data |
108+
| useShadowColorFromDataset | Boolean | Defines the option to use color from dataset to each chart data. Default is false |
109+
| color | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart |
110+
| strokeWidth | Number | Defines the base stroke width in a chart |
111+
| barPercentage | Number | Defines the percent (0-1) of the available width each bar width in a chart |
112+
| barRadius | Number | Defines the radius of each bar |
113+
| propsForBackgroundLines | props | Override styles of the background lines, refer to react-native-svg's Line documentation |
114+
| propsForLabels | props | Override styles of the labels, refer to react-native-svg's Text documentation |
115+
| propsForVerticalLabels | props | Override styles of vertical labels, refer to react-native-svg's Text documentation |
116+
| propsForHorizontalLabels | props | Override styles of horizontal labels, refer to react-native-svg's Text documentation |
113117

114118
## Responsive charts
115119

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,5 +66,8 @@
6666
"repository": {
6767
"type": "git",
6868
"url": "https://github.com/indiespirit/react-native-chart-kit"
69+
},
70+
"resolutions": {
71+
"@types/react": "16.14.8"
6972
}
70-
}
73+
}

‎src/AbstractChart.tsx‎

Lines changed: 63 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -381,6 +381,12 @@ class AbstractChart<
381381
| "backgroundGradientToOpacity"
382382
| "fillShadowGradient"
383383
| "fillShadowGradientOpacity"
384+
| "fillShadowGradientFrom"
385+
| "fillShadowGradientFromOpacity"
386+
| "fillShadowGradientFromOffset"
387+
| "fillShadowGradientTo"
388+
| "fillShadowGradientToOpacity"
389+
| "fillShadowGradientToOffset"
384390
>,
385391
| "width"
386392
| "height"
@@ -392,6 +398,12 @@ class AbstractChart<
392398
| "backgroundGradientToOpacity"
393399
| "fillShadowGradient"
394400
| "fillShadowGradientOpacity"
401+
| "fillShadowGradientFrom"
402+
| "fillShadowGradientFromOpacity"
403+
| "fillShadowGradientFromOffset"
404+
| "fillShadowGradientTo"
405+
| "fillShadowGradientToOpacity"
406+
| "fillShadowGradientToOffset"
395407
>
396408
) => {
397409
const {
@@ -420,6 +432,40 @@ class AbstractChart<
420432
? config.fillShadowGradientOpacity
421433
: 0.1;
422434

435+
const fillShadowGradientFrom = config.hasOwnProperty(
436+
"fillShadowGradientFrom"
437+
)
438+
? config.fillShadowGradientFrom
439+
: fillShadowGradient;
440+
441+
const fillShadowGradientFromOpacity = config.hasOwnProperty(
442+
"fillShadowGradientFromOpacity"
443+
)
444+
? config.fillShadowGradientFromOpacity
445+
: fillShadowGradientOpacity;
446+
447+
const fillShadowGradientFromOffset = config.hasOwnProperty(
448+
"fillShadowGradientFromOffset"
449+
)
450+
? config.fillShadowGradientFromOffset
451+
: 0;
452+
453+
const fillShadowGradientTo = config.hasOwnProperty("fillShadowGradientTo")
454+
? config.fillShadowGradientTo
455+
: this.props.chartConfig.color(1.0);
456+
457+
const fillShadowGradientToOpacity = config.hasOwnProperty(
458+
"fillShadowGradientToOpacity"
459+
)
460+
? config.fillShadowGradientToOpacity
461+
: 0.1;
462+
463+
const fillShadowGradientToOffset = config.hasOwnProperty(
464+
"fillShadowGradientToOffset"
465+
)
466+
? config.fillShadowGradientToOffset
467+
: 1;
468+
423469
return (
424470
<Defs>
425471
<LinearGradient
@@ -444,7 +490,7 @@ class AbstractChart<
444490
{useShadowColorFromDataset ? (
445491
data.map((dataset, index) => (
446492
<LinearGradient
447-
id={`fillShadowGradient_${index}`}
493+
id={`fillShadowGradientFrom_${index}`}
448494
key={`${index}`}
449495
x1={0}
450496
y1={0}
@@ -453,38 +499,42 @@ class AbstractChart<
453499
gradientUnits="userSpaceOnUse"
454500
>
455501
<Stop
456-
offset="0"
502+
offset={fillShadowGradientFromOffset}
457503
stopColor={
458-
dataset.color ? dataset.color(1.0) : fillShadowGradient
504+
dataset.color ? dataset.color(1.0) : fillShadowGradientFrom
459505
}
460-
stopOpacity={fillShadowGradientOpacity}
506+
stopOpacity={fillShadowGradientFromOpacity}
461507
/>
462508
<Stop
463-
offset="1"
509+
offset={fillShadowGradientToOffset}
464510
stopColor={
465511
dataset.color
466-
? dataset.color(fillShadowGradientOpacity)
467-
: fillShadowGradient
512+
? dataset.color(fillShadowGradientFromOpacity)
513+
: fillShadowGradientFrom
468514
}
469-
stopOpacity="0"
515+
stopOpacity={fillShadowGradientToOpacity || 0}
470516
/>
471517
</LinearGradient>
472518
))
473519
) : (
474520
<LinearGradient
475-
id="fillShadowGradient"
521+
id="fillShadowGradientFrom"
476522
x1={0}
477523
y1={0}
478524
x2={0}
479525
y2={height}
480526
gradientUnits="userSpaceOnUse"
481527
>
482528
<Stop
483-
offset="0"
484-
stopColor={fillShadowGradient}
485-
stopOpacity={fillShadowGradientOpacity}
529+
offset={fillShadowGradientFromOffset}
530+
stopColor={fillShadowGradientFrom}
531+
stopOpacity={fillShadowGradientFromOpacity}
532+
/>
533+
<Stop
534+
offset={fillShadowGradientToOffset}
535+
stopColor={fillShadowGradientTo || fillShadowGradientFrom}
536+
stopOpacity={fillShadowGradientToOpacity || 0}
486537
/>
487-
<Stop offset="1" stopColor={fillShadowGradient} stopOpacity="0" />
488538
</LinearGradient>
489539
)}
490540
</Defs>

‎src/BarChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
9595
fill={
9696
withCustomBarColorFromData
9797
? `url(#customColor_0_${i})`
98-
: "url(#fillShadowGradient)"
98+
: "url(#fillShadowGradientFrom)"
9999
}
100100
/>
101101
);

‎src/HelperTypes.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,35 @@ export interface ChartConfig {
5454
* Defines the second color opacity in the linear gradient of a chart's background
5555
*/
5656
backgroundGradientToOpacity?: number;
57+
/**
58+
* Defines the previous options to maintain backwards compatibility
59+
*/
5760
fillShadowGradient?: string;
5861
fillShadowGradientOpacity?: number;
62+
/**
63+
* Defines the first color in the linear gradient of the area under data
64+
*/
65+
fillShadowGradientFrom?: string;
66+
/**
67+
* Defines the first color opacity in the linear gradient of the area under data
68+
*/
69+
fillShadowGradientFromOpacity?: number;
70+
/**
71+
* Defines the first color offset in the linear gradient of the area under data
72+
*/
73+
fillShadowGradientFromOffset?: number;
74+
/**
75+
* Defines the second color in the linear gradient of the area under data
76+
*/
77+
fillShadowGradientTo?: string;
78+
/**
79+
* Defines the second color opacity in the linear gradient of the area under data
80+
*/
81+
fillShadowGradientToOpacity?: number;
82+
/**
83+
* Defines the second color offset in the linear gradient of the area under data
84+
*/
85+
fillShadowGradientToOffset?: number;
5986
/**
6087
* Defines the option to use color from dataset to each chart data
6188
*/

‎src/line-chart/LineChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -583,7 +583,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
583583
(dataset.data.length - 1)},${(height / 4) * 3 +
584584
paddingTop} ${paddingRight},${(height / 4) * 3 + paddingTop}`
585585
}
586-
fill={`url(#fillShadowGradient${
586+
fill={`url(#fillShadowGradientFrom${
587587
useColorFromDataset ? `_${index}` : ""
588588
})`}
589589
strokeWidth={0}
@@ -766,7 +766,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
766766
<Path
767767
key={index}
768768
d={d}
769-
fill={`url(#fillShadowGradient${
769+
fill={`url(#fillShadowGradientFrom${
770770
useColorFromDataset ? `_${index}` : ""
771771
})`}
772772
strokeWidth={0}

0 commit comments

Comments
 (0)