@oliasoft-open-source/charts-library 4.7.3 → 4.7.4
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 +60 -28
- package/dist/index.js.map +1 -1
- package/dist/src/components/common/common.interface.d.ts +2 -0
- package/dist/src/components/common/helpers/get-chart-annotation.d.ts +2 -0
- package/dist/src/components/common/plugins/annotation-dragger-plugin/annotation-dragger-plugin.d.ts +1 -0
- package/dist/src/components/common/plugins/annotation-dragger-plugin/helpers.d.ts +6 -4
- package/dist/src/components/line-chart/line-chart.stories.d.ts +111 -15
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -25236,6 +25236,7 @@ const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
|
|
|
25236
25236
|
return ticks;
|
|
25237
25237
|
};
|
|
25238
25238
|
return {
|
|
25239
|
+
display: true,
|
|
25239
25240
|
type: additionalAxesOptions.chartScaleType,
|
|
25240
25241
|
position: axisData.position,
|
|
25241
25242
|
beginAtZero: additionalAxesOptions.beginAtZero,
|
|
@@ -26363,13 +26364,14 @@ const chartAreaTextPlugin = {
|
|
|
26363
26364
|
});
|
|
26364
26365
|
}
|
|
26365
26366
|
};
|
|
26366
|
-
const getMousePositionInCoordinates = (event, canvas2, scales) => {
|
|
26367
|
-
var _a2, _b2;
|
|
26367
|
+
const getMousePositionInCoordinates = (event, canvas2, scales, xScaleID, yScaleID) => {
|
|
26368
26368
|
const rect = canvas2.getBoundingClientRect();
|
|
26369
26369
|
const x2 = event.clientX - rect.left;
|
|
26370
26370
|
const y2 = event.clientY - rect.top;
|
|
26371
|
-
const
|
|
26372
|
-
const
|
|
26371
|
+
const xScale = scales[xScaleID];
|
|
26372
|
+
const yScale = scales[yScaleID];
|
|
26373
|
+
const xValue = (xScale == null ? void 0 : xScale.getValueForPixel(x2)) ?? -1;
|
|
26374
|
+
const yValue = (yScale == null ? void 0 : yScale.getValueForPixel(y2)) ?? -1;
|
|
26373
26375
|
return { x: xValue, y: yValue };
|
|
26374
26376
|
};
|
|
26375
26377
|
const calculateAnnotationMetricsInValues = (annotation2) => {
|
|
@@ -26396,29 +26398,30 @@ const calculateAnnotationMetricsInValues = (annotation2) => {
|
|
|
26396
26398
|
height
|
|
26397
26399
|
};
|
|
26398
26400
|
};
|
|
26399
|
-
const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
|
|
26401
|
+
const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales, xScaleID, yScaleID) => {
|
|
26400
26402
|
const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
|
|
26401
|
-
const { x: x2, y: y2 } = scales ?? {};
|
|
26402
26403
|
let centerX;
|
|
26403
26404
|
let centerY;
|
|
26404
26405
|
let width;
|
|
26405
26406
|
let height;
|
|
26407
|
+
const xScale = scales[xScaleID];
|
|
26408
|
+
const yScale = scales[yScaleID];
|
|
26406
26409
|
if (!isNil(xMin) && !isNil(xMax) && !isNil(yMin) && !isNil(yMax) && type === AnnotationType.BOX) {
|
|
26407
26410
|
const xCenterValue = (xMin + xMax) / 2;
|
|
26408
26411
|
const yCenterValue = (yMin + yMax) / 2;
|
|
26409
|
-
const xMinValue = (
|
|
26410
|
-
const xMaxValue = (
|
|
26411
|
-
const yMinValue = (
|
|
26412
|
-
const yMaxValue = (
|
|
26412
|
+
const xMinValue = (xScale == null ? void 0 : xScale.getPixelForValue(xMin)) ?? 0;
|
|
26413
|
+
const xMaxValue = (xScale == null ? void 0 : xScale.getPixelForValue(xMax)) ?? 0;
|
|
26414
|
+
const yMinValue = (yScale == null ? void 0 : yScale.getPixelForValue(yMin)) ?? 0;
|
|
26415
|
+
const yMaxValue = (yScale == null ? void 0 : yScale.getPixelForValue(yMax)) ?? 0;
|
|
26413
26416
|
width = xMinValue - xMaxValue;
|
|
26414
26417
|
height = yMinValue - yMaxValue;
|
|
26415
|
-
centerX = (
|
|
26416
|
-
centerY = (
|
|
26418
|
+
centerX = (xScale == null ? void 0 : xScale.getPixelForValue(xCenterValue)) ?? -1;
|
|
26419
|
+
centerY = (yScale == null ? void 0 : yScale.getPixelForValue(yCenterValue)) ?? -1;
|
|
26417
26420
|
} else if (!isNil(xValue) && !isNil(yValue) && type === AnnotationType.POINT) {
|
|
26418
26421
|
width = 0;
|
|
26419
26422
|
height = 0;
|
|
26420
|
-
centerX = (
|
|
26421
|
-
centerY = (
|
|
26423
|
+
centerX = (xScale == null ? void 0 : xScale.getPixelForValue(xValue)) ?? -1;
|
|
26424
|
+
centerY = (yScale == null ? void 0 : yScale.getPixelForValue(yValue)) ?? -1;
|
|
26422
26425
|
}
|
|
26423
26426
|
return {
|
|
26424
26427
|
centerX,
|
|
@@ -26435,7 +26438,9 @@ const isWithinChartArea = ({
|
|
|
26435
26438
|
metrics,
|
|
26436
26439
|
resizable = false,
|
|
26437
26440
|
dragRange,
|
|
26438
|
-
annotationType
|
|
26441
|
+
annotationType,
|
|
26442
|
+
xScaleID,
|
|
26443
|
+
yScaleID
|
|
26439
26444
|
}) => {
|
|
26440
26445
|
if (resizable && !dragRange) {
|
|
26441
26446
|
return true;
|
|
@@ -26445,10 +26450,12 @@ const isWithinChartArea = ({
|
|
|
26445
26450
|
const withinRangeY = y2 !== void 0 && dragRange.y ? y2 >= dragRange.y[0] && y2 <= dragRange.y[1] : true;
|
|
26446
26451
|
return withinRangeX && withinRangeY;
|
|
26447
26452
|
}
|
|
26448
|
-
const
|
|
26449
|
-
const
|
|
26450
|
-
const
|
|
26451
|
-
const
|
|
26453
|
+
const xScale = scales[xScaleID];
|
|
26454
|
+
const yScale = scales[yScaleID];
|
|
26455
|
+
const minX = (xScale == null ? void 0 : xScale.getValueForPixel(chartArea.left)) ?? Number.NEGATIVE_INFINITY;
|
|
26456
|
+
const maxX = (xScale == null ? void 0 : xScale.getValueForPixel(chartArea.right)) ?? Number.POSITIVE_INFINITY;
|
|
26457
|
+
const minY = (yScale == null ? void 0 : yScale.getValueForPixel(chartArea.bottom)) ?? Number.NEGATIVE_INFINITY;
|
|
26458
|
+
const maxY = (yScale == null ? void 0 : yScale.getValueForPixel(chartArea.top)) ?? Number.POSITIVE_INFINITY;
|
|
26452
26459
|
if (annotationType === AnnotationType.POINT) {
|
|
26453
26460
|
const withinX = x2 !== void 0 ? x2 >= minX && x2 <= maxX : true;
|
|
26454
26461
|
const withinY = y2 !== void 0 ? y2 >= minY && y2 <= maxY : true;
|
|
@@ -26465,7 +26472,7 @@ const isWithinChartArea = ({
|
|
|
26465
26472
|
}
|
|
26466
26473
|
return true;
|
|
26467
26474
|
};
|
|
26468
|
-
const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotation, chart2, scales, metrics) => {
|
|
26475
|
+
const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotation, chart2, scales, xScaleID, yScaleID, metrics) => {
|
|
26469
26476
|
const { resizable, dragRange = null } = activeAnnotation ?? {};
|
|
26470
26477
|
const checkArea = isWithinChartArea({
|
|
26471
26478
|
[axis]: newPosition,
|
|
@@ -26474,7 +26481,9 @@ const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotatio
|
|
|
26474
26481
|
resizable,
|
|
26475
26482
|
dragRange,
|
|
26476
26483
|
metrics: metrics || {},
|
|
26477
|
-
annotationType: activeAnnotation.type
|
|
26484
|
+
annotationType: activeAnnotation.type,
|
|
26485
|
+
xScaleID,
|
|
26486
|
+
yScaleID
|
|
26478
26487
|
});
|
|
26479
26488
|
if (!checkArea) return;
|
|
26480
26489
|
if (activeAnnotation.type === AnnotationType.POINT) {
|
|
@@ -26503,9 +26512,16 @@ const setAnnotationBorderWidth = (chart2, annotationId, borderWidth) => {
|
|
|
26503
26512
|
}
|
|
26504
26513
|
};
|
|
26505
26514
|
const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState, hoveredAnnotationId) => {
|
|
26506
|
-
const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
|
|
26507
26515
|
const annotation2 = hoveredAnnotationId ? annotations == null ? void 0 : annotations[hoveredAnnotationId] : null;
|
|
26508
26516
|
if (!annotation2) return;
|
|
26517
|
+
const { xScaleID = "x", yScaleID = "y" } = annotation2;
|
|
26518
|
+
const { x: x2, y: y2 } = getMousePositionInCoordinates(
|
|
26519
|
+
event,
|
|
26520
|
+
canvas2,
|
|
26521
|
+
scales,
|
|
26522
|
+
xScaleID,
|
|
26523
|
+
yScaleID
|
|
26524
|
+
);
|
|
26509
26525
|
const metrics = calculateAnnotationMetricsInValues(annotation2);
|
|
26510
26526
|
if (annotation2 && annotation2.enableDrag && !isNil(metrics.centerY) && !isNil(metrics.centerX)) {
|
|
26511
26527
|
canvas2.style.cursor = CursorStyle.Move;
|
|
@@ -26513,7 +26529,7 @@ const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDragg
|
|
|
26513
26529
|
const dragStartY = y2 - metrics.centerY;
|
|
26514
26530
|
setDraggingState(true, annotation2, dragStartX, dragStartY);
|
|
26515
26531
|
if (annotation2 == null ? void 0 : annotation2.onDragStart) {
|
|
26516
|
-
annotation2.onDragStart({ x: x2, y: y2 },
|
|
26532
|
+
annotation2.onDragStart({ x: x2, y: y2 }, annotation2);
|
|
26517
26533
|
}
|
|
26518
26534
|
}
|
|
26519
26535
|
};
|
|
@@ -26523,7 +26539,14 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
|
|
|
26523
26539
|
const annotationId = activeAnnotation == null ? void 0 : activeAnnotation.id;
|
|
26524
26540
|
setAnnotationBorderWidth(chart2, annotationId, BORDER_WIDTH.HOVERED);
|
|
26525
26541
|
const dragAxis = (activeAnnotation == null ? void 0 : activeAnnotation.dragAxis) ?? DragAxis.Both;
|
|
26526
|
-
const { x
|
|
26542
|
+
const { xScaleID = "x", yScaleID = "y" } = activeAnnotation;
|
|
26543
|
+
const { x: x2, y: y2 } = getMousePositionInCoordinates(
|
|
26544
|
+
event,
|
|
26545
|
+
canvas2,
|
|
26546
|
+
scales,
|
|
26547
|
+
xScaleID,
|
|
26548
|
+
yScaleID
|
|
26549
|
+
);
|
|
26527
26550
|
const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
|
|
26528
26551
|
let newCenterX = x2 - dragStartX;
|
|
26529
26552
|
let newCenterY = y2 - dragStartY;
|
|
@@ -26534,6 +26557,8 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
|
|
|
26534
26557
|
activeAnnotation,
|
|
26535
26558
|
chart2,
|
|
26536
26559
|
scales,
|
|
26560
|
+
xScaleID,
|
|
26561
|
+
yScaleID,
|
|
26537
26562
|
metrics
|
|
26538
26563
|
);
|
|
26539
26564
|
}
|
|
@@ -26544,16 +26569,23 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
|
|
|
26544
26569
|
activeAnnotation,
|
|
26545
26570
|
chart2,
|
|
26546
26571
|
scales,
|
|
26572
|
+
xScaleID,
|
|
26573
|
+
yScaleID,
|
|
26547
26574
|
metrics
|
|
26548
26575
|
);
|
|
26549
26576
|
}
|
|
26550
26577
|
chart2.update();
|
|
26551
26578
|
if (activeAnnotation == null ? void 0 : activeAnnotation.onDrag) {
|
|
26552
|
-
activeAnnotation.onDrag({ x: x2, y: y2 },
|
|
26579
|
+
activeAnnotation.onDrag({ x: x2, y: y2 }, activeAnnotation);
|
|
26553
26580
|
}
|
|
26554
26581
|
const { ctx, width, height } = chart2;
|
|
26555
26582
|
const { centerX, centerY } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
|
|
26556
|
-
const { centerX: xValue, centerY: yValue } = calculateAnnotationMetricsInValuesInPixels(
|
|
26583
|
+
const { centerX: xValue, centerY: yValue } = calculateAnnotationMetricsInValuesInPixels(
|
|
26584
|
+
activeAnnotation,
|
|
26585
|
+
scales,
|
|
26586
|
+
xScaleID,
|
|
26587
|
+
yScaleID
|
|
26588
|
+
);
|
|
26557
26589
|
if (!isNil(centerX) && !isNil(centerY) && !isNil(xValue) && !isNil(yValue)) {
|
|
26558
26590
|
ctx.save();
|
|
26559
26591
|
ctx.clearRect(0, 0, width, height);
|
|
@@ -26586,7 +26618,7 @@ const handleAnnotationMouseUp = (isDragging2, activeAnnotation, chart2, setDragg
|
|
|
26586
26618
|
if (activeAnnotation == null ? void 0 : activeAnnotation.onDragEnd) {
|
|
26587
26619
|
activeAnnotation.onDragEnd(
|
|
26588
26620
|
{ x: centerX, y: centerY },
|
|
26589
|
-
|
|
26621
|
+
activeAnnotation
|
|
26590
26622
|
);
|
|
26591
26623
|
}
|
|
26592
26624
|
chart2.canvas.style.cursor = CursorStyle.Pointer;
|
|
@@ -26663,7 +26695,7 @@ const annotationDraggerPlugin = {
|
|
|
26663
26695
|
const pluginOptions = ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.annotationDraggerPlugin) || {
|
|
26664
26696
|
enabled: false
|
|
26665
26697
|
};
|
|
26666
|
-
const typedScales = { x: scales.x, y: scales.y };
|
|
26698
|
+
const typedScales = { ...scales, x: scales.x, y: scales.y };
|
|
26667
26699
|
let annotations = ((_d2 = (_c2 = chart2.options.plugins) == null ? void 0 : _c2.annotation) == null ? void 0 : _d2.annotations) ?? {};
|
|
26668
26700
|
if (!chart2 && !annotations) return;
|
|
26669
26701
|
if (pluginOptions.enabled) {
|