viewof trump3rdTerm1w = { // Function to determine width based on container size const getResponsiveWidth = () => { // Get the container width (default to 800 if not available) const containerWidth = width || 800; return Math.min(containerWidth, 800); // Cap at 800px max }; // Calculate responsive dimensions const chartWidth = getResponsiveWidth(); const chartHeight = chartWidth * 0.625; // Maintain aspect ratio (500/800 = 0.625) // Adjust font sizes based on width const titleSize = chartWidth < 500 ? 14 : 16; const subtitleSize = chartWidth < 500 ? 12 : 14; const labelSize = chartWidth < 500 ? 10 : 12; // Adjust margins for smaller screens const rightMargin = chartWidth < 500 ? 80 : 120; const leftMargin = chartWidth < 500 ? 40 : 60; const bottomMargin = chartWidth < 500 ? 30 : 40; const topMargin = chartWidth < 500 ? 30 : 40; // Adjust tick count for smaller screens const tickCount = chartWidth < 500 ? 4 : 8; // Create the basic chart using Plot const chart = Plot.plot({ title: "Trump 3rd Term?", subtitle: "Market History - 1 week", width: chartWidth, height: chartHeight, style: { fontSize: labelSize, ".plot-title": { fontSize: titleSize + "px" }, ".plot-subtitle": { fontSize: subtitleSize + "px" } }, x: { label: "Date", tickFormat: "%b %d", tickCount: tickCount, grid: true }, y: { label: "Probability (%)", domain: [0, 100], grid: true }, // Use responsive margins marginRight: rightMargin, marginLeft: leftMargin, marginBottom: bottomMargin, marginTop: topMargin, marks: [ Plot.ruleY([0, 25, 50, 75, 100], { stroke: "#ccc", strokeDasharray: "3,3" }), // Dynamically generate lines for each market with distinct colors ...marketNames.map((marketName, index) => { // Expanded color palette to ensure all lines have different colors const colors = ["#E63946", "#1D3557", "#2A9D8F", "#F4A261"]; return Plot.line(weekPriceHistory, { x: "date", y: marketName, stroke: colors[index % colors.length], strokeWidth: chartWidth < 500 ? 1.5 : 2 }); }), // Dynamically generate dots for each market with matching colors ...marketNames.map((marketName, index) => { const colors = ["#E63946", "#1D3557", "#2A9D8F", "#F4A261"]; // For 1-week view, we can show more dots on small screens since there's less data const dotFrequency = chartWidth < 500 ? 3 : 2; return Plot.dot( weekPriceHistory.filter((d, i) => i % dotFrequency === 0), { x: "date", y: marketName, fill: colors[index % colors.length], r: chartWidth < 500 ? 2 : 3, opacity: 0.7 } ); }), // Dynamically generate end labels for each market with matching colors // Only show on larger screens ...(chartWidth >= 500 ? marketNames.map((marketName, index) => { const colors = ["#E63946", "#1D3557", "#2A9D8F", "#F4A261"]; return Plot.text( weekPriceHistory.filter( (d, i) => i === weekPriceHistory.length - 1 ), { x: "date", y: marketName, text: (d) => `${d[marketName]?.toFixed(1)}%`, dx: chartWidth < 600 ? 30 : 50, fill: colors[index % colors.length], fontWeight: "bold", fontSize: chartWidth < 600 ? 12 : 14 } ); }) : []) ] }); // Determine legend font size const legendFontSize = chartWidth < 500 ? 11 : 10.5; // Calculate watermark position and size const watermarkTop = chartHeight / 2 + topMargin; const watermarkLeft = chartWidth / 2; const watermarkSize = chartWidth < 500 ? 30 : 60; // Create a container for the chart const chartContainer = html`

${chart}

ADJACENT

`; // Create legend items HTML (will be used in both desktop and mobile views) const legendItemsHTML = marketNames .map((name, index) => { const colors = ["#E63946", "#1D3557", "#2A9D8F", "#F4A261"]; const displayName = name.replace("?", ""); if (chartWidth < 500) { // Mobile legend items return `

${displayName}

`; } else { // Desktop legend items return `

${displayName}

`; } }) .join(""); // Add legend to the chart if (chartWidth < 500) { // Mobile: Create a wrapper that includes both chart and legend below it const wrapper = html`

${chartContainer}

${html([legendItemsHTML])}

`; wrapper.value = chart; // Create a resize observer if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver((entries) => { const containerWidth = entries[0].contentRect.width; if (Math.abs(containerWidth - chartWidth) > 20) { invalidation.then(() => observer.disconnect()); return wrapper; } }); observer.observe(wrapper); } return wrapper; } else { // Desktop: Add legend as an overlay const legendElement = html`

${html([legendItemsHTML])}

`; chartContainer.appendChild(legendElement); chartContainer.value = chart; // Create a resize observer if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver((entries) => { const containerWidth = entries[0].contentRect.width; if (Math.abs(containerWidth - chartWidth) > 20) { invalidation.then(() => observer.disconnect()); return chartContainer; } }); observer.observe(chartContainer); } return chartContainer; } }