Skip to content

Commit 34f0d50

Browse files
twentyTwotwentyTwo
committed
Enhance summary view with theme-aware chart configurations and improved styling
- Updated CSS variables for better theme support in charts and input elements. - Refactored chart creation logic to utilize common configurations for consistency. - Improved data handling for project and daily summary charts, including better date formatting and tooltip customization. - Adjusted heatmap cell background colors to use CSS variables for enhanced readability.
1 parent f2a5585 commit 34f0d50

1 file changed

Lines changed: 152 additions & 66 deletions

File tree

‎src/summaryView.ts‎

Lines changed: 152 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,19 @@ export class SummaryViewProvider implements vscode.WebviewViewProvider {
132132
--border-color: var(--vscode-panel-border);
133133
--header-background: var(--vscode-titleBar-activeBackground);
134134
--header-foreground: var(--vscode-titleBar-activeForeground);
135-
--chart-grid-color: var(--vscode-panel-border);
136-
--chart-text-color: var(--vscode-editor-foreground);
135+
--chart-grid-color: rgba(255, 255, 255, 0.1);
136+
--chart-text-color: rgba(255, 255, 255, 0.9);
137+
--input-background: var(--vscode-input-background);
138+
--input-foreground: var(--vscode-input-foreground);
139+
--input-border: var(--vscode-input-border);
140+
--button-background: var(--vscode-button-background);
141+
--button-foreground: var(--vscode-button-foreground);
142+
--button-hover: var(--vscode-button-hoverBackground);
143+
--cell-background-0: var(--vscode-editor-background);
144+
--cell-background-1: color-mix(in srgb, var(--vscode-charts-blue) 30%, transparent);
145+
--cell-background-2: color-mix(in srgb, var(--vscode-charts-blue) 50%, transparent);
146+
--cell-background-3: color-mix(in srgb, var(--vscode-charts-blue) 70%, transparent);
147+
--cell-background-4: color-mix(in srgb, var(--vscode-charts-blue) 90%, transparent);
137148
}
138149
body {
139150
font-family: var(--vscode-font-family);
@@ -319,11 +330,11 @@ export class SummaryViewProvider implements vscode.WebviewViewProvider {
319330
.heatmap-cell:hover {
320331
transform: scale(1.1);
321332
}
322-
.heatmap-cell[data-level="0"] { background-color: var(--vscode-editor-background); }
323-
.heatmap-cell[data-level="1"] { background-color: #4a72b0; }
324-
.heatmap-cell[data-level="2"] { background-color: #3861a5; }
325-
.heatmap-cell[data-level="3"] { background-color: #254b91; }
326-
.heatmap-cell[data-level="4"] { background-color: #1a3b7c; }
333+
.heatmap-cell[data-level="0"] { background-color: var(--cell-background-0); }
334+
.heatmap-cell[data-level="1"] { background-color: var(--cell-background-1); }
335+
.heatmap-cell[data-level="2"] { background-color: var(--cell-background-2); }
336+
.heatmap-cell[data-level="3"] { background-color: var(--cell-background-3); }
337+
.heatmap-cell[data-level="4"] { background-color: var(--cell-background-4); }
327338
.heatmap-legend {
328339
display: flex;
329340
align-items: center;
@@ -429,6 +440,96 @@ export class SummaryViewProvider implements vscode.WebviewViewProvider {
429440
<script>
430441
const vscode = acquireVsCodeApi();
431442
443+
// Get theme colors
444+
const isDarkTheme = document.body.classList.contains('vscode-dark');
445+
const style = getComputedStyle(document.documentElement);
446+
447+
// Theme-aware colors
448+
const chartColors = {
449+
text: isDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)',
450+
background: style.getPropertyValue('--vscode-editor-background'),
451+
grid: isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
452+
accent: style.getPropertyValue('--vscode-textLink-foreground'),
453+
chartBlues: [
454+
'rgba(64, 159, 255, 0.8)',
455+
'rgba(49, 120, 198, 0.8)',
456+
'rgba(35, 86, 141, 0.8)',
457+
'rgba(28, 69, 113, 0.8)',
458+
'rgba(21, 52, 85, 0.8)'
459+
]
460+
};
461+
462+
// Common chart configuration
463+
const commonChartConfig = {
464+
responsive: true,
465+
maintainAspectRatio: false,
466+
scales: {
467+
y: {
468+
beginAtZero: true,
469+
grid: {
470+
color: chartColors.grid,
471+
borderColor: chartColors.grid,
472+
lineWidth: 0.5
473+
},
474+
ticks: {
475+
color: chartColors.text,
476+
font: {
477+
size: 12,
478+
weight: '500'
479+
},
480+
padding: 8
481+
},
482+
title: {
483+
display: true,
484+
color: chartColors.text
485+
}
486+
},
487+
x: {
488+
grid: {
489+
color: chartColors.grid,
490+
borderColor: chartColors.grid,
491+
lineWidth: 0.5
492+
},
493+
ticks: {
494+
color: chartColors.text,
495+
font: {
496+
size: 12,
497+
weight: '500'
498+
},
499+
padding: 8
500+
},
501+
title: {
502+
display: true,
503+
color: chartColors.text
504+
}
505+
}
506+
},
507+
plugins: {
508+
legend: {
509+
display: true,
510+
position: 'top',
511+
labels: {
512+
color: chartColors.text,
513+
font: {
514+
size: 12,
515+
weight: '600'
516+
},
517+
padding: 20,
518+
usePointStyle: true
519+
}
520+
},
521+
tooltip: {
522+
backgroundColor: isDarkTheme ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)',
523+
titleColor: chartColors.text,
524+
bodyColor: chartColors.text,
525+
borderColor: chartColors.grid,
526+
borderWidth: 1,
527+
padding: 12,
528+
displayColors: false
529+
}
530+
}
531+
};
532+
432533
window.addEventListener('message', event => {
433534
const message = event.data;
434535
if (message.command === 'update') {
@@ -482,7 +583,7 @@ export class SummaryViewProvider implements vscode.WebviewViewProvider {
482583
const content = document.getElementById('content');
483584
content.innerHTML = \`
484585
<div class="chart-container">
485-
<div class="chart-title">Project Summary</div>
586+
<div class="chart-title">Project Summary 1</div>
486587
<div class="chart-wrapper">
487588
<canvas id="projectChart"></canvas>
488589
</div>
@@ -495,109 +596,94 @@ export class SummaryViewProvider implements vscode.WebviewViewProvider {
495596
</div>
496597
\`;
497598
498-
// Create project summary chart
599+
// Project summary chart
499600
const projectCtx = document.getElementById('projectChart').getContext('2d');
500601
const projectData = Object.entries(data.projectSummary)
501602
.sort((a, b) => b[1] - a[1])
502-
.slice(0, 5); // Show top 5 projects
603+
.slice(0, 5);
503604
504605
new Chart(projectCtx, {
505606
type: 'bar',
506607
data: {
507608
labels: projectData.map(([project]) => project),
508609
datasets: [{
509610
label: 'Coding Time (hours)',
510-
data: projectData.map(([_, time]) => time / 60),
511-
backgroundColor: 'rgba(74, 114, 176, 0.7)',
512-
borderColor: 'rgba(74, 114, 176, 1)',
611+
data: projectData.map(([_, time]) => time / 3600),
612+
backgroundColor: chartColors.chartBlues,
613+
borderColor: chartColors.grid,
513614
borderWidth: 1
514615
}]
515616
},
516617
options: {
517-
responsive: true,
518-
maintainAspectRatio: false,
519-
scales: {
520-
y: {
521-
beginAtZero: true,
522-
grid: {
523-
color: 'var(--chart-grid-color)'
524-
},
525-
ticks: {
526-
color: 'var(--chart-text-color)'
527-
}
528-
},
529-
x: {
530-
grid: {
531-
color: 'var(--chart-grid-color)'
532-
},
533-
ticks: {
534-
color: 'var(--chart-text-color)'
535-
}
536-
}
537-
},
618+
...commonChartConfig,
619+
indexAxis: 'y',
538620
plugins: {
539-
legend: {
540-
labels: {
541-
color: 'var(--chart-text-color)'
621+
...commonChartConfig.plugins,
622+
tooltip: {
623+
...commonChartConfig.plugins.tooltip,
624+
callbacks: {
625+
label: function(context) {
626+
const hours = context.raw;
627+
return \`\${Math.floor(hours)}h \${Math.round((hours % 1) * 60)}m\`;
628+
}
542629
}
543630
}
544631
}
545632
}
546633
});
547634
548-
// Create daily summary chart
635+
// Daily summary chart
549636
const dailyCtx = document.getElementById('dailyChart').getContext('2d');
550637
const dailyData = Object.entries(data.dailySummary)
551-
.sort((a, b) => b[0].localeCompare(a[0]))
552-
.slice(0, 7);
638+
.sort((a, b) => new Date(a[0]).getTime() - new Date(b[0]).getTime())
639+
.slice(-7);
553640
554641
new Chart(dailyCtx, {
555642
type: 'line',
556643
data: {
557-
labels: dailyData.map(([date]) => date),
644+
labels: dailyData.map(([date]) => {
645+
const d = new Date(date);
646+
return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
647+
}),
558648
datasets: [{
559649
label: 'Coding Time (hours)',
560-
data: dailyData.map(([_, time]) => time / 60),
650+
data: dailyData.map(([_, time]) => time / 3600),
561651
fill: true,
562-
backgroundColor: 'rgba(74, 114, 176, 0.2)',
563-
borderColor: 'rgba(74, 114, 176, 1)',
564-
tension: 0.4
652+
backgroundColor: \`\${chartColors.accent}33\`,
653+
borderColor: chartColors.accent,
654+
borderWidth: 2,
655+
tension: 0.4,
656+
pointBackgroundColor: chartColors.accent,
657+
pointBorderColor: chartColors.background,
658+
pointBorderWidth: 2,
659+
pointRadius: 4,
660+
pointHoverRadius: 6
565661
}]
566662
},
567663
options: {
568-
responsive: true,
569-
maintainAspectRatio: false,
664+
...commonChartConfig,
570665
scales: {
666+
...commonChartConfig.scales,
571667
y: {
572-
beginAtZero: true,
573-
grid: {
574-
color: 'var(--chart-grid-color)'
575-
},
668+
...commonChartConfig.scales.y,
576669
ticks: {
577-
color: 'var(--chart-text-color)'
670+
...commonChartConfig.scales.y.ticks,
671+
callback: function(value) {
672+
return \`\${value}h\`;
673+
}
578674
}
579675
},
580676
x: {
581-
grid: {
582-
color: 'var(--chart-grid-color)'
583-
},
677+
...commonChartConfig.scales.x,
584678
ticks: {
585-
color: 'var(--chart-text-color)'
586-
}
587-
}
588-
},
589-
plugins: {
590-
legend: {
591-
labels: {
592-
color: 'var(--chart-text-color)'
679+
...commonChartConfig.scales.x.ticks,
680+
maxRotation: 45,
681+
minRotation: 45
593682
}
594683
}
595684
}
596685
}
597686
});
598-
599-
// Add heatmap creation
600-
createHeatmap(data);
601687
}
602688
603689
function displaySearchResult(entries) {

0 commit comments

Comments
 (0)