+ <>
+ {question.open_lower_bound && (
+
+ {userPreviousBounds &&
+ (userPreviousBounds.belowLower * 100).toFixed(1)}
+ %
+
+ )}
+
+ {checkQuartilesOutOfBorders(userPreviousQuartiles?.lower25)}
+ {getDisplayValue(
+ userPreviousQuartiles?.lower25,
+ question.type,
+ question.scaling,
+ 4
+ )}
+
+
+ {checkQuartilesOutOfBorders(userPreviousQuartiles?.median)}
+ {getDisplayValue(
+ userPreviousQuartiles?.median,
+ question.type,
+ question.scaling,
+ 4
+ )}
+
+
+ {checkQuartilesOutOfBorders(userPreviousQuartiles?.upper75)}
+ {getDisplayValue(
+ userPreviousQuartiles?.upper75,
+ question.type,
+ question.scaling,
+ 4
+ )}
+
+ {question.open_upper_bound && (
+
{(userPreviousBounds!.aboveUpper * 100).toFixed(1)}%
+ )}
+ >
+
+ )}
{withCommunityQuartiles && (
diff --git a/front_end/src/components/charts/continuous_area_chart.tsx b/front_end/src/components/charts/continuous_area_chart.tsx
index 99710d654e..b503ead834 100644
--- a/front_end/src/components/charts/continuous_area_chart.tsx
+++ b/front_end/src/components/charts/continuous_area_chart.tsx
@@ -39,6 +39,7 @@ type ContinuousAreaColor = "orange" | "green";
const CHART_COLOR_MAP: Record
= {
community: "green",
user: "orange",
+ user_previous: "orange",
};
export type ContinuousAreaGraphInput = Array<{
@@ -158,7 +159,7 @@ const ContinuousAreaChart: FC = ({
line: chart.graphLine,
color: getThemeColor(
chart.color === "orange"
- ? METAC_COLORS.orange["800"]
+ ? METAC_COLORS.orange[chart.type === "user" ? "800" : "500"]
: METAC_COLORS.olive["700"]
),
type: chart.type,
@@ -189,6 +190,7 @@ const ContinuousAreaChart: FC = ({
yData: {
community: 0,
user: 0,
+ user_previous: 0,
},
}
);
@@ -233,9 +235,15 @@ const ContinuousAreaChart: FC = ({
data: {
fill:
chart.color === "orange"
- ? getThemeColor(METAC_COLORS.orange["700"])
- : undefined,
- opacity: 0.3,
+ ? getThemeColor(
+ METAC_COLORS.orange[
+ chart.type === "user" ? "700" : "400"
+ ]
+ )
+ : chart.color === "green"
+ ? getThemeColor(METAC_COLORS.olive["500"])
+ : undefined,
+ opacity: chart.type === "user_previous" ? 0.1 : 0.3,
},
}}
/>
@@ -248,8 +256,14 @@ const ContinuousAreaChart: FC = ({
data: {
stroke:
chart.color === "orange"
- ? getThemeColor(METAC_COLORS.orange["800"])
- : undefined,
+ ? getThemeColor(
+ METAC_COLORS.orange[
+ chart.type === "user" ? "800" : "500"
+ ]
+ )
+ : chart.color === "green"
+ ? getThemeColor(METAC_COLORS.olive["500"])
+ : undefined,
strokeDasharray: chart.color === "orange" ? "2,2" : undefined,
},
}}
diff --git a/front_end/src/types/charts.ts b/front_end/src/types/charts.ts
index c62bb59050..f91e4b3df5 100644
--- a/front_end/src/types/charts.ts
+++ b/front_end/src/types/charts.ts
@@ -41,7 +41,7 @@ export enum TimelineChartZoomOption {
All = "all",
}
-export type ContinuousAreaType = "community" | "user";
+export type ContinuousAreaType = "community" | "user" | "user_previous";
export type ContinuousAreaHoverState = {
x: number;