| 71 | } |
| 72 | |
| 73 | export class Table extends BaseChart { |
| 74 | table?: TableSheet = undefined |
| 75 | |
| 76 | container: S2MountContainer | null = null |
| 77 | |
| 78 | debounceRender: any |
| 79 | |
| 80 | resizeObserver: ResizeObserver |
| 81 | |
| 82 | constructor(id: string) { |
| 83 | super(id, 'table') |
| 84 | this.container = document.getElementById(id) |
| 85 | |
| 86 | this.debounceRender = debounce(async (width?: number, height?: number) => { |
| 87 | if (this.table) { |
| 88 | this.table.changeSheetSize(width, height) |
| 89 | await this.table.render(false) |
| 90 | } |
| 91 | }, 200) |
| 92 | |
| 93 | this.resizeObserver = new ResizeObserver(([entry] = []) => { |
| 94 | const [size] = entry.borderBoxSize || [] |
| 95 | this.debounceRender(size.inlineSize, size.blockSize) |
| 96 | }) |
| 97 | |
| 98 | if (this.container?.parentElement) { |
| 99 | this.resizeObserver.observe(this.container.parentElement) |
| 100 | } |
| 101 | } |
| 102 | |
| 103 | init(axis: Array<ChartAxis>, data: Array<ChartData>) { |
| 104 | super.init( |
| 105 | filter(axis, (a) => !a.hidden), //隐藏多指标的other-info列 |
| 106 | data |
| 107 | ) |
| 108 | |
| 109 | const s2DataConfig: S2DataConfig = { |
| 110 | sortParams: |
| 111 | this.axis?.map((a) => { |
| 112 | return { |
| 113 | sortFieldId: a.value, |
| 114 | } |
| 115 | }) ?? [], |
| 116 | fields: { |
| 117 | columns: this.axis?.map((a) => a.value) ?? [], |
| 118 | }, |
| 119 | meta: |
| 120 | this.axis?.map((a) => { |
| 121 | return { |
| 122 | field: a.value, |
| 123 | name: a.name, |
| 124 | formatter: (value: any) => { |
| 125 | const formatted = formatNumber(value) |
| 126 | return String(formatted) |
| 127 | }, |
| 128 | } |
| 129 | }) ?? [], |
| 130 | data: this.data, |