[Bug]: While updating tremor getting floating-ui error

[malhotradeepali]

Tremor Version

3.13.1

Link to minimal reproduction

.

Steps to reproduce

What is expected?

Please help me resolve this issue. I want to update my tremor.

What is actually happening?

getting this error

What browsers are you seeing the problem on?

No response

Any additional comments?

No response

[iamtouha]

@malhotradeepali can you show the code which caused the error?

[malhotradeepali]

I am currently using version 3.7.2. When i try to update this to 3.13.1. Its giving me error

you can see in above image i have updated tremor and its done

When i try to run my project giving error

[malhotradeepali]

Failed to compile

[iamtouha]

Hi @malhotradeepali , looks like the error is caused by ProgressCircle component you're using in app/dashboard/page.tsx file. Instead of importing ProgressCircle directly in that file, you can follow this method- Using Third-party Packages and Providers. Let me know if this works. thanks!

[malhotradeepali]

No, I am not using ProgressCircle, because it was not there in last version of tremor. If i will update tremor then only i will able to use it. You can see even i am not having ProgressCircle in node_modules > tremor > vis-element

[iamtouha]

please show me the code from app/dashboard/page.tsx file.

[malhotradeepali]

import { getServerSession } from 'next-auth/next';

import {
  GlobeAsiaAustraliaIcon,
  InboxIcon,
  PaperAirplaneIcon,
} from '@heroicons/react/24/outline';
import { BanknotesIcon, CurrencyRupeeIcon } from '@heroicons/react/24/solid';
import { KpiCard, PageHeader } from '@poco-pg/ui-components';
import { Card, Col, DonutChart, Grid, LineChart, Title } from '@tremor/react';

import { options } from '../api/auth/[...nextauth]/options';

