color-chart component

open-template-hub · Aug 29, 2021 · b684932 · b684932
1 parent 8d372ef
commit b684932
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 60 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -67,6 +67,7 @@ import interactionPlugin from '@fullcalendar/interaction';
 import { CalendarComponent } from './component/common/calendar/calendar.component';
 import { SearchComponent } from './component/common/search/search.component';
 import { RateBarComponent } from './component/common/rate-bar/rate-bar.component';
+import { ColorChartComponent } from './component/common/color-chart/color-chart.component';
 
 FullCalendarModule.registerPlugins( [
   dayGridPlugin,
@@ -121,7 +122,8 @@ FullCalendarModule.registerPlugins( [
     CalendarComponent,
     SearchComponent,
     RateBarComponent,
-    EditThemeComponent
+    EditThemeComponent,
+    ColorChartComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/component/common/color-chart/color-chart.component.html b/src/app/component/common/color-chart/color-chart.component.html
@@ -0,0 +1,23 @@
+<div class="color-chart">
+
+  Less
+
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
+  </svg>
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
+  </svg>
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
+  </svg>
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
+  </svg>
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
+  </svg>
+
+  More
+
+</div>
diff --git a/src/app/component/common/color-chart/color-chart.component.scss b/src/app/component/common/color-chart/color-chart.component.scss
@@ -0,0 +1,10 @@
+.color-chart {
+  float: right;
+  color: var(--color);
+}
+
+.color-chart svg {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
diff --git a/src/app/component/common/color-chart/color-chart.component.spec.ts b/src/app/component/common/color-chart/color-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ColorChartComponent } from './color-chart.component';
+
+describe('ColorChartComponent', () => {
+  let component: ColorChartComponent;
+  let fixture: ComponentFixture<ColorChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ColorChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ColorChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/component/common/color-chart/color-chart.component.ts b/src/app/component/common/color-chart/color-chart.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-color-chart',
+  templateUrl: './color-chart.component.html',
+  styleUrls: ['./color-chart.component.scss']
+})
+export class ColorChartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/page/dashboard-layout/my-profile/my-profile.component.html b/src/app/page/dashboard-layout/my-profile/my-profile.component.html
@@ -129,29 +129,7 @@
           [xAxis]="showXAxis"
           [yAxis]="showYAxis">
       </ngx-charts-bar-horizontal>
-      <div class="color-text">
-
-        Less
-
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
-        </svg>
-
-        More
-
-      </div>
+      <app-color-chart></app-color-chart>
     </div>
   </app-card1>
   <app-card1 *ngIf="eventsInfo.length === 0" [title]="'Lessons Taken'">

diff --git a/src/app/page/dashboard-layout/my-profile/my-profile.component.scss b/src/app/page/dashboard-layout/my-profile/my-profile.component.scss
@@ -42,12 +42,12 @@
   color: var(--brand-color);
 }
 
-.color-text {
+.color-chart {
   float: right;
   color: var(--color);
 }
 
-.color-text svg {
+.color-chart svg {
   margin-left: 2px;
   margin-right: 2px;
 }

diff --git a/src/app/page/dashboard-layout/public-profile/public-profile.component.html b/src/app/page/dashboard-layout/public-profile/public-profile.component.html
@@ -134,7 +134,7 @@
           [xAxis]="showXAxis"
           [yAxis]="showYAxis">
       </ngx-charts-bar-horizontal>
-      <div class="color-text">
+      <div class="color-chart">
 
         Less
 
@@ -183,29 +183,7 @@ <h3 class="dim">No results found</h3>
         [xAxis]="showXAxis"
         [yAxis]="showYAxis">
       </ngx-charts-bar-horizontal>
-      <div class="color-text">
-
-        Less
-
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
-        </svg>
-
-        More
-
-      </div>
+      <app-color-chart></app-color-chart>
     </div>
   </app-card1>
   <app-card1 *ngIf="userInfo?.payload?.userProfileActivated && eventsInfo.length === 0" [title]="'Events'">

diff --git a/src/app/page/dashboard-layout/public-profile/public-profile.component.scss b/src/app/page/dashboard-layout/public-profile/public-profile.component.scss
@@ -42,16 +42,6 @@
   margin-right: 20px;
 }
 
-.color-text {
-  float: right;
-  color: var(--color);
-}
-
-.color-text svg {
-  margin-left: 2px;
-  margin-right: 2px;
-}
-
 .rate-badge-wrapper {
   position: absolute;
   top: 45px;