From 2bcd1bfc49114108111e9e200a04eabb81056985 Mon Sep 17 00:00:00 2001 From: kobe860219 Date: Thu, 2 Jul 2020 16:54:25 +0800 Subject: [PATCH] SUBMARINE-552. [WEB]Implement experiment information charts page. --- .../workbench-web-ng/package.json | 1 + .../charts/charts.component.html | 20 +++- .../charts/charts.component.ts | 36 +++++++- .../experiment/experiment-info/charts/data.ts | 91 +++++++++++++++++++ .../workbench/experiment/experiment.module.ts | 3 +- 5 files changed, 148 insertions(+), 3 deletions(-) create mode 100644 submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts diff --git a/submarine-workbench/workbench-web-ng/package.json b/submarine-workbench/workbench-web-ng/package.json index 138098d270..eb92afe805 100644 --- a/submarine-workbench/workbench-web-ng/package.json +++ b/submarine-workbench/workbench-web-ng/package.json @@ -21,6 +21,7 @@ "@angular/platform-browser": "~8.2.9", "@angular/platform-browser-dynamic": "~8.2.9", "@angular/router": "~8.2.9", + "@swimlane/ngx-charts": "^13.0.1", "date-fns": "^2.6.0", "lint-staged": "^10.2.2", "lodash": "^4.17.15", diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html index 00a8c5a3fa..77df504efb 100644 --- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html +++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html @@ -17,4 +17,22 @@ ~ under the License. --> -

charts works!

+
+ +
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts index ba7b0c710c..af6ff40001 100644 --- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts +++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts @@ -18,6 +18,7 @@ */ import { Component, OnInit } from '@angular/core'; +import { test_data } from './data'; @Component({ selector: 'submarine-charts', @@ -25,7 +26,40 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./charts.component.scss'] }) export class ChartsComponent implements OnInit { - constructor() {} + title = 'Metrics'; + + data: any[]; + view: any[] = [800, 500]; + legend: boolean = true; + showLabels: boolean = true; + animations: boolean = true; + xAxis: boolean = true; + yAxis: boolean = true; + showYAxisLabel: boolean = true; + showXAxisLabel: boolean = true; + xAxisLabel: string = 'Epoch'; + yAxisLabel: string = 'Percent'; + timeline: boolean = true; + + colorScheme = { + domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5'] + }; + + constructor() { + this.data = Object.assign([], test_data); + } + + onSelect(data): void { + console.log('Item clicked', JSON.parse(JSON.stringify(data))); + } + + onActivate(data): void { + console.log('Activate', JSON.parse(JSON.stringify(data))); + } + + onDeactivate(data): void { + console.log('Deactivate', JSON.parse(JSON.stringify(data))); + } ngOnInit() {} } diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts new file mode 100644 index 0000000000..60e4493f4f --- /dev/null +++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts @@ -0,0 +1,91 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export var test_data = [ + { + name: 'loss', + series: [ + { + name: 'Epoch1', + value: 0.204 + }, + { + name: 'Epoch2', + value: 0.1799 + }, + { + name: 'Epoch3', + value: 0.1772 + } + ] + }, + + { + name: 'accuracy', + series: [ + { + name: 'Epoch1', + value: 0.9356 + }, + { + name: 'Epoch2', + value: 0.9406 + }, + { + name: 'Epoch3', + value: 0.944 + } + ] + }, + + { + name: 'val_loss', + series: [ + { + name: 'Epoch1', + value: 0.2655 + }, + { + name: 'Epoch2', + value: 0.1578 + }, + { + name: 'Epoch3', + value: 0.1471 + } + ] + }, + { + name: 'val_accuracy', + series: [ + { + name: 'Epoch1', + value: 0.907 + }, + { + name: 'Epoch2', + value: 0.945 + }, + { + name: 'Epoch3', + value: 0.959 + } + ] + } +]; diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts index 774c87a197..1df383efe8 100644 --- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts +++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts @@ -8,6 +8,7 @@ import { OutputsComponent } from './experiment-info/outputs/outputs.component'; import { NgZorroAntdModule } from 'ng-zorro-antd'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; +import { NgxChartsModule } from '@swimlane/ngx-charts'; /* * Licensed to the Apache Software Foundation (ASF) under one @@ -30,7 +31,7 @@ import { FormsModule } from '@angular/forms'; @NgModule({ exports: [ReactiveFormsModule], - imports: [NgZorroAntdModule, CommonModule, FormsModule], + imports: [NgZorroAntdModule, CommonModule, FormsModule, NgxChartsModule], declarations: [ExperimentInfoComponent, HyperParamsComponent, MetricsComponent, ChartsComponent, OutputsComponent] }) export class ExperimentModule {}