diff --git a/front_end/src/app/(main)/accounts/profile/components/user_info.tsx b/front_end/src/app/(main)/accounts/profile/components/user_info.tsx
index b8407657f4..e6d947b6df 100644
--- a/front_end/src/app/(main)/accounts/profile/components/user_info.tsx
+++ b/front_end/src/app/(main)/accounts/profile/components/user_info.tsx
@@ -15,7 +15,7 @@ import {
UpdateProfileSchema,
updateProfileSchema,
} from "@/app/(main)/accounts/schemas";
-import CalibrationChart from "@/app/(main)/charts/calibration_chart";
+import CalibrationChart from "@/app/(main)/questions/track-record/components/charts/calibration_chart";
import Button from "@/components/ui/button";
import { FormError, Input, Textarea } from "@/components/ui/form_field";
import { useAuth } from "@/contexts/auth_context";
diff --git a/front_end/src/app/(main)/charts/scatter_plot.tsx b/front_end/src/app/(main)/charts/scatter_plot.tsx
deleted file mode 100644
index fbe36b5356..0000000000
--- a/front_end/src/app/(main)/charts/scatter_plot.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-"use client";
-
-import { useTranslations } from "next-intl";
-import React from "react";
-import {
- VictoryAxis,
- VictoryChart,
- VictoryScatter,
- VictoryLine,
-} from "victory";
-
-import ChartContainer from "@/components/charts/primitives/chart_container";
-import XTickLabel from "@/components/charts/primitives/x_tick_label";
-import { darkTheme, lightTheme } from "@/constants/chart_theme";
-import { METAC_COLORS } from "@/constants/colors";
-import useAppTheme from "@/hooks/use_app_theme";
-import useContainerSize from "@/hooks/use_container_size";
-import { TimelineChartZoomOption } from "@/types/charts";
-import {
- generateNumericDomain,
- generateTicksY,
- generateTimestampXScale,
-} from "@/utils/charts";
-
-type HistogramProps = {
- score_scatter_plot: { score: number; score_timestamp: number }[];
-};
-
-const ScatterPlot: React.FC
= ({ score_scatter_plot }) => {
- const t = useTranslations();
- const { theme, getThemeColor } = useAppTheme();
- const chartTheme = theme === "dark" ? darkTheme : lightTheme;
-
- const { ref: chartContainerRef, width: chartWidth } =
- useContainerSize();
-
- const {
- overallAverage,
- movingAverage,
- ticksY,
- ticksYFormat,
- xDomain,
- xScale,
- } = buildChartData({ score_scatter_plot, chartWidth });
-
- return (
-
-
- {
- return {
- x: point.score_timestamp,
- y: point.score,
- size: 5,
- };
- })}
- style={{
- data: {
- stroke: getThemeColor(METAC_COLORS.blue["600"]),
- fill: "none",
- strokeWidth: 1,
- },
- }}
- />
-
-
- );
-};
-
-function buildChartData({
- score_scatter_plot,
- chartWidth,
-}: {
- score_scatter_plot: { score: number; score_timestamp: number }[];
- chartWidth: number;
-}) {
- const overallAverage =
- score_scatter_plot.length === 0
- ? 0
- : score_scatter_plot.reduce((reducer, data) => {
- return reducer + data.score;
- }, 0) / score_scatter_plot.length;
-
- let scoreLocalSum = 0;
- const movingAverage = score_scatter_plot.map((data, index) => {
- scoreLocalSum += data.score;
- return {
- x: data.score_timestamp,
- y: scoreLocalSum / (index + 1),
- };
- });
-
- const { ticks: ticksY, tickFormat: ticksYFormat } = generateTicksY(
- 270,
- [-100, -50, 0, 50, 100]
- );
- const xDomain = generateNumericDomain(
- score_scatter_plot.map((data) => data.score_timestamp),
- "all" as TimelineChartZoomOption
- );
- const xScale = generateTimestampXScale(xDomain, chartWidth);
-
- return {
- overallAverage,
- movingAverage,
- ticksY,
- ticksYFormat,
- xDomain,
- xScale,
- };
-}
-
-export default ScatterPlot;
diff --git a/front_end/src/app/(main)/charts/user_histogram.tsx b/front_end/src/app/(main)/charts/user_histogram.tsx
deleted file mode 100644
index dd2e53f9cc..0000000000
--- a/front_end/src/app/(main)/charts/user_histogram.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-
-import { range } from "lodash";
-import { useTranslations } from "next-intl";
-import React from "react";
-import {
- VictoryAxis,
- VictoryChart,
- VictoryContainer,
- VictoryArea,
-} from "victory";
-
-import { darkTheme, lightTheme } from "@/constants/chart_theme";
-import useAppTheme from "@/hooks/use_app_theme";
-import { generateTicksY } from "@/utils/charts";
-
-type HistogramProps = {
- rawHistogramData: {
- bin_start: number;
- bin_end: number;
- pct_scores: number;
- }[];
- color: string;
-};
-
-const UserHistogram: React.FC = ({
- rawHistogramData,
- color,
-}) => {
- const histogramData = mapHistogramData(rawHistogramData);
- const t = useTranslations();
- const { theme } = useAppTheme();
- const chartTheme = theme === "dark" ? darkTheme : lightTheme;
-
- const { ticks: ticksY, tickFormat: ticksYFormat } = generateTicksY(
- 180,
- [0.0, 0.2, 0.4, 0.6, 0.8, 1.0]
- );
- return (
- = ({ score_scatter_plot }) => {
+ const t = useTranslations();
+ const { theme, getThemeColor } = useAppTheme();
+ const chartTheme = theme === "dark" ? darkTheme : lightTheme;
+
+ const { ref: chartContainerRef, width: chartWidth } =
+ useContainerSize();
+
+ const {
+ overallAverage,
+ movingAverage,
+ ticksY,
+ ticksYFormat,
+ xDomain,
+ xScale,
+ } = buildChartData({ score_scatter_plot, chartWidth });
+
+ const [activeIndex, setActiveIndex] = useState(null);
+ const hoverData = useMemo(() => {
+ if (activeIndex === null || !score_scatter_plot[activeIndex]) {
+ return null;
+ }
+
+ const point = score_scatter_plot[activeIndex];
+ if (!point) {
+ return null;
+ }
+
+ return point;
+ }, [activeIndex, score_scatter_plot]);
+
+ const averageScore = useMemo(() => {
+ const sum = score_scatter_plot.reduce((acc, { score }) => acc + score, 0);
+ return (sum / score_scatter_plot.length).toFixed(3);
+ }, [score_scatter_plot]);
+
+ return (
+ <>
+
+
+ {
+ return {
+ x: point.score_timestamp,
+ y: point.score,
+ size: index === activeIndex ? 6 : 5,
+ };
+ })}
+ style={{
+ data: {
+ stroke: getThemeColor(METAC_COLORS.blue["600"]),
+ fill: "none",
+ strokeWidth: 1,
+ },
+ }}
+ events={[
+ {
+ target: "data",
+ eventHandlers: {
+ onMouseOver: (_event, datum) => {
+ setActiveIndex(datum.index);
+ return {
+ mutation: (props) => {
+ return {
+ style: Object.assign({}, props.style, {
+ strokeWidth: 3,
+ }),
+ };
+ },
+ };
+ },
+ onMouseOut: () => {
+ setActiveIndex(null);
+ return {
+ mutation: () => null,
+ };
+ },
+ },
+ },
+ ]}
+ />
+
+
+
+ {hoverData ? (
+ <>
+
+ {hoverData.question_title}
+
+
+ {t("resolutionLabel")} {hoverData.question_resolution}
+
+
+ ) : (
+
{t("scatterPlotHoverMessage")}
+ )}
+
= ({
+ rawHistogramData,
+ color,
+}) => {
+ const histogramData = mapHistogramData(rawHistogramData);
+ const t = useTranslations();
+ const { theme } = useAppTheme();
+ const chartTheme = theme === "dark" ? darkTheme : lightTheme;
+
+ const { ticks: ticksY, tickFormat: ticksYFormat } = generateTicksY(
+ 180,
+ [0.0, 0.2, 0.4, 0.6, 0.8, 1.0]
+ );
+
+ const averageScore = useMemo(() => {
+ const sum = histogramData.reduce((acc, { y }) => acc + y, 0);
+
+ return Math.round((sum / histogramData.length) * 1000);
+ }, [histogramData]);
+
+ return (
+ <>
+ = ({ totalQuestions, averageScore }) => {
+ const t = useTranslations();
+
+ return (
+
+ {t("totalQuestions")}
+
+ {" " + totalQuestions}
+
+ {t("averageScore")}
+
+ {" " + averageScore}
+
+
+ );
+};
+
+export default TrackRecordChartHero;
diff --git a/front_end/src/app/(main)/questions/track-record/components/track_record_charts.tsx b/front_end/src/app/(main)/questions/track-record/components/track_record_charts.tsx
new file mode 100644
index 0000000000..081d2eeca4
--- /dev/null
+++ b/front_end/src/app/(main)/questions/track-record/components/track_record_charts.tsx
@@ -0,0 +1,70 @@
+import classNames from "classnames";
+import { useTranslations } from "next-intl";
+import { FC } from "react";
+
+import {
+ TrackRecordCalibrationCurveItem,
+ TrackRecordHistogramItem,
+ TrackRecordScatterPlotItem,
+} from "@/types/track_record";
+
+import CalibrationChart from "./charts/calibration_chart";
+import ScatterPlot from "./charts/scatter_plot";
+import UserHistogram from "./charts/user_histogram";
+
+type Props = {
+ scatterPlot?: TrackRecordScatterPlotItem[];
+ scoreHistogram?: TrackRecordHistogramItem[];
+ calibrationCurve?: TrackRecordCalibrationCurveItem[];
+ className?: string;
+};
+
+const TrackRecordCharts: FC = ({
+ scatterPlot,
+ scoreHistogram,
+ calibrationCurve,
+ className,
+}) => {
+ const t = useTranslations();
+
+ return (
+
+
+ {t("scoreScatterPlot")}
+
+ {scatterPlot &&
}
+
+ {t("scoreHistogram")}
+
+ {scoreHistogram && (
+
+ )}
+
+
+ {t("calibrationCurve")}
+
+ {calibrationCurve &&
}
+
+
+
+
+
+
+
+
+
+
+ {t("calibrationCurveInfo")}
+
+
+
+ {t("metaculusTrackRecord")}
+
+
+ {t.rich("trackRecordOutdatedMessage", {
+ link: (chunks) => (
+
+
+ );
+}
diff --git a/front_end/src/app/(main)/charts/histogram.tsx b/front_end/src/components/charts/histogram.tsx
similarity index 98%
rename from front_end/src/app/(main)/charts/histogram.tsx
rename to front_end/src/components/charts/histogram.tsx
index f6f077d158..df79f16b92 100644
--- a/front_end/src/app/(main)/charts/histogram.tsx
+++ b/front_end/src/components/charts/histogram.tsx
@@ -8,8 +8,6 @@ import {
VictoryBar,
VictoryChart,
VictoryContainer,
- VictoryLine,
- VictoryLabel,
} from "victory";
import { darkTheme, lightTheme } from "@/constants/chart_theme";
diff --git a/front_end/src/services/track_record.ts b/front_end/src/services/track_record.ts
new file mode 100644
index 0000000000..d331e4e47f
--- /dev/null
+++ b/front_end/src/services/track_record.ts
@@ -0,0 +1,10 @@
+import { GlobalTrackRecord } from "@/types/track_record";
+import { get } from "@/utils/fetch";
+
+class TrackRecordApi {
+ static async getGlobalTrackRecord() {
+ return await get("/metaculus_track_record");
+ }
+}
+
+export default TrackRecordApi;
diff --git a/front_end/src/types/track_record.ts b/front_end/src/types/track_record.ts
new file mode 100644
index 0000000000..68aa1721d0
--- /dev/null
+++ b/front_end/src/types/track_record.ts
@@ -0,0 +1,27 @@
+import { Resolution } from "@/types/post";
+
+export type TrackRecordHistogramItem = {
+ bin_start: number;
+ bin_end: number;
+ pct_scores: number;
+};
+
+export type TrackRecordScatterPlotItem = {
+ score: number;
+ score_timestamp: number;
+ question_title: string;
+ question_resolution: Resolution;
+};
+
+export type TrackRecordCalibrationCurveItem = {
+ user_lower_quartile: number;
+ user_middle_quartile: number;
+ user_upper_quartile: number;
+ perfect_calibration: number;
+};
+
+export type GlobalTrackRecord = {
+ calibration_curve: TrackRecordCalibrationCurveItem[];
+ score_histogram: TrackRecordHistogramItem[];
+ score_scatter_plot: TrackRecordScatterPlotItem[];
+};
diff --git a/front_end/src/types/users.ts b/front_end/src/types/users.ts
index a651332822..2d3ff20895 100644
--- a/front_end/src/types/users.ts
+++ b/front_end/src/types/users.ts
@@ -1,4 +1,9 @@
import { SubscriptionEmailType } from "@/types/notifications";
+import {
+ TrackRecordScatterPlotItem,
+ TrackRecordHistogramItem,
+ TrackRecordCalibrationCurveItem,
+} from "@/types/track_record";
import { ProfilePreferencesType } from "./preferences";
@@ -28,13 +33,9 @@ export type User = {
};
export type UserProfile = User & {
- calibration_curve?: any;
- score_histogram?: {
- bin_start: number;
- bin_end: number;
- pct_scores: number;
- }[];
- score_scatter_plot?: { score: number; score_timestamp: number }[];
+ calibration_curve?: TrackRecordCalibrationCurveItem[];
+ score_histogram?: TrackRecordHistogramItem[];
+ score_scatter_plot?: TrackRecordScatterPlotItem[];
nr_forecasts?: number;
nr_comments?: number;
avg_score?: number;