cr-ui-lib 1.1.31 → 1.1.33
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.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +65 -38
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +65 -38
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -86,8 +86,9 @@ interface MultiLineGraphProps {
|
|
|
86
86
|
className?: string;
|
|
87
87
|
/** Determines the default position of the tooltip. Defaults to 'top'. */
|
|
88
88
|
tooltipPosition?: "top" | "bottom";
|
|
89
|
+
svg?: string;
|
|
89
90
|
}
|
|
90
|
-
declare const MultiLineGraph: ({ datasets, xAxisLabels, className, tooltipPosition, }: MultiLineGraphProps) => JSX.Element;
|
|
91
|
+
declare const MultiLineGraph: ({ datasets, xAxisLabels, className, tooltipPosition, svg, }: MultiLineGraphProps) => JSX.Element;
|
|
91
92
|
|
|
92
93
|
interface SingleLineGraphProps {
|
|
93
94
|
data: number[];
|
package/dist/index.d.ts
CHANGED
|
@@ -86,8 +86,9 @@ interface MultiLineGraphProps {
|
|
|
86
86
|
className?: string;
|
|
87
87
|
/** Determines the default position of the tooltip. Defaults to 'top'. */
|
|
88
88
|
tooltipPosition?: "top" | "bottom";
|
|
89
|
+
svg?: string;
|
|
89
90
|
}
|
|
90
|
-
declare const MultiLineGraph: ({ datasets, xAxisLabels, className, tooltipPosition, }: MultiLineGraphProps) => JSX.Element;
|
|
91
|
+
declare const MultiLineGraph: ({ datasets, xAxisLabels, className, tooltipPosition, svg, }: MultiLineGraphProps) => JSX.Element;
|
|
91
92
|
|
|
92
93
|
interface SingleLineGraphProps {
|
|
93
94
|
data: number[];
|
package/dist/index.js
CHANGED
|
@@ -903,8 +903,10 @@ var MultiLineGraph = ({
|
|
|
903
903
|
datasets,
|
|
904
904
|
xAxisLabels,
|
|
905
905
|
className = "",
|
|
906
|
-
tooltipPosition = "top"
|
|
907
|
-
|
|
906
|
+
tooltipPosition = "top",
|
|
907
|
+
svg = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
908
|
+
<path d="M10.0833 0.75H1.91667C1.275 0.75 0.755833 1.275 0.755833 1.91667L0.75 10.0833C0.75 10.725 1.275 11.25 1.91667 11.25H10.0833C10.725 11.25 11.25 10.725 11.25 10.0833V1.91667C11.25 1.275 10.725 0.75 10.0833 0.75ZM10.0833 10.0833H1.91667V1.91667H10.0833V10.0833ZM5.125 8.91667H6.875V6.875H8.91667V5.125H6.875V3.08333H5.125V5.125H3.08333V6.875H5.125V8.91667Z" fill="#4683B4"/>
|
|
909
|
+
</svg>`
|
|
908
910
|
}) => {
|
|
909
911
|
const chartRef = React.useRef(null);
|
|
910
912
|
const [chartKey, setChartKey] = React.useState(`chart-${Date.now()}`);
|
|
@@ -987,9 +989,7 @@ var MultiLineGraph = ({
|
|
|
987
989
|
const dataPointsHtml = dataPoints.map(
|
|
988
990
|
(point, index) => `
|
|
989
991
|
<div style="display: flex; align-items: center; gap: 8px; margin: ${index > 0 ? "4px" : "0"} 0;">
|
|
990
|
-
|
|
991
|
-
<path d="M10.0833 0.75H1.91667C1.275 0.75 0.755833 1.275 0.755833 1.91667L0.75 10.0833C0.75 10.725 1.275 11.25 1.91667 11.25H10.0833C10.725 11.25 11.25 10.725 11.25 10.0833V1.91667C11.25 1.275 10.725 0.75 10.0833 0.75ZM10.0833 10.0833H1.91667V1.91667H10.0833V10.0833ZM5.125 8.91667H6.875V6.875H8.91667V5.125H6.875V3.08333H5.125V5.125H3.08333V6.875H5.125V8.91667Z" fill="#4683B4"/>
|
|
992
|
-
</svg>
|
|
992
|
+
${svg}
|
|
993
993
|
<span style="font-weight: bold; color: #757575; margin-top: 1px;">
|
|
994
994
|
${point.dataset.label}: <span style="color:#131414; padding-top: 1px;">${point.parsed.y}</span>
|
|
995
995
|
</span>
|
|
@@ -1260,48 +1260,60 @@ var SingleLineGraph = ({
|
|
|
1260
1260
|
document.body.appendChild(tooltipEl);
|
|
1261
1261
|
}
|
|
1262
1262
|
const tooltipModel = context.tooltip;
|
|
1263
|
-
context.chart.canvas.style.cursor = tooltipModel.opacity === 0 ? "default" : "pointer";
|
|
1264
1263
|
if (tooltipModel.opacity === 0) {
|
|
1265
1264
|
tooltipEl.style.opacity = "0";
|
|
1265
|
+
tooltipEl.style.pointerEvents = "none";
|
|
1266
1266
|
return;
|
|
1267
1267
|
}
|
|
1268
|
+
context.chart.canvas.style.cursor = "pointer";
|
|
1268
1269
|
const dataPoint = (_a = tooltipModel.dataPoints) == null ? void 0 : _a[0];
|
|
1269
1270
|
if (!dataPoint) return;
|
|
1270
1271
|
const value = dataPoint.parsed.y;
|
|
1271
1272
|
const label2 = dataPoint.label;
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1273
|
+
const arrowSize = 6;
|
|
1274
|
+
const innerArrowSize = 5;
|
|
1275
|
+
const isAbove = tooltipPosition === "top";
|
|
1276
|
+
const arrowBorderStyles = isAbove ? `top: 100%; border-top: ${arrowSize}px solid rgba(16, 30, 115, 0.1);` : `bottom: 100%; border-bottom: ${arrowSize}px solid rgba(16, 30, 115, 0.1);`;
|
|
1277
|
+
const arrowInnerStyles = isAbove ? `top: 100%; transform: translateX(-50%) translateY(-1px); border-top: ${innerArrowSize}px solid white;` : `bottom: 100%; transform: translateX(-50%) translateY(1px); border-bottom: ${innerArrowSize}px solid white;`;
|
|
1275
1278
|
tooltipEl.innerHTML = `
|
|
1276
|
-
<div style="background:white; border:1px solid rgba(16, 30, 115, 0.1); padding:10px; border-radius:4px; font-size:12px;">
|
|
1277
|
-
<
|
|
1279
|
+
<div style="position: relative; background: white; border: 1px solid rgba(16, 30, 115, 0.1); padding: 10px; border-radius: 4px; font-size: 12px; color: #333; z-index: 999; transition: opacity 0.2s ease;">
|
|
1280
|
+
<div id="tooltip-arrow-border" style="position: absolute; transform: translateX(-50%); width: 0; height: 0; border-left: ${arrowSize}px solid transparent; border-right: ${arrowSize}px solid transparent; ${arrowBorderStyles}"></div>
|
|
1281
|
+
<div id="tooltip-arrow-inner" style="position: absolute; width: 0; height: 0; border-left: ${innerArrowSize}px solid transparent; border-right: ${innerArrowSize}px solid transparent; ${arrowInnerStyles}"></div>
|
|
1282
|
+
<div>
|
|
1283
|
+
<p style="color:#757575; margin: 0 0 4px 0;"><strong>${label2}</strong></p>
|
|
1284
|
+
<span style="display: inline-flex; align-items: center; font-weight: bold; color: #757575;">
|
|
1285
|
+
${svg}
|
|
1286
|
+
${labelPopupTitle}: <span style="color:#131414;"> ${value}</span>
|
|
1287
|
+
</span>
|
|
1288
|
+
</div>
|
|
1278
1289
|
</div>
|
|
1279
1290
|
`;
|
|
1291
|
+
tooltipEl.style.opacity = "0";
|
|
1292
|
+
tooltipEl.style.position = "absolute";
|
|
1293
|
+
tooltipEl.style.pointerEvents = "none";
|
|
1280
1294
|
const tooltipWidth = tooltipEl.offsetWidth;
|
|
1281
1295
|
const tooltipHeight = tooltipEl.offsetHeight;
|
|
1282
1296
|
const position = context.chart.canvas.getBoundingClientRect();
|
|
1283
1297
|
const pointX = position.left + window.pageXOffset + tooltipModel.caretX;
|
|
1284
1298
|
const pointY = position.top + window.pageYOffset + tooltipModel.caretY;
|
|
1285
|
-
|
|
1286
|
-
let
|
|
1299
|
+
let yPosition;
|
|
1300
|
+
let finalIsAbove = tooltipPosition === "top";
|
|
1287
1301
|
const yTop = pointY - tooltipHeight - arrowSize - 5;
|
|
1288
1302
|
const yBottom = pointY + arrowSize + 5;
|
|
1289
|
-
|
|
1290
|
-
if (isAbove) {
|
|
1303
|
+
if (finalIsAbove) {
|
|
1291
1304
|
yPosition = yTop;
|
|
1292
1305
|
if (yPosition < window.scrollY + 10) {
|
|
1293
1306
|
yPosition = yBottom;
|
|
1294
|
-
|
|
1307
|
+
finalIsAbove = false;
|
|
1295
1308
|
}
|
|
1296
1309
|
} else {
|
|
1297
1310
|
yPosition = yBottom;
|
|
1298
1311
|
if (yPosition + tooltipHeight > window.innerHeight + window.scrollY - 10) {
|
|
1299
1312
|
yPosition = yTop;
|
|
1300
|
-
|
|
1313
|
+
finalIsAbove = true;
|
|
1301
1314
|
}
|
|
1302
1315
|
}
|
|
1303
|
-
|
|
1304
|
-
let xPosition = tooltipLeftEdge;
|
|
1316
|
+
let xPosition = pointX - tooltipWidth / 2;
|
|
1305
1317
|
if (xPosition < 10) {
|
|
1306
1318
|
xPosition = 10;
|
|
1307
1319
|
} else if (xPosition + tooltipWidth > window.innerWidth - 10) {
|
|
@@ -1309,23 +1321,39 @@ var SingleLineGraph = ({
|
|
|
1309
1321
|
}
|
|
1310
1322
|
let arrowLeftPercent = (pointX - xPosition) / tooltipWidth * 100;
|
|
1311
1323
|
arrowLeftPercent = Math.max(5, Math.min(95, arrowLeftPercent));
|
|
1312
|
-
const
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
const
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1324
|
+
const arrowBorderEl = tooltipEl.querySelector(
|
|
1325
|
+
"#tooltip-arrow-border"
|
|
1326
|
+
);
|
|
1327
|
+
const arrowInnerEl = tooltipEl.querySelector(
|
|
1328
|
+
"#tooltip-arrow-inner"
|
|
1329
|
+
);
|
|
1330
|
+
if (arrowBorderEl && arrowInnerEl) {
|
|
1331
|
+
arrowBorderEl.style.left = `${arrowLeftPercent}%`;
|
|
1332
|
+
arrowInnerEl.style.left = `${arrowLeftPercent}%`;
|
|
1333
|
+
if (finalIsAbove !== isAbove) {
|
|
1334
|
+
if (finalIsAbove) {
|
|
1335
|
+
arrowBorderEl.style.top = "100%";
|
|
1336
|
+
arrowBorderEl.style.bottom = "auto";
|
|
1337
|
+
arrowBorderEl.style.borderTopColor = "rgba(16, 30, 115, 0.1)";
|
|
1338
|
+
arrowBorderEl.style.borderBottomColor = "transparent";
|
|
1339
|
+
arrowInnerEl.style.top = "100%";
|
|
1340
|
+
arrowInnerEl.style.bottom = "auto";
|
|
1341
|
+
arrowInnerEl.style.transform = "translateX(-50%) translateY(-1px)";
|
|
1342
|
+
arrowInnerEl.style.borderTopColor = "white";
|
|
1343
|
+
arrowInnerEl.style.borderBottomColor = "transparent";
|
|
1344
|
+
} else {
|
|
1345
|
+
arrowBorderEl.style.bottom = "100%";
|
|
1346
|
+
arrowBorderEl.style.top = "auto";
|
|
1347
|
+
arrowBorderEl.style.borderBottomColor = "rgba(16, 30, 115, 0.1)";
|
|
1348
|
+
arrowBorderEl.style.borderTopColor = "transparent";
|
|
1349
|
+
arrowInnerEl.style.bottom = "100%";
|
|
1350
|
+
arrowInnerEl.style.top = "auto";
|
|
1351
|
+
arrowInnerEl.style.transform = "translateX(-50%) translateY(1px)";
|
|
1352
|
+
arrowInnerEl.style.borderBottomColor = "white";
|
|
1353
|
+
arrowInnerEl.style.borderTopColor = "transparent";
|
|
1354
|
+
}
|
|
1355
|
+
}
|
|
1356
|
+
}
|
|
1329
1357
|
tooltipEl.style.opacity = "1";
|
|
1330
1358
|
tooltipEl.style.left = xPosition + "px";
|
|
1331
1359
|
tooltipEl.style.top = yPosition + "px";
|
|
@@ -1349,8 +1377,7 @@ var SingleLineGraph = ({
|
|
|
1349
1377
|
}
|
|
1350
1378
|
}
|
|
1351
1379
|
}),
|
|
1352
|
-
[tooltipPosition, labelPopupTitle]
|
|
1353
|
-
// Add dependencies
|
|
1380
|
+
[tooltipPosition, labelPopupTitle, svg]
|
|
1354
1381
|
);
|
|
1355
1382
|
const verticalHoverLine = React.useMemo(
|
|
1356
1383
|
() => ({
|