(chore): more fixes with production data (f79e7150) · Commits · Minds / Minds Frontend

src/app/modules/analytics/v2/components/filter/filter.component.html

+1 −1

Original line number	Original line	Diff line number	Diff line
	<ng-container *ngIf="filter.id !== 'channel'">		<ng-container *ngIf="true">
	<div class="filterLabelWrapper" *ngIf="filter.id !== 'timespan'">		<div class="filterLabelWrapper" *ngIf="filter.id !== 'timespan'">
	<span>{{ filter.label }}</span>		<span>{{ filter.label }}</span>
	<m-tooltip icon="help">		<m-tooltip icon="help">

src/app/modules/analytics/v2/dashboard.component.html

+11 −3

Original line number	Original line	Diff line number	Diff line
	@@ -5,9 +5,17 @@
	<!-- <section class="main" *ngIf="ready$ \| async"> -->		<!-- <section class="main" *ngIf="ready$ \| async"> -->
	<section class="main" [ngClass]="{ isMobile: isMobile }">		<section class="main" [ngClass]="{ isMobile: isMobile }">
	<div class="mainHeader">		<div class="mainHeader">
			<div class="dashboardTitle">
	<h3 class="selectedCatLabel">		<h3 class="selectedCatLabel">
	{{ category$ \| async \| titlecase }}		{{ category$ \| async \| titlecase }}
	</h3>		</h3>
			<p
			class="selectedCatDescription"
			*ngIf="description$ \| async as description"
			>
			{{ description }}
			</p>
			</div>
	<div class="globalFilters">		<div class="globalFilters">
	<!-- TODO: *ngIf for global_filter bool -->		<!-- TODO: *ngIf for global_filter bool -->
	<!-- TODO: enable only show to admins -->		<!-- TODO: enable only show to admins -->

src/app/modules/analytics/v2/dashboard.component.scss

+10 −0

