@datarailsshared/dr_renderer 1.3.19 → 1.3.21

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/charts/dr_gauge_chart.js +1 -1
  3. package/src/dr_chart_tooltip.js +16 -9
  4. package/tests/dr_chart_tooltip.test.js +50 -0
  5. package/tests/dr_gauge_chart.test.js +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datarailsshared/dr_renderer",
3
- "version": "1.3.19",
3
+ "version": "1.3.21",
4
4
  "description": "DataRails charts and tables renderer",
5
5
  "keywords": [
6
6
  "datarails",
package/src/charts/dr_gauge_chart.js CHANGED
@@ -145,7 +145,7 @@ function DrGaugeChart(pivotData, opts) {
145
145
  return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${
146
146
  options.label.font_size
147
147
  }px;">
148
- <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: ${options.label.font_color}">
148
+ <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: ${options.label.font_color}">
149
149
  ${this.formatValue(value)}
150
150
  ${
151
151
  options.label.show_percentage_in_value
package/src/dr_chart_tooltip.js CHANGED
@@ -226,24 +226,31 @@ function DrChartTooltip(chart, options) {
226
226
  }
227
227
 
228
228
  this.getAnchorBox = function(el) {
229
+ const containerRect = this.chart.container.getBoundingClientRect();
230
+ const zoom = this.chart.container.clientWidth / containerRect.width;
231
+
229
232
  if (el.getBBox) {
230
- return el.getBBox();
231
- }
233
+ const bBox = el.getBBox();
234
+ bBox.x = bBox.x * zoom;
235
+ bBox.y = bBox.y * zoom;
236
+ bBox.width = bBox.width * zoom;
237
+ bBox.height = bBox.height * zoom;
232
238
 
233
- const containerRect = this.chart.container.getBoundingClientRect();
239
+ return bBox;
240
+ }
234
241
 
235
242
  if (el.getBoundingClientRect) {
236
243
  const elRect = el.getBoundingClientRect();
237
244
  return {
238
- x: elRect.x - containerRect.x,
239
- y: elRect.y - containerRect.y,
240
- width: elRect.width,
241
- height: elRect.height,
245
+ x: (elRect.x - containerRect.x) * zoom,
246
+ y: (elRect.y - containerRect.y) * zoom,
247
+ width: elRect.width * zoom,
248
+ height: elRect.height * zoom,
242
249
  };
243
250
  }
244
251
  return {
245
- x: el.x - containerRect.x,
246
- y: el.y - containerRect.y,
252
+ x: (el.x - containerRect.x) * zoom,
253
+ y: (el.y - containerRect.y) * zoom,
247
254
  width: 0,
248
255
  height: 0,
249
256
  };
package/tests/dr_chart_tooltip.test.js CHANGED
@@ -32,6 +32,7 @@ describe("DrChartTooltip", () => {
32
32
  },
33
33
  container: {
34
34
  getBoundingClientRect: jest.fn().mockReturnValue(chartBBoxMock),
35
+ clientWidth: 800,
35
36
  },
36
37
  chartWidth: 800,
37
38
  chartHeight: 600,
@@ -349,6 +350,23 @@ describe("DrChartTooltip", () => {
349
350
  expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:15px`);
350
351
  });
351
352
 
353
+ it("sets a top arrow position (tooltip is smaller than anchor) on a zoomed chart", () => {
354
+ chartMock.container.clientWidth = 1600;
355
+ tooltipBBoxMock.width = 40;
356
+ tooltipBBoxMock.height = 20;
357
+ anchorBBoxMock.width = 50;
358
+ anchorBBoxMock.height = 50;
359
+ anchorBBoxMock.x = 200;
360
+ anchorBBoxMock.y = 200;
361
+ positionMock = {
362
+ x: 205,
363
+ y: 180,
364
+ direction: "top",
365
+ };
366
+ instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
367
+ expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:22px`);
368
+ });
369
+
352
370
  it("sets a top arrow position (clamp left)", () => {
353
371
  tooltipBBoxMock.width = 100;
354
372
  tooltipBBoxMock.height = 20;
@@ -477,6 +495,23 @@ describe("DrChartTooltip", () => {
477
495
  expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:15px`);
478
496
  });
479
497
 
498
+ it("sets a left arrow position (tooltip is smaller than anchor) on a zoomed chart", () => {
499
+ chartMock.container.clientWidth = 1600;
500
+ tooltipBBoxMock.width = 20;
501
+ tooltipBBoxMock.height = 40;
502
+ anchorBBoxMock.width = 50;
503
+ anchorBBoxMock.height = 50;
504
+ anchorBBoxMock.x = 200;
505
+ anchorBBoxMock.y = 200;
506
+ positionMock = {
507
+ x: 180,
508
+ y: 205,
509
+ direction: "left",
510
+ };
511
+ instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
512
+ expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:22px`);
513
+ });
514
+
480
515
  it("sets a left arrow position (clamp top)", () => {
481
516
  tooltipBBoxMock.width = 20;
482
517
  tooltipBBoxMock.height = 100;
@@ -593,6 +628,11 @@ describe("DrChartTooltip", () => {
593
628
  expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 175, y: 170 });
594
629
  });
595
630
 
631
+ it("gets coordinates (top - without correction)", () => {
632
+ chartMock.container.clientWidth = 1600;
633
+ expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 400, y: 370 });
634
+ });
635
+
596
636
  it("gets coordinates (top - bound to the chart - left)", () => {
597
637
  anchorBBoxMock.x = 0;
598
638
  expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 8 /* offset */, y: 170 });
@@ -627,6 +667,11 @@ describe("DrChartTooltip", () => {
627
667
  expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 215 });
628
668
  });
629
669
 
670
+ it("gets coordinates (left - without correction)", () => {
671
+ chartMock.container.clientWidth = 1600;
672
+ expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 290, y: 440 });
673
+ });
674
+
630
675
  it("gets coordinates (left - bound to the chart - bottom)", () => {
631
676
  anchorBBoxMock.y = 1000;
632
677
  expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 572 });
@@ -645,6 +690,11 @@ describe("DrChartTooltip", () => {
645
690
  expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 260, y: 215 });
646
691
  });
647
692
 
693
+ it("gets coordinates (right - without correction)", () => {
694
+ chartMock.container.clientWidth = 1600;
695
+ expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 510, y: 440 });
696
+ });
697
+
648
698
  it("gets coordinates (right - bound to the chart - bottom)", () => {
649
699
  anchorBBoxMock.y = 1000;
650
700
  expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({
package/tests/dr_gauge_chart.test.js CHANGED
@@ -461,7 +461,7 @@ describe("DrGaugeChart", () => {
461
461
  expect(simplifyString(label)).toBe(
462
462
  simplifyString(
463
463
  `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px;">
464
- <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: #000">
464
+ <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: #000">
465
465
  ${mockFormattedValue}
466
466
  </span>
467
467
  <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: #808080;">Current status</span>
@@ -486,7 +486,7 @@ describe("DrGaugeChart", () => {
486
486
  expect(simplifyString(label)).toBe(
487
487
  simplifyString(
488
488
  `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 24px;">
489
- <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: #000">
489
+ <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: #000">
490
490
  ${mockFormattedValue}
491
491
  <span style="font-size: 0.5833em; font-weight: 600; color: #929292;">(56%)</span>
492
492
  </span>