nebula/components/charts_templ.go

// Code generated by templ - DO NOT EDIT.

// templ: version: v0.3.977
package components

//lint:file-ignore SA4006 This context is only used if a nested component is present.

import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"

import (
	"encoding/json"

	"nebula/models"
)

type OHLCData struct {
	Date  string  `json:"date"`
	Open  float64 `json:"open"`
	High  float64 `json:"high"`
	Low   float64 `json:"low"`
	Close float64 `json:"close"`
}

type TimeSeriesData struct {
	Date  string  `json:"date"`
	Value float64 `json:"value"`
}

func toJSON(v interface{}) string {
	b, _ := json.Marshal(v)
	return string(b)
}

// RosenCharts global utilities and chart classes
func initRosenCharts() templ.ComponentScript {
	return templ.ComponentScript{
		Name: `__templ_initRosenCharts_9c0e`,
		Function: `function __templ_initRosenCharts_9c0e(){window.RosenCharts = {
		colors: {
			success: 'var(--wa-color-success)',
			danger: 'var(--wa-color-danger)',
			primary: 'var(--wa-color-primary)',
			neutral400: 'var(--wa-color-neutral-400)',
			neutral500: 'var(--wa-color-neutral-500)',
			neutral600: 'var(--wa-color-neutral-600)',
			surfaceAlt: 'var(--wa-color-surface-alt)',
			surface: 'var(--wa-color-surface)',
			fuchsia: { from: '#f0abfc', to: '#e879f9' },
			purple: { from: '#c4b5fd', to: '#a855f7' },
			blue: { from: '#93c5fd', to: '#3b82f6' },
			sky: { from: '#bae6fd', to: '#38bdf8' },
			orange: { from: '#fed7aa', to: '#fb923c' },
			yellow: { from: '#fef08a', to: '#facc15' },
			emerald: { from: '#6ee7b7', to: '#10b981' },
			red: { from: '#fca5a5', to: '#ef4444' }
		},
		formatNumber(value, decimals = 2) {
			return new Intl.NumberFormat('en-US', {
				minimumFractionDigits: decimals,
				maximumFractionDigits: decimals
			}).format(value);
		},
		formatCurrency(value) {
			return new Intl.NumberFormat('en-US', {
				style: 'currency',
				currency: 'USD'
			}).format(value);
		},
		isDesktop() {
			return window.innerWidth > 1024;
		},
		createSVG(tag, attrs = {}) {
			const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
			Object.entries(attrs).forEach(([key, value]) => {
				el.setAttribute(key, value);
			});
			return el;
		},
		createElement(tag, attrs = {}, children = []) {
			const el = document.createElement(tag);
			Object.entries(attrs).forEach(([key, value]) => {
				if (key === 'style' && typeof value === 'object') {
					Object.assign(el.style, value);
				} else if (key === 'className') {
					el.className = value;
				} else {
					el.setAttribute(key, value);
				}
			});
			children.forEach(child => {
				if (typeof child === 'string') {
					el.appendChild(document.createTextNode(child));
				} else if (child) {
					el.appendChild(child);
				}
			});
			return el;
		}
	};
}`,
		Call:       templ.SafeScript(`__templ_initRosenCharts_9c0e`),
		CallInline: templ.SafeScriptInline(`__templ_initRosenCharts_9c0e`),
	}
}