Original line number	Original line	Diff line number	Diff line
	@@ -43,6 +43,16 @@
	display: flex;		display: flex;
	justify-content: space-between;		justify-content: space-between;
	align-items: flex-start;		align-items: flex-start;

			h3 {
			line-height: 0;
			margin-top: 40px;
			}
			p {
			@include m-theme() {
			color: themed($m-grey-300);
			}
			}
	}		}

	.globalFilters {		.globalFilters {

src/app/modules/analytics/v2/dashboard.component.ts

+1 −0

Original line number	Original line	Diff line number	Diff line
	@@ -31,6 +31,7 @@ export class AnalyticsDashboardComponent implements OnInit, OnDestroy {
	// subscription: Subscription;		// subscription: Subscription;
	paramsSubscription: Subscription;		paramsSubscription: Subscription;
	category$ = this.analyticsService.category$;		category$ = this.analyticsService.category$;
			description$ = this.analyticsService.description$;
	selectedCat: string;		selectedCat: string;

	selectedTimespan; //string? or Timespan?		selectedTimespan; //string? or Timespan?

src/app/modules/analytics/v2/dashboard.service.ts

+31 −88

Original line number	Original line	Diff line number	Diff line
	@@ -14,12 +14,9 @@ import {
	catchError,		catchError,
	} from 'rxjs/operators';		} from 'rxjs/operators';

	import { Client } from '../../../services/api/client';		import { MindsHttpClient } from '../../../common/api/client.service';
	import fakeData from './fake-data';		import fakeData from './fake-data';

	// TEMPORARY
	import { HttpClient, HttpHeaders } from '@angular/common/http';

	export interface Category {		export interface Category {
	id: string;		id: string;
	label: string;		label: string;
	@@ -107,6 +104,7 @@ export interface Timespan {

	export interface UserState {		export interface UserState {
	category: string;		category: string;
			description?: string;
	timespan: string;		timespan: string;
	timespans: Timespan[];		timespans: Timespan[];
	metric: string;		metric: string;
	@@ -144,46 +142,34 @@ export class AnalyticsDashboardService {
	category$ = this.state$.pipe(		category$ = this.state$.pipe(
	map(state => state.category),		map(state => state.category),
	distinctUntilChanged(deepDiff)		distinctUntilChanged(deepDiff)
	//tap(category => console.log('category changed', category))		);
			description$ = this.state$.pipe(
			map(state => state.description),
			distinctUntilChanged()
	);		);
	timespan$ = this.state$.pipe(		timespan$ = this.state$.pipe(
	map(state => state.timespan),		map(state => state.timespan),
	distinctUntilChanged(deepDiff)		distinctUntilChanged(deepDiff)
	//tap(timespan => console.log('timespan changed', timespan))
	);		);
	timespans$ = this.state$.pipe(		timespans$ = this.state$.pipe(
	map(state => state.timespans),		map(state => state.timespans),
	distinctUntilChanged(deepDiff)		distinctUntilChanged(deepDiff)
	//tap(timespans => console.log('timespans changed', timespans))
	);		);
	metric$ = this.state$.pipe(		metric$ = this.state$.pipe(
	map(state => state.metric),		map(state => state.metric),
	distinctUntilChanged(deepDiff)		distinctUntilChanged(deepDiff)
	//distinctUntilChanged((prev, curr) => {
	// console.log('distinctUntilChanged() on metric$');
	// console.log(JSON.stringify(prev), JSON.stringify(curr));
	// return deepDiff(prev, curr);
	//}),
	//tap(metric => console.log('metric changed', metric))
	);		);
	metrics$ = this.state$.pipe(		metrics$ = this.state$.pipe(
	map(state => state.metrics),		map(state => state.metrics),
	distinctUntilChanged(deepDiff),		distinctUntilChanged(deepDiff)
	//distinctUntilChanged((prev, curr) => {
	// console.log(JSON.stringify(prev), JSON.stringify(curr));
	// return deepDiff(prev, curr);
	//}),
	tap(metrics => console.log('metrics changed', metrics))
	);		);
	filter$ = this.state$.pipe(		filter$ = this.state$.pipe(
	map(state => state.filter),		map(state => state.filter),
	distinctUntilChanged(deepDiff)		distinctUntilChanged(deepDiff)
	//tap(filter => console.log('filter changed', filter))
	);		);
	filters$ = this.state$.pipe(		filters$ = this.state$.pipe(
	map(state => state.filters),		map(state => state.filters),
	distinctUntilChanged(deepDiff)		distinctUntilChanged(deepDiff)
	//tap(filters => console.log('filters changed', filters))
	);		);
	loading$ = this.state$.pipe(		loading$ = this.state$.pipe(
	map(state => state.loading),		map(state => state.loading),
	@@ -194,55 +180,15 @@ export class AnalyticsDashboardService {
	/**		/**
	* Viewmodel that resolves once all the data is ready (or updated)		* Viewmodel that resolves once all the data is ready (or updated)
	*/		*/
	/*vm$: Observable<UserState> = combineLatest(
	this.category$,
	this.timespan$,
	this.timespans$,
	this.metric$,
	this.metrics$,
	this.filter$,
	this.filters$,
	this.loading$
	).pipe(
	map(
	([
	category,
	timespan,
	timespans,
	metric,
	metrics,
	filter,
	filters,
	loading,
	]) => {
	return {
	category,
	timespan,
	timespans,
	metric,
	metrics,
	filter,
	filters,
	loading,
	};
	}
	),
	);*/
	vm$: Observable<UserState> = new BehaviorSubject(_state);		vm$: Observable<UserState> = new BehaviorSubject(_state);

	/**		constructor(private http: MindsHttpClient) {
	* Watch 4 streams to trigger user loads and state updates
	*/
	// TODO: remove one of these clients later
	constructor(private client: Client, private httpClient: HttpClient) {
	this.loadFromRemote();		this.loadFromRemote();
	}		}

	loadFromRemote() {		loadFromRemote() {
	combineLatest([this.category$, this.timespan$, this.metric$, this.filter$])		combineLatest([this.category$, this.timespan$, this.metric$, this.filter$])
	.pipe(		.pipe(
	///debounceTime(300),
	// tap(() => console.log('load from remote called')),
	distinctUntilChanged(deepDiff),		distinctUntilChanged(deepDiff),
	catchError(_ => {		catchError(_ => {
	console.log('caught error');		console.log('caught error');
	@@ -274,6 +220,7 @@ export class AnalyticsDashboardService {
	this.updateState({		this.updateState({
	..._state,		..._state,
	category: dashboard.category,		category: dashboard.category,
			description: dashboard.description,
	timespan: dashboard.timespan,		timespan: dashboard.timespan,
	timespans: dashboard.timespans,		timespans: dashboard.timespans,
	filter: dashboard.filter,		filter: dashboard.filter,
	@@ -316,17 +263,22 @@ export class AnalyticsDashboardService {
	// }		// }

	updateCategory(category: string) {		updateCategory(category: string) {
	console.log('update category called: ' + category);		this.updateState({
	// TODO: uncomment this		..._state,
	// this.updateState({ ..._state, category, metrics: [], loading: true });		category,
	this.updateState({ ..._state, category, metrics: [], loading: true });		description: null,
			metrics: [],
			loading: true,
			});
	}		}
	updateTimespan(timespan: string) {		updateTimespan(timespan: string) {
	console.log('update timespan called: ' + timespan);		this.updateState({
	this.updateState({ ..._state, timespan, loading: true });		..._state,
			timespan,
			loading: true,
			});
	}		}
	updateMetric(metric: string) {		updateMetric(metric: string) {
	console.log('update metric called: ' + metric);
	this.updateState({ ..._state, metric, loading: true });		this.updateState({ ..._state, metric, loading: true });
	}		}
	updateFilter(selectedFilterStr: string) {		updateFilter(selectedFilterStr: string) {
	@@ -368,8 +320,13 @@ export class AnalyticsDashboardService {
	metric: string,		metric: string,
	filter: string[]		filter: string[]
	): Observable<Response> {		): Observable<Response> {
	const url = buildQueryUrl(category, timespan, metric, filter);		return this.http
	return this.httpClient.get<Response>(url).pipe(		.get(`api/v2/analytics/dashboards/${category}`, {
			metric,
			timespan,
			filter: filter.join(),
			})
			.pipe(
	catchError(_ => of(null)),		catchError(_ => of(null)),
	map(response => response)		map(response => response)
	);		);
	@@ -379,17 +336,3 @@ export class AnalyticsDashboardService {
	console.warn('call was made to legacy function DashboardService.getData()');		console.warn('call was made to legacy function DashboardService.getData()');
	}		}
	}		}

	function buildQueryUrl(
	category: string,
	timespan: string,
	metric: string,
	filter: string[]
	): string {
	const url = 'https://walrus.minds.com/api/v2/analytics/dashboards/';
	const filterStr: string = filter.join();
	const metricId: string = metric;
	const queryStr = `?metric=${metricId}&timespan=${timespan}&filter=${filterStr}`;

	return `${url}${category}${queryStr}`;
	}