feature: Added echarts-stat as a dependency 📊

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',

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 {}

apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo-basic/clustering-demo-basic.component.html

@@ -0,0 +1,125 @@
+<div flex layout="row" layout-align="start center">
+  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
+    Chart Theme:
+  </div>
+  <mat-form-field>
+    <mat-select
+      [(value)]="selectedTheme"
+      (valueChange)="selectChartTheme($event)"
+    >
+      <mat-option *ngFor="let theme of themes" [value]="theme">
+        {{ theme }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
+    Show centroids:
+  </div>
+  <mat-slide-toggle [(ngModel)]="showCentroids"></mat-slide-toggle>
+</div>
+<td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
+  <td-chart-toolbox
+    [show]="true"
+    [right]="30"
+    [top]="10"
+    [feature]="{
+      dataView: {
+        readOnly: true,
+        title: 'View Data',
+        lang: ['Data View', 'Turn Off', 'Refresh']
+      },
+      dataZoom: { title: { zoom: 'Zoom', back: 'Back' } },
+      restore: { title: 'Restore' }
+    }"
+  >
+  </td-chart-toolbox>
+  <td-chart-tooltip [trigger]="'item'">
+    <ng-template let-params tdTooltipFormatter>
+      <ng-container *ngIf="params">
+        <div layout="row" layout-align="start center">
+          <mat-icon>
+            <span [style.color]="params.color">people</span>
+          </mat-icon>
+          <span class="mat-caption pad-left-sm">
+            {{ params.seriesName ? params.seriesName : params.name }}:
+            {{ params.value }}
+          </span>
+        </div>
+      </ng-container>
+    </ng-template>
+  </td-chart-tooltip>
+  <td-chart-x-axis
+    [show]="true"
+    [position]="'bottom'"
+    [type]="'value'"
+    [boundaryGap]="true"
+  ></td-chart-x-axis>
+  <td-chart-y-axis [show]="true" [type]="'value'"></td-chart-y-axis>
+  <td-chart-series
+    td-clustering
+    [clusterCount]="6"
+    [showCentroids]="showCentroids"
+    [data]="[
+      [3.275154, 2.957587],
+      [-3.344465, 2.603513],
+      [0.355083, -3.376585],
+      [1.852435, 3.547351],
+      [-2.078973, 2.552013],
+      [-0.993756, -0.884433],
+      [2.682252, 4.007573],
+      [-3.087776, 2.878713],
+      [-1.565978, -1.256985],
+      [2.441611, 0.444826],
+      [-0.659487, 3.111284],
+      [-0.459601, -2.618005],
+      [2.17768, 2.387793],
+      [-2.920969, 2.917485],
+      [-0.028814, -4.168078],
+      [3.625746, 2.119041],
+      [-3.912363, 1.325108],
+      [-0.551694, -2.814223],
+      [2.855808, 3.483301],
+      [-3.594448, 2.856651],
+      [0.421993, -2.372646],
+      [1.650821, 3.407572],
+      [-2.082902, 3.384412],
+      [-0.718809, -2.492514],
+      [4.513623, 3.841029],
+      [-4.822011, 4.607049],
+      [-0.656297, -1.449872],
+      [1.919901, 4.439368],
+      [-3.287749, 3.918836],
+      [-1.576936, -2.977622],
+      [3.598143, 1.97597],
+      [-3.977329, 4.900932],
+      [-1.79108, -2.184517],
+      [3.914654, 3.559303],
+      [-1.910108, 4.166946],
+      [-1.226597, -3.317889],
+      [1.148946, 3.345138],
+      [-2.113864, 3.548172],
+      [0.845762, -3.589788],
+      [2.629062, 3.535831],
+      [-1.640717, 2.990517],
+      [-1.881012, -2.485405],
+      [4.606999, 3.510312],
+      [-4.366462, 4.023316],
+      [0.765015, -3.00127],
+      [3.121904, 2.173988],
+      [-4.025139, 4.65231],
+      [-0.559558, -3.840539],
+      [4.376754, 4.863579],
+      [-1.874308, 4.032237],
+      [-0.089337, -3.026809],
+      [3.997787, 2.518662],
+      [-3.082978, 2.884822],
+      [0.845235, -3.454465],
+      [1.327224, 3.358778],
+      [-2.889949, 3.596178],
+      [-0.966018, -2.839827],
+      [2.960769, 3.079555],
+      [-3.275518, 1.577068],
+      [0.639276, -3.41284]
+    ]"
+  ></td-chart-series>
+</td-chart>

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%;
+}

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<void> {
+    this.selectedTheme = this.themeSelector.selected;
+    this._cdr.markForCheck();
+  }
+
+  selectChartTheme(theme: string): void {
+    this.themeSelector.select(theme);
+  }
+}

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 {}

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 {}

apps/docs-app/src/app/content/echarts/echarts-demos/clustering/demos/clustering-demo.component.html

@@ -0,0 +1,3 @@
+<demo-component [demoId]="'clustering-demo-basic'" [demoTitle]="'Basic'">
+  <clustering-demo-basic></clustering-demo-basic>
+</demo-component>

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 {}

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 {}