improve display of area percentage

This commit is contained in:
Josh Hawkins 2026-01-02 08:17:12 -06:00
parent 8a718421ac
commit 9f508fe990
2 changed files with 13 additions and 5 deletions

View File

@ -849,7 +849,11 @@ function LifecycleIconRow({
() => () =>
Array.isArray(item.data.attribute_box) && Array.isArray(item.data.attribute_box) &&
item.data.attribute_box.length >= 4 item.data.attribute_box.length >= 4
? (item.data.attribute_box[2] * item.data.attribute_box[3]).toFixed(4) ? (
item.data.attribute_box[2] *
item.data.attribute_box[3] *
100
).toFixed(2)
: undefined, : undefined,
[item.data.attribute_box], [item.data.attribute_box],
); );
@ -857,7 +861,7 @@ function LifecycleIconRow({
const areaPct = useMemo( const areaPct = useMemo(
() => () =>
Array.isArray(item.data.box) && item.data.box.length >= 4 Array.isArray(item.data.box) && item.data.box.length >= 4
? (item.data.box[2] * item.data.box[3]).toFixed(4) ? (item.data.box[2] * item.data.box[3] * 100).toFixed(2)
: undefined, : undefined,
[item.data.box], [item.data.box],
); );

View File

@ -744,7 +744,7 @@ function LifecycleItem({
const areaPct = useMemo( const areaPct = useMemo(
() => () =>
Array.isArray(item?.data.box) && item?.data.box.length >= 4 Array.isArray(item?.data.box) && item?.data.box.length >= 4
? (item?.data.box[2] * item?.data.box[3]).toFixed(4) ? (item?.data.box[2] * item?.data.box[3] * 100).toFixed(2)
: undefined, : undefined,
[item], [item],
); );
@ -766,7 +766,11 @@ function LifecycleItem({
() => () =>
Array.isArray(item?.data.attribute_box) && Array.isArray(item?.data.attribute_box) &&
item?.data.attribute_box.length >= 4 item?.data.attribute_box.length >= 4
? (item?.data.attribute_box[2] * item?.data.attribute_box[3]).toFixed(4) ? (
item?.data.attribute_box[2] *
item?.data.attribute_box[3] *
100
).toFixed(2)
: undefined, : undefined,
[item], [item],
); );
@ -845,7 +849,7 @@ function LifecycleItem({
</span> </span>
{areaPx !== undefined && areaPct !== undefined ? ( {areaPx !== undefined && areaPct !== undefined ? (
<span className="font-medium text-foreground"> <span className="font-medium text-foreground">
{areaPx} {t("information.pixels", { ns: "common" })}{" "} {t("information.pixels", { ns: "common", area: areaPx })}{" "}
<span className="text-secondary-foreground">·</span>{" "} <span className="text-secondary-foreground">·</span>{" "}
{areaPct}% {areaPct}%
</span> </span>