Within my component, I am working with SVG paths and a linearGradient value passed down from the parent component through static data. The properties 'startColor' and 'stopColor' are used to define the gradient colors for each element.
Even though the values logged for each object are correct, they do not display as expected on the screen. It appears that the first value from the initial object is being applied to all components during rendering. I have verified this behavior through testing.
I am looking for a solution to ensure that each circle renders with the correct gradient colors specified in the data.
Data structure:
const dataOne = [
{
title: 'Cpu utilisation',
graph: 65,
noBorder: false,
noMargin: false,
startColor: '#2DC0FF',
stopColor: '#0160B2'
},
{
title: 'Memory utilisation',
graph: 65,
noBorder: true,
noMargin: true,
startColor: '#2DC0FF',
stopColor: '#0160B2'
},
]
const dataTwo = [
{
title: 'Warnings today',
graph: 65,
noBorder: false,
noMargin: false,
startColor: '#fa9100',
stopColor: '#ffc14f'
},
{
title: 'Errors today',
graph: 65,
noBorder: true,
noMargin: true,
startColor: '#fa9100',
stopColor: '#ffc14f'
},
]
Component usage:
<div className="tab-info-body large">
<DoubleGraph data={dataOne} />
</div>
<div className="tab-info-body large">
<DoubleGraph data={dataTwo} />
</div>
Component code:
render() {
const { data, title, startColor, stopColor } = this.props;
const { value, valueOne, valueTwo, hidden, visible, valueOneYPos, valueTwoYPos, valueOneHidden, valueTwoHidden, dashArray, dashArrayBorder } = this.state;
const styleOne = { transform: `translate(0px, ${valueOneYPos}px)` };
const styleTwo = { transform: `translate(0px, ${valueTwoYPos}px)` };
return (
<div className="double-graph-wrap">
<div className="flex">
{data.map((item, i) => {
console.log("give me colour", item.startColor)
return (
<div className={classNames('wrap', { noBorder: item.noBorder, noMargin: item.noMargin})}>
{i === 1 &&<div className="border-test"></div>}
<span className="title">{item.title}</span>
<div className="graph-wrap">
<div className="graph">
<div className="value-wrap">
<div className="values">
<span style={styleOne} className={classNames("valueOne", {hidden: valueOneHidden})}>{valueOne}</span>
<span style={styleTwo} className={classNames("valueTwo", {hidden: valueTwoHidden})}>{valueTwo}</span>
</div>
</div>
<div class="single-chart">
<div style={{ background: 'black', width: 100, height: 100}}>{item.startColor}</div>
<svg viewBox="0 0 36 36" class="circular-chart orange">
<defs>
<linearGradient id='grad'>
<stop stop-color={item.startColor} />
<stop offset='100%' stop-color={item.stopColor} />
</linearGradient>
</defs>
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="borderTwo"
stroke-dasharray={dashArrayBorder}
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle"
stroke-dasharray={dashArray}
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="borderOne"
stroke-dasharray="1, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="average"
stroke-dasharray="1, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831"
/>
</svg>
</div>
</div>
</div>
</div>
)
})}
</div>
</div>
)
}