Skip to content

Commit

Permalink
attempting to fix issues with crashin and deselected chains bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed Sep 2, 2024
1 parent 6a6f8a1 commit 65903bb
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 54 deletions.
2 changes: 1 addition & 1 deletion components/layout/BlockspaceOverview/OverviewChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -770,7 +770,7 @@ export default function OverviewChart({
<div className="w-full h-[249px] flex items-center">
<div
className={`bg-blend-lighten h-full ${
!allCats && selectedValue === "share" ? "w-full" : "w-full"
!allCats && selectedValue === "share" ? "w-[96%]" : "w-full"
}`}
>
<HighchartsProvider Highcharts={Highcharts}>
Expand Down
115 changes: 94 additions & 21 deletions components/layout/CategoryMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,56 @@ export default function CategoryMetrics({
);
}, [chainValues, selectedChains, chainEcosystemFilter]);

const sortedChainValuesWithPlaceholder = useMemo(() => {
if (!chainValues || !selectedChains) return null;

let sortedValues = chainValues
.filter(([item]) => {
const supportedChainKeys = Get_SupportedChainKeys(master);
const isSupported =
item === "all_l2s" ? true : supportedChainKeys.includes(item);
const isMaster = master?.chains[item] ? true : false;
const passEcosystem =
item === "all_l2s"
? true
: isMaster
? chainEcosystemFilter === "all-chains"
? true
: master?.chains[item].bucket.includes(chainEcosystemFilter)
: false;

return item !== "types" && isSupported && passEcosystem;
})
.sort((a, b) => b[1] - a[1])
.sort(([itemA], [itemB]) =>
selectedChains[itemA] === selectedChains[itemB]
? 0
: selectedChains[itemA]
? -1
: 1,
);

// Insert the placeholder array
const result: [string, number, number][] = [];

for (let i = 0; i < sortedValues.length; i++) {
const current = sortedValues[i] as [string, number];
const next = sortedValues[i + 1] as [string, number] | undefined;

// Push the current item with its true index
result.push([current[0], current[1], i]);

// Check the condition and add the placeholder with a null index if needed
if (selectedChains[current[0]] && next && !selectedChains[next[0]]) {
result.push(["placeholder", 0, 0]);
}
}

return result;
}, [chainValues, selectedChains, chainEcosystemFilter]);

console.log(sortedChainValuesWithPlaceholder);

const timespans = useMemo(() => {
return {
"7d": {
Expand Down Expand Up @@ -932,18 +982,30 @@ export default function CategoryMetrics({
}
};

const isAllChainsSelected = useMemo(() => {
if (!sortedChainValues) return true;

let retVal = true;

sortedChainValues.forEach((arrayVals) => {
if (!selectedChains[arrayVals[0]]) {
retVal = false;
}
});

return retVal;
}, [sortedChainValues, selectedChains]);

let height = 0;

const transitions = useTransition(
sortedChainValues
sortedChainValuesWithPlaceholder
?.filter(([item]) => !(item === "imx" && selectedMode === "gas_fees_"))
.map(([item, value], index) => {
const isPrevSelected =
index > 0 ? selectedChains[sortedChainValues[index - 1][0]] : true;
const isCurrentSelected = selectedChains[item];
const addHeight = isPrevSelected && !isCurrentSelected;
const isPlaceholder = item === "placeholder";

const rowHeight = !isPlaceholder ? 39 : 18;

const rowHeight = 39 + (addHeight ? 18 : 0);
return {
item,
value,
Expand Down Expand Up @@ -1118,27 +1180,38 @@ export default function CategoryMetrics({
}}
>
{sortedChainValues &&
sortedChainValuesWithPlaceholder &&
master &&
transitions((style, item) => (
<animated.div
className="absolute w-full"
key={item.item}
style={{
...style,
}}
style={style}
>
<ChainAnimations
chain={item.item}
value={item.value}
index={item.index}
sortedValues={sortedChainValues}
selectedValue={selectedValue}
selectedMode={selectedMode}
selectedChains={selectedChains}
setSelectedChains={setSelectedChains}
selectedCategory={selectedCategory}
master={master}
/>
{item.item !== "placeholder" ? (
<ChainAnimations
chain={item.item}
value={item.value}
index={
sortedChainValuesWithPlaceholder[item.index][2]
}
sortedValues={sortedChainValues}
selectedValue={selectedValue}
selectedMode={selectedMode}
selectedChains={selectedChains}
setSelectedChains={setSelectedChains}
selectedCategory={selectedCategory}
master={master}
/>
) : (
<div className="flex items-center ">
<div className="flex-grow border-t border-[#5A6462]"></div>
<span className="mx-4 text-[12px] font-semibold text-[#CDD8D3]">
Not showing in chart
</span>
<div className="flex-grow border-t border-[#5A6462]"></div>
</div>
)}
</animated.div>
))}
</div>
Expand Down
36 changes: 4 additions & 32 deletions components/layout/ChainAnimations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export default function ChainAnimations({
const { AllChainsByKeys } = useMaster();
const [showUsd, setShowUsd] = useLocalStorage("showUsd", true);
const [isShaking, setIsShaking] = useState(false);

const [width, setWidth] = useState(() => {
if (sortedValues && value) {
const largestValue = Math.max(
Expand Down Expand Up @@ -140,39 +139,11 @@ export default function ChainAnimations({
}
}, [value, sortedValues]);

const showSeperatingLine = useMemo(() => {
const isUnselected = !selectedChains[chain];
const isPrevSelected =
index > 0 ? selectedChains[sortedValues[index - 1][0]] : true;

if (isUnselected && isPrevSelected) {
return true;
} else {
return false;
}
}, [sortedValues, selectedChains, selectedValue, selectedCategory, master]);

if (chain === "mode") {
console.log("chain", chain);
console.log("index", index);
console.log("sortedValues", sortedValues);
console.log(selectedChains[sortedValues[index - 1][0]]);
}

if (chain === "imx" && selectedMode === "gas_fees_") {
return null;
} else {
return (
<>
{showSeperatingLine && (
<div className="flex items-center ">
<div className="flex-grow border-t border-[#5A6462]"></div>
<span className="mx-4 text-[12px] font-semibold text-[#CDD8D3]">
Not showing in chart
</span>
<div className="flex-grow border-t border-[#5A6462]"></div>
</div>
)}
<div
key={chain}
className={`relative flex flex-row items-center rounded-full justify-between text-xs transition-opacity font-medium z-0 select-none pl-[2px] pr-[2px] h-[34px] ${
Expand Down Expand Up @@ -220,7 +191,7 @@ export default function ChainAnimations({
</div>

<div className="flex flex-col text-[#CDD8D3]">
<div className="text-[14px] font-bold -mb-[2px] ">
<div className="text-[14px] font-bold -mb-[4px] mt-[1px] ">
{" "}
{selectedValue === "share" ? (
<div>{Math.round(value * 100)}%</div>
Expand Down Expand Up @@ -262,14 +233,15 @@ export default function ChainAnimations({
</Link>
</div>
</div>
<div className="flex items-center absolute right-2 justify-center h-[17px] w-[17px] bg-[#1F2726] rounded-full">
<div className="flex items-center justify-center absolute right-2 h-[17px] w-[17px] bg-[#1F2726] rounded-full">
<Icon
icon={`feather:${
!selectedChains[chain] ? "circle" : "check-circle"
}`}
className={`w-[15px] h-[15px] `}
className="w-[15px] h-[15px] align-middle"
style={{
color: AllChainsByKeys[chain].colors[theme ?? "dark"][0],
lineHeight: 1, // Ensure the line height doesn't cause vertical misalignment
}}
/>
</div>
Expand Down

0 comments on commit 65903bb

Please sign in to comment.