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

Merge pull request #8 from sftwr-prjct-dev/feature/update-readme #15

Open
wants to merge 13 commits into
base: revert-10-feature/update-readme
Choose a base branch
from
Open

Merge pull request #8 from sftwr-prjct-dev/feature/update-readme #15

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
3cb6652
mint screen
rexdavinci Jan 31, 2021
9175cf2
removed build errors and minor fixes
rexdavinci Jan 31, 2021
1c5c4d0
redeem script
rexdavinci Feb 3, 2021
7467d73
fixed header
rexdavinci Feb 3, 2021
d898733
Merge pull request #7 from sftwr-prjct-dev/feature/mint
eltNEG Feb 5, 2021
7e6d59f
Merge branch 'main' into feature/redeem-screen
eltNEG Feb 5, 2021
d6ea0b3
Merge pull request #9 from sftwr-prjct-dev/feature/redeem-screen
eltNEG Feb 5, 2021
7b50447
Implement staking
eltNEG Feb 5, 2021
5b34c50
Implement buyback
eltNEG Feb 5, 2021
8f0a898
Fix home page width and add chart
eltNEG Feb 6, 2021
8e36ed3
Merge pull request #12 from sftwr-prjct-dev/feature/buyback
eltNEG Feb 6, 2021
ebbc62e
fix range slider, create tab header component, fix radio buttons, fix…
Feb 6, 2021
7a07224
Merge pull request #13 from sftwr-prjct-dev/feature/refactor_table
eltNEG Feb 7, 2021
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
113 changes: 66 additions & 47 deletions components/Dashboard/Chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,98 @@
import { Doughnut, Line } from 'react-chartjs-2'
import { Doughnut, Line } from 'react-chartjs-2';

const Chart = ({ width, height, tableId, data, stepSize }) => {

return tableId !== 4 ? (
<Line
<Line
height={height}
width={width}
width={width}
data={{
datasets: data
datasets: [
{
fill: false,
borderColor: '#4CBFC0',
backgroundColor: '#4CBFC0',
pointRadius: 0,
pointHitRadius: 6,
pointHoverRadius: 4,
...data[0],
},
],
}}
options= {{
options={{
scales: {
xAxes: [{
xAxes: [
{
type: 'time',
time: {
unit: 'month',
stepSize: stepSize
stepSize: stepSize,
},
}],
yAxes: [{
},
],
yAxes: [
{
ticks: {
beginAtZero: true
}
}]
beginAtZero: true,
},
},
],
},
tooltips: {
mode: 'nearest'
mode: 'nearest',
callbacks: {
title: function (tooltipItem, data) {
return '$' + Number(tooltipItem[0].yLabel);
},
label: function (tooltipItem) {
console.log(tooltipItem);
return tooltipItem.xLabel;
},
},
titleFontSize: 16,
displayColors: false,
},
elements: {
line: {
tension: 0
}
tension: 0,
},
},
legend: {
display: false
display: false,
},
}
}
maintainAspectRatio: false,
}}
/>
) : (
<Doughnut
<Doughnut
height={height}
width={width}
width={width}
data={{
datasets:[
datasets: [
{
// label: 'Algorithmic',
data: data,
backgroundColor: [
'blue',
'orange'
],
}
backgroundColor: ['blue', '#4CBFC0'],
},
],
labels: ['Algorithmic', 'USDC']
labels: ['Algorithmic', 'USDC'],
}}
options= {
{
tooltips: {
mode: 'nearest'
},
layout: {
padding: { bottom: 8 }
options={{
tooltips: {
mode: 'nearest',
},
layout: {
padding: { bottom: 8 },
},
legend: {
labels: {
position: 'left',
align: 'start',
fontColor: '#FFF',
},
legend: {
labels: {
position: 'left',
align: 'start',
fontColor: '#FFF'
}
}
}
}
},
}}
/>
)
}
);
};

export default Chart
export default Chart;
182 changes: 116 additions & 66 deletions components/Dashboard/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,146 @@
import { useState } from 'react'
import { useEffect, useRef, useState } from 'react';
import TabHeader from '../TabHeader';
import Chart from './Chart';
import { TableDropdown, TableHeader } from './typeDefs'
import { TableDropdown, TableHeader } from './typeDefs';


const period = ['All Time', '1 Year', '6 months', '3 months', '1 Month', '1 Week', '1 Day', '8 Hours', '1 Hour', '15 Minutes']
const period = [
'All Time',
'1 Year',
'6 months',
'3 months',
'1 Month',
'1 Week',
'1 Day',
'8 Hours',
'1 Hour',
'15 Minutes',
];

const list = {
'frax-period' : [...period],
'frax-period': [...period],
'frax-category': ['Price', 'Supply', 'Market Cap'],
'ratio-period': [...period],
'ratio-category': ['Ratio', 'Total Value'],
'fxs-period': [...period],
'fxs-category': ['Price', 'Circulation Supply', 'Circ. Market Cap', 'Supply', 'Market Cap', 'FXS Burned'],
'total-value': ['Total Value', '% Algorithmic']
}
'fxs-category': [
'Price',
'Circulation Supply',
'Circ. Market Cap',
'Supply',
'Market Cap',
'FXS Burned',
],
'total-value': ['Total Value', '% Algorithmic'],
};

