提交 7360f721 编写于 作者: 1 100pah

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

...@@ -17,20 +17,24 @@ ...@@ -17,20 +17,24 @@
* under the License. * under the License.
*/ */
// @ts-nocheck import TimelineModel, { TimelineOption } from './TimelineModel';
import * as zrUtil from 'zrender/src/core/util';
import TimelineModel from './TimelineModel';
import DataFormatMixin from '../../model/mixin/dataFormat'; 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 * @protected
*/ */
defaultOption: { static defaultOption: SliderTimelineOption = {
backgroundColor: 'rgba(0,0,0,0)', // 时间轴背景颜色 backgroundColor: 'rgba(0,0,0,0)', // 时间轴背景颜色
borderColor: '#ccc', // 时间轴边框颜色 borderColor: '#ccc', // 时间轴边框颜色
...@@ -117,8 +121,14 @@ var SliderTimelineModel = TimelineModel.extend({ ...@@ -117,8 +121,14 @@ var SliderTimelineModel = TimelineModel.extend({
data: [] data: []
} }
}); }
interface SliderTimelineModel extends DataFormatMixin {
getData(): List<SliderTimelineModel>
}
mixin(SliderTimelineModel, DataFormatMixin.prototype);
zrUtil.mixin(SliderTimelineModel, DataFormatMixin.prototype); ComponentModel.registerClass(SliderTimelineModel);
export default SliderTimelineModel; export default SliderTimelineModel;
\ No newline at end of file
...@@ -17,62 +17,43 @@ ...@@ -17,62 +17,43 @@
* under the License. * under the License.
*/ */
// @ts-nocheck
import * as zrUtil from 'zrender/src/core/util';
import Axis from '../../coord/Axis'; 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 * 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';
/** // Not using the model.
* Axis model model: never
* @param {module:echarts/component/TimelineModel}
*/
this.model = null;
};
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 * @override
*/ */
getLabelModel: function () { getLabelModel() {
return this.model.getModel('label'); // Force override
}, return this.timelineModel.getModel('label') as Model<LabelOption>;
}
/** /**
* @override * @override
*/ */
isHorizontal: function () { isHorizontal() {
return this.model.get('orient') === 'horizontal'; return this.timelineModel.get('orient') === 'horizontal';
} }
}
};
zrUtil.inherits(TimelineAxis, Axis);
export default TimelineAxis; export default TimelineAxis;
\ No newline at end of file
...@@ -17,89 +17,154 @@ ...@@ -17,89 +17,154 @@
* under the License. * under the License.
*/ */
// @ts-nocheck
import * as zrUtil from 'zrender/src/core/util';
import ComponentModel from '../../model/Component'; import ComponentModel from '../../model/Component';
import List from '../../data/List'; import List from '../../data/List';
import * as modelUtil from '../../util/model'; 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
/** tooltip?: CommonTooltipOption<CallbackDataParams> & {
* @protected trigger?: 'item'
*/ }
defaultOption: {
zlevel: 0, // 一级层叠 show?: boolean
z: 4, // 二级层叠
show: true,
axisType: 'time', // 模式是时间类型,支持 value, category axisType?: 'category' | 'time' | 'value'
realtime: true, currentIndex?: number
left: '20%', autoPlay?: boolean
top: null,
right: '20%',
bottom: 0,
width: null,
height: 40,
padding: 5,
controlPosition: 'left', // 'left' 'right' 'top' 'bottom' 'none' rewind?: boolean
autoPlay: false,
rewind: false, // 反向播放
loop: true,
playInterval: 2000, // 播放时间间隔,单位ms
currentIndex: 0, loop?: boolean
itemStyle: {}, playInterval?: number
label: {
color: '#000'
},
data: [] realtime?: boolean
},
/** controlPosition?: 'left' | 'right' | 'top' | 'bottom'
* @override
*/
init: function (option, parentModel, ecModel) {
/** padding?: number | number[]
* @private
* @type {module:echarts/data/List} orient?: LayoutOrient
*/
this._data; 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[]
/** /**
* @private * @override
* @type {Array.<string>}
*/ */
this._names; init(option: TimelineOption, parentModel: Model, ecModel: GlobalModel) {
this.mergeDefaultAndTheme(option, ecModel); this.mergeDefaultAndTheme(option, ecModel);
this._initData(); this._initData();
}, }
/** /**
* @override * @override
*/ */
mergeOption: function (option) { mergeOption(option: TimelineOption) {
TimelineModel.superApply(this, 'mergeOption', arguments); super.mergeOption.apply(this, arguments as any);
this._initData(); this._initData();
}, }
/** setCurrentIndex(currentIndex: number) {
* @param {number} [currentIndex]
*/
setCurrentIndex: function (currentIndex) {
if (currentIndex == null) { if (currentIndex == null) {
currentIndex = this.option.currentIndex; currentIndex = this.option.currentIndex;
} }
...@@ -114,91 +179,139 @@ var TimelineModel = ComponentModel.extend({ ...@@ -114,91 +179,139 @@ var TimelineModel = ComponentModel.extend({
} }
this.option.currentIndex = currentIndex; this.option.currentIndex = currentIndex;
}, }
/** /**
* @return {number} currentIndex * @return {number} currentIndex
*/ */
getCurrentIndex: function () { getCurrentIndex() {
return this.option.currentIndex; return this.option.currentIndex;
}, }
/** /**
* @return {boolean} * @return {boolean}
*/ */
isIndexMax: function () { isIndexMax() {
return this.getCurrentIndex() >= this._data.count() - 1; return this.getCurrentIndex() >= this._data.count() - 1;
}, }
/** /**
* @param {boolean} state true: play, false: stop * @param {boolean} state true: play, false: stop
*/ */
setPlayState: function (state) { setPlayState(state: boolean) {
this.option.autoPlay = !!state; this.option.autoPlay = !!state;
}, }
/** /**
* @return {boolean} true: play, false: stop * @return {boolean} true: play, false: stop
*/ */
getPlayState: function () { getPlayState() {
return !!this.option.autoPlay; return !!this.option.autoPlay;
}, }
/** /**
* @private * @private
*/ */
_initData: function () { _initData() {
var thisOption = this.option; var thisOption = this.option;
var dataArr = thisOption.data || []; var dataArr = thisOption.data || [];
var axisType = thisOption.axisType; var axisType = thisOption.axisType;
var names = this._names = []; var names: string[] = this._names = [];
var processedDataArr: TimelineOption['data'];
if (axisType === 'category') { if (axisType === 'category') {
var idxArr = []; processedDataArr = [];
zrUtil.each(dataArr, function (item, index) { each(dataArr, function (item, index) {
var value = modelUtil.getDataItemValue(item); var value = modelUtil.getDataItemValue(item);
var newItem; var newItem;
if (zrUtil.isObject(item)) { if (isObject(item)) {
newItem = zrUtil.clone(item); newItem = clone(item);
newItem.value = index; (newItem as TimelineDataItemOption).value = index;
} }
else { else {
newItem = index; 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 = ''; value = '';
} }
names.push(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; return this._data;
}, }
/** /**
* @public * @public
* @return {Array.<string>} categoreis * @return {Array.<string>} categoreis
*/ */
getCategories: function () { getCategories() {
if (this.get('axisType') === 'category') { if (this.get('axisType') === 'category') {
return this._names.slice(); 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; export default TimelineModel;
\ No newline at end of file
...@@ -17,10 +17,11 @@ ...@@ -17,10 +17,11 @@
* under the License. * under the License.
*/ */
// @ts-nocheck
import ComponentView from '../../view/Component'; import ComponentView from '../../view/Component';
export default ComponentView.extend({ class TimelineView extends ComponentView {
type: 'timeline' static type = 'timeline'
}); type = TimelineView.type
}
export default TimelineView;
...@@ -17,18 +17,28 @@ ...@@ -17,18 +17,28 @@
* under the License. * under the License.
*/ */
// @ts-nocheck
import * as echarts from '../../echarts'; 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( echarts.registerAction(
{type: 'timelineChange', event: 'timelineChanged', update: 'prepareAndUpdate'}, {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) { if (timelineModel && payload.currentIndex != null) {
timelineModel.setCurrentIndex(payload.currentIndex); timelineModel.setCurrentIndex(payload.currentIndex);
...@@ -40,7 +50,7 @@ echarts.registerAction( ...@@ -40,7 +50,7 @@ echarts.registerAction(
// Set normalized currentIndex to payload. // Set normalized currentIndex to payload.
ecModel.resetOption('timeline'); ecModel.resetOption('timeline');
return zrUtil.defaults({ return defaults({
currentIndex: timelineModel.option.currentIndex currentIndex: timelineModel.option.currentIndex
}, payload); }, payload);
} }
...@@ -50,8 +60,8 @@ echarts.registerAction( ...@@ -50,8 +60,8 @@ echarts.registerAction(
{type: 'timelinePlayChange', event: 'timelinePlayChanged', update: 'update'}, {type: 'timelinePlayChange', event: 'timelinePlayChanged', update: 'update'},
function (payload, ecModel) { function (payload: TimelinePlayChangePayload, ecModel: GlobalModel) {
var timelineModel = ecModel.getComponent('timeline'); var timelineModel = ecModel.getComponent('timeline') as TimelineModel;
if (timelineModel && payload.playState != null) { if (timelineModel && payload.playState != null) {
timelineModel.setPlayState(payload.playState); timelineModel.setPlayState(payload.playState);
} }
......
...@@ -17,8 +17,6 @@ ...@@ -17,8 +17,6 @@
* under the License. * under the License.
*/ */
// @ts-nocheck
import Component from '../../model/Component'; import Component from '../../model/Component';
Component.registerSubTypeDefaulter('timeline', function () { Component.registerSubTypeDefaulter('timeline', function () {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册