// CandleChart initialization script
func initCandleChart(containerId string, dataJSON string) templ.ComponentScript {
	return templ.ComponentScript{
		Name: `__templ_initCandleChart_55d6`,
		Function: `function __templ_initCandleChart_55d6(containerId, dataJSON){const container = document.getElementById(containerId);
	if (!container || !window.d3) return;
	
	const data = JSON.parse(dataJSON);
	const RC = window.RosenCharts;
	
	const options = {
		marginTop: 10,
		marginRight: 60,
		marginBottom: 56,
		marginLeft: 30,
		height: 288
	};
	
	let zoomLevel = 1;
	let visibleRange = { start: 0, end: data.length - 1 };
	let mousePosition = null;
	let hoverData = null;
	
	function getVisibleData() {
		return data.slice(visibleRange.start, visibleRange.end + 1);
	}
	
	function render() {
		container.innerHTML = '';
		container.style.position = 'relative';
		
		const visibleData = getVisibleData();
		
		// Create scales
		const xScale = d3.scaleBand()
			.domain(visibleData.map(d => d.date))
			.range([0, 100])
			.padding(0.3);
		
		const yMin = d3.min(visibleData, d => d.low) * 0.995;
		const yMax = d3.max(visibleData, d => d.high) * 1.005;
		const yScale = d3.scaleLinear()
			.domain([yMin, yMax])
			.range([100, 0]);
		
		// Legend
		const legend = RC.createElement('div', {
			style: {
				display: 'flex',
				justifyContent: 'space-between',
				alignItems: 'center',
				marginBottom: '8px',
				padding: '4px 32px',
				background: 'var(--wa-color-surface-alt)',
				borderRadius: 'var(--wa-radius-s)',
				fontSize: 'var(--wa-font-size-xs)'
			}
		});
		legend.innerHTML = ` + "`" + `<div style="color: var(--wa-color-neutral-400);">Hover over chart to see OHLC data</div><div></div>` + "`" + `;
		
		// Chart area
		const chartArea = RC.createElement('div', {
			style: {
				position: 'relative',
				height: options.height + 'px',
				width: '100%'
			}
		});
		
		// Y-axis
		const yAxisContainer = RC.createElement('div', {
			style: {
				position: 'absolute',
				height: 'calc(100% - ' + options.marginTop + 'px - ' + options.marginBottom + 'px)',
				transform: 'translateY(' + options.marginTop + 'px)',
				right: 'calc(' + options.marginRight + 'px - 1rem)',
				overflow: 'visible'
			}
		});
		
		const yTicks = yScale.ticks(6);
		yTicks.forEach(value => {
			const label = RC.createElement('div', {
				style: {
					position: 'absolute',
					right: '0%',
					top: yScale(value) + '%',
					transform: 'translateY(-50%)',
					fontSize: 'var(--wa-font-size-xs)',
					fontVariantNumeric: 'tabular-nums',
					color: 'var(--wa-color-neutral-400)',
					width: '100%',
					textAlign: 'right'
				}
			}, [value.toFixed(2)]);
			yAxisContainer.appendChild(label);
		});
		
		// Chart inner
		const chartInner = RC.createElement('div', {
			style: {
				position: 'absolute',
				inset: 0,
				height: 'calc(100% - ' + options.marginTop + 'px - ' + options.marginBottom + 'px)',
				width: 'calc(100% - ' + options.marginLeft + 'px - ' + options.marginRight + 'px)',
				transform: 'translate(' + options.marginLeft + 'px, ' + options.marginTop + 'px)',
				overflow: 'visible'
			}
		});
		
		// SVG for grid and wicks
		const svg = RC.createSVG('svg', {
			viewBox: '0 0 100 100',
			preserveAspectRatio: 'none',
			style: 'overflow: visible; width: 100%; height: 100%;'
		});
		
		// Grid lines
		yTicks.forEach(value => {
			const line = RC.createSVG('line', {
				x1: 0, x2: 100,
				y1: yScale(value), y2: yScale(value),
				stroke: 'var(--wa-color-neutral-200)',
				'stroke-dasharray': '6,5',
				'stroke-width': 0.5,
				'vector-effect': 'non-scaling-stroke'
			});
			svg.appendChild(line);
		});
		
		// Wicks
		visibleData.forEach(d => {
			const barX = xScale(d.date) + xScale.bandwidth() / 2;
			const line = RC.createSVG('line', {
				x1: barX, y1: yScale(d.high),
				x2: barX, y2: yScale(d.low),
				stroke: 'var(--wa-color-neutral-300)',
				'stroke-width': 1,
				'vector-effect': 'non-scaling-stroke'
			});
			svg.appendChild(line);
		});
		
		chartInner.appendChild(svg);
		
		// Candle bodies
		visibleData.forEach(d => {
			const barWidth = xScale.bandwidth();
			const barHeight = Math.abs(yScale(d.open) - yScale(d.close));
			const barX = xScale(d.date);
			const barY = yScale(Math.max(d.open, d.close));
			const isUp = d.close > d.open;
			
			const bar = RC.createElement('div', {
				style: {
					position: 'absolute',
					width: barWidth + '%',
					height: barHeight + '%',
					left: barX + '%',
					top: barY + '%',
					background: isUp 
						? 'linear-gradient(to bottom, #6ee7b7, #10b981)' 
						: 'linear-gradient(to bottom, #fca5a5, #ef4444)',
					borderRadius: '1px'
				}
			});
			chartInner.appendChild(bar);
		});
		
		chartArea.appendChild(yAxisContainer);
		chartArea.appendChild(chartInner);
		
		container.appendChild(legend);
		container.appendChild(chartArea);
		
		// Wheel zoom
		chartArea.addEventListener('wheel', (e) => {
			e.preventDefault();
			const zoomIn = e.deltaY < 0;
			const zoomFactor = 1.04;
			const newZoomLevel = zoomIn
				? Math.min(zoomLevel * zoomFactor, 20)
				: Math.max(zoomLevel / zoomFactor, 1);
			
			const visibleCount = Math.max(5, Math.floor(data.length / newZoomLevel));
			const newEnd = data.length - 1;
			const newStart = Math.max(0, newEnd - visibleCount + 1);
			
			zoomLevel = newZoomLevel;
			visibleRange = { start: newStart, end: newEnd };
			render();
		}, { passive: false });
	}
	
	render();
}`,
		Call:       templ.SafeScript(`__templ_initCandleChart_55d6`, containerId, dataJSON),
		CallInline: templ.SafeScriptInline(`__templ_initCandleChart_55d6`, containerId, dataJSON),
	}
}

