{
let tooltipDisplay = ""
let chartDom = document.getElementById('echart');
let chart = echarts.init(chartDom, null, { locale: 'ES' })
let allvisitsn = [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26
]
let allvisits = [
"Baseline",
"Week 2",
"Week 4",
"Week 6",
"Week 8",
"",
"Week 12",
"",
"Week 16",
"", //interpolated
"Week 20",
"", //interpolated
"Week 24",
"Week 26"
]
let emphasisStyle = {
focus: 'series',
itemStyle: {
color: 'black'
}
};
let subjects = unique(data, 'USUBJID')
let seriesDataLine = subjects.map((subj) => {
return ({
name: data.filter((d) => d.USUBJID === subj)[0].TRTA,
type: 'line',
data: data.filter(d => d.USUBJID === subj).map(d => ([d.AVISITN, d.AVAL, d.USUBJID])),
//triggerLineEvent: true,
//symbol: 'circle',
//symbolSize: 6,
seriesLayoutBy: 'row',
emphasis: {focus: 'series'},
//itemStyle: {
// color: color_switch(data.filter((d) => d.USUBJID === subj)[0].TRTA)
//},
//value: subj,
})
})
let options = {
legend: {
show: true
},
xAxis: {
type: "value",
data: allvisits,
min: Math.min(...allvisitsn),
max: Math.max(...allvisitsn),
interval: 2,
axisLabel: {
rotate: 30,
formatter: function(value, index) {
return `${allvisits[allvisitsn.indexOf(value)]}`
}
},
axisTick: {
show: false,
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
min: Math.min(...data.map((d) => d.AVAL)),
max: Math.max(...data.map((d) => d.AVAL)),
type: 'value'
},
series: seriesDataLine,
tooltip: {
//trigger: "axis",
//axisPointer: { type: "none" },
formatter: (params) => {
return tooltipDisplay;
}
},
brush: {
toolbox: ["rect"]
},
grid: {
containLabel: true
},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
}
}
chart.setOption(options)
/*
chart.on("mouseover", function (params) {
console.log(params)
// I dont think we can increase the radius of the symbol
// because this is a line subtype, not circle
// we could potentially overlay a scatter if this was important
if (params.componentSubType == "symbol") {
console.log("symbol")
}
if (params.componentSubType == "line") {
tooltipDisplay = `
<strong>Subject: </strong>${params.value[2]}<br>
<strong>Treatment: </strong>${params.seriesName}<br>
<strong>AVAL: </strong>${params.value[1]}<br>
<strong>VISIT: </strong>${allvisits[allvisitsn.indexOf(params.value[0])]}<br>
`;
}
});
chart.on("mouseout", function (params) {
tooltipDisplay = "";
});
// TODO
chart.on("click", function(params) {
console.log({
USUBJID: params.value[2],
TRTA: params.seriesName,
AVAL: params.value[1],
AVISIT: allvisits[allvisitsn.indexOf(params.value[0])],
AVISITN: params.value[0]
})
})
// took this from a tutorial but clearly needs to be adapted
chart.on('brushSelected', function (params) {
var brushed = [];
var brushComponent = params.batch[0];
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
var rawIndices = brushComponent.selected[sIdx].dataIndex;
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
}
chart.setOption({
title: {
backgroundColor: '#333',
text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
bottom: 0,
right: '10%',
width: 100,
textStyle: {
fontSize: 12,
color: '#fff'
}
}
});
});
*/
}