Skip to content
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

Jump to bottom

Static charts #218

Merged
merged 13 commits into from
Jun 6, 2022
Merged

Static charts #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cef8bb4
renamed static charts
eganichev Jun 3, 2022
86479e1
changed the coordinates
eganichev Jun 3, 2022
fc20a07
returned axes y for call option chart
eganichev Jun 3, 2022
8e88fbc
fixes
eganichev Jun 3, 2022
b87a7c4
fixes
eganichev Jun 3, 2022
e412f50
check
eganichev Jun 3, 2022
f776ede
added always show to put option chart
eganichev Jun 3, 2022
047fd18
changed Straddle chart
eganichev Jun 6, 2022
f56f102
changed Strangle chart
eganichev Jun 6, 2022
1f7cdca
added line captions
eganichev Jun 6, 2022
2b89ff3
added styles for charts
eganichev Jun 6, 2022
7f335f5
fixed coordinates
eganichev Jun 6, 2022
6e4d0b3
changed styles
eganichev Jun 6, 2022
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
50 changes: 30 additions & 20 deletions ...nts/StaticChart/OptionCallChart/index.tsx → ...nts/StaticChart/CallOptionChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,28 +146,38 @@ const data = [
price: 1.4
},
{
data1: -0.2,
data2: 0.2,
data1: -0.15,
data2: 0.15,
price: 1.45
},
{
data1: -0.4,
data2: 0.4,
data1: -0.3,
data2: 0.3,
price: 1.5
},
{
data1: -0.45,
data2: 0.45,
price: 1.55
},
{
data1: -0.6,
data2: 0.6,
price: 1.55
price: 1.6
},
{
data1: -0.75,
data2: 0.75,
price: 1.6
},
{
data1: -0.8,
data2: 0.8,
data1: -0.9,
data2: 0.9,
price: 1.6
},
{
data1: -1,
data2: 1,
data1: -1.05,
data2: 1.05,
price: 1.65
},
{
Expand All @@ -176,8 +186,8 @@ const data = [
price: 1.7
},
{
data1: -1.4,
data2: 1.4,
data1: -1.35,
data2: 1.35,
price: 1.75
}
]
Expand Down Expand Up @@ -206,16 +216,16 @@ const CustomTooltip = ({ active, payload, chartData1, chartData2 }: { active?: b
return (<div className="tooltip-loading" style={{ backgroundColor: 'white', padding: '0px 8px', borderRadius: '10px' }}>Loading...</div>)
}

const OptionCallChart: FC<TProps> = (props: TProps) => {
const CallOptionChart: FC<TProps> = (props: TProps) => {
const { isMobile } = useMobile()

const { domainAxisY, increaseDomainY, chartData1, chartData2, logScaleY, scale } = props

const tickChanger = (dataIndex: number) => {
let tick: string = ''
if (dataIndex === -1.4) {
if (dataIndex === -1.35) {
tick = 'Loss'
} else if (dataIndex === 1.4) {
} else if (dataIndex === 1.35) {
return 'Profit'
} else if (dataIndex === 0) {
return '0'
Expand Down Expand Up @@ -266,10 +276,10 @@ const OptionCallChart: FC<TProps> = (props: TProps) => {
</defs>
<CartesianGrid strokeOpacity={0.05} strokeDasharray="3 3"/>
<Line dataKey="zeroLine" strokeWidth="1.8" stroke='white' dot={false} strokeOpacity={1}/>
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 0, y: -1.4 }, { x: 0, y: 1.4 }]} />
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 0, y: -1.4 }, { x: 0, y: 1.4 }]} />
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 15, y: -1.4 }, { x: 15, y: 1.4 }]} />
<ReferenceLine strokeOpacity={0.2} strokeWidth={1} stroke='#C4C4C4' segment={[{ x: 21, y: -1.4 }, { x: 21, y: 1.4 }]} />
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 0, y: -1.35 }, { x: 0, y: 1.35 }]} />
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 0, y: -1.35 }, { x: 0, y: 1.35 }]} />
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 15, y: -1.35 }, { x: 15, y: 1.35 }]} />
<ReferenceLine strokeOpacity={0.2} strokeWidth={1} stroke='#C4C4C4' segment={[{ x: 21, y: -1.35 }, { x: 21, y: 1.35 }]} />
<Tooltip content={<CustomTooltip chartData1={chartData1} chartData2={chartData2} />} />
<XAxis
height={50}
Expand Down Expand Up @@ -302,7 +312,7 @@ const OptionCallChart: FC<TProps> = (props: TProps) => {
style={{ zIndex: -1 }}
stroke={'#1BA159'}
/>}
<ReferenceArea x1={28} x2={30} y1={0} y2={-1} fill={'transparent'} label={{ value: 'Asset price', position: `${isMobile ? 'right' : 'insideTopRight'}`, className: 'axis-text' }} />
<ReferenceArea x1={26} x2={29} y1={0} y2={-1} fill={'transparent'} label={{ value: 'Asset price', position: `${isMobile ? 'right' : 'insideTopRight'}`, className: 'axis-text' }} />
<ReferenceArea x1={0} x2={2} y1={0} y2={1.2} fill={'transparent'} label={{ value: 'Short call', position: `${isMobile ? 'right' : 'insideTopRight'}`, className: 'axis-text axis-text-pink' }} />
<ReferenceArea x1={0} x2={2} y1={-1} y2={-1.2} fill={'transparent'} label={{ value: 'Long call', position: `${isMobile ? 'right' : 'insideTopRight'}`, className: 'axis-text axis-text-green' }} />
<ReferenceDot r={3} stroke="none" x={15} y={0} label={<ReferenceRectDot value={'Strike price'} leftX={43} top={25} width={85} color={'rgba(10, 10, 30, 0.8)'}/> }/>
Expand All @@ -312,4 +322,4 @@ const OptionCallChart: FC<TProps> = (props: TProps) => {
)
}