// StackedAreaChart initialization script
func initStackedAreaChart(containerId string, dataJSON string) templ.ComponentScript {
	return templ.ComponentScript{
		Name: `__templ_initStackedAreaChart_1646`,
		Function: `function __templ_initStackedAreaChart_1646(containerId, dataJSON){const container = document.getElementById(containerId);
	if (!container || !window.d3) return;
	
	const data = JSON.parse(dataJSON);
	const RC = window.RosenCharts;
	
	const colors = [
		{ from: '#f5d0fe', to: '#e879f9', bg: '#e879f9' },
		{ from: '#c4b5fd', to: '#a855f7', bg: '#a855f7' },
		{ from: '#bfdbfe', to: '#3b82f6', bg: '#3b82f6' },
		{ from: '#bae6fd', to: '#38bdf8', bg: '#38bdf8' },
		{ from: '#fed7aa', to: '#fb923c', bg: '#fb923c' }
	];
	
	container.innerHTML = '';
	container.style.position = 'relative';
	
	const parseDate = d3.utcParse('%Y-%m-%d');
	const industries = Array.from(new Set(data.map(d => d.industry)));
	
	const groupedData = Array.from(
		d3.group(data, d => d.date),
		([date, values]) => {
			const obj = { date: parseDate(date.split('T')[0]) };
			values.forEach(val => {
				obj[val.industry] = val.value || 0;
			});
			return obj;
		}
	);
	
	const series = d3.stack().keys(industries)(groupedData);
	
	// Legend
	const legendContainer = RC.createElement('div', {
		style: {
			display: 'flex',
			textAlign: 'center',
			gap: '16px',
			fontSize: 'var(--wa-font-size-xs)',
			overflowX: 'auto',
			padding: '0 40px',
			marginBottom: '32px'
		}
	});
	
	industries.slice().reverse().forEach((industry, i) => {
		const colorIndex = industries.length - 1 - i;
		const color = colors[colorIndex % colors.length];
		
		const item = RC.createElement('div', {
			style: { display: 'flex', gap: '6px', alignItems: 'center' }
		});
		
		const dot = RC.createElement('div', {
			style: {
				width: '4px',
				height: '16px',
				borderRadius: '9999px',
				background: color.bg
			}
		});
		
		item.appendChild(dot);
		item.appendChild(document.createTextNode(industry));
		legendContainer.appendChild(item);
	});
	
	// Chart container
	const chartContainer = RC.createElement('div', {
		style: {
			position: 'relative',
			height: '256px',
			width: '100%'
		}
	});
	
	// Scales
	const xScale = d3.scaleUtc()
		.domain(d3.extent(groupedData, d => d.date))
		.range([0, 100]);
	
	const yScale = d3.scaleLinear()
		.domain([0, d3.max(series, d => d3.max(d, d => d[1])) || 0])
		.rangeRound([100, 0]);
	
	// Area generator
	const area = d3.area()
		.x(d => xScale(d.data.date))
		.y0(d => yScale(d[0]))
		.y1(d => yScale(d[1]))
		.curve(d3.curveMonotoneX);
	
	// SVG
	const svg = RC.createSVG('svg', {
		style: 'position: absolute; inset: 0; z-index: 10; height: 100%; width: 100%; overflow: visible;'
	});
	
	const innerSvg = RC.createSVG('svg', {
		viewBox: '0 0 100 100',
		preserveAspectRatio: 'none',
		style: 'overflow: visible;'
	});
	
	// Gradients
	const defs = RC.createSVG('defs');
	series.forEach((_, i) => {
		const color = colors[i % colors.length];
		const gradient = RC.createSVG('linearGradient', {
			id: 'stacked-area-gradient-' + containerId + '-' + i,
			x1: 0, x2: 0.5, y1: 0.25, y2: 1
		});
		
		const stop1 = RC.createSVG('stop', { offset: '0%', 'stop-color': color.from });
		const stop2 = RC.createSVG('stop', { offset: '80%', 'stop-color': color.to });
		
		gradient.appendChild(stop1);
		gradient.appendChild(stop2);
		defs.appendChild(gradient);
	});
	innerSvg.appendChild(defs);
	
	// Areas
	series.forEach((layer, layerIndex) => {
		const path = RC.createSVG('path', {
			fill: 'url(#stacked-area-gradient-' + containerId + '-' + layerIndex + ')',
			d: area(layer),
			stroke: '#ccc',
			'stroke-width': '0.05'
		});
		innerSvg.appendChild(path);
	});
	
	svg.appendChild(innerSvg);
	chartContainer.appendChild(svg);
	
	container.appendChild(legendContainer);
	container.appendChild(chartContainer);
}`,
		Call:       templ.SafeScript(`__templ_initStackedAreaChart_1646`, containerId, dataJSON),
		CallInline: templ.SafeScriptInline(`__templ_initStackedAreaChart_1646`, containerId, dataJSON),
	}
}

// BubbleChart initialization script
func initBubbleChart(containerId string, dataJSON string) templ.ComponentScript {
	return templ.ComponentScript{
		Name: `__templ_initBubbleChart_9cee`,
		Function: `function __templ_initBubbleChart_9cee(containerId, dataJSON){const container = document.getElementById(containerId);
	if (!container || !window.d3) return;
	
	const data = JSON.parse(dataJSON);
	const RC = window.RosenCharts;
	
	const colors = ['#f472b6', '#8b5cf6', '#84cc16', '#38bdf8', '#fb923c'];
	
	container.innerHTML = '';
	container.style.position = 'relative';
	container.style.width = '100%';
	container.style.aspectRatio = '1';
	container.style.maxWidth = '18rem';
	container.style.margin = '0 auto';
	
	const sectors = Array.from(new Set(data.map(d => d.sector)));
	const color = d3.scaleOrdinal().domain(sectors).range(colors);
	
	const pack = d3.pack().size([1000, 1000]).padding(12);
	
	const root = pack(
		d3.hierarchy({ children: data }).sum(d => d.value)
	);
	
	root.leaves().forEach(d => {
		const x = d.x;
		const y = d.y;
		const r = d.r;
		const fillColor = color(d.data.sector);
		const name = d.data.name;
		const value = d.data.value;
		
		const bubble = RC.createElement('div', {
			style: {
				position: 'absolute',
				transform: 'translate(-50%, -50%)',
				display: 'flex',
				flexDirection: 'column',
				alignItems: 'center',
				justifyContent: 'center',
				left: (x / 1000 * 100) + '%',
				top: (y / 1000 * 100) + '%',
				width: (r * 2 / 1000 * 100) + '%',
				height: (r * 2 / 1000 * 100) + '%',
				borderRadius: '50%',
				backgroundColor: fillColor,
				border: '1px solid rgba(255,255,255,0.2)',
				cursor: 'default'
			},
			title: name + '\n' + d3.format(',d')(value)
		});
		
		if (value > 1000) {
			const nameEl = RC.createElement('div', {
				style: {
					color: 'white',
					textAlign: 'center',
					whiteSpace: 'nowrap',
					fontSize: (r / 9) + 'px',
					lineHeight: (r / 7) + 'px'
				}
			}, [name]);
			
			const valueEl = RC.createElement('div', {
				style: {
					color: 'white',
					textAlign: 'center',
					whiteSpace: 'nowrap',
					opacity: 0.7,
					fontSize: (r / 10) + 'px',
					lineHeight: (r / 8) + 'px'
				}
			}, [d3.format(',d')(value)]);
			
			bubble.appendChild(nameEl);
			bubble.appendChild(valueEl);
		}
		
		container.appendChild(bubble);
	});
}`,
		Call:       templ.SafeScript(`__templ_initBubbleChart_9cee`, containerId, dataJSON),
		CallInline: templ.SafeScriptInline(`__templ_initBubbleChart_9cee`, containerId, dataJSON),
	}
}

