stickyflow 0.10.0 → 0.11.1
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 +26 -0
- package/dist/binding/index.cjs +9 -9
- package/dist/binding/index.d.cts +4 -4
- package/dist/binding/index.d.ts +4 -4
- package/dist/binding/index.js +3 -3
- package/dist/{chunk-TECWZVIM.cjs → chunk-4KBU4CFU.cjs} +23 -23
- package/dist/{chunk-TECWZVIM.cjs.map → chunk-4KBU4CFU.cjs.map} +1 -1
- package/dist/{chunk-EGUPN56K.js → chunk-BFQWCOEC.js} +3 -3
- package/dist/{chunk-EGUPN56K.js.map → chunk-BFQWCOEC.js.map} +1 -1
- package/dist/{chunk-VPNOVRWP.js → chunk-DGAVCN4D.js} +262 -15
- package/dist/chunk-DGAVCN4D.js.map +1 -0
- package/dist/{chunk-5PJ55GPG.cjs → chunk-EHH6ZDK6.cjs} +1076 -713
- package/dist/chunk-EHH6ZDK6.cjs.map +1 -0
- package/dist/{chunk-HRU6VOEC.js → chunk-G6IW2IX3.js} +44 -7
- package/dist/chunk-G6IW2IX3.js.map +1 -0
- package/dist/{chunk-SDOHUNBW.js → chunk-TQIYK5OA.js} +435 -72
- package/dist/chunk-TQIYK5OA.js.map +1 -0
- package/dist/{chunk-L7CEX5JV.js → chunk-UD6IG2PG.js} +4 -4
- package/dist/{chunk-L7CEX5JV.js.map → chunk-UD6IG2PG.js.map} +1 -1
- package/dist/{chunk-LSEMXRB5.cjs → chunk-UHKFJBY5.cjs} +44 -7
- package/dist/chunk-UHKFJBY5.cjs.map +1 -0
- package/dist/{chunk-KRSX4UZ7.cjs → chunk-VYQ6N5SI.cjs} +293 -46
- package/dist/chunk-VYQ6N5SI.cjs.map +1 -0
- package/dist/{chunk-SCD3AHMY.cjs → chunk-WZA3DJJH.cjs} +15 -15
- package/dist/{chunk-SCD3AHMY.cjs.map → chunk-WZA3DJJH.cjs.map} +1 -1
- package/dist/index.cjs +36 -36
- package/dist/index.d.cts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +5 -5
- package/dist/interaction/index.cjs +308 -256
- package/dist/interaction/index.cjs.map +1 -1
- package/dist/interaction/index.d.cts +5 -4
- package/dist/interaction/index.d.ts +5 -4
- package/dist/interaction/index.js +74 -23
- package/dist/interaction/index.js.map +1 -1
- package/dist/{render-DU4lYbRl.d.cts → render-BDO4S5uF.d.cts} +16 -0
- package/dist/{render-DU4lYbRl.d.ts → render-BDO4S5uF.d.ts} +16 -0
- package/dist/{runtime-Bkv7QW7H.d.cts → runtime-C-C5v9po.d.cts} +2 -2
- package/dist/{runtime-DJ4K4_HZ.d.ts → runtime-lCAfU-1Q.d.ts} +2 -2
- package/dist/{runtimeTypes-C1shzoyr.d.ts → runtimeTypes-B7p6b1Bi.d.cts} +2 -2
- package/dist/{runtimeTypes-BvJBZLkr.d.cts → runtimeTypes-BDA_CfWh.d.ts} +2 -2
- package/dist/stickyflow-diagram.global.js +197 -44
- package/dist/stickyflow-diagram.global.js.map +1 -1
- package/dist/{types-B5jrEEcF.d.cts → types-CZJzycKw.d.cts} +1 -1
- package/dist/{types-B7IkZ0w4.d.ts → types-Dp8JVZLB.d.ts} +1 -1
- package/dist/viewer/index.cjs +9 -9
- package/dist/viewer/index.d.cts +4 -4
- package/dist/viewer/index.d.ts +4 -4
- package/dist/viewer/index.js +4 -4
- package/dist/web-component/index.cjs +6 -6
- package/dist/web-component/index.d.cts +2 -2
- package/dist/web-component/index.d.ts +2 -2
- package/dist/web-component/index.js +4 -4
- package/package.json +1 -1
- package/dist/chunk-5PJ55GPG.cjs.map +0 -1
- package/dist/chunk-HRU6VOEC.js.map +0 -1
- package/dist/chunk-KRSX4UZ7.cjs.map +0 -1
- package/dist/chunk-LSEMXRB5.cjs.map +0 -1
- package/dist/chunk-SDOHUNBW.js.map +0 -1
- package/dist/chunk-VPNOVRWP.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkUHKFJBY5_cjs = require('./chunk-UHKFJBY5.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-]*`;
|
|
@@ -119,8 +119,8 @@ function dashArray(value) {
|
|
|
119
119
|
if (!Array.isArray(parsed)) {
|
|
120
120
|
return void 0;
|
|
121
121
|
}
|
|
122
|
-
const
|
|
123
|
-
return
|
|
122
|
+
const numbers2 = parsed.filter((entry) => typeof entry === "number" && Number.isFinite(entry));
|
|
123
|
+
return numbers2.length === parsed.length ? numbers2 : void 0;
|
|
124
124
|
}
|
|
125
125
|
function solidColor(value) {
|
|
126
126
|
const decoded = decodeColor(value);
|
|
@@ -632,7 +632,7 @@ function readProperty(descriptor, raw) {
|
|
|
632
632
|
case "boolean":
|
|
633
633
|
return raw === void 0 ? descriptor.default : raw === "true";
|
|
634
634
|
case "color":
|
|
635
|
-
return cssColor(raw) ?? descriptor.default;
|
|
635
|
+
return descriptor.optional && raw === "none" ? "none" : cssColor(raw) ?? descriptor.default;
|
|
636
636
|
case "enum":
|
|
637
637
|
return raw !== void 0 && descriptor.options.includes(raw) ? raw : descriptor.default;
|
|
638
638
|
case "string":
|
|
@@ -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 = chunkUHKFJBY5_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 chunkUHKFJBY5_cjs.isBuiltInComponentType(type) ? BUILT_IN_OBJECTS[type](canvasObject) : genericComponentObject(canvasObject);
|
|
853
853
|
}
|
|
854
854
|
|
|
855
855
|
// src/renderInput/fromSfl/canvasObjects/connection.ts
|
|
@@ -1012,12 +1012,29 @@ function pathObject(e) {
|
|
|
1012
1012
|
}
|
|
1013
1013
|
|
|
1014
1014
|
// src/renderInput/fromSfl/canvasObjects/shape.ts
|
|
1015
|
+
var IMAGE_FITS = ["cover", "contain", "fill"];
|
|
1015
1016
|
function shapeTypeOf(value) {
|
|
1016
1017
|
return value || "rectangle";
|
|
1017
1018
|
}
|
|
1019
|
+
function numbers(value, count) {
|
|
1020
|
+
const parts = value?.split(",").map(Number);
|
|
1021
|
+
return parts?.length === count && parts.every(Number.isFinite) ? parts : void 0;
|
|
1022
|
+
}
|
|
1023
|
+
function imageOf(p) {
|
|
1024
|
+
const size = numbers(p.imageSize, 2);
|
|
1025
|
+
const crop = numbers(p.crop, 4);
|
|
1026
|
+
return {
|
|
1027
|
+
src: p.src,
|
|
1028
|
+
fit: oneOf(p.fit, IMAGE_FITS, "cover"),
|
|
1029
|
+
pixels: size && size[0] > 0 && size[1] > 0 ? [size[0], size[1]] : void 0,
|
|
1030
|
+
crop: crop && crop[2] > 0 && crop[3] > 0 ? { x: crop[0], y: crop[1], width: crop[2], height: crop[3] } : void 0
|
|
1031
|
+
};
|
|
1032
|
+
}
|
|
1018
1033
|
function shapeObject(e, shaders) {
|
|
1019
1034
|
const p = e.props;
|
|
1020
1035
|
const isText = e.kind === "text";
|
|
1036
|
+
const isImage = e.kind === "image";
|
|
1037
|
+
const unpainted = isText || isImage;
|
|
1021
1038
|
return {
|
|
1022
1039
|
id: e.id,
|
|
1023
1040
|
type: "shape",
|
|
@@ -1031,8 +1048,8 @@ function shapeObject(e, shaders) {
|
|
|
1031
1048
|
w: e.width,
|
|
1032
1049
|
h: e.height,
|
|
1033
1050
|
rotation: e.rotation ?? 0,
|
|
1034
|
-
fillColor: decodeColor(p.fill ?? (
|
|
1035
|
-
strokeColor: strokePaint(p.stroke ?? (
|
|
1051
|
+
fillColor: decodeColor(p.fill ?? (unpainted ? "none" : void 0)),
|
|
1052
|
+
strokeColor: strokePaint(p.stroke ?? (unpainted ? "none" : void 0)),
|
|
1036
1053
|
isText: isText || void 0,
|
|
1037
1054
|
strokeWidth: numOf(p.strokeWidth),
|
|
1038
1055
|
textColor: p.textColor,
|
|
@@ -1053,7 +1070,8 @@ function shapeObject(e, shaders) {
|
|
|
1053
1070
|
parentFrameId: e.parentFrameId,
|
|
1054
1071
|
order: e.order,
|
|
1055
1072
|
sourceIndex: e.sourceIndex,
|
|
1056
|
-
shader: p.shader ? shaders.get(p.shader) : void 0
|
|
1073
|
+
shader: p.shader ? shaders.get(p.shader) : void 0,
|
|
1074
|
+
image: isImage && p.src ? imageOf(p) : void 0
|
|
1057
1075
|
};
|
|
1058
1076
|
}
|
|
1059
1077
|
|
|
@@ -1094,9 +1112,9 @@ function collectCanvasObjects(state) {
|
|
|
1094
1112
|
shapes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "shape").map((shape) => shapeObject(shape, shaders)),
|
|
1095
1113
|
frames: canvasObjects.filter((canvasObject) => canvasObject.objectType === "frame").map(frameObject),
|
|
1096
1114
|
swimlanes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "swimlane").map(swimlaneObject),
|
|
1097
|
-
isometricObjects: canvasObjects.filter(
|
|
1115
|
+
isometricObjects: canvasObjects.filter(chunkUHKFJBY5_cjs.isIsometricObject).map(isometricObject),
|
|
1098
1116
|
paths: canvasObjects.filter((canvasObject) => canvasObject.objectType === "path").map(pathObject),
|
|
1099
|
-
dimensions: canvasObjects.filter(
|
|
1117
|
+
dimensions: canvasObjects.filter(chunkUHKFJBY5_cjs.isDimensionObject).map(dimensionObject),
|
|
1100
1118
|
charts: canvasObjects.filter((canvasObject) => canvasObject.objectType === "chart").map(chartObject),
|
|
1101
1119
|
components: canvasObjects.filter(
|
|
1102
1120
|
(canvasObject) => canvasObject.objectType === "component" && canvasObject.component !== void 0
|
|
@@ -1123,9 +1141,9 @@ function sidePoint(canvasObject, endpoint) {
|
|
|
1123
1141
|
function namedPortPoint(canvasObject, endpoint) {
|
|
1124
1142
|
const port = canvasObject.symbol?.ports?.find((candidate) => candidate.name === endpoint.port);
|
|
1125
1143
|
if (!port) {
|
|
1126
|
-
return
|
|
1144
|
+
return chunkUHKFJBY5_cjs.elementCenter(canvasObject);
|
|
1127
1145
|
}
|
|
1128
|
-
return
|
|
1146
|
+
return chunkUHKFJBY5_cjs.pointAtNormalizedPort(
|
|
1129
1147
|
{
|
|
1130
1148
|
x: canvasObject.x,
|
|
1131
1149
|
y: canvasObject.y,
|
|
@@ -1171,7 +1189,7 @@ function explicitAnchorPoint(canvasObject, endpoint) {
|
|
|
1171
1189
|
return null;
|
|
1172
1190
|
}
|
|
1173
1191
|
function automaticEndpointPoint(canvasObject, opposite) {
|
|
1174
|
-
return opposite ?
|
|
1192
|
+
return opposite ? chunkUHKFJBY5_cjs.edgePointToward(canvasObject, opposite) : chunkUHKFJBY5_cjs.elementCenter(canvasObject);
|
|
1175
1193
|
}
|
|
1176
1194
|
function findPositionedCanvasObject(canvasObjects, id) {
|
|
1177
1195
|
return canvasObjects.find((candidate) => candidate.id === id);
|
|
@@ -1189,7 +1207,7 @@ function positionedCanvasObjects(canvasObjects) {
|
|
|
1189
1207
|
];
|
|
1190
1208
|
}
|
|
1191
1209
|
function connectionEndpointPoint(object, face) {
|
|
1192
|
-
return object ?
|
|
1210
|
+
return object ? chunkUHKFJBY5_cjs.isometricFaceCenter(object, face) : { x: 0, y: 0 };
|
|
1193
1211
|
}
|
|
1194
1212
|
function isometricStackPosition(isometricObjects, id) {
|
|
1195
1213
|
const index = isometricObjects.findIndex((object2) => object2.id === id);
|
|
@@ -1204,8 +1222,8 @@ function connectionStack(isometricObjects, connection) {
|
|
|
1204
1222
|
return { order: connection.order, sourceIndex: connection.sourceIndex };
|
|
1205
1223
|
}
|
|
1206
1224
|
const behind = [
|
|
1207
|
-
|
|
1208
|
-
|
|
1225
|
+
chunkUHKFJBY5_cjs.VISIBLE_ISOMETRIC_FACES.has(connection.fromFace) ? void 0 : isometricStackPosition(isometricObjects, connection.fromId),
|
|
1226
|
+
chunkUHKFJBY5_cjs.VISIBLE_ISOMETRIC_FACES.has(connection.toFace) ? void 0 : isometricStackPosition(isometricObjects, connection.toId)
|
|
1209
1227
|
].filter((position) => position !== void 0);
|
|
1210
1228
|
if (!behind.length) {
|
|
1211
1229
|
return { sourceIndex: connection.sourceIndex };
|
|
@@ -1247,7 +1265,7 @@ function createRenderInputLinks(canvasObjects) {
|
|
|
1247
1265
|
|
|
1248
1266
|
// src/renderInput/fromSfl/index.ts
|
|
1249
1267
|
function sflToRenderInput(sfl) {
|
|
1250
|
-
const state =
|
|
1268
|
+
const state = chunkUHKFJBY5_cjs.sflToCanvasState(sfl);
|
|
1251
1269
|
const canvasObjects = collectCanvasObjects(state);
|
|
1252
1270
|
return {
|
|
1253
1271
|
shapes: canvasObjects.shapes,
|
|
@@ -1266,13 +1284,13 @@ function sflToRenderInput(sfl) {
|
|
|
1266
1284
|
// src/renderScene/artifacts/component/placeholder.ts
|
|
1267
1285
|
var STROKE = "#94a3b8";
|
|
1268
1286
|
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 =
|
|
1287
|
+
const x = chunkUHKFJBY5_cjs.finite(component.x, 0);
|
|
1288
|
+
const y = chunkUHKFJBY5_cjs.finite(component.y, 0);
|
|
1289
|
+
const width = Math.max(0, chunkUHKFJBY5_cjs.finite(component.width, 120));
|
|
1290
|
+
const height = Math.max(0, chunkUHKFJBY5_cjs.finite(component.height, 60));
|
|
1291
|
+
const rotation = chunkUHKFJBY5_cjs.finite(component.rotation, 0);
|
|
1274
1292
|
const order = 1e4 + index;
|
|
1275
|
-
const bounds =
|
|
1293
|
+
const bounds = chunkUHKFJBY5_cjs.rotatedBounds({ x, y, width, height }, rotation, 2);
|
|
1276
1294
|
return [
|
|
1277
1295
|
{
|
|
1278
1296
|
id: `widget-${component.id}`,
|
|
@@ -1297,7 +1315,7 @@ function buildPlaceholder(component, index) {
|
|
|
1297
1315
|
width,
|
|
1298
1316
|
height,
|
|
1299
1317
|
lines: [component.type],
|
|
1300
|
-
fontFamily:
|
|
1318
|
+
fontFamily: chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
1301
1319
|
fontSize: 12,
|
|
1302
1320
|
fontWeight: "normal",
|
|
1303
1321
|
color: STROKE,
|
|
@@ -1311,44 +1329,44 @@ function buildPlaceholder(component, index) {
|
|
|
1311
1329
|
|
|
1312
1330
|
// src/renderScene/artifacts/component/builtIn.ts
|
|
1313
1331
|
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 =
|
|
1332
|
+
const x = chunkUHKFJBY5_cjs.finite(component.x, 0);
|
|
1333
|
+
const y = chunkUHKFJBY5_cjs.finite(component.y, 0);
|
|
1334
|
+
const width = Math.max(0, chunkUHKFJBY5_cjs.finite(component.width, 160));
|
|
1335
|
+
const height = Math.max(0, chunkUHKFJBY5_cjs.finite(component.height, 90));
|
|
1336
|
+
const rotation = chunkUHKFJBY5_cjs.finite(component.rotation, 0);
|
|
1319
1337
|
return [
|
|
1320
1338
|
{
|
|
1321
1339
|
id: `widget-${component.id}`,
|
|
1322
1340
|
type: "rolling-number",
|
|
1323
1341
|
order: 1e4 + index,
|
|
1324
|
-
bounds:
|
|
1342
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x, y, width, height }, rotation, 2),
|
|
1325
1343
|
x,
|
|
1326
1344
|
y,
|
|
1327
1345
|
width,
|
|
1328
1346
|
height,
|
|
1329
1347
|
rotation,
|
|
1330
|
-
value:
|
|
1348
|
+
value: chunkUHKFJBY5_cjs.formatRollingNumber(component.value, component.digits),
|
|
1331
1349
|
digits: component.digits,
|
|
1332
|
-
duration: Math.max(0,
|
|
1350
|
+
duration: Math.max(0, chunkUHKFJBY5_cjs.finite(component.duration, 420)),
|
|
1333
1351
|
label: component.label,
|
|
1334
|
-
componentStyle:
|
|
1352
|
+
componentStyle: chunkUHKFJBY5_cjs.resolveRollingNumberStyle(component.style)
|
|
1335
1353
|
}
|
|
1336
1354
|
];
|
|
1337
1355
|
}
|
|
1338
1356
|
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,
|
|
1357
|
+
const x = chunkUHKFJBY5_cjs.finite(component.x, 0);
|
|
1358
|
+
const y = chunkUHKFJBY5_cjs.finite(component.y, 0);
|
|
1359
|
+
const width = Math.max(0, chunkUHKFJBY5_cjs.finite(component.width, 200));
|
|
1360
|
+
const height = Math.max(0, chunkUHKFJBY5_cjs.finite(component.height, 200));
|
|
1361
|
+
const rotation = chunkUHKFJBY5_cjs.finite(component.rotation, 0);
|
|
1362
|
+
const max = chunkUHKFJBY5_cjs.finite(component.max, 100) || 100;
|
|
1363
|
+
const progress = Math.min(1, Math.max(0, chunkUHKFJBY5_cjs.finite(Number(component.value), 0) / max));
|
|
1346
1364
|
const nodes = [
|
|
1347
1365
|
{
|
|
1348
1366
|
id: `widget-${component.id}`,
|
|
1349
1367
|
type: "shader-surface",
|
|
1350
1368
|
order: 1e4 + index,
|
|
1351
|
-
bounds:
|
|
1369
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x, y, width, height }, rotation, 2),
|
|
1352
1370
|
x,
|
|
1353
1371
|
y,
|
|
1354
1372
|
width,
|
|
@@ -1365,12 +1383,12 @@ function buildTickScale(component, index) {
|
|
|
1365
1383
|
}
|
|
1366
1384
|
function buildTickLabels(component, box) {
|
|
1367
1385
|
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 =
|
|
1386
|
+
const ticks2 = Math.max(1, chunkUHKFJBY5_cjs.finite(Number(component.parameters.ticks), 48));
|
|
1387
|
+
const major = Math.max(1, chunkUHKFJBY5_cjs.finite(Number(component.parameters.major), 5));
|
|
1388
|
+
const start = chunkUHKFJBY5_cjs.finite(Number(component.parameters.start), 225) * Math.PI / 180;
|
|
1389
|
+
const sweep = chunkUHKFJBY5_cjs.finite(Number(component.parameters.sweep), 270) * Math.PI / 180;
|
|
1390
|
+
const radius = chunkUHKFJBY5_cjs.finite(Number(component.parameters.radius), 0.9) + chunkUHKFJBY5_cjs.finite(labels.offset, 0.08);
|
|
1391
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(labels.size, 12);
|
|
1374
1392
|
const centerX = box.x + box.width / 2;
|
|
1375
1393
|
const centerY = box.y + box.height / 2;
|
|
1376
1394
|
const count = Math.floor(ticks2 / major);
|
|
@@ -1385,10 +1403,10 @@ function buildTickLabels(component, box) {
|
|
|
1385
1403
|
id: `widget-${component.id}-label-${step}`,
|
|
1386
1404
|
type: "text",
|
|
1387
1405
|
order: box.order + 0.1,
|
|
1388
|
-
bounds:
|
|
1406
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(labelBox, 0, 2),
|
|
1389
1407
|
...labelBox,
|
|
1390
1408
|
lines: [String(Math.round(box.max * fraction * 10) / 10)],
|
|
1391
|
-
fontFamily: labels.fontFamily ||
|
|
1409
|
+
fontFamily: labels.fontFamily || chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
1392
1410
|
fontSize,
|
|
1393
1411
|
fontWeight: labels.weight ?? "normal",
|
|
1394
1412
|
color: labels.color || "#8f95c4",
|
|
@@ -1400,20 +1418,20 @@ function buildTickLabels(component, box) {
|
|
|
1400
1418
|
return nodes;
|
|
1401
1419
|
}
|
|
1402
1420
|
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, (
|
|
1421
|
+
const x = chunkUHKFJBY5_cjs.finite(component.x, 0);
|
|
1422
|
+
const y = chunkUHKFJBY5_cjs.finite(component.y, 0);
|
|
1423
|
+
const width = Math.max(0, chunkUHKFJBY5_cjs.finite(component.width, 120));
|
|
1424
|
+
const height = Math.max(0, chunkUHKFJBY5_cjs.finite(component.height, 360));
|
|
1425
|
+
const rotation = chunkUHKFJBY5_cjs.finite(component.rotation, 0);
|
|
1426
|
+
const min = chunkUHKFJBY5_cjs.finite(component.min, 0);
|
|
1427
|
+
const max = chunkUHKFJBY5_cjs.finite(component.max, 100);
|
|
1428
|
+
const progress = max === min ? 0 : Math.min(1, Math.max(0, (chunkUHKFJBY5_cjs.finite(Number(component.value), min) - min) / (max - min)));
|
|
1411
1429
|
const nodes = [
|
|
1412
1430
|
{
|
|
1413
1431
|
id: `widget-${component.id}`,
|
|
1414
1432
|
type: "shader-surface",
|
|
1415
1433
|
order: 1e4 + index,
|
|
1416
|
-
bounds:
|
|
1434
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x, y, width, height }, rotation, 2),
|
|
1417
1435
|
x,
|
|
1418
1436
|
y,
|
|
1419
1437
|
width,
|
|
@@ -1431,14 +1449,14 @@ function buildRuler(component, index) {
|
|
|
1431
1449
|
function buildRulerLabels(component, box) {
|
|
1432
1450
|
const labels = component.labels ?? {};
|
|
1433
1451
|
const horizontal = component.parameters.axis === "horizontal";
|
|
1434
|
-
const ticks2 = Math.max(1,
|
|
1435
|
-
const major = Math.max(1,
|
|
1436
|
-
const inset =
|
|
1437
|
-
const line =
|
|
1452
|
+
const ticks2 = Math.max(1, chunkUHKFJBY5_cjs.finite(Number(component.parameters.ticks), 50));
|
|
1453
|
+
const major = Math.max(1, chunkUHKFJBY5_cjs.finite(Number(component.parameters.major), 5));
|
|
1454
|
+
const inset = chunkUHKFJBY5_cjs.finite(Number(component.parameters.inset), 0.05) > 0 ? chunkUHKFJBY5_cjs.finite(Number(component.parameters.inset), 0.05) : 0.05;
|
|
1455
|
+
const line = chunkUHKFJBY5_cjs.finite(Number(component.parameters.line), 0.7) > 0 ? chunkUHKFJBY5_cjs.finite(Number(component.parameters.line), 0.7) : 0.7;
|
|
1438
1456
|
const across = horizontal ? box.height : box.width;
|
|
1439
|
-
const tickLength = (
|
|
1440
|
-
const edge = line * across - 0.12 * across - tickLength -
|
|
1441
|
-
const fontSize =
|
|
1457
|
+
const tickLength = (chunkUHKFJBY5_cjs.finite(Number(component.parameters.length), 0.1) > 0 ? chunkUHKFJBY5_cjs.finite(Number(component.parameters.length), 0.1) : 0.1) * across * 1.9;
|
|
1458
|
+
const edge = line * across - 0.12 * across - tickLength - chunkUHKFJBY5_cjs.finite(labels.offset, 0.04) * across;
|
|
1459
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(labels.size, 12);
|
|
1442
1460
|
const count = Math.floor(ticks2 / major);
|
|
1443
1461
|
const nodes = [];
|
|
1444
1462
|
for (let step = 0; step <= count; step += 1) {
|
|
@@ -1449,10 +1467,10 @@ function buildRulerLabels(component, box) {
|
|
|
1449
1467
|
id: `widget-${component.id}-label-${step}`,
|
|
1450
1468
|
type: "text",
|
|
1451
1469
|
order: box.order + 0.1,
|
|
1452
|
-
bounds:
|
|
1470
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(labelBox, 0, 2),
|
|
1453
1471
|
...labelBox,
|
|
1454
1472
|
lines: [String(Math.round((box.min + (box.max - box.min) * fraction) * 10) / 10)],
|
|
1455
|
-
fontFamily: labels.fontFamily ||
|
|
1473
|
+
fontFamily: labels.fontFamily || chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
1456
1474
|
fontSize,
|
|
1457
1475
|
fontWeight: labels.weight ?? "normal",
|
|
1458
1476
|
color: labels.color || "#8f95c4",
|
|
@@ -1468,10 +1486,10 @@ function buildRulerLabels(component, box) {
|
|
|
1468
1486
|
var DISABLED_INK = "#94a3b8";
|
|
1469
1487
|
function controlBox(component, index, fallback) {
|
|
1470
1488
|
return {
|
|
1471
|
-
x:
|
|
1472
|
-
y:
|
|
1473
|
-
width: Math.max(1,
|
|
1474
|
-
height: Math.max(1,
|
|
1489
|
+
x: chunkUHKFJBY5_cjs.finite(component.x, 0),
|
|
1490
|
+
y: chunkUHKFJBY5_cjs.finite(component.y, 0),
|
|
1491
|
+
width: Math.max(1, chunkUHKFJBY5_cjs.finite(component.width, fallback.width)),
|
|
1492
|
+
height: Math.max(1, chunkUHKFJBY5_cjs.finite(component.height, fallback.height)),
|
|
1475
1493
|
order: 1e4 + index
|
|
1476
1494
|
};
|
|
1477
1495
|
}
|
|
@@ -1484,17 +1502,17 @@ function fade(component, style) {
|
|
|
1484
1502
|
const shown = component.disabled ? { ...style, opacity: 0.4 } : style;
|
|
1485
1503
|
return animate > 0 ? { ...shown, transition: animate } : shown;
|
|
1486
1504
|
}
|
|
1487
|
-
function hitArea(component, box) {
|
|
1505
|
+
function hitArea(component, box, takesClicks = true) {
|
|
1488
1506
|
return {
|
|
1489
1507
|
id: `widget-${component.id}`,
|
|
1490
1508
|
type: "rect",
|
|
1491
1509
|
order: box.order,
|
|
1492
|
-
bounds:
|
|
1510
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(box, 0, 0),
|
|
1493
1511
|
x: box.x,
|
|
1494
1512
|
y: box.y,
|
|
1495
1513
|
width: box.width,
|
|
1496
1514
|
height: box.height,
|
|
1497
|
-
style: { fill: { kind: "none" }, stroke: { kind: "none" }, pointerEvents: "all" }
|
|
1515
|
+
style: { fill: { kind: "none" }, stroke: { kind: "none" }, pointerEvents: takesClicks ? "all" : "none" }
|
|
1498
1516
|
};
|
|
1499
1517
|
}
|
|
1500
1518
|
function labelText(component, part, area, label, order) {
|
|
@@ -1502,13 +1520,13 @@ function labelText(component, part, area, label, order) {
|
|
|
1502
1520
|
id: `widget-${component.id}-${part}`,
|
|
1503
1521
|
type: "text",
|
|
1504
1522
|
order,
|
|
1505
|
-
bounds:
|
|
1523
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(area, 0, 0),
|
|
1506
1524
|
x: area.x,
|
|
1507
1525
|
y: area.y,
|
|
1508
1526
|
width: area.width,
|
|
1509
1527
|
height: area.height,
|
|
1510
1528
|
lines: [label.text],
|
|
1511
|
-
fontFamily:
|
|
1529
|
+
fontFamily: chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
1512
1530
|
fontSize: label.fontSize,
|
|
1513
1531
|
fontWeight: "600",
|
|
1514
1532
|
color: label.color,
|
|
@@ -1527,7 +1545,7 @@ function buildButton(component, index) {
|
|
|
1527
1545
|
id: `widget-${component.id}-face`,
|
|
1528
1546
|
type: "rect",
|
|
1529
1547
|
order: box.order + 0.1,
|
|
1530
|
-
bounds:
|
|
1548
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(box, 0, 0),
|
|
1531
1549
|
x: box.x,
|
|
1532
1550
|
y: box.y,
|
|
1533
1551
|
width: box.width,
|
|
@@ -1566,7 +1584,7 @@ function boxNode(component, box, square) {
|
|
|
1566
1584
|
id: `widget-${component.id}-box`,
|
|
1567
1585
|
type: "rect",
|
|
1568
1586
|
order: box.order + 0.1,
|
|
1569
|
-
bounds:
|
|
1587
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(square, 0, 2),
|
|
1570
1588
|
...square,
|
|
1571
1589
|
rx: square.width * CORNER_RATIO,
|
|
1572
1590
|
style: fade(component, {
|
|
@@ -1581,7 +1599,7 @@ function checkNode(component, box, square) {
|
|
|
1581
1599
|
id: `widget-${component.id}-check`,
|
|
1582
1600
|
type: "path",
|
|
1583
1601
|
order: box.order + 0.2,
|
|
1584
|
-
bounds:
|
|
1602
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(square, 0, 0),
|
|
1585
1603
|
d: checkPath(square),
|
|
1586
1604
|
style: fade(component, {
|
|
1587
1605
|
fill: { kind: "none" },
|
|
@@ -1615,6 +1633,268 @@ function buildCheckbox(component, index) {
|
|
|
1615
1633
|
];
|
|
1616
1634
|
}
|
|
1617
1635
|
|
|
1636
|
+
// src/renderScene/artifacts/component/hand.ts
|
|
1637
|
+
var MIN_TIP = 0.25;
|
|
1638
|
+
function withAlpha(color, alpha) {
|
|
1639
|
+
const rgb = chunkUHKFJBY5_cjs.parseHexRgb(color);
|
|
1640
|
+
return rgb && alpha < 1 ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${Number(alpha.toFixed(3))})` : color;
|
|
1641
|
+
}
|
|
1642
|
+
var num = (value) => String(Number(value.toFixed(3)));
|
|
1643
|
+
var isOff = (component, key) => textProperty(component, key) === "none";
|
|
1644
|
+
var colorOr = (component, key, fallback) => isOff(component, key) ? fallback : textProperty(component, key) || fallback;
|
|
1645
|
+
function handOf(component, box) {
|
|
1646
|
+
const radius = Math.min(box.width, box.height) / 2;
|
|
1647
|
+
const root = Math.max(0.5, numberProperty2(component, "width"));
|
|
1648
|
+
const taper = Math.min(1, Math.max(0, numberProperty2(component, "taper")));
|
|
1649
|
+
return {
|
|
1650
|
+
cx: box.x + box.width / 2,
|
|
1651
|
+
cy: box.y + box.height / 2,
|
|
1652
|
+
radius,
|
|
1653
|
+
length: Math.max(1, numberProperty2(component, "length") * radius),
|
|
1654
|
+
tail: Math.max(0, numberProperty2(component, "tail") * radius),
|
|
1655
|
+
gap: Math.max(0, numberProperty2(component, "gap") * radius),
|
|
1656
|
+
rootHalf: root / 2,
|
|
1657
|
+
tipHalf: Math.max(MIN_TIP, root * taper / 2)
|
|
1658
|
+
};
|
|
1659
|
+
}
|
|
1660
|
+
function outline({ cx, cy, length, tail, gap, rootHalf, tipHalf }) {
|
|
1661
|
+
const root = gap > 0 ? cy - gap : cy;
|
|
1662
|
+
const back = gap > 0 ? 0 : tail;
|
|
1663
|
+
const tipLeft = `L${num(cx - tipHalf)} ${num(cy - length)}`;
|
|
1664
|
+
const tip = `A${num(tipHalf)} ${num(tipHalf)} 0 0 1 ${num(cx + tipHalf)} ${num(cy - length)}`;
|
|
1665
|
+
const round2 = `A${num(rootHalf)} ${num(rootHalf)} 0 0 1 ${num(cx - rootHalf)} ${num(root + back)}`;
|
|
1666
|
+
if (gap > 0) {
|
|
1667
|
+
return `M${num(cx - rootHalf)} ${num(root)}${tipLeft}${tip}L${num(cx + rootHalf)} ${num(root)}${round2}Z`;
|
|
1668
|
+
}
|
|
1669
|
+
return [
|
|
1670
|
+
`M${num(cx - rootHalf)} ${num(root + back)}`,
|
|
1671
|
+
`L${num(cx - rootHalf)} ${num(root)}`,
|
|
1672
|
+
tipLeft,
|
|
1673
|
+
tip,
|
|
1674
|
+
`L${num(cx + rootHalf)} ${num(root)}`,
|
|
1675
|
+
`L${num(cx + rootHalf)} ${num(root + back)}`,
|
|
1676
|
+
back > 0 ? round2 : `L${num(cx - rootHalf)} ${num(root)}`,
|
|
1677
|
+
"Z"
|
|
1678
|
+
].join("");
|
|
1679
|
+
}
|
|
1680
|
+
function shaped(hand, layer) {
|
|
1681
|
+
const rootHalf = hand.rootHalf * layer.scale;
|
|
1682
|
+
const tipHalf = layer.taper === void 0 ? hand.tipHalf * layer.scale : rootHalf * layer.taper;
|
|
1683
|
+
return { ...hand, length: hand.length * (layer.length ?? 1), rootHalf, tipHalf: Math.max(MIN_TIP, tipHalf) };
|
|
1684
|
+
}
|
|
1685
|
+
function stopsPaint(hand, stops, fadeOut, clear) {
|
|
1686
|
+
const tail = hand.gap > 0 ? 0 : hand.tail;
|
|
1687
|
+
const offset = (along2) => (tail + along2 * hand.length) / (hand.length + tail) * 100;
|
|
1688
|
+
const [, firstColor, firstAlpha] = stops[0];
|
|
1689
|
+
return {
|
|
1690
|
+
kind: "linear-gradient",
|
|
1691
|
+
angle: -90,
|
|
1692
|
+
stops: [
|
|
1693
|
+
...tail > 0 ? [{ offset: 0, color: withAlpha(firstColor, firstAlpha * (clear ? 0 : 1 - fadeOut)) }] : [],
|
|
1694
|
+
...stops.map(([along2, color, alpha], position) => ({
|
|
1695
|
+
offset: offset(along2),
|
|
1696
|
+
color: withAlpha(color, clear && position === 0 ? 0 : alpha)
|
|
1697
|
+
}))
|
|
1698
|
+
]
|
|
1699
|
+
};
|
|
1700
|
+
}
|
|
1701
|
+
function plainPaint(hand, layer, fadeOut, tipFade) {
|
|
1702
|
+
if (fadeOut <= 0 && tipFade <= 0 && !layer.clear) {
|
|
1703
|
+
return solid(layer.color);
|
|
1704
|
+
}
|
|
1705
|
+
return {
|
|
1706
|
+
kind: "linear-gradient",
|
|
1707
|
+
angle: -90,
|
|
1708
|
+
stops: [
|
|
1709
|
+
{ offset: 0, color: withAlpha(layer.root, layer.clear ? 0 : 1 - fadeOut) },
|
|
1710
|
+
// A tail is lit at the pivot and dissolves at its end.
|
|
1711
|
+
...hand.gap === 0 && hand.tail > 0 ? [{ offset: hand.tail / (hand.length + hand.tail) * 100, color: layer.root }] : [],
|
|
1712
|
+
{ offset: 100, color: withAlpha(layer.color, 1 - tipFade) }
|
|
1713
|
+
]
|
|
1714
|
+
};
|
|
1715
|
+
}
|
|
1716
|
+
function handLayer(component, box, base, angle, layer, order) {
|
|
1717
|
+
const hand = shaped(base, layer);
|
|
1718
|
+
const fadeOut = Math.min(1, Math.max(0, numberProperty2(component, "fade")));
|
|
1719
|
+
const tipFade = Math.min(1, Math.max(0, layer.tipFade ?? numberProperty2(component, "tipFade")));
|
|
1720
|
+
const glow = numberProperty2(component, "glow");
|
|
1721
|
+
const soft = layer.blur > 0;
|
|
1722
|
+
const reach = Math.max(hand.rootHalf, hand.tipHalf);
|
|
1723
|
+
const near = hand.gap > 0 ? -hand.gap : hand.tail;
|
|
1724
|
+
const extent = { x: hand.cx - reach, y: hand.cy - hand.length, width: reach * 2, height: hand.length + near };
|
|
1725
|
+
return {
|
|
1726
|
+
id: `widget-${component.id}-${layer.part}`,
|
|
1727
|
+
type: "path",
|
|
1728
|
+
order: box.order + order,
|
|
1729
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(extent, 0, 0),
|
|
1730
|
+
d: outline(hand),
|
|
1731
|
+
rotation: angle,
|
|
1732
|
+
rotationCenter: { x: hand.cx, y: hand.cy },
|
|
1733
|
+
style: fade(component, {
|
|
1734
|
+
// The gradient runs from the tail to the tip, and turns with the hand.
|
|
1735
|
+
fill: layer.stops ? stopsPaint(hand, layer.stops, fadeOut, Boolean(layer.clear)) : plainPaint(hand, layer, fadeOut, tipFade),
|
|
1736
|
+
stroke: { kind: "none" },
|
|
1737
|
+
...soft ? { blur: layer.blur, opacity: layer.opacity } : {},
|
|
1738
|
+
...!soft && glow > 0 && !isOff(component, "glowColor") ? {
|
|
1739
|
+
shadow: {
|
|
1740
|
+
color: colorOr(component, "glowColor", layer.color),
|
|
1741
|
+
opacity: 1,
|
|
1742
|
+
blur: glow,
|
|
1743
|
+
dx: 0,
|
|
1744
|
+
dy: 0
|
|
1745
|
+
}
|
|
1746
|
+
} : {}
|
|
1747
|
+
})
|
|
1748
|
+
};
|
|
1749
|
+
}
|
|
1750
|
+
function trailLayers(color, root, light, soft, clear, lit) {
|
|
1751
|
+
const trail = [
|
|
1752
|
+
{
|
|
1753
|
+
part: "hand-light",
|
|
1754
|
+
scale: 4.5,
|
|
1755
|
+
length: 0.55,
|
|
1756
|
+
taper: 0.15,
|
|
1757
|
+
blur: soft * 3,
|
|
1758
|
+
opacity: 1,
|
|
1759
|
+
color: light,
|
|
1760
|
+
root: light,
|
|
1761
|
+
stops: [
|
|
1762
|
+
[0, light, 0.95],
|
|
1763
|
+
[0.35, light, 0.45],
|
|
1764
|
+
[1, light, 0]
|
|
1765
|
+
]
|
|
1766
|
+
},
|
|
1767
|
+
{
|
|
1768
|
+
part: "hand-body",
|
|
1769
|
+
scale: 1.6,
|
|
1770
|
+
taper: 0.25,
|
|
1771
|
+
blur: soft,
|
|
1772
|
+
opacity: 1,
|
|
1773
|
+
color,
|
|
1774
|
+
root,
|
|
1775
|
+
clear,
|
|
1776
|
+
stops: [
|
|
1777
|
+
[0, root, 1],
|
|
1778
|
+
[0.18, color, 1],
|
|
1779
|
+
[0.6, color, 0.55],
|
|
1780
|
+
[1, color, 0]
|
|
1781
|
+
]
|
|
1782
|
+
},
|
|
1783
|
+
{
|
|
1784
|
+
part: "hand",
|
|
1785
|
+
scale: 0.55,
|
|
1786
|
+
length: 0.8,
|
|
1787
|
+
taper: 0.3,
|
|
1788
|
+
blur: soft * 0.3,
|
|
1789
|
+
opacity: 1,
|
|
1790
|
+
color: root,
|
|
1791
|
+
root,
|
|
1792
|
+
clear,
|
|
1793
|
+
stops: [
|
|
1794
|
+
[0, root, 1],
|
|
1795
|
+
[0.45, root, 0.6],
|
|
1796
|
+
[1, root, 0]
|
|
1797
|
+
]
|
|
1798
|
+
}
|
|
1799
|
+
];
|
|
1800
|
+
return lit ? trail : trail.slice(1);
|
|
1801
|
+
}
|
|
1802
|
+
function handLayers(component, box, hand, angle) {
|
|
1803
|
+
const color = textProperty(component, "color");
|
|
1804
|
+
const root = colorOr(component, "root", color);
|
|
1805
|
+
const light = colorOr(component, "glowColor", color);
|
|
1806
|
+
const lit = !isOff(component, "glowColor");
|
|
1807
|
+
const clear = isOff(component, "root");
|
|
1808
|
+
const soft = numberProperty2(component, "soft");
|
|
1809
|
+
const bloom = numberProperty2(component, "bloom");
|
|
1810
|
+
if (soft > 0) {
|
|
1811
|
+
return trailLayers(color, root, light, soft, clear, lit).map(
|
|
1812
|
+
(layer, position) => handLayer(component, box, hand, angle, layer, 0.26 + position * 0.02)
|
|
1813
|
+
);
|
|
1814
|
+
}
|
|
1815
|
+
return [
|
|
1816
|
+
// A blurred light under the hand, bright at the pivot and dark at the tip.
|
|
1817
|
+
...bloom > 0 && lit ? [
|
|
1818
|
+
handLayer(
|
|
1819
|
+
component,
|
|
1820
|
+
box,
|
|
1821
|
+
hand,
|
|
1822
|
+
angle,
|
|
1823
|
+
{ part: "hand-bloom", scale: 4, blur: bloom, opacity: 0.9, color: light, root: light, tipFade: 1 },
|
|
1824
|
+
0.26
|
|
1825
|
+
)
|
|
1826
|
+
] : [],
|
|
1827
|
+
handLayer(component, box, hand, angle, { part: "hand", scale: 1, blur: 0, opacity: 1, color, root, clear }, 0.3)
|
|
1828
|
+
];
|
|
1829
|
+
}
|
|
1830
|
+
function hubNode(component, box, hand, radius) {
|
|
1831
|
+
const ringWidth = numberProperty2(component, "hubRing");
|
|
1832
|
+
return {
|
|
1833
|
+
id: `widget-${component.id}-hub`,
|
|
1834
|
+
type: "ellipse",
|
|
1835
|
+
order: box.order + 0.4,
|
|
1836
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(
|
|
1837
|
+
{ x: hand.cx - radius, y: hand.cy - radius, width: radius * 2, height: radius * 2 },
|
|
1838
|
+
0,
|
|
1839
|
+
ringWidth
|
|
1840
|
+
),
|
|
1841
|
+
cx: hand.cx,
|
|
1842
|
+
cy: hand.cy,
|
|
1843
|
+
rx: Math.max(0.5, radius - ringWidth / 2),
|
|
1844
|
+
ry: Math.max(0.5, radius - ringWidth / 2),
|
|
1845
|
+
style: fade(component, {
|
|
1846
|
+
fill: isOff(component, "hubFill") ? { kind: "none" } : solid(textProperty(component, "hubFill")),
|
|
1847
|
+
stroke: ringWidth > 0 ? solid(textProperty(component, "color")) : { kind: "none" },
|
|
1848
|
+
strokeWidth: ringWidth,
|
|
1849
|
+
...numberProperty2(component, "glow") > 0 && !isOff(component, "glowColor") ? {
|
|
1850
|
+
shadow: {
|
|
1851
|
+
color: colorOr(component, "glowColor", textProperty(component, "color")),
|
|
1852
|
+
opacity: 1,
|
|
1853
|
+
blur: numberProperty2(component, "glow"),
|
|
1854
|
+
dx: 0,
|
|
1855
|
+
dy: 0
|
|
1856
|
+
}
|
|
1857
|
+
} : {}
|
|
1858
|
+
})
|
|
1859
|
+
};
|
|
1860
|
+
}
|
|
1861
|
+
var HIT_HALF = 8;
|
|
1862
|
+
function pickNodes(component, box, hand, angle) {
|
|
1863
|
+
const reach = { ...hand, rootHalf: Math.max(hand.rootHalf, HIT_HALF), tipHalf: Math.max(hand.tipHalf, HIT_HALF) };
|
|
1864
|
+
const near = reach.gap > 0 ? -reach.gap : reach.tail;
|
|
1865
|
+
const extent = {
|
|
1866
|
+
x: reach.cx - HIT_HALF,
|
|
1867
|
+
y: reach.cy - reach.length,
|
|
1868
|
+
width: HIT_HALF * 2,
|
|
1869
|
+
height: reach.length + near
|
|
1870
|
+
};
|
|
1871
|
+
return [
|
|
1872
|
+
hitArea(component, box, false),
|
|
1873
|
+
{
|
|
1874
|
+
id: `widget-${component.id}-pick`,
|
|
1875
|
+
type: "path",
|
|
1876
|
+
order: box.order + 0.5,
|
|
1877
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(extent, 0, 0),
|
|
1878
|
+
d: outline(reach),
|
|
1879
|
+
rotation: angle,
|
|
1880
|
+
rotationCenter: { x: reach.cx, y: reach.cy },
|
|
1881
|
+
style: { fill: { kind: "none" }, stroke: { kind: "none" }, pointerEvents: "all" }
|
|
1882
|
+
}
|
|
1883
|
+
];
|
|
1884
|
+
}
|
|
1885
|
+
function buildHand(component, index) {
|
|
1886
|
+
const box = controlBox(component, index, { width: 200, height: 200 });
|
|
1887
|
+
const hand = handOf(component, box);
|
|
1888
|
+
const max = numberProperty2(component, "max") || 1;
|
|
1889
|
+
const angle = numberProperty2(component, "start") + Number(component.value) / max * 360;
|
|
1890
|
+
const hub = numberProperty2(component, "hub");
|
|
1891
|
+
return [
|
|
1892
|
+
...pickNodes(component, box, hand, angle),
|
|
1893
|
+
...handLayers(component, box, hand, angle),
|
|
1894
|
+
...hub > 0 ? [hubNode(component, box, hand, hub)] : []
|
|
1895
|
+
];
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1618
1898
|
// src/renderScene/artifacts/component/knob.ts
|
|
1619
1899
|
var DOT_RATIO = 0.62;
|
|
1620
1900
|
function decimals(step) {
|
|
@@ -1650,7 +1930,7 @@ function arcNode(component, box, dial, part, order, color, length, extra = {}) {
|
|
|
1650
1930
|
id: `widget-${component.id}-${part}`,
|
|
1651
1931
|
type: "ellipse",
|
|
1652
1932
|
order: box.order + order,
|
|
1653
|
-
bounds:
|
|
1933
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
|
|
1654
1934
|
cx,
|
|
1655
1935
|
cy,
|
|
1656
1936
|
rx: radius,
|
|
@@ -1671,7 +1951,7 @@ function discNode(component, box, part, order, center, radius, fill2) {
|
|
|
1671
1951
|
id: `widget-${component.id}-${part}`,
|
|
1672
1952
|
type: "ellipse",
|
|
1673
1953
|
order: box.order + order,
|
|
1674
|
-
bounds:
|
|
1954
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2 }, 0, 0),
|
|
1675
1955
|
cx: center.x,
|
|
1676
1956
|
cy: center.y,
|
|
1677
1957
|
rx: radius,
|
|
@@ -1751,7 +2031,7 @@ function buildRing(component, box, fraction, round2) {
|
|
|
1751
2031
|
id: `widget-${component.id}-${part}`,
|
|
1752
2032
|
type: "ellipse",
|
|
1753
2033
|
order: box.order + order,
|
|
1754
|
-
bounds:
|
|
2034
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
|
|
1755
2035
|
cx,
|
|
1756
2036
|
cy,
|
|
1757
2037
|
rx: radius,
|
|
@@ -1777,7 +2057,7 @@ function buildBar(component, box, fraction, round2) {
|
|
|
1777
2057
|
id: `widget-${component.id}-${part}`,
|
|
1778
2058
|
type: "rect",
|
|
1779
2059
|
order: box.order + order,
|
|
1780
|
-
bounds:
|
|
2060
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(shape, 0, 0),
|
|
1781
2061
|
...shape,
|
|
1782
2062
|
rx: radius,
|
|
1783
2063
|
style: fade(component, {
|
|
@@ -1832,7 +2112,7 @@ function buildSegmented(component, index) {
|
|
|
1832
2112
|
id: `widget-${component.id}-track`,
|
|
1833
2113
|
type: "rect",
|
|
1834
2114
|
order: box.order + 0.1,
|
|
1835
|
-
bounds:
|
|
2115
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(box, 0, 0),
|
|
1836
2116
|
x: box.x,
|
|
1837
2117
|
y: box.y,
|
|
1838
2118
|
width: box.width,
|
|
@@ -1844,7 +2124,7 @@ function buildSegmented(component, index) {
|
|
|
1844
2124
|
id: `widget-${component.id}-active`,
|
|
1845
2125
|
type: "rect",
|
|
1846
2126
|
order: box.order + 0.2,
|
|
1847
|
-
bounds:
|
|
2127
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x: box.x + inset + active * cellWidth, width: cellWidth, ...cell }, 0, 0),
|
|
1848
2128
|
x: box.x + inset + active * cellWidth,
|
|
1849
2129
|
y: cell.y,
|
|
1850
2130
|
width: cellWidth,
|
|
@@ -1896,7 +2176,7 @@ var rect = (component, box, part, order, shape, color, extra = {}) => ({
|
|
|
1896
2176
|
id: `widget-${component.id}-${part}`,
|
|
1897
2177
|
type: "rect",
|
|
1898
2178
|
order: box.order + order,
|
|
1899
|
-
bounds:
|
|
2179
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(shape, 0, 0),
|
|
1900
2180
|
...shape,
|
|
1901
2181
|
style: fade(component, { fill: solid(color), stroke: { kind: "none" }, ...extra })
|
|
1902
2182
|
});
|
|
@@ -1952,7 +2232,7 @@ function buildLine(component, box, thumbs, vertical) {
|
|
|
1952
2232
|
id: `widget-${component.id}-${part}`,
|
|
1953
2233
|
type: "ellipse",
|
|
1954
2234
|
order: box.order + order,
|
|
1955
|
-
bounds:
|
|
2235
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, 0),
|
|
1956
2236
|
cx,
|
|
1957
2237
|
cy,
|
|
1958
2238
|
rx: radius,
|
|
@@ -2114,7 +2394,7 @@ function buildSwitch(component, index) {
|
|
|
2114
2394
|
id: `widget-${component.id}-track`,
|
|
2115
2395
|
type: "rect",
|
|
2116
2396
|
order: box.order + 0.1,
|
|
2117
|
-
bounds:
|
|
2397
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(box, 0, 0),
|
|
2118
2398
|
x: box.x,
|
|
2119
2399
|
y: box.y,
|
|
2120
2400
|
width: box.width,
|
|
@@ -2129,7 +2409,7 @@ function buildSwitch(component, index) {
|
|
|
2129
2409
|
id: `widget-${component.id}-thumb`,
|
|
2130
2410
|
type: "ellipse",
|
|
2131
2411
|
order: box.order + 0.2,
|
|
2132
|
-
bounds:
|
|
2412
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(thumb, 0, 0),
|
|
2133
2413
|
cx: centerX,
|
|
2134
2414
|
cy: box.y + box.height / 2,
|
|
2135
2415
|
rx: radius,
|
|
@@ -2153,7 +2433,7 @@ function buildToggleButton(component, index) {
|
|
|
2153
2433
|
id: `widget-${component.id}-face`,
|
|
2154
2434
|
type: "rect",
|
|
2155
2435
|
order: box.order + 0.1,
|
|
2156
|
-
bounds:
|
|
2436
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(box, 0, 2),
|
|
2157
2437
|
x: box.x,
|
|
2158
2438
|
y: box.y,
|
|
2159
2439
|
width: box.width,
|
|
@@ -2192,6 +2472,7 @@ var builders = /* @__PURE__ */ new Map([
|
|
|
2192
2472
|
["progress", asComponentBuilder(buildProgress)],
|
|
2193
2473
|
["segmented", asComponentBuilder(buildSegmented)],
|
|
2194
2474
|
["knob", asComponentBuilder(buildKnob)],
|
|
2475
|
+
["hand", asComponentBuilder(buildHand)],
|
|
2195
2476
|
["range", asComponentBuilder(buildSlider)]
|
|
2196
2477
|
]);
|
|
2197
2478
|
function registerComponentBuilder(type, builder) {
|
|
@@ -2208,8 +2489,8 @@ function getComponentBuilder(type) {
|
|
|
2208
2489
|
|
|
2209
2490
|
// src/renderScene/artifacts/component/build.ts
|
|
2210
2491
|
function ariaOf(component) {
|
|
2211
|
-
const role =
|
|
2212
|
-
if (!role || !
|
|
2492
|
+
const role = chunkUHKFJBY5_cjs.getComponentDescriptor(component.type)?.role;
|
|
2493
|
+
if (!role || !chunkUHKFJBY5_cjs.isGenericComponent(component)) {
|
|
2213
2494
|
return void 0;
|
|
2214
2495
|
}
|
|
2215
2496
|
const flag = typeof component.value === "boolean" ? component.value : void 0;
|
|
@@ -2220,12 +2501,12 @@ function ariaOf(component) {
|
|
|
2220
2501
|
};
|
|
2221
2502
|
}
|
|
2222
2503
|
function labelOf(component) {
|
|
2223
|
-
return component.label ?? (
|
|
2504
|
+
return component.label ?? (chunkUHKFJBY5_cjs.isGenericComponent(component) ? component.id : String(component.value));
|
|
2224
2505
|
}
|
|
2225
2506
|
function buildComponents(components) {
|
|
2226
2507
|
return components.flatMap((component, index) => {
|
|
2227
2508
|
const build = getComponentBuilder(component.type) ?? buildPlaceholder;
|
|
2228
|
-
const nodes =
|
|
2509
|
+
const nodes = chunkUHKFJBY5_cjs.tag(
|
|
2229
2510
|
build(component, index),
|
|
2230
2511
|
"widget",
|
|
2231
2512
|
component.id,
|
|
@@ -2265,13 +2546,13 @@ function tabBox(input, thickness, length) {
|
|
|
2265
2546
|
y,
|
|
2266
2547
|
width: length,
|
|
2267
2548
|
height: thickness,
|
|
2268
|
-
path:
|
|
2549
|
+
path: chunkUHKFJBY5_cjs.bottomRoundedRectPath(x, y, length, thickness, TAB_RADIUS)
|
|
2269
2550
|
};
|
|
2270
2551
|
}
|
|
2271
2552
|
case "left": {
|
|
2272
2553
|
const x = input.x - thickness;
|
|
2273
2554
|
const y = input.y - inset;
|
|
2274
|
-
return { x, y, width: thickness, height: length, path:
|
|
2555
|
+
return { x, y, width: thickness, height: length, path: chunkUHKFJBY5_cjs.leftRoundedRectPath(x, y, thickness, length, TAB_RADIUS) };
|
|
2275
2556
|
}
|
|
2276
2557
|
case "right": {
|
|
2277
2558
|
const x = input.x + input.width;
|
|
@@ -2281,13 +2562,13 @@ function tabBox(input, thickness, length) {
|
|
|
2281
2562
|
y,
|
|
2282
2563
|
width: thickness,
|
|
2283
2564
|
height: length,
|
|
2284
|
-
path:
|
|
2565
|
+
path: chunkUHKFJBY5_cjs.rightRoundedRectPath(x, y, thickness, length, TAB_RADIUS)
|
|
2285
2566
|
};
|
|
2286
2567
|
}
|
|
2287
2568
|
default: {
|
|
2288
2569
|
const x = input.x - inset;
|
|
2289
2570
|
const y = input.y - thickness;
|
|
2290
|
-
return { x, y, width: length, height: thickness, path:
|
|
2571
|
+
return { x, y, width: length, height: thickness, path: chunkUHKFJBY5_cjs.topRoundedRectPath(x, y, length, thickness, TAB_RADIUS) };
|
|
2291
2572
|
}
|
|
2292
2573
|
}
|
|
2293
2574
|
}
|
|
@@ -2296,7 +2577,7 @@ function renderTitleTab(input) {
|
|
|
2296
2577
|
const padding = 16;
|
|
2297
2578
|
const length = Math.max(120, input.title.length * input.fontSize * 0.62 + padding * 2);
|
|
2298
2579
|
const box = tabBox(input, thickness, length);
|
|
2299
|
-
const bounds =
|
|
2580
|
+
const bounds = chunkUHKFJBY5_cjs.boxBounds(box, 6);
|
|
2300
2581
|
const vertical = input.labelPosition === "left" || input.labelPosition === "right";
|
|
2301
2582
|
return [
|
|
2302
2583
|
{
|
|
@@ -2324,7 +2605,7 @@ function horizontalTitleText(input, box, padding, bounds) {
|
|
|
2324
2605
|
width: Math.max(0, box.width - padding * 2),
|
|
2325
2606
|
height: box.height,
|
|
2326
2607
|
lines: [input.title],
|
|
2327
|
-
fontFamily: input.fontFamily ??
|
|
2608
|
+
fontFamily: input.fontFamily ?? chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
2328
2609
|
fontSize: input.fontSize,
|
|
2329
2610
|
fontWeight: input.fontWeight,
|
|
2330
2611
|
color: input.textColor,
|
|
@@ -2348,7 +2629,7 @@ function verticalTitleText(input, box, padding, bounds) {
|
|
|
2348
2629
|
width: textLength,
|
|
2349
2630
|
height: textThickness,
|
|
2350
2631
|
lines: [input.title],
|
|
2351
|
-
fontFamily: input.fontFamily ??
|
|
2632
|
+
fontFamily: input.fontFamily ?? chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
2352
2633
|
fontSize: input.fontSize,
|
|
2353
2634
|
fontWeight: input.fontWeight,
|
|
2354
2635
|
color: input.textColor,
|
|
@@ -2369,7 +2650,7 @@ var SQUARED_CORNER_BY_LABEL_POSITION = {
|
|
|
2369
2650
|
};
|
|
2370
2651
|
function frameBoundaryNode(frame, order, hasTab) {
|
|
2371
2652
|
const shadow = frame.shadow ?? true;
|
|
2372
|
-
const bounds =
|
|
2653
|
+
const bounds = chunkUHKFJBY5_cjs.boxBounds(
|
|
2373
2654
|
{ x: frame.x, y: frame.y, width: frame.width, height: frame.height },
|
|
2374
2655
|
frame.strokeWidth + (shadow ? 20 : 4)
|
|
2375
2656
|
);
|
|
@@ -2404,7 +2685,7 @@ function frameBoundaryNode(frame, order, hasTab) {
|
|
|
2404
2685
|
id: `frame-${frame.id}`,
|
|
2405
2686
|
order,
|
|
2406
2687
|
bounds,
|
|
2407
|
-
d:
|
|
2688
|
+
d: chunkUHKFJBY5_cjs.cornersRoundedRectPath(frame.x, frame.y, frame.width, frame.height, radii),
|
|
2408
2689
|
detail: { of: "frameBoundary", cornerRadius: frame.cornerRadius, squareCorner: squared },
|
|
2409
2690
|
style
|
|
2410
2691
|
};
|
|
@@ -2493,7 +2774,7 @@ function labelBase(context, lane, index) {
|
|
|
2493
2774
|
id: `swimlane-label-${context.swimlane.id}-${lane.id}`,
|
|
2494
2775
|
order: context.order + 0.5 + index / 100,
|
|
2495
2776
|
lines: [lane.label],
|
|
2496
|
-
fontFamily: context.swimlane.fontFamily ??
|
|
2777
|
+
fontFamily: context.swimlane.fontFamily ?? chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
2497
2778
|
fontSize: context.swimlane.fontSize,
|
|
2498
2779
|
fontWeight: context.swimlane.fontWeight,
|
|
2499
2780
|
color: context.swimlane.textColor,
|
|
@@ -2509,7 +2790,7 @@ function horizontalLabel(context, lane, index) {
|
|
|
2509
2790
|
const y = centerY - thickness / 2;
|
|
2510
2791
|
return {
|
|
2511
2792
|
...labelBase(context, lane, index),
|
|
2512
|
-
bounds:
|
|
2793
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x, y, width, height: thickness }, -90, 12),
|
|
2513
2794
|
x,
|
|
2514
2795
|
y,
|
|
2515
2796
|
width,
|
|
@@ -2561,7 +2842,7 @@ function createSwimlaneRenderContext(swimlane, index) {
|
|
|
2561
2842
|
return {
|
|
2562
2843
|
swimlane,
|
|
2563
2844
|
order: 5e3 + index,
|
|
2564
|
-
bounds:
|
|
2845
|
+
bounds: chunkUHKFJBY5_cjs.boxBounds(
|
|
2565
2846
|
{ x: swimlane.x, y: swimlane.y, width: swimlane.width, height: swimlane.height },
|
|
2566
2847
|
swimlane.strokeWidth + 4
|
|
2567
2848
|
),
|
|
@@ -2600,9 +2881,9 @@ function buildSwimlane(swimlane, index) {
|
|
|
2600
2881
|
function buildContainers(input) {
|
|
2601
2882
|
return [
|
|
2602
2883
|
...input.frames.flatMap(
|
|
2603
|
-
(frame, index) =>
|
|
2884
|
+
(frame, index) => chunkUHKFJBY5_cjs.tag(buildFrame(frame, index), "frame", frame.id, void 0, frame.title ?? void 0)
|
|
2604
2885
|
),
|
|
2605
|
-
...input.swimlanes.flatMap((swimlane, index) =>
|
|
2886
|
+
...input.swimlanes.flatMap((swimlane, index) => chunkUHKFJBY5_cjs.tag(buildSwimlane(swimlane, index), "swimlane", swimlane.id))
|
|
2606
2887
|
];
|
|
2607
2888
|
}
|
|
2608
2889
|
|
|
@@ -2652,7 +2933,7 @@ var DEFAULT_COLOR = "#475569";
|
|
|
2652
2933
|
var CHAR_WIDTH = 0.6;
|
|
2653
2934
|
var pathData = (segments) => segments.map(([from, to]) => `M ${from.x} ${from.y} L ${to.x} ${to.y}`).join(" ");
|
|
2654
2935
|
function pathNode(dimension, name, order, segments) {
|
|
2655
|
-
const strokeWidth = Math.max(0,
|
|
2936
|
+
const strokeWidth = Math.max(0, chunkUHKFJBY5_cjs.finite(dimension.strokeWidth, 1));
|
|
2656
2937
|
const points = segments.flat();
|
|
2657
2938
|
return {
|
|
2658
2939
|
type: "path",
|
|
@@ -2674,7 +2955,7 @@ function pathNode(dimension, name, order, segments) {
|
|
|
2674
2955
|
};
|
|
2675
2956
|
}
|
|
2676
2957
|
function labelNode2(dimension, order, text, center, angle) {
|
|
2677
|
-
const fontSize =
|
|
2958
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(dimension.fontSize, 11);
|
|
2678
2959
|
const width = Math.max(24, text.length * fontSize * CHAR_WIDTH + 8);
|
|
2679
2960
|
const height = fontSize * 1.3;
|
|
2680
2961
|
return {
|
|
@@ -2692,7 +2973,7 @@ function labelNode2(dimension, order, text, center, angle) {
|
|
|
2692
2973
|
width,
|
|
2693
2974
|
height,
|
|
2694
2975
|
lines: [text],
|
|
2695
|
-
fontFamily:
|
|
2976
|
+
fontFamily: chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
2696
2977
|
fontSize,
|
|
2697
2978
|
fontWeight: "normal",
|
|
2698
2979
|
color: dimension.textColor ?? dimension.strokeColor ?? DEFAULT_COLOR,
|
|
@@ -2717,7 +2998,7 @@ function buildDimension(dimension, index) {
|
|
|
2717
2998
|
}
|
|
2718
2999
|
function buildDimensions(dimensions) {
|
|
2719
3000
|
return dimensions.flatMap(
|
|
2720
|
-
(dimension, index) =>
|
|
3001
|
+
(dimension, index) => chunkUHKFJBY5_cjs.tag(
|
|
2721
3002
|
buildDimension(dimension, index),
|
|
2722
3003
|
"dimension",
|
|
2723
3004
|
dimension.id,
|
|
@@ -2731,9 +3012,9 @@ function buildDimensions(dimensions) {
|
|
|
2731
3012
|
// src/renderScene/artifacts/isometric/context.ts
|
|
2732
3013
|
var FILL_PROP = { prop: "style.fill", propKind: "color", propSolidOnly: true };
|
|
2733
3014
|
function isometricContext(object, index) {
|
|
2734
|
-
const strokeWidth = Math.max(0,
|
|
2735
|
-
const rotation =
|
|
2736
|
-
const box =
|
|
3015
|
+
const strokeWidth = Math.max(0, chunkUHKFJBY5_cjs.finite(object.strokeWidth, 1));
|
|
3016
|
+
const rotation = chunkUHKFJBY5_cjs.finite(object.rotation, 0);
|
|
3017
|
+
const box = chunkUHKFJBY5_cjs.isometricBounds(object);
|
|
2737
3018
|
const rotationCenter = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
|
|
2738
3019
|
return {
|
|
2739
3020
|
object,
|
|
@@ -2745,7 +3026,7 @@ function isometricContext(object, index) {
|
|
|
2745
3026
|
strokeWidth,
|
|
2746
3027
|
common: {
|
|
2747
3028
|
type: "path",
|
|
2748
|
-
bounds:
|
|
3029
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(box, rotation, strokeWidth + 2),
|
|
2749
3030
|
rotation,
|
|
2750
3031
|
rotationCenter,
|
|
2751
3032
|
style: {
|
|
@@ -2761,13 +3042,13 @@ function faceNode(context, name, offset, points, style) {
|
|
|
2761
3042
|
...context.common,
|
|
2762
3043
|
id: `isometric-${context.object.id}-${name}`,
|
|
2763
3044
|
order: context.order + offset,
|
|
2764
|
-
d:
|
|
3045
|
+
d: chunkUHKFJBY5_cjs.roundedPolygonPath([...points], 0),
|
|
2765
3046
|
style,
|
|
2766
3047
|
...FILL_PROP
|
|
2767
3048
|
};
|
|
2768
3049
|
}
|
|
2769
3050
|
function silhouette(object) {
|
|
2770
|
-
const faces =
|
|
3051
|
+
const faces = chunkUHKFJBY5_cjs.isometricFaces(object);
|
|
2771
3052
|
return [faces.top[0], faces.top[1], faces.right[2], faces.front[2], faces.front[3], faces.top[3]];
|
|
2772
3053
|
}
|
|
2773
3054
|
function hullNode(context, hullPath, cornerRadius) {
|
|
@@ -2784,15 +3065,15 @@ function hullNode(context, hullPath, cornerRadius) {
|
|
|
2784
3065
|
depth: Math.max(0, object.depth),
|
|
2785
3066
|
cornerRadius,
|
|
2786
3067
|
bounds: box,
|
|
2787
|
-
labelOffsetX:
|
|
2788
|
-
labelOffsetY:
|
|
3068
|
+
labelOffsetX: chunkUHKFJBY5_cjs.finite(object.labelOffsetX, 0),
|
|
3069
|
+
labelOffsetY: chunkUHKFJBY5_cjs.finite(object.labelOffsetY, 0)
|
|
2789
3070
|
},
|
|
2790
3071
|
style: { ...common.style, fill: { kind: "none" } }
|
|
2791
3072
|
};
|
|
2792
3073
|
}
|
|
2793
3074
|
function unseenHullNode(context) {
|
|
2794
3075
|
return {
|
|
2795
|
-
...hullNode(context,
|
|
3076
|
+
...hullNode(context, chunkUHKFJBY5_cjs.roundedPolygonPath(silhouette(context.object), 0), 0),
|
|
2796
3077
|
style: { ...context.common.style, fill: { kind: "none" }, stroke: { kind: "none" } }
|
|
2797
3078
|
};
|
|
2798
3079
|
}
|
|
@@ -2805,9 +3086,9 @@ var LABEL_PADDING_Y = 3;
|
|
|
2805
3086
|
var LABEL_CHAR_WIDTH = 6.5;
|
|
2806
3087
|
function labelPlacement(context) {
|
|
2807
3088
|
const { object } = context;
|
|
2808
|
-
const anchor =
|
|
2809
|
-
const bottomY = anchor.y - LABEL_GAP +
|
|
2810
|
-
return { anchor, centerX: anchor.x +
|
|
3089
|
+
const anchor = chunkUHKFJBY5_cjs.isometricTopFaceCenter(object);
|
|
3090
|
+
const bottomY = anchor.y - LABEL_GAP + chunkUHKFJBY5_cjs.finite(object.labelOffsetY, 0);
|
|
3091
|
+
return { anchor, centerX: anchor.x + chunkUHKFJBY5_cjs.finite(object.labelOffsetX, 0), topY: bottomY - LABEL_HEIGHT, bottomY };
|
|
2811
3092
|
}
|
|
2812
3093
|
function labelTextNode(context, placement, text) {
|
|
2813
3094
|
const { object, order, rotation, rotationCenter, box } = context;
|
|
@@ -2822,7 +3103,7 @@ function labelTextNode(context, placement, text) {
|
|
|
2822
3103
|
width: box.width,
|
|
2823
3104
|
height: LABEL_HEIGHT,
|
|
2824
3105
|
lines: [text],
|
|
2825
|
-
fontFamily:
|
|
3106
|
+
fontFamily: chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
2826
3107
|
fontSize: 12,
|
|
2827
3108
|
fontWeight: "normal",
|
|
2828
3109
|
color: "#111827",
|
|
@@ -2902,7 +3183,7 @@ function groundShadowNode(context, topOutline) {
|
|
|
2902
3183
|
}
|
|
2903
3184
|
const height = Math.max(0, object.height);
|
|
2904
3185
|
const heightFactor = 0.6 + Math.min(1, height / 150) * 0.7;
|
|
2905
|
-
const shadowDrop = height +
|
|
3186
|
+
const shadowDrop = height + chunkUHKFJBY5_cjs.finite(object.shadowStyle?.distance, 0);
|
|
2906
3187
|
const contactFootprint = topOutline.map((point) => ({ x: point.x, y: point.y + shadowDrop }));
|
|
2907
3188
|
const footprintCenter = {
|
|
2908
3189
|
x: contactFootprint.reduce((sum, point) => sum + point.x, 0) / contactFootprint.length,
|
|
@@ -2925,14 +3206,14 @@ function groundShadowNode(context, topOutline) {
|
|
|
2925
3206
|
maxX: Math.max(...footprintXs),
|
|
2926
3207
|
maxY: Math.max(...footprintYs)
|
|
2927
3208
|
},
|
|
2928
|
-
d:
|
|
3209
|
+
d: chunkUHKFJBY5_cjs.roundedPolygonPath(footprint, 0),
|
|
2929
3210
|
rotation,
|
|
2930
3211
|
rotationCenter,
|
|
2931
3212
|
style: {
|
|
2932
3213
|
fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
|
|
2933
3214
|
stroke: { kind: "none" },
|
|
2934
3215
|
opacity: Math.min(1, (object.shadowStyle?.opacity ?? 0.18) * heightFactor),
|
|
2935
|
-
blur:
|
|
3216
|
+
blur: chunkUHKFJBY5_cjs.finite(object.shadowStyle?.blur, 8),
|
|
2936
3217
|
pointerEvents: "none"
|
|
2937
3218
|
}
|
|
2938
3219
|
};
|
|
@@ -2946,7 +3227,7 @@ function sphereShadowNode(context, radius) {
|
|
|
2946
3227
|
const depth = Math.max(0, object.depth);
|
|
2947
3228
|
const center = {
|
|
2948
3229
|
x: box.x + box.width / 2,
|
|
2949
|
-
y: object.y + Math.max(0, object.height) + (width + depth) *
|
|
3230
|
+
y: object.y + Math.max(0, object.height) + (width + depth) * chunkUHKFJBY5_cjs.AXIS_SIN / 2
|
|
2950
3231
|
};
|
|
2951
3232
|
return {
|
|
2952
3233
|
type: "ellipse",
|
|
@@ -2966,7 +3247,7 @@ function sphereShadowNode(context, radius) {
|
|
|
2966
3247
|
fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
|
|
2967
3248
|
stroke: { kind: "none" },
|
|
2968
3249
|
opacity: object.shadowStyle?.opacity ?? 0.2,
|
|
2969
|
-
blur:
|
|
3250
|
+
blur: chunkUHKFJBY5_cjs.finite(object.shadowStyle?.blur, 8),
|
|
2970
3251
|
pointerEvents: "none"
|
|
2971
3252
|
}
|
|
2972
3253
|
};
|
|
@@ -2976,7 +3257,7 @@ function sphereShadowNode(context, radius) {
|
|
|
2976
3257
|
function faceNodes(context, faces, hullClip) {
|
|
2977
3258
|
const { object, common } = context;
|
|
2978
3259
|
const noStroke = { ...common.style, stroke: { kind: "none" } };
|
|
2979
|
-
const fills =
|
|
3260
|
+
const fills = chunkUHKFJBY5_cjs.deriveFaceFills(object.fill ?? "#f8fafc");
|
|
2980
3261
|
const face = (name, offset, points, color) => faceNode(context, name, offset, points, { ...noStroke, fill: { kind: "solid", color }, clip: hullClip });
|
|
2981
3262
|
return [
|
|
2982
3263
|
face("top", 0, faces.top, fills.topFill),
|
|
@@ -3002,9 +3283,9 @@ function seamsNode(context, faces, hullClip) {
|
|
|
3002
3283
|
}
|
|
3003
3284
|
function buildBox(object, index) {
|
|
3004
3285
|
const context = isometricContext(object, index);
|
|
3005
|
-
const faces =
|
|
3006
|
-
const cornerRadius = Math.max(0,
|
|
3007
|
-
const hullPath =
|
|
3286
|
+
const faces = chunkUHKFJBY5_cjs.isometricFaces(object);
|
|
3287
|
+
const cornerRadius = Math.max(0, chunkUHKFJBY5_cjs.finite(object.cornerRadius, 8));
|
|
3288
|
+
const hullPath = chunkUHKFJBY5_cjs.roundedPolygonPath(silhouette(object), cornerRadius);
|
|
3008
3289
|
const hullClip = { type: "path", d: hullPath };
|
|
3009
3290
|
const groundShadow = groundShadowNode(context, faces.top);
|
|
3010
3291
|
const seams = object.seams === false ? void 0 : seamsNode(context, faces, hullClip);
|
|
@@ -3016,7 +3297,7 @@ function buildBox(object, index) {
|
|
|
3016
3297
|
|
|
3017
3298
|
// src/renderScene/artifacts/isometric/extruded.ts
|
|
3018
3299
|
function wallNode(context, side, index, fill2) {
|
|
3019
|
-
const color =
|
|
3300
|
+
const color = chunkUHKFJBY5_cjs.shadeFill(fill2, side.light);
|
|
3020
3301
|
return faceNode(context, `side-${index}`, 0.05 + index * 1e-3, side.points, {
|
|
3021
3302
|
...context.common.style,
|
|
3022
3303
|
stroke: { kind: "solid", color },
|
|
@@ -3041,7 +3322,7 @@ function wallEdgesNode(context, side, index) {
|
|
|
3041
3322
|
}
|
|
3042
3323
|
function buildExtruded(object, index, footprint) {
|
|
3043
3324
|
const context = isometricContext(object, index);
|
|
3044
|
-
const { top, sides } =
|
|
3325
|
+
const { top, sides } = chunkUHKFJBY5_cjs.extrudeFootprint(object, footprint, Math.max(0, chunkUHKFJBY5_cjs.finite(object.cornerRadius, 0)));
|
|
3045
3326
|
const fill2 = object.fill ?? "#f8fafc";
|
|
3046
3327
|
const groundShadow = groundShadowNode(context, top);
|
|
3047
3328
|
const topFace = faceNode(context, "top", 0.2, top, { ...context.common.style, fill: { kind: "solid", color: fill2 } });
|
|
@@ -3078,9 +3359,9 @@ function buildSphere(object, index) {
|
|
|
3078
3359
|
kind: "linear-gradient",
|
|
3079
3360
|
angle: 135,
|
|
3080
3361
|
stops: [
|
|
3081
|
-
{ offset: 0, color:
|
|
3362
|
+
{ offset: 0, color: chunkUHKFJBY5_cjs.shadeFill(fill2, 1.22) },
|
|
3082
3363
|
{ offset: 0.5, color: fill2 },
|
|
3083
|
-
{ offset: 1, color:
|
|
3364
|
+
{ offset: 1, color: chunkUHKFJBY5_cjs.shadeFill(fill2, 0.82) }
|
|
3084
3365
|
]
|
|
3085
3366
|
}
|
|
3086
3367
|
},
|
|
@@ -3116,12 +3397,12 @@ function buildIsometricObject(object, index) {
|
|
|
3116
3397
|
if (object.form === "sphere") {
|
|
3117
3398
|
return buildSphere(object, index);
|
|
3118
3399
|
}
|
|
3119
|
-
const footprint =
|
|
3400
|
+
const footprint = chunkUHKFJBY5_cjs.cleanFootprint(object.footprint);
|
|
3120
3401
|
return footprint.length > 0 ? buildExtruded(object, index, footprint) : buildBox(object, index);
|
|
3121
3402
|
}
|
|
3122
3403
|
function buildIsometricObjects(objects) {
|
|
3123
3404
|
return objects.flatMap(
|
|
3124
|
-
(object, index) =>
|
|
3405
|
+
(object, index) => chunkUHKFJBY5_cjs.tag(
|
|
3125
3406
|
buildIsometricObject(object, index),
|
|
3126
3407
|
"isometric",
|
|
3127
3408
|
object.id,
|
|
@@ -3150,7 +3431,7 @@ function renderEndpointLabel(context, end, labelIndex) {
|
|
|
3150
3431
|
if (!label) {
|
|
3151
3432
|
return [];
|
|
3152
3433
|
}
|
|
3153
|
-
const fontSize =
|
|
3434
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(context.link.style?.fontSize, 10);
|
|
3154
3435
|
const position = endpointLabelPosition(context.points, end);
|
|
3155
3436
|
const width = 90;
|
|
3156
3437
|
return [
|
|
@@ -3164,7 +3445,7 @@ function renderEndpointLabel(context, end, labelIndex) {
|
|
|
3164
3445
|
width,
|
|
3165
3446
|
height: fontSize * 2,
|
|
3166
3447
|
lines: [label],
|
|
3167
|
-
fontFamily: context.link.style?.fontFamily ??
|
|
3448
|
+
fontFamily: context.link.style?.fontFamily ?? chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
3168
3449
|
fontSize,
|
|
3169
3450
|
fontWeight: "normal",
|
|
3170
3451
|
color: context.color,
|
|
@@ -3194,7 +3475,7 @@ function renderMainLabel(context) {
|
|
|
3194
3475
|
width: context.label.width,
|
|
3195
3476
|
height: context.label.fontSize * 2,
|
|
3196
3477
|
lines: context.label.lines,
|
|
3197
|
-
fontFamily: context.link.style?.fontFamily ??
|
|
3478
|
+
fontFamily: context.link.style?.fontFamily ?? chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
3198
3479
|
fontSize: context.label.fontSize,
|
|
3199
3480
|
fontWeight: "normal",
|
|
3200
3481
|
color: context.color,
|
|
@@ -3248,10 +3529,10 @@ function linkBounds(points, padding) {
|
|
|
3248
3529
|
}
|
|
3249
3530
|
function labelLayout(link, measureText) {
|
|
3250
3531
|
const visible = Boolean(link.showText && link.text);
|
|
3251
|
-
const fontSize =
|
|
3532
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(link.style?.fontSize, 10);
|
|
3252
3533
|
const width = Math.min(250, Math.max(fontSize * 2, (link.text?.length ?? 0) * fontSize * 0.65 + 10));
|
|
3253
|
-
const metrics = measureText?.(link.style?.fontFamily ??
|
|
3254
|
-
const lines = visible ?
|
|
3534
|
+
const metrics = measureText?.(link.style?.fontFamily ?? chunkUHKFJBY5_cjs.DEFAULT_FONT, fontSize);
|
|
3535
|
+
const lines = visible ? chunkUHKFJBY5_cjs.wrapText(link.text ?? "", width, fontSize, metrics) : [];
|
|
3255
3536
|
return { visible, fontSize, width, height: lines.length * fontSize * 1.4, lines };
|
|
3256
3537
|
}
|
|
3257
3538
|
function linkStyle(item, strokeWidth, color, dash) {
|
|
@@ -3268,26 +3549,26 @@ function linkStyle(item, strokeWidth, color, dash) {
|
|
|
3268
3549
|
dash,
|
|
3269
3550
|
lineCap: "round",
|
|
3270
3551
|
lineJoin: "round",
|
|
3271
|
-
opacity:
|
|
3552
|
+
opacity: chunkUHKFJBY5_cjs.finite(link.style?.opacity, 1),
|
|
3272
3553
|
shadow: resolveShadow(link.style?.shadow)
|
|
3273
3554
|
};
|
|
3274
3555
|
}
|
|
3275
3556
|
function createLinkRenderContext(item, index, measureText) {
|
|
3276
3557
|
const { link, from, to } = item;
|
|
3277
3558
|
const pathType = link.style?.pathType ?? "orthogonal";
|
|
3278
|
-
const { points, segments } =
|
|
3279
|
-
const strokeWidth =
|
|
3559
|
+
const { points, segments } = chunkUHKFJBY5_cjs.calculateLinkRoute(link, from, to, pathType);
|
|
3560
|
+
const strokeWidth = chunkUHKFJBY5_cjs.finite(link.style?.strokeWidth, 2);
|
|
3280
3561
|
const color = getLinkStrokeColor(link.style?.color) || "#64748b";
|
|
3281
3562
|
const label = labelLayout(link, measureText);
|
|
3282
3563
|
const contentDash = getDashArray(strokeWidth, link.style?.strokeStyle ?? "solid");
|
|
3283
|
-
const gap = label.visible && !contentDash ?
|
|
3564
|
+
const gap = label.visible && !contentDash ? chunkUHKFJBY5_cjs.labelGapDash(points, pathType, label.width, label.height) : null;
|
|
3284
3565
|
const dash = gap ? [gap.dashBefore, gap.gapLength, 1e6] : contentDash;
|
|
3285
3566
|
return {
|
|
3286
3567
|
link,
|
|
3287
3568
|
pathType,
|
|
3288
3569
|
points,
|
|
3289
3570
|
segments,
|
|
3290
|
-
midpoint:
|
|
3571
|
+
midpoint: chunkUHKFJBY5_cjs.getLineMidpoint(points, pathType, from, to),
|
|
3291
3572
|
strokeWidth,
|
|
3292
3573
|
bounds: linkBounds(points, strokeWidth + 14),
|
|
3293
3574
|
color,
|
|
@@ -3333,7 +3614,7 @@ function pathData2(points, pathType, segments, strokeWidth) {
|
|
|
3333
3614
|
return `M ${points[0]} ${points[1]} C ${points[2]} ${points[3]} ${points[4]} ${points[5]} ${points[6]} ${points[7]}`;
|
|
3334
3615
|
}
|
|
3335
3616
|
if (pathType === "orthogonal" && segments.length > 0) {
|
|
3336
|
-
return
|
|
3617
|
+
return chunkUHKFJBY5_cjs.roundedOrthogonalPathData(segments, Math.max(16, strokeWidth * 4));
|
|
3337
3618
|
}
|
|
3338
3619
|
return polylinePathData(points);
|
|
3339
3620
|
}
|
|
@@ -3437,7 +3718,7 @@ function buildLink(item, index, measureText) {
|
|
|
3437
3718
|
}
|
|
3438
3719
|
function buildLinks(links, measureText) {
|
|
3439
3720
|
return links.flatMap(
|
|
3440
|
-
(item, index) =>
|
|
3721
|
+
(item, index) => chunkUHKFJBY5_cjs.tag(
|
|
3441
3722
|
buildLink(item, index, measureText),
|
|
3442
3723
|
"link",
|
|
3443
3724
|
item.link.id,
|
|
@@ -3452,7 +3733,7 @@ function buildFreeformPath(path, index) {
|
|
|
3452
3733
|
if (path.isVisible === false || path.points.length < 2) {
|
|
3453
3734
|
return [];
|
|
3454
3735
|
}
|
|
3455
|
-
const strokeWidth =
|
|
3736
|
+
const strokeWidth = chunkUHKFJBY5_cjs.finite(path.strokeWidth, 2);
|
|
3456
3737
|
const extra = strokeWidth + 12;
|
|
3457
3738
|
const bounds = {
|
|
3458
3739
|
minX: Math.min(...path.points.map((point) => point.x)) - extra,
|
|
@@ -3460,7 +3741,7 @@ function buildFreeformPath(path, index) {
|
|
|
3460
3741
|
maxX: Math.max(...path.points.map((point) => point.x)) + extra,
|
|
3461
3742
|
maxY: Math.max(...path.points.map((point) => point.y)) + extra
|
|
3462
3743
|
};
|
|
3463
|
-
const tension =
|
|
3744
|
+
const tension = chunkUHKFJBY5_cjs.finite(path.tension, 0);
|
|
3464
3745
|
const closed = path.closed === true;
|
|
3465
3746
|
return [
|
|
3466
3747
|
{
|
|
@@ -3468,7 +3749,7 @@ function buildFreeformPath(path, index) {
|
|
|
3468
3749
|
id: `path-${path.id}`,
|
|
3469
3750
|
order: 3e4 + index,
|
|
3470
3751
|
bounds,
|
|
3471
|
-
d:
|
|
3752
|
+
d: chunkUHKFJBY5_cjs.freeformPathData({ points: path.points, tension, closed }),
|
|
3472
3753
|
markerStart: path.startMarker,
|
|
3473
3754
|
markerEnd: path.endMarker,
|
|
3474
3755
|
detail: {
|
|
@@ -3484,13 +3765,13 @@ function buildFreeformPath(path, index) {
|
|
|
3484
3765
|
dash: path.dash?.length ? path.dash : void 0,
|
|
3485
3766
|
lineCap: "round",
|
|
3486
3767
|
lineJoin: "round",
|
|
3487
|
-
opacity:
|
|
3768
|
+
opacity: chunkUHKFJBY5_cjs.finite(path.opacity, 1)
|
|
3488
3769
|
}
|
|
3489
3770
|
}
|
|
3490
3771
|
];
|
|
3491
3772
|
}
|
|
3492
3773
|
function buildFreeformPaths(paths) {
|
|
3493
|
-
return paths.flatMap((path, index) =>
|
|
3774
|
+
return paths.flatMap((path, index) => chunkUHKFJBY5_cjs.tag(buildFreeformPath(path, index), "path", path.id, "path", "Path"));
|
|
3494
3775
|
}
|
|
3495
3776
|
|
|
3496
3777
|
// src/renderScene/artifacts/shape/geometry/base.ts
|
|
@@ -3506,7 +3787,7 @@ function shapeNodeBase(context) {
|
|
|
3506
3787
|
|
|
3507
3788
|
// src/renderScene/artifacts/shape/geometry/simple.ts
|
|
3508
3789
|
function renderPath(context) {
|
|
3509
|
-
const path =
|
|
3790
|
+
const path = chunkUHKFJBY5_cjs.localShapePath(context.shape.shapeType, context.x, context.y, context.width, context.height);
|
|
3510
3791
|
if (!path) {
|
|
3511
3792
|
return [];
|
|
3512
3793
|
}
|
|
@@ -3522,7 +3803,7 @@ function renderBoundedPath(context) {
|
|
|
3522
3803
|
}));
|
|
3523
3804
|
}
|
|
3524
3805
|
function renderRectangle(context) {
|
|
3525
|
-
const rx = context.shape.shapeType === "pill" ?
|
|
3806
|
+
const rx = context.shape.shapeType === "pill" ? chunkUHKFJBY5_cjs.pillCornerRadius(context.width, context.height) : context.shape.shapeType === "rounded_rectangle" ? chunkUHKFJBY5_cjs.finite(context.shape.cornerRadius, 8) : 0;
|
|
3526
3807
|
return [
|
|
3527
3808
|
{
|
|
3528
3809
|
...shapeNodeBase(context),
|
|
@@ -3551,7 +3832,7 @@ function renderSymbol(context) {
|
|
|
3551
3832
|
if (!context.shape.symbol || context.shape.symbol.points.length < 2) {
|
|
3552
3833
|
return renderRectangle(context);
|
|
3553
3834
|
}
|
|
3554
|
-
const tension =
|
|
3835
|
+
const tension = chunkUHKFJBY5_cjs.finite(context.shape.symbol.tension, 0);
|
|
3555
3836
|
const points = context.shape.symbol.points.map(([x, y]) => ({
|
|
3556
3837
|
x: context.x + x * context.width,
|
|
3557
3838
|
y: context.y + y * context.height
|
|
@@ -3560,7 +3841,7 @@ function renderSymbol(context) {
|
|
|
3560
3841
|
{
|
|
3561
3842
|
...shapeNodeBase(context),
|
|
3562
3843
|
type: "path",
|
|
3563
|
-
d:
|
|
3844
|
+
d: chunkUHKFJBY5_cjs.freeformPathData({ points, tension, closed: true }),
|
|
3564
3845
|
rotationCenter: context.rotationCenter,
|
|
3565
3846
|
detail: {
|
|
3566
3847
|
of: "symbolGeometry",
|
|
@@ -3597,6 +3878,68 @@ function renderShapeGeometry(context) {
|
|
|
3597
3878
|
return renderer(context);
|
|
3598
3879
|
}
|
|
3599
3880
|
|
|
3881
|
+
// src/renderScene/artifacts/shape/image.ts
|
|
3882
|
+
function clipOf(outline2, box) {
|
|
3883
|
+
if (outline2?.type === "path") {
|
|
3884
|
+
return { type: "path", d: outline2.d };
|
|
3885
|
+
}
|
|
3886
|
+
if (outline2?.type === "ellipse") {
|
|
3887
|
+
const { cx, cy, rx, ry } = outline2;
|
|
3888
|
+
return {
|
|
3889
|
+
type: "path",
|
|
3890
|
+
d: `M${cx - rx} ${cy}A${rx} ${ry} 0 1 0 ${cx + rx} ${cy}A${rx} ${ry} 0 1 0 ${cx - rx} ${cy}Z`
|
|
3891
|
+
};
|
|
3892
|
+
}
|
|
3893
|
+
return { type: "rect", ...box, rx: outline2?.type === "rect" ? outline2.rx ?? 0 : 0 };
|
|
3894
|
+
}
|
|
3895
|
+
function croppedBox(image, crop, pixels, box) {
|
|
3896
|
+
const scaleX = box.width / crop.width;
|
|
3897
|
+
const scaleY = box.height / crop.height;
|
|
3898
|
+
const scale = image.fit === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
|
|
3899
|
+
const [sx, sy] = image.fit === "fill" ? [scaleX, scaleY] : [scale, scale];
|
|
3900
|
+
return {
|
|
3901
|
+
x: box.x + (box.width - crop.width * sx) / 2 - crop.x * sx,
|
|
3902
|
+
y: box.y + (box.height - crop.height * sy) / 2 - crop.y * sy,
|
|
3903
|
+
width: pixels[0] * sx,
|
|
3904
|
+
height: pixels[1] * sy
|
|
3905
|
+
};
|
|
3906
|
+
}
|
|
3907
|
+
var ASPECTS = { cover: "slice", contain: "meet", fill: "none" };
|
|
3908
|
+
function renderShapeImage(context, outline2, diagnostics) {
|
|
3909
|
+
const image = context.shape.image;
|
|
3910
|
+
if (!image) {
|
|
3911
|
+
return void 0;
|
|
3912
|
+
}
|
|
3913
|
+
if (image.crop && !image.pixels) {
|
|
3914
|
+
diagnostics.push({
|
|
3915
|
+
severity: "warning",
|
|
3916
|
+
code: "image-crop-without-size",
|
|
3917
|
+
ownerId: context.shape.id,
|
|
3918
|
+
message: `The image '${context.shape.id}' has a crop but no imageSize, so it is shown uncropped. Give it the size of the file, as imageSize: width, height.`
|
|
3919
|
+
});
|
|
3920
|
+
}
|
|
3921
|
+
const box = { x: context.x, y: context.y, width: context.width, height: context.height };
|
|
3922
|
+
const cropped = image.crop && image.pixels;
|
|
3923
|
+
return {
|
|
3924
|
+
type: "image",
|
|
3925
|
+
id: `${context.id}-image`,
|
|
3926
|
+
order: context.order,
|
|
3927
|
+
bounds: context.bounds,
|
|
3928
|
+
...cropped ? croppedBox(image, image.crop, image.pixels, box) : box,
|
|
3929
|
+
href: image.src,
|
|
3930
|
+
aspect: cropped ? "none" : ASPECTS[image.fit],
|
|
3931
|
+
rotation: context.rotation,
|
|
3932
|
+
rotationCenter: context.rotationCenter,
|
|
3933
|
+
style: {
|
|
3934
|
+
opacity: context.style.opacity,
|
|
3935
|
+
blur: context.style.blur,
|
|
3936
|
+
blend: context.style.blend,
|
|
3937
|
+
clip: clipOf(outline2, box),
|
|
3938
|
+
pointerEvents: "none"
|
|
3939
|
+
}
|
|
3940
|
+
};
|
|
3941
|
+
}
|
|
3942
|
+
|
|
3600
3943
|
// src/renderScene/artifacts/shape/shaderSurface.ts
|
|
3601
3944
|
var RECT_PROGRAMS = /* @__PURE__ */ new Set([
|
|
3602
3945
|
"reactivePanel",
|
|
@@ -3635,7 +3978,7 @@ function renderShapeShaderSurface(context) {
|
|
|
3635
3978
|
id: `${context.id}-shader`,
|
|
3636
3979
|
type: "shader-surface",
|
|
3637
3980
|
order: context.order,
|
|
3638
|
-
bounds:
|
|
3981
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds(surfaceBounds, context.rotation, 0),
|
|
3639
3982
|
...surfaceBounds,
|
|
3640
3983
|
rotation: context.rotation,
|
|
3641
3984
|
shader: context.shape.shader,
|
|
@@ -3705,24 +4048,24 @@ function shapeDash(shape, strokeWidth) {
|
|
|
3705
4048
|
}
|
|
3706
4049
|
function shapeStyle(shape, diagnostics) {
|
|
3707
4050
|
const defaults = shapeDefaults(shape, diagnostics);
|
|
3708
|
-
const strokeWidth =
|
|
4051
|
+
const strokeWidth = chunkUHKFJBY5_cjs.finite(shape.strokeWidth, defaults.strokeWidth);
|
|
3709
4052
|
const shadow = shape.shadowStyle ?? (shape.hasShadow ? { enabled: true, color: "#000000", opacity: 0.25, blur: 10, angle: 45, distance: 5 } : void 0);
|
|
3710
|
-
const angle =
|
|
4053
|
+
const angle = chunkUHKFJBY5_cjs.finite(shadow?.angle, 45) * Math.PI / 180;
|
|
3711
4054
|
return {
|
|
3712
|
-
fill:
|
|
3713
|
-
stroke:
|
|
4055
|
+
fill: chunkUHKFJBY5_cjs.paint(shape.fillColor, diagnostics, shape.id),
|
|
4056
|
+
stroke: chunkUHKFJBY5_cjs.paint(shape.strokeColor, diagnostics, shape.id),
|
|
3714
4057
|
strokeWidth,
|
|
3715
4058
|
dash: shapeDash(shape, strokeWidth),
|
|
3716
4059
|
lineCap: shape.strokeStyle === "dotted" ? "round" : "butt",
|
|
3717
|
-
opacity:
|
|
4060
|
+
opacity: chunkUHKFJBY5_cjs.finite(shape.opacity, defaults.opacity),
|
|
3718
4061
|
blur: shape.blur !== void 0 && shape.blur > 0 ? shape.blur : void 0,
|
|
3719
4062
|
blend: shape.blend,
|
|
3720
4063
|
shadow: shadow?.enabled ? {
|
|
3721
4064
|
color: shadow.color ?? "#000000",
|
|
3722
|
-
opacity:
|
|
3723
|
-
blur:
|
|
3724
|
-
dx: Math.cos(angle) *
|
|
3725
|
-
dy: Math.sin(angle) *
|
|
4065
|
+
opacity: chunkUHKFJBY5_cjs.finite(shadow.opacity, 0.25),
|
|
4066
|
+
blur: chunkUHKFJBY5_cjs.finite(shadow.blur, 10),
|
|
4067
|
+
dx: Math.cos(angle) * chunkUHKFJBY5_cjs.finite(shadow.distance, 5),
|
|
4068
|
+
dy: Math.sin(angle) * chunkUHKFJBY5_cjs.finite(shadow.distance, 5)
|
|
3726
4069
|
} : void 0
|
|
3727
4070
|
};
|
|
3728
4071
|
}
|
|
@@ -3798,11 +4141,11 @@ function renderShapeText(context, strokeWidth, measureText) {
|
|
|
3798
4141
|
if (!shape.text) {
|
|
3799
4142
|
return null;
|
|
3800
4143
|
}
|
|
3801
|
-
const fontSize =
|
|
4144
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(shape.fontSize, shapeDefaults(shape, []).fontSize);
|
|
3802
4145
|
const padding = shape.isText ? 0 : Math.max(8, strokeWidth * 2);
|
|
3803
|
-
const area = shape.shapeType === "person" ?
|
|
4146
|
+
const area = shape.shapeType === "person" ? chunkUHKFJBY5_cjs.personLabelArea(x, y, width, height) : { x, y, width, height };
|
|
3804
4147
|
const textWidth = Math.max(0, area.width - padding * 2);
|
|
3805
|
-
const fontFamily2 = shape.fontFamily ||
|
|
4148
|
+
const fontFamily2 = shape.fontFamily || chunkUHKFJBY5_cjs.DEFAULT_FONT;
|
|
3806
4149
|
const metrics = measureText?.(fontFamily2, fontSize);
|
|
3807
4150
|
const textNode = {
|
|
3808
4151
|
type: "text",
|
|
@@ -3813,7 +4156,7 @@ function renderShapeText(context, strokeWidth, measureText) {
|
|
|
3813
4156
|
y: area.y + padding,
|
|
3814
4157
|
width: textWidth,
|
|
3815
4158
|
height: Math.max(0, area.height - padding * 2),
|
|
3816
|
-
lines:
|
|
4159
|
+
lines: chunkUHKFJBY5_cjs.wrapText(shape.text, textWidth, fontSize, metrics),
|
|
3817
4160
|
fontFamily: fontFamily2,
|
|
3818
4161
|
fontSize,
|
|
3819
4162
|
fontWeight: shape.fontWeight ?? "normal",
|
|
@@ -3821,12 +4164,12 @@ function renderShapeText(context, strokeWidth, measureText) {
|
|
|
3821
4164
|
color: shape.textColor || "#111827",
|
|
3822
4165
|
align: shape.textAlign ?? "center",
|
|
3823
4166
|
verticalAlign: shape.textVerticalAlign ?? "middle",
|
|
3824
|
-
lineHeight:
|
|
4167
|
+
lineHeight: chunkUHKFJBY5_cjs.finite(shape.lineHeight, 1.3),
|
|
3825
4168
|
rotation,
|
|
3826
4169
|
rotationCenter
|
|
3827
4170
|
};
|
|
3828
4171
|
if (hasBoldMarkup(shape.text)) {
|
|
3829
|
-
const { measure, spaceWidth } = metrics ??
|
|
4172
|
+
const { measure, spaceWidth } = metrics ?? chunkUHKFJBY5_cjs.heuristicRichMeasure(fontSize);
|
|
3830
4173
|
textNode.richLines = wrapRichText(shape.text, textWidth, measure, spaceWidth);
|
|
3831
4174
|
}
|
|
3832
4175
|
return textNode;
|
|
@@ -3865,19 +4208,19 @@ function renderDoubleStroke(context, strokeWidth) {
|
|
|
3865
4208
|
return nodes;
|
|
3866
4209
|
}
|
|
3867
4210
|
function createRenderContext(shape, index, diagnostics) {
|
|
3868
|
-
const x =
|
|
3869
|
-
const y =
|
|
3870
|
-
const width = Math.max(0,
|
|
3871
|
-
const height = Math.max(0,
|
|
3872
|
-
const rotation =
|
|
3873
|
-
const strokeWidth =
|
|
4211
|
+
const x = chunkUHKFJBY5_cjs.finite(shape.x, 0);
|
|
4212
|
+
const y = chunkUHKFJBY5_cjs.finite(shape.y, 0);
|
|
4213
|
+
const width = Math.max(0, chunkUHKFJBY5_cjs.finite(shape.width, 100));
|
|
4214
|
+
const height = Math.max(0, chunkUHKFJBY5_cjs.finite(shape.height, 100));
|
|
4215
|
+
const rotation = chunkUHKFJBY5_cjs.finite(shape.rotation, 0);
|
|
4216
|
+
const strokeWidth = chunkUHKFJBY5_cjs.finite(shape.strokeWidth, 2);
|
|
3874
4217
|
return {
|
|
3875
4218
|
strokeWidth,
|
|
3876
4219
|
context: {
|
|
3877
4220
|
shape,
|
|
3878
4221
|
id: `shape-${shape.id}`,
|
|
3879
4222
|
order: 1e4 + index,
|
|
3880
|
-
bounds:
|
|
4223
|
+
bounds: chunkUHKFJBY5_cjs.rotatedBounds({ x, y, width, height }, rotation, strokeWidth + (shape.hasShadow ? 20 : 2)),
|
|
3881
4224
|
rotation,
|
|
3882
4225
|
rotationCenter: { x: x + width / 2, y: y + height / 2 },
|
|
3883
4226
|
style: shapeStyle(shape, diagnostics),
|
|
@@ -3903,6 +4246,22 @@ function buildShape(shape, index, diagnostics, measureText) {
|
|
|
3903
4246
|
}
|
|
3904
4247
|
nodes.push(shader);
|
|
3905
4248
|
}
|
|
4249
|
+
const image = renderShapeImage(context, nodes[0], diagnostics);
|
|
4250
|
+
if (image) {
|
|
4251
|
+
for (const node of nodes) {
|
|
4252
|
+
if (node.type === "ellipse" || node.type === "path" || node.type === "rect") {
|
|
4253
|
+
node.style = { ...node.style, pointerEvents: "all" };
|
|
4254
|
+
}
|
|
4255
|
+
}
|
|
4256
|
+
nodes.push(image);
|
|
4257
|
+
}
|
|
4258
|
+
if (shape.isText) {
|
|
4259
|
+
for (const node of nodes) {
|
|
4260
|
+
if (node.type === "ellipse" || node.type === "path" || node.type === "rect") {
|
|
4261
|
+
node.style = { ...node.style, pointerEvents: "all" };
|
|
4262
|
+
}
|
|
4263
|
+
}
|
|
4264
|
+
}
|
|
3906
4265
|
const text = renderShapeText(context, strokeWidth, measureText);
|
|
3907
4266
|
if (text) {
|
|
3908
4267
|
nodes.push(text);
|
|
@@ -3911,7 +4270,7 @@ function buildShape(shape, index, diagnostics, measureText) {
|
|
|
3911
4270
|
}
|
|
3912
4271
|
function buildShapes(shapes, diagnostics, measureText) {
|
|
3913
4272
|
return shapes.flatMap(
|
|
3914
|
-
(shape, index) =>
|
|
4273
|
+
(shape, index) => chunkUHKFJBY5_cjs.tag(
|
|
3915
4274
|
buildShape(shape, index, diagnostics, measureText),
|
|
3916
4275
|
"shape",
|
|
3917
4276
|
shape.id,
|
|
@@ -3928,7 +4287,7 @@ function buildXAxisLabel(chart, layout, order) {
|
|
|
3928
4287
|
return null;
|
|
3929
4288
|
}
|
|
3930
4289
|
return {
|
|
3931
|
-
...
|
|
4290
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
3932
4291
|
role: "axis",
|
|
3933
4292
|
id: `chart-x-label-${chart.id}`,
|
|
3934
4293
|
order,
|
|
@@ -3938,7 +4297,7 @@ function buildXAxisLabel(chart, layout, order) {
|
|
|
3938
4297
|
chart,
|
|
3939
4298
|
align: "center"
|
|
3940
4299
|
}),
|
|
3941
|
-
prop:
|
|
4300
|
+
prop: chunkUHKFJBY5_cjs.axisLabelProp("x")
|
|
3942
4301
|
};
|
|
3943
4302
|
}
|
|
3944
4303
|
function buildYAxisLabel(chart, layout, order) {
|
|
@@ -3946,7 +4305,7 @@ function buildYAxisLabel(chart, layout, order) {
|
|
|
3946
4305
|
return null;
|
|
3947
4306
|
}
|
|
3948
4307
|
return {
|
|
3949
|
-
...
|
|
4308
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
3950
4309
|
role: "axis",
|
|
3951
4310
|
id: `chart-y-label-${chart.id}`,
|
|
3952
4311
|
order,
|
|
@@ -3962,7 +4321,7 @@ function buildYAxisLabel(chart, layout, order) {
|
|
|
3962
4321
|
align: "center",
|
|
3963
4322
|
rotation: -90
|
|
3964
4323
|
}),
|
|
3965
|
-
prop:
|
|
4324
|
+
prop: chunkUHKFJBY5_cjs.axisLabelProp("y")
|
|
3966
4325
|
};
|
|
3967
4326
|
}
|
|
3968
4327
|
function buildAxisLabels(chart, layout, order) {
|
|
@@ -3985,7 +4344,7 @@ function buildBoxplotSeriesYAxisTicks(chart, layout, order) {
|
|
|
3985
4344
|
return chart.series.map((series, index) => {
|
|
3986
4345
|
const centerY = layout.plot.y + (index + 0.5) * slotWidth;
|
|
3987
4346
|
return {
|
|
3988
|
-
...
|
|
4347
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
3989
4348
|
role: "axis",
|
|
3990
4349
|
id: `chart-y-tick-${chart.id}-${index}`,
|
|
3991
4350
|
order: order + index,
|
|
@@ -3995,7 +4354,7 @@ function buildBoxplotSeriesYAxisTicks(chart, layout, order) {
|
|
|
3995
4354
|
chart,
|
|
3996
4355
|
align: "right"
|
|
3997
4356
|
}),
|
|
3998
|
-
prop:
|
|
4357
|
+
prop: chunkUHKFJBY5_cjs.seriesLabelProp(series.id)
|
|
3999
4358
|
};
|
|
4000
4359
|
});
|
|
4001
4360
|
}
|
|
@@ -4021,7 +4380,7 @@ function isStackedLegendPosition(position) {
|
|
|
4021
4380
|
return position === "bottomLeft" || position === "bottomRight";
|
|
4022
4381
|
}
|
|
4023
4382
|
function legendItemWidths(chart) {
|
|
4024
|
-
return legendSeries(chart).map((item) => Math.max(42, item.label.length *
|
|
4383
|
+
return legendSeries(chart).map((item) => Math.max(42, item.label.length * chunkUHKFJBY5_cjs.finite(chart.fontSize, 12) * 0.58 + 22));
|
|
4025
4384
|
}
|
|
4026
4385
|
function stackedLegendColumnWidth(chart) {
|
|
4027
4386
|
const widths = legendItemWidths(chart);
|
|
@@ -4074,9 +4433,9 @@ function renderLegendItem(render2, item) {
|
|
|
4074
4433
|
}
|
|
4075
4434
|
function createLegendSwatch(render2, item) {
|
|
4076
4435
|
const { chart, bounds, diagnostics } = render2;
|
|
4077
|
-
const fallback =
|
|
4436
|
+
const fallback = chunkUHKFJBY5_cjs.CHART_COLORS[item.seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
4078
4437
|
const solidOnly = chart.chartType === "line";
|
|
4079
|
-
const color = solidOnly ?
|
|
4438
|
+
const color = solidOnly ? chunkUHKFJBY5_cjs.representativeColor(item.series.color, fallback) : item.series.color ?? fallback;
|
|
4080
4439
|
return {
|
|
4081
4440
|
type: "rect",
|
|
4082
4441
|
id: `chart-legend-swatch-${chart.id}-${item.series.id}`,
|
|
@@ -4087,16 +4446,16 @@ function createLegendSwatch(render2, item) {
|
|
|
4087
4446
|
width: 10,
|
|
4088
4447
|
height: 10,
|
|
4089
4448
|
rx: 3,
|
|
4090
|
-
prop:
|
|
4449
|
+
prop: chunkUHKFJBY5_cjs.seriesColorProp(item.series.id),
|
|
4091
4450
|
propKind: "color",
|
|
4092
4451
|
propSolidOnly: solidOnly,
|
|
4093
|
-
style: { fill:
|
|
4452
|
+
style: { fill: chunkUHKFJBY5_cjs.paint(color, diagnostics, chart.id) }
|
|
4094
4453
|
};
|
|
4095
4454
|
}
|
|
4096
4455
|
function createLegendLabel(render2, item) {
|
|
4097
4456
|
const { chart, bounds } = render2;
|
|
4098
4457
|
return {
|
|
4099
|
-
...
|
|
4458
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4100
4459
|
role: "legend",
|
|
4101
4460
|
id: `chart-legend-${chart.id}-${item.series.id}`,
|
|
4102
4461
|
order: item.order + 1,
|
|
@@ -4105,7 +4464,7 @@ function createLegendLabel(render2, item) {
|
|
|
4105
4464
|
text: item.series.label,
|
|
4106
4465
|
chart
|
|
4107
4466
|
}),
|
|
4108
|
-
prop:
|
|
4467
|
+
prop: chunkUHKFJBY5_cjs.seriesLabelProp(item.series.id)
|
|
4109
4468
|
};
|
|
4110
4469
|
}
|
|
4111
4470
|
|
|
@@ -4124,19 +4483,19 @@ function hasCartesianDecorations(chart) {
|
|
|
4124
4483
|
return !CHARTS_WITHOUT_CARTESIAN_DECORATIONS.has(chart.chartType);
|
|
4125
4484
|
}
|
|
4126
4485
|
function tickOffset(chart) {
|
|
4127
|
-
return hasCartesianDecorations(chart) ? Math.max(0,
|
|
4486
|
+
return hasCartesianDecorations(chart) ? Math.max(0, chunkUHKFJBY5_cjs.finite(chart.tickLength, 0)) : 0;
|
|
4128
4487
|
}
|
|
4129
4488
|
function xLabelOffset(chart) {
|
|
4130
|
-
return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0,
|
|
4489
|
+
return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0, chunkUHKFJBY5_cjs.finite(chart.xLabelGap, 0)) : 0);
|
|
4131
4490
|
}
|
|
4132
4491
|
function yLabelOffset(chart) {
|
|
4133
|
-
return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0,
|
|
4492
|
+
return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0, chunkUHKFJBY5_cjs.finite(chart.yLabelGap, 0)) : 0);
|
|
4134
4493
|
}
|
|
4135
4494
|
function isHorizontalBoxplot(chart) {
|
|
4136
4495
|
return chart.chartType === "boxplot" && chart.config?.orientation === "horizontal";
|
|
4137
4496
|
}
|
|
4138
4497
|
function boxplotCategoryLabelWidth(chart) {
|
|
4139
|
-
const fontSize =
|
|
4498
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(chart.fontSize, 12);
|
|
4140
4499
|
const longest = Math.max(0, ...chart.series.map((series) => (series.label || series.id).length));
|
|
4141
4500
|
return longest * fontSize * 0.58 + 16;
|
|
4142
4501
|
}
|
|
@@ -4148,18 +4507,18 @@ function treemapSideLegendSide(chart, showLegend) {
|
|
|
4148
4507
|
return chart.legendPosition === "left" ? "left" : chart.legendPosition === "right" ? "right" : null;
|
|
4149
4508
|
}
|
|
4150
4509
|
function barCategoryLabelWidth(chart) {
|
|
4151
|
-
const fontSize =
|
|
4510
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(chart.axisFontSize ?? chart.fontSize, 12);
|
|
4152
4511
|
const categories = chart.config?.categories ?? [];
|
|
4153
4512
|
return Math.max(0, ...categories.map((category) => category.length)) * fontSize * 0.58 + 16;
|
|
4154
4513
|
}
|
|
4155
4514
|
function leftLabelWidth(chart) {
|
|
4156
|
-
if (chart.axisLabelSpace && chart.axisLabelSpace > 0 && (isHorizontalBoxplot(chart) ||
|
|
4515
|
+
if (chart.axisLabelSpace && chart.axisLabelSpace > 0 && (isHorizontalBoxplot(chart) || chunkUHKFJBY5_cjs.isHorizontalBar(chart))) {
|
|
4157
4516
|
return chart.axisLabelSpace;
|
|
4158
4517
|
}
|
|
4159
4518
|
if (isHorizontalBoxplot(chart)) {
|
|
4160
4519
|
return boxplotCategoryLabelWidth(chart);
|
|
4161
4520
|
}
|
|
4162
|
-
if (
|
|
4521
|
+
if (chunkUHKFJBY5_cjs.isHorizontalBar(chart)) {
|
|
4163
4522
|
return chart.categoryAlign === "left" || chart.categoryAlign === "inside" ? 20 : barCategoryLabelWidth(chart);
|
|
4164
4523
|
}
|
|
4165
4524
|
if (chart.showValueAxis === false) {
|
|
@@ -4168,12 +4527,12 @@ function leftLabelWidth(chart) {
|
|
|
4168
4527
|
return chart.axisY.label ? 60 : 46;
|
|
4169
4528
|
}
|
|
4170
4529
|
function tiltedBottomRoom(chart) {
|
|
4171
|
-
const tilt =
|
|
4530
|
+
const tilt = chunkUHKFJBY5_cjs.labelTilt(chart);
|
|
4172
4531
|
if (tilt <= 0) {
|
|
4173
4532
|
return 0;
|
|
4174
4533
|
}
|
|
4175
|
-
const labels = chart.chartType === "bar" && !
|
|
4176
|
-
return labels.length > 0 ? Math.max(0,
|
|
4534
|
+
const labels = chart.chartType === "bar" && !chunkUHKFJBY5_cjs.isHorizontalBar(chart) ? chart.config?.categories ?? [] : chart.chartType === "boxplot" && !isHorizontalBoxplot(chart) ? chart.series.map((series) => series.label || series.id) : [];
|
|
4535
|
+
return labels.length > 0 ? Math.max(0, chunkUHKFJBY5_cjs.tiltedLabelRoom(chart, labels, tilt) - 18) : 0;
|
|
4177
4536
|
}
|
|
4178
4537
|
function legendPlaceOf(chart) {
|
|
4179
4538
|
const showLegend = chart.showLegend !== false;
|
|
@@ -4198,14 +4557,14 @@ function padRightOf(legend) {
|
|
|
4198
4557
|
}
|
|
4199
4558
|
function padBottomOf(chart, showLabels, legend) {
|
|
4200
4559
|
const valueRow = chart.chartType === "bar" && chart.config?.showBarLabels === true && chart.config.barLabelPosition === "axis";
|
|
4201
|
-
const horizontalValueAxis =
|
|
4202
|
-
const base = showLabels ?
|
|
4560
|
+
const horizontalValueAxis = chunkUHKFJBY5_cjs.isHorizontalBar(chart) && chart.showValueAxis !== false;
|
|
4561
|
+
const base = showLabels ? chunkUHKFJBY5_cjs.isHorizontalBar(chart) ? horizontalValueAxis ? 34 : 12 : (chart.axisX.label ? 52 : 34) + (valueRow ? 18 : 0) : 12;
|
|
4203
4562
|
const hasColorBar = chart.chartType === "field" && legend.showLegend && Boolean(chart.config?.scale?.stops.length);
|
|
4204
4563
|
const legendInRow = legend.hasItems && !legend.atTop && !legend.stacked;
|
|
4205
4564
|
return xLabelOffset(chart) + base + (showLabels ? tiltedBottomRoom(chart) : 0) + (hasColorBar ? 44 : 0) + (legendInRow ? 16 + LEGEND_ROW_HEIGHT : 0);
|
|
4206
4565
|
}
|
|
4207
4566
|
function padTopOf(chart, legend) {
|
|
4208
|
-
const titleHeight = chart.title ? Math.max(44, 20 +
|
|
4567
|
+
const titleHeight = chart.title ? Math.max(44, 20 + chunkUHKFJBY5_cjs.finite(chart.titleSize, 14) * 1.6) : 0;
|
|
4209
4568
|
return titleHeight || (legend.atTop && legend.hasItems ? 44 : 24);
|
|
4210
4569
|
}
|
|
4211
4570
|
function decorations(chart) {
|
|
@@ -4216,9 +4575,9 @@ function decorations(chart) {
|
|
|
4216
4575
|
const padBottom = padBottomOf(chart, showLabels, legend);
|
|
4217
4576
|
const padTop = padTopOf(chart, legend);
|
|
4218
4577
|
return {
|
|
4219
|
-
bounds:
|
|
4578
|
+
bounds: chunkUHKFJBY5_cjs.boxBounds(
|
|
4220
4579
|
{ x: chart.x, y: chart.y, width: chart.width, height: chart.height },
|
|
4221
|
-
|
|
4580
|
+
chunkUHKFJBY5_cjs.finite(chart.strokeWidth, 1) + 2
|
|
4222
4581
|
),
|
|
4223
4582
|
plot: {
|
|
4224
4583
|
x: chart.x + padLeft,
|
|
@@ -4240,26 +4599,26 @@ function categoryLabels(chart, count) {
|
|
|
4240
4599
|
return Array.from({ length: count }, (_value, index) => String(index + 1));
|
|
4241
4600
|
}
|
|
4242
4601
|
function buildCategoricalXAxisTicks(chart, layout, order) {
|
|
4243
|
-
const count =
|
|
4602
|
+
const count = chunkUHKFJBY5_cjs.barCategoryCount(chart);
|
|
4244
4603
|
const slotWidth = layout.plot.width / count;
|
|
4245
4604
|
const labels = categoryLabels(chart, count);
|
|
4246
4605
|
const editable = Boolean(chart.config?.categories?.length);
|
|
4247
|
-
const tilt =
|
|
4606
|
+
const tilt = chunkUHKFJBY5_cjs.labelTilt(chart);
|
|
4248
4607
|
const left = chart.categoryAlign === "left";
|
|
4249
4608
|
const groupGap = left ? Math.min(
|
|
4250
|
-
Math.max(0,
|
|
4609
|
+
Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.barGroupGap, 8)),
|
|
4251
4610
|
Math.max(0, slotWidth - 1)
|
|
4252
4611
|
) : 0;
|
|
4253
4612
|
return Array.from({ length: count }, (_value, index) => {
|
|
4254
4613
|
const centerX = layout.plot.x + (index + 0.5) * slotWidth;
|
|
4255
4614
|
if (tilt > 0) {
|
|
4256
4615
|
const text = labels[index] ?? String(index + 1);
|
|
4257
|
-
const { frame, rotation } =
|
|
4616
|
+
const { frame, rotation } = chunkUHKFJBY5_cjs.labelBelowFrame(chart, text, tilt, {
|
|
4258
4617
|
x: centerX,
|
|
4259
4618
|
y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart)
|
|
4260
4619
|
});
|
|
4261
4620
|
return {
|
|
4262
|
-
...
|
|
4621
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4263
4622
|
role: "axis",
|
|
4264
4623
|
id: `chart-x-tick-${chart.id}-${index}`,
|
|
4265
4624
|
order: order + index,
|
|
@@ -4270,11 +4629,11 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
|
|
|
4270
4629
|
align: "right",
|
|
4271
4630
|
rotation
|
|
4272
4631
|
}),
|
|
4273
|
-
prop: editable ?
|
|
4632
|
+
prop: editable ? chunkUHKFJBY5_cjs.categoryProp(index) : void 0
|
|
4274
4633
|
};
|
|
4275
4634
|
}
|
|
4276
4635
|
return {
|
|
4277
|
-
...
|
|
4636
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4278
4637
|
role: "axis",
|
|
4279
4638
|
id: `chart-x-tick-${chart.id}-${index}`,
|
|
4280
4639
|
order: order + index,
|
|
@@ -4289,24 +4648,24 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
|
|
|
4289
4648
|
chart,
|
|
4290
4649
|
align: left ? "left" : "center"
|
|
4291
4650
|
}),
|
|
4292
|
-
prop: editable ?
|
|
4651
|
+
prop: editable ? chunkUHKFJBY5_cjs.categoryProp(index) : void 0
|
|
4293
4652
|
};
|
|
4294
4653
|
});
|
|
4295
4654
|
}
|
|
4296
4655
|
function buildSeriesXAxisTicks(chart, layout, order) {
|
|
4297
4656
|
const count = Math.max(1, chart.series.length);
|
|
4298
4657
|
const slotWidth = layout.plot.width / count;
|
|
4299
|
-
const tilt =
|
|
4658
|
+
const tilt = chunkUHKFJBY5_cjs.labelTilt(chart);
|
|
4300
4659
|
return chart.series.map((series, index) => {
|
|
4301
4660
|
const centerX = layout.plot.x + (index + 0.5) * slotWidth;
|
|
4302
4661
|
if (tilt > 0) {
|
|
4303
4662
|
const text = series.label || series.id;
|
|
4304
|
-
const { frame, rotation } =
|
|
4663
|
+
const { frame, rotation } = chunkUHKFJBY5_cjs.labelBelowFrame(chart, text, tilt, {
|
|
4305
4664
|
x: centerX,
|
|
4306
4665
|
y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart)
|
|
4307
4666
|
});
|
|
4308
4667
|
return {
|
|
4309
|
-
...
|
|
4668
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4310
4669
|
role: "axis",
|
|
4311
4670
|
id: `chart-x-tick-${chart.id}-${index}`,
|
|
4312
4671
|
order: order + index,
|
|
@@ -4317,11 +4676,11 @@ function buildSeriesXAxisTicks(chart, layout, order) {
|
|
|
4317
4676
|
align: "right",
|
|
4318
4677
|
rotation
|
|
4319
4678
|
}),
|
|
4320
|
-
prop:
|
|
4679
|
+
prop: chunkUHKFJBY5_cjs.seriesLabelProp(series.id)
|
|
4321
4680
|
};
|
|
4322
4681
|
}
|
|
4323
4682
|
return {
|
|
4324
|
-
...
|
|
4683
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4325
4684
|
role: "axis",
|
|
4326
4685
|
id: `chart-x-tick-${chart.id}-${index}`,
|
|
4327
4686
|
order: order + index,
|
|
@@ -4336,16 +4695,16 @@ function buildSeriesXAxisTicks(chart, layout, order) {
|
|
|
4336
4695
|
chart,
|
|
4337
4696
|
align: "center"
|
|
4338
4697
|
}),
|
|
4339
|
-
prop:
|
|
4698
|
+
prop: chunkUHKFJBY5_cjs.seriesLabelProp(series.id)
|
|
4340
4699
|
};
|
|
4341
4700
|
});
|
|
4342
4701
|
}
|
|
4343
4702
|
|
|
4344
4703
|
// src/renderScene/charts/decorations/numericXAxis.ts
|
|
4345
4704
|
function buildNumericXAxisTicks(chart, layout, order) {
|
|
4346
|
-
return
|
|
4347
|
-
const x = layout.plot.x +
|
|
4348
|
-
return
|
|
4705
|
+
return chunkUHKFJBY5_cjs.chartTicks(chart.axisX).map((tick, index) => {
|
|
4706
|
+
const x = layout.plot.x + chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisX, layout.plot.width);
|
|
4707
|
+
return chunkUHKFJBY5_cjs.chartText({
|
|
4349
4708
|
role: "axis",
|
|
4350
4709
|
id: `chart-x-tick-${chart.id}-${tick}`,
|
|
4351
4710
|
order: order + index,
|
|
@@ -4360,9 +4719,9 @@ function buildNumericXAxisTicks(chart, layout, order) {
|
|
|
4360
4719
|
|
|
4361
4720
|
// src/renderScene/charts/decorations/numericYAxis.ts
|
|
4362
4721
|
function buildNumericYAxisTicks(chart, layout, order) {
|
|
4363
|
-
return
|
|
4364
|
-
const y = layout.plot.y + layout.plot.height -
|
|
4365
|
-
return
|
|
4722
|
+
return chunkUHKFJBY5_cjs.chartTicks(chart.axisY).map((tick, index) => {
|
|
4723
|
+
const y = layout.plot.y + layout.plot.height - chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisY, layout.plot.height);
|
|
4724
|
+
return chunkUHKFJBY5_cjs.chartText({
|
|
4366
4725
|
role: "axis",
|
|
4367
4726
|
id: `chart-y-tick-${chart.id}-${tick}`,
|
|
4368
4727
|
order: order + index,
|
|
@@ -4397,10 +4756,10 @@ function buildYAxisTicks(chart, layout, order) {
|
|
|
4397
4756
|
function xTickPositions(chart, layout) {
|
|
4398
4757
|
const { plot } = layout;
|
|
4399
4758
|
if (chart.chartType === "bar") {
|
|
4400
|
-
const count =
|
|
4759
|
+
const count = chunkUHKFJBY5_cjs.barCategoryCount(chart);
|
|
4401
4760
|
return Array.from({ length: count }, (_value, index) => plot.x + (index + 0.5) * plot.width / count);
|
|
4402
4761
|
}
|
|
4403
|
-
return
|
|
4762
|
+
return chunkUHKFJBY5_cjs.chartTicks(chart.axisX).map((tick) => plot.x + chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisX, plot.width));
|
|
4404
4763
|
}
|
|
4405
4764
|
function axisLineDash(chart, width) {
|
|
4406
4765
|
if (chart.axisLineStyle === "dashed") {
|
|
@@ -4409,8 +4768,8 @@ function axisLineDash(chart, width) {
|
|
|
4409
4768
|
return chart.axisLineStyle === "dotted" ? { dash: [0.1, width * 3], lineCap: "round" } : {};
|
|
4410
4769
|
}
|
|
4411
4770
|
function buildAxisLines(chart, layout, order) {
|
|
4412
|
-
const lineWidth =
|
|
4413
|
-
const tickLength =
|
|
4771
|
+
const lineWidth = chunkUHKFJBY5_cjs.finite(chart.axisLineWidth, 0);
|
|
4772
|
+
const tickLength = chunkUHKFJBY5_cjs.finite(chart.tickLength, 0);
|
|
4414
4773
|
if (lineWidth <= 0 && tickLength <= 0) {
|
|
4415
4774
|
return [];
|
|
4416
4775
|
}
|
|
@@ -4431,20 +4790,20 @@ function buildAxisLines(chart, layout, order) {
|
|
|
4431
4790
|
}
|
|
4432
4791
|
add("line-x", `M ${plot.x} ${bottom} L ${plot.x + plot.width} ${bottom}`);
|
|
4433
4792
|
}
|
|
4434
|
-
if (tickLength > 0 &&
|
|
4435
|
-
|
|
4436
|
-
const x = plot.x +
|
|
4793
|
+
if (tickLength > 0 && chunkUHKFJBY5_cjs.isHorizontalBar(chart)) {
|
|
4794
|
+
chunkUHKFJBY5_cjs.chartTicks(chart.axisY).forEach((tick) => {
|
|
4795
|
+
const x = plot.x + chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisY, plot.width);
|
|
4437
4796
|
add(`tick-v-${tick}`, `M ${x} ${bottom} L ${x} ${bottom + tickLength}`);
|
|
4438
4797
|
});
|
|
4439
|
-
const rows =
|
|
4798
|
+
const rows = chunkUHKFJBY5_cjs.horizontalRows(chart, plot);
|
|
4440
4799
|
for (let index = 0; index < rows.count; index++) {
|
|
4441
|
-
const y =
|
|
4800
|
+
const y = chunkUHKFJBY5_cjs.rowTop(rows, plot, index) + rows.labelRow + rows.barsHeight / 2;
|
|
4442
4801
|
add(`tick-c-${index}`, `M ${plot.x - tickLength} ${y} L ${plot.x} ${y}`);
|
|
4443
4802
|
}
|
|
4444
4803
|
}
|
|
4445
|
-
if (tickLength > 0 && !isHorizontalBoxplot2(chart) && !
|
|
4446
|
-
|
|
4447
|
-
const y = bottom -
|
|
4804
|
+
if (tickLength > 0 && !isHorizontalBoxplot2(chart) && !chunkUHKFJBY5_cjs.isHorizontalBar(chart)) {
|
|
4805
|
+
chunkUHKFJBY5_cjs.chartTicks(chart.axisY).forEach((tick) => {
|
|
4806
|
+
const y = bottom - chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisY, plot.height);
|
|
4448
4807
|
add(`tick-y-${tick}`, `M ${plot.x - tickLength} ${y} L ${plot.x} ${y}`);
|
|
4449
4808
|
});
|
|
4450
4809
|
xTickPositions(chart, layout).forEach((x, index) => {
|
|
@@ -4459,14 +4818,14 @@ function categoryNames(chart, count) {
|
|
|
4459
4818
|
}
|
|
4460
4819
|
function buildHorizontalBarAxes(chart, layout, order) {
|
|
4461
4820
|
const { plot, bounds } = layout;
|
|
4462
|
-
const rows =
|
|
4821
|
+
const rows = chunkUHKFJBY5_cjs.horizontalRows(chart, plot);
|
|
4463
4822
|
const above = chart.categoryAlign === "left";
|
|
4464
4823
|
const inside = chart.categoryAlign === "inside";
|
|
4465
4824
|
const editable = Boolean(chart.config?.categories?.length);
|
|
4466
4825
|
const nodes = categoryNames(chart, rows.count).map((name, index) => {
|
|
4467
|
-
const top =
|
|
4826
|
+
const top = chunkUHKFJBY5_cjs.rowTop(rows, plot, index);
|
|
4468
4827
|
return {
|
|
4469
|
-
...
|
|
4828
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4470
4829
|
role: "axis",
|
|
4471
4830
|
id: `chart-y-category-${chart.id}-${index}`,
|
|
4472
4831
|
order: order + index,
|
|
@@ -4476,19 +4835,19 @@ function buildHorizontalBarAxes(chart, layout, order) {
|
|
|
4476
4835
|
chart,
|
|
4477
4836
|
align: above || inside ? "left" : "right"
|
|
4478
4837
|
}),
|
|
4479
|
-
prop: editable ?
|
|
4838
|
+
prop: editable ? chunkUHKFJBY5_cjs.categoryProp(index) : void 0
|
|
4480
4839
|
};
|
|
4481
4840
|
});
|
|
4482
4841
|
if (chart.showValueAxis !== false) {
|
|
4483
|
-
|
|
4484
|
-
const x = plot.x +
|
|
4842
|
+
chunkUHKFJBY5_cjs.chartTicks(chart.axisY).forEach((tick, index) => {
|
|
4843
|
+
const x = plot.x + chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisY, plot.width);
|
|
4485
4844
|
nodes.push(
|
|
4486
|
-
|
|
4845
|
+
chunkUHKFJBY5_cjs.chartText({
|
|
4487
4846
|
role: "axis",
|
|
4488
4847
|
id: `chart-x-tick-${chart.id}-${tick}`,
|
|
4489
4848
|
order: order + rows.count + index,
|
|
4490
4849
|
bounds,
|
|
4491
|
-
frame: { x: x - 20, y: plot.y + plot.height + 4 +
|
|
4850
|
+
frame: { x: x - 20, y: plot.y + plot.height + 4 + chunkUHKFJBY5_cjs.finite(chart.tickLength, 0), width: 40, height: 18 },
|
|
4492
4851
|
text: String(tick),
|
|
4493
4852
|
chart,
|
|
4494
4853
|
align: "center"
|
|
@@ -4507,7 +4866,7 @@ function buildChartAxes(chart, layout, order) {
|
|
|
4507
4866
|
return lines;
|
|
4508
4867
|
}
|
|
4509
4868
|
order += lines.length;
|
|
4510
|
-
if (
|
|
4869
|
+
if (chunkUHKFJBY5_cjs.isHorizontalBar(chart)) {
|
|
4511
4870
|
return [...lines, ...buildHorizontalBarAxes(chart, layout, order)];
|
|
4512
4871
|
}
|
|
4513
4872
|
const xTicks = buildXAxisTicks(chart, layout, order);
|
|
@@ -4585,7 +4944,7 @@ function buildCircularChartGrid(chart, plot, bounds, order) {
|
|
|
4585
4944
|
const centerX = plot.x + plot.width / 2;
|
|
4586
4945
|
const centerY = plot.y + plot.height / 2;
|
|
4587
4946
|
const radius = Math.max(0, Math.min(plot.width, plot.height) / 2);
|
|
4588
|
-
const width =
|
|
4947
|
+
const width = chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1);
|
|
4589
4948
|
if (chart.gridLineStyle === "dotted") {
|
|
4590
4949
|
return buildDottedCircularGrid(chart, bounds, order, centerX, centerY, radius, width);
|
|
4591
4950
|
}
|
|
@@ -4596,7 +4955,7 @@ function buildCircularChartGrid(chart, plot, bounds, order) {
|
|
|
4596
4955
|
...gridLineDashStyle(chart, width)
|
|
4597
4956
|
};
|
|
4598
4957
|
const nodes = [];
|
|
4599
|
-
|
|
4958
|
+
chunkUHKFJBY5_cjs.chartTicks(chart.axisY).filter((tick) => tick > chart.axisY.min).forEach((tick) => {
|
|
4600
4959
|
const ringRadius = radius * ringRatio(chart, tick);
|
|
4601
4960
|
nodes.push({
|
|
4602
4961
|
type: "ellipse",
|
|
@@ -4610,8 +4969,8 @@ function buildCircularChartGrid(chart, plot, bounds, order) {
|
|
|
4610
4969
|
style
|
|
4611
4970
|
});
|
|
4612
4971
|
});
|
|
4613
|
-
|
|
4614
|
-
const angle =
|
|
4972
|
+
chunkUHKFJBY5_cjs.chartTicks(chart.axisX).forEach((tick) => {
|
|
4973
|
+
const angle = chunkUHKFJBY5_cjs.angleForAxisValue(chart.axisX.min, chart.axisX.max, tick);
|
|
4615
4974
|
const edgeX = centerX + Math.cos(angle) * radius;
|
|
4616
4975
|
const edgeY = centerY + Math.sin(angle) * radius;
|
|
4617
4976
|
nodes.push({
|
|
@@ -4626,13 +4985,13 @@ function buildCircularChartGrid(chart, plot, bounds, order) {
|
|
|
4626
4985
|
return nodes;
|
|
4627
4986
|
}
|
|
4628
4987
|
function buildDottedCircularGrid(chart, bounds, order, centerX, centerY, radius, width) {
|
|
4629
|
-
const yTicks =
|
|
4630
|
-
const xTicks =
|
|
4988
|
+
const yTicks = chunkUHKFJBY5_cjs.chartTicks(chart.axisY).filter((tick) => tick > chart.axisY.min);
|
|
4989
|
+
const xTicks = chunkUHKFJBY5_cjs.chartTicks(chart.axisX);
|
|
4631
4990
|
const nodes = [];
|
|
4632
4991
|
yTicks.forEach((yTick) => {
|
|
4633
4992
|
const ringRadius = radius * ringRatio(chart, yTick);
|
|
4634
4993
|
xTicks.forEach((xTick) => {
|
|
4635
|
-
const angle =
|
|
4994
|
+
const angle = chunkUHKFJBY5_cjs.angleForAxisValue(chart.axisX.min, chart.axisX.max, xTick);
|
|
4636
4995
|
const x = centerX + Math.cos(angle) * ringRadius;
|
|
4637
4996
|
const y = centerY + Math.sin(angle) * ringRadius;
|
|
4638
4997
|
const id = `chart-grid-dot-${chart.id}-${xTick}-${yTick}`;
|
|
@@ -4654,8 +5013,8 @@ function buildChartGrid(chart, plot, bounds, order) {
|
|
|
4654
5013
|
if (chart.gridShape === "circle" && CIRCULAR_GRID_CHART_TYPES.has(chart.chartType)) {
|
|
4655
5014
|
return buildCircularChartGrid(chart, plot, bounds, order);
|
|
4656
5015
|
}
|
|
4657
|
-
const width =
|
|
4658
|
-
if (
|
|
5016
|
+
const width = chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1);
|
|
5017
|
+
if (chunkUHKFJBY5_cjs.isHorizontalBar(chart)) {
|
|
4659
5018
|
return buildHorizontalBarGrid(chart, plot, bounds, order, width);
|
|
4660
5019
|
}
|
|
4661
5020
|
const clip = chart.chartType === "field" ? fieldSurfaceClip(chart, plot) : void 0;
|
|
@@ -4670,8 +5029,8 @@ function buildChartGrid(chart, plot, bounds, order) {
|
|
|
4670
5029
|
clip
|
|
4671
5030
|
};
|
|
4672
5031
|
const nodes = [];
|
|
4673
|
-
(chart.gridAxes === "y" ? [] :
|
|
4674
|
-
const x = plot.x +
|
|
5032
|
+
(chart.gridAxes === "y" ? [] : chunkUHKFJBY5_cjs.chartTicks(chart.axisX)).forEach((tick) => {
|
|
5033
|
+
const x = plot.x + chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisX, plot.width);
|
|
4675
5034
|
nodes.push({
|
|
4676
5035
|
type: "path",
|
|
4677
5036
|
id: `chart-grid-x-${chart.id}-${tick}`,
|
|
@@ -4681,8 +5040,8 @@ function buildChartGrid(chart, plot, bounds, order) {
|
|
|
4681
5040
|
style
|
|
4682
5041
|
});
|
|
4683
5042
|
});
|
|
4684
|
-
(chart.gridAxes === "x" ? [] :
|
|
4685
|
-
const y = plot.y + plot.height -
|
|
5043
|
+
(chart.gridAxes === "x" ? [] : chunkUHKFJBY5_cjs.chartTicks(chart.axisY)).forEach((tick) => {
|
|
5044
|
+
const y = plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisY, plot.height);
|
|
4686
5045
|
nodes.push({
|
|
4687
5046
|
type: "path",
|
|
4688
5047
|
id: `chart-grid-y-${chart.id}-${tick}`,
|
|
@@ -4704,8 +5063,8 @@ function buildHorizontalBarGrid(chart, plot, bounds, order, width) {
|
|
|
4704
5063
|
strokeWidth: width,
|
|
4705
5064
|
...chart.gridLineStyle === "dotted" ? { dash: [0.1, width * 3], lineCap: "round" } : gridLineDashStyle(chart, width)
|
|
4706
5065
|
};
|
|
4707
|
-
return
|
|
4708
|
-
const x = plot.x +
|
|
5066
|
+
return chunkUHKFJBY5_cjs.chartTicks(chart.axisY).map((tick, index) => {
|
|
5067
|
+
const x = plot.x + chunkUHKFJBY5_cjs.mapChartValue(tick, chart.axisY, plot.width);
|
|
4709
5068
|
return {
|
|
4710
5069
|
type: "path",
|
|
4711
5070
|
id: `chart-grid-x-${chart.id}-${tick}`,
|
|
@@ -4717,13 +5076,13 @@ function buildHorizontalBarGrid(chart, plot, bounds, order, width) {
|
|
|
4717
5076
|
});
|
|
4718
5077
|
}
|
|
4719
5078
|
function buildDottedRectGrid(chart, plot, bounds, order, width, clip) {
|
|
4720
|
-
const xTicks =
|
|
4721
|
-
const yTicks =
|
|
5079
|
+
const xTicks = chunkUHKFJBY5_cjs.chartTicks(chart.axisX);
|
|
5080
|
+
const yTicks = chunkUHKFJBY5_cjs.chartTicks(chart.axisY);
|
|
4722
5081
|
const nodes = [];
|
|
4723
5082
|
xTicks.forEach((xTick) => {
|
|
4724
|
-
const x = plot.x +
|
|
5083
|
+
const x = plot.x + chunkUHKFJBY5_cjs.mapChartValue(xTick, chart.axisX, plot.width);
|
|
4725
5084
|
yTicks.forEach((yTick) => {
|
|
4726
|
-
const y = plot.y + plot.height -
|
|
5085
|
+
const y = plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(yTick, chart.axisY, plot.height);
|
|
4727
5086
|
const id = `chart-grid-dot-${chart.id}-${xTick}-${yTick}`;
|
|
4728
5087
|
nodes.push(createGridDot(chart, id, order + nodes.length, bounds, x, y, width, clip));
|
|
4729
5088
|
});
|
|
@@ -4746,7 +5105,7 @@ function createChartRuleMarks(render2) {
|
|
|
4746
5105
|
return {
|
|
4747
5106
|
rule,
|
|
4748
5107
|
color: rule.color || render2.chart.strokeColor || "#475569",
|
|
4749
|
-
y: render2.plot.y + render2.plot.height -
|
|
5108
|
+
y: render2.plot.y + render2.plot.height - chunkUHKFJBY5_cjs.mapChartValue(rule.at, render2.chart.axisY, render2.plot.height),
|
|
4750
5109
|
lineOrder,
|
|
4751
5110
|
labelOrder
|
|
4752
5111
|
};
|
|
@@ -4766,7 +5125,7 @@ function createChartRuleLine(render2, mark) {
|
|
|
4766
5125
|
order: mark.lineOrder,
|
|
4767
5126
|
bounds: render2.bounds,
|
|
4768
5127
|
d: `M ${render2.plot.x} ${mark.y} L ${render2.plot.x + render2.plot.width} ${mark.y}`,
|
|
4769
|
-
prop:
|
|
5128
|
+
prop: chunkUHKFJBY5_cjs.ruleAtProp(mark.rule.id),
|
|
4770
5129
|
propKind: "value",
|
|
4771
5130
|
style: {
|
|
4772
5131
|
fill: { kind: "none" },
|
|
@@ -4777,9 +5136,9 @@ function createChartRuleLine(render2, mark) {
|
|
|
4777
5136
|
};
|
|
4778
5137
|
}
|
|
4779
5138
|
function createChartRuleLabel(render2, mark) {
|
|
4780
|
-
const fontSize = Math.max(9,
|
|
5139
|
+
const fontSize = Math.max(9, chunkUHKFJBY5_cjs.finite(render2.chart.fontSize, 12) - 2);
|
|
4781
5140
|
return {
|
|
4782
|
-
...
|
|
5141
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4783
5142
|
id: `chart-rule-label-${render2.chart.id}-${mark.rule.id}`,
|
|
4784
5143
|
order: mark.labelOrder ?? mark.lineOrder + 1,
|
|
4785
5144
|
bounds: render2.bounds,
|
|
@@ -4788,19 +5147,19 @@ function createChartRuleLabel(render2, mark) {
|
|
|
4788
5147
|
chart: render2.chart
|
|
4789
5148
|
}),
|
|
4790
5149
|
color: mark.color,
|
|
4791
|
-
prop:
|
|
5150
|
+
prop: chunkUHKFJBY5_cjs.ruleTextProp(mark.rule.id)
|
|
4792
5151
|
};
|
|
4793
5152
|
}
|
|
4794
5153
|
|
|
4795
5154
|
// src/renderScene/charts/chartBackdrop.ts
|
|
4796
5155
|
function chartImageRect(chart) {
|
|
4797
|
-
const inset =
|
|
5156
|
+
const inset = chunkUHKFJBY5_cjs.finite(chart.strokeWidth, 1) / 2;
|
|
4798
5157
|
return {
|
|
4799
5158
|
x: chart.x + inset,
|
|
4800
5159
|
y: chart.y + inset,
|
|
4801
5160
|
width: Math.max(1, chart.width - inset * 2),
|
|
4802
5161
|
height: Math.max(1, chart.height - inset * 2),
|
|
4803
|
-
rx: Math.max(0,
|
|
5162
|
+
rx: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.cornerRadius, 12) - inset)
|
|
4804
5163
|
};
|
|
4805
5164
|
}
|
|
4806
5165
|
function buildChartBackdrop(chart, bounds, order) {
|
|
@@ -4842,7 +5201,7 @@ function buildChartBackdrop(chart, bounds, order) {
|
|
|
4842
5201
|
// src/renderScene/charts/renderers/bar/glass.ts
|
|
4843
5202
|
function createGlassBackdropNodes(context, id, d) {
|
|
4844
5203
|
const { chart, bounds, nextOrder } = context;
|
|
4845
|
-
const blur =
|
|
5204
|
+
const blur = chunkUHKFJBY5_cjs.finite(chart.config?.barGlassBlur, 0);
|
|
4846
5205
|
if (blur <= 0 || !chart.fillImage) {
|
|
4847
5206
|
return [];
|
|
4848
5207
|
}
|
|
@@ -4860,7 +5219,7 @@ function createGlassBackdropNodes(context, id, d) {
|
|
|
4860
5219
|
href: chart.fillImage.url,
|
|
4861
5220
|
style: {
|
|
4862
5221
|
blur,
|
|
4863
|
-
saturate:
|
|
5222
|
+
saturate: chunkUHKFJBY5_cjs.finite(chart.config?.barGlassSaturation, 1),
|
|
4864
5223
|
clip: { type: "path", d },
|
|
4865
5224
|
pointerEvents: "none"
|
|
4866
5225
|
}
|
|
@@ -4911,8 +5270,8 @@ function createBarGlowNode(context, id, d, color, glow, bounds = context.bounds)
|
|
|
4911
5270
|
bounds,
|
|
4912
5271
|
d,
|
|
4913
5272
|
style: {
|
|
4914
|
-
fill:
|
|
4915
|
-
shadow: { color:
|
|
5273
|
+
fill: chunkUHKFJBY5_cjs.paint(color, diagnostics, chart.id),
|
|
5274
|
+
shadow: { color: chunkUHKFJBY5_cjs.representativeColor(color, "#ffffff"), opacity: 0.9, blur: glow, dx: 0, dy: 0 },
|
|
4916
5275
|
pointerEvents: "none"
|
|
4917
5276
|
}
|
|
4918
5277
|
};
|
|
@@ -4923,14 +5282,14 @@ function barLabelsEnabled(context) {
|
|
|
4923
5282
|
return context.chart.config?.showBarLabels === true;
|
|
4924
5283
|
}
|
|
4925
5284
|
function resolvePlacement(target, size) {
|
|
4926
|
-
const fits = target.frame.height >= size.height +
|
|
5285
|
+
const fits = target.frame.height >= size.height + chunkUHKFJBY5_cjs.BAR_LABEL.gap * 2;
|
|
4927
5286
|
return target.placement !== "outside" && !fits ? "outside" : target.placement;
|
|
4928
5287
|
}
|
|
4929
5288
|
function labelTop(placement, frame, height) {
|
|
4930
5289
|
if (placement === "outside") {
|
|
4931
|
-
return frame.y - height -
|
|
5290
|
+
return frame.y - height - chunkUHKFJBY5_cjs.BAR_LABEL.gap;
|
|
4932
5291
|
}
|
|
4933
|
-
return placement === "inside" ? frame.y +
|
|
5292
|
+
return placement === "inside" ? frame.y + chunkUHKFJBY5_cjs.BAR_LABEL.gap : frame.y + frame.height / 2 - height / 2;
|
|
4934
5293
|
}
|
|
4935
5294
|
function createPillNode(context, id, box, color) {
|
|
4936
5295
|
const { chart, bounds, diagnostics, nextOrder } = context;
|
|
@@ -4940,11 +5299,11 @@ function createPillNode(context, id, box, color) {
|
|
|
4940
5299
|
id: `${id}-pill`,
|
|
4941
5300
|
order: nextOrder(),
|
|
4942
5301
|
bounds,
|
|
4943
|
-
d:
|
|
5302
|
+
d: chunkUHKFJBY5_cjs.pillPath(box.left, box.top, box.width, box.height),
|
|
4944
5303
|
style: {
|
|
4945
|
-
fill: config?.barLabelPillColor ?
|
|
4946
|
-
stroke:
|
|
4947
|
-
strokeWidth:
|
|
5304
|
+
fill: config?.barLabelPillColor ? chunkUHKFJBY5_cjs.paint(config.barLabelPillColor, diagnostics, chart.id) : { kind: "none" },
|
|
5305
|
+
stroke: chunkUHKFJBY5_cjs.paint(config?.barLabelBorderColor ?? color, diagnostics, chart.id),
|
|
5306
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(config?.barLabelBorderWidth, 1),
|
|
4948
5307
|
pointerEvents: "none"
|
|
4949
5308
|
}
|
|
4950
5309
|
};
|
|
@@ -4953,7 +5312,7 @@ function createTextNode(context, id, box, text, placement, fontSize, color) {
|
|
|
4953
5312
|
const { chart, bounds, nextOrder } = context;
|
|
4954
5313
|
const config = chart.config;
|
|
4955
5314
|
return {
|
|
4956
|
-
...
|
|
5315
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4957
5316
|
id,
|
|
4958
5317
|
order: nextOrder(),
|
|
4959
5318
|
bounds,
|
|
@@ -4974,7 +5333,7 @@ function createAxisValueNode(context, target, text, fontSize) {
|
|
|
4974
5333
|
const config = chart.config;
|
|
4975
5334
|
const top = plot.y + plot.height + 4 + 16 + Math.max(0, chart.tickLength ?? 0);
|
|
4976
5335
|
return {
|
|
4977
|
-
...
|
|
5336
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
4978
5337
|
id: target.id,
|
|
4979
5338
|
order: nextOrder(),
|
|
4980
5339
|
bounds,
|
|
@@ -4983,7 +5342,7 @@ function createAxisValueNode(context, target, text, fontSize) {
|
|
|
4983
5342
|
y: target.frame.y + target.frame.height / 2 - fontSize * 0.6,
|
|
4984
5343
|
width: plot.width - 14,
|
|
4985
5344
|
height: fontSize * 1.2
|
|
4986
|
-
} : { x: plot.x, y: target.frame.y -
|
|
5345
|
+
} : { x: plot.x, y: target.frame.y - chunkUHKFJBY5_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 },
|
|
4987
5346
|
text,
|
|
4988
5347
|
chart,
|
|
4989
5348
|
align: target.horizontal ? "right" : chart.categoryAlign === "left" ? "left" : "center"
|
|
@@ -4997,24 +5356,24 @@ function createAxisValueNode(context, target, text, fontSize) {
|
|
|
4997
5356
|
}
|
|
4998
5357
|
function horizontalPlacement(target, size) {
|
|
4999
5358
|
const requested = target.placement === "axis" ? "outside" : target.placement;
|
|
5000
|
-
const fits = target.frame.width >= size.width +
|
|
5359
|
+
const fits = target.frame.width >= size.width + chunkUHKFJBY5_cjs.BAR_LABEL.gap * 2;
|
|
5001
5360
|
return requested !== "outside" && !fits ? "outside" : requested;
|
|
5002
5361
|
}
|
|
5003
5362
|
function horizontalBox(target, size, placement) {
|
|
5004
5363
|
const { frame } = target;
|
|
5005
|
-
const left = placement === "outside" ? frame.x + frame.width +
|
|
5364
|
+
const left = placement === "outside" ? frame.x + frame.width + chunkUHKFJBY5_cjs.BAR_LABEL.gap : placement === "inside" ? frame.x + frame.width - size.width - chunkUHKFJBY5_cjs.BAR_LABEL.gap : frame.x + frame.width / 2 - size.width / 2;
|
|
5006
5365
|
return { ...size, left, top: frame.y + frame.height / 2 - size.height / 2 };
|
|
5007
5366
|
}
|
|
5008
5367
|
function createBarLabelNodes(context, target) {
|
|
5009
5368
|
const { chart } = context;
|
|
5010
5369
|
const config = chart.config;
|
|
5011
|
-
const fontSize = Math.max(8,
|
|
5012
|
-
const text =
|
|
5370
|
+
const fontSize = Math.max(8, chunkUHKFJBY5_cjs.finite(config?.barLabelFontSize, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12)));
|
|
5371
|
+
const text = chunkUHKFJBY5_cjs.formatBarLabel(target.value, config?.barLabelFormat);
|
|
5013
5372
|
if (target.placement === "axis") {
|
|
5014
5373
|
return [createAxisValueNode(context, target, text, fontSize)];
|
|
5015
5374
|
}
|
|
5016
5375
|
const pill = config?.barLabelPill === true;
|
|
5017
|
-
const size =
|
|
5376
|
+
const size = chunkUHKFJBY5_cjs.barLabelSize(text, fontSize, pill);
|
|
5018
5377
|
const placement = target.horizontal ? horizontalPlacement(target, size) : resolvePlacement(target, size);
|
|
5019
5378
|
const box = target.horizontal ? horizontalBox(target, size, placement) : {
|
|
5020
5379
|
...size,
|
|
@@ -5055,7 +5414,7 @@ function barTrackClip(context, frame) {
|
|
|
5055
5414
|
}
|
|
5056
5415
|
return {
|
|
5057
5416
|
type: "path",
|
|
5058
|
-
d:
|
|
5417
|
+
d: chunkUHKFJBY5_cjs.roundedBarPath(frame.x, frame.y, frame.width, frame.height, context.chart.config?.barCornerRadius ?? 2)
|
|
5059
5418
|
};
|
|
5060
5419
|
}
|
|
5061
5420
|
function barTrackEnabled(context) {
|
|
@@ -5065,8 +5424,8 @@ function createBarTrackNodes(context, id, frame, orientation = "vertical") {
|
|
|
5065
5424
|
const { chart, bounds, diagnostics, nextOrder } = context;
|
|
5066
5425
|
const config = chart.config;
|
|
5067
5426
|
const radius = config?.barCornerRadius ?? 2;
|
|
5068
|
-
const segments =
|
|
5069
|
-
const d = segments > 0 ?
|
|
5427
|
+
const segments = chunkUHKFJBY5_cjs.finite(config?.barSegments, 0);
|
|
5428
|
+
const d = segments > 0 ? chunkUHKFJBY5_cjs.segmentedBarPath(frame, orientation, segments, chunkUHKFJBY5_cjs.finite(config?.barSegmentGap, 4), radius, 1, true) : chunkUHKFJBY5_cjs.roundedBarPath(frame.x, frame.y, frame.width, frame.height, radius);
|
|
5070
5429
|
const nodes = [
|
|
5071
5430
|
{
|
|
5072
5431
|
type: "path",
|
|
@@ -5075,7 +5434,7 @@ function createBarTrackNodes(context, id, frame, orientation = "vertical") {
|
|
|
5075
5434
|
bounds,
|
|
5076
5435
|
d,
|
|
5077
5436
|
style: {
|
|
5078
|
-
fill:
|
|
5437
|
+
fill: chunkUHKFJBY5_cjs.paint(config?.barTrackColor ?? chart.gridColor ?? "#e2e8f0", diagnostics, chart.id),
|
|
5079
5438
|
pointerEvents: "none"
|
|
5080
5439
|
}
|
|
5081
5440
|
}
|
|
@@ -5091,13 +5450,13 @@ function createBarTrackNodes(context, id, frame, orientation = "vertical") {
|
|
|
5091
5450
|
frame.y,
|
|
5092
5451
|
frame.width,
|
|
5093
5452
|
frame.height,
|
|
5094
|
-
|
|
5095
|
-
Math.max(MIN_HATCH_SPACING,
|
|
5453
|
+
chunkUHKFJBY5_cjs.finite(config.barTrackHatchAngle, DEFAULT_HATCH.angle),
|
|
5454
|
+
Math.max(MIN_HATCH_SPACING, chunkUHKFJBY5_cjs.finite(config.barTrackHatchSpacing, DEFAULT_HATCH.spacing))
|
|
5096
5455
|
),
|
|
5097
5456
|
style: {
|
|
5098
5457
|
fill: { kind: "none" },
|
|
5099
|
-
stroke:
|
|
5100
|
-
strokeWidth:
|
|
5458
|
+
stroke: chunkUHKFJBY5_cjs.paint(config.barTrackHatchColor ?? chart.gridColor ?? "#cbd5e1", diagnostics, chart.id),
|
|
5459
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(config.barTrackHatchWidth, DEFAULT_HATCH.width),
|
|
5101
5460
|
pointerEvents: "none",
|
|
5102
5461
|
clip: { type: "path", d }
|
|
5103
5462
|
}
|
|
@@ -5144,23 +5503,23 @@ function groupedShape(context, frame) {
|
|
|
5144
5503
|
const { chart, plot } = context;
|
|
5145
5504
|
const config = chart.config;
|
|
5146
5505
|
const radius = config?.barCornerRadius ?? 2;
|
|
5147
|
-
const segments =
|
|
5506
|
+
const segments = chunkUHKFJBY5_cjs.finite(config?.barSegments, 0);
|
|
5148
5507
|
if (segments > 0) {
|
|
5149
|
-
return
|
|
5508
|
+
return chunkUHKFJBY5_cjs.segmentedBarPath(
|
|
5150
5509
|
{ x: frame.x, y: plot.y, width: frame.width, height: plot.height },
|
|
5151
5510
|
"vertical",
|
|
5152
5511
|
segments,
|
|
5153
|
-
|
|
5512
|
+
chunkUHKFJBY5_cjs.finite(config?.barSegmentGap, 4),
|
|
5154
5513
|
radius,
|
|
5155
5514
|
frame.height / plot.height,
|
|
5156
5515
|
config?.barSegmentSnap !== false
|
|
5157
5516
|
);
|
|
5158
5517
|
}
|
|
5159
|
-
return
|
|
5518
|
+
return chunkUHKFJBY5_cjs.barPath(frame.x, frame.y, frame.width, frame.height, radius, config?.barRoundedBottom === true);
|
|
5160
5519
|
}
|
|
5161
5520
|
function createGroupedGlow(context, mark) {
|
|
5162
5521
|
const { chart } = context;
|
|
5163
|
-
const glow =
|
|
5522
|
+
const glow = chunkUHKFJBY5_cjs.finite(chart.config?.barGlow, 0);
|
|
5164
5523
|
if (glow <= 0 || mark.frame.height <= 0) {
|
|
5165
5524
|
return [];
|
|
5166
5525
|
}
|
|
@@ -5171,10 +5530,10 @@ function createGroupedGlow(context, mark) {
|
|
|
5171
5530
|
}
|
|
5172
5531
|
function createGroupedBarLayout(context) {
|
|
5173
5532
|
const { chart, plot } = context;
|
|
5174
|
-
const valueCount =
|
|
5533
|
+
const valueCount = chunkUHKFJBY5_cjs.barCategoryCount(chart);
|
|
5175
5534
|
const slotWidth = plot.width / valueCount;
|
|
5176
|
-
const groupGap = Math.min(Math.max(0,
|
|
5177
|
-
const barGap = Math.max(0,
|
|
5535
|
+
const groupGap = Math.min(Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.barGroupGap, 8)), Math.max(0, slotWidth - 1));
|
|
5536
|
+
const barGap = Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.barGap, 2));
|
|
5178
5537
|
return {
|
|
5179
5538
|
slotWidth,
|
|
5180
5539
|
seriesWidth: Math.max(1, (slotWidth - groupGap) / Math.max(1, chart.series.length)),
|
|
@@ -5184,10 +5543,10 @@ function createGroupedBarLayout(context) {
|
|
|
5184
5543
|
}
|
|
5185
5544
|
function createSeriesBarMarks(context, layout, series, seriesIndex) {
|
|
5186
5545
|
const { chart, plot } = context;
|
|
5187
|
-
const seriesColor2 = series.color ??
|
|
5546
|
+
const seriesColor2 = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
5188
5547
|
return series.values.map((value, valueIndex) => {
|
|
5189
5548
|
const numericValue = Array.isArray(value) ? value[1] : value;
|
|
5190
|
-
const height = Math.max(0,
|
|
5549
|
+
const height = Math.max(0, chunkUHKFJBY5_cjs.mapChartValue(numericValue, chart.axisY, plot.height));
|
|
5191
5550
|
return {
|
|
5192
5551
|
seriesId: series.id,
|
|
5193
5552
|
valueIndex,
|
|
@@ -5221,10 +5580,10 @@ function createGroupedBarNodes(context, mark) {
|
|
|
5221
5580
|
const radius = chart.config?.barCornerRadius ?? 2;
|
|
5222
5581
|
const { x, width } = mark.frame;
|
|
5223
5582
|
const path = groupedShape(context, mark.frame);
|
|
5224
|
-
const fill2 =
|
|
5225
|
-
const stroke =
|
|
5226
|
-
const strokeWidth =
|
|
5227
|
-
const shadow =
|
|
5583
|
+
const fill2 = chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id);
|
|
5584
|
+
const stroke = chunkUHKFJBY5_cjs.paint(chart.config?.barBorderColor || "#000000", diagnostics, chart.id);
|
|
5585
|
+
const strokeWidth = chunkUHKFJBY5_cjs.finite(chart.config?.barBorderWidth, 0);
|
|
5586
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
5228
5587
|
const shadowCaster = shadow ? {
|
|
5229
5588
|
type: "path",
|
|
5230
5589
|
id: `chart-bar-shadow-${chart.id}-${mark.seriesId}-${mark.valueIndex}`,
|
|
@@ -5254,10 +5613,10 @@ function createGroupedBarNodes(context, mark) {
|
|
|
5254
5613
|
valueIndex: mark.valueIndex,
|
|
5255
5614
|
mark: "bar",
|
|
5256
5615
|
radius,
|
|
5257
|
-
colorProp:
|
|
5616
|
+
colorProp: chunkUHKFJBY5_cjs.seriesValueColorProp(mark.seriesId, mark.valueIndex),
|
|
5258
5617
|
hasColorOverride: mark.hasColorOverride
|
|
5259
5618
|
},
|
|
5260
|
-
prop:
|
|
5619
|
+
prop: chunkUHKFJBY5_cjs.seriesValueProp(mark.seriesId, mark.valueIndex),
|
|
5261
5620
|
style: { fill: fill2, stroke, strokeWidth, innerShadow: shadow }
|
|
5262
5621
|
};
|
|
5263
5622
|
const glass = createGlassBackdropNodes(context, `${mark.seriesId}-${mark.valueIndex}`, path);
|
|
@@ -5268,15 +5627,15 @@ function createGroupedBarError(context, mark) {
|
|
|
5268
5627
|
return null;
|
|
5269
5628
|
}
|
|
5270
5629
|
const { chart, plot, bounds, nextOrder } = context;
|
|
5271
|
-
const [lower, upper] =
|
|
5272
|
-
return
|
|
5630
|
+
const [lower, upper] = chunkUHKFJBY5_cjs.errorBarRange(mark.value, mark.error);
|
|
5631
|
+
return chunkUHKFJBY5_cjs.createVerticalErrorWhiskerNode({
|
|
5273
5632
|
id: `chart-bar-error-${chart.id}-${mark.seriesId}-${mark.valueIndex}`,
|
|
5274
5633
|
order: nextOrder(),
|
|
5275
5634
|
bounds,
|
|
5276
5635
|
geometry: {
|
|
5277
5636
|
centerX: mark.frame.x + mark.frame.width / 2,
|
|
5278
|
-
startY: plot.y + plot.height -
|
|
5279
|
-
endY: plot.y + plot.height -
|
|
5637
|
+
startY: plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(lower, chart.axisY, plot.height),
|
|
5638
|
+
endY: plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(upper, chart.axisY, plot.height)
|
|
5280
5639
|
},
|
|
5281
5640
|
color: chart.textColor ?? "#0f172a",
|
|
5282
5641
|
valueReference: { seriesId: mark.seriesId, valueIndex: mark.valueIndex }
|
|
@@ -5286,9 +5645,9 @@ function createGroupedBarError(context, mark) {
|
|
|
5286
5645
|
// src/renderScene/charts/renderers/bar/horizontal.ts
|
|
5287
5646
|
function barFrame(context, rows, seriesIndex, valueIndex, value) {
|
|
5288
5647
|
const { chart, plot } = context;
|
|
5289
|
-
const top =
|
|
5648
|
+
const top = chunkUHKFJBY5_cjs.rowTop(rows, plot, valueIndex) + rows.labelRow;
|
|
5290
5649
|
if (context.stackedMode) {
|
|
5291
|
-
const segment =
|
|
5650
|
+
const segment = chunkUHKFJBY5_cjs.stackedSegment(chart, context.stackedMode, valueIndex, seriesIndex, plot.width);
|
|
5292
5651
|
const start = Math.min(segment.pixelStart, segment.pixelEnd);
|
|
5293
5652
|
return {
|
|
5294
5653
|
x: plot.x + start,
|
|
@@ -5297,27 +5656,27 @@ function barFrame(context, rows, seriesIndex, valueIndex, value) {
|
|
|
5297
5656
|
height: rows.barsHeight
|
|
5298
5657
|
};
|
|
5299
5658
|
}
|
|
5300
|
-
const barGap = Math.max(0,
|
|
5659
|
+
const barGap = Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.barGap, 2));
|
|
5301
5660
|
const seriesHeight = rows.barsHeight / Math.max(1, chart.series.length);
|
|
5302
|
-
const width = Math.max(0,
|
|
5661
|
+
const width = Math.max(0, chunkUHKFJBY5_cjs.mapChartValue(value, chart.axisY, plot.width));
|
|
5303
5662
|
return { x: plot.x, y: top + seriesIndex * seriesHeight, width, height: Math.max(1, seriesHeight - barGap) };
|
|
5304
5663
|
}
|
|
5305
5664
|
function barPath2(context, frame) {
|
|
5306
5665
|
const { chart, plot } = context;
|
|
5307
5666
|
const config = chart.config;
|
|
5308
|
-
const segments = context.stackedMode && chart.series.length > 1 ? 0 :
|
|
5667
|
+
const segments = context.stackedMode && chart.series.length > 1 ? 0 : chunkUHKFJBY5_cjs.finite(config?.barSegments, 0);
|
|
5309
5668
|
if (segments > 0) {
|
|
5310
|
-
return
|
|
5669
|
+
return chunkUHKFJBY5_cjs.segmentedBarPath(
|
|
5311
5670
|
{ x: plot.x, y: frame.y, width: plot.width, height: frame.height },
|
|
5312
5671
|
"horizontal",
|
|
5313
5672
|
segments,
|
|
5314
|
-
|
|
5673
|
+
chunkUHKFJBY5_cjs.finite(config?.barSegmentGap, 4),
|
|
5315
5674
|
config?.barCornerRadius ?? 2,
|
|
5316
5675
|
frame.width / plot.width,
|
|
5317
5676
|
config?.barSegmentSnap !== false
|
|
5318
5677
|
);
|
|
5319
5678
|
}
|
|
5320
|
-
return
|
|
5679
|
+
return chunkUHKFJBY5_cjs.roundedBarPath(frame.x, frame.y, frame.width, frame.height, config?.barCornerRadius ?? 2);
|
|
5321
5680
|
}
|
|
5322
5681
|
function markOf(context, rows, series, seriesIndex, valueIndex, value) {
|
|
5323
5682
|
const { plot } = context;
|
|
@@ -5337,16 +5696,16 @@ function markOf(context, rows, series, seriesIndex, valueIndex, value) {
|
|
|
5337
5696
|
maxY: frame.y + frame.height
|
|
5338
5697
|
},
|
|
5339
5698
|
path: barPath2(context, frame),
|
|
5340
|
-
color: series.colors?.[valueIndex] ?? series.color ??
|
|
5699
|
+
color: series.colors?.[valueIndex] ?? series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length]
|
|
5341
5700
|
};
|
|
5342
5701
|
}
|
|
5343
5702
|
function barNodes(context, mark) {
|
|
5344
5703
|
const { chart, diagnostics, nextOrder } = context;
|
|
5345
5704
|
const config = chart.config;
|
|
5346
|
-
const stroke =
|
|
5347
|
-
const strokeWidth =
|
|
5348
|
-
const shadow =
|
|
5349
|
-
const fill2 =
|
|
5705
|
+
const stroke = chunkUHKFJBY5_cjs.paint(config?.barBorderColor || "#000000", diagnostics, chart.id);
|
|
5706
|
+
const strokeWidth = chunkUHKFJBY5_cjs.finite(config?.barBorderWidth, 0);
|
|
5707
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
5708
|
+
const fill2 = chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id);
|
|
5350
5709
|
const nodes = [...createGlassBackdropNodes(context, mark.id, mark.path)];
|
|
5351
5710
|
if (shadow) {
|
|
5352
5711
|
nodes.push({
|
|
@@ -5370,7 +5729,7 @@ function barNodes(context, mark) {
|
|
|
5370
5729
|
valueIndex: mark.valueIndex,
|
|
5371
5730
|
mark: "bar",
|
|
5372
5731
|
radius: config?.barCornerRadius ?? 2,
|
|
5373
|
-
colorProp:
|
|
5732
|
+
colorProp: chunkUHKFJBY5_cjs.seriesValueColorProp(mark.series.id, mark.valueIndex),
|
|
5374
5733
|
hasColorOverride: mark.series.colors?.[mark.valueIndex] != null
|
|
5375
5734
|
},
|
|
5376
5735
|
style: { fill: fill2, stroke, strokeWidth, innerShadow: shadow }
|
|
@@ -5400,7 +5759,7 @@ function pushBar(context, rows, layers, series, seriesIndex, valueIndex, value,
|
|
|
5400
5759
|
layers.tracks.push(...createBarTrackNodes(context, mark.id, mark.trackFrame, "horizontal"));
|
|
5401
5760
|
}
|
|
5402
5761
|
layers.bars.push(...barNodes(context, mark));
|
|
5403
|
-
const glow =
|
|
5762
|
+
const glow = chunkUHKFJBY5_cjs.finite(chart.config?.barGlow, 0);
|
|
5404
5763
|
if (glow > 0 && mark.frame.width > 0) {
|
|
5405
5764
|
layers.glows.push(
|
|
5406
5765
|
createBarGlowNode(context, `chart-bar-glow-${chart.id}-${mark.id}`, mark.path, mark.color, glow, mark.bounds)
|
|
@@ -5409,7 +5768,7 @@ function pushBar(context, rows, layers, series, seriesIndex, valueIndex, value,
|
|
|
5409
5768
|
layers.labels.push(...labelNodes2(context, mark, highest));
|
|
5410
5769
|
}
|
|
5411
5770
|
function renderHorizontalBars(context) {
|
|
5412
|
-
const rows =
|
|
5771
|
+
const rows = chunkUHKFJBY5_cjs.horizontalRows(context.chart, context.plot);
|
|
5413
5772
|
const layers = { tracks: [], bars: [], glows: [], labels: [] };
|
|
5414
5773
|
context.chart.series.forEach((series, seriesIndex) => {
|
|
5415
5774
|
const numeric = series.values.map((value) => typeof value === "number" ? value : value[1]);
|
|
@@ -5424,8 +5783,8 @@ function renderHorizontalBars(context) {
|
|
|
5424
5783
|
// src/renderScene/charts/renderers/bar/stacked.ts
|
|
5425
5784
|
function slotOf(context, mode) {
|
|
5426
5785
|
const { chart, plot } = context;
|
|
5427
|
-
const slotWidth = plot.width /
|
|
5428
|
-
const groupGap = Math.min(Math.max(0,
|
|
5786
|
+
const slotWidth = plot.width / chunkUHKFJBY5_cjs.barCategoryCount(chart);
|
|
5787
|
+
const groupGap = Math.min(Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.barGroupGap, 8)), Math.max(0, slotWidth - 1));
|
|
5429
5788
|
return {
|
|
5430
5789
|
slotWidth,
|
|
5431
5790
|
groupGap,
|
|
@@ -5436,19 +5795,19 @@ function slotOf(context, mode) {
|
|
|
5436
5795
|
}
|
|
5437
5796
|
function pathOf(context, x, y, height, slot, radius) {
|
|
5438
5797
|
const { chart, plot } = context;
|
|
5439
|
-
const segments = chart.series.length === 1 ?
|
|
5798
|
+
const segments = chart.series.length === 1 ? chunkUHKFJBY5_cjs.finite(chart.config?.barSegments, 0) : 0;
|
|
5440
5799
|
if (segments > 0) {
|
|
5441
|
-
return
|
|
5800
|
+
return chunkUHKFJBY5_cjs.segmentedBarPath(
|
|
5442
5801
|
{ x, y: plot.y, width: slot.barWidth, height: plot.height },
|
|
5443
5802
|
"vertical",
|
|
5444
5803
|
segments,
|
|
5445
|
-
|
|
5804
|
+
chunkUHKFJBY5_cjs.finite(chart.config?.barSegmentGap, 4),
|
|
5446
5805
|
radius,
|
|
5447
5806
|
height / plot.height,
|
|
5448
5807
|
chart.config?.barSegmentSnap !== false
|
|
5449
5808
|
);
|
|
5450
5809
|
}
|
|
5451
|
-
return
|
|
5810
|
+
return chunkUHKFJBY5_cjs.barPath(x, y, slot.barWidth, height, radius, chart.config?.barRoundedBottom === true);
|
|
5452
5811
|
}
|
|
5453
5812
|
function pushLabel(context, layers, series, seriesIndex, valueIndex, slot, frame) {
|
|
5454
5813
|
const { chart } = context;
|
|
@@ -5470,7 +5829,7 @@ function pushLabel(context, layers, series, seriesIndex, valueIndex, slot, frame
|
|
|
5470
5829
|
}
|
|
5471
5830
|
function markOf2(context, mode, slot, series, seriesIndex, valueIndex) {
|
|
5472
5831
|
const { chart, plot } = context;
|
|
5473
|
-
const segment =
|
|
5832
|
+
const segment = chunkUHKFJBY5_cjs.stackedSegment(chart, mode, valueIndex, seriesIndex, plot.height);
|
|
5474
5833
|
const radius = slot.outerSeriesIndex === null || seriesIndex === slot.outerSeriesIndex ? slot.cornerRadius : 0;
|
|
5475
5834
|
const x = plot.x + valueIndex * slot.slotWidth + slot.groupGap / 2;
|
|
5476
5835
|
const y = plot.y + plot.height - Math.max(segment.pixelStart, segment.pixelEnd);
|
|
@@ -5479,7 +5838,7 @@ function markOf2(context, mode, slot, series, seriesIndex, valueIndex) {
|
|
|
5479
5838
|
series,
|
|
5480
5839
|
valueIndex,
|
|
5481
5840
|
radius,
|
|
5482
|
-
color: series.colors?.[valueIndex] ?? series.color ??
|
|
5841
|
+
color: series.colors?.[valueIndex] ?? series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length],
|
|
5483
5842
|
x,
|
|
5484
5843
|
y,
|
|
5485
5844
|
height,
|
|
@@ -5490,10 +5849,10 @@ function markOf2(context, mode, slot, series, seriesIndex, valueIndex) {
|
|
|
5490
5849
|
function segmentNodes(context, mark) {
|
|
5491
5850
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
5492
5851
|
const { series, valueIndex, path } = mark;
|
|
5493
|
-
const fill2 =
|
|
5494
|
-
const stroke =
|
|
5495
|
-
const strokeWidth =
|
|
5496
|
-
const shadow =
|
|
5852
|
+
const fill2 = chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id);
|
|
5853
|
+
const stroke = chunkUHKFJBY5_cjs.paint(chart.config?.barBorderColor || "#000000", diagnostics, chart.id);
|
|
5854
|
+
const strokeWidth = chunkUHKFJBY5_cjs.finite(chart.config?.barBorderWidth, 0);
|
|
5855
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
5497
5856
|
const nodes = [];
|
|
5498
5857
|
if (shadow) {
|
|
5499
5858
|
const plotClip = `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z`;
|
|
@@ -5525,10 +5884,10 @@ function segmentNodes(context, mark) {
|
|
|
5525
5884
|
valueIndex,
|
|
5526
5885
|
mark: "bar",
|
|
5527
5886
|
radius: mark.radius,
|
|
5528
|
-
colorProp:
|
|
5887
|
+
colorProp: chunkUHKFJBY5_cjs.seriesValueColorProp(series.id, valueIndex),
|
|
5529
5888
|
hasColorOverride: series.colors?.[valueIndex] != null
|
|
5530
5889
|
},
|
|
5531
|
-
prop:
|
|
5890
|
+
prop: chunkUHKFJBY5_cjs.seriesValueProp(series.id, valueIndex),
|
|
5532
5891
|
style: { fill: fill2, stroke, strokeWidth, innerShadow: shadow }
|
|
5533
5892
|
});
|
|
5534
5893
|
return nodes;
|
|
@@ -5542,7 +5901,7 @@ function pushSegment(context, mode, layers, slot, series, seriesIndex, valueInde
|
|
|
5542
5901
|
layers.bars.push(...segmentNodes(context, mark));
|
|
5543
5902
|
const frame = { x: mark.x, y: mark.y, width: slot.barWidth, height: mark.height };
|
|
5544
5903
|
pushLabel(context, layers, series, seriesIndex, valueIndex, slot, frame);
|
|
5545
|
-
const glow =
|
|
5904
|
+
const glow = chunkUHKFJBY5_cjs.finite(chart.config?.barGlow, 0);
|
|
5546
5905
|
if (glow > 0) {
|
|
5547
5906
|
layers.glows.push(
|
|
5548
5907
|
createBarGlowNode(context, `chart-bar-glow-${chart.id}-${series.id}-${valueIndex}`, mark.path, mark.color, glow)
|
|
@@ -5553,7 +5912,7 @@ function renderStackedBars(context, mode) {
|
|
|
5553
5912
|
const { chart } = context;
|
|
5554
5913
|
const layers = { tracks: [], bars: [], glows: [], labels: [] };
|
|
5555
5914
|
const slot = slotOf(context, mode);
|
|
5556
|
-
const valueCount =
|
|
5915
|
+
const valueCount = chunkUHKFJBY5_cjs.barCategoryCount(chart);
|
|
5557
5916
|
for (let valueIndex = 0; valueIndex < valueCount; valueIndex++) {
|
|
5558
5917
|
chart.series.forEach((series, seriesIndex) => {
|
|
5559
5918
|
pushSegment(context, mode, layers, slot, series, seriesIndex, valueIndex);
|
|
@@ -5568,7 +5927,7 @@ function isSeriesMax2(values, index) {
|
|
|
5568
5927
|
|
|
5569
5928
|
// src/renderScene/charts/renderers/bar.ts
|
|
5570
5929
|
function renderBar(context) {
|
|
5571
|
-
if (
|
|
5930
|
+
if (chunkUHKFJBY5_cjs.isHorizontalBar(context.chart)) {
|
|
5572
5931
|
return renderHorizontalBars(context);
|
|
5573
5932
|
}
|
|
5574
5933
|
if (context.stackedMode) {
|
|
@@ -5583,7 +5942,7 @@ function createBoxplotLayout(context) {
|
|
|
5583
5942
|
const orientation = chart.config?.orientation ?? "vertical";
|
|
5584
5943
|
const boxCount = Math.max(1, chart.series.length);
|
|
5585
5944
|
const slotWidth = (orientation === "horizontal" ? plot.height : plot.width) / boxCount;
|
|
5586
|
-
const borderColor =
|
|
5945
|
+
const borderColor = chunkUHKFJBY5_cjs.representativeColor(chart.config?.barBorderColor, "#000000");
|
|
5587
5946
|
const widthFraction = Math.min(1, Math.max(0.05, chart.config?.boxWidth ?? 0.6));
|
|
5588
5947
|
return {
|
|
5589
5948
|
orientation,
|
|
@@ -5592,15 +5951,15 @@ function createBoxplotLayout(context) {
|
|
|
5592
5951
|
cornerRadius: chart.config?.barCornerRadius ?? 2,
|
|
5593
5952
|
showPoints: chart.config?.showBoxplotPoints ?? true,
|
|
5594
5953
|
borderColor,
|
|
5595
|
-
borderWidth:
|
|
5596
|
-
whiskerWidth: Math.max(0,
|
|
5597
|
-
medianWidth: Math.max(0,
|
|
5954
|
+
borderWidth: chunkUHKFJBY5_cjs.finite(chart.config?.barBorderWidth, 1),
|
|
5955
|
+
whiskerWidth: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.boxWhiskerWidth, 1)),
|
|
5956
|
+
medianWidth: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.boxMedianWidth, 2)),
|
|
5598
5957
|
medianColor: chart.config?.boxMedianColor ?? borderColor,
|
|
5599
5958
|
whiskerColor: chart.config?.boxWhiskerColor,
|
|
5600
|
-
capSize: Math.max(0,
|
|
5601
|
-
pointSize: Math.max(0,
|
|
5602
|
-
pointOpacity: Math.min(1, Math.max(0,
|
|
5603
|
-
jitter: Math.max(0,
|
|
5959
|
+
capSize: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.boxCapSize, 0.4)),
|
|
5960
|
+
pointSize: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.boxPointSize, 3)),
|
|
5961
|
+
pointOpacity: Math.min(1, Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.boxPointOpacity, 0.7))),
|
|
5962
|
+
jitter: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.boxJitter, 1))
|
|
5604
5963
|
};
|
|
5605
5964
|
}
|
|
5606
5965
|
|
|
@@ -5611,7 +5970,7 @@ function boxplotPoint(orientation, center, value) {
|
|
|
5611
5970
|
function createBoxplotGeometry(context, layout, seriesIndex, stats) {
|
|
5612
5971
|
const { chart, plot } = context;
|
|
5613
5972
|
const { orientation } = layout;
|
|
5614
|
-
const valueAt = (value) => orientation === "horizontal" ? plot.x +
|
|
5973
|
+
const valueAt = (value) => orientation === "horizontal" ? plot.x + chunkUHKFJBY5_cjs.mapChartValue(value, chart.axisX, plot.width) : plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(value, chart.axisY, plot.height);
|
|
5615
5974
|
const center = plot[orientation === "horizontal" ? "y" : "x"] + seriesIndex * layout.slotWidth + layout.slotWidth / 2;
|
|
5616
5975
|
return {
|
|
5617
5976
|
center,
|
|
@@ -5626,7 +5985,7 @@ function createBoxplotGeometry(context, layout, seriesIndex, stats) {
|
|
|
5626
5985
|
// src/renderScene/charts/renderers/boxplot/points.ts
|
|
5627
5986
|
function renderSamplePoints(context, layout, mark) {
|
|
5628
5987
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
5629
|
-
const valueAt = (value) => layout.orientation === "horizontal" ? plot.x +
|
|
5988
|
+
const valueAt = (value) => layout.orientation === "horizontal" ? plot.x + chunkUHKFJBY5_cjs.mapChartValue(value, chart.axisX, plot.width) : plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(value, chart.axisY, plot.height);
|
|
5630
5989
|
if (layout.pointSize <= 0) {
|
|
5631
5990
|
return [];
|
|
5632
5991
|
}
|
|
@@ -5642,7 +6001,7 @@ function renderSamplePoints(context, layout, mark) {
|
|
|
5642
6001
|
cy: y,
|
|
5643
6002
|
rx: layout.pointSize,
|
|
5644
6003
|
ry: layout.pointSize,
|
|
5645
|
-
style: { fill:
|
|
6004
|
+
style: { fill: chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id), opacity: layout.pointOpacity }
|
|
5646
6005
|
};
|
|
5647
6006
|
});
|
|
5648
6007
|
}
|
|
@@ -5666,7 +6025,7 @@ function renderBoxAndWhiskers(context, layout, mark) {
|
|
|
5666
6025
|
}
|
|
5667
6026
|
function whiskerColor(layout, mark) {
|
|
5668
6027
|
if (layout.whiskerColor === "series") {
|
|
5669
|
-
return
|
|
6028
|
+
return chunkUHKFJBY5_cjs.representativeColor(mark.color, layout.borderColor);
|
|
5670
6029
|
}
|
|
5671
6030
|
return layout.whiskerColor;
|
|
5672
6031
|
}
|
|
@@ -5748,7 +6107,7 @@ function createBoxNode(context, layout, mark) {
|
|
|
5748
6107
|
height,
|
|
5749
6108
|
rx: layout.cornerRadius,
|
|
5750
6109
|
style: {
|
|
5751
|
-
fill:
|
|
6110
|
+
fill: chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id),
|
|
5752
6111
|
stroke: { kind: "solid", color: layout.borderColor },
|
|
5753
6112
|
strokeWidth: layout.borderWidth
|
|
5754
6113
|
}
|
|
@@ -5757,12 +6116,12 @@ function createBoxNode(context, layout, mark) {
|
|
|
5757
6116
|
|
|
5758
6117
|
// src/renderScene/charts/renderers/boxplot/series.ts
|
|
5759
6118
|
function renderBoxplotSeries(context, layout, series, seriesIndex) {
|
|
5760
|
-
const stats =
|
|
6119
|
+
const stats = chunkUHKFJBY5_cjs.computeBoxplotStats(series.values);
|
|
5761
6120
|
if (!stats) {
|
|
5762
6121
|
return [];
|
|
5763
6122
|
}
|
|
5764
6123
|
const geometry = createBoxplotGeometry(context, layout, seriesIndex, stats);
|
|
5765
|
-
const color = series.color ??
|
|
6124
|
+
const color = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
5766
6125
|
const mark = {
|
|
5767
6126
|
id: `${context.chart.id}-${series.id}`,
|
|
5768
6127
|
series,
|
|
@@ -5824,21 +6183,21 @@ function metricComponent(chart, point) {
|
|
|
5824
6183
|
}
|
|
5825
6184
|
function customPointPosition(context, value) {
|
|
5826
6185
|
return {
|
|
5827
|
-
x: context.plot.x +
|
|
5828
|
-
y: context.plot.y + context.plot.height -
|
|
6186
|
+
x: context.plot.x + chunkUHKFJBY5_cjs.mapChartValue(value[0], context.chart.axisX, context.plot.width),
|
|
6187
|
+
y: context.plot.y + context.plot.height - chunkUHKFJBY5_cjs.mapChartValue(value[1], context.chart.axisY, context.plot.height)
|
|
5829
6188
|
};
|
|
5830
6189
|
}
|
|
5831
6190
|
function customSeriesStyle(context, series, seriesIndex) {
|
|
5832
|
-
const color = series.color ??
|
|
6191
|
+
const color = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
5833
6192
|
return {
|
|
5834
|
-
fill:
|
|
6193
|
+
fill: chunkUHKFJBY5_cjs.paint(color, context.diagnostics, context.chart.id),
|
|
5835
6194
|
stroke: series.stroke ? { kind: "solid", color: series.stroke } : void 0,
|
|
5836
|
-
strokeWidth: series.stroke ?
|
|
6195
|
+
strokeWidth: series.stroke ? chunkUHKFJBY5_cjs.finite(series.strokeWidth, 1) : void 0
|
|
5837
6196
|
};
|
|
5838
6197
|
}
|
|
5839
6198
|
function createCustomSymbolMark(context, mark) {
|
|
5840
6199
|
const symbol = mark.series.symbol;
|
|
5841
|
-
const size =
|
|
6200
|
+
const size = chunkUHKFJBY5_cjs.finite(mark.series.size, 3);
|
|
5842
6201
|
const scale = symbol?.normalized ? size * 2 : 1;
|
|
5843
6202
|
const offset = symbol?.normalized ? 0.5 : 0;
|
|
5844
6203
|
const points = (symbol?.points ?? []).map(([x, y]) => ({
|
|
@@ -5850,12 +6209,12 @@ function createCustomSymbolMark(context, mark) {
|
|
|
5850
6209
|
id: customMarkId(context.chart, mark.series, mark.valueIndex),
|
|
5851
6210
|
order: context.nextOrder(),
|
|
5852
6211
|
bounds: context.bounds,
|
|
5853
|
-
d:
|
|
6212
|
+
d: chunkUHKFJBY5_cjs.freeformPathData({ points, tension: chunkUHKFJBY5_cjs.finite(symbol?.tension, 0), closed: true }),
|
|
5854
6213
|
style: mark.style
|
|
5855
6214
|
};
|
|
5856
6215
|
}
|
|
5857
6216
|
function createCustomPointMark(context, mark) {
|
|
5858
|
-
const radius =
|
|
6217
|
+
const radius = chunkUHKFJBY5_cjs.finite(mark.series.size, 3);
|
|
5859
6218
|
return {
|
|
5860
6219
|
type: "ellipse",
|
|
5861
6220
|
id: customMarkId(context.chart, mark.series, mark.valueIndex),
|
|
@@ -5879,7 +6238,7 @@ function renderConnectedPairs(context) {
|
|
|
5879
6238
|
const zones = chart.config?.zones ?? [];
|
|
5880
6239
|
const betterColor = zones[0]?.color ?? "#10b981";
|
|
5881
6240
|
const worseColor = zones[1]?.color ?? "#ec4899";
|
|
5882
|
-
const tieColor = zones[2]?.color ??
|
|
6241
|
+
const tieColor = zones[2]?.color ?? chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL;
|
|
5883
6242
|
const reverse = Boolean(chart.config?.reverseComparison);
|
|
5884
6243
|
const count = Math.min(beforeValues.length, afterValues.length);
|
|
5885
6244
|
const categories = chart.config?.categories ?? [];
|
|
@@ -5894,7 +6253,7 @@ function renderConnectedPairs(context) {
|
|
|
5894
6253
|
const better = reverse ? afterMetric < beforeMetric : afterMetric > beforeMetric;
|
|
5895
6254
|
const worse = reverse ? afterMetric > beforeMetric : afterMetric < beforeMetric;
|
|
5896
6255
|
const comparisonColor = better ? betterColor : worse ? worseColor : tieColor;
|
|
5897
|
-
const radius =
|
|
6256
|
+
const radius = chunkUHKFJBY5_cjs.finite(afterSeries.size, 3);
|
|
5898
6257
|
nodes.push(createConnectorLine(context, index, beforePoint, afterPoint, comparisonColor));
|
|
5899
6258
|
nodes.push(
|
|
5900
6259
|
createCustomPointMark(context, {
|
|
@@ -5902,9 +6261,9 @@ function renderConnectedPairs(context) {
|
|
|
5902
6261
|
valueIndex: index,
|
|
5903
6262
|
point: beforePoint,
|
|
5904
6263
|
style: {
|
|
5905
|
-
fill:
|
|
6264
|
+
fill: chunkUHKFJBY5_cjs.paint(chart.config?.customBeforeFill ?? chart.gridColor ?? "#e2e8f0", context.diagnostics, chart.id),
|
|
5906
6265
|
stroke: { kind: "solid", color: chart.config?.customBeforeStroke ?? HOLLOW_POINT_STROKE },
|
|
5907
|
-
strokeWidth:
|
|
6266
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.config?.customBeforeStrokeWidth, 1.5)
|
|
5908
6267
|
}
|
|
5909
6268
|
})
|
|
5910
6269
|
);
|
|
@@ -5914,7 +6273,7 @@ function renderConnectedPairs(context) {
|
|
|
5914
6273
|
valueIndex: index,
|
|
5915
6274
|
point: afterPoint,
|
|
5916
6275
|
style: {
|
|
5917
|
-
fill:
|
|
6276
|
+
fill: chunkUHKFJBY5_cjs.paint(comparisonColor, context.diagnostics, chart.id),
|
|
5918
6277
|
stroke: void 0,
|
|
5919
6278
|
strokeWidth: void 0
|
|
5920
6279
|
}
|
|
@@ -5941,7 +6300,7 @@ function createConnectorLine(context, index, from, to, color) {
|
|
|
5941
6300
|
style: {
|
|
5942
6301
|
fill: { kind: "none" },
|
|
5943
6302
|
stroke: { kind: "solid", color },
|
|
5944
|
-
strokeWidth:
|
|
6303
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.config?.customConnectorWidth, 2),
|
|
5945
6304
|
opacity: chart.config?.customConnectorOpacity,
|
|
5946
6305
|
dash: connectorDash(chart.config?.customConnectorDash)
|
|
5947
6306
|
}
|
|
@@ -5962,7 +6321,7 @@ function createConnectorLabel(context, index, beforePoint, afterPoint, radius, t
|
|
|
5962
6321
|
height: 16
|
|
5963
6322
|
};
|
|
5964
6323
|
return {
|
|
5965
|
-
...
|
|
6324
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
5966
6325
|
id: `chart-custom-label-${chart.id}-${index}`,
|
|
5967
6326
|
order: nextOrder(),
|
|
5968
6327
|
bounds,
|
|
@@ -5971,7 +6330,7 @@ function createConnectorLabel(context, index, beforePoint, afterPoint, radius, t
|
|
|
5971
6330
|
chart,
|
|
5972
6331
|
align: horizontal ? "left" : "center"
|
|
5973
6332
|
}),
|
|
5974
|
-
fontSize: Math.max(6,
|
|
6333
|
+
fontSize: Math.max(6, chunkUHKFJBY5_cjs.finite(chart.config?.customLabelSize, Math.max(9, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12)) - 2)),
|
|
5975
6334
|
...chart.config?.customLabelColor ? { color: chart.config.customLabelColor } : {}
|
|
5976
6335
|
};
|
|
5977
6336
|
}
|
|
@@ -5983,8 +6342,8 @@ function classifyFieldData(context) {
|
|
|
5983
6342
|
const vectorSeries = chart.series.filter((series) => tupleSize(series.values[0]) === 4);
|
|
5984
6343
|
const scalarSamples = scalarSeries.flatMap(
|
|
5985
6344
|
(series) => series.values.map(([x, y, value]) => ({
|
|
5986
|
-
x:
|
|
5987
|
-
y: plot.height -
|
|
6345
|
+
x: chunkUHKFJBY5_cjs.mapChartValue(x, chart.axisX, plot.width),
|
|
6346
|
+
y: plot.height - chunkUHKFJBY5_cjs.mapChartValue(y, chart.axisY, plot.height),
|
|
5988
6347
|
value
|
|
5989
6348
|
}))
|
|
5990
6349
|
);
|
|
@@ -6048,20 +6407,20 @@ function createLegendLabels(context, minimum, maximum, geometry) {
|
|
|
6048
6407
|
const { chart, bounds, nextOrder } = context;
|
|
6049
6408
|
const y = geometry.y + geometry.height + 3;
|
|
6050
6409
|
return [
|
|
6051
|
-
|
|
6410
|
+
chunkUHKFJBY5_cjs.chartText({
|
|
6052
6411
|
id: `chart-field-colorbar-min-${chart.id}`,
|
|
6053
6412
|
order: nextOrder(),
|
|
6054
6413
|
bounds,
|
|
6055
6414
|
frame: { x: geometry.x, y, width: 80, height: 16 },
|
|
6056
|
-
text:
|
|
6415
|
+
text: chunkUHKFJBY5_cjs.formatFieldValue(minimum),
|
|
6057
6416
|
chart
|
|
6058
6417
|
}),
|
|
6059
|
-
|
|
6418
|
+
chunkUHKFJBY5_cjs.chartText({
|
|
6060
6419
|
id: `chart-field-colorbar-max-${chart.id}`,
|
|
6061
6420
|
order: nextOrder(),
|
|
6062
6421
|
bounds,
|
|
6063
6422
|
frame: { x: geometry.x + geometry.width - 80, y, width: 80, height: 16 },
|
|
6064
|
-
text:
|
|
6423
|
+
text: chunkUHKFJBY5_cjs.formatFieldValue(maximum),
|
|
6065
6424
|
chart,
|
|
6066
6425
|
align: "right"
|
|
6067
6426
|
})
|
|
@@ -6074,7 +6433,7 @@ function colorAtRamp(ramp, value) {
|
|
|
6074
6433
|
if (!ramp?.stops.length) {
|
|
6075
6434
|
return RAMP_FALLBACK_COLOR;
|
|
6076
6435
|
}
|
|
6077
|
-
return
|
|
6436
|
+
return chunkUHKFJBY5_cjs.interpolateHexColorStops(ramp.stops, value);
|
|
6078
6437
|
}
|
|
6079
6438
|
|
|
6080
6439
|
// src/renderScene/charts/field/isolines.ts
|
|
@@ -6284,7 +6643,7 @@ function createIsoline(context, grid, threshold, thresholdIndex) {
|
|
|
6284
6643
|
}
|
|
6285
6644
|
const chains = stitchIsolineSegments(segments);
|
|
6286
6645
|
const path = chains.map(
|
|
6287
|
-
(chain) =>
|
|
6646
|
+
(chain) => chunkUHKFJBY5_cjs.linePathData(
|
|
6288
6647
|
chain.map(([x, y]) => ({ x: plot.x + x, y: plot.y + y })),
|
|
6289
6648
|
ISOLINE_TENSION
|
|
6290
6649
|
)
|
|
@@ -6308,7 +6667,7 @@ function createIsoline(context, grid, threshold, thresholdIndex) {
|
|
|
6308
6667
|
function renderVectorField(context, seriesList) {
|
|
6309
6668
|
const nodes = [];
|
|
6310
6669
|
seriesList.forEach((series, seriesIndex) => {
|
|
6311
|
-
const color = series.color ??
|
|
6670
|
+
const color = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
6312
6671
|
series.values.forEach((vector, vectorIndex) => {
|
|
6313
6672
|
nodes.push(createVectorNode(context, series.id, vector, vectorIndex, color));
|
|
6314
6673
|
});
|
|
@@ -6318,10 +6677,10 @@ function renderVectorField(context, seriesList) {
|
|
|
6318
6677
|
function createVectorNode(context, seriesId, vector, vectorIndex, color) {
|
|
6319
6678
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
6320
6679
|
const [x, y, angle, magnitude] = vector;
|
|
6321
|
-
const startX = plot.x +
|
|
6322
|
-
const startY = plot.y + plot.height -
|
|
6323
|
-
const endX = plot.x +
|
|
6324
|
-
const endY = plot.y + plot.height -
|
|
6680
|
+
const startX = plot.x + chunkUHKFJBY5_cjs.mapChartValue(x, chart.axisX, plot.width);
|
|
6681
|
+
const startY = plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(y, chart.axisY, plot.height);
|
|
6682
|
+
const endX = plot.x + chunkUHKFJBY5_cjs.mapChartValue(x + Math.cos(angle) * magnitude, chart.axisX, plot.width);
|
|
6683
|
+
const endY = plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(y + Math.sin(angle) * magnitude, chart.axisY, plot.height);
|
|
6325
6684
|
return {
|
|
6326
6685
|
type: "path",
|
|
6327
6686
|
id: `chart-field-vector-${chart.id}-${seriesId}-${vectorIndex}`,
|
|
@@ -6331,7 +6690,7 @@ function createVectorNode(context, seriesId, vector, vectorIndex, color) {
|
|
|
6331
6690
|
markerEnd: "filled_arrow",
|
|
6332
6691
|
style: {
|
|
6333
6692
|
fill: { kind: "none" },
|
|
6334
|
-
stroke:
|
|
6693
|
+
stroke: chunkUHKFJBY5_cjs.paint(color, diagnostics, chart.id),
|
|
6335
6694
|
strokeWidth: 2
|
|
6336
6695
|
}
|
|
6337
6696
|
};
|
|
@@ -6378,7 +6737,7 @@ function createHeatmapCell(layout, series, rowIndex, columnIndex) {
|
|
|
6378
6737
|
};
|
|
6379
6738
|
}
|
|
6380
6739
|
function colorForValue(value, layout) {
|
|
6381
|
-
return
|
|
6740
|
+
return chunkUHKFJBY5_cjs.zoneColorAtValue(value, layout.bands, layout.zones);
|
|
6382
6741
|
}
|
|
6383
6742
|
function renderHeatmapCell(context, layout, cell) {
|
|
6384
6743
|
const background = createCellBackground(context, layout, cell);
|
|
@@ -6393,7 +6752,7 @@ function createCellBackground(context, layout, cell) {
|
|
|
6393
6752
|
const style = {
|
|
6394
6753
|
fill: { kind: "solid", color: cell.color },
|
|
6395
6754
|
stroke: { kind: "solid", color: chart.config?.cellStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
|
|
6396
|
-
strokeWidth:
|
|
6755
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.config?.cellStrokeWidth, chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1))
|
|
6397
6756
|
};
|
|
6398
6757
|
if (chart.config?.cellShape === "circle") {
|
|
6399
6758
|
return {
|
|
@@ -6420,9 +6779,9 @@ function createCellBackground(context, layout, cell) {
|
|
|
6420
6779
|
}
|
|
6421
6780
|
function createCellValueLabel(context, layout, cell) {
|
|
6422
6781
|
const { chart, bounds, nextOrder } = context;
|
|
6423
|
-
const size = Math.max(6,
|
|
6782
|
+
const size = Math.max(6, chunkUHKFJBY5_cjs.finite(chart.config?.cellValueSize, layout.fontSize));
|
|
6424
6783
|
return {
|
|
6425
|
-
...
|
|
6784
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
6426
6785
|
id: `chart-heatmap-value-${chart.id}-${cell.seriesId}-${cell.columnIndex}`,
|
|
6427
6786
|
order: nextOrder(),
|
|
6428
6787
|
bounds,
|
|
@@ -6437,7 +6796,7 @@ function createCellValueLabel(context, layout, cell) {
|
|
|
6437
6796
|
align: "center"
|
|
6438
6797
|
}),
|
|
6439
6798
|
...chart.config?.cellValueSize === void 0 ? {} : { fontSize: size },
|
|
6440
|
-
color: chart.config?.cellValueColor ??
|
|
6799
|
+
color: chart.config?.cellValueColor ?? chunkUHKFJBY5_cjs.contrastTextColor(cell.color)
|
|
6441
6800
|
};
|
|
6442
6801
|
}
|
|
6443
6802
|
|
|
@@ -6450,9 +6809,9 @@ function createHeatmapLayout(context) {
|
|
|
6450
6809
|
return {
|
|
6451
6810
|
rows: chart.series,
|
|
6452
6811
|
columns,
|
|
6453
|
-
bands:
|
|
6454
|
-
zones: chart.config?.zones?.length ? chart.config.zones :
|
|
6455
|
-
fontSize: Math.max(9,
|
|
6812
|
+
bands: chunkUHKFJBY5_cjs.axisBands(chart.axisY),
|
|
6813
|
+
zones: chart.config?.zones?.length ? chart.config.zones : chunkUHKFJBY5_cjs.DEFAULT_HEATMAP_ZONES,
|
|
6814
|
+
fontSize: Math.max(9, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12)),
|
|
6456
6815
|
headerFontSize: headerFontSize(chart),
|
|
6457
6816
|
legendGap: legendGap(chart),
|
|
6458
6817
|
sides,
|
|
@@ -6460,10 +6819,10 @@ function createHeatmapLayout(context) {
|
|
|
6460
6819
|
grid: createHeatmapGrid(context, reservedSpace, sides, columns.length)
|
|
6461
6820
|
};
|
|
6462
6821
|
}
|
|
6463
|
-
var headerFontSize = (chart) => Math.max(9,
|
|
6464
|
-
var rowGap = (chart) => Math.min(120, Math.max(0,
|
|
6465
|
-
var columnGap = (chart) => Math.min(120, Math.max(0,
|
|
6466
|
-
var legendGap = (chart) => Math.min(80, Math.max(0,
|
|
6822
|
+
var headerFontSize = (chart) => Math.max(9, chunkUHKFJBY5_cjs.finite(chart.axisFontSize ?? chart.fontSize, 12));
|
|
6823
|
+
var rowGap = (chart) => Math.min(120, Math.max(0, chunkUHKFJBY5_cjs.finite(chart.yLabelGap, 6)));
|
|
6824
|
+
var columnGap = (chart) => Math.min(120, Math.max(0, chunkUHKFJBY5_cjs.finite(chart.xLabelGap, 4)));
|
|
6825
|
+
var legendGap = (chart) => Math.min(80, Math.max(0, chunkUHKFJBY5_cjs.finite(chart.legendGap, 6)));
|
|
6467
6826
|
function heatmapSides(context) {
|
|
6468
6827
|
const { chart } = context;
|
|
6469
6828
|
return {
|
|
@@ -6482,7 +6841,7 @@ function heatmapReservedSpace(context, sides) {
|
|
|
6482
6841
|
const { chart } = context;
|
|
6483
6842
|
const fontSize = headerFontSize(chart);
|
|
6484
6843
|
const longestLabel = chart.series.reduce(
|
|
6485
|
-
(max, series) => Math.max(max,
|
|
6844
|
+
(max, series) => Math.max(max, chunkUHKFJBY5_cjs.estimateTextWidth(series.label ?? "", fontSize, false)),
|
|
6486
6845
|
0
|
|
6487
6846
|
);
|
|
6488
6847
|
const vertical = sides.legend === "left" || sides.legend === "right";
|
|
@@ -6498,8 +6857,8 @@ function heatmapReservedSpace(context, sides) {
|
|
|
6498
6857
|
}
|
|
6499
6858
|
function columnHeaderRoom(context) {
|
|
6500
6859
|
const { chart } = context;
|
|
6501
|
-
const tilt =
|
|
6502
|
-
return tilt > 0 ? Math.min(context.plot.height * 0.4,
|
|
6860
|
+
const tilt = chunkUHKFJBY5_cjs.labelTilt(chart);
|
|
6861
|
+
return tilt > 0 ? Math.min(context.plot.height * 0.4, chunkUHKFJBY5_cjs.tiltedLabelRoom(chart, heatmapColumns(context), tilt) + columnGap(chart) + 4) : headerFontSize(chart) + 2 + columnGap(chart) + 6;
|
|
6503
6862
|
}
|
|
6504
6863
|
function createHeatmapGrid(context, reservedSpace, sides, columnCount) {
|
|
6505
6864
|
const { chart } = context;
|
|
@@ -6510,7 +6869,7 @@ function createHeatmapGrid(context, reservedSpace, sides, columnCount) {
|
|
|
6510
6869
|
const width = Math.max(1, context.plot.width - left - right);
|
|
6511
6870
|
const height = Math.max(1, context.plot.height - top - bottom);
|
|
6512
6871
|
const rowCount = chart.series.length;
|
|
6513
|
-
const cellGap = Math.max(0,
|
|
6872
|
+
const cellGap = Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.cellGap, 0));
|
|
6514
6873
|
let cellWidth = columnCount ? width / columnCount : width;
|
|
6515
6874
|
let cellHeight = rowCount ? height / rowCount : height;
|
|
6516
6875
|
let gridWidth = width;
|
|
@@ -6530,7 +6889,7 @@ function createHeatmapGrid(context, reservedSpace, sides, columnCount) {
|
|
|
6530
6889
|
cellWidth,
|
|
6531
6890
|
cellHeight,
|
|
6532
6891
|
cellGap,
|
|
6533
|
-
cellRadius: Math.max(0,
|
|
6892
|
+
cellRadius: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.barCornerRadius, cellGap))
|
|
6534
6893
|
};
|
|
6535
6894
|
}
|
|
6536
6895
|
|
|
@@ -6549,7 +6908,7 @@ function createRowHeader(context, layout, series, rowIndex) {
|
|
|
6549
6908
|
const room = layout.reservedSpace.rowHeaders;
|
|
6550
6909
|
const gap = rowGap(chart);
|
|
6551
6910
|
const x = layout.sides.rows === "left" ? layout.grid.x - room : layout.grid.x + layout.grid.width + gap;
|
|
6552
|
-
return
|
|
6911
|
+
return chunkUHKFJBY5_cjs.chartText({
|
|
6553
6912
|
id: `chart-heatmap-row-${chart.id}-${series.id}`,
|
|
6554
6913
|
order: nextOrder(),
|
|
6555
6914
|
bounds,
|
|
@@ -6575,12 +6934,12 @@ function createColumnHeader(context, layout, label, columnIndex) {
|
|
|
6575
6934
|
const { chart, bounds, nextOrder } = context;
|
|
6576
6935
|
const above = layout.sides.columns === "top";
|
|
6577
6936
|
const centerX = layout.grid.x + (columnIndex + 0.5) * layout.grid.cellWidth;
|
|
6578
|
-
const tilt =
|
|
6937
|
+
const tilt = chunkUHKFJBY5_cjs.labelTilt(chart);
|
|
6579
6938
|
const gap = columnGap(chart);
|
|
6580
6939
|
const id = `chart-heatmap-col-${chart.id}-${columnIndex}`;
|
|
6581
6940
|
if (tilt > 0) {
|
|
6582
|
-
const { frame, rotation } = above ?
|
|
6583
|
-
return
|
|
6941
|
+
const { frame, rotation } = above ? chunkUHKFJBY5_cjs.labelAboveFrame(chart, label, tilt, { x: centerX, y: layout.grid.y - gap }) : chunkUHKFJBY5_cjs.labelBelowFrame(chart, label, tilt, { x: centerX, y: layout.grid.y + layout.grid.height + gap });
|
|
6942
|
+
return chunkUHKFJBY5_cjs.chartText({
|
|
6584
6943
|
id,
|
|
6585
6944
|
order: nextOrder(),
|
|
6586
6945
|
bounds,
|
|
@@ -6592,7 +6951,7 @@ function createColumnHeader(context, layout, label, columnIndex) {
|
|
|
6592
6951
|
role: "axis"
|
|
6593
6952
|
});
|
|
6594
6953
|
}
|
|
6595
|
-
return
|
|
6954
|
+
return chunkUHKFJBY5_cjs.chartText({
|
|
6596
6955
|
id,
|
|
6597
6956
|
order: nextOrder(),
|
|
6598
6957
|
bounds,
|
|
@@ -6670,7 +7029,7 @@ function renderHeatmapLegend(context, layout) {
|
|
|
6670
7029
|
return [];
|
|
6671
7030
|
}
|
|
6672
7031
|
const place = barPlace(layout);
|
|
6673
|
-
const barBounds =
|
|
7032
|
+
const barBounds = chunkUHKFJBY5_cjs.boxBounds({ x: place.x, y: place.y, width: place.width, height: place.height });
|
|
6674
7033
|
return [createGradientBar(context, layout, place, barBounds), ...createBoundaryTicks(context, layout, place)];
|
|
6675
7034
|
}
|
|
6676
7035
|
function bandRatio(layout, value) {
|
|
@@ -6684,7 +7043,7 @@ function createGradientBar(context, layout, place, barBounds) {
|
|
|
6684
7043
|
const zones = layout.zones.slice(0, bandCount);
|
|
6685
7044
|
const stops = zones.map((zone, index) => ({
|
|
6686
7045
|
offset: bandRatio(layout, layout.bands[index + 1] ?? layout.bands[layout.bands.length - 1]) * 100,
|
|
6687
|
-
color: zone.color ??
|
|
7046
|
+
color: zone.color ?? chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL
|
|
6688
7047
|
}));
|
|
6689
7048
|
return {
|
|
6690
7049
|
type: "rect",
|
|
@@ -6699,7 +7058,7 @@ function createGradientBar(context, layout, place, barBounds) {
|
|
|
6699
7058
|
zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
|
|
6700
7059
|
style: {
|
|
6701
7060
|
// Across the grid it runs from the lowest value on the left; beside it from the lowest at the bottom.
|
|
6702
|
-
fill: stops.length ? { kind: "linear-gradient", angle: place.vertical ? 270 : 0, stops } : { kind: "solid", color:
|
|
7061
|
+
fill: stops.length ? { kind: "linear-gradient", angle: place.vertical ? 270 : 0, stops } : { kind: "solid", color: chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL },
|
|
6703
7062
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
6704
7063
|
strokeWidth: 1
|
|
6705
7064
|
}
|
|
@@ -6725,12 +7084,12 @@ function createBoundaryTicks(context, layout, place) {
|
|
|
6725
7084
|
strokeWidth: 1
|
|
6726
7085
|
}
|
|
6727
7086
|
};
|
|
6728
|
-
const label =
|
|
7087
|
+
const label = chunkUHKFJBY5_cjs.chartText({
|
|
6729
7088
|
id: `chart-heatmap-legend-tick-label-${chart.id}-${index}`,
|
|
6730
7089
|
order: nextOrder(),
|
|
6731
7090
|
bounds,
|
|
6732
7091
|
...labelAt(place, at, index === 0, index === lastIndex, labelHeight),
|
|
6733
|
-
text:
|
|
7092
|
+
text: chunkUHKFJBY5_cjs.formatFieldValue(value),
|
|
6734
7093
|
chart
|
|
6735
7094
|
});
|
|
6736
7095
|
return [tick, label];
|
|
@@ -7097,22 +7456,22 @@ function renderHexbin(context) {
|
|
|
7097
7456
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
7098
7457
|
const nodes = [];
|
|
7099
7458
|
const config = chart.config;
|
|
7100
|
-
const hexRadius = Math.max(1, config?.hexRadius ??
|
|
7459
|
+
const hexRadius = Math.max(1, config?.hexRadius ?? chunkUHKFJBY5_cjs.DEFAULT_HEX_RADIUS);
|
|
7101
7460
|
const drawRadius = Math.max(0.5, hexRadius - Math.max(0, config?.hexGap ?? 0) * GAP_TO_RADIUS);
|
|
7102
7461
|
const strokeWidth = config?.hexStrokeWidth ?? 0;
|
|
7103
7462
|
const minOpacity = Math.min(1, Math.max(0, config?.hexMinOpacity ?? DEFAULT_MIN_OPACITY));
|
|
7104
|
-
const shadow =
|
|
7463
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
7105
7464
|
const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
|
|
7106
7465
|
chart.series.forEach((series, seriesIndex) => {
|
|
7107
7466
|
const explicit = series.values.length > 0 && Array.isArray(series.values[0]);
|
|
7108
7467
|
const pairs = explicit ? series.values : series.values.map((y, i) => [chart.axisX.min + i * chart.axisX.step, y]);
|
|
7109
7468
|
const pixelPoints2 = pairs.map(([vx, vy]) => ({
|
|
7110
|
-
x:
|
|
7111
|
-
y: plot.height -
|
|
7469
|
+
x: chunkUHKFJBY5_cjs.mapChartValue(vx, chart.axisX, plot.width),
|
|
7470
|
+
y: plot.height - chunkUHKFJBY5_cjs.mapChartValue(vy, chart.axisY, plot.height)
|
|
7112
7471
|
}));
|
|
7113
7472
|
const bins = computeHexBins(pixelPoints2, hexRadius);
|
|
7114
7473
|
const maxCount = Math.max(1, ...bins.map((bin) => bin.count));
|
|
7115
|
-
const color = series.color ??
|
|
7474
|
+
const color = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
7116
7475
|
const ramp = config?.scale;
|
|
7117
7476
|
bins.forEach((bin, i) => {
|
|
7118
7477
|
const share = bin.count / maxCount;
|
|
@@ -7124,8 +7483,8 @@ function renderHexbin(context) {
|
|
|
7124
7483
|
bounds,
|
|
7125
7484
|
d: hexPath(plot.x + bin.cx, plot.y + bin.cy, drawRadius),
|
|
7126
7485
|
style: {
|
|
7127
|
-
fill:
|
|
7128
|
-
stroke: strokeWidth > 0 ?
|
|
7486
|
+
fill: chunkUHKFJBY5_cjs.paint(fill2, diagnostics, chart.id),
|
|
7487
|
+
stroke: strokeWidth > 0 ? chunkUHKFJBY5_cjs.paint(config?.hexStrokeColor ?? fill2, diagnostics, chart.id) : void 0,
|
|
7129
7488
|
strokeWidth: strokeWidth > 0 ? strokeWidth : void 0,
|
|
7130
7489
|
opacity: ramp ? void 0 : Math.max(minOpacity, share),
|
|
7131
7490
|
shadow,
|
|
@@ -7147,8 +7506,8 @@ function seriesValuePairs(chart, series) {
|
|
|
7147
7506
|
function pixelPoints(context, pairs) {
|
|
7148
7507
|
const { chart, plot } = context;
|
|
7149
7508
|
return pairs.map(([x, y]) => ({
|
|
7150
|
-
x: plot.x +
|
|
7151
|
-
y: plot.y + plot.height -
|
|
7509
|
+
x: plot.x + chunkUHKFJBY5_cjs.mapChartValue(x, chart.axisX, plot.width),
|
|
7510
|
+
y: plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(y, chart.axisY, plot.height)
|
|
7152
7511
|
}));
|
|
7153
7512
|
}
|
|
7154
7513
|
|
|
@@ -7158,7 +7517,7 @@ function createLineAreaFill(context, series, points, color, tension, areaOpacity
|
|
|
7158
7517
|
const baselineY = plot.y + plot.height;
|
|
7159
7518
|
const first = points[0];
|
|
7160
7519
|
const last = points[points.length - 1];
|
|
7161
|
-
const d = `${
|
|
7520
|
+
const d = `${chunkUHKFJBY5_cjs.linePathData(points, tension)} L ${last.x} ${baselineY} L ${first.x} ${baselineY} Z`;
|
|
7162
7521
|
const top = Math.min(...points.map((point) => point.y));
|
|
7163
7522
|
const centerX = (Math.min(...points.map((point) => point.x)) + Math.max(...points.map((point) => point.x))) / 2;
|
|
7164
7523
|
const halfHeight = (baselineY - top) / 2;
|
|
@@ -7180,8 +7539,8 @@ function createLineAreaFill(context, series, points, color, tension, areaOpacity
|
|
|
7180
7539
|
kind: "linear-gradient",
|
|
7181
7540
|
angle: 90,
|
|
7182
7541
|
stops: [
|
|
7183
|
-
{ offset: 0, color:
|
|
7184
|
-
{ offset: 100, color:
|
|
7542
|
+
{ offset: 0, color: chunkUHKFJBY5_cjs.colorWithAlpha(color, areaOpacity) },
|
|
7543
|
+
{ offset: 100, color: chunkUHKFJBY5_cjs.colorWithAlpha(color, 0) }
|
|
7185
7544
|
]
|
|
7186
7545
|
},
|
|
7187
7546
|
stroke: { kind: "none" },
|
|
@@ -7204,7 +7563,7 @@ function guideNode(context, mark) {
|
|
|
7204
7563
|
d: `M ${mark.point.x} ${mark.point.y} V ${plot.y + plot.height}`,
|
|
7205
7564
|
style: {
|
|
7206
7565
|
fill: { kind: "none" },
|
|
7207
|
-
stroke:
|
|
7566
|
+
stroke: chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id),
|
|
7208
7567
|
strokeWidth: 1,
|
|
7209
7568
|
dash: [3, 4],
|
|
7210
7569
|
opacity: 0.55,
|
|
@@ -7225,7 +7584,7 @@ function dotNode(context, mark) {
|
|
|
7225
7584
|
rx: mark.radius,
|
|
7226
7585
|
ry: mark.radius,
|
|
7227
7586
|
style: {
|
|
7228
|
-
fill:
|
|
7587
|
+
fill: chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id),
|
|
7229
7588
|
shadow: glow ? { color: mark.color, opacity: 0.9, blur: glow, dx: 0, dy: 0 } : void 0,
|
|
7230
7589
|
pointerEvents: "none"
|
|
7231
7590
|
}
|
|
@@ -7238,7 +7597,7 @@ function labelNode3(context, mark, value) {
|
|
|
7238
7597
|
const text = formatHighlight(config?.highlightLabelFormat, config?.categories?.[mark.index] ?? "", value);
|
|
7239
7598
|
const width = Math.max(48, text.length * fontSize * 0.62);
|
|
7240
7599
|
return {
|
|
7241
|
-
...
|
|
7600
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
7242
7601
|
id: `chart-highlight-label-${mark.key}`,
|
|
7243
7602
|
order: nextOrder(),
|
|
7244
7603
|
bounds,
|
|
@@ -7318,15 +7677,15 @@ function createLineError(context, mark) {
|
|
|
7318
7677
|
return null;
|
|
7319
7678
|
}
|
|
7320
7679
|
const { chart, plot, bounds, nextOrder } = context;
|
|
7321
|
-
const [lower, upper] =
|
|
7322
|
-
return
|
|
7680
|
+
const [lower, upper] = chunkUHKFJBY5_cjs.errorBarRange(mark.value, mark.error);
|
|
7681
|
+
return chunkUHKFJBY5_cjs.createVerticalErrorWhiskerNode({
|
|
7323
7682
|
id: `chart-line-error-${chart.id}-${mark.seriesId}-${mark.valueIndex}`,
|
|
7324
7683
|
order: nextOrder(),
|
|
7325
7684
|
bounds,
|
|
7326
7685
|
geometry: {
|
|
7327
7686
|
centerX: mark.position.x,
|
|
7328
|
-
startY: plot.y + plot.height -
|
|
7329
|
-
endY: plot.y + plot.height -
|
|
7687
|
+
startY: plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(lower, chart.axisY, plot.height),
|
|
7688
|
+
endY: plot.y + plot.height - chunkUHKFJBY5_cjs.mapChartValue(upper, chart.axisY, plot.height)
|
|
7330
7689
|
},
|
|
7331
7690
|
color: mark.color,
|
|
7332
7691
|
valueReference: { seriesId: mark.seriesId, valueIndex: mark.valueIndex }
|
|
@@ -7350,8 +7709,8 @@ function createLinePoint(context, mark) {
|
|
|
7350
7709
|
ry: visible ? radius : 6,
|
|
7351
7710
|
detail: { of: "chartValue", series: mark.seriesId, valueIndex: mark.valueIndex },
|
|
7352
7711
|
style: {
|
|
7353
|
-
fill: visible ?
|
|
7354
|
-
stroke: visible && strokeWidth > 0 ?
|
|
7712
|
+
fill: visible ? chunkUHKFJBY5_cjs.paint(fill2, diagnostics, chart.id) : { kind: "none" },
|
|
7713
|
+
stroke: visible && strokeWidth > 0 ? chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id) : void 0,
|
|
7355
7714
|
strokeWidth: visible && strokeWidth > 0 ? strokeWidth : void 0,
|
|
7356
7715
|
pointerEvents: visible ? void 0 : "all"
|
|
7357
7716
|
}
|
|
@@ -7371,22 +7730,22 @@ function createLinePath(context, series, points, color, tension) {
|
|
|
7371
7730
|
order: nextOrder(),
|
|
7372
7731
|
bounds: gradient ? { minX: plot.x, maxX: plot.x + plot.width, minY: plot.y, maxY: plot.y + plot.height } : bounds,
|
|
7373
7732
|
detail: { of: "chartSeries", series: series.id, lineTension: tension || void 0 },
|
|
7374
|
-
d:
|
|
7733
|
+
d: chunkUHKFJBY5_cjs.linePathData(points, tension),
|
|
7375
7734
|
style: {
|
|
7376
7735
|
fill: { kind: "none" },
|
|
7377
|
-
stroke:
|
|
7736
|
+
stroke: chunkUHKFJBY5_cjs.paint(gradient ?? color, diagnostics, chart.id),
|
|
7378
7737
|
strokeWidth: series.strokeWidth ?? config?.lineWidth ?? 2,
|
|
7379
7738
|
dash: series.dash,
|
|
7380
7739
|
lineCap: config?.lineWidth === void 0 ? void 0 : "round",
|
|
7381
7740
|
lineJoin: "round",
|
|
7382
|
-
shadow: glow ? { color, opacity: 0.9, blur: glow, dx: 0, dy: 0 } :
|
|
7741
|
+
shadow: glow ? { color, opacity: 0.9, blur: glow, dx: 0, dy: 0 } : chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle)
|
|
7383
7742
|
}
|
|
7384
7743
|
};
|
|
7385
7744
|
}
|
|
7386
7745
|
|
|
7387
7746
|
// src/renderScene/charts/renderers/line/series.ts
|
|
7388
7747
|
function seriesColor(series, seriesIndex) {
|
|
7389
|
-
return
|
|
7748
|
+
return chunkUHKFJBY5_cjs.representativeColor(series.color, chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length]);
|
|
7390
7749
|
}
|
|
7391
7750
|
function renderLineSeriesArea(context, series, seriesIndex) {
|
|
7392
7751
|
const areaOpacity = context.chart.config?.areaOpacity;
|
|
@@ -7450,7 +7809,7 @@ function renderGridLines(context, layout) {
|
|
|
7450
7809
|
style: {
|
|
7451
7810
|
fill: { kind: "none" },
|
|
7452
7811
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
7453
|
-
strokeWidth:
|
|
7812
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1)
|
|
7454
7813
|
}
|
|
7455
7814
|
};
|
|
7456
7815
|
});
|
|
@@ -7458,7 +7817,7 @@ function renderGridLines(context, layout) {
|
|
|
7458
7817
|
function renderPercentageLabels(context, layout) {
|
|
7459
7818
|
const { chart, plot, bounds, nextOrder } = context;
|
|
7460
7819
|
return PERCENT_TICKS.map((percent) => ({
|
|
7461
|
-
...
|
|
7820
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
7462
7821
|
id: `chart-mekko-pct-${chart.id}-${percent}`,
|
|
7463
7822
|
order: nextOrder(),
|
|
7464
7823
|
bounds,
|
|
@@ -7490,7 +7849,7 @@ function renderMekkoColumnLabels(context, layout, columnIndex, column) {
|
|
|
7490
7849
|
function createTotalLabel(context, layout, columnIndex, column) {
|
|
7491
7850
|
const { chart, plot, bounds, nextOrder } = context;
|
|
7492
7851
|
return {
|
|
7493
|
-
...
|
|
7852
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
7494
7853
|
id: `chart-mekko-total-${chart.id}-${columnIndex}`,
|
|
7495
7854
|
order: nextOrder(),
|
|
7496
7855
|
bounds,
|
|
@@ -7511,7 +7870,7 @@ function createColumnLabel(context, layout, columnIndex, column) {
|
|
|
7511
7870
|
const { chart, bounds, nextOrder } = context;
|
|
7512
7871
|
const { label, width } = column;
|
|
7513
7872
|
return {
|
|
7514
|
-
...
|
|
7873
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
7515
7874
|
id: `chart-mekko-col-label-${chart.id}-${columnIndex}`,
|
|
7516
7875
|
order: nextOrder(),
|
|
7517
7876
|
bounds,
|
|
@@ -7525,7 +7884,7 @@ function createColumnLabel(context, layout, columnIndex, column) {
|
|
|
7525
7884
|
chart,
|
|
7526
7885
|
align: "center"
|
|
7527
7886
|
}),
|
|
7528
|
-
lines:
|
|
7887
|
+
lines: chunkUHKFJBY5_cjs.wrapText(label, width, layout.smallFontSize),
|
|
7529
7888
|
fontSize: layout.smallFontSize
|
|
7530
7889
|
};
|
|
7531
7890
|
}
|
|
@@ -7535,8 +7894,8 @@ function createMekkoLayout(context) {
|
|
|
7535
7894
|
const labels = mekkoColumnLabels(context);
|
|
7536
7895
|
const labelGutterWidth = context.showLabels ? 30 : 0;
|
|
7537
7896
|
const grid = createMekkoGrid(context, labelGutterWidth);
|
|
7538
|
-
const fontSize = Math.max(9,
|
|
7539
|
-
const columnGap2 = Math.max(0,
|
|
7897
|
+
const fontSize = Math.max(9, chunkUHKFJBY5_cjs.finite(context.chart.fontSize, 12));
|
|
7898
|
+
const columnGap2 = Math.max(0, chunkUHKFJBY5_cjs.finite(context.chart.config?.mekkoColumnGap, 4));
|
|
7540
7899
|
const smallFontSize = Math.max(8, fontSize - 1);
|
|
7541
7900
|
return {
|
|
7542
7901
|
columns: createMekkoColumns(context, grid, labels, columnGap2),
|
|
@@ -7544,8 +7903,8 @@ function createMekkoLayout(context) {
|
|
|
7544
7903
|
smallFontSize,
|
|
7545
7904
|
labelGutterWidth,
|
|
7546
7905
|
columnGap: columnGap2,
|
|
7547
|
-
labelSize: Math.max(6,
|
|
7548
|
-
valueSize: Math.max(6,
|
|
7906
|
+
labelSize: Math.max(6, chunkUHKFJBY5_cjs.finite(context.chart.config?.mekkoLabelSize, smallFontSize)),
|
|
7907
|
+
valueSize: Math.max(6, chunkUHKFJBY5_cjs.finite(context.chart.config?.mekkoValueSize, smallFontSize)),
|
|
7549
7908
|
grid
|
|
7550
7909
|
};
|
|
7551
7910
|
}
|
|
@@ -7602,12 +7961,12 @@ function createColumnBackdrop(context, layout, columnIndex) {
|
|
|
7602
7961
|
id: `chart-mekko-column-backdrop-${chart.id}-${columnIndex}`,
|
|
7603
7962
|
order: nextOrder(),
|
|
7604
7963
|
bounds,
|
|
7605
|
-
d:
|
|
7606
|
-
style: { fill:
|
|
7964
|
+
d: chunkUHKFJBY5_cjs.barShapePath(column.x, layout.grid.y, column.width, layout.grid.height, cornerRadius),
|
|
7965
|
+
style: { fill: chunkUHKFJBY5_cjs.paint(chart.gridColor ?? "#e2e8f0", diagnostics, chart.id), opacity: BACKDROP_OPACITY }
|
|
7607
7966
|
};
|
|
7608
7967
|
}
|
|
7609
7968
|
function mekkoCornerRadius(context) {
|
|
7610
|
-
return Math.max(0,
|
|
7969
|
+
return Math.max(0, chunkUHKFJBY5_cjs.finite(context.chart.config?.barCornerRadius, 2));
|
|
7611
7970
|
}
|
|
7612
7971
|
function calculateColumnSegments(seriesList, layout, columnIndex) {
|
|
7613
7972
|
const segments = [];
|
|
@@ -7618,7 +7977,7 @@ function calculateColumnSegments(seriesList, layout, columnIndex) {
|
|
|
7618
7977
|
const height = (column.total > 0 ? value / column.total : 0) * column.height;
|
|
7619
7978
|
const y = column.y + cumulativeHeight;
|
|
7620
7979
|
cumulativeHeight += height;
|
|
7621
|
-
const color = series.color ??
|
|
7980
|
+
const color = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
7622
7981
|
segments.push({
|
|
7623
7982
|
columnIndex,
|
|
7624
7983
|
seriesId: series.id,
|
|
@@ -7641,12 +8000,12 @@ function renderSegment(context, layout, segment, nextColor) {
|
|
|
7641
8000
|
}
|
|
7642
8001
|
function createSegmentNode(context, segment, nextColor) {
|
|
7643
8002
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
7644
|
-
const shadow =
|
|
8003
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
7645
8004
|
const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
|
|
7646
8005
|
const config = chart.config;
|
|
7647
8006
|
const radius = segment.isTop || config?.mekkoRoundAll ? mekkoCornerRadius(context) : 0;
|
|
7648
8007
|
const { x, y, width, height } = segment.frame;
|
|
7649
|
-
const segmentGap = Math.max(0,
|
|
8008
|
+
const segmentGap = Math.max(0, chunkUHKFJBY5_cjs.finite(config?.mekkoSegmentGap, 0));
|
|
7650
8009
|
const fallback = "#94a3b8";
|
|
7651
8010
|
const gradientBounds = {
|
|
7652
8011
|
minX: x + width / 2 - height / 2,
|
|
@@ -7658,20 +8017,20 @@ function createSegmentNode(context, segment, nextColor) {
|
|
|
7658
8017
|
kind: "linear-gradient",
|
|
7659
8018
|
angle: 90,
|
|
7660
8019
|
stops: [
|
|
7661
|
-
{ offset: 0, color:
|
|
7662
|
-
{ offset: 100, color:
|
|
8020
|
+
{ offset: 0, color: chunkUHKFJBY5_cjs.representativeColor(segment.color, fallback) },
|
|
8021
|
+
{ offset: 100, color: chunkUHKFJBY5_cjs.representativeColor(nextColor, fallback) }
|
|
7663
8022
|
]
|
|
7664
|
-
} :
|
|
8023
|
+
} : chunkUHKFJBY5_cjs.paint(segment.color, diagnostics, chart.id);
|
|
7665
8024
|
return {
|
|
7666
8025
|
type: "path",
|
|
7667
8026
|
id: `chart-mekko-seg-${chart.id}-${segment.columnIndex}-${segment.seriesId}`,
|
|
7668
8027
|
order: nextOrder(),
|
|
7669
8028
|
bounds: nextColor ? gradientBounds : bounds,
|
|
7670
|
-
d:
|
|
8029
|
+
d: chunkUHKFJBY5_cjs.barPath(x, y + segmentGap / 2, width, Math.max(0, height - segmentGap), radius, Boolean(config?.mekkoRoundAll)),
|
|
7671
8030
|
style: {
|
|
7672
8031
|
fill: fill2,
|
|
7673
8032
|
stroke: { kind: "solid", color: config?.mekkoSegmentStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
|
|
7674
|
-
strokeWidth:
|
|
8033
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(config?.mekkoSegmentStrokeWidth, chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1)),
|
|
7675
8034
|
shadow,
|
|
7676
8035
|
clip: clipPath ? { type: "path", d: clipPath } : void 0
|
|
7677
8036
|
}
|
|
@@ -7687,17 +8046,17 @@ function createSegmentLabel(context, layout, segment) {
|
|
|
7687
8046
|
const innerHeight = Math.max(1, height - 6);
|
|
7688
8047
|
const lineHeight = layout.labelSize * 1.2;
|
|
7689
8048
|
const valueHeight = layout.valueSize * 1.2;
|
|
7690
|
-
const labelLines =
|
|
7691
|
-
(line) =>
|
|
8049
|
+
const labelLines = chunkUHKFJBY5_cjs.wrapText(segment.seriesLabel, innerWidth, layout.labelSize).map(
|
|
8050
|
+
(line) => chunkUHKFJBY5_cjs.ellipsizeToWidth(line, innerWidth, layout.labelSize, true)
|
|
7692
8051
|
);
|
|
7693
8052
|
if (labelLines.length * lineHeight + valueHeight > innerHeight) {
|
|
7694
8053
|
return [];
|
|
7695
8054
|
}
|
|
7696
|
-
const textColor = chart.config?.mekkoTextColor ??
|
|
8055
|
+
const textColor = chart.config?.mekkoTextColor ?? chunkUHKFJBY5_cjs.contrastTextColor(chunkUHKFJBY5_cjs.representativeColor(segment.color, "#ffffff"));
|
|
7697
8056
|
const columnTotal = layout.columns[segment.columnIndex]?.total ?? 0;
|
|
7698
8057
|
const valueText = chart.config?.mekkoValueFormat === "percent" ? `${columnTotal > 0 ? Math.round(segment.value / columnTotal * 100) : 0}%` : String(segment.value);
|
|
7699
8058
|
const label = {
|
|
7700
|
-
...
|
|
8059
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
7701
8060
|
id: `chart-mekko-seg-label-${chart.id}-${segment.columnIndex}-${segment.seriesId}`,
|
|
7702
8061
|
order: nextOrder(),
|
|
7703
8062
|
bounds,
|
|
@@ -7711,7 +8070,7 @@ function createSegmentLabel(context, layout, segment) {
|
|
|
7711
8070
|
color: textColor
|
|
7712
8071
|
};
|
|
7713
8072
|
const valueNode = {
|
|
7714
|
-
...
|
|
8073
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
7715
8074
|
id: `chart-mekko-seg-value-${chart.id}-${segment.columnIndex}-${segment.seriesId}`,
|
|
7716
8075
|
order: nextOrder(),
|
|
7717
8076
|
bounds,
|
|
@@ -7744,7 +8103,7 @@ function renderMekko(context) {
|
|
|
7744
8103
|
|
|
7745
8104
|
// src/renderScene/charts/renderers/pie/center.ts
|
|
7746
8105
|
function fill(template, chart) {
|
|
7747
|
-
const values = chart.series.map((series) => Math.max(0,
|
|
8106
|
+
const values = chart.series.map((series) => Math.max(0, chunkUHKFJBY5_cjs.finite(series.values[0], 0)));
|
|
7748
8107
|
const total = values.reduce((sum, value) => sum + value, 0);
|
|
7749
8108
|
const first = values[0] ?? 0;
|
|
7750
8109
|
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 ?? "");
|
|
@@ -7756,7 +8115,7 @@ function renderPieCenter(context, geometry) {
|
|
|
7756
8115
|
return [];
|
|
7757
8116
|
}
|
|
7758
8117
|
const lines = fill(template, chart).split(/\\n|\n/);
|
|
7759
|
-
const fontSize =
|
|
8118
|
+
const fontSize = chunkUHKFJBY5_cjs.finite(chart.config?.pieCenterSize, Math.max(14, Math.min(40, geometry.outerRadius * 0.3)));
|
|
7760
8119
|
const lineHeight = fontSize * 1.2;
|
|
7761
8120
|
const width = Math.max(40, (geometry.innerRadius > 0 ? geometry.innerRadius : geometry.outerRadius * 0.6) * 2);
|
|
7762
8121
|
const text = {
|
|
@@ -7769,7 +8128,7 @@ function renderPieCenter(context, geometry) {
|
|
|
7769
8128
|
width,
|
|
7770
8129
|
height: lineHeight * lines.length,
|
|
7771
8130
|
lines,
|
|
7772
|
-
fontFamily: chart.fontFamily ??
|
|
8131
|
+
fontFamily: chart.fontFamily ?? chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
7773
8132
|
fontSize,
|
|
7774
8133
|
fontWeight: "bold",
|
|
7775
8134
|
align: "center",
|
|
@@ -7789,14 +8148,14 @@ var radians = (degrees) => degrees * Math.PI / 180;
|
|
|
7789
8148
|
function renderPieSlices(context, geometry) {
|
|
7790
8149
|
const config = context.chart.config;
|
|
7791
8150
|
const marks = createPieSliceMarks(context.chart.series, geometry.total, {
|
|
7792
|
-
start: TOP + radians(
|
|
7793
|
-
sweep: Math.min(FULL, Math.max(radians(1), radians(
|
|
7794
|
-
explode: Math.max(0,
|
|
8151
|
+
start: TOP + radians(chunkUHKFJBY5_cjs.finite(config?.pieStartAngle, 0)),
|
|
8152
|
+
sweep: Math.min(FULL, Math.max(radians(1), radians(chunkUHKFJBY5_cjs.finite(config?.pieSweep, 360)))),
|
|
8153
|
+
explode: Math.max(0, chunkUHKFJBY5_cjs.finite(config?.pieExplode, 0))
|
|
7795
8154
|
});
|
|
7796
8155
|
const gapPx = config?.pieSliceGap ?? 0;
|
|
7797
8156
|
return [
|
|
7798
8157
|
...marks.flatMap((mark) => createSliceNodes(context, shiftGeometry(geometry, mark), mark, gapPx)),
|
|
7799
|
-
...
|
|
8158
|
+
...chunkUHKFJBY5_cjs.renderPieLabels(
|
|
7800
8159
|
context,
|
|
7801
8160
|
geometry,
|
|
7802
8161
|
marks.map((mark) => ({
|
|
@@ -7828,20 +8187,20 @@ function createPieSliceMarks(seriesList, total, layout) {
|
|
|
7828
8187
|
const marks = [];
|
|
7829
8188
|
let angle = layout.start;
|
|
7830
8189
|
seriesList.forEach((series, seriesIndex) => {
|
|
7831
|
-
const value = Math.max(0,
|
|
8190
|
+
const value = Math.max(0, chunkUHKFJBY5_cjs.finite(series.values[0], 0));
|
|
7832
8191
|
const sweep = value / total * layout.sweep;
|
|
7833
8192
|
marks.push({
|
|
7834
8193
|
seriesId: series.id,
|
|
7835
8194
|
label: series.label,
|
|
7836
|
-
color: series.color ??
|
|
8195
|
+
color: series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length],
|
|
7837
8196
|
stroke: series.stroke,
|
|
7838
8197
|
strokeWidth: series.strokeWidth,
|
|
7839
8198
|
value,
|
|
7840
8199
|
share: value / total,
|
|
7841
8200
|
angles: { start: angle, end: angle + Math.min(sweep, layout.sweep >= FULL ? MAXIMUM_SWEEP : layout.sweep) },
|
|
7842
|
-
explode: Math.max(0,
|
|
7843
|
-
labelOffsetX:
|
|
7844
|
-
labelOffsetY:
|
|
8201
|
+
explode: Math.max(0, chunkUHKFJBY5_cjs.finite(series.offset, layout.explode)),
|
|
8202
|
+
labelOffsetX: chunkUHKFJBY5_cjs.finite(series.labelOffsetX, 0),
|
|
8203
|
+
labelOffsetY: chunkUHKFJBY5_cjs.finite(series.labelOffsetY, 0)
|
|
7845
8204
|
});
|
|
7846
8205
|
angle += sweep;
|
|
7847
8206
|
});
|
|
@@ -7864,14 +8223,14 @@ function pieOuterShadow(shadow, gapPx) {
|
|
|
7864
8223
|
function sliceCornerRadius(geometry, mark, gapPx) {
|
|
7865
8224
|
const halfGap = Math.max(0, gapPx) / 2;
|
|
7866
8225
|
const rawSweep = mark.angles.end - mark.angles.start;
|
|
7867
|
-
const usesInnerArc =
|
|
7868
|
-
const gapSweep = 2 *
|
|
8226
|
+
const usesInnerArc = chunkUHKFJBY5_cjs.pieUsesInnerArc(geometry, mark.angles, gapPx);
|
|
8227
|
+
const gapSweep = 2 * chunkUHKFJBY5_cjs.gapInsetAngle(halfGap, geometry.outerRadius);
|
|
7869
8228
|
const availableSweep = Math.max(0, rawSweep - gapSweep);
|
|
7870
8229
|
return Math.min(
|
|
7871
8230
|
geometry.cornerRadius,
|
|
7872
|
-
usesInnerArc ?
|
|
8231
|
+
usesInnerArc ? chunkUHKFJBY5_cjs.maxPieCornerRadius(geometry.outerRadius, geometry.innerRadius, availableSweep) : chunkUHKFJBY5_cjs.maxApexCornerRadius(
|
|
7873
8232
|
geometry.outerRadius,
|
|
7874
|
-
|
|
8233
|
+
chunkUHKFJBY5_cjs.pieApexRadius(halfGap, rawSweep, geometry.outerRadius),
|
|
7875
8234
|
availableSweep
|
|
7876
8235
|
)
|
|
7877
8236
|
);
|
|
@@ -7884,14 +8243,14 @@ function sliceStroke(context, mark) {
|
|
|
7884
8243
|
}
|
|
7885
8244
|
return {
|
|
7886
8245
|
stroke: { kind: "solid", color: strokeColor },
|
|
7887
|
-
strokeWidth:
|
|
8246
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(mark.strokeWidth, chunkUHKFJBY5_cjs.finite(config?.pieStrokeWidth, 1))
|
|
7888
8247
|
};
|
|
7889
8248
|
}
|
|
7890
8249
|
function createSliceNodes(context, geometry, mark, gapPx) {
|
|
7891
8250
|
const { chart, bounds, diagnostics, nextOrder } = context;
|
|
7892
|
-
const fill2 =
|
|
7893
|
-
const slicePath =
|
|
7894
|
-
const shadow =
|
|
8251
|
+
const fill2 = chunkUHKFJBY5_cjs.paint(mark.color, diagnostics, chart.id);
|
|
8252
|
+
const slicePath = chunkUHKFJBY5_cjs.createPieSlicePath(geometry, mark.angles, sliceCornerRadius(geometry, mark, gapPx), gapPx);
|
|
8253
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
7895
8254
|
const strokeStyle = sliceStroke(context, mark);
|
|
7896
8255
|
const glow = chart.config?.pieGlow;
|
|
7897
8256
|
const shadowCaster = shadow ? {
|
|
@@ -7922,12 +8281,12 @@ function createSliceNodes(context, geometry, mark, gapPx) {
|
|
|
7922
8281
|
pieEnd: mark.angles.end,
|
|
7923
8282
|
pieValue: mark.value
|
|
7924
8283
|
},
|
|
7925
|
-
prop:
|
|
8284
|
+
prop: chunkUHKFJBY5_cjs.seriesValueProp(mark.seriesId, 0),
|
|
7926
8285
|
style: {
|
|
7927
8286
|
fill: fill2,
|
|
7928
8287
|
...strokeStyle,
|
|
7929
8288
|
innerShadow: shadow,
|
|
7930
|
-
shadow: glow ? { color:
|
|
8289
|
+
shadow: glow ? { color: chunkUHKFJBY5_cjs.representativeColor(mark.color, "#ffffff"), opacity: 0.85, blur: glow, dx: 0, dy: 0 } : void 0
|
|
7931
8290
|
}
|
|
7932
8291
|
};
|
|
7933
8292
|
return shadowCaster ? [shadowCaster, slice] : [slice];
|
|
@@ -7935,7 +8294,7 @@ function createSliceNodes(context, geometry, mark, gapPx) {
|
|
|
7935
8294
|
|
|
7936
8295
|
// src/renderScene/charts/renderers/pie.ts
|
|
7937
8296
|
function renderPie(context) {
|
|
7938
|
-
const geometry =
|
|
8297
|
+
const geometry = chunkUHKFJBY5_cjs.createPieGeometry(context);
|
|
7939
8298
|
return [...renderPieSlices(context, geometry), ...renderPieCenter(context, geometry)];
|
|
7940
8299
|
}
|
|
7941
8300
|
|
|
@@ -7952,18 +8311,18 @@ var OUTSIDE_FALLBACK_COLOR = "#334155";
|
|
|
7952
8311
|
function layoutOf(context) {
|
|
7953
8312
|
const { chart, plot } = context;
|
|
7954
8313
|
const maxRadius = Math.max(1, Math.min(plot.width, plot.height) / 2 - 4);
|
|
7955
|
-
const axisMin =
|
|
8314
|
+
const axisMin = chunkUHKFJBY5_cjs.finite(chart.axisY.min, 0);
|
|
7956
8315
|
return {
|
|
7957
8316
|
centerX: plot.x + plot.width / 2,
|
|
7958
8317
|
centerY: plot.y + plot.height / 2,
|
|
7959
8318
|
maxRadius,
|
|
7960
|
-
innerRadius: Math.max(0, Math.min(
|
|
7961
|
-
cornerRadius: Math.max(0,
|
|
7962
|
-
gapPx: Math.max(0,
|
|
8319
|
+
innerRadius: Math.max(0, Math.min(chunkUHKFJBY5_cjs.finite(chart.config?.innerRadius, 0), maxRadius - 1)),
|
|
8320
|
+
cornerRadius: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.pieCornerRadius, 0)),
|
|
8321
|
+
gapPx: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.pieSliceGap, 0)),
|
|
7963
8322
|
axisMin,
|
|
7964
|
-
range:
|
|
8323
|
+
range: chunkUHKFJBY5_cjs.finite(chart.axisY.max, 100) - axisMin,
|
|
7965
8324
|
sweep: chart.series.length > 0 ? Math.PI * 2 / chart.series.length : 0,
|
|
7966
|
-
start: TOP2 +
|
|
8325
|
+
start: TOP2 + chunkUHKFJBY5_cjs.finite(chart.config?.pieStartAngle, 0) * Math.PI / 180
|
|
7967
8326
|
};
|
|
7968
8327
|
}
|
|
7969
8328
|
function clampedCorner(layout, outerRadius, angles) {
|
|
@@ -7971,19 +8330,19 @@ function clampedCorner(layout, outerRadius, angles) {
|
|
|
7971
8330
|
const geometry = { centerX, centerY, outerRadius, innerRadius };
|
|
7972
8331
|
const halfGap = Math.max(0, gapPx) / 2;
|
|
7973
8332
|
const rawSweep = angles.end - angles.start;
|
|
7974
|
-
const availableSweep = Math.max(0, rawSweep - 2 *
|
|
7975
|
-
if (
|
|
7976
|
-
return Math.min(cornerRadius,
|
|
8333
|
+
const availableSweep = Math.max(0, rawSweep - 2 * chunkUHKFJBY5_cjs.gapInsetAngle(halfGap, outerRadius));
|
|
8334
|
+
if (chunkUHKFJBY5_cjs.pieUsesInnerArc(geometry, angles, gapPx)) {
|
|
8335
|
+
return Math.min(cornerRadius, chunkUHKFJBY5_cjs.maxPieCornerRadius(outerRadius, innerRadius, availableSweep));
|
|
7977
8336
|
}
|
|
7978
|
-
const apexRadius =
|
|
7979
|
-
return Math.min(cornerRadius,
|
|
8337
|
+
const apexRadius = chunkUHKFJBY5_cjs.pieApexRadius(halfGap, rawSweep, outerRadius);
|
|
8338
|
+
return Math.min(cornerRadius, chunkUHKFJBY5_cjs.maxApexCornerRadius(outerRadius, apexRadius, availableSweep));
|
|
7980
8339
|
}
|
|
7981
8340
|
function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColor) {
|
|
7982
8341
|
const { chart, bounds, diagnostics, nextOrder } = context;
|
|
7983
8342
|
const { centerX, centerY, innerRadius, maxRadius, gapPx } = layout;
|
|
7984
|
-
const color =
|
|
7985
|
-
const shadow =
|
|
7986
|
-
const trackPath =
|
|
8343
|
+
const color = chunkUHKFJBY5_cjs.paint(rawColor, diagnostics, chart.id);
|
|
8344
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
8345
|
+
const trackPath = chunkUHKFJBY5_cjs.createPieSlicePath(
|
|
7987
8346
|
{ centerX, centerY, outerRadius: maxRadius, innerRadius },
|
|
7988
8347
|
angles,
|
|
7989
8348
|
clampedCorner(layout, maxRadius, angles),
|
|
@@ -7996,12 +8355,12 @@ function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColo
|
|
|
7996
8355
|
bounds,
|
|
7997
8356
|
d: trackPath,
|
|
7998
8357
|
style: {
|
|
7999
|
-
fill:
|
|
8358
|
+
fill: chunkUHKFJBY5_cjs.paint(chart.gridColor ?? TRACK_COLOR_FALLBACK, diagnostics, chart.id),
|
|
8000
8359
|
opacity: chart.config?.polarTrackOpacity,
|
|
8001
8360
|
...trackStroke(context)
|
|
8002
8361
|
}
|
|
8003
8362
|
};
|
|
8004
|
-
const wedgePath =
|
|
8363
|
+
const wedgePath = chunkUHKFJBY5_cjs.createPieSlicePath(
|
|
8005
8364
|
{ centerX, centerY, outerRadius, innerRadius },
|
|
8006
8365
|
angles,
|
|
8007
8366
|
clampedCorner(layout, outerRadius, angles),
|
|
@@ -8030,7 +8389,7 @@ function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColo
|
|
|
8030
8389
|
pieEnd: angles.end,
|
|
8031
8390
|
pieValue: value
|
|
8032
8391
|
},
|
|
8033
|
-
prop:
|
|
8392
|
+
prop: chunkUHKFJBY5_cjs.seriesValueProp(series.id, 0),
|
|
8034
8393
|
style: { fill: color, innerShadow: shadow, ...wedgeStroke(context) }
|
|
8035
8394
|
};
|
|
8036
8395
|
return shadowCaster ? [track, shadowCaster, wedge] : [track, wedge];
|
|
@@ -8043,7 +8402,7 @@ function trackStroke(context) {
|
|
|
8043
8402
|
const dash = (config.polarTrackDash ?? "").split(/[ ,]+/).map(Number).filter((part) => Number.isFinite(part) && part > 0);
|
|
8044
8403
|
return {
|
|
8045
8404
|
stroke: { kind: "solid", color: config.polarTrackStroke },
|
|
8046
|
-
strokeWidth:
|
|
8405
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(config.polarTrackStrokeWidth, 1),
|
|
8047
8406
|
dash: dash.length > 0 ? dash : void 0
|
|
8048
8407
|
};
|
|
8049
8408
|
}
|
|
@@ -8054,7 +8413,7 @@ function wedgeStroke(context) {
|
|
|
8054
8413
|
}
|
|
8055
8414
|
return {
|
|
8056
8415
|
stroke: { kind: "solid", color: config.pieStroke },
|
|
8057
|
-
strokeWidth:
|
|
8416
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(config.pieStrokeWidth, 1)
|
|
8058
8417
|
};
|
|
8059
8418
|
}
|
|
8060
8419
|
function ringNodes(context, layout) {
|
|
@@ -8062,7 +8421,7 @@ function ringNodes(context, layout) {
|
|
|
8062
8421
|
if (!chart.config?.polarRings || layout.range <= 0) {
|
|
8063
8422
|
return [];
|
|
8064
8423
|
}
|
|
8065
|
-
return
|
|
8424
|
+
return chunkUHKFJBY5_cjs.chartTicks(chart.axisY).filter((tick) => tick > layout.axisMin && tick < layout.axisMin + layout.range).map((tick) => {
|
|
8066
8425
|
const radius = layout.innerRadius + (layout.maxRadius - layout.innerRadius) * (tick - layout.axisMin) / layout.range;
|
|
8067
8426
|
return {
|
|
8068
8427
|
type: "ellipse",
|
|
@@ -8076,7 +8435,7 @@ function ringNodes(context, layout) {
|
|
|
8076
8435
|
style: {
|
|
8077
8436
|
fill: { kind: "none" },
|
|
8078
8437
|
stroke: { kind: "solid", color: chart.textColor ?? "#334155" },
|
|
8079
|
-
strokeWidth:
|
|
8438
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1),
|
|
8080
8439
|
opacity: 0.25
|
|
8081
8440
|
}
|
|
8082
8441
|
};
|
|
@@ -8088,10 +8447,10 @@ function renderPolarArea(context) {
|
|
|
8088
8447
|
const showLabels = context.showLabels && sweep >= MIN_LABEL_SWEEP;
|
|
8089
8448
|
const wedges = context.chart.series.flatMap((series, index) => {
|
|
8090
8449
|
const angles = { start: start + index * sweep, end: start + (index + 1) * sweep };
|
|
8091
|
-
const value = Math.max(0,
|
|
8450
|
+
const value = Math.max(0, chunkUHKFJBY5_cjs.finite(series.values[0], 0));
|
|
8092
8451
|
const fraction = range > 0 ? Math.min(1, Math.max(0, (value - axisMin) / range)) : 0;
|
|
8093
8452
|
const outerRadius = Math.max(innerRadius + 1, innerRadius + (maxRadius - innerRadius) * fraction);
|
|
8094
|
-
const rawColor = series.color ??
|
|
8453
|
+
const rawColor = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[index % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
8095
8454
|
const nodes = wedgeNodes(context, layout, series, angles, outerRadius, value, rawColor);
|
|
8096
8455
|
if (!showLabels) {
|
|
8097
8456
|
return nodes;
|
|
@@ -8102,10 +8461,10 @@ function renderPolarArea(context) {
|
|
|
8102
8461
|
return [...wedges, ...ringNodes(context, layout)];
|
|
8103
8462
|
}
|
|
8104
8463
|
function labelSizes(chart) {
|
|
8105
|
-
const base = Math.max(9,
|
|
8464
|
+
const base = Math.max(9, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12));
|
|
8106
8465
|
return {
|
|
8107
|
-
nameSize: Math.max(6,
|
|
8108
|
-
valueSize: Math.max(6,
|
|
8466
|
+
nameSize: Math.max(6, chunkUHKFJBY5_cjs.finite(chart.config?.polarNameSize, base)),
|
|
8467
|
+
valueSize: Math.max(6, chunkUHKFJBY5_cjs.finite(chart.config?.polarValueSize, base))
|
|
8109
8468
|
};
|
|
8110
8469
|
}
|
|
8111
8470
|
function labelPlacement2(context, geometry, angles, series, fillColor) {
|
|
@@ -8113,8 +8472,8 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
|
|
|
8113
8472
|
const { nameSize, valueSize } = labelSizes(context.chart);
|
|
8114
8473
|
const lineHeight = (nameSize + valueSize) * 1.2 / 2;
|
|
8115
8474
|
const ringThickness = geometry.outerRadius - geometry.innerRadius;
|
|
8116
|
-
const labelOffsetX =
|
|
8117
|
-
const labelOffsetY =
|
|
8475
|
+
const labelOffsetX = chunkUHKFJBY5_cjs.finite(series.labelOffsetX, 0);
|
|
8476
|
+
const labelOffsetY = chunkUHKFJBY5_cjs.finite(series.labelOffsetY, 0);
|
|
8118
8477
|
const hasManualOffset = labelOffsetX !== 0 || labelOffsetY !== 0;
|
|
8119
8478
|
const tooThin = ringThickness < lineHeight * 2 + 6;
|
|
8120
8479
|
const chordWidth = 2 * geometry.outerRadius * Math.sin(Math.abs(angles.end - angles.start) / 2);
|
|
@@ -8124,17 +8483,17 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
|
|
|
8124
8483
|
return void 0;
|
|
8125
8484
|
}
|
|
8126
8485
|
const outside = hasManualOffset || !fitsInline;
|
|
8127
|
-
const tickStart =
|
|
8128
|
-
const point = outside ? hasManualOffset ? addOffset(
|
|
8129
|
-
const color = outside ? outsideLabels && context.chart.textColor ? context.chart.textColor :
|
|
8130
|
-
|
|
8131
|
-
|
|
8486
|
+
const tickStart = chunkUHKFJBY5_cjs.pieArcPoint(geometry, mid, geometry.outerRadius + LEADER_INSET);
|
|
8487
|
+
const point = outside ? hasManualOffset ? addOffset(chunkUHKFJBY5_cjs.pieArcPoint(geometry, mid, geometry.outerRadius), labelOffsetX, labelOffsetY) : chunkUHKFJBY5_cjs.pieArcPoint(geometry, mid, geometry.outerRadius + OUTSIDE_GAP) : chunkUHKFJBY5_cjs.pieArcPoint(geometry, mid, geometry.innerRadius + ringThickness * LABEL_RADIUS_FRACTION);
|
|
8488
|
+
const color = outside ? outsideLabels && context.chart.textColor ? context.chart.textColor : chunkUHKFJBY5_cjs.sameHueTint(chunkUHKFJBY5_cjs.representativeColor(fillColor, OUTSIDE_FALLBACK_COLOR), OUTSIDE_TINT_LIGHTNESS) ?? OUTSIDE_FALLBACK_COLOR : chunkUHKFJBY5_cjs.sameHueContrastColor(
|
|
8489
|
+
chunkUHKFJBY5_cjs.representativeColor(fillColor, "#0f172a"),
|
|
8490
|
+
chunkUHKFJBY5_cjs.contrastTextColor(chunkUHKFJBY5_cjs.representativeColor(fillColor, "#0f172a"))
|
|
8132
8491
|
);
|
|
8133
8492
|
return { point, color, outside, mid, tickStart };
|
|
8134
8493
|
}
|
|
8135
8494
|
function labelTick(context, series, placement, lineHeight) {
|
|
8136
8495
|
const { point, color, outside, tickStart } = placement;
|
|
8137
|
-
const tickEnd = outside ?
|
|
8496
|
+
const tickEnd = outside ? chunkUHKFJBY5_cjs.clipSegmentToRect(tickStart, point, LABEL_WIDTH2 / 2, lineHeight) : tickStart;
|
|
8138
8497
|
return {
|
|
8139
8498
|
type: "path",
|
|
8140
8499
|
id: `chart-polar-area-label-tick-${context.chart.id}-${series.id}`,
|
|
@@ -8161,7 +8520,7 @@ function labelTexts(context, geometry, series, value, placement) {
|
|
|
8161
8520
|
bounds,
|
|
8162
8521
|
x: point.x - LABEL_WIDTH2 / 2,
|
|
8163
8522
|
width: LABEL_WIDTH2,
|
|
8164
|
-
fontFamily: chart.fontFamily ??
|
|
8523
|
+
fontFamily: chart.fontFamily ?? chunkUHKFJBY5_cjs.DEFAULT_FONT,
|
|
8165
8524
|
align: "center",
|
|
8166
8525
|
verticalAlign: "middle",
|
|
8167
8526
|
lineHeight: 1.2,
|
|
@@ -8184,7 +8543,7 @@ function labelTexts(context, geometry, series, value, placement) {
|
|
|
8184
8543
|
lines: [series.label],
|
|
8185
8544
|
fontWeight: valueFirst ? "normal" : "bold",
|
|
8186
8545
|
detail,
|
|
8187
|
-
prop:
|
|
8546
|
+
prop: chunkUHKFJBY5_cjs.seriesLabelProp(series.id)
|
|
8188
8547
|
};
|
|
8189
8548
|
const valueText = {
|
|
8190
8549
|
type: "text",
|
|
@@ -8194,10 +8553,10 @@ function labelTexts(context, geometry, series, value, placement) {
|
|
|
8194
8553
|
y: valueY,
|
|
8195
8554
|
height: valueSize * 1.2,
|
|
8196
8555
|
fontSize: valueSize,
|
|
8197
|
-
lines: [
|
|
8556
|
+
lines: [chunkUHKFJBY5_cjs.formatFieldValue(value)],
|
|
8198
8557
|
fontWeight: valueFirst ? "bold" : "normal",
|
|
8199
8558
|
detail,
|
|
8200
|
-
prop:
|
|
8559
|
+
prop: chunkUHKFJBY5_cjs.seriesValueProp(series.id, 0),
|
|
8201
8560
|
propKind: "value"
|
|
8202
8561
|
};
|
|
8203
8562
|
return [nameText, valueText];
|
|
@@ -8224,10 +8583,10 @@ function radarFrameFor(context) {
|
|
|
8224
8583
|
return {
|
|
8225
8584
|
centerX: plot.x + plot.width / 2,
|
|
8226
8585
|
centerY: plot.y + plot.height / 2,
|
|
8227
|
-
radius:
|
|
8586
|
+
radius: chunkUHKFJBY5_cjs.radarRadius(plot.width, plot.height, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12), context.showLabels),
|
|
8228
8587
|
min: chart.axisY.min,
|
|
8229
8588
|
max: chart.axisY.max,
|
|
8230
|
-
count:
|
|
8589
|
+
count: chunkUHKFJBY5_cjs.radarCategoryCount(configuredCount, dataCount),
|
|
8231
8590
|
curved: chart.chartType === "radial",
|
|
8232
8591
|
tension: chart.config?.radarTension
|
|
8233
8592
|
};
|
|
@@ -8237,7 +8596,7 @@ function createRadarGeometry(context) {
|
|
|
8237
8596
|
const configuredCategories = chart.config?.categories?.filter(Boolean) ?? [];
|
|
8238
8597
|
const frame = radarFrameFor(context);
|
|
8239
8598
|
const categories = createCategories(configuredCategories, frame.count);
|
|
8240
|
-
const pointAt = (pointRadius, pointIndex) =>
|
|
8599
|
+
const pointAt = (pointRadius, pointIndex) => chunkUHKFJBY5_cjs.radarPointAt(frame, pointIndex, pointRadius);
|
|
8241
8600
|
return {
|
|
8242
8601
|
circular: frame.curved,
|
|
8243
8602
|
areaOpacity: Math.max(0, Math.min(1, chart.config?.areaOpacity ?? 0.16)),
|
|
@@ -8249,9 +8608,9 @@ function createRadarGeometry(context) {
|
|
|
8249
8608
|
centerX: frame.centerX,
|
|
8250
8609
|
centerY: frame.centerY,
|
|
8251
8610
|
radius: frame.radius,
|
|
8252
|
-
radiusForValue: (value) =>
|
|
8611
|
+
radiusForValue: (value) => chunkUHKFJBY5_cjs.radarRadiusForValue(frame, value),
|
|
8253
8612
|
pointAt,
|
|
8254
|
-
polygonPath: (pointRadius) =>
|
|
8613
|
+
polygonPath: (pointRadius) => chunkUHKFJBY5_cjs.radarSeriesPath(
|
|
8255
8614
|
categories.map((_, index) => pointAt(pointRadius, index)),
|
|
8256
8615
|
false
|
|
8257
8616
|
)
|
|
@@ -8272,7 +8631,7 @@ function renderRadarGrid(context, geometry) {
|
|
|
8272
8631
|
return [...renderRings(context, geometry), ...geometry.showSpokes ? renderSpokes(context, geometry) : []];
|
|
8273
8632
|
}
|
|
8274
8633
|
function renderRings(context, geometry) {
|
|
8275
|
-
return
|
|
8634
|
+
return chunkUHKFJBY5_cjs.chartTicks(context.chart.axisY).filter((tick) => tick > context.chart.axisY.min).map((tick) => createRingNode(context, geometry, tick));
|
|
8276
8635
|
}
|
|
8277
8636
|
function createRingNode(context, geometry, tick) {
|
|
8278
8637
|
const { chart, bounds, nextOrder } = context;
|
|
@@ -8280,7 +8639,7 @@ function createRingNode(context, geometry, tick) {
|
|
|
8280
8639
|
const style = {
|
|
8281
8640
|
fill: { kind: "none" },
|
|
8282
8641
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
8283
|
-
strokeWidth:
|
|
8642
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1)
|
|
8284
8643
|
};
|
|
8285
8644
|
if (geometry.circular) {
|
|
8286
8645
|
return {
|
|
@@ -8317,7 +8676,7 @@ function renderSpokes(context, geometry) {
|
|
|
8317
8676
|
style: {
|
|
8318
8677
|
fill: { kind: "none" },
|
|
8319
8678
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
8320
|
-
strokeWidth:
|
|
8679
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1)
|
|
8321
8680
|
}
|
|
8322
8681
|
};
|
|
8323
8682
|
});
|
|
@@ -8337,7 +8696,7 @@ function createCategoryLabel(context, geometry, category, categoryIndex) {
|
|
|
8337
8696
|
const labelPoint = geometry.pointAt(geometry.radius + 10, categoryIndex);
|
|
8338
8697
|
const horizontalOffset = labelPoint.x - geometry.centerX;
|
|
8339
8698
|
const width = Math.max(64, Math.min(120, plot.width / 3));
|
|
8340
|
-
return
|
|
8699
|
+
return chunkUHKFJBY5_cjs.chartText({
|
|
8341
8700
|
id: `chart-radar-label-${chart.id}-${categoryIndex}`,
|
|
8342
8701
|
order: nextOrder(),
|
|
8343
8702
|
bounds,
|
|
@@ -8375,9 +8734,9 @@ function renderRadarSeries(context, geometry) {
|
|
|
8375
8734
|
return nodes;
|
|
8376
8735
|
}
|
|
8377
8736
|
function renderSeries(context, geometry, series, seriesIndex) {
|
|
8378
|
-
const color = series.color ??
|
|
8737
|
+
const color = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
8379
8738
|
const points = seriesPoints(series, context, geometry);
|
|
8380
|
-
const path =
|
|
8739
|
+
const path = chunkUHKFJBY5_cjs.radarSeriesPath(points, geometry.circular, geometry.tension);
|
|
8381
8740
|
return [
|
|
8382
8741
|
createSeriesFill(context, geometry, series, path, color),
|
|
8383
8742
|
...geometry.strokeWidth > 0 ? [createSeriesStroke(context, geometry, series, path, color)] : [],
|
|
@@ -8400,7 +8759,7 @@ function createSeriesFill(context, geometry, series, path, color) {
|
|
|
8400
8759
|
d: path,
|
|
8401
8760
|
detail: { of: "chartSeries", series: series.id },
|
|
8402
8761
|
style: {
|
|
8403
|
-
fill:
|
|
8762
|
+
fill: chunkUHKFJBY5_cjs.paint(color, diagnostics, chart.id),
|
|
8404
8763
|
stroke: { kind: "none" },
|
|
8405
8764
|
opacity: Math.max(0, Math.min(1, series.opacity ?? geometry.areaOpacity))
|
|
8406
8765
|
}
|
|
@@ -8417,10 +8776,10 @@ function createSeriesStroke(context, geometry, series, path, color) {
|
|
|
8417
8776
|
detail: { of: "chartSeries", series: series.id },
|
|
8418
8777
|
style: {
|
|
8419
8778
|
fill: { kind: "none" },
|
|
8420
|
-
stroke:
|
|
8779
|
+
stroke: chunkUHKFJBY5_cjs.paint(color, diagnostics, chart.id),
|
|
8421
8780
|
strokeWidth: geometry.strokeWidth,
|
|
8422
8781
|
lineJoin: "round",
|
|
8423
|
-
shadow:
|
|
8782
|
+
shadow: chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle)
|
|
8424
8783
|
}
|
|
8425
8784
|
};
|
|
8426
8785
|
}
|
|
@@ -8436,8 +8795,8 @@ function createSeriesPoints(context, geometry, series, points, color) {
|
|
|
8436
8795
|
rx: geometry.pointSize,
|
|
8437
8796
|
ry: geometry.pointSize,
|
|
8438
8797
|
detail: { of: "chartValue", series: series.id, valueIndex: pointIndex, mark: "radar-vertex" },
|
|
8439
|
-
prop:
|
|
8440
|
-
style: { fill:
|
|
8798
|
+
prop: chunkUHKFJBY5_cjs.seriesValueProp(series.id, pointIndex),
|
|
8799
|
+
style: { fill: chunkUHKFJBY5_cjs.paint(color, diagnostics, chart.id) }
|
|
8441
8800
|
}));
|
|
8442
8801
|
}
|
|
8443
8802
|
|
|
@@ -8491,25 +8850,25 @@ function ringProgressPath(cx, cy, r, sweep, from) {
|
|
|
8491
8850
|
}
|
|
8492
8851
|
function layoutOf2(context) {
|
|
8493
8852
|
const { chart, plot } = context;
|
|
8494
|
-
const axisMin =
|
|
8853
|
+
const axisMin = chunkUHKFJBY5_cjs.finite(chart.axisY.min, 0);
|
|
8495
8854
|
return {
|
|
8496
8855
|
centerX: plot.x + plot.width / 2,
|
|
8497
8856
|
centerY: plot.y + plot.height / 2,
|
|
8498
8857
|
outerRadius: Math.max(1, Math.min(plot.width, plot.height) / 2 - 4),
|
|
8499
|
-
ringThickness: Math.max(1,
|
|
8500
|
-
ringGap: Math.max(0,
|
|
8858
|
+
ringThickness: Math.max(1, chunkUHKFJBY5_cjs.finite(chart.config?.ringThickness, DEFAULT_RING_THICKNESS)),
|
|
8859
|
+
ringGap: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.ringGap, DEFAULT_RING_GAP)),
|
|
8501
8860
|
axisMin,
|
|
8502
|
-
range:
|
|
8503
|
-
start: TOP3 +
|
|
8504
|
-
total: Math.min(360, Math.max(1,
|
|
8505
|
-
trackOpacity: Math.min(1, Math.max(0,
|
|
8861
|
+
range: chunkUHKFJBY5_cjs.finite(chart.axisY.max, 100) - axisMin,
|
|
8862
|
+
start: TOP3 + chunkUHKFJBY5_cjs.finite(chart.config?.ringStartAngle, 0) * Math.PI / 180,
|
|
8863
|
+
total: Math.min(360, Math.max(1, chunkUHKFJBY5_cjs.finite(chart.config?.ringSweep, 360))) * Math.PI / 180,
|
|
8864
|
+
trackOpacity: Math.min(1, Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.ringTrackOpacity, TRACK_OPACITY))),
|
|
8506
8865
|
cap: chart.config?.ringCap ?? "round"
|
|
8507
8866
|
};
|
|
8508
8867
|
}
|
|
8509
8868
|
function ringEndShadows(context, layout, series, radius, sweep, color) {
|
|
8510
8869
|
const { chart, bounds, nextOrder } = context;
|
|
8511
8870
|
const { centerX, centerY, ringThickness, start } = layout;
|
|
8512
|
-
const shadow =
|
|
8871
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
8513
8872
|
const isFullCircle = sweep >= Math.PI * 2 - FULL_SWEEP_EPSILON;
|
|
8514
8873
|
if (!shadow || isFullCircle) {
|
|
8515
8874
|
return [];
|
|
@@ -8547,8 +8906,8 @@ function ringNodes2(context, layout, series, index) {
|
|
|
8547
8906
|
if (radius <= ringThickness / 2) {
|
|
8548
8907
|
return [];
|
|
8549
8908
|
}
|
|
8550
|
-
const color =
|
|
8551
|
-
const value = Math.max(0,
|
|
8909
|
+
const color = chunkUHKFJBY5_cjs.paint(series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[index % chunkUHKFJBY5_cjs.CHART_COLORS.length], diagnostics, chart.id);
|
|
8910
|
+
const value = Math.max(0, chunkUHKFJBY5_cjs.finite(series.values[0], 0));
|
|
8552
8911
|
const fraction = range > 0 ? Math.min(1, Math.max(0, (value - axisMin) / range)) : 0;
|
|
8553
8912
|
const trackStyle = {
|
|
8554
8913
|
fill: { kind: "none" },
|
|
@@ -8586,7 +8945,7 @@ function ringNodes2(context, layout, series, index) {
|
|
|
8586
8945
|
bounds,
|
|
8587
8946
|
d: ringProgressPath(centerX, centerY, radius, sweep, start),
|
|
8588
8947
|
detail: { of: "chartValue", series: series.id, valueIndex: 0, mark: "radial-bar-ring" },
|
|
8589
|
-
prop:
|
|
8948
|
+
prop: chunkUHKFJBY5_cjs.seriesValueProp(series.id, 0),
|
|
8590
8949
|
style: { fill: { kind: "none" }, stroke: color, strokeWidth: ringThickness, lineCap: cap }
|
|
8591
8950
|
};
|
|
8592
8951
|
return [track, ...casters, progress];
|
|
@@ -8598,7 +8957,7 @@ function renderRadialBar(context) {
|
|
|
8598
8957
|
|
|
8599
8958
|
// src/renderScene/charts/renderers/sankey/links.ts
|
|
8600
8959
|
function renderSankeyLinks(context, data) {
|
|
8601
|
-
const shadow =
|
|
8960
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(context.chart.shadowStyle);
|
|
8602
8961
|
const gradient = Boolean(context.chart.config?.linkGradient);
|
|
8603
8962
|
const { plot } = context;
|
|
8604
8963
|
const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
|
|
@@ -8619,8 +8978,8 @@ function createSankeyLinkRibbon(context, data, link, linkIndex, gradient) {
|
|
|
8619
8978
|
bottom: data.baseY + link.targetY1
|
|
8620
8979
|
};
|
|
8621
8980
|
const config = context.chart.config;
|
|
8622
|
-
const fromColor = link.color || data.nodeColors.get(link.source) ||
|
|
8623
|
-
const toColor = data.nodeColors.get(link.target) ||
|
|
8981
|
+
const fromColor = link.color || data.nodeColors.get(link.source) || chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL;
|
|
8982
|
+
const toColor = data.nodeColors.get(link.target) || chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL;
|
|
8624
8983
|
const fill2 = gradient ? {
|
|
8625
8984
|
kind: "linear-gradient",
|
|
8626
8985
|
angle: 0,
|
|
@@ -8635,9 +8994,9 @@ function createSankeyLinkRibbon(context, data, link, linkIndex, gradient) {
|
|
|
8635
8994
|
toId: link.target,
|
|
8636
8995
|
source,
|
|
8637
8996
|
target,
|
|
8638
|
-
controlX: source.x + (target.x - source.x) * Math.min(1, Math.max(0,
|
|
8997
|
+
controlX: source.x + (target.x - source.x) * Math.min(1, Math.max(0, chunkUHKFJBY5_cjs.finite(config?.sankeyLinkCurve, 0.5))),
|
|
8639
8998
|
fill: fill2,
|
|
8640
|
-
opacity: Math.min(1, Math.max(0,
|
|
8999
|
+
opacity: Math.min(1, Math.max(0, chunkUHKFJBY5_cjs.finite(config?.sankeyLinkOpacity, link.color ? 0.85 : 0.45)))
|
|
8641
9000
|
};
|
|
8642
9001
|
}
|
|
8643
9002
|
function createSankeyRibbonNode(context, ribbon, shadow, clipPath, gradient) {
|
|
@@ -8678,7 +9037,7 @@ function sankeyRibbonPath(ribbon) {
|
|
|
8678
9037
|
var OUTSIDE_LABEL_LIGHTNESS_ON_LIGHT_BG = 0.3;
|
|
8679
9038
|
var OUTSIDE_LABEL_LIGHTNESS_ON_DARK_BG = 0.78;
|
|
8680
9039
|
function renderSankeyNodes(context, data) {
|
|
8681
|
-
const cornerRadius = Math.max(0,
|
|
9040
|
+
const cornerRadius = Math.max(0, chunkUHKFJBY5_cjs.finite(context.chart.config?.barCornerRadius, 0));
|
|
8682
9041
|
const nodes = [];
|
|
8683
9042
|
data.nodes.forEach((node) => {
|
|
8684
9043
|
nodes.push(createNodeRect(context, data, node, cornerRadius));
|
|
@@ -8694,8 +9053,8 @@ function createNodeRect(context, data, node, cornerRadius) {
|
|
|
8694
9053
|
const x = data.baseX + node.x;
|
|
8695
9054
|
const y = data.baseY + node.y;
|
|
8696
9055
|
const style = {
|
|
8697
|
-
fill: { kind: "solid", color: node.color ||
|
|
8698
|
-
shadow:
|
|
9056
|
+
fill: { kind: "solid", color: node.color || chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL },
|
|
9057
|
+
shadow: chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle)
|
|
8699
9058
|
};
|
|
8700
9059
|
const isFirstColumn = node.column === 0;
|
|
8701
9060
|
const isLastColumn = node.column === data.columnCount - 1;
|
|
@@ -8721,7 +9080,7 @@ function createNodeRect(context, data, node, cornerRadius) {
|
|
|
8721
9080
|
id: `chart-sankey-node-${chart.id}-${node.id}`,
|
|
8722
9081
|
order: nextOrder(),
|
|
8723
9082
|
bounds,
|
|
8724
|
-
d:
|
|
9083
|
+
d: chunkUHKFJBY5_cjs.leftRoundedRectPath(x, y, node.width, node.height, cornerRadius),
|
|
8725
9084
|
style,
|
|
8726
9085
|
detail
|
|
8727
9086
|
};
|
|
@@ -8732,7 +9091,7 @@ function createNodeRect(context, data, node, cornerRadius) {
|
|
|
8732
9091
|
id: `chart-sankey-node-${chart.id}-${node.id}`,
|
|
8733
9092
|
order: nextOrder(),
|
|
8734
9093
|
bounds,
|
|
8735
|
-
d:
|
|
9094
|
+
d: chunkUHKFJBY5_cjs.rightRoundedRectPath(x, y, node.width, node.height, cornerRadius),
|
|
8736
9095
|
style,
|
|
8737
9096
|
detail
|
|
8738
9097
|
};
|
|
@@ -8758,9 +9117,9 @@ function createNodeLabel(context, data, node) {
|
|
|
8758
9117
|
return void 0;
|
|
8759
9118
|
}
|
|
8760
9119
|
const fallback = chart.textColor ?? "#0f172a";
|
|
8761
|
-
const defaultColor = position === "inside" ?
|
|
9120
|
+
const defaultColor = position === "inside" ? chunkUHKFJBY5_cjs.contrastTextColor(node.color) : chunkUHKFJBY5_cjs.sameHueTint(
|
|
8762
9121
|
node.color,
|
|
8763
|
-
|
|
9122
|
+
chunkUHKFJBY5_cjs.isLightColor(fallback) ? OUTSIDE_LABEL_LIGHTNESS_ON_DARK_BG : OUTSIDE_LABEL_LIGHTNESS_ON_LIGHT_BG
|
|
8764
9123
|
) ?? fallback;
|
|
8765
9124
|
const color = chart.config?.labelColor ?? defaultColor;
|
|
8766
9125
|
return { ...label, color, detail: { of: "chartSeries", series: node.id, mark: "sankey-node-label" } };
|
|
@@ -8772,7 +9131,7 @@ function createOutsideLabel(context, data, node) {
|
|
|
8772
9131
|
const y = data.baseY + node.y;
|
|
8773
9132
|
const labelX2 = isLastColumn ? x - data.labelGutter + 8 : x + node.width + 6;
|
|
8774
9133
|
return {
|
|
8775
|
-
...
|
|
9134
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
8776
9135
|
id: `chart-sankey-label-${chart.id}-${node.id}`,
|
|
8777
9136
|
order: nextOrder(),
|
|
8778
9137
|
bounds,
|
|
@@ -8797,11 +9156,11 @@ function createInsideLabel(context, data, node, orientation) {
|
|
|
8797
9156
|
if (orientation === "vertical") {
|
|
8798
9157
|
const thickness = fontSize * 1.4;
|
|
8799
9158
|
const width = Math.max(1, node.height - 8);
|
|
8800
|
-
if (
|
|
9159
|
+
if (chunkUHKFJBY5_cjs.estimateTextWidth(node.label, fontSize, false) > width) {
|
|
8801
9160
|
return void 0;
|
|
8802
9161
|
}
|
|
8803
9162
|
return {
|
|
8804
|
-
...
|
|
9163
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
8805
9164
|
id,
|
|
8806
9165
|
order: nextOrder(),
|
|
8807
9166
|
bounds,
|
|
@@ -8818,7 +9177,7 @@ function createInsideLabel(context, data, node, orientation) {
|
|
|
8818
9177
|
};
|
|
8819
9178
|
}
|
|
8820
9179
|
return {
|
|
8821
|
-
...
|
|
9180
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
8822
9181
|
id,
|
|
8823
9182
|
order: nextOrder(),
|
|
8824
9183
|
bounds,
|
|
@@ -8839,18 +9198,18 @@ function createSankeyRenderData(context) {
|
|
|
8839
9198
|
const labelGutter = showLabels ? 92 : 0;
|
|
8840
9199
|
const availableWidth = Math.max(1, plot.width - labelGutter * 2);
|
|
8841
9200
|
const layout = layoutSankey(createNodeInputs(context), createLinkInputs(context), availableWidth, plot.height, {
|
|
8842
|
-
nodeWidth: Math.max(1,
|
|
8843
|
-
nodeGap: Math.max(0,
|
|
9201
|
+
nodeWidth: Math.max(1, chunkUHKFJBY5_cjs.finite(chart.config?.sankeyNodeWidth, 18)),
|
|
9202
|
+
nodeGap: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.sankeyNodeGap, 8))
|
|
8844
9203
|
});
|
|
8845
9204
|
return {
|
|
8846
9205
|
...layout,
|
|
8847
9206
|
baseX: plot.x + labelGutter,
|
|
8848
9207
|
baseY: plot.y,
|
|
8849
9208
|
labelGutter,
|
|
8850
|
-
fontSize: Math.max(9,
|
|
8851
|
-
labelSize: Math.max(6,
|
|
9209
|
+
fontSize: Math.max(9, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12)),
|
|
9210
|
+
labelSize: Math.max(6, chunkUHKFJBY5_cjs.finite(chart.config?.sankeyLabelSize, Math.max(9, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12)) - 2)),
|
|
8852
9211
|
columnCount: Math.max(1, ...layout.nodes.map((node) => node.column + 1)),
|
|
8853
|
-
nodeColors: new Map(layout.nodes.map((node) => [node.id, node.color ||
|
|
9212
|
+
nodeColors: new Map(layout.nodes.map((node) => [node.id, node.color || chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL]))
|
|
8854
9213
|
};
|
|
8855
9214
|
}
|
|
8856
9215
|
function createNodeInputs(context) {
|
|
@@ -8872,7 +9231,7 @@ function createLinkInputs(context) {
|
|
|
8872
9231
|
source: series.source,
|
|
8873
9232
|
target: series.target,
|
|
8874
9233
|
value: series.values[0] ?? 0,
|
|
8875
|
-
color: series.color ?
|
|
9234
|
+
color: series.color ? chunkUHKFJBY5_cjs.representativeColor(series.color, chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL) : void 0
|
|
8876
9235
|
});
|
|
8877
9236
|
});
|
|
8878
9237
|
return inputs;
|
|
@@ -8891,9 +9250,9 @@ function renderSankey(context) {
|
|
|
8891
9250
|
var DEFAULT_POINT_SIZE = 4;
|
|
8892
9251
|
function renderScatter(context) {
|
|
8893
9252
|
const nodes = [];
|
|
8894
|
-
const shadow =
|
|
9253
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(context.chart.shadowStyle);
|
|
8895
9254
|
context.chart.series.forEach((series, seriesIndex) => {
|
|
8896
|
-
const color = series.color ??
|
|
9255
|
+
const color = series.color ?? chunkUHKFJBY5_cjs.CHART_COLORS[seriesIndex % chunkUHKFJBY5_cjs.CHART_COLORS.length];
|
|
8897
9256
|
const points = pixelPoints(context, seriesValuePairs(context.chart, series));
|
|
8898
9257
|
points.forEach((point, pointIndex) => {
|
|
8899
9258
|
nodes.push(createScatterPoint(context, series, point, pointIndex, color, shadow));
|
|
@@ -8917,8 +9276,8 @@ function createScatterPoint(context, series, point, pointIndex, color, shadow) {
|
|
|
8917
9276
|
ry: radius,
|
|
8918
9277
|
detail: { of: "chartValue", series: series.id, valueIndex: pointIndex },
|
|
8919
9278
|
style: {
|
|
8920
|
-
fill:
|
|
8921
|
-
stroke: strokeWidth > 0 ?
|
|
9279
|
+
fill: chunkUHKFJBY5_cjs.paint(color, diagnostics, chart.id),
|
|
9280
|
+
stroke: strokeWidth > 0 ? chunkUHKFJBY5_cjs.paint(config?.pointStrokeColor ?? color, diagnostics, chart.id) : void 0,
|
|
8922
9281
|
strokeWidth: strokeWidth > 0 ? strokeWidth : void 0,
|
|
8923
9282
|
opacity: config?.pointOpacity,
|
|
8924
9283
|
shadow
|
|
@@ -8929,14 +9288,14 @@ function createScatterPoint(context, series, point, pointIndex, color, shadow) {
|
|
|
8929
9288
|
// src/renderScene/charts/renderers/treemap/layout.ts
|
|
8930
9289
|
function createTreemapLayout(context) {
|
|
8931
9290
|
const { chart, plot, showLegend } = context;
|
|
8932
|
-
const fontSize = Math.max(9,
|
|
9291
|
+
const fontSize = Math.max(9, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12));
|
|
8933
9292
|
const legendPosition = chart.legendPosition === "left" ? "left" : chart.legendPosition === "right" ? "right" : "bottom";
|
|
8934
9293
|
const legendHeight = showLegend && legendPosition === "bottom" ? 48 : 0;
|
|
8935
|
-
const cellGap = Math.max(0,
|
|
9294
|
+
const cellGap = Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.cellGap, 0));
|
|
8936
9295
|
return {
|
|
8937
9296
|
leaves: chart.series,
|
|
8938
|
-
bands:
|
|
8939
|
-
zones: chart.config?.zones?.length ? chart.config.zones :
|
|
9297
|
+
bands: chunkUHKFJBY5_cjs.axisBands(chart.axisY),
|
|
9298
|
+
zones: chart.config?.zones?.length ? chart.config.zones : chunkUHKFJBY5_cjs.DEFAULT_HEATMAP_ZONES,
|
|
8940
9299
|
fontSize,
|
|
8941
9300
|
smallFontSize: Math.max(8, fontSize - 1),
|
|
8942
9301
|
legendPosition,
|
|
@@ -8944,18 +9303,18 @@ function createTreemapLayout(context) {
|
|
|
8944
9303
|
gridWidth: Math.max(1, plot.width),
|
|
8945
9304
|
gridHeight: Math.max(1, plot.height - legendHeight),
|
|
8946
9305
|
cellGap,
|
|
8947
|
-
cellRadius: Math.max(0,
|
|
8948
|
-
headerHeight: Math.max(0,
|
|
8949
|
-
labelSize: Math.max(6,
|
|
8950
|
-
valueSize: Math.max(6,
|
|
8951
|
-
labelPadding: Math.max(0,
|
|
9306
|
+
cellRadius: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.barCornerRadius, cellGap)),
|
|
9307
|
+
headerHeight: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.headerHeight, 20)),
|
|
9308
|
+
labelSize: Math.max(6, chunkUHKFJBY5_cjs.finite(chart.config?.tileLabelSize, Math.max(8, fontSize - 1))),
|
|
9309
|
+
valueSize: Math.max(6, chunkUHKFJBY5_cjs.finite(chart.config?.tileValueSize, Math.max(8, fontSize - 1))),
|
|
9310
|
+
labelPadding: Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.tileLabelPadding, 4))
|
|
8952
9311
|
};
|
|
8953
9312
|
}
|
|
8954
9313
|
function treemapLeafValue(leaf) {
|
|
8955
9314
|
return leaf.values[0] ?? 0;
|
|
8956
9315
|
}
|
|
8957
9316
|
function treemapLeafColor(leaf, layout) {
|
|
8958
|
-
return leaf.color ??
|
|
9317
|
+
return leaf.color ?? chunkUHKFJBY5_cjs.zoneColorAtValue(treemapLeafValue(leaf), layout.bands, layout.zones);
|
|
8959
9318
|
}
|
|
8960
9319
|
|
|
8961
9320
|
// src/renderScene/charts/renderers/treemap/legend.ts
|
|
@@ -8980,7 +9339,7 @@ function bandStops(layout) {
|
|
|
8980
9339
|
const zones = layout.zones.slice(0, bandCount);
|
|
8981
9340
|
return zones.map((zone, index) => ({
|
|
8982
9341
|
offset: bandRatio2(layout, layout.bands[index + 1] ?? layout.bands[layout.bands.length - 1]) * 100,
|
|
8983
|
-
color: zone.color ??
|
|
9342
|
+
color: zone.color ?? chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL
|
|
8984
9343
|
}));
|
|
8985
9344
|
}
|
|
8986
9345
|
function renderBottomLegend(context, layout) {
|
|
@@ -8989,7 +9348,7 @@ function renderBottomLegend(context, layout) {
|
|
|
8989
9348
|
const barWidth = layout.gridWidth;
|
|
8990
9349
|
const labelHeight = layout.fontSize + 2;
|
|
8991
9350
|
const barY = plot.y + layout.gridHeight + CHART_GAP;
|
|
8992
|
-
const barBounds =
|
|
9351
|
+
const barBounds = chunkUHKFJBY5_cjs.boxBounds({ x: barX, y: barY, width: barWidth, height: BAR_THICKNESS2 });
|
|
8993
9352
|
const stops = bandStops(layout);
|
|
8994
9353
|
const bar = {
|
|
8995
9354
|
type: "rect",
|
|
@@ -9003,7 +9362,7 @@ function renderBottomLegend(context, layout) {
|
|
|
9003
9362
|
rx: 3,
|
|
9004
9363
|
zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
|
|
9005
9364
|
style: {
|
|
9006
|
-
fill: stops.length ? { kind: "linear-gradient", angle: 0, stops } : { kind: "solid", color:
|
|
9365
|
+
fill: stops.length ? { kind: "linear-gradient", angle: 0, stops } : { kind: "solid", color: chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL },
|
|
9007
9366
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
9008
9367
|
strokeWidth: 1
|
|
9009
9368
|
}
|
|
@@ -9026,12 +9385,12 @@ function renderBottomLegend(context, layout) {
|
|
|
9026
9385
|
const isLast = index === layout.bands.length - 1;
|
|
9027
9386
|
const align = isFirst ? "left" : isLast ? "right" : "center";
|
|
9028
9387
|
const frameX = isFirst ? x : isLast ? x - LABEL_SIZE : x - LABEL_SIZE / 2;
|
|
9029
|
-
const label =
|
|
9388
|
+
const label = chunkUHKFJBY5_cjs.chartText({
|
|
9030
9389
|
id: `chart-treemap-legend-tick-label-${chart.id}-${index}`,
|
|
9031
9390
|
order: nextOrder(),
|
|
9032
9391
|
bounds,
|
|
9033
9392
|
frame: { x: frameX, y: barY + BAR_THICKNESS2 + TICK_LENGTH3 + ROW_GAP2, width: LABEL_SIZE, height: labelHeight },
|
|
9034
|
-
text:
|
|
9393
|
+
text: chunkUHKFJBY5_cjs.formatFieldValue(value),
|
|
9035
9394
|
chart,
|
|
9036
9395
|
align
|
|
9037
9396
|
});
|
|
@@ -9045,7 +9404,7 @@ function renderSideLegend(context, layout) {
|
|
|
9045
9404
|
const barTop = plot.y;
|
|
9046
9405
|
const barHeight = layout.gridHeight;
|
|
9047
9406
|
const barX = side === "left" ? plot.x - CHART_GAP - BAR_THICKNESS2 : plot.x + layout.gridWidth + CHART_GAP;
|
|
9048
|
-
const barBounds =
|
|
9407
|
+
const barBounds = chunkUHKFJBY5_cjs.boxBounds({ x: barX, y: barTop, width: BAR_THICKNESS2, height: barHeight });
|
|
9049
9408
|
const stops = bandStops(layout);
|
|
9050
9409
|
const bar = {
|
|
9051
9410
|
type: "rect",
|
|
@@ -9059,7 +9418,7 @@ function renderSideLegend(context, layout) {
|
|
|
9059
9418
|
rx: 3,
|
|
9060
9419
|
zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
|
|
9061
9420
|
style: {
|
|
9062
|
-
fill: stops.length ? { kind: "linear-gradient", angle: 270, stops } : { kind: "solid", color:
|
|
9421
|
+
fill: stops.length ? { kind: "linear-gradient", angle: 270, stops } : { kind: "solid", color: chunkUHKFJBY5_cjs.DEFAULT_ZONE_FILL },
|
|
9063
9422
|
stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
|
|
9064
9423
|
strokeWidth: 1
|
|
9065
9424
|
}
|
|
@@ -9081,12 +9440,12 @@ function renderSideLegend(context, layout) {
|
|
|
9081
9440
|
strokeWidth: 1
|
|
9082
9441
|
}
|
|
9083
9442
|
};
|
|
9084
|
-
const label =
|
|
9443
|
+
const label = chunkUHKFJBY5_cjs.chartText({
|
|
9085
9444
|
id: `chart-treemap-legend-tick-label-${chart.id}-${index}`,
|
|
9086
9445
|
order: nextOrder(),
|
|
9087
9446
|
bounds,
|
|
9088
9447
|
frame: { x: labelX2, y: y - layout.fontSize / 2, width: LABEL_SIZE, height: layout.fontSize + 2 },
|
|
9089
|
-
text:
|
|
9448
|
+
text: chunkUHKFJBY5_cjs.formatFieldValue(value),
|
|
9090
9449
|
chart,
|
|
9091
9450
|
align: side === "left" ? "right" : "left"
|
|
9092
9451
|
});
|
|
@@ -9174,7 +9533,7 @@ function renderTreemapHeader(context, layout, header, index) {
|
|
|
9174
9533
|
};
|
|
9175
9534
|
const smallFontSize = Math.max(8, Math.max(9, chart.fontSize ?? 12) - 1);
|
|
9176
9535
|
const label = {
|
|
9177
|
-
...
|
|
9536
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
9178
9537
|
id: `chart-treemap-header-label-${chart.id}-${index}`,
|
|
9179
9538
|
order: nextOrder(),
|
|
9180
9539
|
bounds,
|
|
@@ -9189,7 +9548,7 @@ function renderTreemapHeader(context, layout, header, index) {
|
|
|
9189
9548
|
align: "center"
|
|
9190
9549
|
}),
|
|
9191
9550
|
fontSize: smallFontSize,
|
|
9192
|
-
color:
|
|
9551
|
+
color: chunkUHKFJBY5_cjs.contrastTextColor(fill2)
|
|
9193
9552
|
};
|
|
9194
9553
|
return [background, label];
|
|
9195
9554
|
}
|
|
@@ -9205,7 +9564,7 @@ function renderTile(context, layout, tile, nextTile) {
|
|
|
9205
9564
|
function createTileNode(context, layout, tile, color, nextColor) {
|
|
9206
9565
|
const { chart, plot, bounds, diagnostics, nextOrder } = context;
|
|
9207
9566
|
const gap = layout.cellGap;
|
|
9208
|
-
const shadow =
|
|
9567
|
+
const shadow = chunkUHKFJBY5_cjs.resolveChartShadow(chart.shadowStyle);
|
|
9209
9568
|
const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
|
|
9210
9569
|
const tileX = plot.x + tile.x + gap / 2;
|
|
9211
9570
|
const tileY = plot.y + tile.y + gap / 2;
|
|
@@ -9222,10 +9581,10 @@ function createTileNode(context, layout, tile, color, nextColor) {
|
|
|
9222
9581
|
kind: "linear-gradient",
|
|
9223
9582
|
angle: 0,
|
|
9224
9583
|
stops: [
|
|
9225
|
-
{ offset: 0, color:
|
|
9226
|
-
{ offset: 100, color:
|
|
9584
|
+
{ offset: 0, color: chunkUHKFJBY5_cjs.representativeColor(color, fallback) },
|
|
9585
|
+
{ offset: 100, color: chunkUHKFJBY5_cjs.representativeColor(nextColor, fallback) }
|
|
9227
9586
|
]
|
|
9228
|
-
} :
|
|
9587
|
+
} : chunkUHKFJBY5_cjs.paint(color, diagnostics, chart.id);
|
|
9229
9588
|
return {
|
|
9230
9589
|
type: "rect",
|
|
9231
9590
|
id: `chart-treemap-tile-${chart.id}-${tile.item.leaf.id}`,
|
|
@@ -9239,7 +9598,7 @@ function createTileNode(context, layout, tile, color, nextColor) {
|
|
|
9239
9598
|
style: {
|
|
9240
9599
|
fill: fill2,
|
|
9241
9600
|
stroke: { kind: "solid", color: chart.config?.tileStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
|
|
9242
|
-
strokeWidth:
|
|
9601
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.config?.tileStrokeWidth, chunkUHKFJBY5_cjs.finite(chart.gridWidth, 1)),
|
|
9243
9602
|
shadow,
|
|
9244
9603
|
clip: clipPath ? { type: "path", d: clipPath } : void 0
|
|
9245
9604
|
}
|
|
@@ -9254,12 +9613,12 @@ function createTileLabel(context, layout, tile, color) {
|
|
|
9254
9613
|
const height = Math.max(1, tile.height - gap - pad * 1.5);
|
|
9255
9614
|
const x = plot.x + tile.x + gap / 2 + pad;
|
|
9256
9615
|
const y = plot.y + tile.y + gap / 2 + pad * 0.75;
|
|
9257
|
-
const textColor = chart.config?.tileTextColor ??
|
|
9616
|
+
const textColor = chart.config?.tileTextColor ?? chunkUHKFJBY5_cjs.contrastTextColor(chunkUHKFJBY5_cjs.representativeColor(color, "#ffffff"));
|
|
9258
9617
|
const lineHeight = layout.labelSize * 1.2;
|
|
9259
9618
|
const maxLines = Math.max(1, Math.floor(height / lineHeight));
|
|
9260
|
-
const labelLines =
|
|
9619
|
+
const labelLines = chunkUHKFJBY5_cjs.wrapText(leaf.label, width, layout.labelSize).slice(0, maxLines).map((line) => chunkUHKFJBY5_cjs.ellipsizeToWidth(line, width, layout.labelSize, true));
|
|
9261
9620
|
const label = {
|
|
9262
|
-
...
|
|
9621
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
9263
9622
|
id: `chart-treemap-label-${chart.id}-${leaf.id}`,
|
|
9264
9623
|
order: nextOrder(),
|
|
9265
9624
|
bounds,
|
|
@@ -9273,12 +9632,12 @@ function createTileLabel(context, layout, tile, color) {
|
|
|
9273
9632
|
color: textColor
|
|
9274
9633
|
};
|
|
9275
9634
|
const valueText = String(value);
|
|
9276
|
-
const valueFits = labelLines.length * lineHeight + layout.valueSize * 1.2 <= height + 2 &&
|
|
9635
|
+
const valueFits = labelLines.length * lineHeight + layout.valueSize * 1.2 <= height + 2 && chunkUHKFJBY5_cjs.estimateTextWidth(valueText, layout.valueSize, false) <= width;
|
|
9277
9636
|
if (chart.config?.showTileValues === false || !valueFits) {
|
|
9278
9637
|
return [label];
|
|
9279
9638
|
}
|
|
9280
9639
|
const valueNode = {
|
|
9281
|
-
...
|
|
9640
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
9282
9641
|
id: `chart-treemap-value-${chart.id}-${leaf.id}`,
|
|
9283
9642
|
order: nextOrder(),
|
|
9284
9643
|
bounds,
|
|
@@ -9355,7 +9714,7 @@ function buildCartesianChart(foundation) {
|
|
|
9355
9714
|
|
|
9356
9715
|
// src/renderScene/charts/chartFrame.ts
|
|
9357
9716
|
function scaleDetail(chart, plot) {
|
|
9358
|
-
const horizontal =
|
|
9717
|
+
const horizontal = chunkUHKFJBY5_cjs.isHorizontalBar(chart);
|
|
9359
9718
|
const range = horizontal ? `${plot.x},${plot.width}` : `${plot.y},${plot.height}`;
|
|
9360
9719
|
return {
|
|
9361
9720
|
of: "chartScale",
|
|
@@ -9363,7 +9722,7 @@ function scaleDetail(chart, plot) {
|
|
|
9363
9722
|
};
|
|
9364
9723
|
}
|
|
9365
9724
|
function pieDetail(chart, plot) {
|
|
9366
|
-
const { outerRadius, innerRadius, cornerRadius } =
|
|
9725
|
+
const { outerRadius, innerRadius, cornerRadius } = chunkUHKFJBY5_cjs.resolvePieRadii(
|
|
9367
9726
|
plot.width,
|
|
9368
9727
|
plot.height,
|
|
9369
9728
|
chart.config?.innerRadius,
|
|
@@ -9376,8 +9735,8 @@ function pieDetail(chart, plot) {
|
|
|
9376
9735
|
}
|
|
9377
9736
|
function polarAreaDetail(chart, plot) {
|
|
9378
9737
|
const maxRadius = Math.max(1, Math.min(plot.width, plot.height) / 2 - 4);
|
|
9379
|
-
const innerRadius = Math.max(0, Math.min(
|
|
9380
|
-
const cornerRadius = Math.max(0,
|
|
9738
|
+
const innerRadius = Math.max(0, Math.min(chunkUHKFJBY5_cjs.finite(chart.config?.innerRadius, 0), maxRadius - 1));
|
|
9739
|
+
const cornerRadius = Math.max(0, chunkUHKFJBY5_cjs.finite(chart.config?.pieCornerRadius, 0));
|
|
9381
9740
|
return {
|
|
9382
9741
|
of: "pieGeometry",
|
|
9383
9742
|
pieGeometry: `${plot.x + plot.width / 2},${plot.y + plot.height / 2},${maxRadius},${innerRadius},${cornerRadius}`
|
|
@@ -9386,8 +9745,8 @@ function polarAreaDetail(chart, plot) {
|
|
|
9386
9745
|
function radarDetail(chart, plot) {
|
|
9387
9746
|
const configuredCount = (chart.config?.categories?.filter(Boolean) ?? []).length;
|
|
9388
9747
|
const dataCount = Math.max(0, ...chart.series.map((series) => series.values.length));
|
|
9389
|
-
const count =
|
|
9390
|
-
const radius =
|
|
9748
|
+
const count = chunkUHKFJBY5_cjs.radarCategoryCount(configuredCount, dataCount);
|
|
9749
|
+
const radius = chunkUHKFJBY5_cjs.radarRadius(plot.width, plot.height, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12), chart.showAxisLabels !== false);
|
|
9391
9750
|
const centerX = plot.x + plot.width / 2;
|
|
9392
9751
|
const centerY = plot.y + plot.height / 2;
|
|
9393
9752
|
const curved = chart.chartType === "radial" ? 1 : 0;
|
|
@@ -9421,9 +9780,9 @@ function buildChartFrame(chart, bounds, plot, order) {
|
|
|
9421
9780
|
height: chart.height,
|
|
9422
9781
|
rx: chart.cornerRadius ?? 12,
|
|
9423
9782
|
style: {
|
|
9424
|
-
fill:
|
|
9783
|
+
fill: chunkUHKFJBY5_cjs.paint(chart.fillColor ?? "#ffffff", [], chart.id),
|
|
9425
9784
|
stroke: { kind: "solid", color: chart.strokeColor ?? "#475569" },
|
|
9426
|
-
strokeWidth:
|
|
9785
|
+
strokeWidth: chunkUHKFJBY5_cjs.finite(chart.strokeWidth, 1)
|
|
9427
9786
|
}
|
|
9428
9787
|
};
|
|
9429
9788
|
const detail = frameDetail(chart, plot);
|
|
@@ -9483,7 +9842,7 @@ function buildChartTitle(chart, bounds, plot, renderOrder) {
|
|
|
9483
9842
|
}
|
|
9484
9843
|
return [
|
|
9485
9844
|
{
|
|
9486
|
-
...
|
|
9845
|
+
...chunkUHKFJBY5_cjs.chartText({
|
|
9487
9846
|
id: `chart-title-${chart.id}`,
|
|
9488
9847
|
order: renderOrder.next(),
|
|
9489
9848
|
bounds,
|
|
@@ -9494,8 +9853,8 @@ function buildChartTitle(chart, bounds, plot, renderOrder) {
|
|
|
9494
9853
|
}),
|
|
9495
9854
|
...chart.titleColor ? { color: chart.titleColor } : {},
|
|
9496
9855
|
fontWeight: chart.titleWeight ?? "bold",
|
|
9497
|
-
fontSize:
|
|
9498
|
-
prop:
|
|
9856
|
+
fontSize: chunkUHKFJBY5_cjs.finite(chart.titleSize, Math.max(10, chunkUHKFJBY5_cjs.finite(chart.fontSize, 12)) + 2),
|
|
9857
|
+
prop: chunkUHKFJBY5_cjs.CHART_TITLE_PROP
|
|
9499
9858
|
}
|
|
9500
9859
|
];
|
|
9501
9860
|
}
|
|
@@ -9548,7 +9907,7 @@ function buildChart(chart, index, diagnostics) {
|
|
|
9548
9907
|
// src/renderScene/charts/artifacts.ts
|
|
9549
9908
|
function buildCharts(charts, diagnostics) {
|
|
9550
9909
|
return charts.flatMap(
|
|
9551
|
-
(chart, index) =>
|
|
9910
|
+
(chart, index) => chunkUHKFJBY5_cjs.tag(buildChart(chart, index, diagnostics), "chart", chart.id, chart.chartType, chart.title ?? "Chart")
|
|
9552
9911
|
);
|
|
9553
9912
|
}
|
|
9554
9913
|
|
|
@@ -9649,7 +10008,7 @@ function visibleBounds(node) {
|
|
|
9649
10008
|
}
|
|
9650
10009
|
function sceneBounds(nodes) {
|
|
9651
10010
|
if (!nodes.length) {
|
|
9652
|
-
return
|
|
10011
|
+
return chunkUHKFJBY5_cjs.EMPTY_BOUNDS;
|
|
9653
10012
|
}
|
|
9654
10013
|
const all = nodes.map(visibleBounds);
|
|
9655
10014
|
return {
|
|
@@ -9664,8 +10023,8 @@ function stackingOf(input) {
|
|
|
9664
10023
|
const add = (role, objects, legacyBase) => {
|
|
9665
10024
|
objects.forEach((object, index) => {
|
|
9666
10025
|
stacking.set(`${role}:${object.id}`, {
|
|
9667
|
-
rank:
|
|
9668
|
-
sequence:
|
|
10026
|
+
rank: chunkUHKFJBY5_cjs.stackRank(object),
|
|
10027
|
+
sequence: chunkUHKFJBY5_cjs.stackSequence(object, legacyBase + index)
|
|
9669
10028
|
});
|
|
9670
10029
|
});
|
|
9671
10030
|
};
|
|
@@ -9715,7 +10074,7 @@ function buildRenderScene(input, options = {}) {
|
|
|
9715
10074
|
|
|
9716
10075
|
// src/svg/format.ts
|
|
9717
10076
|
var xml = (value) => String(value).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
9718
|
-
var
|
|
10077
|
+
var num2 = (value) => Number(value.toFixed(3)).toString();
|
|
9719
10078
|
var safeId = (value) => `sf-${value.replace(/[^A-Za-z0-9_.:-]/g, "-")}`;
|
|
9720
10079
|
|
|
9721
10080
|
// src/svg/clipDefinitions.ts
|
|
@@ -9737,7 +10096,7 @@ var SvgClipDefinitions = class {
|
|
|
9737
10096
|
const outer = clip.within ? this.define(clip.within) : void 0;
|
|
9738
10097
|
id = safeId(`${this.prefix}clip-${this.ids.size}`);
|
|
9739
10098
|
this.ids.set(key, id);
|
|
9740
|
-
const shape = clip.type === "path" ? `<path clip-rule="evenodd" d="${xml(clip.d)}"/>` : `<rect x="${
|
|
10099
|
+
const shape = clip.type === "path" ? `<path clip-rule="evenodd" d="${xml(clip.d)}"/>` : `<rect x="${num2(clip.x)}" y="${num2(clip.y)}" width="${num2(clip.width)}" height="${num2(clip.height)}" rx="${num2(clip.rx)}"/>`;
|
|
9741
10100
|
this.addDefinition(`<clipPath id="${id}"${outer ? ` clip-path="url(#${outer})"` : ""}>${shape}</clipPath>`);
|
|
9742
10101
|
}
|
|
9743
10102
|
return id;
|
|
@@ -9779,18 +10138,18 @@ var SvgFilterDefinitions = class {
|
|
|
9779
10138
|
id = safeId(`${this.prefix}shadow-${nodeId}-${this.ids.size}`);
|
|
9780
10139
|
this.ids.set(key, id);
|
|
9781
10140
|
this.addDefinition(
|
|
9782
|
-
`<filter id="${id}" x="${
|
|
10141
|
+
`<filter id="${id}" x="${num2(-margin * 100)}%" y="${num2(-margin * 100)}%" width="${num2((1 + margin * 2) * 100)}%" height="${num2((1 + margin * 2) * 100)}%">${primitives(value)}</filter>`
|
|
9783
10142
|
);
|
|
9784
10143
|
}
|
|
9785
10144
|
return id;
|
|
9786
10145
|
}
|
|
9787
10146
|
};
|
|
9788
10147
|
function outerShadowPrimitives(shadow) {
|
|
9789
|
-
return `<feDropShadow dx="${
|
|
10148
|
+
return `<feDropShadow dx="${num2(shadow.dx)}" dy="${num2(shadow.dy)}" stdDeviation="${num2(shadow.blur / 2)}" flood-color="${xml(shadow.color)}" flood-opacity="${num2(shadow.opacity)}"/>`;
|
|
9790
10149
|
}
|
|
9791
10150
|
function blurPrimitives(effect) {
|
|
9792
|
-
const blur = effect.blur > 0 ? `<feGaussianBlur stdDeviation="${
|
|
9793
|
-
const saturate = effect.saturate === 1 ? "" : `<feColorMatrix type="saturate" values="${
|
|
10151
|
+
const blur = effect.blur > 0 ? `<feGaussianBlur stdDeviation="${num2(effect.blur / 2)}"/>` : "";
|
|
10152
|
+
const saturate = effect.saturate === 1 ? "" : `<feColorMatrix type="saturate" values="${num2(effect.saturate)}"/>`;
|
|
9794
10153
|
return blur + saturate;
|
|
9795
10154
|
}
|
|
9796
10155
|
function innerShadowPrimitives(shadow) {
|
|
@@ -9798,9 +10157,9 @@ function innerShadowPrimitives(shadow) {
|
|
|
9798
10157
|
'<feComponentTransfer in="SourceAlpha" result="sf-inverted-alpha">',
|
|
9799
10158
|
'<feFuncA type="table" tableValues="1 0"/>',
|
|
9800
10159
|
"</feComponentTransfer>",
|
|
9801
|
-
`<feGaussianBlur in="sf-inverted-alpha" stdDeviation="${
|
|
9802
|
-
`<feOffset in="sf-blurred" dx="${
|
|
9803
|
-
`<feFlood flood-color="${xml(shadow.color)}" flood-opacity="${
|
|
10160
|
+
`<feGaussianBlur in="sf-inverted-alpha" stdDeviation="${num2(shadow.blur / 2)}" result="sf-blurred"/>`,
|
|
10161
|
+
`<feOffset in="sf-blurred" dx="${num2(shadow.dx)}" dy="${num2(shadow.dy)}" result="sf-offset"/>`,
|
|
10162
|
+
`<feFlood flood-color="${xml(shadow.color)}" flood-opacity="${num2(shadow.opacity)}" result="sf-color"/>`,
|
|
9804
10163
|
'<feComposite in="sf-color" in2="sf-offset" operator="in" result="sf-halo"/>',
|
|
9805
10164
|
'<feComposite in="sf-halo" in2="SourceGraphic" operator="in" result="sf-inset"/>',
|
|
9806
10165
|
'<feComposite in="sf-inset" in2="SourceGraphic" operator="over"/>'
|
|
@@ -9810,19 +10169,19 @@ function innerShadowPrimitives(shadow) {
|
|
|
9810
10169
|
// src/svg/markerBodies.ts
|
|
9811
10170
|
function markerBody(type, size, color, strokeWidth) {
|
|
9812
10171
|
const bodies = {
|
|
9813
|
-
arrow: `<path d="M ${
|
|
9814
|
-
filled_arrow: `<path d="M ${
|
|
9815
|
-
circle: `<circle cx="0" cy="0" r="${
|
|
9816
|
-
filled_circle: `<circle cx="0" cy="0" r="${
|
|
9817
|
-
diamond: `<path d="M ${
|
|
9818
|
-
filled_diamond: `<path d="M ${
|
|
9819
|
-
bar: `<path d="M 0 ${
|
|
9820
|
-
triangle: `<path d="M ${
|
|
9821
|
-
one: `<path d="M 0 ${
|
|
9822
|
-
zero_one: `<circle cx="${
|
|
9823
|
-
many: `<path d="M ${
|
|
9824
|
-
one_many: `<path d="M ${
|
|
9825
|
-
zero_many: `<circle cx="${
|
|
10172
|
+
arrow: `<path d="M ${num2(-size)} ${num2(-size * 0.6)} L 0 0 L ${num2(-size)} ${num2(size * 0.6)}" fill="none" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round" stroke-linejoin="round"/>`,
|
|
10173
|
+
filled_arrow: `<path d="M ${num2(-size)} ${num2(-size * 0.6)} L 0 0 L ${num2(-size)} ${num2(size * 0.6)} Z" fill="${color}" stroke="${color}" stroke-width="${num2(strokeWidth * 0.5)}" stroke-linejoin="round"/>`,
|
|
10174
|
+
circle: `<circle cx="0" cy="0" r="${num2(size * 0.5)}" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}"/>`,
|
|
10175
|
+
filled_circle: `<circle cx="0" cy="0" r="${num2(size * 0.5)}" fill="${color}"/>`,
|
|
10176
|
+
diamond: `<path d="M ${num2(-size * 0.6)} 0 L 0 ${num2(-size * 0.6)} L ${num2(size * 0.6)} 0 L 0 ${num2(size * 0.6)} Z" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}"/>`,
|
|
10177
|
+
filled_diamond: `<path d="M ${num2(-size * 0.6)} 0 L 0 ${num2(-size * 0.6)} L ${num2(size * 0.6)} 0 L 0 ${num2(size * 0.6)} Z" fill="${color}" stroke="${color}" stroke-width="${num2(strokeWidth * 0.5)}"/>`,
|
|
10178
|
+
bar: `<path d="M 0 ${num2(-size * 0.6)} V ${num2(size * 0.6)}" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round"/>`,
|
|
10179
|
+
triangle: `<path d="M ${num2(-size)} ${num2(-size * 0.72)} L 0 0 L ${num2(-size)} ${num2(size * 0.72)} Z" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linejoin="round"/>`,
|
|
10180
|
+
one: `<path d="M 0 ${num2(-size * 0.62)} V ${num2(size * 0.62)} M ${num2(-size * 0.72)} ${num2(-size * 0.62)} V ${num2(size * 0.62)}" stroke="${color}" stroke-width="${num2(strokeWidth)}"/>`,
|
|
10181
|
+
zero_one: `<circle cx="${num2(-size * 0.8)}" cy="0" r="${num2(size * 0.38)}" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}"/><path d="M 0 ${num2(-size * 0.62)} V ${num2(size * 0.62)}" stroke="${color}" stroke-width="${num2(strokeWidth)}"/>`,
|
|
10182
|
+
many: `<path d="M ${num2(-size)} ${num2(-size * 0.72)} L 0 0 M ${num2(-size)} 0 L 0 0 M ${num2(-size)} ${num2(size * 0.72)} L 0 0" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round"/>`,
|
|
10183
|
+
one_many: `<path d="M ${num2(-size)} ${num2(-size * 0.72)} L 0 0 M ${num2(-size)} 0 L 0 0 M ${num2(-size)} ${num2(size * 0.72)} L 0 0 M ${num2(-size * 1.45)} ${num2(-size * 0.62)} V ${num2(size * 0.62)}" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round"/>`,
|
|
10184
|
+
zero_many: `<circle cx="${num2(-size * 1.45)}" cy="0" r="${num2(size * 0.38)}" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}"/><path d="M ${num2(-size)} ${num2(-size * 0.72)} L 0 0 M ${num2(-size)} 0 L 0 0 M ${num2(-size)} ${num2(size * 0.72)} L 0 0" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round"/>`
|
|
9826
10185
|
};
|
|
9827
10186
|
return bodies[type];
|
|
9828
10187
|
}
|
|
@@ -9833,7 +10192,7 @@ function markerExtent(type, size, strokeWidth) {
|
|
|
9833
10192
|
return Math.max(size * (isCompoundErMarker ? 2 : 1.4), strokeWidth * 2);
|
|
9834
10193
|
}
|
|
9835
10194
|
function markerAttributes(id, extent) {
|
|
9836
|
-
return `id="${id}" markerWidth="${
|
|
10195
|
+
return `id="${id}" markerWidth="${num2(extent * 2)}" markerHeight="${num2(extent * 2)}" viewBox="${num2(-extent)} ${num2(-extent)} ${num2(extent * 2)} ${num2(extent * 2)}" refX="0" refY="0" orient="auto-start-reverse" markerUnits="userSpaceOnUse" overflow="visible"`;
|
|
9837
10196
|
}
|
|
9838
10197
|
var SvgMarkerDefinitions = class {
|
|
9839
10198
|
constructor(addDefinition, prefix) {
|
|
@@ -9868,7 +10227,7 @@ function meshGradientDefinition(id, paint2) {
|
|
|
9868
10227
|
const radialDefinitions = paint2.points.map((point, index) => {
|
|
9869
10228
|
const centerX = Math.max(0, Math.min(100, point.x));
|
|
9870
10229
|
const centerY = Math.max(0, Math.min(100, point.y));
|
|
9871
|
-
return `<radialGradient id="${radialIds[index]}" gradientUnits="objectBoundingBox" cx="${
|
|
10230
|
+
return `<radialGradient id="${radialIds[index]}" gradientUnits="objectBoundingBox" cx="${num2(centerX)}%" cy="${num2(centerY)}%" r="75%"><stop offset="0%" stop-color="${xml(point.color)}" stop-opacity="1"/><stop offset="100%" stop-color="${xml(point.color)}" stop-opacity="0"/></radialGradient>`;
|
|
9872
10231
|
}).join("");
|
|
9873
10232
|
const layers = paint2.points.map((_point, index) => `<rect width="1" height="1" fill="url(#${radialIds[index]})"/>`).join("");
|
|
9874
10233
|
return `${radialDefinitions}<pattern id="${id}" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width="1" height="1"><rect width="1" height="1" fill="${xml(paint2.points[0]?.color ?? "transparent")}"/>${layers}</pattern>`;
|
|
@@ -9880,8 +10239,8 @@ function linearGradientDefinition(id, paint2, bounds) {
|
|
|
9880
10239
|
const radius = Math.max(bounds.maxX - bounds.minX, bounds.maxY - bounds.minY) / 2;
|
|
9881
10240
|
const deltaX = Math.cos(angle) * radius;
|
|
9882
10241
|
const deltaY = Math.sin(angle) * radius;
|
|
9883
|
-
const stops = paint2.stops.map((stop) => `<stop offset="${
|
|
9884
|
-
return `<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${
|
|
10242
|
+
const stops = paint2.stops.map((stop) => `<stop offset="${num2(Math.max(0, Math.min(100, stop.offset)))}%" stop-color="${xml(stop.color)}"/>`).join("");
|
|
10243
|
+
return `<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${num2(centerX - deltaX)}" y1="${num2(centerY - deltaY)}" x2="${num2(centerX + deltaX)}" y2="${num2(centerY + deltaY)}">${stops}</linearGradient>`;
|
|
9885
10244
|
}
|
|
9886
10245
|
var SvgPaintDefinitions = class {
|
|
9887
10246
|
constructor(addDefinition, prefix) {
|
|
@@ -9998,10 +10357,10 @@ function styleAttrs(node, defs) {
|
|
|
9998
10357
|
}
|
|
9999
10358
|
function addStrokeAttrs(attrs, style) {
|
|
10000
10359
|
if (style.strokeWidth !== void 0) {
|
|
10001
|
-
attrs.push(`stroke-width="${
|
|
10360
|
+
attrs.push(`stroke-width="${num2(style.strokeWidth)}"`);
|
|
10002
10361
|
}
|
|
10003
10362
|
if (style.dash?.length) {
|
|
10004
|
-
attrs.push(`stroke-dasharray="${style.dash.map(
|
|
10363
|
+
attrs.push(`stroke-dasharray="${style.dash.map(num2).join(" ")}"`);
|
|
10005
10364
|
}
|
|
10006
10365
|
if (style.lineCap) {
|
|
10007
10366
|
attrs.push(`stroke-linecap="${style.lineCap}"`);
|
|
@@ -10010,14 +10369,14 @@ function addStrokeAttrs(attrs, style) {
|
|
|
10010
10369
|
attrs.push(`stroke-linejoin="${style.lineJoin}"`);
|
|
10011
10370
|
}
|
|
10012
10371
|
if (style.opacity !== void 0) {
|
|
10013
|
-
attrs.push(`opacity="${
|
|
10372
|
+
attrs.push(`opacity="${num2(style.opacity)}"`);
|
|
10014
10373
|
}
|
|
10015
10374
|
if (style.pointerEvents) {
|
|
10016
10375
|
attrs.push(`pointer-events="${style.pointerEvents}"`);
|
|
10017
10376
|
}
|
|
10018
10377
|
const css = [];
|
|
10019
10378
|
if (style.transition && style.transition > 0) {
|
|
10020
|
-
const time = `${
|
|
10379
|
+
const time = `${num2(style.transition)}ms ease`;
|
|
10021
10380
|
css.push(
|
|
10022
10381
|
`transition: x ${time}, y ${time}, width ${time}, height ${time}, cx ${time}, cy ${time}, rx ${time}, ry ${time}, fill ${time}, stroke ${time}, stroke-width ${time}, stroke-dasharray ${time}, opacity ${time}`
|
|
10023
10382
|
);
|
|
@@ -10037,6 +10396,10 @@ function elementSize(node) {
|
|
|
10037
10396
|
if (shape.type === "rect" && shape.width !== void 0 && shape.height !== void 0) {
|
|
10038
10397
|
return Math.min(shape.width, shape.height);
|
|
10039
10398
|
}
|
|
10399
|
+
if (shape.type === "path" && shape.bounds) {
|
|
10400
|
+
const side = Math.min(shape.bounds.maxX - shape.bounds.minX, shape.bounds.maxY - shape.bounds.minY);
|
|
10401
|
+
return side > 0 ? side : void 0;
|
|
10402
|
+
}
|
|
10040
10403
|
return void 0;
|
|
10041
10404
|
}
|
|
10042
10405
|
function addVisualEffectAttrs(attrs, node, defs) {
|
|
@@ -10063,12 +10426,12 @@ function addPathMarkerAttrs(attrs, node, defs) {
|
|
|
10063
10426
|
}
|
|
10064
10427
|
}
|
|
10065
10428
|
function transform(rotation, center) {
|
|
10066
|
-
return rotation && center ? ` transform="rotate(${
|
|
10429
|
+
return rotation && center ? ` transform="rotate(${num2(rotation)} ${num2(center.x)} ${num2(center.y)})"` : "";
|
|
10067
10430
|
}
|
|
10068
10431
|
function imageAttrs(node, defs) {
|
|
10069
10432
|
const attrs = [];
|
|
10070
10433
|
if (node.style.opacity !== void 0) {
|
|
10071
|
-
attrs.push(`opacity="${
|
|
10434
|
+
attrs.push(`opacity="${num2(node.style.opacity)}"`);
|
|
10072
10435
|
}
|
|
10073
10436
|
if (node.style.pointerEvents) {
|
|
10074
10437
|
attrs.push(`pointer-events="${node.style.pointerEvents}"`);
|
|
@@ -10130,12 +10493,12 @@ function chartValueAttrs(detail) {
|
|
|
10130
10493
|
`data-sf-series="${xml(detail.series)}"`,
|
|
10131
10494
|
`data-sf-value-index="${detail.valueIndex}"`,
|
|
10132
10495
|
detail.mark ? `data-sf-mark="${detail.mark}"` : void 0,
|
|
10133
|
-
detail.radius !== void 0 ? `data-sf-bar-radius="${
|
|
10496
|
+
detail.radius !== void 0 ? `data-sf-bar-radius="${num2(detail.radius)}"` : void 0,
|
|
10134
10497
|
detail.colorProp ? `data-sf-color-prop="${xml(detail.colorProp)}"` : void 0,
|
|
10135
10498
|
detail.hasColorOverride ? 'data-sf-color-override="true"' : void 0,
|
|
10136
|
-
detail.pieStart !== void 0 ? `data-sf-pie-start="${
|
|
10137
|
-
detail.pieEnd !== void 0 ? `data-sf-pie-end="${
|
|
10138
|
-
detail.pieValue !== void 0 ? `data-sf-pie-value="${
|
|
10499
|
+
detail.pieStart !== void 0 ? `data-sf-pie-start="${num2(detail.pieStart)}"` : void 0,
|
|
10500
|
+
detail.pieEnd !== void 0 ? `data-sf-pie-end="${num2(detail.pieEnd)}"` : void 0,
|
|
10501
|
+
detail.pieValue !== void 0 ? `data-sf-pie-value="${num2(detail.pieValue)}"` : void 0
|
|
10139
10502
|
];
|
|
10140
10503
|
}
|
|
10141
10504
|
function pieGeometryAttrs(detail) {
|
|
@@ -10150,39 +10513,39 @@ function chartScaleAttrs(detail) {
|
|
|
10150
10513
|
function chartSeriesAttrs(detail) {
|
|
10151
10514
|
return [
|
|
10152
10515
|
`data-sf-series="${xml(detail.series)}"`,
|
|
10153
|
-
detail.lineTension !== void 0 ? `data-sf-line-tension="${
|
|
10516
|
+
detail.lineTension !== void 0 ? `data-sf-line-tension="${num2(detail.lineTension)}"` : void 0,
|
|
10154
10517
|
detail.mark ? `data-sf-mark="${xml(detail.mark)}"` : void 0,
|
|
10155
10518
|
detail.pulled ? 'data-sf-label-pulled="true"' : void 0,
|
|
10156
|
-
detail.midAngle !== void 0 ? `data-sf-pie-mid-angle="${
|
|
10157
|
-
detail.wedgeRadius !== void 0 ? `data-sf-pie-wedge-radius="${
|
|
10519
|
+
detail.midAngle !== void 0 ? `data-sf-pie-mid-angle="${num2(detail.midAngle)}"` : void 0,
|
|
10520
|
+
detail.wedgeRadius !== void 0 ? `data-sf-pie-wedge-radius="${num2(detail.wedgeRadius)}"` : void 0
|
|
10158
10521
|
];
|
|
10159
10522
|
}
|
|
10160
10523
|
function frameBoundaryAttrs(detail) {
|
|
10161
|
-
return [`${
|
|
10524
|
+
return [`${chunkUHKFJBY5_cjs.CORNER_RADIUS_ATTR}="${num2(detail.cornerRadius)}"`, `${chunkUHKFJBY5_cjs.SQUARE_CORNER_ATTR}="${detail.squareCorner}"`];
|
|
10162
10525
|
}
|
|
10163
10526
|
function declaredBoundsAttr(bounds) {
|
|
10164
|
-
return `${
|
|
10527
|
+
return `${chunkUHKFJBY5_cjs.SYMBOL_BOUNDS_ATTR}="${num2(bounds.x)},${num2(bounds.y)},${num2(bounds.width)},${num2(bounds.height)}"`;
|
|
10165
10528
|
}
|
|
10166
10529
|
function symbolGeometryAttrs(detail) {
|
|
10167
10530
|
return [
|
|
10168
|
-
`${
|
|
10169
|
-
`${
|
|
10531
|
+
`${chunkUHKFJBY5_cjs.SYMBOL_POINTS_ATTR}="${xml(JSON.stringify(detail.points))}"`,
|
|
10532
|
+
`${chunkUHKFJBY5_cjs.SYMBOL_TENSION_ATTR}="${num2(detail.tension)}"`,
|
|
10170
10533
|
declaredBoundsAttr(detail.declaredBounds)
|
|
10171
10534
|
];
|
|
10172
10535
|
}
|
|
10173
10536
|
function pathGeometryAttrs(detail) {
|
|
10174
10537
|
return [
|
|
10175
|
-
`${
|
|
10176
|
-
`${
|
|
10177
|
-
`${
|
|
10538
|
+
`${chunkUHKFJBY5_cjs.PATH_POINTS_ATTR}="${xml(JSON.stringify(detail.points))}"`,
|
|
10539
|
+
`${chunkUHKFJBY5_cjs.PATH_TENSION_ATTR}="${num2(detail.tension)}"`,
|
|
10540
|
+
`${chunkUHKFJBY5_cjs.PATH_CLOSED_ATTR}="${detail.closed}"`
|
|
10178
10541
|
];
|
|
10179
10542
|
}
|
|
10180
10543
|
function isometricGeometryAttrs(detail) {
|
|
10181
10544
|
return [
|
|
10182
|
-
`${
|
|
10183
|
-
`${
|
|
10545
|
+
`${chunkUHKFJBY5_cjs.ISOMETRIC_SIZE_ATTR}="${num2(detail.width)},${num2(detail.height)},${num2(detail.depth)}"`,
|
|
10546
|
+
`${chunkUHKFJBY5_cjs.CORNER_RADIUS_ATTR}="${num2(detail.cornerRadius)}"`,
|
|
10184
10547
|
declaredBoundsAttr(detail.bounds),
|
|
10185
|
-
`${
|
|
10548
|
+
`${chunkUHKFJBY5_cjs.ISOMETRIC_LABEL_OFFSET_ATTR}="${num2(detail.labelOffsetX)},${num2(detail.labelOffsetY)}"`
|
|
10186
10549
|
];
|
|
10187
10550
|
}
|
|
10188
10551
|
function linkDetailAttrs(detail) {
|
|
@@ -10208,8 +10571,8 @@ function contractAttrs(node) {
|
|
|
10208
10571
|
node.propSolidOnly ? 'data-sf-prop-solid-only="true"' : void 0,
|
|
10209
10572
|
node.mark ? `data-sf-mark="${xml(node.mark)}"` : void 0,
|
|
10210
10573
|
node.zoneGradient ? 'data-sf-zone-gradient="true"' : void 0,
|
|
10211
|
-
node.zoneGradient ? `data-sf-zone-axis-min="${
|
|
10212
|
-
node.zoneGradient ? `data-sf-zone-axis-max="${
|
|
10574
|
+
node.zoneGradient ? `data-sf-zone-axis-min="${num2(node.zoneGradient.min)}"` : void 0,
|
|
10575
|
+
node.zoneGradient ? `data-sf-zone-axis-max="${num2(node.zoneGradient.max)}"` : void 0,
|
|
10213
10576
|
label ? `tabindex="0" aria-label="${xml(label.replace(/\s+/g, " ").trim())}"` : void 0
|
|
10214
10577
|
].filter((attribute) => attribute !== void 0);
|
|
10215
10578
|
return attributes.length ? ` ${attributes.join(" ")}` : "";
|
|
@@ -10218,7 +10581,7 @@ function contractAttrs(node) {
|
|
|
10218
10581
|
// src/svg/text.ts
|
|
10219
10582
|
function richLineTspans(words, x, dy, fontSize) {
|
|
10220
10583
|
if (!words.length) {
|
|
10221
|
-
return `<tspan x="${
|
|
10584
|
+
return `<tspan x="${num2(x)}"${dy} font-size="${fontSize}"></tspan>`;
|
|
10222
10585
|
}
|
|
10223
10586
|
const groups = [];
|
|
10224
10587
|
for (const word of words) {
|
|
@@ -10233,15 +10596,15 @@ function richLineTspans(words, x, dy, fontSize) {
|
|
|
10233
10596
|
}
|
|
10234
10597
|
}
|
|
10235
10598
|
return groups.map(
|
|
10236
|
-
(group, i) => `<tspan${i === 0 ? ` x="${
|
|
10599
|
+
(group, i) => `<tspan${i === 0 ? ` x="${num2(x)}"${dy}` : ""} font-size="${fontSize}" font-weight="${group.bold ? "bold" : "normal"}">${xml(group.text)}</tspan>`
|
|
10237
10600
|
).join("");
|
|
10238
10601
|
}
|
|
10239
10602
|
function textSvg(node, defs) {
|
|
10240
10603
|
const position = textPosition(node);
|
|
10241
|
-
const fontSize = `${
|
|
10604
|
+
const fontSize = `${num2(node.fontSize)}px`;
|
|
10242
10605
|
const content = textContent(node, position, fontSize);
|
|
10243
10606
|
const preserve = node.richLines ? ' xml:space="preserve"' : "";
|
|
10244
|
-
return `<text id="${defs.elementId(node.id)}"${contractAttrs(node)} x="${
|
|
10607
|
+
return `<text id="${defs.elementId(node.id)}"${contractAttrs(node)} x="${num2(position.x)}" y="${num2(position.firstY)}" font-family="${xml(node.fontFamily)}" font-size="${fontSize}" font-weight="${node.fontWeight}"${node.letterSpacing ? ` letter-spacing="${num2(node.letterSpacing)}"` : ""} fill="${xml(node.color)}" text-anchor="${position.anchor}" data-sf-valign="${node.verticalAlign}" data-sf-line-height="${num2(node.lineHeight)}"${preserve}${transform(node.rotation, node.rotationCenter)}>${content}</text>`;
|
|
10245
10608
|
}
|
|
10246
10609
|
function textPosition(node) {
|
|
10247
10610
|
const linePx = node.fontSize * node.lineHeight;
|
|
@@ -10267,10 +10630,10 @@ function textContent(node, position, fontSize) {
|
|
|
10267
10630
|
return node.lines.map((line, index) => lineTspan(line, index, position, fontSize)).join("");
|
|
10268
10631
|
}
|
|
10269
10632
|
function lineTspan(line, index, position, fontSize) {
|
|
10270
|
-
return `<tspan x="${
|
|
10633
|
+
return `<tspan x="${num2(position.x)}" font-size="${fontSize}"${lineOffset(index, position.linePx)}>${xml(line)}</tspan>`;
|
|
10271
10634
|
}
|
|
10272
10635
|
function lineOffset(index, linePx) {
|
|
10273
|
-
return index ? ` dy="${
|
|
10636
|
+
return index ? ` dy="${num2(linePx)}px"` : "";
|
|
10274
10637
|
}
|
|
10275
10638
|
|
|
10276
10639
|
// src/svg/nodes.ts
|
|
@@ -10279,7 +10642,7 @@ function shaderSurfaceSvg(node, defs) {
|
|
|
10279
10642
|
const parameters = xml(JSON.stringify(node.shader.parameters));
|
|
10280
10643
|
const surfacePadding = node.shader.surfacePadding ?? 0;
|
|
10281
10644
|
const fillColor = node.fillColor ? ` data-sf-shader-fill="${xml(node.fillColor)}"` : "";
|
|
10282
|
-
return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-shader="${xml(node.shader.program)}" data-sf-shader-name="${xml(node.shader.name)}" data-sf-shader-params="${parameters}" data-sf-shader-mask="${node.mask}" data-sf-shader-padding="${
|
|
10645
|
+
return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-shader="${xml(node.shader.program)}" data-sf-shader-name="${xml(node.shader.name)}" data-sf-shader-params="${parameters}" data-sf-shader-mask="${node.mask}" data-sf-shader-padding="${num2(surfacePadding)}"${fillColor} x="${num2(node.x)}" y="${num2(node.y)}" width="${num2(node.width)}" height="${num2(node.height)}"${rotation} pointer-events="${node.shader.program === "ruler" || node.identity?.role === "widget" ? "all" : "none"}"><canvas xmlns="http://www.w3.org/1999/xhtml" data-sf-shader-canvas="true" style="display:block;width:100%;height:100%;pointer-events:none"></canvas></foreignObject>`;
|
|
10283
10646
|
}
|
|
10284
10647
|
function rollingDigitSvg(character, node) {
|
|
10285
10648
|
const style = node.componentStyle;
|
|
@@ -10294,7 +10657,7 @@ function rollingNumberSvg(node, defs) {
|
|
|
10294
10657
|
const label = node.label ? `<span xmlns="http://www.w3.org/1999/xhtml" style="margin-bottom:.14em;color:${xml(node.componentStyle.labelColor)};font-size:.16em;font-weight:600;letter-spacing:.24em;line-height:1">${xml(node.label)}</span>` : "";
|
|
10295
10658
|
const digits = [...node.value].map((character) => rollingDigitSvg(character, node)).join("");
|
|
10296
10659
|
const componentStyle = xml(JSON.stringify(node.componentStyle));
|
|
10297
|
-
return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-widget="rollingNumber" data-sf-widget-value="${xml(node.value)}" data-sf-widget-digits="${node.digits ?? ""}" data-sf-widget-duration="${
|
|
10660
|
+
return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-widget="rollingNumber" data-sf-widget-value="${xml(node.value)}" data-sf-widget-digits="${node.digits ?? ""}" data-sf-widget-duration="${num2(node.duration)}" data-sf-widget-style="${componentStyle}" x="${num2(node.x)}" y="${num2(node.y)}" width="${num2(node.width)}" height="${num2(node.height)}"${rotation}><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:${xml(node.componentStyle.fontFamily)};font-size:${num2(fontSize)}px">${label}<div data-sf-rolling-digits="true" aria-label="${xml(node.value)}" style="display:flex;gap:${node.componentStyle.variant === "plain" ? ".02em" : ".1em"};font-size:1em">${digits}</div></div></foreignObject>`;
|
|
10298
10661
|
}
|
|
10299
10662
|
function nodeSvg(node, defs) {
|
|
10300
10663
|
if (node.type === "text") {
|
|
@@ -10307,14 +10670,14 @@ function nodeSvg(node, defs) {
|
|
|
10307
10670
|
return rollingNumberSvg(node, defs);
|
|
10308
10671
|
}
|
|
10309
10672
|
if (node.type === "image") {
|
|
10310
|
-
return `<image id="${defs.elementId(node.id)}"${contractAttrs(node)} ${imageAttrs(node, defs)} href="${xml(node.href)}" x="${
|
|
10673
|
+
return `<image id="${defs.elementId(node.id)}"${contractAttrs(node)} ${imageAttrs(node, defs)} href="${xml(node.href)}" x="${num2(node.x)}" y="${num2(node.y)}" width="${num2(node.width)}" height="${num2(node.height)}" preserveAspectRatio="${node.aspect === "none" ? "none" : `xMidYMid ${node.aspect ?? "slice"}`}"${transform(node.rotation, node.rotationCenter)}/>`;
|
|
10311
10674
|
}
|
|
10312
10675
|
const attrs = `id="${defs.elementId(node.id)}"${contractAttrs(node)} ${styleAttrs(node, defs)}`;
|
|
10313
10676
|
if (node.type === "rect") {
|
|
10314
|
-
return `<rect ${attrs} x="${
|
|
10677
|
+
return `<rect ${attrs} x="${num2(node.x)}" y="${num2(node.y)}" width="${num2(node.width)}" height="${num2(node.height)}"${node.rx ? ` rx="${num2(node.rx)}"` : ""}${transform(node.rotation, { x: node.x + node.width / 2, y: node.y + node.height / 2 })}/>`;
|
|
10315
10678
|
}
|
|
10316
10679
|
if (node.type === "ellipse") {
|
|
10317
|
-
return `<ellipse ${attrs} cx="${
|
|
10680
|
+
return `<ellipse ${attrs} cx="${num2(node.cx)}" cy="${num2(node.cy)}" rx="${num2(node.rx)}" ry="${num2(node.ry)}"${transform(node.rotation, { x: node.cx, y: node.cy })}/>`;
|
|
10318
10681
|
}
|
|
10319
10682
|
return `<path ${attrs} d="${xml(node.d)}"${transform(node.rotation, node.rotationCenter)}/>`;
|
|
10320
10683
|
}
|
|
@@ -10324,12 +10687,12 @@ function renderSvgDocument(scene, options = {}) {
|
|
|
10324
10687
|
const padding = options.padding ?? 16;
|
|
10325
10688
|
const width = Math.max(1, scene.bounds.maxX - scene.bounds.minX + padding * 2);
|
|
10326
10689
|
const height = Math.max(1, scene.bounds.maxY - scene.bounds.minY + padding * 2);
|
|
10327
|
-
const viewBox = `${
|
|
10690
|
+
const viewBox = `${num2(scene.bounds.minX - padding)} ${num2(scene.bounds.minY - padding)} ${num2(width)} ${num2(height)}`;
|
|
10328
10691
|
const defs = new SvgDefinitionRegistry(options.idPrefix ? `${options.idPrefix}-` : "");
|
|
10329
10692
|
const nodes = options.linkHitAreas ? withLinkHitAreas(scene.nodes) : scene.nodes;
|
|
10330
10693
|
const body = nodes.map((node) => nodeSvg(node, defs)).join("\n ");
|
|
10331
10694
|
const declaration = options.includeXmlDeclaration === false ? "" : '<?xml version="1.0" encoding="UTF-8"?>\n';
|
|
10332
|
-
const svg = `${declaration}<svg xmlns="http://www.w3.org/2000/svg" width="${
|
|
10695
|
+
const svg = `${declaration}<svg xmlns="http://www.w3.org/2000/svg" width="${num2(width)}px" height="${num2(height)}px" viewBox="${viewBox}" role="img" data-sf-contract="${chunkUHKFJBY5_cjs.DOM_CONTRACT_VERSION}">
|
|
10333
10696
|
<defs>${defs.entries.join("")}</defs>
|
|
10334
10697
|
${body}
|
|
10335
10698
|
</svg>`;
|
|
@@ -10349,9 +10712,9 @@ function renderCanvas(input, options = {}) {
|
|
|
10349
10712
|
}
|
|
10350
10713
|
var SCENE_CACHE_LIMIT = 50;
|
|
10351
10714
|
var sceneCache = /* @__PURE__ */ new Map();
|
|
10352
|
-
var cachedForRegistry =
|
|
10715
|
+
var cachedForRegistry = chunkUHKFJBY5_cjs.componentRegistryVersion();
|
|
10353
10716
|
function cachedRenderScene(source) {
|
|
10354
|
-
const registry =
|
|
10717
|
+
const registry = chunkUHKFJBY5_cjs.componentRegistryVersion();
|
|
10355
10718
|
if (registry !== cachedForRegistry) {
|
|
10356
10719
|
sceneCache.clear();
|
|
10357
10720
|
cachedForRegistry = registry;
|
|
@@ -10383,7 +10746,7 @@ function render(source, options = {}) {
|
|
|
10383
10746
|
var SCENE_ORDER_BASE = 1e4;
|
|
10384
10747
|
function defineComponent(definition) {
|
|
10385
10748
|
const { scene, ...descriptor } = definition;
|
|
10386
|
-
const unregisterDescriptor =
|
|
10749
|
+
const unregisterDescriptor = chunkUHKFJBY5_cjs.registerComponentDescriptor(descriptor);
|
|
10387
10750
|
const unregisterBuilder = registerComponentBuilder(
|
|
10388
10751
|
descriptor.type,
|
|
10389
10752
|
(component, index) => scene(component, { order: SCENE_ORDER_BASE + index })
|
|
@@ -10402,5 +10765,5 @@ exports.render = render;
|
|
|
10402
10765
|
exports.renderCanvas = renderCanvas;
|
|
10403
10766
|
exports.sflToRenderInput = sflToRenderInput;
|
|
10404
10767
|
exports.sliderReach = sliderReach;
|
|
10405
|
-
//# sourceMappingURL=chunk-
|
|
10406
|
-
//# sourceMappingURL=chunk-
|
|
10768
|
+
//# sourceMappingURL=chunk-EHH6ZDK6.cjs.map
|
|
10769
|
+
//# sourceMappingURL=chunk-EHH6ZDK6.cjs.map
|