@hpcc-js/chart 3.5.3 → 3.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +10 -10
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +2 -2
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +4 -4
- package/src/Column.css +34 -6
- package/src/Column.ts +261 -236
- package/src/Pie.css +32 -5
- package/src/Pie.ts +48 -9
- package/src/Scatter.css +30 -3
- package/src/Scatter.ts +26 -1
- package/src/XYAxis.ts +6 -0
- package/types/Pie.d.ts +13 -4
- package/types/Scatter.d.ts +1 -0
- package/types/XYAxis.d.ts +2 -0
package/src/Column.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { INDChart, ITooltip } from "@hpcc-js/api";
|
|
2
|
-
import { InputField, Text } from "@hpcc-js/common";
|
|
2
|
+
import { d3Event, InputField, Text } from "@hpcc-js/common";
|
|
3
3
|
import { format as d3Format } from "d3-format";
|
|
4
4
|
import { scaleBand as d3ScaleBand } from "d3-scale";
|
|
5
5
|
import { local as d3Local, select as d3Select } from "d3-selection";
|
|
@@ -34,6 +34,7 @@ export class Column extends XYAxis {
|
|
|
34
34
|
|
|
35
35
|
layerEnter(host: XYAxis, element, duration: number = 250) {
|
|
36
36
|
super.layerEnter(host, element, duration);
|
|
37
|
+
|
|
37
38
|
const context = this;
|
|
38
39
|
this
|
|
39
40
|
.tooltipHTML(function (d) {
|
|
@@ -84,6 +85,18 @@ export class Column extends XYAxis {
|
|
|
84
85
|
this.isHorizontal = isHorizontal;
|
|
85
86
|
const context = this;
|
|
86
87
|
|
|
88
|
+
if (this.tabNavigation() && host.parentRelativeDiv) {
|
|
89
|
+
host.parentRelativeDiv
|
|
90
|
+
.attr("tabindex", "0")
|
|
91
|
+
.attr("role", "group")
|
|
92
|
+
.attr("aria-label", `${this.columns()[0] || "Chart"} data`);
|
|
93
|
+
} else if (host.parentRelativeDiv) {
|
|
94
|
+
host.parentRelativeDiv
|
|
95
|
+
.attr("tabindex", null)
|
|
96
|
+
.attr("role", null)
|
|
97
|
+
.attr("aria-label", null);
|
|
98
|
+
}
|
|
99
|
+
|
|
87
100
|
this._palette = this._palette.switch(this.paletteID());
|
|
88
101
|
if (this.useClonedPalette()) {
|
|
89
102
|
this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
|
|
@@ -110,7 +123,7 @@ export class Column extends XYAxis {
|
|
|
110
123
|
const columnScale = d3ScaleBand()
|
|
111
124
|
.domain(context.layerColumns(host).filter(function (_d, idx) { return idx > 0; }))
|
|
112
125
|
.rangeRound(isHorizontal ? [0, dataLen] : [dataLen, 0])
|
|
113
|
-
.paddingInner(this.xAxisSeriesPaddingInner())
|
|
126
|
+
.paddingInner(Math.max(this.xAxisSeriesPaddingInner(), 0.05))
|
|
114
127
|
.paddingOuter(0)
|
|
115
128
|
;
|
|
116
129
|
let domainSums = [];
|
|
@@ -177,6 +190,15 @@ export class Column extends XYAxis {
|
|
|
177
190
|
.on("dblclick", function (d: any) {
|
|
178
191
|
context.dblclick(host.rowToObj(d.origRow), d.column, host._selection.selected(this));
|
|
179
192
|
})
|
|
193
|
+
.on("keydown", function (evt, d: any) {
|
|
194
|
+
if (context.tabNavigation()) {
|
|
195
|
+
const event = d3Event();
|
|
196
|
+
if (event.code === "Space" || event.key === "Enter") {
|
|
197
|
+
event.preventDefault();
|
|
198
|
+
host._selection.click(this);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
})
|
|
180
202
|
.style("opacity", 0)
|
|
181
203
|
.each(function (this: SVGElement, d: any) {
|
|
182
204
|
const element = d3Select(this);
|
|
@@ -193,266 +215,270 @@ export class Column extends XYAxis {
|
|
|
193
215
|
.style("opacity", 1)
|
|
194
216
|
;
|
|
195
217
|
const domainLength = host.yAxisStacked() ? dataLen : columnScale.bandwidth();
|
|
196
|
-
columnGEnter.merge(columnGRect as any)
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
const
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
const valueLength = Math.abs(upperValuePos - lowerValuePos);
|
|
222
|
-
|
|
223
|
-
const innerTextHeight = context.innerTextFontSize();
|
|
224
|
-
const innerTextPadding = context.innerTextPadding_exists() ? context.innerTextPadding() : innerTextHeight / 2.5;
|
|
225
|
-
|
|
226
|
-
const dataRect = context.intersectRectRect(
|
|
227
|
-
{
|
|
228
|
-
x: isHorizontal ? domainPos : valuePos,
|
|
229
|
-
y: isHorizontal ? valuePos : domainPos,
|
|
230
|
-
width: isHorizontal ? domainLength : valueLength,
|
|
231
|
-
height: isHorizontal ? valueLength : domainLength
|
|
232
|
-
},
|
|
233
|
-
{
|
|
234
|
-
x: 0,
|
|
235
|
-
y: 0,
|
|
236
|
-
width: axisSize.width,
|
|
237
|
-
height: axisSize.height
|
|
218
|
+
columnGEnter.merge(columnGRect as any)
|
|
219
|
+
.attr("tabindex", context.tabNavigation() ? 0 : null) // Tabster Groupper manages these inner focusables
|
|
220
|
+
.attr("role", context.tabNavigation() ? "button" : null) // ARIA role for accessibility
|
|
221
|
+
.attr("aria-label", context.tabNavigation() ? (d: any) => `${d.origRow[0]} - ${d.column}: ${d.value instanceof Array ? d.value[1] - d.value[0] : d.value}` : null)
|
|
222
|
+
.each(function (this: SVGElement, d: any) {
|
|
223
|
+
const element = d3Select(this);
|
|
224
|
+
const domainPos = host.dataPos(dataRow[0]) + (host.yAxisStacked() ? 0 : columnScale(d.column)) + offset;
|
|
225
|
+
const upperValue = d.value instanceof Array ? d.value[1] : d.value;
|
|
226
|
+
let valueText = d.origRow[d.idx];
|
|
227
|
+
if (context.showValue()) {
|
|
228
|
+
const dm = context.dataMeta();
|
|
229
|
+
switch (context.showValueAsPercent()) {
|
|
230
|
+
case "series":
|
|
231
|
+
const seriesSum = typeof dm.sum !== "undefined" ? dm.sum : seriesSums[d.idx];
|
|
232
|
+
valueText = formatPct(valueText / seriesSum);
|
|
233
|
+
break;
|
|
234
|
+
case "domain":
|
|
235
|
+
const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[dataRowIdx];
|
|
236
|
+
valueText = formatPct(valueText / domainSum);
|
|
237
|
+
break;
|
|
238
|
+
case null:
|
|
239
|
+
default:
|
|
240
|
+
valueText = d3Format(context.showValueFormat())(valueText);
|
|
241
|
+
break;
|
|
242
|
+
}
|
|
238
243
|
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
244
|
+
const upperValuePos = host.valuePos(upperValue);
|
|
245
|
+
const lowerValuePos = host.valuePos(d.value instanceof Array ? d.value[0] : 0);
|
|
246
|
+
const valuePos = Math.min(lowerValuePos, upperValuePos);
|
|
247
|
+
const valueLength = Math.abs(upperValuePos - lowerValuePos);
|
|
248
|
+
|
|
249
|
+
const innerTextHeight = context.innerTextFontSize();
|
|
250
|
+
const innerTextPadding = context.innerTextPadding_exists() ? context.innerTextPadding() : innerTextHeight / 2.5;
|
|
251
|
+
|
|
252
|
+
const dataRect = context.intersectRectRect(
|
|
253
|
+
{
|
|
254
|
+
x: isHorizontal ? domainPos : valuePos,
|
|
255
|
+
y: isHorizontal ? valuePos : domainPos,
|
|
256
|
+
width: isHorizontal ? domainLength : valueLength,
|
|
257
|
+
height: isHorizontal ? valueLength : domainLength
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
x: 0,
|
|
261
|
+
y: 0,
|
|
262
|
+
width: axisSize.width,
|
|
263
|
+
height: axisSize.height
|
|
264
|
+
}
|
|
265
|
+
);
|
|
266
|
+
|
|
267
|
+
const _rects = element.select("rect").transition().duration(duration)
|
|
268
|
+
.style("fill", (d: any) => context.fillColor(d.row, d.column, d.value, d.origRow))
|
|
251
269
|
;
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
270
|
+
|
|
271
|
+
if (isHorizontal) {
|
|
272
|
+
_rects
|
|
273
|
+
.attr("x", domainPos)
|
|
274
|
+
.attr("y", valuePos)
|
|
275
|
+
.attr("width", domainLength)
|
|
276
|
+
.attr("height", valueLength)
|
|
277
|
+
;
|
|
278
|
+
} else {
|
|
279
|
+
_rects
|
|
280
|
+
.attr("y", domainPos)
|
|
281
|
+
.attr("x", valuePos)
|
|
282
|
+
.attr("height", domainLength)
|
|
283
|
+
.attr("width", valueLength)
|
|
284
|
+
;
|
|
285
|
+
}
|
|
286
|
+
const _texts = element.select("text").transition().duration(duration)
|
|
287
|
+
.style("font-size", innerTextHeight + "px")
|
|
288
|
+
.style("fill", (d: any) => context.textColor(d.row, d.column, d.value, d.origRow))
|
|
258
289
|
;
|
|
259
|
-
}
|
|
260
|
-
const _texts = element.select("text").transition().duration(duration)
|
|
261
|
-
.style("font-size", innerTextHeight + "px")
|
|
262
|
-
.style("fill", (d: any) => context.textColor(d.row, d.column, d.value, d.origRow))
|
|
263
|
-
;
|
|
264
290
|
|
|
265
|
-
|
|
291
|
+
_texts.style("font-family", context.innerTextFontFamily_exists() ? context.innerTextFontFamily() : null);
|
|
266
292
|
|
|
267
|
-
|
|
293
|
+
const padding = context.innerTextPadding_exists() ? context.innerTextPadding() : 8;
|
|
268
294
|
|
|
269
|
-
|
|
295
|
+
const textHeightOffset = innerTextHeight / 2.7;
|
|
270
296
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
_texts
|
|
285
|
-
.attr("height", domainLength)
|
|
286
|
-
.attr("width", valueLength)
|
|
287
|
-
;
|
|
288
|
-
if (context.showInnerText()) {
|
|
297
|
+
if (isHorizontal) { // Column
|
|
298
|
+
const y = dataRect.y + dataRect.height - innerTextPadding;
|
|
299
|
+
_texts
|
|
300
|
+
.attr("x", domainPos + (domainLength / 2))
|
|
301
|
+
.attr("y", y + textHeightOffset)
|
|
302
|
+
.attr("transform", `rotate(-90, ${domainPos + (domainLength / 2)}, ${y})`)
|
|
303
|
+
;
|
|
304
|
+
} else { // Bar
|
|
305
|
+
_texts
|
|
306
|
+
.attr("x", dataRect.x + padding)
|
|
307
|
+
.attr("y", domainPos + (domainLength / 2) + textHeightOffset)
|
|
308
|
+
;
|
|
309
|
+
}
|
|
289
310
|
_texts
|
|
290
|
-
.
|
|
291
|
-
|
|
292
|
-
if (innerText) {
|
|
293
|
-
const clippedValueLength = isHorizontal ? dataRect.height : dataRect.width;
|
|
294
|
-
const innerTextObj = context.calcInnerText(clippedValueLength, innerText, valueText);
|
|
295
|
-
d.innerTextObj = innerTextObj;
|
|
296
|
-
|
|
297
|
-
return innerTextObj.text;
|
|
298
|
-
}
|
|
299
|
-
return "";
|
|
300
|
-
})
|
|
311
|
+
.attr("height", domainLength)
|
|
312
|
+
.attr("width", valueLength)
|
|
301
313
|
;
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
const valueFontFamily = context.valueFontFamily();
|
|
313
|
-
const valueFontSize = context.valueFontSize();
|
|
314
|
-
const textSize = context.textSize(valueText, valueFontFamily, valueFontSize);
|
|
315
|
-
|
|
316
|
-
const isPositive = parseFloat(valueText) >= 0;
|
|
317
|
-
|
|
318
|
-
let valueAnchor = context.valueAnchor() ? context.valueAnchor() : isHorizontal ? "middle" : "start";
|
|
319
|
-
|
|
320
|
-
const leftSpace = dataRect.x;
|
|
321
|
-
const rightSpace = axisSize.width - (dataRect.x + dataRect.width);
|
|
322
|
-
const topSpace = dataRect.y;
|
|
323
|
-
const bottomSpace = axisSize.height - (dataRect.y + dataRect.height);
|
|
324
|
-
|
|
325
|
-
let noRoomInside;
|
|
326
|
-
let isOutside;
|
|
327
|
-
let noRoomOnExpectedSide;
|
|
328
|
-
|
|
329
|
-
if (d.innerTextObj) {
|
|
330
|
-
const { padding, valueTextWidth } = d.innerTextObj;
|
|
331
|
-
isOutside = false;
|
|
332
|
-
if (isHorizontal) { // Column
|
|
333
|
-
valueAnchor = "middle";
|
|
334
|
-
pos.x = domainPos + (domainLength / 2);
|
|
335
|
-
|
|
336
|
-
if (d.innerTextObj.category === 4) {
|
|
337
|
-
isOutside = true;
|
|
338
|
-
pos.y = valuePos - padding - (valueFontSize / 2);
|
|
339
|
-
} else {
|
|
340
|
-
pos.y = valuePos + padding + (valueFontSize / 2);
|
|
314
|
+
if (context.showInnerText()) {
|
|
315
|
+
_texts
|
|
316
|
+
.text((d: any) => {
|
|
317
|
+
const innerText = context.innerText(d.origRow, d.origRow[columnLength], d.idx);
|
|
318
|
+
if (innerText) {
|
|
319
|
+
const clippedValueLength = isHorizontal ? dataRect.height : dataRect.width;
|
|
320
|
+
const innerTextObj = context.calcInnerText(clippedValueLength, innerText, valueText);
|
|
321
|
+
d.innerTextObj = innerTextObj;
|
|
322
|
+
|
|
323
|
+
return innerTextObj.text;
|
|
341
324
|
}
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
325
|
+
return "";
|
|
326
|
+
})
|
|
327
|
+
;
|
|
328
|
+
}
|
|
329
|
+
const dataText = element.selectAll(".dataText").data(context.showValue() ? [`${upperValue}`] : []);
|
|
330
|
+
const dataTextEnter = dataText.enter().append("g")
|
|
331
|
+
.attr("class", "dataText")
|
|
332
|
+
.each(function (this: SVGElement, d) {
|
|
333
|
+
context.textLocal.set(this, new Text().target(this).colorStroke_default("transparent"));
|
|
334
|
+
});
|
|
335
|
+
dataTextEnter.merge(dataText as any)
|
|
336
|
+
.each(function (this: SVGElement) {
|
|
337
|
+
const pos = { x: 0, y: 0 };
|
|
338
|
+
const valueFontFamily = context.valueFontFamily();
|
|
339
|
+
const valueFontSize = context.valueFontSize();
|
|
340
|
+
const textSize = context.textSize(valueText, valueFontFamily, valueFontSize);
|
|
341
|
+
|
|
342
|
+
const isPositive = parseFloat(valueText) >= 0;
|
|
343
|
+
|
|
344
|
+
let valueAnchor = context.valueAnchor() ? context.valueAnchor() : isHorizontal ? "middle" : "start";
|
|
345
|
+
|
|
346
|
+
const leftSpace = dataRect.x;
|
|
347
|
+
const rightSpace = axisSize.width - (dataRect.x + dataRect.width);
|
|
348
|
+
const topSpace = dataRect.y;
|
|
349
|
+
const bottomSpace = axisSize.height - (dataRect.y + dataRect.height);
|
|
350
|
+
|
|
351
|
+
let noRoomInside;
|
|
352
|
+
let isOutside;
|
|
353
|
+
let noRoomOnExpectedSide;
|
|
354
|
+
|
|
355
|
+
if (d.innerTextObj) {
|
|
356
|
+
const { padding, valueTextWidth } = d.innerTextObj;
|
|
357
|
+
isOutside = false;
|
|
358
|
+
if (isHorizontal) { // Column
|
|
359
|
+
valueAnchor = "middle";
|
|
360
|
+
pos.x = domainPos + (domainLength / 2);
|
|
361
|
+
|
|
362
|
+
if (d.innerTextObj.category === 4) {
|
|
363
|
+
isOutside = true;
|
|
364
|
+
pos.y = valuePos - padding - (valueFontSize / 2);
|
|
365
|
+
} else {
|
|
366
|
+
pos.y = valuePos + padding + (valueFontSize / 2);
|
|
367
|
+
}
|
|
368
|
+
} else { // Bar
|
|
369
|
+
valueAnchor = "start";
|
|
370
|
+
if (d.innerTextObj.category === 4) {
|
|
371
|
+
isOutside = true;
|
|
372
|
+
pos.x = (valueLength + valuePos) + padding;
|
|
373
|
+
} else {
|
|
374
|
+
pos.x = (valueLength + valuePos) - valueTextWidth - padding;
|
|
375
|
+
}
|
|
376
|
+
pos.y = domainPos + (domainLength / 2);
|
|
349
377
|
}
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
378
|
+
} else {
|
|
379
|
+
/*
|
|
380
|
+
IF this.valueCentered() and NO ROOM INSIDE
|
|
381
|
+
...then ASSUME THERES ROOM OUTSIDE
|
|
382
|
+
IF NO ROOM OUTSIDE ON EXPECTED SIDE
|
|
383
|
+
...then ASSUME THERES ROOM ON THE OPPOSITE SIDE
|
|
384
|
+
*/
|
|
385
|
+
if (isHorizontal) { // Column
|
|
386
|
+
noRoomInside = dataRect.height < textSize.height;
|
|
387
|
+
isOutside = !context.valueCentered() || noRoomInside;
|
|
388
|
+
|
|
389
|
+
pos.x = dataRect.x + (dataRect.width / 2);
|
|
390
|
+
|
|
391
|
+
if (isOutside) {
|
|
392
|
+
if (isPositive) {
|
|
393
|
+
noRoomOnExpectedSide = topSpace < textSize.height + padding;
|
|
394
|
+
if (noRoomOnExpectedSide) {
|
|
395
|
+
if (!noRoomInside) {
|
|
396
|
+
isOutside = false;
|
|
397
|
+
pos.y = dataRect.y + (dataRect.height / 2);
|
|
398
|
+
} else {
|
|
399
|
+
pos.y = dataRect.y + dataRect.height + textSize.height;
|
|
400
|
+
}
|
|
372
401
|
} else {
|
|
373
|
-
pos.y = dataRect.y
|
|
402
|
+
pos.y = dataRect.y - (textSize.height / 2) - padding;
|
|
374
403
|
}
|
|
375
404
|
} else {
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
405
|
+
noRoomOnExpectedSide = bottomSpace < textSize.height;
|
|
406
|
+
if (noRoomOnExpectedSide) {
|
|
407
|
+
if (!noRoomInside) {
|
|
408
|
+
isOutside = false;
|
|
409
|
+
pos.y = dataRect.y + (dataRect.height / 2);
|
|
410
|
+
} else {
|
|
411
|
+
pos.y = dataRect.y - (textSize.height / 2) - padding;
|
|
412
|
+
}
|
|
384
413
|
} else {
|
|
385
|
-
pos.y = dataRect.y
|
|
414
|
+
pos.y = dataRect.y + textSize.height + padding;
|
|
386
415
|
}
|
|
387
|
-
} else {
|
|
388
|
-
pos.y = dataRect.y + textSize.height + padding;
|
|
389
416
|
}
|
|
417
|
+
} else {
|
|
418
|
+
pos.y = dataRect.y + (dataRect.height / 2);
|
|
390
419
|
}
|
|
391
|
-
} else {
|
|
420
|
+
} else { // Bar
|
|
421
|
+
noRoomInside = dataRect.width < textSize.width;
|
|
422
|
+
isOutside = !context.valueCentered() || noRoomInside;
|
|
423
|
+
|
|
392
424
|
pos.y = dataRect.y + (dataRect.height / 2);
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
if (context.showInnerText() || !noRoomInside) {
|
|
405
|
-
isOutside = false;
|
|
406
|
-
pos.x = dataRect.x + (dataRect.width / 2);
|
|
425
|
+
|
|
426
|
+
if (isOutside) {
|
|
427
|
+
if (isPositive) {
|
|
428
|
+
noRoomOnExpectedSide = rightSpace < textSize.width + padding;
|
|
429
|
+
if (noRoomOnExpectedSide) {
|
|
430
|
+
if (context.showInnerText() || !noRoomInside) {
|
|
431
|
+
isOutside = false;
|
|
432
|
+
pos.x = dataRect.x + (dataRect.width / 2);
|
|
433
|
+
} else {
|
|
434
|
+
pos.x = dataRect.x - (textSize.width - padding);
|
|
435
|
+
}
|
|
407
436
|
} else {
|
|
408
|
-
pos.x = dataRect.x
|
|
437
|
+
pos.x = dataRect.x + dataRect.width + (textSize.width / 2) + padding;
|
|
409
438
|
}
|
|
410
439
|
} else {
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
440
|
+
noRoomOnExpectedSide = leftSpace < textSize.width;
|
|
441
|
+
if (noRoomOnExpectedSide) {
|
|
442
|
+
if (context.showInnerText() || !noRoomInside) {
|
|
443
|
+
isOutside = false;
|
|
444
|
+
pos.x = dataRect.x + (dataRect.width / 2);
|
|
445
|
+
} else {
|
|
446
|
+
pos.x = dataRect.x + dataRect.width + (textSize.width - padding);
|
|
447
|
+
}
|
|
419
448
|
} else {
|
|
420
|
-
pos.x = dataRect.x
|
|
449
|
+
pos.x = dataRect.x - (textSize.width - padding);
|
|
421
450
|
}
|
|
422
|
-
} else {
|
|
423
|
-
pos.x = dataRect.x - (textSize.width - padding);
|
|
424
451
|
}
|
|
452
|
+
} else {
|
|
453
|
+
pos.x = dataRect.x + (dataRect.width / 2);
|
|
425
454
|
}
|
|
426
|
-
} else {
|
|
427
|
-
pos.x = dataRect.x + (dataRect.width / 2);
|
|
428
455
|
}
|
|
429
456
|
}
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
});
|
|
457
|
+
const textColor = isOutside ? null : context.textColor(d.row, d.column, d.value, d.origRow);
|
|
458
|
+
|
|
459
|
+
// Prevent overlapping labels on stacked columns
|
|
460
|
+
const columns = context.columns();
|
|
461
|
+
const hideValue = (context.yAxisStacked() && noRoomInside) ||
|
|
462
|
+
(isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1);
|
|
463
|
+
context.textLocal.get(this)
|
|
464
|
+
.pos(pos)
|
|
465
|
+
.anchor(valueAnchor)
|
|
466
|
+
.fontFamily(valueFontFamily)
|
|
467
|
+
.fontSize(valueFontSize)
|
|
468
|
+
.text(`${valueText}`)
|
|
469
|
+
.colorFill(textColor)
|
|
470
|
+
.visible(context.showValue() && !hideValue)
|
|
471
|
+
.render()
|
|
472
|
+
;
|
|
473
|
+
|
|
474
|
+
});
|
|
475
|
+
dataText.exit()
|
|
476
|
+
.each(function (this: SVGElement, d) {
|
|
477
|
+
context.textLocal.get(this).target(null);
|
|
478
|
+
})
|
|
479
|
+
.remove()
|
|
480
|
+
;
|
|
481
|
+
});
|
|
456
482
|
columnGRect.exit().transition().duration(duration)
|
|
457
483
|
.style("opacity", 0)
|
|
458
484
|
.remove()
|
|
@@ -517,7 +543,6 @@ export class Column extends XYAxis {
|
|
|
517
543
|
}
|
|
518
544
|
|
|
519
545
|
calcInnerText(offset, innerText, valueText) {
|
|
520
|
-
|
|
521
546
|
const fontFamily = this.innerTextFontFamily_exists() ? this.innerTextFontFamily() : "Verdana";
|
|
522
547
|
const fontSize = this.innerTextFontSize();
|
|
523
548
|
const valueFontFamily = this.valueFontFamily_exists() ? this.valueFontFamily() : "Verdana";
|
|
@@ -644,7 +669,7 @@ Column.prototype.publish("showValueAsPercentFormat", ".0%", "string", "D3 Format
|
|
|
644
669
|
Column.prototype.publish("showDomainTotal", false, "boolean", "Show Total Value for Stacked Columns", null);
|
|
645
670
|
Column.prototype.publish("valueCentered", false, "boolean", "Show Value in center of column");
|
|
646
671
|
Column.prototype.publish("valueAnchor", "middle", "set", "text-anchor for shown value text", ["start", "middle", "end"]);
|
|
647
|
-
Column.prototype.publish("xAxisSeriesPaddingInner", 0, "number", "Determines the ratio of the range that is reserved for blank space between band (0->1)");
|
|
672
|
+
Column.prototype.publish("xAxisSeriesPaddingInner", 0.0, "number", "Determines the ratio of the range that is reserved for blank space between band (0->1)");
|
|
648
673
|
Column.prototype.publish("tooltipInnerTextEllipsedOnly", false, "boolean", "Show tooltip only when inner text is truncated with an ellipsis");
|
|
649
674
|
|
|
650
675
|
/*
|
package/src/Pie.css
CHANGED
|
@@ -2,18 +2,20 @@
|
|
|
2
2
|
cursor: pointer;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.chart_Pie
|
|
5
|
+
.chart_Pie>g>text {
|
|
6
6
|
cursor: pointer;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.chart_Pie .arc path {
|
|
10
|
-
stroke:
|
|
11
|
-
stroke-width:
|
|
10
|
+
stroke: transparent;
|
|
11
|
+
stroke-width: 2px;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.chart_Pie .arc.selected path {
|
|
15
|
-
stroke:
|
|
16
|
-
stroke-width:
|
|
15
|
+
stroke: #dc3545 !important;
|
|
16
|
+
stroke-width: 3px !important;
|
|
17
|
+
paint-order: fill stroke !important;
|
|
18
|
+
transition: all 0.2s ease;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
.chart_Pie polyline {
|
|
@@ -21,4 +23,29 @@
|
|
|
21
23
|
stroke: black;
|
|
22
24
|
stroke-width: 2px;
|
|
23
25
|
fill: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.chart_Pie .arc:hover path {
|
|
29
|
+
stroke: rgba(108, 117, 125, 0.6);
|
|
30
|
+
stroke-width: 2px;
|
|
31
|
+
filter: brightness(1.05);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.chart_Pie .arc:focus path {
|
|
35
|
+
stroke: #007bff !important;
|
|
36
|
+
stroke-width: 3px !important;
|
|
37
|
+
paint-order: fill stroke !important;
|
|
38
|
+
transition: all 0.2s ease;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.chart_Pie .arc.selected:focus path {
|
|
42
|
+
stroke: #6f42c1 !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.chart_Pie .arc:focus-visible {
|
|
46
|
+
outline: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.chart_Pie .arc:active {
|
|
50
|
+
outline: none !important;
|
|
24
51
|
}
|