Skip to content

Minds Frontend
Minds Frontend
Commit 4bea3399 authored by Olivia Madrid's avatar Olivia Madrid
Browse files
Options
  • Download

(feat): add'l styles on analytics summary tab

parent 95a24981
chart-refactor-2170
1 merge request!622WIP: Summary tab and chart refactor
Pipeline #93001789 failed with stages
in 6 minutes and 35 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 76 deletions
src/app/common/components/chart-v2/chart-v2.component.scss
View file @ 4bea3399
......@@ -92,12 +92,15 @@ m-chartV2 {
// ----------------------------------------------------
m-chartV2.isMini {
margin-left: 0;
margin-top: 11px;
.js-plotly-plot,
.plot-container {
height: 100px;
min-height: 100px;
height: 50px;
min-height: 50px;
}
.m-chartV2__chartContainer {
margin-right: 24px;
}
.m-chartV2__hoverInfoDiv {
width: 150px;
padding: 0px;
......
src/app/common/components/chart-v2/chart-v2.component.ts
View file @ 4bea3399
......@@ -75,13 +75,10 @@ export class ChartV2Component implements OnInit, OnDestroy {
this.segments = this.rawData.visualisation.segments;
if (this.segments.length === 2) {
this.isComparison = true;
console.log('**isCom');
// Reverse the segments so comparison line is layered behind current line
this.segments.reverse();
// Current line should be blue, not grey
this.swapSegmentColors();
} else {
console.log('**seglenght', this.segments.length);
}
this.themeSubscription = this.themeService.isDark$.subscribe(isDark => {
this.isDark = isDark;
......@@ -139,7 +136,7 @@ export class ChartV2Component implements OnInit, OnDestroy {
dash: 'solid',
},
marker: {
size: 7,
size: this.isMini ? 5 : 7,
},
showlegend: false,
hoverinfo: 'text',
......@@ -196,7 +193,7 @@ export class ChartV2Component implements OnInit, OnDestroy {
height: 0,
autoexpand: 'true',
autosize: 'true',
hovermode: 'x',
hovermode: this.isMini ? 'closest' : 'x',
paper_bgcolor: this.getColor('m-white'),
plot_bgcolor: this.getColor('m-white'),
font: {
......@@ -262,7 +259,7 @@ export class ChartV2Component implements OnInit, OnDestroy {
onUnhover($event) {
this.emptyMarkerFill();
this.hideShape();
this.hoverInfoDiv.style.opacity = 1; // TODOOJM change back to 0
this.hoverInfoDiv.style.opacity = 0;
this.detectChanges();
}
......@@ -331,10 +328,10 @@ export class ChartV2Component implements OnInit, OnDestroy {
.querySelector('.js-plotly-plot')
.getBoundingClientRect(),
hoverInfoRect = this.hoverInfoDiv.getBoundingClientRect(),
pad = this.isMini ? 8 : 16;
pad = this.isMini ? 4 : 16;
if (this.isMini) {
this.hoverInfoDiv.style.top = pointYDist + 2 + 'px';
this.hoverInfoDiv.style.top = pointYDist - 2 + 'px';
} else if (pointYDist < plotRect.height / 2) {
this.hoverInfoDiv.style.top = pointYDist + pad + 'px';
} else {
......
src/app/modules/analytics/v2/dashboard.service.ts
View file @ 4bea3399
......@@ -6,11 +6,7 @@ import {
map,
distinctUntilChanged,
switchMap,
startWith,
tap,
delay,
debounceTime,
throttleTime,
catchError,
} from 'rxjs/operators';
......
src/app/modules/analytics/v2/fake-data.ts
View file @ 4bea3399
......@@ -3,36 +3,16 @@ const fakeData: Array<any> = [
// CHART TESTS
loading: false,
category: 'traffic',
description:
'imma traffic description imma traffic description imma traffic description imma traffic description imma traffic description',
timespan: '28d',
timespan: '30d',
timespans: [
// {
// id: '30d',
// label: 'Last 30 days',
// interval: 'day',
// comparison_interval: 28,
// from_ts_ms: 1567296000000,
// from_ts_iso: '2019-09-01T00:00:00+00:00',
// selected: false,
// },
// {
// id: '1y',
// label: '1 year ago',
// interval: 'month',
// comparison_interval: 365,
// from_ts_ms: 1538352000000,
// from_ts_iso: '2018-10-01T00:00:00+00:00',
// selected: false,
// },
{
id: '28d',
label: 'Last 28 Days',
id: '30d',
label: 'Last 30 days',
interval: 'day',
comparison_interval: 365,
from_ts_ms: 1538352000000,
from_ts_iso: '2018-10-01T00:00:00+00:00',
selected: true,
comparison_interval: 28,
from_ts_ms: 1567296000000,
from_ts_iso: '2019-09-01T00:00:00+00:00',
selected: false,
},
{
id: '12m',
......@@ -54,7 +34,7 @@ const fakeData: Array<any> = [
{ id: 'all', label: 'All', available: true, selected: false },
{
id: 'browser',
label: 'BrowserBrowserBrowserBrowserBrowser',
label: 'Browser',
available: true,
selected: false,
},
......
src/app/modules/analytics/v2/layouts/layout-summary/layout-summary.component.html
View file @ 4bea3399
......@@ -4,6 +4,25 @@
<!-- TILES -->
<div class="m-analyticsSummary__tilesContainer">
<!-- ACTIVE USERS (PLACEHOLDER) -->
<div class="m-analyticsSummary__tile noChart">
<div class="m-analyticsSummary__benchmarkContainer">
<div class="m-analyticsSummary__benchmarkLabelWrapper">
<div class="m-analyticsSummary__benchmarkLabel">
Active Users On Site
</div>
<m-tooltip icon="help">
Coming soon! Realtime count of all users on web and mobile
</m-tooltip>
</div>
<div class="m-analyticsSummary__benchmarkValueWrapper">
<div class="m-analyticsSummary__benchmarkValue">
ʕ •ᴥ•ʔ
</div>
</div>
</div>
</div>
<!-- CHART TILES -->
<ng-container *ngFor="let tile of tiles">
<div
class="m-analyticsSummary__tile"
......@@ -11,44 +30,48 @@
>
<div class="m-analyticsSummary__benchmarkContainer">
<div class="m-analyticsSummary__benchmarkLabelWrapper">
<span class="m-analyticsSummary__benchmarkLabel">{{
tile.label
}}</span>
<div class="m-analyticsSummary__benchmarkLabel">{{ tile.label }}</div>
<m-tooltip icon="help">
{{ tile.description }}
</m-tooltip>
</div>
<div class="m-analyticsSummary__benchmarkValueWrapper">
<span class="m-analyticsSummary__benchmarkValue">{{
tile.benchmark.value
}}</span
><span class="m-analyticsSummary__benchmarkUnit" *ngIf="tile.unit">{{
tile.unit
}}</span>
<div class="m-analyticsSummary__benchmarkValue">
{{ tile.benchmark.value }}
</div>
<div class="m-analyticsSummary__benchmarkUnit" *ngIf="tile.unit">
{{ tile.unit }}
</div>
</div>
</div>
<!-- <m-miniChart [data]="chart.data"></m-miniChart> -->
<m-miniChart *ngIf="tile.visualisation"></m-miniChart>
<m-chartV2
*ngIf="tile.visualisation"
[rawData]="tile"
[interval]="day"
[isMini]="true"
></m-chartV2>
</div>
</ng-container>
</div>
<!-- BOOST BACKLOG -->
<div class="m-analyticsSummary__boostBacklogWrapper">
<div class="m-analyticsSummary__boostBacklogTitle">Boost Backlog</div>
<div class="m-analyticsSummary__boostTypesContainer">
<!-- *ngFor="let boostType of boosts.buckets | slice: 0:2 -->
<ng-container *ngFor="let boostType of boosts.buckets">
<div class="m-analyticsSummary__boostType">
<div class="m-analyticsSummary__benchmarkContainer">
<div class="m-analyticsSummary__benchmarkLabel">
{{ boostType.label }}
<div class="m-analyticsSummary__benchmarkLabelWrapper">
<div class="m-analyticsSummary__benchmarkLabel">
{{ boostType.label }}
</div>
</div>
<div class="m-analyticsSummary__benchmarkValueWrapper">
<span class="m-analyticsSummary__benchmarkValue">{{
boostType.value
}}</span>
<span class="m-analyticsSummary__benchmarkUnit">hrs</span>
<div class="m-analyticsSummary__benchmarkValue">
{{ boostType.value }}
</div>
<div class="m-analyticsSummary__benchmarkUnit">hrs</div>
</div>
</div>
</div>
......
src/app/modules/analytics/v2/layouts/layout-summary/layout-summary.component.scss
View file @ 4bea3399
......@@ -4,17 +4,22 @@
.m-analyticsSummary__tilesContainer {
display: flex;
flex-flow: row wrap;
padding-top: 18px;
}
.m-analyticsSummary__tile {
border: 1px solid salmon;
min-width: 160px;
height: 160px;
box-sizing: border-box;
flex: 0 1 33%;
margin-right: 20px;
&.noChart {
.m-analyticsSummary__benchmarkValue {
font-size: 42px;
}
.m-analyticsSummary__benchmarkLabelWrapper {
padding-bottom: 18px;
}
}
}
......@@ -26,6 +31,11 @@
.m-analyticsSummary__boostBacklogTitle {
font-size: 18px;
}
.m-analyticsSummary__benchmarkUnit {
@include m-theme() {
color: themed($m-grey-300);
}
}
}
.m-analyticsSummary__boostTypesContainer {
display: flex;
......@@ -46,6 +56,16 @@
// -----------------------------------------
// TEXT
// -----------------------------------------
.m-analyticsSummary__benchmarkValueWrapper > div {
display: inline-block;
}
.m-analyticsSummary__benchmarkLabelWrapper {
padding-bottom: 12px;
& > div {
display: inline-block;
}
}
.m-analyticsSummary__benchmarkLabel {
font-size: 18px;
@include m-theme() {
......@@ -53,6 +73,9 @@
}
}
.m-analyticsSummary__boostBacklogTitle {
padding-bottom: 18px;
}
.m-analyticsSummary__boostBacklogTitle,
.m-analyticsSummary__benchmarkValue {
font-size: 24px;
......@@ -60,6 +83,10 @@
color: themed($m-grey-800);
}
}
.m-analyticsSummary__benchmarkUnit {
padding-left: 6px;
}
// ------------------------------------------
// MOBILE & TABLET
// -----------------------------------------
......
src/app/modules/analytics/v2/layouts/layout-summary/layout-summary.component.ts
View file @ 4bea3399
......@@ -3,46 +3,78 @@ import {
OnInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
OnDestroy,
} from '@angular/core';
import { Subscription, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import { AnalyticsDashboardService } from '../../dashboard.service';
import fakeData from './../../fake-data';
import { Client } from '../../../../../services/api';
@Component({
selector: 'm-analytics__layout--summary',
templateUrl: './layout-summary.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AnalyticsLayoutSummaryComponent implements OnInit, OnDestroy {
// metricsSubscription: Subscription;
export class AnalyticsLayoutSummaryComponent implements OnInit {
loading = true;
// activeUsers;
tiles;
boosts;
// activeUsersTile = {
// id: 'active_users',
// label: 'Active users on site',
// description: 'Coming soon! Realtime count of all users on web and mobile',
// benchmark: {
// value: '...',
// },
// };
tiles = [
// {
// id: 'pageviews',
// label: 'Daily pageviews',
// endpoint:
// 'api/v2/analytics/dashboards/traffic?metric=pageviews&timespan=30d&filter=view_type::total,channel::all',
// },
];
constructor(
private analyticsService: AnalyticsDashboardService,
private cd: ChangeDetectorRef
private cd: ChangeDetectorRef,
private client: Client
) {}
ngOnInit() {
// TODO: confirm how permissions/security will work
this.tiles = fakeData[3].tiles;
this.boosts = fakeData[4].boosts;
this.loading = false;
// this.getPageviews();
this.detectChanges();
}
async getPageviews() {
this.tiles.forEach(endpoint => {
this.client
.get(endpoint.endpoint)
.then((response: any) => {
const metric = response.dashboard.metrics.find(
m => m.id === endpoint.id
);
endpoint['metric'] = metric;
endpoint['benchmark'] =
metric.visualisation.segments[0].buckets[
metric.visualisation.segments[0].buckets.length - 1
];
})
.catch(e => {
console.error(e);
});
});
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
}
ngOnDestroy() {
// this.metricsSubscription.unsubscribe();
}
}
Please register or to comment