reduce chart payload

2024-06-17 22:12:04 +02:00
parent f417c0f682
commit 626a6fd938
26 changed files with 407 additions and 367 deletions
--- a/apps/dashboard/src/components/overview/overview-top-devices.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-devices.tsx
@@ -30,6 +30,7 @@ export default function OverviewTopDevices({
      title: 'Top devices',
      btn: 'Devices',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -60,6 +61,7 @@ export default function OverviewTopDevices({
      title: 'Top browser',
      btn: 'Browser',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -90,6 +92,7 @@ export default function OverviewTopDevices({
      title: 'Top Browser Version',
      btn: 'Browser Version',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -120,6 +123,7 @@ export default function OverviewTopDevices({
      title: 'Top OS',
      btn: 'OS',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -150,6 +154,7 @@ export default function OverviewTopDevices({
      title: 'Top OS version',
      btn: 'OS Version',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
--- a/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
@@ -31,6 +31,7 @@ export default function OverviewTopEvents({
      title: 'Top events',
      btn: 'Your',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -69,6 +70,7 @@ export default function OverviewTopEvents({
      title: 'Top events',
      btn: 'All',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -100,6 +102,7 @@ export default function OverviewTopEvents({
      btn: 'Conversions',
      hide: conversions.length === 0,
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
--- a/apps/dashboard/src/components/overview/overview-top-geo.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-geo.tsx
@@ -29,6 +29,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
      title: 'Top countries',
      btn: 'Countries',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -59,6 +60,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
      title: 'Top regions',
      btn: 'Regions',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -89,6 +91,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
      title: 'Top cities',
      btn: 'Cities',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
--- a/apps/dashboard/src/components/overview/overview-top-pages.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-pages.tsx
@@ -28,6 +28,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
      title: 'Top pages',
      btn: 'Top pages',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -58,6 +59,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
      title: 'Entry Pages',
      btn: 'Entries',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -88,6 +90,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
      title: 'Exit Pages',
      btn: 'Exits',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
--- a/apps/dashboard/src/components/overview/overview-top-sources.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-sources.tsx
@@ -32,6 +32,7 @@ export default function OverviewTopSources({
      title: 'Top sources',
      btn: 'All',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -62,6 +63,7 @@ export default function OverviewTopSources({
      title: 'Top urls',
      btn: 'URLs',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -92,6 +94,7 @@ export default function OverviewTopSources({
      title: 'Top types',
      btn: 'Types',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -122,6 +125,7 @@ export default function OverviewTopSources({
      title: 'UTM Source',
      btn: 'Source',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -152,6 +156,7 @@ export default function OverviewTopSources({
      title: 'UTM Medium',
      btn: 'Medium',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -182,6 +187,7 @@ export default function OverviewTopSources({
      title: 'UTM Campaign',
      btn: 'Campaign',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -212,6 +218,7 @@ export default function OverviewTopSources({
      title: 'UTM Term',
      btn: 'Term',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
@@ -242,6 +249,7 @@ export default function OverviewTopSources({
      title: 'UTM Content',
      btn: 'Content',
      chart: {
+        limit: 10,
        projectId,
        startDate,
        endDate,
--- a/apps/dashboard/src/components/report/chart/Chart.tsx
+++ b/apps/dashboard/src/components/report/chart/Chart.tsx
@@ -20,16 +20,16 @@ export function Chart({
  events,
  breakdowns,
  chartType,
-  name,
  range,
  lineType,
  previous,
  formula,
-  unit,
  metric,
  projectId,
  startDate,
  endDate,
+  limit,
+  offset,
 }: ReportChartProps) {
  const [references] = api.reference.getChartReferences.useSuspenseQuery(
    {
@@ -56,6 +56,8 @@ export function Chart({
      previous,
      formula,
      metric,
+      limit,
+      offset,
    },
    {
      keepPreviousData: true,
--- a/apps/dashboard/src/components/report/chart/ChartProvider.tsx
+++ b/apps/dashboard/src/components/report/chart/ChartProvider.tsx
@@ -10,8 +10,7 @@ import {
  useState,
 } from 'react';

-import type { IChartSerie } from '@openpanel/trpc/src/routers/chart';
-import type { IChartProps } from '@openpanel/validation';
+import type { IChartProps, IChartSerie } from '@openpanel/validation';

 import { ChartLoading } from './ChartLoading';
 import { MetricCardLoading } from './MetricCard';
--- a/apps/dashboard/src/components/report/chart/MetricCard.tsx
+++ b/apps/dashboard/src/components/report/chart/MetricCard.tsx
@@ -44,7 +44,7 @@ export function MetricCard({
    );
  };

-  const previous = serie.metrics.previous[metric];
+  const previous = serie.metrics.previous?.[metric];

  const graphColors = getDiffIndicator(
    previousIndicatorInverted,
@@ -93,7 +93,7 @@ export function MetricCard({
          <div className="flex min-w-0 items-center gap-2 text-left font-semibold">
            <ColorSquare>{serie.event.id}</ColorSquare>
            <span className="overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
-              {serie.name || serie.event.displayName || serie.event.name}
+              {serie.name}
            </span>
          </div>
          {/* <PreviousDiffIndicator {...serie.metrics.previous[metric]} /> */}
@@ -125,9 +125,9 @@ export function MetricCardEmpty() {
 export function MetricCardLoading() {
  return (
    <div className="flex h-[70px] flex-col justify-between">
-      <div className="bg-def-200 h-4 w-1/2 animate-pulse rounded"></div>
-      <div className="bg-def-200 h-8 w-1/3 animate-pulse rounded"></div>
-      <div className="bg-def-200 h-3 w-1/5 animate-pulse rounded"></div>
+      <div className="h-4 w-1/2 animate-pulse rounded bg-def-200"></div>
+      <div className="h-8 w-1/3 animate-pulse rounded bg-def-200"></div>
+      <div className="h-3 w-1/5 animate-pulse rounded bg-def-200"></div>
    </div>
  );
 }
--- a/apps/dashboard/src/components/report/chart/ReportBarChart.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportBarChart.tsx
@@ -41,7 +41,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
            {...(isClickable ? { onClick: () => onClick(serie) } : {})}
          >
            <div
-              className="bg-def-200 absolute bottom-0 left-0 top-0 rounded"
+              className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
              style={{
                width: `${(serie.metrics.sum / maxCount) * 100}%`,
              }}
@@ -53,10 +53,10 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
              </div>
              <div className="flex flex-shrink-0 items-center justify-end gap-4">
                <PreviousDiffIndicatorText
-                  {...serie.metrics.previous[metric]}
+                  {...serie.metrics.previous?.[metric]}
                  className="text-xs font-medium"
                />
-                {serie.metrics.previous[metric]?.value}
+                {serie.metrics.previous?.[metric]?.value}
                <div className="text-muted-foreground">
                  {number.format(
                    round((serie.metrics.sum / data.metrics.sum) * 100, 2)
--- a/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
@@ -51,7 +51,7 @@ export function ReportChartTooltip({
        ) as IRechartPayloadItem;

        return (
-          <React.Fragment key={data.label}>
+          <React.Fragment key={data.name}>
            {index === 0 && data.date && (
              <div className="flex justify-between gap-8">
                <div>{formatDate(new Date(data.date))}</div>
@@ -64,7 +64,7 @@ export function ReportChartTooltip({
              />
              <div className="flex flex-1 flex-col">
                <div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
-                  {getLabel(data.label)}
+                  {getLabel(data.name)}
                </div>
                <div className="flex justify-between gap-8">
                  <div>{number.formatWithUnit(data.count, unit)}</div>
--- a/apps/dashboard/src/components/report/chart/ReportPieChart.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportPieChart.tsx
@@ -24,7 +24,7 @@ export function ReportPieChart({ data }: ReportPieChartProps) {
    id: serie.id,
    color: getChartColor(serie.index),
    index: serie.index,
-    label: serie.name,
+    name: serie.name,
    count: serie.metrics.sum,
    percent: serie.metrics.sum / sum,
  }));
@@ -88,7 +88,7 @@ const renderLabel = ({
  innerRadius: number;
  outerRadius: number;
  fill: string;
-  payload: { label: string; percent: number };
+  payload: { name: string; percent: number };
 }) => {
  const RADIAN = Math.PI / 180;
  const radius = 25 + innerRadius + (outerRadius - innerRadius);
@@ -97,7 +97,7 @@ const renderLabel = ({
  const yProcent = cy + radiusProcent * Math.sin(-midAngle * RADIAN);
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);
-  const label = payload.label;
+  const name = payload.name;
  const percent = round(payload.percent * 100, 1);

  return (
@@ -108,7 +108,7 @@ const renderLabel = ({
        fill="white"
        textAnchor="middle"
        dominantBaseline="central"
-        fontSize={10}
+        fontSize={12}
        fontWeight={700}
        pointerEvents={'none'}
      >
@@ -120,9 +120,9 @@ const renderLabel = ({
        fill={fill}
        textAnchor={x > cx ? 'start' : 'end'}
        dominantBaseline="central"
-        fontSize={10}
+        fontSize={12}
      >
-        {truncate(label, 20)}
+        {truncate(name, 20)}
      </text>
    </>
  );
--- a/apps/dashboard/src/components/report/chart/ReportTable.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportTable.tsx
@@ -127,7 +127,7 @@ export function ReportTable({
                      <div className="flex items-center gap-2 font-medium">
                        {number.format(serie.metrics.sum)}
                        <PreviousDiffIndicator
-                          {...serie.metrics.previous.sum}
+                          {...serie.metrics.previous?.sum}
                        />
                      </div>
                    </TableCell>
@@ -135,7 +135,7 @@ export function ReportTable({
                      <div className="flex items-center gap-2 font-medium">
                        {number.format(serie.metrics.average)}
                        <PreviousDiffIndicator
-                          {...serie.metrics.previous.average}
+                          {...serie.metrics.previous?.average}
                        />
                      </div>
                    </TableCell>
--- a/apps/dashboard/src/components/report/reportSlice.ts
+++ b/apps/dashboard/src/components/report/reportSlice.ts
@@ -51,6 +51,7 @@ const initialState: InitialState = {
  formula: undefined,
  unit: undefined,
  metric: 'sum',
+  limit: 500,
 };

 export const reportSlice = createSlice({
--- a/apps/dashboard/src/components/report/sidebar/ReportBreakdowns.tsx
+++ b/apps/dashboard/src/components/report/sidebar/ReportBreakdowns.tsx
@@ -43,7 +43,7 @@ export function ReportBreakdowns() {
      <div className="flex flex-col gap-4">
        {selectedBreakdowns.map((item, index) => {
          return (
-            <div key={item.name} className="bg-def-100 rounded-lg border">
+            <div key={item.name} className="rounded-lg border bg-def-100">
              <div className="flex items-center gap-2 p-2 px-4">
                <ColorSquare>{index}</ColorSquare>
                <Combobox
@@ -68,22 +68,20 @@ export function ReportBreakdowns() {
          );
        })}

-        {selectedBreakdowns.length === 0 && (
-          <Combobox
-            icon={SplitIcon}
-            searchable
-            value={''}
-            onChange={(value) => {
-              dispatch(
-                addBreakdown({
-                  name: value,
-                })
-              );
-            }}
-            items={propertiesCombobox}
-            placeholder="Select breakdown"
-          />
-        )}
+        <Combobox
+          icon={SplitIcon}
+          searchable
+          value={''}
+          onChange={(value) => {
+            dispatch(
+              addBreakdown({
+                name: value,
+              })
+            );
+          }}
+          items={propertiesCombobox}
+          placeholder="Select breakdown"
+        />
      </div>
    </div>
  );