Skip to content

Minds Frontend
Minds Frontend
Commit 246d4b94 authored by Olivia Madrid's avatar Olivia Madrid
Browse files
Options
  • Download

(feat): wallet upgrade superstructure cont'd, fixed fake data to make graph work

parent 916e9a0b
epic/wallet-80
1 merge request!675WIP: Wallet upgrade
Pipeline #100141300 running with stages
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 370 deletions
src/app/common/components/timespan-filter/timespan-filter.component.scss
View file @ 246d4b94
......@@ -19,7 +19,8 @@ m-timespanFilter {
border-right: 1px solid themed($m-grey-50);
}
}
&.active {
&.active,
&:hover {
@include m-theme() {
color: themed($m-grey-800);
}
......
src/app/modules/wallet/v2/chart/chart.component.html
View file @ 246d4b94
<m-timespanFilter
[timespans]="timespans"
[activeTimespanId]="activeTimespanId"
[activeTimespanId]="activeTimespan.id"
(timespanChanged)="updateTimespan($event)"
></m-timespanFilter>
<m-chartV2
*ngIf="selectedCurrency && selectedTimespan"
[rawData]="selectedCurrency"
[interval]="selectedTimespan.interval"
*ngIf="activeTimespan && data.visualisation"
[rawData]="data"
[interval]="activeTimespan.interval"
></m-chartV2>
src/app/modules/wallet/v2/chart/chart.component.ts
View file @ 246d4b94
......@@ -7,28 +7,50 @@ import { Timespan } from '../../../../interfaces/dashboard';
templateUrl: './chart.component.html',
})
export class WalletChartComponent implements OnInit {
@Input() activeCurrencyId;
timespans: Timespan[];
activeTimespanId;
data;
selectedCurrency;
timespans: Timespan[] = [
{
// Assuming today is Nov 17th
id: '7d',
label: '7D',
interval: 'day',
from_ts_ms: 1572566400000,
from_ts_iso: '2019-11-01T00:00:00+00:00',
},
{
id: '30d',
label: '30D',
interval: 'day',
from_ts_ms: 1571270400000,
from_ts_iso: '2019-10-17T00:00:00+00:00',
},
{
id: '12m',
label: '12M',
interval: 'month',
from_ts_ms: 1542412800000,
from_ts_iso: '2018-11-17T00:00:00+00:00',
},
];
activeTimespan;
data: any = {
id: 'tokens',
label: 'Tokens',
unit: 'tokens',
};
constructor(protected walletService: WalletDashboardService) {}
ngOnInit() {
this.data = this.walletService.getData();
this.timespans = this.walletService.getTimespans();
this.activeTimespanId = this.timespans.find(
ts => ts.id === this.data.timespan
).id;
this.selectedCurrency = this.walletService
.getCurrencies()
.find(currency => currency.id === this.activeCurrencyId);
this.activeTimespan = this.timespans[0];
this.data['visualisation'] = this.walletService.getTokenChartData(
this.activeTimespan
);
}
updateTimespan($event) {
this.activeTimespanId = $event.timespanId;
// this.walletService.updateTimespan($event.timespanId);
this.activeTimespan = this.timespans.find(
ts => ts.id === $event.timespanId
);
this.data = this.walletService.getTokenChartData(this.activeTimespan);
}
}
src/app/modules/wallet/v2/dashboard.component.html
View file @ 246d4b94
......@@ -37,8 +37,9 @@
</div> -->
<m-walletChart
class="m-walletDashboardViews__view"
[activeCurrencyId]="activeCurrencyId"
*ngIf="activeViewId === 'overview'"
*ngIf="
activeCurrencyId === 'tokens' && activeViewId === 'overview'
"
></m-walletChart>
<m-walletTransactionsTable
class="m-walletDashboardViews__view"
......
src/app/modules/wallet/v2/dashboard.component.ts
View file @ 246d4b94
......@@ -26,7 +26,6 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
currencies: ShadowboxHeaderTab[];
activeCurrencyId: string;
activeViewId: string;
chartData;
views: any = {
tokens: [
......@@ -58,24 +57,21 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
}
this.title.setTitle('Wallet');
this.currencies = this.walletService.getCurrencies();
this.currencies = this.walletService.getCurrencySubtotals();
this.route.paramMap.subscribe((params: ParamMap) => {
this.activeCurrencyId = params.get('currency');
if (params.get('view')) {
if (
params.get('view') &&
this.views[this.activeCurrencyId].find(v => v.id === params.get('view'))
) {
this.activeViewId = params.get('view');
} else {
this.activeViewId = this.views[this.activeCurrencyId][0];
this.activeViewId = this.views[this.activeCurrencyId][0].id;
this.updateView(this.activeViewId);
}
if (this.activeViewId === 'overview') {
this.chartData = this.currencies.find(
currency => currency.id === this.activeCurrencyId
);
}
this.detectChanges();
});
}
......@@ -88,7 +84,15 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
}
updateCurrency($event) {
// this.walletService.updateCurrency($event.tabId);
this.activeCurrencyId = $event.tabId;
this.activeViewId = this.views[this.activeCurrencyId][0].id;
this.router.navigate([
'/v2wallet',
this.activeCurrencyId,
this.activeViewId,
]);
this.detectChanges();
}
updateView(viewId) {
......
src/app/modules/wallet/v2/dashboard.service.ts
View file @ 246d4b94
......@@ -15,221 +15,58 @@ import {
ShadowboxHeaderTab,
} from '../../../interfaces/dashboard';
// export interface UserState {}
// let _state: UserState = fakeData[0];
// const deepDiff = (prev, curr) => JSON.stringify(prev) === JSON.stringify(curr);
@Injectable()
export class WalletDashboardService {
// private currencies = new BehaviorSubject<ShadowboxHeaderTab[]>([
// {
// id: 'tokens',
// label: 'Tokens',
// unit: 'tokens',
// value: 0,
// },
// ]);
// private currencies$ = this.currencies.asObservable();
// private store = new BehaviorSubject<UserState>(_state);
// private state$ = this.store.asObservable();
// Make all the different variables within the UserState observables
// that are emitted only when something inside changes
// category$ = this.state$.pipe(
// map(state => state.category),
// distinctUntilChanged(deepDiff)
// );
// description$ = this.state$.pipe(
// map(state => state.description),
// distinctUntilChanged()
// );
// timespan$ = this.state$.pipe(
// map(state => state.timespan),
// distinctUntilChanged(deepDiff)
// );
// timespans$ = this.state$.pipe(
// map(state => state.timespans),
// distinctUntilChanged(deepDiff)
// );
// metric$ = this.state$.pipe(
// map(state => state.metric),
// distinctUntilChanged(deepDiff)
// );
// metrics$ = this.state$.pipe(
// map(state => state.metrics),
// distinctUntilChanged(deepDiff)
// );
// filter$ = this.state$.pipe(
// map(state => state.filter),
// distinctUntilChanged(deepDiff)
// );
// filters$ = this.state$.pipe(
// map(state => state.filters),
// distinctUntilChanged(deepDiff)
// );
// loading$ = new BehaviorSubject<boolean>(false);
// ready$ = new BehaviorSubject<boolean>(false);
/**
* Viewmodel that resolves once all the data is ready (or updated)
*/
// vm$: Observable<UserState> = new BehaviorSubject(_state);
constructor(private http: MindsHttpClient) {
// this.loadFromRemote();
}
getCurrencies() {
return fakeData.currencies;
getTokenChartData(activeTimespan) {
return fakeData.visualisation;
}
getTimespans() {
return fakeData.timespans;
getCurrencySubtotals() {
const currencySubtotals: ShadowboxHeaderTab[] = [
{
id: 'tokens',
label: 'Tokens',
unit: 'tokens',
},
{
id: 'usd',
label: 'USD',
unit: 'usd',
},
{
id: 'eth',
label: 'Ether',
unit: 'eth',
},
{
id: 'btc',
label: 'Bitcoin',
},
];
currencySubtotals[0].value = this.getTokenSubtotal();
currencySubtotals[1].value = this.getUsdSubtotal();
currencySubtotals[2].value = this.getEthSubtotal();
return currencySubtotals;
}
getData() {
return fakeData;
private getTokenSubtotal() {
// see WalletBalanceTokensComponent loadLocal(), loadRemote()
return 2167.457;
}
updateCurrency(currencyId) {}
private getCurrencySubtotals() {
// return this.http
// .get(`api/v2/analytics/dashboards/${category}`, {
// metric,
// })
// .pipe(
// catchError(_ => of(null)),
// map(response => response)
// );
// }
private getUsdSubtotal() {
// get from Mark after Stripe update
return 13577;
}
// loadFromRemote() {
// combineLatest([this.category$, this.timespan$, this.metric$, this.filter$])
// .pipe(
// distinctUntilChanged(deepDiff),
// catchError(_ => {
// console.log('caught error');
// return of(null);
// }),
// tap(() => this.loading$.next(true)),
// switchMap(([category, timespan, metric, filter]) => {
// // console.log(category, timespan, metric, filter);
// try {
// const response = this.getDashboardResponse(
// category,
// timespan,
// metric,
// filter
// );
// return response;
// } catch (err) {
// return null;
// }
// }),
// catchError(_ => of(null))
// )
// .subscribe(response => {
// if (!response) {
// return;
// }
// const dashboard = response.dashboard;
// this.ready$.next(true);
// this.updateState({
// ..._state,
// category: dashboard.category,
// description: dashboard.description,
// timespan: dashboard.timespan,
// timespans: dashboard.timespans,
// filter: dashboard.filter,
// filters: dashboard.filters,
// metric: dashboard.metric,
// metrics: dashboard.metrics,
// });
// this.loading$.next(false);
// });
// }
// ------- Public Methods ------------------------
// Allows quick snapshot access to data for ngOnInit() purposes
// getStateSnapshot(): UserState {
// return {
// ..._state,
// timespans: { ..._state.timespans },
// metrics: { ..._state.metrics },
// filters: { ..._state.filters },
// };
// }
// updateCategory(category: string) {
// this.updateState({
// ..._state,
// category,
// description: null,
// metrics: [],
// });
// }
// updateTimespan(timespan: string) {
// this.updateState({
// ..._state,
// timespan,
// });
// }
// updateMetric(metric: string) {
// this.updateState({ ..._state, metric });
// }
// updateFilter(selectedFilterStr: string) {
// if (_state.filter.includes(selectedFilterStr)) {
// return;
// }
// const selectedFilterId = selectedFilterStr.split('::')[0];
// const filter = _state.filter;
// const activeFilterIds = filter.map(filterStr => {
// return filterStr.split('::')[0];
// });
// const filterIndex = activeFilterIds.findIndex(
// filterId => filterId === selectedFilterId
// );
// if (activeFilterIds.includes(selectedFilterId)) {
// filter.splice(filterIndex, 1, selectedFilterStr);
// } else {
// filter.push(selectedFilterStr);
// }
// this.updateState({ ..._state, filter });
// }
// // ------- Private Methods ------------------------
/** Update internal state cache and emit from store... */
// private updateState(state: UserState) {
// this.store.next((_state = state));
// }
/** Dashboard REST call */
// private getDashboardResponse(
// category: string,
// timespan: string,
// metric: string,
// filter: string[]
// ): Observable<Response> {
// this.loading$.next(true);
// return this.http
// .get(`api/v2/analytics/dashboards/${category}`, {
// metric,
// timespan,
// filter: filter.join(),
// })
// .pipe(
// catchError(_ => of(null)),
// map(response => response)
// );
// }
private getEthSubtotal() {
// see WalletBalanceTokensComponent loadEth()
return 15.3570957;
}
}
src/app/modules/wallet/v2/fake-data.ts
View file @ 246d4b94
const fakeData = {
timespan: '7d',
timespans: [
{
// Assume today is Nov 17th
id: '7d',
label: '7D',
interval: 'day',
from_ts_ms: 1572566400000,
from_ts_iso: '2019-11-01T00:00:00+00:00',
},
{
id: '30d',
label: '30D',
interval: 'day',
from_ts_ms: 1571270400000,
from_ts_iso: '2019-10-17T00:00:00+00:00',
},
{
id: '12m',
label: '12M',
interval: 'month',
from_ts_ms: 1542412800000,
from_ts_iso: '2018-11-17T00:00:00+00:00',
},
],
currency: 'tokens',
currencies: [
{
id: 'tokens',
label: 'Tokens',
unit: 'tokens',
value: 2167.457,
// value_offchain: 2166.255,
// value_onchain: 1.202,
// top_tabs: [
// { id: 'overview', label: 'Overview' },
// { id: 'transactions', label: 'Transactions' },
// { id: 'settings', label: 'Settings' },
// ],
visualisation: {
type: 'chart',
unit: 'tokens',
segments: [
visualisation: {
type: 'chart',
unit: 'tokens',
segments: [
{
buckets: [
{
buckets: [
{
key: 1567296000000,
date: '2019-09-01T00:00:00+00:00',
value: 11,
},
{
key: 1567382400000,
date: '2019-09-02T00:00:00+00:00',
value: 12,
},
{
key: 1567468800000,
date: '2019-09-03T00:00:00+00:00',
value: 13,
},
{
key: 1567555200000,
date: '2019-09-04T00:00:00+00:00',
value: 9,
},
{
key: 1567641600000,
date: '2019-09-05T00:00:00+00:00',
value: 1,
},
{
key: 1567296000000,
date: '2019-09-06T00:00:00+00:00',
value: 11,
},
{
key: 1567382400000,
date: '2019-09-07T00:00:00+00:00',
value: 12,
},
{
key: 1567468800000,
date: '2019-09-08T00:00:00+00:00',
value: 13,
},
{
key: 1567555200000,
date: '2019-09-09T00:00:00+00:00',
value: 9,
},
{
key: 1567641600000,
date: '2019-09-10T00:00:00+00:00',
value: 7,
},
{
key: 1567555200000,
date: '2019-09-11T00:00:00+00:00',
value: 9,
},
{
key: 1567641600000,
date: '2019-09-12T00:00:00+00:00',
value: 10.2,
},
],
key: 1567296000000,
date: '2019-09-01T00:00:00+00:00',
value: 11,
},
{
key: 1567382400000,
date: '2019-09-02T00:00:00+00:00',
value: 12,
},
{
key: 1567468800000,
date: '2019-09-03T00:00:00+00:00',
value: 13,
},
{
key: 1567555200000,
date: '2019-09-04T00:00:00+00:00',
value: 9,
},
{
key: 1567641600000,
date: '2019-09-05T00:00:00+00:00',
value: 1,
},
{
key: 1567296000000,
date: '2019-09-06T00:00:00+00:00',
value: 11,
},
{
key: 1567382400000,
date: '2019-09-07T00:00:00+00:00',
value: 12,
},
{
key: 1567468800000,
date: '2019-09-08T00:00:00+00:00',
value: 13,
},
{
key: 1567555200000,
date: '2019-09-09T00:00:00+00:00',
value: 9,
},
{
key: 1567641600000,
date: '2019-09-10T00:00:00+00:00',
value: 7,
},
{
key: 1567555200000,
date: '2019-09-11T00:00:00+00:00',
value: 9,
},
{
key: 1567641600000,
date: '2019-09-12T00:00:00+00:00',
value: 10.2,
},
],
},
},
{
id: 'usd',
label: 'USD',
unit: 'usd',
value: 13577, // this is usd in CENTS
visualisation: null,
// top_tabs: [
// { id: 'transactions', label: 'Transactions' },
// { id: 'settings', label: 'Settings' },
// ],
},
{
id: 'eth',
label: 'Ether',
unit: 'eth',
value: 15.3570957,
visualisation: null,
// top_tabs: [{ id: 'settings', label: 'Settings' }],
},
{
id: 'btc',
label: 'Bitcoin',
unit: 'btc',
visualisation: null,
// top_tabs: [{ id: 'settings', label: 'Settings' }],
},
],
],
},
};
export default fakeData;
Please register or to comment