@moontra/moonui-pro/src/styles/advanced-chart.css

Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components

/* Advanced Chart Styles */

/* Chart animation classes */
.chart-animate-in {
  animation: chartFadeIn 0.5s ease-out;
}

.chart-point-pulse {
  animation: pointPulse 2s ease-in-out infinite;
}

.chart-gradient-shift {
  animation: gradientShift 3s ease-in-out infinite;
}

/* Custom chart tooltips */
.recharts-tooltip-wrapper {
  outline: none !important;
}

.recharts-tooltip-cursor {
  fill: hsl(var(--muted) / 0.1);
}

/* Legend hover effects */
.recharts-legend-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.recharts-legend-item:hover {
  transform: translateY(-1px);
}

/* Smooth chart transitions */
.recharts-line-curve,
.recharts-area-curve {
  transition: all 0.3s ease;
}

.recharts-bar-rectangle {
  transition: all 0.2s ease;
}

.recharts-bar-rectangle:hover {
  filter: brightness(1.1);
}

/* Pie chart enhancements */
.recharts-pie-sector {
  transition: all 0.2s ease;
  cursor: pointer;
}

.recharts-pie-sector:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

/* Brush styling */
.recharts-brush {
  fill: hsl(var(--primary) / 0.1);
  stroke: hsl(var(--primary) / 0.3);
}

.recharts-brush-slide {
  fill: hsl(var(--primary) / 0.2);
  fill-opacity: 0.5;
}

/* Grid styling */
.recharts-cartesian-grid-horizontal line,
.recharts-cartesian-grid-vertical line {
  stroke-dasharray: 3 3;
  opacity: 0.3;
}

/* Axis styling */
.recharts-xAxis .recharts-cartesian-axis-tick-value,
.recharts-yAxis .recharts-cartesian-axis-tick-value {
  fill: hsl(var(--muted-foreground));
  font-size: 11px;
}

/* Dark mode enhancements */
.dark .recharts-tooltip-wrapper {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.dark .recharts-cartesian-grid-horizontal line,
.dark .recharts-cartesian-grid-vertical line {
  opacity: 0.2;
}

/* Sparkline mode */
.sparkline-chart .recharts-surface {
  overflow: visible !important;
}

/* Loading skeleton animation */
@keyframes chartSkeletonPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scaleY(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Chart animations */
@keyframes chartFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pointPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes gradientShift {
  0%, 100% {
    stop-opacity: 0.8;
  }
  50% {
    stop-opacity: 0.4;
  }
}

/* Interactive legend styles */
.chart-legend-item {
  position: relative;
  overflow: hidden;
}

.chart-legend-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);
  transition: left 0.5s ease;
}

.chart-legend-item:hover::before {
  left: 100%;
}

/* Crosshair cursor */
.chart-crosshair {
  stroke: hsl(var(--muted-foreground));
  stroke-width: 1;
  stroke-dasharray: 5 5;
  opacity: 0.5;
}

/* Mini map styles */
.chart-minimap {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--background) / 0.8);
  backdrop-filter: blur(8px);
}

/* Export menu animation */
.chart-export-menu {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Zoom indicator */
.chart-zoom-indicator {
  background: hsl(var(--background) / 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Performance optimizations */
.recharts-surface {
  will-change: transform;
}

.recharts-line,
.recharts-area,
.recharts-bar {
  will-change: opacity, transform;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .recharts-wrapper {
    font-size: 0.875rem;
  }
  
  .recharts-legend-wrapper {
    margin-top: 1rem !important;
  }
}

/* Print styles */
@media print {
  .chart-controls {
    display: none !important;
  }
  
  .recharts-tooltip-wrapper {
    display: none !important;
  }
}