97 lines
2.8 KiB
HTML
97 lines
2.8 KiB
HTML
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
|
|
<script>
|
|
chartData = [];
|
|
function createChart(
|
|
id,
|
|
endpoint,
|
|
chartType,
|
|
xAxisField,
|
|
yAxisField,
|
|
sortField = null,
|
|
scaleChart = false,
|
|
xAxisType = "time",
|
|
formatValueDecimalPlaces = null
|
|
) {
|
|
async function fetchDataForChart(query, valueId) {
|
|
try {
|
|
const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
|
|
const response = await fetch(apiEndpoint);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const fetchedData = await response.json();
|
|
const newData = fetchedData.reduce((acc, item) => {
|
|
const objectId = item[valueId];
|
|
if (!acc[objectId]) {
|
|
acc[objectId] = [];
|
|
}
|
|
acc[objectId].push([item[xAxisField], item[yAxisField]]);
|
|
return acc;
|
|
}, {});
|
|
chartData = { ...chartData, ...newData };
|
|
updateChart();
|
|
} catch (error) {
|
|
console.error("Fetching data failed:", error);
|
|
}
|
|
}
|
|
|
|
function updateChart() {
|
|
let chartDataMap = new Map();
|
|
for (let objectId in chartData) {
|
|
chartDataMap.set(objectId, chartData[objectId]);
|
|
}
|
|
var chartDom = document.getElementById(`${id}`);
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
var option = {
|
|
tooltip: {
|
|
...tooltip,
|
|
valueFormatter(value, index) {
|
|
return formatValueDecimalPlaces == null ? value : nFormatter(value, formatValueDecimalPlaces);
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: xAxisType,
|
|
},
|
|
yAxis: {
|
|
scale: scaleChart,
|
|
type: "value",
|
|
},
|
|
series: Array.from(chartDataMap.entries()).map(([name, data]) => ({
|
|
name,
|
|
type: chartType,
|
|
data,
|
|
showSymbol: false,
|
|
})),
|
|
};
|
|
|
|
myChart.setOption(option, true);
|
|
}
|
|
|
|
// listen for filter events for this target
|
|
document.addEventListener("filterChange", function (event) {
|
|
tableId = document.getElementById(id).id;
|
|
console.log(event.detail);
|
|
eventDetail = event.detail;
|
|
if (eventDetail.filterActions.includes("refresh")) {
|
|
chartData = [];
|
|
updateChart();
|
|
} else {
|
|
if (eventDetail.filterTargets.includes(tableId)) {
|
|
if (eventDetail.filterActions.includes("selected")) {
|
|
valueId = eventDetail.filterId;
|
|
let selectedRow = {
|
|
[valueId]: eventDetail.filterValue,
|
|
};
|
|
query = queryConstructor(selectedRow);
|
|
fetchDataForChart(query, valueId);
|
|
} else {
|
|
delete chartData[eventDetail.filterValue];
|
|
updateChart();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|