Merge branch 'develop'

README.md

@@ -44,12 +44,10 @@
 - fully responsive
 
 ### Planned Features
-- Full implementation of ui design
 - allowing multiple parts of speech and definitions to be linked to one word
 - linking of synonyms and antonyms
 - ability to delete words
 - automated creation of words, adding word with assistance/wizard
-- more detailed statistics, daily, weekly stats, graphs, etc
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "oworms",
-    "version": "2.8.0",
+    "version": "2.8.1",
     "scripts": {
         "ng": "ng",
         "start": "node server.js",

src/app/component/bar-graph/bar-graph.component.scss

@@ -4,6 +4,7 @@
     display: flex;
     align-items: flex-end;
     margin: 1rem 3rem 3rem 1rem;
+    width: 100%;
 
     > #y-axis {
         display: flex;

src/app/page/stats/pos-bar-graph/pos-bar-graphs.component.html

@@ -0,0 +1,2 @@
+<h1>Parts Of Speech Totals</h1>
+<ow-bar-graph [graph]="totalGraph"></ow-bar-graph>

src/app/page/stats/pos-bar-graph/pos-bar-graphs.component.scss

@@ -0,0 +1,4 @@
+h1 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}

src/app/page/stats/pos-bar-graph/pos-bar-graphs.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+import { Bar, BarGraph } from '../../../component/bar-graph/bar-graph.component';
+import { Statistics } from '../../../model/statistics.interface';
+
+@Component({
+    selector: 'ow-pos-bar-graphs',
+    templateUrl: 'pos-bar-graphs.component.html',
+    styleUrls: ['./pos-bar-graphs.component.scss']
+})
+export class PosBarGraphsComponent implements OnChanges {
+
+    @Input()
+    stats: Statistics;
+    totalGraph: BarGraph;
+    percentageGraph: BarGraph;
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (!this.stats) {
+            return;
+        }
+
+        if (JSON.stringify(this.stats) === JSON.stringify(changes.stats)) {
+            return;
+        }
+
+        this.totalGraph = this.getTotalGraph();
+    }
+
+    private getTotalGraph(): BarGraph {
+        type tuple = [string, number];
+
+        const keys: [string, number][] = Object.entries(this.stats.partsOfSpeechTotals);
+        let max: number = 1;
+
+        const bars: Bar[] = keys
+            .sort((a: tuple, b: tuple) =>
+                new Date(a[0]).getTime() - new Date(b[0]).getTime()
+            )
+            .map(([pos, total]: tuple) => {
+                    if (total > max) {
+                        max = total + 10;
+                    }
+
+                    return ({
+                        key: pos,
+                        value: total,
+                        label: pos,
+                        showYLabel: false,
+                        yLabel: ''
+                    });
+                }
+            );
+
+        return { min: 0, max, bars, intervals: 10 };
+    }
+}

src/app/page/stats/statistics.component.html

@@ -3,16 +3,23 @@
 </ow-hero>
 
 <section>
-    <h1>Daily Word Creation Activity</h1>
+    <h1>General</h1>
 
-    <ow-bar-graph [graph]="graph$ | async" (barClick)="barClicked($event)"></ow-bar-graph>
+    <div>
+        <div>
+            <span>Total Words: {{stats?.totalWords ?? 'N/A'}}</span>
+        </div>
+        <div>
+            <span>Total Views: {{stats?.totalViewsOnWords ?? 'N/A'}}</span>
+        </div>
+    </div>
 
-    <ng-container *ngIf="selectedBar && selectedWords?.length > 0">
-        <h2>{{selectedBar.label}}</h2>
-        <p>Sorted By Time</p>
-        <ul>
-            <ow-word-card *ngFor="let word of selectedWords" [word]="word"></ow-word-card>
-        </ul>
-    </ng-container>
+</section>
 
+<section>
+    <ow-word-bar-graph [stats]="stats"></ow-word-bar-graph>
 </section>
