@@ -4,11 +4,12 @@ import * as ChartClient from '../ChartClient';
4 4
import * as ChartUtils from './Components/ChartUtils';
5 5
import { translate, scale, rotate, skewX, skewY, matrix, scaleFor } from './Components/ChartUtils';
6 6
import { ChartRow, ChartScriptProps } from '../ChartClient';
7 -
import TextEllipsis from './Components/TextEllipsis';
8 7
import { XKeyTicks, YScaleTicks, YKeyTicks, XScaleTicks } from './Components/Ticks';
9 8
import { XAxis, YAxis } from './Components/Axis';
10 9
import { Rule } from './Components/Rule';
11 10
import InitialMessage from './Components/InitialMessage';
11 +
import TextIfFits from './Components/TextIfFits';
12 +
import TextEllipsis from './Components/TextEllipsis';
12 13 13 14 14 15
export default function renderBars({ data, width, height, parameters, loading, onDrillDown, initialLoad, chartRequest, memo, dashboardFilter }: ChartScriptProps): React.ReactElement<any> {
@@ -70,6 +71,8 @@ export default function renderBars({ data, width, height, parameters, loading, o
70 71 71 72
var detector = dashboardFilter?.getActiveDetector(chartRequest);
72 73 74 +
const bandMargin = y.bandwidth() > 20 ? 2 : 0;
75 + 73 76
return (
74 77
<svg direction="ltr" width={width} height={height}>
75 78
<g opacity={dashboardFilter ? .5 : undefined}>
@@ -79,98 +82,85 @@ export default function renderBars({ data, width, height, parameters, loading, o
79 82 80 83
{/*PAINT GRAPH*/}
81 84
<g className="shape" transform={translate(xRule.start('content'), yRule.start('content'))}>
82 -
{orderedRows.map(r => {
85 +
{keyValues.map(k => {
83 86 84 -
var active = detector?.(r);
87 +
var key = keyColumn.getKey(k);
85 88 86 -
var key = keyColumn.getValueKey(r);
89 +
var row: ChartRow | undefined = rowsByKey[key];
90 +
var active = detector?.(row);
87 91 88 -
return (
89 -
<rect key={key} className="shape sf-transition"
90 -
opacity={active == false ? .5 : undefined}
91 -
stroke={active == true ? "black" : y.bandwidth() > 4 ? '#fff' : undefined}
92 -
strokeWidth={active == true ? 3 : undefined}
93 -
transform={translate(0, y(key)!) + (initialLoad ? scale(0, 1) : scale(1, 1))}
94 -
width={x(valueColumn.getValue(r))}
95 -
height={y.bandwidth()}
96 -
fill={keyColumn.getValueColor(r) ?? color(key)}
97 -
onClick={e => onDrillDown(r, e)}
98 -
cursor="pointer">
99 -
<title>
100 -
{keyColumn.getValueNiceName(r) + ': ' + valueColumn.getValueNiceName(r)}
101 -
</title>
102 -
</rect>
103 -
);
104 -
})}
105 -
</g>
92 +
var posx = x(row ? valueColumn.getValue(row) : 0)!;
106 93 107 -
{y.bandwidth() > 15 &&
108 -
(isMargin ?
109 -
<g className="y-label" transform={translate(xRule.end('labels'), yRule.start('content') + y.bandwidth() / 2)}>
110 -
{(isAll ? keyValues : orderedRows.map(r => keyColumn.getValue(r))).map(k => <TextEllipsis key={keyColumn.getKey(k)}
111 -
transform={translate(0, y(keyColumn.getKey(k))!)}
112 -
maxWidth={xRule.size('labels')}
113 -
padding={labelMargin}
114 -
className="y-label sf-transition"
115 -
fill={(keyColumn.getColor(k) ?? color(keyColumn.getKey(k)))}
116 -
dominantBaseline="middle"
117 -
textAnchor="end"
118 -
fontWeight="bold"
119 -
onClick={e => onDrillDown({ c0: k }, e)}
120 -
cursor="pointer">
121 -
{keyColumn.getNiceName(k)}
122 -
</TextEllipsis>)}
123 -
</g> :
124 -
isInside ?
125 -
<g className="y-label" transform={translate(xRule.start('content') + labelMargin, yRule.start('content') + y.bandwidth() / 2)}>
126 -
{(isAll ? keyValues : orderedRows.map(r => keyColumn.getValue(r))).map(k => {
127 - 128 -
var row = rowsByKey[keyColumn.getKey(k)];
129 - 130 -
var posx = x(row ? valueColumn.getValue(row) : 0)!;
131 -
return (
132 -
<TextEllipsis key={keyColumn.getKey(k)}
133 -
transform={translate(posx >= size / 2 ? 0 : posx, y(keyColumn.getKey(k))!)}
134 -
maxWidth={posx >= size / 2 ? posx : size - posx}
94 +
return (
95 +
<g className="shadow-group" key={key}>
96 +
{row && <rect className="shape sf-transition shadow"
97 +
opacity={active == false ? .5 : undefined}
98 +
transform={translate(0, y(key)! + bandMargin) + (initialLoad ? scale(0, 1) : scale(1, 1))}
99 +
width={x(valueColumn.getValue(row))}
100 +
height={y.bandwidth() - bandMargin * 2}
101 +
fill={keyColumn.getValueColor(row) ?? color(key)}
102 +
onClick={e => onDrillDown(row!, e)}
103 +
cursor="pointer">
104 +
<title>
105 +
{keyColumn.getValueNiceName(row) + ': ' + valueColumn.getValueNiceName(row)}
106 +
</title>
107 +
</rect>
108 +
}
109 +
{y.bandwidth() > 15 && (isAll || row != null) &&
110 +
(isMargin ?
111 +
<g className="y-label" transform={translate(-labelMargin, y.bandwidth() / 2)}>
112 +
<TextEllipsis
113 +
transform={translate(0, y(keyColumn.getKey(key))!)}
114 +
maxWidth={xRule.size('labels')}
115 +
padding={labelMargin}
116 +
className="y-label sf-transition"
117 +
fill={(keyColumn.getColor(key) ?? color(keyColumn.getKey(key)))}
118 +
dominantBaseline="middle"
119 +
textAnchor="end"
120 +
fontWeight="bold"
121 +
onClick={e => onDrillDown({ c0: key }, e)}
122 +
cursor="pointer">
123 +
{keyColumn.getNiceName(key)}
124 +
</TextEllipsis>)
125 +
</g> :
126 +
isInside ?
127 +
<g className="y-label" transform={translate(labelMargin, y.bandwidth() / 2)}>
128 +
<TextEllipsis
129 +
transform={translate(posx >= size / 2 ? 0 : posx, y(keyColumn.getKey(key))!)}
130 +
maxWidth={posx >= size / 2 ? posx : size - posx}
131 +
padding={labelMargin}
132 +
className="y-label sf-transition"
133 +
fill={posx >= size / 2 ? '#fff' : (keyColumn.getColor(key) ?? color(keyColumn.getKey(key)))}
134 +
dominantBaseline="middle"
135 +
fontWeight="bold"
136 +
onClick={e => onDrillDown({ c0: key }, e)}
137 +
cursor="pointer">
138 +
{keyColumn.getNiceName(key)}
139 +
</TextEllipsis>
140 +
</g> : null
141 +
)}
142 +
{y.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 && row &&
143 +
<g className="numbers-label">
144 +
<TextIfFits
145 +
transform={translate(x(valueColumn.getValue(row))! / 2, y(keyColumn.getValueKey(row))! + y.bandwidth() / 2)}
146 +
maxWidth={x(valueColumn.getValue(row))!}
135 147
padding={labelMargin}
136 -
className="y-label sf-transition"
137 -
fill={posx >= size / 2 ? '#fff' : (keyColumn.getColor(k) ?? color(keyColumn.getKey(k)))}
148 +
className="number-label sf-transition"
149 +
fill={parameters["NumberColor"] ?? "#000"}
138 150
dominantBaseline="middle"
151 +
opacity={parameters["NumberOpacity"]}
152 +
textAnchor="middle"
139 153
fontWeight="bold"
140 -
onClick={e => onDrillDown({ c0: k }, e)}
154 +
onClick={e => onDrillDown(row!, e)}
141 155
cursor="pointer">
142 -
{keyColumn.getNiceName(k)}
143 -
</TextEllipsis>
144 -
);
145 -
})}
146 -
</g> : null
147 -
)}
148 - 149 -
{y.bandwidth() > 15 && parseFloat(parameters["NumberOpacity"]) > 0 &&
150 -
<g className="numbers-label" transform={translate(xRule.start('content'), yRule.start('content'))}>
151 -
{orderedRows
152 -
.filter(r => x(valueColumn.getValue(r))! > 20)
153 -
.map(r => {
154 -
var posx = x(valueColumn.getValue(r))!;
155 - 156 -
return (<TextEllipsis key={keyColumn.getValueKey(r)}
157 -
transform={translate(x(valueColumn.getValue(r))! / 2, y(keyColumn.getValueKey(r))! + y.bandwidth() / 2)}
158 -
maxWidth={posx >= size / 2 ? posx : size - posx}
159 -
padding={labelMargin}
160 -
className="number-label sf-transition"
161 -
fill={parameters["NumberColor"] ?? "#000"}
162 -
dominantBaseline="middle"
163 -
opacity={parameters["NumberOpacity"]}
164 -
textAnchor="middle"
165 -
fontWeight="bold"
166 -
onClick={e => onDrillDown(r, e)}
167 -
cursor="pointer">
168 -
{valueColumn.getValueNiceName(r)}
169 -
</TextEllipsis>);
170 -
})}
171 -
</g>
172 -
}
173 - 156 +
{valueColumn.getValueNiceName(row)}
157 +
</TextIfFits>
158 +
</g>
159 +
}
160 +
</g>
161 +
);
162 +
})}
163 +
</g>
174 164
<InitialMessage data={data} x={xRule.middle("content")} y={yRule.middle("content")} loading={loading} />
175 165
<g opacity={dashboardFilter ? .5 : undefined}>
176 166
<XAxis xRule={xRule} yRule={yRule} />
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4