From 2112b7c30576c0cc03b89c5223a537d195effa06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=94=9C=E6=AA=B8Cirtron?= <45784494+lcandy2@users.noreply.github.com> Date: Wed, 8 May 2024 12:38:32 +0800 Subject: [PATCH 1/6] feat: CategoryBar now supports values less than 100 or more than 100 --- .../vis-elements/CategoryBar/CategoryBar.tsx | 21 +++++++++++++++---- .../vis-elements/CategoryBar.stories.tsx | 20 ++++++++++++++++++ 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/components/vis-elements/CategoryBar/CategoryBar.tsx b/src/components/vis-elements/CategoryBar/CategoryBar.tsx index 437393322..cb4dd0594 100644 --- a/src/components/vis-elements/CategoryBar/CategoryBar.tsx +++ b/src/components/vis-elements/CategoryBar/CategoryBar.tsx @@ -1,5 +1,5 @@ "use client"; -import React from "react"; +import React, { useMemo } from "react"; import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip"; import { getColorClassNames, @@ -32,6 +32,9 @@ const getMarkerBgColor = ( return ""; }; +const getPositionLeft = (value: number | undefined, maxValue: number): number => + value ? (value / maxValue) * 100 : 0; + const BarLabels = ({ values }: { values: number[] }) => { const sumValues = sumNumericArray(values); let prefixSum = 0; @@ -56,11 +59,13 @@ const BarLabels = ({ values }: { values: number[] }) => { prefixSum >= 0.1 * sumValues; sumConsecutveHiddenLabels = showLabel ? 0 : (sumConsecutveHiddenLabels += widthPercentage); + const widthPositionLeft = getPositionLeft(widthPercentage, sumValues); + return (
((props, r const { tooltipProps, getReferenceProps } = useTooltip(); + const maxValue = useMemo(() => sumNumericArray(values), [values]); + + const markerPositionLeft: number = useMemo( + () => getPositionLeft(markerValue, maxValue), + [markerValue, maxValue], + ); + return ( <> @@ -126,6 +138,7 @@ const CategoryBar = React.forwardRef((props, r > {values.map((value, idx) => { const baseColor = colors[idx] ?? "gray"; + const percentage = (value / maxValue) * 100; return (
((props, r "h-full", getColorClassNames(baseColor, colorPalette.background).bgColor, )} - style={{ width: `${value}%` }} + style={{ width: `${percentage}%` }} /> ); })} @@ -147,7 +160,7 @@ const CategoryBar = React.forwardRef((props, r "absolute right-1/2 -translate-x-1/2 w-5", )} style={{ - left: `${markerValue}%`, + left: `${markerPositionLeft}%`, transition: showAnimation ? "all 1s" : "", }} {...getReferenceProps} diff --git a/src/stories/vis-elements/CategoryBar.stories.tsx b/src/stories/vis-elements/CategoryBar.stories.tsx index 8a20cf6e2..8555319eb 100644 --- a/src/stories/vis-elements/CategoryBar.stories.tsx +++ b/src/stories/vis-elements/CategoryBar.stories.tsx @@ -73,6 +73,26 @@ export const WithZeroValues: Story = { }, }; +export const WithValuesMoreThan100: Story = { + args: { + values: [400, 400, 800], + colors: ["emerald", "yellow", "orange", "rose"], + markerValue: 1400, + tooltip: "90%", + className: "mt-5", + }, +}; + +export const WithValuesLessThan100: Story = { + args: { + values: [8, 7, 9, 8], + colors: ["emerald", "yellow", "orange", "rose"], + markerValue: 20, + tooltip: "90%", + className: "mt-5", + }, +}; + export const WithConsecutiveSmallValues: Story = { args: { values: [10, 5, 5, 5, 5, 5, 50, 15, 0], From abe800629bdd6a5e62f9534f306a1e21d931d3bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=94=9C=E6=AA=B8Cirtron?= <45784494+lcandy2@users.noreply.github.com> Date: Wed, 8 May 2024 12:42:48 +0800 Subject: [PATCH 2/6] feat: CategoryBar tests for values more than 100 or less than 100 --- src/tests/vis-elements/CategoryBar.test.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/tests/vis-elements/CategoryBar.test.tsx b/src/tests/vis-elements/CategoryBar.test.tsx index 5799f7962..bebcc884a 100644 --- a/src/tests/vis-elements/CategoryBar.test.tsx +++ b/src/tests/vis-elements/CategoryBar.test.tsx @@ -8,4 +8,10 @@ describe("CategoryBar", () => { test("renders the CategoryBar component with default props", () => { render(); }); + test("renders the CategoryBar component with values more than 100", () => { + render(); + }); + test("renders the CategoryBar component with values less than 100", () => { + render(); + }); }); From c9ccde6c5d5a5e5d531a8630cc90ba0b3b390f05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=94=9C=E6=AA=B8Cirtron?= <45784494+lcandy2@users.noreply.github.com> Date: Wed, 8 May 2024 12:48:04 +0800 Subject: [PATCH 3/6] feat: wrapping some variables into useMemo in CategoryBar --- src/components/vis-elements/CategoryBar/CategoryBar.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/vis-elements/CategoryBar/CategoryBar.tsx b/src/components/vis-elements/CategoryBar/CategoryBar.tsx index cb4dd0594..d2db5401a 100644 --- a/src/components/vis-elements/CategoryBar/CategoryBar.tsx +++ b/src/components/vis-elements/CategoryBar/CategoryBar.tsx @@ -36,7 +36,7 @@ const getPositionLeft = (value: number | undefined, maxValue: number): number => value ? (value / maxValue) * 100 : 0; const BarLabels = ({ values }: { values: number[] }) => { - const sumValues = sumNumericArray(values); + const sumValues = useMemo(() => sumNumericArray(values), [values]); let prefixSum = 0; let sumConsecutveHiddenLabels = 0; return ( @@ -104,7 +104,10 @@ const CategoryBar = React.forwardRef((props, r ...other } = props; - const markerBgColor = getMarkerBgColor(markerValue, values, colors); + const markerBgColor = useMemo( + () => getMarkerBgColor(markerValue, values, colors), + [markerValue, values, colors], + ); const { tooltipProps, getReferenceProps } = useTooltip(); From 5941a50848dfd21791836608a2da9cf7e89089d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=94=9C=E6=AA=B8Cirtron?= <45784494+lcandy2@users.noreply.github.com> Date: Wed, 8 May 2024 12:48:51 +0800 Subject: [PATCH 4/6] fix: Consecutive typo in CategoryBar --- src/components/vis-elements/CategoryBar/CategoryBar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/vis-elements/CategoryBar/CategoryBar.tsx b/src/components/vis-elements/CategoryBar/CategoryBar.tsx index d2db5401a..c4eea525e 100644 --- a/src/components/vis-elements/CategoryBar/CategoryBar.tsx +++ b/src/components/vis-elements/CategoryBar/CategoryBar.tsx @@ -38,7 +38,7 @@ const getPositionLeft = (value: number | undefined, maxValue: number): number => const BarLabels = ({ values }: { values: number[] }) => { const sumValues = useMemo(() => sumNumericArray(values), [values]); let prefixSum = 0; - let sumConsecutveHiddenLabels = 0; + let sumConsecutiveHiddenLabels = 0; return (
{ {values.slice(0, values.length).map((widthPercentage, idx) => { prefixSum += widthPercentage; const showLabel = - (widthPercentage >= 0.1 * sumValues || sumConsecutveHiddenLabels >= 0.09 * sumValues) && + (widthPercentage >= 0.1 * sumValues || sumConsecutiveHiddenLabels >= 0.09 * sumValues) && sumValues - prefixSum >= 0.15 * sumValues && prefixSum >= 0.1 * sumValues; - sumConsecutveHiddenLabels = showLabel ? 0 : (sumConsecutveHiddenLabels += widthPercentage); + sumConsecutiveHiddenLabels = showLabel ? 0 : (sumConsecutiveHiddenLabels += widthPercentage); const widthPositionLeft = getPositionLeft(widthPercentage, sumValues); From a2cee338b423a64bd70c6b96c7482c38a35ee1e6 Mon Sep 17 00:00:00 2001 From: severinlandolt Date: Sun, 19 May 2024 22:04:26 +0200 Subject: [PATCH 5/6] lint --- src/components/vis-elements/CategoryBar/CategoryBar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/vis-elements/CategoryBar/CategoryBar.tsx b/src/components/vis-elements/CategoryBar/CategoryBar.tsx index c4eea525e..3e85a4274 100644 --- a/src/components/vis-elements/CategoryBar/CategoryBar.tsx +++ b/src/components/vis-elements/CategoryBar/CategoryBar.tsx @@ -57,7 +57,9 @@ const BarLabels = ({ values }: { values: number[] }) => { (widthPercentage >= 0.1 * sumValues || sumConsecutiveHiddenLabels >= 0.09 * sumValues) && sumValues - prefixSum >= 0.15 * sumValues && prefixSum >= 0.1 * sumValues; - sumConsecutiveHiddenLabels = showLabel ? 0 : (sumConsecutiveHiddenLabels += widthPercentage); + sumConsecutiveHiddenLabels = showLabel + ? 0 + : (sumConsecutiveHiddenLabels += widthPercentage); const widthPositionLeft = getPositionLeft(widthPercentage, sumValues); From b6b08df42a730678aaeb71402a2125f596901387 Mon Sep 17 00:00:00 2001 From: severinlandolt Date: Sun, 19 May 2024 22:13:52 +0200 Subject: [PATCH 6/6] update comments --- src/components/vis-elements/BarList/BarList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/vis-elements/BarList/BarList.tsx b/src/components/vis-elements/BarList/BarList.tsx index 862554e79..fad3455f8 100644 --- a/src/components/vis-elements/BarList/BarList.tsx +++ b/src/components/vis-elements/BarList/BarList.tsx @@ -111,8 +111,9 @@ function BarListInner(props: BarListProps, ref: React.ForwardedRef