This is an automated email from the ASF dual-hosted git repository.
zjffdu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
commit 2c8b852e19ba117dbd0fdc8718a4ea97d6f32acc
Author: Hsuan Lee <hsua...@gmail.com>
AuthorDate: Fri Dec 20 16:36:26 2019 +0800
[ZEPPELIN-4502] Adjust global styles and theming the visualization
### What is this PR for?
Adjust global styles and theming the visualization
### What type of PR is it?
[Feature]
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-4502
### How should this be tested?
Not applicable
### 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: Hsuan Lee <hsua...@gmail.com>
Closes #3563 from hsuanxyz/feat/theme and squashes the following commits:
73271f24d [Hsuan Lee] chore: add visualization theme config
757154965 [Hsuan Lee] chore: reset the editor theme
410e0644e [Hsuan Lee] chore: adjust styles
ad6fc5a52 [Hsuan Lee] feat: styling table in the HTML result
1ec33b652 [Hsuan Lee] fix: quartz url
507b2b732 [Hsuan Lee] fix: notebook cron model error
c95ef6b54 [Hsuan Lee] feat: show front-end error in result
df24cc074 [Hsuan Lee] feat: scroll to the paragraph when the position is
moved
---
zeppelin-web-angular/angular.json | 3 +-
zeppelin-web-angular/package-lock.json | 21 ++--
zeppelin-web-angular/package.json | 3 +-
zeppelin-web-angular/src/app/app.module.ts | 4 +-
.../runtime-dynamic-module.module.ts | 11 ++
zeppelin-web-angular/src/app/languages/load.ts | 13 ++-
.../workspace/interpreter/item/item.component.less | 2 +-
.../notebook-repos/item/item.component.less | 2 +-
.../notebook/action-bar/action-bar.component.html | 14 +--
.../notebook/action-bar/action-bar.component.ts | 1 -
.../pages/workspace/notebook/notebook.component.ts | 8 ++
.../pages/workspace/notebook/notebook.module.ts | 4 +-
.../notebook/paragraph/paragraph.component.ts | 6 +
.../workspace/share/result/result.component.html | 1 +
.../workspace/share/result/result.component.less | 36 ++++++
.../workspace/share/result/result.component.ts | 23 ++--
.../src/app/pages/workspace/share/share.module.ts | 6 +-
.../src/app/pages/workspace/workspace.component.ts | 2 +
.../src/app/services/runtime-compiler.service.ts | 22 ++--
.../src/app/services/shortcut.service.ts | 8 +-
.../app/share/node-list/node-list.component.html | 2 +-
.../app/share/node-list/node-list.component.less | 4 -
.../element.ts} | 20 +---
.../bar-chart/bar-chart-visualization.component.ts | 3 +
.../pivot-setting/pivot-setting.component.html | 2 +-
.../pivot-setting/pivot-setting.component.less | 6 +
.../scatter-setting/scatter-setting.component.html | 2 +-
.../scatter-setting/scatter-setting.component.less | 6 +
.../src/app/visualizations/g2.config.ts | 130 +++++++++++++++++++++
.../src/styles/theme/light/theme-light.less | 4 +-
30 files changed, 294 insertions(+), 75 deletions(-)
diff --git a/zeppelin-web-angular/angular.json
b/zeppelin-web-angular/angular.json
index 37904c1..095c388 100644
--- a/zeppelin-web-angular/angular.json
+++ b/zeppelin-web-angular/angular.json
@@ -72,7 +72,8 @@
"src/styles/theme/light/antd-light.less",
"src/styles.less",
"./node_modules/highlight.js/styles/github.css",
- "./node_modules/monaco-editor/min/vs/editor/editor.main.css"
+ "./node_modules/monaco-editor/min/vs/editor/editor.main.css",
+ "./node_modules/github-markdown-css/github-markdown.css"
],
"stylePreprocessorOptions": {
"includePaths": [
diff --git a/zeppelin-web-angular/package-lock.json
b/zeppelin-web-angular/package-lock.json
index da898b0..8c82716 100644
--- a/zeppelin-web-angular/package-lock.json
+++ b/zeppelin-web-angular/package-lock.json
@@ -2844,13 +2844,10 @@
"resolved":
"https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz";,
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
},
- "ansi-to-html": {
- "version": "0.6.12",
- "resolved":
"https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.12.tgz";,
- "integrity":
"sha512-qBkIqLW979675mP76yB7yVkzeAWtATegdnDQ0RA3CZzknx0yUlNxMSML4xFdBfTs2GWYFQ1FELfbGbVSPzJ+LA==",
- "requires": {
- "entities": "^1.1.2"
- }
+ "ansi_up": {
+ "version": "4.0.4",
+ "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-4.0.4.tgz";,
+ "integrity":
"sha512-vRxC8q6QY918MbehO869biJW4tiunJdjOhi5fpY6NLOliBQlZhOkKgABJKJqH+JZfb/WfjvjN1chLWI6tODerw=="
},
"any-observable": {
"version": "0.3.0",
@@ -5538,11 +5535,6 @@
"integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
"dev": true
},
- "entities": {
- "version": "1.1.2",
- "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz";,
- "integrity":
"sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
- },
"err-code": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/err-code/-/err-code-1.1.2.tgz";,
@@ -6396,6 +6388,11 @@
"assert-plus": "^1.0.0"
}
},
+ "github-markdown-css": {
+ "version": "3.0.1",
+ "resolved":
"https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-3.0.1.tgz";,
+ "integrity":
"sha512-9G5CIPsHoyk5ObDsb/H4KTi23J8KE1oDd4KYU51qwqeM+lKWAiO7abpSgCkyWswgmSKBiuE7/4f8xUz7f2qAiQ=="
+ },
"glob": {
"version": "7.1.5",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.5.tgz";,
diff --git a/zeppelin-web-angular/package.json
b/zeppelin-web-angular/package.json
index 670c73c..9d8cafe 100644
--- a/zeppelin-web-angular/package.json
+++ b/zeppelin-web-angular/package.json
@@ -28,10 +28,11 @@
"@angular/router": "~8.2.10",
"@antv/data-set": "^0.10.2",
"@antv/g2": "^3.5.4",
- "ansi-to-html": "^0.6.11",
+ "ansi_up": "^4.0.4",
"core-js": "^2.5.4",
"date-fns": "^1.30.1",
"diff-match-patch": "^1.0.4",
+ "github-markdown-css": "^3.0.1",
"highlight.js": "^9.15.8",
"lodash": "^4.17.11",
"mathjax": "2.7.5",
diff --git a/zeppelin-web-angular/src/app/app.module.ts
b/zeppelin-web-angular/src/app/app.module.ts
index 06be7f4..5f65102 100644
--- a/zeppelin-web-angular/src/app/app.module.ts
+++ b/zeppelin-web-angular/src/app/app.module.ts
@@ -25,7 +25,7 @@ import { NzModalService } from 'ng-zorro-antd/modal';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { MESSAGE_INTERCEPTOR, TRASH_FOLDER_ID_TOKEN } from
'@zeppelin/interfaces';
-import { loadMonacoLanguage } from '@zeppelin/languages';
+import { loadMonacoBefore } from '@zeppelin/languages';
import { TicketService } from '@zeppelin/services';
import { ShareModule } from '@zeppelin/share';
@@ -37,7 +37,7 @@ import { RUNTIME_COMPILER_PROVIDERS } from
'./app-runtime-compiler.providers';
import { AppComponent } from './app.component';
export const loadMonaco = () => {
- loadMonacoLanguage();
+ loadMonacoBefore();
};
registerLocaleData(en);
diff --git
a/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts
b/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts
index d6cb44c..27d08f9 100644
---
a/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts
+++
b/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts
@@ -1,3 +1,14 @@
+/*
+ * Licensed 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.
+ */
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
diff --git a/zeppelin-web-angular/src/app/languages/load.ts
b/zeppelin-web-angular/src/app/languages/load.ts
index 5dad459..64c617a 100644
--- a/zeppelin-web-angular/src/app/languages/load.ts
+++ b/zeppelin-web-angular/src/app/languages/load.ts
@@ -10,10 +10,19 @@
* limitations under the License.
*/
-import { languages } from 'monaco-editor';
+import { editor, languages } from 'monaco-editor';
import { conf as ScalaConf, language as ScalaLanguage } from './scala';
-export const loadMonacoLanguage = () => {
+export const loadMonacoBefore = () => {
+ editor.defineTheme('zeppelin-theme', {
+ base: 'vs',
+ inherit: true,
+ rules: [],
+ colors: {
+ 'editor.lineHighlightBackground': '#0000FF10'
+ }
+ });
+ editor.setTheme('zeppelin-theme');
languages.register({ id: 'scala' });
languages.setMonarchTokensProvider('scala', ScalaLanguage);
languages.setLanguageConfiguration('scala', ScalaConf);
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
b/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
index 856506e..746967d 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
+++
b/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
@@ -19,7 +19,7 @@
::ng-deep .interpreter-item {
&.edit {
- background: @orange-1;
+ //background: @orange-1;
}
.ant-card-body {
margin-top: -@card-padding-base;
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
index bc6d280..7e24239 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
+++
b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
@@ -20,7 +20,7 @@
::ng-deep .repo-item {
&.edit {
- background: @orange-1;
+ //background: @orange-1;
}
}
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
index 0238f17..1da21e6 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
+++
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
@@ -125,11 +125,9 @@
(click)="toggleExtension('revisions')">
<i nz-icon nzType="swap" nzTheme="outline"></i>
</button>
- <nz-button-group nzSize="small">
- <button nz-button nz-dropdown [nzDropdownMenu]="revisionsMenu"
nzTrigger="click">
- {{currentRevision}}
- </button>
- </nz-button-group>
+ <button nz-button nz-dropdown [nzDropdownMenu]="revisionsMenu"
nzTrigger="click">
+ {{currentRevision}}
+ </button>
<nz-dropdown-menu #revisionsMenu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item *ngFor="let r of noteRevisions"
(click)="visitRevision(r)">
@@ -188,7 +186,8 @@
<div class="ant-dropdown-menu padding-sm scheduler">
Run note with cron scheduler.
Either choose from preset or write your own
- <a
href="http://www.quartz-scheduler.org/documentation/quartz-2.1.x/tutorials/crontrigger";
target="_blank">
+ <a
href="https://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-06.html";
+ target="_blank">
cron expression
</a>
.
@@ -226,7 +225,8 @@
<button nz-button nzNoAnimation (click)="togglePermissions()">
<i nz-icon nzType="lock" [nzTheme]="activatedExtension ===
'permissions' ? 'fill' : 'outline'"></i>
</button>
- <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small"
nz-dropdown nzTrigger="click">{{note.config.looknfeel}}
+ <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small"
nz-dropdown
+ nzTrigger="click">{{note.config.looknfeel}}
<i nz-icon nzType="down"></i>
</button>
<nz-dropdown-menu #menu="nzDropdownMenu">
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
index 994acc1..9ec5ded 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
+++
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
@@ -69,7 +69,6 @@ export class NotebookActionBarComponent extends
MessageListenersManager implemen
{ name: '12h', value: '0 0 0/12 * * ?' },
{ name: '1d', value: '0 0 0 * * ?' }
];
-
updateNoteName(name: string) {
const trimmedNewName = name.trim();
if (trimmedNewName.length > 0 && this.note.name !== trimmedNewName) {
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts
b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts
index e0c17a1..404fc28 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts
+++
b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts
@@ -36,6 +36,7 @@ import {
TicketService
} from '@zeppelin/services';
+import { scrollIntoViewIfNeeded } from '@zeppelin/utility/element';
import { NotebookParagraphComponent } from './paragraph/paragraph.component';
@Component({
@@ -151,7 +152,14 @@ export class NotebookComponent extends
MessageListenersManager implements OnInit
if (movedPara) {
const listOfRestPara = this.note.paragraphs.filter(p => p.id !==
data.id);
this.note.paragraphs = [...listOfRestPara.slice(0, data.index),
movedPara, ...listOfRestPara.slice(data.index)];
+ const paragraphComponent =
this.listOfNotebookParagraphComponent.find(e => e.paragraph.id === data.id);
this.cdr.markForCheck();
+ if (paragraphComponent) {
+ // Call when next tick
+ setTimeout(() => {
+ scrollIntoViewIfNeeded(paragraphComponent.getElement());
+ });
+ }
}
}
}
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
index 64cfdee..4b71d3d 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
@@ -45,6 +45,7 @@ import { NotebookParagraphProgressComponent } from
'./paragraph/progress/progres
import { NotebookPermissionsComponent } from
'./permissions/permissions.component';
import { NotebookRevisionsComparatorComponent } from
'./revisions-comparator/revisions-comparator.component';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { WorkspaceShareModule } from '../../workspace/share/share.module';
import { NotebookActionBarComponent } from './action-bar/action-bar.component';
import { NotebookRoutingModule } from './notebook-routing.module';
@@ -90,7 +91,8 @@ import { NotebookShareModule } from './share/share.module';
NzGridModule,
NzRadioModule,
DragDropModule,
- NzCodeEditorModule
+ NzCodeEditorModule,
+ NzCheckboxModule
]
})
export class NotebookModule {}
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
index 246d09e..ad9691e 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
+++
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
@@ -516,9 +516,11 @@ export class NotebookParagraphComponent extends
ParagraphBase implements OnInit,
this.commitParagraph();
break;
case ParagraphActions.MoveToUp:
+ event.preventDefault();
this.moveUpParagraph();
break;
case ParagraphActions.MoveToDown:
+ event.preventDefault();
this.moveDownParagraph();
break;
case ParagraphActions.SwitchEnable:
@@ -622,6 +624,10 @@ export class NotebookParagraphComponent extends
ParagraphBase implements OnInit,
}
}
+ getElement(): HTMLElement {
+ return this.host && this.host.nativeElement;
+ }
+
ngOnDestroy(): void {
super.ngOnDestroy();
}
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
index 0b246b0..cb8369f 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
+++
b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
@@ -68,6 +68,7 @@
<div *ngSwitchCase="datasetType.TEXT" class="text-plain"><pre
[innerHTML]="plainText"></pre></div>
<div *ngSwitchCase="datasetType.IMG" class="img"><img [src]="imgData"
alt="img"></div>
</ng-container>
+ <div *ngIf="frontEndError"
class="text-plain"><pre>{{frontEndError}}</pre></div>
<div *ngIf="angularComponent">
<ng-container
*ngComponentOutlet="angularComponent.component;ngModuleFactory:
angularComponent.moduleFactory;injector: injector"></ng-container>
</div>
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
index f197072..37f0dcb 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
+++
b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
@@ -29,6 +29,11 @@
}
::ng-deep {
+
+ .visualization-selector .ant-radio-button-wrapper {
+ padding: 0 10px;
+ }
+
.inner-html, .text-plain {
overflow: auto;
@@ -42,6 +47,37 @@
height: auto;
width: auto;
}
+
+ table {
+ border: none;
+ border-collapse: collapse;
+ border-spacing: 0;
+ color: @text-color;
+ table-layout: fixed;
+ }
+ thead {
+ color: @table-header-color;
+ border-bottom: 2px @border-style-base fade(@black, 65%);
+ vertical-align: bottom;
+ }
+ tr, th, td {
+ text-align: right;
+ vertical-align: middle;
+ padding: 0.5em 0.5em;
+ line-height: normal;
+ white-space: normal;
+ max-width: none;
+ border: none;
+ }
+ th {
+ font-weight: bold;
+ }
+ tbody tr:nth-child(odd) {
+ background: darken(@table-header-bg, 3%);
+ }
+ tbody tr:hover {
+ background: @table-row-hover-bg;
+ }
}
}
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
index 86d94cc..c8b75b9 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
+++
b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
@@ -29,7 +29,7 @@ import { DomSanitizer, SafeHtml, SafeUrl } from
'@angular/platform-browser';
import { Subject, Subscription } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
-import * as Convert from 'ansi-to-html';
+import { default as AnsiUp } from 'ansi_up';
import * as hljs from 'highlight.js';
import { NzResizeEvent } from 'ng-zorro-antd/resizable';
import { utils, writeFile, WorkSheet, WritingOptions } from 'xlsx';
@@ -206,6 +206,7 @@ export class NotebookParagraphResultComponent implements
OnInit, AfterViewInit,
}
renderDefaultDisplay() {
+ this.frontEndError = '';
switch (this.result.type) {
case DatasetType.TABLE:
this.renderGraph();
@@ -240,22 +241,22 @@ export class NotebookParagraphResultComponent implements
OnInit, AfterViewInit,
}
renderAngular(): void {
- try {
- this.runtimeCompilerService.createAndCompileTemplate(this.id,
this.result.data).then(data => {
+ this.runtimeCompilerService
+ .createAndCompileTemplate(this.id, this.result.data)
+ .then(data => {
this.angularComponent = data;
- // this.angularComponent.moduleFactory
+ this.cdr.markForCheck();
+ })
+ .catch(error => {
+ this.angularComponent = null;
+ this.frontEndError = error.message;
this.cdr.markForCheck();
});
- } catch (e) {
- this.frontEndError = e.message;
- console.log(e);
- }
}
renderText(): void {
- // tslint:disable-next-line:no-any
- const convert: any = new Convert();
- this.plainText =
this.sanitizer.bypassSecurityTrustHtml(convert.toHtml(this.result.data));
+ const ansiUp = new AnsiUp();
+ this.plainText =
this.sanitizer.bypassSecurityTrustHtml(ansiUp.ansi_to_html(this.result.data));
}
renderImg(): void {
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
b/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
index a381779..37bebf3 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
@@ -28,6 +28,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { ShareModule } from '@zeppelin/share';
import { VisualizationModule } from
'@zeppelin/visualizations/visualization.module';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzInputModule } from 'ng-zorro-antd/input';
import { NotebookParagraphDynamicFormsComponent } from
'./dynamic-forms/dynamic-forms.component';
import { NotebookParagraphResultComponent } from './result/result.component';
@@ -48,7 +50,9 @@ import { NotebookParagraphResultComponent } from
'./result/result.component';
NzIconModule,
NzCheckboxModule,
NzSelectModule,
- NzSwitchModule
+ NzSwitchModule,
+ NzInputModule,
+ NzGridModule
]
})
export class WorkspaceShareModule {}
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
b/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
index 976e44b..410ef17 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
@@ -18,6 +18,7 @@ import { ActivatedRoute, NavigationEnd, Route, Router } from
'@angular/router';
import { publishedSymbol, Published } from
'@zeppelin/core/paragraph-base/published';
import { HeliumManagerService } from '@zeppelin/helium-manager';
import { MessageService } from '@zeppelin/services';
+import { setTheme } from '@zeppelin/visualizations/g2.config';
import { log } from 'ng-zorro-antd/core';
@Component({
@@ -47,6 +48,7 @@ export class WorkspaceComponent implements OnInit, OnDestroy {
this.websocketConnected = data;
this.cdr.markForCheck();
});
+ setTheme();
this.heliumManagerService.initPackages();
}
diff --git a/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
b/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
index 8ec7f2c..f7f6fc4 100644
--- a/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
+++ b/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
@@ -11,15 +11,17 @@
*/
import {
+ ChangeDetectionStrategy,
Compiler,
Component,
Injectable,
- ModuleWithComponentFactories,
NgModule,
NgModuleFactory,
+ NO_ERRORS_SCHEMA,
Type
} from '@angular/core';
+import { CompileDirectiveMetadata, HtmlParser, TemplateParser } from
'@angular/compiler';
import { RuntimeDynamicModuleModule } from '@zeppelin/core';
import { NgZService } from './ng-z.service';
@@ -33,16 +35,17 @@ export class DynamicTemplate {
) {}
}
+export class DynamicTemplateError {
+ constructor(public message: string) {}
+}
+
@Injectable({
providedIn: 'root'
})
export class RuntimeCompilerService {
- // tslint:disable-next-line:no-any
- private compiledModule?: ModuleWithComponentFactories<any>;
-
public async createAndCompileTemplate(paragraphId: string, template:
string): Promise<DynamicTemplate> {
const ngZService = this.ngZService;
- const dynamicComponent = Component({ template: template })(
+ const dynamicComponent = Component({ template: template, selector:
`dynamic-${paragraphId}` })(
class DynamicTemplateComponent {
z = {
set: (key: string, value, id: string) =>
ngZService.setContextValue(key, value, id),
@@ -63,8 +66,13 @@ export class RuntimeCompilerService {
imports: [RuntimeDynamicModuleModule]
})(class DynamicModule {});
- this.compiledModule = await
this.compiler.compileModuleAndAllComponentsAsync(dynamicModule);
- return new DynamicTemplate(template, dynamicComponent,
this.compiledModule.ngModuleFactory);
+ try {
+ this.compiler.clearCache();
+ const compiledModule = await
this.compiler.compileModuleAndAllComponentsAsync(dynamicModule);
+ return new DynamicTemplate(template, dynamicComponent,
compiledModule.ngModuleFactory);
+ } catch (e) {
+ throw new DynamicTemplateError(`${e}`);
+ }
}
constructor(private compiler: Compiler, private ngZService: NgZService) {}
diff --git a/zeppelin-web-angular/src/app/services/shortcut.service.ts
b/zeppelin-web-angular/src/app/services/shortcut.service.ts
index 4b2a626..5bc9a2a 100644
--- a/zeppelin-web-angular/src/app/services/shortcut.service.ts
+++ b/zeppelin-web-angular/src/app/services/shortcut.service.ts
@@ -44,10 +44,10 @@ export const ShortcutsMap = {
// Need register special character `≠` in MacOS
[ParagraphActions.IncreaseWidth]: ['alt.ctrlCmd.+', 'alt.ctrlCmd.≠'],
[ParagraphActions.Delete]: 'shift.delete',
- [ParagraphActions.MoveToUp]: ['ctrlCmd.k', 'ctrlCmd.arrowup'],
- [ParagraphActions.MoveToDown]: ['ctrlCmd.j', 'ctrlCmd.arrowdown'],
- [ParagraphActions.SelectAbove]: ['k', 'arrowup'],
- [ParagraphActions.SelectBelow]: ['j', 'arrowdown'],
+ [ParagraphActions.MoveToUp]: ['ctrlCmd.k', 'ctrlCmd.arrowup',
'ctrlCmd.arrowleft'],
+ [ParagraphActions.MoveToDown]: ['ctrlCmd.j', 'ctrlCmd.arrowdown',
'ctrlCmd.arrowright'],
+ [ParagraphActions.SelectAbove]: ['k', 'arrowup', 'arrowleft'],
+ [ParagraphActions.SelectBelow]: ['j', 'arrowdown', 'arrowright'],
[ParagraphActions.SwitchLineNumber]: 'l',
[ParagraphActions.SwitchTitleShow]: 't',
[ParagraphActions.SwitchOutputShow]: 'o',
diff --git
a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
index 70be691..7800443 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
@@ -72,7 +72,7 @@
</span>
<span class="file" *ngSwitchCase="'note'">
<a class="name">
- <i nz-icon nzType="file-text" nzTheme="fill"></i>
+ <i nz-icon nzType="file" nzTheme="outline"></i>
<a [routerLink]="['/notebook',node.origin.id]">
{{ node.title }}
</a>
diff --git
a/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
b/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
index aec40c1..ea197e4 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
@@ -48,10 +48,6 @@
filter: grayscale(1);
}
- i {
- margin-right: 6px;
- }
-
.operation {
margin-left: 12px;
diff --git
a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
b/zeppelin-web-angular/src/app/utility/element.ts
similarity index 65%
copy from
zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
copy to zeppelin-web-angular/src/app/utility/element.ts
index 87bb382..cdae6de 100644
---
a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
+++ b/zeppelin-web-angular/src/app/utility/element.ts
@@ -10,18 +10,10 @@
* limitations under the License.
*/
-@import "theme-mixin";
-
-.themeMixin({
- display: block;
- margin: 10px 0;
- .field-setting-wrap {
- margin-top: 24px;
- }
- .drag-wrap {
- min-height: 23px;
- }
- nz-card {
- background: #fff;
+export function scrollIntoViewIfNeeded(element: HTMLElement, center = true):
void {
+ // tslint:disable-next-line:no-any
+ if (element && typeof (element as any).scrollIntoViewIfNeeded ===
'function') {
+ // tslint:disable-next-line:no-any
+ (element as any).scrollIntoViewIfNeeded(center);
}
-});
+}
diff --git
a/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
b/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
index 82ed55f..2294445 100644
---
a/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
+++
b/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
@@ -83,6 +83,9 @@ export class BarChartVisualizationComponent extends
G2VisualizationComponentBase
const key = this.getKey();
this.setScale();
+ this.chart.tooltip({
+ shared: false
+ });
if (get(this.config.setting, 'multiBarChart.stacked', false)) {
this.chart
.intervalStack()
diff --git
a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
index 2a91d7b..fb1497f 100644
---
a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
+++
b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
@@ -10,7 +10,7 @@
~ limitations under the License.
-->
-<nz-card id="fields-drop-group" nzTitle="Available Fields" cdkDropListGroup>
+<nz-card id="fields-drop-group" nzTitle="Available Fields" nzSize="small"
cdkDropListGroup>
<div cdkDropList
id="columns-list"
[cdkDropListData]="columns"
diff --git
a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
index 87bb382..9091c36 100644
---
a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
+++
b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.less
@@ -23,5 +23,11 @@
}
nz-card {
background: #fff;
+ ::ng-deep {
+ .ant-card-head {
+ padding: 0 12px;
+ background: #fafafa;
+ }
+ }
}
});
diff --git
a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
index ff03338..7333cee 100644
---
a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
+++
b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
@@ -10,7 +10,7 @@
~ limitations under the License.
-->
-<nz-card id="fields-drop-group" nzTitle="Available Fields" cdkDropListGroup>
+<nz-card id="fields-drop-group" nzTitle="Available Fields" nzSize="small"
cdkDropListGroup>
<div cdkDropList
id="columns-list"
[cdkDropListData]="columns"
diff --git
a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.less
b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.less
index 0142785..35d9c4e 100644
---
a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.less
+++
b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.less
@@ -23,5 +23,11 @@
}
nz-card {
background: #fff;
+ ::ng-deep {
+ .ant-card-head {
+ padding: 0 12px;
+ background: #fafafa;
+ }
+ }
}
});
diff --git a/zeppelin-web-angular/src/app/visualizations/g2.config.ts
b/zeppelin-web-angular/src/app/visualizations/g2.config.ts
new file mode 100644
index 0000000..aa5a4e9
--- /dev/null
+++ b/zeppelin-web-angular/src/app/visualizations/g2.config.ts
@@ -0,0 +1,130 @@
+/*
+ * Licensed 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.
+ */
+
+import * as G2 from '@antv/g2';
+
+const DEFAULT_COLOR = '#03578c';
+const COLOR_PLATE_8 = ['#03578c', '#179bd4', '#bf4f07', '#005041', '#8543E0',
'#57c2e9', '#03138c', '#8c0357'];
+
+const COLOR_PLATE_16 = [
+ '#03588C',
+ '#82B8D9',
+ '#025959',
+ '#FACC14',
+ '#E6965C',
+ '#223273',
+ '#7564CC',
+ '#8543E0',
+ '#5C8EE6',
+ '#13C2C2',
+ '#5CA3E6',
+ '#3436C7',
+ '#B381E6',
+ '#F04864',
+ '#D598D9'
+];
+const COLOR_PLATE_24 = [
+ '#03588C',
+ '#66B5FF',
+ '#82B8D9',
+ '#025959',
+ '#027368',
+ '#9AE65C',
+ '#FACC14',
+ '#E6965C',
+ '#57AD71',
+ '#223273',
+ '#738AE6',
+ '#7564CC',
+ '#8543E0',
+ '#A877ED',
+ '#5C8EE6',
+ '#13C2C2',
+ '#70E0E0',
+ '#5CA3E6',
+ '#3436C7',
+ '#8082FF',
+ '#DD81E6',
+ '#F04864',
+ '#FA7D92',
+ '#D598D9'
+];
+const COLOR_PIE = ['#03588C', '#13C2C2', '#025959', '#FACC14', '#F04864',
'#8543E0', '#3436C7', '#223273'];
+const COLOR_PIE_16 = [
+ '#03588C',
+ '#73C9E6',
+ '#13C2C2',
+ '#6CD9B3',
+ '#025959',
+ '#9DD96C',
+ '#FACC14',
+ '#E6965C',
+ '#F04864',
+ '#D66BCA',
+ '#8543E0',
+ '#8E77ED',
+ '#3436C7',
+ '#737EE6',
+ '#223273',
+ '#7EA2E6'
+];
+
+const zeppelinTheme = {
+ defaultColor: DEFAULT_COLOR,
+ colors: COLOR_PLATE_8,
+ colors_16: COLOR_PLATE_16,
+ colors_24: COLOR_PLATE_24,
+ colors_pie: COLOR_PIE,
+ colors_pie_16: COLOR_PIE_16,
+ shape: {
+ point: {
+ fill: DEFAULT_COLOR
+ },
+ hollowPoint: {
+ stroke: DEFAULT_COLOR
+ },
+ interval: {
+ fill: DEFAULT_COLOR
+ },
+ hollowInterval: {
+ stroke: DEFAULT_COLOR
+ },
+ area: {
+ fill: DEFAULT_COLOR
+ },
+ polygon: {
+ fill: DEFAULT_COLOR
+ },
+ hollowPolygon: {
+ stroke: DEFAULT_COLOR
+ },
+ hollowArea: {
+ stroke: DEFAULT_COLOR
+ },
+ line: {
+ stroke: DEFAULT_COLOR
+ },
+ edge: {
+ stroke: DEFAULT_COLOR
+ },
+ schema: {
+ stroke: DEFAULT_COLOR
+ }
+ }
+};
+
+export function setTheme() {
+ const theme = G2.Util.deepMix(G2.Global, zeppelinTheme);
+ console.log(zeppelinTheme);
+ // tslint:disable-next-line:no-any
+ (G2.Global as any).setTheme(theme);
+}
diff --git a/zeppelin-web-angular/src/styles/theme/light/theme-light.less
b/zeppelin-web-angular/src/styles/theme/light/theme-light.less
index 6f071e5..576517a 100644
--- a/zeppelin-web-angular/src/styles/theme/light/theme-light.less
+++ b/zeppelin-web-angular/src/styles/theme/light/theme-light.less
@@ -74,8 +74,8 @@
@heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42);
@line-height-base: 1.5;
-@border-radius-base: 0px;
-@border-radius-sm: 0px;
+@border-radius-base: 4px;
+@border-radius-sm: 2px;
// vertical paddings
@padding-lg: 24px; // containers
