diff --git a/src/app/item-detail/item-detail.module.ts b/src/app/item-detail/item-detail.module.ts index 1bef06e9..487be55f 100644 --- a/src/app/item-detail/item-detail.module.ts +++ b/src/app/item-detail/item-detail.module.ts @@ -31,6 +31,7 @@ import { ThresholdFailureComponent } from "./request-stats/threshold-failure/thr import { ZoomChartsComponent } from "./zoom-charts/zoom-charts.component"; import { ErrorSummaryComponent } from "./error-summary/error-summary.component"; import { ValidationsModule } from "./validations/validations.module"; +import { SeparationLineComponent } from "./separation-line/separation-line.component"; const routes: Routes = [{ @@ -43,7 +44,7 @@ const routes: Routes = [{ declarations: [ItemDetailComponent, RequestStatsComponent, ThresholdsAlertComponent, PerformanceAnalysisComponent, LabelChartComponent, AnalyzeChartsComponent, LabelHealthComponent, LabelTrendComponent, StatsCompareComponent, AddMetricComponent, ShareComponent, DeleteShareLinkComponent, - CreateNewShareLinkComponent, MonitoringStatsComponent, ReloadCustomChartComponent, ChartIntervalComponent, ForbiddenComponent, ThresholdFailureComponent, ZoomChartsComponent, ErrorSummaryComponent], + CreateNewShareLinkComponent, MonitoringStatsComponent, ReloadCustomChartComponent, ChartIntervalComponent, ForbiddenComponent, ThresholdFailureComponent, ZoomChartsComponent, ErrorSummaryComponent, SeparationLineComponent], imports: [ CommonModule, NgbModule, RouterModule.forRoot(routes), DataTableModule, SharedItemModule, SharedModule, HighchartsChartModule, ValidationsModule, ReactiveFormsModule, FormsModule, RoleModule, diff --git a/src/app/item-detail/label-chart/label-chart.component.html b/src/app/item-detail/label-chart/label-chart.component.html index fee48d12..3de47b04 100644 --- a/src/app/item-detail/label-chart/label-chart.component.html +++ b/src/app/item-detail/label-chart/label-chart.component.html @@ -25,7 +25,11 @@
+ + +
+ diff --git a/src/app/item-detail/separation-line/separation-line.component.css b/src/app/item-detail/separation-line/separation-line.component.css new file mode 100644 index 00000000..c0253f5d --- /dev/null +++ b/src/app/item-detail/separation-line/separation-line.component.css @@ -0,0 +1,29 @@ + +.separation-line { + overflow: hidden; + text-align: center; + margin-top: 1.5rem; + margin-bottom: 0.8rem; +} + +.separation-line::before, +.separation-line::after { + content: ""; + display: inline-block; + height: 2px; + position: relative; + vertical-align: middle; + width: 50%; + border: none; + border-top: 1px dotted #a1b3df; +} + +.separation-line::before { + right: 0.5em; + margin-left: -50%; +} + +.separation-line::after { + left: 0.5em; + margin-right: -50%; +} diff --git a/src/app/item-detail/separation-line/separation-line.component.html b/src/app/item-detail/separation-line/separation-line.component.html new file mode 100644 index 00000000..9cc89ce4 --- /dev/null +++ b/src/app/item-detail/separation-line/separation-line.component.html @@ -0,0 +1 @@ +
Comparing Chart
diff --git a/src/app/item-detail/separation-line/separation-line.component.spec.ts b/src/app/item-detail/separation-line/separation-line.component.spec.ts new file mode 100644 index 00000000..6d692ecf --- /dev/null +++ b/src/app/item-detail/separation-line/separation-line.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from "@angular/core/testing"; + +import { SeparationLineComponent } from "./separation-line.component"; + +describe("SeparationLineComponent", () => { + let component: SeparationLineComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SeparationLineComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SeparationLineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/item-detail/separation-line/separation-line.component.ts b/src/app/item-detail/separation-line/separation-line.component.ts new file mode 100644 index 00000000..8b539431 --- /dev/null +++ b/src/app/item-detail/separation-line/separation-line.component.ts @@ -0,0 +1,10 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: 'app-separation-line', + templateUrl: './separation-line.component.html', + styleUrls: ['./separation-line.component.css'] +}) +export class SeparationLineComponent { + +}