diff --git a/.yarn/cache/chart.js-npm-3.6.2-da412b00f1-0883adced8.zip b/.yarn/cache/chart.js-npm-3.6.2-da412b00f1-0883adced8.zip new file mode 100644 index 00000000..7004f0ce Binary files /dev/null and b/.yarn/cache/chart.js-npm-3.6.2-da412b00f1-0883adced8.zip differ diff --git a/.yarn/cache/faker-npm-5.5.3-541ce97798-684fd64c8d.zip b/.yarn/cache/faker-npm-5.5.3-541ce97798-684fd64c8d.zip new file mode 100644 index 00000000..ba816b9e Binary files /dev/null and b/.yarn/cache/faker-npm-5.5.3-541ce97798-684fd64c8d.zip differ diff --git a/.yarn/cache/react-chartjs-2-npm-4.0.0-b00d64a798-25998a4cc1.zip b/.yarn/cache/react-chartjs-2-npm-4.0.0-b00d64a798-25998a4cc1.zip new file mode 100644 index 00000000..00622d2a Binary files /dev/null and b/.yarn/cache/react-chartjs-2-npm-4.0.0-b00d64a798-25998a4cc1.zip differ diff --git a/apps/crypto/package.json b/apps/crypto/package.json index 89fe9475..2cd13cbe 100644 --- a/apps/crypto/package.json +++ b/apps/crypto/package.json @@ -12,6 +12,10 @@ "build": "felvin-cli build:app" }, "dependencies": { + "@felvin-search/core": "^1.46.0", + "chart.js": "^3.6.2", + "faker": "^5.5.3", + "react-chartjs-2": "^4.0.0", "@felvin-search/core": "^1.46.0" }, "devDependencies": { diff --git a/apps/crypto/src/App.jsx b/apps/crypto/src/App.jsx index 3c625893..3d18c3cb 100644 --- a/apps/crypto/src/App.jsx +++ b/apps/crypto/src/App.jsx @@ -1,6 +1,39 @@ import React, { useState } from "react"; import styled from "styled-components"; import { isTriggered } from "@felvin-search/core"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, +} from "chart.js"; +import { Line } from "react-chartjs-2"; +import faker from "faker"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +); + +export const options = { + responsive: true, + plugins: { + title: { + display: true, + }, + }, +}; + +const labels = []; //------------Styled Components------------- // If you're unfamiliar with styled components @@ -34,67 +67,102 @@ const Element = styled.div` margin: 0 auto; `; +var cryptos = [ + { + value: "btc", + text: "BTC", + }, + { + value: "eth", + text: "ETH", + }, +]; + //========================================= // Your UI logic goes here. // `data` prop is exactly what is returned by queryToData. function Component({ data }) { let values = data.data; - let names = []; - values.forEach((e) => { - names.push({ name: e.name }); - }); - const [name, setName] = useState(values[0].name); + + const [name, setName] = useState("BTC"); const handleChange = (e) => { setName(e.target.value); + console.log(e.target.value); + }; + + let priceArray = []; + let timestampArray = []; + + for (let i = 0; i < values.values.length; i++) { + priceArray.push(values.values[i][1]); + let newTime = convertTimestamp(values.values[i][0]); + timestampArray.push(newTime); + } + + // Convert timestampt to human readable + function convertTimestamp(timestamp) { + let date = new Date(timestamp); + return date.toLocaleString(); + } + + for (let i = 0; i < values.values.length; i++) { + labels.push(timestampArray[i]); + } + + const crypto_data = { + labels, + datasets: [ + { + label: "Price", + data: priceArray, + borderColor: "rgb(255, 99, 132)", + backgroundColor: "rgba(255, 99, 132, 0.5)", + }, + ], }; + return ( - - {values.map((e) => { - if (e.name === name) { - return ( - - - - Name🪙 :{e.name} - - - Symbol:{e.symbol} - - - Price💰:{e.metrics.market_data.price_usd}USD - - - 24Hr High📈 :{e.metrics.market_data.ohlcv_last_24_hour.high} - USD - - - 24Hr Low📉 :{e.metrics.market_data.ohlcv_last_24_hour.low} - USD - - - - - 24Hr Open :{e.metrics.market_data.ohlcv_last_24_hour.open} - USD - - - 24Hr Close :{e.metrics.market_data.ohlcv_last_24_hour.close} - USD - - - - ); - } - })} + + + + Name :{values.name} + + + + Symbol :{values.symbol} + {/* */} + + + + + Price : +

+ ${values.values.at(-1)[1].toFixed(2)} +

+ + + + +

{convertTimestamp(values.values.at(-1)[0])}

+ + + + + High :{values.values.at(-1)[2].toFixed(2)} + + + Low :{values.values.at(-1)[3].toFixed(2)} + + + + ); } @@ -119,8 +187,10 @@ const queryToData = async ({ query }) => { return; } + // fetchdata(coin); + const response = await fetch( - "https://data.messari.io/api/v1/assets?fields=id,name,symbol,metrics/market_data/price_usd,metrics/market_data/ohlcv_last_24_hour", + `https://data.messari.io/api/v1/assets/btc/metrics/price/time-series`, { method: "GET", redirect: "follow", diff --git a/yarn.lock b/yarn.lock index 7a49bc9b..e8883bcb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1698,7 +1698,10 @@ __metadata: "@felvin-search/core": ^1.46.0 "@types/react": ^17.0.0 "@types/styled-components": ^5.1.11 + chart.js: ^3.6.2 + faker: ^5.5.3 react: ^17.0.2 + react-chartjs-2: ^4.0.0 react-dom: ^17.0.2 styled-components: ^5.3.0 peerDependencies: @@ -5340,6 +5343,13 @@ __metadata: languageName: node linkType: hard +"chart.js@npm:^3.6.2": + version: 3.6.2 + resolution: "chart.js@npm:3.6.2" + checksum: 0883adced890eb0ee77a8374e6f89412a82df694f25767a5b14a200735922adf6521366a1419a24025e53203ea00ed70ba1dfc86e2f030c9ef183c6909f9dbdd + languageName: node + linkType: hard + "chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.1": version: 3.5.2 resolution: "chokidar@npm:3.5.2" @@ -7430,6 +7440,13 @@ __metadata: languageName: node linkType: hard +"faker@npm:^5.5.3": + version: 5.5.3 + resolution: "faker@npm:5.5.3" + checksum: 684fd64c8d3897e54248f95b4f6319f75d97691b8500cd13adf4af2c28f9204f766c1d1aaa6b41338f0beaaa87256c3132f8708a1a8f189d122b92f6b98081c3 + languageName: node + linkType: hard + "fast-deep-equal@npm:^3.1.1": version: 3.1.3 resolution: "fast-deep-equal@npm:3.1.3" @@ -13347,6 +13364,16 @@ __metadata: languageName: node linkType: hard +"react-chartjs-2@npm:^4.0.0": + version: 4.0.0 + resolution: "react-chartjs-2@npm:4.0.0" + peerDependencies: + chart.js: ^3.5.0 + react: ^16.8.0 || ^17.0.0 + checksum: 25998a4cc14910641c1184245c6672211d436877a456c70fa16bf67e2b470e7899cef578618fd8842a7d25103a973f25c7f7ec01200fdcbe1b04913fabb87650 + languageName: node + linkType: hard + "react-color@npm:^2.19.3": version: 2.19.3 resolution: "react-color@npm:2.19.3"