zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: a lot of minor improvements for dashboard

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2025-11-07 12:28:54 +01:00
parent 5b1c582023
commit c762bd7c95
19 changed files with 591 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/start/src/components/charts/chart-tooltip.tsx
View File

@@ -3,7 +3,7 @@ import { createContext, useContext as useBaseContext } from 'react';
import { Tooltip as RechartsTooltip, type TooltipProps } from 'recharts';
export function createChartTooltip<
PropsFromTooltip extends Record<string, unknown>,
PropsFromTooltip,
PropsFromContext extends Record<string, unknown>,
>(
Tooltip: React.ComponentType<

2
apps/start/src/components/feedback-button.tsx
View File

@@ -8,7 +8,7 @@ export function FeedbackButton() {
return (
<Button
variant={'outline'}
className="w-full text-left justify-start [&_svg]:mx-2"
className="text-left justify-start"
icon={SparklesIcon}
onClick={() => {
op.track('feedback_button_clicked');

97
apps/start/src/components/overview/overview-live-histogram.tsx
View File

@@ -4,6 +4,9 @@ import { useQuery } from '@tanstack/react-query';
import { useNumber } from '@/hooks/use-numer-formatter';
import { getChartColor } from '@/utils/theme';
import * as Portal from '@radix-ui/react-portal';
import { bind } from 'bind-event-listener';
import throttle from 'lodash.throttle';
import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import {
@@ -18,7 +21,6 @@ import {
} from 'recharts';
import { BarShapeBlue } from '../charts/common-bar';
import { SerieIcon } from '../report-chart/common/serie-icon';
interface OverviewLiveHistogramProps {
projectId: string;
}
@@ -120,26 +122,38 @@ function Wrapper({ children, count, icons }: WrapperProps) {
// Custom tooltip component that uses portals to escape overflow hidden
const CustomTooltip = ({ active, payload, coordinate }: any) => {
const [tooltipContainer] = useState(() => document.createElement('div'));
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const number = useNumber();
const [position, setPosition] = useState<{ x: number; y: number } | null>(
null,
);
const inactive = !active || !payload?.length;
useEffect(() => {
document.body.appendChild(tooltipContainer);
const handleMouseMove = (e: MouseEvent) => {
setMousePosition({ x: e.clientX, y: e.clientY });
};
document.addEventListener('mousemove', handleMouseMove);
const setPositionThrottled = throttle(setPosition, 50);
const unsubMouseMove = bind(window, {
type: 'mousemove',
listener(event) {
if (!inactive) {
setPositionThrottled({ x: event.clientX, y: event.clientY + 20 });
}
},
});
const unsubDragEnter = bind(window, {
type: 'pointerdown',
listener() {
setPosition(null);
},
});
return () => {
if (document.body.contains(tooltipContainer)) {
document.body.removeChild(tooltipContainer);
}
document.removeEventListener('mousemove', handleMouseMove);
unsubMouseMove();
unsubDragEnter();
};
}, [tooltipContainer]);
}, [inactive]);
if (inactive) {
return null;
}
if (!active || !payload || !payload.length) {
return null;
@@ -147,44 +161,31 @@ const CustomTooltip = ({ active, payload, coordinate }: any) => {
const data = payload[0].payload;
// Smart positioning to avoid going out of bounds
const tooltipWidth = 220; // min-w-[220px] to accommodate referrers
const tooltipHeight = 120; // approximate height with referrers
const offset = 10;
const tooltipWidth = 200;
const correctXPosition = (x: number | undefined) => {
if (!x) {
return undefined;
}
let left = mousePosition.x + offset;
let top = mousePosition.y - offset;
const screenWidth = window.innerWidth;
const newX = x;
// Check if tooltip would go off the right edge
if (left + tooltipWidth > window.innerWidth) {
left = mousePosition.x - tooltipWidth - offset;
}
if (newX + tooltipWidth > screenWidth) {
return screenWidth - tooltipWidth;
}
return newX;
};
// Check if tooltip would go off the left edge
if (left < 0) {
left = offset;
}
// Check if tooltip would go off the top edge
if (top < 0) {
top = mousePosition.y + offset;
}
// Check if tooltip would go off the bottom edge
if (top + tooltipHeight > window.innerHeight) {
top = window.innerHeight - tooltipHeight - offset;
}
const tooltipContent = (
<div
className="flex min-w-[220px] flex-col gap-2 rounded-xl border bg-background/80 p-3 shadow-xl backdrop-blur-sm"
return (
<Portal.Portal
style={{
position: 'fixed',
top,
left,
pointerEvents: 'none',
top: position?.y,
left: correctXPosition(position?.x),
zIndex: 1000,
width: tooltipWidth,
}}
className="bg-background/80 p-3 rounded-md border shadow-xl backdrop-blur-sm"
>
<div className="flex justify-between gap-8 text-muted-foreground">
<div>{data.time}</div>
@@ -234,8 +235,6 @@ const CustomTooltip = ({ active, payload, coordinate }: any) => {
</div>
)}
</React.Fragment>
</div>
</Portal.Portal>
);
return createPortal(tooltipContent, tooltipContainer);
};

58
apps/start/src/components/overview/overview-metrics.tsx
View File

@@ -17,11 +17,13 @@ import { last, omit } from 'ramda';
import React, { useState } from 'react';
import {
Bar,
BarChart,
CartesianGrid,
ComposedChart,
Customized,
Line,
LineChart,
ReferenceLine,
ResponsiveContainer,
XAxis,
YAxis,
@@ -128,6 +130,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
}))}
active={metric === index}
isLoading={overviewQuery.isLoading}
inverted={title.inverted}
/>
))}
@@ -179,6 +182,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
interval={interval}
data={data}
chartType={chartType}
projectId={projectId}
/>
</div>
</div>
@@ -244,15 +248,33 @@ function Chart({
interval,
data,
chartType,
projectId,
}: {
activeMetric: (typeof TITLES)[number];
interval: IInterval;
data: RouterOutputs['overview']['stats']['series'];
chartType: 'bars' | 'lines';
projectId: string;
}) {
const xAxisProps = useXAxisProps({ interval });
const yAxisProps = useYAxisProps();
const [activeBar, setActiveBar] = useState(-1);
const { range, startDate, endDate } = useOverviewOptions();
const trpc = useTRPC();
const references = useQuery(
trpc.reference.getChartReferences.queryOptions(
{
projectId,
startDate,
endDate,
range,
},
{
staleTime: 1000 * 60 * 10,
},
),
);
// Line chart specific logic
let dotIndex = undefined;
@@ -372,6 +394,22 @@ function Chart({
r: 4,
}}
/>
{references.data?.map((ref) => (
<ReferenceLine
key={ref.id}
x={ref.date.getTime()}
stroke={'oklch(from var(--foreground) l c h / 0.1)'}
strokeDasharray={'3 3'}
label={{
value: ref.title,
position: 'centerTop',
fill: '#334155',
fontSize: 12,
}}
fontSize={10}
/>
))}
</LineChart>
</ResponsiveContainer>
</TooltipProvider>
@@ -382,7 +420,7 @@ function Chart({
return (
<TooltipProvider metric={activeMetric} interval={interval}>
<ResponsiveContainer width="100%" height="100%">
<ComposedChart
<BarChart
data={data}
margin={{ top: 0, right: 0, left: 0, bottom: 10 }}
onMouseMove={(e) => {
@@ -426,7 +464,23 @@ function Chart({
<BarShapeBlue isActive={activeBar === props.index} {...props} />
)}
/>
</ComposedChart>
{references.data?.map((ref) => (
<ReferenceLine
key={ref.id}
x={ref.date.getTime()}
stroke={'oklch(from var(--foreground) l c h / 0.1)'}
strokeDasharray={'3 3'}
label={{
value: ref.title,
position: 'centerTop',
fill: '#334155',
fontSize: 12,
}}
fontSize={10}
/>
))}
</BarChart>
</ResponsiveContainer>
</TooltipProvider>
);

17
apps/start/src/components/page-header.tsx
View File

@@ -5,6 +5,7 @@ interface PageHeaderProps {
description?: string;
className?: string;
children?: React.ReactNode;
actions?: React.ReactNode;
}
export function PageHeader({
@@ -12,14 +13,18 @@ export function PageHeader({
description,
className,
children,
actions,
}: PageHeaderProps) {
return (
<div className={cn('space-y-1', className)}>
<h1 className="text-2xl font-semibold">{title}</h1>
{description && (
<p className="text-muted-foreground font-medium">{description}</p>
)}
{children}
<div className={cn('col md:row gap-2', className)}>
<div className={'space-y-1 flex-1'}>
<h1 className="text-2xl font-semibold">{title}</h1>
{description && (
<p className="text-muted-foreground font-medium">{description}</p>
)}
{children}
</div>
<div className="row gap-2">{actions}</div>
</div>
);
}

156
apps/start/src/components/report-chart/area/chart.tsx
View File

@@ -1,18 +1,21 @@
import { useRechartDataModel } from '@/hooks/use-rechart-data-model';
import { useVisibleSeries } from '@/hooks/use-visible-series';
import { useTRPC } from '@/integrations/trpc/react';
import { pushModal } from '@/modals';
import type { IChartData } from '@/trpc/client';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
import { useQuery } from '@tanstack/react-query';
import { isSameDay, isSameHour, isSameMonth } from 'date-fns';
import { isSameDay, isSameHour, isSameMonth, isSameWeek } from 'date-fns';
import { last } from 'ramda';
import React, { useCallback } from 'react';
import {
Area,
CartesianGrid,
ComposedChart,
Customized,
Legend,
Line,
ReferenceLine,
ResponsiveContainer,
Tooltip,
@@ -20,6 +23,7 @@ import {
YAxis,
} from 'recharts';
import { useDashedStroke } from '@/hooks/use-dashed-stroke';
import { useXAxisProps, useYAxisProps } from '../common/axis';
import { SolidToDashedGradient } from '../common/linear-gradient';
import { ReportChartTooltip } from '../common/report-chart-tooltip';
@@ -63,15 +67,20 @@ export function Chart({ data }: Props) {
const { series, setVisibleSeries } = useVisibleSeries(data);
const rechartData = useRechartDataModel(series);
// great care should be taken when computing lastIntervalPercent
// the expression below works for data.length - 1 equal intervals
// but if there are numeric x values in a "linear" axis, the formula
// should be updated to use those values
const lastIntervalPercent =
((rechartData.length - 2) * 100) / (rechartData.length - 1);
let dotIndex = undefined;
if (range === 'today') {
// Find closest index based on times
dotIndex = rechartData.findIndex((item) => {
return isSameHour(item.date, new Date());
});
}
const lastSerieDataItem = last(series[0]?.data || [])?.date || new Date();
const useDashedLastLine = (() => {
if (range === 'today') {
return true;
}
if (interval === 'hour') {
return isSameHour(lastSerieDataItem, new Date());
}
@@ -84,6 +93,10 @@ export function Chart({ data }: Props) {
return isSameMonth(lastSerieDataItem, new Date());
}
if (interval === 'week') {
return isSameWeek(lastSerieDataItem, new Date());
}
return false;
})();
@@ -114,11 +127,34 @@ export function Chart({ data }: Props) {
interval,
});
const handleChartClick = useCallback((e: any) => {
if (e?.activePayload?.[0]) {
const clickedData = e.activePayload[0].payload;
if (clickedData.date) {
pushModal('AddReference', {
datetime: new Date(clickedData.date).toISOString(),
});
}
}
}, []);
const { getStrokeDasharray, calcStrokeDasharray, handleAnimationEnd } =
useDashedStroke({
dotIndex,
});
return (
<>
<ReportChartTooltip.TooltipProvider references={references.data}>
<div className={cn('h-full w-full', isEditMode && 'card p-4')}>
<ResponsiveContainer>
<ComposedChart data={rechartData}>
<ComposedChart data={rechartData} onClick={handleChartClick}>
<Customized component={calcStrokeDasharray} />
<Line
dataKey="calcStrokeDasharray"
legendType="none"
animationDuration={0}
onAnimationEnd={handleAnimationEnd}
/>
<CartesianGrid
strokeDasharray="3 3"
horizontal={true}
@@ -143,60 +179,62 @@ export function Chart({ data }: Props) {
<YAxis {...yAxisProps} />
<XAxis {...xAxisProps} />
<Legend content={<CustomLegend />} />
<Tooltip content={<ReportChartTooltip />} />
<Tooltip content={<ReportChartTooltip.Tooltip />} />
{series.map((serie) => {
const color = getChartColor(serie.index);
return (
<React.Fragment key={serie.id}>
<defs>
<linearGradient
id={`color${color}`}
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop offset="0%" stopColor={color} stopOpacity={0.8} />
<stop
offset={'100%'}
stopColor={color}
stopOpacity={0.1}
/>
</linearGradient>
{useDashedLastLine && (
<SolidToDashedGradient
percentage={lastIntervalPercent}
baseColor={color}
id={`stroke${color}`}
/>
)}
</defs>
<Area
stackId="1"
type={lineType}
name={serie.id}
dataKey={`${serie.id}:count`}
stroke={useDashedLastLine ? `url(#stroke${color})` : color}
fill={`url(#color${color})`}
isAnimationActive={false}
fillOpacity={0.7}
/>
{previous && (
<Area
stackId="2"
type={lineType}
name={`${serie.id}:prev`}
dataKey={`${serie.id}:prev:count`}
stroke={color}
fill={color}
fillOpacity={0.3}
strokeOpacity={0.3}
isAnimationActive={false}
/>
)}
</React.Fragment>
<defs key={`defs-${serie.id}`}>
<linearGradient
id={`color${color}`}
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop offset="0%" stopColor={color} stopOpacity={0.8} />
<stop offset={'100%'} stopColor={color} stopOpacity={0.1} />
</linearGradient>
</defs>
);
})}
{series.map((serie) => {
const color = getChartColor(serie.index);
return (
<Area
key={serie.id}
stackId="1"
type={lineType}
name={serie.id}
dataKey={`${serie.id}:count`}
strokeDasharray={
useDashedLastLine
? getStrokeDasharray(`${serie.id}:count`)
: undefined
}
fill={`url(#color${color})`}
isAnimationActive={false}
fillOpacity={0.7}
/>
);
})}
{previous &&
series.map((serie) => {
const color = getChartColor(serie.index);
return (
<Area
key={`${serie.id}:prev`}
stackId="2"
type={lineType}
name={`${serie.id}:prev`}
dataKey={`${serie.id}:prev:count`}
stroke={color}
fill={color}
fillOpacity={0.3}
strokeOpacity={0.3}
isAnimationActive={false}
/>
);
})}
</ComposedChart>
</ResponsiveContainer>
</div>
@@ -207,6 +245,6 @@ export function Chart({ data }: Props) {
setVisibleSeries={setVisibleSeries}
/>
)}
</>
</ReportChartTooltip.TooltipProvider>
);
}

245
apps/start/src/components/report-chart/common/report-chart-tooltip.tsx
View File

@@ -1,149 +1,148 @@
import { useFormatDateInterval } from '@/hooks/use-format-date-interval';
import { useNumber } from '@/hooks/use-numer-formatter';
import type { IRechartPayloadItem } from '@/hooks/use-rechart-data-model';
import type { IToolTipProps } from '@/types';
import * as Portal from '@radix-ui/react-portal';
import { bind } from 'bind-event-listener';
import throttle from 'lodash.throttle';
import React, { useEffect, useState } from 'react';
import React from 'react';
import { createChartTooltip } from '@/components/charts/chart-tooltip';
import type { RouterOutputs } from '@/trpc/client';
import type { IInterval } from '@openpanel/validation';
import {
format,
isSameDay,
isSameHour,
isSameMinute,
isSameMonth,
isSameWeek,
} from 'date-fns';
import { useReportChartContext } from '../context';
import { PreviousDiffIndicator } from './previous-diff-indicator';
import { SerieIcon } from './serie-icon';
import { SerieName } from './serie-name';
type ReportLineChartTooltipProps = IToolTipProps<{
value: number;
name: string;
dataKey: string;
payload: Record<string, unknown>;
}>;
const getMatchingReferences = (
interval: IInterval,
references: RouterOutputs['reference']['getChartReferences'],
date: Date,
) => {
return references.filter((reference) => {
if (interval === 'minute') {
return isSameMinute(reference.date, date);
}
if (interval === 'hour') {
return isSameHour(reference.date, date);
}
if (interval === 'day') {
return isSameDay(reference.date, date);
}
if (interval === 'week') {
return isSameWeek(reference.date, date);
}
if (interval === 'month') {
return isSameMonth(reference.date, date);
}
return false;
});
};
export function ReportChartTooltip({
active,
payload,
}: ReportLineChartTooltipProps) {
const {
report: { interval, unit },
} = useReportChartContext();
const formatDate = useFormatDateInterval(interval);
const number = useNumber();
const [position, setPosition] = useState<{ x: number; y: number } | null>(
null,
);
type Context = {
references?: RouterOutputs['reference']['getChartReferences'];
};
type Data = {
date: string;
timestamp: number;
[key: `${string}:count`]: number;
[key: `${string}:payload`]: IRechartPayloadItem;
};
export const ReportChartTooltip = createChartTooltip<Data, Context>(
({ context: { references }, data }) => {
const {
report: { interval, unit },
} = useReportChartContext();
const formatDate = useFormatDateInterval(interval);
const number = useNumber();
const inactive = !active || !payload?.length;
useEffect(() => {
const setPositionThrottled = throttle(setPosition, 50);
const unsubMouseMove = bind(window, {
type: 'mousemove',
listener(event) {
if (!inactive) {
setPositionThrottled({ x: event.clientX, y: event.clientY + 20 });
}
},
});
const unsubDragEnter = bind(window, {
type: 'pointerdown',
listener() {
setPosition(null);
},
});
return () => {
unsubMouseMove();
unsubDragEnter();
};
}, [inactive]);
if (inactive) {
return null;
}
const limit = 3;
const sorted = payload
.slice(0)
.filter((item) => !item.dataKey.includes(':prev:count'))
.filter((item) => !item.name.includes(':noTooltip'))
.sort((a, b) => b.value - a.value);
const visible = sorted.slice(0, limit);
const hidden = sorted.slice(limit);
const correctXPosition = (x: number | undefined) => {
if (!x) {
return undefined;
if (!data || data.length === 0) {
return null;
}
const tooltipWidth = 300;
const screenWidth = window.innerWidth;
const newX = x;
const firstItem = data[0];
const matchingReferences = getMatchingReferences(
interval,
references ?? [],
new Date(firstItem.date),
);
if (newX + tooltipWidth > screenWidth) {
return screenWidth - tooltipWidth;
}
return newX;
};
// Get all payload items from the first data point
const payloadItems = Object.keys(firstItem)
.filter((key) => key.endsWith(':payload'))
.map(
(key) =>
firstItem[key as keyof typeof firstItem] as IRechartPayloadItem,
)
.filter((item) => item && typeof item === 'object' && 'id' in item);
return (
<Portal.Portal
style={{
position: 'fixed',
top: position?.y,
left: correctXPosition(position?.x),
zIndex: 1000,
}}
>
<div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3 shadow-xl">
{visible.map((item, index) => {
// If we have a <Cell /> component, payload can be nested
const payload = item.payload.payload ?? item.payload;
const data = (
item.dataKey.includes(':')
? // @ts-expect-error
payload[`${item.dataKey.split(':')[0]}:payload`]
: payload
) as IRechartPayloadItem;
// Sort by count
const sorted = payloadItems.sort((a, b) => (b.count || 0) - (a.count || 0));
const limit = 3;
const visible = sorted.slice(0, limit);
const hidden = sorted.slice(limit);
return (
<React.Fragment key={data.id}>
{index === 0 && data.date && (
<div className="flex justify-between gap-8">
<div>{formatDate(new Date(data.date))}</div>
return (
<div className="flex min-w-[180px] flex-col gap-2">
{visible.map((item, index) => (
<React.Fragment key={item.id}>
{index === 0 && item.date && (
<div className="flex justify-between gap-8">
<div>{formatDate(new Date(item.date))}</div>
</div>
)}
<div className="flex gap-2">
<div
className="w-[3px] rounded-full"
style={{ background: item.color }}
/>
<div className="col flex-1 gap-1">
<div className="flex items-center gap-1">
<SerieIcon name={item.names} />
<SerieName name={item.names} />
</div>
)}
<div className="flex gap-2">
<div
className="w-[3px] rounded-full"
style={{ background: data.color }}
/>
<div className="col flex-1 gap-1">
<div className="flex items-center gap-1">
<SerieIcon name={data.names} />
<SerieName name={data.names} />
</div>
<div className="flex justify-between gap-8 font-mono font-medium">
<div className="row gap-1">
{number.formatWithUnit(data.count, unit)}
{!!data.previous && (
<span className="text-muted-foreground">
({number.formatWithUnit(data.previous.value, unit)})
</span>
)}
</div>
<PreviousDiffIndicator {...data.previous} />
<div className="flex justify-between gap-8 font-mono font-medium">
<div className="row gap-1">
{number.formatWithUnit(item.count, unit)}
{!!item.previous && (
<span className="text-muted-foreground">
({number.formatWithUnit(item.previous.value, unit)})
</span>
)}
</div>
<PreviousDiffIndicator {...item.previous} />
</div>
</div>
</React.Fragment>
);
})}
</div>
</React.Fragment>
))}
{hidden.length > 0 && (
<div className="text-muted-foreground">
and {hidden.length} more...
</div>
)}
{matchingReferences.length > 0 && (
<>
<hr className="border-border" />
{matchingReferences.map((reference) => (
<div
key={reference.id}
className="row justify-between items-center"
>
<div className="font-medium text-sm">{reference.title}</div>
<div className="font-medium text-sm shrink-0 text-muted-foreground">
{format(reference.date, 'HH:mm')}
</div>
</div>
))}
</>
)}
</div>
</Portal.Portal>
);
}
);
},
);

15
apps/start/src/components/report-chart/conversion/chart.tsx
View File

@@ -10,6 +10,8 @@ import {
XAxis,
YAxis,
} from 'recharts';
import { pushModal } from '@/modals';
import { useCallback } from 'react';
import { createChartTooltip } from '@/components/charts/chart-tooltip';
import { useFormatDateInterval } from '@/hooks/use-format-date-interval';
@@ -75,11 +77,22 @@ export function Chart({ data }: Props) {
};
});
const handleChartClick = useCallback((e: any) => {
if (e?.activePayload?.[0]) {
const clickedData = e.activePayload[0].payload;
if (clickedData.date) {
pushModal('AddReference', {
datetime: new Date(clickedData.date).toISOString(),
});
}
}
}, []);
return (
<TooltipProvider conversion={data} interval={interval}>
<div className={cn('h-full w-full', isEditMode && 'card p-4')}>
<ResponsiveContainer>
<LineChart data={rechartData}>
<LineChart data={rechartData} onClick={handleChartClick}>
<CartesianGrid
strokeDasharray="3 3"
horizontal={true}

60
apps/start/src/components/report-chart/histogram/chart.tsx
View File

@@ -1,14 +1,18 @@
import { useRechartDataModel } from '@/hooks/use-rechart-data-model';
import { useTheme } from '@/hooks/use-theme';
import { useVisibleSeries } from '@/hooks/use-visible-series';
import { useTRPC } from '@/integrations/trpc/react';
import { pushModal } from '@/modals';
import type { IChartData } from '@/trpc/client';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
import React from 'react';
import { useQuery } from '@tanstack/react-query';
import React, { useCallback } from 'react';
import {
Bar,
BarChart,
CartesianGrid,
ReferenceLine,
ResponsiveContainer,
Tooltip,
XAxis,
@@ -43,9 +47,23 @@ function BarHover({ x, y, width, height, top, left, right, bottom }: any) {
export function Chart({ data }: Props) {
const {
isEditMode,
report: { previous, interval },
report: { previous, interval, projectId, startDate, endDate, range },
options: { hideXAxis, hideYAxis },
} = useReportChartContext();
const trpc = useTRPC();
const references = useQuery(
trpc.reference.getChartReferences.queryOptions(
{
projectId,
startDate,
endDate,
range,
},
{
staleTime: 1000 * 60 * 10,
},
),
);
const { series, setVisibleSeries } = useVisibleSeries(data);
const rechartData = useRechartDataModel(series);
const yAxisProps = useYAxisProps({
@@ -55,17 +73,32 @@ export function Chart({ data }: Props) {
hide: hideXAxis,
interval,
});
const handleChartClick = useCallback((e: any) => {
if (e?.activePayload?.[0]) {
const clickedData = e.activePayload[0].payload;
if (clickedData.date) {
pushModal('AddReference', {
datetime: new Date(clickedData.date).toISOString(),
});
}
}
}, []);
return (
<>
<ReportChartTooltip.TooltipProvider references={references.data}>
<div className={cn('h-full w-full', isEditMode && 'card p-4')}>
<ResponsiveContainer>
<BarChart data={rechartData}>
<BarChart data={rechartData} onClick={handleChartClick}>
<CartesianGrid
strokeDasharray="3 3"
vertical={false}
className="stroke-def-200"
/>
<Tooltip content={<ReportChartTooltip />} cursor={<BarHover />} />
<Tooltip
content={<ReportChartTooltip.Tooltip />}
cursor={<BarHover />}
/>
<YAxis {...yAxisProps} />
<XAxis {...xAxisProps} scale={'auto'} type="category" />
{previous
@@ -94,6 +127,21 @@ export function Chart({ data }: Props) {
/>
);
})}
{references.data?.map((ref) => (
<ReferenceLine
key={ref.id}
x={ref.date.getTime()}
stroke={'oklch(from var(--foreground) l c h / 0.1)'}
strokeDasharray={'3 3'}
label={{
value: ref.title,
position: 'centerTop',
fill: '#334155',
fontSize: 12,
}}
fontSize={10}
/>
))}
</BarChart>
</ResponsiveContainer>
</div>
@@ -104,6 +152,6 @@ export function Chart({ data }: Props) {
setVisibleSeries={setVisibleSeries}
/>
)}
</>
</ReportChartTooltip.TooltipProvider>
);
}

28
apps/start/src/components/report-chart/line/chart.tsx
View File

@@ -1,15 +1,15 @@
import { useRechartDataModel } from '@/hooks/use-rechart-data-model';
import { useVisibleSeries } from '@/hooks/use-visible-series';
import { useTRPC } from '@/integrations/trpc/react';
import { pushModal } from '@/modals';
import type { IChartData } from '@/trpc/client';
import { cn } from '@/utils/cn';
import { getChartColor } from '@/utils/theme';
import { useQuery } from '@tanstack/react-query';
import { isSameDay, isSameHour, isSameMonth, isSameWeek } from 'date-fns';
import { last } from 'ramda';
import React, { useCallback } from 'react';
import { useCallback } from 'react';
import {
Area,
CartesianGrid,
ComposedChart,
Customized,
@@ -127,11 +127,23 @@ export function Chart({ data }: Props) {
const yAxisProps = useYAxisProps({
hide: hideYAxis,
});
const handleChartClick = useCallback((e: any) => {
if (e?.activePayload?.[0]) {
const clickedData = e.activePayload[0].payload;
if (clickedData.date) {
pushModal('AddReference', {
datetime: new Date(clickedData.date).toISOString(),
});
}
}
}, []);
return (
<>
<ReportChartTooltip.TooltipProvider references={references.data}>
<div className={cn('h-full w-full', isEditMode && 'card p-4')}>
<ResponsiveContainer>
<ComposedChart data={rechartData}>
<ComposedChart data={rechartData} onClick={handleChartClick}>
<Customized component={calcStrokeDasharray} />
<Line
dataKey="calcStrokeDasharray"
@@ -166,7 +178,7 @@ export function Chart({ data }: Props) {
/>
<XAxis {...xAxisProps} />
{series.length > 1 && <Legend content={<CustomLegend />} />}
<Tooltip content={<ReportChartTooltip />} />
<Tooltip content={<ReportChartTooltip.Tooltip />} />
{/* {series.map((serie) => {
const color = getChartColor(serie.index);
return (
@@ -261,7 +273,9 @@ export function Chart({ data }: Props) {
}
// Use for legend
fill={color}
filter="url(#rainbow-line-glow)"
filter={
series.length === 1 ? 'url(#rainbow-line-glow)' : undefined
}
/>
);
})}
@@ -296,6 +310,6 @@ export function Chart({ data }: Props) {
setVisibleSeries={setVisibleSeries}
/>
)}
</>
</ReportChartTooltip.TooltipProvider>
);
}

101
apps/start/src/components/report-chart/report-editor.tsx
View File

@@ -25,6 +25,7 @@ import { GanttChartSquareIcon } from 'lucide-react';
import { useEffect } from 'react';
import type { IServiceReport } from '@openpanel/db';
import EditReportName from '../report/edit-report-name';
interface ReportEditorProps {
report: IServiceReport | null;
@@ -50,66 +51,62 @@ export default function ReportEditor({
};
}, [initialReport, dispatch]);
useEffect(() => {
return bind(window, {
type: 'report-name-change',
listener: (event) => {
if (event instanceof CustomEvent && typeof event.detail === 'string') {
dispatch(setName(event.detail));
}
},
});
}, [dispatch]);
return (
<Sheet>
<div className="grid grid-cols-2 gap-2 p-4 md:grid-cols-6">
<SheetTrigger asChild>
<div>
<Button icon={GanttChartSquareIcon} variant="cta">
<div>
<div className="p-4">
<EditReportName />
</div>
<div className="grid grid-cols-2 gap-2 p-4 pt-0 md:grid-cols-6">
<SheetTrigger asChild>
<Button
icon={GanttChartSquareIcon}
variant="cta"
className="self-start"
>
Pick events
</Button>
</SheetTrigger>
<div className="col-span-4 grid grid-cols-2 gap-2 md:grid-cols-4">
<ReportChartType
className="min-w-0 flex-1"
onChange={(type) => {
dispatch(changeChartType(type));
}}
value={report.chartType}
/>
<TimeWindowPicker
className="min-w-0 flex-1"
onChange={(value) => {
dispatch(changeDateRanges(value));
}}
value={report.range}
onStartDateChange={(date) => dispatch(changeStartDate(date))}
onEndDateChange={(date) => dispatch(changeEndDate(date))}
endDate={report.endDate}
startDate={report.startDate}
/>
<ReportInterval
className="min-w-0 flex-1"
interval={report.interval}
onChange={(newInterval) => dispatch(changeInterval(newInterval))}
range={report.range}
chartType={report.chartType}
startDate={report.startDate}
endDate={report.endDate}
/>
<ReportLineType className="min-w-0 flex-1" />
</div>
<div className="col-start-2 row-start-1 text-right md:col-start-6">
<ReportSaveButton />
</div>
</SheetTrigger>
<div className="col-span-4 grid grid-cols-2 gap-2 md:grid-cols-4">
<ReportChartType
className="min-w-0 flex-1"
onChange={(type) => {
dispatch(changeChartType(type));
}}
value={report.chartType}
/>
<TimeWindowPicker
className="min-w-0 flex-1"
onChange={(value) => {
dispatch(changeDateRanges(value));
}}
value={report.range}
onStartDateChange={(date) => dispatch(changeStartDate(date))}
onEndDateChange={(date) => dispatch(changeEndDate(date))}
endDate={report.endDate}
startDate={report.startDate}
/>
<ReportInterval
className="min-w-0 flex-1"
interval={report.interval}
onChange={(newInterval) => dispatch(changeInterval(newInterval))}
range={report.range}
chartType={report.chartType}
startDate={report.startDate}
endDate={report.endDate}
/>
<ReportLineType className="min-w-0 flex-1" />
</div>
<div className="col-start-2 row-start-1 text-right md:col-start-6">
<ReportSaveButton />
<div className="flex flex-col gap-4 p-4" id="report-editor">
{report.ready && (
<ReportChart report={{ ...report, projectId }} isEditMode />
)}
</div>
</div>
<div className="flex flex-col gap-4 p-4" id="report-editor">
{report.ready && (
<ReportChart report={{ ...report, projectId }} isEditMode />
)}
</div>
<SheetContent className="!max-w-lg" side="left">
<ReportSidebar />
</SheetContent>

15
apps/start/src/components/report/ReportSaveButton.tsx
View File

@@ -6,7 +6,11 @@ import { SaveIcon } from 'lucide-react';
import { toast } from 'sonner';
import { useTRPC } from '@/integrations/trpc/react';
import { useIsFetching, useMutation } from '@tanstack/react-query';
import {
useIsFetching,
useMutation,
useQueryClient,
} from '@tanstack/react-query';
import { useParams } from '@tanstack/react-router';
import { resetDirty } from './reportSlice';
@@ -22,13 +26,20 @@ export function ReportSaveButton({ className }: ReportSaveButtonProps) {
];
const { reportId } = useParams({ strict: false });
const dispatch = useDispatch();
const queryClient = useQueryClient();
const update = useMutation(
trpc.report.update.mutationOptions({
onSuccess() {
onSuccess(res) {
dispatch(resetDirty());
toast('Success', {
description: 'Report updated.',
});
queryClient.invalidateQueries(
trpc.report.list.queryFilter({
dashboardId: res.dashboardId,
projectId: res.projectId,
}),
);
},
onError: handleError,
}),

34
apps/start/src/components/report/edit-report-name.tsx
View File

@@ -1,31 +1,35 @@
import { useDispatch, useSelector } from '@/redux';
import { PencilIcon } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { Input } from '../ui/input';
import { setName } from './reportSlice';
type Props = {
name?: string;
};
const EditReportName = ({ name }: Props) => {
const reportName = useSelector((state) => state.report.name);
const dispatch = useDispatch();
const [isEditing, setIsEditing] = useState(false);
const [newName, setNewName] = useState(name);
const [newName, setNewName] = useState(reportName);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
setNewName(reportName);
}, [reportName]);
const onSubmit = () => {
if (newName === name) {
return setIsEditing(false);
}
if (newName === '') {
setNewName(name);
if (!newName) {
setNewName(reportName);
}
window.dispatchEvent(
new CustomEvent('report-name-change', {
detail: newName === '' ? name : newName,
}),
);
setIsEditing(false);
dispatch(setName(newName));
};
useEffect(() => {
@@ -36,11 +40,10 @@ const EditReportName = ({ name }: Props) => {
if (isEditing) {
return (
<div className="flex">
<input
<div className="flex h-8">
<Input
ref={inputRef}
type="text"
className="w-full rounded-md border border-input p-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
value={newName}
onKeyDown={(e) => {
if (e.key === 'Enter') {
@@ -59,11 +62,14 @@ const EditReportName = ({ name }: Props) => {
return (
<button
type="button"
className="flex cursor-pointer select-none items-center gap-2"
className="flex cursor-pointer select-none items-center gap-2 text-xl font-medium h-8 group"
onClick={() => setIsEditing(true)}
>
{newName ?? 'Unnamed Report'}
<PencilIcon size={16} />
<PencilIcon
size={16}
className="opacity-0 group-hover:opacity-100 transition-opacity"
/>
</button>
);
};

9
apps/start/src/components/sidebar-project-menu.tsx
View File

@@ -117,7 +117,14 @@ export function ActionCTAButton() {
useEffect(() => {
const interval = setInterval(() => {
setCurrentActionIndex((prevIndex) => (prevIndex + 1) % ACTIONS.length);
setCurrentActionIndex((prevIndex) => {
const nextIndex = (prevIndex + 1) % ACTIONS.length;
if (nextIndex === 0 && prevIndex !== 0) {
clearInterval(interval);
return 0;
}
return nextIndex;
});
}, 2000);
return () => clearInterval(interval);

8
apps/start/src/components/sidebar.tsx
View File

@@ -111,7 +111,7 @@ export function SidebarContainer({
{active ? <XIcon size={16} /> : <MenuIcon size={16} />}
</Button>
</div>
<div className="flex h-16 shrink-0 items-center gap-4 border-b border-border px-4">
<div className="flex h-16 shrink-0 items-center gap-2 border-b border-border px-4">
<Link to="/">
<LogoSquare className="max-h-8" />
</Link>
@@ -120,7 +120,6 @@ export function SidebarContainer({
projects={projects}
organizations={organizations}
/>
<ProfileToggle />
</div>
<div
className={cn([
@@ -131,7 +130,10 @@ export function SidebarContainer({
{children}
<div className="mt-auto w-full pt-6">
<FeedbackButton />
<div className="row gap-2 justify-between">
<FeedbackButton />
<ProfileToggle />
</div>
{isSelfHosted && (
<div className={cn('text-sm w-full text-left mt-2')}>
Self-hosted instance