/
SparklineCellRenderer.ts
101 lines (94 loc) · 2.87 KB
/
SparklineCellRenderer.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import {
Column,
INumbersColumn,
NumbersColumn,
isNumbersColumn,
IDataRow,
IOrderedGroup,
isMissingValue,
} from '../model';
import { matchRows } from './ANumbersCellRenderer';
import {
IRenderContext,
ERenderMode,
ICellRendererFactory,
ISummaryRenderer,
IGroupCellRenderer,
ICellRenderer,
} from './interfaces';
import { renderMissingDOM } from './missing';
import { forEachChild, noRenderer } from './utils';
import type { ISequence } from '../internal';
import { cssClass } from '../styles';
/** @internal */
export function line(data: ISequence<number>) {
if (data.length === 0) {
return '';
}
let p = '';
let moveNext = true;
data.forEach((d, i) => {
if (Number.isNaN(d)) {
moveNext = true;
} else if (moveNext) {
p += `M${i},${1 - d} `;
moveNext = false;
} else {
p += `L${i},${1 - d} `;
}
});
return p;
}
export default class SparklineCellRenderer implements ICellRendererFactory {
readonly title: string = 'Sparkline';
canRender(col: Column, mode: ERenderMode) {
return isNumbersColumn(col) && mode !== ERenderMode.SUMMARY;
}
create(col: INumbersColumn): ICellRenderer {
const dataLength = col.dataLength!;
const yPos = 1 - col.getMapping().apply(NumbersColumn.CENTER);
return {
template: `<svg viewBox="0 0 ${dataLength - 1} 1" preserveAspectRatio="none meet"><line x1="0" x2="${
dataLength - 1
}" y1="${yPos}" y2="${yPos}"></line><path></path></svg>`,
update: (n: HTMLElement, d: IDataRow) => {
if (renderMissingDOM(n, col, d)) {
return;
}
const data = col.getNumbers(d);
n.lastElementChild!.setAttribute('d', line(data));
},
};
}
createGroup(col: INumbersColumn, context: IRenderContext): IGroupCellRenderer {
const dataLength = col.dataLength!;
const yPos = 1 - col.getMapping().apply(NumbersColumn.CENTER);
return {
template: `<svg viewBox="0 0 ${dataLength - 1} 1" preserveAspectRatio="none meet"><line x1="0" x2="${
dataLength - 1
}" y1="${yPos}" y2="${yPos}"></line><path></path></svg>`,
update: (n: HTMLElement, group: IOrderedGroup) => {
//overlapping ones
matchRows(n, group.order.length, `<path></path>`);
return context.tasks
.groupRows(col, group, 'numbers', (r) => Array.from(r.map((d) => col.getNumbers(d))))
.then((vs) => {
if (typeof vs === 'symbol') {
return;
}
const isMissing = vs.length === 0 || vs.every((v) => v.every(isMissingValue));
n.classList.toggle(cssClass('missing'), isMissing);
if (isMissing) {
return;
}
forEachChild(n, (row, i) => {
row.setAttribute('d', line(vs[i]));
});
});
},
};
}
createSummary(): ISummaryRenderer {
return noRenderer;
}
}