Skip to content

Fix: on chart indicators can change indicators color and store; #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: on chart indicators can change indicators color and store; #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/classes/ChartWindow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
38 changes: 19 additions & 19 deletions src/components/indicators/indicatorsList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -58,6 +58,7 @@ function IndicatorsList({ mode, indicators, ChartWindow }) {
};
const indicatorModal = () => {
if (selectedKey !== null) {
console.log(indicators[selectedKey]);
return (
<Modal.Root centered size="md" opened={opened} onClose={close}>
<Modal.Overlay />
Expand Down Expand Up @@ -109,29 +110,28 @@ function IndicatorsList({ mode, indicators, ChartWindow }) {
/>
</Input.Wrapper>
) : (
<Input.Wrapper
<NumberInput
label={
property.charAt(0).toUpperCase() +
property.slice(1) +
":"
}
>
<Input
type="number"
placeholder="Input value"
value={
inputValues?.[property]
? inputValues?.[property]
: indicators[selectedKey]?.[property]
}
onChange={(e) =>
handlePropertyInputChange(
property,
parseInt(e.target.value)
)
}
/>
</Input.Wrapper>
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)
)
}
/>
)}
</div>
</div>
Expand Down
30 changes: 16 additions & 14 deletions src/config/indicatorsConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
drawParabolicSAR,
drawSMAIndicator,
drawZigZagIndicator,
drawSuperTrend,
} from "../utility/drawUtils/indicatorDraw";
import {
calculateATRDrawChart,
Expand Down Expand Up @@ -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",
Expand All @@ -55,7 +57,7 @@ export const indicatorConfig = {
},
EMA: {
name: "EMA",
color: "#FF0000",
color: colorSwatches[0],
stroke: 1,
period: 20,
label: "Expontential Moving Average",
Expand All @@ -65,7 +67,8 @@ export const indicatorConfig = {
},
ZigZag: {
name: "ZigZag",
color: "#00FF00",
color: colorSwatches[0],
stroke: 1,
label: "Zig Zag",
deviation: 10,
pivotLegs: 5,
Expand Down Expand Up @@ -97,7 +100,7 @@ export const indicatorConfig = {
},
ParabolicSAR: {
name: "ParabolicSAR",
color: "#FFA500",
color: colorSwatches[0],
stroke: 2,
label: "Parabolic SAR",
acceleration: 0.02,
Expand All @@ -108,7 +111,7 @@ export const indicatorConfig = {
},
BB: {
name: "BB",
color: "#FFA500",
color: colorSwatches[0],
stroke: 1,
label: "Bollinger Bands",
period: 20,
Expand All @@ -130,7 +133,7 @@ export const indicatorConfig = {
},
KeltnerChannels: {
name: "KeltnerChannels",
color: "#FFA500",
color: colorSwatches[0],
stroke: 2,
label: "Keltner Channels",
period: 20,
Expand All @@ -141,7 +144,7 @@ export const indicatorConfig = {
},
DonchainChannels: {
name: "DonchainChannels",
color: "#FFA500",
color: colorSwatches[0],
stroke: 2,
label: "Donchain Channels",
period: 20,
Expand Down Expand Up @@ -181,7 +184,7 @@ export const indicatorConfig = {
},
Alligator: {
name: "Alligator",
color: "#FFA500",
color: colorSwatches[0],
stroke: 1,
label: "Williams Alligator",
jawPeriod: 13,
Expand Down Expand Up @@ -235,7 +238,7 @@ export const indicatorConfig = {
},
Envelope: {
name: "Envelope",
color: "#FFA500",
color: colorSwatches[0],
stroke: 1,
label: "Envelope",
period: 20,
Expand All @@ -255,7 +258,7 @@ export const indicatorConfig = {
},
IchimokuCloud: {
name: "IchimokuCloud",
color: "#FFA500",
color: colorSwatches[0],
stroke: 1,
label: "Ichimoku Cloud",
conversionPeriod: 9,
Expand All @@ -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: {
Expand Down Expand Up @@ -318,7 +320,7 @@ export const indicatorConfig = {
},
DoubleEMA: {
name: "DoubleEMA",
color: "#FFA500",
color: colorSwatches[0],
stroke: 1,
period: 9,
label: "Double Exponential Moving Average",
Expand All @@ -328,7 +330,7 @@ export const indicatorConfig = {
},
TripleEMA: {
name: "TripleEMA",
color: "#FFA500",
color: colorSwatches[0],
stroke: 1,
period: 9,
label: "Triple Exponential Moving Average",
Expand Down
2 changes: 1 addition & 1 deletion src/signals/toolbarSignals.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
32 changes: 13 additions & 19 deletions src/utility/drawUtils/chartDraw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!");
Expand Down Expand Up @@ -77,19 +77,17 @@ 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);
ctx.lineTo(xCoord, chartCanvasSize.peek().height);
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);
Expand Down Expand Up @@ -343,19 +341,17 @@ 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);
ctx.lineTo(xCoord, chartCanvasSize.peek().height);
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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
Loading