Skip to content
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

Jump to bottom

fix: analytics tooltip #508

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: analytics tooltip #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90b2409
feat: Label and chart data organization by color
7HR4IZ3 Aug 26, 2024
b8e52d0
fix: Removed bottom line for bad entries from chats
7HR4IZ3 Aug 26, 2024
6e4e6da
Merge branch 'main' into fix/analytics-tooltip
hughcrt Sep 7, 2024
d390fb6
feat: add data enrichment page (#546)
hughcrt Sep 9, 2024
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
166 changes: 115 additions & 51 deletions packages/frontend/components/analytics/LineChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
Text,
Title,
Loader,
Flex,
} from "@mantine/core";
import {
Area,
Expand All @@ -18,6 +19,7 @@ import {
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts";

import { formatLargeNumber } from "@/utils/format";
Expand Down Expand Up @@ -57,6 +59,7 @@ function prepareDataForRecharts(
props.forEach((prop) => {
if (splitBy) {
uniqueSplitByValues.forEach((splitByValue) => {
if (!splitByValue) return;
dayData[`${splitByValue || "(unknown)"} ${prop}`] = findDataValue(
data,
splitBy,
Expand Down Expand Up @@ -172,6 +175,31 @@ const CustomizedAxisTick = ({ x, y, payload, index, data, granularity }) => {
);
};

function arrayIterator<T>(
array: T[],
indefinite: boolean = false,
): IterableIterator<T> {
let index = 0;
return {
[Symbol.iterator]: (): IterableIterator<T> => this,

next: (): IteratorResult<T> => {
if (indefinite && index === array.length) {
index = 0;
}

if (index < array.length) {
return { value: array[index++], done: false };
}
return { value: undefined, done: true };
},
};
}

function sum(array: number[]) {
return array.reduce((a, b) => a + b, 0);
}

type LineChartData = {
date: string;
[key: string]: any;
Expand Down Expand Up @@ -229,6 +257,7 @@ function getFigure(agg: string, data: any[], prop: string) {
}
return 0;
}

function LineChartComponent({
data,
title,
Expand All @@ -248,6 +277,8 @@ function LineChartComponent({
cleanData = true,
colors = ["blue", "pink", "indigo", "green", "violet", "yellow"],
}: LineChartProps) {
const colorIterator = arrayIterator(colors, true);

let cleanedData = prepareDataForRecharts(
blocked
? ((
Expand Down Expand Up @@ -283,13 +314,15 @@ function LineChartComponent({
cleanedData = data;
}

const hasData = blocked ? true : cleanedData?.length;
const hasData = blocked || cleanedData?.length > 0;
// (splitBy ? Object.keys(cleanedData[0]).length > 1 : data?.length)
const total =
stat === undefined || stat === null
? getFigure(agg, cleanedData, props[0])
: stat;

const colorMapping: { [key: string]: string } = {};

return (
<Card withBorder p={0} className="lineChart" radius="md">
<Group gap="xs">
Expand Down Expand Up @@ -445,17 +478,38 @@ function LineChartComponent({
if (active && payload && payload.length) {
return (
<Card shadow="md" withBorder>
<Title order={3} size="sm">
{formatDate(label, granularity)}
</Title>
{payload.map(
(item, i) =>
item.value !== 0 && (
<Text key={i}>{`${item.name}: ${formatter(
item.value,
)}`}</Text>
),
)}
<Flex>
<Title order={3} size="sm">
{formatDate(label, granularity)}
</Title>

<Title order={1} size="sm" ml="50%" ta="center">
Total:{" "}
{formatter(
sum(payload.map((item) => item.value || 0)),
)}
</Title>
</Flex>

{payload.map((item, i) => {
if (!item.name || !item.value) {
return null;
}

return (
item.value > 0 &&
item.name && (
<Text
style={{
color: theme.colors[colorMapping[item.name]][4],
}}
key={i}
>
{`${item.name}: ${item.value ? formatter(item.value) : 0}`}
</Text>
)
);
})}
</Card>
);
}
Expand All @@ -464,46 +518,56 @@ function LineChartComponent({
}}
/>

{cleanedData[0] &&
Object.keys(cleanedData[0])
<defs>
{Object.keys(cleanedData[0] || {})
.filter((prop) => prop !== "date")
.map((prop, i) => (
<Fragment key={prop}>
<defs key={prop}>
<linearGradient
color={theme.colors[colors[i % colors.length]][6]}
id={slugify(prop)}
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="5%"
stopColor="currentColor"
stopOpacity={0.4}
/>
<stop
offset="95%"
stopColor="currentColor"
stopOpacity={0}
/>
</linearGradient>
</defs>
<Area
type="monotone"
color={theme.colors[colors[i % colors.length]][4]}
dataKey={prop}
stackId="1"
stroke="currentColor"
dot={false}
fill={`url(#${slugify(prop)})`}
strokeWidth={2}
strokeLinejoin="round"
strokeLinecap="round"
/>
</Fragment>
))}
.map((prop, i) => {
const color = colorIterator.next().value;
colorMapping[prop] = color;

return (
<linearGradient
color={theme.colors[color][6]}
id={slugify(prop)}
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="5%"
stopColor={theme.colors[color][4]}
stopOpacity={0.4}
/>
<stop
offset="95%"
stopColor={theme.colors[color][4]}
stopOpacity={0}
/>
</linearGradient>
);
})}
</defs>

{Object.keys(cleanedData[0] || {})
.filter((prop) => prop !== "date")
.map((prop, i) => {
const color = colorMapping[prop];
return (
<Area
type="monotone"
color={theme.colors[color][4]}
dataKey={prop}
stackId={i}
stroke={theme.colors[color][4]}
dot={false}
fill={`url(#${slugify(prop)})`}
strokeWidth={2}
strokeLinejoin="round"
strokeLinecap="round"
/>
);
})}

{chartExtra}
</AreaChart>
Expand Down
35 changes: 12 additions & 23 deletions packages/frontend/components/layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ export default function Sidebar() {
const [search, setSearch] = useState("");

const isSelfHosted = config.IS_SELF_HOSTED;
console.log(config);

const billingEnabled =
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY && !config.IS_SELF_HOSTED;
Expand Down Expand Up @@ -293,6 +294,15 @@ export default function Sidebar() {
resource: "logs",
},
{ label: "Users", icon: IconUsers, link: "/users", resource: "users" },
{
label: "Enrichments",
icon: IconSparkles,
link: "/enrichments",
resource: "enrichments",
disabled: isSelfHosted
? org.license && org.license.realtimeEvalsEnabled
: false,
},
],
},
{
Expand All @@ -314,15 +324,6 @@ export default function Sidebar() {
? org.license && !org.license.evalEnabled
: false,
},
{
label: "Evaluators",
icon: IconActivityHeartbeat,
link: "/evaluations/realtime",
resource: "evaluations",
disabled: isSelfHosted
? org.license && !org.license.evalEnabled
: false,
},
{
label: "Datasets",
icon: IconDatabase,
Expand All @@ -341,20 +342,6 @@ export default function Sidebar() {
resource: "logs",
subMenu: projectViews,
},
// {
// label: "Project",
// resource: "apiKeys",
// subMenu: [
// !!canUpgrade && {
// label: "Upgrade",
// onClick: openUpgrade,
// c: "vioplet",
// icon: IconBolt,
// disabled: !canUpgrade,
// resource: "billing",
// },
// ].filter((item) => item),
// },
].filter((item) => item);

async function createProject() {
Expand Down Expand Up @@ -397,6 +384,8 @@ export default function Sidebar() {
</Combobox.Option>
));

console.log(APP_MENU);

return (
<Flex
justify="space-between"
Expand Down
4 changes: 0 additions & 4 deletions packages/frontend/components/prompts/Provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ export const ParamItem = ({ name, value, description }) => (
</Group>
);


const validateToolCalls = (toolCalls: any[]) => {
if (!Array.isArray(toolCalls)) return false;

Expand Down Expand Up @@ -138,7 +137,6 @@ export default function ProviderEditor({
},
});


return (
<>
<ParamItem
Expand Down Expand Up @@ -337,8 +335,6 @@ export default function ProviderEditor({
? undefined
: JSON.parse(jsonrepair(tempJSON.trim()));

console.log(empty, repaired);

if (!empty && !validateToolCalls(repaired)) {
throw new Error("Invalid tool calls format");
}
Expand Down
30 changes: 16 additions & 14 deletions packages/frontend/pages/analytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,21 @@ import { useQueryState } from "nuqs";
import { useEffect, useMemo, useState } from "react";
import { deserializeLogic, serializeLogic } from "shared";

type AnalyticsCardOptions = {
dataKey: string;
splitBy?: string;
props: string[];
agg?: "sum" | "avg";
title: string;
description: string;
startDate: Date;
endDate: Date;
granularity: Granularity;
serializedChecks: string;
formatter?: (value: number) => string;
colors?: string[];
};

export function getDefaultDateRange() {
const endOfToday = new Date();
endOfToday.setHours(23, 59, 59, 999);
Expand Down Expand Up @@ -300,20 +315,7 @@ function AnalyticsChart({
serializedChecks,
formatter,
colors,
}: {
dataKey: string;
splitBy?: string;
props: string[];
agg?: "sum" | "avg";
title: string;
description: string;
startDate: Date;
endDate: Date;
granularity: Granularity;
serializedChecks: string;
formatter?: (value: number) => string;
colors?: string[];
}) {
}: AnalyticsCardOptions) {
const { ref, inViewport } = useInViewport();
const [load, setLoad] = useState(inViewport);

Expand Down
Loading
Loading