web improvements

2023-12-11 10:40:15 +01:00
parent b81d6823dd
commit e727109235
8 changed files with 143 additions and 99 deletions
--- a/apps/web/src/components/report/chart/ReportLineChart.tsx
+++ b/apps/web/src/components/report/chart/ReportLineChart.tsx
@@ -25,6 +25,7 @@ export function ReportLineChart({ interval, data }: ReportLineChartProps) {
  const { editMode } = useChartContext();
  const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
  const formatDate = useFormatDateInterval(interval);
+  console.log(JSON.stringify(data.series[0]?.data, null, 2));

  const ref = useRef(false);
  useEffect(() => {
--- a/apps/web/src/components/report/chart/ReportTable.tsx
+++ b/apps/web/src/components/report/chart/ReportTable.tsx
@@ -39,73 +39,99 @@ export function ReportTable({
  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 */}
-      <div className="border-r border-border">
-        <div className={cn(header, row, cell)}>Name</div>
-        {data.series.map((serie, index) => {
-          const checked = visibleSeries.includes(serie.name);
+    <>
+      <div className="flex w-fit max-w-full rounded-md border border-border">
+        {/* Labels */}
+        <div className="border-r border-border">
+          <div className={cn(header, row, cell)}>Name</div>
+          {/* <div
+          className={cn(
+            'flex max-w-[200px] w-full min-w-full items-center gap-2',
+            row,
+            cell
+          )}
+        >
+          <div className="font-medium min-w-0 overflow-scroll whitespace-nowrap scrollbar-hide">
+            Summary
+          </div>
+        </div> */}
+          {data.series.map((serie, index) => {
+            const checked = visibleSeries.includes(serie.name);

-          return (
-            <div
-              key={serie.name}
-              className={cn('flex max-w-[200px] items-center gap-2', row, cell)}
-            >
-              <Checkbox
-                onCheckedChange={(checked) =>
-                  handleChange(serie.name, !!checked)
-                }
-                style={
-                  checked
-                    ? {
-                        background: getChartColor(index),
-                        borderColor: getChartColor(index),
-                      }
-                    : undefined
-                }
-                checked={checked}
-              />
-              <div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
-                {getLabel(serie.name)}
+            return (
+              <div
+                key={serie.name}
+                className={cn(
+                  'flex max-w-[200px] w-full min-w-full items-center gap-2',
+                  row,
+                  cell
+                )}
+              >
+                <Checkbox
+                  onCheckedChange={(checked) =>
+                    handleChange(serie.name, !!checked)
+                  }
+                  style={
+                    checked
+                      ? {
+                          background: getChartColor(index),
+                          borderColor: getChartColor(index),
+                        }
+                      : undefined
+                  }
+                  checked={checked}
+                />
+                <div
+                  title={getLabel(serie.name)}
+                  className="min-w-0 overflow-scroll whitespace-nowrap scrollbar-hide"
+                >
+                  {getLabel(serie.name)}
+                </div>
              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* ScrollView for all values */}
-      <div className="w-full overflow-auto">
-        {/* Header */}
-        <div className={cn('w-max', row)}>
-          <div className={cn(header, value, cell, total)}>Total</div>
-          {data.series[0]?.data.map((serie) => (
-            <div
-              key={serie.date.toString()}
-              className={cn(header, value, cell)}
-            >
-              {formatDate(serie.date)}
-            </div>
-          ))}
+            );
+          })}
        </div>

-        {/* Values */}
-        {data.series.map((serie) => {
-          return (
-            <div className={cn('w-max', row)} key={serie.name}>
-              <div className={cn(header, value, cell, total)}>
-                {serie.totalCount}
+        {/* ScrollView for all values */}
+        <div className="w-full overflow-auto">
+          {/* Header */}
+          <div className={cn('w-max', row)}>
+            <div className={cn(header, value, cell, total)}>Total</div>
+            {data.series[0]?.data.map((serie) => (
+              <div
+                key={serie.date.toString()}
+                className={cn(header, value, cell)}
+              >
+                {formatDate(serie.date)}
              </div>
-              {serie.data.map((item) => {
-                return (
-                  <div key={item.date} className={cn(value, cell)}>
-                    {item.count}
-                  </div>
-                );
-              })}
-            </div>
-          );
-        })}
+            ))}
+          </div>
+
+          {/* Values */}
+          {data.series.map((serie) => {
+            return (
+              <div className={cn('w-max', row)} key={serie.name}>
+                <div className={cn(header, value, cell, total)}>
+                  {serie.totalCount}
+                </div>
+                {serie.data.map((item) => {
+                  return (
+                    <div key={item.date} className={cn(value, cell)}>
+                      {item.count}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
      </div>
-    </div>
+      <div className="flex gap-2">
+        <div>Summary</div>
+        <div>
+          {data.series.reduce((acc, serie) => serie.totalCount + acc, 0)}
+        </div>
+      </div>
+    </>
  );
 }
--- a/apps/web/src/components/report/chart/index.tsx
+++ b/apps/web/src/components/report/chart/index.tsx
@@ -40,6 +40,8 @@ export const Chart = memo(
      }
    );

+    console.log(chart.data);
+
    const anyData = Boolean(chart.data?.series?.[0]?.data);

    if (chart.isFetching && !anyData) {
--- a/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
@@ -15,7 +15,7 @@ import {
 import { RenderDots } from '@/components/ui/RenderDots';
 import { useMappings } from '@/hooks/useMappings';
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
-import { useDispatch } from '@/redux';
+import { useDispatch, useSelector } from '@/redux';
 import type {
  IChartEvent,
  IChartEventFilter,
--- a/apps/web/src/pages/[organization]/[project]/reports/index.tsx
+++ b/apps/web/src/pages/[organization]/[project]/reports/index.tsx
@@ -10,14 +10,7 @@ import { ReportSaveButton } from '@/components/report/ReportSaveButton';
 import { reset, setReport } from '@/components/report/reportSlice';
 import { ReportSidebar } from '@/components/report/sidebar/ReportSidebar';
 import { Button } from '@/components/ui/button';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { useRouterBeforeLeave } from '@/hooks/useRouterBeforeLeave';
 import { useDispatch, useSelector } from '@/redux';
 import { createServerSideProps } from '@/server/getServerSideProps';
--- a/apps/web/src/server/api/routers/chart.ts
+++ b/apps/web/src/server/api/routers/chart.ts
@@ -2,7 +2,12 @@ import { createTRPCRouter, protectedProcedure } from '@/server/api/trpc';
 import * as cache from '@/server/cache';
 import { db } from '@/server/db';
 import { getProjectBySlug } from '@/server/services/project.service';
-import type { IChartEvent, IChartInputWithDates, IChartRange } from '@/types';
+import type {
+  IChartEvent,
+  IChartInputWithDates,
+  IChartRange,
+  IInterval,
+} from '@/types';
 import { getDaysOldDate } from '@/utils/date';
 import { toDots } from '@/utils/object';
 import { zChartInputWithDates } from '@/utils/validation';
@@ -81,6 +86,7 @@ export const chartRouter = createTRPCRouter({
      })
    )
    .query(async ({ input: { event, property, projectSlug } }) => {
+      const intervalInDays = 180;
      const project = await getProjectBySlug(projectSlug);
      if (isJsonPath(property)) {
        const events = await db.$queryRawUnsafe<{ value: string }[]>(
@@ -88,14 +94,7 @@ export const chartRouter = createTRPCRouter({
            property
          )} AS value from events WHERE project_id = '${
            project.id
-          }' AND name = '${event}' AND "createdAt" >= NOW() - INTERVAL '30 days'`
-        );
-        console.log(
-          `SELECT ${selectJsonPath(
-            property
-          )} AS value from events WHERE project_id = '${
-            project.id
-          }' AND name = '${event}' AND "createdAt" >= NOW() - INTERVAL '30 days'`
+          }' AND name = '${event}' AND "createdAt" >= NOW() - INTERVAL '${intervalInDays} days'`
        );

        return {
@@ -110,7 +109,9 @@ export const chartRouter = createTRPCRouter({
              not: null,
            },
            createdAt: {
-              gte: new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30),
+              gte: new Date(
+                new Date().getTime() - 1000 * 60 * 60 * 24 * intervalInDays
+              ),
            },
          },
          distinct: property as any,
@@ -483,7 +484,7 @@ async function getChartData({

 function fillEmptySpotsInTimeline(
  items: ResultItem[],
-  interval: string,
+  interval: IInterval,
  startDate: string,
  endDate: string
 ) {
@@ -493,31 +494,36 @@ function fillEmptySpotsInTimeline(
  const today = new Date();

  if (interval === 'minute') {
-    clonedStartDate.setSeconds(0, 0);
-    clonedEndDate.setMinutes(clonedEndDate.getMinutes() + 1, 0, 0);
+    clonedStartDate.setUTCSeconds(0, 0);
+    clonedEndDate.setUTCMinutes(clonedEndDate.getUTCMinutes() + 1, 0, 0);
  } else if (interval === 'hour') {
-    clonedStartDate.setMinutes(0, 0, 0);
-    clonedEndDate.setMinutes(0, 0, 0);
+    clonedStartDate.setUTCMinutes(0, 0, 0);
+    clonedEndDate.setUTCMinutes(0, 0, 0);
  } else {
    clonedStartDate.setUTCHours(0, 0, 0, 0);
    clonedEndDate.setUTCHours(0, 0, 0, 0);
  }

+  if (interval === 'month') {
+    clonedStartDate.setDate(1);
+    clonedEndDate.setDate(1);
+  }
+
  // Force if interval is month and the start date is the same month as today
  const shouldForce = () =>
    interval === 'month' &&
-    clonedStartDate.getFullYear() === today.getFullYear() &&
-    clonedStartDate.getMonth() === today.getMonth();
+    clonedStartDate.getUTCFullYear() === today.getUTCFullYear() &&
+    clonedStartDate.getUTCMonth() === today.getUTCMonth();

  while (
    shouldForce() ||
    clonedStartDate.getTime() <= clonedEndDate.getTime()
  ) {
-    const getYear = (date: Date) => date.getFullYear();
-    const getMonth = (date: Date) => date.getMonth();
-    const getDay = (date: Date) => date.getDate();
-    const getHour = (date: Date) => date.getHours();
-    const getMinute = (date: Date) => date.getMinutes();
+    const getYear = (date: Date) => date.getUTCFullYear();
+    const getMonth = (date: Date) => date.getUTCMonth();
+    const getDay = (date: Date) => date.getUTCDate();
+    const getHour = (date: Date) => date.getUTCHours();
+    const getMinute = (date: Date) => date.getUTCMinutes();

    const item = items.find((item) => {
      const date = new Date(item.date);
@@ -555,7 +561,10 @@ function fillEmptySpotsInTimeline(
    });

    if (item) {
-      result.push(item);
+      result.push({
+        ...item,
+        date: clonedStartDate.toISOString(),
+      });
    } else {
      result.push({
        date: clonedStartDate.toISOString(),
@@ -566,19 +575,19 @@ function fillEmptySpotsInTimeline(

    switch (interval) {
      case 'day': {
-        clonedStartDate.setDate(clonedStartDate.getDate() + 1);
+        clonedStartDate.setDate(clonedStartDate.getUTCDate() + 1);
        break;
      }
      case 'hour': {
-        clonedStartDate.setHours(clonedStartDate.getHours() + 1);
+        clonedStartDate.setHours(clonedStartDate.getUTCHours() + 1);
        break;
      }
      case 'minute': {
-        clonedStartDate.setMinutes(clonedStartDate.getMinutes() + 1);
+        clonedStartDate.setMinutes(clonedStartDate.getUTCMinutes() + 1);
        break;
      }
      case 'month': {
-        clonedStartDate.setMonth(clonedStartDate.getMonth() + 1);
+        clonedStartDate.setMonth(clonedStartDate.getUTCMonth() + 1);
        break;
      }
    }
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -146,3 +146,14 @@
    opacity: 1;
  }
 }
+
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}