// SemiFilledAreaChart initialization script
func initSemiFilledAreaChart(containerId string, dataJSON string, lineColor string, areaFromColor string, areaToColor string) templ.ComponentScript {
	return templ.ComponentScript{
		Name: `__templ_initSemiFilledAreaChart_71b8`,
		Function: `function __templ_initSemiFilledAreaChart_71b8(containerId, dataJSON, lineColor, areaFromColor, areaToColor){const container = document.getElementById(containerId);
	if (!container || !window.d3) return;
	
	const data = JSON.parse(dataJSON).map(d => ({
		...d,
		date: new Date(d.date)
	}));
	const RC = window.RosenCharts;
	
	container.innerHTML = '';
	container.style.position = 'relative';
	container.style.height = '288px';
	container.style.width = '100%';
	
	// Scales
	const xScale = d3.scaleTime()
		.domain([data[0].date, data[data.length - 1].date])
		.range([0, 100]);
	
	const yScale = d3.scaleLinear()
		.domain([0, d3.max(data, d => d.value) || 0])
		.range([100, 0]);
	
	// Line generator
	const line = d3.line()
		.x(d => xScale(d.date))
		.y(d => yScale(d.value))
		.curve(d3.curveMonotoneX);
	
	// Area generator
	const area = d3.area()
		.x(d => xScale(d.date))
		.y0(yScale(0))
		.y1(d => yScale(d.value))
		.curve(d3.curveMonotoneX);
	
	// Chart inner
	const chartInner = RC.createElement('div', {
		style: {
			position: 'absolute',
			inset: 0,
			height: '100%',
			width: '100%',
			overflow: 'visible'
		}
	});
	
	// SVG
	const svg = RC.createSVG('svg', {
		viewBox: '0 0 100 100',
		preserveAspectRatio: 'none',
		style: 'width: 100%; height: 100%; overflow: visible;'
	});
	
	// Gradient
	const defs = RC.createSVG('defs');
	const gradient = RC.createSVG('linearGradient', {
		id: 'semi-filled-gradient-' + containerId,
		x1: 0, x2: 0, y1: 0, y2: 1
	});
	
	const stop1 = RC.createSVG('stop', { offset: '0%', 'stop-color': areaFromColor });
	const stop2 = RC.createSVG('stop', { offset: '100%', 'stop-color': areaToColor });
	
	gradient.appendChild(stop1);
	gradient.appendChild(stop2);
	defs.appendChild(gradient);
	svg.appendChild(defs);
	
	// Area path
	const areaPath = RC.createSVG('path', {
		d: area(data),
		fill: 'url(#semi-filled-gradient-' + containerId + ')'
	});
	svg.appendChild(areaPath);
	
	// Line path
	const linePath = RC.createSVG('path', {
		d: line(data),
		fill: 'none',
		stroke: lineColor,
		'stroke-width': '1.5',
		'vector-effect': 'non-scaling-stroke'
	});
	svg.appendChild(linePath);
	
	chartInner.appendChild(svg);
	
	// X-axis labels
	data.forEach((day, i) => {
		if (i % 6 !== 0 || i === 0 || i >= data.length - 3) return;
		
		const label = RC.createElement('div', {
			style: {
				position: 'absolute',
				left: xScale(day.date) + '%',
				top: '90%',
				fontSize: 'var(--wa-font-size-xs)',
				color: 'var(--wa-color-neutral-500)',
				transform: 'translateX(-50%)'
			}
		}, [day.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })]);
		
		chartInner.appendChild(label);
	});
	
	container.appendChild(chartInner);
	
	// Y-axis labels
	yScale.ticks(8).forEach((value, i) => {
		if (i < 1) return;
		
		const label = RC.createElement('div', {
			style: {
				position: 'absolute',
				top: yScale(value) + '%',
				right: '3%',
				fontSize: 'var(--wa-font-size-xs)',
				fontVariantNumeric: 'tabular-nums',
				color: 'var(--wa-color-neutral-400)',
				transform: 'translateY(-50%)'
			}
		}, [value.toString()]);
		
		container.appendChild(label);
	});
}`,
		Call:       templ.SafeScript(`__templ_initSemiFilledAreaChart_71b8`, containerId, dataJSON, lineColor, areaFromColor, areaToColor),
		CallInline: templ.SafeScriptInline(`__templ_initSemiFilledAreaChart_71b8`, containerId, dataJSON, lineColor, areaFromColor, areaToColor),
	}
}

