You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@submarine.apache.org by li...@apache.org on 2020/07/02 15:25:50 UTC
[submarine] branch master updated: SUBMARINE-552. [WEB]Implement
experiment information charts page
This is an automated email from the ASF dual-hosted git repository.
liuxun pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/submarine.git
The following commit(s) were added to refs/heads/master by this push:
new e0d1294 SUBMARINE-552. [WEB]Implement experiment information charts page
e0d1294 is described below
commit e0d1294a316f162fe9e48824ebce82e9012b5194
Author: kobe860219 <ko...@gmail.com>
AuthorDate: Thu Jul 2 16:54:25 2020 +0800
SUBMARINE-552. [WEB]Implement experiment information charts page
### What is this PR for?
1.Import swimlane/ngx-charts module with version 13.0.1 .
2.Implement experiment information charts page with simulated data for testing swimlane/ngx-charts.
### What type of PR is it?
[Feature]
### Todos
### What is the Jira issue?
https://issues.apache.org/jira/browse/SUBMARINE-552
### How should this be tested?
https://travis-ci.org/github/kobe860219/submarine
### Screenshots (if appropriate)
### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Author: kobe860219 <ko...@gmail.com>
Closes #338 from kobe860219/SUBMARINE-552 and squashes the following commits:
2bcd1bf [kobe860219] SUBMARINE-552. [WEB]Implement experiment information charts page.
---
submarine-workbench/workbench-web-ng/package.json | 1 +
.../experiment-info/charts/charts.component.html | 20 ++++-
.../experiment-info/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(-)
diff --git a/submarine-workbench/workbench-web-ng/package.json b/submarine-workbench/workbench-web-ng/package.json
index 138098d..eb92afe 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 00a8c5a..77df504 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.
-->
-<p>charts works!</p>
+<div style="background-color: white; height: 900px; padding: 50px;">
+ <ngx-charts-line-chart
+ [view]="view"
+ [scheme]="colorScheme"
+ [legend]="legend"
+ [showXAxisLabel]="showXAxisLabel"
+ [showYAxisLabel]="showYAxisLabel"
+ [xAxis]="xAxis"
+ [yAxis]="yAxis"
+ [xAxisLabel]="xAxisLabel"
+ [yAxisLabel]="yAxisLabel"
+ [timeline]="timeline"
+ [results]="data"
+ (select)="onSelect($event)"
+ (activate)="onActivate($event)"
+ (deactivate)="onDeactivate($event)"
+ [legendTitle]="title"
+ ></ngx-charts-line-chart>
+</div>
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 ba7b0c7..af6ff40 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 0000000..60e4493
--- /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 774c87a..1df383e 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 {}
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@submarine.apache.org
For additional commands, e-mail: dev-help@submarine.apache.org