c8567da75f
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s
- Enable strict: true in tsconfig.json (was false) - Add proper interfaces for all component props (Dashboard, Comparison, Slides) - Add SlideConfig, ChartTypeOption, MetricOption types - Type all function parameters, callbacks, and state variables - Fix dynamic property access with proper keyof assertions - 233 type errors resolved across 5 files Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
110 lines
2.3 KiB
TypeScript
110 lines
2.3 KiB
TypeScript
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
BarElement,
|
|
ArcElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
Filler
|
|
} from 'chart.js';
|
|
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
|
|
|
// Register ChartJS components once
|
|
ChartJS.register(
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
BarElement,
|
|
ArcElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
Filler,
|
|
ChartDataLabels
|
|
);
|
|
|
|
export const chartColors = {
|
|
primary: '#2563eb',
|
|
secondary: '#7c3aed',
|
|
tertiary: '#0891b2',
|
|
success: '#059669',
|
|
danger: '#dc2626',
|
|
muted: '#94a3b8',
|
|
grid: '#f1f5f9'
|
|
};
|
|
|
|
export const createDataLabelConfig = (showDataLabels: boolean): any => ({
|
|
display: showDataLabels,
|
|
color: '#1e293b',
|
|
font: { size: 10, weight: 600 },
|
|
anchor: 'end',
|
|
align: 'end',
|
|
offset: 4,
|
|
padding: 4,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.85)',
|
|
borderRadius: 3,
|
|
textDirection: 'ltr', // Force LTR for numbers - fixes RTL misalignment
|
|
formatter: (value: number | null) => {
|
|
if (value == null) return '';
|
|
if (value >= 1000000) return (value / 1000000).toFixed(2) + 'M';
|
|
if (value >= 1000) return (value / 1000).toFixed(2) + 'K';
|
|
if (value < 100 && value > 0) return value.toFixed(2);
|
|
return Math.round(value).toLocaleString();
|
|
}
|
|
});
|
|
|
|
export const createBaseOptions = (showDataLabels: boolean): any => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
locale: 'en-US', // Force LTR number formatting
|
|
layout: {
|
|
padding: {
|
|
top: showDataLabels ? 25 : 5,
|
|
right: 5,
|
|
bottom: 5,
|
|
left: 5
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
backgroundColor: '#1e293b',
|
|
padding: 12,
|
|
cornerRadius: 8,
|
|
titleFont: { size: 12 },
|
|
bodyFont: { size: 11 },
|
|
rtl: false,
|
|
textDirection: 'ltr'
|
|
},
|
|
datalabels: createDataLabelConfig(showDataLabels)
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: { font: { size: 10 }, color: '#94a3b8' }
|
|
},
|
|
y: {
|
|
grid: { color: chartColors.grid },
|
|
ticks: { font: { size: 10 }, color: '#94a3b8' },
|
|
border: { display: false }
|
|
}
|
|
}
|
|
});
|
|
|
|
export const lineDatasetDefaults = {
|
|
borderWidth: 2,
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 4
|
|
};
|
|
|
|
export const barDatasetDefaults = {
|
|
borderRadius: 4
|
|
};
|