Import React, {useState,useEffect} from 'react' import CanvasJSReact from '../../../../../lib/canvasjs/canvasjs.react' import moment from

Question

Import React, {useState,useEffect} from 'react' import CanvasJSReact from '../../../../../lib/canvasjs/canvasjs.react' import moment from

'moment'
let CanvasJSChart = CanvasJSReact.CanvasJSChart

const Subscribers=(props)=>{
let ParseDate=()=>{
let data =[]
for (let i = 0;i<18;i++){
let rand = 0 + Math.random() * (1000 + 1 - 0)

data.push(
{ label: moment().add(-i,'month').format('MM.YY'), active:false, y: Math.floor(rand) }
)
}
data[0].color = props.typeResurs==='Gas'? '#00ffde':props.typeResurs==='HotWater'?'#db8c8c':
props.typeResurs==='ColdWater'?'#9cdcf9':'#ffdfab'
data[0].active=true
console.log(data)
return data
}

let [options, setOptions] = useState(
{
animationEnabled: true,
backgroundColor: '#161C30',
height: 144,
axisX: {
// interval: 1,
labelFontColor: '#FFFFFF',
labelFontSize:12
},
axisY: {
gridColor: '#353535',
labelFontColor: '#FFFFFF',
lineThickness: 0,
tickColor: '#353535',
labelFontSize:12

},

data: []
}
)
let onClickBar=(e, op)=>{
let dataBar ={...options}
console.log(dataBar)
let data =dataBar.data[0].dataPoints
let indexActive = data.findIndex((el)=> el.active ===true)
data[indexActive].active=false
data[indexActive].color=''

let index = e.dataPointIndex
data[index].active=true
data[index].color=props.typeResurs==='Gas'? '#00ffde':props.typeResurs==='HotWater'?'#db8c8c':
props.typeResurs==='ColdWater'?'#9cdcf9':'#ffdfab'
dataBar.data[0].dataPoints=data
setOptions(dataBar)

}
useEffect(()=>{
let data ={...options}
data.data=[{
type: 'column',
axisXIndex: 0,
click: (e)=>onClickBar(e,options),

showInLegend: false,
color: props.typeResurs==='Gas'? '#01A692':props.typeResurs==='HotWater'?'#EB5757':
props.typeResurs==='ColdWater'?'#1F78B4':'#FFBC57',
dataPoints: ParseDate().reverse()
}]
console.log(data)
setOptions(data)
},[props.typeResurs])
return(
<div className='Dashboard'>
<div className='contebt-box-panel'>
<p className='titleGrav'>
Количество абонентов по месяцам
</p>
<CanvasJSChart options={options}
/>
</div>
</div>
)
}
export default Subscribers