// CandleChart component
func CandleChart(id string, data []OHLCData) templ.Component {
	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
			return templ_7745c5c3_CtxErr
		}
		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
		if !templ_7745c5c3_IsBuffer {
			defer func() {
				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
				if templ_7745c5c3_Err == nil {
					templ_7745c5c3_Err = templ_7745c5c3_BufErr
				}
			}()
		}
		ctx = templ.InitializeContext(ctx)
		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
		if templ_7745c5c3_Var1 == nil {
			templ_7745c5c3_Var1 = templ.NopComponent
		}
		ctx = templ.ClearChildren(ctx)
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var2 string
		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(id)
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/charts.templ`, Line: 646, Col: 13}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" class=\"candle-chart\" style=\"width: 100%;\"></div>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = initRosenCharts().Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = initCandleChart(id, toJSON(data)).Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return nil
	})
}

func StackedAreaChart(id string, data []models.AreaSeriesData) templ.Component {
	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
			return templ_7745c5c3_CtxErr
		}
		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
		if !templ_7745c5c3_IsBuffer {
			defer func() {
				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
				if templ_7745c5c3_Err == nil {
					templ_7745c5c3_Err = templ_7745c5c3_BufErr
				}
			}()
		}
		ctx = templ.InitializeContext(ctx)
		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
		if templ_7745c5c3_Var3 == nil {
			templ_7745c5c3_Var3 = templ.NopComponent
		}
		ctx = templ.ClearChildren(ctx)
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div id=\"")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var4 string
		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(id)
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/charts.templ`, Line: 652, Col: 13}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" class=\"stacked-area-chart\" style=\"width: 100%;\"></div>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = initRosenCharts().Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = initStackedAreaChart(id, toJSON(data)).Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return nil
	})
}

