feat: migrate to apache echarts (#4)
Co-authored-by: terraputix <terraputix@mailbox.org> Reviewed-on: useweb/open-meteo-blue#4
This commit was merged in pull request #4.
This commit is contained in:
terraputix
@@ -0,0 +1,164 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════════════════
|
||||
ECharts Global Styles — Open-Meteo Weather
|
||||
|
||||
Shared CSS for all ECharts chart instances across the application.
|
||||
Provides consistent theming, tooltip styling, and responsive behavior
|
||||
that integrates with the application's design system (Tailwind + shadcn).
|
||||
═══════════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ─── Chart Wrapper ────────────────────────────────────────────────────────── */
|
||||
|
||||
.echart-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ─── Chart Container (legacy class support) ───────────────────────────────── */
|
||||
|
||||
.echarts-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
/* Ensure canvas background is always transparent so our page bg shows through */
|
||||
.echart-wrapper canvas,
|
||||
.echarts-container canvas {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* ─── Tooltip Styling ──────────────────────────────────────────────────────── */
|
||||
|
||||
/* Override ECharts' default tooltip to match the application's popover design */
|
||||
.echarts-tooltip {
|
||||
background: hsl(var(--popover)) !important;
|
||||
border: 1px solid hsl(var(--border)) !important;
|
||||
border-radius: var(--radius, 0.5rem) !important;
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
||||
0 2px 4px -2px rgb(0 0 0 / 0.05) !important;
|
||||
padding: 0.625rem 0.75rem !important;
|
||||
font-size: 0.8125rem !important;
|
||||
line-height: 1.4 !important;
|
||||
max-width: min(90vw, 480px) !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.echarts-tooltip-content {
|
||||
color: hsl(var(--popover-foreground)) !important;
|
||||
}
|
||||
|
||||
/* Tooltip marker dots — make them slightly larger and rounded */
|
||||
.echarts-tooltip .echarts-tooltip-marker,
|
||||
.echarts-tooltip span[style*="border-radius"] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* ─── Loading Mask ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.echarts-loading-mask {
|
||||
background: hsl(var(--background) / 0.8) !important;
|
||||
}
|
||||
|
||||
/* ─── Light Mode Adjustments ───────────────────────────────────────────────── */
|
||||
|
||||
[data-theme='light'] .echart-wrapper,
|
||||
[data-theme='light'] .echarts-container,
|
||||
:root:not(.dark):not([data-theme='dark']) .echart-wrapper,
|
||||
:root:not(.dark):not([data-theme='dark']) .echarts-container {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
[data-theme='light'] .echarts-tooltip,
|
||||
:root:not(.dark):not([data-theme='dark']) .echarts-tooltip {
|
||||
color: hsl(var(--popover-foreground)) !important;
|
||||
}
|
||||
|
||||
/* ─── Dark Mode Adjustments ────────────────────────────────────────────────── */
|
||||
|
||||
.dark .echart-wrapper,
|
||||
[data-theme='dark'] .echart-wrapper,
|
||||
.dark .echarts-container,
|
||||
[data-theme='dark'] .echarts-container {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.dark .echarts-tooltip,
|
||||
[data-theme='dark'] .echarts-tooltip {
|
||||
color: hsl(var(--popover-foreground)) !important;
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgb(0 0 0 / 0.3),
|
||||
0 2px 4px -2px rgb(0 0 0 / 0.15) !important;
|
||||
}
|
||||
|
||||
/* ─── Toolbox Icon Overrides ───────────────────────────────────────────────── */
|
||||
|
||||
/* Make sure the toolbox icons are visually subtle until hovered */
|
||||
.echart-wrapper [class*="toolbox"],
|
||||
.echarts-container [class*="toolbox"] {
|
||||
opacity: 0.6;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.echart-wrapper:hover [class*="toolbox"],
|
||||
.echarts-container:hover [class*="toolbox"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ─── Chart Spacing ────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Add consistent vertical spacing between stacked chart instances */
|
||||
.chart-content .echart-wrapper + .echart-wrapper {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* ─── Responsive Sizing ────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.echarts-container {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
/* Slightly smaller tooltips on mobile */
|
||||
.echarts-tooltip {
|
||||
font-size: 0.75rem !important;
|
||||
padding: 0.5rem 0.625rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) and (max-width: 1024px) {
|
||||
.echarts-container {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Print Styles ─────────────────────────────────────────────────────────── */
|
||||
|
||||
@media print {
|
||||
.echart-wrapper,
|
||||
.echarts-container {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Hide interactive elements when printing */
|
||||
.echart-wrapper [class*="toolbox"],
|
||||
.echarts-container [class*="toolbox"],
|
||||
.chart-toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Accessibility ────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Respect reduced motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.echart-wrapper *,
|
||||
.echarts-container * {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user