export default OptionCallChart
export default CallOptionChart
4 changes: 2 additions & 2 deletions ...StaticChart/CashSecuredPutChart/index.tsx → ...Chart/CashSecuredPutOptionChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ const CustomTooltip = ({ active, payload }: {active?: boolean, payload?: any}) =
return (<div className="tooltip-loading" style={{ backgroundColor: 'white', padding: '0px 8px', borderRadius: '10px' }}>Loading...</div>)
}

const CashSecuredPutChart: FC<TProps> = (props: TProps) => {
const CashSecuredPutOptionChart: FC<TProps> = (props: TProps) => {
const { isMobile } = useMobile()

const { theme, className, domainAxisY, increaseDomainY, chartData1, chartData2, logScaleY, scale } = props
Expand Down Expand Up @@ -336,4 +336,4 @@ const CashSecuredPutChart: FC<TProps> = (props: TProps) => {
)
}

export default CashSecuredPutChart
export default CashSecuredPutOptionChart
4 changes: 2 additions & 2 deletions .../StaticChart/CoveredCollarChart/index.tsx → ...ponents/StaticChart/CollarChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const CustomTooltip = ({ active, payload }: {active?: boolean, payload?: any}) =
return (<div className="tooltip-loading" style={{ backgroundColor: 'white', padding: '0px 8px', borderRadius: '10px' }}>Loading...</div>)
}

const CoveredCollarChart: FC<TProps> = (props: TProps) => {
const CollarChart: FC<TProps> = (props: TProps) => {
const { isMobile } = useMobile()

const { theme, className, domainAxisY, increaseDomainY, chartData1, chartData2, logScaleY, scale } = props
Expand Down Expand Up @@ -272,4 +272,4 @@ const CoveredCollarChart: FC<TProps> = (props: TProps) => {
)
}

export default CoveredCollarChart
export default CollarChart
4 changes: 2 additions & 2 deletions ...ts/StaticChart/CoveredCallChart/index.tsx → ...ticChart/CoveredCallOptionChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ const CustomTooltip = ({ active, payload }: {active?: boolean, payload?: any}) =
return (<div className="tooltip-loading" style={{ backgroundColor: 'white', padding: '0px 8px', borderRadius: '10px' }}>Loading...</div>)
}

const CoveredCallChart: FC<TProps> = (props: TProps) => {
const CoveredCallOptionChart: FC<TProps> = (props: TProps) => {
const { isMobile } = useMobile()
// const dotLabelRef = useRef<SVGCircleElement>(null)

Expand Down Expand Up @@ -354,4 +354,4 @@ const CoveredCallChart: FC<TProps> = (props: TProps) => {
)
}

export default CoveredCallChart
export default CoveredCallOptionChart
8 changes: 4 additions & 4 deletions ...ents/StaticChart/OptionPutChart/index.tsx → ...ents/StaticChart/PutOptionChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ const CustomTooltip = ({ active, payload, chartData1, chartData2 }: {active?: bo
return (<div className="tooltip-loading" style={{ backgroundColor: 'white', padding: '0px 8px', borderRadius: '10px' }}>Loading...</div>)
}

const OptionPutChart: FC<TProps> = (props: TProps) => {
const PutOptionChart: FC<TProps> = (props: TProps) => {
const { isMobile } = useMobile()

const { domainAxisY, increaseDomainY, chartData1, chartData2, logScaleY, scale } = props
Expand Down Expand Up @@ -272,8 +272,8 @@ const OptionPutChart: FC<TProps> = (props: TProps) => {
<CartesianGrid strokeOpacity={0.05} strokeDasharray="3 3"/>
<Line dataKey="zeroLine" strokeWidth="1.8" stroke='white' dot={false} strokeOpacity={1}/>
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 15, y: -1.35 }, { x: 15, y: 1.35 }]} />
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 0, y: -1.35 }, { x: 0, y: 1.35 }]} />
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 0, y: -1.35 }, { x: 0, y: 1.35 }]} />
<ReferenceLine stroke="white" strokeWidth="" segment={[{ x: 0, y: -1.35 }, { x: 0, y: 1.35 }]} style={{ zIndex: 1000 }} alwaysShow/>
<ReferenceLine stroke="white" strokeWidth="1" segment={[{ x: 0, y: -1.35 }, { x: 0, y: 1.35 }]} alwaysShow/>
<ReferenceLine strokeOpacity={0.2} strokeWidth={1} stroke='#C4C4C4' segment={[{ x: 9, y: -1.35 }, { x: 9, y: 1.35 }]} />
<Tooltip content={<CustomTooltip chartData1={chartData1} chartData2={chartData2} />} />
<XAxis
Expand Down Expand Up @@ -317,4 +317,4 @@ const OptionPutChart: FC<TProps> = (props: TProps) => {
)
}

export default OptionPutChart
export default PutOptionChart
144 changes: 105 additions & 39 deletions src/Components/StaticChart/StaticChart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,75 +194,141 @@
}
}

.long-strangle-area-text {
.long-straddle-area-text {
fill: #1BA159;
font-size: 0.8rem;
transform: rotate(-15deg) translate(58rem, 16rem);
transform: rotate(16deg) translate(-60px, -21px);

@media (max-width: 1680px) {
transform: rotate(-16deg) translate(58rem, 14rem);
transform: rotate(18deg) translate(-60px, -21px);

@media (max-width: 1536px) {
transform: rotate(-18deg) translate(46rem, 13.5rem);
transform: rotate(22deg) translate(-40px, -30px);

@media (max-width: 1440px) {
transform: rotate(-23deg) translate(44em, 16rem);
transform: rotate(24deg) translate(-30px, -30px);

@media (max-width: 1024px) {
transform: rotate(-24deg) translate(37em, 16rem);

@media (max-width: 768px) {
transform: rotate(-28deg) translate(34em, 15rem);

@media (max-width: 425px) {
transform: rotate(-49deg) translate(3rem, 7.5rem);

@media (max-width: 375px) {
transform: rotate(-56deg) translate(0rem, 5.8rem);
}
}
transform: rotate(25deg) translate(-20px, -35px);

@media (max-width: 768px) {
transform: rotate(29deg) translate(-5px, -40px);

@media (max-width: 425px) {
transform: rotate(52deg) translate(10px, -80px);

@media (max-width: 375px) {
transform: rotate(57deg) translate(14px, -85px);
}
}
}
}
}
}
}
}

}

.short-straddle-area-text {
fill: #F6029C;
font-size: 0.8rem;
transform: rotate(-16deg) translate(-20px, 9px);

@media (max-width: 1680px) {
transform: rotate(-18deg) translate(-40px, 9px);

@media (max-width: 1536px) {
transform: rotate(-22deg) translate(-50px, 9px);

@media (max-width: 1440px) {
transform: rotate(-24deg) translate(-60px, 7px);

@media (max-width: 1024px) {
transform: rotate(-25deg) translate(-60px, 7px);

@media (max-width: 768px) {
transform: rotate(-29deg) translate(-70px, 7px);

@media (max-width: 425px) {
transform: rotate(-52deg) translate(-165px, -20px);

@media (max-width: 375px) {
transform: rotate(-57deg) translate(-175px, -35px);
}
}
}
}
}
}
}
}

.long-strangle-area-text {
fill: #1BA159;
font-size: 0.8rem;
transform: rotate(20deg) translate(-30px, -25px);

@media (max-width: 1680px) {
transform: rotate(23deg) translate(-30px, -30px);

@media (max-width: 1536px) {
transform: rotate(27deg) translate(-5px, -40px);

@media (max-width: 1440px) {
transform: rotate(30deg) translate(-7px, -45px);

@media (max-width: 1024px) {
transform: rotate(32deg) translate(-8px, -49px);

@media (max-width: 768px) {
transform: rotate(35deg) translate(1px, -53px);

@media (max-width: 425px) {
transform: rotate(58deg) translate(15px, -83px);

@media (max-width: 375px) {
transform: rotate(62deg) translate(15px, -90px);
}
}
}
}
}
}
}
}

.short-strangle-area-text {
fill: #F6029C;
font-size: 0.8rem;
transform: rotate(20deg) translate(850px, -400px);
transform: rotate(-20deg) translate(-50px, 7px);

@media (max-width: 1680px) {
transform: rotate(20deg) translate(750px, -360px);
transform: rotate(-23deg) translate(-70px, 10px);

@media (max-width: 1536px) {
transform: rotate(26deg) translate(620px, -350px);
transform: rotate(-27deg) translate(-75px, 10px);

@media (max-width: 1440px) {
transform: rotate(28deg) translate(580px, -340px);
transform: rotate(-30deg) translate(-85px, 6px);

@media (max-width: 1024px) {
transform: rotate(30deg) translate(540px, -340px);
@media (max-width: 768px) {
transform: rotate(34deg) translate(440px, -340px);
@media (max-width: 425px) {
transform: rotate(57deg) translate(200px, -320px);
@media (max-width: 375px) {
transform: rotate(64deg) translate(170px, -310px);
}
}
transform: rotate(-32deg) translate(-100px, 6px);

@media (max-width: 768px) {
transform: rotate(-36deg) translate(-110px, 6px);

@media (max-width: 425px) {
transform: rotate(-59deg) translate(-185px, -40px);

@media (max-width: 375px) {
transform: rotate(-62deg) translate(-190px, -48px);
}
}
}
}
}
}
}
}
}
}

.protactive-collar-area-text {
fill: #F6029C;
Expand Down
2 changes: 1 addition & 1 deletion src/Components/StaticChart/StaticChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const StaticChartStory = () => {
height={'286px'}
width={'100%'}
chartData2={{ tooltipTitle: 'Profit', tooltipSuffix: '%' }}
type='Option put'
type='Strangle'
chartData1={{ tooltipTitle: 'Loss', tooltipSuffix: '%' }}
domainY={[-1, 1]}
increaseDomainY={0.3}
Expand Down
Loading