obsidian-plugin/stfrigerio_sqliteDB
1
0
Fork 0
mirror of https://github.com/stfrigerio/sqliteDB.git synced 2026-07-22 05:38:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

better styling for barchart

Browse source
This commit is contained in:
stfrigerio 2025-02-03 14:39:40 +01:00
parent af908987ff
commit 479f1ad8a5
1 changed files with 126 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
src/helpers/processSqlChartBlock/charts/BarChart.ts
View file

@ -2,9 +2,31 @@ import { getColorForIndex } from "../helpers/getColorForIndex";
interface BarChartOptions {
stacked?: boolean;
showLegend?: boolean;
horizontal?: boolean;
barThickness?: number;
borderRadius?: number;
yAxisMin?: number;
yAxisMax?: number;
tooltips?: boolean;
animations?: boolean;
}
export function createBarChart(labels: string[], datasets: any[], options?: BarChartOptions) {
export function createBarChart(labels: string[], datasets: any[], options: BarChartOptions = {}) {
const defaultOptions: BarChartOptions = {
stacked: false,
showLegend: true,
horizontal: false,
barThickness: 8,
borderRadius: 4,
tooltips: true,
animations: true
};
const chartOptions = { ...defaultOptions, ...options };
const indexAxis = chartOptions.horizontal ? 'y' : 'x';
const valueAxis = chartOptions.horizontal ? 'x' : 'y';
return {
type: 'bar',
data: {
@ -12,16 +34,114 @@ export function createBarChart(labels: string[], datasets: any[], options?: BarC
datasets: datasets.map((dataset, index) => ({
...dataset,
backgroundColor: getColorForIndex(index, 0.6),
hoverBackgroundColor: getColorForIndex(index, 0.8),
}))
},
options: {
scales: {
y: {
beginAtZero: true,
stacked: options?.stacked
responsive: true,
// maintainAspectRatio: false,
indexAxis,
interaction: {
intersect: false,
mode: 'index',
},
animations: chartOptions.animations ? {
numbers: {
type: 'number',
duration: 600,
easing: 'easeOutQuart',
},
x: {
stacked: options?.stacked
type: 'number',
duration: 300,
from: 0
},
y: {
type: 'number',
duration: 300,
from: 0
}
} : false,
plugins: {
legend: {
display: chartOptions.showLegend,
position: 'top' as const,
labels: {
usePointStyle: false,
padding: 15,
font: {
size: 12
},
generateLabels: (chart: any) => {
const datasets = chart.data.datasets;
return datasets.map((dataset: any, i: number) => ({
text: dataset.label,
fillStyle: dataset.backgroundColor,
strokeStyle: dataset.borderColor,
lineWidth: 0,
hidden: !chart.isDatasetVisible(i),
index: i
}));
}
}
},
tooltip: {
enabled: chartOptions.tooltips,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleFont: {
size: 13
},
bodyFont: {
size: 12
},
padding: 10,
cornerRadius: 4,
displayColors: true,
callbacks: {
label: function(context: any) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += context.parsed[valueAxis];
return label;
}
}
}
},
scales: {
[valueAxis]: {
stacked: chartOptions.stacked,
beginAtZero: true,
min: chartOptions.yAxisMin,
max: chartOptions.yAxisMax,
grid: {
display: true,
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
color: 'rgba(0, 0, 0, 0.1)'
},
ticks: {
font: {
size: 11
}
}
},
[indexAxis]: {
stacked: chartOptions.stacked,
grid: {
display: false,
drawBorder: true,
drawTicks: true,
},
ticks: {
font: {
size: 11
},
maxRotation: chartOptions.horizontal ? 0 : 45,
minRotation: chartOptions.horizontal ? 0 : 45
}
}
}
}