mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-06-21 00:37:58 +08:00
c79223742f
* fix(UI): graph legends is fixed * chore(UI): some changes regarding the color of the chart is updated * full view css is fixed * usage explorer graph is fixed * default query is removed * fix: scroll is removed
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import { Plugin, ChartType, Chart, ChartOptions } from 'chart.js';
|
|
import { colors } from 'lib/getRandomColor';
|
|
|
|
const getOrCreateLegendList = (chart: Chart, id: string, isLonger: boolean) => {
|
|
const legendContainer = document.getElementById(id);
|
|
let listContainer = legendContainer?.querySelector('ul');
|
|
|
|
if (!listContainer) {
|
|
listContainer = document.createElement('ul');
|
|
listContainer.style.display = 'flex';
|
|
// listContainer.style.flexDirection = isLonger ? 'column' : 'row';
|
|
listContainer.style.margin = '0';
|
|
listContainer.style.padding = '0';
|
|
listContainer.style.overflowY = 'scroll';
|
|
listContainer.style.justifyContent = isLonger ? 'start' : 'center';
|
|
listContainer.style.alignItems = isLonger ? 'start' : 'center';
|
|
listContainer.style.height = '100%';
|
|
listContainer.style.flexWrap = 'wrap';
|
|
listContainer.style.justifyContent = 'center';
|
|
|
|
legendContainer?.appendChild(listContainer);
|
|
}
|
|
|
|
return listContainer;
|
|
};
|
|
|
|
export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
|
|
return {
|
|
id: 'htmlLegend',
|
|
afterUpdate(chart, args, options: ChartOptions) {
|
|
const ul = getOrCreateLegendList(chart, id || 'legend', isLonger);
|
|
|
|
// Remove old legend items
|
|
while (ul.firstChild) {
|
|
ul.firstChild.remove();
|
|
}
|
|
|
|
// Reuse the built-in legendItems generator
|
|
const items = chart?.options?.plugins?.legend?.labels?.generateLabels(chart);
|
|
|
|
items?.forEach((item, index) => {
|
|
const li = document.createElement('li');
|
|
li.style.alignItems = 'center';
|
|
li.style.cursor = 'pointer';
|
|
li.style.display = 'flex';
|
|
li.style.marginLeft = '10px';
|
|
li.style.marginTop = '5px';
|
|
|
|
li.onclick = () => {
|
|
const { type } = chart.config;
|
|
if (type === 'pie' || type === 'doughnut') {
|
|
// Pie and doughnut charts only have a single dataset and visibility is per item
|
|
chart.toggleDataVisibility(index);
|
|
} else {
|
|
chart.setDatasetVisibility(
|
|
item.datasetIndex,
|
|
!chart.isDatasetVisible(item.datasetIndex),
|
|
);
|
|
}
|
|
chart.update();
|
|
};
|
|
|
|
// Color box
|
|
const boxSpan = document.createElement('span');
|
|
boxSpan.style.background = item.strokeStyle || colors[0];
|
|
boxSpan.style.borderColor = item?.strokeStyle;
|
|
boxSpan.style.borderWidth = item.lineWidth + 'px';
|
|
boxSpan.style.display = 'inline-block';
|
|
boxSpan.style.minHeight = '20px';
|
|
boxSpan.style.marginRight = '10px';
|
|
boxSpan.style.minWidth = '20px';
|
|
boxSpan.style.borderRadius = '50%';
|
|
|
|
if (item.text) {
|
|
// Text
|
|
const textContainer = document.createElement('span');
|
|
textContainer.style.margin = '0';
|
|
textContainer.style.padding = '0';
|
|
textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
|
|
|
|
const text = document.createTextNode(item.text);
|
|
textContainer.appendChild(text);
|
|
|
|
li.appendChild(boxSpan);
|
|
li.appendChild(textContainer);
|
|
ul.appendChild(li);
|
|
}
|
|
});
|
|
},
|
|
};
|
|
};
|