fix(module:chart:timeline): remove tickCount (#323)

ng-alain · Dec 17, 2018 · 20920fc · 20920fc
1 parent bdadd84
commit 20920fc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 30 deletions.
diff --git a/packages/chart/timeline/index.md b/packages/chart/timeline/index.md
@@ -14,16 +14,15 @@ type: Components
 |-----------------|------------------|-------------------------------|------------------------------------|
 | `[delay]` | 延迟渲染，单位：毫秒 | `number` | `0` |
 | `[title]` | 图表标题 | `string,TemplateRef<void>` | - |
-| `[tickCount]` | 坐标轴上刻度点的个数 | `number` | `8` |
-| `[data]` | 数据，至少`tickCount`条数据以上 | `G2TimelineData[]` | - |
+| `[data]` | 数据 | `G2TimelineData[]` | - |
 | `[titleMap]` | 指标别名 | `{ y1: string , y2: string }` | - |
 | `[colorMap]` | 颜色 | `{ y1: string , y2: string }` | `{ y1: '#1890FF', y2: '#2FC25B' }` |
 | `[height]` | 高度值 | `number` | `400` |
 | `[padding]` | 图表内部间距 | `number[]` | `[60, 20, 40, 40]` |
 | `[borderWidth]` | 线条 | `number` | `2` |
 | `[mask]` | 日期格式 | `string` | `HH:mm` |
 | `[position]` | 标题位置 | `top,right,bottom,left` | `'top'` |
-| `[slider]` | 是否需要滑动条   | `boolean` | `true` |
+| `[slider]`  | 是否需要滑动条 | `boolean`    | `true`  |
 
 ### G2TimelineData
 

diff --git a/packages/chart/timeline/timeline.component.ts b/packages/chart/timeline/timeline.component.ts
@@ -50,7 +50,6 @@ export class G2TimelineComponent implements OnInit, OnDestroy, OnChanges {
  @Input() @InputNumber() height = 400;
  @Input() padding: number[] = [60, 20, 40, 40];
  @Input() @InputNumber() borderWidth = 2;
- @Input() @InputNumber() tickCount = 8;
  @Input() @InputBoolean() slider = true;
 
  // #endregion
@@ -60,7 +59,7 @@ export class G2TimelineComponent implements OnInit, OnDestroy, OnChanges {
  }
 
  private install() {
- const { node, sliderNode, height, padding, mask, tickCount, slider } = this;
+ const { node, sliderNode, height, padding, mask, slider } = this;
  const chart = this.chart = new G2.Chart({
  container: node.nativeElement,
  forceFit: true,
@@ -87,7 +86,8 @@ export class G2TimelineComponent implements OnInit, OnDestroy, OnChanges {
  scales: {
  x: {
  type: 'time',
- tickCount,
+ tickInterval: 60 * 60 * 1000,
+ range: [0, 1],
  mask,
  },
  },
@@ -106,7 +106,7 @@ export class G2TimelineComponent implements OnInit, OnDestroy, OnChanges {
  }
 
  private attachChart() {
- const { chart, _slider, slider, height, padding, data, mask, titleMap, position, colorMap, borderWidth, tickCount } = this;
+ const { chart, _slider, slider, height, padding, data, mask, titleMap, position, colorMap, borderWidth } = this;
  if (!chart || !data || data.length <= 0) return ;
 
  chart.legend({
@@ -123,42 +123,39 @@ export class G2TimelineComponent implements OnInit, OnDestroy, OnChanges {
  chart.get('geoms').forEach((v, idx) => {
  v.color(colorMap[`y${idx + 1}`]).size(borderWidth);
  });
+ chart.set('height', height);
+ chart.set('padding', padding);
 
  data.filter(v => !(v.x instanceof Number)).forEach(v => {
  v.x = +new Date(v.x);
  });
  data.sort((a, b) => +a.x - +b.x);
-
- chart.set('height', height);
- chart.set('padding', padding);
-
- const begin = Math.ceil(data.length > tickCount ? (data.length - tickCount) / 2 : 0);
-
- const ds = new DataSet({
- state: {
- start: data[begin - 1].x,
- end: data[begin - 1 + tickCount].x,
- },
- });
- const dv = ds.createView().source(data);
- dv.source(data).transform({
- type: 'filter',
- callback: (val: G2TimelineData) => {
- const time = +val.x; // !注意：时间格式，建议转换为时间戳进行比较
- return time >= ds.state.start && time <= ds.state.end;
- },
- });
  let max;
  if (data[0] && data[0].y1 && data[0].y2) {
  max = Math.max(
- data.sort((a, b) => b.y1 - a.y1)[0].y1,
- data.sort((a, b) => b.y2 - a.y2)[0].y2,
+ [...data].sort((a, b) => b.y1 - a.y1)[0].y1,
+ [...data].sort((a, b) => b.y2 - a.y2)[0].y2,
  );
  }
+ const ds = new DataSet({
+ state: {
+ start: data[0].x,
+ end: data[data.length - 1].x,
+ },
+ });
+ const dv = ds.createView();
+ dv.source(data)
+ .transform({
+ type: 'filter',
+ callback: (val: G2TimelineData) => {
+ const time = +val.x;
+ return time >= ds.state.start && time <= ds.state.end;
+ },
+ })
+ ;
  chart.source(dv, {
  x: {
  type: 'timeCat',
- tickCount,
  mask,
  range: [0, 1],
  },