func BubbleChart(id string, data []models.BubbleData) templ.Component {
	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
			return templ_7745c5c3_CtxErr
		}
		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
		if !templ_7745c5c3_IsBuffer {
			defer func() {
				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
				if templ_7745c5c3_Err == nil {
					templ_7745c5c3_Err = templ_7745c5c3_BufErr
				}
			}()
		}
		ctx = templ.InitializeContext(ctx)
		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
		if templ_7745c5c3_Var5 == nil {
			templ_7745c5c3_Var5 = templ.NopComponent
		}
		ctx = templ.ClearChildren(ctx)
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div id=\"")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var6 string
		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(id)
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/charts.templ`, Line: 658, Col: 13}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" class=\"bubble-chart\"></div>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = initRosenCharts().Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = initBubbleChart(id, toJSON(data)).Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return nil
	})
}

// SemiFilledAreaChart component with customizable colors
func SemiFilledAreaChart(id string, data []TimeSeriesData) templ.Component {
	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
			return templ_7745c5c3_CtxErr
		}
		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
		if !templ_7745c5c3_IsBuffer {
			defer func() {
				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
				if templ_7745c5c3_Err == nil {
					templ_7745c5c3_Err = templ_7745c5c3_BufErr
				}
			}()
		}
		ctx = templ.InitializeContext(ctx)
		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
		if templ_7745c5c3_Var7 == nil {
			templ_7745c5c3_Var7 = templ.NopComponent
		}
		ctx = templ.ClearChildren(ctx)
		templ_7745c5c3_Err = SemiFilledAreaChartWithColors(id, data, "#facc15", "rgba(234, 179, 8, 0.2)", "rgba(234, 179, 8, 0.05)").Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return nil
	})
}

// SemiFilledAreaChart with custom colors
func SemiFilledAreaChartWithColors(id string, data []TimeSeriesData, lineColor string, areaFromColor string, areaToColor string) templ.Component {
	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
			return templ_7745c5c3_CtxErr
		}
		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
		if !templ_7745c5c3_IsBuffer {
			defer func() {
				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
				if templ_7745c5c3_Err == nil {
					templ_7745c5c3_Err = templ_7745c5c3_BufErr
				}
			}()
		}
		ctx = templ.InitializeContext(ctx)
		templ_7745c5c3_Var8 := templ.GetChildren(ctx)
		if templ_7745c5c3_Var8 == nil {
			templ_7745c5c3_Var8 = templ.NopComponent
		}
		ctx = templ.ClearChildren(ctx)
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div id=\"")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var9 string
		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(id)
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/charts.templ`, Line: 670, Col: 13}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\" class=\"semi-filled-area-chart\" style=\"width: 100%;\"></div>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = initRosenCharts().Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = initSemiFilledAreaChart(id, toJSON(data), lineColor, areaFromColor, areaToColor).Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return nil
	})
}

// Chart card wrapper for consistent styling
func ChartCard(title string, subtitle string) templ.Component {
	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
			return templ_7745c5c3_CtxErr
		}
		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
		if !templ_7745c5c3_IsBuffer {
			defer func() {
				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
				if templ_7745c5c3_Err == nil {
					templ_7745c5c3_Err = templ_7745c5c3_BufErr
				}
			}()
		}
		ctx = templ.InitializeContext(ctx)
		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
		if templ_7745c5c3_Var10 == nil {
			templ_7745c5c3_Var10 = templ.NopComponent
		}
		ctx = templ.ClearChildren(ctx)
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<wa-card class=\"chart-card\"><div slot=\"header\" class=\"wa-flank\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-m\">")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		var templ_7745c5c3_Var11 string
		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(title)
		if templ_7745c5c3_Err != nil {
			return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/charts.templ`, Line: 680, Col: 38}
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</span> ")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		if subtitle != "" {
			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
			var templ_7745c5c3_Var12 string
			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(subtitle)
			if templ_7745c5c3_Err != nil {
				return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/charts.templ`, Line: 682, Col: 87}
			}
			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span>")
			if templ_7745c5c3_Err != nil {
				return templ_7745c5c3_Err
			}
		}
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div></div>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = templ_7745c5c3_Var10.Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</wa-card>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return nil
	})
}

var _ = templruntime.GeneratedTemplate