mirror of https://github.com/ghostfolio/ghostfolio
adityagarud
3 weeks ago
11 changed files with 1254 additions and 21 deletions
@ -0,0 +1,333 @@ |
|||||
|
<!doctype html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> |
||||
|
<title>Ghostfolio Chart Improvements Demo</title> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script> |
||||
|
<style> |
||||
|
body { |
||||
|
font-family: 'Inter', sans-serif; |
||||
|
margin: 0; |
||||
|
padding: 20px; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
.container { |
||||
|
max-width: 1200px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.chart-container { |
||||
|
background: white; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
padding: 20px; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
h1, |
||||
|
h2 { |
||||
|
color: #1976d2; |
||||
|
} |
||||
|
.description { |
||||
|
background: #e3f2fd; |
||||
|
border-left: 4px solid #1976d2; |
||||
|
padding: 15px; |
||||
|
margin: 20px 0; |
||||
|
border-radius: 0 4px 4px 0; |
||||
|
} |
||||
|
.comparison { |
||||
|
display: flex; |
||||
|
gap: 20px; |
||||
|
margin: 30px 0; |
||||
|
} |
||||
|
.comparison-panel { |
||||
|
flex: 1; |
||||
|
padding: 20px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
.before { |
||||
|
background: #ffebee; |
||||
|
border: 1px solid #ffcdd2; |
||||
|
} |
||||
|
.after { |
||||
|
background: #e8f5e9; |
||||
|
border: 1px solid #c8e6c9; |
||||
|
} |
||||
|
.chart-wrapper { |
||||
|
height: 400px; |
||||
|
position: relative; |
||||
|
} |
||||
|
canvas { |
||||
|
width: 100% !important; |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<h1>Ghostfolio Chart Improvements Demo</h1> |
||||
|
|
||||
|
<div class="description"> |
||||
|
<h2>Visual Improvements for Portfolio Analysis Charts</h2> |
||||
|
<p> |
||||
|
This demo shows the improvements made to chart visual comparability in |
||||
|
the Portfolio Analysis section. The key enhancements include: |
||||
|
</p> |
||||
|
<ul> |
||||
|
<li> |
||||
|
<strong>Date Range Filtering:</strong> Charts now properly scale to |
||||
|
show only data within the selected time period |
||||
|
</li> |
||||
|
<li> |
||||
|
<strong>Enhanced Visual Design:</strong> Improved color schemes, |
||||
|
better spacing, and clearer data representation |
||||
|
</li> |
||||
|
<li> |
||||
|
<strong>Better Readability:</strong> Cleaner axes, grid lines, and |
||||
|
tooltips for easier analysis |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
<h2>Portfolio Performance Comparison</h2> |
||||
|
|
||||
|
<div class="comparison"> |
||||
|
<div class="comparison-panel before"> |
||||
|
<h3>Before: Truncated/Unscaled Charts</h3> |
||||
|
<p> |
||||
|
Charts were not properly scaled when applying time period filters, |
||||
|
making data difficult to read. |
||||
|
</p> |
||||
|
<div class="chart-wrapper"> |
||||
|
<canvas id="chartBefore"></canvas> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="comparison-panel after"> |
||||
|
<h3>After: Properly Scaled Charts</h3> |
||||
|
<p> |
||||
|
Charts now automatically adjust to show only the data within the |
||||
|
selected time period with proper scaling. |
||||
|
</p> |
||||
|
<div class="chart-wrapper"> |
||||
|
<canvas id="chartAfter"></canvas> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h2>Investment Timeline Comparison</h2> |
||||
|
|
||||
|
<div class="chart-container"> |
||||
|
<h3>Enhanced Investment Timeline Chart</h3> |
||||
|
<p> |
||||
|
Improved visualization with better color coding and clearer data |
||||
|
representation. |
||||
|
</p> |
||||
|
<div class="chart-wrapper"> |
||||
|
<canvas id="investmentChart"></canvas> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h2>Dividend Timeline Comparison</h2> |
||||
|
|
||||
|
<div class="chart-container"> |
||||
|
<h3>Enhanced Dividend Timeline Chart</h3> |
||||
|
<p> |
||||
|
Better visual distinction for dividend data with improved readability. |
||||
|
</p> |
||||
|
<div class="chart-wrapper"> |
||||
|
<canvas id="dividendChart"></canvas> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script> |
||||
|
// Generate mock data |
||||
|
function generateMockData(days = 365, startDate = new Date()) { |
||||
|
const data = []; |
||||
|
let value = 10000; |
||||
|
|
||||
|
for (let i = days; i >= 0; i--) { |
||||
|
const date = new Date(startDate); |
||||
|
date.setDate(date.getDate() - i); |
||||
|
|
||||
|
// Add some realistic fluctuations |
||||
|
const change = (Math.random() - 0.5) * 200; |
||||
|
value += change; |
||||
|
|
||||
|
data.push({ |
||||
|
date: date.toISOString().split('T')[0], |
||||
|
value: value |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return data; |
||||
|
} |
||||
|
|
||||
|
// Generate investment data |
||||
|
function generateInvestmentData(months = 24) { |
||||
|
const data = []; |
||||
|
const today = new Date(); |
||||
|
|
||||
|
for (let i = months; i >= 0; i--) { |
||||
|
const date = new Date(today); |
||||
|
date.setMonth(date.getMonth() - i); |
||||
|
|
||||
|
const investment = Math.random() * 2000 + 500; |
||||
|
|
||||
|
data.push({ |
||||
|
date: date.toISOString().split('T')[0], |
||||
|
investment: investment |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return data; |
||||
|
} |
||||
|
|
||||
|
// Generate dividend data |
||||
|
function generateDividendData(months = 24) { |
||||
|
const data = []; |
||||
|
const today = new Date(); |
||||
|
|
||||
|
for (let i = months; i >= 0; i--) { |
||||
|
const date = new Date(today); |
||||
|
date.setMonth(date.getMonth() - i); |
||||
|
|
||||
|
const dividend = Math.random() * 500 + 100; |
||||
|
|
||||
|
data.push({ |
||||
|
date: date.toISOString().split('T')[0], |
||||
|
investment: dividend |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return data; |
||||
|
} |
||||
|
|
||||
|
// Create a chart with the given configuration |
||||
|
function createChart(canvasId, data, title, isInvestment = false) { |
||||
|
const ctx = document.getElementById(canvasId).getContext('2d'); |
||||
|
|
||||
|
// Filter data for last 6 months for "after" chart |
||||
|
const sixMonthsAgo = new Date(); |
||||
|
sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6); |
||||
|
|
||||
|
let filteredData = data; |
||||
|
if (canvasId === 'chartAfter') { |
||||
|
filteredData = data.filter( |
||||
|
(item) => new Date(item.date) >= sixMonthsAgo |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const chartData = { |
||||
|
labels: filteredData.map((item) => item.date), |
||||
|
datasets: [ |
||||
|
{ |
||||
|
label: isInvestment ? 'Investment' : 'Portfolio Value', |
||||
|
data: filteredData.map((item) => |
||||
|
isInvestment ? item.investment : item.value |
||||
|
), |
||||
|
borderColor: isInvestment ? '#388e3c' : '#1976d2', |
||||
|
backgroundColor: isInvestment |
||||
|
? 'rgba(56, 142, 60, 0.1)' |
||||
|
: 'rgba(25, 118, 210, 0.1)', |
||||
|
borderWidth: 2, |
||||
|
pointRadius: 0, |
||||
|
fill: true, |
||||
|
tension: 0 |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
if (!isInvestment) { |
||||
|
// Add benchmark data |
||||
|
chartData.datasets.push({ |
||||
|
label: 'Benchmark (S&P 500)', |
||||
|
data: filteredData.map( |
||||
|
(item) => |
||||
|
(isInvestment ? item.investment : item.value) * |
||||
|
(0.9 + Math.random() * 0.2) |
||||
|
), |
||||
|
borderColor: '#f57c00', |
||||
|
backgroundColor: 'transparent', |
||||
|
borderWidth: 2, |
||||
|
pointRadius: 0, |
||||
|
fill: false, |
||||
|
tension: 0 |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return new Chart(ctx, { |
||||
|
type: 'line', |
||||
|
data: chartData, |
||||
|
options: { |
||||
|
responsive: true, |
||||
|
maintainAspectRatio: false, |
||||
|
plugins: { |
||||
|
title: { |
||||
|
display: true, |
||||
|
text: title |
||||
|
}, |
||||
|
legend: { |
||||
|
position: 'top' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
mode: 'index', |
||||
|
intersect: false |
||||
|
} |
||||
|
}, |
||||
|
scales: { |
||||
|
x: { |
||||
|
type: 'time', |
||||
|
time: { |
||||
|
unit: 'month' |
||||
|
}, |
||||
|
grid: { |
||||
|
display: false |
||||
|
} |
||||
|
}, |
||||
|
y: { |
||||
|
beginAtZero: false, |
||||
|
grid: { |
||||
|
color: 'rgba(0, 0, 0, 0.05)' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
interaction: { |
||||
|
intersect: false, |
||||
|
mode: 'index' |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Initialize charts when the page loads |
||||
|
document.addEventListener('DOMContentLoaded', function () { |
||||
|
// Generate mock data |
||||
|
const performanceData = generateMockData(365); |
||||
|
const investmentData = generateInvestmentData(24); |
||||
|
const dividendData = generateDividendData(24); |
||||
|
|
||||
|
// Create charts |
||||
|
createChart( |
||||
|
'chartBefore', |
||||
|
performanceData, |
||||
|
'Portfolio Performance (Full Year)' |
||||
|
); |
||||
|
createChart( |
||||
|
'chartAfter', |
||||
|
performanceData, |
||||
|
'Portfolio Performance (Last 6 Months)' |
||||
|
); |
||||
|
createChart( |
||||
|
'investmentChart', |
||||
|
investmentData, |
||||
|
'Investment Timeline', |
||||
|
true |
||||
|
); |
||||
|
createChart('dividendChart', dividendData, 'Dividend Timeline', true); |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,273 @@ |
|||||
|
import { |
||||
|
getChartColorPalette, |
||||
|
getPerformanceColor, |
||||
|
getAllocationColor |
||||
|
} from './chart-theme'; |
||||
|
import { ColorScheme } from './types'; |
||||
|
|
||||
|
/** |
||||
|
* Standardized Chart Configuration for Ghostfolio |
||||
|
* |
||||
|
* Provides consistent styling, layout, and behavior across all chart types |
||||
|
*/ |
||||
|
|
||||
|
export interface ChartConfigOptions { |
||||
|
colorScheme?: ColorScheme; |
||||
|
currency?: string; |
||||
|
locale?: string; |
||||
|
unit?: string; |
||||
|
showLegend?: boolean; |
||||
|
showGrid?: boolean; |
||||
|
aspectRatio?: number; |
||||
|
responsive?: boolean; |
||||
|
maintainAspectRatio?: boolean; |
||||
|
} |
||||
|
|
||||
|
export interface ChartLayoutConfig { |
||||
|
padding?: number; |
||||
|
spacing?: number; |
||||
|
borderRadius?: number; |
||||
|
borderWidth?: number; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get standardized chart options with consistent styling |
||||
|
*/ |
||||
|
export function getStandardChartOptions( |
||||
|
options: ChartConfigOptions = {}, |
||||
|
layoutConfig: ChartLayoutConfig = {} |
||||
|
): any { |
||||
|
const { |
||||
|
colorScheme = 'LIGHT', |
||||
|
showLegend = false, |
||||
|
showGrid = true, |
||||
|
aspectRatio = 16 / 9, |
||||
|
responsive = true, |
||||
|
maintainAspectRatio = true |
||||
|
} = options; |
||||
|
|
||||
|
const { |
||||
|
padding = 0, |
||||
|
spacing = 2, |
||||
|
borderRadius = 4, |
||||
|
borderWidth = 1 |
||||
|
} = layoutConfig; |
||||
|
|
||||
|
const palette = getChartColorPalette(colorScheme); |
||||
|
|
||||
|
return { |
||||
|
responsive, |
||||
|
maintainAspectRatio, |
||||
|
aspectRatio, |
||||
|
layout: { |
||||
|
padding: padding |
||||
|
}, |
||||
|
plugins: { |
||||
|
legend: { |
||||
|
display: showLegend, |
||||
|
position: 'bottom', |
||||
|
align: 'start', |
||||
|
labels: { |
||||
|
usePointStyle: true, |
||||
|
padding: spacing * 4, |
||||
|
font: { |
||||
|
size: 12, |
||||
|
family: 'Inter, sans-serif' |
||||
|
}, |
||||
|
color: palette.text.secondary |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
enabled: true, |
||||
|
backgroundColor: palette.background, |
||||
|
titleColor: palette.text.primary, |
||||
|
bodyColor: palette.text.primary, |
||||
|
borderColor: palette.border, |
||||
|
borderWidth: 1, |
||||
|
cornerRadius: borderRadius, |
||||
|
displayColors: true, |
||||
|
usePointStyle: true, |
||||
|
padding: spacing * 3, |
||||
|
font: { |
||||
|
size: 12, |
||||
|
family: 'Inter, sans-serif' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
scales: { |
||||
|
x: { |
||||
|
display: true, |
||||
|
grid: { |
||||
|
display: showGrid, |
||||
|
color: palette.grid, |
||||
|
tickLength: spacing * 2 |
||||
|
}, |
||||
|
border: { |
||||
|
display: true, |
||||
|
color: palette.border, |
||||
|
width: borderWidth |
||||
|
}, |
||||
|
ticks: { |
||||
|
display: true, |
||||
|
color: palette.text.secondary, |
||||
|
padding: spacing * 2, |
||||
|
font: { |
||||
|
size: 11, |
||||
|
family: 'Inter, sans-serif' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
y: { |
||||
|
display: true, |
||||
|
position: 'right', |
||||
|
grid: { |
||||
|
display: showGrid, |
||||
|
color: palette.grid, |
||||
|
tickLength: spacing * 2 |
||||
|
}, |
||||
|
ticks: { |
||||
|
display: true, |
||||
|
color: palette.text.secondary, |
||||
|
padding: spacing * 2, |
||||
|
mirror: true, |
||||
|
z: 1, |
||||
|
font: { |
||||
|
size: 11, |
||||
|
family: 'Inter, sans-serif' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
elements: { |
||||
|
point: { |
||||
|
radius: 0, |
||||
|
hoverRadius: spacing * 2, |
||||
|
borderWidth: 0 |
||||
|
}, |
||||
|
line: { |
||||
|
borderWidth: borderWidth * 2, |
||||
|
tension: 0, |
||||
|
fill: false |
||||
|
}, |
||||
|
bar: { |
||||
|
borderWidth: 0, |
||||
|
borderRadius: borderRadius |
||||
|
}, |
||||
|
arc: { |
||||
|
borderWidth: 0, |
||||
|
borderRadius: borderRadius |
||||
|
} |
||||
|
}, |
||||
|
animation: false, |
||||
|
interaction: { |
||||
|
intersect: false, |
||||
|
mode: 'index' |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get standardized colors for chart datasets |
||||
|
*/ |
||||
|
export function getStandardDatasetColors( |
||||
|
index: number, |
||||
|
type: 'line' | 'bar' | 'doughnut' | 'treemap', |
||||
|
colorScheme: ColorScheme = 'LIGHT', |
||||
|
value?: number |
||||
|
): { |
||||
|
backgroundColor: string | string[]; |
||||
|
borderColor: string | string[]; |
||||
|
hoverBackgroundColor?: string | string[]; |
||||
|
hoverBorderColor?: string | string[]; |
||||
|
} { |
||||
|
const palette = getChartColorPalette(colorScheme); |
||||
|
|
||||
|
switch (type) { |
||||
|
case 'line': |
||||
|
return { |
||||
|
backgroundColor: 'transparent', |
||||
|
borderColor: index === 0 ? palette.primary : palette.secondary, |
||||
|
hoverBackgroundColor: palette.hover |
||||
|
}; |
||||
|
|
||||
|
case 'bar': |
||||
|
return { |
||||
|
backgroundColor: getAllocationColor(index, colorScheme), |
||||
|
borderColor: 'transparent', |
||||
|
hoverBackgroundColor: palette.hover |
||||
|
}; |
||||
|
|
||||
|
case 'doughnut': |
||||
|
return { |
||||
|
backgroundColor: getAllocationColor(index, colorScheme), |
||||
|
borderColor: 'transparent', |
||||
|
hoverBackgroundColor: palette.hover |
||||
|
}; |
||||
|
|
||||
|
case 'treemap': |
||||
|
if (value !== undefined) { |
||||
|
return { |
||||
|
backgroundColor: getPerformanceColor(value, colorScheme), |
||||
|
borderColor: 'transparent' |
||||
|
}; |
||||
|
} |
||||
|
return { |
||||
|
backgroundColor: getAllocationColor(index, colorScheme), |
||||
|
borderColor: 'transparent' |
||||
|
}; |
||||
|
|
||||
|
default: |
||||
|
return { |
||||
|
backgroundColor: palette.primary, |
||||
|
borderColor: palette.primary |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get responsive breakpoints for charts |
||||
|
*/ |
||||
|
export function getChartBreakpoints() { |
||||
|
return { |
||||
|
mobile: 480, |
||||
|
tablet: 768, |
||||
|
desktop: 1024, |
||||
|
large: 1440 |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get responsive chart configuration |
||||
|
*/ |
||||
|
export function getResponsiveChartConfig( |
||||
|
colorScheme: ColorScheme = 'LIGHT', |
||||
|
deviceType: 'mobile' | 'tablet' | 'desktop' = 'desktop' |
||||
|
): Partial<ChartConfigOptions> { |
||||
|
const baseConfig: ChartConfigOptions = { |
||||
|
colorScheme, |
||||
|
showLegend: deviceType !== 'mobile', |
||||
|
aspectRatio: deviceType === 'mobile' ? 1 : 16 / 9, |
||||
|
maintainAspectRatio: deviceType !== 'mobile' |
||||
|
}; |
||||
|
|
||||
|
switch (deviceType) { |
||||
|
case 'mobile': |
||||
|
return { |
||||
|
...baseConfig, |
||||
|
aspectRatio: 1, |
||||
|
maintainAspectRatio: false, |
||||
|
showLegend: false, |
||||
|
showGrid: false |
||||
|
}; |
||||
|
|
||||
|
case 'tablet': |
||||
|
return { |
||||
|
...baseConfig, |
||||
|
aspectRatio: 4 / 3, |
||||
|
showLegend: true |
||||
|
}; |
||||
|
|
||||
|
default: |
||||
|
return baseConfig; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,287 @@ |
|||||
|
import { ColorScheme } from './types'; |
||||
|
|
||||
|
/** |
||||
|
* Chart Color Theme System for Ghostfolio |
||||
|
* |
||||
|
* Provides consistent color schemes across all chart types with support for: |
||||
|
* - Light and dark themes |
||||
|
* - Semantic color meanings (positive, negative, neutral) |
||||
|
* - Performance-based color coding |
||||
|
* - Accessibility-compliant contrast ratios |
||||
|
*/ |
||||
|
|
||||
|
export interface ChartColorPalette { |
||||
|
// Primary chart colors
|
||||
|
primary: string; |
||||
|
secondary: string; |
||||
|
accent: string; |
||||
|
|
||||
|
// Semantic colors
|
||||
|
positive: string; |
||||
|
negative: string; |
||||
|
neutral: string; |
||||
|
warning: string; |
||||
|
info: string; |
||||
|
|
||||
|
// Performance-based colors (green to red spectrum)
|
||||
|
performance: { |
||||
|
excellent: string; |
||||
|
good: string; |
||||
|
average: string; |
||||
|
poor: string; |
||||
|
terrible: string; |
||||
|
}; |
||||
|
|
||||
|
// Allocation colors (diverse palette for categories)
|
||||
|
allocation: string[]; |
||||
|
|
||||
|
// Background and text colors
|
||||
|
background: string; |
||||
|
surface: string; |
||||
|
text: { |
||||
|
primary: string; |
||||
|
secondary: string; |
||||
|
disabled: string; |
||||
|
}; |
||||
|
|
||||
|
// Interactive states
|
||||
|
hover: string; |
||||
|
active: string; |
||||
|
focus: string; |
||||
|
|
||||
|
// Grid and border colors
|
||||
|
grid: string; |
||||
|
border: string; |
||||
|
} |
||||
|
|
||||
|
export interface ChartTheme { |
||||
|
light: ChartColorPalette; |
||||
|
dark: ChartColorPalette; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Generate color palette based on color scheme |
||||
|
*/ |
||||
|
export function getChartColorPalette( |
||||
|
colorScheme: ColorScheme = 'LIGHT' |
||||
|
): ChartColorPalette { |
||||
|
const isDark = colorScheme === 'DARK'; |
||||
|
|
||||
|
if (isDark) { |
||||
|
return { |
||||
|
// Primary chart colors
|
||||
|
primary: '#64b5f6', // Light blue
|
||||
|
secondary: '#81c784', // Light green
|
||||
|
accent: '#ffb74d', // Orange
|
||||
|
|
||||
|
// Semantic colors
|
||||
|
positive: '#4caf50', // Green
|
||||
|
negative: '#f44336', // Red
|
||||
|
neutral: '#9e9e9e', // Grey
|
||||
|
warning: '#ff9800', // Orange
|
||||
|
info: '#2196f3', // Blue
|
||||
|
|
||||
|
// Performance-based colors
|
||||
|
performance: { |
||||
|
excellent: '#2e7d32', // Dark green
|
||||
|
good: '#4caf50', // Green
|
||||
|
average: '#8bc34a', // Light green
|
||||
|
poor: '#ff5722', // Deep orange
|
||||
|
terrible: '#d32f2f' // Dark red
|
||||
|
}, |
||||
|
|
||||
|
// Allocation colors (diverse palette)
|
||||
|
allocation: [ |
||||
|
'#2196f3', // Blue
|
||||
|
'#4caf50', // Green
|
||||
|
'#ff9800', // Orange
|
||||
|
'#9c27b0', // Purple
|
||||
|
'#f44336', // Red
|
||||
|
'#00bcd4', // Cyan
|
||||
|
'#ffc107', // Amber
|
||||
|
'#795548', // Brown
|
||||
|
'#607d8b', // Blue grey
|
||||
|
'#e91e63', // Pink
|
||||
|
'#3f51b5', // Indigo
|
||||
|
'#009688', // Teal
|
||||
|
'#8bc34a', // Light green
|
||||
|
'#ff5722', // Deep orange
|
||||
|
'#9c27b0' // Purple
|
||||
|
], |
||||
|
|
||||
|
// Background and text colors
|
||||
|
background: '#121212', |
||||
|
surface: '#1e1e1e', |
||||
|
text: { |
||||
|
primary: '#ffffff', |
||||
|
secondary: '#b3b3b3', |
||||
|
disabled: '#666666' |
||||
|
}, |
||||
|
|
||||
|
// Interactive states
|
||||
|
hover: 'rgba(255, 255, 255, 0.08)', |
||||
|
active: 'rgba(255, 255, 255, 0.16)', |
||||
|
focus: 'rgba(100, 181, 246, 0.24)', |
||||
|
|
||||
|
// Grid and border colors
|
||||
|
grid: 'rgba(255, 255, 255, 0.08)', |
||||
|
border: 'rgba(255, 255, 255, 0.12)' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// Light theme
|
||||
|
return { |
||||
|
// Primary chart colors
|
||||
|
primary: '#1976d2', // Blue
|
||||
|
secondary: '#388e3c', // Green
|
||||
|
accent: '#f57c00', // Orange
|
||||
|
|
||||
|
// Semantic colors
|
||||
|
positive: '#2e7d32', // Green
|
||||
|
negative: '#d32f2f', // Red
|
||||
|
neutral: '#757575', // Grey
|
||||
|
warning: '#f57c00', // Orange
|
||||
|
info: '#1976d2', // Blue
|
||||
|
|
||||
|
// Performance-based colors
|
||||
|
performance: { |
||||
|
excellent: '#1b5e20', // Dark green
|
||||
|
good: '#2e7d32', // Green
|
||||
|
average: '#4caf50', // Light green
|
||||
|
poor: '#f57c00', // Orange
|
||||
|
terrible: '#d32f2f' // Dark red
|
||||
|
}, |
||||
|
|
||||
|
// Allocation colors (diverse palette)
|
||||
|
allocation: [ |
||||
|
'#1976d2', // Blue
|
||||
|
'#388e3c', // Green
|
||||
|
'#f57c00', // Orange
|
||||
|
'#7b1fa2', // Purple
|
||||
|
'#d32f2f', // Red
|
||||
|
'#00796b', // Teal
|
||||
|
'#fbc02d', // Yellow
|
||||
|
'#5d4037', // Brown
|
||||
|
'#455a64', // Blue grey
|
||||
|
'#c2185b', // Pink
|
||||
|
'#3f51b5', // Indigo
|
||||
|
'#009688', // Teal
|
||||
|
'#689f38', // Light green
|
||||
|
'#e65100', // Deep orange
|
||||
|
'#7b1fa2' // Purple
|
||||
|
], |
||||
|
|
||||
|
// Background and text colors
|
||||
|
background: '#ffffff', |
||||
|
surface: '#f5f5f5', |
||||
|
text: { |
||||
|
primary: '#212121', |
||||
|
secondary: '#757575', |
||||
|
disabled: '#bdbdbd' |
||||
|
}, |
||||
|
|
||||
|
// Interactive states
|
||||
|
hover: 'rgba(0, 0, 0, 0.04)', |
||||
|
active: 'rgba(0, 0, 0, 0.08)', |
||||
|
focus: 'rgba(25, 118, 210, 0.12)', |
||||
|
|
||||
|
// Grid and border colors
|
||||
|
grid: 'rgba(0, 0, 0, 0.08)', |
||||
|
border: 'rgba(0, 0, 0, 0.12)' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get performance color based on percentage value |
||||
|
*/ |
||||
|
export function getPerformanceColor( |
||||
|
percentage: number, |
||||
|
colorScheme: ColorScheme = 'LIGHT' |
||||
|
): string { |
||||
|
const palette = getChartColorPalette(colorScheme); |
||||
|
|
||||
|
if (percentage >= 15) return palette.performance.excellent; |
||||
|
if (percentage >= 5) return palette.performance.good; |
||||
|
if (percentage >= -5) return palette.performance.average; |
||||
|
if (percentage >= -15) return palette.performance.poor; |
||||
|
return palette.performance.terrible; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get allocation color for index-based coloring |
||||
|
*/ |
||||
|
export function getAllocationColor( |
||||
|
index: number, |
||||
|
colorScheme: ColorScheme = 'LIGHT' |
||||
|
): string { |
||||
|
const palette = getChartColorPalette(colorScheme); |
||||
|
return palette.allocation[index % palette.allocation.length]; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Get semantic color based on context |
||||
|
*/ |
||||
|
export function getSemanticColor( |
||||
|
type: 'positive' | 'negative' | 'neutral' | 'warning' | 'info', |
||||
|
colorScheme: ColorScheme = 'LIGHT' |
||||
|
): string { |
||||
|
const palette = getChartColorPalette(colorScheme); |
||||
|
return palette[type]; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Calculate relative luminance of a color (0-1 scale) |
||||
|
* Based on WCAG guidelines for color contrast |
||||
|
*/ |
||||
|
function calculateLuminance(color: string): number { |
||||
|
// Convert hex to RGB
|
||||
|
const hex = color.replace('#', ''); |
||||
|
const r = parseInt(hex.substr(0, 2), 16) / 255; |
||||
|
const g = parseInt(hex.substr(2, 2), 16) / 255; |
||||
|
const b = parseInt(hex.substr(4, 2), 16) / 255; |
||||
|
|
||||
|
// Apply gamma correction
|
||||
|
const gammaCorrect = (value: number): number => { |
||||
|
return value <= 0.03928 |
||||
|
? value / 12.92 |
||||
|
: Math.pow((value + 0.055) / 1.055, 2.4); |
||||
|
}; |
||||
|
|
||||
|
const rCorrected = gammaCorrect(r); |
||||
|
const gCorrected = gammaCorrect(g); |
||||
|
const bCorrected = gammaCorrect(b); |
||||
|
|
||||
|
// Calculate relative luminance
|
||||
|
return 0.2126 * rCorrected + 0.7152 * gCorrected + 0.0722 * bCorrected; |
||||
|
} |
||||
|
export function getContrastTextColor( |
||||
|
backgroundColor: string, |
||||
|
colorScheme: ColorScheme = 'LIGHT' |
||||
|
): string { |
||||
|
const palette = getChartColorPalette(colorScheme); |
||||
|
|
||||
|
// Calculate relative luminance of the background color
|
||||
|
const luminance = calculateLuminance(backgroundColor); |
||||
|
|
||||
|
// Use dark text for light backgrounds, light text for dark backgrounds
|
||||
|
return luminance > 0.5 ? palette.text.primary : '#ffffff'; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Generate gradient colors for area charts |
||||
|
*/ |
||||
|
export function generateGradientColors( |
||||
|
baseColor: string, |
||||
|
colorScheme: ColorScheme = 'LIGHT', |
||||
|
opacity: number = 0.1 |
||||
|
): { start: string; end: string } { |
||||
|
// Using palette for potential future enhancements
|
||||
|
getChartColorPalette(colorScheme); |
||||
|
|
||||
|
return { |
||||
|
start: `${baseColor}${Math.round(opacity * 255) |
||||
|
.toString(16) |
||||
|
.padStart(2, '0')}`,
|
||||
|
end: baseColor |
||||
|
}; |
||||
|
} |
||||
Loading…
Reference in new issue