diff --git a/package.json b/package.json index 43cee7331d..9a110685ad 100644 --- a/package.json +++ b/package.json @@ -69,10 +69,12 @@ "@angular/core": "6.0.2", "@angular/forms": "6.0.2", "@angular/http": "6.0.2", + "@angular/material": "^6.4.6", "@angular/platform-browser": "6.0.2", "@angular/platform-browser-dynamic": "6.0.2", "@angular/platform-server": "6.0.2", "@angular/router": "6.0.2", + "@covalent/core": "2.0.0-beta.2", "@covalent/tools": "2.0.0-beta.2", "classlist.js": "^1.1.20150312", "core-js": "^2.5.4", diff --git a/scripts/build-release b/scripts/build-release index 6c24ebb62f..d8e8b52805 100644 --- a/scripts/build-release +++ b/scripts/build-release @@ -5,5 +5,5 @@ set -e rm -rf ./src/platform/node_modules rm -rf ./deploy -# BUILD: @covalent/core primary entrypoint +# BUILD: @covalent/echarts primary entrypoint ./node_modules/.bin/ng-packagr -p src/platform/echarts/ng-package.js \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 0012037067..f2a40f1568 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,86 @@ -

TEST

-Bar Test + - \ No newline at end of file + [data]="barPlot"> + + + +
+ + person + + + {{params.seriesName + ': ' + params.value}} + +
+ + + + +

Bar Test 2

+ + + + +
+ + person + + + {{params.seriesName + ': ' + params.value}} + +
+ + + + +

Line Test

+
+ +
+ + + + +
+ + update_time + + + {{params[0].seriesName + ': ' + params[0].value[1]}} + +
+
+ at {{(params[0].name | date:'medium')}} +
+ + + + +

Line Test 2

