diff --git a/src/classes/ChartWindow.js b/src/classes/ChartWindow.js index 2109872..4ce63ab 100644 --- a/src/classes/ChartWindow.js +++ b/src/classes/ChartWindow.js @@ -54,7 +54,7 @@ class ChartWindow { this.drawChartObjects = signal([]); this.interval = signal("day"); this.chartType = signal("Candles"); - this.instrumentKey = signal("NSE_INDEX|Nifty 50"); + this.instrumentKey = signal("NSE_EQ|INE002A01018"); this.mode = signal(""); //tool bar signals; @@ -92,10 +92,10 @@ class ChartWindow { setXAxisConfig() { const noOfDataPoints = this.dateConfig.peek().dateToIndex[ - getObjtoStringTime(this.timeRange.peek().startTime) + getObjtoStringTime(this.timeRange.peek().startTime) ] - this.dateConfig.peek().dateToIndex[ - getObjtoStringTime(this.timeRange.peek().endTime) + getObjtoStringTime(this.timeRange.peek().endTime) ]; const widthOfOneCS = this.xAxisCanvasSize.peek().width / noOfDataPoints; this.xAxisConfig.value.noOfDataPoints = noOfDataPoints; diff --git a/src/components/indicators/indicatorsList.jsx b/src/components/indicators/indicatorsList.jsx index 63fd3f3..abe713a 100644 --- a/src/components/indicators/indicatorsList.jsx +++ b/src/components/indicators/indicatorsList.jsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { MdClose, MdSettings } from "react-icons/md"; import { useOutsideClick } from "../navbar/navbar"; -import { ColorInput, Input, Button, Modal } from "@mantine/core"; +import { ColorInput, Input, NumberInput, Button, Modal } from "@mantine/core"; import { colorSwatches } from "../../signals/toolbarSignals"; import { useDisclosure } from "@mantine/hooks"; @@ -58,6 +58,7 @@ function IndicatorsList({ mode, indicators, ChartWindow }) { }; const indicatorModal = () => { if (selectedKey !== null) { + console.log(indicators[selectedKey]); return ( @@ -109,29 +110,28 @@ function IndicatorsList({ mode, indicators, ChartWindow }) { /> ) : ( - - - handlePropertyInputChange( - property, - parseInt(e.target.value) - ) - } - /> - + placeholder="Input value" + value={ + inputValues?.[property] + ? inputValues?.[property] + : null + } + defaultValue={indicators[selectedKey]?.[property]} + onChange={(e) => + handlePropertyInputChange( + property, + isNaN(parseFloat(e)) || parseFloat(e) === 0.0 + ? indicators[selectedKey]?.[property] + : parseFloat(e) + ) + } + /> )} diff --git a/src/config/indicatorsConfig.js b/src/config/indicatorsConfig.js index a7b2947..ec2b5c8 100644 --- a/src/config/indicatorsConfig.js +++ b/src/config/indicatorsConfig.js @@ -11,6 +11,7 @@ import { drawParabolicSAR, drawSMAIndicator, drawZigZagIndicator, + drawSuperTrend, } from "../utility/drawUtils/indicatorDraw"; import { calculateATRDrawChart, @@ -42,10 +43,11 @@ import { calculateDoubleEMA, calculateTripleEMA, } from "../utility/calulations.js/indicatorCalcualations"; +import { colorSwatches } from "../signals/toolbarSignals"; export const indicatorConfig = { SMA: { name: "SMA", - color: "#FFA500", + color: colorSwatches[0], stroke: 1, period: 20, label: "Simple Moving Average", @@ -55,7 +57,7 @@ export const indicatorConfig = { }, EMA: { name: "EMA", - color: "#FF0000", + color: colorSwatches[0], stroke: 1, period: 20, label: "Expontential Moving Average", @@ -65,7 +67,8 @@ export const indicatorConfig = { }, ZigZag: { name: "ZigZag", - color: "#00FF00", + color: colorSwatches[0], + stroke: 1, label: "Zig Zag", deviation: 10, pivotLegs: 5, @@ -97,7 +100,7 @@ export const indicatorConfig = { }, ParabolicSAR: { name: "ParabolicSAR", - color: "#FFA500", + color: colorSwatches[0], stroke: 2, label: "Parabolic SAR", acceleration: 0.02, @@ -108,7 +111,7 @@ export const indicatorConfig = { }, BB: { name: "BB", - color: "#FFA500", + color: colorSwatches[0], stroke: 1, label: "Bollinger Bands", period: 20, @@ -130,7 +133,7 @@ export const indicatorConfig = { }, KeltnerChannels: { name: "KeltnerChannels", - color: "#FFA500", + color: colorSwatches[0], stroke: 2, label: "Keltner Channels", period: 20, @@ -141,7 +144,7 @@ export const indicatorConfig = { }, DonchainChannels: { name: "DonchainChannels", - color: "#FFA500", + color: colorSwatches[0], stroke: 2, label: "Donchain Channels", period: 20, @@ -181,7 +184,7 @@ export const indicatorConfig = { }, Alligator: { name: "Alligator", - color: "#FFA500", + color: colorSwatches[0], stroke: 1, label: "Williams Alligator", jawPeriod: 13, @@ -235,7 +238,7 @@ export const indicatorConfig = { }, Envelope: { name: "Envelope", - color: "#FFA500", + color: colorSwatches[0], stroke: 1, label: "Envelope", period: 20, @@ -255,7 +258,7 @@ export const indicatorConfig = { }, IchimokuCloud: { name: "IchimokuCloud", - color: "#FFA500", + color: colorSwatches[0], stroke: 1, label: "Ichimoku Cloud", conversionPeriod: 9, @@ -278,13 +281,12 @@ export const indicatorConfig = { }, SuperTrend: { name: "SuperTrend", - color: "#FFA500", stroke: 1, label: "Super Trend", period: 10, multiplier: 3, chartRequired: false, - drawChartFunction: calculateSuperTrend, + drawChartFunction: drawSuperTrend, getChartData: calculateSuperTrend, }, AverageDayRange: { @@ -318,7 +320,7 @@ export const indicatorConfig = { }, DoubleEMA: { name: "DoubleEMA", - color: "#FFA500", + color: colorSwatches[0], stroke: 1, period: 9, label: "Double Exponential Moving Average", @@ -328,7 +330,7 @@ export const indicatorConfig = { }, TripleEMA: { name: "TripleEMA", - color: "#FFA500", + color: colorSwatches[0], stroke: 1, period: 9, label: "Triple Exponential Moving Average", diff --git a/src/signals/toolbarSignals.js b/src/signals/toolbarSignals.js index 7724e37..2aaf097 100644 --- a/src/signals/toolbarSignals.js +++ b/src/signals/toolbarSignals.js @@ -1,7 +1,7 @@ import { signal } from "@preact/signals-react"; export const cursorConfig = ["crosshair", "default"]; -export const colorSwatches = ['rgba(46, 46, 46, 1)', 'rgba(134, 142, 150, 1)', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14'] +export const colorSwatches = ['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14'] export const selectedCursor = signal(0); export const selectedLine = signal(-1); diff --git a/src/utility/drawUtils/chartDraw.js b/src/utility/drawUtils/chartDraw.js index cabc3a9..afad8ee 100644 --- a/src/utility/drawUtils/chartDraw.js +++ b/src/utility/drawUtils/chartDraw.js @@ -47,7 +47,7 @@ export function drawChart(state, mode) { dateConfig.peek().dateToIndex[getObjtoStringTime(timeRange.peek().endTime)]; const endIndex = dateConfig.peek().dateToIndex[ - getObjtoStringTime(timeRange.peek().startTime) + getObjtoStringTime(timeRange.peek().startTime) ]; if (startIndex === undefined || endIndex === undefined) { console.log("Undefined startIndex or endIndex!"); @@ -77,9 +77,8 @@ export function drawChart(state, mode) { const currentYear = parseInt(d.Date.split("-")[0]); xAxisCtx.fillStyle = `${mode === "Light" ? "black" : "white"}`; if (currentMonth === 1) { - const lineColor = `${ - mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" - }`; + const lineColor = `${mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" + }`; ctx.beginPath(); ctx.strokeStyle = lineColor; ctx.moveTo(xCoord, 0); @@ -87,9 +86,8 @@ export function drawChart(state, mode) { ctx.stroke(); xAxisCtx.fillText(currentYear, xCoord - 10, 12); } else { - const lineColor = `${ - mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" - }`; + const lineColor = `${mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" + }`; ctx.beginPath(); ctx.strokeStyle = lineColor; ctx.moveTo(xCoord, 0); @@ -343,9 +341,8 @@ export const drawXAxis = (state, resultData, mode) => { currentMonth === 1 && currentMonth !== getTime(resultData[i + 1].Date)["Month"] ) { - const lineColor = `${ - mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" - }`; + const lineColor = `${mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" + }`; ctx.beginPath(); ctx.strokeStyle = lineColor; ctx.moveTo(xCoord, 0); @@ -353,9 +350,8 @@ export const drawXAxis = (state, resultData, mode) => { ctx.stroke(); xAxisCtx.fillText(currentYear, xCoord - 10, 12); } else { - const lineColor = `${ - mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" - }`; + const lineColor = `${mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" + }`; ctx.beginPath(); ctx.strokeStyle = lineColor; ctx.moveTo(xCoord, 0); @@ -408,9 +404,8 @@ export const drawXAxis = (state, resultData, mode) => { timeRange.peek().scrollDirection * timeRange.peek().scrollOffset; const d = resultData[i]; const time = getTime(d.Date); - const lineColor = `${ - mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" - }`; + const lineColor = `${mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" + }`; ctx.beginPath(); ctx.strokeStyle = lineColor; ctx.moveTo(xCoord, 0); @@ -440,9 +435,8 @@ export const drawXAxis = (state, resultData, mode) => { timeRange.peek().scrollDirection * timeRange.peek().scrollOffset; const d = resultData[i]; const time = getTime(d.Date); - const lineColor = `${ - mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" - }`; + const lineColor = `${mode === "Light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)" + }`; ctx.beginPath(); ctx.strokeStyle = lineColor; ctx.moveTo(xCoord, 0); diff --git a/src/utility/drawUtils/indicatorDraw.js b/src/utility/drawUtils/indicatorDraw.js index 15eee2d..0d01b91 100644 --- a/src/utility/drawUtils/indicatorDraw.js +++ b/src/utility/drawUtils/indicatorDraw.js @@ -1,5 +1,6 @@ import { indicatorConfig } from "../../config/indicatorsConfig"; import { monthMap } from "../../data/TIME_MAP"; +import { calculateZigZag } from "../calulations.js/indicatorCalcualations"; import { getObjtoStringTime, getXCoordinate } from "../xAxisUtils"; import { getYCoordinate } from "../yAxisUtils"; import { drawBarChart, drawLineChart, drawXAxis, drawYAxis } from "./chartDraw"; @@ -11,14 +12,17 @@ export function drawIndicators(startIndex, endIndex, ctx, mode, state) { if (indicatorConfig[indicator.name] === undefined) return; else if (indicator.label === indicatorConfig["ZigZag"].label) { const zigZagData = calculateZigZag(data.peek()[0], indicator); - drawZigZagIndicator(ctx, zigZagData, mode, startIndex, endIndex, state); + onChartIndicatorData.peek()[index] === undefined + ? (onChartIndicatorData.peek()[index] = calculateZigZag(data.peek()[0], indicator)) + : onChartIndicatorData.peek()[index]; + drawZigZagIndicator(indicator, ctx, zigZagData, mode, startIndex, endIndex, state); } else { const dataComplete = onChartIndicatorData.peek()[index] === undefined ? (onChartIndicatorData.peek()[index] = indicator.getChartData( - data.peek()[0], - indicator - )) + data.peek()[0], + indicator + )) : onChartIndicatorData.peek()[index]; const dataToDraw = dataComplete.slice(startIndex, endIndex + 1).reverse(); indicator.drawChartFunction(indicator, ctx, dataToDraw, mode, state); @@ -80,6 +84,7 @@ export function drawEMAIndicator(indicator, ctx, emaData, mode, state) { } export function drawZigZagIndicator( + indicator, ctx, zigZagData, mode, @@ -89,9 +94,8 @@ export function drawZigZagIndicator( ) { const { chartCanvasSize, yAxisRange, data } = state; const { dateConfig, timeRange, xAxisConfig } = state.ChartWindow; - const zigzagColor = mode === "Light" ? "#0b69ac" : "#f0a70b"; - ctx.lineWidth = 1; - ctx.strokeStyle = zigzagColor; + ctx.lineWidth = indicator.stroke; + ctx.strokeStyle = indicator.color; ctx.beginPath(); let flag = false; for (let i = startIndex; i <= endIndex; i++) { @@ -101,7 +105,7 @@ export function drawZigZagIndicator( const zigZagValues = Object.values(zigZagData); const index1 = dateConfig.peek().dateToIndex[ - zigZagValues[zigZagData[data.peek()[0][i].Date].index - 1]?.date + zigZagValues[zigZagData[data.peek()[0][i].Date].index - 1]?.date ]; ctx.moveTo( getXCoordinate( @@ -153,6 +157,7 @@ export function drawZigZagIndicator( ) ); ctx.stroke(); + ctx.lineWidth = 1; } export function drawParabolicSAR(indicator, ctx, sarData, mode, state) { @@ -182,15 +187,14 @@ export function drawParabolicSAR(indicator, ctx, sarData, mode, state) { ctx.fill(); } } - +export const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, 0)}`; export function drawBB(indicator, ctx, BBData, mode, state) { const { chartCanvasSize, yAxisRange } = state; const { timeRange, xAxisConfig } = state.ChartWindow; - ctx.strokeStyle = indicator.color; - ctx.lineWidth = indicator.stroke; let prevSma = null; let prevUpper = null; let prevLower = null; + const fillColor = setOpacity(indicator.color, 0.5); BBData.forEach((data, i) => { const xCoordSMA = getXCoordinate( chartCanvasSize.peek().width, @@ -217,7 +221,7 @@ export function drawBB(indicator, ctx, BBData, mode, state) { yAxisRange.peek().maxPrice, chartCanvasSize.peek().height ); - ctx.fillStyle = "rgba(0,148,255,0.3)"; + ctx.strokeStyle = indicator.color; ctx.lineWidth = indicator.stroke; if (i === 0) { ctx.beginPath(); @@ -273,9 +277,8 @@ export function drawBB(indicator, ctx, BBData, mode, state) { ); ctx.closePath(); ctx.lineWidth = 5; - ctx.fillStyle = "rgba(0,148,255,0.3)"; + ctx.fillStyle = fillColor; ctx.fill(); - ctx.strokeStyle = "blue"; } prevSma = { xCoordSMA, yCoordSMA }; prevUpper = { xCoordSMA, yCoordUpper }; @@ -287,13 +290,12 @@ export function drawBB(indicator, ctx, BBData, mode, state) { export function drawAlligator(indicator, ctx, alligatorData, mode, state) { const { chartCanvasSize, yAxisRange } = state; const { timeRange, xAxisConfig } = state.ChartWindow; - ctx.strokeStyle = indicator.color; - ctx.lineWidth = indicator.stroke; - ctx.beginPath(); let prevJaw = null; let prevTeeth = null; let prevLips = null; - + const fillColor = setOpacity(indicator.color, 0.4); + + ctx.beginPath(); alligatorData.forEach((data, i) => { const xCoordJaw = getXCoordinate( chartCanvasSize.peek().width, @@ -334,7 +336,7 @@ export function drawAlligator(indicator, ctx, alligatorData, mode, state) { yAxisRange.peek().maxPrice, chartCanvasSize.peek().height ); - ctx.fillStyle = "rgba(0,148,255,0.3)"; + ctx.strokeStyle = indicator.color; ctx.lineWidth = indicator.stroke; if (i === 0) { ctx.beginPath(); @@ -396,10 +398,9 @@ export function drawAlligator(indicator, ctx, alligatorData, mode, state) { prevLips.yCoordLips ); ctx.closePath(); - ctx.lineWidth = 5; - ctx.fillStyle = "rgba(0,148,255,0.3)"; + ctx.lineWidth = indicator.stroke; + ctx.fillStyle = fillColor; ctx.fill(); - ctx.strokeStyle = "blue"; } prevJaw = { xCoordJaw, yCoordJaw }; prevTeeth = { xCoordTeeth, yCoordTeeth }; @@ -649,7 +650,7 @@ export function drawRSIIndicatorChart(state, mode) { dateConfig.peek().dateToIndex[getObjtoStringTime(timeRange.peek().endTime)]; const endIndex = dateConfig.peek().dateToIndex[ - getObjtoStringTime(timeRange.peek().startTime) + getObjtoStringTime(timeRange.peek().startTime) ]; if (startIndex === undefined || endIndex === undefined) { console.log("Undefined startIndex or endIndex!"); @@ -764,7 +765,7 @@ export function drawMACDIndicatorChart(state, mode) { dateConfig.peek().dateToIndex[getObjtoStringTime(timeRange.peek().endTime)]; const endIndex = dateConfig.peek().dateToIndex[ - getObjtoStringTime(timeRange.peek().startTime) + getObjtoStringTime(timeRange.peek().startTime) ]; if (startIndex === undefined || endIndex === undefined) { console.log("Undefined startIndex or endIndex!"); @@ -871,7 +872,7 @@ export function drawVortexIndicatorChart(state, mode) { dateConfig.peek().dateToIndex[getObjtoStringTime(timeRange.peek().endTime)]; const endIndex = dateConfig.peek().dateToIndex[ - getObjtoStringTime(timeRange.peek().startTime) + getObjtoStringTime(timeRange.peek().startTime) ]; if (startIndex === undefined || endIndex === undefined) { console.log("Undefined startIndex or endIndex!"); @@ -966,7 +967,7 @@ export function drawBBPIndicatorChart(state, mode) { dateConfig.peek().dateToIndex[getObjtoStringTime(timeRange.peek().endTime)]; const endIndex = dateConfig.peek().dateToIndex[ - getObjtoStringTime(timeRange.peek().startTime) + getObjtoStringTime(timeRange.peek().startTime) ]; if (startIndex === undefined || endIndex === undefined) { console.log("Undefined startIndex or endIndex!"); @@ -1046,7 +1047,7 @@ export function drawAwesomeOscillatorIndicator(state, mode) { dateConfig.peek().dateToIndex[getObjtoStringTime(timeRange.peek().endTime)]; const endIndex = dateConfig.peek().dateToIndex[ - getObjtoStringTime(timeRange.peek().startTime) + getObjtoStringTime(timeRange.peek().startTime) ]; if (startIndex === undefined || endIndex === undefined) { console.log("Undefined startIndex or endIndex!");