const Table = ({ table, selected, setSelected }) => {

const [openDropdown, setOpendropdown] = useState(false)
const [openDropdown, setOpendropdown] = useState(false);
const [selectedItem, setSelectedItem] = useState({
'frax-period': list['frax-period'][0],
'frax-category': list['frax-category'][0],
'ratio-period': list['ratio-period'][0],
'ratio-category': list['ratio-category'][0],
'fxs-period': list['fxs-period'][0],
'fxs-category': list['fxs-category'][0],
'total-value': list['total-value'][0]
})
'total-value': list['total-value'][0],
});

const showOptions = (id: string) => {
setSelected(id)
setOpendropdown(!openDropdown)
}
setSelected(id);
setOpendropdown(!openDropdown);
};

const changeSelectedItem = (newSelection: string) => {
setSelectedItem(prev => {
return { ...prev, [selected]: newSelection }
})
}
setSelectedItem((prev) => {
return { ...prev, [selected]: newSelection };
});
};

return(
<div className="w-full md:w-1/2 md:h-1/2 border-2 border-gray-700">
<div className="md:flex">
{ table.label && <p className="text-center md:p-2 text-white font-sans md:text-3xl bg-black">{table.label}</p> }
<div className="w-full">
<div className="flex">
{
table.header.map((item: TableHeader) => {
return (
<div key={item.text} className="flex-1 text-center">
<p className="dash-header-top font-poppins antialiased tracking-tight text-sm py-2">{ item.text } </p>
<p className="dash-header-bottom font-poppins antialiased tracking-tight text-sm py-1 text-white border-gray-500">{ item.value } </p>
</div>
)})
}
</div>
</div>
</div>
const dropdownRef = useRef(null);
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setOpendropdown(false);
}
};
useEffect(() => {
document.addEventListener('click', handleClickOutside, true);
return () => {
document.removeEventListener('click', handleClickOutside, true);
};
});

return (
<div className="w-full md:w-1/2 md:h-1/2 border-2 border-gray-700 overflow-hidden flex flex-col">
<TabHeader label={table.label} items={table.header} itemKey="text" />
<div className="flex justify-end chart">
{
table.dropdown.map((item: TableDropdown) => {
return(
<div onClick={() => showOptions(item.id)} className=" w-1/3 md:w-1/4 relative mr-5" key={item.id}>
<div className="mr-3 hover:border-white hover:border-2 my-2 rounded bg-black">
<div className="flex justify-between px-2 dropdown rounded hover:shadow-outline">
<p className="text-xs text-white md:py-1">{selectedItem[item.id]}</p>
<div className="md:pt-1">
<svg fill="#FFF" height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>
</div>
</div>
</div>
<div className="w-11/12 absolute z-10">
{
(openDropdown && selected === item.id) && <div className="overflow-y-auto rounded-sm right-6 bg-black text-white py-1 dropdown-menu">
{
list[selected].map((p: string) => {
return <p onClick={() => {changeSelectedItem(p)}} key={p} className="text-xs py-2 pl-3 hover:bg-blue-700 hover:text-white">{p}</p>
})
}
</div>
{table.dropdown.map((item: TableDropdown) => {
return (
<div
ref={dropdownRef}
onClick={() => showOptions(item.id)}
className=" w-1/3 md:w-1/4 relative mr-5"
key={item.id}
>
<div className="mr-3 hover:border-white hover:border-2 my-2 rounded bg-black">
<div
className={
'flex cursor-pointer justify-between px-2 dropdown rounded hover:shadow-outline border ' +
(openDropdown && selected === item.id
? 'border-blue'
: 'border-transparent')
}
>
<p className="text-xs text-white md:py-1">
{selectedItem[item.id]}
</p>
<div className="md:pt-1">
<svg
fill="#FFF"
height="20"
width="20"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
>
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
</svg>
</div>
</div>
</div>
)
})
}
<div className="w-11/12 absolute z-10">
{openDropdown && selected === item.id && (
<div className="overflow-y-auto rounded-sm right-6 bg-black text-white py-1 dropdown-menu">
{list[selected].map((p: string) => {
return (
<p
onClick={() => {
changeSelectedItem(p);
}}
key={p}
className="text-xs cursor-pointer py-2 pl-3 hover:bg-blue hover:text-white"
>
{p}
</p>
);
})}
</div>
)}
</div>
</div>
);
})}
</div>
<div className="chart">
<Chart tableId={table.id} height={ table.id === 1 || table.id === 2 ? 180 : 275 } width={600} data={table.data} stepSize={table.stepSize}/>
<div className="chart p-3">
<Chart
tableId={table.id}
height={260}
width={600}
data={table.data}
stepSize={table.stepSize}
/>
</div>
</div>
)
}
);
};

export default Table
export default Table;
Loading