web: added the base for the web project

apps/web/src/components/report/chart/ReportLineChart.tsx

@@ -31,7 +31,9 @@ export function ReportLineChart({
 }: ReportLineChartProps) {
   const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
 
-  const chart = api.chartMeta.chart.useQuery(
+  const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
+
+  const chart = api.chart.chart.useQuery(
     {
       interval,
       chartType,
@@ -42,7 +44,7 @@ export function ReportLineChart({
       name,
     },
     {
-      enabled: events.length > 0,
+      enabled: events.length > 0 && !hasEmptyFilters,
     },
   );
 
@@ -67,10 +69,11 @@ export function ReportLineChart({
           <AutoSizer disableHeight>
             {({ width }) => (
               <LineChart width={width} height={Math.min(width * 0.5, 400)}>
-                <YAxis dataKey={"count"}></YAxis>
+                <YAxis dataKey={"count"} width={30} fontSize={12}></YAxis>
                 <Tooltip content={<ReportLineChartTooltip />} />
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis
+                 fontSize={12}
                   dataKey="date"
                   tickFormatter={(m: Date) => {
                     return formatDate(m);

apps/web/src/components/report/chart/ReportLineChartTooltop.tsx

@@ -1,3 +1,4 @@
+import { useMappings } from "@/hooks/useMappings";
 import { type IToolTipProps } from "@/types";
 
 type ReportLineChartTooltipProps = IToolTipProps<{
@@ -8,13 +9,15 @@ type ReportLineChartTooltipProps = IToolTipProps<{
     count: number;
     label: string;
   };
-}>
+}>;
 
 export function ReportLineChartTooltip({
   active,
   payload,
 }: ReportLineChartTooltipProps) {
-  if (!active || !payload) {
+  const getLabel = useMappings();
+
+  if (!active || !payload) {
     return null;
   }
 
@@ -22,7 +25,6 @@ export function ReportLineChartTooltip({
     return null;
   }
 
-
   const limit = 3;
   const sorted = payload.slice(0).sort((a, b) => b.value - a.value);
   const visible = sorted.slice(0, limit);
@@ -39,7 +41,7 @@ export function ReportLineChartTooltip({
             ></div>
             <div className="flex flex-col">
               <div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
-                {item.payload.label}
+                {getLabel(item.payload.label)}
               </div>
               <div>{item.payload.count}</div>
             </div>

apps/web/src/components/report/chart/ReportTable.tsx

@@ -5,9 +5,11 @@ import { useSelector } from "@/redux";
 import { Checkbox } from "@/components/ui/checkbox";
 import { getChartColor } from "@/utils/theme";
 import { cn } from "@/utils/cn";
+import { useMappings } from "@/hooks/useMappings";
+
 
 type ReportTableProps = {
-  data: RouterOutputs["chartMeta"]["chart"];
+  data: RouterOutputs["chart"]["chart"];
   visibleSeries: string[];
   setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
 };
@@ -19,6 +21,7 @@ export function ReportTable({
 }: ReportTableProps) {
   const interval = useSelector((state) => state.report.interval);
   const formatDate = useFormatDateInterval(interval);
+  const getLabel = useMappings()
 
   function handleChange(name: string, checked: boolean) {
     setVisibleSeries((prev) => {
@@ -34,7 +37,7 @@ export function ReportTable({
   const cell = "p-2 last:pr-8 last:w-[8rem]";
   const value = "min-w-[6rem] text-right";
   const header = "text-sm font-medium";
-  const total = 'bg-gray-50 text-emerald-600 font-bold border-r border-border'
+  const total = 'bg-gray-50 text-emerald-600 font-medium border-r border-border'
   return (
     <div className="flex w-fit max-w-full rounded-md border border-border">
       {/* Labels */}
@@ -63,7 +66,7 @@ export function ReportTable({
                 checked={checked}
               />
               <div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
-                {serie.name}
+                {getLabel(serie.name)}
               </div>
             </div>
           );