feat(): implement tooltip component (Teradata#9)

feat(): implement tooltip component

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

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

src/app/app.component.html

@@ -1,7 +1,86 @@
-<h3>TEST</h3>
-<td-chart [style.height.px]="300"
+<h3>Bar Test</h3>
+<td-base-chart [style.height.px]="300"
           [yAxisType]="'value'"
           [xAxisType]="'category'"
           [dataZoom]="false"
-          [data]="plot">
-</td-chart>
+          [data]="barPlot">
+  <td-chart-tooltip [trigger]="'item'">
+    <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
+      <ng-container *ngIf="params">
+        <div layout="row" layout-align="start center">
+          <mat-icon>
+            <span class="tc-blue-300">person</span>
+          </mat-icon>
+          <span class="mat-caption pad-left-sm">
+            {{params.seriesName + ': ' + params.value}}
+          </span>
+        </div>
+      </ng-container>
+    </ng-template>
+  </td-chart-tooltip>
+</td-base-chart>
+<h3>Bar Test 2</h3>
+<td-chart-bar [style.height.px]="300"
+              [data]="barPlot">
+  <td-chart-tooltip [trigger]="'item'">
+    <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
+      <ng-container *ngIf="params">
+        <div layout="row" layout-align="start center">
+          <mat-icon>
+            <span class="tc-blue-300">person</span>
+          </mat-icon>
+          <span class="mat-caption pad-left-sm">
+            {{params.seriesName + ': ' + params.value}}
+          </span>
+        </div>
+      </ng-container>
+    </ng-template>
+  </td-chart-tooltip>
+</td-chart-bar>
+<h3>Line Test</h3>
+<div layout="row">
+  <button mat-button (click)="showTooltip = !showTooltip">
+    Show/Hide Tooltip
+  </button>
+</div>
+<td-base-chart [style.height.px]="300"
+                [data]="linePlot">
+  <td-chart-tooltip [show]="showTooltip">
+    <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
+      <ng-container *ngIf="params">
+        <div layout="row" layout-align="start center">
+          <mat-icon>
+            <span class="tc-blue-300">update_time</span>
+          </mat-icon>
+          <span class="mat-caption pad-left-sm">
+            {{params[0].seriesName + ': ' + params[0].value[1]}}
+          </span>
+        </div>
+        <div class="mat-caption">
+          at {{(params[0].name | date:'medium')}}
+        </div>
+      </ng-container>
+    </ng-template>
+  </td-chart-tooltip>
+</td-base-chart>
+<h3>Line Test 2</h3>
+<td-chart-line [style.height.px]="300"
+                [data]="linePlot">
+  <td-chart-tooltip>
+    <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
+      <ng-container *ngIf="params">
+        <div layout="row" layout-align="start center">
+          <mat-icon>
+            <span class="tc-blue-300">update_time</span>
+          </mat-icon>
+          <span class="mat-caption pad-left-sm">
+            {{params[0].seriesName + ': ' + params[0].value[1]}}
+          </span>
+        </div>
+        <div class="mat-caption">
+          at {{(params[0].name | date:'medium')}}
+        </div>
+      </ng-container>
+    </ng-template>
+  </td-chart-tooltip>
+</td-chart-line>

src/app/app.component.ts

@@ -1,13 +1,17 @@
 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',
   styleUrls: ['./app.component.scss'],
 })
 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) {
 
   }

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: [

src/platform/echarts/bar/bar.component.html

@@ -0,0 +1,8 @@
+<td-base-chart [style.height.%]="100"
+                [data]="data"
+                [yAxisType]="'value'"
+                [xAxisType]="'category'"
+                [dataZoom]="false"
+                [dataZoom]="false">
+  <ng-content></ng-content>
+</td-base-chart>

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[];
+
+}

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<any>[] = [
+  TdBarChartComponent,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CovalentBaseEchartsModule,
+  ],
+  declarations: [
+    BAR_MODULE_COMPONENTS,
+  ],
+  exports: [
+    BAR_MODULE_COMPONENTS,
+  ],
+})
+export class CovalentBarEchartsModule {
+
+}

src/platform/echarts/bar/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/platform/echarts/bar/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "index.ts"
+    }
+  }
+}

src/platform/echarts/bar/public-api.ts

@@ -0,0 +1,2 @@
+export * from './bar.module';
+export { TdBarChartComponent } from './bar.component';

src/platform/echarts/base/base.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}