Skip to content

Commit 8586d4d

Browse files
ethanalvizoethanalvizo
authored
revert: adding back "Table rendering support for databars (#1212)" (#1365)
1 parent a5d4e21 commit 8586d4d

28 files changed

Lines changed: 2164 additions & 748 deletions

‎packages/code-studio/src/styleguide/Grids.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import StaticExample from './grid-examples/StaticExample';
1313
import QuadrillionExample from './grid-examples/QuadrillionExample';
1414
import TreeExample from './grid-examples/TreeExample';
1515
import AsyncExample from './grid-examples/AsyncExample';
16+
import DataBarExample from './grid-examples/DataBarExample';
1617

1718
function Grids(): ReactElement {
1819
const dh = useApi();
@@ -34,6 +35,10 @@ function Grids(): ReactElement {
3435
<div style={{ height: 200 }}>
3536
<StaticExample />
3637
</div>
38+
<h2 className="ui-title">Data Bar</h2>
39+
<div style={{ height: 500 }}>
40+
<DataBarExample />
41+
</div>
3742
<h2 className="ui-title">Quadrillion rows and columns</h2>
3843
<div style={{ height: 500, position: 'relative' }}>
3944
<QuadrillionExample />

‎packages/code-studio/src/styleguide/grid-examples/DataBarExample.tsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import React, { useState } from 'react';
2+
import { Grid, MockDataBarGridModel } from '@deephaven/grid';
3+
import { ColorMap } from 'packages/grid/src/DataBarGridModel';
4+
5+
function DataBarExample() {
6+
const columnData = [100, 50, 20, 10, -10, -20, -50, -30, 100, 0, 1];
7+
const data: number[][] = [];
8+
const columnAxes = new Map([
9+
[0, 'proportional'],
10+
[1, 'middle'],
11+
[2, 'directional'],
12+
[6, 'directional'],
13+
[7, 'directional'],
14+
[8, 'directional'],
15+
[9, 'directional'],
16+
[10, 'directional'],
17+
]);
18+
const positiveColors: ColorMap = new Map([
19+
[3, '#72d7df'],
20+
[4, '#ac9cf4'],
21+
]);
22+
positiveColors.set(5, ['#f3cd5b', '#9edc6f']);
23+
positiveColors.set(19, ['#42f54b', '#42b9f5', '#352aa8']);
24+
25+
const negativeColors: ColorMap = new Map([
26+
[3, '#f3cd5b'],
27+
[4, '#ac9cf4'],
28+
]);
29+
negativeColors.set(5, ['#f95d84', '#f3cd5b']);
30+
negativeColors.set(19, ['#e05536', '#e607de', '#e6e207']);
31+
32+
const valuePlacements = new Map([
33+
[6, 'hide'],
34+
[7, 'overlap'],
35+
[8, 'overlap'],
36+
[9, 'overlap'],
37+
]);
38+
const opacities = new Map([
39+
[7, 0.5],
40+
[8, 0.5],
41+
[9, 0.5],
42+
]);
43+
const directions = new Map([
44+
[8, 'RTL'],
45+
[10, 'RTL'],
46+
[16, 'RTL'],
47+
[19, 'RTL'],
48+
]);
49+
const textAlignments = new Map([
50+
[9, 'left'],
51+
[11, 'left'],
52+
]);
53+
const markers = new Map([
54+
[
55+
12,
56+
[
57+
{ column: 13, color: 'white' },
58+
{ column: 14, color: 'gray' },
59+
],
60+
],
61+
]);
62+
for (let i = 0; i < 13; i += 1) {
63+
data.push(columnData.slice());
64+
}
65+
data.push([70, 60, 30, 20, -10, -30, -20, -50, 80, 50, 10]);
66+
data.push([50, 20, 10, 0, 0, -10, -30, 10, 90, 20, 40]);
67+
data.push([-100, -90, -80, -70, -60, -50, -40, -30, -20, -10, 0]);
68+
data.push(columnData.slice());
69+
// Decimals
70+
data.push([
71+
100,
72+
10.5,
73+
11.234,
74+
-20.5,
75+
-50,
76+
-2.5,
77+
-15.1234,
78+
94.254,
79+
25,
80+
44.4444,
81+
-50.5,
82+
]);
83+
84+
// Big values
85+
data.push([
86+
1000000,
87+
10,
88+
200,
89+
-20000,
90+
-2000000,
91+
-25,
92+
-900000,
93+
800000,
94+
100000,
95+
450000,
96+
1,
97+
]);
98+
99+
// RTL gradient with multiple colors
100+
data.push(columnData.slice());
101+
102+
// Both data bar and text
103+
data.push(columnData.slice());
104+
data.push(columnData.slice());
105+
const [model] = useState(
106+
() =>
107+
new MockDataBarGridModel(
108+
data,
109+
columnAxes,
110+
positiveColors,
111+
negativeColors,
112+
valuePlacements,
113+
opacities,
114+
directions,
115+
textAlignments,
116+
markers
117+
)
118+
);
119+
120+
return <Grid model={model} />;
121+
}
122+
123+
export default DataBarExample;

‎packages/grid/src/CellRenderer.ts‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/* eslint-disable class-methods-use-this */
2+
import { getOrThrow } from '@deephaven/utils';
3+
import { isExpandableGridModel } from './ExpandableGridModel';
4+
import { VisibleIndex, Coordinate, BoxCoordinates } from './GridMetrics';
5+
import GridRenderer from './GridRenderer';
6+
import { GridRenderState } from './GridRendererTypes';
7+
import { GridColor } from './GridTheme';
8+
import memoizeClear from './memoizeClear';
9+
10+
export type CellRenderType = 'text' | 'dataBar';
11+
12+
abstract class CellRenderer {
13+
abstract drawCellContent(
14+
context: CanvasRenderingContext2D,
15+
state: GridRenderState,
16+
column: VisibleIndex,
17+
row: VisibleIndex
18+
): void;
19+
20+
drawCellRowTreeMarker(
21+
context: CanvasRenderingContext2D,
22+
state: GridRenderState,
23+
row: VisibleIndex
24+
): void {
25+
const { metrics, model, mouseX, mouseY, theme } = state;
26+
const {
27+
firstColumn,
28+
gridX,
29+
gridY,
30+
allColumnXs,
31+
allColumnWidths,
32+
allRowYs,
33+
allRowHeights,
34+
visibleRowTreeBoxes,
35+
} = metrics;
36+
const { treeMarkerColor, treeMarkerHoverColor } = theme;
37+
const columnX = getOrThrow(allColumnXs, firstColumn);
38+
const columnWidth = getOrThrow(allColumnWidths, firstColumn);
39+
const rowY = getOrThrow(allRowYs, row);
40+
const rowHeight = getOrThrow(allRowHeights, row);
41+
if (!isExpandableGridModel(model) || !model.isRowExpandable(row)) {
42+
return;
43+
}
44+
45+
const treeBox = getOrThrow(visibleRowTreeBoxes, row);
46+
const color =
47+
mouseX != null &&
48+
mouseY != null &&
49+
mouseX >= gridX + columnX &&
50+
mouseX <= gridX + columnX + columnWidth &&
51+
mouseY >= gridY + rowY &&
52+
mouseY <= gridY + rowY + rowHeight
53+
? treeMarkerHoverColor
54+
: treeMarkerColor;
55+
56+
this.drawTreeMarker(
57+
context,
58+
state,
59+
columnX,
60+
rowY,
61+
treeBox,
62+
color,
63+
model.isRowExpanded(row)
64+
);
65+
}
66+
67+
drawTreeMarker(
68+
context: CanvasRenderingContext2D,
69+
state: GridRenderState,
70+
columnX: Coordinate,
71+
rowY: Coordinate,
72+
treeBox: BoxCoordinates,
73+
color: GridColor,
74+
isExpanded: boolean
75+
): void {
76+
const { x1, y1, x2, y2 } = treeBox;
77+
const markerText = isExpanded ? '⊟' : '⊞';
78+
const textX = columnX + (x1 + x2) * 0.5 + 0.5;
79+
const textY = rowY + (y1 + y2) * 0.5 + 0.5;
80+
context.fillStyle = color;
81+
context.textAlign = 'center';
82+
context.fillText(markerText, textX, textY);
83+
}
84+
85+
getCachedTruncatedString = memoizeClear(
86+
(
87+
context: CanvasRenderingContext2D,
88+
text: string,
89+
width: number,
90+
fontWidth: number,
91+
truncationChar?: string
92+
): string =>
93+
GridRenderer.truncateToWidth(
94+
context,
95+
text,
96+
width,
97+
fontWidth,
98+
truncationChar
99+
),
100+
{ max: 10000 }
101+
);
102+
}
103+
104+
export default CellRenderer;

0 commit comments

Comments
 (0)
⚡