@covalent/echarts 0.0.1

package/base/chart.component.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter, ElementRef, ChangeDetectorRef, AfterViewInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { TdChartOptionsService } from './chart-options.service';
+import * as i0 from "@angular/core";
+export declare class TdChartComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private _changeDetectorRef;
+    private _elementRef;
+    private _optionsService;
+    private _destroy;
+    private _widthSubject;
+    private _heightSubject;
+    private _instance;
+    /**
+     * returns the echarts instance
+     */
+    get instance(): any;
+    private _state;
+    private _options;
+    /**
+     * config?: any;
+     * Sets the JS config object if you choose to not use the property inputs.
+     * Note: [config] input properties will override input values
+     * https://ecomfe.github.io/echarts-doc/public/en/option.html
+     */
+    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;
+    /**
+     * 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 | null;
+    /**
+     * renderer: 'svg' | 'canvas'
+     * sets the rendering mode for the chart.
+     * defaults to 'canvas'
+     * https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG
+     */
+    renderer: 'canvas' | 'svg';
+    chartClick: EventEmitter<any>;
+    chartDblclick: EventEmitter<any>;
+    chartContextmenu: EventEmitter<any>;
+    magicTypeChanged: EventEmitter<any>;
+    dataViewChanged: EventEmitter<any>;
+    datazoom: EventEmitter<any>;
+    restore: EventEmitter<any>;
+    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, _optionsService: TdChartOptionsService);
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    render(): void;
+    private _initializeChart;
+    private _disposeChart;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdChartComponent, "td-chart", never, { "config": "config"; "group": "group"; "themeName": "themeName"; "renderer": "renderer"; }, { "chartClick": "chartClick"; "chartDblclick": "chartDblclick"; "chartContextmenu": "chartContextmenu"; "magicTypeChanged": "magicTypeChanged"; "dataViewChanged": "dataViewChanged"; "datazoom": "datazoom"; "restore": "restore"; }, never, never>;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { OnChanges, OnDestroy } from '@angular/core';
+import { TdChartOptionsService } from '../chart-options.service';
+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;
+    constructor(_optionsService: TdChartOptionsService);
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    private _setOptions;
+    private _removeOption;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDatasetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdDatasetComponent, "td-chart-dataset", never, { "id": "id"; "config": "config"; "source": "source"; "dimensions": "dimensions"; "sourceHeader": "sourceHeader"; }, {}, never, never>;
+}

package/base/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../fesm2015/covalent-echarts-base.mjs",
+  "es2020": "../fesm2020/covalent-echarts-base.mjs",
+  "esm2020": "../esm2020/base/covalent-echarts-base.mjs",
+  "fesm2020": "../fesm2020/covalent-echarts-base.mjs",
+  "fesm2015": "../fesm2015/covalent-echarts-base.mjs",
+  "typings": "covalent-echarts-base.d.ts",
+  "sideEffects": false,
+  "name": "@covalent/echarts/base"
+}

package/base/public_api.d.ts

@@ -0,0 +1,12 @@
+export * from './base.module';
+export { TdChartComponent } from './chart.component';
+export { TdChartAxisDirective } from './axis/axis.component';
+export { TdChartYAxisComponent } from './axis/y-axis.component';
+export { TdChartXAxisComponent } from './axis/x-axis.component';
+export { TdDatasetComponent } from './dataset/dataset.component';
+export { TdChartOptionsService } from './chart-options.service';
+export * from './utils';
+export { ITdAxisLine, ITdAxisLabel, ITdAxisTick, ITdSplitLine, ITdNameTextStyle, ITdSplitArea, ITdAxisPointer, TdYAxisPosition, TdXAxisPosition, TdNameLocation, TdAxisType, ITdXAxisConfig, ITdYAxisConfig, } from './axis/axis.interface';
+export { ITdAnimation, ITdShadow, TdAlign, TdFontStyle, TdFontWeight, TdVerticalAlign, TdPointerType, TdStatus, TdLineType, TdTooltipTrigger, TdLabelPosition, TdAxisPointerType, TdTooltipTriggerOn, ITdLineStyle, TdAreaOrigin, TdMarkPointSymbol, TdTooltipPosition, ITdTooltip, ITdTextStyle, TdLineLabelPosition, ITdLineCurveStyle, ITdLabel, ITdAxisPointerLabel, ITdBaseStyle, ITdTooltipAxisPointer, TdAxisPointerAxis, ITdEdgeLabel, TdTextPosition, TdTextAlign, } from './base.types';
+export * from './series/series.component';
+export { ITdItemStyle, ITdAreaStyle, ITdEmphasis, ITdMarkPoint, TdCoordinateSystem, ITdMarkLine, ITdMarkArea, ITdLineLabel, ITdLabelLine, ITdMarkLineEmphasis, ITdSeriesTooltip, TdSeriesLayoutBy, TdProgressiveChunkMode, ITdMarkAreaEmphasis, } from './series/series.interface';

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

@@ -0,0 +1,44 @@
+import { OnChanges, OnInit, OnDestroy } from '@angular/core';
+import { TdChartOptionsService } from '../chart-options.service';
+import { ITdSeriesTooltip } from './series.interface';
+import { ITdAnimation } from '../base.types';
+import * as i0 from "@angular/core";
+export interface ITdSeries extends ITdAnimation {
+    id?: string;
+    name?: string;
+    color?: string;
+    type?: string;
+    tooltip?: ITdSeriesTooltip;
+}
+export declare abstract class TdSeriesDirective implements ITdSeries, OnChanges, OnInit, OnDestroy {
+    protected optionsService: TdChartOptionsService;
+    private _type;
+    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;
+    constructor(type: string, optionsService: TdChartOptionsService);
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    setStateOption(option: string, value: any): void;
+    removeStateOption(option: string): void;
+    abstract getConfig(): any;
+    private _setOptions;
+    private _removeOption;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdSeriesDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdSeriesDirective, never, never, { "config": "config"; "id": "id"; "name": "name"; "color": "color"; "data": "data"; "animation": "animation"; "animationThreshold": "animationThreshold"; "animationDuration": "animationDuration"; "animationEasing": "animationEasing"; "animationDelay": "animationDelay"; "animationDurationUpdate": "animationDurationUpdate"; "animationEasingUpdate": "animationEasingUpdate"; "animationDelayUpdate": "animationDelayUpdate"; "tooltip": "tooltip"; }, {}, never>;
+}

