Merge branch 'typescript' of github.com:apache/incubator-echarts into typescript

src/component/timeline/SliderTimelineModel.ts

@@ -17,20 +17,24 @@
 * under the License.
 */
 
-// @ts-nocheck
-
-import * as zrUtil from 'zrender/src/core/util';
-import TimelineModel from './TimelineModel';
+import TimelineModel, { TimelineOption } from './TimelineModel';
 import DataFormatMixin from '../../model/mixin/dataFormat';
+import ComponentModel from '../../model/Component';
+import { mixin } from 'zrender/src/core/util';
+import List from '../../data/List';
+
+interface SliderTimelineOption extends TimelineOption {
+}
 
-var SliderTimelineModel = TimelineModel.extend({
+class SliderTimelineModel extends TimelineModel {
 
-    type: 'timeline.slider',
+    static type = 'timeline.slider'
+    type = SliderTimelineModel.type
 
     /**
      * @protected
      */
-    defaultOption: {
+    static defaultOption: SliderTimelineOption = {
 
         backgroundColor: 'rgba(0,0,0,0)',   // 时间轴背景颜色
         borderColor: '#ccc',               // 时间轴边框颜色
@@ -117,8 +121,14 @@ var SliderTimelineModel = TimelineModel.extend({
         data: []
     }
 
-});
+}
+
+interface SliderTimelineModel extends DataFormatMixin {
+    getData(): List<SliderTimelineModel>
+}
+
+mixin(SliderTimelineModel, DataFormatMixin.prototype);
 
-zrUtil.mixin(SliderTimelineModel, DataFormatMixin.prototype);
+ComponentModel.registerClass(SliderTimelineModel);
 
 export default SliderTimelineModel;
\ No newline at end of file

src/component/timeline/TimelineAxis.ts

@@ -17,62 +17,43 @@
 * under the License.
 */
 
-// @ts-nocheck
-
-import * as zrUtil from 'zrender/src/core/util';
 import Axis from '../../coord/Axis';
+import Scale from '../../scale/Scale';
+import TimelineModel from './TimelineModel';
+import { LabelOption } from '../../util/types';
+import Model from '../../model/Model';
 
 /**
  * Extend axis 2d
- * @constructor module:echarts/coord/cartesian/Axis2D
- * @extends {module:echarts/coord/cartesian/Axis}
- * @param {string} dim
- * @param {*} scale
- * @param {Array.<number>} coordExtent
- * @param {string} axisType
- * @param {string} position
  */
-var TimelineAxis = function (dim, scale, coordExtent, axisType) {
+class TimelineAxis extends Axis {
 
-    Axis.call(this, dim, scale, coordExtent);
+    type: 'category' | 'time' | 'value'
 
-    /**
-     * Axis type
-     *  - 'category'
-     *  - 'value'
-     *  - 'time'
-     *  - 'log'
-     * @type {string}
-     */
-    this.type = axisType || 'value';
-
-    /**
-     * Axis model
-     * @param {module:echarts/component/TimelineModel}
-     */
-    this.model = null;
-};
+    // Not using the model.
+    model: never
 
-TimelineAxis.prototype = {
+    timelineModel: TimelineModel
 
-    constructor: TimelineAxis,
+    constructor(dim: string, scale: Scale, coordExtent: [number, number], axisType: 'category' | 'time' | 'value') {
+        super(dim, scale, coordExtent);
+        this.type = axisType || 'value';
+    }
 
     /**
      * @override
      */
-    getLabelModel: function () {
-        return this.model.getModel('label');
-    },
+    getLabelModel() {
+        // Force override
+        return this.timelineModel.getModel('label') as Model<LabelOption>;
+    }
 
     /**
      * @override
      */
-    isHorizontal: function () {
-        return this.model.get('orient') === 'horizontal';
+    isHorizontal() {
+        return this.timelineModel.get('orient') === 'horizontal';
     }
-
-};
-
-zrUtil.inherits(TimelineAxis, Axis);
+}
 
 export default TimelineAxis;
\ No newline at end of file

src/component/timeline/TimelineModel.ts

@@ -17,89 +17,154 @@
 * under the License.
 */
 
-// @ts-nocheck
-
-import * as zrUtil from 'zrender/src/core/util';
 import ComponentModel from '../../model/Component';
 import List from '../../data/List';
 import * as modelUtil from '../../util/model';
+import {
+    ComponentOption,
+    BoxLayoutOptionMixin,
+    LayoutOrient,
+    SymbolOptionMixin,
+    LineStyleOption,
+    ItemStyleOption,
+    LabelOption,
+    OptionDataValue,
+    ZRColor,
+    ColorString,
+    CommonTooltipOption,
+    CallbackDataParams,
+    ZREasing
+} from '../../util/types';
+import Model from '../../model/Model';
+import GlobalModel from '../../model/Global';
+import { each, isObject, clone, isString } from 'zrender/src/core/util';
+
+
+export interface TimelineControlStyle extends ItemStyleOption {
+    show?: boolean
+    showPlayBtn?: boolean
+    showPrevBtn?: boolean
+    showNextBtn?: boolean
+    itemSize?: number
+    itemGap?: number
+    position?: 'left' | 'right' | 'top' | 'bottom'
+    playIcon?: string
+    stopIcon?: string
+    prevIcon?: string
+    nextIcon?: string
+}
+
+export interface TimelineCheckpointStyle extends ItemStyleOption,
+    SymbolOptionMixin {
+    animation?: boolean
+    animationDuration?: number
+    animationEasing?: ZREasing
+}
+
+interface TimelineLineStyleOption extends LineStyleOption {
+    show?: boolean
+}
+
+interface TimelineLabelOption extends Omit<LabelOption, 'position'> {
+    show?: boolean
+    // number can be distance to the timeline axis. sign will determine the side.
+    position?: 'auto' | 'left' | 'right' | 'top' | 'bottom' | number
+    interval?: 'auto' | number
+}
+
+export interface TimelineDataItemOption extends SymbolOptionMixin {
+    value?: OptionDataValue
+    itemStyle?: ItemStyleOption
+    label?: TimelineLabelOption
+    checkpointStyle?: TimelineCheckpointStyle
+
+    emphasis?: {
+        itemStyle?: ItemStyleOption
+        label?: TimelineLabelOption
+        checkpointStyle?: TimelineCheckpointStyle
+    }
 
-var TimelineModel = ComponentModel.extend({
+    tooltip?: boolean
+}
 
-    type: 'timeline',
+export interface TimelineOption extends ComponentOption, BoxLayoutOptionMixin, SymbolOptionMixin {
 
-    layoutMode: 'box',
+    backgroundColor?: ZRColor
+    borderColor?: ColorString
+    borderWidth?: number
 
-    /**
-     * @protected
-     */
-    defaultOption: {
+    tooltip?: CommonTooltipOption<CallbackDataParams> & {
+        trigger?: 'item'
+    }
 
-        zlevel: 0,                  // 一级层叠
-        z: 4,                       // 二级层叠
-        show: true,
+    show?: boolean
 
-        axisType: 'time',  // 模式是时间类型，支持 value, category
+    axisType?: 'category' | 'time' | 'value'
 
-        realtime: true,
+    currentIndex?: number
 
-        left: '20%',
-        top: null,
-        right: '20%',
-        bottom: 0,
-        width: null,
-        height: 40,
-        padding: 5,
+    autoPlay?: boolean
 
-        controlPosition: 'left',           // 'left' 'right' 'top' 'bottom' 'none'
-        autoPlay: false,
-        rewind: false,                     // 反向播放
-        loop: true,
-        playInterval: 2000,                // 播放时间间隔，单位ms
+    rewind?: boolean
 
-        currentIndex: 0,
+    loop?: boolean
 
-        itemStyle: {},
-        label: {
-            color: '#000'
-        },
+    playInterval?: number
 
-        data: []
-    },
+    realtime?: boolean
 
-    /**
-     * @override
-     */
-    init: function (option, parentModel, ecModel) {
+    controlPosition?: 'left' | 'right' | 'top' | 'bottom'
 
-        /**
-         * @private
-         * @type {module:echarts/data/List}
-         */
-        this._data;
+    padding?: number | number[]
 
-        /**
-         * @private
-         * @type {Array.<string>}
-         */
-        this._names;
+    orient?: LayoutOrient
 
-        this.mergeDefaultAndTheme(option, ecModel);
-        this._initData();
-    },
+    inverse?: boolean
+
+    lineStyle?: TimelineLineStyleOption
+    itemStyle?: ItemStyleOption
+    checkpointStyle?: TimelineCheckpointStyle
+    controlStyle?: TimelineControlStyle
+    label?: TimelineLabelOption
+
+    emphasis?: {
+        lineStyle?: TimelineLineStyleOption
+        itemStyle?: ItemStyleOption
+        checkpointStyle?: TimelineCheckpointStyle
+        controlStyle?: TimelineControlStyle
+        label?: TimelineLabelOption
+    }
+
+    data?: (OptionDataValue | TimelineDataItemOption)[]
+}
+class TimelineModel extends ComponentModel<TimelineOption> {
+
+    static type = 'timeline'
+    type = TimelineModel.type
+
+    layoutMode = 'box'
+
+    private _data: List<TimelineModel>
+
+    private _names: string[]
 
     /**
      * @override
      */
-    mergeOption: function (option) {
-        TimelineModel.superApply(this, 'mergeOption', arguments);
+    init(option: TimelineOption, parentModel: Model, ecModel: GlobalModel) {
+        this.mergeDefaultAndTheme(option, ecModel);
         this._initData();
-    },
+    }
 
     /**
-     * @param {number} [currentIndex]
+     * @override
      */
-    setCurrentIndex: function (currentIndex) {
+    mergeOption(option: TimelineOption) {
+        super.mergeOption.apply(this, arguments as any);
+        this._initData();
+    }
+
+    setCurrentIndex(currentIndex: number) {
         if (currentIndex == null) {
             currentIndex = this.option.currentIndex;
         }
@@ -114,91 +179,139 @@ var TimelineModel = ComponentModel.extend({
         }
 
         this.option.currentIndex = currentIndex;
-    },
+    }
 
     /**
      * @return {number} currentIndex
      */
-    getCurrentIndex: function () {
+    getCurrentIndex() {
         return this.option.currentIndex;
-    },
+    }
 
     /**
      * @return {boolean}
      */
-    isIndexMax: function () {
+    isIndexMax() {
         return this.getCurrentIndex() >= this._data.count() - 1;
-    },
+    }
 
     /**
      * @param {boolean} state true: play, false: stop
      */
-    setPlayState: function (state) {
+    setPlayState(state: boolean) {
         this.option.autoPlay = !!state;
-    },
+    }
 
     /**
      * @return {boolean} true: play, false: stop
      */
-    getPlayState: function () {
+    getPlayState() {
         return !!this.option.autoPlay;
-    },
+    }
 
     /**
      * @private
      */
-    _initData: function () {
+    _initData() {
         var thisOption = this.option;
         var dataArr = thisOption.data || [];
         var axisType = thisOption.axisType;
-        var names = this._names = [];
+        var names: string[] = this._names = [];
 
+        var processedDataArr: TimelineOption['data'];
         if (axisType === 'category') {
-            var idxArr = [];
-            zrUtil.each(dataArr, function (item, index) {
+            processedDataArr = [];
+            each(dataArr, function (item, index) {
                 var value = modelUtil.getDataItemValue(item);
                 var newItem;
 
-                if (zrUtil.isObject(item)) {
-                    newItem = zrUtil.clone(item);
-                    newItem.value = index;
+                if (isObject(item)) {
+                    newItem = clone(item);
+                    (newItem as TimelineDataItemOption).value = index;
                 }
                 else {
                     newItem = index;
                 }
 
-                idxArr.push(newItem);
+                processedDataArr.push(newItem);
 
-                if (!zrUtil.isString(value) && (value == null || isNaN(value))) {
+                if (!isString(value) && (value == null || isNaN(value as number))) {
                     value = '';
                 }
 
                 names.push(value + '');
             });
-            dataArr = idxArr;
+        }
+        else {
+            processedDataArr = dataArr;
         }
 
-        var dimType = ({category: 'ordinal', time: 'time'})[axisType] || 'number';
+        var dimType = ({
+            category: 'ordinal',
+            time: 'time',
+            value: 'number'
+        })[axisType] || 'number';
 
-        var data = this._data = new List([{name: 'value', type: dimType}], this);
+        var data = this._data = new List([{
+            name: 'value', type: dimType
+        }], this);
 
-        data.initData(dataArr, names);
-    },
+        data.initData(processedDataArr, names);
+    }
 
-    getData: function () {
+    getData() {
         return this._data;
-    },
+    }
 
     /**
      * @public
      * @return {Array.<string>} categoreis
      */
-    getCategories: function () {
+    getCategories() {
         if (this.get('axisType') === 'category') {
             return this._names.slice();
         }
     }
 
-});
+    /**
+     * @protected
+     */
+    static defaultOption: TimelineOption = {
+
+        zlevel: 0,                  // 一级层叠
+        z: 4,                       // 二级层叠
+        show: true,
+
+        axisType: 'time',  // 模式是时间类型，支持 value, category
+
+        realtime: true,
+
+        left: '20%',
+        top: null,
+        right: '20%',
+        bottom: 0,
+        width: null,
+        height: 40,
+        padding: 5,
+
+        controlPosition: 'left',           // 'left' 'right' 'top' 'bottom' 'none'
+        autoPlay: false,
+        rewind: false,                     // 反向播放
+        loop: true,
+        playInterval: 2000,                // 播放时间间隔，单位ms
+
+        currentIndex: 0,
+
+        itemStyle: {},
+        label: {
+            color: '#000'
+        },
+
+        data: []
+    }
+
+}
+
+ComponentModel.registerClass(TimelineModel);
 
 export default TimelineModel;
\ No newline at end of file

src/component/timeline/TimelineView.ts

@@ -17,10 +17,11 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import ComponentView from '../../view/Component';
 
-export default ComponentView.extend({
-    type: 'timeline'
-});
+class TimelineView extends ComponentView {
+    static type = 'timeline'
+    type = TimelineView.type
+}
+
+export default TimelineView;

src/component/timeline/timelineAction.ts

@@ -17,18 +17,28 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as echarts from '../../echarts';
-import * as zrUtil from 'zrender/src/core/util';
+import GlobalModel from '../../model/Global';
+import TimelineModel from './TimelineModel';
+import { defaults } from 'zrender/src/core/util';
+import { Payload } from '../../util/types';
+
+export interface TimelineChangePayload extends Payload {
+    type: 'timelineChange'
+    currentIndex: number
+}
+export interface TimelinePlayChangePayload extends Payload {
+    type: 'timelinePlayChange'
+    playState: boolean
+}
 
 echarts.registerAction(
 
     {type: 'timelineChange', event: 'timelineChanged', update: 'prepareAndUpdate'},
 
-    function (payload, ecModel) {
+    function (payload: TimelineChangePayload, ecModel: GlobalModel) {
 
-        var timelineModel = ecModel.getComponent('timeline');
+        var timelineModel = ecModel.getComponent('timeline') as TimelineModel;
         if (timelineModel && payload.currentIndex != null) {
             timelineModel.setCurrentIndex(payload.currentIndex);
 
@@ -40,7 +50,7 @@ echarts.registerAction(
         // Set normalized currentIndex to payload.
         ecModel.resetOption('timeline');
 
-        return zrUtil.defaults({
+        return defaults({
             currentIndex: timelineModel.option.currentIndex
         }, payload);
     }
@@ -50,8 +60,8 @@ echarts.registerAction(
 
     {type: 'timelinePlayChange', event: 'timelinePlayChanged', update: 'update'},
 
-    function (payload, ecModel) {
-        var timelineModel = ecModel.getComponent('timeline');
+    function (payload: TimelinePlayChangePayload, ecModel: GlobalModel) {
+        var timelineModel = ecModel.getComponent('timeline') as TimelineModel;
         if (timelineModel && payload.playState != null) {
             timelineModel.setPlayState(payload.playState);
         }

src/component/timeline/typeDefaulter.ts

@@ -17,8 +17,6 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import Component from '../../model/Component';
 
 Component.registerSubTypeDefaulter('timeline', function () {