responsive design and bug fixes

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

@@ -1,7 +1,6 @@
 import { createContext, memo, useContext, useMemo } from 'react';
-import { pick } from 'ramda';
 
-interface ChartContextType {
+export interface ChartContextType {
   editMode: boolean;
 }
 

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

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+import { useInViewport } from 'react-in-viewport';
+
+import type { ReportChartProps } from '.';
+import { Chart } from '.';
+import type { ChartContextType } from './ChartProvider';
+
+export function LazyChart(props: ReportChartProps & ChartContextType) {
+  const ref = useRef<HTMLDivElement>(null);
+  const once = useRef(false);
+  const { inViewport } = useInViewport(ref, undefined, {
+    disconnectOnLeave: true,
+  });
+
+  useEffect(() => {
+    if (inViewport) {
+      once.current = true;
+    }
+  }, [inViewport]);
+
+  return (
+    <div ref={ref}>
+      {once.current || inViewport ? (
+        <Chart {...props} editMode={false} />
+      ) : (
+        <div className="h-64 w-full bg-gray-200 animate-pulse rounded" />
+      )}
+    </div>
+  );
+}

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

@@ -93,9 +93,9 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    debugTable: true,
-    debugHeaders: true,
-    debugColumns: true,
+    // debugTable: true,
+    // debugHeaders: true,
+    // debugColumns: true,
   });
   return (
     <div ref={ref}>

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

@@ -40,47 +40,52 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
 
   return (
     <>
-      <AutoSizer disableHeight>
-        {({ width }) => (
-          <LineChart width={width} height={Math.min(width * 0.5, 400)}>
-            <YAxis dataKey={'count'} width={30} fontSize={12}></YAxis>
-            <Tooltip content={<ReportLineChartTooltip />} />
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis
-              fontSize={12}
-              dataKey="date"
-              tickFormatter={(m: string) => {
-                return formatDate(m);
-              }}
-              tickLine={false}
-              allowDuplicatedCategory={false}
-            />
-            {data?.series
-              .filter((serie) => {
-                return visibleSeries.includes(serie.name);
-              })
-              .map((serie) => {
-                const realIndex = data?.series.findIndex(
-                  (item) => item.name === serie.name
-                );
-                const key = serie.name;
-                const strokeColor = getChartColor(realIndex);
-                return (
-                  <Line
-                    type="monotone"
-                    key={key}
-                    isAnimationActive={false}
-                    strokeWidth={2}
-                    dataKey="count"
-                    stroke={strokeColor}
-                    data={serie.data}
-                    name={serie.name}
-                  />
-                );
-              })}
-          </LineChart>
-        )}
-      </AutoSizer>
+      <div className="max-sm:-mx-3">
+        <AutoSizer disableHeight>
+          {({ width }) => (
+            <LineChart
+              width={width}
+              height={Math.min(Math.max(width * 0.5, 250), 400)}
+            >
+              <YAxis dataKey={'count'} width={30} fontSize={12}></YAxis>
+              <Tooltip content={<ReportLineChartTooltip />} />
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis
+                fontSize={12}
+                dataKey="date"
+                tickFormatter={(m: string) => {
+                  return formatDate(m);
+                }}
+                tickLine={false}
+                allowDuplicatedCategory={false}
+              />
+              {data?.series
+                .filter((serie) => {
+                  return visibleSeries.includes(serie.name);
+                })
+                .map((serie) => {
+                  const realIndex = data?.series.findIndex(
+                    (item) => item.name === serie.name
+                  );
+                  const key = serie.name;
+                  const strokeColor = getChartColor(realIndex);
+                  return (
+                    <Line
+                      type="monotone"
+                      key={key}
+                      isAnimationActive={false}
+                      strokeWidth={2}
+                      dataKey="count"
+                      stroke={strokeColor}
+                      data={serie.data}
+                      name={serie.name}
+                    />
+                  );
+                })}
+            </LineChart>
+          )}
+        </AutoSizer>
+      </div>
       {editMode && (
         <ReportTable
           data={data}

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

@@ -1,3 +1,5 @@
+import { memo } from 'react';
+import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import type { IChartInput } from '@/types';
 import { api } from '@/utils/api';
 
@@ -5,17 +7,18 @@ import { withChartProivder } from './ChartProvider';
 import { ReportBarChart } from './ReportBarChart';
 import { ReportLineChart } from './ReportLineChart';
 
-type ReportLineChartProps = IChartInput;
+export type ReportChartProps = IChartInput;
 
-export const Chart = withChartProivder(
-  ({
+export const Chart = memo(
+  withChartProivder(function Chart({
     interval,
     events,
     breakdowns,
     chartType,
     name,
     range,
-  }: ReportLineChartProps) => {
+  }: ReportChartProps) {
+    const params = useOrganizationParams();
     const hasEmptyFilters = events.some((event) =>
       event.filters.some((filter) => filter.value.length === 0)
     );
@@ -29,6 +32,7 @@ export const Chart = withChartProivder(
         range,
         startDate: null,
         endDate: null,
+        projectSlug: params.project,
       },
       {
         keepPreviousData: true,
@@ -63,5 +67,5 @@ export const Chart = withChartProivder(
     }
 
     return <p>Chart type &quot;{chartType}&quot; is not supported yet.</p>;
-  }
+  })
 );