enhance(client): improve chart rendering
This commit is contained in:
@ -95,6 +95,11 @@ export default defineComponent({
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
bar: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
aspectRatio: {
|
||||
type: Number,
|
||||
required: false,
|
||||
@ -187,7 +192,7 @@ export default defineComponent({
|
||||
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
|
||||
|
||||
chartInstance = new Chart(chartEl.value, {
|
||||
type: 'line',
|
||||
type: props.bar ? 'bar' : 'line',
|
||||
data: {
|
||||
labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
|
||||
datasets: data.series.map((x, i) => ({
|
||||
@ -195,12 +200,13 @@ export default defineComponent({
|
||||
label: x.name,
|
||||
data: x.data.slice().reverse(),
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderColor: x.color ? x.color : getColor(i),
|
||||
borderDash: x.borderDash || [],
|
||||
borderJoinStyle: 'round',
|
||||
backgroundColor: alpha(x.color ? x.color : getColor(i), 0.1),
|
||||
barPercentage: 0.9,
|
||||
categoryPercentage: 0.9,
|
||||
fill: x.type === 'area',
|
||||
hidden: !!x.hidden,
|
||||
})),
|
||||
@ -218,6 +224,7 @@ export default defineComponent({
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
stacked: props.stacked,
|
||||
time: {
|
||||
stepSize: 1,
|
||||
unit: props.span === 'day' ? 'month' : 'day',
|
||||
@ -688,6 +695,21 @@ export default defineComponent({
|
||||
};
|
||||
};
|
||||
|
||||
const fetchPerUserDriveChart = async (): Promise<typeof data> => {
|
||||
const raw = await os.api('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
|
||||
return {
|
||||
series: [{
|
||||
name: 'Inc',
|
||||
type: 'area',
|
||||
data: format(raw.incSize),
|
||||
}, {
|
||||
name: 'Dec',
|
||||
type: 'area',
|
||||
data: format(raw.decSize),
|
||||
}],
|
||||
};
|
||||
};
|
||||
|
||||
const fetchAndRender = async () => {
|
||||
const fetchData = () => {
|
||||
switch (props.src) {
|
||||
@ -718,6 +740,7 @@ export default defineComponent({
|
||||
case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);
|
||||
|
||||
case 'per-user-notes': return fetchPerUserNotesChart();
|
||||
case 'per-user-drive': return fetchPerUserDriveChart();
|
||||
}
|
||||
};
|
||||
fetching.value = true;
|
||||
|
Reference in New Issue
Block a user