package/base/series/series.interface.d.ts

@@ -0,0 +1,84 @@
+import { TdAreaOrigin, ITdLabel, TdMarkPointSymbol, TdLineLabelPosition, ITdLineStyle, ITdTextStyle, TdTooltipPosition, ITdAnimation, ITdShadow } from '../base.types';
+export interface ITdItemStyle extends ITdShadow {
+    color?: any;
+    borderColor?: string;
+    borderWidth?: number;
+    borderType?: string;
+    opacity?: number;
+}
+export interface ITdLabelLine {
+    show?: boolean;
+    length?: number;
+    length2?: number;
+    smooth?: boolean | number;
+    lineStyle?: ITdLineStyle;
+}
+export interface ITdAreaStyle extends ITdShadow {
+    color?: any;
+    origin?: TdAreaOrigin;
+    opacity?: number;
+}
+export interface ITdEmphasis {
+    label?: ITdLabel;
+    itemStyle?: ITdItemStyle;
+}
+export interface ITdMarkPoint extends ITdAnimation {
+    symbol?: TdMarkPointSymbol | string;
+    symbolSize?: number;
+    symbolRotate?: number;
+    symbolKeepAspect?: boolean;
+    symbolOffset?: any[];
+    silent?: boolean;
+    label?: ITdLabel;
+    itemStyle?: ITdItemStyle;
+    emphasis?: ITdEmphasis;
+    data?: any[];
+}
+export interface ITdMarkLineEmphasis {
+    label?: ITdLineLabel;
+    itemStyle?: ITdLineStyle;
+}
+export interface ITdMarkAreaEmphasis {
+    label?: ITdLabel;
+    itemStyle?: ITdLineStyle;
+}
+export interface ITdLineLabel {
+    show?: boolean;
+    position?: TdLineLabelPosition;
+    formatter?: string | Function;
+}
+export interface ITdMarkLine extends ITdAnimation {
+    silent?: boolean;
+    symbol?: string | any[];
+    symbolSize?: number;
+    precision?: number;
+    label?: ITdLineLabel;
+    lineStyle?: ITdLineStyle;
+    emphasis?: ITdMarkLineEmphasis;
+    data?: any[];
+}
+export interface ITdMarkArea extends ITdAnimation {
+    silent?: boolean;
+    label?: ITdLabel;
+    lineStyle?: ITdLineStyle;
+    emphasis?: ITdMarkAreaEmphasis;
+    data?: any[];
+}
+export interface ITdSeriesTooltip {
+    position?: TdTooltipPosition | any;
+    formatter?: any;
+    backgroundColor?: any;
+    borderColor?: any;
+    borderWidth?: number;
+    padding?: number;
+    textStyle?: ITdTextStyle;
+    extraCssText?: string;
+}
+export declare type TdCoordinateSystem = 'cartesian2d' | 'polar';
+/**
+ * 'column': By default, the datasetcolumns correspond to the series, so that dataseteach column is a dimension (dimension).
+ * 'row': datasetthe row corresponding to the series, so that dataseteach row is a dimension (dimension).
+ * http://echarts.baidu.com/option.html#series-line.seriesLayoutBy
+ */
+export declare type TdSeriesLayoutBy = 'column' | 'row';
+export declare type TdProgressiveChunkMode = 'sequential' | 'mod';

package/base/src/axis/README.md

@@ -0,0 +1,58 @@
+# td-chart-x-axis and td-chart-y-axis
+
+`td-chart-x-axis` and `td-chart-y-axis` elements generate an axis inside a `td-chart`. Its the equivalent of creating a JS xAxis/yAxis object in echarts.
+
+## API Summary
+
+#### 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
+
+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.
+
+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)
+
+## Setup
+
+Import the [CovalentBaseEchartsModule] in your NgModule:
+
+```typescript
+import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
+@NgModule({
+  imports: [
+    CovalentBaseEchartsModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+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>
+  <td-chart-y-axis [show]="true" [type]="'value'"> </td-chart-y-axis>
+</td-chart>
+```

package/base/src/dataset/README.md

@@ -0,0 +1,80 @@
+# td-chart-dataset
+
+`td-chart-dataset` element sets the dataset option inside `td-chart`. It allows additional flexibility to managing data separately from the series property which helps with data reuse using different series. It also enables data encoding. Its the equivalent of creating a JS dataset object in echarts.
+
+## API Summary
+
+#### 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
+
+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.
+
+For more info [click here](https://echarts.apache.org/en/option.html#dataset)
+
+## Setup
+
+Import the [CovalentBaseEchartsModule] in your NgModule:
+
+```typescript
+import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
+@NgModule({
+  imports: [
+    CovalentBaseEchartsModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Basic Example:
+
+```html
+<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-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]]"
+  >
+  </td-chart-dataset>
+</td-chart>
+```
+
+Dimensions Input property Example:
+
+```html
+<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-dataset
+    [dimensions]="['product', '2015', '2016', '2017']"
+    [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}]"
+  >
+  </td-chart-dataset>
+</td-chart>
+```