+
+<!--<section>-->
+<!--    <ow-pos-bar-graphs [stats]="stats"></ow-pos-bar-graphs>-->
+<!--</section>-->

src/app/page/stats/statistics.component.scss

@@ -1,26 +1,38 @@
+h1 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}
+
 section {
     width: 100%;
     margin-top: 2rem;
     padding-left: 2rem;
+    padding-right: 2rem;
 
-    h1 {
+    > h1 {
         font-size: 2rem;
         margin-bottom: 2rem;
     }
 
-    h2 {
-        font-size: 1.5rem;
-    }
+    &:nth-of-type(1) {
 
-    p {
-        color: #655a5a;
-        margin-top: .5rem;
-    }
+        > div:first-of-type {
+            display: flex;
+            justify-content: space-between;
+
+            > div {
+                border: 1px solid #4b4242;
+                border-radius: 5px;
+                padding: 1.5rem;
+                width: 48%;
+                margin: 1rem;
 
-    > ul {
-        width: 90%;
-        margin-top: 1rem;
-        display: flex;
-        flex-wrap: wrap;
+                > span {
+                    color: #ffffff;
+                    font-size: 1.4rem;
+                    font-family: 'roboto-mono-medium', 'sans-serif';
+                }
+            }
+        }
     }
 }

src/app/page/stats/statistics.component.ts

@@ -1,13 +1,10 @@
 import { DatePipe } from '@angular/common';
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 
 import { UtilService } from '../../service/util.service';
 
-import { Bar, BarGraph } from '../../component/bar-graph/bar-graph.component';
 import { Statistics } from '../../model/statistics.interface';
-import { Word } from '../../model/word.interface';
 
 @Component({
     selector: 'ow-stats',
@@ -16,72 +13,16 @@ import { Word } from '../../model/word.interface';
 })
 export class StatisticsComponent {
 
-    selectedBar: Bar;
-    selectedWords: Word[] = [];
+    stats: Statistics;
     readonly DATE_PIPE: DatePipe = new DatePipe('en');
 
-    readonly graph$: Observable<BarGraph>;
-    private stats: Statistics;
-
     constructor(private readonly service: UtilService) {
-        type tuple = [Date, Word[]];
-
-        this.graph$ = this.service
+        this.service
             .getStatistics()
-            .pipe(
-                map((stats: Statistics) => {
+            .pipe(take(1))
+            .subscribe({
+                next: (stats: Statistics) => {
                     this.stats = stats;
-
-                    const keys: [string, Word[]][] = Object.entries(stats.dateWordMap);
-                    let max: number = 1;
-                    let prevIndex: number = 0;
-
-                    const bars: Bar[] = keys
-                        .map(([date, words]: [string, Word[]]) =>
-                            [new Date(date), words]
-                        )
-                        .sort((a: tuple, b: tuple) =>
-                            new Date(a[0]).getTime() - new Date(b[0]).getTime()
-                        )
-                        .map(([date, words]: tuple, index: number) => {
-                                const value: number = words.length;
-                                if (value > max) {
-                                    max = value + 10;
-                                }
-
-                                let showYLabel: boolean;
-                                if (Math.round(index - prevIndex) >= 10) {
-                                    prevIndex = index;
-                                    showYLabel = true;
-                                }
-
-                                return ({
-                                    key: date.toLocaleDateString(),
-                                    value,
-                                    label: date.toDateString(),
-                                    showYLabel:  index === 0 || showYLabel,
-                                    yLabel: this.DATE_PIPE.transform(date, 'MMM yyyy')
-                                });
-                            }
-                        );
-
-                    const graph: BarGraph = { min: 0, max, bars, intervals: 10 };
-
-                    return graph;
-                })
-            );
-    }
-
-    barClicked($event: Bar): void {
-        this.selectedBar = $event;
-        Object
-            .entries(this.stats.dateWordMap)
-            .forEach(([key, words]: [string, Word[]]) => {
-                if (new Date(key).toLocaleDateString() === $event.key) {
-                    this.selectedWords = words.sort((a: Word, b: Word) =>
-                        new Date(a.creationDate).getTime() > new Date(b.creationDate).getTime() ? 1 : -1
-                    );
-                    return;
                 }
             });
     }

src/app/page/stats/word-bar-graph/word-bar-graph.component.html

@@ -0,0 +1,11 @@
+<h1>Daily Word Creation Activity</h1>
+
+<ow-bar-graph [graph]="graph" (barClick)="barClicked($event)"></ow-bar-graph>
+
+<ng-container *ngIf="selectedBar && selectedWords?.length > 0">
+    <h2>{{selectedBar.label}}</h2>
+    <p>Sorted By Time</p>
+    <ul>
+        <ow-word-card *ngFor="let word of selectedWords" [word]="word"></ow-word-card>
+    </ul>
+</ng-container>

src/app/page/stats/word-bar-graph/word-bar-graph.component.scss

@@ -0,0 +1,20 @@
+h1 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+p {
+    color: #655a5a;
+    margin-top: .5rem;
+}
+
+ul {
+    width: 90%;
+    margin-top: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+}

src/app/page/stats/word-bar-graph/word-bar-graph.component.ts

@@ -0,0 +1,83 @@
+import { DatePipe } from '@angular/common';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+import { Bar, BarGraph } from '../../../component/bar-graph/bar-graph.component';
+import { Statistics } from '../../../model/statistics.interface';
+import { Word } from '../../../model/word.interface';
+
+@Component({
+    selector: 'ow-word-bar-graph',
+    templateUrl: 'word-bar-graph.component.html',
+    styleUrls: ['./word-bar-graph.component.scss']
+})
+export class WordBarGraphComponent implements OnChanges {
+
+    @Input()
+    stats: Statistics;
+    selectedBar: Bar;
+    selectedWords: Word[] = [];
+    readonly DATE_PIPE: DatePipe = new DatePipe('en');
+    graph: BarGraph;
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (!this.stats) {
+            return;
+        }
+
+        if (JSON.stringify(this.stats) === JSON.stringify(changes.stats)) {
+            return;
+        }
+
+        type tuple = [Date, Word[]];
+
+        const keys: [string, Word[]][] = Object.entries(this.stats.dateWordMap);
+        let max: number = 1;
+        let prevIndex: number = 0;
+
+        const bars: Bar[] = keys
+            .map(([date, words]: [string, Word[]]) =>
+                [new Date(date), words]
+            )
+            .sort((a: tuple, b: tuple) =>
+                new Date(a[0]).getTime() - new Date(b[0]).getTime()
+            )
+            .map(([date, words]: tuple, index: number) => {
+                    const value: number = words.length;
+                    if (value > max) {
+                        max = value + 10;
+                    }
+
+                    let showYLabel: boolean;
+                    if (Math.round(index - prevIndex) >= 10) {
+                        prevIndex = index;
+                        showYLabel = true;
+                    }
+
+                    return ({
+                        key: date.toLocaleDateString(),
+                        value,
+                        label: date.toDateString(),
+                        showYLabel: index === 0 || showYLabel,
+                        yLabel: this.DATE_PIPE.transform(date, 'MMM yyyy')
+                    });
+                }
+            );
+
+        this.graph = { min: 0, max, bars, intervals: 10 };
+    }
+
+    barClicked($event: Bar): void {
+        this.selectedBar = $event;
+        Object
+            .entries(this.stats.dateWordMap)
+            .forEach(([key, words]: [string, Word[]]) => {
+                if (new Date(key).toLocaleDateString() === $event.key) {
+                    this.selectedWords = words.sort((a: Word, b: Word) =>
+                        new Date(a.creationDate).getTime() > new Date(b.creationDate).getTime() ? 1 : -1
+                    );
+                    console.log(this.selectedWords);
+                    return;
+                }
+            });
+    }
+}