Added personalized image, playlist audio features

Author: eightants

application/src/app/components/analysis/analysis.component.html

@@ -108,6 +108,25 @@ <h2>Want More?</h2>
             <a (click)="analysisLogin()"><button class="mob-top-pad btn clr-wgreen">Login With Spotify</button></a>
         </div>
     </div>
+    <div class="mob-pad fade-in-up options-pad login-pad" *ngIf="token!=''&&token!=null&&artists.length>5&&genres.length>1&&tracks.length>5">
+        <div class="scaled-div">
+            <div class="custom-scaled">
+                <canvas #toSave id="toSave" class="custom-image-div" width="800px" height="800px"></canvas>
+            </div>
+        </div>
+        <div class="login-right">
+            <h2>Share your music</h2>
+            <p>Your top songs span <strong>{{ artistSpan }}</strong> artists and <strong>{{genres.length}}</strong> genres, with your favourite genre being <strong>{{ genres[0][0]=='pop' ? capitalize(genres[1][0]):capitalize(genres[0][0]) }}</strong> </p>
+            <button (click)="saveImage()" class="mob-top-pad btn clr-wgreen">Save Image</button>
+        </div>
+    </div>
+    <!--IMAGE TO SAVE-->
+    <div class="custom-image-div">
+        <div #radarDraw class="colorizer red-purple">
+            <img id="custom-user-image" src="{{artists[0].images[1].url}}" *ngIf="artists.length > 0 && tracks.length > 0 && genres.length > 0">
+            <app-radar-chart [inputId]="'custom-image-chart'" [data]="personalChart" [config]="imageConfig" [changed]="changed" [graphClr]="'#000000'" (onDone)="generateImage()"></app-radar-chart>
+        </div>
+    </div>
     <div class="fav-container" *ngIf="token!=''&&token!=null">
         <div class="track-container">
             <h1 class="fav-sub-heading">Tracks</h1>
@@ -140,7 +159,6 @@ <h3>Popularity</h3>
         </div>
         <div class="artist-container">
             <h1>Genres</h1>
-            <p *ngIf="genres.length > 1">Your music spans over {{genres.length}} genres. </p>
             <div class="genre-card" *ngFor="let g of genres.slice(0,8)">
                 <h3>{{ capitalize(g[0]) }}</h3>
             </div>