+ + + + +
+ + update_time + + + {{params[0].seriesName + ': ' + params[0].value[1]}} + +
+
+ at {{(params[0].name | date:'medium')}} +
+ + + + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e5378cdce0..118e6e5434 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,9 @@ import { Component, ChangeDetectorRef } from '@angular/core'; +export const NOW: Date = new Date(); + +import 'echarts/lib/component/tooltip'; + @Component({ selector: 'docs-covalent', templateUrl: './app.component.html', @@ -7,7 +11,7 @@ import { Component, ChangeDetectorRef } from '@angular/core'; }) export class DocsAppComponent { - plot: any = [{ + barPlot: any = [{ color: '#575757', opacity: 0.75, name: 'Historical Model', @@ -21,6 +25,28 @@ export class DocsAppComponent { data: [2432433], }]; + showTooltip: boolean = true; + linePlot: any[] = [{ + name: 'Line Test', + color: '#575757', + shadowBlur: 5, + shadowColor: 'rgba(0, 0, 0, 0.15)', + shadowOffsetX: 0, + shadowOffsetY: 5, + width: 2, + opacity: 0.75, + data: [{ + name: NOW.toISOString(), + value: [NOW.toISOString(), 200], + }, { + name: new Date(NOW.getTime() + (24 * 3600 * 1000)).toISOString(), + value: [new Date(NOW.getTime() + (24 * 3600 * 1000)).toISOString(), 50], + }, { + name: new Date(NOW.getTime() + (2 * 24 * 3600 * 1000)).toISOString(), + value: [new Date(NOW.getTime() + (2 * 24 * 3600 * 1000)).toISOString(), 100], + }], + }]; + constructor(private _changeDetectorRef: ChangeDetectorRef) { } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5a3e76c35a..0bd337102e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,7 +11,12 @@ import localeEs from '@angular/common/locales/es'; // register 'es' locale registerLocaleData(localeEs); +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; + import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentLineEchartsModule } from '@covalent/echarts/line'; +import { CovalentBarEchartsModule } from '@covalent/echarts/bar'; import { DocsAppComponent } from './app.component'; import { appRoutes, appRoutingProviders } from './app.routes'; @@ -28,8 +33,12 @@ import { appRoutes, appRoutingProviders } from './app.routes'; FormsModule, BrowserModule, HttpClientModule, + MatIconModule, + MatButtonModule, /** Covalent Modules */ CovalentBaseEchartsModule, + CovalentLineEchartsModule, + CovalentBarEchartsModule, appRoutes, ], // modules needed to run this module providers: [ diff --git a/src/platform/echarts/bar/bar.component.html b/src/platform/echarts/bar/bar.component.html new file mode 100644 index 0000000000..11a795088e --- /dev/null +++ b/src/platform/echarts/bar/bar.component.html @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/platform/echarts/base/chart.component.scss b/src/platform/echarts/bar/bar.component.scss similarity index 100% rename from src/platform/echarts/base/chart.component.scss rename to src/platform/echarts/bar/bar.component.scss diff --git a/src/platform/echarts/bar/bar.component.ts b/src/platform/echarts/bar/bar.component.ts new file mode 100644 index 0000000000..5f85d029b6 --- /dev/null +++ b/src/platform/echarts/bar/bar.component.ts @@ -0,0 +1,22 @@ +import { + Component, + Input, + ChangeDetectionStrategy, +} from '@angular/core'; + +import 'echarts/lib/chart/bar'; + +import { BASE_CHART_PROVIDER } from '@covalent/echarts/base'; + +@Component({ + selector: 'td-chart-bar', + templateUrl: './bar.component.html', + styleUrls: ['./bar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [BASE_CHART_PROVIDER], +}) +export class TdBarChartComponent { + + @Input('data') data: any[]; + +} diff --git a/src/platform/echarts/bar/bar.module.ts b/src/platform/echarts/bar/bar.module.ts new file mode 100644 index 0000000000..1302cd6330 --- /dev/null +++ b/src/platform/echarts/bar/bar.module.ts @@ -0,0 +1,26 @@ +import { NgModule, Type } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; + +import { TdBarChartComponent } from './bar.component'; + +export const BAR_MODULE_COMPONENTS: Type[] = [ + TdBarChartComponent, +]; + +@NgModule({ + imports: [ + CommonModule, + CovalentBaseEchartsModule, + ], + declarations: [ + BAR_MODULE_COMPONENTS, + ], + exports: [ + BAR_MODULE_COMPONENTS, + ], +}) +export class CovalentBarEchartsModule { + +} diff --git a/src/platform/echarts/bar/index.ts b/src/platform/echarts/bar/index.ts new file mode 100644 index 0000000000..7e1a213e3e --- /dev/null +++ b/src/platform/echarts/bar/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/src/platform/echarts/bar/package.json b/src/platform/echarts/bar/package.json new file mode 100644 index 0000000000..dedb72ce9c --- /dev/null +++ b/src/platform/echarts/bar/package.json @@ -0,0 +1,7 @@ +{ + "ngPackage": { + "lib": { + "entryFile": "index.ts" + } + } +} diff --git a/src/platform/echarts/bar/public-api.ts b/src/platform/echarts/bar/public-api.ts new file mode 100644 index 0000000000..ccc2f5d090 --- /dev/null +++ b/src/platform/echarts/bar/public-api.ts @@ -0,0 +1,2 @@ +export * from './bar.module'; +export { TdBarChartComponent } from './bar.component'; diff --git a/src/platform/echarts/base/chart.component.html b/src/platform/echarts/base/base.component.html similarity index 100% rename from src/platform/echarts/base/chart.component.html rename to src/platform/echarts/base/base.component.html diff --git a/src/platform/echarts/base/base.component.scss b/src/platform/echarts/base/base.component.scss new file mode 100644 index 0000000000..5d4e87f30f --- /dev/null +++ b/src/platform/echarts/base/base.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/platform/echarts/base/chart.component.spec.ts b/src/platform/echarts/base/base.component.spec.ts similarity index 100% rename from src/platform/echarts/base/chart.component.spec.ts rename to src/platform/echarts/base/base.component.spec.ts diff --git a/src/platform/echarts/base/base.component.ts b/src/platform/echarts/base/base.component.ts new file mode 100644 index 0000000000..e3bdd76fab --- /dev/null +++ b/src/platform/echarts/base/base.component.ts @@ -0,0 +1,271 @@ +import { + Component, + Input, + Output, + EventEmitter, + ChangeDetectionStrategy, + ElementRef, + ChangeDetectorRef, + AfterViewInit, + OnChanges, + NgZone, + OnDestroy, + DoCheck, + ContentChild, +} from '@angular/core'; + +import { Subscription, Subject, fromEvent, merge } from 'rxjs'; +import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; + +import * as echarts from 'echarts/lib/echarts'; + +import 'echarts/lib/component/title'; +import 'echarts/lib/component/legend'; +import 'echarts/lib/component/legendScroll'; +import 'echarts/lib/component/markArea'; +import 'echarts/lib/component/dataZoom'; + +import { TdChartOptionsService, BASE_CHART_PROVIDER } from './base.service'; + +@Component({ + selector: 'td-base-chart', + templateUrl: './base.component.html', + styleUrls: ['./base.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [BASE_CHART_PROVIDER], +}) +export class TdBaseChartComponent implements AfterViewInit, OnChanges, DoCheck, OnDestroy { + + private _resizeSubscription: Subscription; + private _widthSubject: Subject = new Subject(); + private _heightSubject: Subject = new Subject(); + private _resizing: boolean = false; + + private _series: any[]; + private _legend: any; + + private _instance: any; + private _options: any = {}; + + get instance(): any { + return this._instance; + } + + get options(): any { + return this._options; + } + + @Input('chartTitle') chartTitle: string; + @Input('showLegend') showLegend: boolean = true; + @Input('data') data: any[]; + @Input('max') max: number; + @Input('chartGroup') chartGroup: string; + @Input('yAxisFormatter') yAxisFormatter: (value: any, index?: number) => string; + @Input('xAxisFormatter') xAxisFormatter: (value: any, index?: number) => string; + @Input('yAxisType') yAxisType: string = 'value'; + @Input('xAxisType') xAxisType: string = 'time'; + @Input('dataZoom') dataZoom: boolean = true; + @Input('xAxis') xAxis: any[]; + @Input('yAxis') yAxis: any[]; + @Input('showXAxis') showXAxis: boolean = true; + @Input('showYAxis') showYAxis: boolean = true; + @Input('yAxisSplitNumber') yAxisSplitNumber: number; + + @Output('markAreaClick') markAreaClick: EventEmitter = new EventEmitter(); + + constructor(private _changeDetectorRef: ChangeDetectorRef, + private _elementRef: ElementRef, + private _optionsService: TdChartOptionsService) { + } + + ngAfterViewInit(): void { + this._instance = echarts.init(this._elementRef.nativeElement); + fromEvent(this._instance, 'click').subscribe((params: any) => { + if (params.componentType === 'markArea') { + this.markAreaClick.next(params); + } + }); + if (this.chartGroup) { + this._instance.group = this.chartGroup; + echarts.connect(this.chartGroup); + this._changeDetectorRef.markForCheck(); + } + this._resizeSubscription = merge( + fromEvent(window, 'resize').pipe( + debounceTime(10), + ), + this._widthSubject.asObservable().pipe( + debounceTime(0), + distinctUntilChanged(), + ), + this._heightSubject.asObservable().pipe( + debounceTime(0), + distinctUntilChanged(), + ), + ).subscribe(() => { + if (!this._resizing) { + this._resizing = true; + setTimeout(() => { + this._instance.resize(); + this._resizing = false; + this._changeDetectorRef.markForCheck(); + }, 100); + } + }); + this.render(); + this._optionsService.listen().subscribe((options: any) => { + Object.assign(this._options, options); + this.render(); + }); + } + + ngDoCheck(): void { + if (this._elementRef && this._elementRef.nativeElement) { + this._widthSubject.next((this._elementRef.nativeElement).getBoundingClientRect().width); + this._heightSubject.next((this._elementRef.nativeElement).getBoundingClientRect().height); + } + } + + ngOnChanges(): void { + if (this._instance) { + this._instance.clear(); + this.render(); + } + } + + ngOnDestroy(): void { + if (this._resizeSubscription) { + this._resizeSubscription.unsubscribe(); + } + } + + render(): void { + if (this._instance) { + let option: any = {}; + if (this.chartTitle) { + option.title = { + text: this.chartTitle, + }; + } + if (this.data && this.data instanceof Array ) { + this._series = this.data.map((d: any) => { + return { + name: d.name, + id: d.id, + type: d.type ? d.type : 'line', + stack: d.stack, + data: d.data, + color: d.color, + connectNulls: false, + barWidth: d.barWidth, + barGap: d.barGap, + z: d.z, + lineStyle: { + opacity: d.opacity, + width: d.width, + shadowBlur: d.shadowBlur, + shadowColor: d.shadowColor, + shadowOffsetX: d.shadowOffsetX, + shadowOffsetY: d.shadowOffsetY, + }, + itemStyle: { + opacity: d.opacity, + }, + showSymbol: false, + areaStyle: d.area ? {opacity: d.opacity} : undefined, + markArea: { + data: d.markArea, + itemStyle: { + borderColor: '#464646', + borderWidth: 1, + opacity: d.markAreaOpacity ? d.markAreaOpacity : 0.1, + }, + }, + }; + }); + } + this._legend = { + show: this.showLegend, + type: 'scroll', + selectedMode: 'multiple', + orient: 'horizontal', // 'vertical' + right: '5', + bottom: '5', + data: this.data && this.data instanceof Array ? this.data.map((d: any) => d.name) : [], + }, + this._instance.setOption(Object.assign({}, { + grid: { + show: true, + left: '20', + right: '20', + bottom: this.showLegend ? '30' : '10', + top: '10', + containLabel: true, + borderColor: '#FCFCFC', + }, + dataZoom: this.dataZoom ? [{ + type: 'inside', + throttle: 50, + zoomOnMouseWheel: 'shift', + }] : undefined, + legend: this._legend, + xAxis : [{ + show: this.showXAxis, + // name: 'xAxis', + // nameLocation: 'middle', + // nameGap: 25, + // splitNumber: 5, + // minInterval: 3600 * 1000 * 24, + position: 'bottom', + type : this.xAxisType, + boundaryGap : false, + axisLabel: { + // showMinLabel: false, + formatter: this.xAxisFormatter, + inside: !this.showXAxis, + }, + axisLine: { + show: false, + lineStyle: { + color: '#777777', + }, + }, + data: this.xAxis, + splitLine: { + show: false, + lineStyle: { + color: '#ECECEC', + }, + }, + }], + yAxis : [{ + show: this.showYAxis, + // min : 0, + max: this.max, + type : this.yAxisType, + axisLabel: { + inside: true, + showMinLabel: false, + formatter: this.yAxisFormatter, + }, + splitNumber: this.yAxisSplitNumber, + axisLine: { + show: false, + lineStyle: { + color: '#777777', + }, + }, + data: this.yAxis, + splitLine: { + lineStyle: { + color: '#ECECEC', + }, + }, + }], + series: this._series, + }, this._options), true); + this._changeDetectorRef.markForCheck(); + } + } + +} diff --git a/src/platform/echarts/base/base.module.ts b/src/platform/echarts/base/base.module.ts new file mode 100644 index 0000000000..a6db993dc2 --- /dev/null +++ b/src/platform/echarts/base/base.module.ts @@ -0,0 +1,26 @@ +import { NgModule, Type } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { TdBaseChartComponent } from './base.component'; +import { TdChartTooltipComponent, TdChartTooltipFormatterDirective } from './tooltip/tooltip.component'; + +export const BASE_MODULE_COMPONENTS: Type[] = [ + TdBaseChartComponent, + TdChartTooltipComponent, + TdChartTooltipFormatterDirective, +]; + +@NgModule({ + imports: [ + CommonModule, + ], + declarations: [ + BASE_MODULE_COMPONENTS, + ], + exports: [ + BASE_MODULE_COMPONENTS, + ], +}) +export class CovalentBaseEchartsModule { + +} diff --git a/src/platform/echarts/base/base.service.ts b/src/platform/echarts/base/base.service.ts new file mode 100644 index 0000000000..2867aa6c94 --- /dev/null +++ b/src/platform/echarts/base/base.service.ts @@ -0,0 +1,43 @@ +import { + Injectable, + Provider, + Optional, + SkipSelf, +} from '@angular/core'; + +import { Subject, Observable, BehaviorSubject } from 'rxjs'; + +@Injectable() +export class TdChartOptionsService { + + private _options: any = {}; + private _optionsSubject: Subject = new BehaviorSubject(this._options); + + setOption(option: string, value: any): void { + let options: any = {}; + options[option] = value; + Object.assign(this._options, options); + this._optionsSubject.next(options); + } + + clearOption(option: string): void { + this.setOption(option, undefined); + } + + listen(): Observable { + return this._optionsSubject.asObservable(); + } + +} + +export function BASE_CHART_PROVIDER_FACTORY( + parent: TdChartOptionsService): TdChartOptionsService { + return parent || new TdChartOptionsService(); +} + +export const BASE_CHART_PROVIDER: Provider = { + // If there is already a service available, use that. Otherwise, provide a new one. + provide: TdChartOptionsService, + deps: [[new Optional(), new SkipSelf(), TdChartOptionsService]], + useFactory: BASE_CHART_PROVIDER_FACTORY, +}; diff --git a/src/platform/echarts/base/chart.component.ts b/src/platform/echarts/base/chart.component.ts deleted file mode 100644 index 4c32010af2..0000000000 --- a/src/platform/echarts/base/chart.component.ts +++ /dev/null @@ -1,271 +0,0 @@ -import { - Component, - Input, - Output, - EventEmitter, - ChangeDetectionStrategy, - ElementRef, - ChangeDetectorRef, - AfterViewInit, - OnChanges, - NgZone, - OnDestroy, - DoCheck, -} from '@angular/core'; - -import { Subscription, Subject, fromEvent, merge } from 'rxjs'; -import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; - -import * as echarts from 'echarts/lib/echarts'; - -import 'echarts/lib/chart/line'; -import 'echarts/lib/chart/bar'; - -import 'echarts/lib/component/tooltip'; -import 'echarts/lib/component/title'; -import 'echarts/lib/component/legend'; -import 'echarts/lib/component/legendScroll'; -import 'echarts/lib/component/markArea'; -import 'echarts/lib/component/dataZoom'; - -@Component({ - selector: 'td-chart', - templateUrl: './chart.component.html', - styleUrls: ['./chart.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class TdChartComponent implements AfterViewInit, OnChanges, DoCheck, OnDestroy { - - private _resizeSubscription: Subscription; - private _widthSubject: Subject = new Subject(); - private _heightSubject: Subject = new Subject(); - private _resizing: boolean = false; - - private _series: any[]; - private _legend: any; - - private _instance: any; - - get instance(): any { - return this._instance; - } - - @Input('chartTitle') chartTitle: string; - @Input('showLegend') showLegend: boolean = true; - @Input('showTooltip') showTooltip: boolean = true; - @Input('data') data: any[]; - @Input('max') max: number; - @Input('chartGroup') chartGroup: string; - @Input('yAxisFormatter') yAxisFormatter: (value: any, index?: number) => string; - @Input('xAxisFormatter') xAxisFormatter: (value: any, index?: number) => string; - @Input('yAxisType') yAxisType: string = 'value'; - @Input('xAxisType') xAxisType: string = 'time'; - @Input('dataZoom') dataZoom: boolean = true; - @Input('tooltipFormatter') tooltipFormatter: (params: any, ticket?: string, callback?: (ticket: string, html: string) => any) => string; - @Input('xAxis') xAxis: any[]; - @Input('yAxis') yAxis: any[]; - @Input('showXAxis') showXAxis: boolean = true; - @Input('showYAxis') showYAxis: boolean = true; - @Input('yAxisSplitNumber') yAxisSplitNumber: number; - - @Output('markAreaClick') markAreaClick: EventEmitter = new EventEmitter(); - - constructor(private _changeDetectorRef: ChangeDetectorRef, - private _elementRef: ElementRef, - private _ngZone: NgZone) { - } - - ngAfterViewInit(): void { - this._instance = echarts.init(this._elementRef.nativeElement); - fromEvent(this._instance, 'click').subscribe((params: any) => { - if (params.componentType === 'markArea') { - this.markAreaClick.next(params); - } - }); - if (this.chartGroup) { - this._instance.group = this.chartGroup; - echarts.connect(this.chartGroup); - this._changeDetectorRef.markForCheck(); - } - this._resizeSubscription = merge( - fromEvent(window, 'resize').pipe( - debounceTime(10), - ), - this._widthSubject.asObservable().pipe( - distinctUntilChanged(), - ), - this._heightSubject.asObservable().pipe( - distinctUntilChanged(), - ), - ).subscribe(() => { - if (!this._resizing) { - this._resizing = true; - setTimeout(() => { - this._instance.resize(); - this._resizing = false; - this._changeDetectorRef.markForCheck(); - }, 100); - } - }); - this.render(); - } - - ngDoCheck(): void { - if (this._elementRef && this._elementRef.nativeElement) { - this._widthSubject.next((this._elementRef.nativeElement).getBoundingClientRect().width); - this._heightSubject.next((this._elementRef.nativeElement).getBoundingClientRect().height); - } - } - - ngOnChanges(): void { - if (this._instance) { - this._instance.clear(); - this.render(); - } - } - - ngOnDestroy(): void { - if (this._resizeSubscription) { - this._resizeSubscription.unsubscribe(); - } - } - - render(): void { - let option: any = {}; - if (this.chartTitle) { - option.title = { - text: this.chartTitle, - }; - } - if (this.data && this.data instanceof Array ) { - this._series = this.data.map((d: any) => { - return { - name: d.name, - id: d.id, - type: d.type ? d.type : 'line', - stack: d.stack, - data: d.data, - color: d.color, - connectNulls: false, - barWidth: d.barWidth, - barGap: d.barGap, - z: d.z, - lineStyle: { - opacity: d.opacity, - width: d.width, - shadowBlur: d.shadowBlur, - shadowColor: d.shadowColor, - shadowOffsetX: d.shadowOffsetX, - shadowOffsetY: d.shadowOffsetY, - }, - itemStyle: { - opacity: d.opacity, - }, - showSymbol: false, - areaStyle: d.area ? {opacity: d.opacity} : undefined, - markArea: { - data: d.markArea, - itemStyle: { - borderColor: '#464646', - borderWidth: 1, - opacity: d.markAreaOpacity ? d.markAreaOpacity : 0.1, - }, - }, - }; - }); - } - this._legend = { - show: this.showLegend, - type: 'scroll', - selectedMode: 'multiple', - orient: 'horizontal', // 'vertical' - right: '5', - bottom: '5', - data: this.data && this.data instanceof Array ? this.data.map((d: any) => d.name) : [], - }, - this._instance.setOption({ - grid: { - show: true, - left: '20', - right: '20', - bottom: this.showLegend ? '30' : '10', - top: '10', - containLabel: true, - borderColor: '#FCFCFC', - }, - dataZoom: this.dataZoom ? [{ - type: 'inside', - throttle: 50, - zoomOnMouseWheel: 'shift', - }] : undefined, - legend: this._legend, - tooltip : { - show: this.showTooltip, - trigger: 'axis', // 'item' - formatter: this.tooltipFormatter, - axisPointer: { - type: 'line', // line and shadow - label: { - backgroundColor: '#6A7985', - }, - }, - }, - xAxis : [{ - show: this.showXAxis, - // name: 'xAxis', - // nameLocation: 'middle', - // nameGap: 25, - // splitNumber: 5, - // minInterval: 3600 * 1000 * 24, - position: 'bottom', - type : this.xAxisType, - boundaryGap : false, - axisLabel: { - // showMinLabel: false, - formatter: this.xAxisFormatter, - inside: !this.showXAxis, - }, - axisLine: { - show: false, - lineStyle: { - color: '#777777', - }, - }, - data: this.xAxis, - splitLine: { - show: false, - lineStyle: { - color: '#ECECEC', - }, - }, - }], - yAxis : [{ - show: this.showYAxis, - // min : 0, - max: this.max, - type : this.yAxisType, - axisLabel: { - inside: true, - showMinLabel: false, - formatter: this.yAxisFormatter, - }, - splitNumber: this.yAxisSplitNumber, - axisLine: { - show: false, - lineStyle: { - color: '#777777', - }, - }, - data: this.yAxis, - splitLine: { - lineStyle: { - color: '#ECECEC', - }, - }, - }], - series: this._series, - }); - this._changeDetectorRef.markForCheck(); - } - -} diff --git a/src/platform/echarts/base/chart.module.ts b/src/platform/echarts/base/chart.module.ts deleted file mode 100644 index 1d331fd6ea..0000000000 --- a/src/platform/echarts/base/chart.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { TdChartComponent } from './chart.component'; - -@NgModule({ - declarations: [ - TdChartComponent, - ], - exports: [ - TdChartComponent, - ], -}) -export class CovalentBaseEchartsModule { - -} diff --git a/src/platform/echarts/base/public-api.ts b/src/platform/echarts/base/public-api.ts index 8fafd718a4..937bdc319e 100644 --- a/src/platform/echarts/base/public-api.ts +++ b/src/platform/echarts/base/public-api.ts @@ -1,2 +1,3 @@ -export * from './chart.module'; -export { TdChartComponent } from './chart.component'; +export * from './base.module'; +export { TdBaseChartComponent } from './base.component'; +export { TdChartOptionsService, BASE_CHART_PROVIDER } from './base.service'; diff --git a/src/platform/echarts/base/tooltip/tooltip.component.html b/src/platform/echarts/base/tooltip/tooltip.component.html new file mode 100644 index 0000000000..2c51e4e0cc --- /dev/null +++ b/src/platform/echarts/base/tooltip/tooltip.component.html @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/src/platform/echarts/base/tooltip/tooltip.component.scss b/src/platform/echarts/base/tooltip/tooltip.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/platform/echarts/base/tooltip/tooltip.component.ts b/src/platform/echarts/base/tooltip/tooltip.component.ts new file mode 100644 index 0000000000..c0df0cc1ad --- /dev/null +++ b/src/platform/echarts/base/tooltip/tooltip.component.ts @@ -0,0 +1,124 @@ +import { + Component, + Input, + Directive, + TemplateRef, + ChangeDetectionStrategy, + ElementRef, + ChangeDetectorRef, + OnChanges, + ContentChild, + ViewChild, + OnInit, + OnDestroy, +} from '@angular/core'; + +import { TdChartOptionsService } from '../base.service'; + +export class TdTooltipContext { + $implicit: any; + ticket: string; +} + +@Directive({ + selector: 'ng-template[tdTooltipFormatter]', +}) +export class TdChartTooltipFormatterDirective { +} + +@Component({ + selector: 'td-chart-tooltip', + templateUrl: './tooltip.component.html', + styleUrls: ['./tooltip.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TdChartTooltipComponent implements OnChanges, OnInit, OnDestroy { + + _context: TdTooltipContext = new TdTooltipContext(); + + @Input('config') config: any = {}; + + @Input('show') show: boolean = true; + @Input('trigger') trigger: 'axis' | 'item' | 'none' = 'axis'; + @Input('axisPointer') axisPointer: any; + @Input('showContent') showContent: boolean = true; + @Input('alwaysShowContent') alwaysShowContent: boolean = false; + @Input('triggerOn') triggerOn: 'mousemove' | 'click' | 'mousemove|click' | 'none' = 'mousemove|click'; + @Input('showDelay') showDelay: number = 0; + @Input('hideDelay') hideDelay: number = 0; + @Input('enterable') enterable: boolean = false; + @Input('confine') confine: boolean = false; + @Input('transitionDuration') transitionDuration: number = 0.5; + @Input('position') position: string | string[] | number[]; + @Input('backgroundColor') backgroundColor: string = 'rgba(50,50,50,0.7)'; + @Input('borderColor') borderColor: string = '#333'; + @Input('borderWidth') borderWidth: number = 0; + @Input('padding') padding: number = 5; + @Input('textStyle') textStyle: any = { + color: '#FFF', + }; + @Input('extraCssText') extraCssText: string; + + @ContentChild(TdChartTooltipFormatterDirective, {read: TemplateRef}) formatterTemplate: TemplateRef; + @ViewChild('tooltipContent') fullTemplate: TemplateRef; + + constructor(private _changeDetectorRef: ChangeDetectorRef, + private _elementRef: ElementRef, + private _optionsService: TdChartOptionsService) { + } + + ngOnInit(): void { + this._setOptions(); + } + + ngOnChanges(): void { + this._setOptions(); + } + + ngOnDestroy(): void { + this._removeOption(); + } + + private _setOptions(): void { + let config: any = Object.assign({}, this.config ? this.config : {}, { + show: this.show, + trigger: this.trigger, + axisPointer: this.axisPointer, + showContent: this.showContent, + alwaysShowContent: this.alwaysShowContent, + triggerOn: this.triggerOn, + showDelay: this.showDelay, + hideDelay: this.hideDelay, + enterable: this.enterable, + confine: this.confine, + transitionDuration: this.transitionDuration, + position: this.position, + formatter: (params: any, ticket: any, callback: (ticket: string, html: string) => void) => { + this._context = { + $implicit: params, + ticket: ticket, + }; + // timeout set since we need to set the HTML at the end of the angular lifecycle when + // the tooltip delay is more than 0 + setTimeout(() => { + callback(ticket, (this._elementRef.nativeElement).innerHTML); + }); + this._changeDetectorRef.markForCheck(); + return (this._elementRef.nativeElement).innerHTML; + }, + backgroundColor: this.backgroundColor, + borderColor: this.borderColor, + borderWidth: this.borderWidth, + padding: this.padding, + textStyle: this.textStyle, + extraCssText: this.extraCssText, + }); + // set tooltip configuration in parent chart and render new configurations + this._optionsService.setOption('tooltip', config); + } + + private _removeOption(): void { + this._optionsService.clearOption('tooltip'); + } + +} diff --git a/src/platform/echarts/line/index.ts b/src/platform/echarts/line/index.ts new file mode 100644 index 0000000000..7e1a213e3e --- /dev/null +++ b/src/platform/echarts/line/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/src/platform/echarts/line/line.component.html b/src/platform/echarts/line/line.component.html new file mode 100644 index 0000000000..6fcd28ea87 --- /dev/null +++ b/src/platform/echarts/line/line.component.html @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/platform/echarts/line/line.component.scss b/src/platform/echarts/line/line.component.scss new file mode 100644 index 0000000000..5d4e87f30f --- /dev/null +++ b/src/platform/echarts/line/line.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/platform/echarts/line/line.component.ts b/src/platform/echarts/line/line.component.ts new file mode 100644 index 0000000000..f8e76a4d43 --- /dev/null +++ b/src/platform/echarts/line/line.component.ts @@ -0,0 +1,22 @@ +import { + Component, + Input, + ChangeDetectionStrategy, +} from '@angular/core'; + +import 'echarts/lib/chart/line'; + +import { BASE_CHART_PROVIDER } from '@covalent/echarts/base'; + +@Component({ + selector: 'td-chart-line', + templateUrl: './line.component.html', + styleUrls: ['./line.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [BASE_CHART_PROVIDER], +}) +export class TdLineChartComponent { + + @Input('data') data: any[]; + +} diff --git a/src/platform/echarts/line/line.module.ts b/src/platform/echarts/line/line.module.ts new file mode 100644 index 0000000000..96021ae1fe --- /dev/null +++ b/src/platform/echarts/line/line.module.ts @@ -0,0 +1,26 @@ +import { NgModule, Type } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; + +import { TdLineChartComponent } from './line.component'; + +export const LINE_MODULE_COMPONENTS: Type[] = [ + TdLineChartComponent, +]; + +@NgModule({ + imports: [ + CommonModule, + CovalentBaseEchartsModule, + ], + declarations: [ + LINE_MODULE_COMPONENTS, + ], + exports: [ + LINE_MODULE_COMPONENTS, + ], +}) +export class CovalentLineEchartsModule { + +} diff --git a/src/platform/echarts/line/package.json b/src/platform/echarts/line/package.json new file mode 100644 index 0000000000..dedb72ce9c --- /dev/null +++ b/src/platform/echarts/line/package.json @@ -0,0 +1,7 @@ +{ + "ngPackage": { + "lib": { + "entryFile": "index.ts" + } + } +} diff --git a/src/platform/echarts/line/public-api.ts b/src/platform/echarts/line/public-api.ts new file mode 100644 index 0000000000..86854dea78 --- /dev/null +++ b/src/platform/echarts/line/public-api.ts @@ -0,0 +1,2 @@ +export * from './line.module'; +export { TdLineChartComponent } from './line.component'; diff --git a/src/platform/echarts/public-api.ts b/src/platform/echarts/public-api.ts index ef1edcfb66..d04e1ec79a 100644 --- a/src/platform/echarts/public-api.ts +++ b/src/platform/echarts/public-api.ts @@ -1 +1,3 @@ export * from './base/index'; +export * from './bar/index'; +export * from './line/index'; diff --git a/src/platform/echarts/tsconfig.json b/src/platform/echarts/tsconfig.json index 1480a4afd8..bd196ca654 100644 --- a/src/platform/echarts/tsconfig.json +++ b/src/platform/echarts/tsconfig.json @@ -5,7 +5,7 @@ "rootDir": ".", "baseUrl": ".", "paths": { - "@covalent/core/*": ["./*"] + "@covalent/echarts/*": ["./*"] } }, "include": ["./**/*.ts"] diff --git a/src/theme.scss b/src/theme.scss index e69de29bb2..5d2cf614b3 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -0,0 +1,51 @@ +@import '~@angular/material/theming'; +@import '~@covalent/core/theming/all-theme'; +// Plus imports for other components in your app. + +// Custom typography +$custom-typography: mat-typography-config( + $button: mat-typography-level(14px, 14px, 400) +); +$custom-toolbar-typography: mat-typography-config( + $title: mat-typography-level(20px, 32px, 400) +); + +// Include the base styles for Angular Material core. We include this here so that you only +// have to load a single css file for Angular Material in your app. +@include mat-core($custom-typography); + +// Setting the toolbar to the proper spec weight +@include mat-toolbar-typography($custom-toolbar-typography); + +// Include the core styles for Covalent +@include covalent-core(); + +// Include pre-bundled material-icons +@import '~@covalent/core/common/material-icons.css'; + +// Include covalent utility classes +@include covalent-utilities(); + +// Include flex layout classes +@include covalent-layout(); + +// Include covalent color classes +@include covalent-colors(); + +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. +$primary: mat-palette($mat-blue-grey, 900, 100, 900); +$accent: mat-palette($mat-deep-orange, A700, A100, A400); + +// The warn palette is optional (defaults to red). +$warn: mat-palette($mat-red, 600); + +// Create the theme object (a Sass map containing all of the palettes). +$theme: mat-light-theme($primary, $accent, $warn); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include angular-material-theme($theme); +@include covalent-theme($theme); diff --git a/yarn.lock b/yarn.lock index b80971052a..9284541e01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -158,6 +158,14 @@ dependencies: tslib "^1.9.0" +"@angular/material@^6.4.6": + version "6.4.6" + resolved "https://registry.yarnpkg.com/@angular/material/-/material-6.4.6.tgz#30c3dd83173f42a1df28db084930f242706d323a" + dependencies: + tslib "^1.7.1" + optionalDependencies: + parse5 "^5.0.0" + "@angular/platform-browser-dynamic@6.0.2": version "6.0.2" resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.2.tgz#755689df9f02bbcb270c7872a75a2ffe7e0b0c33" @@ -184,6 +192,12 @@ dependencies: tslib "^1.9.0" +"@covalent/core@2.0.0-beta.2": + version "2.0.0-beta.2" + resolved "https://registry.yarnpkg.com/@covalent/core/-/core-2.0.0-beta.2.tgz#1059bc3e2e78a9210ccaad7a2508ecda35c88764" + dependencies: + tslib "^1.9.0" + "@covalent/tools@2.0.0-beta.2": version "2.0.0-beta.2" resolved "https://registry.yarnpkg.com/@covalent/tools/-/tools-2.0.0-beta.2.tgz#b341cc609d64e04766c8905f3f685e3bcd332f6a" @@ -6329,6 +6343,10 @@ parse5@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" +parse5@^5.0.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2" + parsejson@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab"