Skip to content

Minds Frontend
Minds Frontend
Source
Select Git revision
...
Target
Select Git revision
 
Commits (2)
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 386 additions and 248 deletions
package-lock.json
View file @ b00708d6
This diff is collapsed.
src/app/modules/analytics/v2/components/chart/chart.component.html
View file @ b00708d6
......@@ -19,6 +19,10 @@
>
</plotly-plot> -->
<!-- <div class="hoverInfo__row">
{{ hoverInfo.date | date: selectedTimespan.datePipe }}
</div> -->
<div #hoverInfoDiv id="hoverInfoDiv" class="hoverInfoDiv">
<div class="hoverInfo__row">
{{ hoverInfo.date | date: datePipe }}
......@@ -27,7 +31,7 @@
<ng-template ngSwitchCase="number">
{{ hoverInfo.value | number }} {{ selectedMetric.label | lowercase }}
</ng-template>
<ng-template ngSwitchCase="USD">
<ng-template ngSwitchCase="usd">
{{ hoverInfo.value | currency }} USD
</ng-template>
<ng-template ngSwitchDefault>
......@@ -40,7 +44,7 @@
<ng-template ngSwitchCase="number">
{{ hoverInfo.comparisonValue | number }}
</ng-template>
<ng-template ngSwitchCase="USD">
<ng-template ngSwitchCase="usd">
{{ hoverInfo.comparisonValue | currency }} USD
</ng-template>
<ng-template ngSwitchDefault>
......@@ -48,7 +52,7 @@
{{ selectedMetric.unit }}
</ng-template>
</ng-container>
on {{ hoverInfo.comparisonDate | date: datePipe }}
on {{ hoverInfo.comparisonDate | date }}
</div>
</div>
</div>
src/app/modules/analytics/v2/components/chart/chart.component.scss
View file @ b00708d6
......@@ -14,7 +14,12 @@ m-analytics__chart {
}
> * {
transition: background-color 0.3s ease-in;
transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.main-svg {
max-width: 100%;
}
}
......@@ -36,6 +41,9 @@ m-analytics__chart {
[class*='hoverInfo__row'] {
padding-bottom: 4px;
&:last-of-type {
padding-top: 2px;
}
}
.hoverInfo__row--primary {
font-size: 15px;
......
src/app/modules/analytics/v2/components/chart/chart.component.ts
View file @ b00708d6
......@@ -15,7 +15,7 @@ import { Observable, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import {
AnalyticsDashboardService,
Timespan,
Timespan as TimespanBase,
Buckets,
} from '../../dashboard.service';
......@@ -24,6 +24,12 @@ import { Config, Data, Layout } from 'plotly.js'; // TODO: remove this?
import chartPalette from '../../chart-palette.default';
import { ThemeService } from '../../../../../common/services/theme.service';
interface TimespanExtended extends TimespanBase {
tickFormat?: string;
datePipe?: string;
}
export { TimespanExtended as Timespan };
@Component({
selector: 'm-analytics__chart',
templateUrl: 'chart.component.html',
......@@ -45,11 +51,8 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
);
selectedMetric;
timespanSubscription: Subscription;
timespan: string;
timespansSubscription: Subscription;
timespans: Timespan[];
selectedTimespan;
themeSubscription: Subscription;
isDark: boolean = false;
......@@ -70,8 +73,12 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
markerOpacities: Array<number> = [];
shapes: Array<any> = [];
datePipe: string = 'EEE MMM d YYYY';
tickFormat: string = '%m/%d';
timespanFormats = [
{ interval: 'day', tickFormat: '%m/%d', datePipe: 'EEE MMM d, y' },
{ interval: 'month', tickFormat: '%m/%y', datePipe: 'MMM y' },
];
datePipe: string = this.timespanFormats[0].datePipe;
tickFormat: string = this.timespanFormats[0].tickFormat;
// ***********************************************************************************
......@@ -95,33 +102,20 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
this.detectChanges();
});
this.timespanSubscription = this.analyticsService.timespan$.subscribe(
timespan => {
this.timespan = timespan;
// const selectedInterval = this.timespans.find(
// ts => ts.id === this.timespan
// ).interval;
this.timespansSubscription = this.analyticsService.timespans$.subscribe(
timespans => {
this.selectedTimespan = timespans.find(
timespan => timespan.selected === true
);
// const timespanFormats = [
// { interval: 'day', tickFormat: '%m/%d', datePipe: 'EEE MMM d YYYY' },
// { interval: 'month', tickFormat: '%m/%y', datePipe: 'MMM YYYY' },
// ];
// const timespanFormat =
// timespanFormats.find(t => t.interval === selectedInterval) ||
// timespanFormats[0];
const timespanFormat =
this.timespanFormats.find(
t => t.interval === this.selectedTimespan.interval
) || this.timespanFormats[0];
// this.tickFormat = timespanFormat.tickFormat;
// this.datePipe = timespanFormat.datePipe;
this.tickFormat = timespanFormat.tickFormat;
this.datePipe = timespanFormat.datePipe;
// console.log(this.tickFormat);
this.detectChanges();
}
);
this.timespansSubscription = this.analyticsService.timespans$.subscribe(
timespans => {
this.timespans = timespans;
this.detectChanges();
}
);
......@@ -157,6 +151,10 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
width: 2,
},
};
// if (this.selectedMetric.unit === 'usd'){
// this.segments.forEach(segment =>{ segment.buckets})
// }
}
this.data = this.getData();
this.layout = this.getLayout();
......@@ -230,12 +228,16 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
populateHoverInfo() {
// TODO: format value strings here and remove ngSwitch from template?
this.hoverInfo['date'] = this.segments[0].buckets[this.hoverPoint].date;
this.hoverInfo['value'] = this.segments[0].buckets[this.hoverPoint].value;
this.hoverInfo['value'] =
this.selectedMetric.unit !== 'usd'
? this.segments[0].buckets[this.hoverPoint].value
: this.segments[0].buckets[this.hoverPoint].value / 100;
if (this.isComparison && this.segments[1]) {
this.hoverInfo['comparisonValue'] = this.segments[1].buckets[
this.hoverPoint
].value;
this.hoverInfo['comparisonValue'] =
this.selectedMetric.unit !== 'usd'
? this.segments[1].buckets[this.hoverPoint].value
: this.segments[1].buckets[this.hoverPoint].value / 100;
this.hoverInfo['comparisonDate'] = this.segments[1].buckets[
this.hoverPoint
......@@ -290,6 +292,8 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
return rows.map(row => {
if (key === 'date') {
return row[key].slice(0, 10);
} else if (this.selectedMetric.unit === 'usd') {
return row[key] / 100;
} else {
return row[key];
}
......@@ -314,7 +318,6 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
shape.y1 = this.graphDiv.layout.yaxis.range[1];
});
console.log('setLineHeights()');
this.relayout(this.getLayout());
}
......@@ -367,8 +370,8 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
getLayout() {
return {
width: 0,
height: 0,
// width: 0,
// height: 0,
hovermode: 'x',
paper_bgcolor: this.getColor('m-white'),
plot_bgcolor: this.getColor('m-white'),
......@@ -376,18 +379,13 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
family: 'Roboto',
},
xaxis: {
// type: 'date',
// tickformat: '',
tickformat: this.tickFormat,
tickmode: 'array', //or array, linear
nticks: this.segmentLength,
// tickvals, // TODO: lookup
ticks: 'outside',
tickmode: 'array', // || linear || auto
tickson: 'labels',
tickcolor: this.getColor('m-grey-130'),
tickangle: -45,
tickfont: {
color: this.getColor('m-grey-300'),
color: this.getColor('m-grey-130'),
},
showgrid: false,
showline: true,
......@@ -395,40 +393,37 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
linewidth: 1,
zeroline: false,
fixedrange: true,
// range: [
// this.segments[0].buckets[0].date.slice(0, 10),
// this.segments[0].buckets[this.segmentLength - 1].date.slice(0, 10),
// ],
},
yaxis: {
ticks: '',
showgrid: true,
gridcolor: this.getColor('m-grey-70'),
zeroline: false,
visible: true,
side: 'right',
tickfont: {
color: this.getColor('m-grey-130'),
},
fixedrange: true,
},
margin: {
t: 16,
b: 80,
l: 24,
r: 16,
pad: 16,
},
// margin: {
// t: 16,
// b: 80,
// l: 24,
// r: 80,
// pad: 16,
// },
shapes: this.shapes,
};
}
@HostListener('window:resize')
applyDimensions() {
this.layout = {
...this.layout,
width: this.graphDiv.clientWidth - 16,
height: this.graphDiv.clientHeight - 16,
};
// this.layout = {
// ...this.layout,
// width: this.graphDiv.clientWidth, //-16
// height: this.graphDiv.clientHeight, //-16
// };
this.setLineHeights();
this.detectChanges();
}
......@@ -440,7 +435,6 @@ export class AnalyticsChartComponent implements OnInit, OnDestroy {
ngOnDestroy() {
this.metricSubscription.unsubscribe();
this.timespanSubscription.unsubscribe();
this.timespansSubscription.unsubscribe();
this.themeSubscription.unsubscribe();
}
......
src/app/modules/analytics/v2/components/filter/filter.component.html
View file @ b00708d6
<div
class="filterWrapper"
[ngClass]="{
expanded: expanded,
isMobile: isMobile,
dropUp: dropUp
}"
(blur)="expanded = false"
>
<div class="filterHeader" (click)="expanded = !expanded">
<div class="row">
<span class="filterLabel">{{ filter.label }}</span>
<span class="option option--selected">
{{ selectedOption.label }}
</span>
<i class="material-icons" *ngIf="!expanded"> keyboard_arrow_down</i>
<i class="material-icons" *ngIf="expanded">keyboard_arrow_up</i>
</div>
<ng-container *ngIf="filter.id !== 'channel'">
<div class="filterLabelWrapper" *ngIf="filter.id !== 'timespan'">
<span>{{ filter.label }}</span>
<m-tooltip icon="help">
<div class="filterDesc">{{ filter.description }}</div>
<ul class="filterOptions__descContainer">
<ng-container *ngFor="let option of filter.options">
<li class="filterOption__desc">
<span class="filterOption__descLabel">{{ option.label }}</span
><span class="filterOption__desc" *ngIf="option.description"
>: {{ option.description }}</span
>
</li>
</ng-container>
</ul>
</m-tooltip>
</div>
<div class="unselectedOptionsContainer">
<ng-container *ngFor="let option of filter.options">
<div
class="option row"
(click)="updateFilter(option)"
[ngClass]="{
unavailable: option.available === false
}"
>
<span>{{ option.label }}</span>
<div
class="filterWrapper"
[ngClass]="{
expanded: expanded,
isMobile: isMobile,
dropUp: dropUp
}"
(focus)="expanded = true"
(blur)="expanded = false"
>
<div class="filterHeader" (click)="expanded = !expanded">
<div class="row">
<span class="option option--selected">
{{ selectedOption.label }}
</span>
<i class="material-icons" *ngIf="!expanded">keyboard_arrow_down</i>
<i class="material-icons" *ngIf="expanded">keyboard_arrow_up</i>
</div>
</ng-container>
</div>
<div class="unselectedOptionsContainer">
<ng-container *ngFor="let option of filter.options">
<div
class="option row"
(click)="updateFilter(option)"
[ngClass]="{
unavailable: option.available === false
}"
>
<span>{{ option.label }}</span>
</div>
</ng-container>
</div>
</div>
</div>
</ng-container>
src/app/modules/analytics/v2/components/filter/filter.component.scss
View file @ b00708d6
......@@ -3,9 +3,53 @@ $rounded-bottom: 0 0 3px 3px;
m-analytics__filter {
position: relative;
margin: 16px 16px 0 0;
margin: 16px 24px 0 0;
z-index: 2;
}
.filterLabelWrapper {
position: absolute;
bottom: 110%;
white-space: nowrap;
@include m-theme() {
color: rgba(themed($m-grey-200), 0.9);
}
.m-tooltip {
i {
font-size: 12px;
@include m-theme() {
color: rgba(themed($m-grey-200), 0.7);
}
}
.m-tooltip--bubble {
letter-spacing: 1.2px;
line-height: 16px;
z-index: 9999;
font-size: 11px;
bottom: 85%;
left: 100%;
@include m-theme() {
color: themed($m-white);
background-color: themed($m-blue);
}
> * {
font-size: 11px;
font-weight: 300;
line-height: inherit;
letter-spacing: inherit;
}
ul {
padding-inline-start: 16px;
margin-block-end: 4px;
li {
padding-bottom: 8px;
.filterOption__descLabel {
// font-weight: bold;
}
}
}
}
}
}
.filterWrapper {
cursor: pointer;
......@@ -20,17 +64,15 @@ m-analytics__filter {
}
}
.unselectedOptionsContainer {
// display: block;
visibility: visible;
@include m-theme() {
box-shadow: 0px 1px 15px 0 rgba(themed($m-black), 0.15);
}
// @include m-theme() {
// box-shadow: 0px 1px 15px 0 rgba(themed($m-black), 0.15);
// }
}
&:not(.dropUp) {
.filterHeader {
@include m-theme() {
// border-bottom: none;
border-radius: $rounded-top;
}
}
......@@ -42,7 +84,6 @@ m-analytics__filter {
&.dropUp {
.filterHeader {
border-radius: $rounded-bottom;
// border-top: none;
}
.unselectedOptionsContainer {
bottom: 100%;
......@@ -54,10 +95,8 @@ m-analytics__filter {
.filterHeader {
position: relative;
// display: flex;
width: 100%;
// justify-content: space-between;
padding: 10px 8px 8px 10px;
padding: 6px 6px 6px 8px;
border-radius: 3px;
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
......@@ -87,7 +126,7 @@ m-analytics__filter {
// display: none;
visibility: hidden;
width: 100%;
padding: 10px 8px 8px 10px;
padding: 6px 6px 6px 8px;
border-radius: 3px;
left: 0px;
transition: box-shadow 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
......@@ -107,6 +146,7 @@ m-analytics__filter {
}
.option {
border-radius: 3px;
white-space: nowrap;
@include m-theme() {
background-color: themed($m-white);
color: rgba(themed($m-grey-200), 0.9);
......@@ -132,4 +172,7 @@ m-analytics__filter {
display: none;
}
}
.option--selected {
margin-right: 0;
}
}
src/app/modules/analytics/v2/components/filter/filter.component.ts
View file @ b00708d6
......@@ -5,7 +5,6 @@ import {
Output,
EventEmitter,
ChangeDetectionStrategy,
OnDestroy,
} from '@angular/core';
import { Observable } from 'rxjs';
import {
......@@ -23,13 +22,14 @@ import {
UserState,
} from '../../dashboard.service';
import isMobileOrTablet from '../../../../../helpers/is-mobile-or-tablet';
import { Session } from '../../../../../services/session';
@Component({
selector: 'm-analytics__filter',
templateUrl: 'filter.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AnalyticsFilterComponent implements OnInit, OnDestroy {
export class AnalyticsFilterComponent implements OnInit {
@Input() filter: Filter;
@Input() dropUp: boolean = false;
......@@ -37,23 +37,32 @@ export class AnalyticsFilterComponent implements OnInit, OnDestroy {
expanded = false;
options: Array<any> = [];
selectedOption: Option;
subscription;
constructor(private analyticsService: AnalyticsDashboardService) {}
// subscription;
constructor(
private analyticsService: AnalyticsDashboardService,
public session: Session
) {}
ngOnInit() {
this.subscription = this.analyticsService.timespan$.subscribe(timespan => {
if (this.filter.id === 'timespan') {
this.selectedOption =
this.filter.options.find(option => option.id === timespan) ||
this.filter.options[0];
// this.subscription = this.analyticsService.timespan$.subscribe(timespan => {
// if (this.filter.id === 'timespan') {
// this.selectedOption =
// this.filter.options.find(option => option.id === timespan) ||
// this.filter.options[0];
// TODO: make selected option at top of array?
} else {
this.selectedOption =
this.filter.options.find(option => option.selected === true) ||
this.filter.options[0];
}
});
// // TODO: make selected option at top of array?
// } else {
// this.selectedOption =
// this.filter.options.find(option => option.selected === true) ||
// this.filter.options[0];
// }
// });
console.log(this.filter, this.filter.id);
this.selectedOption =
this.filter.options.find(option => option.selected === true) ||
this.filter.options[0];
this.isMobile = isMobileOrTablet();
}
......@@ -72,8 +81,4 @@ export class AnalyticsFilterComponent implements OnInit, OnDestroy {
const selectedFilterStr = `${this.filter.id}::${option.id}`;
this.analyticsService.updateFilter(selectedFilterStr);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
src/app/modules/analytics/v2/components/filters/filters.component.scss
View file @ b00708d6
.filtersContainer {
display: flex;
flex-wrap: wrap;
padding: 4px 0;
padding: 16px;
position: relative;
}
src/app/modules/analytics/v2/components/metrics/metrics.component.scss
View file @ b00708d6
......@@ -66,7 +66,10 @@ m-analytics__metrics {
.metricsWrapper {
position: relative;
overflow: hidden;
width: 95%;
width: 100%;
@include m-theme() {
box-shadow: 0 7px 15px -7px rgba(themed($m-black-always), 0.1);
}
}
.metricsContainer {
scroll-snap-type: x mandatory;
......@@ -76,9 +79,7 @@ m-analytics__metrics {
overflow-x: auto;
// padding: 0 16px;
@include m-theme() {
box-shadow: 0 7px 15px -7px rgba(themed($m-black-always), 0.1);
}
// &.metricsContainer::-webkit-scrollbar {
// display: none;
// }
......@@ -99,7 +100,7 @@ m-analytics__metrics {
}
&.active {
@include m-theme() {
background-color: rgba(themed($m-blue-grey-100), 0.15);
background-color: rgba(themed($m-grey-100), 0.2);
border-bottom: 8px solid themed($m-blue);
}
}
......@@ -112,11 +113,14 @@ m-analytics__metrics {
&:hover:not(.active) {
@include m-theme() {
background-color: rgba(themed($m-blue-grey-100), 0.15);
background-color: rgba(themed($m-grey-100), 0.2);
border-bottom: 8px solid rgba(0, 0, 0, 0);
transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
}
.metricLabel {
white-space: nowrap;
}
m-tooltip {
vertical-align: middle;
margin-left: 4px;
......@@ -150,7 +154,10 @@ m-analytics__metrics {
}
.m-tooltip {
i {
font-size: 14px;
font-size: 12px;
@include m-theme() {
color: rgba(themed($m-grey-200), 0.7);
}
}
.m-tooltip--bubble {
z-index: 9999;
......
src/app/modules/analytics/v2/components/table/table.component.scss
View file @ b00708d6
.tableWrapper .filterableChartWrapper {
padding: 0;
width: 100%;
}
.tableWrapper .filtersContainer {
display: none;
}
.tableWrapper {
font-size: 13px;
font-weight: 400;
......
src/app/modules/analytics/v2/components/table/table.component.ts
View file @ b00708d6
......@@ -104,9 +104,9 @@ export class AnalyticsTableComponent implements OnInit, OnDestroy {
name = entity.ownerObj.name;
}
titleType = type;
titleType = type.charAt(0).toUpperCase() + type.slice(1);
if (type === 'activity') {
titleType = 'post';
titleType = 'Post';
}
const reformattedEntity = {
......
src/app/modules/analytics/v2/dashboard.component.ts
View file @ b00708d6
......@@ -7,12 +7,7 @@ import {
ChangeDetectorRef,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import {
ActivatedRoute,
Router,
ParamMap,
RoutesRecognized,
} from '@angular/router';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { Subscription, Observable } from 'rxjs';
import { MindsTitle } from '../../../services/ux/title';
......@@ -33,9 +28,7 @@ import isMobileOrTablet from '../../../helpers/is-mobile-or-tablet';
export class AnalyticsDashboardComponent implements OnInit, OnDestroy {
isMobile: boolean;
// cats = categories;
subscription: Subscription;
// subscription: Subscription;
paramsSubscription: Subscription;
category$ = this.analyticsService.category$;
selectedCat: string;
......@@ -71,26 +64,11 @@ export class AnalyticsDashboardComponent implements OnInit, OnDestroy {
this.updateCategory(params.get('category'));
});
// TODO: implement channel filter
// const {channelGuid} = this.analyticsService.getStateSnapshot();
// this.searchTerm = this.analyticsService.buildSearchTermControl();
// this.searchTerm.patchValue(channelGuid, { emitEvent: false });
this.paramsSubscription = this.route.queryParams.subscribe(params => {
// TODO: do the same filter, metric, channel
if (params['timespan'] && params['timespan'] !== 'bork') {
// TODO: handleUrl
if (params['timespan']) {
// this.updateTimespan(params['timespan']);
console.log('bork');
}
// TODO: if (there's no channel filter in the url) {
if (!this.session.isAdmin()) {
const selection = 'self';
} else {
const selection = 'all';
}
// }
});
this.analyticsService.timespans$.subscribe(timespans => {
......@@ -103,6 +81,12 @@ export class AnalyticsDashboardComponent implements OnInit, OnDestroy {
this.analyticsService.metrics$.subscribe(metrics => {
this.detectChanges();
});
if (!this.session.isAdmin()) {
this.analyticsService.updateFilter('channel::self');
} else {
this.analyticsService.updateFilter('channel::all');
}
}
updateTimespan(timespanId) {
......
src/app/modules/analytics/v2/dashboard.service.ts
View file @ b00708d6
......@@ -46,6 +46,7 @@ export interface Filter {
id: string;
label: string;
options: Option[];
description: string;
}
export interface Option {
......@@ -54,10 +55,10 @@ export interface Option {
available?: boolean;
selected?: boolean;
description?: string;
// interval?: string;
// comparison_interval?: number;
// from_ts_ms?: number;
// from_ts_iso?: string;
interval?: string;
comparison_interval?: number;
from_ts_ms?: number;
from_ts_iso?: string;
}
export interface Metric {
......@@ -101,6 +102,7 @@ export interface Timespan {
comparison_interval: number;
from_ts_ms: number;
from_ts_iso: string;
selected: boolean;
}
export interface UserState {
......@@ -240,14 +242,14 @@ export class AnalyticsDashboardService {
combineLatest([this.category$, this.timespan$, this.metric$, this.filter$])
.pipe(
///debounceTime(300),
tap(() => console.log('load from remote called')),
// tap(() => console.log('load from remote called')),
distinctUntilChanged(deepDiff),
catchError(_ => {
console.log('caught error');
return of(null);
}),
switchMap(([category, timespan, metric, filter]) => {
console.log(category, timespan, metric, filter);
// console.log(category, timespan, metric, filter);
try {
const response = this.getDashboardResponse(
category,
......
src/app/modules/analytics/v2/fake-data.ts
View file @ b00708d6
......@@ -12,6 +12,7 @@ const fakeData: Array<any> = [
comparison_interval: 28,
from_ts_ms: 1567296000000,
from_ts_iso: '2019-09-01T00:00:00+00:00',
selected: true,
},
{
id: '1y',
......@@ -20,6 +21,7 @@ const fakeData: Array<any> = [
comparison_interval: 365,
from_ts_ms: 1538352000000,
from_ts_iso: '2018-10-01T00:00:00+00:00',
selected: false,
},
],
filter: ['platform::all', 'view_type::single', 'channel::all'],
......@@ -27,6 +29,7 @@ const fakeData: Array<any> = [
{
id: 'platform',
label: 'Platform',
description: 'Filter by platform type:',
options: [
{ id: 'all', label: 'All', available: true, selected: false },
{
......@@ -38,9 +41,38 @@ const fakeData: Array<any> = [
{ id: 'mobile', label: 'Mobile', available: true, selected: false },
],
},
{
id: 'channel',
label: 'Channel',
description: 'Filter by channel type:',
options: [
{
id: 'all',
label: 'All',
available: true,
selected: false,
description: 'bibbble',
},
{
id: 'browser',
label: 'Browser',
available: true,
selected: false,
description: 'bliblabla',
},
{
id: 'mobile',
label: 'Mobile',
available: true,
selected: false,
description: 'blubber',
},
],
},
{
id: 'view_type',
label: 'View Type',
description: 'Filter by view type:',
options: [
{ id: 'total', label: 'Total', available: true, selected: false },
{
......@@ -48,14 +80,22 @@ const fakeData: Array<any> = [
label: 'Organic',
available: true,
selected: true,
description: 'bobloblaw',
},
{
id: 'boosted',
label: 'Boosted',
available: false,
selected: false,
description: 'blablablabla',
},
{
id: 'single',
label: 'Single',
available: true,
selected: false,
description: null,
},
{ id: 'single', label: 'Single', available: true, selected: false },
],
},
],
......@@ -101,7 +141,7 @@ const fakeData: Array<any> = [
comparison_interval: 28,
comparison_positive_inclination: true,
},
unit: 'number',
unit: 'usd',
description:
'At vero eos et accusamus et iusto odio dignissimos ducimus qui',
visualisation: {
......@@ -134,35 +174,105 @@ const fakeData: Array<any> = [
date: '2019-09-05T00:00:00+00:00',
value: 5,
},
{
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,
},
],
},
{
buckets: [
{
key: 1567296000000,
date: '2019-09-01T00:00:00+00:00',
date: '2019-08-01T00:00:00+00:00',
value: 1,
},
{
key: 1567382400000,
date: '2019-09-02T00:00:00+00:00',
date: '2019-08-02T00:00:00+00:00',
value: 2,
},
{
key: 1567468800000,
date: '2019-09-03T00:00:00+00:00',
value: 3,
date: '2019-08-03T00:00:00+00:00',
value: 11,
},
{
key: 1567555200000,
date: '2019-09-04T00:00:00+00:00',
date: '2019-08-04T00:00:00+00:00',
value: 4,
},
{
key: 1567641600000,
date: '2019-09-05T00:00:00+00:00',
date: '2019-08-05T00:00:00+00:00',
value: 5,
},
{
key: 1567296000000,
date: '2019-08-06T00:00:00+00:00',
value: 12,
},
{
key: 1567382400000,
date: '2019-08-07T00:00:00+00:00',
value: 2,
},
{
key: 1567468800000,
date: '2019-08-08T00:00:00+00:00',
value: 11,
},
{
key: 1567555200000,
date: '2019-08-09T00:00:00+00:00',
value: 4,
},
{
key: 1567641600000,
date: '2019-08-10T00:00:00+00:00',
value: 5,
},
{
key: 1567555200000,
date: '2019-08-11T00:00:00+00:00',
value: 4,
},
{
key: 1567641600000,
date: '2019-08-12T00:00:00+00:00',
value: 0.5,
},
],
},
],
......
src/app/modules/analytics/v2/layouts/layout-chart/layout-chart.component.html
View file @ b00708d6
......@@ -5,13 +5,15 @@
<m-analytics__metrics
*ngIf="selectedMetric.visualisation.type === 'chart'"
></m-analytics__metrics>
<div class="filterableChartWrapper">
<div class="filterableChartWrapper" [ngClass]="{ isTable: isTable }">
<m-analytics__chart
*ngIf="selectedMetric.visualisation.type === 'chart'"
></m-analytics__chart>
<m-analytics__table
*ngIf="selectedMetric.visualisation.type === 'table'"
></m-analytics__table>
<m-analytics__filters></m-analytics__filters>
<m-analytics__filters
*ngIf="selectedMetric.visualisation.type === 'chart'"
></m-analytics__filters>
</div>
</ng-container>
src/app/modules/analytics/v2/layouts/layout-chart/layout-chart.component.scss
View file @ b00708d6
.filterableChartWrapper {
position: relative;
padding: 16px;
width: 95%;
max-width: 100%;
width: 100%;
@include m-theme() {
border-top: 1px solid themed($m-grey-50);
}
&.isTable {
padding: 0;
width: 100%;
}
}
src/app/modules/analytics/v2/layouts/layout-chart/layout-chart.component.ts
View file @ b00708d6
......@@ -26,6 +26,7 @@ export class AnalyticsLayoutChartComponent implements OnInit {
})
);
selectedMetric;
isTable: boolean = false;
constructor(
private analyticsService: AnalyticsDashboardService,
......@@ -36,6 +37,8 @@ export class AnalyticsLayoutChartComponent implements OnInit {
this.subscription = this.selectedMetric$.subscribe(metric => {
console.log('new metric');
this.selectedMetric = metric;
this.isTable = this.selectedMetric.visualisation.type === 'table';
this.detectChanges();
});
}
......