diff --git a/apps/docs-app/src/app/content/echarts/echarts-content.ts b/apps/docs-app/src/app/content/echarts/echarts-content.ts index 25567df95d..1de019230c 100644 --- a/apps/docs-app/src/app/content/echarts/echarts-content.ts +++ b/apps/docs-app/src/app/content/echarts/echarts-content.ts @@ -60,6 +60,20 @@ export const createEchartDetails: any = [ // demo: () => // import('./echarts-demos/combination/demos/combination-demo.module').then((mod: any) => mod.CombinationDemoModule), // }, + { + name: 'Clustering', + id: 'clustering', + description: '', + apiDocUrl: 'libs/angular-echarts/clustering/README.md', + overviewDocUrl: '', + icon: 'scatter_plot', + category: chartTypes.name, + route: '/echarts/clustering', + color: '', + demo: import( + './echarts-demos/clustering/demos/clustering-demo.module' + ).then((mod: any) => mod.ClusteringDemoModule), + }, { name: 'Graph', id: 'graph', @@ -74,6 +88,20 @@ export const createEchartDetails: any = [ (mod: any) => mod.GraphDemoModule ), }, + { + name: 'Histogram', + id: 'histogram', + description: '', + apiDocUrl: 'libs/angular-echarts/histogram/README.md', + overviewDocUrl: '', + icon: 'bar_chart_4_bars', + category: chartTypes.name, + route: '/echarts/histogram', + color: '', + demo: import('./echarts-demos/histogram/demos/histogram-demo.module').then( + (mod: any) => mod.HistogramDemoModule + ), + }, { name: 'Map', id: 'map', @@ -115,6 +143,20 @@ export const createEchartDetails: any = [ (mod: any) => mod.PieDemoModule ), }, + { + name: 'Regression', + id: 'regression', + description: '', + apiDocUrl: 'libs/angular-echarts/regression/README.md', + overviewDocUrl: '', + icon: 'trending_up', + category: chartTypes.name, + route: '/echarts/regression', + color: '', + demo: import( + './echarts-demos/regression/demos/regression-demo.module' + ).then((mod: any) => mod.RegressionDemoModule), + }, { name: 'Sankey', id: 'sankey', diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/clustering.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/clustering.module.ts new file mode 100644 index 0000000000..bad521257e --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/clustering.module.ts @@ -0,0 +1,47 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule, Routes } from '@angular/router'; + +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; + +import { ComponentDetailsModule } from '../../../../components/shared/component-details/component-details.module'; + +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentClusteringEchartsModule } from '@covalent/echarts/clustering'; +import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip'; +import { CovalentToolboxEchartsModule } from '@covalent/echarts/toolbox'; +import { setEchartRoutes } from '../../echarts-content'; +import { DocumentationToolsModule } from '../../../../documentation-tools'; +import { ClusteringBasicSharedModule } from './demos/clustering-demo-basic/clustering-demo-basic.shared'; +import { ClusteringDemoBasicComponent } from './demos/clustering-demo-basic/clustering-demo-basic.component'; + +const routes: Routes = setEchartRoutes({ + overviewDemoComponent: ClusteringDemoBasicComponent, + id: 'clustering', +}); + +@NgModule({ + imports: [ + ClusteringBasicSharedModule, + CommonModule, + // Material + MatSelectModule, + MatIconModule, + MatSlideToggleModule, + // Covalent Echarts + CovalentBaseEchartsModule, + CovalentClusteringEchartsModule, + CovalentTooltipEchartsModule, + CovalentToolboxEchartsModule, + // Docs + ComponentDetailsModule, + DocumentationToolsModule, + // Routes + RouterModule.forChild(routes), + ], + exports: [], + providers: [], +}) +export class ClusteringModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.html b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.html new file mode 100644 index 0000000000..3f11c335f0 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.html @@ -0,0 +1,125 @@ +
+
+ Chart Theme: +
+ + + + {{ theme }} + + + +
+ Show centroids: +
+ +
+ + + + + + +
+ + people + + + {{ params.seriesName ? params.seriesName : params.name }}: + {{ params.value }} + +
+ + + + + + + diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.scss b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.scss new file mode 100644 index 0000000000..b9bc65ea45 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.scss @@ -0,0 +1,3 @@ +:host { + width: 100%; +} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.ts new file mode 100644 index 0000000000..191db54f9e --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.ts @@ -0,0 +1,34 @@ +import { + Component, + ChangeDetectionStrategy, + OnInit, + ChangeDetectorRef, +} from '@angular/core'; +import { getThemes } from '@covalent/echarts/base'; +import { ChartThemeSelectorService } from '../../../../../../utilities/chart-theme'; + +@Component({ + selector: 'clustering-demo-basic', + styleUrls: ['./clustering-demo-basic.component.scss'], + templateUrl: './clustering-demo-basic.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ClusteringDemoBasicComponent implements OnInit { + themes: string[] = getThemes(); + selectedTheme!: string; + showCentroids = false; + + constructor( + private _cdr: ChangeDetectorRef, + public themeSelector: ChartThemeSelectorService + ) {} + + async ngOnInit(): Promise { + this.selectedTheme = this.themeSelector.selected; + this._cdr.markForCheck(); + } + + selectChartTheme(theme: string): void { + this.themeSelector.select(theme); + } +} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.shared.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.shared.ts new file mode 100644 index 0000000000..8620fc55fb --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.shared.ts @@ -0,0 +1,33 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; + +import { CovalentCommonModule } from '@covalent/core/common'; +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentClusteringEchartsModule } from '@covalent/echarts/clustering'; +import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip'; +import { CovalentToolboxEchartsModule } from '@covalent/echarts/toolbox'; +import { ClusteringDemoBasicComponent } from './clustering-demo-basic.component'; + +@NgModule({ + declarations: [ClusteringDemoBasicComponent], + imports: [ + /** Covalent Modules */ + CovalentBaseEchartsModule, + CovalentClusteringEchartsModule, + CovalentCommonModule, + CovalentTooltipEchartsModule, + CovalentToolboxEchartsModule, + /** Angular Modules */ + CommonModule, + // Material + MatSelectModule, + MatIconModule, + MatSlideToggleModule, + ], + exports: [ClusteringDemoBasicComponent], +}) +export class ClusteringBasicSharedModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-routing.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-routing.module.ts new file mode 100644 index 0000000000..6cfb85f375 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ClusteringDemoComponent } from './clustering-demo.component'; + +const routes: Routes = [ + { + path: '', + component: ClusteringDemoComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ClusteringDemoRoutingModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.html b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.html new file mode 100644 index 0000000000..3136115319 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.html @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.scss b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.ts new file mode 100644 index 0000000000..0a26c9dda7 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'clustering-demo', + styleUrls: ['./clustering-demo.component.scss'], + templateUrl: './clustering-demo.component.html', +}) +export class ClusteringDemoComponent {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.module.ts new file mode 100644 index 0000000000..fcd68f8d14 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.module.ts @@ -0,0 +1,37 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; + +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentClusteringEchartsModule } from '@covalent/echarts/clustering'; +import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip'; +import { CovalentToolboxEchartsModule } from '@covalent/echarts/toolbox'; +import { ClusteringBasicSharedModule } from './clustering-demo-basic/clustering-demo-basic.shared'; + +import { ClusteringDemoComponent } from './clustering-demo.component'; +import { ClusteringDemoRoutingModule } from './clustering-demo-routing.module'; +import { DemoModule } from '../../../../../components/shared/demo-tools/demo.module'; + +@NgModule({ + declarations: [ClusteringDemoComponent], + imports: [ + ClusteringBasicSharedModule, + DemoModule, + ClusteringDemoRoutingModule, + /** Covalent Modules */ + CovalentBaseEchartsModule, + CovalentClusteringEchartsModule, + CovalentTooltipEchartsModule, + CovalentToolboxEchartsModule, + /** Angular Modules */ + CommonModule, + // Material + MatSelectModule, + MatIconModule, + MatSlideToggleModule, + ], +}) +export class ClusteringDemoModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.html b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.html new file mode 100644 index 0000000000..b1b55dd269 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.html @@ -0,0 +1,119 @@ +
+
+ Chart Theme: +
+ + + + {{ theme }} + + + +
+ Binning method: +
+ + + + {{ method }} + + + +
+ + + + + + + +
+ + people + + + {{ params.seriesName ? params.seriesName : params.name }}: + {{ params.value }} + +
+ + + + + + + + diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.scss b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.scss new file mode 100644 index 0000000000..b9bc65ea45 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.scss @@ -0,0 +1,3 @@ +:host { + width: 100%; +} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.ts new file mode 100644 index 0000000000..ea1b9f7d39 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.component.ts @@ -0,0 +1,36 @@ +import { + Component, + ChangeDetectionStrategy, + OnInit, + ChangeDetectorRef, +} from '@angular/core'; +import { getThemes } from '@covalent/echarts/base'; +import { TdHistogramBinningMethod } from '@covalent/echarts/histogram'; +import { ChartThemeSelectorService } from '../../../../../../utilities/chart-theme'; + +@Component({ + selector: 'histogram-demo-basic', + styleUrls: ['./histogram-demo-basic.component.scss'], + templateUrl: './histogram-demo-basic.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class HistogramDemoBasicComponent implements OnInit { + themes: string[] = getThemes(); + selectedTheme!: string; + methods: string[] = ['squareRoot', 'scott', 'freedmanDiaconis', 'sturges']; + selectedMethod: TdHistogramBinningMethod = 'squareRoot'; + + constructor( + private _cdr: ChangeDetectorRef, + public themeSelector: ChartThemeSelectorService + ) {} + + async ngOnInit(): Promise { + this.selectedTheme = this.themeSelector.selected; + this._cdr.markForCheck(); + } + + selectChartTheme(theme: string): void { + this.themeSelector.select(theme); + } +} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.shared.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.shared.ts new file mode 100644 index 0000000000..65c931e28e --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-basic/histogram-demo-basic.shared.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; + +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentBarEchartsModule } from '@covalent/echarts/bar'; +import { CovalentHistogramEchartsModule } from '@covalent/echarts/histogram'; +import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip'; +import { CovalentToolboxEchartsModule } from '@covalent/echarts/toolbox'; +import { HistogramDemoBasicComponent } from './histogram-demo-basic.component'; + +@NgModule({ + declarations: [HistogramDemoBasicComponent], + imports: [ + /** Covalent Modules */ + CovalentBaseEchartsModule, + CovalentBarEchartsModule, + CovalentTooltipEchartsModule, + CovalentToolboxEchartsModule, + /** Angular Modules */ + CommonModule, + // Material + MatSelectModule, + MatIconModule, + CovalentHistogramEchartsModule, + ], + exports: [HistogramDemoBasicComponent], +}) +export class HistogramBasicSharedModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-routing.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-routing.module.ts new file mode 100644 index 0000000000..83957b6fd1 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { HistogramDemoComponent } from './histogram-demo.component'; + +const routes: Routes = [ + { + path: '', + component: HistogramDemoComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class HistogramDemoRoutingModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.component.html b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.component.html new file mode 100644 index 0000000000..1f99e63842 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.component.html @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.component.scss b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.component.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.component.ts new file mode 100644 index 0000000000..bd5a13505b --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'histogram-demo', + styleUrls: ['./histogram-demo.component.scss'], + templateUrl: './histogram-demo.component.html', +}) +export class HistogramDemoComponent {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.module.ts new file mode 100644 index 0000000000..37ffdb32cb --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/demos/histogram-demo.module.ts @@ -0,0 +1,39 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; + +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentLineEchartsModule } from '@covalent/echarts/line'; +import { CovalentBarEchartsModule } from '@covalent/echarts/bar'; +import { CovalentHistogramEchartsModule } from '@covalent/echarts/histogram'; +import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip'; +import { CovalentToolboxEchartsModule } from '@covalent/echarts/toolbox'; +import { HistogramBasicSharedModule } from './histogram-demo-basic/histogram-demo-basic.shared'; + +import { HistogramDemoComponent } from './histogram-demo.component'; +import { HistogramDemoRoutingModule } from './histogram-demo-routing.module'; +import { DemoModule } from '../../../../../components/shared/demo-tools/demo.module'; + +@NgModule({ + declarations: [HistogramDemoComponent], + imports: [ + HistogramBasicSharedModule, + DemoModule, + HistogramDemoRoutingModule, + /** Covalent Modules */ + CovalentBaseEchartsModule, + CovalentLineEchartsModule, + CovalentBarEchartsModule, + CovalentHistogramEchartsModule, + CovalentTooltipEchartsModule, + CovalentToolboxEchartsModule, + /** Angular Modules */ + CommonModule, + // Material + MatSelectModule, + MatIconModule, + ], +}) +export class HistogramDemoModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/histogram.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/histogram.module.ts new file mode 100644 index 0000000000..66b26e131e --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/histogram/histogram.module.ts @@ -0,0 +1,49 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule, Routes } from '@angular/router'; + +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; + +import { ComponentDetailsModule } from '../../../../components/shared/component-details/component-details.module'; + +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentLineEchartsModule } from '@covalent/echarts/line'; +import { CovalentBarEchartsModule } from '@covalent/echarts/bar'; +import { CovalentHistogramEchartsModule } from '@covalent/echarts/histogram'; +import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip'; +import { CovalentToolboxEchartsModule } from '@covalent/echarts/toolbox'; +import { setEchartRoutes } from '../../echarts-content'; +import { DocumentationToolsModule } from '../../../../documentation-tools'; +import { HistogramBasicSharedModule } from './demos/histogram-demo-basic/histogram-demo-basic.shared'; +import { HistogramDemoBasicComponent } from './demos/histogram-demo-basic/histogram-demo-basic.component'; + +const routes: Routes = setEchartRoutes({ + overviewDemoComponent: HistogramDemoBasicComponent, + id: 'histogram', +}); + +@NgModule({ + imports: [ + HistogramBasicSharedModule, + CommonModule, + // Material + MatSelectModule, + MatIconModule, + // Covalent Echarts + CovalentBaseEchartsModule, + CovalentLineEchartsModule, + CovalentBarEchartsModule, + CovalentHistogramEchartsModule, + CovalentTooltipEchartsModule, + CovalentToolboxEchartsModule, + // Docs + ComponentDetailsModule, + DocumentationToolsModule, + // Routes + RouterModule.forChild(routes), + ], + exports: [], + providers: [], +}) +export class HistogramModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.html b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.html new file mode 100644 index 0000000000..1db59d3f27 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.html @@ -0,0 +1,258 @@ +
+
+ Chart Theme: +
+ + + + {{ theme }} + + + +
+ Regression type: +
+ + + + {{ type }} + + + +
+ + + + +
+ person + + {{ params.seriesName + ': ' + params.value[1] }} + +
+ + + + + + + diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.scss b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.scss new file mode 100644 index 0000000000..b9bc65ea45 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.scss @@ -0,0 +1,3 @@ +:host { + width: 100%; +} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.ts new file mode 100644 index 0000000000..5b15852f19 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.component.ts @@ -0,0 +1,36 @@ +import { + Component, + ChangeDetectionStrategy, + OnInit, + ChangeDetectorRef, +} from '@angular/core'; +import { getThemes } from '@covalent/echarts/base'; +import { TdRegressionType } from '@covalent/echarts/regression'; +import { ChartThemeSelectorService } from '../../../../../../utilities/chart-theme'; + +@Component({ + selector: 'regression-demo-basic', + styleUrls: ['./regression-demo-basic.component.scss'], + templateUrl: './regression-demo-basic.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class RegressionDemoBasicComponent implements OnInit { + themes: string[] = getThemes(); + selectedTheme!: string; + regressionTypes = ['linear', 'exponential', 'logarithmic', 'polynomial']; + selectedRegressionType: TdRegressionType = 'linear'; + + constructor( + private _cdr: ChangeDetectorRef, + public themeSelector: ChartThemeSelectorService + ) {} + + async ngOnInit(): Promise { + this.selectedTheme = this.themeSelector.selected; + this._cdr.markForCheck(); + } + + selectChartTheme(theme: string): void { + this.themeSelector.select(theme); + } +} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.shared.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.shared.ts new file mode 100644 index 0000000000..742fccb827 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-basic/regression-demo-basic.shared.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; + +import { CovalentCommonModule } from '@covalent/core/common'; +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentRegressionEchartsModule } from '@covalent/echarts/regression'; +import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip'; +import { CovalentToolboxEchartsModule } from '@covalent/echarts/toolbox'; +import { RegressionDemoBasicComponent } from './regression-demo-basic.component'; + +@NgModule({ + declarations: [RegressionDemoBasicComponent], + imports: [ + /** Covalent Modules */ + CovalentBaseEchartsModule, + CovalentRegressionEchartsModule, + CovalentCommonModule, + CovalentTooltipEchartsModule, + CovalentToolboxEchartsModule, + /** Angular Modules */ + CommonModule, + // Material + MatSelectModule, + MatIconModule, + ], + exports: [RegressionDemoBasicComponent], +}) +export class RegressionBasicSharedModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-routing.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-routing.module.ts new file mode 100644 index 0000000000..ecf7f8a362 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { RegressionDemoComponent } from './regression-demo.component'; + +const routes: Routes = [ + { + path: '', + component: RegressionDemoComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class RegressionDemoRoutingModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.component.html b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.component.html new file mode 100644 index 0000000000..57d0c3c8e3 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.component.html @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.component.scss b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.component.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.component.ts new file mode 100644 index 0000000000..569911893b --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'regression-demo', + styleUrls: ['./regression-demo.component.scss'], + templateUrl: './regression-demo.component.html', +}) +export class RegressionDemoComponent {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.module.ts new file mode 100644 index 0000000000..882423cbd6 --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/demos/regression-demo.module.ts @@ -0,0 +1,35 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; + +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentRegressionEchartsModule } from '@covalent/echarts/regression'; +import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip'; +import { CovalentToolboxEchartsModule } from '@covalent/echarts/toolbox'; +import { RegressionBasicSharedModule } from './regression-demo-basic/regression-demo-basic.shared'; + +import { RegressionDemoComponent } from './regression-demo.component'; +import { RegressionDemoRoutingModule } from './regression-demo-routing.module'; +import { DemoModule } from '../../../../../components/shared/demo-tools/demo.module'; + +@NgModule({ + declarations: [RegressionDemoComponent], + imports: [ + RegressionBasicSharedModule, + DemoModule, + RegressionDemoRoutingModule, + /** Covalent Modules */ + CovalentBaseEchartsModule, + CovalentRegressionEchartsModule, + CovalentTooltipEchartsModule, + CovalentToolboxEchartsModule, + /** Angular Modules */ + CommonModule, + // Material + MatSelectModule, + MatIconModule, + ], +}) +export class RegressionDemoModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts-demos/regression/regression.module.ts b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/regression.module.ts new file mode 100644 index 0000000000..c4636988df --- /dev/null +++ b/apps/docs-app/src/app/content/echarts/echarts-demos/regression/regression.module.ts @@ -0,0 +1,29 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule, Routes } from '@angular/router'; + +import { ComponentDetailsModule } from '../../../../components/shared/component-details/component-details.module'; +import { setEchartRoutes } from '../../echarts-content'; +import { DocumentationToolsModule } from '../../../../documentation-tools'; +import { RegressionBasicSharedModule } from './demos/regression-demo-basic/regression-demo-basic.shared'; +import { RegressionDemoBasicComponent } from './demos/regression-demo-basic/regression-demo-basic.component'; + +const routes: Routes = setEchartRoutes({ + overviewDemoComponent: RegressionDemoBasicComponent, + id: 'regression', +}); + +@NgModule({ + imports: [ + RegressionBasicSharedModule, + CommonModule, + // Docs + ComponentDetailsModule, + DocumentationToolsModule, + // Routes + RouterModule.forChild(routes), + ], + exports: [], + providers: [], +}) +export class RegressionModule {} diff --git a/apps/docs-app/src/app/content/echarts/echarts.routes.ts b/apps/docs-app/src/app/content/echarts/echarts.routes.ts index ed74afd24c..65a67daa94 100644 --- a/apps/docs-app/src/app/content/echarts/echarts.routes.ts +++ b/apps/docs-app/src/app/content/echarts/echarts.routes.ts @@ -36,6 +36,13 @@ const routes: Routes = [ (m: any) => m.BarModule ), }, + { + path: 'clustering', + loadChildren: () => + import('./echarts-demos/clustering/clustering.module').then( + (m: any) => m.ClusteringModule + ), + }, { path: 'graph', loadChildren: () => @@ -43,6 +50,13 @@ const routes: Routes = [ (m: any) => m.GraphModule ), }, + { + path: 'histogram', + loadChildren: () => + import('./echarts-demos/histogram/histogram.module').then( + (m: any) => m.HistogramModule + ), + }, { path: 'line', loadChildren: () => @@ -64,6 +78,13 @@ const routes: Routes = [ (m: any) => m.PieModule ), }, + { + path: 'regression', + loadChildren: () => + import('./echarts-demos/regression/regression.module').then( + (m: any) => m.RegressionModule + ), + }, { path: 'sankey', loadChildren: () => diff --git a/libs/angular-echarts/clustering/README.md b/libs/angular-echarts/clustering/README.md new file mode 100644 index 0000000000..0f58c140ba --- /dev/null +++ b/libs/angular-echarts/clustering/README.md @@ -0,0 +1,124 @@ +# td-chart-series[td-clustering] + +`td-chart-series[td-clustering]` element generates a clustered scatter series echarts visualization inside a `td-chart`. + +## API Summary + +#### Inputs + +- id?: string + - It can be used to refer the component in option or API. +- name?: string + - Series name used for displaying in tooltip and filtering with legend. +- color?: any + - Global color for the series. +- clusterCount: number + - The number of clusters generated. Note that it must be greater than 1. +- showCentroids?: boolean + - Shows or hides the cluster centroids marks (default: false). +- data?: any[] + - Data array of series. + +And so many more... for more info [click here](https://github.com/ecomfe/echarts-stat) + +## Setup + +Import the [CovalentClusteringEchartsModule] in your NgModule: + +```typescript +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentClusteringEchartsModule } from '@covalent/echarts/clustering'; +@NgModule({ + imports: [ + CovalentBaseEchartsModule, + CovalentClusteringEchartsModule, + ... + ], + ... +}) +export class MyModule {} +``` + +## Usage + +Basic Example: + +```html + + + + + + +``` diff --git a/libs/angular-echarts/clustering/ng-package.json b/libs/angular-echarts/clustering/ng-package.json new file mode 100644 index 0000000000..df823bb29a --- /dev/null +++ b/libs/angular-echarts/clustering/ng-package.json @@ -0,0 +1,3 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json" +} diff --git a/libs/angular-echarts/clustering/src/clustering.component.ts b/libs/angular-echarts/clustering/src/clustering.component.ts new file mode 100644 index 0000000000..3b76e86c7b --- /dev/null +++ b/libs/angular-echarts/clustering/src/clustering.component.ts @@ -0,0 +1,273 @@ +import { + Component, + Input, + ChangeDetectionStrategy, + forwardRef, + OnChanges, +} from '@angular/core'; + +import { + assignDefined, + ITdEdgeLabel, + ITdEmphasis, + ITdItemStyle, + ITdLabel, + ITdLineStyle, + ITdMarkArea, + ITdMarkLine, + ITdMarkPoint, + ITdSeries, + TdChartOptionsService, + TdCoordinateSystem, + TdMarkPointSymbol, + TdSeriesDirective, +} from '@covalent/echarts/base'; +import * as ecStat from 'echarts-stat'; + +export interface ITdClusteringSeries extends ITdSeries { + clusterCount: number; + showCentroids: boolean; + animation?: boolean; + animationDelay?: number | Function; + animationDelayUpdate?: number | Function; + animationDuration?: number | Function; + animationDurationUpdate?: number | Function; + animationEasing?: string; + animationEasingUpdate?: string; + animationThreshold?: number; + bottom?: string | number; + calendarIndex?: number; + circular?: object; + coordinateSystem?: TdCoordinateSystem; + cursor?: string; + edgeLabel?: ITdEdgeLabel; + edges?: any[]; + edgeSymbol?: any[] | string; + edgeSymbolSize?: number; + emphasis?: ITdEmphasis; + focusNodeAdjacency?: boolean; + geoIndex?: number; + height?: string | number; + hoverAnimation?: boolean; + itemStyle?: ITdItemStyle; + label?: ITdLabel; + left?: string | number; + legendHoverLink?: boolean; + lineStyle?: ITdLineStyle; + links?: any[]; + markArea?: ITdMarkArea; + markLine?: ITdMarkLine; + markPoint?: ITdMarkPoint; + nodes?: any[]; + nodeScaleRatio?: boolean; + polarIndex?: number; + right?: string | number; + silent?: boolean; + symbol?: TdMarkPointSymbol | string; + symbolKeepAspect?: boolean; + symbolOffset?: any[]; + symbolRotate?: number; + symbolSize?: number | any[] | Function; + top?: string | number; + width?: string | number; + xAxisIndex?: number; + yAxisIndex?: number; + z?: number; + zlevel?: number; +} + +@Component({ + selector: 'td-chart-series[td-clustering]', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + inputs: [ + 'config', + 'id', + 'name', + 'color', + 'data', + + 'animation', + 'animationThreshold', + 'animationDuration', + 'animationEasing', + 'animationDelay', + 'animationDurationUpdate', + 'animationEasingUpdate', + 'animationDelayUpdate', + 'tooltip', + ], + providers: [ + { + provide: TdSeriesDirective, + useExisting: forwardRef(() => TdChartSeriesClusteringComponent), + }, + ], +}) +export class TdChartSeriesClusteringComponent + extends TdSeriesDirective + implements ITdClusteringSeries, OnChanges +{ + @Input() clusterCount!: number; + @Input() showCentroids!: boolean; + @Input() bottom?: string | number; + @Input() calendarIndex?: number; + @Input() circular?: object; + @Input() coordinateSystem?: TdCoordinateSystem; + @Input() cursor?: string; + @Input() edgeLabel?: ITdEdgeLabel; + @Input() edges?: any[]; + @Input() edgeSymbol?: any[] | string; + @Input() edgeSymbolSize?: number; + @Input() emphasis?: ITdEmphasis; + @Input() focusNodeAdjacency?: boolean; + @Input() geoIndex?: number; + @Input() height?: string | number; + @Input() hoverAnimation?: boolean; + @Input() itemStyle?: ITdItemStyle; + @Input() label?: ITdLabel; + @Input() left?: string | number; + @Input() legendHoverLink?: boolean; + @Input() lineStyle?: ITdLineStyle; + @Input() links?: any[]; + @Input() markArea?: ITdMarkArea; + @Input() markLine?: ITdMarkLine; + @Input() markPoint?: ITdMarkPoint; + @Input() nodes?: any[]; + @Input() nodeScaleRatio?: boolean; + @Input() polarIndex?: number; + @Input() right?: string | number; + @Input() silent?: boolean; + @Input() symbol?: TdMarkPointSymbol | string; + @Input() symbolKeepAspect?: boolean; + @Input() symbolOffset?: any[]; + @Input() symbolRotate?: number; + @Input() symbolSize?: number | any[] | Function; + @Input() top?: string | number; + @Input() width?: string | number; + @Input() xAxisIndex?: number; + @Input() yAxisIndex?: number; + @Input() z?: number; + @Input() zlevel?: number; + originalData: any; + + constructor(_optionsService: TdChartOptionsService) { + super('scatter', _optionsService); + } + + override ngOnChanges(): void { + if (this.originalData) { + this.data = this.originalData; + } else { + this.originalData = this.data; + } + const output: any = this.data; + const result = ecStat.clustering.hierarchicalKMeans( + output, + this.clusterCount, + false + ); + const series = []; + + for (let i = 0; i < result.centroids.length; i++) { + series.push({ + name: `cluster ${i + 1}`, + type: 'scatter', + data: result.pointsInCluster[i], + markPoint: this.showCentroids + ? { + symbolSize: 30, + itemStyle: { + normal: { + opacity: 0.8, + }, + }, + data: [ + { + coord: result.centroids[i], + label: { show: false }, + name: `centroid ${i + 1}`, + value: result.centroids[i], + }, + ], + } + : {}, + }); + } + this.optionsService.setOption('series', series); + this.data = []; + this.setOptions(); + } + + override getConfig(): any { + return { + clusterCount: this.clusterCount, + showCentroids: this.showCentroids, + bottom: this.bottom, + calendarIndex: this.calendarIndex, + circular: this.circular, + coordinateSystem: this.coordinateSystem, + cursor: this.cursor, + edgeLabel: this.edgeLabel, + edges: this.edges, + edgeSymbol: this.edgeSymbol, + edgeSymbolSize: this.edgeSymbolSize, + emphasis: this.emphasis, + focusNodeAdjacency: this.focusNodeAdjacency, + geoIndex: this.geoIndex, + height: this.height, + hoverAnimation: this.hoverAnimation, + itemStyle: this.itemStyle, + label: this.label, + left: this.left, + legendHoverLink: this.legendHoverLink, + lineStyle: this.lineStyle, + links: this.links, + markArea: this.markArea, + markLine: this.markLine, + markPoint: this.markPoint, + nodes: this.nodes, + nodeScaleRatio: this.nodeScaleRatio, + polarIndex: this.polarIndex, + right: this.right, + silent: this.silent, + symbol: this.symbol, + symbolKeepAspect: this.symbolKeepAspect, + symbolOffset: this.symbolOffset, + symbolRotate: this.symbolRotate, + symbolSize: this.symbolSize, + top: this.top, + width: this.width, + xAxisIndex: this.xAxisIndex, + yAxisIndex: this.yAxisIndex, + z: this.z, + zlevel: this.zlevel, + }; + } + + private setOptions(): void { + const config: any = assignDefined( + this._state, + { + id: this.id, + type: this.type, + name: this.name, + color: this.color, + data: this.data, + animation: this.animation, + animationThreshold: this.animationThreshold, + animationDuration: this.animationDuration, + animationEasing: this.animationEasing, + animationDelay: this.animationDelay, + animationDurationUpdate: this.animationDurationUpdate, + animationEasingUpdate: this.animationEasingUpdate, + animationDelayUpdate: this.animationDelayUpdate, + tooltip: this.tooltip, + }, + this.getConfig(), + this._options, + this.config ? this.config : {} + ); + this.optionsService.setArrayOption('scatter', config); + } +} diff --git a/libs/angular-echarts/clustering/src/clustering.module.ts b/libs/angular-echarts/clustering/src/clustering.module.ts new file mode 100644 index 0000000000..2b43c237a5 --- /dev/null +++ b/libs/angular-echarts/clustering/src/clustering.module.ts @@ -0,0 +1,15 @@ +import { NgModule, Type } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { TdChartSeriesClusteringComponent } from './clustering.component'; + +export const CLUSTERING_MODULE_COMPONENTS: Type[] = [ + TdChartSeriesClusteringComponent, +]; + +@NgModule({ + imports: [CommonModule], + declarations: [CLUSTERING_MODULE_COMPONENTS], + exports: [CLUSTERING_MODULE_COMPONENTS], +}) +export class CovalentClusteringEchartsModule {} diff --git a/libs/angular-echarts/clustering/src/public_api.ts b/libs/angular-echarts/clustering/src/public_api.ts new file mode 100644 index 0000000000..6c35a17469 --- /dev/null +++ b/libs/angular-echarts/clustering/src/public_api.ts @@ -0,0 +1,2 @@ +export * from './clustering.module'; +export * from './clustering.component'; diff --git a/libs/angular-echarts/histogram/README.md b/libs/angular-echarts/histogram/README.md new file mode 100644 index 0000000000..ead924fa53 --- /dev/null +++ b/libs/angular-echarts/histogram/README.md @@ -0,0 +1,65 @@ +# td-chart-series[td-histogram] + +`td-chart-series[td-histogram]` element generates a graph series echarts visualization inside a `td-chart`. Its the equivalent of creating a JS series object `type="bar"` in echarts, but binning the data. + +## API Summary + +#### Inputs + +- id?: string + - It can be used to refer the component in option or API. +- name?: string + - Series name used for displaying in tooltip and filtering with legend. +- color?: any + - Global color for the series. +- method?: 'squareRoot' | 'scott' | 'freedmanDiaconis' | 'sturges' + - Methods to calculate the number of bins (default value 'squareRoot'). +- source?: any[] | any[][] + - Data array of series (can be multi-dimensional). + +And so many more... for more info [click here](https://github.com/ecomfe/echarts-stat) + +## Setup + +Import the [CovalentHistogramEchartsModule] in your NgModule: + +```typescript +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentHistogramEchartsModule } from '@covalent/echarts/histogram'; +@NgModule({ + imports: [ + CovalentBaseEchartsModule, + CovalentHistogramEchartsModule, + ... + ], + ... +}) +export class MyModule {} +``` + +## Usage + +Basic Example: + +```html + + + + + + +``` diff --git a/libs/angular-echarts/histogram/ng-package.json b/libs/angular-echarts/histogram/ng-package.json new file mode 100644 index 0000000000..df823bb29a --- /dev/null +++ b/libs/angular-echarts/histogram/ng-package.json @@ -0,0 +1,3 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json" +} diff --git a/libs/angular-echarts/histogram/src/histogram.component.ts b/libs/angular-echarts/histogram/src/histogram.component.ts new file mode 100644 index 0000000000..cb33598fc3 --- /dev/null +++ b/libs/angular-echarts/histogram/src/histogram.component.ts @@ -0,0 +1,150 @@ +import { + Component, + Input, + ChangeDetectionStrategy, + forwardRef, + OnChanges, +} from '@angular/core'; + +import { + assignDefined, + TdChartOptionsService, + TdSeriesDirective, +} from '@covalent/echarts/base'; +import { ITdBarSeries, TdChartSeriesBarComponent } from '@covalent/echarts/bar'; +import * as ecStat from 'echarts-stat'; + +export type TdHistogramBinningMethod = + | 'squareRoot' + | 'scott' + | 'freedmanDiaconis' + | 'sturges'; + +export interface ITdHistogramSeries extends ITdBarSeries { + data?: number[] | number[][]; + method?: TdHistogramBinningMethod; +} + +@Component({ + selector: 'td-chart-series[td-histogram]', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + inputs: [ + 'config', + 'id', + 'name', + 'color', + 'data', + + 'animation', + 'animationThreshold', + 'animationDuration', + 'animationEasing', + 'animationDelay', + 'animationDurationUpdate', + 'animationEasingUpdate', + 'animationDelayUpdate', + 'tooltip', + ], + providers: [ + { + provide: TdSeriesDirective, + useExisting: forwardRef(() => TdChartSeriesHistogramComponent), + }, + ], +}) +export class TdChartSeriesHistogramComponent + extends TdChartSeriesBarComponent + implements ITdHistogramSeries, OnChanges +{ + @Input() source?: number[] | number[][]; + @Input() method?: TdHistogramBinningMethod; + + constructor(_optionsService: TdChartOptionsService) { + super(_optionsService); + } + + override ngOnChanges(): void { + let output: any = []; + if (!this.source) { + const dataset: any = this.optionsService.getOption('dataset'); + this.source = dataset?.source ?? []; + } + + if (this.source?.some((item) => Array.isArray(item))) { + const config = this.getConfig(); + const index = config.datasetIndex ?? 1; + const source: any[] = this.source; + const indexedOutput = source[0].map((_: any, colIndex: string | number) => + source.map((row) => row[colIndex]) + ); + output = indexedOutput[index - 1] ?? []; + } else { + output = this.source; + } + + const bins = ecStat.histogram(output, this.method ?? 'squareRoot'); + this.data = bins.data; + this.setOptions(); + } + + override getConfig(): any { + return { + method: this.method, + coordinateSystem: this.coordinateSystem, + xAxisIndex: this.xAxisIndex, + yAxisIndex: this.yAxisIndex, + legendHoverLink: this.legendHoverLink, + stack: this.stack, + cursor: this.cursor, + label: this.label, + itemStyle: this.itemStyle, + emphasis: this.emphasis, + barWidth: this.barWidth, + barMaxWidth: this.barMaxWidth, + barMinHeight: this.barMinHeight, + barGap: this.barGap, + barCategoryGap: this.barCategoryGap, + large: this.large, + largeThreshold: this.largeThreshold, + progressive: this.progressive, + progressiveThreshold: this.progressiveThreshold, + progressiveChunkMode: this.progressiveChunkMode, + dimensions: this.dimensions, + encode: this.encode, + seriesLayoutBy: this.seriesLayoutBy, + datasetIndex: this.datasetIndex, + markPoint: this.markPoint, + markLine: this.markLine, + markArea: this.markArea, + zlevel: this.zlevel, + z: this.z, + }; + } + + private setOptions(): void { + const config: any = assignDefined( + this._state, + { + id: this.id, + type: this.type, + name: this.name, + color: this.color, + data: this.data, + animation: this.animation, + animationThreshold: this.animationThreshold, + animationDuration: this.animationDuration, + animationEasing: this.animationEasing, + animationDelay: this.animationDelay, + animationDurationUpdate: this.animationDurationUpdate, + animationEasingUpdate: this.animationEasingUpdate, + animationDelayUpdate: this.animationDelayUpdate, + tooltip: this.tooltip, + }, + this.getConfig(), + this._options, + this.config ? this.config : {} + ); + this.optionsService.setArrayOption('series', config); + } +} diff --git a/libs/angular-echarts/histogram/src/histogram.module.ts b/libs/angular-echarts/histogram/src/histogram.module.ts new file mode 100644 index 0000000000..08fa394d61 --- /dev/null +++ b/libs/angular-echarts/histogram/src/histogram.module.ts @@ -0,0 +1,15 @@ +import { NgModule, Type } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { TdChartSeriesHistogramComponent } from './histogram.component'; + +export const HISTOGRAM_MODULE_COMPONENTS: Type[] = [ + TdChartSeriesHistogramComponent, +]; + +@NgModule({ + imports: [CommonModule], + declarations: [HISTOGRAM_MODULE_COMPONENTS], + exports: [HISTOGRAM_MODULE_COMPONENTS], +}) +export class CovalentHistogramEchartsModule {} diff --git a/libs/angular-echarts/histogram/src/public_api.ts b/libs/angular-echarts/histogram/src/public_api.ts new file mode 100644 index 0000000000..b2050fee53 --- /dev/null +++ b/libs/angular-echarts/histogram/src/public_api.ts @@ -0,0 +1,2 @@ +export * from './histogram.module'; +export * from './histogram.component'; diff --git a/libs/angular-echarts/package.json b/libs/angular-echarts/package.json index 1761193b24..bab2f54f72 100644 --- a/libs/angular-echarts/package.json +++ b/libs/angular-echarts/package.json @@ -22,6 +22,7 @@ "@angular/common": "0.0.0-NG", "@angular/core": "0.0.0-NG", "echarts": "0.0.0-ECHARTS", + "echarts-stat": "0.0.0-ECHARTS-STAT", "echarts-wordcloud": "0.0.0-WORDCLOUD" }, "dependencies": { diff --git a/libs/angular-echarts/regression/README.md b/libs/angular-echarts/regression/README.md new file mode 100644 index 0000000000..afc86d792b --- /dev/null +++ b/libs/angular-echarts/regression/README.md @@ -0,0 +1,74 @@ +# td-chart-series[td-regression] + +`td-chart-series[td-regression]` element generates a regression series echarts visualization inside a `td-chart`. + +## API Summary + +#### Inputs + +- id?: string + - It can be used to refer the component in option or API. +- name?: string + - Series name used for displaying in tooltip and filtering with legend. +- color?: any + - Global color for the series. +- regressionType?: 'linear' | 'exponential' | 'logarithmic' | 'polynomial' + - There are four types of regression (default value 'linear'). +- polinomialOrder?: number + - The order of polynomial regression type. Ignored for other types (default value 2). +- data?: any[] + - Data array of series. + +And so many more... for more info [click here](https://github.com/ecomfe/echarts-stat) + +## Setup + +Import the [CovalentRegressionEchartsModule] in your NgModule: + +```typescript +import { CovalentBaseEchartsModule } from '@covalent/echarts/base'; +import { CovalentRegressionEchartsModule } from '@covalent/echarts/regression'; +@NgModule({ + imports: [ + CovalentBaseEchartsModule, + CovalentRegressionEchartsModule, + ... + ], + ... +}) +export class MyModule {} +``` + +## Usage + +Basic Example: + +```html + + + + + + +``` diff --git a/libs/angular-echarts/regression/ng-package.json b/libs/angular-echarts/regression/ng-package.json new file mode 100644 index 0000000000..df823bb29a --- /dev/null +++ b/libs/angular-echarts/regression/ng-package.json @@ -0,0 +1,3 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json" +} diff --git a/libs/angular-echarts/regression/src/public_api.ts b/libs/angular-echarts/regression/src/public_api.ts new file mode 100644 index 0000000000..2b8252756c --- /dev/null +++ b/libs/angular-echarts/regression/src/public_api.ts @@ -0,0 +1,2 @@ +export * from './regression.module'; +export * from './regression.component'; diff --git a/libs/angular-echarts/regression/src/regression.component.ts b/libs/angular-echarts/regression/src/regression.component.ts new file mode 100644 index 0000000000..072ab03f44 --- /dev/null +++ b/libs/angular-echarts/regression/src/regression.component.ts @@ -0,0 +1,169 @@ +import { + Component, + Input, + ChangeDetectionStrategy, + forwardRef, + OnChanges, +} from '@angular/core'; + +import { + assignDefined, + TdChartOptionsService, + TdSeriesDirective, +} from '@covalent/echarts/base'; +import { + ITdScatterSeries, + TdChartSeriesScatterComponent, +} from '@covalent/echarts/scatter'; +import * as ecStat from 'echarts-stat'; + +export type TdRegressionType = + | 'linear' + | 'exponential' + | 'logarithmic' + | 'polynomial'; + +export interface ITdRegressionSeries extends ITdScatterSeries { + data?: number[][]; + regressionType?: TdRegressionType; + polinomialOrder?: number; +} + +@Component({ + selector: 'td-chart-series[td-regression]', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + inputs: [ + 'config', + 'id', + 'name', + 'color', + 'data', + + 'animation', + 'animationThreshold', + 'animationDuration', + 'animationEasing', + 'animationDelay', + 'animationDurationUpdate', + 'animationEasingUpdate', + 'animationDelayUpdate', + 'tooltip', + ], + providers: [ + { + provide: TdSeriesDirective, + useExisting: forwardRef(() => TdChartSeriesRegressionComponent), + }, + ], +}) +export class TdChartSeriesRegressionComponent + extends TdChartSeriesScatterComponent + implements ITdRegressionSeries, OnChanges +{ + @Input() override data?: number[][]; + @Input() regressionType?: TdRegressionType; + @Input() polinomialOrder?: number; + + constructor(_optionsService: TdChartOptionsService) { + super(_optionsService); + } + + override ngOnChanges(): void { + this.render(); + } + + override getConfig(): any { + return { + regressionType: this.regressionType, + polinomialOrder: this.polinomialOrder, + coordinateSystem: this.coordinateSystem, + xAxisIndex: this.xAxisIndex, + yAxisIndex: this.yAxisIndex, + polarIndex: this.polarIndex, + geoIndex: this.geoIndex, + calendarIndex: this.calendarIndex, + hoverAnimation: this.hoverAnimation, + legendHoverLink: this.legendHoverLink, + symbol: this.symbol, + symbolSize: this.symbolSize, + symbolRotate: this.symbolRotate, + symbolKeepAspect: this.symbolKeepAspect, + symbolOffset: this.symbolOffset, + large: this.large, + largeThreshold: this.largeThreshold, + cursor: this.cursor, + label: this.label, + itemStyle: this.itemStyle, + emphasis: this.emphasis, + progressive: this.progressive, + progressiveThreshold: this.progressiveThreshold, + dimensions: this.dimensions, + encode: this.encode, + seriesLayoutBy: this.seriesLayoutBy, + datasetIndex: this.datasetIndex, + markPoint: this.markPoint, + markLine: this.markLine, + markArea: this.markArea, + zlevel: this.zlevel, + z: this.z, + silent: this.silent, + }; + } + + private setOptions(): void { + const config: any = assignDefined( + this._state, + { + id: this.id, + type: this.type, + name: this.name, + color: this.color, + data: this.data, + animation: this.animation, + animationThreshold: this.animationThreshold, + animationDuration: this.animationDuration, + animationEasing: this.animationEasing, + animationDelay: this.animationDelay, + animationDurationUpdate: this.animationDurationUpdate, + animationEasingUpdate: this.animationEasingUpdate, + animationDelayUpdate: this.animationDelayUpdate, + tooltip: this.tooltip, + }, + this.getConfig(), + this._options, + this.config ? this.config : {} + ); + this.optionsService.setArrayOption('scatter', config); + } + + private render() { + const output: any = this.data; + const result = ecStat.regression( + this.regressionType ?? 'linear', + output, + this.polinomialOrder ?? 2 + ); + let series = this.optionsService.getOption('series'); + + if (series) { + for (const item in series) { + if (series[item].type === 'line') { + delete series[item]; + } + } + } else { + series = []; + } + + series.push({ + type: 'line', + data: result.points, + tooltip: {}, + showSymbol: false, + }); + + this.optionsService.setOption('series', series); + this.setOptions(); + } +} diff --git a/libs/angular-echarts/regression/src/regression.module.ts b/libs/angular-echarts/regression/src/regression.module.ts new file mode 100644 index 0000000000..83eb6bf213 --- /dev/null +++ b/libs/angular-echarts/regression/src/regression.module.ts @@ -0,0 +1,15 @@ +import { NgModule, Type } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { TdChartSeriesRegressionComponent } from './regression.component'; + +export const REGRESSION_MODULE_COMPONENTS: Type[] = [ + TdChartSeriesRegressionComponent, +]; + +@NgModule({ + imports: [CommonModule], + declarations: [REGRESSION_MODULE_COMPONENTS], + exports: [REGRESSION_MODULE_COMPONENTS], +}) +export class CovalentRegressionEchartsModule {} diff --git a/package-lock.json b/package-lock.json index 51e2dd7e31..383c653d52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "@ngx-translate/http-loader": "^7.0.0", "easymde": "^2.16.1", "echarts": "^5.3.0", + "echarts-stat": "^1.2.0", "echarts-wordcloud": "^2.0.0", "highlight.js": "^11.4.0", "lit": "^2.2.8", @@ -27177,6 +27178,11 @@ "zrender": "5.4.1" } }, + "node_modules/echarts-stat": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/echarts-stat/-/echarts-stat-1.2.0.tgz", + "integrity": "sha512-zLd7Kgs+tuTSeaK0VQEMNmnMivEkhvHIk1gpBtLzpRerfcIQ+Bd5XudOMmtwpaTc1WDZbA7d1V//iiBccR46Qg==" + }, "node_modules/echarts-wordcloud": { "version": "2.1.0", "license": "ISC", @@ -71269,6 +71275,11 @@ } } }, + "echarts-stat": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/echarts-stat/-/echarts-stat-1.2.0.tgz", + "integrity": "sha512-zLd7Kgs+tuTSeaK0VQEMNmnMivEkhvHIk1gpBtLzpRerfcIQ+Bd5XudOMmtwpaTc1WDZbA7d1V//iiBccR46Qg==" + }, "echarts-wordcloud": { "version": "2.1.0" }, diff --git a/package.json b/package.json index 1e94a3e270..ebe33cb61e 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "@ngx-translate/http-loader": "^7.0.0", "easymde": "^2.16.1", "echarts": "^5.3.0", + "echarts-stat": "^1.2.0", "echarts-wordcloud": "^2.0.0", "highlight.js": "^11.4.0", "lit": "^2.2.8", diff --git a/scripts/version-placeholder.js b/scripts/version-placeholder.js index cdfcfb5f1d..81708f7626 100644 --- a/scripts/version-placeholder.js +++ b/scripts/version-placeholder.js @@ -11,6 +11,7 @@ const placeholders = [ ['0.0.0-NG', packageJson.dependencies['@angular/core']], ['0.0.0-MATERIAL', packageJson.dependencies['@angular/material']], ['0.0.0-ECHARTS', packageJson.dependencies['echarts']], + ['0.0.0-ECHARTS-STAT', packageJson.dependencies['echarts-stat']], ['0.0.0-WORDCLOUD', packageJson.dependencies['echarts-wordcloud']], ['0.0.0-SHOWDOWN', packageJson.dependencies['showdown']], ['0.0.0-HIGHLIGHT', packageJson.dependencies['highlight.js']], diff --git a/tsconfig.base.json b/tsconfig.base.json index 754de796cd..cc305fbd96 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -47,12 +47,21 @@ "@covalent/echarts": ["libs/angular-echarts/src/public_api.ts"], "@covalent/echarts/bar": ["libs/angular-echarts/bar/src/public_api.ts"], "@covalent/echarts/base": ["libs/angular-echarts/base/src/public_api.ts"], + "@covalent/echarts/clustering": [ + "libs/angular-echarts/clustering/src/public_api.ts" + ], "@covalent/echarts/graph": [ "libs/angular-echarts/graph/src/public_api.ts" ], + "@covalent/echarts/histogram": [ + "libs/angular-echarts/histogram/src/public_api.ts" + ], "@covalent/echarts/line": ["libs/angular-echarts/line/src/public_api.ts"], "@covalent/echarts/map": ["libs/angular-echarts/map/src/public_api.ts"], "@covalent/echarts/pie": ["libs/angular-echarts/pie/src/public_api.ts"], + "@covalent/echarts/regression": [ + "libs/angular-echarts/regression/src/public_api.ts" + ], "@covalent/echarts/sankey": [ "libs/angular-echarts/sankey/src/public_api.ts" ],