Skip to content

2
2022-196
Commit 7787d817 authored by Dilip Wijethunga's avatar Dilip Wijethunga
Browse files
Options

Currency View Update

parent 0100f8d4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 319 additions and 148 deletions
frontend/src/containers/currency-forteller/ForetellerCard.jsx
View file @ 7787d817
import React, {useEffect, useState} from 'react';
import {Card, Row} from "react-bootstrap";
import {Link} from "react-router-dom";
import {Col, Form, Row} from "react-bootstrap";
import CurrencyDetailsService from "../../services/CurrencyDetailsService";
import CurrencyService from "../../services/CurrencyService";
import SectionTitleTwo from "../../components/ui/section-titles/SectionTitleTwo";
import ForetellerDetail from "./ForetellerDetail";
const ForetellerCard = () => {
const [cardData, setCardData] = useState([]);
const [coinName, setCoinName] = useState("default");
const [coinCode, setCoinCode] = useState("default");
const [coinDescription, setCoinDescription] = useState("default");
const [coinImage, setCoinImage] = useState("default");
const [priceData, setPriceData] = useState([]);
const [volumeData, setVolumeData] = useState([]);
const [marketCapData, setMarketCapData] = useState([]);
useEffect(() => {
async function dataFetch() {
......@@ -20,48 +28,120 @@ const ForetellerCard = () => {
dataFetch();
}, []);
const dataFetch = async (code) => {
await CurrencyService.getPredictionByCurrencyAction(code, 'price')
.then(response => response.data)
.then(response => response.data)
.then(response => {
setPriceData(response)
})
.catch(error => {
console.log(error.message)
});
await CurrencyService.getPredictionByCurrencyAction(code, 'volume')
.then(response => response.data)
.then(response => response.data)
.then(response => {
setVolumeData(response)
})
.catch(error => {
console.log(error.message)
});
await CurrencyService.getPredictionByCurrencyAction(code, 'market_cap')
.then(response => response.data)
.then(response => response.data)
.then(response => {
setMarketCapData(response)
})
.catch(error => {
console.log(error.message)
});
}
function handleChange() {
return <ForetellerDetail
title={coinName}
coinImage={coinImage}
code={coinCode}
desciption={coinDescription}
priceData={priceData}
volumeData={volumeData}
marketCapData={marketCapData}/>
}
const handleCoinType = async (event) => {
let data = JSON.parse(event.target.value);
await setCoinName(data.name);
await setCoinCode(data.code);
await setCoinImage(data.image);
await setCoinDescription(data.description);
await dataFetch(data.code);
await handleChange();
}
const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
return (<div className="market__table bg--white pt--140 pb--120">
return (<div className="market__table bg--white pt--40 pb--120">
<div className="container">
<div className="row">
<div className="col-lg-12">
<SectionTitleTwo title="CURRENCY FORETELLER"/>
<p className='text-center'>{text}</p>
<p className="text-center">Select the currency you want and run the analysis.</p>
{/*<h4>Be Aware : </h4>*/}
{/*<p>*/}
{/* Done with the foreknowledge or forewarning that there is implied*/}
{/* risk or danger which one must accept as one's own responsibility.*/}
{/*</p>*/}
<h4 className="text-danger text-center">Be Aware! : Done with the foreknowledge or forewarning that
there is implied
risk or danger which one must accept as one's own responsibility.</h4>
{/*<p className={"text-danger text-center text--italic"}>*/}
{/* [ Done with the foreknowledge or forewarning that there is implied*/}
{/* risk or danger which one must accept as one's own responsibility.]*/}
{/*</p>*/}
</div>
</div>
<div className='pt-5'>
<Row className="g-4 align-items-center justify-content-center">
{
cardData.length === 0 ?
<div></div>
:
cardData.map((data, idx) => (
<Link
to={{
pathname: process.env.PUBLIC_URL + '/foreteller',
state: {
name: data.name, code: data.code, image: data.image
}
}}
key={idx}>
<Card className="mr-2 mt-2 p-2" style={{width: '20rem'}}>
<Card.Img
src={data.image}
alt={data.image}/>
<Card.Body>
<div className='flex justify-content-center align-items-center'>
<p className='text-center h2 text-uppercase'>{data.name}</p>
</div>
</Card.Body>
</Card>
</Link>
))
}
<Form>
<Form.Control required as="select"
name={'coinName'}
value={coinName}
onChange={handleCoinType}>
<option value={JSON.stringify({name: "default", code: "default", image: "default", description: "default"})}>
Select Your Coin
</option>
{cardData.map((data, idx) => (
<option key={idx}
value={JSON.stringify({
name: data.name,
code: data.code,
image: data.image,
description: data.description
})}>
{data.name}
</option>
))}
</Form.Control>
</Form>
</Row>
<Row>
{coinName === 'default' ? (
<div>
</div>
) : (
<div>
{handleChange()}
</div>
)}
</Row>
</div>
</div>
</div>);
}
......
frontend/src/containers/currency-forteller/ScoreMeter.jsx
View file @ 7787d817
......@@ -3,54 +3,54 @@ import GaugeChart from 'react-gauge-chart'
import {Row} from "react-bootstrap";
function ScoreMeter({priceScore, marketCapScore, volumeScore}) {
function ScoreMeter({priceScore, marketCapScore, volumeScore, sentimentScore}) {
return (
<div className='pt-5'>
<Row className='g-4 align-items-center justify-content-center'>
<div className="mr-2 mt-2 p-2"
style={{backgroundColor: '#001232FF', width: '20rem', borderRadius: '20px'}}>
style={{backgroundColor: '#001232FF', width: '18rem', borderRadius: '20px'}}>
<GaugeChart id="gauge-chart1"
nrOfLevels={10}
arcsLength={[0.3, 0.5, 0.2]}
arcsLength={[0.2, 0.5, 0.3]}
colors={["#ff0015", "#ffd300", "#38ff00"]}
arcWidth={0.3}
percent={(priceScore) || 0}
percent={(priceScore) / 100 || 0}
/>
<h4 className='text-white text-center'>Price Score</h4>
</div>
<div className="mr-2 mt-2 p-2"
style={{backgroundColor: '#001232FF', width: '20rem', borderRadius: '20px'}}>
style={{backgroundColor: '#001232FF', width: '18rem', borderRadius: '20px'}}>
<GaugeChart id="gauge-chart2"
nrOfLevels={10}
arcsLength={[0.3, 0.5, 0.2]}
arcsLength={[0.2, 0.5, 0.3]}
colors={["#ff0015", "#ffd300", "#38ff00"]}
arcWidth={0.3}
percent={(marketCapScore) || 0}
percent={(marketCapScore) / 100 || 0}
/>
<h4 className='text-white text-center'>Market Cap Score</h4>
</div>
<div className="mr-2 mt-2 p-2"
style={{backgroundColor: '#001232FF', width: '20rem', borderRadius: '20px'}}>
style={{backgroundColor: '#001232FF', width: '18rem', borderRadius: '20px'}}>
<GaugeChart id="gauge-chart3"
nrOfLevels={10}
arcsLength={[0.3, 0.5, 0.2]}
arcsLength={[0.2, 0.5, 0.3]}
colors={["#ff0015", "#ffd300", "#38ff00"]}
arcWidth={0.3}
percent={(volumeScore) / 10 || 0}
percent={(volumeScore) / 100 || 0}
/>
<h4 className='text-white text-center'>volume Score</h4>
<h4 className='text-white text-center'>Volume Score</h4>
</div>
<div className="mr-2 mt-2 p-2"
style={{backgroundColor: '#001232FF', width: '20rem', borderRadius: '20px'}}>
style={{backgroundColor: '#12005e', width: '25rem', borderRadius: '20px'}}>
<GaugeChart id="gauge-chart3"
nrOfLevels={10}
arcsLength={[0.3, 0.5, 0.2]}
arcsLength={[0.2, 0.5, 0.3]}
colors={["#ff0015", "#ffd300", "#38ff00"]}
arcWidth={0.3}
percent={(priceScore + marketCapScore + volumeScore) || 0}
percent={((priceScore + marketCapScore + volumeScore + sentimentScore) / 4) / 100 || 0}
/>
<h4 className='text-white text-center'>Total Score</h4>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment