watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 12:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added AnimatedDiv component.

Browse source
This commit is contained in:
Mike Cao 2025-02-14 17:16:09 -08:00
parent 2978bf3c6f
commit a8a1ccce18
26 changed files with 83 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/console/[[...websiteId]]/page.tsx
View file

@ -1,5 +1,5 @@
import { Metadata } from 'next';
import ConsolePage from '../ConsolePage';
import { ConsolePage } from '../ConsolePage';
async function getEnabled() {
return !!process.env.ENABLE_TEST_CONSOLE;

6
src/app/(main)/reports/[reportId]/FieldParameters.tsx
View file

@ -2,9 +2,9 @@ import { useFields, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { useContext } from 'react';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import FieldSelectForm from '../[reportId]/FieldSelectForm';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { FieldSelectForm } from '../[reportId]/FieldSelectForm';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';
import { ReportContext } from './Report';
export function FieldParameters() {

8
src/app/(main)/reports/[reportId]/FilterParameters.tsx
View file

@ -2,11 +2,11 @@ import { useContext } from 'react';
import { useMessages, useFormat, useFilters, useFields } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import FilterSelectForm from '../[reportId]/FilterSelectForm';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { FilterSelectForm } from '../[reportId]/FilterSelectForm';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';
import { ReportContext } from './Report';
import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm';
import { FieldFilterEditForm } from '../[reportId]/FieldFilterEditForm';
import { isSearchOperator } from '@/lib/params';
import styles from './FilterParameters.module.css';

18
src/app/(main)/reports/[reportId]/ReportPage.tsx
View file

@ -1,13 +1,13 @@
'use client';
import { useReport } from '@/components/hooks';
import EventDataReport from '../event-data/EventDataReport';
import FunnelReport from '../funnel/FunnelReport';
import GoalReport from '../goals/GoalsReport';
import InsightsReport from '../insights/InsightsReport';
import JourneyReport from '../journey/JourneyReport';
import RetentionReport from '../retention/RetentionReport';
import UTMReport from '../utm/UTMReport';
import RevenueReport from '../revenue/RevenueReport';
import { EventDataReport } from '../event-data/EventDataReport';
import { FunnelReport } from '../funnel/FunnelReport';
import { GoalsReport } from '../goals/GoalsReport';
import { InsightsReport } from '../insights/InsightsReport';
import { JourneyReport } from '../journey/JourneyReport';
import { RetentionReport } from '../retention/RetentionReport';
import { UTMReport } from '../utm/UTMReport';
import { RevenueReport } from '../revenue/RevenueReport';
const reports = {
funnel: FunnelReport,
@ -15,7 +15,7 @@ const reports = {
insights: InsightsReport,
retention: RetentionReport,
utm: UTMReport,
goals: GoalReport,
goals: GoalsReport,
journey: JourneyReport,
revenue: RevenueReport,
};

6
src/app/(main)/reports/event-data/EventDataParameters.tsx
View file

@ -5,9 +5,9 @@ import { Icons } from '@/components/icons';
import { useApi, useMessages } from '@/components/hooks';
import { DATA_TYPES, REPORT_PARAMETERS } from '@/lib/constants';
import { ReportContext } from '../[reportId]/Report';
import FieldAddForm from '../[reportId]/FieldAddForm';
import ParameterList from '../[reportId]/ParameterList';
import BaseParameters from '../[reportId]/BaseParameters';
import { FieldAddForm } from '../[reportId]/FieldAddForm';
import { ParameterList } from '../[reportId]/ParameterList';
import { BaseParameters } from '../[reportId]/BaseParameters';
import styles from './EventDataParameters.module.css';
function useFields(websiteId, startDate, endDate) {

8
src/app/(main)/reports/event-data/EventDataReport.tsx
View file

@ -1,7 +1,7 @@
import Report from '../[reportId]/Report';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import ReportBody from '../[reportId]/ReportBody';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { EventDataParameters } from './EventDataParameters';
import { EventDataTable } from './EventDataTable';
import Nodes from '@/assets/nodes.svg';

6
src/app/(main)/reports/funnel/FunnelParameters.tsx
View file

@ -15,9 +15,9 @@ import {
import { Icons } from '@/components/icons';
import { FunnelStepAddForm } from './FunnelStepAddForm';
import { ReportContext } from '../[reportId]/Report';
import BaseParameters from '../[reportId]/BaseParameters';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';
import styles from './FunnelParameters.module.css';
export function FunnelParameters() {

8
src/app/(main)/reports/funnel/FunnelReport.tsx
View file

@ -1,9 +1,9 @@
import { FunnelChart } from './FunnelChart';
import { FunnelParameters } from './FunnelParameters';
import Report from '../[reportId]/Report';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import ReportBody from '../[reportId]/ReportBody';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Funnel from '@/assets/funnel.svg';
import { REPORT_TYPES } from '@/lib/constants';

6
src/app/(main)/reports/goals/GoalsParameters.tsx
View file

@ -13,9 +13,9 @@ import {
PopupTrigger,
SubmitButton,
} from 'react-basics';
import BaseParameters from '../[reportId]/BaseParameters';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';
import { ReportContext } from '../[reportId]/Report';
import { GoalsAddForm } from './GoalsAddForm';
import styles from './GoalsParameters.module.css';

8
src/app/(main)/reports/goals/GoalsReport.tsx
View file

@ -1,9 +1,9 @@
import { GoalsChart } from './GoalsChart';
import { GoalsParameters } from './GoalsParameters';
import Report from '../[reportId]/Report';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import ReportBody from '../[reportId]/ReportBody';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Target from '@/assets/target.svg';
import { REPORT_TYPES } from '@/lib/constants';

6
src/app/(main)/reports/insights/InsightsParameters.tsx
View file

@ -1,10 +1,10 @@
import { useMessages } from '@/components/hooks';
import { useContext } from 'react';
import { Form, FormButtons, SubmitButton } from 'react-basics';
import BaseParameters from '../[reportId]/BaseParameters';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { ReportContext } from '../[reportId]/Report';
import FieldParameters from '../[reportId]/FieldParameters';
import FilterParameters from '../[reportId]/FilterParameters';
import { FieldParameters } from '../[reportId]/FieldParameters';
import { FilterParameters } from '../[reportId]/FilterParameters';
export function InsightsParameters() {
const { report, runReport, isRunning } = useContext(ReportContext);

8
src/app/(main)/reports/insights/InsightsReport.tsx
View file

@ -1,7 +1,7 @@
import Report from '../[reportId]/Report';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import ReportBody from '../[reportId]/ReportBody';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { InsightsParameters } from './InsightsParameters';
import { InsightsTable } from './InsightsTable';
import Lightbulb from '@/assets/lightbulb.svg';

2
src/app/(main)/reports/journey/JourneyParameters.tsx
View file

@ -11,7 +11,7 @@ import {
TextField,
} from 'react-basics';
import { ReportContext } from '../[reportId]/Report';
import BaseParameters from '../[reportId]/BaseParameters';
import { BaseParameters } from '../[reportId]/BaseParameters';
export function JourneyParameters() {
const { report, runReport, isRunning } = useContext(ReportContext);

8
src/app/(main)/reports/journey/JourneyReport.tsx
View file

@ -1,8 +1,8 @@
'use client';
import Report from '../[reportId]/Report';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import ReportBody from '../[reportId]/ReportBody';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { JourneyParameters } from './JourneyParameters';
import { JourneyView } from './JourneyView';
import Path from '@/assets/path.svg';

2
src/app/(main)/reports/retention/RetentionParameters.tsx
View file

@ -3,7 +3,7 @@ import { useMessages } from '@/components/hooks';
import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
import { ReportContext } from '../[reportId]/Report';
import { MonthSelect } from '@/components/input/MonthSelect';
import BaseParameters from '../[reportId]/BaseParameters';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { parseDateRange } from '@/lib/date';
export function RetentionParameters() {

8
src/app/(main)/reports/retention/RetentionReport.tsx
View file

@ -1,9 +1,9 @@
import { RetentionTable } from './RetentionTable';
import { RetentionParameters } from './RetentionParameters';
import Report from '../[reportId]/Report';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import ReportBody from '../[reportId]/ReportBody';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Magnet from '@/assets/magnet.svg';
import { REPORT_TYPES } from '@/lib/constants';
import { parseDateRange } from '@/lib/date';

2
src/app/(main)/reports/revenue/RevenueParameters.tsx
View file

@ -2,7 +2,7 @@ import { useMessages } from '@/components/hooks';
import { useRevenueValues } from '@/components/hooks/queries/useRevenueValues';
import { useContext } from 'react';
import { Dropdown, Form, FormButtons, FormInput, FormRow, Item, SubmitButton } from 'react-basics';
import BaseParameters from '../[reportId]/BaseParameters';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { ReportContext } from '../[reportId]/Report';
export function RevenueParameters() {

8
src/app/(main)/reports/revenue/RevenueReport.tsx
View file

@ -1,9 +1,9 @@
import Money from '@/assets/money.svg';
import { REPORT_TYPES } from '@/lib/constants';
import Report from '../[reportId]/Report';
import ReportBody from '../[reportId]/ReportBody';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import { Report } from '../[reportId]/Report';
import { ReportBody } from '../[reportId]/ReportBody';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { RevenueParameters } from './RevenueParameters';
import { RevenueView } from './RevenueView';

2
src/app/(main)/reports/utm/UTMParameters.tsx
View file

@ -2,7 +2,7 @@ import { useContext } from 'react';
import { useMessages } from '@/components/hooks';
import { Form, FormButtons, SubmitButton } from 'react-basics';
import { ReportContext } from '../[reportId]/Report';
import BaseParameters from '../[reportId]/BaseParameters';
import { BaseParameters } from '../[reportId]/BaseParameters';
export function UTMParameters() {
const { report, runReport, isRunning } = useContext(ReportContext);

8
src/app/(main)/reports/utm/UTMReport.tsx
View file

@ -1,8 +1,8 @@
'use client';
import Report from '../[reportId]/Report';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import ReportBody from '../[reportId]/ReportBody';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { UTMParameters } from './UTMParameters';
import { UTMView } from './UTMView';
import Tag from '@/assets/tag.svg';

2
src/app/share/[...shareId]/SharePage.tsx
View file

@ -1,5 +1,5 @@
'use client';
import WebsiteDetailsPage from '../../(main)/websites/[websiteId]/WebsiteDetailsPage';
import { WebsiteDetailsPage } from '../../(main)/websites/[websiteId]/WebsiteDetailsPage';
import { useShareToken } from '@/components/hooks';
import { Page } from '@/components/layout/Page';
import { Header } from './Header';

3
src/components/common/AnimatedDiv.tsx Normal file
View file

@ -0,0 +1,3 @@
import { animated, AnimatedComponent } from '@react-spring/web';
export const AnimatedDiv: AnimatedComponent<any> = animated.div;

2
src/components/input/LanguageButton.tsx
View file

@ -26,7 +26,7 @@ export function LanguageButton() {
<Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
<Text
weight={value === locale ? 'bold' : 'normal'}
color={value === locale ? 'primary' : 'muted'}
color={value === locale ? undefined : 'muted'}
>
{label}
</Text>

2
src/components/layout/Page.module.css
View file

@ -7,6 +7,4 @@
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
min-height: calc(100vh - 60px);
min-height: calc(100dvh - 60px);
}

11
src/components/metrics/ListTable.tsx
View file

@ -1,6 +1,7 @@
import { FixedSizeList } from 'react-window';
import { useSpring, animated, config } from '@react-spring/web';
import { useSpring, config } from '@react-spring/web';
import classNames from 'classnames';
import { AnimatedDiv } from '@/components/common/AnimatedDiv';
import { Empty } from '@/components/common/Empty';
import { formatLongNumber } from '@/lib/format';
import { useMessages } from '@/components/hooks';
@ -94,14 +95,14 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
<div className={styles.label}>{label}</div>
<div className={styles.value}>
{change}
<animated.div className={styles.value} title={props?.y as any}>
<AnimatedDiv className={styles.value} title={props?.y as any}>
{props.y?.to(formatLongNumber)}
</animated.div>
</AnimatedDiv>
</div>
{showPercentage && (
<div className={styles.percent}>
<animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
<animated.span>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</animated.span>
<AnimatedDiv className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
<AnimatedDiv>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</AnimatedDiv>
</div>
)}
</div>

13
src/components/metrics/MetricCard.tsx
View file

@ -1,6 +1,7 @@
import classNames from 'classnames';
import { useSpring, animated } from '@react-spring/web';
import { useSpring } from '@react-spring/web';
import { formatNumber } from '@/lib/format';
import { AnimatedDiv } from '@/components/common/AnimatedDiv';
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import styles from './MetricCard.module.css';
@ -37,9 +38,9 @@ export const MetricCard = ({
return (
<div className={classNames(styles.card, className, showPrevious && styles.compare)}>
{showLabel && <div className={styles.label}>{label}</div>}
<animated.div className={styles.value} title={value?.toString()}>
<AnimatedDiv className={styles.value} title={value?.toString()}>
{props?.x?.to(x => formatValue(x))}
</animated.div>
</AnimatedDiv>
{showChange && (
<ChangeLabel
className={styles.change}
@ -47,13 +48,13 @@ export const MetricCard = ({
title={formatValue(change)}
reverseColors={reverseColors}
>
<animated.span>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</animated.span>
<AnimatedDiv>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</AnimatedDiv>
</ChangeLabel>
)}
{showPrevious && (
<animated.div className={classNames(styles.value, styles.prev)} title={diff.toString()}>
<AnimatedDiv className={classNames(styles.value, styles.prev)} title={diff.toString()}>
{prevProps?.x?.to(x => formatValue(x))}
</animated.div>
</AnimatedDiv>
)}
</div>
);