Finansal piyasalar, teknik analiz ve veri g\u00f6rselle\u015ftirme, modern yat\u0131r\u0131mc\u0131lar\u0131n ve geli\u015ftiricilerin vazge\u00e7ilmez ara\u00e7lar\u0131 haline geldi. H\u0131zl\u0131 ve etkile\u015fimli grafikler, piyasa hareketlerini anlamak ve do\u011fru kararlar almak i\u00e7in kritik \u00f6neme sahiptir. Lightweight Charts, bu alanda sundu\u011fu y\u00fcksek performans ve hafif yap\u0131s\u0131yla \u00f6ne \u00e7\u0131ksa da, geli\u015fmi\u015f \u00e7izim ara\u00e7lar\u0131, \u00f6zel g\u00f6stergeler ve ge\u00e7mi\u015f verileri tekrar oynatma gibi \u00f6zellikler konusunda do\u011frudan destek sunmaz. Bu makalede, bu eksiklikleri gidermek i\u00e7in birden fazla k\u00fct\u00fcphaneyi bir araya getirme karma\u015fas\u0131na d\u00fc\u015fmeden, tek bir entegre \u00e7\u00f6z\u00fcmle nas\u0131l ba\u015fa \u00e7\u0131kabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Amac\u0131m\u0131z, hem performans\u0131 korumak hem de geli\u015ftirme s\u00fcrecini basitle\u015ftirmek.<\/p>\n
Lightweight Charts, web tabanl\u0131 finansal grafik uygulamalar\u0131 geli\u015ftirenler aras\u0131nda h\u0131zla pop\u00fclerlik kazanan, \u00fccretsiz ve a\u00e7\u0131k kaynakl\u0131 bir k\u00fct\u00fcphanedir. Temel amac\u0131, mum \u00e7ubuklar\u0131, \u00e7ubuk grafikler ve \u00e7izgi grafikler gibi en yayg\u0131n finansal veri g\u00f6rselle\u015ftirme ihtiya\u00e7lar\u0131n\u0131 y\u00fcksek performansla ve minimum kaynak t\u00fcketimiyle kar\u015f\u0131lamakt\u0131r. K\u00fct\u00fcphanenin “hafif” (lightweight) ismi de buradan gelir; taray\u0131c\u0131 \u00fczerinde h\u0131zl\u0131 y\u00fcklenir, ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunar ve \u00f6zellikle mobil cihazlarda bile sorunsuz \u00e7al\u0131\u015f\u0131r. Geli\u015ftiriciler, k\u00fct\u00fcphanenin basit API’si sayesinde finansal verileri kolayca entegre edebilir, temel yak\u0131nla\u015ft\u0131rma (zoom) ve kayd\u0131rma (pan) i\u015flevselli\u011fini h\u0131zla devreye alabilirler. \u00d6rne\u011fin, bir hisse senedinin g\u00fcnl\u00fck fiyat hareketlerini g\u00f6rselle\u015ftirmek veya kripto para birimlerinin anl\u0131k de\u011fi\u015fimlerini takip etmek i\u00e7in Lightweight Charts, ideal bir ba\u015flang\u0131\u00e7 noktas\u0131 sunar. \u00d6zellikle d\u00fc\u015f\u00fck gecikmeli (low-latency) veri ak\u0131\u015flar\u0131n\u0131n kritik oldu\u011fu ger\u00e7ek zamanl\u0131 uygulamalarda, Lightweight Charts’\u0131n performans\u0131 bir avantaj sa\u011flar.<\/p>\n
Ancak, bu minimalist yakla\u015f\u0131m\u0131n do\u011fal olarak baz\u0131 s\u0131n\u0131rlar\u0131 vard\u0131r. Lightweight Charts, temel grafik \u00e7izimi ve veri g\u00f6sterimi konusunda m\u00fckemmel olsa da, finansal analizde s\u0131k\u00e7a kullan\u0131lan geli\u015fmi\u015f \u00f6zelliklerden yoksundur. \u00d6rne\u011fin, bir analistin grafik \u00fczerinde trend \u00e7izgileri, Fibonacci geri \u00e7ekilme seviyeleri, dikd\u00f6rtgenler veya metin notlar\u0131 gibi \u00e7izimler yapmas\u0131 gerekti\u011finde, k\u00fct\u00fcphane bu i\u015flevselli\u011fi do\u011frudan sa\u011flamaz. Benzer \u015fekilde, Hareketli Ortalamalar (Moving Averages), G\u00f6receli G\u00fc\u00e7 Endeksi (RSI) veya Bollinger Bantlar\u0131 gibi pop\u00fcler teknik g\u00f6stergelerin \u00e7o\u011fu, k\u00fct\u00fcphanenin kendisinde yerle\u015fik olarak bulunmaz. Geli\u015ftiricilerin bu g\u00f6stergeleri ya manuel olarak hesaplay\u0131p ayr\u0131 bir veri serisi olarak eklemesi ya da harici bir k\u00fct\u00fcphane kullanmas\u0131 gerekir. Bir di\u011fer \u00f6nemli eksiklik ise, ge\u00e7mi\u015f piyasa verilerini belirli bir h\u0131zda ad\u0131m ad\u0131m tekrar oynatma (replay) yetene\u011fidir. Bu \u00f6zellik, yat\u0131r\u0131mc\u0131lar\u0131n stratejilerini test etmeleri, piyasa hareketlerini sim\u00fcle etmeleri ve e\u011fitim ama\u00e7l\u0131 kullanmalar\u0131 i\u00e7in hayati \u00f6neme sahiptir. Lightweight Charts, bu dinamik veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek i\u00e7in temel mekanizmalar sunsa da, bir “replay” aray\u00fcz\u00fc veya mant\u0131\u011f\u0131 sa\u011flamaz. Bu s\u0131n\u0131rlamalar, genellikle geli\u015ftiricileri bu ek \u00f6zellikleri eklemek i\u00e7in birden fazla farkl\u0131 k\u00fct\u00fcphaneyi bir araya getirmeye iter, bu da beraberinde uyumluluk, performans ve bak\u0131m gibi \u00e7e\u015fitli zorluklar\u0131 getirir.<\/p>\n
Web geli\u015ftirme d\u00fcnyas\u0131nda, bir projenin ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamak i\u00e7in birden fazla k\u00fct\u00fcphaneyi veya framework’\u00fc (yaz\u0131l\u0131m \u00e7er\u00e7evesi) bir araya getirmek yayg\u0131n bir uygulamad\u0131r. Ancak, \u00f6zellikle finansal grafikler gibi performans\u0131n ve tutarl\u0131l\u0131\u011f\u0131n kritik oldu\u011fu alanlarda, bu yakla\u015f\u0131m ciddi zorluklara yol a\u00e7abilir. Lightweight Charts’a geli\u015fmi\u015f \u00e7izim ara\u00e7lar\u0131, \u00f6zel g\u00f6stergeler ve ge\u00e7mi\u015f veri tekrar oynatma (replay) \u00f6zelli\u011fi eklemek istedi\u011finizde, her bir \u00f6zellik i\u00e7in ayr\u0131 bir k\u00fct\u00fcphane kullanma e\u011filimi ortaya \u00e7\u0131kabilir. \u00d6rne\u011fin, \u00e7izimler i\u00e7in bir SVG veya Canvas k\u00fct\u00fcphanesi, g\u00f6stergeler i\u00e7in bir matematiksel hesaplama k\u00fct\u00fcphanesi ve replay i\u00e7in bir zamanlama\/animasyon k\u00fct\u00fcphanesi kullanmak cazip gelebilir. Ancak bu “alt\u0131 depoyu bir araya getirme” senaryosu, genellikle a\u015fa\u011f\u0131daki karma\u015f\u0131kl\u0131klar\u0131 beraberinde getirir:<\/p>\n
Bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in “tek bir \u00e7at\u0131 alt\u0131nda” yakla\u015f\u0131m\u0131 benimsemek \u00f6nemlidir. Bu, Lightweight Charts’\u0131n sundu\u011fu temel yap\u0131 \u00fczerine kendi \u00f6zel \u00e7\u00f6z\u00fcmlerimizi in\u015fa etmek veya t\u00fcm bu \u00f6zellikleri tek bir, iyi entegre edilmi\u015f bir eklenti veya mod\u00fcl alt\u0131nda birle\u015ftirmek anlam\u0131na gelir. Bu yakla\u015f\u0131m, daha temiz bir kod taban\u0131, daha iyi performans, kolay bak\u0131m ve tutarl\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flar. Temel felsefe, Lightweight Charts’\u0131 bir “tuval” olarak g\u00f6rmek ve t\u00fcm geli\u015fmi\u015f \u00f6zellik katmanlar\u0131n\u0131 bu tuval \u00fczerine kendi kontrol\u00fcm\u00fczde ve uyumlu bir \u015fekilde yerle\u015ftirmektir.<\/p>\n
Finansal analizde, grafikler \u00fczerine \u00e7izim yapmak, piyasa trendlerini belirlemek, destek ve diren\u00e7 seviyelerini i\u015faretlemek veya gelecekteki fiyat hareketleri hakk\u0131nda tahminlerde bulunmak i\u00e7in vazge\u00e7ilmez bir y\u00f6ntemdir. Lightweight Charts, bu t\u00fcr etkile\u015fimli \u00e7izim ara\u00e7lar\u0131n\u0131 do\u011frudan sunmad\u0131\u011f\u0131 i\u00e7in, kendi \u00f6zel \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc geli\u015ftirmemiz gerekmektedir. Bu noktada, taray\u0131c\u0131lar\u0131n yerle\u015fik yeteneklerinden faydalanarak Lightweight Charts’\u0131n \u00fczerine bir \u00e7izim katman\u0131 ekleyebiliriz. Bu katman genellikle HTML5 Canvas veya SVG (\u00d6l\u00e7eklenebilir Vekt\u00f6r Grafikleri) API’leri kullan\u0131larak olu\u015fturulur. Her iki yakla\u015f\u0131m\u0131n da kendine g\u00f6re avantajlar\u0131 vard\u0131r; Canvas, piksel tabanl\u0131 h\u0131zl\u0131 \u00e7izimler i\u00e7in uygunken, SVG vekt\u00f6r tabanl\u0131 oldu\u011fu i\u00e7in daha kolay manip\u00fcle edilebilir ve \u00f6l\u00e7eklenebilirdir. Ancak, Lightweight Charts’\u0131n kendisi de Canvas tabanl\u0131 oldu\u011fundan, uyumluluk ve performans a\u00e7\u0131s\u0131ndan Canvas \u00fczerinde bir katman olu\u015fturmak genellikle daha mant\u0131kl\u0131 bir se\u00e7enektir.<\/p>\n
Bir \u00e7izim arac\u0131 entegrasyonu i\u00e7in temel ad\u0131mlar \u015funlard\u0131r:<\/p>\n
mousemove<\/code>, mousedown<\/code> ve mouseup<\/code> olay dinleyicileri ekleyin. Bu olaylar sayesinde kullan\u0131c\u0131n\u0131n fare koordinatlar\u0131n\u0131 yakalayabiliriz.<\/li>\n- Koordinat D\u00f6n\u00fc\u015f\u00fcm\u00fc:<\/strong> Yakalad\u0131\u011f\u0131m\u0131z ekran koordinatlar\u0131 (piksel koordinatlar\u0131), Lightweight Charts’\u0131n grafik koordinatlar\u0131na (zaman ve fiyat ekseni de\u011ferleri) d\u00f6n\u00fc\u015ft\u00fcr\u00fclmelidir. Lightweight Charts’\u0131n API’sinde bu d\u00f6n\u00fc\u015f\u00fcmleri sa\u011flayan yard\u0131mc\u0131 fonksiyonlar (\u00f6rne\u011fin,
chart.timeScale().coordinateToTime()<\/code> ve chart.priceScale().coordinateToPrice()<\/code>) bulunur. Bu sayede, \u00e7izimlerimizi grafik verileriyle ili\u015fkilendirebiliriz.<\/li>\n- \u00c7izim Mant\u0131\u011f\u0131:<\/strong> Kullan\u0131c\u0131n\u0131n se\u00e7ti\u011fi \u00e7izim arac\u0131na (trend \u00e7izgisi, dikd\u00f6rtgen vb.) g\u00f6re \u00e7izim mant\u0131\u011f\u0131n\u0131 uygulay\u0131n. \u00d6rne\u011fin, bir trend \u00e7izgisi i\u00e7in,
mousedown<\/code> olay\u0131nda ba\u015flang\u0131\u00e7 noktas\u0131n\u0131, mousemove<\/code> olay\u0131nda o anki fare konumuna g\u00f6re ge\u00e7ici bir \u00e7izgi \u00e7izerek \u00f6nizleme yap\u0131n ve mouseup<\/code> olay\u0131nda nihai \u00e7izgiyi kal\u0131c\u0131 olarak \u00e7izin. T\u00fcm \u00e7izimler, Canvas API’si kullan\u0131larak yap\u0131lacakt\u0131r (context.beginPath()<\/code>, context.moveTo()<\/code>, context.lineTo()<\/code>, context.stroke()<\/code>).<\/li>\n- \u00c7izimlerin Y\u00f6netimi:<\/strong> \u00c7izilen her nesneyi (\u00f6rne\u011fin, bir trend \u00e7izgisi iki nokta ve bir renkten olu\u015fur) bir veri yap\u0131s\u0131 i\u00e7inde saklay\u0131n. Bu veri yap\u0131s\u0131, \u00e7izimlerin kaydedilmesi, y\u00fcklenmesi, d\u00fczenlenmesi veya silinmesi i\u00e7in temel olu\u015fturur. Grafik kayd\u0131r\u0131ld\u0131\u011f\u0131nda veya yak\u0131nla\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, bu veri yap\u0131s\u0131ndaki \u00e7izimleri yeniden hesaplay\u0131p \u00e7izim katman\u0131nda tekrar \u00e7izmeniz gerekecektir.<\/li>\n<\/ol>\n
Basit Bir Trend \u00c7izgisi \u00c7izimi \u0130\u00e7in Yap\u0131<\/h3>\n
A\u015fa\u011f\u0131daki kod \u00f6rne\u011fi, Lightweight Charts \u00fczerinde basit bir trend \u00e7izgisi \u00e7izimi i\u00e7in temel yap\u0131y\u0131 g\u00f6stermektedir. Bu, bir ba\u015flang\u0131\u00e7 noktas\u0131 ve bir biti\u015f noktas\u0131 ile tan\u0131mlanan bir \u00e7izgidir.<\/p>\n
\n\n\/\/ Lightweight Charts grafi\u011fi olu\u015fturulduktan sonra\nconst chartContainer = document.getElementById('chart-container');\nconst chart = LightweightCharts.createChart(chartContainer, { \/* options *\/ });\n\/\/ ... veri ekleme ...\n\n\/\/ \u00c7izim katman\u0131 i\u00e7in yeni bir Canvas elementi olu\u015ftur\nconst drawingCanvas = document.createElement('canvas');\ndrawingCanvas.style.position = 'absolute';\ndrawingCanvas.style.top = '0';\ndrawingCanvas.style.left = '0';\ndrawingCanvas.style.width = '100%';\ndrawingCanvas.style.height = '100%';\ndrawingCanvas.style.pointerEvents = 'none'; \/\/ Ba\u015flang\u0131\u00e7ta grafik etkile\u015fimlerini engelleme\nchartContainer.appendChild(drawingCanvas);\n\nconst ctx = drawingCanvas.getContext('2d');\nlet isDrawing = false;\nlet startPoint = null;\nlet currentLine = null; \/\/ Ge\u00e7ici \u00e7izgi verisi\n\n\/\/ \u00c7izim modunu a\u00e7\u0131p kapatmak i\u00e7in bir anahtar\nlet drawingMode = false;\n\nfunction enableDrawingMode() {\n drawingMode = true;\n drawingCanvas.style.pointerEvents = 'auto'; \/\/ \u00c7izim i\u00e7in fare olaylar\u0131n\u0131 yakala\n chart.applyOptions({\n crosshair: { mode: LightweightCharts.CrosshairMode.Normal } \/\/ Crosshair'\u0131 normal moda getir\n });\n}\n\nfunction disableDrawingMode() {\n drawingMode = false;\n drawingCanvas.style.pointerEvents = 'none';\n chart.applyOptions({\n crosshair: { mode: LightweightCharts.CrosshairMode.Magnet } \/\/ Crosshair'\u0131 m\u0131knat\u0131s moda getir\n });\n \/\/ Ge\u00e7ici \u00e7izimi temizle\n currentLine = null;\n drawAllDrawings(); \/\/ T\u00fcm kal\u0131c\u0131 \u00e7izimleri tekrar \u00e7iz\n}\n\n\/\/ Grafik boyut de\u011fi\u015fiminde Canvas boyutunu g\u00fcncelle\nchart.resize(chartContainer.clientWidth, chartContainer.clientHeight);\nnew ResizeObserver(entries => {\n if (entries.length === 0 || entries[0].target !== chartContainer) {\n return;\n }\n const newRect = entries[0].contentRect;\n drawingCanvas.width = newRect.width;\n drawingCanvas.height = newRect.height;\n drawAllDrawings(); \/\/ Yeniden boyutland\u0131rmada \u00e7izimleri tekrar \u00e7iz\n}).observe(chartContainer);\n\n\/\/ \u00c7izimleri saklamak i\u00e7in bir dizi\nconst allDrawings = [];\n\n\/\/ T\u00fcm \u00e7izimleri Canvas \u00fczerine \u00e7izen fonksiyon\nfunction drawAllDrawings() {\n ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height); \/\/ Tuvali temizle\n allDrawings.forEach(drawing => {\n if (drawing.type === 'trendLine') {\n const p1 = chart.timeScale().timeToCoordinate(drawing.start.time);\n const p2 = chart.timeScale().timeToCoordinate(drawing.end.time);\n const y1 = chart.priceScale().priceToCoordinate(drawing.start.price);\n const y2 = chart.priceScale().priceToCoordinate(drawing.end.price);\n\n if (p1 !== null && p2 !== null && y1 !== null && y2 !== null) {\n ctx.beginPath();\n ctx.strokeStyle = drawing.color;\n ctx.lineWidth = 2;\n ctx.moveTo(p1, y1);\n ctx.lineTo(p2, y2);\n ctx.stroke();\n }\n }\n });\n\n \/\/ Ge\u00e7ici \u00e7izimi de \u00e7iz\n if (currentLine) {\n const p1 = chart.timeScale().timeToCoordinate(currentLine.start.time);\n const p2 = chart.timeScale().timeToCoordinate(currentLine.end.time);\n const y1 = chart.priceScale().priceToCoordinate(currentLine.start.price);\n const y2 = chart.priceScale().priceToCoordinate(currentLine.end.price);\n\n if (p1 !== null && p2 !== null && y1 !== null && y2 !== null) {\n ctx.beginPath();\n ctx.strokeStyle = 'rgba(255, 0, 0, 0.7)'; \/\/ Ge\u00e7ici \u00e7izgi rengi\n ctx.lineWidth = 1;\n ctx.setLineDash([5, 5]); \/\/ Kesikli \u00e7izgi\n ctx.moveTo(p1, y1);\n ctx.lineTo(p2, y2);\n ctx.stroke();\n ctx.setLineDash([]); \/\/ \u00c7izgi stilini s\u0131f\u0131rla\n }\n }\n}\n\n\/\/ Lightweight Charts'\u0131n zaman veya fiyat \u00f6l\u00e7e\u011fi de\u011fi\u015fti\u011finde \u00e7izimleri tekrar \u00e7iz\nchart.timeScale().subscribeVisibleLogicalRangeChange(drawAllDrawings);\nchart.priceScale().subscribeVisiblePriceRangeChange(drawAllDrawings);\n\ndrawingCanvas.addEventListener('mousedown', e => {\n if (!drawingMode) return;\n isDrawing = true;\n const chartPoint = chart.seriesDataToCoordinate(e.clientX - chartContainer.getBoundingClientRect().left, e.clientY - chartContainer.getBoundingClientRect().top);\n if (chartPoint) {\n startPoint = {\n time: chart.timeScale().coordinateToTime(e.clientX - chartContainer.getBoundingClientRect().left),\n price: chart.priceScale().coordinateToPrice(e.clientY - chartContainer.getBoundingClientRect().top)\n };\n currentLine = { type: 'trendLine', start: startPoint, end: startPoint, color: 'blue' };\n }\n});\n\ndrawingCanvas.addEventListener('mousemove', e => {\n if (!isDrawing || !drawingMode) return;\n const chartPoint = chart.seriesDataToCoordinate(e.clientX - chartContainer.getBoundingClientRect().left, e.clientY - chartContainer.getBoundingClientRect().top);\n if (chartPoint && startPoint) {\n currentLine.end = {\n time: chart.timeScale().coordinateToTime(e.clientX - chartContainer.getBoundingClientRect().left),\n price: chart.priceScale().coordinateToPrice(e.clientY - chartContainer.getBoundingClientRect().top)\n };\n drawAllDrawings(); \/\/ Ge\u00e7ici \u00e7izimi g\u00fcncelle\n }\n});\n\ndrawingCanvas.addEventListener('mouseup', e => {\n if (!isDrawing || !drawingMode) return;\n isDrawing = false;\n if (currentLine && currentLine.start.time !== currentLine.end.time) { \/\/ En az\u0131ndan bir mesafe \u00e7izilmi\u015fse\n allDrawings.push(currentLine); \/\/ Kal\u0131c\u0131 \u00e7izimlere ekle\n }\n currentLine = null; \/\/ Ge\u00e7ici \u00e7izimi temizle\n drawAllDrawings(); \/\/ T\u00fcm \u00e7izimleri tekrar \u00e7iz\n});\n\n\/\/ \u00d6rnek kullan\u0131m: Bir butona t\u0131klayarak \u00e7izim modunu etkinle\u015ftirme\n\/\/ const toggleDrawingButton = document.getElementById('toggle-drawing');\n\/\/ toggleDrawingButton.addEventListener('click', () => {\n\/\/ if (drawingMode) {\n\/\/ disableDrawingMode();\n\/\/ toggleDrawingButton.textContent = '\u00c7izim Modunu A\u00e7';\n\/\/ } else {\n\/\/ enableDrawingMode();\n\/\/ toggleDrawingButton.textContent = '\u00c7izim Modunu Kapat';\n\/\/ }\n\/\/ });\n<\/code><\/pre>\n<\/p><\/div>\nBu temel yap\u0131, di\u011fer \u00e7izim ara\u00e7lar\u0131 (dikd\u00f6rtgen, elips, metin vb.) i\u00e7in de geni\u015fletilebilir. Her bir ara\u00e7 i\u00e7in farkl\u0131 bir \u00e7izim mant\u0131\u011f\u0131 ve veri yap\u0131s\u0131 tan\u0131mlanmas\u0131 yeterlidir. \u00d6nemli olan, Lightweight Charts’\u0131n \u00f6l\u00e7ek ve zaman ekseni de\u011fi\u015fikliklerini dinleyerek \u00e7izim katman\u0131n\u0131 s\u00fcrekli olarak g\u00fcncel tutmakt\u0131r. Bu sayede, kullan\u0131c\u0131 grafi\u011fi yak\u0131nla\u015ft\u0131rd\u0131\u011f\u0131nda veya kayd\u0131rd\u0131\u011f\u0131nda \u00e7izimler de do\u011fru konumda ve \u00f6l\u00e7ekte kalacakt\u0131r.<\/p>\n
\u00d6zel G\u00f6stergeler (\u0130ndikat\u00f6rler) Geli\u015ftirme ve Entegre Etme<\/h2>\n
Teknik g\u00f6stergeler, fiyat ve hacim verilerinden t\u00fcretilen matematiksel hesaplamalar yoluyla piyasa trendlerini, momentumu, oynakl\u0131\u011f\u0131 ve a\u015f\u0131r\u0131 al\u0131m\/sat\u0131m ko\u015fullar\u0131n\u0131 analiz etmek i\u00e7in kullan\u0131l\u0131r. Hareketli Ortalamalar (Moving Averages), G\u00f6receli G\u00fc\u00e7 Endeksi (RSI), Stokastik Osilat\u00f6r, MACD (Hareketli Ortalama Yak\u0131nsama Iraksama) gibi g\u00f6stergeler, yat\u0131r\u0131mc\u0131lar\u0131n al\u0131m sat\u0131m kararlar\u0131 almas\u0131nda \u00f6nemli rol oynar. Lightweight Charts, bu g\u00f6stergeleri do\u011frudan sunmasa da, kendi g\u00f6stergelerinizi hesaplay\u0131p bunlar\u0131 grafik \u00fczerinde ayr\u0131 bir veri serisi olarak g\u00f6stermenize olanak tan\u0131r. Bu, “tek bir \u00e7at\u0131 alt\u0131nda” yakla\u015f\u0131m\u0131m\u0131z\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r, \u00e7\u00fcnk\u00fc harici bir g\u00f6sterge k\u00fct\u00fcphanesine ba\u011f\u0131ml\u0131 olmak yerine, kendi kontrol\u00fcm\u00fczde ve Lightweight Charts’\u0131n veri yap\u0131s\u0131na uygun g\u00f6stergeler geli\u015ftirebiliriz.<\/p>\n
\u00d6zel g\u00f6stergeler geli\u015ftirmenin ve entegre etmenin ad\u0131mlar\u0131 \u015funlard\u0131r:<\/p>\n
\n- Veri Haz\u0131rl\u0131\u011f\u0131:<\/strong> G\u00f6stergelerin \u00e7o\u011fu, mum \u00e7ubuklar\u0131n\u0131n kapan\u0131\u015f fiyatlar\u0131, y\u00fcksek-d\u00fc\u015f\u00fck fiyatlar\u0131 veya hacim gibi temel piyasa verileri \u00fczerinde hesaplan\u0131r. Lightweight Charts’a ekledi\u011finiz mum verileri (
candlestickSeries.setData()<\/code> ile) bu hesaplamalar i\u00e7in temel olu\u015fturacakt\u0131r.<\/li>\n- Hesaplama Mant\u0131\u011f\u0131:<\/strong> Se\u00e7ti\u011finiz g\u00f6stergenin matematiksel form\u00fcl\u00fcn\u00fc JavaScript’te uygulay\u0131n. Bu genellikle, ge\u00e7mi\u015f veri noktalar\u0131 \u00fczerinde d\u00f6ng\u00fc yaparak her bir zaman noktas\u0131 i\u00e7in g\u00f6sterge de\u011ferini hesaplamay\u0131 i\u00e7erir. \u00d6rne\u011fin, 14 d\u00f6nemlik bir RSI hesaplamak i\u00e7in, son 14 mum \u00e7ubu\u011funun ortalama kazan\u00e7lar\u0131n\u0131 ve ortalama kay\u0131plar\u0131n\u0131 bulman\u0131z gerekir.<\/li>\n
- G\u00f6sterge Veri Serisi Olu\u015fturma:<\/strong> Hesaplad\u0131\u011f\u0131n\u0131z g\u00f6sterge de\u011ferlerini, Lightweight Charts’\u0131n bekledi\u011fi bir veri serisi format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcn. Bu genellikle
{ time: 'YYYY-MM-DD', value: g\u00f6stergeDe\u011feri }<\/code> \u015feklinde bir dizi nesnedir. Baz\u0131 g\u00f6stergeler (\u00f6rne\u011fin, MACD) birden fazla \u00e7izgi gerektirebilir, bu durumda her \u00e7izgi i\u00e7in ayr\u0131 bir veri serisi olu\u015fturman\u0131z gerekir.<\/li>\n- Grafi\u011fe Ekleme:<\/strong> Olu\u015fturdu\u011funuz g\u00f6sterge veri serisini Lightweight Charts’a ekleyin. E\u011fer g\u00f6sterge ana fiyat grafi\u011fiyle ayn\u0131 panelde g\u00f6sterilecekse (\u00f6rne\u011fin, Hareketli Ortalamalar), bunu
candlestickSeries.createPriceLine()<\/code> veya chart.addLineSeries()<\/code> ile yapabilirsiniz. E\u011fer g\u00f6sterge ayr\u0131 bir panelde g\u00f6sterilecekse (\u00f6rne\u011fin, RSI veya Hacim), chart.addAreaSeries()<\/code>, chart.addLineSeries()<\/code> veya chart.addHistogramSeries()<\/code> gibi fonksiyonlar\u0131 kullanarak yeni bir panel olu\u015fturup seriyi oraya eklemeniz gerekir. Bu panellerin y ekseni \u00f6l\u00e7eklemesi genellikle otomatik olarak ayarlan\u0131r.<\/li>\n<\/ol>\nBasit Bir Hareketli Ortalama (MA) G\u00f6stergesi \u00d6rne\u011fi<\/h3>\n
Hareketli Ortalama (MA), belirli bir d\u00f6nemdeki kapan\u0131\u015f fiyatlar\u0131n\u0131n ortalamas\u0131n\u0131 alarak fiyat verilerini yumu\u015fatan ve trendi belirlemeye yard\u0131mc\u0131 olan en temel g\u00f6stergelerden biridir. \u0130\u015fte 10 d\u00f6nemlik Basit Hareketli Ortalama (SMA) hesaplama ve Lightweight Charts’a entegrasyon \u00f6rne\u011fi:<\/p>\n
\n\n\/\/ Lightweight Charts grafi\u011fi ve mum \u00e7ubu\u011fu serisi zaten olu\u015fturulmu\u015f olsun\n\/\/ const chart = LightweightCharts.createChart(chartContainer, { \/* options *\/ });\n\/\/ const candlestickSeries = chart.addCandlestickSeries();\n\/\/ candlestickSeries.setData(initialCandleData); \/\/ Mum verileri\n\n\/\/ SMA hesaplama fonksiyonu\nfunction calculateSMA(data, period) {\n const smaData = [];\n for (let i = 0; i < data.length; i++) {\n if (i >= period - 1) {\n let sum = 0;\n for (let j = 0; j < period; j++) {\n sum += data[i - j].close;\n }\n smaData.push({\n time: data[i].time,\n value: sum \/ period,\n });\n } else {\n \/\/ \u0130lk 'period - 1' veri noktas\u0131 i\u00e7in SMA hesaplanamaz, bo\u015f b\u0131rak\u0131labilir veya NaN eklenebilir\n smaData.push({\n time: data[i].time,\n value: undefined, \/\/ Ya da null\n });\n }\n }\n return smaData;\n}\n\n\/\/ Mum verileri (\u00f6rnek veri, ger\u00e7ek verinizi buraya aktar\u0131n)\nconst initialCandleData = [\n { time: '2023-01-01', open: 10, high: 12, low: 9, close: 11 },\n { time: '2023-01-02', open: 11, high: 13, low: 10, close: 12 },\n { time: '2023-01-03', open: 12, high: 14, low: 11, close: 13 },\n { time: '2023-01-04', open: 13, high: 15, low: 12, close: 14 },\n { time: '2023-01-05', open: 14, high: 16, low: 13, close: 15 },\n { time: '2023-01-06', open: 15, high: 17, low: 14, close: 16 },\n { time: '2023-01-07', open: 16, high: 18, low: 15, close: 17 },\n { time: '2023-01-08', open: 17, high: 19, low: 16, close: 18 },\n { time: '2023-01-09', open: 18, high: 20, low: 17, close: 19 },\n { time: '2023-01-10', open: 19, high: 21, low: 18, close: 20 },\n { time: '2023-01-11', open: 20, high: 22, low: 19, close: 21 },\n \/\/ ... daha fazla veri ...\n];\n\n\/\/ 10 d\u00f6nemlik SMA'y\u0131 hesapla\nconst smaPeriod = 10;\nconst smaData = calculateSMA(initialCandleData, smaPeriod);\n\n\/\/ Lightweight Charts'a SMA serisini ekle\nconst smaSeries = chart.addLineSeries({ color: 'purple', lineWidth: 2 });\nsmaSeries.setData(smaData);\n\n\/\/ Yeni veri geldi\u011finde SMA'y\u0131 g\u00fcncelleme (\u00f6rnek)\nfunction updateChartWithNewData(newDataPoint) {\n \/\/ Mum serisini g\u00fcncelle\n candlestickSeries.update(newDataPoint);\n\n \/\/ SMA'y\u0131 yeniden hesapla veya inkremental (art\u0131ml\u0131) olarak g\u00fcncelle\n \/\/ Basitlik i\u00e7in burada t\u00fcm veriyi yeniden hesapl\u0131yoruz, ancak performans i\u00e7in art\u0131ml\u0131 g\u00fcncelleme tercih edilebilir.\n const updatedCandleData = [...initialCandleData, newDataPoint]; \/\/ Yeni veriyi ekle\n const updatedSmaData = calculateSMA(updatedCandleData, smaPeriod);\n smaSeries.setData(updatedSmaData); \/\/ SMA serisini g\u00fcncelle\n}\n\n\/\/ \u00d6rnek: Yeni bir veri noktas\u0131 geldi\u011finde\n\/\/ const newCandle = { time: '2023-01-12', open: 21, high: 23, low: 20, close: 22 };\n\/\/ updateChartWithNewData(newCandle);\n<\/code><\/pre>\n<\/p><\/div>\nBu \u00f6rnek, SMA gibi basit g\u00f6stergeler i\u00e7in temel bir \u00e7er\u00e7eve sunar. Daha karma\u015f\u0131k g\u00f6stergeler (\u00f6rne\u011fin, \u00dcstel Hareketli Ortalama - EMA, RSI, MACD) i\u00e7in hesaplama mant\u0131\u011f\u0131 daha detayl\u0131 olacakt\u0131r, ancak temel entegrasyon prensibi ayn\u0131 kal\u0131r. Birden fazla g\u00f6sterge eklemek istedi\u011finizde, her biri i\u00e7in ayr\u0131 bir hesaplama fonksiyonu ve ayr\u0131 bir seri olu\u015fturman\u0131z gerekecektir. Performans a\u00e7\u0131s\u0131ndan, \u00f6zellikle \u00e7ok fazla veri noktas\u0131 veya \u00e7ok say\u0131da g\u00f6sterge varsa, her veri g\u00fcncellemesinde t\u00fcm g\u00f6stergeleri ba\u015ftan hesaplamak yerine, sadece yeni gelen veri noktas\u0131n\u0131 kullanarak g\u00f6stergeyi art\u0131ml\u0131 (incremental) olarak g\u00fcncelleme tekniklerini d\u00fc\u015f\u00fcnmek faydal\u0131 olacakt\u0131r. Bu, gereksiz hesaplama y\u00fck\u00fcn\u00fc azalt\u0131r ve uygulaman\u0131n daha ak\u0131c\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n
Ge\u00e7mi\u015f Veri Tekrar Oynatma (Replay) \u00d6zelli\u011fi: Strateji Geli\u015ftirme ve Test Etme<\/h2>\n
Ge\u00e7mi\u015f piyasa verilerini tekrar oynatma (replay) \u00f6zelli\u011fi, finansal analiz ve strateji geli\u015ftirme s\u00fcre\u00e7lerinde paha bi\u00e7ilmez bir ara\u00e7t\u0131r. Bu \u00f6zellik sayesinde yat\u0131r\u0131mc\u0131lar ve analistler, ge\u00e7mi\u015fteki belirli bir zaman dilimindeki piyasa hareketlerini sanki ger\u00e7ek zamanl\u0131ym\u0131\u015f gibi ad\u0131m ad\u0131m yeniden izleyebilirler. Bu, \u00f6zellikle yeni stratejileri test etmek, piyasa psikolojisini anlamak, belirli olaylar\u0131n fiyat \u00fczerindeki etkilerini g\u00f6zlemlemek veya e\u011fitim ama\u00e7l\u0131 sim\u00fclasyonlar yapmak i\u00e7in son derece faydal\u0131d\u0131r. Lightweight Charts, temel veri g\u00fcncelleme mekanizmalar\u0131n\u0131 sunsa da, bir \"replay\" aray\u00fcz\u00fc veya haz\u0131r bir oynatma mant\u0131\u011f\u0131 sa\u011flamaz. Bu nedenle, bu \u00f6zelli\u011fi kendi \"tek bir \u00e7at\u0131 alt\u0131nda\" \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fcn bir par\u00e7as\u0131 olarak geli\u015ftirmemiz gerekmektedir.<\/p>\n
Bir replay mekanizmas\u0131 olu\u015fturmak i\u00e7in temel ad\u0131mlar \u015funlard\u0131r:<\/p>\n
\n- Veri Haz\u0131rl\u0131\u011f\u0131:<\/strong> Tekrar oynat\u0131lacak t\u00fcm ge\u00e7mi\u015f verileri (mum \u00e7ubuklar\u0131, g\u00f6sterge verileri vb.) zaman damgalar\u0131na g\u00f6re s\u0131ralanm\u0131\u015f bir dizi halinde haz\u0131rlay\u0131n. Bu verilerin eksiksiz ve tutarl\u0131 olmas\u0131 \u00f6nemlidir.<\/li>\n
- Zaman Kontrol\u00fc:<\/strong> Oynatma h\u0131z\u0131n\u0131, duraklatma\/devam ettirme ve ileri\/geri sarma gibi i\u015flevleri kontrol edecek bir zamanlay\u0131c\u0131 mekanizmas\u0131 (\u00f6rne\u011fin,
setInterval<\/code> veya requestAnimationFrame<\/code>) olu\u015fturun.<\/li>\n- Grafik G\u00fcncelleme:<\/strong> Zamanlay\u0131c\u0131 her tetiklendi\u011finde, s\u0131radaki veri noktas\u0131n\u0131 alarak Lightweight Charts'\u0131n ilgili serilerini (mum serisi, g\u00f6sterge serileri) g\u00fcncelleyin. Lightweight Charts,
series.update()<\/code> fonksiyonu ile tek bir yeni veri noktas\u0131n\u0131 eklemenize veya series.setData()<\/code> ile t\u00fcm veri setini yeniden ayarlaman\u0131za olanak tan\u0131r. Replay durumunda, genellikle update()<\/code> fonksiyonu tercih edilir, \u00e7\u00fcnk\u00fc bu daha verimli ve dinamik bir g\u00fcncelleme sa\u011flar.<\/li>\n- Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI):<\/strong> Kullan\u0131c\u0131n\u0131n replay i\u015flemini kontrol edebilmesi i\u00e7in bir aray\u00fcz tasarlay\u0131n. Bu aray\u00fczde \"Oynat\" (Play), \"Duraklat\" (Pause), \"H\u0131z Ayar\u0131\" (Speed Control - \u00f6rne\u011fin, 1x, 2x, 5x h\u0131z), \"\u0130leri Sar\" (Fast Forward) ve \"Geri Sar\" (Rewind) gibi butonlar veya kayd\u0131r\u0131c\u0131lar bulunabilir. Ayr\u0131ca, o anki zaman noktas\u0131n\u0131 g\u00f6steren bir zaman g\u00f6stergesi de faydal\u0131 olacakt\u0131r.<\/li>\n
- Grafik Senkronizasyonu:<\/strong> Replay s\u0131ras\u0131nda grafik otomatik olarak kayd\u0131r\u0131lmal\u0131 ve g\u00f6r\u00fcn\u00fcr aral\u0131k, oynat\u0131lan veriyi takip etmelidir. Bu,
chart.timeScale().scrollToPosition()<\/code> veya chart.timeScale().setVisibleLogicalRange()<\/code> gibi fonksiyonlar kullan\u0131larak sa\u011flanabilir.<\/li>\n<\/ol>\nBelirli Bir H\u0131zda Mum \u00c7ubuklar\u0131n\u0131 Oynatma \u00d6rne\u011fi<\/h3>\n
A\u015fa\u011f\u0131daki \u00f6rnek, bir veri setindeki mum \u00e7ubuklar\u0131n\u0131 belirli bir h\u0131zda (\u00f6rne\u011fin, her saniye bir mum \u00e7ubu\u011fu) nas\u0131l oynatabilece\u011finizi g\u00f6stermektedir. Bu, replay \u00f6zelli\u011finin temelini olu\u015fturur.<\/p>\n
\n\n\/\/ Lightweight Charts grafi\u011fi ve mum \u00e7ubu\u011fu serisi zaten olu\u015fturulmu\u015f olsun\n\/\/ const chart = LightweightCharts.createChart(chartContainer, { \/* options *\/ });\n\/\/ const candlestickSeries = chart.addCandlestickSeries();\n\n\/\/ T\u00fcm ge\u00e7mi\u015f mum verileri (s\u0131ral\u0131 olmal\u0131)\nconst historicalCandleData = [\n { time: '2023-01-01', open: 10, high: 12, low: 9, close: 11 },\n { time: '2023-01-02', open: 11, high: 13, low: 10, close: 12 },\n { time: '2023-01-03', open: 12, high: 14, low: 11, close: 13 },\n { time: '2023-01-04', open: 13, high: 15, low: 12, close: 14 },\n { time: '2023-01-05', open: 14, high: 16, low: 13, close: 15 },\n { time: '2023-01-06', open: 15, high: 17, low: 14, close: 16 },\n { time: '2023-01-07', open: 16, high: 18, low: 15, close: 17 },\n { time: '2023-01-08', open: 17, high: 19, low: 16, close: 18 },\n { time: '2023-01-09', open: 18, high: 20, low: 17, close: 19 },\n { time: '2023-01-10', open: 19, high: 21, low: 18, close: 20 },\n \/\/ ... daha fazla veri ...\n];\n\nlet replayIndex = 0;\nlet replayInterval = null;\nlet replaySpeed = 500; \/\/ Milisaniye cinsinden, her mum \u00e7ubu\u011fu aras\u0131ndaki gecikme\n\n\/\/ Ba\u015flang\u0131\u00e7ta grafi\u011fi bo\u015f veya ilk birka\u00e7 veri ile y\u00fckle\ncandlestickSeries.setData(historicalCandleData.slice(0, 1)); \/\/ Sadece ilk mum \u00e7ubu\u011funu g\u00f6ster\n\nfunction startReplay() {\n if (replayInterval) return; \/\/ Zaten \u00e7al\u0131\u015f\u0131yorsa tekrar ba\u015flatma\n\n replayInterval = setInterval(() => {\n if (replayIndex < historicalCandleData.length) {\n const currentCandle = historicalCandleData[replayIndex];\n candlestickSeries.update(currentCandle); \/\/ Yeni mum \u00e7ubu\u011funu ekle\/g\u00fcncelle\n chart.timeScale().scrollToRealTime(); \/\/ Grafi\u011fi en sona kayd\u0131r\n\n \/\/ E\u011fer g\u00f6stergeleriniz varsa, onlar\u0131 da burada g\u00fcncelleyin\n \/\/ \u00d6rne\u011fin: smaSeries.update(calculateLatestSMA(updatedData));\n\n replayIndex++;\n } else {\n stopReplay(); \/\/ T\u00fcm veriler oynat\u0131ld\u0131ysa durdur\n console.log(\"Replay tamamland\u0131!\");\n }\n }, replaySpeed);\n}\n\nfunction stopReplay() {\n if (replayInterval) {\n clearInterval(replayInterval);\n replayInterval = null;\n }\n}\n\nfunction resetReplay() {\n stopReplay();\n replayIndex = 0;\n candlestickSeries.setData(historicalCandleData.slice(0, 1)); \/\/ Grafi\u011fi ba\u015flang\u0131ca s\u0131f\u0131rla\n \/\/ Di\u011fer serileri de s\u0131f\u0131rlay\u0131n\n}\n\n\/\/ H\u0131z ayarlama fonksiyonu\nfunction setReplaySpeed(speedMs) {\n replaySpeed = speedMs;\n if (replayInterval) { \/\/ E\u011fer replay \u00e7al\u0131\u015f\u0131yorsa, yeni h\u0131zla tekrar ba\u015flat\n stopReplay();\n startReplay();\n }\n}\n\n\/\/ \u00d6rnek kullan\u0131m: Bir UI \u00fczerinden kontrol\n\/\/ document.getElementById('playButton').addEventListener('click', startReplay);\n\/\/ document.getElementById('pauseButton').addEventListener('click', stopReplay);\n\/\/ document.getElementById('resetButton').addEventListener('click', resetReplay);\n\/\/ document.getElementById('speedSlider').addEventListener('change', (e) => setReplaySpeed(e.target.value));\n<\/code><\/pre>\n<\/p><\/div>\nBu temel replay mekanizmas\u0131, daha karma\u015f\u0131k \u00f6zelliklerle geni\u015fletilebilir. \u00d6rne\u011fin, kullan\u0131c\u0131n\u0131n belirli bir zaman aral\u0131\u011f\u0131n\u0131 se\u00e7erek sadece o aral\u0131\u011f\u0131 oynatmas\u0131na izin verebilirsiniz. Ya da, oynatma s\u0131ras\u0131nda grafi\u011fin otomatik olarak en son mumu ortalamas\u0131n\u0131 almas\u0131n\u0131 sa\u011flayabilirsiniz. \u00d6nemli olan, veri ak\u0131\u015f\u0131n\u0131 ve grafik g\u00fcncellemelerini tutarl\u0131 bir \u015fekilde y\u00f6netmek ve kullan\u0131c\u0131n\u0131n replay deneyimini sezgisel hale getirecek bir aray\u00fcz sunmakt\u0131r. Bu \"tek bir \u00e7at\u0131 alt\u0131nda\" yakla\u015f\u0131m sayesinde, Lightweight Charts'\u0131n performans\u0131ndan \u00f6d\u00fcn vermeden g\u00fc\u00e7l\u00fc bir replay \u00f6zelli\u011fi entegre edebilirsiniz.<\/p>\n
Entegrasyon ve Optimizasyon \u0130pu\u00e7lar\u0131: Tek \u00c7\u00f6z\u00fcm\u00fcn G\u00fcc\u00fc<\/h2>\n
Lightweight Charts \u00fczerine \u00e7izim ara\u00e7lar\u0131, g\u00f6stergeler ve replay gibi geli\u015fmi\u015f \u00f6zellikler in\u015fa ederken, performans\u0131 ve kullan\u0131c\u0131 deneyimini en \u00fcst d\u00fczeyde tutmak i\u00e7in baz\u0131 entegrasyon ve optimizasyon ipu\u00e7lar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak hayati \u00f6nem ta\u015f\u0131r. \"Alt\u0131 depoyu birle\u015ftirmeden\" yakla\u015f\u0131m\u0131, zaten bir\u00e7ok potansiyel sorunu ortadan kald\u0131rsa da, kendi geli\u015ftirdi\u011fimiz \u00e7\u00f6z\u00fcmlerde de dikkatli olmam\u0131z gereken noktalar bulunmaktad\u0131r. Bu ipu\u00e7lar\u0131, hem kodunuzun daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak hem de uygulaman\u0131z\u0131n daha \u00f6l\u00e7eklenebilir olmas\u0131na yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
\n- Performans \u0130pu\u00e7lar\u0131:<\/strong>\n
\n- Gereksiz Yeniden \u00c7izimleri \u00d6nleme:<\/strong> Hem Lightweight Charts hem de kendi \u00e7izim katman\u0131n\u0131zda (Canvas) gereksiz yeniden \u00e7izimleri minimize edin. \u00d6rne\u011fin, bir \u00e7izim arac\u0131 kullan\u0131l\u0131rken sadece o anki ge\u00e7ici \u00e7izimi g\u00fcncelleyin, t\u00fcm \u00e7izim listesini her
mousemove<\/code> olay\u0131nda yeniden \u00e7izmekten ka\u00e7\u0131n\u0131n. Lightweight Charts'\u0131n applyOptions()<\/code> veya update()<\/code> gibi metodlar\u0131n\u0131 dikkatli kullan\u0131n; sadece de\u011fi\u015fen \u00f6zellikleri g\u00fcncelleyin.<\/li>\n- Veri Sanalla\u015ft\u0131rma (Data Virtualization):<\/strong> E\u011fer \u00e7ok b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131yorsan\u0131z, t\u00fcm veriyi bir kerede belle\u011fe y\u00fcklemek yerine, sadece g\u00f6r\u00fcn\u00fcr aral\u0131ktaki veriyi y\u00fckleyip i\u015fleyin. Lightweight Charts, bu konuda zaten iyi optimize edilmi\u015ftir, ancak kendi g\u00f6sterge hesaplamalar\u0131n\u0131zda veya \u00e7izim verilerinizde de benzer bir mant\u0131k uygulayabilirsiniz. \u00d6rne\u011fin, sadece ekran\u0131n g\u00f6sterebilece\u011fi kadar mum \u00e7ubu\u011fu i\u00e7in g\u00f6sterge hesaplamas\u0131 yapmak.<\/li>\n
- Web Workers Kullan\u0131m\u0131:<\/strong> Yo\u011fun hesaplama gerektiren g\u00f6stergeler (\u00f6rne\u011fin, karma\u015f\u0131k algoritmalar) veya b\u00fcy\u00fck veri setleri \u00fczerinde yap\u0131lan i\u015flemler, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke edebilir ve UI'\u0131n donmas\u0131na neden olabilir. Bu t\u00fcr i\u015flemleri bir Web Worker'a ta\u015f\u0131yarak, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n serbest kalmas\u0131n\u0131 ve UI'\u0131n ak\u0131c\u0131 kalmas\u0131n\u0131 sa\u011flayabilirsiniz. Hesaplama sonu\u00e7lar\u0131 ana i\u015f par\u00e7ac\u0131\u011f\u0131na geri g\u00f6nderilerek grafi\u011fe yans\u0131t\u0131labilir.<\/li>\n<\/ul>\n<\/li>\n
- Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI) Tasar\u0131m\u0131:<\/strong>\n
\n- Sezgisel Ara\u00e7 \u00c7ubu\u011fu (Toolbar):<\/strong> \u00c7izim ara\u00e7lar\u0131 ve replay kontrolleri i\u00e7in kullan\u0131c\u0131 dostu, sezgisel bir ara\u00e7 \u00e7ubu\u011fu tasarlay\u0131n. \u0130konlar, ara\u00e7 ipu\u00e7lar\u0131 (tooltips) ve aktif durum g\u00f6stergeleri ile kullan\u0131c\u0131ya hangi arac\u0131n se\u00e7ili oldu\u011funu veya hangi modda oldu\u011funu a\u00e7\u0131k\u00e7a belirtin. \u00d6rne\u011fin, bir trend \u00e7izgisi se\u00e7iliyken, ilgili ikon vurgulanabilir.<\/li>\n
- Modlar Aras\u0131 Ge\u00e7i\u015f:<\/strong> \u00c7izim modu ile normal grafik etkile\u015fim modu (kayd\u0131rma, yak\u0131nla\u015ft\u0131rma) aras\u0131nda kolayca ge\u00e7i\u015f yapma imkan\u0131 sunun. \u00d6rne\u011fin, bir \"\u00c7izim Modunu A\u00e7\/Kapat\" butonu veya klavye k\u0131sayollar\u0131 kullan\u0131n. \u00c7izim modundayken, Lightweight Charts'\u0131n kendi fare etkile\u015fimlerini (crosshair, kayd\u0131rma) ge\u00e7ici olarak devre d\u0131\u015f\u0131 b\u0131rakmak veya farkl\u0131 bir moda almak, \u00e7izim deneyimini iyile\u015ftirebilir.<\/li>\n<\/ul>\n<\/li>\n
- Veri Y\u00f6netimi ve Kal\u0131c\u0131l\u0131k:<\/strong>\n
\n- \u00c7izim Verilerini Kaydetme:<\/strong> Kullan\u0131c\u0131n\u0131n yapt\u0131\u011f\u0131 \u00e7izimlerin oturumlar aras\u0131nda veya sayfa yenilendi\u011finde kaybolmamas\u0131 i\u00e7in kal\u0131c\u0131 hale getirilmesi \u00f6nemlidir. Bu verileri
localStorage<\/code>, IndexedDB<\/code> veya bir arka u\u00e7 (backend) API'si arac\u0131l\u0131\u011f\u0131yla veritaban\u0131nda saklayabilirsiniz. Her \u00e7izimin benzersiz bir kimli\u011fi (ID) olmal\u0131 ve ba\u015flang\u0131\u00e7\/biti\u015f noktalar\u0131, tipi, rengi gibi \u00f6zellikleri i\u00e7ermelidir.<\/li>\n- G\u00f6sterge Ayarlar\u0131n\u0131 Saklama:<\/strong> Kullan\u0131c\u0131n\u0131n bir g\u00f6sterge i\u00e7in yapt\u0131\u011f\u0131 ayarlar\u0131 (\u00f6rne\u011fin, Hareketli Ortalama'n\u0131n periyodu veya rengi) kaydedin. Bu, kullan\u0131c\u0131n\u0131n her seferinde ayn\u0131 ayarlar\u0131 yeniden yapmas\u0131n\u0131 engeller ve ki\u015fiselle\u015ftirilmi\u015f bir deneyim sunar.<\/li>\n<\/ul>\n<\/li>\n
- Mod\u00fcler Yap\u0131:<\/strong>\n
\n- Her \u00d6zelli\u011fi Ayr\u0131 Mod\u00fcl Olarak Tasarlama:<\/strong> \u00c7izim ara\u00e7lar\u0131, g\u00f6sterge hesaplamalar\u0131 ve replay mant\u0131\u011f\u0131n\u0131 ayr\u0131 JavaScript mod\u00fclleri (\u00f6rne\u011fin,
drawingTools.js<\/code>, indicators.js<\/code>, replayManager.js<\/code>) olarak tasarlay\u0131n. Bu, kodun daha d\u00fczenli olmas\u0131n\u0131, anla\u015f\u0131labilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Her mod\u00fcl, Lightweight Charts API'si ile etkile\u015fime giren kendi i\u015f mant\u0131\u011f\u0131n\u0131 i\u00e7ermelidir.<\/li>\n- Merkezi Durum Y\u00f6netimi:<\/strong> Uygulaman\u0131z\u0131n durumunu (hangi \u00e7izim arac\u0131 se\u00e7ili, replay aktif mi, hangi g\u00f6stergeler a\u00e7\u0131k vb.) y\u00f6netmek i\u00e7in basit bir durum y\u00f6netim mekanizmas\u0131 kullan\u0131n. Bu, farkl\u0131 mod\u00fcllerin birbiriyle tutarl\u0131 bir \u015fekilde etkile\u015fime girmesini sa\u011flar.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Bu ipu\u00e7lar\u0131, Lightweight Charts \u00fczerine kendi geli\u015fmi\u015f \u00f6zelliklerinizi in\u015fa ederken kar\u015f\u0131la\u015fabilece\u011finiz potansiyel sorunlar\u0131 en aza indirmenize ve sa\u011flam, performansl\u0131 ve kullan\u0131c\u0131 dostu bir uygulama geli\u015ftirmenize yard\u0131mc\u0131 olacakt\u0131r. \"Tek bir \u00e7at\u0131 alt\u0131nda\" yakla\u015f\u0131m\u0131yla, Lightweight Charts'\u0131n temel g\u00fcc\u00fcn\u00fc kullanarak, finansal grafik uygulamalar\u0131n\u0131z\u0131n yeteneklerini \u00f6nemli \u00f6l\u00e7\u00fcde geni\u015fletebilirsiniz.<\/p>\n
Sonu\u00e7 ve Gelecek Perspektifleri<\/h2>\n
Bu makale boyunca, Lightweight Charts gibi hafif ve y\u00fcksek performansl\u0131 bir grafik k\u00fct\u00fcphanesine, birden fazla harici k\u00fct\u00fcphaneyi bir araya getirme karma\u015fas\u0131na d\u00fc\u015fmeden, geli\u015fmi\u015f \u00e7izim ara\u00e7lar\u0131, \u00f6zel g\u00f6stergeler ve ge\u00e7mi\u015f veri tekrar oynatma (replay) \u00f6zelli\u011fi gibi kritik i\u015flevleri nas\u0131l entegre edebilece\u011fimizi ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceledik. \"Tek bir \u00e7at\u0131 alt\u0131nda\" yakla\u015f\u0131m\u0131n\u0131 benimseyerek, Lightweight Charts'\u0131n temel Canvas yap\u0131s\u0131n\u0131 bir tuval olarak kulland\u0131k ve \u00fczerine kendi \u00f6zel \u00e7izim katman\u0131m\u0131z\u0131, g\u00f6sterge hesaplama mant\u0131\u011f\u0131m\u0131z\u0131 ve replay mekanizmam\u0131z\u0131 in\u015fa ettik. Bu y\u00f6ntem, hem geli\u015ftirme s\u00fcrecini basitle\u015ftirdi hem de uygulaman\u0131n performans\u0131n\u0131, bak\u0131m\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirdi.<\/p>\n
Bu entegre \u00e7\u00f6z\u00fcm\u00fcn sa\u011flad\u0131\u011f\u0131 ba\u015fl\u0131ca avantajlar \u015funlard\u0131r:<\/p>\n
\n- Daha \u0130yi Performans:<\/strong> Farkl\u0131 k\u00fct\u00fcphaneler aras\u0131ndaki uyumsuzluklardan kaynaklanan gereksiz DOM manip\u00fclasyonlar\u0131 ve bellek s\u0131z\u0131nt\u0131lar\u0131 \u00f6nlenir. T\u00fcm \u00f6zellikler ayn\u0131 temel grafik motoru \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in kaynak kullan\u0131m\u0131 optimize edilir.<\/li>\n
- Daha Kolay Bak\u0131m:<\/strong> Tek bir kod taban\u0131 ve tutarl\u0131 bir API yap\u0131s\u0131 sayesinde, hata ay\u0131klama, yeni \u00f6zellik ekleme ve mevcut i\u015flevleri g\u00fcncelleme \u00e7ok daha basit hale gelir. Geli\u015ftiricilerin farkl\u0131 k\u00fct\u00fcphanelerin dok\u00fcmantasyonlar\u0131n\u0131 takip etme y\u00fck\u00fc azal\u0131r.<\/li>\n
- Tutarl\u0131 Kullan\u0131c\u0131 Deneyimi:<\/strong> \u00c7izim ara\u00e7lar\u0131ndan g\u00f6stergelere ve replay kontrollerine kadar t\u00fcm etkile\u015fimler ve g\u00f6rsel \u00f6\u011feler, uygulaman\u0131n genel tasar\u0131m diliyle uyumlu olur. Bu, kullan\u0131c\u0131lara ak\u0131c\u0131 ve sezgisel bir deneyim sunar.<\/li>\n
- Daha Fazla Kontrol ve Esneklik:<\/strong> Kendi \u00e7\u00f6z\u00fcm\u00fcn\u00fcz\u00fc in\u015fa etti\u011finiz i\u00e7in, her bir \u00f6zelli\u011fin davran\u0131\u015f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tamamen kendi ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u00f6zelle\u015ftirebilirsiniz. Bu, standart k\u00fct\u00fcphanelerin sundu\u011fu s\u0131n\u0131rlamalar\u0131n \u00f6tesine ge\u00e7me imkan\u0131 sa\u011flar.<\/li>\n<\/ul>\n
Gelecek perspektiflerine bakt\u0131\u011f\u0131m\u0131zda, web teknolojilerinin s\u00fcrekli geli\u015fimi, bu t\u00fcr entegrasyonlar i\u00e7in daha da g\u00fc\u00e7l\u00fc ara\u00e7lar sunacakt\u0131r. Web bile\u015fenleri (Web Components) teknolojisi, bu t\u00fcr \u00f6zel grafik \u00f6zelliklerini daha da mod\u00fcler ve yeniden kullan\u0131labilir hale getirmek i\u00e7in kullan\u0131labilir. WebAssembly (Wasm), \u00f6zellikle yo\u011fun g\u00f6sterge hesaplamalar\u0131 veya karma\u015f\u0131k \u00e7izim algoritmalar\u0131 i\u00e7in daha y\u00fcksek performansl\u0131 \u00e7\u00f6z\u00fcmler sunarak taray\u0131c\u0131da neredeyse yerel uygulama h\u0131zlar\u0131na ula\u015fmam\u0131z\u0131 sa\u011flayabilir. Ayr\u0131ca, makine \u00f6\u011frenimi (Machine Learning) modellerini do\u011frudan taray\u0131c\u0131da \u00e7al\u0131\u015ft\u0131rarak, ger\u00e7ek zamanl\u0131 tahminler veya anomali tespiti gibi daha ileri d\u00fczey g\u00f6stergeleri Lightweight Charts \u00fczerine entegre etmek de m\u00fcmk\u00fcn hale gelecektir.<\/p>\n
Sonu\u00e7 olarak, Lightweight Charts'\u0131n sundu\u011fu temel g\u00fcc\u00fc kendi yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131zla birle\u015ftirerek, finansal grafik uygulamalar\u0131n\u0131z\u0131n potansiyelini maksimize edebilirsiniz. \"Alt\u0131 depoyu bir araya getirmeden\" yakla\u015f\u0131m\u0131, sadece daha verimli bir geli\u015ftirme s\u00fcreci de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n\u0131za daha zengin ve sorunsuz bir deneyim sunman\u0131n anahtar\u0131d\u0131r.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\nLightweight Charts'a \u00e7izim ara\u00e7lar\u0131 eklemek ne kadar zor?<\/h4>\n
Lightweight Charts'a \u00e7izim ara\u00e7lar\u0131 eklemek, orta d\u00fczeyde JavaScript ve Canvas (veya SVG) bilgisi gerektirir. Temel grafik olaylar\u0131n\u0131 (fare t\u0131klamalar\u0131, hareketleri) dinleyip bunlar\u0131 grafik koordinatlar\u0131na d\u00f6n\u00fc\u015ft\u00fcrme ve ard\u0131ndan Canvas API'si ile \u00e7izim yapma mant\u0131\u011f\u0131n\u0131 anlamak \u00f6nemlidir. Makaledeki \u00f6rnek gibi basit bir trend \u00e7izgisi, iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Karma\u015f\u0131k ara\u00e7lar (Fibonacci, Elliot Dalgalar\u0131) daha fazla matematik ve kodlama gerektirebilir.<\/p>\n
Performans sorunlar\u0131 ya\u015far m\u0131y\u0131m?<\/h4>\n
E\u011fer \u00e7izim ve g\u00f6sterge hesaplamalar\u0131n\u0131 do\u011fru bir \u015fekilde optimize ederseniz, \u00f6nemli performans sorunlar\u0131 ya\u015famazs\u0131n\u0131z. Anahtar, gereksiz yeniden \u00e7izimleri \u00f6nlemek, b\u00fcy\u00fck veri setleri i\u00e7in sanalla\u015ft\u0131rma veya sadece g\u00f6r\u00fcn\u00fcr aral\u0131\u011f\u0131 i\u015fleme gibi teknikleri kullanmakt\u0131r. Yo\u011fun hesaplamalar i\u00e7in Web Workers kullanmak da ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n t\u0131kanmas\u0131n\u0131 engelleyerek performans\u0131 art\u0131rabilir.<\/p>\n
Bu yakla\u015f\u0131m a\u00e7\u0131k kaynakl\u0131 k\u00fct\u00fcphanelerle uyumlu mu?<\/h4>\n
Evet, bu yakla\u015f\u0131m Lightweight Charts'\u0131n a\u00e7\u0131k kaynakl\u0131 yap\u0131s\u0131n\u0131 temel al\u0131r ve \u00fczerine kendi a\u00e7\u0131k kaynakl\u0131 veya \u00f6zel \u00e7\u00f6z\u00fcmlerinizi in\u015fa etmenize olanak tan\u0131r. Di\u011fer a\u00e7\u0131k kaynakl\u0131 k\u00fct\u00fcphanelerden (\u00f6rne\u011fin, matematiksel hesaplamalar i\u00e7in utility k\u00fct\u00fcphaneleri) faydalanabilirsiniz, ancak bunlar\u0131 Lightweight Charts'\u0131n temel mant\u0131\u011f\u0131na entegre etmeye \u00f6zen g\u00f6stermelisiniz.<\/p>\n
Replay \u00f6zelli\u011fi hangi veri formatlar\u0131n\u0131 destekler?<\/h4>\n
Replay \u00f6zelli\u011fi, Lightweight Charts'\u0131n destekledi\u011fi herhangi bir zaman serisi veri format\u0131n\u0131 destekler (mum \u00e7ubuklar\u0131, \u00e7izgi, alan, histogram). \u00d6nemli olan, verilerinizin zaman damgalar\u0131na g\u00f6re s\u0131ralanm\u0131\u015f olmas\u0131 ve her bir veri noktas\u0131n\u0131n Lightweight Charts'\u0131n bekledi\u011fi formatta (\u00f6rne\u011fin, { time: 'YYYY-MM-DD', open: ..., high: ..., low: ..., close: ... }<\/code>) olmas\u0131d\u0131r.<\/p>\nKendi \u00f6zel g\u00f6stergelerimi nas\u0131l yay\u0131nlayabilirim?<\/h4>\n
Kendi \u00f6zel g\u00f6stergelerinizi bir JavaScript mod\u00fcl\u00fc olarak paketleyip, npm gibi bir paket y\u00f6neticisi arac\u0131l\u0131\u011f\u0131yla yay\u0131nlayabilirsiniz. Bu sayede di\u011fer geli\u015ftiriciler de sizin g\u00f6stergelerinizi projelerine kolayca dahil edebilirler. Dok\u00fcmantasyon ve \u00f6rnek kullan\u0131m senaryolar\u0131 eklemek, g\u00f6stergenizin benimsenmesini kolayla\u015ft\u0131racakt\u0131r.<\/p>\n
#LightweightCharts #WebGeli\u015ftirme #FinansalGrafikler #TeknikAnaliz #JavaScript<\/p>\n