export default async function Dashboard() {
  const analytics = await getMerchantAnalytics();

  // Get this from database
  const kpiData: React.ComponentProps<typeof KpiCard>[] = [
    {
      title: 'Balance',
      primaryMetric: `${await getMerchantWalletsData()}`,
      icon: <CurrencyRupeeIcon />,
      color: 'indigo',
    },
    {
      title: 'Unsettled',
      primaryMetric: '0',
      icon: <BanknotesIcon />,
      color: 'pink',
    },
    {
      title: 'Settled',
      primaryMetric: `${analytics.payins.settled.totalAmount}`,
      icon: <GlobeAsiaAustraliaIcon />,
      color: 'green',
    },
    {
      title: 'Payins',
      secondaryMetric:
        analytics.payins.success.count + analytics.payins.settled.count,
      primaryMetric: `${analytics.payins.totalAmount} `,
      delta: `${analytics.payins.successRate}%`,
      deltaType: getDeltaType(analytics.payins.successRate),
      icon: <InboxIcon />,
      color: 'fuchsia',
      subCategory: [
        {
          value:
            ((analytics.payins.success.count + analytics.payins.settled.count) /
              analytics.payins.totalTransactions) *
            100,
          color: 'emerald',
          title: 'Success & Settled',
        },
        {
          value:
            (analytics.payins.pending.count /
              analytics.payins.totalTransactions) *
            100,
          color: 'yellow',
          title: 'Pending',
        },
        {
          value:
            (analytics.payins.failed.count /
              analytics.payins.totalTransactions) *
            100,
          color: 'rose',
          title: 'Failed',
        },
      ],
    },
    {
      title: 'Payouts',
      secondaryMetric: analytics.payouts.success.count,
      primaryMetric: `${analytics.payouts.totalAmount}`,
      delta: `${analytics.payouts.successRate}%`,
      deltaType: getDeltaType(analytics.payouts.successRate),
      icon: <PaperAirplaneIcon />,
      color: 'amber',
      subCategory: [
        {
          value:
            (analytics.payouts.success.count /
              analytics.payouts.totalTransactions) *
            100,
          color: 'emerald',
          title: 'Success',
        },
        {
          value:
            (analytics.payouts.pending.count /
              analytics.payouts.totalTransactions) *
            100,
          color: 'yellow',
          title: 'Pending',
        },
        {
          value:
            (analytics.payouts.failed.count /
              analytics.payouts.totalTransactions) *
            100,
          color: 'rose',
          title: 'Failed',
        },
      ],
    },
  ];

  // Donut chart
  const donutData = [
    {
      name: 'Success & Settled',
      value:
        (analytics.payins.success.count +
          analytics.payins.settled.count / analytics.payins.totalTransactions) *
        100,
    },
    {
      name: 'Failed',
      value:
        (analytics.payins.failed.count / analytics.payins.totalTransactions) *
        100,
    },
    {
      name: 'Pending',
      value:
        (analytics.payins.pending.count / analytics.payins.totalTransactions) *
        100,
    },
  ];

  // line chart
  const currentDate = new Date();
  const currentHour = currentDate.getHours();

  const PayinsLineData = Array.from({ length: currentHour }, (_, i) => ({
    date: i + 1,
    success: analytics.payins.success.count + analytics.payins.settled.count,
    failed: analytics.payins.failed.count,
    pending: analytics.payins.pending.count,
  }));

  const PayoutsLineData = Array.from({ length: currentHour }, (_, i) => ({
    date: i + 1,
    success: analytics.payouts.success.count,
    failed: analytics.payouts.failed.count,
    pending: analytics.payouts.pending.count,
  }));

  // const [dateRange, setDateRange] = useState<DateRangePickerValue | null>();

  return (
    <main className="p-4 md:p-10 mx-auto max-w-7xl">
      <PageHeader
        title="Dashboard"
        subtext="Show all transaction, payin and payout details"
      />
      <div className="mt-6">
        {/* <DateRangeFilter
          dateRange={dateRange as DateRangePickerValue}
          onDateRangeChange={setDateRange}
        /> */}
      </div>

      <Grid numItemsSm={1} numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
        {kpiData.map((item) => (
          <KpiCard
            key={item.title}
            secondaryMetric={item.secondaryMetric}
            primaryMetric={item.primaryMetric}
            title={item.title}
            delta={item.delta}
            deltaType={item.deltaType}
            icon={item.icon}
            color={item.color}
            subCategory={item.subCategory}
          >
            {/* Placeholder to set height */}
            <div className="h-18" />
          </KpiCard>
        ))}
        <Col>
          <Card
            className="max-w-lg mx-auto"
            decoration="top"
            decorationColor="blue"
          >
            <Title>Payin Transactions</Title>
            <DonutChart
              className="mt-6"
              data={donutData}
              category="value"
              index="name"
              colors={['green', 'rose', 'amber']}
            />
          </Card>
        </Col>
      </Grid>
      <Grid
        numItems={1}
        numItemsSm={1}
        numItemsMd={2}
        numItemsLg={2}
        className="gap-6 mt-6"
      >
        <Col>
          <Card>
            <Title>Payin Transactions</Title>
            <LineChart
              className="mt-6"
              data={PayinsLineData}
              index="date"
              categories={['success', 'failed', 'pending']}
              colors={['emerald', 'rose', 'yellow']}
              yAxisWidth={40}
            />
          </Card>
        </Col>
        <Col>
          <Card>
            <Title>Payout Transactions</Title>
            <LineChart
              className="mt-6"
              data={PayoutsLineData}
              index="date"
              categories={['success', 'failed', 'pending']}
              colors={['emerald', 'rose', 'yellow']}
              yAxisWidth={40}
            />
          </Card>
        </Col>
      </Grid>
    </main>
  );
}

[iamtouha]

please import the components in a separate file and then import the components into the page from that file.

in a new components.tsx file -

"use client";

export { KpiCard, PageHeader } from "@poco-pg/ui-components";
export { Card, Col, DonutChart, Grid, LineChart, Title } from "@tremor/react";

in page.tsx file -

import { Card, Col, DonutChart, Grid, KpiCard, LineChart, PageHeader, Title } from './components';

See if this works. If works, then you may use trial and error to find out which component caused the problem.

[severinlandolt]

@iamtouha Thanks for jumping in!

[severinlandolt]

Hi @malhotradeepali, has your issue been resloved?

[severinlandolt]

Hi! I am going to close this for now. Happy to reopen when more info is provided :)