stickyflow 0.9.2 → 0.10.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/CHANGELOG.md +16 -0
- package/README.md +1 -1
- package/dist/binding/index.cjs +9 -9
- package/dist/binding/index.d.cts +3 -3
- package/dist/binding/index.d.ts +3 -3
- package/dist/binding/index.js +3 -3
- package/dist/{chunk-EURX7QT3.cjs → chunk-5PJ55GPG.cjs} +883 -830
- package/dist/chunk-5PJ55GPG.cjs.map +1 -0
- package/dist/{chunk-AAP24GBG.js → chunk-EGUPN56K.js} +3 -3
- package/dist/chunk-EGUPN56K.js.map +1 -0
- package/dist/{chunk-Q6FBISNP.js → chunk-HRU6VOEC.js} +545 -331
- package/dist/chunk-HRU6VOEC.js.map +1 -0
- package/dist/{chunk-3EOG34QN.cjs → chunk-KRSX4UZ7.cjs} +308 -252
- package/dist/chunk-KRSX4UZ7.cjs.map +1 -0
- package/dist/{chunk-XNNNIOJU.js → chunk-L7CEX5JV.js} +5 -5
- package/dist/{chunk-XNNNIOJU.js.map → chunk-L7CEX5JV.js.map} +1 -1
- package/dist/{chunk-C25NWWIH.cjs → chunk-LSEMXRB5.cjs} +549 -331
- package/dist/chunk-LSEMXRB5.cjs.map +1 -0
- package/dist/{chunk-MR32IJQO.cjs → chunk-SCD3AHMY.cjs} +15 -15
- package/dist/chunk-SCD3AHMY.cjs.map +1 -0
- package/dist/{chunk-G2N3KJYJ.js → chunk-SDOHUNBW.js} +237 -184
- package/dist/chunk-SDOHUNBW.js.map +1 -0
- package/dist/{chunk-2GKXPZRL.cjs → chunk-TECWZVIM.cjs} +23 -23
- package/dist/chunk-TECWZVIM.cjs.map +1 -0
- package/dist/{chunk-C3LVKPWQ.js → chunk-VPNOVRWP.js} +279 -223
- package/dist/chunk-VPNOVRWP.js.map +1 -0
- package/dist/index.cjs +36 -36
- package/dist/index.d.cts +33 -28
- package/dist/index.d.ts +33 -28
- package/dist/index.js +5 -5
- package/dist/interaction/index.cjs +358 -337
- package/dist/interaction/index.cjs.map +1 -1
- package/dist/interaction/index.js +133 -112
- package/dist/interaction/index.js.map +1 -1
- package/dist/{runtime-DG8X3Fwf.d.cts → runtime-Bkv7QW7H.d.cts} +1 -1
- package/dist/{runtime-kqD1RS17.d.ts → runtime-DJ4K4_HZ.d.ts} +1 -1
- package/dist/{runtimeTypes-CvjlBZds.d.cts → runtimeTypes-BvJBZLkr.d.cts} +1 -1
- package/dist/{runtimeTypes-vRaHOIHi.d.ts → runtimeTypes-C1shzoyr.d.ts} +1 -1
- package/dist/stickyflow-diagram.global.js +41 -41
- package/dist/stickyflow-diagram.global.js.map +1 -1
- package/dist/viewer/index.cjs +9 -9
- package/dist/viewer/index.d.cts +1 -1
- package/dist/viewer/index.d.ts +1 -1
- package/dist/viewer/index.js +4 -4
- package/dist/web-component/index.cjs +6 -6
- package/dist/web-component/index.cjs.map +1 -1
- package/dist/web-component/index.js +4 -4
- package/dist/web-component/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-2GKXPZRL.cjs.map +0 -1
- package/dist/chunk-3EOG34QN.cjs.map +0 -1
- package/dist/chunk-AAP24GBG.js.map +0 -1
- package/dist/chunk-C25NWWIH.cjs.map +0 -1
- package/dist/chunk-C3LVKPWQ.js.map +0 -1
- package/dist/chunk-EURX7QT3.cjs.map +0 -1
- package/dist/chunk-G2N3KJYJ.js.map +0 -1
- package/dist/chunk-MR32IJQO.cjs.map +0 -1
- package/dist/chunk-Q6FBISNP.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkLSEMXRB5_cjs = require('./chunk-LSEMXRB5.cjs');
|
|
4
4
|
|
|
5
5
|
// src/renderInput/styleDecoding/colorToken.ts
|
|
6
6
|
var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
|
|
@@ -660,7 +660,7 @@ function readComponentValue(descriptor, raw) {
|
|
|
660
660
|
return raw;
|
|
661
661
|
}
|
|
662
662
|
function genericComponentObject(canvasObject) {
|
|
663
|
-
const descriptor =
|
|
663
|
+
const descriptor = chunkLSEMXRB5_cjs.getComponentDescriptor(canvasObject.component.type);
|
|
664
664
|
return {
|
|
665
665
|
id: canvasObject.id,
|
|
666
666
|
type: canvasObject.component.type,
|
|
@@ -849,7 +849,7 @@ var BUILT_IN_OBJECTS = {
|
|
|
849
849
|
};
|
|
850
850
|
function componentObject(canvasObject) {
|
|
851
851
|
const type = canvasObject.component.type;
|
|
852
|
-
return
|
|
852
|
+
return chunkLSEMXRB5_cjs.isBuiltInComponentType(type) ? BUILT_IN_OBJECTS[type](canvasObject) : genericComponentObject(canvasObject);
|
|
853
853
|
}
|
|
854
854
|
|
|
855
855
|
// src/renderInput/fromSfl/canvasObjects/connection.ts
|
|
@@ -1094,9 +1094,9 @@ function collectCanvasObjects(state) {
|
|
|
1094
1094
|
shapes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "shape").map((shape) => shapeObject(shape, shaders)),
|
|
1095
1095
|
frames: canvasObjects.filter((canvasObject) => canvasObject.objectType === "frame").map(frameObject),
|
|
1096
1096
|
swimlanes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "swimlane").map(swimlaneObject),
|
|
1097
|
-
isometricObjects: canvasObjects.filter(
|
|
1097
|
+
isometricObjects: canvasObjects.filter(chunkLSEMXRB5_cjs.isIsometricObject).map(isometricObject),
|
|
1098
1098
|
paths: canvasObjects.filter((canvasObject) => canvasObject.objectType === "path").map(pathObject),
|
|
1099
|
-
dimensions: canvasObjects.filter(
|
|
1099
|
+
dimensions: canvasObjects.filter(chunkLSEMXRB5_cjs.isDimensionObject).map(dimensionObject),
|
|
1100
1100
|
charts: canvasObjects.filter((canvasObject) => canvasObject.objectType === "chart").map(chartObject),
|
|
1101
1101
|
components: canvasObjects.filter(
|
|
1102
1102
|
(canvasObject) => canvasObject.objectType === "component" && canvasObject.component !== void 0
|
|
@@ -1123,9 +1123,9 @@ function sidePoint(canvasObject, endpoint) {
|
|
|
1123
1123
|
function namedPortPoint(canvasObject, endpoint) {
|
|
1124
1124
|
const port = canvasObject.symbol?.ports?.find((candidate) => candidate.name === endpoint.port);
|
|
1125
1125
|
if (!port) {
|
|
1126
|
-
return
|
|
1126
|
+
return chunkLSEMXRB5_cjs.elementCenter(canvasObject);
|
|
1127
1127
|
}
|
|
1128
|
-
return
|
|
1128
|
+
return chunkLSEMXRB5_cjs.pointAtNormalizedPort(
|
|
1129
1129
|
{
|
|
1130
1130
|
x: canvasObject.x,
|
|
1131
1131
|
y: canvasObject.y,
|
|
@@ -1171,7 +1171,7 @@ function explicitAnchorPoint(canvasObject, endpoint) {
|
|
|
1171
1171
|
return null;
|
|
1172
1172
|
}
|
|
1173
1173
|
function automaticEndpointPoint(canvasObject, opposite) {
|
|
1174
|
-
return opposite ?
|
|
1174
|
+
return opposite ? chunkLSEMXRB5_cjs.edgePointToward(canvasObject, opposite) : chunkLSEMXRB5_cjs.elementCenter(canvasObject);
|
|
1175
1175
|
}
|
|
1176
1176
|
function findPositionedCanvasObject(canvasObjects, id) {
|
|
1177
1177
|
return canvasObjects.find((candidate) => candidate.id === id);
|
|
@@ -1189,7 +1189,7 @@ function positionedCanvasObjects(canvasObjects) {
|
|
|
1189
1189
|
];
|
|
1190
1190
|
}
|
|
1191
1191
|
function connectionEndpointPoint(object, face) {
|
|
1192
|
-
return object ?
|
|
1192
|
+
return object ? chunkLSEMXRB5_cjs.isometricFaceCenter(object, face) : { x: 0, y: 0 };
|
|
1193
1193
|
}
|
|
1194
1194
|
function isometricStackPosition(isometricObjects, id) {
|
|
1195
1195
|
const index = isometricObjects.findIndex((object2) => object2.id === id);
|
|
@@ -1204,8 +1204,8 @@ function connectionStack(isometricObjects, connection) {
|
|
|
1204
1204
|
return { order: connection.order, sourceIndex: connection.sourceIndex };
|
|
1205
1205
|
}
|
|
1206
1206
|
const behind = [
|
|
1207
|
-
|
|
1208
|
-
|
|
1207
|
+
chunkLSEMXRB5_cjs.VISIBLE_ISOMETRIC_FACES.has(connection.fromFace) ? void 0 : isometricStackPosition(isometricObjects, connection.fromId),
|
|
1208
|
+
chunkLSEMXRB5_cjs.VISIBLE_ISOMETRIC_FACES.has(connection.toFace) ? void 0 : isometricStackPosition(isometricObjects, connection.toId)
|
|
1209
1209
|
].filter((position) => position !== void 0);
|
|
1210
1210
|
if (!behind.length) {
|
|
1211
1211
|
return { sourceIndex: connection.sourceIndex };
|
|
@@ -1247,7 +1247,7 @@ function createRenderInputLinks(canvasObjects) {
|
|
|
1247
1247
|
|
|
1248
1248
|
// src/renderInput/fromSfl/index.ts
|
|
1249
1249
|
function sflToRenderInput(sfl) {
|
|
1250
|
-
const state =
|
|
1250
|
+
const state = chunkLSEMXRB5_cjs.sflToCanvasState(sfl);
|
|
1251
1251
|
const canvasObjects = collectCanvasObjects(state);
|
|
1252
1252
|
return {
|
|
1253
1253
|
shapes: canvasObjects.shapes,
|
|
@@ -1266,13 +1266,13 @@ function sflToRenderInput(sfl) {
|
|
|
1266
1266
|
// src/renderScene/artifacts/component/placeholder.ts
|
|
1267
1267
|
var STROKE = "#94a3b8";
|
|
1268
1268
|
function buildPlaceholder(component, index) {
|
|
1269
|
-
const x =
|
|
1270
|
-
const y =
|
|
1271
|
-
const width = Math.max(0,
|
|
1272
|
-
const height = Math.max(0,
|
|
1273
|
-
const rotation =
|
|
1269
|
+
const x = chunkLSEMXRB5_cjs.finite(component.x, 0);
|
|
1270
|
+
const y = chunkLSEMXRB5_cjs.finite(component.y, 0);
|
|
1271
|
+
const width = Math.max(0, chunkLSEMXRB5_cjs.finite(component.width, 120));
|
|
1272
|
+
const height = Math.max(0, chunkLSEMXRB5_cjs.finite(component.height, 60));
|
|
1273
|
+
const rotation = chunkLSEMXRB5_cjs.finite(component.rotation, 0);
|
|
1274
1274
|
const order = 1e4 + index;
|
|
1275
|
-
const bounds =
|
|
1275
|
+
const bounds = chunkLSEMXRB5_cjs.rotatedBounds({ x, y, width, height }, rotation, 2);
|
|
1276
1276
|
return [
|
|
1277
1277
|
{
|
|
1278
1278
|
id: `widget-${component.id}`,
|
|
@@ -1297,7 +1297,7 @@ function buildPlaceholder(component, index) {
|
|
|
1297
1297
|
width,
|
|
1298
1298
|
height,
|
|
1299
1299
|
lines: [component.type],
|
|
1300
|
-
fontFamily:
|
|
1300
|
+
fontFamily: chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
1301
1301
|
fontSize: 12,
|
|
1302
1302
|
fontWeight: "normal",
|
|
1303
1303
|
color: STROKE,
|
|
@@ -1311,44 +1311,44 @@ function buildPlaceholder(component, index) {
|
|
|
1311
1311
|
|
|
1312
1312
|
// src/renderScene/artifacts/component/builtIn.ts
|
|
1313
1313
|
function buildRollingNumber(component, index) {
|
|
1314
|
-
const x =
|
|
1315
|
-
const y =
|
|
1316
|
-
const width = Math.max(0,
|
|
1317
|
-
const height = Math.max(0,
|
|
1318
|
-
const rotation =
|
|
1314
|
+
const x = chunkLSEMXRB5_cjs.finite(component.x, 0);
|
|
1315
|
+
const y = chunkLSEMXRB5_cjs.finite(component.y, 0);
|
|
1316
|
+
const width = Math.max(0, chunkLSEMXRB5_cjs.finite(component.width, 160));
|
|
1317
|
+
const height = Math.max(0, chunkLSEMXRB5_cjs.finite(component.height, 90));
|
|
1318
|
+
const rotation = chunkLSEMXRB5_cjs.finite(component.rotation, 0);
|
|
1319
1319
|
return [
|
|
1320
1320
|
{
|
|
1321
1321
|
id: `widget-${component.id}`,
|
|
1322
1322
|
type: "rolling-number",
|
|
1323
1323
|
order: 1e4 + index,
|
|
1324
|
-
bounds:
|
|
1324
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x, y, width, height }, rotation, 2),
|
|
1325
1325
|
x,
|
|
1326
1326
|
y,
|
|
1327
1327
|
width,
|
|
1328
1328
|
height,
|
|
1329
1329
|
rotation,
|
|
1330
|
-
value:
|
|
1330
|
+
value: chunkLSEMXRB5_cjs.formatRollingNumber(component.value, component.digits),
|
|
1331
1331
|
digits: component.digits,
|
|
1332
|
-
duration: Math.max(0,
|
|
1332
|
+
duration: Math.max(0, chunkLSEMXRB5_cjs.finite(component.duration, 420)),
|
|
1333
1333
|
label: component.label,
|
|
1334
|
-
componentStyle:
|
|
1334
|
+
componentStyle: chunkLSEMXRB5_cjs.resolveRollingNumberStyle(component.style)
|
|
1335
1335
|
}
|
|
1336
1336
|
];
|
|
1337
1337
|
}
|
|
1338
1338
|
function buildTickScale(component, index) {
|
|
1339
|
-
const x =
|
|
1340
|
-
const y =
|
|
1341
|
-
const width = Math.max(0,
|
|
1342
|
-
const height = Math.max(0,
|
|
1343
|
-
const rotation =
|
|
1344
|
-
const max =
|
|
1345
|
-
const progress = Math.min(1, Math.max(0,
|
|
1339
|
+
const x = chunkLSEMXRB5_cjs.finite(component.x, 0);
|
|
1340
|
+
const y = chunkLSEMXRB5_cjs.finite(component.y, 0);
|
|
1341
|
+
const width = Math.max(0, chunkLSEMXRB5_cjs.finite(component.width, 200));
|
|
1342
|
+
const height = Math.max(0, chunkLSEMXRB5_cjs.finite(component.height, 200));
|
|
1343
|
+
const rotation = chunkLSEMXRB5_cjs.finite(component.rotation, 0);
|
|
1344
|
+
const max = chunkLSEMXRB5_cjs.finite(component.max, 100) || 100;
|
|
1345
|
+
const progress = Math.min(1, Math.max(0, chunkLSEMXRB5_cjs.finite(Number(component.value), 0) / max));
|
|
1346
1346
|
const nodes = [
|
|
1347
1347
|
{
|
|
1348
1348
|
id: `widget-${component.id}`,
|
|
1349
1349
|
type: "shader-surface",
|
|
1350
1350
|
order: 1e4 + index,
|
|
1351
|
-
bounds:
|
|
1351
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x, y, width, height }, rotation, 2),
|
|
1352
1352
|
x,
|
|
1353
1353
|
y,
|
|
1354
1354
|
width,
|
|
@@ -1365,12 +1365,12 @@ function buildTickScale(component, index) {
|
|
|
1365
1365
|
}
|
|
1366
1366
|
function buildTickLabels(component, box) {
|
|
1367
1367
|
const labels = component.labels ?? {};
|
|
1368
|
-
const ticks2 = Math.max(1,
|
|
1369
|
-
const major = Math.max(1,
|
|
1370
|
-
const start =
|
|
1371
|
-
const sweep =
|
|
1372
|
-
const radius =
|
|
1373
|
-
const fontSize =
|
|
1368
|
+
const ticks2 = Math.max(1, chunkLSEMXRB5_cjs.finite(Number(component.parameters.ticks), 48));
|
|
1369
|
+
const major = Math.max(1, chunkLSEMXRB5_cjs.finite(Number(component.parameters.major), 5));
|
|
1370
|
+
const start = chunkLSEMXRB5_cjs.finite(Number(component.parameters.start), 225) * Math.PI / 180;
|
|
1371
|
+
const sweep = chunkLSEMXRB5_cjs.finite(Number(component.parameters.sweep), 270) * Math.PI / 180;
|
|
1372
|
+
const radius = chunkLSEMXRB5_cjs.finite(Number(component.parameters.radius), 0.9) + chunkLSEMXRB5_cjs.finite(labels.offset, 0.08);
|
|
1373
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(labels.size, 12);
|
|
1374
1374
|
const centerX = box.x + box.width / 2;
|
|
1375
1375
|
const centerY = box.y + box.height / 2;
|
|
1376
1376
|
const count = Math.floor(ticks2 / major);
|
|
@@ -1385,10 +1385,10 @@ function buildTickLabels(component, box) {
|
|
|
1385
1385
|
id: `widget-${component.id}-label-${step}`,
|
|
1386
1386
|
type: "text",
|
|
1387
1387
|
order: box.order + 0.1,
|
|
1388
|
-
bounds:
|
|
1388
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(labelBox, 0, 2),
|
|
1389
1389
|
...labelBox,
|
|
1390
1390
|
lines: [String(Math.round(box.max * fraction * 10) / 10)],
|
|
1391
|
-
fontFamily: labels.fontFamily ||
|
|
1391
|
+
fontFamily: labels.fontFamily || chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
1392
1392
|
fontSize,
|
|
1393
1393
|
fontWeight: labels.weight ?? "normal",
|
|
1394
1394
|
color: labels.color || "#8f95c4",
|
|
@@ -1400,20 +1400,20 @@ function buildTickLabels(component, box) {
|
|
|
1400
1400
|
return nodes;
|
|
1401
1401
|
}
|
|
1402
1402
|
function buildRuler(component, index) {
|
|
1403
|
-
const x =
|
|
1404
|
-
const y =
|
|
1405
|
-
const width = Math.max(0,
|
|
1406
|
-
const height = Math.max(0,
|
|
1407
|
-
const rotation =
|
|
1408
|
-
const min =
|
|
1409
|
-
const max =
|
|
1410
|
-
const progress = max === min ? 0 : Math.min(1, Math.max(0, (
|
|
1403
|
+
const x = chunkLSEMXRB5_cjs.finite(component.x, 0);
|
|
1404
|
+
const y = chunkLSEMXRB5_cjs.finite(component.y, 0);
|
|
1405
|
+
const width = Math.max(0, chunkLSEMXRB5_cjs.finite(component.width, 120));
|
|
1406
|
+
const height = Math.max(0, chunkLSEMXRB5_cjs.finite(component.height, 360));
|
|
1407
|
+
const rotation = chunkLSEMXRB5_cjs.finite(component.rotation, 0);
|
|
1408
|
+
const min = chunkLSEMXRB5_cjs.finite(component.min, 0);
|
|
1409
|
+
const max = chunkLSEMXRB5_cjs.finite(component.max, 100);
|
|
1410
|
+
const progress = max === min ? 0 : Math.min(1, Math.max(0, (chunkLSEMXRB5_cjs.finite(Number(component.value), min) - min) / (max - min)));
|
|
1411
1411
|
const nodes = [
|
|
1412
1412
|
{
|
|
1413
1413
|
id: `widget-${component.id}`,
|
|
1414
1414
|
type: "shader-surface",
|
|
1415
1415
|
order: 1e4 + index,
|
|
1416
|
-
bounds:
|
|
1416
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x, y, width, height }, rotation, 2),
|
|
1417
1417
|
x,
|
|
1418
1418
|
y,
|
|
1419
1419
|
width,
|
|
@@ -1431,14 +1431,14 @@ function buildRuler(component, index) {
|
|
|
1431
1431
|
function buildRulerLabels(component, box) {
|
|
1432
1432
|
const labels = component.labels ?? {};
|
|
1433
1433
|
const horizontal = component.parameters.axis === "horizontal";
|
|
1434
|
-
const ticks2 = Math.max(1,
|
|
1435
|
-
const major = Math.max(1,
|
|
1436
|
-
const inset =
|
|
1437
|
-
const line =
|
|
1434
|
+
const ticks2 = Math.max(1, chunkLSEMXRB5_cjs.finite(Number(component.parameters.ticks), 50));
|
|
1435
|
+
const major = Math.max(1, chunkLSEMXRB5_cjs.finite(Number(component.parameters.major), 5));
|
|
1436
|
+
const inset = chunkLSEMXRB5_cjs.finite(Number(component.parameters.inset), 0.05) > 0 ? chunkLSEMXRB5_cjs.finite(Number(component.parameters.inset), 0.05) : 0.05;
|
|
1437
|
+
const line = chunkLSEMXRB5_cjs.finite(Number(component.parameters.line), 0.7) > 0 ? chunkLSEMXRB5_cjs.finite(Number(component.parameters.line), 0.7) : 0.7;
|
|
1438
1438
|
const across = horizontal ? box.height : box.width;
|
|
1439
|
-
const tickLength = (
|
|
1440
|
-
const edge = line * across - 0.12 * across - tickLength -
|
|
1441
|
-
const fontSize =
|
|
1439
|
+
const tickLength = (chunkLSEMXRB5_cjs.finite(Number(component.parameters.length), 0.1) > 0 ? chunkLSEMXRB5_cjs.finite(Number(component.parameters.length), 0.1) : 0.1) * across * 1.9;
|
|
1440
|
+
const edge = line * across - 0.12 * across - tickLength - chunkLSEMXRB5_cjs.finite(labels.offset, 0.04) * across;
|
|
1441
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(labels.size, 12);
|
|
1442
1442
|
const count = Math.floor(ticks2 / major);
|
|
1443
1443
|
const nodes = [];
|
|
1444
1444
|
for (let step = 0; step <= count; step += 1) {
|
|
@@ -1449,10 +1449,10 @@ function buildRulerLabels(component, box) {
|
|
|
1449
1449
|
id: `widget-${component.id}-label-${step}`,
|
|
1450
1450
|
type: "text",
|
|
1451
1451
|
order: box.order + 0.1,
|
|
1452
|
-
bounds:
|
|
1452
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(labelBox, 0, 2),
|
|
1453
1453
|
...labelBox,
|
|
1454
1454
|
lines: [String(Math.round((box.min + (box.max - box.min) * fraction) * 10) / 10)],
|
|
1455
|
-
fontFamily: labels.fontFamily ||
|
|
1455
|
+
fontFamily: labels.fontFamily || chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
1456
1456
|
fontSize,
|
|
1457
1457
|
fontWeight: labels.weight ?? "normal",
|
|
1458
1458
|
color: labels.color || "#8f95c4",
|
|
@@ -1468,10 +1468,10 @@ function buildRulerLabels(component, box) {
|
|
|
1468
1468
|
var DISABLED_INK = "#94a3b8";
|
|
1469
1469
|
function controlBox(component, index, fallback) {
|
|
1470
1470
|
return {
|
|
1471
|
-
x:
|
|
1472
|
-
y:
|
|
1473
|
-
width: Math.max(1,
|
|
1474
|
-
height: Math.max(1,
|
|
1471
|
+
x: chunkLSEMXRB5_cjs.finite(component.x, 0),
|
|
1472
|
+
y: chunkLSEMXRB5_cjs.finite(component.y, 0),
|
|
1473
|
+
width: Math.max(1, chunkLSEMXRB5_cjs.finite(component.width, fallback.width)),
|
|
1474
|
+
height: Math.max(1, chunkLSEMXRB5_cjs.finite(component.height, fallback.height)),
|
|
1475
1475
|
order: 1e4 + index
|
|
1476
1476
|
};
|
|
1477
1477
|
}
|
|
@@ -1489,7 +1489,7 @@ function hitArea(component, box) {
|
|
|
1489
1489
|
id: `widget-${component.id}`,
|
|
1490
1490
|
type: "rect",
|
|
1491
1491
|
order: box.order,
|
|
1492
|
-
bounds:
|
|
1492
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(box, 0, 0),
|
|
1493
1493
|
x: box.x,
|
|
1494
1494
|
y: box.y,
|
|
1495
1495
|
width: box.width,
|
|
@@ -1502,13 +1502,13 @@ function labelText(component, part, area, label, order) {
|
|
|
1502
1502
|
id: `widget-${component.id}-${part}`,
|
|
1503
1503
|
type: "text",
|
|
1504
1504
|
order,
|
|
1505
|
-
bounds:
|
|
1505
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(area, 0, 0),
|
|
1506
1506
|
x: area.x,
|
|
1507
1507
|
y: area.y,
|
|
1508
1508
|
width: area.width,
|
|
1509
1509
|
height: area.height,
|
|
1510
1510
|
lines: [label.text],
|
|
1511
|
-
fontFamily:
|
|
1511
|
+
fontFamily: chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
1512
1512
|
fontSize: label.fontSize,
|
|
1513
1513
|
fontWeight: "600",
|
|
1514
1514
|
color: label.color,
|
|
@@ -1527,7 +1527,7 @@ function buildButton(component, index) {
|
|
|
1527
1527
|
id: `widget-${component.id}-face`,
|
|
1528
1528
|
type: "rect",
|
|
1529
1529
|
order: box.order + 0.1,
|
|
1530
|
-
bounds:
|
|
1530
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(box, 0, 0),
|
|
1531
1531
|
x: box.x,
|
|
1532
1532
|
y: box.y,
|
|
1533
1533
|
width: box.width,
|
|
@@ -1566,7 +1566,7 @@ function boxNode(component, box, square) {
|
|
|
1566
1566
|
id: `widget-${component.id}-box`,
|
|
1567
1567
|
type: "rect",
|
|
1568
1568
|
order: box.order + 0.1,
|
|
1569
|
-
bounds:
|
|
1569
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(square, 0, 2),
|
|
1570
1570
|
...square,
|
|
1571
1571
|
rx: square.width * CORNER_RATIO,
|
|
1572
1572
|
style: fade(component, {
|
|
@@ -1581,7 +1581,7 @@ function checkNode(component, box, square) {
|
|
|
1581
1581
|
id: `widget-${component.id}-check`,
|
|
1582
1582
|
type: "path",
|
|
1583
1583
|
order: box.order + 0.2,
|
|
1584
|
-
bounds:
|
|
1584
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(square, 0, 0),
|
|
1585
1585
|
d: checkPath(square),
|
|
1586
1586
|
style: fade(component, {
|
|
1587
1587
|
fill: { kind: "none" },
|
|
@@ -1627,82 +1627,90 @@ function readout(component, fraction) {
|
|
|
1627
1627
|
}
|
|
1628
1628
|
return display === "value" ? Number(component.value).toFixed(decimals(numberProperty2(component, "step"))) : "";
|
|
1629
1629
|
}
|
|
1630
|
-
function
|
|
1631
|
-
const box = controlBox(component, index, { width: 96, height: 96 });
|
|
1630
|
+
function dialOf(component, box) {
|
|
1632
1631
|
const min = numberProperty2(component, "min");
|
|
1633
1632
|
const max = numberProperty2(component, "max");
|
|
1634
|
-
const fraction = Math.min(1, Math.max(0, (Number(component.value) - min) / (max - min || 1)));
|
|
1635
|
-
const start = numberProperty2(component, "start");
|
|
1636
|
-
const sweep = Math.min(360, Math.max(1, numberProperty2(component, "sweep")));
|
|
1637
1633
|
const thickness = Math.min(numberProperty2(component, "thickness"), Math.min(box.width, box.height) / 3);
|
|
1638
|
-
const cx = box.x + box.width / 2;
|
|
1639
|
-
const cy = box.y + box.height / 2;
|
|
1640
1634
|
const radius = Math.max(1, Math.min(box.width, box.height) / 2 - thickness / 2);
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1635
|
+
return {
|
|
1636
|
+
cx: box.x + box.width / 2,
|
|
1637
|
+
cy: box.y + box.height / 2,
|
|
1638
|
+
radius,
|
|
1639
|
+
thickness,
|
|
1640
|
+
fraction: Math.min(1, Math.max(0, (Number(component.value) - min) / (max - min || 1))),
|
|
1641
|
+
start: numberProperty2(component, "start"),
|
|
1642
|
+
sweep: Math.min(360, Math.max(1, numberProperty2(component, "sweep"))),
|
|
1643
|
+
circumference: 2 * Math.PI * radius,
|
|
1644
|
+
rounded: textProperty(component, "rounded") !== "false"
|
|
1645
|
+
};
|
|
1646
|
+
}
|
|
1647
|
+
function arcNode(component, box, dial, part, order, color, length, extra = {}) {
|
|
1648
|
+
const { cx, cy, radius, thickness } = dial;
|
|
1649
|
+
return {
|
|
1645
1650
|
id: `widget-${component.id}-${part}`,
|
|
1646
1651
|
type: "ellipse",
|
|
1647
1652
|
order: box.order + order,
|
|
1648
|
-
bounds:
|
|
1653
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
|
|
1649
1654
|
cx,
|
|
1650
1655
|
cy,
|
|
1651
1656
|
rx: radius,
|
|
1652
1657
|
ry: radius,
|
|
1653
|
-
rotation: -start,
|
|
1658
|
+
rotation: -dial.start,
|
|
1654
1659
|
style: fade(component, {
|
|
1655
1660
|
fill: { kind: "none" },
|
|
1656
1661
|
stroke: solid(color),
|
|
1657
1662
|
strokeWidth: thickness,
|
|
1658
|
-
dash: [Math.max(1e-3, length), circumference],
|
|
1659
|
-
lineCap:
|
|
1663
|
+
dash: [Math.max(1e-3, length), dial.circumference],
|
|
1664
|
+
lineCap: dial.rounded ? "round" : "butt",
|
|
1660
1665
|
...extra
|
|
1661
1666
|
})
|
|
1662
|
-
}
|
|
1667
|
+
};
|
|
1668
|
+
}
|
|
1669
|
+
function discNode(component, box, part, order, center, radius, fill2) {
|
|
1670
|
+
return {
|
|
1671
|
+
id: `widget-${component.id}-${part}`,
|
|
1672
|
+
type: "ellipse",
|
|
1673
|
+
order: box.order + order,
|
|
1674
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2 }, 0, 0),
|
|
1675
|
+
cx: center.x,
|
|
1676
|
+
cy: center.y,
|
|
1677
|
+
rx: radius,
|
|
1678
|
+
ry: radius,
|
|
1679
|
+
style: fade(component, { fill: solid(fill2), stroke: { kind: "none" } })
|
|
1680
|
+
};
|
|
1681
|
+
}
|
|
1682
|
+
function buildKnob(component, index) {
|
|
1683
|
+
const box = controlBox(component, index, { width: 96, height: 96 });
|
|
1684
|
+
const dial = dialOf(component, box);
|
|
1685
|
+
const { cx, cy, radius, thickness, fraction, sweep, circumference } = dial;
|
|
1686
|
+
const angle = (dial.start - fraction * sweep) * Math.PI / 180;
|
|
1663
1687
|
const faceRadius = Math.max(1, radius - thickness / 2 - Math.max(2, thickness * 0.4));
|
|
1664
1688
|
const dotRadius = thickness / 2 * DOT_RATIO + 1;
|
|
1665
1689
|
const nodes = [
|
|
1666
1690
|
hitArea(component, box),
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
0
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
bounds: chunkC25NWWIH_cjs.rotatedBounds(
|
|
1691
|
-
{
|
|
1692
|
-
x: cx + radius * Math.cos(angle) - dotRadius,
|
|
1693
|
-
y: cy - radius * Math.sin(angle) - dotRadius,
|
|
1694
|
-
width: dotRadius * 2,
|
|
1695
|
-
height: dotRadius * 2
|
|
1696
|
-
},
|
|
1697
|
-
0,
|
|
1698
|
-
0
|
|
1699
|
-
),
|
|
1700
|
-
cx: cx + radius * Math.cos(angle),
|
|
1701
|
-
cy: cy - radius * Math.sin(angle),
|
|
1702
|
-
rx: dotRadius,
|
|
1703
|
-
ry: dotRadius,
|
|
1704
|
-
style: fade(component, { fill: solid(textProperty(component, "dot")), stroke: { kind: "none" } })
|
|
1705
|
-
}
|
|
1691
|
+
arcNode(component, box, dial, "track", 0.1, textProperty(component, "track"), sweep / 360 * circumference),
|
|
1692
|
+
arcNode(
|
|
1693
|
+
component,
|
|
1694
|
+
box,
|
|
1695
|
+
dial,
|
|
1696
|
+
"fill",
|
|
1697
|
+
0.2,
|
|
1698
|
+
textProperty(component, "accent"),
|
|
1699
|
+
fraction * sweep / 360 * circumference,
|
|
1700
|
+
{
|
|
1701
|
+
opacity: fraction > 0 ? 1 : 0
|
|
1702
|
+
}
|
|
1703
|
+
),
|
|
1704
|
+
discNode(component, box, "face", 0.3, { x: cx, y: cy }, faceRadius, textProperty(component, "face")),
|
|
1705
|
+
discNode(
|
|
1706
|
+
component,
|
|
1707
|
+
box,
|
|
1708
|
+
"dot",
|
|
1709
|
+
0.4,
|
|
1710
|
+
{ x: cx + radius * Math.cos(angle), y: cy - radius * Math.sin(angle) },
|
|
1711
|
+
dotRadius,
|
|
1712
|
+
textProperty(component, "dot")
|
|
1713
|
+
)
|
|
1706
1714
|
];
|
|
1707
1715
|
const text = readout(component, fraction);
|
|
1708
1716
|
if (text) {
|
|
@@ -1733,62 +1741,68 @@ function readout2(component, fraction) {
|
|
|
1733
1741
|
}
|
|
1734
1742
|
return display === "value" ? String(Number(component.value)) : "";
|
|
1735
1743
|
}
|
|
1744
|
+
function buildRing(component, box, fraction, round2) {
|
|
1745
|
+
const thickness = Math.min(numberProperty2(component, "thickness"), Math.min(box.width, box.height) / 2);
|
|
1746
|
+
const radius = Math.max(1, Math.min(box.width, box.height) / 2 - thickness / 2);
|
|
1747
|
+
const circumference = 2 * Math.PI * radius;
|
|
1748
|
+
const cx = box.x + box.width / 2;
|
|
1749
|
+
const cy = box.y + box.height / 2;
|
|
1750
|
+
const ring = (part, order, color, extra) => ({
|
|
1751
|
+
id: `widget-${component.id}-${part}`,
|
|
1752
|
+
type: "ellipse",
|
|
1753
|
+
order: box.order + order,
|
|
1754
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
|
|
1755
|
+
cx,
|
|
1756
|
+
cy,
|
|
1757
|
+
rx: radius,
|
|
1758
|
+
ry: radius,
|
|
1759
|
+
rotation: -90,
|
|
1760
|
+
style: fade(component, { fill: { kind: "none" }, stroke: solid(color), strokeWidth: thickness, ...extra })
|
|
1761
|
+
});
|
|
1762
|
+
return [
|
|
1763
|
+
ring("track", 0.1, textProperty(component, "track"), {}),
|
|
1764
|
+
ring("fill", 0.2, textProperty(component, "accent"), {
|
|
1765
|
+
dash: [Math.max(1e-3, fraction * circumference), circumference],
|
|
1766
|
+
lineCap: round2 ? "round" : "butt",
|
|
1767
|
+
opacity: fraction > 0 ? 1 : 0
|
|
1768
|
+
})
|
|
1769
|
+
];
|
|
1770
|
+
}
|
|
1771
|
+
function buildBar(component, box, fraction, round2) {
|
|
1772
|
+
const vertical = textProperty(component, "direction") === "vertical";
|
|
1773
|
+
const radius = round2 ? (vertical ? box.width : box.height) / 2 : 0;
|
|
1774
|
+
const bar = (part, order, length, color, opacity) => {
|
|
1775
|
+
const shape = vertical ? { x: box.x, y: box.y + box.height - length, width: box.width, height: length } : { x: box.x, y: box.y, width: length, height: box.height };
|
|
1776
|
+
return {
|
|
1777
|
+
id: `widget-${component.id}-${part}`,
|
|
1778
|
+
type: "rect",
|
|
1779
|
+
order: box.order + order,
|
|
1780
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(shape, 0, 0),
|
|
1781
|
+
...shape,
|
|
1782
|
+
rx: radius,
|
|
1783
|
+
style: fade(component, {
|
|
1784
|
+
fill: solid(color),
|
|
1785
|
+
stroke: { kind: "none" },
|
|
1786
|
+
...opacity === void 0 ? {} : { opacity }
|
|
1787
|
+
})
|
|
1788
|
+
};
|
|
1789
|
+
};
|
|
1790
|
+
const full = vertical ? box.height : box.width;
|
|
1791
|
+
return [
|
|
1792
|
+
bar("track", 0.1, full, textProperty(component, "track")),
|
|
1793
|
+
bar("fill", 0.2, Math.max(0, fraction * full), textProperty(component, "accent"), fraction > 0 ? 1 : 0)
|
|
1794
|
+
];
|
|
1795
|
+
}
|
|
1736
1796
|
function buildProgress(component, index) {
|
|
1737
1797
|
const box = controlBox(component, index, { width: 220, height: 12 });
|
|
1738
1798
|
const min = numberProperty2(component, "min");
|
|
1739
1799
|
const max = numberProperty2(component, "max");
|
|
1740
1800
|
const fraction = Math.min(1, Math.max(0, (Number(component.value) - min) / (max - min || 1)));
|
|
1741
1801
|
const round2 = textProperty(component, "rounded") !== "false";
|
|
1742
|
-
const nodes = [
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
const circumference = 2 * Math.PI * radius;
|
|
1747
|
-
const cx = box.x + box.width / 2;
|
|
1748
|
-
const cy = box.y + box.height / 2;
|
|
1749
|
-
const ring = (part, order, color, extra) => ({
|
|
1750
|
-
id: `widget-${component.id}-${part}`,
|
|
1751
|
-
type: "ellipse",
|
|
1752
|
-
order: box.order + order,
|
|
1753
|
-
bounds: chunkC25NWWIH_cjs.rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
|
|
1754
|
-
cx,
|
|
1755
|
-
cy,
|
|
1756
|
-
rx: radius,
|
|
1757
|
-
ry: radius,
|
|
1758
|
-
rotation: -90,
|
|
1759
|
-
style: fade(component, { fill: { kind: "none" }, stroke: solid(color), strokeWidth: thickness, ...extra })
|
|
1760
|
-
});
|
|
1761
|
-
nodes.push(ring("track", 0.1, textProperty(component, "track"), {}));
|
|
1762
|
-
nodes.push(
|
|
1763
|
-
ring("fill", 0.2, textProperty(component, "accent"), {
|
|
1764
|
-
dash: [Math.max(1e-3, fraction * circumference), circumference],
|
|
1765
|
-
lineCap: round2 ? "round" : "butt",
|
|
1766
|
-
opacity: fraction > 0 ? 1 : 0
|
|
1767
|
-
})
|
|
1768
|
-
);
|
|
1769
|
-
} else {
|
|
1770
|
-
const vertical = textProperty(component, "direction") === "vertical";
|
|
1771
|
-
const radius = round2 ? (vertical ? box.width : box.height) / 2 : 0;
|
|
1772
|
-
const bar = (part, order, length, color, opacity) => {
|
|
1773
|
-
const shape = vertical ? { x: box.x, y: box.y + box.height - length, width: box.width, height: length } : { x: box.x, y: box.y, width: length, height: box.height };
|
|
1774
|
-
return {
|
|
1775
|
-
id: `widget-${component.id}-${part}`,
|
|
1776
|
-
type: "rect",
|
|
1777
|
-
order: box.order + order,
|
|
1778
|
-
bounds: chunkC25NWWIH_cjs.rotatedBounds(shape, 0, 0),
|
|
1779
|
-
...shape,
|
|
1780
|
-
rx: radius,
|
|
1781
|
-
style: fade(component, {
|
|
1782
|
-
fill: solid(color),
|
|
1783
|
-
stroke: { kind: "none" },
|
|
1784
|
-
...opacity === void 0 ? {} : { opacity }
|
|
1785
|
-
})
|
|
1786
|
-
};
|
|
1787
|
-
};
|
|
1788
|
-
const full = vertical ? box.height : box.width;
|
|
1789
|
-
nodes.push(bar("track", 0.1, full, textProperty(component, "track")));
|
|
1790
|
-
nodes.push(bar("fill", 0.2, Math.max(0, fraction * full), textProperty(component, "accent"), fraction > 0 ? 1 : 0));
|
|
1791
|
-
}
|
|
1802
|
+
const nodes = [
|
|
1803
|
+
hitArea(component, box),
|
|
1804
|
+
...textProperty(component, "variant") === "ring" ? buildRing(component, box, fraction, round2) : buildBar(component, box, fraction, round2)
|
|
1805
|
+
];
|
|
1792
1806
|
const text = readout2(component, fraction);
|
|
1793
1807
|
if (text) {
|
|
1794
1808
|
const label = {
|
|
@@ -1818,7 +1832,7 @@ function buildSegmented(component, index) {
|
|
|
1818
1832
|
id: `widget-${component.id}-track`,
|
|
1819
1833
|
type: "rect",
|
|
1820
1834
|
order: box.order + 0.1,
|
|
1821
|
-
bounds:
|
|
1835
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(box, 0, 0),
|
|
1822
1836
|
x: box.x,
|
|
1823
1837
|
y: box.y,
|
|
1824
1838
|
width: box.width,
|
|
@@ -1830,7 +1844,7 @@ function buildSegmented(component, index) {
|
|
|
1830
1844
|
id: `widget-${component.id}-active`,
|
|
1831
1845
|
type: "rect",
|
|
1832
1846
|
order: box.order + 0.2,
|
|
1833
|
-
bounds:
|
|
1847
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x: box.x + inset + active * cellWidth, width: cellWidth, ...cell }, 0, 0),
|
|
1834
1848
|
x: box.x + inset + active * cellWidth,
|
|
1835
1849
|
y: cell.y,
|
|
1836
1850
|
width: cellWidth,
|
|
@@ -1882,7 +1896,7 @@ var rect = (component, box, part, order, shape, color, extra = {}) => ({
|
|
|
1882
1896
|
id: `widget-${component.id}-${part}`,
|
|
1883
1897
|
type: "rect",
|
|
1884
1898
|
order: box.order + order,
|
|
1885
|
-
bounds:
|
|
1899
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(shape, 0, 0),
|
|
1886
1900
|
...shape,
|
|
1887
1901
|
style: fade(component, { fill: solid(color), stroke: { kind: "none" }, ...extra })
|
|
1888
1902
|
});
|
|
@@ -1907,12 +1921,15 @@ function ticks(component, box, vertical, reach, offset) {
|
|
|
1907
1921
|
return rect(component, box, `tick-${index}`, 0.15, shape, color);
|
|
1908
1922
|
});
|
|
1909
1923
|
}
|
|
1924
|
+
function alongOf(box, reach, vertical) {
|
|
1925
|
+
return (fraction) => vertical ? box.y + box.height - reach - fraction * (box.height - reach * 2) : box.x + reach + fraction * (box.width - reach * 2);
|
|
1926
|
+
}
|
|
1910
1927
|
function buildLine(component, box, thumbs, vertical) {
|
|
1911
1928
|
const reach = sliderReach("line", vertical ? box.width : box.height);
|
|
1912
1929
|
const radius = reach * numberProperty2(component, "thumbSize") / 100;
|
|
1913
1930
|
const thickness = Math.min(numberProperty2(component, "trackHeight"), vertical ? box.width : box.height);
|
|
1914
1931
|
const mid = vertical ? box.x + box.width / 2 : box.y + box.height / 2;
|
|
1915
|
-
const along2 = (
|
|
1932
|
+
const along2 = alongOf(box, reach, vertical);
|
|
1916
1933
|
const line = (start, end) => vertical ? {
|
|
1917
1934
|
x: mid - thickness / 2,
|
|
1918
1935
|
y: Math.min(start, end),
|
|
@@ -1935,7 +1952,7 @@ function buildLine(component, box, thumbs, vertical) {
|
|
|
1935
1952
|
id: `widget-${component.id}-${part}`,
|
|
1936
1953
|
type: "ellipse",
|
|
1937
1954
|
order: box.order + order,
|
|
1938
|
-
bounds:
|
|
1955
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, 0),
|
|
1939
1956
|
cx,
|
|
1940
1957
|
cy,
|
|
1941
1958
|
rx: radius,
|
|
@@ -1961,69 +1978,57 @@ function buildLine(component, box, thumbs, vertical) {
|
|
|
1961
1978
|
thumb(thumbs.two ? "thumb-end" : "thumb", thumbs.to, 0.31)
|
|
1962
1979
|
];
|
|
1963
1980
|
}
|
|
1964
|
-
function
|
|
1965
|
-
const reach = sliderReach("field", vertical ? box.width : box.height);
|
|
1966
|
-
const radius = Math.min(numberProperty2(component, "radius"), Math.min(box.width, box.height) / 2);
|
|
1967
|
-
const whole = { x: box.x, y: box.y, width: box.width, height: box.height, rx: radius };
|
|
1968
|
-
const along2 = (fraction) => vertical ? box.y + box.height - reach - fraction * (box.height - reach * 2) : box.x + reach + fraction * (box.width - reach * 2);
|
|
1969
|
-
const start = thumbs.two ? along2(thumbs.from) : vertical ? box.y + box.height : box.x;
|
|
1970
|
-
const end = along2(thumbs.to);
|
|
1981
|
+
function fieldFill(whole, box, thumbs, vertical, start, end) {
|
|
1971
1982
|
const first = Math.min(start, end) - (thumbs.two ? HANDLE_WIDTH / 2 : 0);
|
|
1972
1983
|
const last = Math.max(start, end) + HANDLE_WIDTH / 2;
|
|
1973
|
-
|
|
1984
|
+
return vertical ? {
|
|
1974
1985
|
...whole,
|
|
1975
1986
|
y: thumbs.two ? first : end - HANDLE_WIDTH / 2,
|
|
1976
1987
|
height: thumbs.two ? last - first : Math.max(0, box.y + box.height - end + HANDLE_WIDTH / 2),
|
|
1977
|
-
rx: thumbs.two ? 0 :
|
|
1988
|
+
rx: thumbs.two ? 0 : whole.rx
|
|
1978
1989
|
} : {
|
|
1979
1990
|
...whole,
|
|
1980
1991
|
x: thumbs.two ? first : box.x,
|
|
1981
1992
|
width: thumbs.two ? last - first : Math.max(0, end + HANDLE_WIDTH / 2 - box.x),
|
|
1982
|
-
rx: thumbs.two ? 0 :
|
|
1993
|
+
rx: thumbs.two ? 0 : whole.rx
|
|
1983
1994
|
};
|
|
1995
|
+
}
|
|
1996
|
+
function fieldHandle(component, box, vertical, part, at) {
|
|
1984
1997
|
const handleLength = (vertical ? box.width : box.height) * 0.5;
|
|
1985
|
-
const
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
rx: HANDLE_WIDTH / 2
|
|
1998
|
-
};
|
|
1999
|
-
return rect(component, box, part, 0.3, shape, textProperty(component, "accent"));
|
|
1998
|
+
const shape = vertical ? {
|
|
1999
|
+
x: box.x + (box.width - handleLength) / 2,
|
|
2000
|
+
y: at - HANDLE_WIDTH / 2,
|
|
2001
|
+
width: handleLength,
|
|
2002
|
+
height: HANDLE_WIDTH,
|
|
2003
|
+
rx: HANDLE_WIDTH / 2
|
|
2004
|
+
} : {
|
|
2005
|
+
x: at - HANDLE_WIDTH / 2,
|
|
2006
|
+
y: box.y + (box.height - handleLength) / 2,
|
|
2007
|
+
width: HANDLE_WIDTH,
|
|
2008
|
+
height: handleLength,
|
|
2009
|
+
rx: HANDLE_WIDTH / 2
|
|
2000
2010
|
};
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
...thumbs.two ? [handle("handle-start", start)] : [],
|
|
2005
|
-
handle(thumbs.two ? "handle-end" : "handle", end)
|
|
2006
|
-
];
|
|
2011
|
+
return rect(component, box, part, 0.3, shape, textProperty(component, "accent"));
|
|
2012
|
+
}
|
|
2013
|
+
function fieldTexts(component, box, thumbs, vertical) {
|
|
2007
2014
|
const text = {
|
|
2008
2015
|
color: ink(component, textProperty(component, "textColor")),
|
|
2009
2016
|
fontSize: numberProperty2(component, "fontSize")
|
|
2010
2017
|
};
|
|
2011
2018
|
const value = readout3(component, thumbs);
|
|
2012
2019
|
if (vertical) {
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
);
|
|
2023
|
-
}
|
|
2024
|
-
return nodes;
|
|
2020
|
+
return value ? [
|
|
2021
|
+
labelText(
|
|
2022
|
+
component,
|
|
2023
|
+
"value",
|
|
2024
|
+
{ x: box.x, y: box.y + 6, width: box.width, height: 20 },
|
|
2025
|
+
{ ...text, text: value, align: "center" },
|
|
2026
|
+
box.order + 0.4
|
|
2027
|
+
)
|
|
2028
|
+
] : [];
|
|
2025
2029
|
}
|
|
2026
2030
|
const inner = { y: box.y, height: box.height, width: Math.max(0, box.width / 2 - TEXT_PADDING) };
|
|
2031
|
+
const nodes = [];
|
|
2027
2032
|
if (component.label) {
|
|
2028
2033
|
nodes.push(
|
|
2029
2034
|
labelText(
|
|
@@ -2046,9 +2051,31 @@ function buildField(component, box, thumbs, vertical) {
|
|
|
2046
2051
|
)
|
|
2047
2052
|
);
|
|
2048
2053
|
}
|
|
2049
|
-
nodes.push(...ticks(component, box, false, reach, box.height - TICK_LENGTH - 5));
|
|
2050
2054
|
return nodes;
|
|
2051
2055
|
}
|
|
2056
|
+
function buildField(component, box, thumbs, vertical) {
|
|
2057
|
+
const reach = sliderReach("field", vertical ? box.width : box.height);
|
|
2058
|
+
const radius = Math.min(numberProperty2(component, "radius"), Math.min(box.width, box.height) / 2);
|
|
2059
|
+
const whole = { x: box.x, y: box.y, width: box.width, height: box.height, rx: radius };
|
|
2060
|
+
const along2 = alongOf(box, reach, vertical);
|
|
2061
|
+
const start = thumbs.two ? along2(thumbs.from) : vertical ? box.y + box.height : box.x;
|
|
2062
|
+
const end = along2(thumbs.to);
|
|
2063
|
+
return [
|
|
2064
|
+
rect(component, box, "track", 0.1, whole, textProperty(component, "surface")),
|
|
2065
|
+
rect(
|
|
2066
|
+
component,
|
|
2067
|
+
box,
|
|
2068
|
+
"fill",
|
|
2069
|
+
0.2,
|
|
2070
|
+
fieldFill(whole, box, thumbs, vertical, start, end),
|
|
2071
|
+
textProperty(component, "fill")
|
|
2072
|
+
),
|
|
2073
|
+
...thumbs.two ? [fieldHandle(component, box, vertical, "handle-start", start)] : [],
|
|
2074
|
+
fieldHandle(component, box, vertical, thumbs.two ? "handle-end" : "handle", end),
|
|
2075
|
+
...fieldTexts(component, box, thumbs, vertical),
|
|
2076
|
+
...vertical ? [] : ticks(component, box, false, reach, box.height - TICK_LENGTH - 5)
|
|
2077
|
+
];
|
|
2078
|
+
}
|
|
2052
2079
|
function buildSlider(component, index) {
|
|
2053
2080
|
const field = textProperty(component, "variant") === "field";
|
|
2054
2081
|
const vertical = textProperty(component, "direction") === "vertical";
|
|
@@ -2087,7 +2114,7 @@ function buildSwitch(component, index) {
|
|
|
2087
2114
|
id: `widget-${component.id}-track`,
|
|
2088
2115
|
type: "rect",
|
|
2089
2116
|
order: box.order + 0.1,
|
|
2090
|
-
bounds:
|
|
2117
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(box, 0, 0),
|
|
2091
2118
|
x: box.x,
|
|
2092
2119
|
y: box.y,
|
|
2093
2120
|
width: box.width,
|
|
@@ -2102,7 +2129,7 @@ function buildSwitch(component, index) {
|
|
|
2102
2129
|
id: `widget-${component.id}-thumb`,
|
|
2103
2130
|
type: "ellipse",
|
|
2104
2131
|
order: box.order + 0.2,
|
|
2105
|
-
bounds:
|
|
2132
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(thumb, 0, 0),
|
|
2106
2133
|
cx: centerX,
|
|
2107
2134
|
cy: box.y + box.height / 2,
|
|
2108
2135
|
rx: radius,
|
|
@@ -2126,7 +2153,7 @@ function buildToggleButton(component, index) {
|
|
|
2126
2153
|
id: `widget-${component.id}-face`,
|
|
2127
2154
|
type: "rect",
|
|
2128
2155
|
order: box.order + 0.1,
|
|
2129
|
-
bounds:
|
|
2156
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(box, 0, 2),
|
|
2130
2157
|
x: box.x,
|
|
2131
2158
|
y: box.y,
|
|
2132
2159
|
width: box.width,
|
|
@@ -2181,8 +2208,8 @@ function getComponentBuilder(type) {
|
|
|
2181
2208
|
|
|
2182
2209
|
// src/renderScene/artifacts/component/build.ts
|
|
2183
2210
|
function ariaOf(component) {
|
|
2184
|
-
const role =
|
|
2185
|
-
if (!role || !
|
|
2211
|
+
const role = chunkLSEMXRB5_cjs.getComponentDescriptor(component.type)?.role;
|
|
2212
|
+
if (!role || !chunkLSEMXRB5_cjs.isGenericComponent(component)) {
|
|
2186
2213
|
return void 0;
|
|
2187
2214
|
}
|
|
2188
2215
|
const flag = typeof component.value === "boolean" ? component.value : void 0;
|
|
@@ -2193,12 +2220,12 @@ function ariaOf(component) {
|
|
|
2193
2220
|
};
|
|
2194
2221
|
}
|
|
2195
2222
|
function labelOf(component) {
|
|
2196
|
-
return component.label ?? (
|
|
2223
|
+
return component.label ?? (chunkLSEMXRB5_cjs.isGenericComponent(component) ? component.id : String(component.value));
|
|
2197
2224
|
}
|
|
2198
2225
|
function buildComponents(components) {
|
|
2199
2226
|
return components.flatMap((component, index) => {
|
|
2200
2227
|
const build = getComponentBuilder(component.type) ?? buildPlaceholder;
|
|
2201
|
-
const nodes =
|
|
2228
|
+
const nodes = chunkLSEMXRB5_cjs.tag(
|
|
2202
2229
|
build(component, index),
|
|
2203
2230
|
"widget",
|
|
2204
2231
|
component.id,
|
|
@@ -2238,13 +2265,13 @@ function tabBox(input, thickness, length) {
|
|
|
2238
2265
|
y,
|
|
2239
2266
|
width: length,
|
|
2240
2267
|
height: thickness,
|
|
2241
|
-
path:
|
|
2268
|
+
path: chunkLSEMXRB5_cjs.bottomRoundedRectPath(x, y, length, thickness, TAB_RADIUS)
|
|
2242
2269
|
};
|
|
2243
2270
|
}
|
|
2244
2271
|
case "left": {
|
|
2245
2272
|
const x = input.x - thickness;
|
|
2246
2273
|
const y = input.y - inset;
|
|
2247
|
-
return { x, y, width: thickness, height: length, path:
|
|
2274
|
+
return { x, y, width: thickness, height: length, path: chunkLSEMXRB5_cjs.leftRoundedRectPath(x, y, thickness, length, TAB_RADIUS) };
|
|
2248
2275
|
}
|
|
2249
2276
|
case "right": {
|
|
2250
2277
|
const x = input.x + input.width;
|
|
@@ -2254,13 +2281,13 @@ function tabBox(input, thickness, length) {
|
|
|
2254
2281
|
y,
|
|
2255
2282
|
width: thickness,
|
|
2256
2283
|
height: length,
|
|
2257
|
-
path:
|
|
2284
|
+
path: chunkLSEMXRB5_cjs.rightRoundedRectPath(x, y, thickness, length, TAB_RADIUS)
|
|
2258
2285
|
};
|
|
2259
2286
|
}
|
|
2260
2287
|
default: {
|
|
2261
2288
|
const x = input.x - inset;
|
|
2262
2289
|
const y = input.y - thickness;
|
|
2263
|
-
return { x, y, width: length, height: thickness, path:
|
|
2290
|
+
return { x, y, width: length, height: thickness, path: chunkLSEMXRB5_cjs.topRoundedRectPath(x, y, length, thickness, TAB_RADIUS) };
|
|
2264
2291
|
}
|
|
2265
2292
|
}
|
|
2266
2293
|
}
|
|
@@ -2269,7 +2296,7 @@ function renderTitleTab(input) {
|
|
|
2269
2296
|
const padding = 16;
|
|
2270
2297
|
const length = Math.max(120, input.title.length * input.fontSize * 0.62 + padding * 2);
|
|
2271
2298
|
const box = tabBox(input, thickness, length);
|
|
2272
|
-
const bounds =
|
|
2299
|
+
const bounds = chunkLSEMXRB5_cjs.boxBounds(box, 6);
|
|
2273
2300
|
const vertical = input.labelPosition === "left" || input.labelPosition === "right";
|
|
2274
2301
|
return [
|
|
2275
2302
|
{
|
|
@@ -2297,7 +2324,7 @@ function horizontalTitleText(input, box, padding, bounds) {
|
|
|
2297
2324
|
width: Math.max(0, box.width - padding * 2),
|
|
2298
2325
|
height: box.height,
|
|
2299
2326
|
lines: [input.title],
|
|
2300
|
-
fontFamily: input.fontFamily ??
|
|
2327
|
+
fontFamily: input.fontFamily ?? chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
2301
2328
|
fontSize: input.fontSize,
|
|
2302
2329
|
fontWeight: input.fontWeight,
|
|
2303
2330
|
color: input.textColor,
|
|
@@ -2321,7 +2348,7 @@ function verticalTitleText(input, box, padding, bounds) {
|
|
|
2321
2348
|
width: textLength,
|
|
2322
2349
|
height: textThickness,
|
|
2323
2350
|
lines: [input.title],
|
|
2324
|
-
fontFamily: input.fontFamily ??
|
|
2351
|
+
fontFamily: input.fontFamily ?? chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
2325
2352
|
fontSize: input.fontSize,
|
|
2326
2353
|
fontWeight: input.fontWeight,
|
|
2327
2354
|
color: input.textColor,
|
|
@@ -2342,7 +2369,7 @@ var SQUARED_CORNER_BY_LABEL_POSITION = {
|
|
|
2342
2369
|
};
|
|
2343
2370
|
function frameBoundaryNode(frame, order, hasTab) {
|
|
2344
2371
|
const shadow = frame.shadow ?? true;
|
|
2345
|
-
const bounds =
|
|
2372
|
+
const bounds = chunkLSEMXRB5_cjs.boxBounds(
|
|
2346
2373
|
{ x: frame.x, y: frame.y, width: frame.width, height: frame.height },
|
|
2347
2374
|
frame.strokeWidth + (shadow ? 20 : 4)
|
|
2348
2375
|
);
|
|
@@ -2377,7 +2404,7 @@ function frameBoundaryNode(frame, order, hasTab) {
|
|
|
2377
2404
|
id: `frame-${frame.id}`,
|
|
2378
2405
|
order,
|
|
2379
2406
|
bounds,
|
|
2380
|
-
d:
|
|
2407
|
+
d: chunkLSEMXRB5_cjs.cornersRoundedRectPath(frame.x, frame.y, frame.width, frame.height, radii),
|
|
2381
2408
|
detail: { of: "frameBoundary", cornerRadius: frame.cornerRadius, squareCorner: squared },
|
|
2382
2409
|
style
|
|
2383
2410
|
};
|
|
@@ -2466,7 +2493,7 @@ function labelBase(context, lane, index) {
|
|
|
2466
2493
|
id: `swimlane-label-${context.swimlane.id}-${lane.id}`,
|
|
2467
2494
|
order: context.order + 0.5 + index / 100,
|
|
2468
2495
|
lines: [lane.label],
|
|
2469
|
-
fontFamily: context.swimlane.fontFamily ??
|
|
2496
|
+
fontFamily: context.swimlane.fontFamily ?? chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
2470
2497
|
fontSize: context.swimlane.fontSize,
|
|
2471
2498
|
fontWeight: context.swimlane.fontWeight,
|
|
2472
2499
|
color: context.swimlane.textColor,
|
|
@@ -2482,7 +2509,7 @@ function horizontalLabel(context, lane, index) {
|
|
|
2482
2509
|
const y = centerY - thickness / 2;
|
|
2483
2510
|
return {
|
|
2484
2511
|
...labelBase(context, lane, index),
|
|
2485
|
-
bounds:
|
|
2512
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x, y, width, height: thickness }, -90, 12),
|
|
2486
2513
|
x,
|
|
2487
2514
|
y,
|
|
2488
2515
|
width,
|
|
@@ -2534,7 +2561,7 @@ function createSwimlaneRenderContext(swimlane, index) {
|
|
|
2534
2561
|
return {
|
|
2535
2562
|
swimlane,
|
|
2536
2563
|
order: 5e3 + index,
|
|
2537
|
-
bounds:
|
|
2564
|
+
bounds: chunkLSEMXRB5_cjs.boxBounds(
|
|
2538
2565
|
{ x: swimlane.x, y: swimlane.y, width: swimlane.width, height: swimlane.height },
|
|
2539
2566
|
swimlane.strokeWidth + 4
|
|
2540
2567
|
),
|
|
@@ -2573,9 +2600,9 @@ function buildSwimlane(swimlane, index) {
|
|
|
2573
2600
|
function buildContainers(input) {
|
|
2574
2601
|
return [
|
|
2575
2602
|
...input.frames.flatMap(
|
|
2576
|
-
(frame, index) =>
|
|
2603
|
+
(frame, index) => chunkLSEMXRB5_cjs.tag(buildFrame(frame, index), "frame", frame.id, void 0, frame.title ?? void 0)
|
|
2577
2604
|
),
|
|
2578
|
-
...input.swimlanes.flatMap((swimlane, index) =>
|
|
2605
|
+
...input.swimlanes.flatMap((swimlane, index) => chunkLSEMXRB5_cjs.tag(buildSwimlane(swimlane, index), "swimlane", swimlane.id))
|
|
2579
2606
|
];
|
|
2580
2607
|
}
|
|
2581
2608
|
|
|
@@ -2625,7 +2652,7 @@ var DEFAULT_COLOR = "#475569";
|
|
|
2625
2652
|
var CHAR_WIDTH = 0.6;
|
|
2626
2653
|
var pathData = (segments) => segments.map(([from, to]) => `M ${from.x} ${from.y} L ${to.x} ${to.y}`).join(" ");
|
|
2627
2654
|
function pathNode(dimension, name, order, segments) {
|
|
2628
|
-
const strokeWidth = Math.max(0,
|
|
2655
|
+
const strokeWidth = Math.max(0, chunkLSEMXRB5_cjs.finite(dimension.strokeWidth, 1));
|
|
2629
2656
|
const points = segments.flat();
|
|
2630
2657
|
return {
|
|
2631
2658
|
type: "path",
|
|
@@ -2647,7 +2674,7 @@ function pathNode(dimension, name, order, segments) {
|
|
|
2647
2674
|
};
|
|
2648
2675
|
}
|
|
2649
2676
|
function labelNode2(dimension, order, text, center, angle) {
|
|
2650
|
-
const fontSize =
|
|
2677
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(dimension.fontSize, 11);
|
|
2651
2678
|
const width = Math.max(24, text.length * fontSize * CHAR_WIDTH + 8);
|
|
2652
2679
|
const height = fontSize * 1.3;
|
|
2653
2680
|
return {
|
|
@@ -2665,7 +2692,7 @@ function labelNode2(dimension, order, text, center, angle) {
|
|
|
2665
2692
|
width,
|
|
2666
2693
|
height,
|
|
2667
2694
|
lines: [text],
|
|
2668
|
-
fontFamily:
|
|
2695
|
+
fontFamily: chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
2669
2696
|
fontSize,
|
|
2670
2697
|
fontWeight: "normal",
|
|
2671
2698
|
color: dimension.textColor ?? dimension.strokeColor ?? DEFAULT_COLOR,
|
|
@@ -2690,7 +2717,7 @@ function buildDimension(dimension, index) {
|
|
|
2690
2717
|
}
|
|
2691
2718
|
function buildDimensions(dimensions) {
|
|
2692
2719
|
return dimensions.flatMap(
|
|
2693
|
-
(dimension, index) =>
|
|
2720
|
+
(dimension, index) => chunkLSEMXRB5_cjs.tag(
|
|
2694
2721
|
buildDimension(dimension, index),
|
|
2695
2722
|
"dimension",
|
|
2696
2723
|
dimension.id,
|
|
@@ -2704,9 +2731,9 @@ function buildDimensions(dimensions) {
|
|
|
2704
2731
|
// src/renderScene/artifacts/isometric/context.ts
|
|
2705
2732
|
var FILL_PROP = { prop: "style.fill", propKind: "color", propSolidOnly: true };
|
|
2706
2733
|
function isometricContext(object, index) {
|
|
2707
|
-
const strokeWidth = Math.max(0,
|
|
2708
|
-
const rotation =
|
|
2709
|
-
const box =
|
|
2734
|
+
const strokeWidth = Math.max(0, chunkLSEMXRB5_cjs.finite(object.strokeWidth, 1));
|
|
2735
|
+
const rotation = chunkLSEMXRB5_cjs.finite(object.rotation, 0);
|
|
2736
|
+
const box = chunkLSEMXRB5_cjs.isometricBounds(object);
|
|
2710
2737
|
const rotationCenter = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
|
|
2711
2738
|
return {
|
|
2712
2739
|
object,
|
|
@@ -2718,7 +2745,7 @@ function isometricContext(object, index) {
|
|
|
2718
2745
|
strokeWidth,
|
|
2719
2746
|
common: {
|
|
2720
2747
|
type: "path",
|
|
2721
|
-
bounds:
|
|
2748
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(box, rotation, strokeWidth + 2),
|
|
2722
2749
|
rotation,
|
|
2723
2750
|
rotationCenter,
|
|
2724
2751
|
style: {
|
|
@@ -2734,13 +2761,13 @@ function faceNode(context, name, offset, points, style) {
|
|
|
2734
2761
|
...context.common,
|
|
2735
2762
|
id: `isometric-${context.object.id}-${name}`,
|
|
2736
2763
|
order: context.order + offset,
|
|
2737
|
-
d:
|
|
2764
|
+
d: chunkLSEMXRB5_cjs.roundedPolygonPath([...points], 0),
|
|
2738
2765
|
style,
|
|
2739
2766
|
...FILL_PROP
|
|
2740
2767
|
};
|
|
2741
2768
|
}
|
|
2742
2769
|
function silhouette(object) {
|
|
2743
|
-
const faces =
|
|
2770
|
+
const faces = chunkLSEMXRB5_cjs.isometricFaces(object);
|
|
2744
2771
|
return [faces.top[0], faces.top[1], faces.right[2], faces.front[2], faces.front[3], faces.top[3]];
|
|
2745
2772
|
}
|
|
2746
2773
|
function hullNode(context, hullPath, cornerRadius) {
|
|
@@ -2757,15 +2784,15 @@ function hullNode(context, hullPath, cornerRadius) {
|
|
|
2757
2784
|
depth: Math.max(0, object.depth),
|
|
2758
2785
|
cornerRadius,
|
|
2759
2786
|
bounds: box,
|
|
2760
|
-
labelOffsetX:
|
|
2761
|
-
labelOffsetY:
|
|
2787
|
+
labelOffsetX: chunkLSEMXRB5_cjs.finite(object.labelOffsetX, 0),
|
|
2788
|
+
labelOffsetY: chunkLSEMXRB5_cjs.finite(object.labelOffsetY, 0)
|
|
2762
2789
|
},
|
|
2763
2790
|
style: { ...common.style, fill: { kind: "none" } }
|
|
2764
2791
|
};
|
|
2765
2792
|
}
|
|
2766
2793
|
function unseenHullNode(context) {
|
|
2767
2794
|
return {
|
|
2768
|
-
...hullNode(context,
|
|
2795
|
+
...hullNode(context, chunkLSEMXRB5_cjs.roundedPolygonPath(silhouette(context.object), 0), 0),
|
|
2769
2796
|
style: { ...context.common.style, fill: { kind: "none" }, stroke: { kind: "none" } }
|
|
2770
2797
|
};
|
|
2771
2798
|
}
|
|
@@ -2778,9 +2805,9 @@ var LABEL_PADDING_Y = 3;
|
|
|
2778
2805
|
var LABEL_CHAR_WIDTH = 6.5;
|
|
2779
2806
|
function labelPlacement(context) {
|
|
2780
2807
|
const { object } = context;
|
|
2781
|
-
const anchor =
|
|
2782
|
-
const bottomY = anchor.y - LABEL_GAP +
|
|
2783
|
-
return { anchor, centerX: anchor.x +
|
|
2808
|
+
const anchor = chunkLSEMXRB5_cjs.isometricTopFaceCenter(object);
|
|
2809
|
+
const bottomY = anchor.y - LABEL_GAP + chunkLSEMXRB5_cjs.finite(object.labelOffsetY, 0);
|
|
2810
|
+
return { anchor, centerX: anchor.x + chunkLSEMXRB5_cjs.finite(object.labelOffsetX, 0), topY: bottomY - LABEL_HEIGHT, bottomY };
|
|
2784
2811
|
}
|
|
2785
2812
|
function labelTextNode(context, placement, text) {
|
|
2786
2813
|
const { object, order, rotation, rotationCenter, box } = context;
|
|
@@ -2795,7 +2822,7 @@ function labelTextNode(context, placement, text) {
|
|
|
2795
2822
|
width: box.width,
|
|
2796
2823
|
height: LABEL_HEIGHT,
|
|
2797
2824
|
lines: [text],
|
|
2798
|
-
fontFamily:
|
|
2825
|
+
fontFamily: chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
2799
2826
|
fontSize: 12,
|
|
2800
2827
|
fontWeight: "normal",
|
|
2801
2828
|
color: "#111827",
|
|
@@ -2875,7 +2902,7 @@ function groundShadowNode(context, topOutline) {
|
|
|
2875
2902
|
}
|
|
2876
2903
|
const height = Math.max(0, object.height);
|
|
2877
2904
|
const heightFactor = 0.6 + Math.min(1, height / 150) * 0.7;
|
|
2878
|
-
const shadowDrop = height +
|
|
2905
|
+
const shadowDrop = height + chunkLSEMXRB5_cjs.finite(object.shadowStyle?.distance, 0);
|
|
2879
2906
|
const contactFootprint = topOutline.map((point) => ({ x: point.x, y: point.y + shadowDrop }));
|
|
2880
2907
|
const footprintCenter = {
|
|
2881
2908
|
x: contactFootprint.reduce((sum, point) => sum + point.x, 0) / contactFootprint.length,
|
|
@@ -2898,14 +2925,14 @@ function groundShadowNode(context, topOutline) {
|
|
|
2898
2925
|
maxX: Math.max(...footprintXs),
|
|
2899
2926
|
maxY: Math.max(...footprintYs)
|
|
2900
2927
|
},
|
|
2901
|
-
d:
|
|
2928
|
+
d: chunkLSEMXRB5_cjs.roundedPolygonPath(footprint, 0),
|
|
2902
2929
|
rotation,
|
|
2903
2930
|
rotationCenter,
|
|
2904
2931
|
style: {
|
|
2905
2932
|
fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
|
|
2906
2933
|
stroke: { kind: "none" },
|
|
2907
2934
|
opacity: Math.min(1, (object.shadowStyle?.opacity ?? 0.18) * heightFactor),
|
|
2908
|
-
blur:
|
|
2935
|
+
blur: chunkLSEMXRB5_cjs.finite(object.shadowStyle?.blur, 8),
|
|
2909
2936
|
pointerEvents: "none"
|
|
2910
2937
|
}
|
|
2911
2938
|
};
|
|
@@ -2919,7 +2946,7 @@ function sphereShadowNode(context, radius) {
|
|
|
2919
2946
|
const depth = Math.max(0, object.depth);
|
|
2920
2947
|
const center = {
|
|
2921
2948
|
x: box.x + box.width / 2,
|
|
2922
|
-
y: object.y + Math.max(0, object.height) + (width + depth) *
|
|
2949
|
+
y: object.y + Math.max(0, object.height) + (width + depth) * chunkLSEMXRB5_cjs.AXIS_SIN / 2
|
|
2923
2950
|
};
|
|
2924
2951
|
return {
|
|
2925
2952
|
type: "ellipse",
|
|
@@ -2939,7 +2966,7 @@ function sphereShadowNode(context, radius) {
|
|
|
2939
2966
|
fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
|
|
2940
2967
|
stroke: { kind: "none" },
|
|
2941
2968
|
opacity: object.shadowStyle?.opacity ?? 0.2,
|
|
2942
|
-
blur:
|
|
2969
|
+
blur: chunkLSEMXRB5_cjs.finite(object.shadowStyle?.blur, 8),
|
|
2943
2970
|
pointerEvents: "none"
|
|
2944
2971
|
}
|
|
2945
2972
|
};
|
|
@@ -2949,7 +2976,7 @@ function sphereShadowNode(context, radius) {
|
|
|
2949
2976
|
function faceNodes(context, faces, hullClip) {
|
|
2950
2977
|
const { object, common } = context;
|
|
2951
2978
|
const noStroke = { ...common.style, stroke: { kind: "none" } };
|
|
2952
|
-
const fills =
|
|
2979
|
+
const fills = chunkLSEMXRB5_cjs.deriveFaceFills(object.fill ?? "#f8fafc");
|
|
2953
2980
|
const face = (name, offset, points, color) => faceNode(context, name, offset, points, { ...noStroke, fill: { kind: "solid", color }, clip: hullClip });
|
|
2954
2981
|
return [
|
|
2955
2982
|
face("top", 0, faces.top, fills.topFill),
|
|
@@ -2975,9 +3002,9 @@ function seamsNode(context, faces, hullClip) {
|
|
|
2975
3002
|
}
|
|
2976
3003
|
function buildBox(object, index) {
|
|
2977
3004
|
const context = isometricContext(object, index);
|
|
2978
|
-
const faces =
|
|
2979
|
-
const cornerRadius = Math.max(0,
|
|
2980
|
-
const hullPath =
|
|
3005
|
+
const faces = chunkLSEMXRB5_cjs.isometricFaces(object);
|
|
3006
|
+
const cornerRadius = Math.max(0, chunkLSEMXRB5_cjs.finite(object.cornerRadius, 8));
|
|
3007
|
+
const hullPath = chunkLSEMXRB5_cjs.roundedPolygonPath(silhouette(object), cornerRadius);
|
|
2981
3008
|
const hullClip = { type: "path", d: hullPath };
|
|
2982
3009
|
const groundShadow = groundShadowNode(context, faces.top);
|
|
2983
3010
|
const seams = object.seams === false ? void 0 : seamsNode(context, faces, hullClip);
|
|
@@ -2989,7 +3016,7 @@ function buildBox(object, index) {
|
|
|
2989
3016
|
|
|
2990
3017
|
// src/renderScene/artifacts/isometric/extruded.ts
|
|
2991
3018
|
function wallNode(context, side, index, fill2) {
|
|
2992
|
-
const color =
|
|
3019
|
+
const color = chunkLSEMXRB5_cjs.shadeFill(fill2, side.light);
|
|
2993
3020
|
return faceNode(context, `side-${index}`, 0.05 + index * 1e-3, side.points, {
|
|
2994
3021
|
...context.common.style,
|
|
2995
3022
|
stroke: { kind: "solid", color },
|
|
@@ -3014,7 +3041,7 @@ function wallEdgesNode(context, side, index) {
|
|
|
3014
3041
|
}
|
|
3015
3042
|
function buildExtruded(object, index, footprint) {
|
|
3016
3043
|
const context = isometricContext(object, index);
|
|
3017
|
-
const { top, sides } =
|
|
3044
|
+
const { top, sides } = chunkLSEMXRB5_cjs.extrudeFootprint(object, footprint, Math.max(0, chunkLSEMXRB5_cjs.finite(object.cornerRadius, 0)));
|
|
3018
3045
|
const fill2 = object.fill ?? "#f8fafc";
|
|
3019
3046
|
const groundShadow = groundShadowNode(context, top);
|
|
3020
3047
|
const topFace = faceNode(context, "top", 0.2, top, { ...context.common.style, fill: { kind: "solid", color: fill2 } });
|
|
@@ -3051,9 +3078,9 @@ function buildSphere(object, index) {
|
|
|
3051
3078
|
kind: "linear-gradient",
|
|
3052
3079
|
angle: 135,
|
|
3053
3080
|
stops: [
|
|
3054
|
-
{ offset: 0, color:
|
|
3081
|
+
{ offset: 0, color: chunkLSEMXRB5_cjs.shadeFill(fill2, 1.22) },
|
|
3055
3082
|
{ offset: 0.5, color: fill2 },
|
|
3056
|
-
{ offset: 1, color:
|
|
3083
|
+
{ offset: 1, color: chunkLSEMXRB5_cjs.shadeFill(fill2, 0.82) }
|
|
3057
3084
|
]
|
|
3058
3085
|
}
|
|
3059
3086
|
},
|
|
@@ -3089,12 +3116,12 @@ function buildIsometricObject(object, index) {
|
|
|
3089
3116
|
if (object.form === "sphere") {
|
|
3090
3117
|
return buildSphere(object, index);
|
|
3091
3118
|
}
|
|
3092
|
-
const footprint =
|
|
3119
|
+
const footprint = chunkLSEMXRB5_cjs.cleanFootprint(object.footprint);
|
|
3093
3120
|
return footprint.length > 0 ? buildExtruded(object, index, footprint) : buildBox(object, index);
|
|
3094
3121
|
}
|
|
3095
3122
|
function buildIsometricObjects(objects) {
|
|
3096
3123
|
return objects.flatMap(
|
|
3097
|
-
(object, index) =>
|
|
3124
|
+
(object, index) => chunkLSEMXRB5_cjs.tag(
|
|
3098
3125
|
buildIsometricObject(object, index),
|
|
3099
3126
|
"isometric",
|
|
3100
3127
|
object.id,
|
|
@@ -3123,7 +3150,7 @@ function renderEndpointLabel(context, end, labelIndex) {
|
|
|
3123
3150
|
if (!label) {
|
|
3124
3151
|
return [];
|
|
3125
3152
|
}
|
|
3126
|
-
const fontSize =
|
|
3153
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(context.link.style?.fontSize, 10);
|
|
3127
3154
|
const position = endpointLabelPosition(context.points, end);
|
|
3128
3155
|
const width = 90;
|
|
3129
3156
|
return [
|
|
@@ -3137,7 +3164,7 @@ function renderEndpointLabel(context, end, labelIndex) {
|
|
|
3137
3164
|
width,
|
|
3138
3165
|
height: fontSize * 2,
|
|
3139
3166
|
lines: [label],
|
|
3140
|
-
fontFamily: context.link.style?.fontFamily ??
|
|
3167
|
+
fontFamily: context.link.style?.fontFamily ?? chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
3141
3168
|
fontSize,
|
|
3142
3169
|
fontWeight: "normal",
|
|
3143
3170
|
color: context.color,
|
|
@@ -3167,7 +3194,7 @@ function renderMainLabel(context) {
|
|
|
3167
3194
|
width: context.label.width,
|
|
3168
3195
|
height: context.label.fontSize * 2,
|
|
3169
3196
|
lines: context.label.lines,
|
|
3170
|
-
fontFamily: context.link.style?.fontFamily ??
|
|
3197
|
+
fontFamily: context.link.style?.fontFamily ?? chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
3171
3198
|
fontSize: context.label.fontSize,
|
|
3172
3199
|
fontWeight: "normal",
|
|
3173
3200
|
color: context.color,
|
|
@@ -3221,10 +3248,10 @@ function linkBounds(points, padding) {
|
|
|
3221
3248
|
}
|
|
3222
3249
|
function labelLayout(link, measureText) {
|
|
3223
3250
|
const visible = Boolean(link.showText && link.text);
|
|
3224
|
-
const fontSize =
|
|
3251
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(link.style?.fontSize, 10);
|
|
3225
3252
|
const width = Math.min(250, Math.max(fontSize * 2, (link.text?.length ?? 0) * fontSize * 0.65 + 10));
|
|
3226
|
-
const metrics = measureText?.(link.style?.fontFamily ??
|
|
3227
|
-
const lines = visible ?
|
|
3253
|
+
const metrics = measureText?.(link.style?.fontFamily ?? chunkLSEMXRB5_cjs.DEFAULT_FONT, fontSize);
|
|
3254
|
+
const lines = visible ? chunkLSEMXRB5_cjs.wrapText(link.text ?? "", width, fontSize, metrics) : [];
|
|
3228
3255
|
return { visible, fontSize, width, height: lines.length * fontSize * 1.4, lines };
|
|
3229
3256
|
}
|
|
3230
3257
|
function linkStyle(item, strokeWidth, color, dash) {
|
|
@@ -3241,26 +3268,26 @@ function linkStyle(item, strokeWidth, color, dash) {
|
|
|
3241
3268
|
dash,
|
|
3242
3269
|
lineCap: "round",
|
|
3243
3270
|
lineJoin: "round",
|
|
3244
|
-
opacity:
|
|
3271
|
+
opacity: chunkLSEMXRB5_cjs.finite(link.style?.opacity, 1),
|
|
3245
3272
|
shadow: resolveShadow(link.style?.shadow)
|
|
3246
3273
|
};
|
|
3247
3274
|
}
|
|
3248
3275
|
function createLinkRenderContext(item, index, measureText) {
|
|
3249
3276
|
const { link, from, to } = item;
|
|
3250
3277
|
const pathType = link.style?.pathType ?? "orthogonal";
|
|
3251
|
-
const { points, segments } =
|
|
3252
|
-
const strokeWidth =
|
|
3278
|
+
const { points, segments } = chunkLSEMXRB5_cjs.calculateLinkRoute(link, from, to, pathType);
|
|
3279
|
+
const strokeWidth = chunkLSEMXRB5_cjs.finite(link.style?.strokeWidth, 2);
|
|
3253
3280
|
const color = getLinkStrokeColor(link.style?.color) || "#64748b";
|
|
3254
3281
|
const label = labelLayout(link, measureText);
|
|
3255
3282
|
const contentDash = getDashArray(strokeWidth, link.style?.strokeStyle ?? "solid");
|
|
3256
|
-
const gap = label.visible && !contentDash ?
|
|
3283
|
+
const gap = label.visible && !contentDash ? chunkLSEMXRB5_cjs.labelGapDash(points, pathType, label.width, label.height) : null;
|
|
3257
3284
|
const dash = gap ? [gap.dashBefore, gap.gapLength, 1e6] : contentDash;
|
|
3258
3285
|
return {
|
|
3259
3286
|
link,
|
|
3260
3287
|
pathType,
|
|
3261
3288
|
points,
|
|
3262
3289
|
segments,
|
|
3263
|
-
midpoint:
|
|
3290
|
+
midpoint: chunkLSEMXRB5_cjs.getLineMidpoint(points, pathType, from, to),
|
|
3264
3291
|
strokeWidth,
|
|
3265
3292
|
bounds: linkBounds(points, strokeWidth + 14),
|
|
3266
3293
|
color,
|
|
@@ -3306,7 +3333,7 @@ function pathData2(points, pathType, segments, strokeWidth) {
|
|
|
3306
3333
|
return `M ${points[0]} ${points[1]} C ${points[2]} ${points[3]} ${points[4]} ${points[5]} ${points[6]} ${points[7]}`;
|
|
3307
3334
|
}
|
|
3308
3335
|
if (pathType === "orthogonal" && segments.length > 0) {
|
|
3309
|
-
return
|
|
3336
|
+
return chunkLSEMXRB5_cjs.roundedOrthogonalPathData(segments, Math.max(16, strokeWidth * 4));
|
|
3310
3337
|
}
|
|
3311
3338
|
return polylinePathData(points);
|
|
3312
3339
|
}
|
|
@@ -3410,7 +3437,7 @@ function buildLink(item, index, measureText) {
|
|
|
3410
3437
|
}
|
|
3411
3438
|
function buildLinks(links, measureText) {
|
|
3412
3439
|
return links.flatMap(
|
|
3413
|
-
(item, index) =>
|
|
3440
|
+
(item, index) => chunkLSEMXRB5_cjs.tag(
|
|
3414
3441
|
buildLink(item, index, measureText),
|
|
3415
3442
|
"link",
|
|
3416
3443
|
item.link.id,
|
|
@@ -3425,7 +3452,7 @@ function buildFreeformPath(path, index) {
|
|
|
3425
3452
|
if (path.isVisible === false || path.points.length < 2) {
|
|
3426
3453
|
return [];
|
|
3427
3454
|
}
|
|
3428
|
-
const strokeWidth =
|
|
3455
|
+
const strokeWidth = chunkLSEMXRB5_cjs.finite(path.strokeWidth, 2);
|
|
3429
3456
|
const extra = strokeWidth + 12;
|
|
3430
3457
|
const bounds = {
|
|
3431
3458
|
minX: Math.min(...path.points.map((point) => point.x)) - extra,
|
|
@@ -3433,7 +3460,7 @@ function buildFreeformPath(path, index) {
|
|
|
3433
3460
|
maxX: Math.max(...path.points.map((point) => point.x)) + extra,
|
|
3434
3461
|
maxY: Math.max(...path.points.map((point) => point.y)) + extra
|
|
3435
3462
|
};
|
|
3436
|
-
const tension =
|
|
3463
|
+
const tension = chunkLSEMXRB5_cjs.finite(path.tension, 0);
|
|
3437
3464
|
const closed = path.closed === true;
|
|
3438
3465
|
return [
|
|
3439
3466
|
{
|
|
@@ -3441,7 +3468,7 @@ function buildFreeformPath(path, index) {
|
|
|
3441
3468
|
id: `path-${path.id}`,
|
|
3442
3469
|
order: 3e4 + index,
|
|
3443
3470
|
bounds,
|
|
3444
|
-
d:
|
|
3471
|
+
d: chunkLSEMXRB5_cjs.freeformPathData({ points: path.points, tension, closed }),
|
|
3445
3472
|
markerStart: path.startMarker,
|
|
3446
3473
|
markerEnd: path.endMarker,
|
|
3447
3474
|
detail: {
|
|
@@ -3457,13 +3484,13 @@ function buildFreeformPath(path, index) {
|
|
|
3457
3484
|
dash: path.dash?.length ? path.dash : void 0,
|
|
3458
3485
|
lineCap: "round",
|
|
3459
3486
|
lineJoin: "round",
|
|
3460
|
-
opacity:
|
|
3487
|
+
opacity: chunkLSEMXRB5_cjs.finite(path.opacity, 1)
|
|
3461
3488
|
}
|
|
3462
3489
|
}
|
|
3463
3490
|
];
|
|
3464
3491
|
}
|
|
3465
3492
|
function buildFreeformPaths(paths) {
|
|
3466
|
-
return paths.flatMap((path, index) =>
|
|
3493
|
+
return paths.flatMap((path, index) => chunkLSEMXRB5_cjs.tag(buildFreeformPath(path, index), "path", path.id, "path", "Path"));
|
|
3467
3494
|
}
|
|
3468
3495
|
|
|
3469
3496
|
// src/renderScene/artifacts/shape/geometry/base.ts
|
|
@@ -3479,7 +3506,7 @@ function shapeNodeBase(context) {
|
|
|
3479
3506
|
|
|
3480
3507
|
// src/renderScene/artifacts/shape/geometry/simple.ts
|
|
3481
3508
|
function renderPath(context) {
|
|
3482
|
-
const path =
|
|
3509
|
+
const path = chunkLSEMXRB5_cjs.localShapePath(context.shape.shapeType, context.x, context.y, context.width, context.height);
|
|
3483
3510
|
if (!path) {
|
|
3484
3511
|
return [];
|
|
3485
3512
|
}
|
|
@@ -3495,7 +3522,7 @@ function renderBoundedPath(context) {
|
|
|
3495
3522
|
}));
|
|
3496
3523
|
}
|
|
3497
3524
|
function renderRectangle(context) {
|
|
3498
|
-
const rx = context.shape.shapeType === "pill" ?
|
|
3525
|
+
const rx = context.shape.shapeType === "pill" ? chunkLSEMXRB5_cjs.pillCornerRadius(context.width, context.height) : context.shape.shapeType === "rounded_rectangle" ? chunkLSEMXRB5_cjs.finite(context.shape.cornerRadius, 8) : 0;
|
|
3499
3526
|
return [
|
|
3500
3527
|
{
|
|
3501
3528
|
...shapeNodeBase(context),
|
|
@@ -3524,7 +3551,7 @@ function renderSymbol(context) {
|
|
|
3524
3551
|
if (!context.shape.symbol || context.shape.symbol.points.length < 2) {
|
|
3525
3552
|
return renderRectangle(context);
|
|
3526
3553
|
}
|
|
3527
|
-
const tension =
|
|
3554
|
+
const tension = chunkLSEMXRB5_cjs.finite(context.shape.symbol.tension, 0);
|
|
3528
3555
|
const points = context.shape.symbol.points.map(([x, y]) => ({
|
|
3529
3556
|
x: context.x + x * context.width,
|
|
3530
3557
|
y: context.y + y * context.height
|
|
@@ -3533,7 +3560,7 @@ function renderSymbol(context) {
|
|
|
3533
3560
|
{
|
|
3534
3561
|
...shapeNodeBase(context),
|
|
3535
3562
|
type: "path",
|
|
3536
|
-
d:
|
|
3563
|
+
d: chunkLSEMXRB5_cjs.freeformPathData({ points, tension, closed: true }),
|
|
3537
3564
|
rotationCenter: context.rotationCenter,
|
|
3538
3565
|
detail: {
|
|
3539
3566
|
of: "symbolGeometry",
|
|
@@ -3608,7 +3635,7 @@ function renderShapeShaderSurface(context) {
|
|
|
3608
3635
|
id: `${context.id}-shader`,
|
|
3609
3636
|
type: "shader-surface",
|
|
3610
3637
|
order: context.order,
|
|
3611
|
-
bounds:
|
|
3638
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds(surfaceBounds, context.rotation, 0),
|
|
3612
3639
|
...surfaceBounds,
|
|
3613
3640
|
rotation: context.rotation,
|
|
3614
3641
|
shader: context.shape.shader,
|
|
@@ -3678,24 +3705,24 @@ function shapeDash(shape, strokeWidth) {
|
|
|
3678
3705
|
}
|
|
3679
3706
|
function shapeStyle(shape, diagnostics) {
|
|
3680
3707
|
const defaults = shapeDefaults(shape, diagnostics);
|
|
3681
|
-
const strokeWidth =
|
|
3708
|
+
const strokeWidth = chunkLSEMXRB5_cjs.finite(shape.strokeWidth, defaults.strokeWidth);
|
|
3682
3709
|
const shadow = shape.shadowStyle ?? (shape.hasShadow ? { enabled: true, color: "#000000", opacity: 0.25, blur: 10, angle: 45, distance: 5 } : void 0);
|
|
3683
|
-
const angle =
|
|
3710
|
+
const angle = chunkLSEMXRB5_cjs.finite(shadow?.angle, 45) * Math.PI / 180;
|
|
3684
3711
|
return {
|
|
3685
|
-
fill:
|
|
3686
|
-
stroke:
|
|
3712
|
+
fill: chunkLSEMXRB5_cjs.paint(shape.fillColor, diagnostics, shape.id),
|
|
3713
|
+
stroke: chunkLSEMXRB5_cjs.paint(shape.strokeColor, diagnostics, shape.id),
|
|
3687
3714
|
strokeWidth,
|
|
3688
3715
|
dash: shapeDash(shape, strokeWidth),
|
|
3689
3716
|
lineCap: shape.strokeStyle === "dotted" ? "round" : "butt",
|
|
3690
|
-
opacity:
|
|
3717
|
+
opacity: chunkLSEMXRB5_cjs.finite(shape.opacity, defaults.opacity),
|
|
3691
3718
|
blur: shape.blur !== void 0 && shape.blur > 0 ? shape.blur : void 0,
|
|
3692
3719
|
blend: shape.blend,
|
|
3693
3720
|
shadow: shadow?.enabled ? {
|
|
3694
3721
|
color: shadow.color ?? "#000000",
|
|
3695
|
-
opacity:
|
|
3696
|
-
blur:
|
|
3697
|
-
dx: Math.cos(angle) *
|
|
3698
|
-
dy: Math.sin(angle) *
|
|
3722
|
+
opacity: chunkLSEMXRB5_cjs.finite(shadow.opacity, 0.25),
|
|
3723
|
+
blur: chunkLSEMXRB5_cjs.finite(shadow.blur, 10),
|
|
3724
|
+
dx: Math.cos(angle) * chunkLSEMXRB5_cjs.finite(shadow.distance, 5),
|
|
3725
|
+
dy: Math.sin(angle) * chunkLSEMXRB5_cjs.finite(shadow.distance, 5)
|
|
3699
3726
|
} : void 0
|
|
3700
3727
|
};
|
|
3701
3728
|
}
|
|
@@ -3771,11 +3798,11 @@ function renderShapeText(context, strokeWidth, measureText) {
|
|
|
3771
3798
|
if (!shape.text) {
|
|
3772
3799
|
return null;
|
|
3773
3800
|
}
|
|
3774
|
-
const fontSize =
|
|
3801
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(shape.fontSize, shapeDefaults(shape, []).fontSize);
|
|
3775
3802
|
const padding = shape.isText ? 0 : Math.max(8, strokeWidth * 2);
|
|
3776
|
-
const area = shape.shapeType === "person" ?
|
|
3803
|
+
const area = shape.shapeType === "person" ? chunkLSEMXRB5_cjs.personLabelArea(x, y, width, height) : { x, y, width, height };
|
|
3777
3804
|
const textWidth = Math.max(0, area.width - padding * 2);
|
|
3778
|
-
const fontFamily2 = shape.fontFamily ||
|
|
3805
|
+
const fontFamily2 = shape.fontFamily || chunkLSEMXRB5_cjs.DEFAULT_FONT;
|
|
3779
3806
|
const metrics = measureText?.(fontFamily2, fontSize);
|
|
3780
3807
|
const textNode = {
|
|
3781
3808
|
type: "text",
|
|
@@ -3786,7 +3813,7 @@ function renderShapeText(context, strokeWidth, measureText) {
|
|
|
3786
3813
|
y: area.y + padding,
|
|
3787
3814
|
width: textWidth,
|
|
3788
3815
|
height: Math.max(0, area.height - padding * 2),
|
|
3789
|
-
lines:
|
|
3816
|
+
lines: chunkLSEMXRB5_cjs.wrapText(shape.text, textWidth, fontSize, metrics),
|
|
3790
3817
|
fontFamily: fontFamily2,
|
|
3791
3818
|
fontSize,
|
|
3792
3819
|
fontWeight: shape.fontWeight ?? "normal",
|
|
@@ -3794,12 +3821,12 @@ function renderShapeText(context, strokeWidth, measureText) {
|
|
|
3794
3821
|
color: shape.textColor || "#111827",
|
|
3795
3822
|
align: shape.textAlign ?? "center",
|
|
3796
3823
|
verticalAlign: shape.textVerticalAlign ?? "middle",
|
|
3797
|
-
lineHeight:
|
|
3824
|
+
lineHeight: chunkLSEMXRB5_cjs.finite(shape.lineHeight, 1.3),
|
|
3798
3825
|
rotation,
|
|
3799
3826
|
rotationCenter
|
|
3800
3827
|
};
|
|
3801
3828
|
if (hasBoldMarkup(shape.text)) {
|
|
3802
|
-
const { measure, spaceWidth } = metrics ??
|
|
3829
|
+
const { measure, spaceWidth } = metrics ?? chunkLSEMXRB5_cjs.heuristicRichMeasure(fontSize);
|
|
3803
3830
|
textNode.richLines = wrapRichText(shape.text, textWidth, measure, spaceWidth);
|
|
3804
3831
|
}
|
|
3805
3832
|
return textNode;
|
|
@@ -3838,19 +3865,19 @@ function renderDoubleStroke(context, strokeWidth) {
|
|
|
3838
3865
|
return nodes;
|
|
3839
3866
|
}
|
|
3840
3867
|
function createRenderContext(shape, index, diagnostics) {
|
|
3841
|
-
const x =
|
|
3842
|
-
const y =
|
|
3843
|
-
const width = Math.max(0,
|
|
3844
|
-
const height = Math.max(0,
|
|
3845
|
-
const rotation =
|
|
3846
|
-
const strokeWidth =
|
|
3868
|
+
const x = chunkLSEMXRB5_cjs.finite(shape.x, 0);
|
|
3869
|
+
const y = chunkLSEMXRB5_cjs.finite(shape.y, 0);
|
|
3870
|
+
const width = Math.max(0, chunkLSEMXRB5_cjs.finite(shape.width, 100));
|
|
3871
|
+
const height = Math.max(0, chunkLSEMXRB5_cjs.finite(shape.height, 100));
|
|
3872
|
+
const rotation = chunkLSEMXRB5_cjs.finite(shape.rotation, 0);
|
|
3873
|
+
const strokeWidth = chunkLSEMXRB5_cjs.finite(shape.strokeWidth, 2);
|
|
3847
3874
|
return {
|
|
3848
3875
|
strokeWidth,
|
|
3849
3876
|
context: {
|
|
3850
3877
|
shape,
|
|
3851
3878
|
id: `shape-${shape.id}`,
|
|
3852
3879
|
order: 1e4 + index,
|
|
3853
|
-
bounds:
|
|
3880
|
+
bounds: chunkLSEMXRB5_cjs.rotatedBounds({ x, y, width, height }, rotation, strokeWidth + (shape.hasShadow ? 20 : 2)),
|
|
3854
3881
|
rotation,
|
|
3855
3882
|
rotationCenter: { x: x + width / 2, y: y + height / 2 },
|
|
3856
3883
|
style: shapeStyle(shape, diagnostics),
|
|
@@ -3884,7 +3911,7 @@ function buildShape(shape, index, diagnostics, measureText) {
|
|
|
3884
3911
|
}
|
|
3885
3912
|
function buildShapes(shapes, diagnostics, measureText) {
|
|
3886
3913
|
return shapes.flatMap(
|
|
3887
|
-
(shape, index) =>
|
|
3914
|
+
(shape, index) => chunkLSEMXRB5_cjs.tag(
|
|
3888
3915
|
buildShape(shape, index, diagnostics, measureText),
|
|
3889
3916
|
"shape",
|
|
3890
3917
|
shape.id,
|
|
@@ -3901,7 +3928,7 @@ function buildXAxisLabel(chart, layout, order) {
|
|
|
3901
3928
|
return null;
|
|
3902
3929
|
}
|
|
3903
3930
|
return {
|
|
3904
|
-
...
|
|
3931
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
3905
3932
|
role: "axis",
|
|
3906
3933
|
id: `chart-x-label-${chart.id}`,
|
|
3907
3934
|
order,
|
|
@@ -3911,7 +3938,7 @@ function buildXAxisLabel(chart, layout, order) {
|
|
|
3911
3938
|
chart,
|
|
3912
3939
|
align: "center"
|
|
3913
3940
|
}),
|
|
3914
|
-
prop:
|
|
3941
|
+
prop: chunkLSEMXRB5_cjs.axisLabelProp("x")
|
|
3915
3942
|
};
|
|
3916
3943
|
}
|
|
3917
3944
|
function buildYAxisLabel(chart, layout, order) {
|
|
@@ -3919,7 +3946,7 @@ function buildYAxisLabel(chart, layout, order) {
|
|
|
3919
3946
|
return null;
|
|
3920
3947
|
}
|
|
3921
3948
|
return {
|
|
3922
|
-
...
|
|
3949
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
3923
3950
|
role: "axis",
|
|
3924
3951
|
id: `chart-y-label-${chart.id}`,
|
|
3925
3952
|
order,
|
|
@@ -3935,7 +3962,7 @@ function buildYAxisLabel(chart, layout, order) {
|
|
|
3935
3962
|
align: "center",
|
|
3936
3963
|
rotation: -90
|
|
3937
3964
|
}),
|
|
3938
|
-
prop:
|
|
3965
|
+
prop: chunkLSEMXRB5_cjs.axisLabelProp("y")
|
|
3939
3966
|
};
|
|
3940
3967
|
}
|
|
3941
3968
|
function buildAxisLabels(chart, layout, order) {
|
|
@@ -3958,7 +3985,7 @@ function buildBoxplotSeriesYAxisTicks(chart, layout, order) {
|
|
|
3958
3985
|
return chart.series.map((series, index) => {
|
|
3959
3986
|
const centerY = layout.plot.y + (index + 0.5) * slotWidth;
|
|
3960
3987
|
return {
|
|
3961
|
-
...
|
|
3988
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
3962
3989
|
role: "axis",
|
|
3963
3990
|
id: `chart-y-tick-${chart.id}-${index}`,
|
|
3964
3991
|
order: order + index,
|
|
@@ -3968,7 +3995,7 @@ function buildBoxplotSeriesYAxisTicks(chart, layout, order) {
|
|
|
3968
3995
|
chart,
|
|
3969
3996
|
align: "right"
|
|
3970
3997
|
}),
|
|
3971
|
-
prop:
|
|
3998
|
+
prop: chunkLSEMXRB5_cjs.seriesLabelProp(series.id)
|
|
3972
3999
|
};
|
|
3973
4000
|
});
|
|
3974
4001
|
}
|
|
@@ -3994,7 +4021,7 @@ function isStackedLegendPosition(position) {
|
|
|
3994
4021
|
return position === "bottomLeft" || position === "bottomRight";
|
|
3995
4022
|
}
|
|
3996
4023
|
function legendItemWidths(chart) {
|
|
3997
|
-
return legendSeries(chart).map((item) => Math.max(42, item.label.length *
|
|
4024
|
+
return legendSeries(chart).map((item) => Math.max(42, item.label.length * chunkLSEMXRB5_cjs.finite(chart.fontSize, 12) * 0.58 + 22));
|
|
3998
4025
|
}
|
|
3999
4026
|
function stackedLegendColumnWidth(chart) {
|
|
4000
4027
|
const widths = legendItemWidths(chart);
|
|
@@ -4047,9 +4074,9 @@ function renderLegendItem(render2, item) {
|
|
|
4047
4074
|
}
|
|
4048
4075
|
function createLegendSwatch(render2, item) {
|
|
4049
4076
|
const { chart, bounds, diagnostics } = render2;
|
|
4050
|
-
const fallback =
|
|
4077
|
+
const fallback = chunkLSEMXRB5_cjs.CHART_COLORS[item.seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
4051
4078
|
const solidOnly = chart.chartType === "line";
|
|
4052
|
-
const color = solidOnly ?
|
|
4079
|
+
const color = solidOnly ? chunkLSEMXRB5_cjs.representativeColor(item.series.color, fallback) : item.series.color ?? fallback;
|
|
4053
4080
|
return {
|
|
4054
4081
|
type: "rect",
|
|
4055
4082
|
id: `chart-legend-swatch-${chart.id}-${item.series.id}`,
|
|
@@ -4060,16 +4087,16 @@ function createLegendSwatch(render2, item) {
|
|
|
4060
4087
|
width: 10,
|
|
4061
4088
|
height: 10,
|
|
4062
4089
|
rx: 3,
|
|
4063
|
-
prop:
|
|
4090
|
+
prop: chunkLSEMXRB5_cjs.seriesColorProp(item.series.id),
|
|
4064
4091
|
propKind: "color",
|
|
4065
4092
|
propSolidOnly: solidOnly,
|
|
4066
|
-
style: { fill:
|
|
4093
|
+
style: { fill: chunkLSEMXRB5_cjs.paint(color, diagnostics, chart.id) }
|
|
4067
4094
|
};
|
|
4068
4095
|
}
|
|
4069
4096
|
function createLegendLabel(render2, item) {
|
|
4070
4097
|
const { chart, bounds } = render2;
|
|
4071
4098
|
return {
|
|
4072
|
-
...
|
|
4099
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4073
4100
|
role: "legend",
|
|
4074
4101
|
id: `chart-legend-${chart.id}-${item.series.id}`,
|
|
4075
4102
|
order: item.order + 1,
|
|
@@ -4078,7 +4105,7 @@ function createLegendLabel(render2, item) {
|
|
|
4078
4105
|
text: item.series.label,
|
|
4079
4106
|
chart
|
|
4080
4107
|
}),
|
|
4081
|
-
prop:
|
|
4108
|
+
prop: chunkLSEMXRB5_cjs.seriesLabelProp(item.series.id)
|
|
4082
4109
|
};
|
|
4083
4110
|
}
|
|
4084
4111
|
|
|
@@ -4097,19 +4124,19 @@ function hasCartesianDecorations(chart) {
|
|
|
4097
4124
|
return !CHARTS_WITHOUT_CARTESIAN_DECORATIONS.has(chart.chartType);
|
|
4098
4125
|
}
|
|
4099
4126
|
function tickOffset(chart) {
|
|
4100
|
-
return hasCartesianDecorations(chart) ? Math.max(0,
|
|
4127
|
+
return hasCartesianDecorations(chart) ? Math.max(0, chunkLSEMXRB5_cjs.finite(chart.tickLength, 0)) : 0;
|
|
4101
4128
|
}
|
|
4102
4129
|
function xLabelOffset(chart) {
|
|
4103
|
-
return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0,
|
|
4130
|
+
return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0, chunkLSEMXRB5_cjs.finite(chart.xLabelGap, 0)) : 0);
|
|
4104
4131
|
}
|
|
4105
4132
|
function yLabelOffset(chart) {
|
|
4106
|
-
return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0,
|
|
4133
|
+
return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0, chunkLSEMXRB5_cjs.finite(chart.yLabelGap, 0)) : 0);
|
|
4107
4134
|
}
|
|
4108
4135
|
function isHorizontalBoxplot(chart) {
|
|
4109
4136
|
return chart.chartType === "boxplot" && chart.config?.orientation === "horizontal";
|
|
4110
4137
|
}
|
|
4111
4138
|
function boxplotCategoryLabelWidth(chart) {
|
|
4112
|
-
const fontSize =
|
|
4139
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(chart.fontSize, 12);
|
|
4113
4140
|
const longest = Math.max(0, ...chart.series.map((series) => (series.label || series.id).length));
|
|
4114
4141
|
return longest * fontSize * 0.58 + 16;
|
|
4115
4142
|
}
|
|
@@ -4121,18 +4148,18 @@ function treemapSideLegendSide(chart, showLegend) {
|
|
|
4121
4148
|
return chart.legendPosition === "left" ? "left" : chart.legendPosition === "right" ? "right" : null;
|
|
4122
4149
|
}
|
|
4123
4150
|
function barCategoryLabelWidth(chart) {
|
|
4124
|
-
const fontSize =
|
|
4151
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(chart.axisFontSize ?? chart.fontSize, 12);
|
|
4125
4152
|
const categories = chart.config?.categories ?? [];
|
|
4126
4153
|
return Math.max(0, ...categories.map((category) => category.length)) * fontSize * 0.58 + 16;
|
|
4127
4154
|
}
|
|
4128
4155
|
function leftLabelWidth(chart) {
|
|
4129
|
-
if (chart.axisLabelSpace && chart.axisLabelSpace > 0 && (isHorizontalBoxplot(chart) ||
|
|
4156
|
+
if (chart.axisLabelSpace && chart.axisLabelSpace > 0 && (isHorizontalBoxplot(chart) || chunkLSEMXRB5_cjs.isHorizontalBar(chart))) {
|
|
4130
4157
|
return chart.axisLabelSpace;
|
|
4131
4158
|
}
|
|
4132
4159
|
if (isHorizontalBoxplot(chart)) {
|
|
4133
4160
|
return boxplotCategoryLabelWidth(chart);
|
|
4134
4161
|
}
|
|
4135
|
-
if (
|
|
4162
|
+
if (chunkLSEMXRB5_cjs.isHorizontalBar(chart)) {
|
|
4136
4163
|
return chart.categoryAlign === "left" || chart.categoryAlign === "inside" ? 20 : barCategoryLabelWidth(chart);
|
|
4137
4164
|
}
|
|
4138
4165
|
if (chart.showValueAxis === false) {
|
|
@@ -4141,38 +4168,57 @@ function leftLabelWidth(chart) {
|
|
|
4141
4168
|
return chart.axisY.label ? 60 : 46;
|
|
4142
4169
|
}
|
|
4143
4170
|
function tiltedBottomRoom(chart) {
|
|
4144
|
-
const tilt =
|
|
4171
|
+
const tilt = chunkLSEMXRB5_cjs.labelTilt(chart);
|
|
4145
4172
|
if (tilt <= 0) {
|
|
4146
4173
|
return 0;
|
|
4147
4174
|
}
|
|
4148
|
-
const labels = chart.chartType === "bar" && !
|
|
4149
|
-
return labels.length > 0 ? Math.max(0,
|
|
4175
|
+
const labels = chart.chartType === "bar" && !chunkLSEMXRB5_cjs.isHorizontalBar(chart) ? chart.config?.categories ?? [] : chart.chartType === "boxplot" && !isHorizontalBoxplot(chart) ? chart.series.map((series) => series.label || series.id) : [];
|
|
4176
|
+
return labels.length > 0 ? Math.max(0, chunkLSEMXRB5_cjs.tiltedLabelRoom(chart, labels, tilt) - 18) : 0;
|
|
4150
4177
|
}
|
|
4151
|
-
function
|
|
4152
|
-
const showLabels = chart.showAxisLabels !== false;
|
|
4178
|
+
function legendPlaceOf(chart) {
|
|
4153
4179
|
const showLegend = chart.showLegend !== false;
|
|
4154
|
-
const
|
|
4155
|
-
const
|
|
4156
|
-
const
|
|
4157
|
-
|
|
4158
|
-
|
|
4159
|
-
|
|
4160
|
-
|
|
4161
|
-
|
|
4162
|
-
|
|
4163
|
-
|
|
4180
|
+
const position = chart.legendPosition ?? "top";
|
|
4181
|
+
const hasItems = showLegend && chart.series.length > 0;
|
|
4182
|
+
const stacked = hasItems && isStackedLegendPosition(position);
|
|
4183
|
+
return {
|
|
4184
|
+
showLegend,
|
|
4185
|
+
position,
|
|
4186
|
+
atTop: position === "top",
|
|
4187
|
+
hasItems,
|
|
4188
|
+
stacked,
|
|
4189
|
+
sideColumnWidth: stacked ? stackedLegendColumnWidth(chart) + LEGEND_COLUMN_GAP : 0,
|
|
4190
|
+
treemapSide: treemapSideLegendSide(chart, showLegend)
|
|
4191
|
+
};
|
|
4192
|
+
}
|
|
4193
|
+
function padLeftOf(chart, showLabels, legend) {
|
|
4194
|
+
return yLabelOffset(chart) + (showLabels ? leftLabelWidth(chart) : 12) + (legend.position === "bottomLeft" ? legend.sideColumnWidth : 0) + (legend.treemapSide === "left" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
|
|
4195
|
+
}
|
|
4196
|
+
function padRightOf(legend) {
|
|
4197
|
+
return 24 + (legend.position === "bottomRight" ? legend.sideColumnWidth : 0) + (legend.treemapSide === "right" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
|
|
4198
|
+
}
|
|
4199
|
+
function padBottomOf(chart, showLabels, legend) {
|
|
4164
4200
|
const valueRow = chart.chartType === "bar" && chart.config?.showBarLabels === true && chart.config.barLabelPosition === "axis";
|
|
4165
|
-
const horizontalValueAxis =
|
|
4166
|
-
const
|
|
4167
|
-
const hasColorBar = chart.chartType === "field" && showLegend && Boolean(chart.config?.scale?.stops.length);
|
|
4168
|
-
const
|
|
4169
|
-
|
|
4170
|
-
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
|
|
4201
|
+
const horizontalValueAxis = chunkLSEMXRB5_cjs.isHorizontalBar(chart) && chart.showValueAxis !== false;
|
|
4202
|
+
const base = showLabels ? chunkLSEMXRB5_cjs.isHorizontalBar(chart) ? horizontalValueAxis ? 34 : 12 : (chart.axisX.label ? 52 : 34) + (valueRow ? 18 : 0) : 12;
|
|
4203
|
+
const hasColorBar = chart.chartType === "field" && legend.showLegend && Boolean(chart.config?.scale?.stops.length);
|
|
4204
|
+
const legendInRow = legend.hasItems && !legend.atTop && !legend.stacked;
|
|
4205
|
+
return xLabelOffset(chart) + base + (showLabels ? tiltedBottomRoom(chart) : 0) + (hasColorBar ? 44 : 0) + (legendInRow ? 16 + LEGEND_ROW_HEIGHT : 0);
|
|
4206
|
+
}
|
|
4207
|
+
function padTopOf(chart, legend) {
|
|
4208
|
+
const titleHeight = chart.title ? Math.max(44, 20 + chunkLSEMXRB5_cjs.finite(chart.titleSize, 14) * 1.6) : 0;
|
|
4209
|
+
return titleHeight || (legend.atTop && legend.hasItems ? 44 : 24);
|
|
4210
|
+
}
|
|
4211
|
+
function decorations(chart) {
|
|
4212
|
+
const showLabels = chart.showAxisLabels !== false;
|
|
4213
|
+
const legend = legendPlaceOf(chart);
|
|
4214
|
+
const padLeft = padLeftOf(chart, showLabels, legend);
|
|
4215
|
+
const padRight = padRightOf(legend);
|
|
4216
|
+
const padBottom = padBottomOf(chart, showLabels, legend);
|
|
4217
|
+
const padTop = padTopOf(chart, legend);
|
|
4218
|
+
return {
|
|
4219
|
+
bounds: chunkLSEMXRB5_cjs.boxBounds(
|
|
4174
4220
|
{ x: chart.x, y: chart.y, width: chart.width, height: chart.height },
|
|
4175
|
-
|
|
4221
|
+
chunkLSEMXRB5_cjs.finite(chart.strokeWidth, 1) + 2
|
|
4176
4222
|
),
|
|
4177
4223
|
plot: {
|
|
4178
4224
|
x: chart.x + padLeft,
|
|
@@ -4181,7 +4227,7 @@ function decorations(chart) {
|
|
|
4181
4227
|
height: Math.max(1, chart.height - padTop - padBottom)
|
|
4182
4228
|
},
|
|
4183
4229
|
showLabels,
|
|
4184
|
-
showLegend,
|
|
4230
|
+
showLegend: legend.showLegend,
|
|
4185
4231
|
padLeft
|
|
4186
4232
|
};
|
|
4187
4233
|
}
|
|
@@ -4194,26 +4240,26 @@ function categoryLabels(chart, count) {
|
|
|
4194
4240
|
return Array.from({ length: count }, (_value, index) => String(index + 1));
|
|
4195
4241
|
}
|
|
4196
4242
|
function buildCategoricalXAxisTicks(chart, layout, order) {
|
|
4197
|
-
const count =
|
|
4243
|
+
const count = chunkLSEMXRB5_cjs.barCategoryCount(chart);
|
|
4198
4244
|
const slotWidth = layout.plot.width / count;
|
|
4199
4245
|
const labels = categoryLabels(chart, count);
|
|
4200
4246
|
const editable = Boolean(chart.config?.categories?.length);
|
|
4201
|
-
const tilt =
|
|
4247
|
+
const tilt = chunkLSEMXRB5_cjs.labelTilt(chart);
|
|
4202
4248
|
const left = chart.categoryAlign === "left";
|
|
4203
4249
|
const groupGap = left ? Math.min(
|
|
4204
|
-
Math.max(0,
|
|
4250
|
+
Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.barGroupGap, 8)),
|
|
4205
4251
|
Math.max(0, slotWidth - 1)
|
|
4206
4252
|
) : 0;
|
|
4207
4253
|
return Array.from({ length: count }, (_value, index) => {
|
|
4208
4254
|
const centerX = layout.plot.x + (index + 0.5) * slotWidth;
|
|
4209
4255
|
if (tilt > 0) {
|
|
4210
4256
|
const text = labels[index] ?? String(index + 1);
|
|
4211
|
-
const { frame, rotation } =
|
|
4257
|
+
const { frame, rotation } = chunkLSEMXRB5_cjs.labelBelowFrame(chart, text, tilt, {
|
|
4212
4258
|
x: centerX,
|
|
4213
4259
|
y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart)
|
|
4214
4260
|
});
|
|
4215
4261
|
return {
|
|
4216
|
-
...
|
|
4262
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4217
4263
|
role: "axis",
|
|
4218
4264
|
id: `chart-x-tick-${chart.id}-${index}`,
|
|
4219
4265
|
order: order + index,
|
|
@@ -4224,11 +4270,11 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
|
|
|
4224
4270
|
align: "right",
|
|
4225
4271
|
rotation
|
|
4226
4272
|
}),
|
|
4227
|
-
prop: editable ?
|
|
4273
|
+
prop: editable ? chunkLSEMXRB5_cjs.categoryProp(index) : void 0
|
|
4228
4274
|
};
|
|
4229
4275
|
}
|
|
4230
4276
|
return {
|
|
4231
|
-
...
|
|
4277
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4232
4278
|
role: "axis",
|
|
4233
4279
|
id: `chart-x-tick-${chart.id}-${index}`,
|
|
4234
4280
|
order: order + index,
|
|
@@ -4243,24 +4289,24 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
|
|
|
4243
4289
|
chart,
|
|
4244
4290
|
align: left ? "left" : "center"
|
|
4245
4291
|
}),
|
|
4246
|
-
prop: editable ?
|
|
4292
|
+
prop: editable ? chunkLSEMXRB5_cjs.categoryProp(index) : void 0
|
|
4247
4293
|
};
|
|
4248
4294
|
});
|
|
4249
4295
|
}
|
|
4250
4296
|
function buildSeriesXAxisTicks(chart, layout, order) {
|
|
4251
4297
|
const count = Math.max(1, chart.series.length);
|
|
4252
4298
|
const slotWidth = layout.plot.width / count;
|
|
4253
|
-
const tilt =
|
|
4299
|
+
const tilt = chunkLSEMXRB5_cjs.labelTilt(chart);
|
|
4254
4300
|
return chart.series.map((series, index) => {
|
|
4255
4301
|
const centerX = layout.plot.x + (index + 0.5) * slotWidth;
|
|
4256
4302
|
if (tilt > 0) {
|
|
4257
4303
|
const text = series.label || series.id;
|
|
4258
|
-
const { frame, rotation } =
|
|
4304
|
+
const { frame, rotation } = chunkLSEMXRB5_cjs.labelBelowFrame(chart, text, tilt, {
|
|
4259
4305
|
x: centerX,
|
|
4260
4306
|
y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart)
|
|
4261
4307
|
});
|
|
4262
4308
|
return {
|
|
4263
|
-
...
|
|
4309
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4264
4310
|
role: "axis",
|
|
4265
4311
|
id: `chart-x-tick-${chart.id}-${index}`,
|
|
4266
4312
|
order: order + index,
|
|
@@ -4271,11 +4317,11 @@ function buildSeriesXAxisTicks(chart, layout, order) {
|
|
|
4271
4317
|
align: "right",
|
|
4272
4318
|
rotation
|
|
4273
4319
|
}),
|
|
4274
|
-
prop:
|
|
4320
|
+
prop: chunkLSEMXRB5_cjs.seriesLabelProp(series.id)
|
|
4275
4321
|
};
|
|
4276
4322
|
}
|
|
4277
4323
|
return {
|
|
4278
|
-
...
|
|
4324
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4279
4325
|
role: "axis",
|
|
4280
4326
|
id: `chart-x-tick-${chart.id}-${index}`,
|
|
4281
4327
|
order: order + index,
|
|
@@ -4290,16 +4336,16 @@ function buildSeriesXAxisTicks(chart, layout, order) {
|
|
|
4290
4336
|
chart,
|
|
4291
4337
|
align: "center"
|
|
4292
4338
|
}),
|
|
4293
|
-
prop:
|
|
4339
|
+
prop: chunkLSEMXRB5_cjs.seriesLabelProp(series.id)
|
|
4294
4340
|
};
|
|
4295
4341
|
});
|
|
4296
4342
|
}
|
|
4297
4343
|
|
|
4298
4344
|
// src/renderScene/charts/decorations/numericXAxis.ts
|
|
4299
4345
|
function buildNumericXAxisTicks(chart, layout, order) {
|
|
4300
|
-
return
|
|
4301
|
-
const x = layout.plot.x +
|
|
4302
|
-
return
|
|
4346
|
+
return chunkLSEMXRB5_cjs.chartTicks(chart.axisX).map((tick, index) => {
|
|
4347
|
+
const x = layout.plot.x + chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisX, layout.plot.width);
|
|
4348
|
+
return chunkLSEMXRB5_cjs.chartText({
|
|
4303
4349
|
role: "axis",
|
|
4304
4350
|
id: `chart-x-tick-${chart.id}-${tick}`,
|
|
4305
4351
|
order: order + index,
|
|
@@ -4314,9 +4360,9 @@ function buildNumericXAxisTicks(chart, layout, order) {
|
|
|
4314
4360
|
|
|
4315
4361
|
// src/renderScene/charts/decorations/numericYAxis.ts
|
|
4316
4362
|
function buildNumericYAxisTicks(chart, layout, order) {
|
|
4317
|
-
return
|
|
4318
|
-
const y = layout.plot.y + layout.plot.height -
|
|
4319
|
-
return
|
|
4363
|
+
return chunkLSEMXRB5_cjs.chartTicks(chart.axisY).map((tick, index) => {
|
|
4364
|
+
const y = layout.plot.y + layout.plot.height - chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisY, layout.plot.height);
|
|
4365
|
+
return chunkLSEMXRB5_cjs.chartText({
|
|
4320
4366
|
role: "axis",
|
|
4321
4367
|
id: `chart-y-tick-${chart.id}-${tick}`,
|
|
4322
4368
|
order: order + index,
|
|
@@ -4351,10 +4397,10 @@ function buildYAxisTicks(chart, layout, order) {
|
|
|
4351
4397
|
function xTickPositions(chart, layout) {
|
|
4352
4398
|
const { plot } = layout;
|
|
4353
4399
|
if (chart.chartType === "bar") {
|
|
4354
|
-
const count =
|
|
4400
|
+
const count = chunkLSEMXRB5_cjs.barCategoryCount(chart);
|
|
4355
4401
|
return Array.from({ length: count }, (_value, index) => plot.x + (index + 0.5) * plot.width / count);
|
|
4356
4402
|
}
|
|
4357
|
-
return
|
|
4403
|
+
return chunkLSEMXRB5_cjs.chartTicks(chart.axisX).map((tick) => plot.x + chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisX, plot.width));
|
|
4358
4404
|
}
|
|
4359
4405
|
function axisLineDash(chart, width) {
|
|
4360
4406
|
if (chart.axisLineStyle === "dashed") {
|
|
@@ -4363,8 +4409,8 @@ function axisLineDash(chart, width) {
|
|
|
4363
4409
|
return chart.axisLineStyle === "dotted" ? { dash: [0.1, width * 3], lineCap: "round" } : {};
|
|
4364
4410
|
}
|
|
4365
4411
|
function buildAxisLines(chart, layout, order) {
|
|
4366
|
-
const lineWidth =
|
|
4367
|
-
const tickLength =
|
|
4412
|
+
const lineWidth = chunkLSEMXRB5_cjs.finite(chart.axisLineWidth, 0);
|
|
4413
|
+
const tickLength = chunkLSEMXRB5_cjs.finite(chart.tickLength, 0);
|
|
4368
4414
|
if (lineWidth <= 0 && tickLength <= 0) {
|
|
4369
4415
|
return [];
|
|
4370
4416
|
}
|
|
@@ -4385,20 +4431,20 @@ function buildAxisLines(chart, layout, order) {
|
|
|
4385
4431
|
}
|
|
4386
4432
|
add("line-x", `M ${plot.x} ${bottom} L ${plot.x + plot.width} ${bottom}`);
|
|
4387
4433
|
}
|
|
4388
|
-
if (tickLength > 0 &&
|
|
4389
|
-
|
|
4390
|
-
const x = plot.x +
|
|
4434
|
+
if (tickLength > 0 && chunkLSEMXRB5_cjs.isHorizontalBar(chart)) {
|
|
4435
|
+
chunkLSEMXRB5_cjs.chartTicks(chart.axisY).forEach((tick) => {
|
|
4436
|
+
const x = plot.x + chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisY, plot.width);
|
|
4391
4437
|
add(`tick-v-${tick}`, `M ${x} ${bottom} L ${x} ${bottom + tickLength}`);
|
|
4392
4438
|
});
|
|
4393
|
-
const rows =
|
|
4439
|
+
const rows = chunkLSEMXRB5_cjs.horizontalRows(chart, plot);
|
|
4394
4440
|
for (let index = 0; index < rows.count; index++) {
|
|
4395
|
-
const y =
|
|
4441
|
+
const y = chunkLSEMXRB5_cjs.rowTop(rows, plot, index) + rows.labelRow + rows.barsHeight / 2;
|
|
4396
4442
|
add(`tick-c-${index}`, `M ${plot.x - tickLength} ${y} L ${plot.x} ${y}`);
|
|
4397
4443
|
}
|
|
4398
4444
|
}
|
|
4399
|
-
if (tickLength > 0 && !isHorizontalBoxplot2(chart) && !
|
|
4400
|
-
|
|
4401
|
-
const y = bottom -
|
|
4445
|
+
if (tickLength > 0 && !isHorizontalBoxplot2(chart) && !chunkLSEMXRB5_cjs.isHorizontalBar(chart)) {
|
|
4446
|
+
chunkLSEMXRB5_cjs.chartTicks(chart.axisY).forEach((tick) => {
|
|
4447
|
+
const y = bottom - chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisY, plot.height);
|
|
4402
4448
|
add(`tick-y-${tick}`, `M ${plot.x - tickLength} ${y} L ${plot.x} ${y}`);
|
|
4403
4449
|
});
|
|
4404
4450
|
xTickPositions(chart, layout).forEach((x, index) => {
|
|
@@ -4413,14 +4459,14 @@ function categoryNames(chart, count) {
|
|
|
4413
4459
|
}
|
|
4414
4460
|
function buildHorizontalBarAxes(chart, layout, order) {
|
|
4415
4461
|
const { plot, bounds } = layout;
|
|
4416
|
-
const rows =
|
|
4462
|
+
const rows = chunkLSEMXRB5_cjs.horizontalRows(chart, plot);
|
|
4417
4463
|
const above = chart.categoryAlign === "left";
|
|
4418
4464
|
const inside = chart.categoryAlign === "inside";
|
|
4419
4465
|
const editable = Boolean(chart.config?.categories?.length);
|
|
4420
4466
|
const nodes = categoryNames(chart, rows.count).map((name, index) => {
|
|
4421
|
-
const top =
|
|
4467
|
+
const top = chunkLSEMXRB5_cjs.rowTop(rows, plot, index);
|
|
4422
4468
|
return {
|
|
4423
|
-
...
|
|
4469
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4424
4470
|
role: "axis",
|
|
4425
4471
|
id: `chart-y-category-${chart.id}-${index}`,
|
|
4426
4472
|
order: order + index,
|
|
@@ -4430,19 +4476,19 @@ function buildHorizontalBarAxes(chart, layout, order) {
|
|
|
4430
4476
|
chart,
|
|
4431
4477
|
align: above || inside ? "left" : "right"
|
|
4432
4478
|
}),
|
|
4433
|
-
prop: editable ?
|
|
4479
|
+
prop: editable ? chunkLSEMXRB5_cjs.categoryProp(index) : void 0
|
|
4434
4480
|
};
|
|
4435
4481
|
});
|
|
4436
4482
|
if (chart.showValueAxis !== false) {
|
|
4437
|
-
|
|
4438
|
-
const x = plot.x +
|
|
4483
|
+
chunkLSEMXRB5_cjs.chartTicks(chart.axisY).forEach((tick, index) => {
|
|
4484
|
+
const x = plot.x + chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisY, plot.width);
|
|
4439
4485
|
nodes.push(
|
|
4440
|
-
|
|
4486
|
+
chunkLSEMXRB5_cjs.chartText({
|
|
4441
4487
|
role: "axis",
|
|
4442
4488
|
id: `chart-x-tick-${chart.id}-${tick}`,
|
|
4443
4489
|
order: order + rows.count + index,
|
|
4444
4490
|
bounds,
|
|
4445
|
-
frame: { x: x - 20, y: plot.y + plot.height + 4 +
|
|
4491
|
+
frame: { x: x - 20, y: plot.y + plot.height + 4 + chunkLSEMXRB5_cjs.finite(chart.tickLength, 0), width: 40, height: 18 },
|
|
4446
4492
|
text: String(tick),
|
|
4447
4493
|
chart,
|
|
4448
4494
|
align: "center"
|
|
@@ -4461,7 +4507,7 @@ function buildChartAxes(chart, layout, order) {
|
|
|
4461
4507
|
return lines;
|
|
4462
4508
|
}
|
|
4463
4509
|
order += lines.length;
|
|
4464
|
-
if (
|
|
4510
|
+
if (chunkLSEMXRB5_cjs.isHorizontalBar(chart)) {
|
|
4465
4511
|
return [...lines, ...buildHorizontalBarAxes(chart, layout, order)];
|
|
4466
4512
|
}
|
|
4467
4513
|
const xTicks = buildXAxisTicks(chart, layout, order);
|
|
@@ -4539,7 +4585,7 @@ function buildCircularChartGrid(chart, plot, bounds, order) {
|
|
|
4539
4585
|
const centerX = plot.x + plot.width / 2;
|
|
4540
4586
|
const centerY = plot.y + plot.height / 2;
|
|
4541
4587
|
const radius = Math.max(0, Math.min(plot.width, plot.height) / 2);
|
|
4542
|
-
const width =
|
|
4588
|
+
const width = chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1);
|
|
4543
4589
|
if (chart.gridLineStyle === "dotted") {
|
|
4544
4590
|
return buildDottedCircularGrid(chart, bounds, order, centerX, centerY, radius, width);
|
|
4545
4591
|
}
|
|
@@ -4550,7 +4596,7 @@ function buildCircularChartGrid(chart, plot, bounds, order) {
|
|
|
4550
4596
|
...gridLineDashStyle(chart, width)
|
|
4551
4597
|
};
|
|
4552
4598
|
const nodes = [];
|
|
4553
|
-
|
|
4599
|
+
chunkLSEMXRB5_cjs.chartTicks(chart.axisY).filter((tick) => tick > chart.axisY.min).forEach((tick) => {
|
|
4554
4600
|
const ringRadius = radius * ringRatio(chart, tick);
|
|
4555
4601
|
nodes.push({
|
|
4556
4602
|
type: "ellipse",
|
|
@@ -4564,8 +4610,8 @@ function buildCircularChartGrid(chart, plot, bounds, order) {
|
|
|
4564
4610
|
style
|
|
4565
4611
|
});
|
|
4566
4612
|
});
|
|
4567
|
-
|
|
4568
|
-
const angle =
|
|
4613
|
+
chunkLSEMXRB5_cjs.chartTicks(chart.axisX).forEach((tick) => {
|
|
4614
|
+
const angle = chunkLSEMXRB5_cjs.angleForAxisValue(chart.axisX.min, chart.axisX.max, tick);
|
|
4569
4615
|
const edgeX = centerX + Math.cos(angle) * radius;
|
|
4570
4616
|
const edgeY = centerY + Math.sin(angle) * radius;
|
|
4571
4617
|
nodes.push({
|
|
@@ -4580,13 +4626,13 @@ function buildCircularChartGrid(chart, plot, bounds, order) {
|
|
|
4580
4626
|
return nodes;
|
|
4581
4627
|
}
|
|
4582
4628
|
function buildDottedCircularGrid(chart, bounds, order, centerX, centerY, radius, width) {
|
|
4583
|
-
const yTicks =
|
|
4584
|
-
const xTicks =
|
|
4629
|
+
const yTicks = chunkLSEMXRB5_cjs.chartTicks(chart.axisY).filter((tick) => tick > chart.axisY.min);
|
|
4630
|
+
const xTicks = chunkLSEMXRB5_cjs.chartTicks(chart.axisX);
|
|
4585
4631
|
const nodes = [];
|
|
4586
4632
|
yTicks.forEach((yTick) => {
|
|
4587
4633
|
const ringRadius = radius * ringRatio(chart, yTick);
|
|
4588
4634
|
xTicks.forEach((xTick) => {
|
|
4589
|
-
const angle =
|
|
4635
|
+
const angle = chunkLSEMXRB5_cjs.angleForAxisValue(chart.axisX.min, chart.axisX.max, xTick);
|
|
4590
4636
|
const x = centerX + Math.cos(angle) * ringRadius;
|
|
4591
4637
|
const y = centerY + Math.sin(angle) * ringRadius;
|
|
4592
4638
|
const id = `chart-grid-dot-${chart.id}-${xTick}-${yTick}`;
|
|
@@ -4608,8 +4654,8 @@ function buildChartGrid(chart, plot, bounds, order) {
|
|
|
4608
4654
|
if (chart.gridShape === "circle" && CIRCULAR_GRID_CHART_TYPES.has(chart.chartType)) {
|
|
4609
4655
|
return buildCircularChartGrid(chart, plot, bounds, order);
|
|
4610
4656
|
}
|
|
4611
|
-
const width =
|
|
4612
|
-
if (
|
|
4657
|
+
const width = chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1);
|
|
4658
|
+
if (chunkLSEMXRB5_cjs.isHorizontalBar(chart)) {
|
|
4613
4659
|
return buildHorizontalBarGrid(chart, plot, bounds, order, width);
|
|
4614
4660
|
}
|
|
4615
4661
|
const clip = chart.chartType === "field" ? fieldSurfaceClip(chart, plot) : void 0;
|
|
@@ -4624,8 +4670,8 @@ function buildChartGrid(chart, plot, bounds, order) {
|
|
|
4624
4670
|
clip
|
|
4625
4671
|
};
|
|
4626
4672
|
const nodes = [];
|
|
4627
|
-
(chart.gridAxes === "y" ? [] :
|
|
4628
|
-
const x = plot.x +
|
|
4673
|
+
(chart.gridAxes === "y" ? [] : chunkLSEMXRB5_cjs.chartTicks(chart.axisX)).forEach((tick) => {
|
|
4674
|
+
const x = plot.x + chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisX, plot.width);
|
|
4629
4675
|
nodes.push({
|
|
4630
4676
|
type: "path",
|
|
4631
4677
|
id: `chart-grid-x-${chart.id}-${tick}`,
|
|
@@ -4635,8 +4681,8 @@ function buildChartGrid(chart, plot, bounds, order) {
|
|
|
4635
4681
|
style
|
|
4636
4682
|
});
|
|
4637
4683
|
});
|
|
4638
|
-
(chart.gridAxes === "x" ? [] :
|
|
4639
|
-
const y = plot.y + plot.height -
|
|
4684
|
+
(chart.gridAxes === "x" ? [] : chunkLSEMXRB5_cjs.chartTicks(chart.axisY)).forEach((tick) => {
|
|
4685
|
+
const y = plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisY, plot.height);
|
|
4640
4686
|
nodes.push({
|
|
4641
4687
|
type: "path",
|
|
4642
4688
|
id: `chart-grid-y-${chart.id}-${tick}`,
|
|
@@ -4658,8 +4704,8 @@ function buildHorizontalBarGrid(chart, plot, bounds, order, width) {
|
|
|
4658
4704
|
strokeWidth: width,
|
|
4659
4705
|
...chart.gridLineStyle === "dotted" ? { dash: [0.1, width * 3], lineCap: "round" } : gridLineDashStyle(chart, width)
|
|
4660
4706
|
};
|
|
4661
|
-
return
|
|
4662
|
-
const x = plot.x +
|
|
4707
|
+
return chunkLSEMXRB5_cjs.chartTicks(chart.axisY).map((tick, index) => {
|
|
4708
|
+
const x = plot.x + chunkLSEMXRB5_cjs.mapChartValue(tick, chart.axisY, plot.width);
|
|
4663
4709
|
return {
|
|
4664
4710
|
type: "path",
|
|
4665
4711
|
id: `chart-grid-x-${chart.id}-${tick}`,
|
|
@@ -4671,13 +4717,13 @@ function buildHorizontalBarGrid(chart, plot, bounds, order, width) {
|
|
|
4671
4717
|
});
|
|
4672
4718
|
}
|
|
4673
4719
|
function buildDottedRectGrid(chart, plot, bounds, order, width, clip) {
|
|
4674
|
-
const xTicks =
|
|
4675
|
-
const yTicks =
|
|
4720
|
+
const xTicks = chunkLSEMXRB5_cjs.chartTicks(chart.axisX);
|
|
4721
|
+
const yTicks = chunkLSEMXRB5_cjs.chartTicks(chart.axisY);
|
|
4676
4722
|
const nodes = [];
|
|
4677
4723
|
xTicks.forEach((xTick) => {
|
|
4678
|
-
const x = plot.x +
|
|
4724
|
+
const x = plot.x + chunkLSEMXRB5_cjs.mapChartValue(xTick, chart.axisX, plot.width);
|
|
4679
4725
|
yTicks.forEach((yTick) => {
|
|
4680
|
-
const y = plot.y + plot.height -
|
|
4726
|
+
const y = plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(yTick, chart.axisY, plot.height);
|
|
4681
4727
|
const id = `chart-grid-dot-${chart.id}-${xTick}-${yTick}`;
|
|
4682
4728
|
nodes.push(createGridDot(chart, id, order + nodes.length, bounds, x, y, width, clip));
|
|
4683
4729
|
});
|
|
@@ -4700,7 +4746,7 @@ function createChartRuleMarks(render2) {
|
|
|
4700
4746
|
return {
|
|
4701
4747
|
rule,
|
|
4702
4748
|
color: rule.color || render2.chart.strokeColor || "#475569",
|
|
4703
|
-
y: render2.plot.y + render2.plot.height -
|
|
4749
|
+
y: render2.plot.y + render2.plot.height - chunkLSEMXRB5_cjs.mapChartValue(rule.at, render2.chart.axisY, render2.plot.height),
|
|
4704
4750
|
lineOrder,
|
|
4705
4751
|
labelOrder
|
|
4706
4752
|
};
|
|
@@ -4720,7 +4766,7 @@ function createChartRuleLine(render2, mark) {
|
|
|
4720
4766
|
order: mark.lineOrder,
|
|
4721
4767
|
bounds: render2.bounds,
|
|
4722
4768
|
d: `M ${render2.plot.x} ${mark.y} L ${render2.plot.x + render2.plot.width} ${mark.y}`,
|
|
4723
|
-
prop:
|
|
4769
|
+
prop: chunkLSEMXRB5_cjs.ruleAtProp(mark.rule.id),
|
|
4724
4770
|
propKind: "value",
|
|
4725
4771
|
style: {
|
|
4726
4772
|
fill: { kind: "none" },
|
|
@@ -4731,9 +4777,9 @@ function createChartRuleLine(render2, mark) {
|
|
|
4731
4777
|
};
|
|
4732
4778
|
}
|
|
4733
4779
|
function createChartRuleLabel(render2, mark) {
|
|
4734
|
-
const fontSize = Math.max(9,
|
|
4780
|
+
const fontSize = Math.max(9, chunkLSEMXRB5_cjs.finite(render2.chart.fontSize, 12) - 2);
|
|
4735
4781
|
return {
|
|
4736
|
-
...
|
|
4782
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4737
4783
|
id: `chart-rule-label-${render2.chart.id}-${mark.rule.id}`,
|
|
4738
4784
|
order: mark.labelOrder ?? mark.lineOrder + 1,
|
|
4739
4785
|
bounds: render2.bounds,
|
|
@@ -4742,19 +4788,19 @@ function createChartRuleLabel(render2, mark) {
|
|
|
4742
4788
|
chart: render2.chart
|
|
4743
4789
|
}),
|
|
4744
4790
|
color: mark.color,
|
|
4745
|
-
prop:
|
|
4791
|
+
prop: chunkLSEMXRB5_cjs.ruleTextProp(mark.rule.id)
|
|
4746
4792
|
};
|
|
4747
4793
|
}
|
|
4748
4794
|
|
|
4749
4795
|
// src/renderScene/charts/chartBackdrop.ts
|
|
4750
4796
|
function chartImageRect(chart) {
|
|
4751
|
-
const inset =
|
|
4797
|
+
const inset = chunkLSEMXRB5_cjs.finite(chart.strokeWidth, 1) / 2;
|
|
4752
4798
|
return {
|
|
4753
4799
|
x: chart.x + inset,
|
|
4754
4800
|
y: chart.y + inset,
|
|
4755
4801
|
width: Math.max(1, chart.width - inset * 2),
|
|
4756
4802
|
height: Math.max(1, chart.height - inset * 2),
|
|
4757
|
-
rx: Math.max(0,
|
|
4803
|
+
rx: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.cornerRadius, 12) - inset)
|
|
4758
4804
|
};
|
|
4759
4805
|
}
|
|
4760
4806
|
function buildChartBackdrop(chart, bounds, order) {
|
|
@@ -4796,7 +4842,7 @@ function buildChartBackdrop(chart, bounds, order) {
|
|
|
4796
4842
|
// src/renderScene/charts/renderers/bar/glass.ts
|
|
4797
4843
|
function createGlassBackdropNodes(context, id, d) {
|
|
4798
4844
|
const { chart, bounds, nextOrder } = context;
|
|
4799
|
-
const blur =
|
|
4845
|
+
const blur = chunkLSEMXRB5_cjs.finite(chart.config?.barGlassBlur, 0);
|
|
4800
4846
|
if (blur <= 0 || !chart.fillImage) {
|
|
4801
4847
|
return [];
|
|
4802
4848
|
}
|
|
@@ -4814,7 +4860,7 @@ function createGlassBackdropNodes(context, id, d) {
|
|
|
4814
4860
|
href: chart.fillImage.url,
|
|
4815
4861
|
style: {
|
|
4816
4862
|
blur,
|
|
4817
|
-
saturate:
|
|
4863
|
+
saturate: chunkLSEMXRB5_cjs.finite(chart.config?.barGlassSaturation, 1),
|
|
4818
4864
|
clip: { type: "path", d },
|
|
4819
4865
|
pointerEvents: "none"
|
|
4820
4866
|
}
|
|
@@ -4865,8 +4911,8 @@ function createBarGlowNode(context, id, d, color, glow, bounds = context.bounds)
|
|
|
4865
4911
|
bounds,
|
|
4866
4912
|
d,
|
|
4867
4913
|
style: {
|
|
4868
|
-
fill:
|
|
4869
|
-
shadow: { color:
|
|
4914
|
+
fill: chunkLSEMXRB5_cjs.paint(color, diagnostics, chart.id),
|
|
4915
|
+
shadow: { color: chunkLSEMXRB5_cjs.representativeColor(color, "#ffffff"), opacity: 0.9, blur: glow, dx: 0, dy: 0 },
|
|
4870
4916
|
pointerEvents: "none"
|
|
4871
4917
|
}
|
|
4872
4918
|
};
|
|
@@ -4877,14 +4923,14 @@ function barLabelsEnabled(context) {
|
|
|
4877
4923
|
return context.chart.config?.showBarLabels === true;
|
|
4878
4924
|
}
|
|
4879
4925
|
function resolvePlacement(target, size) {
|
|
4880
|
-
const fits = target.frame.height >= size.height +
|
|
4926
|
+
const fits = target.frame.height >= size.height + chunkLSEMXRB5_cjs.BAR_LABEL.gap * 2;
|
|
4881
4927
|
return target.placement !== "outside" && !fits ? "outside" : target.placement;
|
|
4882
4928
|
}
|
|
4883
4929
|
function labelTop(placement, frame, height) {
|
|
4884
4930
|
if (placement === "outside") {
|
|
4885
|
-
return frame.y - height -
|
|
4931
|
+
return frame.y - height - chunkLSEMXRB5_cjs.BAR_LABEL.gap;
|
|
4886
4932
|
}
|
|
4887
|
-
return placement === "inside" ? frame.y +
|
|
4933
|
+
return placement === "inside" ? frame.y + chunkLSEMXRB5_cjs.BAR_LABEL.gap : frame.y + frame.height / 2 - height / 2;
|
|
4888
4934
|
}
|
|
4889
4935
|
function createPillNode(context, id, box, color) {
|
|
4890
4936
|
const { chart, bounds, diagnostics, nextOrder } = context;
|
|
@@ -4894,11 +4940,11 @@ function createPillNode(context, id, box, color) {
|
|
|
4894
4940
|
id: `${id}-pill`,
|
|
4895
4941
|
order: nextOrder(),
|
|
4896
4942
|
bounds,
|
|
4897
|
-
d:
|
|
4943
|
+
d: chunkLSEMXRB5_cjs.pillPath(box.left, box.top, box.width, box.height),
|
|
4898
4944
|
style: {
|
|
4899
|
-
fill: config?.barLabelPillColor ?
|
|
4900
|
-
stroke:
|
|
4901
|
-
strokeWidth:
|
|
4945
|
+
fill: config?.barLabelPillColor ? chunkLSEMXRB5_cjs.paint(config.barLabelPillColor, diagnostics, chart.id) : { kind: "none" },
|
|
4946
|
+
stroke: chunkLSEMXRB5_cjs.paint(config?.barLabelBorderColor ?? color, diagnostics, chart.id),
|
|
4947
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(config?.barLabelBorderWidth, 1),
|
|
4902
4948
|
pointerEvents: "none"
|
|
4903
4949
|
}
|
|
4904
4950
|
};
|
|
@@ -4907,7 +4953,7 @@ function createTextNode(context, id, box, text, placement, fontSize, color) {
|
|
|
4907
4953
|
const { chart, bounds, nextOrder } = context;
|
|
4908
4954
|
const config = chart.config;
|
|
4909
4955
|
return {
|
|
4910
|
-
...
|
|
4956
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4911
4957
|
id,
|
|
4912
4958
|
order: nextOrder(),
|
|
4913
4959
|
bounds,
|
|
@@ -4928,7 +4974,7 @@ function createAxisValueNode(context, target, text, fontSize) {
|
|
|
4928
4974
|
const config = chart.config;
|
|
4929
4975
|
const top = plot.y + plot.height + 4 + 16 + Math.max(0, chart.tickLength ?? 0);
|
|
4930
4976
|
return {
|
|
4931
|
-
...
|
|
4977
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
4932
4978
|
id: target.id,
|
|
4933
4979
|
order: nextOrder(),
|
|
4934
4980
|
bounds,
|
|
@@ -4937,7 +4983,7 @@ function createAxisValueNode(context, target, text, fontSize) {
|
|
|
4937
4983
|
y: target.frame.y + target.frame.height / 2 - fontSize * 0.6,
|
|
4938
4984
|
width: plot.width - 14,
|
|
4939
4985
|
height: fontSize * 1.2
|
|
4940
|
-
} : { x: plot.x, y: target.frame.y -
|
|
4986
|
+
} : { x: plot.x, y: target.frame.y - chunkLSEMXRB5_cjs.CATEGORY_LABEL_ROW, width: plot.width, height: fontSize * 1.2 } : { x: target.frame.x, y: top, width: target.frame.width, height: fontSize * 1.2 },
|
|
4941
4987
|
text,
|
|
4942
4988
|
chart,
|
|
4943
4989
|
align: target.horizontal ? "right" : chart.categoryAlign === "left" ? "left" : "center"
|
|
@@ -4951,24 +4997,24 @@ function createAxisValueNode(context, target, text, fontSize) {
|
|
|
4951
4997
|
}
|
|
4952
4998
|
function horizontalPlacement(target, size) {
|
|
4953
4999
|
const requested = target.placement === "axis" ? "outside" : target.placement;
|
|
4954
|
-
const fits = target.frame.width >= size.width +
|
|
5000
|
+
const fits = target.frame.width >= size.width + chunkLSEMXRB5_cjs.BAR_LABEL.gap * 2;
|
|
4955
5001
|
return requested !== "outside" && !fits ? "outside" : requested;
|
|
4956
5002
|
}
|
|
4957
5003
|
function horizontalBox(target, size, placement) {
|
|
4958
5004
|
const { frame } = target;
|
|
4959
|
-
const left = placement === "outside" ? frame.x + frame.width +
|
|
5005
|
+
const left = placement === "outside" ? frame.x + frame.width + chunkLSEMXRB5_cjs.BAR_LABEL.gap : placement === "inside" ? frame.x + frame.width - size.width - chunkLSEMXRB5_cjs.BAR_LABEL.gap : frame.x + frame.width / 2 - size.width / 2;
|
|
4960
5006
|
return { ...size, left, top: frame.y + frame.height / 2 - size.height / 2 };
|
|
4961
5007
|
}
|
|
4962
5008
|
function createBarLabelNodes(context, target) {
|
|
4963
5009
|
const { chart } = context;
|
|
4964
5010
|
const config = chart.config;
|
|
4965
|
-
const fontSize = Math.max(8,
|
|
4966
|
-
const text =
|
|
5011
|
+
const fontSize = Math.max(8, chunkLSEMXRB5_cjs.finite(config?.barLabelFontSize, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12)));
|
|
5012
|
+
const text = chunkLSEMXRB5_cjs.formatBarLabel(target.value, config?.barLabelFormat);
|
|
4967
5013
|
if (target.placement === "axis") {
|
|
4968
5014
|
return [createAxisValueNode(context, target, text, fontSize)];
|
|
4969
5015
|
}
|
|
4970
5016
|
const pill = config?.barLabelPill === true;
|
|
4971
|
-
const size =
|
|
5017
|
+
const size = chunkLSEMXRB5_cjs.barLabelSize(text, fontSize, pill);
|
|
4972
5018
|
const placement = target.horizontal ? horizontalPlacement(target, size) : resolvePlacement(target, size);
|
|
4973
5019
|
const box = target.horizontal ? horizontalBox(target, size, placement) : {
|
|
4974
5020
|
...size,
|
|
@@ -5009,7 +5055,7 @@ function barTrackClip(context, frame) {
|
|
|
5009
5055
|
}
|
|
5010
5056
|
return {
|
|
5011
5057
|
type: "path",
|
|
5012
|
-
d:
|
|
5058
|
+
d: chunkLSEMXRB5_cjs.roundedBarPath(frame.x, frame.y, frame.width, frame.height, context.chart.config?.barCornerRadius ?? 2)
|
|
5013
5059
|
};
|
|
5014
5060
|
}
|
|
5015
5061
|
function barTrackEnabled(context) {
|
|
@@ -5019,8 +5065,8 @@ function createBarTrackNodes(context, id, frame, orientation = "vertical") {
|
|
|
5019
5065
|
const { chart, bounds, diagnostics, nextOrder } = context;
|
|
5020
5066
|
const config = chart.config;
|
|
5021
5067
|
const radius = config?.barCornerRadius ?? 2;
|
|
5022
|
-
const segments =
|
|
5023
|
-
const d = segments > 0 ?
|
|
5068
|
+
const segments = chunkLSEMXRB5_cjs.finite(config?.barSegments, 0);
|
|
5069
|
+
const d = segments > 0 ? chunkLSEMXRB5_cjs.segmentedBarPath(frame, orientation, segments, chunkLSEMXRB5_cjs.finite(config?.barSegmentGap, 4), radius, 1, true) : chunkLSEMXRB5_cjs.roundedBarPath(frame.x, frame.y, frame.width, frame.height, radius);
|
|
5024
5070
|
const nodes = [
|
|
5025
5071
|
{
|
|
5026
5072
|
type: "path",
|
|
@@ -5029,7 +5075,7 @@ function createBarTrackNodes(context, id, frame, orientation = "vertical") {
|
|
|
5029
5075
|
bounds,
|
|
5030
5076
|
d,
|
|
5031
5077
|
style: {
|
|
5032
|
-
fill:
|
|
5078
|
+
fill: chunkLSEMXRB5_cjs.paint(config?.barTrackColor ?? chart.gridColor ?? "#e2e8f0", diagnostics, chart.id),
|
|
5033
5079
|
pointerEvents: "none"
|
|
5034
5080
|
}
|
|
5035
5081
|
}
|
|
@@ -5045,13 +5091,13 @@ function createBarTrackNodes(context, id, frame, orientation = "vertical") {
|
|
|
5045
5091
|
frame.y,
|
|
5046
5092
|
frame.width,
|
|
5047
5093
|
frame.height,
|
|
5048
|
-
|
|
5049
|
-
Math.max(MIN_HATCH_SPACING,
|
|
5094
|
+
chunkLSEMXRB5_cjs.finite(config.barTrackHatchAngle, DEFAULT_HATCH.angle),
|
|
5095
|
+
Math.max(MIN_HATCH_SPACING, chunkLSEMXRB5_cjs.finite(config.barTrackHatchSpacing, DEFAULT_HATCH.spacing))
|
|
5050
5096
|
),
|
|
5051
5097
|
style: {
|
|
5052
5098
|
fill: { kind: "none" },
|
|
5053
|
-
stroke:
|
|
5054
|
-
strokeWidth:
|
|
5099
|
+
stroke: chunkLSEMXRB5_cjs.paint(config.barTrackHatchColor ?? chart.gridColor ?? "#cbd5e1", diagnostics, chart.id),
|
|
5100
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(config.barTrackHatchWidth, DEFAULT_HATCH.width),
|
|
5055
5101
|
pointerEvents: "none",
|
|
5056
5102
|
clip: { type: "path", d }
|
|
5057
5103
|
}
|
|
@@ -5098,23 +5144,23 @@ function groupedShape(context, frame) {
|
|
|
5098
5144
|
const { chart, plot } = context;
|
|
5099
5145
|
const config = chart.config;
|
|
5100
5146
|
const radius = config?.barCornerRadius ?? 2;
|
|
5101
|
-
const segments =
|
|
5147
|
+
const segments = chunkLSEMXRB5_cjs.finite(config?.barSegments, 0);
|
|
5102
5148
|
if (segments > 0) {
|
|
5103
|
-
return
|
|
5149
|
+
return chunkLSEMXRB5_cjs.segmentedBarPath(
|
|
5104
5150
|
{ x: frame.x, y: plot.y, width: frame.width, height: plot.height },
|
|
5105
5151
|
"vertical",
|
|
5106
5152
|
segments,
|
|
5107
|
-
|
|
5153
|
+
chunkLSEMXRB5_cjs.finite(config?.barSegmentGap, 4),
|
|
5108
5154
|
radius,
|
|
5109
5155
|
frame.height / plot.height,
|
|
5110
5156
|
config?.barSegmentSnap !== false
|
|
5111
5157
|
);
|
|
5112
5158
|
}
|
|
5113
|
-
return
|
|
5159
|
+
return chunkLSEMXRB5_cjs.barPath(frame.x, frame.y, frame.width, frame.height, radius, config?.barRoundedBottom === true);
|
|
5114
5160
|
}
|
|
5115
5161
|
function createGroupedGlow(context, mark) {
|
|
5116
5162
|
const { chart } = context;
|
|
5117
|
-
const glow =
|
|
5163
|
+
const glow = chunkLSEMXRB5_cjs.finite(chart.config?.barGlow, 0);
|
|
5118
5164
|
if (glow <= 0 || mark.frame.height <= 0) {
|
|
5119
5165
|
return [];
|
|
5120
5166
|
}
|
|
@@ -5125,10 +5171,10 @@ function createGroupedGlow(context, mark) {
|
|
|
5125
5171
|
}
|
|
5126
5172
|
function createGroupedBarLayout(context) {
|
|
5127
5173
|
const { chart, plot } = context;
|
|
5128
|
-
const valueCount =
|
|
5174
|
+
const valueCount = chunkLSEMXRB5_cjs.barCategoryCount(chart);
|
|
5129
5175
|
const slotWidth = plot.width / valueCount;
|
|
5130
|
-
const groupGap = Math.min(Math.max(0,
|
|
5131
|
-
const barGap = Math.max(0,
|
|
5176
|
+
const groupGap = Math.min(Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.barGroupGap, 8)), Math.max(0, slotWidth - 1));
|
|
5177
|
+
const barGap = Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.barGap, 2));
|
|
5132
5178
|
return {
|
|
5133
5179
|
slotWidth,
|
|
5134
5180
|
seriesWidth: Math.max(1, (slotWidth - groupGap) / Math.max(1, chart.series.length)),
|
|
@@ -5138,10 +5184,10 @@ function createGroupedBarLayout(context) {
|
|
|
5138
5184
|
}
|
|
5139
5185
|
function createSeriesBarMarks(context, layout, series, seriesIndex) {
|
|
5140
5186
|
const { chart, plot } = context;
|
|
5141
|
-
const seriesColor2 = series.color ??
|
|
5187
|
+
const seriesColor2 = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
5142
5188
|
return series.values.map((value, valueIndex) => {
|
|
5143
5189
|
const numericValue = Array.isArray(value) ? value[1] : value;
|
|
5144
|
-
const height = Math.max(0,
|
|
5190
|
+
const height = Math.max(0, chunkLSEMXRB5_cjs.mapChartValue(numericValue, chart.axisY, plot.height));
|
|
5145
5191
|
return {
|
|
5146
5192
|
seriesId: series.id,
|
|
5147
5193
|
valueIndex,
|
|
@@ -5175,10 +5221,10 @@ function createGroupedBarNodes(context, mark) {
|
|
|
5175
5221
|
const radius = chart.config?.barCornerRadius ?? 2;
|
|
5176
5222
|
const { x, width } = mark.frame;
|
|
5177
5223
|
const path = groupedShape(context, mark.frame);
|
|
5178
|
-
const fill2 =
|
|
5179
|
-
const stroke =
|
|
5180
|
-
const strokeWidth =
|
|
5181
|
-
const shadow =
|
|
5224
|
+
const fill2 = chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id);
|
|
5225
|
+
const stroke = chunkLSEMXRB5_cjs.paint(chart.config?.barBorderColor || "#000000", diagnostics, chart.id);
|
|
5226
|
+
const strokeWidth = chunkLSEMXRB5_cjs.finite(chart.config?.barBorderWidth, 0);
|
|
5227
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
5182
5228
|
const shadowCaster = shadow ? {
|
|
5183
5229
|
type: "path",
|
|
5184
5230
|
id: `chart-bar-shadow-${chart.id}-${mark.seriesId}-${mark.valueIndex}`,
|
|
@@ -5208,10 +5254,10 @@ function createGroupedBarNodes(context, mark) {
|
|
|
5208
5254
|
valueIndex: mark.valueIndex,
|
|
5209
5255
|
mark: "bar",
|
|
5210
5256
|
radius,
|
|
5211
|
-
colorProp:
|
|
5257
|
+
colorProp: chunkLSEMXRB5_cjs.seriesValueColorProp(mark.seriesId, mark.valueIndex),
|
|
5212
5258
|
hasColorOverride: mark.hasColorOverride
|
|
5213
5259
|
},
|
|
5214
|
-
prop:
|
|
5260
|
+
prop: chunkLSEMXRB5_cjs.seriesValueProp(mark.seriesId, mark.valueIndex),
|
|
5215
5261
|
style: { fill: fill2, stroke, strokeWidth, innerShadow: shadow }
|
|
5216
5262
|
};
|
|
5217
5263
|
const glass = createGlassBackdropNodes(context, `${mark.seriesId}-${mark.valueIndex}`, path);
|
|
@@ -5222,15 +5268,15 @@ function createGroupedBarError(context, mark) {
|
|
|
5222
5268
|
return null;
|
|
5223
5269
|
}
|
|
5224
5270
|
const { chart, plot, bounds, nextOrder } = context;
|
|
5225
|
-
const [lower, upper] =
|
|
5226
|
-
return
|
|
5271
|
+
const [lower, upper] = chunkLSEMXRB5_cjs.errorBarRange(mark.value, mark.error);
|
|
5272
|
+
return chunkLSEMXRB5_cjs.createVerticalErrorWhiskerNode({
|
|
5227
5273
|
id: `chart-bar-error-${chart.id}-${mark.seriesId}-${mark.valueIndex}`,
|
|
5228
5274
|
order: nextOrder(),
|
|
5229
5275
|
bounds,
|
|
5230
5276
|
geometry: {
|
|
5231
5277
|
centerX: mark.frame.x + mark.frame.width / 2,
|
|
5232
|
-
startY: plot.y + plot.height -
|
|
5233
|
-
endY: plot.y + plot.height -
|
|
5278
|
+
startY: plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(lower, chart.axisY, plot.height),
|
|
5279
|
+
endY: plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(upper, chart.axisY, plot.height)
|
|
5234
5280
|
},
|
|
5235
5281
|
color: chart.textColor ?? "#0f172a",
|
|
5236
5282
|
valueReference: { seriesId: mark.seriesId, valueIndex: mark.valueIndex }
|
|
@@ -5240,9 +5286,9 @@ function createGroupedBarError(context, mark) {
|
|
|
5240
5286
|
// src/renderScene/charts/renderers/bar/horizontal.ts
|
|
5241
5287
|
function barFrame(context, rows, seriesIndex, valueIndex, value) {
|
|
5242
5288
|
const { chart, plot } = context;
|
|
5243
|
-
const top =
|
|
5289
|
+
const top = chunkLSEMXRB5_cjs.rowTop(rows, plot, valueIndex) + rows.labelRow;
|
|
5244
5290
|
if (context.stackedMode) {
|
|
5245
|
-
const segment =
|
|
5291
|
+
const segment = chunkLSEMXRB5_cjs.stackedSegment(chart, context.stackedMode, valueIndex, seriesIndex, plot.width);
|
|
5246
5292
|
const start = Math.min(segment.pixelStart, segment.pixelEnd);
|
|
5247
5293
|
return {
|
|
5248
5294
|
x: plot.x + start,
|
|
@@ -5251,27 +5297,27 @@ function barFrame(context, rows, seriesIndex, valueIndex, value) {
|
|
|
5251
5297
|
height: rows.barsHeight
|
|
5252
5298
|
};
|
|
5253
5299
|
}
|
|
5254
|
-
const barGap = Math.max(0,
|
|
5300
|
+
const barGap = Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.barGap, 2));
|
|
5255
5301
|
const seriesHeight = rows.barsHeight / Math.max(1, chart.series.length);
|
|
5256
|
-
const width = Math.max(0,
|
|
5302
|
+
const width = Math.max(0, chunkLSEMXRB5_cjs.mapChartValue(value, chart.axisY, plot.width));
|
|
5257
5303
|
return { x: plot.x, y: top + seriesIndex * seriesHeight, width, height: Math.max(1, seriesHeight - barGap) };
|
|
5258
5304
|
}
|
|
5259
5305
|
function barPath2(context, frame) {
|
|
5260
5306
|
const { chart, plot } = context;
|
|
5261
5307
|
const config = chart.config;
|
|
5262
|
-
const segments = context.stackedMode && chart.series.length > 1 ? 0 :
|
|
5308
|
+
const segments = context.stackedMode && chart.series.length > 1 ? 0 : chunkLSEMXRB5_cjs.finite(config?.barSegments, 0);
|
|
5263
5309
|
if (segments > 0) {
|
|
5264
|
-
return
|
|
5310
|
+
return chunkLSEMXRB5_cjs.segmentedBarPath(
|
|
5265
5311
|
{ x: plot.x, y: frame.y, width: plot.width, height: frame.height },
|
|
5266
5312
|
"horizontal",
|
|
5267
5313
|
segments,
|
|
5268
|
-
|
|
5314
|
+
chunkLSEMXRB5_cjs.finite(config?.barSegmentGap, 4),
|
|
5269
5315
|
config?.barCornerRadius ?? 2,
|
|
5270
5316
|
frame.width / plot.width,
|
|
5271
5317
|
config?.barSegmentSnap !== false
|
|
5272
5318
|
);
|
|
5273
5319
|
}
|
|
5274
|
-
return
|
|
5320
|
+
return chunkLSEMXRB5_cjs.roundedBarPath(frame.x, frame.y, frame.width, frame.height, config?.barCornerRadius ?? 2);
|
|
5275
5321
|
}
|
|
5276
5322
|
function markOf(context, rows, series, seriesIndex, valueIndex, value) {
|
|
5277
5323
|
const { plot } = context;
|
|
@@ -5291,16 +5337,16 @@ function markOf(context, rows, series, seriesIndex, valueIndex, value) {
|
|
|
5291
5337
|
maxY: frame.y + frame.height
|
|
5292
5338
|
},
|
|
5293
5339
|
path: barPath2(context, frame),
|
|
5294
|
-
color: series.colors?.[valueIndex] ?? series.color ??
|
|
5340
|
+
color: series.colors?.[valueIndex] ?? series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length]
|
|
5295
5341
|
};
|
|
5296
5342
|
}
|
|
5297
5343
|
function barNodes(context, mark) {
|
|
5298
5344
|
const { chart, diagnostics, nextOrder } = context;
|
|
5299
5345
|
const config = chart.config;
|
|
5300
|
-
const stroke =
|
|
5301
|
-
const strokeWidth =
|
|
5302
|
-
const shadow =
|
|
5303
|
-
const fill2 =
|
|
5346
|
+
const stroke = chunkLSEMXRB5_cjs.paint(config?.barBorderColor || "#000000", diagnostics, chart.id);
|
|
5347
|
+
const strokeWidth = chunkLSEMXRB5_cjs.finite(config?.barBorderWidth, 0);
|
|
5348
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
5349
|
+
const fill2 = chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id);
|
|
5304
5350
|
const nodes = [...createGlassBackdropNodes(context, mark.id, mark.path)];
|
|
5305
5351
|
if (shadow) {
|
|
5306
5352
|
nodes.push({
|
|
@@ -5324,7 +5370,7 @@ function barNodes(context, mark) {
|
|
|
5324
5370
|
valueIndex: mark.valueIndex,
|
|
5325
5371
|
mark: "bar",
|
|
5326
5372
|
radius: config?.barCornerRadius ?? 2,
|
|
5327
|
-
colorProp:
|
|
5373
|
+
colorProp: chunkLSEMXRB5_cjs.seriesValueColorProp(mark.series.id, mark.valueIndex),
|
|
5328
5374
|
hasColorOverride: mark.series.colors?.[mark.valueIndex] != null
|
|
5329
5375
|
},
|
|
5330
5376
|
style: { fill: fill2, stroke, strokeWidth, innerShadow: shadow }
|
|
@@ -5354,7 +5400,7 @@ function pushBar(context, rows, layers, series, seriesIndex, valueIndex, value,
|
|
|
5354
5400
|
layers.tracks.push(...createBarTrackNodes(context, mark.id, mark.trackFrame, "horizontal"));
|
|
5355
5401
|
}
|
|
5356
5402
|
layers.bars.push(...barNodes(context, mark));
|
|
5357
|
-
const glow =
|
|
5403
|
+
const glow = chunkLSEMXRB5_cjs.finite(chart.config?.barGlow, 0);
|
|
5358
5404
|
if (glow > 0 && mark.frame.width > 0) {
|
|
5359
5405
|
layers.glows.push(
|
|
5360
5406
|
createBarGlowNode(context, `chart-bar-glow-${chart.id}-${mark.id}`, mark.path, mark.color, glow, mark.bounds)
|
|
@@ -5363,7 +5409,7 @@ function pushBar(context, rows, layers, series, seriesIndex, valueIndex, value,
|
|
|
5363
5409
|
layers.labels.push(...labelNodes2(context, mark, highest));
|
|
5364
5410
|
}
|
|
5365
5411
|
function renderHorizontalBars(context) {
|
|
5366
|
-
const rows =
|
|
5412
|
+
const rows = chunkLSEMXRB5_cjs.horizontalRows(context.chart, context.plot);
|
|
5367
5413
|
const layers = { tracks: [], bars: [], glows: [], labels: [] };
|
|
5368
5414
|
context.chart.series.forEach((series, seriesIndex) => {
|
|
5369
5415
|
const numeric = series.values.map((value) => typeof value === "number" ? value : value[1]);
|
|
@@ -5378,8 +5424,8 @@ function renderHorizontalBars(context) {
|
|
|
5378
5424
|
// src/renderScene/charts/renderers/bar/stacked.ts
|
|
5379
5425
|
function slotOf(context, mode) {
|
|
5380
5426
|
const { chart, plot } = context;
|
|
5381
|
-
const slotWidth = plot.width /
|
|
5382
|
-
const groupGap = Math.min(Math.max(0,
|
|
5427
|
+
const slotWidth = plot.width / chunkLSEMXRB5_cjs.barCategoryCount(chart);
|
|
5428
|
+
const groupGap = Math.min(Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.barGroupGap, 8)), Math.max(0, slotWidth - 1));
|
|
5383
5429
|
return {
|
|
5384
5430
|
slotWidth,
|
|
5385
5431
|
groupGap,
|
|
@@ -5390,19 +5436,19 @@ function slotOf(context, mode) {
|
|
|
5390
5436
|
}
|
|
5391
5437
|
function pathOf(context, x, y, height, slot, radius) {
|
|
5392
5438
|
const { chart, plot } = context;
|
|
5393
|
-
const segments = chart.series.length === 1 ?
|
|
5439
|
+
const segments = chart.series.length === 1 ? chunkLSEMXRB5_cjs.finite(chart.config?.barSegments, 0) : 0;
|
|
5394
5440
|
if (segments > 0) {
|
|
5395
|
-
return
|
|
5441
|
+
return chunkLSEMXRB5_cjs.segmentedBarPath(
|
|
5396
5442
|
{ x, y: plot.y, width: slot.barWidth, height: plot.height },
|
|
5397
5443
|
"vertical",
|
|
5398
5444
|
segments,
|
|
5399
|
-
|
|
5445
|
+
chunkLSEMXRB5_cjs.finite(chart.config?.barSegmentGap, 4),
|
|
5400
5446
|
radius,
|
|
5401
5447
|
height / plot.height,
|
|
5402
5448
|
chart.config?.barSegmentSnap !== false
|
|
5403
5449
|
);
|
|
5404
5450
|
}
|
|
5405
|
-
return
|
|
5451
|
+
return chunkLSEMXRB5_cjs.barPath(x, y, slot.barWidth, height, radius, chart.config?.barRoundedBottom === true);
|
|
5406
5452
|
}
|
|
5407
5453
|
function pushLabel(context, layers, series, seriesIndex, valueIndex, slot, frame) {
|
|
5408
5454
|
const { chart } = context;
|
|
@@ -5424,7 +5470,7 @@ function pushLabel(context, layers, series, seriesIndex, valueIndex, slot, frame
|
|
|
5424
5470
|
}
|
|
5425
5471
|
function markOf2(context, mode, slot, series, seriesIndex, valueIndex) {
|
|
5426
5472
|
const { chart, plot } = context;
|
|
5427
|
-
const segment =
|
|
5473
|
+
const segment = chunkLSEMXRB5_cjs.stackedSegment(chart, mode, valueIndex, seriesIndex, plot.height);
|
|
5428
5474
|
const radius = slot.outerSeriesIndex === null || seriesIndex === slot.outerSeriesIndex ? slot.cornerRadius : 0;
|
|
5429
5475
|
const x = plot.x + valueIndex * slot.slotWidth + slot.groupGap / 2;
|
|
5430
5476
|
const y = plot.y + plot.height - Math.max(segment.pixelStart, segment.pixelEnd);
|
|
@@ -5433,7 +5479,7 @@ function markOf2(context, mode, slot, series, seriesIndex, valueIndex) {
|
|
|
5433
5479
|
series,
|
|
5434
5480
|
valueIndex,
|
|
5435
5481
|
radius,
|
|
5436
|
-
color: series.colors?.[valueIndex] ?? series.color ??
|
|
5482
|
+
color: series.colors?.[valueIndex] ?? series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length],
|
|
5437
5483
|
x,
|
|
5438
5484
|
y,
|
|
5439
5485
|
height,
|
|
@@ -5444,10 +5490,10 @@ function markOf2(context, mode, slot, series, seriesIndex, valueIndex) {
|
|
|
5444
5490
|
function segmentNodes(context, mark) {
|
|
5445
5491
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
5446
5492
|
const { series, valueIndex, path } = mark;
|
|
5447
|
-
const fill2 =
|
|
5448
|
-
const stroke =
|
|
5449
|
-
const strokeWidth =
|
|
5450
|
-
const shadow =
|
|
5493
|
+
const fill2 = chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id);
|
|
5494
|
+
const stroke = chunkLSEMXRB5_cjs.paint(chart.config?.barBorderColor || "#000000", diagnostics, chart.id);
|
|
5495
|
+
const strokeWidth = chunkLSEMXRB5_cjs.finite(chart.config?.barBorderWidth, 0);
|
|
5496
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
5451
5497
|
const nodes = [];
|
|
5452
5498
|
if (shadow) {
|
|
5453
5499
|
const plotClip = `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z`;
|
|
@@ -5479,10 +5525,10 @@ function segmentNodes(context, mark) {
|
|
|
5479
5525
|
valueIndex,
|
|
5480
5526
|
mark: "bar",
|
|
5481
5527
|
radius: mark.radius,
|
|
5482
|
-
colorProp:
|
|
5528
|
+
colorProp: chunkLSEMXRB5_cjs.seriesValueColorProp(series.id, valueIndex),
|
|
5483
5529
|
hasColorOverride: series.colors?.[valueIndex] != null
|
|
5484
5530
|
},
|
|
5485
|
-
prop:
|
|
5531
|
+
prop: chunkLSEMXRB5_cjs.seriesValueProp(series.id, valueIndex),
|
|
5486
5532
|
style: { fill: fill2, stroke, strokeWidth, innerShadow: shadow }
|
|
5487
5533
|
});
|
|
5488
5534
|
return nodes;
|
|
@@ -5496,7 +5542,7 @@ function pushSegment(context, mode, layers, slot, series, seriesIndex, valueInde
|
|
|
5496
5542
|
layers.bars.push(...segmentNodes(context, mark));
|
|
5497
5543
|
const frame = { x: mark.x, y: mark.y, width: slot.barWidth, height: mark.height };
|
|
5498
5544
|
pushLabel(context, layers, series, seriesIndex, valueIndex, slot, frame);
|
|
5499
|
-
const glow =
|
|
5545
|
+
const glow = chunkLSEMXRB5_cjs.finite(chart.config?.barGlow, 0);
|
|
5500
5546
|
if (glow > 0) {
|
|
5501
5547
|
layers.glows.push(
|
|
5502
5548
|
createBarGlowNode(context, `chart-bar-glow-${chart.id}-${series.id}-${valueIndex}`, mark.path, mark.color, glow)
|
|
@@ -5507,7 +5553,7 @@ function renderStackedBars(context, mode) {
|
|
|
5507
5553
|
const { chart } = context;
|
|
5508
5554
|
const layers = { tracks: [], bars: [], glows: [], labels: [] };
|
|
5509
5555
|
const slot = slotOf(context, mode);
|
|
5510
|
-
const valueCount =
|
|
5556
|
+
const valueCount = chunkLSEMXRB5_cjs.barCategoryCount(chart);
|
|
5511
5557
|
for (let valueIndex = 0; valueIndex < valueCount; valueIndex++) {
|
|
5512
5558
|
chart.series.forEach((series, seriesIndex) => {
|
|
5513
5559
|
pushSegment(context, mode, layers, slot, series, seriesIndex, valueIndex);
|
|
@@ -5522,7 +5568,7 @@ function isSeriesMax2(values, index) {
|
|
|
5522
5568
|
|
|
5523
5569
|
// src/renderScene/charts/renderers/bar.ts
|
|
5524
5570
|
function renderBar(context) {
|
|
5525
|
-
if (
|
|
5571
|
+
if (chunkLSEMXRB5_cjs.isHorizontalBar(context.chart)) {
|
|
5526
5572
|
return renderHorizontalBars(context);
|
|
5527
5573
|
}
|
|
5528
5574
|
if (context.stackedMode) {
|
|
@@ -5537,7 +5583,7 @@ function createBoxplotLayout(context) {
|
|
|
5537
5583
|
const orientation = chart.config?.orientation ?? "vertical";
|
|
5538
5584
|
const boxCount = Math.max(1, chart.series.length);
|
|
5539
5585
|
const slotWidth = (orientation === "horizontal" ? plot.height : plot.width) / boxCount;
|
|
5540
|
-
const borderColor =
|
|
5586
|
+
const borderColor = chunkLSEMXRB5_cjs.representativeColor(chart.config?.barBorderColor, "#000000");
|
|
5541
5587
|
const widthFraction = Math.min(1, Math.max(0.05, chart.config?.boxWidth ?? 0.6));
|
|
5542
5588
|
return {
|
|
5543
5589
|
orientation,
|
|
@@ -5546,15 +5592,15 @@ function createBoxplotLayout(context) {
|
|
|
5546
5592
|
cornerRadius: chart.config?.barCornerRadius ?? 2,
|
|
5547
5593
|
showPoints: chart.config?.showBoxplotPoints ?? true,
|
|
5548
5594
|
borderColor,
|
|
5549
|
-
borderWidth:
|
|
5550
|
-
whiskerWidth: Math.max(0,
|
|
5551
|
-
medianWidth: Math.max(0,
|
|
5595
|
+
borderWidth: chunkLSEMXRB5_cjs.finite(chart.config?.barBorderWidth, 1),
|
|
5596
|
+
whiskerWidth: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.boxWhiskerWidth, 1)),
|
|
5597
|
+
medianWidth: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.boxMedianWidth, 2)),
|
|
5552
5598
|
medianColor: chart.config?.boxMedianColor ?? borderColor,
|
|
5553
5599
|
whiskerColor: chart.config?.boxWhiskerColor,
|
|
5554
|
-
capSize: Math.max(0,
|
|
5555
|
-
pointSize: Math.max(0,
|
|
5556
|
-
pointOpacity: Math.min(1, Math.max(0,
|
|
5557
|
-
jitter: Math.max(0,
|
|
5600
|
+
capSize: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.boxCapSize, 0.4)),
|
|
5601
|
+
pointSize: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.boxPointSize, 3)),
|
|
5602
|
+
pointOpacity: Math.min(1, Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.boxPointOpacity, 0.7))),
|
|
5603
|
+
jitter: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.boxJitter, 1))
|
|
5558
5604
|
};
|
|
5559
5605
|
}
|
|
5560
5606
|
|
|
@@ -5565,7 +5611,7 @@ function boxplotPoint(orientation, center, value) {
|
|
|
5565
5611
|
function createBoxplotGeometry(context, layout, seriesIndex, stats) {
|
|
5566
5612
|
const { chart, plot } = context;
|
|
5567
5613
|
const { orientation } = layout;
|
|
5568
|
-
const valueAt = (value) => orientation === "horizontal" ? plot.x +
|
|
5614
|
+
const valueAt = (value) => orientation === "horizontal" ? plot.x + chunkLSEMXRB5_cjs.mapChartValue(value, chart.axisX, plot.width) : plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(value, chart.axisY, plot.height);
|
|
5569
5615
|
const center = plot[orientation === "horizontal" ? "y" : "x"] + seriesIndex * layout.slotWidth + layout.slotWidth / 2;
|
|
5570
5616
|
return {
|
|
5571
5617
|
center,
|
|
@@ -5580,7 +5626,7 @@ function createBoxplotGeometry(context, layout, seriesIndex, stats) {
|
|
|
5580
5626
|
// src/renderScene/charts/renderers/boxplot/points.ts
|
|
5581
5627
|
function renderSamplePoints(context, layout, mark) {
|
|
5582
5628
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
5583
|
-
const valueAt = (value) => layout.orientation === "horizontal" ? plot.x +
|
|
5629
|
+
const valueAt = (value) => layout.orientation === "horizontal" ? plot.x + chunkLSEMXRB5_cjs.mapChartValue(value, chart.axisX, plot.width) : plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(value, chart.axisY, plot.height);
|
|
5584
5630
|
if (layout.pointSize <= 0) {
|
|
5585
5631
|
return [];
|
|
5586
5632
|
}
|
|
@@ -5596,7 +5642,7 @@ function renderSamplePoints(context, layout, mark) {
|
|
|
5596
5642
|
cy: y,
|
|
5597
5643
|
rx: layout.pointSize,
|
|
5598
5644
|
ry: layout.pointSize,
|
|
5599
|
-
style: { fill:
|
|
5645
|
+
style: { fill: chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id), opacity: layout.pointOpacity }
|
|
5600
5646
|
};
|
|
5601
5647
|
});
|
|
5602
5648
|
}
|
|
@@ -5620,7 +5666,7 @@ function renderBoxAndWhiskers(context, layout, mark) {
|
|
|
5620
5666
|
}
|
|
5621
5667
|
function whiskerColor(layout, mark) {
|
|
5622
5668
|
if (layout.whiskerColor === "series") {
|
|
5623
|
-
return
|
|
5669
|
+
return chunkLSEMXRB5_cjs.representativeColor(mark.color, layout.borderColor);
|
|
5624
5670
|
}
|
|
5625
5671
|
return layout.whiskerColor;
|
|
5626
5672
|
}
|
|
@@ -5702,7 +5748,7 @@ function createBoxNode(context, layout, mark) {
|
|
|
5702
5748
|
height,
|
|
5703
5749
|
rx: layout.cornerRadius,
|
|
5704
5750
|
style: {
|
|
5705
|
-
fill:
|
|
5751
|
+
fill: chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id),
|
|
5706
5752
|
stroke: { kind: "solid", color: layout.borderColor },
|
|
5707
5753
|
strokeWidth: layout.borderWidth
|
|
5708
5754
|
}
|
|
@@ -5711,12 +5757,12 @@ function createBoxNode(context, layout, mark) {
|
|
|
5711
5757
|
|
|
5712
5758
|
// src/renderScene/charts/renderers/boxplot/series.ts
|
|
5713
5759
|
function renderBoxplotSeries(context, layout, series, seriesIndex) {
|
|
5714
|
-
const stats =
|
|
5760
|
+
const stats = chunkLSEMXRB5_cjs.computeBoxplotStats(series.values);
|
|
5715
5761
|
if (!stats) {
|
|
5716
5762
|
return [];
|
|
5717
5763
|
}
|
|
5718
5764
|
const geometry = createBoxplotGeometry(context, layout, seriesIndex, stats);
|
|
5719
|
-
const color = series.color ??
|
|
5765
|
+
const color = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
5720
5766
|
const mark = {
|
|
5721
5767
|
id: `${context.chart.id}-${series.id}`,
|
|
5722
5768
|
series,
|
|
@@ -5778,21 +5824,21 @@ function metricComponent(chart, point) {
|
|
|
5778
5824
|
}
|
|
5779
5825
|
function customPointPosition(context, value) {
|
|
5780
5826
|
return {
|
|
5781
|
-
x: context.plot.x +
|
|
5782
|
-
y: context.plot.y + context.plot.height -
|
|
5827
|
+
x: context.plot.x + chunkLSEMXRB5_cjs.mapChartValue(value[0], context.chart.axisX, context.plot.width),
|
|
5828
|
+
y: context.plot.y + context.plot.height - chunkLSEMXRB5_cjs.mapChartValue(value[1], context.chart.axisY, context.plot.height)
|
|
5783
5829
|
};
|
|
5784
5830
|
}
|
|
5785
5831
|
function customSeriesStyle(context, series, seriesIndex) {
|
|
5786
|
-
const color = series.color ??
|
|
5832
|
+
const color = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
5787
5833
|
return {
|
|
5788
|
-
fill:
|
|
5834
|
+
fill: chunkLSEMXRB5_cjs.paint(color, context.diagnostics, context.chart.id),
|
|
5789
5835
|
stroke: series.stroke ? { kind: "solid", color: series.stroke } : void 0,
|
|
5790
|
-
strokeWidth: series.stroke ?
|
|
5836
|
+
strokeWidth: series.stroke ? chunkLSEMXRB5_cjs.finite(series.strokeWidth, 1) : void 0
|
|
5791
5837
|
};
|
|
5792
5838
|
}
|
|
5793
5839
|
function createCustomSymbolMark(context, mark) {
|
|
5794
5840
|
const symbol = mark.series.symbol;
|
|
5795
|
-
const size =
|
|
5841
|
+
const size = chunkLSEMXRB5_cjs.finite(mark.series.size, 3);
|
|
5796
5842
|
const scale = symbol?.normalized ? size * 2 : 1;
|
|
5797
5843
|
const offset = symbol?.normalized ? 0.5 : 0;
|
|
5798
5844
|
const points = (symbol?.points ?? []).map(([x, y]) => ({
|
|
@@ -5804,12 +5850,12 @@ function createCustomSymbolMark(context, mark) {
|
|
|
5804
5850
|
id: customMarkId(context.chart, mark.series, mark.valueIndex),
|
|
5805
5851
|
order: context.nextOrder(),
|
|
5806
5852
|
bounds: context.bounds,
|
|
5807
|
-
d:
|
|
5853
|
+
d: chunkLSEMXRB5_cjs.freeformPathData({ points, tension: chunkLSEMXRB5_cjs.finite(symbol?.tension, 0), closed: true }),
|
|
5808
5854
|
style: mark.style
|
|
5809
5855
|
};
|
|
5810
5856
|
}
|
|
5811
5857
|
function createCustomPointMark(context, mark) {
|
|
5812
|
-
const radius =
|
|
5858
|
+
const radius = chunkLSEMXRB5_cjs.finite(mark.series.size, 3);
|
|
5813
5859
|
return {
|
|
5814
5860
|
type: "ellipse",
|
|
5815
5861
|
id: customMarkId(context.chart, mark.series, mark.valueIndex),
|
|
@@ -5833,7 +5879,7 @@ function renderConnectedPairs(context) {
|
|
|
5833
5879
|
const zones = chart.config?.zones ?? [];
|
|
5834
5880
|
const betterColor = zones[0]?.color ?? "#10b981";
|
|
5835
5881
|
const worseColor = zones[1]?.color ?? "#ec4899";
|
|
5836
|
-
const tieColor = zones[2]?.color ??
|
|
5882
|
+
const tieColor = zones[2]?.color ?? chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL;
|
|
5837
5883
|
const reverse = Boolean(chart.config?.reverseComparison);
|
|
5838
5884
|
const count = Math.min(beforeValues.length, afterValues.length);
|
|
5839
5885
|
const categories = chart.config?.categories ?? [];
|
|
@@ -5848,7 +5894,7 @@ function renderConnectedPairs(context) {
|
|
|
5848
5894
|
const better = reverse ? afterMetric < beforeMetric : afterMetric > beforeMetric;
|
|
5849
5895
|
const worse = reverse ? afterMetric > beforeMetric : afterMetric < beforeMetric;
|
|
5850
5896
|
const comparisonColor = better ? betterColor : worse ? worseColor : tieColor;
|
|
5851
|
-
const radius =
|
|
5897
|
+
const radius = chunkLSEMXRB5_cjs.finite(afterSeries.size, 3);
|
|
5852
5898
|
nodes.push(createConnectorLine(context, index, beforePoint, afterPoint, comparisonColor));
|
|
5853
5899
|
nodes.push(
|
|
5854
5900
|
createCustomPointMark(context, {
|
|
@@ -5856,9 +5902,9 @@ function renderConnectedPairs(context) {
|
|
|
5856
5902
|
valueIndex: index,
|
|
5857
5903
|
point: beforePoint,
|
|
5858
5904
|
style: {
|
|
5859
|
-
fill:
|
|
5905
|
+
fill: chunkLSEMXRB5_cjs.paint(chart.config?.customBeforeFill ?? chart.gridColor ?? "#e2e8f0", context.diagnostics, chart.id),
|
|
5860
5906
|
stroke: { kind: "solid", color: chart.config?.customBeforeStroke ?? HOLLOW_POINT_STROKE },
|
|
5861
|
-
strokeWidth:
|
|
5907
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.config?.customBeforeStrokeWidth, 1.5)
|
|
5862
5908
|
}
|
|
5863
5909
|
})
|
|
5864
5910
|
);
|
|
@@ -5868,7 +5914,7 @@ function renderConnectedPairs(context) {
|
|
|
5868
5914
|
valueIndex: index,
|
|
5869
5915
|
point: afterPoint,
|
|
5870
5916
|
style: {
|
|
5871
|
-
fill:
|
|
5917
|
+
fill: chunkLSEMXRB5_cjs.paint(comparisonColor, context.diagnostics, chart.id),
|
|
5872
5918
|
stroke: void 0,
|
|
5873
5919
|
strokeWidth: void 0
|
|
5874
5920
|
}
|
|
@@ -5895,7 +5941,7 @@ function createConnectorLine(context, index, from, to, color) {
|
|
|
5895
5941
|
style: {
|
|
5896
5942
|
fill: { kind: "none" },
|
|
5897
5943
|
stroke: { kind: "solid", color },
|
|
5898
|
-
strokeWidth:
|
|
5944
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.config?.customConnectorWidth, 2),
|
|
5899
5945
|
opacity: chart.config?.customConnectorOpacity,
|
|
5900
5946
|
dash: connectorDash(chart.config?.customConnectorDash)
|
|
5901
5947
|
}
|
|
@@ -5916,7 +5962,7 @@ function createConnectorLabel(context, index, beforePoint, afterPoint, radius, t
|
|
|
5916
5962
|
height: 16
|
|
5917
5963
|
};
|
|
5918
5964
|
return {
|
|
5919
|
-
...
|
|
5965
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
5920
5966
|
id: `chart-custom-label-${chart.id}-${index}`,
|
|
5921
5967
|
order: nextOrder(),
|
|
5922
5968
|
bounds,
|
|
@@ -5925,7 +5971,7 @@ function createConnectorLabel(context, index, beforePoint, afterPoint, radius, t
|
|
|
5925
5971
|
chart,
|
|
5926
5972
|
align: horizontal ? "left" : "center"
|
|
5927
5973
|
}),
|
|
5928
|
-
fontSize: Math.max(6,
|
|
5974
|
+
fontSize: Math.max(6, chunkLSEMXRB5_cjs.finite(chart.config?.customLabelSize, Math.max(9, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12)) - 2)),
|
|
5929
5975
|
...chart.config?.customLabelColor ? { color: chart.config.customLabelColor } : {}
|
|
5930
5976
|
};
|
|
5931
5977
|
}
|
|
@@ -5937,8 +5983,8 @@ function classifyFieldData(context) {
|
|
|
5937
5983
|
const vectorSeries = chart.series.filter((series) => tupleSize(series.values[0]) === 4);
|
|
5938
5984
|
const scalarSamples = scalarSeries.flatMap(
|
|
5939
5985
|
(series) => series.values.map(([x, y, value]) => ({
|
|
5940
|
-
x:
|
|
5941
|
-
y: plot.height -
|
|
5986
|
+
x: chunkLSEMXRB5_cjs.mapChartValue(x, chart.axisX, plot.width),
|
|
5987
|
+
y: plot.height - chunkLSEMXRB5_cjs.mapChartValue(y, chart.axisY, plot.height),
|
|
5942
5988
|
value
|
|
5943
5989
|
}))
|
|
5944
5990
|
);
|
|
@@ -6002,20 +6048,20 @@ function createLegendLabels(context, minimum, maximum, geometry) {
|
|
|
6002
6048
|
const { chart, bounds, nextOrder } = context;
|
|
6003
6049
|
const y = geometry.y + geometry.height + 3;
|
|
6004
6050
|
return [
|
|
6005
|
-
|
|
6051
|
+
chunkLSEMXRB5_cjs.chartText({
|
|
6006
6052
|
id: `chart-field-colorbar-min-${chart.id}`,
|
|
6007
6053
|
order: nextOrder(),
|
|
6008
6054
|
bounds,
|
|
6009
6055
|
frame: { x: geometry.x, y, width: 80, height: 16 },
|
|
6010
|
-
text:
|
|
6056
|
+
text: chunkLSEMXRB5_cjs.formatFieldValue(minimum),
|
|
6011
6057
|
chart
|
|
6012
6058
|
}),
|
|
6013
|
-
|
|
6059
|
+
chunkLSEMXRB5_cjs.chartText({
|
|
6014
6060
|
id: `chart-field-colorbar-max-${chart.id}`,
|
|
6015
6061
|
order: nextOrder(),
|
|
6016
6062
|
bounds,
|
|
6017
6063
|
frame: { x: geometry.x + geometry.width - 80, y, width: 80, height: 16 },
|
|
6018
|
-
text:
|
|
6064
|
+
text: chunkLSEMXRB5_cjs.formatFieldValue(maximum),
|
|
6019
6065
|
chart,
|
|
6020
6066
|
align: "right"
|
|
6021
6067
|
})
|
|
@@ -6028,7 +6074,7 @@ function colorAtRamp(ramp, value) {
|
|
|
6028
6074
|
if (!ramp?.stops.length) {
|
|
6029
6075
|
return RAMP_FALLBACK_COLOR;
|
|
6030
6076
|
}
|
|
6031
|
-
return
|
|
6077
|
+
return chunkLSEMXRB5_cjs.interpolateHexColorStops(ramp.stops, value);
|
|
6032
6078
|
}
|
|
6033
6079
|
|
|
6034
6080
|
// src/renderScene/charts/field/isolines.ts
|
|
@@ -6238,7 +6284,7 @@ function createIsoline(context, grid, threshold, thresholdIndex) {
|
|
|
6238
6284
|
}
|
|
6239
6285
|
const chains = stitchIsolineSegments(segments);
|
|
6240
6286
|
const path = chains.map(
|
|
6241
|
-
(chain) =>
|
|
6287
|
+
(chain) => chunkLSEMXRB5_cjs.linePathData(
|
|
6242
6288
|
chain.map(([x, y]) => ({ x: plot.x + x, y: plot.y + y })),
|
|
6243
6289
|
ISOLINE_TENSION
|
|
6244
6290
|
)
|
|
@@ -6262,7 +6308,7 @@ function createIsoline(context, grid, threshold, thresholdIndex) {
|
|
|
6262
6308
|
function renderVectorField(context, seriesList) {
|
|
6263
6309
|
const nodes = [];
|
|
6264
6310
|
seriesList.forEach((series, seriesIndex) => {
|
|
6265
|
-
const color = series.color ??
|
|
6311
|
+
const color = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
6266
6312
|
series.values.forEach((vector, vectorIndex) => {
|
|
6267
6313
|
nodes.push(createVectorNode(context, series.id, vector, vectorIndex, color));
|
|
6268
6314
|
});
|
|
@@ -6272,10 +6318,10 @@ function renderVectorField(context, seriesList) {
|
|
|
6272
6318
|
function createVectorNode(context, seriesId, vector, vectorIndex, color) {
|
|
6273
6319
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
6274
6320
|
const [x, y, angle, magnitude] = vector;
|
|
6275
|
-
const startX = plot.x +
|
|
6276
|
-
const startY = plot.y + plot.height -
|
|
6277
|
-
const endX = plot.x +
|
|
6278
|
-
const endY = plot.y + plot.height -
|
|
6321
|
+
const startX = plot.x + chunkLSEMXRB5_cjs.mapChartValue(x, chart.axisX, plot.width);
|
|
6322
|
+
const startY = plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(y, chart.axisY, plot.height);
|
|
6323
|
+
const endX = plot.x + chunkLSEMXRB5_cjs.mapChartValue(x + Math.cos(angle) * magnitude, chart.axisX, plot.width);
|
|
6324
|
+
const endY = plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(y + Math.sin(angle) * magnitude, chart.axisY, plot.height);
|
|
6279
6325
|
return {
|
|
6280
6326
|
type: "path",
|
|
6281
6327
|
id: `chart-field-vector-${chart.id}-${seriesId}-${vectorIndex}`,
|
|
@@ -6285,7 +6331,7 @@ function createVectorNode(context, seriesId, vector, vectorIndex, color) {
|
|
|
6285
6331
|
markerEnd: "filled_arrow",
|
|
6286
6332
|
style: {
|
|
6287
6333
|
fill: { kind: "none" },
|
|
6288
|
-
stroke:
|
|
6334
|
+
stroke: chunkLSEMXRB5_cjs.paint(color, diagnostics, chart.id),
|
|
6289
6335
|
strokeWidth: 2
|
|
6290
6336
|
}
|
|
6291
6337
|
};
|
|
@@ -6332,7 +6378,7 @@ function createHeatmapCell(layout, series, rowIndex, columnIndex) {
|
|
|
6332
6378
|
};
|
|
6333
6379
|
}
|
|
6334
6380
|
function colorForValue(value, layout) {
|
|
6335
|
-
return
|
|
6381
|
+
return chunkLSEMXRB5_cjs.zoneColorAtValue(value, layout.bands, layout.zones);
|
|
6336
6382
|
}
|
|
6337
6383
|
function renderHeatmapCell(context, layout, cell) {
|
|
6338
6384
|
const background = createCellBackground(context, layout, cell);
|
|
@@ -6347,7 +6393,7 @@ function createCellBackground(context, layout, cell) {
|
|
|
6347
6393
|
const style = {
|
|
6348
6394
|
fill: { kind: "solid", color: cell.color },
|
|
6349
6395
|
stroke: { kind: "solid", color: chart.config?.cellStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
|
|
6350
|
-
strokeWidth:
|
|
6396
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.config?.cellStrokeWidth, chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1))
|
|
6351
6397
|
};
|
|
6352
6398
|
if (chart.config?.cellShape === "circle") {
|
|
6353
6399
|
return {
|
|
@@ -6374,9 +6420,9 @@ function createCellBackground(context, layout, cell) {
|
|
|
6374
6420
|
}
|
|
6375
6421
|
function createCellValueLabel(context, layout, cell) {
|
|
6376
6422
|
const { chart, bounds, nextOrder } = context;
|
|
6377
|
-
const size = Math.max(6,
|
|
6423
|
+
const size = Math.max(6, chunkLSEMXRB5_cjs.finite(chart.config?.cellValueSize, layout.fontSize));
|
|
6378
6424
|
return {
|
|
6379
|
-
...
|
|
6425
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
6380
6426
|
id: `chart-heatmap-value-${chart.id}-${cell.seriesId}-${cell.columnIndex}`,
|
|
6381
6427
|
order: nextOrder(),
|
|
6382
6428
|
bounds,
|
|
@@ -6391,7 +6437,7 @@ function createCellValueLabel(context, layout, cell) {
|
|
|
6391
6437
|
align: "center"
|
|
6392
6438
|
}),
|
|
6393
6439
|
...chart.config?.cellValueSize === void 0 ? {} : { fontSize: size },
|
|
6394
|
-
color: chart.config?.cellValueColor ??
|
|
6440
|
+
color: chart.config?.cellValueColor ?? chunkLSEMXRB5_cjs.contrastTextColor(cell.color)
|
|
6395
6441
|
};
|
|
6396
6442
|
}
|
|
6397
6443
|
|
|
@@ -6404,9 +6450,9 @@ function createHeatmapLayout(context) {
|
|
|
6404
6450
|
return {
|
|
6405
6451
|
rows: chart.series,
|
|
6406
6452
|
columns,
|
|
6407
|
-
bands:
|
|
6408
|
-
zones: chart.config?.zones?.length ? chart.config.zones :
|
|
6409
|
-
fontSize: Math.max(9,
|
|
6453
|
+
bands: chunkLSEMXRB5_cjs.axisBands(chart.axisY),
|
|
6454
|
+
zones: chart.config?.zones?.length ? chart.config.zones : chunkLSEMXRB5_cjs.DEFAULT_HEATMAP_ZONES,
|
|
6455
|
+
fontSize: Math.max(9, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12)),
|
|
6410
6456
|
headerFontSize: headerFontSize(chart),
|
|
6411
6457
|
legendGap: legendGap(chart),
|
|
6412
6458
|
sides,
|
|
@@ -6414,10 +6460,10 @@ function createHeatmapLayout(context) {
|
|
|
6414
6460
|
grid: createHeatmapGrid(context, reservedSpace, sides, columns.length)
|
|
6415
6461
|
};
|
|
6416
6462
|
}
|
|
6417
|
-
var headerFontSize = (chart) => Math.max(9,
|
|
6418
|
-
var rowGap = (chart) => Math.min(120, Math.max(0,
|
|
6419
|
-
var columnGap = (chart) => Math.min(120, Math.max(0,
|
|
6420
|
-
var legendGap = (chart) => Math.min(80, Math.max(0,
|
|
6463
|
+
var headerFontSize = (chart) => Math.max(9, chunkLSEMXRB5_cjs.finite(chart.axisFontSize ?? chart.fontSize, 12));
|
|
6464
|
+
var rowGap = (chart) => Math.min(120, Math.max(0, chunkLSEMXRB5_cjs.finite(chart.yLabelGap, 6)));
|
|
6465
|
+
var columnGap = (chart) => Math.min(120, Math.max(0, chunkLSEMXRB5_cjs.finite(chart.xLabelGap, 4)));
|
|
6466
|
+
var legendGap = (chart) => Math.min(80, Math.max(0, chunkLSEMXRB5_cjs.finite(chart.legendGap, 6)));
|
|
6421
6467
|
function heatmapSides(context) {
|
|
6422
6468
|
const { chart } = context;
|
|
6423
6469
|
return {
|
|
@@ -6436,7 +6482,7 @@ function heatmapReservedSpace(context, sides) {
|
|
|
6436
6482
|
const { chart } = context;
|
|
6437
6483
|
const fontSize = headerFontSize(chart);
|
|
6438
6484
|
const longestLabel = chart.series.reduce(
|
|
6439
|
-
(max, series) => Math.max(max,
|
|
6485
|
+
(max, series) => Math.max(max, chunkLSEMXRB5_cjs.estimateTextWidth(series.label ?? "", fontSize, false)),
|
|
6440
6486
|
0
|
|
6441
6487
|
);
|
|
6442
6488
|
const vertical = sides.legend === "left" || sides.legend === "right";
|
|
@@ -6452,8 +6498,8 @@ function heatmapReservedSpace(context, sides) {
|
|
|
6452
6498
|
}
|
|
6453
6499
|
function columnHeaderRoom(context) {
|
|
6454
6500
|
const { chart } = context;
|
|
6455
|
-
const tilt =
|
|
6456
|
-
return tilt > 0 ? Math.min(context.plot.height * 0.4,
|
|
6501
|
+
const tilt = chunkLSEMXRB5_cjs.labelTilt(chart);
|
|
6502
|
+
return tilt > 0 ? Math.min(context.plot.height * 0.4, chunkLSEMXRB5_cjs.tiltedLabelRoom(chart, heatmapColumns(context), tilt) + columnGap(chart) + 4) : headerFontSize(chart) + 2 + columnGap(chart) + 6;
|
|
6457
6503
|
}
|
|
6458
6504
|
function createHeatmapGrid(context, reservedSpace, sides, columnCount) {
|
|
6459
6505
|
const { chart } = context;
|
|
@@ -6464,7 +6510,7 @@ function createHeatmapGrid(context, reservedSpace, sides, columnCount) {
|
|
|
6464
6510
|
const width = Math.max(1, context.plot.width - left - right);
|
|
6465
6511
|
const height = Math.max(1, context.plot.height - top - bottom);
|
|
6466
6512
|
const rowCount = chart.series.length;
|
|
6467
|
-
const cellGap = Math.max(0,
|
|
6513
|
+
const cellGap = Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.cellGap, 0));
|
|
6468
6514
|
let cellWidth = columnCount ? width / columnCount : width;
|
|
6469
6515
|
let cellHeight = rowCount ? height / rowCount : height;
|
|
6470
6516
|
let gridWidth = width;
|
|
@@ -6484,7 +6530,7 @@ function createHeatmapGrid(context, reservedSpace, sides, columnCount) {
|
|
|
6484
6530
|
cellWidth,
|
|
6485
6531
|
cellHeight,
|
|
6486
6532
|
cellGap,
|
|
6487
|
-
cellRadius: Math.max(0,
|
|
6533
|
+
cellRadius: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.barCornerRadius, cellGap))
|
|
6488
6534
|
};
|
|
6489
6535
|
}
|
|
6490
6536
|
|
|
@@ -6503,7 +6549,7 @@ function createRowHeader(context, layout, series, rowIndex) {
|
|
|
6503
6549
|
const room = layout.reservedSpace.rowHeaders;
|
|
6504
6550
|
const gap = rowGap(chart);
|
|
6505
6551
|
const x = layout.sides.rows === "left" ? layout.grid.x - room : layout.grid.x + layout.grid.width + gap;
|
|
6506
|
-
return
|
|
6552
|
+
return chunkLSEMXRB5_cjs.chartText({
|
|
6507
6553
|
id: `chart-heatmap-row-${chart.id}-${series.id}`,
|
|
6508
6554
|
order: nextOrder(),
|
|
6509
6555
|
bounds,
|
|
@@ -6529,12 +6575,12 @@ function createColumnHeader(context, layout, label, columnIndex) {
|
|
|
6529
6575
|
const { chart, bounds, nextOrder } = context;
|
|
6530
6576
|
const above = layout.sides.columns === "top";
|
|
6531
6577
|
const centerX = layout.grid.x + (columnIndex + 0.5) * layout.grid.cellWidth;
|
|
6532
|
-
const tilt =
|
|
6578
|
+
const tilt = chunkLSEMXRB5_cjs.labelTilt(chart);
|
|
6533
6579
|
const gap = columnGap(chart);
|
|
6534
6580
|
const id = `chart-heatmap-col-${chart.id}-${columnIndex}`;
|
|
6535
6581
|
if (tilt > 0) {
|
|
6536
|
-
const { frame, rotation } = above ?
|
|
6537
|
-
return
|
|
6582
|
+
const { frame, rotation } = above ? chunkLSEMXRB5_cjs.labelAboveFrame(chart, label, tilt, { x: centerX, y: layout.grid.y - gap }) : chunkLSEMXRB5_cjs.labelBelowFrame(chart, label, tilt, { x: centerX, y: layout.grid.y + layout.grid.height + gap });
|
|
6583
|
+
return chunkLSEMXRB5_cjs.chartText({
|
|
6538
6584
|
id,
|
|
6539
6585
|
order: nextOrder(),
|
|
6540
6586
|
bounds,
|
|
@@ -6546,7 +6592,7 @@ function createColumnHeader(context, layout, label, columnIndex) {
|
|
|
6546
6592
|
role: "axis"
|
|
6547
6593
|
});
|
|
6548
6594
|
}
|
|
6549
|
-
return
|
|
6595
|
+
return chunkLSEMXRB5_cjs.chartText({
|
|
6550
6596
|
id,
|
|
6551
6597
|
order: nextOrder(),
|
|
6552
6598
|
bounds,
|
|
@@ -6624,7 +6670,7 @@ function renderHeatmapLegend(context, layout) {
|
|
|
6624
6670
|
return [];
|
|
6625
6671
|
}
|
|
6626
6672
|
const place = barPlace(layout);
|
|
6627
|
-
const barBounds =
|
|
6673
|
+
const barBounds = chunkLSEMXRB5_cjs.boxBounds({ x: place.x, y: place.y, width: place.width, height: place.height });
|
|
6628
6674
|
return [createGradientBar(context, layout, place, barBounds), ...createBoundaryTicks(context, layout, place)];
|
|
6629
6675
|
}
|
|
6630
6676
|
function bandRatio(layout, value) {
|
|
@@ -6638,7 +6684,7 @@ function createGradientBar(context, layout, place, barBounds) {
|
|
|
6638
6684
|
const zones = layout.zones.slice(0, bandCount);
|
|
6639
6685
|
const stops = zones.map((zone, index) => ({
|
|
6640
6686
|
offset: bandRatio(layout, layout.bands[index + 1] ?? layout.bands[layout.bands.length - 1]) * 100,
|
|
6641
|
-
color: zone.color ??
|
|
6687
|
+
color: zone.color ?? chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL
|
|
6642
6688
|
}));
|
|
6643
6689
|
return {
|
|
6644
6690
|
type: "rect",
|
|
@@ -6653,7 +6699,7 @@ function createGradientBar(context, layout, place, barBounds) {
|
|
|
6653
6699
|
zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
|
|
6654
6700
|
style: {
|
|
6655
6701
|
// Across the grid it runs from the lowest value on the left; beside it from the lowest at the bottom.
|
|
6656
|
-
fill: stops.length ? { kind: "linear-gradient", angle: place.vertical ? 270 : 0, stops } : { kind: "solid", color:
|
|
6702
|
+
fill: stops.length ? { kind: "linear-gradient", angle: place.vertical ? 270 : 0, stops } : { kind: "solid", color: chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL },
|
|
6657
6703
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
6658
6704
|
strokeWidth: 1
|
|
6659
6705
|
}
|
|
@@ -6679,12 +6725,12 @@ function createBoundaryTicks(context, layout, place) {
|
|
|
6679
6725
|
strokeWidth: 1
|
|
6680
6726
|
}
|
|
6681
6727
|
};
|
|
6682
|
-
const label =
|
|
6728
|
+
const label = chunkLSEMXRB5_cjs.chartText({
|
|
6683
6729
|
id: `chart-heatmap-legend-tick-label-${chart.id}-${index}`,
|
|
6684
6730
|
order: nextOrder(),
|
|
6685
6731
|
bounds,
|
|
6686
6732
|
...labelAt(place, at, index === 0, index === lastIndex, labelHeight),
|
|
6687
|
-
text:
|
|
6733
|
+
text: chunkLSEMXRB5_cjs.formatFieldValue(value),
|
|
6688
6734
|
chart
|
|
6689
6735
|
});
|
|
6690
6736
|
return [tick, label];
|
|
@@ -7051,22 +7097,22 @@ function renderHexbin(context) {
|
|
|
7051
7097
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
7052
7098
|
const nodes = [];
|
|
7053
7099
|
const config = chart.config;
|
|
7054
|
-
const hexRadius = Math.max(1, config?.hexRadius ??
|
|
7100
|
+
const hexRadius = Math.max(1, config?.hexRadius ?? chunkLSEMXRB5_cjs.DEFAULT_HEX_RADIUS);
|
|
7055
7101
|
const drawRadius = Math.max(0.5, hexRadius - Math.max(0, config?.hexGap ?? 0) * GAP_TO_RADIUS);
|
|
7056
7102
|
const strokeWidth = config?.hexStrokeWidth ?? 0;
|
|
7057
7103
|
const minOpacity = Math.min(1, Math.max(0, config?.hexMinOpacity ?? DEFAULT_MIN_OPACITY));
|
|
7058
|
-
const shadow =
|
|
7104
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
7059
7105
|
const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
|
|
7060
7106
|
chart.series.forEach((series, seriesIndex) => {
|
|
7061
7107
|
const explicit = series.values.length > 0 && Array.isArray(series.values[0]);
|
|
7062
7108
|
const pairs = explicit ? series.values : series.values.map((y, i) => [chart.axisX.min + i * chart.axisX.step, y]);
|
|
7063
7109
|
const pixelPoints2 = pairs.map(([vx, vy]) => ({
|
|
7064
|
-
x:
|
|
7065
|
-
y: plot.height -
|
|
7110
|
+
x: chunkLSEMXRB5_cjs.mapChartValue(vx, chart.axisX, plot.width),
|
|
7111
|
+
y: plot.height - chunkLSEMXRB5_cjs.mapChartValue(vy, chart.axisY, plot.height)
|
|
7066
7112
|
}));
|
|
7067
7113
|
const bins = computeHexBins(pixelPoints2, hexRadius);
|
|
7068
7114
|
const maxCount = Math.max(1, ...bins.map((bin) => bin.count));
|
|
7069
|
-
const color = series.color ??
|
|
7115
|
+
const color = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
7070
7116
|
const ramp = config?.scale;
|
|
7071
7117
|
bins.forEach((bin, i) => {
|
|
7072
7118
|
const share = bin.count / maxCount;
|
|
@@ -7078,8 +7124,8 @@ function renderHexbin(context) {
|
|
|
7078
7124
|
bounds,
|
|
7079
7125
|
d: hexPath(plot.x + bin.cx, plot.y + bin.cy, drawRadius),
|
|
7080
7126
|
style: {
|
|
7081
|
-
fill:
|
|
7082
|
-
stroke: strokeWidth > 0 ?
|
|
7127
|
+
fill: chunkLSEMXRB5_cjs.paint(fill2, diagnostics, chart.id),
|
|
7128
|
+
stroke: strokeWidth > 0 ? chunkLSEMXRB5_cjs.paint(config?.hexStrokeColor ?? fill2, diagnostics, chart.id) : void 0,
|
|
7083
7129
|
strokeWidth: strokeWidth > 0 ? strokeWidth : void 0,
|
|
7084
7130
|
opacity: ramp ? void 0 : Math.max(minOpacity, share),
|
|
7085
7131
|
shadow,
|
|
@@ -7101,8 +7147,8 @@ function seriesValuePairs(chart, series) {
|
|
|
7101
7147
|
function pixelPoints(context, pairs) {
|
|
7102
7148
|
const { chart, plot } = context;
|
|
7103
7149
|
return pairs.map(([x, y]) => ({
|
|
7104
|
-
x: plot.x +
|
|
7105
|
-
y: plot.y + plot.height -
|
|
7150
|
+
x: plot.x + chunkLSEMXRB5_cjs.mapChartValue(x, chart.axisX, plot.width),
|
|
7151
|
+
y: plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(y, chart.axisY, plot.height)
|
|
7106
7152
|
}));
|
|
7107
7153
|
}
|
|
7108
7154
|
|
|
@@ -7112,7 +7158,7 @@ function createLineAreaFill(context, series, points, color, tension, areaOpacity
|
|
|
7112
7158
|
const baselineY = plot.y + plot.height;
|
|
7113
7159
|
const first = points[0];
|
|
7114
7160
|
const last = points[points.length - 1];
|
|
7115
|
-
const d = `${
|
|
7161
|
+
const d = `${chunkLSEMXRB5_cjs.linePathData(points, tension)} L ${last.x} ${baselineY} L ${first.x} ${baselineY} Z`;
|
|
7116
7162
|
const top = Math.min(...points.map((point) => point.y));
|
|
7117
7163
|
const centerX = (Math.min(...points.map((point) => point.x)) + Math.max(...points.map((point) => point.x))) / 2;
|
|
7118
7164
|
const halfHeight = (baselineY - top) / 2;
|
|
@@ -7134,8 +7180,8 @@ function createLineAreaFill(context, series, points, color, tension, areaOpacity
|
|
|
7134
7180
|
kind: "linear-gradient",
|
|
7135
7181
|
angle: 90,
|
|
7136
7182
|
stops: [
|
|
7137
|
-
{ offset: 0, color:
|
|
7138
|
-
{ offset: 100, color:
|
|
7183
|
+
{ offset: 0, color: chunkLSEMXRB5_cjs.colorWithAlpha(color, areaOpacity) },
|
|
7184
|
+
{ offset: 100, color: chunkLSEMXRB5_cjs.colorWithAlpha(color, 0) }
|
|
7139
7185
|
]
|
|
7140
7186
|
},
|
|
7141
7187
|
stroke: { kind: "none" },
|
|
@@ -7158,7 +7204,7 @@ function guideNode(context, mark) {
|
|
|
7158
7204
|
d: `M ${mark.point.x} ${mark.point.y} V ${plot.y + plot.height}`,
|
|
7159
7205
|
style: {
|
|
7160
7206
|
fill: { kind: "none" },
|
|
7161
|
-
stroke:
|
|
7207
|
+
stroke: chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id),
|
|
7162
7208
|
strokeWidth: 1,
|
|
7163
7209
|
dash: [3, 4],
|
|
7164
7210
|
opacity: 0.55,
|
|
@@ -7179,7 +7225,7 @@ function dotNode(context, mark) {
|
|
|
7179
7225
|
rx: mark.radius,
|
|
7180
7226
|
ry: mark.radius,
|
|
7181
7227
|
style: {
|
|
7182
|
-
fill:
|
|
7228
|
+
fill: chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id),
|
|
7183
7229
|
shadow: glow ? { color: mark.color, opacity: 0.9, blur: glow, dx: 0, dy: 0 } : void 0,
|
|
7184
7230
|
pointerEvents: "none"
|
|
7185
7231
|
}
|
|
@@ -7192,7 +7238,7 @@ function labelNode3(context, mark, value) {
|
|
|
7192
7238
|
const text = formatHighlight(config?.highlightLabelFormat, config?.categories?.[mark.index] ?? "", value);
|
|
7193
7239
|
const width = Math.max(48, text.length * fontSize * 0.62);
|
|
7194
7240
|
return {
|
|
7195
|
-
...
|
|
7241
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
7196
7242
|
id: `chart-highlight-label-${mark.key}`,
|
|
7197
7243
|
order: nextOrder(),
|
|
7198
7244
|
bounds,
|
|
@@ -7272,15 +7318,15 @@ function createLineError(context, mark) {
|
|
|
7272
7318
|
return null;
|
|
7273
7319
|
}
|
|
7274
7320
|
const { chart, plot, bounds, nextOrder } = context;
|
|
7275
|
-
const [lower, upper] =
|
|
7276
|
-
return
|
|
7321
|
+
const [lower, upper] = chunkLSEMXRB5_cjs.errorBarRange(mark.value, mark.error);
|
|
7322
|
+
return chunkLSEMXRB5_cjs.createVerticalErrorWhiskerNode({
|
|
7277
7323
|
id: `chart-line-error-${chart.id}-${mark.seriesId}-${mark.valueIndex}`,
|
|
7278
7324
|
order: nextOrder(),
|
|
7279
7325
|
bounds,
|
|
7280
7326
|
geometry: {
|
|
7281
7327
|
centerX: mark.position.x,
|
|
7282
|
-
startY: plot.y + plot.height -
|
|
7283
|
-
endY: plot.y + plot.height -
|
|
7328
|
+
startY: plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(lower, chart.axisY, plot.height),
|
|
7329
|
+
endY: plot.y + plot.height - chunkLSEMXRB5_cjs.mapChartValue(upper, chart.axisY, plot.height)
|
|
7284
7330
|
},
|
|
7285
7331
|
color: mark.color,
|
|
7286
7332
|
valueReference: { seriesId: mark.seriesId, valueIndex: mark.valueIndex }
|
|
@@ -7304,8 +7350,8 @@ function createLinePoint(context, mark) {
|
|
|
7304
7350
|
ry: visible ? radius : 6,
|
|
7305
7351
|
detail: { of: "chartValue", series: mark.seriesId, valueIndex: mark.valueIndex },
|
|
7306
7352
|
style: {
|
|
7307
|
-
fill: visible ?
|
|
7308
|
-
stroke: visible && strokeWidth > 0 ?
|
|
7353
|
+
fill: visible ? chunkLSEMXRB5_cjs.paint(fill2, diagnostics, chart.id) : { kind: "none" },
|
|
7354
|
+
stroke: visible && strokeWidth > 0 ? chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id) : void 0,
|
|
7309
7355
|
strokeWidth: visible && strokeWidth > 0 ? strokeWidth : void 0,
|
|
7310
7356
|
pointerEvents: visible ? void 0 : "all"
|
|
7311
7357
|
}
|
|
@@ -7325,22 +7371,22 @@ function createLinePath(context, series, points, color, tension) {
|
|
|
7325
7371
|
order: nextOrder(),
|
|
7326
7372
|
bounds: gradient ? { minX: plot.x, maxX: plot.x + plot.width, minY: plot.y, maxY: plot.y + plot.height } : bounds,
|
|
7327
7373
|
detail: { of: "chartSeries", series: series.id, lineTension: tension || void 0 },
|
|
7328
|
-
d:
|
|
7374
|
+
d: chunkLSEMXRB5_cjs.linePathData(points, tension),
|
|
7329
7375
|
style: {
|
|
7330
7376
|
fill: { kind: "none" },
|
|
7331
|
-
stroke:
|
|
7377
|
+
stroke: chunkLSEMXRB5_cjs.paint(gradient ?? color, diagnostics, chart.id),
|
|
7332
7378
|
strokeWidth: series.strokeWidth ?? config?.lineWidth ?? 2,
|
|
7333
7379
|
dash: series.dash,
|
|
7334
7380
|
lineCap: config?.lineWidth === void 0 ? void 0 : "round",
|
|
7335
7381
|
lineJoin: "round",
|
|
7336
|
-
shadow: glow ? { color, opacity: 0.9, blur: glow, dx: 0, dy: 0 } :
|
|
7382
|
+
shadow: glow ? { color, opacity: 0.9, blur: glow, dx: 0, dy: 0 } : chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle)
|
|
7337
7383
|
}
|
|
7338
7384
|
};
|
|
7339
7385
|
}
|
|
7340
7386
|
|
|
7341
7387
|
// src/renderScene/charts/renderers/line/series.ts
|
|
7342
7388
|
function seriesColor(series, seriesIndex) {
|
|
7343
|
-
return
|
|
7389
|
+
return chunkLSEMXRB5_cjs.representativeColor(series.color, chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length]);
|
|
7344
7390
|
}
|
|
7345
7391
|
function renderLineSeriesArea(context, series, seriesIndex) {
|
|
7346
7392
|
const areaOpacity = context.chart.config?.areaOpacity;
|
|
@@ -7404,7 +7450,7 @@ function renderGridLines(context, layout) {
|
|
|
7404
7450
|
style: {
|
|
7405
7451
|
fill: { kind: "none" },
|
|
7406
7452
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
7407
|
-
strokeWidth:
|
|
7453
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1)
|
|
7408
7454
|
}
|
|
7409
7455
|
};
|
|
7410
7456
|
});
|
|
@@ -7412,7 +7458,7 @@ function renderGridLines(context, layout) {
|
|
|
7412
7458
|
function renderPercentageLabels(context, layout) {
|
|
7413
7459
|
const { chart, plot, bounds, nextOrder } = context;
|
|
7414
7460
|
return PERCENT_TICKS.map((percent) => ({
|
|
7415
|
-
...
|
|
7461
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
7416
7462
|
id: `chart-mekko-pct-${chart.id}-${percent}`,
|
|
7417
7463
|
order: nextOrder(),
|
|
7418
7464
|
bounds,
|
|
@@ -7444,7 +7490,7 @@ function renderMekkoColumnLabels(context, layout, columnIndex, column) {
|
|
|
7444
7490
|
function createTotalLabel(context, layout, columnIndex, column) {
|
|
7445
7491
|
const { chart, plot, bounds, nextOrder } = context;
|
|
7446
7492
|
return {
|
|
7447
|
-
...
|
|
7493
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
7448
7494
|
id: `chart-mekko-total-${chart.id}-${columnIndex}`,
|
|
7449
7495
|
order: nextOrder(),
|
|
7450
7496
|
bounds,
|
|
@@ -7465,7 +7511,7 @@ function createColumnLabel(context, layout, columnIndex, column) {
|
|
|
7465
7511
|
const { chart, bounds, nextOrder } = context;
|
|
7466
7512
|
const { label, width } = column;
|
|
7467
7513
|
return {
|
|
7468
|
-
...
|
|
7514
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
7469
7515
|
id: `chart-mekko-col-label-${chart.id}-${columnIndex}`,
|
|
7470
7516
|
order: nextOrder(),
|
|
7471
7517
|
bounds,
|
|
@@ -7479,7 +7525,7 @@ function createColumnLabel(context, layout, columnIndex, column) {
|
|
|
7479
7525
|
chart,
|
|
7480
7526
|
align: "center"
|
|
7481
7527
|
}),
|
|
7482
|
-
lines:
|
|
7528
|
+
lines: chunkLSEMXRB5_cjs.wrapText(label, width, layout.smallFontSize),
|
|
7483
7529
|
fontSize: layout.smallFontSize
|
|
7484
7530
|
};
|
|
7485
7531
|
}
|
|
@@ -7489,8 +7535,8 @@ function createMekkoLayout(context) {
|
|
|
7489
7535
|
const labels = mekkoColumnLabels(context);
|
|
7490
7536
|
const labelGutterWidth = context.showLabels ? 30 : 0;
|
|
7491
7537
|
const grid = createMekkoGrid(context, labelGutterWidth);
|
|
7492
|
-
const fontSize = Math.max(9,
|
|
7493
|
-
const columnGap2 = Math.max(0,
|
|
7538
|
+
const fontSize = Math.max(9, chunkLSEMXRB5_cjs.finite(context.chart.fontSize, 12));
|
|
7539
|
+
const columnGap2 = Math.max(0, chunkLSEMXRB5_cjs.finite(context.chart.config?.mekkoColumnGap, 4));
|
|
7494
7540
|
const smallFontSize = Math.max(8, fontSize - 1);
|
|
7495
7541
|
return {
|
|
7496
7542
|
columns: createMekkoColumns(context, grid, labels, columnGap2),
|
|
@@ -7498,8 +7544,8 @@ function createMekkoLayout(context) {
|
|
|
7498
7544
|
smallFontSize,
|
|
7499
7545
|
labelGutterWidth,
|
|
7500
7546
|
columnGap: columnGap2,
|
|
7501
|
-
labelSize: Math.max(6,
|
|
7502
|
-
valueSize: Math.max(6,
|
|
7547
|
+
labelSize: Math.max(6, chunkLSEMXRB5_cjs.finite(context.chart.config?.mekkoLabelSize, smallFontSize)),
|
|
7548
|
+
valueSize: Math.max(6, chunkLSEMXRB5_cjs.finite(context.chart.config?.mekkoValueSize, smallFontSize)),
|
|
7503
7549
|
grid
|
|
7504
7550
|
};
|
|
7505
7551
|
}
|
|
@@ -7556,12 +7602,12 @@ function createColumnBackdrop(context, layout, columnIndex) {
|
|
|
7556
7602
|
id: `chart-mekko-column-backdrop-${chart.id}-${columnIndex}`,
|
|
7557
7603
|
order: nextOrder(),
|
|
7558
7604
|
bounds,
|
|
7559
|
-
d:
|
|
7560
|
-
style: { fill:
|
|
7605
|
+
d: chunkLSEMXRB5_cjs.barShapePath(column.x, layout.grid.y, column.width, layout.grid.height, cornerRadius),
|
|
7606
|
+
style: { fill: chunkLSEMXRB5_cjs.paint(chart.gridColor ?? "#e2e8f0", diagnostics, chart.id), opacity: BACKDROP_OPACITY }
|
|
7561
7607
|
};
|
|
7562
7608
|
}
|
|
7563
7609
|
function mekkoCornerRadius(context) {
|
|
7564
|
-
return Math.max(0,
|
|
7610
|
+
return Math.max(0, chunkLSEMXRB5_cjs.finite(context.chart.config?.barCornerRadius, 2));
|
|
7565
7611
|
}
|
|
7566
7612
|
function calculateColumnSegments(seriesList, layout, columnIndex) {
|
|
7567
7613
|
const segments = [];
|
|
@@ -7572,7 +7618,7 @@ function calculateColumnSegments(seriesList, layout, columnIndex) {
|
|
|
7572
7618
|
const height = (column.total > 0 ? value / column.total : 0) * column.height;
|
|
7573
7619
|
const y = column.y + cumulativeHeight;
|
|
7574
7620
|
cumulativeHeight += height;
|
|
7575
|
-
const color = series.color ??
|
|
7621
|
+
const color = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
7576
7622
|
segments.push({
|
|
7577
7623
|
columnIndex,
|
|
7578
7624
|
seriesId: series.id,
|
|
@@ -7595,12 +7641,12 @@ function renderSegment(context, layout, segment, nextColor) {
|
|
|
7595
7641
|
}
|
|
7596
7642
|
function createSegmentNode(context, segment, nextColor) {
|
|
7597
7643
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
7598
|
-
const shadow =
|
|
7644
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
7599
7645
|
const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
|
|
7600
7646
|
const config = chart.config;
|
|
7601
7647
|
const radius = segment.isTop || config?.mekkoRoundAll ? mekkoCornerRadius(context) : 0;
|
|
7602
7648
|
const { x, y, width, height } = segment.frame;
|
|
7603
|
-
const segmentGap = Math.max(0,
|
|
7649
|
+
const segmentGap = Math.max(0, chunkLSEMXRB5_cjs.finite(config?.mekkoSegmentGap, 0));
|
|
7604
7650
|
const fallback = "#94a3b8";
|
|
7605
7651
|
const gradientBounds = {
|
|
7606
7652
|
minX: x + width / 2 - height / 2,
|
|
@@ -7612,20 +7658,20 @@ function createSegmentNode(context, segment, nextColor) {
|
|
|
7612
7658
|
kind: "linear-gradient",
|
|
7613
7659
|
angle: 90,
|
|
7614
7660
|
stops: [
|
|
7615
|
-
{ offset: 0, color:
|
|
7616
|
-
{ offset: 100, color:
|
|
7661
|
+
{ offset: 0, color: chunkLSEMXRB5_cjs.representativeColor(segment.color, fallback) },
|
|
7662
|
+
{ offset: 100, color: chunkLSEMXRB5_cjs.representativeColor(nextColor, fallback) }
|
|
7617
7663
|
]
|
|
7618
|
-
} :
|
|
7664
|
+
} : chunkLSEMXRB5_cjs.paint(segment.color, diagnostics, chart.id);
|
|
7619
7665
|
return {
|
|
7620
7666
|
type: "path",
|
|
7621
7667
|
id: `chart-mekko-seg-${chart.id}-${segment.columnIndex}-${segment.seriesId}`,
|
|
7622
7668
|
order: nextOrder(),
|
|
7623
7669
|
bounds: nextColor ? gradientBounds : bounds,
|
|
7624
|
-
d:
|
|
7670
|
+
d: chunkLSEMXRB5_cjs.barPath(x, y + segmentGap / 2, width, Math.max(0, height - segmentGap), radius, Boolean(config?.mekkoRoundAll)),
|
|
7625
7671
|
style: {
|
|
7626
7672
|
fill: fill2,
|
|
7627
7673
|
stroke: { kind: "solid", color: config?.mekkoSegmentStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
|
|
7628
|
-
strokeWidth:
|
|
7674
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(config?.mekkoSegmentStrokeWidth, chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1)),
|
|
7629
7675
|
shadow,
|
|
7630
7676
|
clip: clipPath ? { type: "path", d: clipPath } : void 0
|
|
7631
7677
|
}
|
|
@@ -7641,17 +7687,17 @@ function createSegmentLabel(context, layout, segment) {
|
|
|
7641
7687
|
const innerHeight = Math.max(1, height - 6);
|
|
7642
7688
|
const lineHeight = layout.labelSize * 1.2;
|
|
7643
7689
|
const valueHeight = layout.valueSize * 1.2;
|
|
7644
|
-
const labelLines =
|
|
7645
|
-
(line) =>
|
|
7690
|
+
const labelLines = chunkLSEMXRB5_cjs.wrapText(segment.seriesLabel, innerWidth, layout.labelSize).map(
|
|
7691
|
+
(line) => chunkLSEMXRB5_cjs.ellipsizeToWidth(line, innerWidth, layout.labelSize, true)
|
|
7646
7692
|
);
|
|
7647
7693
|
if (labelLines.length * lineHeight + valueHeight > innerHeight) {
|
|
7648
7694
|
return [];
|
|
7649
7695
|
}
|
|
7650
|
-
const textColor = chart.config?.mekkoTextColor ??
|
|
7696
|
+
const textColor = chart.config?.mekkoTextColor ?? chunkLSEMXRB5_cjs.contrastTextColor(chunkLSEMXRB5_cjs.representativeColor(segment.color, "#ffffff"));
|
|
7651
7697
|
const columnTotal = layout.columns[segment.columnIndex]?.total ?? 0;
|
|
7652
7698
|
const valueText = chart.config?.mekkoValueFormat === "percent" ? `${columnTotal > 0 ? Math.round(segment.value / columnTotal * 100) : 0}%` : String(segment.value);
|
|
7653
7699
|
const label = {
|
|
7654
|
-
...
|
|
7700
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
7655
7701
|
id: `chart-mekko-seg-label-${chart.id}-${segment.columnIndex}-${segment.seriesId}`,
|
|
7656
7702
|
order: nextOrder(),
|
|
7657
7703
|
bounds,
|
|
@@ -7665,7 +7711,7 @@ function createSegmentLabel(context, layout, segment) {
|
|
|
7665
7711
|
color: textColor
|
|
7666
7712
|
};
|
|
7667
7713
|
const valueNode = {
|
|
7668
|
-
...
|
|
7714
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
7669
7715
|
id: `chart-mekko-seg-value-${chart.id}-${segment.columnIndex}-${segment.seriesId}`,
|
|
7670
7716
|
order: nextOrder(),
|
|
7671
7717
|
bounds,
|
|
@@ -7698,7 +7744,7 @@ function renderMekko(context) {
|
|
|
7698
7744
|
|
|
7699
7745
|
// src/renderScene/charts/renderers/pie/center.ts
|
|
7700
7746
|
function fill(template, chart) {
|
|
7701
|
-
const values = chart.series.map((series) => Math.max(0,
|
|
7747
|
+
const values = chart.series.map((series) => Math.max(0, chunkLSEMXRB5_cjs.finite(series.values[0], 0)));
|
|
7702
7748
|
const total = values.reduce((sum, value) => sum + value, 0);
|
|
7703
7749
|
const first = values[0] ?? 0;
|
|
7704
7750
|
return template.replace(/\{total\}/g, String(Math.round(total * 100) / 100)).replace(/\{percent\}/g, String(total > 0 ? Math.round(first / total * 100) : 0)).replace(/\{label\}/g, chart.series[0]?.label ?? "");
|
|
@@ -7710,7 +7756,7 @@ function renderPieCenter(context, geometry) {
|
|
|
7710
7756
|
return [];
|
|
7711
7757
|
}
|
|
7712
7758
|
const lines = fill(template, chart).split(/\\n|\n/);
|
|
7713
|
-
const fontSize =
|
|
7759
|
+
const fontSize = chunkLSEMXRB5_cjs.finite(chart.config?.pieCenterSize, Math.max(14, Math.min(40, geometry.outerRadius * 0.3)));
|
|
7714
7760
|
const lineHeight = fontSize * 1.2;
|
|
7715
7761
|
const width = Math.max(40, (geometry.innerRadius > 0 ? geometry.innerRadius : geometry.outerRadius * 0.6) * 2);
|
|
7716
7762
|
const text = {
|
|
@@ -7723,7 +7769,7 @@ function renderPieCenter(context, geometry) {
|
|
|
7723
7769
|
width,
|
|
7724
7770
|
height: lineHeight * lines.length,
|
|
7725
7771
|
lines,
|
|
7726
|
-
fontFamily: chart.fontFamily ??
|
|
7772
|
+
fontFamily: chart.fontFamily ?? chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
7727
7773
|
fontSize,
|
|
7728
7774
|
fontWeight: "bold",
|
|
7729
7775
|
align: "center",
|
|
@@ -7743,14 +7789,14 @@ var radians = (degrees) => degrees * Math.PI / 180;
|
|
|
7743
7789
|
function renderPieSlices(context, geometry) {
|
|
7744
7790
|
const config = context.chart.config;
|
|
7745
7791
|
const marks = createPieSliceMarks(context.chart.series, geometry.total, {
|
|
7746
|
-
start: TOP + radians(
|
|
7747
|
-
sweep: Math.min(FULL, Math.max(radians(1), radians(
|
|
7748
|
-
explode: Math.max(0,
|
|
7792
|
+
start: TOP + radians(chunkLSEMXRB5_cjs.finite(config?.pieStartAngle, 0)),
|
|
7793
|
+
sweep: Math.min(FULL, Math.max(radians(1), radians(chunkLSEMXRB5_cjs.finite(config?.pieSweep, 360)))),
|
|
7794
|
+
explode: Math.max(0, chunkLSEMXRB5_cjs.finite(config?.pieExplode, 0))
|
|
7749
7795
|
});
|
|
7750
7796
|
const gapPx = config?.pieSliceGap ?? 0;
|
|
7751
7797
|
return [
|
|
7752
7798
|
...marks.flatMap((mark) => createSliceNodes(context, shiftGeometry(geometry, mark), mark, gapPx)),
|
|
7753
|
-
...
|
|
7799
|
+
...chunkLSEMXRB5_cjs.renderPieLabels(
|
|
7754
7800
|
context,
|
|
7755
7801
|
geometry,
|
|
7756
7802
|
marks.map((mark) => ({
|
|
@@ -7782,20 +7828,20 @@ function createPieSliceMarks(seriesList, total, layout) {
|
|
|
7782
7828
|
const marks = [];
|
|
7783
7829
|
let angle = layout.start;
|
|
7784
7830
|
seriesList.forEach((series, seriesIndex) => {
|
|
7785
|
-
const value = Math.max(0,
|
|
7831
|
+
const value = Math.max(0, chunkLSEMXRB5_cjs.finite(series.values[0], 0));
|
|
7786
7832
|
const sweep = value / total * layout.sweep;
|
|
7787
7833
|
marks.push({
|
|
7788
7834
|
seriesId: series.id,
|
|
7789
7835
|
label: series.label,
|
|
7790
|
-
color: series.color ??
|
|
7836
|
+
color: series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length],
|
|
7791
7837
|
stroke: series.stroke,
|
|
7792
7838
|
strokeWidth: series.strokeWidth,
|
|
7793
7839
|
value,
|
|
7794
7840
|
share: value / total,
|
|
7795
7841
|
angles: { start: angle, end: angle + Math.min(sweep, layout.sweep >= FULL ? MAXIMUM_SWEEP : layout.sweep) },
|
|
7796
|
-
explode: Math.max(0,
|
|
7797
|
-
labelOffsetX:
|
|
7798
|
-
labelOffsetY:
|
|
7842
|
+
explode: Math.max(0, chunkLSEMXRB5_cjs.finite(series.offset, layout.explode)),
|
|
7843
|
+
labelOffsetX: chunkLSEMXRB5_cjs.finite(series.labelOffsetX, 0),
|
|
7844
|
+
labelOffsetY: chunkLSEMXRB5_cjs.finite(series.labelOffsetY, 0)
|
|
7799
7845
|
});
|
|
7800
7846
|
angle += sweep;
|
|
7801
7847
|
});
|
|
@@ -7818,14 +7864,14 @@ function pieOuterShadow(shadow, gapPx) {
|
|
|
7818
7864
|
function sliceCornerRadius(geometry, mark, gapPx) {
|
|
7819
7865
|
const halfGap = Math.max(0, gapPx) / 2;
|
|
7820
7866
|
const rawSweep = mark.angles.end - mark.angles.start;
|
|
7821
|
-
const usesInnerArc =
|
|
7822
|
-
const gapSweep = 2 *
|
|
7867
|
+
const usesInnerArc = chunkLSEMXRB5_cjs.pieUsesInnerArc(geometry, mark.angles, gapPx);
|
|
7868
|
+
const gapSweep = 2 * chunkLSEMXRB5_cjs.gapInsetAngle(halfGap, geometry.outerRadius);
|
|
7823
7869
|
const availableSweep = Math.max(0, rawSweep - gapSweep);
|
|
7824
7870
|
return Math.min(
|
|
7825
7871
|
geometry.cornerRadius,
|
|
7826
|
-
usesInnerArc ?
|
|
7872
|
+
usesInnerArc ? chunkLSEMXRB5_cjs.maxPieCornerRadius(geometry.outerRadius, geometry.innerRadius, availableSweep) : chunkLSEMXRB5_cjs.maxApexCornerRadius(
|
|
7827
7873
|
geometry.outerRadius,
|
|
7828
|
-
|
|
7874
|
+
chunkLSEMXRB5_cjs.pieApexRadius(halfGap, rawSweep, geometry.outerRadius),
|
|
7829
7875
|
availableSweep
|
|
7830
7876
|
)
|
|
7831
7877
|
);
|
|
@@ -7838,14 +7884,14 @@ function sliceStroke(context, mark) {
|
|
|
7838
7884
|
}
|
|
7839
7885
|
return {
|
|
7840
7886
|
stroke: { kind: "solid", color: strokeColor },
|
|
7841
|
-
strokeWidth:
|
|
7887
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(mark.strokeWidth, chunkLSEMXRB5_cjs.finite(config?.pieStrokeWidth, 1))
|
|
7842
7888
|
};
|
|
7843
7889
|
}
|
|
7844
7890
|
function createSliceNodes(context, geometry, mark, gapPx) {
|
|
7845
7891
|
const { chart, bounds, diagnostics, nextOrder } = context;
|
|
7846
|
-
const fill2 =
|
|
7847
|
-
const slicePath =
|
|
7848
|
-
const shadow =
|
|
7892
|
+
const fill2 = chunkLSEMXRB5_cjs.paint(mark.color, diagnostics, chart.id);
|
|
7893
|
+
const slicePath = chunkLSEMXRB5_cjs.createPieSlicePath(geometry, mark.angles, sliceCornerRadius(geometry, mark, gapPx), gapPx);
|
|
7894
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
7849
7895
|
const strokeStyle = sliceStroke(context, mark);
|
|
7850
7896
|
const glow = chart.config?.pieGlow;
|
|
7851
7897
|
const shadowCaster = shadow ? {
|
|
@@ -7876,12 +7922,12 @@ function createSliceNodes(context, geometry, mark, gapPx) {
|
|
|
7876
7922
|
pieEnd: mark.angles.end,
|
|
7877
7923
|
pieValue: mark.value
|
|
7878
7924
|
},
|
|
7879
|
-
prop:
|
|
7925
|
+
prop: chunkLSEMXRB5_cjs.seriesValueProp(mark.seriesId, 0),
|
|
7880
7926
|
style: {
|
|
7881
7927
|
fill: fill2,
|
|
7882
7928
|
...strokeStyle,
|
|
7883
7929
|
innerShadow: shadow,
|
|
7884
|
-
shadow: glow ? { color:
|
|
7930
|
+
shadow: glow ? { color: chunkLSEMXRB5_cjs.representativeColor(mark.color, "#ffffff"), opacity: 0.85, blur: glow, dx: 0, dy: 0 } : void 0
|
|
7885
7931
|
}
|
|
7886
7932
|
};
|
|
7887
7933
|
return shadowCaster ? [shadowCaster, slice] : [slice];
|
|
@@ -7889,7 +7935,7 @@ function createSliceNodes(context, geometry, mark, gapPx) {
|
|
|
7889
7935
|
|
|
7890
7936
|
// src/renderScene/charts/renderers/pie.ts
|
|
7891
7937
|
function renderPie(context) {
|
|
7892
|
-
const geometry =
|
|
7938
|
+
const geometry = chunkLSEMXRB5_cjs.createPieGeometry(context);
|
|
7893
7939
|
return [...renderPieSlices(context, geometry), ...renderPieCenter(context, geometry)];
|
|
7894
7940
|
}
|
|
7895
7941
|
|
|
@@ -7906,18 +7952,18 @@ var OUTSIDE_FALLBACK_COLOR = "#334155";
|
|
|
7906
7952
|
function layoutOf(context) {
|
|
7907
7953
|
const { chart, plot } = context;
|
|
7908
7954
|
const maxRadius = Math.max(1, Math.min(plot.width, plot.height) / 2 - 4);
|
|
7909
|
-
const axisMin =
|
|
7955
|
+
const axisMin = chunkLSEMXRB5_cjs.finite(chart.axisY.min, 0);
|
|
7910
7956
|
return {
|
|
7911
7957
|
centerX: plot.x + plot.width / 2,
|
|
7912
7958
|
centerY: plot.y + plot.height / 2,
|
|
7913
7959
|
maxRadius,
|
|
7914
|
-
innerRadius: Math.max(0, Math.min(
|
|
7915
|
-
cornerRadius: Math.max(0,
|
|
7916
|
-
gapPx: Math.max(0,
|
|
7960
|
+
innerRadius: Math.max(0, Math.min(chunkLSEMXRB5_cjs.finite(chart.config?.innerRadius, 0), maxRadius - 1)),
|
|
7961
|
+
cornerRadius: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.pieCornerRadius, 0)),
|
|
7962
|
+
gapPx: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.pieSliceGap, 0)),
|
|
7917
7963
|
axisMin,
|
|
7918
|
-
range:
|
|
7964
|
+
range: chunkLSEMXRB5_cjs.finite(chart.axisY.max, 100) - axisMin,
|
|
7919
7965
|
sweep: chart.series.length > 0 ? Math.PI * 2 / chart.series.length : 0,
|
|
7920
|
-
start: TOP2 +
|
|
7966
|
+
start: TOP2 + chunkLSEMXRB5_cjs.finite(chart.config?.pieStartAngle, 0) * Math.PI / 180
|
|
7921
7967
|
};
|
|
7922
7968
|
}
|
|
7923
7969
|
function clampedCorner(layout, outerRadius, angles) {
|
|
@@ -7925,19 +7971,19 @@ function clampedCorner(layout, outerRadius, angles) {
|
|
|
7925
7971
|
const geometry = { centerX, centerY, outerRadius, innerRadius };
|
|
7926
7972
|
const halfGap = Math.max(0, gapPx) / 2;
|
|
7927
7973
|
const rawSweep = angles.end - angles.start;
|
|
7928
|
-
const availableSweep = Math.max(0, rawSweep - 2 *
|
|
7929
|
-
if (
|
|
7930
|
-
return Math.min(cornerRadius,
|
|
7974
|
+
const availableSweep = Math.max(0, rawSweep - 2 * chunkLSEMXRB5_cjs.gapInsetAngle(halfGap, outerRadius));
|
|
7975
|
+
if (chunkLSEMXRB5_cjs.pieUsesInnerArc(geometry, angles, gapPx)) {
|
|
7976
|
+
return Math.min(cornerRadius, chunkLSEMXRB5_cjs.maxPieCornerRadius(outerRadius, innerRadius, availableSweep));
|
|
7931
7977
|
}
|
|
7932
|
-
const apexRadius =
|
|
7933
|
-
return Math.min(cornerRadius,
|
|
7978
|
+
const apexRadius = chunkLSEMXRB5_cjs.pieApexRadius(halfGap, rawSweep, outerRadius);
|
|
7979
|
+
return Math.min(cornerRadius, chunkLSEMXRB5_cjs.maxApexCornerRadius(outerRadius, apexRadius, availableSweep));
|
|
7934
7980
|
}
|
|
7935
7981
|
function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColor) {
|
|
7936
7982
|
const { chart, bounds, diagnostics, nextOrder } = context;
|
|
7937
7983
|
const { centerX, centerY, innerRadius, maxRadius, gapPx } = layout;
|
|
7938
|
-
const color =
|
|
7939
|
-
const shadow =
|
|
7940
|
-
const trackPath =
|
|
7984
|
+
const color = chunkLSEMXRB5_cjs.paint(rawColor, diagnostics, chart.id);
|
|
7985
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
7986
|
+
const trackPath = chunkLSEMXRB5_cjs.createPieSlicePath(
|
|
7941
7987
|
{ centerX, centerY, outerRadius: maxRadius, innerRadius },
|
|
7942
7988
|
angles,
|
|
7943
7989
|
clampedCorner(layout, maxRadius, angles),
|
|
@@ -7950,12 +7996,12 @@ function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColo
|
|
|
7950
7996
|
bounds,
|
|
7951
7997
|
d: trackPath,
|
|
7952
7998
|
style: {
|
|
7953
|
-
fill:
|
|
7999
|
+
fill: chunkLSEMXRB5_cjs.paint(chart.gridColor ?? TRACK_COLOR_FALLBACK, diagnostics, chart.id),
|
|
7954
8000
|
opacity: chart.config?.polarTrackOpacity,
|
|
7955
8001
|
...trackStroke(context)
|
|
7956
8002
|
}
|
|
7957
8003
|
};
|
|
7958
|
-
const wedgePath =
|
|
8004
|
+
const wedgePath = chunkLSEMXRB5_cjs.createPieSlicePath(
|
|
7959
8005
|
{ centerX, centerY, outerRadius, innerRadius },
|
|
7960
8006
|
angles,
|
|
7961
8007
|
clampedCorner(layout, outerRadius, angles),
|
|
@@ -7984,7 +8030,7 @@ function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColo
|
|
|
7984
8030
|
pieEnd: angles.end,
|
|
7985
8031
|
pieValue: value
|
|
7986
8032
|
},
|
|
7987
|
-
prop:
|
|
8033
|
+
prop: chunkLSEMXRB5_cjs.seriesValueProp(series.id, 0),
|
|
7988
8034
|
style: { fill: color, innerShadow: shadow, ...wedgeStroke(context) }
|
|
7989
8035
|
};
|
|
7990
8036
|
return shadowCaster ? [track, shadowCaster, wedge] : [track, wedge];
|
|
@@ -7997,7 +8043,7 @@ function trackStroke(context) {
|
|
|
7997
8043
|
const dash = (config.polarTrackDash ?? "").split(/[ ,]+/).map(Number).filter((part) => Number.isFinite(part) && part > 0);
|
|
7998
8044
|
return {
|
|
7999
8045
|
stroke: { kind: "solid", color: config.polarTrackStroke },
|
|
8000
|
-
strokeWidth:
|
|
8046
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(config.polarTrackStrokeWidth, 1),
|
|
8001
8047
|
dash: dash.length > 0 ? dash : void 0
|
|
8002
8048
|
};
|
|
8003
8049
|
}
|
|
@@ -8008,7 +8054,7 @@ function wedgeStroke(context) {
|
|
|
8008
8054
|
}
|
|
8009
8055
|
return {
|
|
8010
8056
|
stroke: { kind: "solid", color: config.pieStroke },
|
|
8011
|
-
strokeWidth:
|
|
8057
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(config.pieStrokeWidth, 1)
|
|
8012
8058
|
};
|
|
8013
8059
|
}
|
|
8014
8060
|
function ringNodes(context, layout) {
|
|
@@ -8016,7 +8062,7 @@ function ringNodes(context, layout) {
|
|
|
8016
8062
|
if (!chart.config?.polarRings || layout.range <= 0) {
|
|
8017
8063
|
return [];
|
|
8018
8064
|
}
|
|
8019
|
-
return
|
|
8065
|
+
return chunkLSEMXRB5_cjs.chartTicks(chart.axisY).filter((tick) => tick > layout.axisMin && tick < layout.axisMin + layout.range).map((tick) => {
|
|
8020
8066
|
const radius = layout.innerRadius + (layout.maxRadius - layout.innerRadius) * (tick - layout.axisMin) / layout.range;
|
|
8021
8067
|
return {
|
|
8022
8068
|
type: "ellipse",
|
|
@@ -8030,7 +8076,7 @@ function ringNodes(context, layout) {
|
|
|
8030
8076
|
style: {
|
|
8031
8077
|
fill: { kind: "none" },
|
|
8032
8078
|
stroke: { kind: "solid", color: chart.textColor ?? "#334155" },
|
|
8033
|
-
strokeWidth:
|
|
8079
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1),
|
|
8034
8080
|
opacity: 0.25
|
|
8035
8081
|
}
|
|
8036
8082
|
};
|
|
@@ -8042,10 +8088,10 @@ function renderPolarArea(context) {
|
|
|
8042
8088
|
const showLabels = context.showLabels && sweep >= MIN_LABEL_SWEEP;
|
|
8043
8089
|
const wedges = context.chart.series.flatMap((series, index) => {
|
|
8044
8090
|
const angles = { start: start + index * sweep, end: start + (index + 1) * sweep };
|
|
8045
|
-
const value = Math.max(0,
|
|
8091
|
+
const value = Math.max(0, chunkLSEMXRB5_cjs.finite(series.values[0], 0));
|
|
8046
8092
|
const fraction = range > 0 ? Math.min(1, Math.max(0, (value - axisMin) / range)) : 0;
|
|
8047
8093
|
const outerRadius = Math.max(innerRadius + 1, innerRadius + (maxRadius - innerRadius) * fraction);
|
|
8048
|
-
const rawColor = series.color ??
|
|
8094
|
+
const rawColor = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[index % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
8049
8095
|
const nodes = wedgeNodes(context, layout, series, angles, outerRadius, value, rawColor);
|
|
8050
8096
|
if (!showLabels) {
|
|
8051
8097
|
return nodes;
|
|
@@ -8056,10 +8102,10 @@ function renderPolarArea(context) {
|
|
|
8056
8102
|
return [...wedges, ...ringNodes(context, layout)];
|
|
8057
8103
|
}
|
|
8058
8104
|
function labelSizes(chart) {
|
|
8059
|
-
const base = Math.max(9,
|
|
8105
|
+
const base = Math.max(9, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12));
|
|
8060
8106
|
return {
|
|
8061
|
-
nameSize: Math.max(6,
|
|
8062
|
-
valueSize: Math.max(6,
|
|
8107
|
+
nameSize: Math.max(6, chunkLSEMXRB5_cjs.finite(chart.config?.polarNameSize, base)),
|
|
8108
|
+
valueSize: Math.max(6, chunkLSEMXRB5_cjs.finite(chart.config?.polarValueSize, base))
|
|
8063
8109
|
};
|
|
8064
8110
|
}
|
|
8065
8111
|
function labelPlacement2(context, geometry, angles, series, fillColor) {
|
|
@@ -8067,8 +8113,8 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
|
|
|
8067
8113
|
const { nameSize, valueSize } = labelSizes(context.chart);
|
|
8068
8114
|
const lineHeight = (nameSize + valueSize) * 1.2 / 2;
|
|
8069
8115
|
const ringThickness = geometry.outerRadius - geometry.innerRadius;
|
|
8070
|
-
const labelOffsetX =
|
|
8071
|
-
const labelOffsetY =
|
|
8116
|
+
const labelOffsetX = chunkLSEMXRB5_cjs.finite(series.labelOffsetX, 0);
|
|
8117
|
+
const labelOffsetY = chunkLSEMXRB5_cjs.finite(series.labelOffsetY, 0);
|
|
8072
8118
|
const hasManualOffset = labelOffsetX !== 0 || labelOffsetY !== 0;
|
|
8073
8119
|
const tooThin = ringThickness < lineHeight * 2 + 6;
|
|
8074
8120
|
const chordWidth = 2 * geometry.outerRadius * Math.sin(Math.abs(angles.end - angles.start) / 2);
|
|
@@ -8078,33 +8124,31 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
|
|
|
8078
8124
|
return void 0;
|
|
8079
8125
|
}
|
|
8080
8126
|
const outside = hasManualOffset || !fitsInline;
|
|
8081
|
-
const tickStart =
|
|
8082
|
-
const point = outside ? hasManualOffset ? addOffset(
|
|
8083
|
-
const color = outside ? outsideLabels && context.chart.textColor ? context.chart.textColor :
|
|
8084
|
-
|
|
8085
|
-
|
|
8127
|
+
const tickStart = chunkLSEMXRB5_cjs.pieArcPoint(geometry, mid, geometry.outerRadius + LEADER_INSET);
|
|
8128
|
+
const point = outside ? hasManualOffset ? addOffset(chunkLSEMXRB5_cjs.pieArcPoint(geometry, mid, geometry.outerRadius), labelOffsetX, labelOffsetY) : chunkLSEMXRB5_cjs.pieArcPoint(geometry, mid, geometry.outerRadius + OUTSIDE_GAP) : chunkLSEMXRB5_cjs.pieArcPoint(geometry, mid, geometry.innerRadius + ringThickness * LABEL_RADIUS_FRACTION);
|
|
8129
|
+
const color = outside ? outsideLabels && context.chart.textColor ? context.chart.textColor : chunkLSEMXRB5_cjs.sameHueTint(chunkLSEMXRB5_cjs.representativeColor(fillColor, OUTSIDE_FALLBACK_COLOR), OUTSIDE_TINT_LIGHTNESS) ?? OUTSIDE_FALLBACK_COLOR : chunkLSEMXRB5_cjs.sameHueContrastColor(
|
|
8130
|
+
chunkLSEMXRB5_cjs.representativeColor(fillColor, "#0f172a"),
|
|
8131
|
+
chunkLSEMXRB5_cjs.contrastTextColor(chunkLSEMXRB5_cjs.representativeColor(fillColor, "#0f172a"))
|
|
8086
8132
|
);
|
|
8087
8133
|
return { point, color, outside, mid, tickStart };
|
|
8088
8134
|
}
|
|
8089
|
-
function
|
|
8090
|
-
const
|
|
8091
|
-
|
|
8092
|
-
|
|
8093
|
-
}
|
|
8094
|
-
const { chart, bounds, nextOrder } = context;
|
|
8095
|
-
const { point, color, outside, mid, tickStart } = placement;
|
|
8096
|
-
const { nameSize, valueSize } = labelSizes(chart);
|
|
8097
|
-
const lineHeight = Math.max(nameSize, valueSize) * 1.2;
|
|
8098
|
-
const tickEnd = outside ? chunkC25NWWIH_cjs.clipSegmentToRect(tickStart, point, LABEL_WIDTH2 / 2, lineHeight) : tickStart;
|
|
8099
|
-
const tick = {
|
|
8135
|
+
function labelTick(context, series, placement, lineHeight) {
|
|
8136
|
+
const { point, color, outside, tickStart } = placement;
|
|
8137
|
+
const tickEnd = outside ? chunkLSEMXRB5_cjs.clipSegmentToRect(tickStart, point, LABEL_WIDTH2 / 2, lineHeight) : tickStart;
|
|
8138
|
+
return {
|
|
8100
8139
|
type: "path",
|
|
8101
|
-
id: `chart-polar-area-label-tick-${chart.id}-${series.id}`,
|
|
8102
|
-
order: nextOrder(),
|
|
8103
|
-
bounds,
|
|
8140
|
+
id: `chart-polar-area-label-tick-${context.chart.id}-${series.id}`,
|
|
8141
|
+
order: context.nextOrder(),
|
|
8142
|
+
bounds: context.bounds,
|
|
8104
8143
|
d: `M ${tickStart.x} ${tickStart.y} L ${tickEnd.x} ${tickEnd.y}`,
|
|
8105
8144
|
detail: { of: "chartSeries", series: series.id, mark: "polar-area-label-tick" },
|
|
8106
8145
|
style: outside ? { stroke: { kind: "solid", color }, strokeWidth: 1.5 } : { stroke: { kind: "none" } }
|
|
8107
8146
|
};
|
|
8147
|
+
}
|
|
8148
|
+
function labelTexts(context, geometry, series, value, placement) {
|
|
8149
|
+
const { chart, bounds, nextOrder } = context;
|
|
8150
|
+
const { point, color, outside, mid } = placement;
|
|
8151
|
+
const { nameSize, valueSize } = labelSizes(chart);
|
|
8108
8152
|
const detail = {
|
|
8109
8153
|
of: "chartSeries",
|
|
8110
8154
|
series: series.id,
|
|
@@ -8117,7 +8161,7 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
|
|
|
8117
8161
|
bounds,
|
|
8118
8162
|
x: point.x - LABEL_WIDTH2 / 2,
|
|
8119
8163
|
width: LABEL_WIDTH2,
|
|
8120
|
-
fontFamily: chart.fontFamily ??
|
|
8164
|
+
fontFamily: chart.fontFamily ?? chunkLSEMXRB5_cjs.DEFAULT_FONT,
|
|
8121
8165
|
align: "center",
|
|
8122
8166
|
verticalAlign: "middle",
|
|
8123
8167
|
lineHeight: 1.2,
|
|
@@ -8140,7 +8184,7 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
|
|
|
8140
8184
|
lines: [series.label],
|
|
8141
8185
|
fontWeight: valueFirst ? "normal" : "bold",
|
|
8142
8186
|
detail,
|
|
8143
|
-
prop:
|
|
8187
|
+
prop: chunkLSEMXRB5_cjs.seriesLabelProp(series.id)
|
|
8144
8188
|
};
|
|
8145
8189
|
const valueText = {
|
|
8146
8190
|
type: "text",
|
|
@@ -8150,13 +8194,22 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
|
|
|
8150
8194
|
y: valueY,
|
|
8151
8195
|
height: valueSize * 1.2,
|
|
8152
8196
|
fontSize: valueSize,
|
|
8153
|
-
lines: [
|
|
8197
|
+
lines: [chunkLSEMXRB5_cjs.formatFieldValue(value)],
|
|
8154
8198
|
fontWeight: valueFirst ? "bold" : "normal",
|
|
8155
8199
|
detail,
|
|
8156
|
-
prop:
|
|
8200
|
+
prop: chunkLSEMXRB5_cjs.seriesValueProp(series.id, 0),
|
|
8157
8201
|
propKind: "value"
|
|
8158
8202
|
};
|
|
8159
|
-
return [
|
|
8203
|
+
return [nameText, valueText];
|
|
8204
|
+
}
|
|
8205
|
+
function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
|
|
8206
|
+
const placement = labelPlacement2(context, geometry, angles, series, fillColor);
|
|
8207
|
+
if (!placement) {
|
|
8208
|
+
return [];
|
|
8209
|
+
}
|
|
8210
|
+
const { nameSize, valueSize } = labelSizes(context.chart);
|
|
8211
|
+
const tick = labelTick(context, series, placement, Math.max(nameSize, valueSize) * 1.2);
|
|
8212
|
+
return [tick, ...labelTexts(context, geometry, series, value, placement)];
|
|
8160
8213
|
}
|
|
8161
8214
|
function addOffset(point, dx, dy) {
|
|
8162
8215
|
return { x: point.x + dx, y: point.y + dy };
|
|
@@ -8171,10 +8224,10 @@ function radarFrameFor(context) {
|
|
|
8171
8224
|
return {
|
|
8172
8225
|
centerX: plot.x + plot.width / 2,
|
|
8173
8226
|
centerY: plot.y + plot.height / 2,
|
|
8174
|
-
radius:
|
|
8227
|
+
radius: chunkLSEMXRB5_cjs.radarRadius(plot.width, plot.height, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12), context.showLabels),
|
|
8175
8228
|
min: chart.axisY.min,
|
|
8176
8229
|
max: chart.axisY.max,
|
|
8177
|
-
count:
|
|
8230
|
+
count: chunkLSEMXRB5_cjs.radarCategoryCount(configuredCount, dataCount),
|
|
8178
8231
|
curved: chart.chartType === "radial",
|
|
8179
8232
|
tension: chart.config?.radarTension
|
|
8180
8233
|
};
|
|
@@ -8184,7 +8237,7 @@ function createRadarGeometry(context) {
|
|
|
8184
8237
|
const configuredCategories = chart.config?.categories?.filter(Boolean) ?? [];
|
|
8185
8238
|
const frame = radarFrameFor(context);
|
|
8186
8239
|
const categories = createCategories(configuredCategories, frame.count);
|
|
8187
|
-
const pointAt = (pointRadius, pointIndex) =>
|
|
8240
|
+
const pointAt = (pointRadius, pointIndex) => chunkLSEMXRB5_cjs.radarPointAt(frame, pointIndex, pointRadius);
|
|
8188
8241
|
return {
|
|
8189
8242
|
circular: frame.curved,
|
|
8190
8243
|
areaOpacity: Math.max(0, Math.min(1, chart.config?.areaOpacity ?? 0.16)),
|
|
@@ -8196,9 +8249,9 @@ function createRadarGeometry(context) {
|
|
|
8196
8249
|
centerX: frame.centerX,
|
|
8197
8250
|
centerY: frame.centerY,
|
|
8198
8251
|
radius: frame.radius,
|
|
8199
|
-
radiusForValue: (value) =>
|
|
8252
|
+
radiusForValue: (value) => chunkLSEMXRB5_cjs.radarRadiusForValue(frame, value),
|
|
8200
8253
|
pointAt,
|
|
8201
|
-
polygonPath: (pointRadius) =>
|
|
8254
|
+
polygonPath: (pointRadius) => chunkLSEMXRB5_cjs.radarSeriesPath(
|
|
8202
8255
|
categories.map((_, index) => pointAt(pointRadius, index)),
|
|
8203
8256
|
false
|
|
8204
8257
|
)
|
|
@@ -8219,7 +8272,7 @@ function renderRadarGrid(context, geometry) {
|
|
|
8219
8272
|
return [...renderRings(context, geometry), ...geometry.showSpokes ? renderSpokes(context, geometry) : []];
|
|
8220
8273
|
}
|
|
8221
8274
|
function renderRings(context, geometry) {
|
|
8222
|
-
return
|
|
8275
|
+
return chunkLSEMXRB5_cjs.chartTicks(context.chart.axisY).filter((tick) => tick > context.chart.axisY.min).map((tick) => createRingNode(context, geometry, tick));
|
|
8223
8276
|
}
|
|
8224
8277
|
function createRingNode(context, geometry, tick) {
|
|
8225
8278
|
const { chart, bounds, nextOrder } = context;
|
|
@@ -8227,7 +8280,7 @@ function createRingNode(context, geometry, tick) {
|
|
|
8227
8280
|
const style = {
|
|
8228
8281
|
fill: { kind: "none" },
|
|
8229
8282
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
8230
|
-
strokeWidth:
|
|
8283
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1)
|
|
8231
8284
|
};
|
|
8232
8285
|
if (geometry.circular) {
|
|
8233
8286
|
return {
|
|
@@ -8264,7 +8317,7 @@ function renderSpokes(context, geometry) {
|
|
|
8264
8317
|
style: {
|
|
8265
8318
|
fill: { kind: "none" },
|
|
8266
8319
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
8267
|
-
strokeWidth:
|
|
8320
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1)
|
|
8268
8321
|
}
|
|
8269
8322
|
};
|
|
8270
8323
|
});
|
|
@@ -8284,7 +8337,7 @@ function createCategoryLabel(context, geometry, category, categoryIndex) {
|
|
|
8284
8337
|
const labelPoint = geometry.pointAt(geometry.radius + 10, categoryIndex);
|
|
8285
8338
|
const horizontalOffset = labelPoint.x - geometry.centerX;
|
|
8286
8339
|
const width = Math.max(64, Math.min(120, plot.width / 3));
|
|
8287
|
-
return
|
|
8340
|
+
return chunkLSEMXRB5_cjs.chartText({
|
|
8288
8341
|
id: `chart-radar-label-${chart.id}-${categoryIndex}`,
|
|
8289
8342
|
order: nextOrder(),
|
|
8290
8343
|
bounds,
|
|
@@ -8322,9 +8375,9 @@ function renderRadarSeries(context, geometry) {
|
|
|
8322
8375
|
return nodes;
|
|
8323
8376
|
}
|
|
8324
8377
|
function renderSeries(context, geometry, series, seriesIndex) {
|
|
8325
|
-
const color = series.color ??
|
|
8378
|
+
const color = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
8326
8379
|
const points = seriesPoints(series, context, geometry);
|
|
8327
|
-
const path =
|
|
8380
|
+
const path = chunkLSEMXRB5_cjs.radarSeriesPath(points, geometry.circular, geometry.tension);
|
|
8328
8381
|
return [
|
|
8329
8382
|
createSeriesFill(context, geometry, series, path, color),
|
|
8330
8383
|
...geometry.strokeWidth > 0 ? [createSeriesStroke(context, geometry, series, path, color)] : [],
|
|
@@ -8347,7 +8400,7 @@ function createSeriesFill(context, geometry, series, path, color) {
|
|
|
8347
8400
|
d: path,
|
|
8348
8401
|
detail: { of: "chartSeries", series: series.id },
|
|
8349
8402
|
style: {
|
|
8350
|
-
fill:
|
|
8403
|
+
fill: chunkLSEMXRB5_cjs.paint(color, diagnostics, chart.id),
|
|
8351
8404
|
stroke: { kind: "none" },
|
|
8352
8405
|
opacity: Math.max(0, Math.min(1, series.opacity ?? geometry.areaOpacity))
|
|
8353
8406
|
}
|
|
@@ -8364,10 +8417,10 @@ function createSeriesStroke(context, geometry, series, path, color) {
|
|
|
8364
8417
|
detail: { of: "chartSeries", series: series.id },
|
|
8365
8418
|
style: {
|
|
8366
8419
|
fill: { kind: "none" },
|
|
8367
|
-
stroke:
|
|
8420
|
+
stroke: chunkLSEMXRB5_cjs.paint(color, diagnostics, chart.id),
|
|
8368
8421
|
strokeWidth: geometry.strokeWidth,
|
|
8369
8422
|
lineJoin: "round",
|
|
8370
|
-
shadow:
|
|
8423
|
+
shadow: chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle)
|
|
8371
8424
|
}
|
|
8372
8425
|
};
|
|
8373
8426
|
}
|
|
@@ -8383,8 +8436,8 @@ function createSeriesPoints(context, geometry, series, points, color) {
|
|
|
8383
8436
|
rx: geometry.pointSize,
|
|
8384
8437
|
ry: geometry.pointSize,
|
|
8385
8438
|
detail: { of: "chartValue", series: series.id, valueIndex: pointIndex, mark: "radar-vertex" },
|
|
8386
|
-
prop:
|
|
8387
|
-
style: { fill:
|
|
8439
|
+
prop: chunkLSEMXRB5_cjs.seriesValueProp(series.id, pointIndex),
|
|
8440
|
+
style: { fill: chunkLSEMXRB5_cjs.paint(color, diagnostics, chart.id) }
|
|
8388
8441
|
}));
|
|
8389
8442
|
}
|
|
8390
8443
|
|
|
@@ -8438,25 +8491,25 @@ function ringProgressPath(cx, cy, r, sweep, from) {
|
|
|
8438
8491
|
}
|
|
8439
8492
|
function layoutOf2(context) {
|
|
8440
8493
|
const { chart, plot } = context;
|
|
8441
|
-
const axisMin =
|
|
8494
|
+
const axisMin = chunkLSEMXRB5_cjs.finite(chart.axisY.min, 0);
|
|
8442
8495
|
return {
|
|
8443
8496
|
centerX: plot.x + plot.width / 2,
|
|
8444
8497
|
centerY: plot.y + plot.height / 2,
|
|
8445
8498
|
outerRadius: Math.max(1, Math.min(plot.width, plot.height) / 2 - 4),
|
|
8446
|
-
ringThickness: Math.max(1,
|
|
8447
|
-
ringGap: Math.max(0,
|
|
8499
|
+
ringThickness: Math.max(1, chunkLSEMXRB5_cjs.finite(chart.config?.ringThickness, DEFAULT_RING_THICKNESS)),
|
|
8500
|
+
ringGap: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.ringGap, DEFAULT_RING_GAP)),
|
|
8448
8501
|
axisMin,
|
|
8449
|
-
range:
|
|
8450
|
-
start: TOP3 +
|
|
8451
|
-
total: Math.min(360, Math.max(1,
|
|
8452
|
-
trackOpacity: Math.min(1, Math.max(0,
|
|
8502
|
+
range: chunkLSEMXRB5_cjs.finite(chart.axisY.max, 100) - axisMin,
|
|
8503
|
+
start: TOP3 + chunkLSEMXRB5_cjs.finite(chart.config?.ringStartAngle, 0) * Math.PI / 180,
|
|
8504
|
+
total: Math.min(360, Math.max(1, chunkLSEMXRB5_cjs.finite(chart.config?.ringSweep, 360))) * Math.PI / 180,
|
|
8505
|
+
trackOpacity: Math.min(1, Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.ringTrackOpacity, TRACK_OPACITY))),
|
|
8453
8506
|
cap: chart.config?.ringCap ?? "round"
|
|
8454
8507
|
};
|
|
8455
8508
|
}
|
|
8456
8509
|
function ringEndShadows(context, layout, series, radius, sweep, color) {
|
|
8457
8510
|
const { chart, bounds, nextOrder } = context;
|
|
8458
8511
|
const { centerX, centerY, ringThickness, start } = layout;
|
|
8459
|
-
const shadow =
|
|
8512
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
8460
8513
|
const isFullCircle = sweep >= Math.PI * 2 - FULL_SWEEP_EPSILON;
|
|
8461
8514
|
if (!shadow || isFullCircle) {
|
|
8462
8515
|
return [];
|
|
@@ -8494,8 +8547,8 @@ function ringNodes2(context, layout, series, index) {
|
|
|
8494
8547
|
if (radius <= ringThickness / 2) {
|
|
8495
8548
|
return [];
|
|
8496
8549
|
}
|
|
8497
|
-
const color =
|
|
8498
|
-
const value = Math.max(0,
|
|
8550
|
+
const color = chunkLSEMXRB5_cjs.paint(series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[index % chunkLSEMXRB5_cjs.CHART_COLORS.length], diagnostics, chart.id);
|
|
8551
|
+
const value = Math.max(0, chunkLSEMXRB5_cjs.finite(series.values[0], 0));
|
|
8499
8552
|
const fraction = range > 0 ? Math.min(1, Math.max(0, (value - axisMin) / range)) : 0;
|
|
8500
8553
|
const trackStyle = {
|
|
8501
8554
|
fill: { kind: "none" },
|
|
@@ -8533,7 +8586,7 @@ function ringNodes2(context, layout, series, index) {
|
|
|
8533
8586
|
bounds,
|
|
8534
8587
|
d: ringProgressPath(centerX, centerY, radius, sweep, start),
|
|
8535
8588
|
detail: { of: "chartValue", series: series.id, valueIndex: 0, mark: "radial-bar-ring" },
|
|
8536
|
-
prop:
|
|
8589
|
+
prop: chunkLSEMXRB5_cjs.seriesValueProp(series.id, 0),
|
|
8537
8590
|
style: { fill: { kind: "none" }, stroke: color, strokeWidth: ringThickness, lineCap: cap }
|
|
8538
8591
|
};
|
|
8539
8592
|
return [track, ...casters, progress];
|
|
@@ -8545,7 +8598,7 @@ function renderRadialBar(context) {
|
|
|
8545
8598
|
|
|
8546
8599
|
// src/renderScene/charts/renderers/sankey/links.ts
|
|
8547
8600
|
function renderSankeyLinks(context, data) {
|
|
8548
|
-
const shadow =
|
|
8601
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(context.chart.shadowStyle);
|
|
8549
8602
|
const gradient = Boolean(context.chart.config?.linkGradient);
|
|
8550
8603
|
const { plot } = context;
|
|
8551
8604
|
const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
|
|
@@ -8566,8 +8619,8 @@ function createSankeyLinkRibbon(context, data, link, linkIndex, gradient) {
|
|
|
8566
8619
|
bottom: data.baseY + link.targetY1
|
|
8567
8620
|
};
|
|
8568
8621
|
const config = context.chart.config;
|
|
8569
|
-
const fromColor = link.color || data.nodeColors.get(link.source) ||
|
|
8570
|
-
const toColor = data.nodeColors.get(link.target) ||
|
|
8622
|
+
const fromColor = link.color || data.nodeColors.get(link.source) || chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL;
|
|
8623
|
+
const toColor = data.nodeColors.get(link.target) || chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL;
|
|
8571
8624
|
const fill2 = gradient ? {
|
|
8572
8625
|
kind: "linear-gradient",
|
|
8573
8626
|
angle: 0,
|
|
@@ -8582,9 +8635,9 @@ function createSankeyLinkRibbon(context, data, link, linkIndex, gradient) {
|
|
|
8582
8635
|
toId: link.target,
|
|
8583
8636
|
source,
|
|
8584
8637
|
target,
|
|
8585
|
-
controlX: source.x + (target.x - source.x) * Math.min(1, Math.max(0,
|
|
8638
|
+
controlX: source.x + (target.x - source.x) * Math.min(1, Math.max(0, chunkLSEMXRB5_cjs.finite(config?.sankeyLinkCurve, 0.5))),
|
|
8586
8639
|
fill: fill2,
|
|
8587
|
-
opacity: Math.min(1, Math.max(0,
|
|
8640
|
+
opacity: Math.min(1, Math.max(0, chunkLSEMXRB5_cjs.finite(config?.sankeyLinkOpacity, link.color ? 0.85 : 0.45)))
|
|
8588
8641
|
};
|
|
8589
8642
|
}
|
|
8590
8643
|
function createSankeyRibbonNode(context, ribbon, shadow, clipPath, gradient) {
|
|
@@ -8625,7 +8678,7 @@ function sankeyRibbonPath(ribbon) {
|
|
|
8625
8678
|
var OUTSIDE_LABEL_LIGHTNESS_ON_LIGHT_BG = 0.3;
|
|
8626
8679
|
var OUTSIDE_LABEL_LIGHTNESS_ON_DARK_BG = 0.78;
|
|
8627
8680
|
function renderSankeyNodes(context, data) {
|
|
8628
|
-
const cornerRadius = Math.max(0,
|
|
8681
|
+
const cornerRadius = Math.max(0, chunkLSEMXRB5_cjs.finite(context.chart.config?.barCornerRadius, 0));
|
|
8629
8682
|
const nodes = [];
|
|
8630
8683
|
data.nodes.forEach((node) => {
|
|
8631
8684
|
nodes.push(createNodeRect(context, data, node, cornerRadius));
|
|
@@ -8641,8 +8694,8 @@ function createNodeRect(context, data, node, cornerRadius) {
|
|
|
8641
8694
|
const x = data.baseX + node.x;
|
|
8642
8695
|
const y = data.baseY + node.y;
|
|
8643
8696
|
const style = {
|
|
8644
|
-
fill: { kind: "solid", color: node.color ||
|
|
8645
|
-
shadow:
|
|
8697
|
+
fill: { kind: "solid", color: node.color || chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL },
|
|
8698
|
+
shadow: chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle)
|
|
8646
8699
|
};
|
|
8647
8700
|
const isFirstColumn = node.column === 0;
|
|
8648
8701
|
const isLastColumn = node.column === data.columnCount - 1;
|
|
@@ -8668,7 +8721,7 @@ function createNodeRect(context, data, node, cornerRadius) {
|
|
|
8668
8721
|
id: `chart-sankey-node-${chart.id}-${node.id}`,
|
|
8669
8722
|
order: nextOrder(),
|
|
8670
8723
|
bounds,
|
|
8671
|
-
d:
|
|
8724
|
+
d: chunkLSEMXRB5_cjs.leftRoundedRectPath(x, y, node.width, node.height, cornerRadius),
|
|
8672
8725
|
style,
|
|
8673
8726
|
detail
|
|
8674
8727
|
};
|
|
@@ -8679,7 +8732,7 @@ function createNodeRect(context, data, node, cornerRadius) {
|
|
|
8679
8732
|
id: `chart-sankey-node-${chart.id}-${node.id}`,
|
|
8680
8733
|
order: nextOrder(),
|
|
8681
8734
|
bounds,
|
|
8682
|
-
d:
|
|
8735
|
+
d: chunkLSEMXRB5_cjs.rightRoundedRectPath(x, y, node.width, node.height, cornerRadius),
|
|
8683
8736
|
style,
|
|
8684
8737
|
detail
|
|
8685
8738
|
};
|
|
@@ -8705,9 +8758,9 @@ function createNodeLabel(context, data, node) {
|
|
|
8705
8758
|
return void 0;
|
|
8706
8759
|
}
|
|
8707
8760
|
const fallback = chart.textColor ?? "#0f172a";
|
|
8708
|
-
const defaultColor = position === "inside" ?
|
|
8761
|
+
const defaultColor = position === "inside" ? chunkLSEMXRB5_cjs.contrastTextColor(node.color) : chunkLSEMXRB5_cjs.sameHueTint(
|
|
8709
8762
|
node.color,
|
|
8710
|
-
|
|
8763
|
+
chunkLSEMXRB5_cjs.isLightColor(fallback) ? OUTSIDE_LABEL_LIGHTNESS_ON_DARK_BG : OUTSIDE_LABEL_LIGHTNESS_ON_LIGHT_BG
|
|
8711
8764
|
) ?? fallback;
|
|
8712
8765
|
const color = chart.config?.labelColor ?? defaultColor;
|
|
8713
8766
|
return { ...label, color, detail: { of: "chartSeries", series: node.id, mark: "sankey-node-label" } };
|
|
@@ -8719,7 +8772,7 @@ function createOutsideLabel(context, data, node) {
|
|
|
8719
8772
|
const y = data.baseY + node.y;
|
|
8720
8773
|
const labelX2 = isLastColumn ? x - data.labelGutter + 8 : x + node.width + 6;
|
|
8721
8774
|
return {
|
|
8722
|
-
...
|
|
8775
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
8723
8776
|
id: `chart-sankey-label-${chart.id}-${node.id}`,
|
|
8724
8777
|
order: nextOrder(),
|
|
8725
8778
|
bounds,
|
|
@@ -8744,11 +8797,11 @@ function createInsideLabel(context, data, node, orientation) {
|
|
|
8744
8797
|
if (orientation === "vertical") {
|
|
8745
8798
|
const thickness = fontSize * 1.4;
|
|
8746
8799
|
const width = Math.max(1, node.height - 8);
|
|
8747
|
-
if (
|
|
8800
|
+
if (chunkLSEMXRB5_cjs.estimateTextWidth(node.label, fontSize, false) > width) {
|
|
8748
8801
|
return void 0;
|
|
8749
8802
|
}
|
|
8750
8803
|
return {
|
|
8751
|
-
...
|
|
8804
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
8752
8805
|
id,
|
|
8753
8806
|
order: nextOrder(),
|
|
8754
8807
|
bounds,
|
|
@@ -8765,7 +8818,7 @@ function createInsideLabel(context, data, node, orientation) {
|
|
|
8765
8818
|
};
|
|
8766
8819
|
}
|
|
8767
8820
|
return {
|
|
8768
|
-
...
|
|
8821
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
8769
8822
|
id,
|
|
8770
8823
|
order: nextOrder(),
|
|
8771
8824
|
bounds,
|
|
@@ -8786,18 +8839,18 @@ function createSankeyRenderData(context) {
|
|
|
8786
8839
|
const labelGutter = showLabels ? 92 : 0;
|
|
8787
8840
|
const availableWidth = Math.max(1, plot.width - labelGutter * 2);
|
|
8788
8841
|
const layout = layoutSankey(createNodeInputs(context), createLinkInputs(context), availableWidth, plot.height, {
|
|
8789
|
-
nodeWidth: Math.max(1,
|
|
8790
|
-
nodeGap: Math.max(0,
|
|
8842
|
+
nodeWidth: Math.max(1, chunkLSEMXRB5_cjs.finite(chart.config?.sankeyNodeWidth, 18)),
|
|
8843
|
+
nodeGap: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.sankeyNodeGap, 8))
|
|
8791
8844
|
});
|
|
8792
8845
|
return {
|
|
8793
8846
|
...layout,
|
|
8794
8847
|
baseX: plot.x + labelGutter,
|
|
8795
8848
|
baseY: plot.y,
|
|
8796
8849
|
labelGutter,
|
|
8797
|
-
fontSize: Math.max(9,
|
|
8798
|
-
labelSize: Math.max(6,
|
|
8850
|
+
fontSize: Math.max(9, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12)),
|
|
8851
|
+
labelSize: Math.max(6, chunkLSEMXRB5_cjs.finite(chart.config?.sankeyLabelSize, Math.max(9, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12)) - 2)),
|
|
8799
8852
|
columnCount: Math.max(1, ...layout.nodes.map((node) => node.column + 1)),
|
|
8800
|
-
nodeColors: new Map(layout.nodes.map((node) => [node.id, node.color ||
|
|
8853
|
+
nodeColors: new Map(layout.nodes.map((node) => [node.id, node.color || chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL]))
|
|
8801
8854
|
};
|
|
8802
8855
|
}
|
|
8803
8856
|
function createNodeInputs(context) {
|
|
@@ -8819,7 +8872,7 @@ function createLinkInputs(context) {
|
|
|
8819
8872
|
source: series.source,
|
|
8820
8873
|
target: series.target,
|
|
8821
8874
|
value: series.values[0] ?? 0,
|
|
8822
|
-
color: series.color ?
|
|
8875
|
+
color: series.color ? chunkLSEMXRB5_cjs.representativeColor(series.color, chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL) : void 0
|
|
8823
8876
|
});
|
|
8824
8877
|
});
|
|
8825
8878
|
return inputs;
|
|
@@ -8838,9 +8891,9 @@ function renderSankey(context) {
|
|
|
8838
8891
|
var DEFAULT_POINT_SIZE = 4;
|
|
8839
8892
|
function renderScatter(context) {
|
|
8840
8893
|
const nodes = [];
|
|
8841
|
-
const shadow =
|
|
8894
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(context.chart.shadowStyle);
|
|
8842
8895
|
context.chart.series.forEach((series, seriesIndex) => {
|
|
8843
|
-
const color = series.color ??
|
|
8896
|
+
const color = series.color ?? chunkLSEMXRB5_cjs.CHART_COLORS[seriesIndex % chunkLSEMXRB5_cjs.CHART_COLORS.length];
|
|
8844
8897
|
const points = pixelPoints(context, seriesValuePairs(context.chart, series));
|
|
8845
8898
|
points.forEach((point, pointIndex) => {
|
|
8846
8899
|
nodes.push(createScatterPoint(context, series, point, pointIndex, color, shadow));
|
|
@@ -8864,8 +8917,8 @@ function createScatterPoint(context, series, point, pointIndex, color, shadow) {
|
|
|
8864
8917
|
ry: radius,
|
|
8865
8918
|
detail: { of: "chartValue", series: series.id, valueIndex: pointIndex },
|
|
8866
8919
|
style: {
|
|
8867
|
-
fill:
|
|
8868
|
-
stroke: strokeWidth > 0 ?
|
|
8920
|
+
fill: chunkLSEMXRB5_cjs.paint(color, diagnostics, chart.id),
|
|
8921
|
+
stroke: strokeWidth > 0 ? chunkLSEMXRB5_cjs.paint(config?.pointStrokeColor ?? color, diagnostics, chart.id) : void 0,
|
|
8869
8922
|
strokeWidth: strokeWidth > 0 ? strokeWidth : void 0,
|
|
8870
8923
|
opacity: config?.pointOpacity,
|
|
8871
8924
|
shadow
|
|
@@ -8876,14 +8929,14 @@ function createScatterPoint(context, series, point, pointIndex, color, shadow) {
|
|
|
8876
8929
|
// src/renderScene/charts/renderers/treemap/layout.ts
|
|
8877
8930
|
function createTreemapLayout(context) {
|
|
8878
8931
|
const { chart, plot, showLegend } = context;
|
|
8879
|
-
const fontSize = Math.max(9,
|
|
8932
|
+
const fontSize = Math.max(9, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12));
|
|
8880
8933
|
const legendPosition = chart.legendPosition === "left" ? "left" : chart.legendPosition === "right" ? "right" : "bottom";
|
|
8881
8934
|
const legendHeight = showLegend && legendPosition === "bottom" ? 48 : 0;
|
|
8882
|
-
const cellGap = Math.max(0,
|
|
8935
|
+
const cellGap = Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.cellGap, 0));
|
|
8883
8936
|
return {
|
|
8884
8937
|
leaves: chart.series,
|
|
8885
|
-
bands:
|
|
8886
|
-
zones: chart.config?.zones?.length ? chart.config.zones :
|
|
8938
|
+
bands: chunkLSEMXRB5_cjs.axisBands(chart.axisY),
|
|
8939
|
+
zones: chart.config?.zones?.length ? chart.config.zones : chunkLSEMXRB5_cjs.DEFAULT_HEATMAP_ZONES,
|
|
8887
8940
|
fontSize,
|
|
8888
8941
|
smallFontSize: Math.max(8, fontSize - 1),
|
|
8889
8942
|
legendPosition,
|
|
@@ -8891,18 +8944,18 @@ function createTreemapLayout(context) {
|
|
|
8891
8944
|
gridWidth: Math.max(1, plot.width),
|
|
8892
8945
|
gridHeight: Math.max(1, plot.height - legendHeight),
|
|
8893
8946
|
cellGap,
|
|
8894
|
-
cellRadius: Math.max(0,
|
|
8895
|
-
headerHeight: Math.max(0,
|
|
8896
|
-
labelSize: Math.max(6,
|
|
8897
|
-
valueSize: Math.max(6,
|
|
8898
|
-
labelPadding: Math.max(0,
|
|
8947
|
+
cellRadius: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.barCornerRadius, cellGap)),
|
|
8948
|
+
headerHeight: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.headerHeight, 20)),
|
|
8949
|
+
labelSize: Math.max(6, chunkLSEMXRB5_cjs.finite(chart.config?.tileLabelSize, Math.max(8, fontSize - 1))),
|
|
8950
|
+
valueSize: Math.max(6, chunkLSEMXRB5_cjs.finite(chart.config?.tileValueSize, Math.max(8, fontSize - 1))),
|
|
8951
|
+
labelPadding: Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.tileLabelPadding, 4))
|
|
8899
8952
|
};
|
|
8900
8953
|
}
|
|
8901
8954
|
function treemapLeafValue(leaf) {
|
|
8902
8955
|
return leaf.values[0] ?? 0;
|
|
8903
8956
|
}
|
|
8904
8957
|
function treemapLeafColor(leaf, layout) {
|
|
8905
|
-
return leaf.color ??
|
|
8958
|
+
return leaf.color ?? chunkLSEMXRB5_cjs.zoneColorAtValue(treemapLeafValue(leaf), layout.bands, layout.zones);
|
|
8906
8959
|
}
|
|
8907
8960
|
|
|
8908
8961
|
// src/renderScene/charts/renderers/treemap/legend.ts
|
|
@@ -8927,7 +8980,7 @@ function bandStops(layout) {
|
|
|
8927
8980
|
const zones = layout.zones.slice(0, bandCount);
|
|
8928
8981
|
return zones.map((zone, index) => ({
|
|
8929
8982
|
offset: bandRatio2(layout, layout.bands[index + 1] ?? layout.bands[layout.bands.length - 1]) * 100,
|
|
8930
|
-
color: zone.color ??
|
|
8983
|
+
color: zone.color ?? chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL
|
|
8931
8984
|
}));
|
|
8932
8985
|
}
|
|
8933
8986
|
function renderBottomLegend(context, layout) {
|
|
@@ -8936,7 +8989,7 @@ function renderBottomLegend(context, layout) {
|
|
|
8936
8989
|
const barWidth = layout.gridWidth;
|
|
8937
8990
|
const labelHeight = layout.fontSize + 2;
|
|
8938
8991
|
const barY = plot.y + layout.gridHeight + CHART_GAP;
|
|
8939
|
-
const barBounds =
|
|
8992
|
+
const barBounds = chunkLSEMXRB5_cjs.boxBounds({ x: barX, y: barY, width: barWidth, height: BAR_THICKNESS2 });
|
|
8940
8993
|
const stops = bandStops(layout);
|
|
8941
8994
|
const bar = {
|
|
8942
8995
|
type: "rect",
|
|
@@ -8950,7 +9003,7 @@ function renderBottomLegend(context, layout) {
|
|
|
8950
9003
|
rx: 3,
|
|
8951
9004
|
zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
|
|
8952
9005
|
style: {
|
|
8953
|
-
fill: stops.length ? { kind: "linear-gradient", angle: 0, stops } : { kind: "solid", color:
|
|
9006
|
+
fill: stops.length ? { kind: "linear-gradient", angle: 0, stops } : { kind: "solid", color: chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL },
|
|
8954
9007
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
8955
9008
|
strokeWidth: 1
|
|
8956
9009
|
}
|
|
@@ -8973,12 +9026,12 @@ function renderBottomLegend(context, layout) {
|
|
|
8973
9026
|
const isLast = index === layout.bands.length - 1;
|
|
8974
9027
|
const align = isFirst ? "left" : isLast ? "right" : "center";
|
|
8975
9028
|
const frameX = isFirst ? x : isLast ? x - LABEL_SIZE : x - LABEL_SIZE / 2;
|
|
8976
|
-
const label =
|
|
9029
|
+
const label = chunkLSEMXRB5_cjs.chartText({
|
|
8977
9030
|
id: `chart-treemap-legend-tick-label-${chart.id}-${index}`,
|
|
8978
9031
|
order: nextOrder(),
|
|
8979
9032
|
bounds,
|
|
8980
9033
|
frame: { x: frameX, y: barY + BAR_THICKNESS2 + TICK_LENGTH3 + ROW_GAP2, width: LABEL_SIZE, height: labelHeight },
|
|
8981
|
-
text:
|
|
9034
|
+
text: chunkLSEMXRB5_cjs.formatFieldValue(value),
|
|
8982
9035
|
chart,
|
|
8983
9036
|
align
|
|
8984
9037
|
});
|
|
@@ -8992,7 +9045,7 @@ function renderSideLegend(context, layout) {
|
|
|
8992
9045
|
const barTop = plot.y;
|
|
8993
9046
|
const barHeight = layout.gridHeight;
|
|
8994
9047
|
const barX = side === "left" ? plot.x - CHART_GAP - BAR_THICKNESS2 : plot.x + layout.gridWidth + CHART_GAP;
|
|
8995
|
-
const barBounds =
|
|
9048
|
+
const barBounds = chunkLSEMXRB5_cjs.boxBounds({ x: barX, y: barTop, width: BAR_THICKNESS2, height: barHeight });
|
|
8996
9049
|
const stops = bandStops(layout);
|
|
8997
9050
|
const bar = {
|
|
8998
9051
|
type: "rect",
|
|
@@ -9006,7 +9059,7 @@ function renderSideLegend(context, layout) {
|
|
|
9006
9059
|
rx: 3,
|
|
9007
9060
|
zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
|
|
9008
9061
|
style: {
|
|
9009
|
-
fill: stops.length ? { kind: "linear-gradient", angle: 270, stops } : { kind: "solid", color:
|
|
9062
|
+
fill: stops.length ? { kind: "linear-gradient", angle: 270, stops } : { kind: "solid", color: chunkLSEMXRB5_cjs.DEFAULT_ZONE_FILL },
|
|
9010
9063
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
9011
9064
|
strokeWidth: 1
|
|
9012
9065
|
}
|
|
@@ -9028,12 +9081,12 @@ function renderSideLegend(context, layout) {
|
|
|
9028
9081
|
strokeWidth: 1
|
|
9029
9082
|
}
|
|
9030
9083
|
};
|
|
9031
|
-
const label =
|
|
9084
|
+
const label = chunkLSEMXRB5_cjs.chartText({
|
|
9032
9085
|
id: `chart-treemap-legend-tick-label-${chart.id}-${index}`,
|
|
9033
9086
|
order: nextOrder(),
|
|
9034
9087
|
bounds,
|
|
9035
9088
|
frame: { x: labelX2, y: y - layout.fontSize / 2, width: LABEL_SIZE, height: layout.fontSize + 2 },
|
|
9036
|
-
text:
|
|
9089
|
+
text: chunkLSEMXRB5_cjs.formatFieldValue(value),
|
|
9037
9090
|
chart,
|
|
9038
9091
|
align: side === "left" ? "right" : "left"
|
|
9039
9092
|
});
|
|
@@ -9121,7 +9174,7 @@ function renderTreemapHeader(context, layout, header, index) {
|
|
|
9121
9174
|
};
|
|
9122
9175
|
const smallFontSize = Math.max(8, Math.max(9, chart.fontSize ?? 12) - 1);
|
|
9123
9176
|
const label = {
|
|
9124
|
-
...
|
|
9177
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
9125
9178
|
id: `chart-treemap-header-label-${chart.id}-${index}`,
|
|
9126
9179
|
order: nextOrder(),
|
|
9127
9180
|
bounds,
|
|
@@ -9136,7 +9189,7 @@ function renderTreemapHeader(context, layout, header, index) {
|
|
|
9136
9189
|
align: "center"
|
|
9137
9190
|
}),
|
|
9138
9191
|
fontSize: smallFontSize,
|
|
9139
|
-
color:
|
|
9192
|
+
color: chunkLSEMXRB5_cjs.contrastTextColor(fill2)
|
|
9140
9193
|
};
|
|
9141
9194
|
return [background, label];
|
|
9142
9195
|
}
|
|
@@ -9152,7 +9205,7 @@ function renderTile(context, layout, tile, nextTile) {
|
|
|
9152
9205
|
function createTileNode(context, layout, tile, color, nextColor) {
|
|
9153
9206
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
9154
9207
|
const gap = layout.cellGap;
|
|
9155
|
-
const shadow =
|
|
9208
|
+
const shadow = chunkLSEMXRB5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
9156
9209
|
const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
|
|
9157
9210
|
const tileX = plot.x + tile.x + gap / 2;
|
|
9158
9211
|
const tileY = plot.y + tile.y + gap / 2;
|
|
@@ -9169,10 +9222,10 @@ function createTileNode(context, layout, tile, color, nextColor) {
|
|
|
9169
9222
|
kind: "linear-gradient",
|
|
9170
9223
|
angle: 0,
|
|
9171
9224
|
stops: [
|
|
9172
|
-
{ offset: 0, color:
|
|
9173
|
-
{ offset: 100, color:
|
|
9225
|
+
{ offset: 0, color: chunkLSEMXRB5_cjs.representativeColor(color, fallback) },
|
|
9226
|
+
{ offset: 100, color: chunkLSEMXRB5_cjs.representativeColor(nextColor, fallback) }
|
|
9174
9227
|
]
|
|
9175
|
-
} :
|
|
9228
|
+
} : chunkLSEMXRB5_cjs.paint(color, diagnostics, chart.id);
|
|
9176
9229
|
return {
|
|
9177
9230
|
type: "rect",
|
|
9178
9231
|
id: `chart-treemap-tile-${chart.id}-${tile.item.leaf.id}`,
|
|
@@ -9186,7 +9239,7 @@ function createTileNode(context, layout, tile, color, nextColor) {
|
|
|
9186
9239
|
style: {
|
|
9187
9240
|
fill: fill2,
|
|
9188
9241
|
stroke: { kind: "solid", color: chart.config?.tileStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
|
|
9189
|
-
strokeWidth:
|
|
9242
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.config?.tileStrokeWidth, chunkLSEMXRB5_cjs.finite(chart.gridWidth, 1)),
|
|
9190
9243
|
shadow,
|
|
9191
9244
|
clip: clipPath ? { type: "path", d: clipPath } : void 0
|
|
9192
9245
|
}
|
|
@@ -9201,12 +9254,12 @@ function createTileLabel(context, layout, tile, color) {
|
|
|
9201
9254
|
const height = Math.max(1, tile.height - gap - pad * 1.5);
|
|
9202
9255
|
const x = plot.x + tile.x + gap / 2 + pad;
|
|
9203
9256
|
const y = plot.y + tile.y + gap / 2 + pad * 0.75;
|
|
9204
|
-
const textColor = chart.config?.tileTextColor ??
|
|
9257
|
+
const textColor = chart.config?.tileTextColor ?? chunkLSEMXRB5_cjs.contrastTextColor(chunkLSEMXRB5_cjs.representativeColor(color, "#ffffff"));
|
|
9205
9258
|
const lineHeight = layout.labelSize * 1.2;
|
|
9206
9259
|
const maxLines = Math.max(1, Math.floor(height / lineHeight));
|
|
9207
|
-
const labelLines =
|
|
9260
|
+
const labelLines = chunkLSEMXRB5_cjs.wrapText(leaf.label, width, layout.labelSize).slice(0, maxLines).map((line) => chunkLSEMXRB5_cjs.ellipsizeToWidth(line, width, layout.labelSize, true));
|
|
9208
9261
|
const label = {
|
|
9209
|
-
...
|
|
9262
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
9210
9263
|
id: `chart-treemap-label-${chart.id}-${leaf.id}`,
|
|
9211
9264
|
order: nextOrder(),
|
|
9212
9265
|
bounds,
|
|
@@ -9220,12 +9273,12 @@ function createTileLabel(context, layout, tile, color) {
|
|
|
9220
9273
|
color: textColor
|
|
9221
9274
|
};
|
|
9222
9275
|
const valueText = String(value);
|
|
9223
|
-
const valueFits = labelLines.length * lineHeight + layout.valueSize * 1.2 <= height + 2 &&
|
|
9276
|
+
const valueFits = labelLines.length * lineHeight + layout.valueSize * 1.2 <= height + 2 && chunkLSEMXRB5_cjs.estimateTextWidth(valueText, layout.valueSize, false) <= width;
|
|
9224
9277
|
if (chart.config?.showTileValues === false || !valueFits) {
|
|
9225
9278
|
return [label];
|
|
9226
9279
|
}
|
|
9227
9280
|
const valueNode = {
|
|
9228
|
-
...
|
|
9281
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
9229
9282
|
id: `chart-treemap-value-${chart.id}-${leaf.id}`,
|
|
9230
9283
|
order: nextOrder(),
|
|
9231
9284
|
bounds,
|
|
@@ -9302,7 +9355,7 @@ function buildCartesianChart(foundation) {
|
|
|
9302
9355
|
|
|
9303
9356
|
// src/renderScene/charts/chartFrame.ts
|
|
9304
9357
|
function scaleDetail(chart, plot) {
|
|
9305
|
-
const horizontal =
|
|
9358
|
+
const horizontal = chunkLSEMXRB5_cjs.isHorizontalBar(chart);
|
|
9306
9359
|
const range = horizontal ? `${plot.x},${plot.width}` : `${plot.y},${plot.height}`;
|
|
9307
9360
|
return {
|
|
9308
9361
|
of: "chartScale",
|
|
@@ -9310,7 +9363,7 @@ function scaleDetail(chart, plot) {
|
|
|
9310
9363
|
};
|
|
9311
9364
|
}
|
|
9312
9365
|
function pieDetail(chart, plot) {
|
|
9313
|
-
const { outerRadius, innerRadius, cornerRadius } =
|
|
9366
|
+
const { outerRadius, innerRadius, cornerRadius } = chunkLSEMXRB5_cjs.resolvePieRadii(
|
|
9314
9367
|
plot.width,
|
|
9315
9368
|
plot.height,
|
|
9316
9369
|
chart.config?.innerRadius,
|
|
@@ -9323,8 +9376,8 @@ function pieDetail(chart, plot) {
|
|
|
9323
9376
|
}
|
|
9324
9377
|
function polarAreaDetail(chart, plot) {
|
|
9325
9378
|
const maxRadius = Math.max(1, Math.min(plot.width, plot.height) / 2 - 4);
|
|
9326
|
-
const innerRadius = Math.max(0, Math.min(
|
|
9327
|
-
const cornerRadius = Math.max(0,
|
|
9379
|
+
const innerRadius = Math.max(0, Math.min(chunkLSEMXRB5_cjs.finite(chart.config?.innerRadius, 0), maxRadius - 1));
|
|
9380
|
+
const cornerRadius = Math.max(0, chunkLSEMXRB5_cjs.finite(chart.config?.pieCornerRadius, 0));
|
|
9328
9381
|
return {
|
|
9329
9382
|
of: "pieGeometry",
|
|
9330
9383
|
pieGeometry: `${plot.x + plot.width / 2},${plot.y + plot.height / 2},${maxRadius},${innerRadius},${cornerRadius}`
|
|
@@ -9333,8 +9386,8 @@ function polarAreaDetail(chart, plot) {
|
|
|
9333
9386
|
function radarDetail(chart, plot) {
|
|
9334
9387
|
const configuredCount = (chart.config?.categories?.filter(Boolean) ?? []).length;
|
|
9335
9388
|
const dataCount = Math.max(0, ...chart.series.map((series) => series.values.length));
|
|
9336
|
-
const count =
|
|
9337
|
-
const radius =
|
|
9389
|
+
const count = chunkLSEMXRB5_cjs.radarCategoryCount(configuredCount, dataCount);
|
|
9390
|
+
const radius = chunkLSEMXRB5_cjs.radarRadius(plot.width, plot.height, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12), chart.showAxisLabels !== false);
|
|
9338
9391
|
const centerX = plot.x + plot.width / 2;
|
|
9339
9392
|
const centerY = plot.y + plot.height / 2;
|
|
9340
9393
|
const curved = chart.chartType === "radial" ? 1 : 0;
|
|
@@ -9368,9 +9421,9 @@ function buildChartFrame(chart, bounds, plot, order) {
|
|
|
9368
9421
|
height: chart.height,
|
|
9369
9422
|
rx: chart.cornerRadius ?? 12,
|
|
9370
9423
|
style: {
|
|
9371
|
-
fill:
|
|
9424
|
+
fill: chunkLSEMXRB5_cjs.paint(chart.fillColor ?? "#ffffff", [], chart.id),
|
|
9372
9425
|
stroke: { kind: "solid", color: chart.strokeColor ?? "#475569" },
|
|
9373
|
-
strokeWidth:
|
|
9426
|
+
strokeWidth: chunkLSEMXRB5_cjs.finite(chart.strokeWidth, 1)
|
|
9374
9427
|
}
|
|
9375
9428
|
};
|
|
9376
9429
|
const detail = frameDetail(chart, plot);
|
|
@@ -9430,7 +9483,7 @@ function buildChartTitle(chart, bounds, plot, renderOrder) {
|
|
|
9430
9483
|
}
|
|
9431
9484
|
return [
|
|
9432
9485
|
{
|
|
9433
|
-
...
|
|
9486
|
+
...chunkLSEMXRB5_cjs.chartText({
|
|
9434
9487
|
id: `chart-title-${chart.id}`,
|
|
9435
9488
|
order: renderOrder.next(),
|
|
9436
9489
|
bounds,
|
|
@@ -9441,8 +9494,8 @@ function buildChartTitle(chart, bounds, plot, renderOrder) {
|
|
|
9441
9494
|
}),
|
|
9442
9495
|
...chart.titleColor ? { color: chart.titleColor } : {},
|
|
9443
9496
|
fontWeight: chart.titleWeight ?? "bold",
|
|
9444
|
-
fontSize:
|
|
9445
|
-
prop:
|
|
9497
|
+
fontSize: chunkLSEMXRB5_cjs.finite(chart.titleSize, Math.max(10, chunkLSEMXRB5_cjs.finite(chart.fontSize, 12)) + 2),
|
|
9498
|
+
prop: chunkLSEMXRB5_cjs.CHART_TITLE_PROP
|
|
9446
9499
|
}
|
|
9447
9500
|
];
|
|
9448
9501
|
}
|
|
@@ -9495,7 +9548,7 @@ function buildChart(chart, index, diagnostics) {
|
|
|
9495
9548
|
// src/renderScene/charts/artifacts.ts
|
|
9496
9549
|
function buildCharts(charts, diagnostics) {
|
|
9497
9550
|
return charts.flatMap(
|
|
9498
|
-
(chart, index) =>
|
|
9551
|
+
(chart, index) => chunkLSEMXRB5_cjs.tag(buildChart(chart, index, diagnostics), "chart", chart.id, chart.chartType, chart.title ?? "Chart")
|
|
9499
9552
|
);
|
|
9500
9553
|
}
|
|
9501
9554
|
|
|
@@ -9596,7 +9649,7 @@ function visibleBounds(node) {
|
|
|
9596
9649
|
}
|
|
9597
9650
|
function sceneBounds(nodes) {
|
|
9598
9651
|
if (!nodes.length) {
|
|
9599
|
-
return
|
|
9652
|
+
return chunkLSEMXRB5_cjs.EMPTY_BOUNDS;
|
|
9600
9653
|
}
|
|
9601
9654
|
const all = nodes.map(visibleBounds);
|
|
9602
9655
|
return {
|
|
@@ -9611,8 +9664,8 @@ function stackingOf(input) {
|
|
|
9611
9664
|
const add = (role, objects, legacyBase) => {
|
|
9612
9665
|
objects.forEach((object, index) => {
|
|
9613
9666
|
stacking.set(`${role}:${object.id}`, {
|
|
9614
|
-
rank:
|
|
9615
|
-
sequence:
|
|
9667
|
+
rank: chunkLSEMXRB5_cjs.stackRank(object),
|
|
9668
|
+
sequence: chunkLSEMXRB5_cjs.stackSequence(object, legacyBase + index)
|
|
9616
9669
|
});
|
|
9617
9670
|
});
|
|
9618
9671
|
};
|
|
@@ -10105,31 +10158,31 @@ function chartSeriesAttrs(detail) {
|
|
|
10105
10158
|
];
|
|
10106
10159
|
}
|
|
10107
10160
|
function frameBoundaryAttrs(detail) {
|
|
10108
|
-
return [`${
|
|
10161
|
+
return [`${chunkLSEMXRB5_cjs.CORNER_RADIUS_ATTR}="${num(detail.cornerRadius)}"`, `${chunkLSEMXRB5_cjs.SQUARE_CORNER_ATTR}="${detail.squareCorner}"`];
|
|
10109
10162
|
}
|
|
10110
10163
|
function declaredBoundsAttr(bounds) {
|
|
10111
|
-
return `${
|
|
10164
|
+
return `${chunkLSEMXRB5_cjs.SYMBOL_BOUNDS_ATTR}="${num(bounds.x)},${num(bounds.y)},${num(bounds.width)},${num(bounds.height)}"`;
|
|
10112
10165
|
}
|
|
10113
10166
|
function symbolGeometryAttrs(detail) {
|
|
10114
10167
|
return [
|
|
10115
|
-
`${
|
|
10116
|
-
`${
|
|
10168
|
+
`${chunkLSEMXRB5_cjs.SYMBOL_POINTS_ATTR}="${xml(JSON.stringify(detail.points))}"`,
|
|
10169
|
+
`${chunkLSEMXRB5_cjs.SYMBOL_TENSION_ATTR}="${num(detail.tension)}"`,
|
|
10117
10170
|
declaredBoundsAttr(detail.declaredBounds)
|
|
10118
10171
|
];
|
|
10119
10172
|
}
|
|
10120
10173
|
function pathGeometryAttrs(detail) {
|
|
10121
10174
|
return [
|
|
10122
|
-
`${
|
|
10123
|
-
`${
|
|
10124
|
-
`${
|
|
10175
|
+
`${chunkLSEMXRB5_cjs.PATH_POINTS_ATTR}="${xml(JSON.stringify(detail.points))}"`,
|
|
10176
|
+
`${chunkLSEMXRB5_cjs.PATH_TENSION_ATTR}="${num(detail.tension)}"`,
|
|
10177
|
+
`${chunkLSEMXRB5_cjs.PATH_CLOSED_ATTR}="${detail.closed}"`
|
|
10125
10178
|
];
|
|
10126
10179
|
}
|
|
10127
10180
|
function isometricGeometryAttrs(detail) {
|
|
10128
10181
|
return [
|
|
10129
|
-
`${
|
|
10130
|
-
`${
|
|
10182
|
+
`${chunkLSEMXRB5_cjs.ISOMETRIC_SIZE_ATTR}="${num(detail.width)},${num(detail.height)},${num(detail.depth)}"`,
|
|
10183
|
+
`${chunkLSEMXRB5_cjs.CORNER_RADIUS_ATTR}="${num(detail.cornerRadius)}"`,
|
|
10131
10184
|
declaredBoundsAttr(detail.bounds),
|
|
10132
|
-
`${
|
|
10185
|
+
`${chunkLSEMXRB5_cjs.ISOMETRIC_LABEL_OFFSET_ATTR}="${num(detail.labelOffsetX)},${num(detail.labelOffsetY)}"`
|
|
10133
10186
|
];
|
|
10134
10187
|
}
|
|
10135
10188
|
function linkDetailAttrs(detail) {
|
|
@@ -10276,7 +10329,7 @@ function renderSvgDocument(scene, options = {}) {
|
|
|
10276
10329
|
const nodes = options.linkHitAreas ? withLinkHitAreas(scene.nodes) : scene.nodes;
|
|
10277
10330
|
const body = nodes.map((node) => nodeSvg(node, defs)).join("\n ");
|
|
10278
10331
|
const declaration = options.includeXmlDeclaration === false ? "" : '<?xml version="1.0" encoding="UTF-8"?>\n';
|
|
10279
|
-
const svg = `${declaration}<svg xmlns="http://www.w3.org/2000/svg" width="${num(width)}px" height="${num(height)}px" viewBox="${viewBox}" role="img" data-sf-contract="${
|
|
10332
|
+
const svg = `${declaration}<svg xmlns="http://www.w3.org/2000/svg" width="${num(width)}px" height="${num(height)}px" viewBox="${viewBox}" role="img" data-sf-contract="${chunkLSEMXRB5_cjs.DOM_CONTRACT_VERSION}">
|
|
10280
10333
|
<defs>${defs.entries.join("")}</defs>
|
|
10281
10334
|
${body}
|
|
10282
10335
|
</svg>`;
|
|
@@ -10296,9 +10349,9 @@ function renderCanvas(input, options = {}) {
|
|
|
10296
10349
|
}
|
|
10297
10350
|
var SCENE_CACHE_LIMIT = 50;
|
|
10298
10351
|
var sceneCache = /* @__PURE__ */ new Map();
|
|
10299
|
-
var cachedForRegistry =
|
|
10352
|
+
var cachedForRegistry = chunkLSEMXRB5_cjs.componentRegistryVersion();
|
|
10300
10353
|
function cachedRenderScene(source) {
|
|
10301
|
-
const registry =
|
|
10354
|
+
const registry = chunkLSEMXRB5_cjs.componentRegistryVersion();
|
|
10302
10355
|
if (registry !== cachedForRegistry) {
|
|
10303
10356
|
sceneCache.clear();
|
|
10304
10357
|
cachedForRegistry = registry;
|
|
@@ -10330,7 +10383,7 @@ function render(source, options = {}) {
|
|
|
10330
10383
|
var SCENE_ORDER_BASE = 1e4;
|
|
10331
10384
|
function defineComponent(definition) {
|
|
10332
10385
|
const { scene, ...descriptor } = definition;
|
|
10333
|
-
const unregisterDescriptor =
|
|
10386
|
+
const unregisterDescriptor = chunkLSEMXRB5_cjs.registerComponentDescriptor(descriptor);
|
|
10334
10387
|
const unregisterBuilder = registerComponentBuilder(
|
|
10335
10388
|
descriptor.type,
|
|
10336
10389
|
(component, index) => scene(component, { order: SCENE_ORDER_BASE + index })
|
|
@@ -10349,5 +10402,5 @@ exports.render = render;
|
|
|
10349
10402
|
exports.renderCanvas = renderCanvas;
|
|
10350
10403
|
exports.sflToRenderInput = sflToRenderInput;
|
|
10351
10404
|
exports.sliderReach = sliderReach;
|
|
10352
|
-
//# sourceMappingURL=chunk-
|
|
10353
|
-
//# sourceMappingURL=chunk-
|
|
10405
|
+
//# sourceMappingURL=chunk-5PJ55GPG.cjs.map
|
|
10406
|
+
//# sourceMappingURL=chunk-5PJ55GPG.cjs.map
|