Skip to content

Commit

Permalink
refactor(TrendWithImpactChartWrapper): Restrain width to fit
Browse files Browse the repository at this point in the history
  • Loading branch information
vogelino committed Sep 2, 2024
1 parent 92127ca commit 9b51672
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 29 deletions.
58 changes: 30 additions & 28 deletions frontend-nextjs/src/components/TopicChartTooltip.tsx
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
import { cn } from "@/utility/classNames";
import type { ComparableDateItemType } from "@/utility/comparableDateItemSchema";
import { format } from "@/utility/dateUtil";
import { texts, titleCase } from "@/utility/textUtil";
import { getTopicIcon } from "@/utility/topicsUtil";
import { memo } from "react";
import { cn } from '@/utility/classNames'
import type { ComparableDateItemType } from '@/utility/comparableDateItemSchema'
import { format } from '@/utility/dateUtil'
import { texts, titleCase } from '@/utility/textUtil'
import { getTopicIcon } from '@/utility/topicsUtil'
import { memo } from 'react'
import {
type AggregationUnitType,
formatDateByAggregationUnit,
} from "./EventsTimeline/useAggregationUnit";
import { ImpactKeywordLabel } from "./ImpactChart/ImpactKeywordLabel";
} from './EventsTimeline/useAggregationUnit'
import { ImpactKeywordLabel } from './ImpactChart/ImpactKeywordLabel'

function TopicChartTooltip({
aggregationUnit,
topics,
item,
}: {
aggregationUnit: AggregationUnitType;
aggregationUnit: AggregationUnitType
topics: {
topic: string;
color: string;
sum: number;
}[];
topic: string
color: string
sum: number
}[]
item: Record<string, number> & {
comparableDateObject: ComparableDateItemType;
};
comparableDateObject: ComparableDateItemType
}
}) {
const { date } = item.comparableDateObject;
const { date } = item.comparableDateObject
return (
<div
className={cn(
"bg-pattern-soft border border-grayMed p-4 flex flex-col gap-1",
"shadow-lg shadow-black/5 dark:shadow-black/50",
'bg-pattern-soft border border-grayMed p-4 flex flex-col gap-1',
'shadow-lg shadow-black/5 dark:shadow-black/50',
)}
>
<strong className="font-bold font-headlines text-base leading-tight pb-2 mb-2 border-b border-grayLight min-w-56">
{aggregationUnit !== "day" &&
{aggregationUnit !== 'day' &&
`${aggregationUnit.charAt(0).toUpperCase()}${aggregationUnit.slice(
1,
)} of `}
{aggregationUnit === "day" && format(date, "EEEE d MMMM yyyy")}
{aggregationUnit === "month" && format(date, "MMMM yyyy")}
{aggregationUnit !== "day" &&
aggregationUnit !== "month" &&
{aggregationUnit === 'day' && format(date, 'EEEE d MMMM yyyy')}
{aggregationUnit === 'month' && format(date, 'MMMM yyyy')}
{aggregationUnit !== 'day' &&
aggregationUnit !== 'month' &&
formatDateByAggregationUnit(date, aggregationUnit)}
</strong>
{topics
.map((t) => ({ ...t, value: item[t.topic] ?? 0 }))
.map(({ topic, value, color }) => {
const Icon = getTopicIcon(topic);
const Icon = getTopicIcon(topic)
return (
<div
key={topic}
Expand All @@ -67,16 +67,18 @@ function TopicChartTooltip({
{(+value)?.toLocaleString(texts.language) ?? 0}
</span>
</div>
);
)
})}
<div className="border-t border-grayLight pt-1 mt-1 flex gap-4 justify-between items-center">
<strong className="font-bold ">{texts.charts.common.total}:</strong>
<span className="font-mono text-xs text-grayDark">
{topics.reduce((acc, { topic }) => acc + (item[topic] || 0), 0)}
{topics
.reduce((acc, { topic }) => acc + (item[topic] || 0), 0)
.toLocaleString(texts.language)}
</span>
</div>
</div>
);
)
}

export default memo(TopicChartTooltip);
export default memo(TopicChartTooltip)
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ function TrendWithImpactChartWrapper({
{impactHeadline}
</h3>
<p className="text-sm text-grayDark">{impactDescription}</p>
<Alert className="mt-2 px-2 py-1 flex-row flex items-baseline gap-4 xl:w-[calc(100%-12rem)]">
<Alert className="mt-2 px-2 py-1 flex-row flex items-baseline gap-4 xl:w-fit xl:max-w-[calc(100%-12rem)]">
<AlertTitle className="inline-flex items-baseline gap-2 text-nowrap">
<AlertTriangle className="w-4 h-4 translate-y-0.5" />
{texts.charts.impact.disclaimer.title}
Expand Down

0 comments on commit 9b51672

Please sign in to comment.