1 | import { deepMix, each, filter, get } from '@antv/util';
|
2 | import { DIRECTION } from '../constant';
|
3 | import { AxisCfg, Datum, ListCfg, ListData } from '../interface';
|
4 |
|
5 | import View from '../chart/view';
|
6 | import { getFactTitleConfig } from '../util/facet';
|
7 | import { Facet } from './facet';
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | export default class List extends Facet<ListCfg, ListData> {
|
14 | protected getDefaultCfg() {
|
15 | return deepMix({}, super.getDefaultCfg(), {
|
16 | type: 'list',
|
17 | cols: null,
|
18 | showTitle: true,
|
19 | title: super.getDefaultTitleCfg(),
|
20 | });
|
21 | }
|
22 |
|
23 | public render() {
|
24 | super.render();
|
25 |
|
26 | if (this.cfg.showTitle) {
|
27 | this.renderTitle();
|
28 | }
|
29 | }
|
30 |
|
31 | protected afterEachView(view: View, facet: ListData) {
|
32 | this.processAxis(view, facet);
|
33 | }
|
34 |
|
35 | protected beforeEachView(view: View, facet: ListData) {}
|
36 |
|
37 | protected generateFacets(data: Datum[]): ListData[] {
|
38 | const { fields } = this.cfg;
|
39 | let { cols } = this.cfg;
|
40 |
|
41 | const [columnField] = fields;
|
42 | if (!columnField) {
|
43 | throw new Error('No `fields` specified!');
|
44 | }
|
45 |
|
46 | const colValues = this.getFieldValues(data, columnField);
|
47 |
|
48 | const count = colValues.length;
|
49 | cols = cols || count;
|
50 |
|
51 |
|
52 | const rows = this.getPageCount(count, cols);
|
53 | const rst = [];
|
54 |
|
55 | colValues.forEach((val, index) => {
|
56 |
|
57 | const { row, col } = this.getRowCol(index, cols);
|
58 |
|
59 | const conditions = [{ field: columnField, value: val, values: colValues }];
|
60 |
|
61 | const facetData = filter(data, this.getFacetDataFilter(conditions));
|
62 |
|
63 | const facet: ListData = {
|
64 | type: this.cfg.type,
|
65 | data: facetData,
|
66 | region: this.getRegion(rows, cols, col, row),
|
67 |
|
68 | columnValue: val,
|
69 | rowValue: val,
|
70 | columnField,
|
71 | rowField: null,
|
72 | columnIndex: col,
|
73 | rowIndex: row,
|
74 | columnValuesLength: cols,
|
75 | rowValuesLength: rows,
|
76 |
|
77 | total: count,
|
78 | };
|
79 |
|
80 | rst.push(facet);
|
81 | });
|
82 |
|
83 | return rst;
|
84 | }
|
85 |
|
86 | |
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 | protected getXAxisOption(x: string, axes: any, option: AxisCfg, facet: ListData): object {
|
94 |
|
95 | if (
|
96 | facet.rowIndex !== facet.rowValuesLength - 1 &&
|
97 | facet.columnValuesLength * facet.rowIndex + facet.columnIndex + 1 + facet.columnValuesLength <= facet.total
|
98 | ) {
|
99 | return {
|
100 | ...option,
|
101 | label: null,
|
102 | title: null,
|
103 | };
|
104 | }
|
105 | return option;
|
106 | }
|
107 |
|
108 | |
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 | protected getYAxisOption(y: string, axes: any, option: AxisCfg, facet: ListData): object {
|
116 | if (facet.columnIndex !== 0) {
|
117 | return {
|
118 | ...option,
|
119 | title: null,
|
120 | label: null,
|
121 | };
|
122 | }
|
123 | return option;
|
124 | }
|
125 |
|
126 | |
127 |
|
128 |
|
129 | private renderTitle() {
|
130 | each(this.facets, (facet: ListData) => {
|
131 | const { columnValue, view } = facet;
|
132 | const formatter = get(this.cfg.title, 'formatter');
|
133 |
|
134 | const config = deepMix(
|
135 | {
|
136 | position: ['50%', '0%'] as [string, string],
|
137 | content: formatter ? formatter(columnValue) : columnValue,
|
138 | },
|
139 | getFactTitleConfig(DIRECTION.TOP),
|
140 | this.cfg.title
|
141 | );
|
142 |
|
143 | view.annotation().text(config);
|
144 | });
|
145 | }
|
146 |
|
147 | |
148 |
|
149 |
|
150 |
|
151 |
|
152 | private getPageCount(total: number, pageSize: number): number {
|
153 | return Math.floor((total + pageSize - 1) / pageSize);
|
154 | }
|
155 |
|
156 | |
157 |
|
158 |
|
159 |
|
160 |
|
161 | private getRowCol(index: number, pageSize: number) {
|
162 | const row = Math.floor(index / pageSize);
|
163 | const col = index % pageSize;
|
164 |
|
165 | return { row, col };
|
166 | }
|
167 | }
|