Merge branch 'generic-layout-2194' into 'master' (321308e7) · Commits · Minds / Minds Frontend

src/app/common/common.module.ts

+17 −2

Original line number	Original line	Diff line number	Diff line
	@@ -115,7 +115,14 @@ import { ToggleComponent } from './components/toggle/toggle.component';
	import { MarketingAsFeaturedInComponent } from './components/marketing/as-featured-in.component';		import { MarketingAsFeaturedInComponent } from './components/marketing/as-featured-in.component';
	import { SidebarMenuComponent } from './components/sidebar-menu/sidebar-menu.component';		import { SidebarMenuComponent } from './components/sidebar-menu/sidebar-menu.component';
	import { ChartV2Component } from './components/chart-v2/chart-v2.component';		import { ChartV2Component } from './components/chart-v2/chart-v2.component';
	import { MiniChartComponent } from './components/mini-chart/mini-chart.component';		import * as PlotlyJS from 'plotly.js/dist/plotly.js';
			import { PlotlyModule } from 'angular-plotly.js';
			import { PageLayoutComponent } from './components/page-layout/page-layout.component';
			import { DashboardLayoutComponent } from './components/dashboard-layout/dashboard-layout.component';
			import { ShadowboxLayoutComponent } from './components/shadowbox-layout/shadowbox-layout.component';
			import { ShadowboxHeaderComponent } from './components/shadowbox-header/shadowbox-header.component';

			PlotlyModule.plotlyjs = PlotlyJS;

	@NgModule({		@NgModule({
	imports: [		imports: [
	@@ -124,6 +131,7 @@ import { MiniChartComponent } from './components/mini-chart/mini-chart.component
	RouterModule,		RouterModule,
	FormsModule,		FormsModule,
	ReactiveFormsModule,		ReactiveFormsModule,
			PlotlyModule,
	],		],
	declarations: [		declarations: [
	MINDS_PIPES,		MINDS_PIPES,
	@@ -220,7 +228,10 @@ import { MiniChartComponent } from './components/mini-chart/mini-chart.component
	MarketingAsFeaturedInComponent,		MarketingAsFeaturedInComponent,
	SidebarMenuComponent,		SidebarMenuComponent,
	ChartV2Component,		ChartV2Component,
	MiniChartComponent,		PageLayoutComponent,
			DashboardLayoutComponent,
			ShadowboxLayoutComponent,
			ShadowboxHeaderComponent,
	],		],
	exports: [		exports: [
	MINDS_PIPES,		MINDS_PIPES,
	@@ -312,6 +323,10 @@ import { MiniChartComponent } from './components/mini-chart/mini-chart.component
	MarketingComponent,		MarketingComponent,
	MarketingAsFeaturedInComponent,		MarketingAsFeaturedInComponent,
	SidebarMenuComponent,		SidebarMenuComponent,
			ChartV2Component,
			PageLayoutComponent,
			DashboardLayoutComponent,
			ShadowboxLayoutComponent,
	],		],
	providers: [		providers: [
	SiteService,		SiteService,

src/app/modules/analytics/v2/chart-palette.default.ts→src/app/common/components/chart-v2/chart-palette.default.ts

+0 −0

File moved.

View file

src/app/common/components/chart-v2/chart-v2.component.html

+63 −43

Original line number	Original line	Diff line number	Diff line
	<!-- <div		<div
	#chartContainer		#chartContainer
	class="m-chartV2__chartContainer"		class="m-chartV2__chartContainer"
	[ngClass]="{ isTouchDevice: isTouchDevice }"		[ngClass]="{ isTouchDevice: isTouchDevice, isMini: isMini }"
	>		>
	<plotly-plot		<plotly-plot
	*ngIf="init"		*ngIf="init"
	#graphDiv
	id="graphDiv"
	[data]="data"		[data]="data"
	[layout]="layout"		[layout]="layout"
	[config]="config"		[config]="config"
	@@ -14,48 +12,70 @@
	[style]="{ position: 'relative' }"		[style]="{ position: 'relative' }"
	(hover)="onHover($event)"		(hover)="onHover($event)"
	(unhover)="onUnhover($event)"		(unhover)="onUnhover($event)"
	(plotly_click)="onClick($event)"		id="graphDiv"
	>		>
	</plotly-plot>		</plotly-plot>
	</div>		</div>
			<div #hoverInfoDiv class="m-chartV2__hoverInfoDiv">
	<div #hoverInfoDiv id="hoverInfoDiv" class="m-chartV2__hoverInfoDiv">		<i
	<i *ngIf="isTouchDevice" class="material-icons" (click)="onUnhover($event)"		*ngIf="isTouchDevice"
			class="material-icons m-chartV2__hoverInfo__closeBtn"
			(click)="onUnhover($event)"
	>close</i		>close</i
	>		>
			<div class="m-chartV2__hoverInfo__wrapper">
			<div class="m-chartV2__hoverInfo__arrowContainer" *ngIf="isMini">
			<i class="material-icons">arrow_upward</i>
			</div>
			<div class="m-chartV2__hoverInfo__rowsContainer">
	<div class="m-chartV2__hoverInfo__row">		<div class="m-chartV2__hoverInfo__row">
	{{ hoverInfo.date \| utcDate \| date: datePipe }}		{{ hoverInfo.date \| utcDate \| date: datePipe }}
	</div>		</div>
	<div		<div
	[ngSwitch]="selectedMetric?.unit"		[ngSwitch]="rawData?.unit"
	class="m-chartV2__hoverInfo__row--primary"		class="m-chartV2__hoverInfo__row--primary"
	>		>
	<ng-template ngSwitchCase="number">		<ng-template ngSwitchCase="number">
	{{ hoverInfo.value \| number }} {{ selectedMetric.label \| lowercase }}		{{ hoverInfo.value \| number: '1.0-0' \| abbr }}
			{{ rawData.label \| lowercase }}
	</ng-template>		</ng-template>
	<ng-template ngSwitchCase="usd">		<ng-template ngSwitchCase="usd">
	{{ hoverInfo.value \| currency }} USD		{{ hoverInfo.value \| currency }} USD
	</ng-template>		</ng-template>
			<ng-template ngSwitchCase="eth">
			{{ hoverInfo.value \| number: '1.3-3' }} ETH
			</ng-template>
			<ng-template ngSwitchCase="tokens">
			{{ hoverInfo.value \| number: '1.1-3' }} Tokens
			</ng-template>
	<ng-template ngSwitchDefault>		<ng-template ngSwitchDefault>
	{{ hoverInfo.value \| number: '1.1-3' }} {{ selectedMetric?.unit }}		{{ hoverInfo.value \| number: '1.0-3' }} {{ rawData?.unit }}
	</ng-template>		</ng-template>
	</div>		</div>
	<div class="m-chartV2__hoverInfo__row" *ngIf="isComparison">		<div class="m-chartV2__hoverInfo__row" *ngIf="isComparison">
	vs		vs
	<ng-container		<ng-container
	[ngSwitch]="selectedMetric?.unit"		[ngSwitch]="rawData?.unit"
	class="m-chartV2__hoverInfo__row"		class="m-chartV2__hoverInfo__row"
	>		>
	<ng-template ngSwitchCase="number">		<ng-template ngSwitchCase="number">
	{{ hoverInfo.comparisonValue \| number }}		{{ hoverInfo.comparisonValue \| number: '1.0-0' \| abbr }}
	</ng-template>		</ng-template>
	<ng-template ngSwitchCase="usd">		<ng-template ngSwitchCase="usd">
	{{ hoverInfo.comparisonValue \| currency }}		{{ hoverInfo.comparisonValue \| currency }}
	</ng-template>		</ng-template>
			<ng-template ngSwitchCase="eth">
			{{ hoverInfo.value \| number: '1.3-3' }} ETH
			</ng-template>
			<ng-template ngSwitchCase="tokens">
			{{ hoverInfo.value \| number: '1.1-3' }} Tokens
			</ng-template>
	<ng-template ngSwitchDefault>		<ng-template ngSwitchDefault>
	{{ hoverInfo.comparisonValue \| number: '1.1-3' }}		{{ hoverInfo.comparisonValue \| number: '1.1-3' }}
	</ng-template>		</ng-template>
	</ng-container>		</ng-container>
	on {{ hoverInfo.comparisonDate \| utcDate \| date: datePipe }}		on {{ hoverInfo.comparisonDate \| utcDate \| date: datePipe }}
	</div>		</div>
	</div> -->		</div>
			</div>
			</div>

src/app/common/components/chart-v2/chart-v2.component.scss

+136 −0

Original line number	Original line	Diff line number	Diff line
			m-chartV2 {
			display: block;
			position: relative;
			margin-left: 40px;
			}
			.js-plotly-plot,
			.plot-container {
			height: 44vh;
			min-height: 44vh;
			display: block;
			}
			#graphDiv {
			display: block;
			position: relative;
			g,
			g > * {
			cursor: default;
			}

			> * {
			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%;
			}
			}

			.m-chartV2__hoverInfoDiv {
			width: 160px;
			padding: 12px;
			position: absolute;
			pointer-events: none;
			border-radius: 3px;
			font-size: 12px;
			z-index: 9999999999;
			opacity: 0;
			transition: opacity 0.2s ease-in;
			@include m-theme() {
			background-color: themed($m-white);
			box-shadow: 0 0 4px rgba(themed($m-black), 0.3);
			color: themed($m-grey-300);
			}

			[class*='m-chartV2__hoverInfo__row'] {
			padding-bottom: 4px;
			font-weight: 300;
			&:last-of-type {
			padding-top: 2px;
			}
			}
			.m-chartV2__hoverInfo__row--primary {
			font-weight: 400;
			font-size: 15px;
			@include m-theme() {
			color: themed($m-grey-600);
			}
			}

			.m-chartV2__hoverInfo__closeBtn {
			display: none;
			font-size: 15px;
			position: absolute;
			cursor: pointer;
			top: 10px;
			right: 10px;
			transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
			@include m-theme() {
			color: themed($m-grey-300);
			}
			&:active {
			@include m-theme() {
			color: themed($m-grey-500);
			}
			}
			}
			}

			// ----------------------------------------------------

			.isTouchDevice .m-chartV2__hoverInfoDiv .m-chartV2__hoverInfo__closeBtn {
			display: block;
			}

			@media screen and (max-width: $min-tablet) {
			m-chartV2 {
			margin-left: 16px;
			}
			}

			// ----------------------------------------------------
			m-chartV2.isMini {
			margin-left: 0;
			margin-top: 24px;
			.js-plotly-plot,
			.plot-container {
			height: 40px;
			min-height: 40px;
			}
			.m-chartV2__chartContainer {
			// margin-right: 24px;
			}
			.m-chartV2__hoverInfoDiv {
			width: 150px;
			padding: 0px;

			.m-chartV2__hoverInfo__wrapper {
			display: flex;
			}
			.m-chartV2__hoverInfo__rowsContainer {
			display: flex;
			flex-direction: column;
			padding: 14px 14px 14px 0;
			}
			.m-chartV2__hoverInfo__arrowContainer {
			width: 20px;
			i {
			margin-left: -4px;
			transform: rotate(-45deg) scaleX(0.5);
			@include m-theme() {
			color: themed($m-grey-600);
			}
			}
			}
			[class*='m-chartV2__hoverInfo__row'] {
			line-height: 1.1;
			}
			.m-chartV2__hoverInfo__row--primary {
			font-size: 12px;
			}
			}
			@media screen and (max-width: $min-tablet) {
			margin-left: 0;
			}
			}

src/app/common/components/chart-v2/chart-v2.component.spec.ts

+39 −3

Original line number	Original line	Diff line number	Diff line
	import { async, ComponentFixture, TestBed } from '@angular/core/testing';		import { async, ComponentFixture, TestBed } from '@angular/core/testing';
			import { NO_ERRORS_SCHEMA } from '@angular/core';
			import { UtcDatePipe } from '../../pipes/utcdate';
			import { AbbrPipe } from '../../pipes/abbr';
			import { MockService } from '../../../utils/mock';
			import { ThemeService } from '../../services/theme.service';
	import { ChartV2Component } from './chart-v2.component';		import { ChartV2Component } from './chart-v2.component';

	describe('ChartV2Component', () => {		describe('ChartV2Component', () => {
	@@ -8,14 +12,46 @@ describe('ChartV2Component', () => {

	beforeEach(async(() => {		beforeEach(async(() => {
	TestBed.configureTestingModule({		TestBed.configureTestingModule({
	declarations: [ChartV2Component],		declarations: [ChartV2Component, UtcDatePipe, AbbrPipe],
			providers: [
			{
			provide: ThemeService,
			useValue: MockService(ThemeService),
			},
			],
			schemas: [NO_ERRORS_SCHEMA],
	}).compileComponents();		}).compileComponents();
	}));		}));

	beforeEach(() => {		beforeEach(() => {
	fixture = TestBed.createComponent(ChartV2Component);		fixture = TestBed.createComponent(ChartV2Component);
	component = fixture.componentInstance;		component = fixture.componentInstance;
	fixture.detectChanges();		component.rawData = {
			id: 'views',
			label: 'Pageviews',
			permissions: ['admin', 'user'],
			unit: 'usd',
			description: '',
			visualisation: {
			type: 'chart',
			segments: [
			{
			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,
			},
			],
			},
			],
			},
			};
	});		});

	it('should create', () => {		it('should create', () => {