Added some colors
This commit is contained in:
		@@ -5,7 +5,8 @@
 | 
			
		||||
    <small *ngIf="timer" class="text-muted">{{timer}} microseconds to upload</small>
 | 
			
		||||
    <span class="mx-auto"><!-- Spacer --></span>
 | 
			
		||||
    <mat-chip-list class="mr-2">
 | 
			
		||||
        <mat-chip *ngFor="let file of fileNames" color="primary" [removable]="true" (removed)="remove($event.chip.value)" [value]="file">
 | 
			
		||||
        <mat-chip *ngFor="let file of fileNames; let i = index" class="text-white" [style.backgroundColor]="colorScheme.domain[i]"
 | 
			
		||||
                  [removable]="true" (removed)="remove($event.chip.value)" [value]="file">
 | 
			
		||||
            {{file}}
 | 
			
		||||
            <mat-icon matChipRemove>cancel</mat-icon>
 | 
			
		||||
        </mat-chip>
 | 
			
		||||
@@ -19,10 +20,11 @@
 | 
			
		||||
<img *ngIf="!chartResults" class="float-right mt-2 mr-5" src="assets/starthere.png">
 | 
			
		||||
<div *ngIf="chartResults" class="w-100" [style.height]="chartHeight">
 | 
			
		||||
    <ngx-charts-bar-horizontal-2d #chart
 | 
			
		||||
                                [results]="chartResults"
 | 
			
		||||
                                [xAxis]="true"
 | 
			
		||||
                                [yAxis]="true"
 | 
			
		||||
                                [xAxisTickFormatting]="format">
 | 
			
		||||
                                  [scheme]="colorScheme"
 | 
			
		||||
                                  [results]="chartResults"
 | 
			
		||||
                                  [xAxis]="true"
 | 
			
		||||
                                  [yAxis]="true"
 | 
			
		||||
                                  [xAxisTickFormatting]="format">
 | 
			
		||||
    </ngx-charts-bar-horizontal-2d>
 | 
			
		||||
</div>
 | 
			
		||||
<input #fileUploader type="file" accept="text/csv" multiple hidden (change)="upload(fileUploader.files)">
 | 
			
		||||
 
 | 
			
		||||
@@ -1,11 +1,13 @@
 | 
			
		||||
import {Component} from '@angular/core';
 | 
			
		||||
import {timer} from './timer';
 | 
			
		||||
import {colorScheme} from './colorScheme';
 | 
			
		||||
 | 
			
		||||
@Component({
 | 
			
		||||
    selector: 'app-root',
 | 
			
		||||
    templateUrl: './app.component.html'
 | 
			
		||||
})
 | 
			
		||||
export class AppComponent {
 | 
			
		||||
    colorScheme = colorScheme; // colors
 | 
			
		||||
    chartResults; // This is where the chart reads the data from
 | 
			
		||||
    chartHeight = '100%'; // Dynamic height for chart
 | 
			
		||||
    timer = window['timer']; // Async pipe to display the timed data
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										6
									
								
								src/app/colorScheme.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										6
									
								
								src/app/colorScheme.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,6 @@
 | 
			
		||||
export const colorScheme = {
 | 
			
		||||
    name: 'cool',
 | 
			
		||||
    selectable: true,
 | 
			
		||||
    group: 'Ordinal',
 | 
			
		||||
    domain: ['#a8385d', '#7aa3e5', '#a27ea8', '#aae3f5', '#adcded', '#a95963', '#8796c0', '#7ed3ed', '#50abcc', '#ad6886']
 | 
			
		||||
};
 | 
			
		||||
		Reference in New Issue
	
	Block a user