Code: Select all
const LineChart: FC<IProps> =
({
config,
isDashboardGraphChart,
disableLabelsPercentage,
plotFillColor,
plotNegativeFillColor,
shouldHaveTooltipImage
}) => {
const colors = ['#00739B', '#93E1FF', '#9AAEBB', '#374955', '#915980', '#FFA500', '#EC992A'];
const xAxisCategoriesNumber = config.xaxis && config.xaxis.categories.map((date: Date) =>
moment(date, 'DD/MM/YYYY HH:mm').toDate().getTime()
);
const getSeriesByPageType = (cfgIndex: number) => {
const commonSeriesData = xAxisCategoriesNumber.map((item: number, indx: number) => [
item,
config.series[cfgIndex]?.data[indx]
])
const dashboardSeriesData = config.series[cfgIndex].data.map((point: any, pointIndex: number) => ({
...point,
x: Number(moment(config.xaxis.categories[pointIndex], 'DD/MM/YYYY HH:mm').format('x')),
}))
return isDashboardGraphChart ? dashboardSeriesData : commonSeriesData
}
const series = config.series?.map((elem: any, cfgIndex: number) => ({
name: config.series[cfgIndex]?.name
? config.series[cfgIndex]?.name
: cfgIndex === 0
? 'Reach'
: 'Engagement',
type: 'areaspline',
color: colors[cfgIndex] || colors[0],
lineWidth: 1.2,
data: getSeriesByPageType(cfgIndex),
visible: cfgIndex === 0
}));
const options = {
chart: {
zoomType: 'x',
type: 'areaspline',
height: 650,
},
time: {
useUTC: false,
},
series,
title: {
text: '',
},
yAxis: {
// min: config.yaxis.min,
// max: config.yaxis.max,
endOnTick: false,
startOnTick: false,
title: '',
gridLineColor: '#C5C5C5',
plotLines: [
{
color: '#374955',
dashStyle: 'Dash',
value: 0,
zIndex: 10,
width: 1,
},
],
labels: {
// Left side labels
formatter: function () {
return `${Number(this.value)?.toFixed(1)} ${disableLabelsPercentage ? '' : '%'}`;
},
},
},
xAxis: {
type: 'datetime',
crosshair: true,
minTickInterval: 28 * 24 * 3600 * 1000,
labels: {
// Date under the chart
formatter: function () {
return `${moment(this.value).format('MMM YYYY')}`;
},
},
},
plotOptions: {
series: {
lineWidth: 1.2,
marker: {
enabled: true,
radius: 3,
symbol: 'circle',
},
states: {
inactive: {
opacity: .75
}
},
pointIntervalUnit: 'month',
},
areaspline: {
fillColor: plotFillColor || '#d1e7dd',
negativeFillColor: plotNegativeFillColor || '#f8d7da',
},
},
tooltip: {
useHTML: true,
formatter:function () {
const point = this.point;
const index = this.point.index;
const series = this.point.series;
const date = moment(xAxisCategoriesNumber[index]);
return !(this.point as any).disabled
&& `
<div class="tooltip-dot">
<div>${date.format( 'DD MMMM hh:mm')}, ${date.format('YYYY')}</div>
<div>${series.name}: ${point.y}${disableLabelsPercentage ? '' : '%'}</div>
<div class="${shouldHaveTooltipImage ? 'd-block' : 'd-none'} pt-2 tooltip-image">
<img src="${config.images ? config.images[index] : ''}">
</div>
</div>
`
},
},
} as Highcharts.Options;
return <HighchartsReact highcharts={Highcharts} options={options} />;
};