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 Show 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 React, {useEffect, useState} from 'react';
import {Card, Row} from "react-bootstrap"; import {Col, Form, Row} from "react-bootstrap";
import {Link} from "react-router-dom";
import CurrencyDetailsService from "../../services/CurrencyDetailsService"; import CurrencyDetailsService from "../../services/CurrencyDetailsService";
import CurrencyService from "../../services/CurrencyService";
import SectionTitleTwo from "../../components/ui/section-titles/SectionTitleTwo"; import SectionTitleTwo from "../../components/ui/section-titles/SectionTitleTwo";
import ForetellerDetail from "./ForetellerDetail";
const ForetellerCard = () => { const ForetellerCard = () => {
const [cardData, setCardData] = useState([]); 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(() => { useEffect(() => {
async function dataFetch() { async function dataFetch() {
...@@ -20,48 +28,120 @@ const ForetellerCard = () => { ...@@ -20,48 +28,120 @@ const ForetellerCard = () => {
dataFetch(); 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.' 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="container">
<div className="row"> <div className="row">
<div className="col-lg-12"> <div className="col-lg-12">
<SectionTitleTwo title="CURRENCY FORETELLER"/> <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> </div>
<div className='pt-5'> <div className='pt-5'>
<Row className="g-4 align-items-center justify-content-center"> <Row className="g-4 align-items-center justify-content-center">
{ <Form>
cardData.length === 0 ? <Form.Control required as="select"
<div></div> name={'coinName'}
: value={coinName}
cardData.map((data, idx) => ( onChange={handleCoinType}>
<Link
to={{ <option value={JSON.stringify({name: "default", code: "default", image: "default", description: "default"})}>
pathname: process.env.PUBLIC_URL + '/foreteller', Select Your Coin
state: { </option>
name: data.name, code: data.code, image: data.image {cardData.map((data, idx) => (
} <option key={idx}
}} value={JSON.stringify({
key={idx}> name: data.name,
<Card className="mr-2 mt-2 p-2" style={{width: '20rem'}}> code: data.code,
<Card.Img image: data.image,
src={data.image} description: data.description
alt={data.image}/> })}>
<Card.Body> {data.name}
<div className='flex justify-content-center align-items-center'> </option>
<p className='text-center h2 text-uppercase'>{data.name}</p> ))}
</Form.Control>
</Form>
</Row>
<Row>
{coinName === 'default' ? (
<div>
</div> </div>
</Card.Body> ) : (
</Card> <div>
</Link> {handleChange()}
)) </div>
} )}
</Row> </Row>
</div> </div>
</div> </div>
</div>); </div>);
} }
......
frontend/src/containers/currency-forteller/ScoreMeter.jsx
View file @ 7787d817
...@@ -3,54 +3,54 @@ import GaugeChart from 'react-gauge-chart' ...@@ -3,54 +3,54 @@ import GaugeChart from 'react-gauge-chart'
import {Row} from "react-bootstrap"; import {Row} from "react-bootstrap";
function ScoreMeter({priceScore, marketCapScore, volumeScore}) { function ScoreMeter({priceScore, marketCapScore, volumeScore, sentimentScore}) {
return ( return (
<div className='pt-5'> <div className='pt-5'>
<Row className='g-4 align-items-center justify-content-center'> <Row className='g-4 align-items-center justify-content-center'>
<div className="mr-2 mt-2 p-2" <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" <GaugeChart id="gauge-chart1"
nrOfLevels={10} nrOfLevels={10}
arcsLength={[0.3, 0.5, 0.2]} arcsLength={[0.2, 0.5, 0.3]}
colors={["#ff0015", "#ffd300", "#38ff00"]} colors={["#ff0015", "#ffd300", "#38ff00"]}
arcWidth={0.3} arcWidth={0.3}
percent={(priceScore) || 0} percent={(priceScore) / 100 || 0}
/> />
<h4 className='text-white text-center'>Price Score</h4> <h4 className='text-white text-center'>Price Score</h4>
</div> </div>
<div className="mr-2 mt-2 p-2" <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" <GaugeChart id="gauge-chart2"
nrOfLevels={10} nrOfLevels={10}
arcsLength={[0.3, 0.5, 0.2]} arcsLength={[0.2, 0.5, 0.3]}
colors={["#ff0015", "#ffd300", "#38ff00"]} colors={["#ff0015", "#ffd300", "#38ff00"]}
arcWidth={0.3} arcWidth={0.3}
percent={(marketCapScore) || 0} percent={(marketCapScore) / 100 || 0}
/> />
<h4 className='text-white text-center'>Market Cap Score</h4> <h4 className='text-white text-center'>Market Cap Score</h4>
</div> </div>
<div className="mr-2 mt-2 p-2" <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" <GaugeChart id="gauge-chart3"
nrOfLevels={10} nrOfLevels={10}
arcsLength={[0.3, 0.5, 0.2]} arcsLength={[0.2, 0.5, 0.3]}
colors={["#ff0015", "#ffd300", "#38ff00"]} colors={["#ff0015", "#ffd300", "#38ff00"]}
arcWidth={0.3} 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>
<div className="mr-2 mt-2 p-2" <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" <GaugeChart id="gauge-chart3"
nrOfLevels={10} nrOfLevels={10}
arcsLength={[0.3, 0.5, 0.2]} arcsLength={[0.2, 0.5, 0.3]}
colors={["#ff0015", "#ffd300", "#38ff00"]} colors={["#ff0015", "#ffd300", "#38ff00"]}
arcWidth={0.3} 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> <h4 className='text-white text-center'>Total Score</h4>
</div> </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