@covalent/echarts 4.0.0-beta.2 → 4.1.0-develop.2

package/README.md

@@ -1,93 +1,7 @@
-# Covalent ECharts
+# angular-echarts
 
-### What's Echarts?
+This library was generated with [Nx](https://nx.dev).
 
-[Echarts](https://echarts.apache.org/en/index.html) is a massive visualization library built on canvas by Baidu and open-sourced under the Apache License as an official Apache Incubator.
+## Running unit tests
 
-### Why Covalent Echarts?
-
-Covalent Echarts is an Angular library built by Teradata with the goal of exposing the powerful Echarts APIs in Angular best practices and standards. Covalent Echarts also includes ease of use features such as auto resizing, event outputs, etc.
-
-The Covalent UI Platform is not required to use Covalent Echarts.
-
-### Why Canvas?
-
-Teradata customers work in massive datasets, the largest on the planet. SVG charts such as D3.js are great for flexibility and customization, but aren't nearly as effective for realtime data and big data. Covalent Echarts removes the complexity in customizing canvas charts building on the incredibly powerful and flexible Echarts APIs, which have provided just about every customization you can imagine.
-
-
-## Installing Covalent Echarts
-
-```bash
-npm install --save echarts
-```
-
-```bash
-npm install --save @covalent/echarts
-```
-
-To test (only for testing!) the latest changes from develop, install the nightly build:
-
-```bash
-npm install --save https://github.com/Teradata/covalent-echarts-nightly.git
-```
-
-## Setup
-
-Import the [CovalentBaseEchartsModule] in your NgModule:
-
-```typescript
-import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
-import { CovalentBarEchartsModule } from '@covalent/echarts/bar';
-import { CovalentTooltipEchartsModule } from '@covalent/echarts/tooltip';
-@NgModule({
-  imports: [
-    CovalentBaseEchartsModule,
-    CovalentBarEchartsModule,
-    CovalentTooltipEchartsModule,
-    ...
-  ],
-  ...
-})
-export class MyModule {}
-```
-
-## Usage
-
-Basic Example:
-
-```html
-<td-chart [style.height.px]="300">
-  <td-chart-tooltip [trigger]="'item'"
-                    [textStyle]="{ color: '#818181' }"
-                    [backgroundColor]="'#ffffff'">
-    <ng-template let-params let-ticket="ticket" 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.value}}
-          </span>
-        </div>
-      </ng-container>
-    </ng-template>
-  </td-chart-tooltip>
-  <td-chart-x-axis [show]="true"
-                    [position]="'bottom'"
-                    [type]="'category'"
-                    [data]="['Electronics', 'Toys', 'Grocery', 'Appliances', 'Automotive', 'Sports']"
-                    [boundaryGap]="true">
-  </td-chart-x-axis>
-  <td-chart-y-axis [show]="true"
-                    [type]="'value'"
-                    [position]="'right'"
-                    [max]="200">
-  </td-chart-y-axis>
-  <td-chart-series td-bar
-                  [data]="[150, 130, 150, 120, 150, 120]"
-                  [name]="'Today'"
-                  [color]="'#F2724B'">
-  </td-chart-series>
-</td-chart>
-```
+Run `nx test angular-echarts` to execute the unit tests.

package/bar/README.md

@@ -6,20 +6,20 @@
 
 #### Inputs
 
-+ config?: any
-  + Sets the JS config object if you choose to not use the property inputs.
-  + Note: [config] input properties will override input values
+- config?: any
+  - Sets the JS config object if you choose to not use the property inputs.
+  - Note: [config] input properties will override input values
 
 There are also lots of property inputs like:
 
-+ 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.
-+ data?: any[]
-  + Data array of series.
+- 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.
+- data?: any[]
+  - Data array of series.
 
 And so many more.. for more info [click here](https://echarts.apache.org/en/option.html#series-bar)
 
@@ -47,17 +47,19 @@ Basic Example:
 
 ```html
 <td-chart>
-  <td-chart-x-axis [show]="true"
-                    [type]="'category'"
-                    [data]="['Electronics', 'Toys', 'Grocery', 'Appliances', 'Automotive', 'Sports']">
+  <td-chart-x-axis
+    [show]="true"
+    [type]="'category'"
+    [data]="['Electronics', 'Toys', 'Grocery', 'Appliances', 'Automotive', 'Sports']"
+  >
   </td-chart-x-axis>
-  <td-chart-y-axis [show]="true"
-                    [type]="'value'">
-  </td-chart-y-axis>
-  <td-chart-series td-bar
-              [name]="'name'"
-              [data]="[150, 130, 150, 120, 150, 120]"
-              [color]="'#F2724B'">
+  <td-chart-y-axis [show]="true" [type]="'value'"> </td-chart-y-axis>
+  <td-chart-series
+    td-bar
+    [name]="'name'"
+    [data]="[150, 130, 150, 120, 150, 120]"
+    [color]="'#F2724B'"
+  >
   </td-chart-series>
 </td-chart>
 ```

package/bar/bar.component.d.ts

@@ -33,34 +33,34 @@ export interface ITdBarSeries extends ITdSeries {
     silent?: boolean;
 }
 export declare class TdChartSeriesBarComponent extends TdSeriesDirective implements ITdBarSeries {
-    coordinateSystem: TdCoordinateSystem;
-    xAxisIndex: number;
-    yAxisIndex: number;
-    legendHoverLink: boolean;
-    stack: string;
-    cursor: string;
-    label: any;
-    itemStyle: ITdItemStyle;
-    emphasis: ITdEmphasis;
-    barWidth: number;
-    barMaxWidth: number;
-    barMinHeight: number;
-    barGap: string;
-    barCategoryGap: string;
-    large: boolean;
-    largeThreshold: number;
-    progressive: number;
-    progressiveThreshold: number;
-    progressiveChunkMode: TdProgressiveChunkMode;
-    dimensions: any[];
+    coordinateSystem?: TdCoordinateSystem;
+    xAxisIndex?: number;
+    yAxisIndex?: number;
+    legendHoverLink?: boolean;
+    stack?: string;
+    cursor?: string;
+    label?: any;
+    itemStyle?: ITdItemStyle;
+    emphasis?: ITdEmphasis;
+    barWidth?: number;
+    barMaxWidth?: number;
+    barMinHeight?: number;
+    barGap?: string;
+    barCategoryGap?: string;
+    large?: boolean;
+    largeThreshold?: number;
+    progressive?: number;
+    progressiveThreshold?: number;
+    progressiveChunkMode?: TdProgressiveChunkMode;
+    dimensions?: any[];
     encode: any;
-    seriesLayoutBy: TdSeriesLayoutBy;
-    datasetIndex: number;
-    markPoint: ITdMarkPoint;
-    markLine: ITdMarkLine;
-    markArea: ITdMarkArea;
-    zlevel: number;
-    z: number;
+    seriesLayoutBy?: TdSeriesLayoutBy;
+    datasetIndex?: number;
+    markPoint?: ITdMarkPoint;
+    markLine?: ITdMarkLine;
+    markArea?: ITdMarkArea;
+    zlevel?: number;
+    z?: number;
     constructor(_optionsService: TdChartOptionsService);
     getConfig(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdChartSeriesBarComponent, never>;

package/bar/covalent-echarts-bar.d.ts

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 /// <amd-module name="@covalent/echarts/bar" />
-export * from './index';
+export * from './public_api';

package/base/README.md

@@ -6,27 +6,25 @@
 
 #### Inputs
 
-+ config?: any
-  + Sets the JS config object if you choose to not use the property inputs.
-  + Note: [config] input properties will override input values
-+ themeName?: string
-  + theme to be applied into chart instance
-+ renderer?: 'svg' | 'canvas'
-  + sets the rendering mode for the chart.
-  + defaults to 'canvas'
-+ group?: string
-  + group name in which the chart instance will be connected to
-
+- config?: any
+  - Sets the JS config object if you choose to not use the property inputs.
+  - Note: [config] input properties will override input values
+- themeName?: string
+  - theme to be applied into chart instance
+- renderer?: 'svg' | 'canvas'
+  - sets the rendering mode for the chart.
+  - defaults to 'canvas'
+- group?: string
+  - group name in which the chart instance will be connected to
 
 #### Outputs
 
-+ chartClick
-  + event thrown when a chart element has been clicked.
-+ chartDblclick
-  + event thrown when a chart element has been double clicked.
-+ chartContextmenu
-  + event thrown when a chart element has been right-clicked.
-
+- chartClick
+  - event thrown when a chart element has been clicked.
+- chartDblclick
+  - event thrown when a chart element has been double clicked.
+- chartContextmenu
+  - event thrown when a chart element has been right-clicked.
 
 ## Setup
 
@@ -47,13 +45,15 @@ export class MyModule {}
 ## Usage
 
 ```html
-<td-chart [style.height.px]="300"
-          [config]="{...}"
-          [themeName]="'light'"
-          [renderer]="'canvas'"
-          [group]="'group1'"
-          (chartClick)="doSomething()"
-          (chartDblclick)="doSomething()"
-          (chartContextmenu)="doSomething()">
+<td-chart
+  [style.height.px]="300"
+  [config]="{...}"
+  [themeName]="'light'"
+  [renderer]="'canvas'"
+  [group]="'group1'"
+  (chartClick)="doSomething()"
+  (chartDblclick)="doSomething()"
+  (chartContextmenu)="doSomething()"
+>
 </td-chart>
 ```

package/base/axis/axis.component.d.ts

@@ -7,36 +7,36 @@ export declare abstract class TdChartAxisDirective implements OnChanges, OnInit,
     private _optionsService;
     private _state;
     config: any;
-    id: string;
-    show: boolean;
-    gridIndex: number;
-    offset: number;
+    id?: string;
+    show?: boolean;
+    gridIndex?: number;
+    offset?: number;
     abstract position: TdXAxisPosition | TdYAxisPosition;
-    type: TdAxisType;
-    name: string;
-    nameLocation: TdNameLocation;
-    nameTextStyle: any;
-    nameGap: number;
-    nameRotate: number;
-    inverse: boolean;
-    boundaryGap: boolean | string[];
-    min: string | number;
-    max: string | number;
-    scale: boolean;
-    minInterval: number;
-    interval: number;
-    logBase: number;
-    silent: boolean;
-    triggerEvent: boolean;
-    axisLine: ITdAxisLine;
-    axisTick: ITdAxisTick;
-    axisLabel: ITdAxisLabel;
-    splitLine: ITdSplitLine;
-    splitArea: ITdSplitArea;
-    data: any;
-    axisPointer: ITdAxisPointer;
-    zlevel: number;
-    z: number;
+    type?: TdAxisType;
+    name?: string;
+    nameLocation?: TdNameLocation;
+    nameTextStyle?: any;
+    nameGap?: number;
+    nameRotate?: number;
+    inverse?: boolean;
+    boundaryGap?: boolean | string[];
+    min?: string | number;
+    max?: string | number;
+    scale?: boolean;
+    minInterval?: number;
+    interval?: number;
+    logBase?: number;
+    silent?: boolean;
+    triggerEvent?: boolean;
+    axisLine?: ITdAxisLine;
+    axisTick?: ITdAxisTick;
+    axisLabel?: ITdAxisLabel;
+    splitLine?: ITdSplitLine;
+    splitArea?: ITdSplitArea;
+    data?: any;
+    axisPointer?: ITdAxisPointer;
+    zlevel?: number;
+    z?: number;
     constructor(_axisOption: string, _optionsService: TdChartOptionsService);
     ngOnInit(): void;
     ngOnChanges(): void;

package/base/chart.component.d.ts

@@ -21,19 +21,19 @@ export declare class TdChartComponent implements AfterViewInit, OnChanges, OnDes
      * Note: [config] input properties will override input values
      * https://ecomfe.github.io/echarts-doc/public/en/option.html
      */
-    config: any;
+    config?: any;
     /**
      * group?: string
      * group name in which the chart instance will be connected to
      * https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.connect
      */
-    group: string;
+    group?: string;
     /**
      * themeName?: string
      * theme to be applied into chart instance
      * https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Overview%20of%20Style%20Customization
      */
-    themeName: string;
+    themeName?: string | null;
     /**
      * renderer: 'svg' | 'canvas'
      * sets the rendering mode for the chart.

package/base/covalent-echarts-base.d.ts

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 /// <amd-module name="@covalent/echarts/base" />
-export * from './index';
+export * from './public_api';

package/base/dataset/dataset.component.d.ts

@@ -4,11 +4,11 @@ import * as i0 from "@angular/core";
 export declare class TdDatasetComponent implements OnChanges, OnDestroy {
     private _optionsService;
     private _state;
-    id: string;
-    config: any;
-    source: object | any[];
-    dimensions: any[];
-    sourceHeader: boolean;
+    id?: string;
+    config?: any;
+    source?: object | any[];
+    dimensions?: any[];
+    sourceHeader?: boolean;
     constructor(_optionsService: TdChartOptionsService);
     ngOnChanges(): void;
     ngOnDestroy(): void;

package/base/series/series.component.d.ts

@@ -1,6 +1,6 @@
 import { OnChanges, OnInit, OnDestroy } from '@angular/core';
 import { TdChartOptionsService } from '../chart-options.service';
-import { ITdSeriesTooltip } from '../series/series.interface';
+import { ITdSeriesTooltip } from './series.interface';
 import { ITdAnimation } from '../base.types';
 import * as i0 from "@angular/core";
 export interface ITdSeries extends ITdAnimation {
@@ -16,20 +16,20 @@ export declare abstract class TdSeriesDirective implements ITdSeries, OnChanges,
     get type(): string;
     _state: any;
     _options: any;
-    config: any;
-    id: string;
-    name: string;
-    color: string;
-    data: any[];
-    animation: boolean;
-    animationThreshold: number;
-    animationDuration: number | Function;
-    animationEasing: string;
-    animationDelay: number | Function;
-    animationDurationUpdate: number | Function;
-    animationEasingUpdate: string;
-    animationDelayUpdate: number | Function;
-    tooltip: ITdSeriesTooltip;
+    config?: any;
+    id?: string;
+    name?: string;
+    color?: string;
+    data?: any[];
+    animation?: boolean;
+    animationThreshold?: number;
+    animationDuration?: number | Function;
+    animationEasing?: string;
+    animationDelay?: number | Function;
+    animationDurationUpdate?: number | Function;
+    animationEasingUpdate?: string;
+    animationDelayUpdate?: number | Function;
+    tooltip?: ITdSeriesTooltip;
     constructor(type: string, optionsService: TdChartOptionsService);
     ngOnInit(): void;
     ngOnChanges(): void;

package/base/{axis → src/axis}/README.md

@@ -6,22 +6,22 @@
 
 #### Inputs
 
-+ config?: any
-  + Sets the JS config object if you choose to not use the property inputs.
-  + Note: [config] input properties will override input values
+- config?: any
+  - Sets the JS config object if you choose to not use the property inputs.
+  - Note: [config] input properties will override input values
 
 There are also lots of property inputs like:
 
-+ id?: string
-  + It can be used to refer the component in option or API.
-+ name?: string
-  + Location of axis name.
-+ type?: 'value' | 'category' | 'time' | 'log'
-  + Type of axis
-+ min?: number
-  + The minimun value of axis.
-+ max?: number
-  + The maximum value of axis.
+- id?: string
+  - It can be used to refer the component in option or API.
+- name?: string
+  - Location of axis name.
+- type?: 'value' | 'category' | 'time' | 'log'
+  - Type of axis
+- min?: number
+  - The minimun value of axis.
+- max?: number
+  - The maximum value of axis.
 
 And so many more.. for more info on xAxis [click here](https://echarts.apache.org/en/option.html#xAxis) and yAxis [click here](https://echarts.apache.org/en/option.html#yAxis)
 
@@ -47,12 +47,12 @@ Basic Tooltip Example:
 
 ```html
 <td-chart>
-  <td-chart-x-axis [show]="true"
-                    [type]="'category'"
-                    [data]="['Electronics', 'Toys', 'Grocery', 'Appliances', 'Automotive', 'Sports']">
+  <td-chart-x-axis
+    [show]="true"
+    [type]="'category'"
+    [data]="['Electronics', 'Toys', 'Grocery', 'Appliances', 'Automotive', 'Sports']"
+  >
   </td-chart-x-axis>
-  <td-chart-y-axis [show]="true"
-                    [type]="'value'">
-  </td-chart-y-axis>
+  <td-chart-y-axis [show]="true" [type]="'value'"> </td-chart-y-axis>
 </td-chart>
 ```

package/base/{dataset → src/dataset}/README.md

@@ -6,20 +6,20 @@
 
 #### Inputs
 
-+ config?: any
-  + Sets the JS config object if you choose to not use the property inputs.
-  + Note: [config] input properties will override input values
+- config?: any
+  - Sets the JS config object if you choose to not use the property inputs.
+  - Note: [config] input properties will override input values
 
 There are also has several property inputs:s
 
-+ id?: string
-  + It can be used to refer the component in option or API.
-+ source?: object | any[]
-  + Source data. Chart data described in a tabular or 2d array format. series.data will override dataset.source.
-+ dimensions?: any[]
-  + dimensions can be used to define dimension info for series.data or dataset.source.
-+ sourceHeader?: boolean
-  + Whether the first row/column of dataset.source represents dimension names.
+- id?: string
+  - It can be used to refer the component in option or API.
+- source?: object | any[]
+  - Source data. Chart data described in a tabular or 2d array format. series.data will override dataset.source.
+- dimensions?: any[]
+  - dimensions can be used to define dimension info for series.data or dataset.source.
+- sourceHeader?: boolean
+  - Whether the first row/column of dataset.source represents dimension names.
 
 For more info [click here](https://echarts.apache.org/en/option.html#dataset)
 
@@ -47,16 +47,18 @@ Basic Example:
 <td-chart [style.height.px]="300">
   <td-chart-x-axis></td-chart-x-axis>
   <td-chart-y-axis [type]="'category'"> </td-chart-y-axis>
-    <td-chart-series td-bar></td-chart-series>
-    <td-chart-series td-bar></td-chart-series>
-    <td-chart-series td-bar></td-chart-series>
+  <td-chart-series td-bar></td-chart-series>
+  <td-chart-series td-bar></td-chart-series>
+  <td-chart-series td-bar></td-chart-series>
   <td-chart-dataset
     [source]="[['product', '2015', '2016', '2017'],
     ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1],
-    ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1]]">
+    ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1]]"
+  >
   </td-chart-dataset>
 </td-chart>
 ```
+
 Dimensions Input property Example:
 
 ```html
@@ -71,7 +73,8 @@ Dimensions Input property Example:
     [source]="[{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
     {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
     {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
-    {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}]">
+    {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}]"
+  >
   </td-chart-dataset>
 </td-chart>
 ```

package/covalent-echarts.d.ts

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 /// <amd-module name="@covalent/echarts" />
-export * from './index';
+export * from './public_api';