Skip to content

fix: formatting in studio (pt3) #2602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Aenimus merged 10 commits into from
Mar 10, 2026
Merged

fix: formatting in studio (pt3) #2602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e562ec9
fix: formatting studio pt3
comatory Mar 9, 2026
78f080f
fix: typos
comatory Mar 9, 2026
8161809
fix: rendering logic
comatory Mar 9, 2026
c59ea2b
fix: typo
comatory Mar 9, 2026
0f4f568
fix: self-comparison makes namespace validation always fail
comatory Mar 10, 2026
ae49cb2
fix: invalid Tailwind class w-18 for gutter width
comatory Mar 10, 2026
271abde
fix: clearing a time field should still switch the picker to custom mode
comatory Mar 10, 2026
067fb1c
fix: invalid Tailwind class w-18 for gutter width
comatory Mar 10, 2026
5c9eed1
fix: add case insensitive matching to workspace namespace
Aenimus Mar 10, 2026
e34e2a2
Merge branch 'main' into ondrej/eng-9087-cosmostudioci-fix-formatting…
Aenimus Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 16 additions & 31 deletions studio/src/components/analytics/barlist.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { cn } from "@/lib/utils";
import React from "react";
import Link from "next/link";
import { Url } from "next/dist/shared/lib/router/router";
import { cn } from '@/lib/utils';
import React from 'react';
import Link from 'next/link';
import { Url } from 'next/dist/shared/lib/router/router';

type Bar = {
key: string;
Expand Down Expand Up @@ -65,38 +65,29 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
}

return (
<div
ref={ref}
className={cn("flex justify-between space-x-6", className)}
{...other}
>
<div className={cn("relative w-full")}>
<div ref={ref} className={cn('flex justify-between space-x-6', className)} {...other}>
<div className={cn('relative w-full')}>
{data.map((item, idx) => {
const Icon = item.icon;

return (
<div
key={item.key}
className={cn(
"flex items-center rounded-sm bg-primary/30 text-secondary-foreground",
'flex items-center rounded-sm bg-primary/30 text-secondary-foreground',
`h-${rowHeight}`,
rowClassName,
idx === data.length - 1 ? "mb-0" : "mb-2",
idx === data.length - 1 ? 'mb-0' : 'mb-2',
)}
style={{
width: `${widths[idx]}%`,
transition: showAnimation ? "all 1s" : "",
transition: showAnimation ? 'all 1s' : '',
}}
>
<div className={cn("absolute left-2 flex w-full text-sm")}>
{Icon ? <Icon className={cn("mr-2 h-5 w-5")} /> : null}
<div className={cn('absolute left-2 flex w-full text-sm')}>
{Icon ? <Icon className={cn('mr-2 h-5 w-5')} /> : null}
{item.href ? (
<Link
href={item.href}
target={item.target}
rel="noreferrer"
className={cn("flex-1 truncate")}
>
<Link href={item.href} target={item.target} rel="noreferrer" className={cn('flex-1 truncate')}>
{item.name}
</Link>
) : (
Expand All @@ -107,26 +98,20 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
);
})}
</div>
<div className={"min-w-min text-right"}>
<div className={'min-w-min text-right'}>
{data.map((item, idx) => (
<div
key={item.key}
className={cn(
"flex items-center justify-end",
`h-${rowHeight}`,
idx === data.length - 1 ? "mb-0" : "mb-2",
)}
className={cn('flex items-center justify-end', `h-${rowHeight}`, idx === data.length - 1 ? 'mb-0' : 'mb-2')}
>
<p className={cn("whitespace-nowrap text-sm text-foreground")}>
{valueFormatter(item.value)}
</p>
<p className={cn('whitespace-nowrap text-sm text-foreground')}>{valueFormatter(item.value)}</p>
</div>
))}
</div>
</div>
);
});

BarList.displayName = "BarList";
BarList.displayName = 'BarList';

export default BarList;
83 changes: 21 additions & 62 deletions studio/src/components/analytics/charts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,40 +9,33 @@ import {
TooltipProps,
XAxis,
YAxis,
} from "recharts";
import React from "react";
import useWindowSize from "@/hooks/use-window-size";
import { formatDateTime } from "@/lib/format-date";
} from 'recharts';
import React from 'react';
import useWindowSize from '@/hooks/use-window-size';
import { formatDateTime } from '@/lib/format-date';

const labelFormatter = (label: number, utc?: boolean) => {
return utc
? new Date(label).toUTCString()
: label
? formatDateTime(label)
: label;
return utc ? new Date(label).toUTCString() : label ? formatDateTime(label) : label;
};

export const valueFormatter = (tick: number) =>
tick === 0 || tick % 1 != 0 ? "" : `${tick}`;
export const valueFormatter = (tick: number) => (tick === 0 || tick % 1 != 0 ? '' : `${tick}`);

type TimeSetting = "relative" | "local" | "utc";
type TimeSetting = 'relative' | 'local' | 'utc';

export const nanoTimestampToTime = (nano: number) => {
let ms = (nano / 1000000).toFixed(1);

if (parseFloat(ms) > 1000) {
let seconds = (nano / 1000000000).toFixed(1); // Converting nano to seconds
return seconds + " s";
return seconds + ' s';
}
return ms + " ms";
return ms + ' ms';
};

export const tooltipWrapperClassName =
"rounded-md border !border-popover !bg-popover/60 p-2 text-sm shadow-md outline-0 backdrop-blur-lg";
'rounded-md border !border-popover !bg-popover/60 p-2 text-sm shadow-md outline-0 backdrop-blur-lg';

export const ChartTooltip = (
props: TooltipProps<any, any> & { utc?: boolean },
) => {
export const ChartTooltip = (props: TooltipProps<any, any> & { utc?: boolean }) => {
const { utc, ...rest } = props;
return (
<Tooltip
Expand All @@ -53,23 +46,15 @@ export const ChartTooltip = (
);
};

ChartTooltip.displayName = "Tooltip";
ChartTooltip.displayName = 'Tooltip';

export const CustomTooltip = ({
active,
payload,
label,
p95,
utc,
valueLabel = "Value",
}: any) => {
export const CustomTooltip = ({ active, payload, label, p95, utc, valueLabel = 'Value' }: any) => {
if (active && payload && payload.length) {
return (
<div className={tooltipWrapperClassName}>
<p className="label">{labelFormatter(label, utc)}</p>
<p className="intro">
{valueLabel}:{" "}
{p95 ? nanoTimestampToTime(payload[0].value) : payload[0].value}
{valueLabel}: {p95 ? nanoTimestampToTime(payload[0].value) : payload[0].value}
</p>
</div>
);
Expand Down Expand Up @@ -101,12 +86,7 @@ export const BarChartComponent = ({
return (
<ResponsiveContainer width="100%" height={chartHeight} className="-ml-6">
<BarChart data={data}>
<CartesianGrid
color="currenColor"
strokeWidth="0.2"
vertical={false}
strokeDasharray="3 1"
/>
<CartesianGrid color="currentColor" strokeWidth="0.2" vertical={false} strokeDasharray="3 1" />
Comment thread
comatory marked this conversation as resolved.
<Bar dataKey="value" fill="indianred" barSize={12} />
<XAxis
dataKey="timestamp"
Expand All @@ -120,14 +100,8 @@ export const BarChartComponent = ({
right: isMobile ? 16 : 32,
}}
/>
<YAxis
tickFormatter={valueFormatter}
dataKey="value"
axisLine={false}
tickLine={false}
interval={1}
/>
<ChartTooltip utc={viewOption.value === "utc"} />
<YAxis tickFormatter={valueFormatter} dataKey="value" axisLine={false} tickLine={false} interval={1} />
<ChartTooltip utc={viewOption.value === 'utc'} />
</BarChart>
</ResponsiveContainer>
);
Expand Down Expand Up @@ -165,19 +139,10 @@ export const LineChartComponent = ({
className?: string;
}) => {
return (
<ResponsiveContainer
width="100%"
height={chartHeight}
className={className}
>
<ResponsiveContainer width="100%" height={chartHeight} className={className}>
<LineChart data={data}>
{cartesianGrid && (
<CartesianGrid
color="currenColor"
strokeWidth="0.2"
vertical={false}
strokeDasharray="3 1"
/>
<CartesianGrid color="currentColor" strokeWidth="0.2" vertical={false} strokeDasharray="3 1" />
)}
<Line dot={false} type="monotone" dataKey="value" strokeWidth="2" />
<XAxis
Expand All @@ -191,15 +156,9 @@ export const LineChartComponent = ({
padding={xAxisPadding}
hide={hideXAxis}
/>
<YAxis
tickFormatter={yAxisTickFormatter}
dataKey="value"
axisLine={false}
tickLine={false}
hide={hideYAxis}
/>
<YAxis tickFormatter={yAxisTickFormatter} dataKey="value" axisLine={false} tickLine={false} hide={hideYAxis} />

<ChartTooltip utc={viewOption.value === "utc"} />
<ChartTooltip utc={viewOption.value === 'utc'} />
</LineChart>
</ResponsiveContainer>
);
Expand Down
Loading
Loading