mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
9f1122cf9b
- Fix gray/zinc alias confusion (gray→neutral, zinc→zen) - Consolidate duplicate gray color definition - Add finance components to ui/ directory - Clean up documentation structure - Remove test artifacts and backup files The color aliases were incorrectly mapped: Before: gray→zen, zinc→neutral (wrong) After: gray→neutral, zinc→zen (correct) This ensures Hanzo's branded 'zen' color properly maps to zinc while gray correctly references the standard neutral palette. Verified: - Production build: 544 pages ✓ - All tests passing: 219/219 ✓ - Visual verification: /colors page working ✓ - Code review: Approved ✓ Ready for deployment to ui.hanzo.ai
99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useRef } from "react"
|
|
|
|
export interface TechnicalAnalysisProps {
|
|
symbol?: string
|
|
interval?:
|
|
| "1m"
|
|
| "5m"
|
|
| "15m"
|
|
| "30m"
|
|
| "1h"
|
|
| "2h"
|
|
| "4h"
|
|
| "1D"
|
|
| "1W"
|
|
| "1M"
|
|
width?: string | number
|
|
height?: string | number
|
|
locale?: string
|
|
colorTheme?: "light" | "dark"
|
|
isTransparent?: boolean
|
|
showIntervalTabs?: boolean
|
|
displayMode?: "single" | "multiple"
|
|
}
|
|
|
|
export default function TechnicalAnalysis({
|
|
symbol = "NASDAQ:AAPL",
|
|
interval = "15m",
|
|
width = "100%",
|
|
height = "500",
|
|
locale = "en",
|
|
colorTheme = "dark",
|
|
isTransparent = false,
|
|
showIntervalTabs = true,
|
|
displayMode = "single",
|
|
}: TechnicalAnalysisProps) {
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current) return
|
|
|
|
// Check if widget is already initialized using data attribute
|
|
if (containerRef.current.dataset.initialized === "true") {
|
|
return // Widget already initialized, skip
|
|
}
|
|
|
|
// Mark as initialized before adding script
|
|
containerRef.current.dataset.initialized = "true"
|
|
|
|
const script = document.createElement("script")
|
|
script.src =
|
|
"https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js"
|
|
script.async = true
|
|
script.innerHTML = JSON.stringify({
|
|
interval,
|
|
width,
|
|
isTransparent,
|
|
height,
|
|
symbol,
|
|
showIntervalTabs,
|
|
displayMode,
|
|
locale,
|
|
colorTheme,
|
|
})
|
|
|
|
containerRef.current.appendChild(script)
|
|
|
|
return () => {
|
|
if (containerRef.current) {
|
|
// Remove initialization flag on unmount
|
|
delete containerRef.current.dataset.initialized
|
|
// Remove all scripts
|
|
const scripts = containerRef.current.querySelectorAll("script")
|
|
scripts.forEach((s) => s.remove())
|
|
}
|
|
}
|
|
}, [
|
|
symbol,
|
|
interval,
|
|
width,
|
|
height,
|
|
locale,
|
|
colorTheme,
|
|
isTransparent,
|
|
showIntervalTabs,
|
|
displayMode,
|
|
])
|
|
|
|
return (
|
|
<div
|
|
className="tradingview-widget-container w-full h-[500px]"
|
|
ref={containerRef}
|
|
>
|
|
<div className="tradingview-widget-container__widget h-full"></div>
|
|
</div>
|
|
)
|
|
}
|