Skip to content

refactor(charts): centralize typography, dashes, strokes; flip y-axis to right #4722

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

Draft
aseckin wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

refactor(charts): centralize typography, dashes, strokes; flip y-axis to right #4722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 10 additions & 4 deletions front_end/src/components/charts/continuous_area_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ import {
VictoryThemeDefinition,
} from "victory";

import { CHART_DASH } from "@/constants/chart_dash";
import { darkTheme, lightTheme } from "@/constants/chart_theme";
import { CHART_FONT_STYLE } from "@/constants/chart_typography";
import { METAC_COLORS } from "@/constants/colors";
import useAppTheme from "@/hooks/use_app_theme";
import useContainerSize from "@/hooks/use_container_size";
Expand Down Expand Up @@ -729,7 +731,9 @@ const ContinuousAreaChart: FC<Props> = ({
}
})(),
strokeDasharray:
chart.type === "user_previous" ? "2,2" : undefined,
chart.type === "user_previous"
? CHART_DASH.quartile
: undefined,
},
}}
/>
Expand All @@ -740,8 +744,10 @@ const ContinuousAreaChart: FC<Props> = ({
<VictoryPortal>
<VictoryAxis
dependentAxis
orientation="right"
style={{
tickLabels: {
...CHART_FONT_STYLE.tick,
padding: 2,
fill: getThemeColor(METAC_COLORS.gray["700"]),
},
Expand All @@ -753,7 +759,7 @@ const ContinuousAreaChart: FC<Props> = ({
}}
tickValues={yScale.ticks}
tickFormat={yScale.tickFormat}
axisValue={xDomain[0]}
axisValue={xDomain[1]}
/>
</VictoryPortal>
)}
Expand All @@ -773,7 +779,7 @@ const ContinuousAreaChart: FC<Props> = ({
strokeWidth: 0,
},
tickLabels: {
fontSize: 10,
...CHART_FONT_STYLE.tick,
fill: getThemeColor(METAC_COLORS.gray["700"]),
textAnchor: ({ index, ticks }) =>
// We want first and last labels be aligned against area boundaries
Expand Down Expand Up @@ -867,7 +873,7 @@ const ContinuousAreaChart: FC<Props> = ({
return undefined;
}
})(),
strokeDasharray: "2,2",
strokeDasharray: CHART_DASH.quartile,
},
}}
/>
Expand Down
12 changes: 3 additions & 9 deletions front_end/src/components/charts/fan_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
VictoryAxis,
VictoryChart,
VictoryContainer,
VictoryLabel,
VictoryLine,
VictoryPortal,
VictoryScatter,
Expand All @@ -21,6 +20,7 @@ import FanPoint from "@/components/charts/primitives/fan_point";
import PredictionWithRange from "@/components/charts/primitives/prediction_with_range";
import ResolutionDiamond from "@/components/charts/primitives/resolution_diamond";
import ForecastAvailabilityChartOverflow from "@/components/post_card/chart_overflow";
import { CHART_DASH } from "@/constants/chart_dash";
import { darkTheme, lightTheme } from "@/constants/chart_theme";
import { METAC_COLORS } from "@/constants/colors";
import useAppTheme from "@/hooks/use_app_theme";
Expand Down Expand Up @@ -475,7 +475,7 @@ const FanChart: FC<Props> = ({
>
<VictoryAxis
dependentAxis
orientation={isEmbedded ? "right" : undefined}
orientation="right"
label={isEmbedded ? undefined : yLabel}
tickValues={
isEmbedded && embedLabelTicks ? embedLabelTicks : yScale.ticks
Expand All @@ -485,12 +485,6 @@ const FanChart: FC<Props> = ({
...baseYAxisStyle,
grid: isEmbedded ? { display: "none" } : baseYAxisStyle?.grid,
}}
offsetX={
isEmbedded ? undefined : v.axisLabelOffsetX(variantArgs)
}
axisLabelComponent={
isEmbedded ? undefined : <VictoryLabel x={chartWidth} />
}
/>

{isEmbedded && embedGridTicks && (
Expand All @@ -507,7 +501,7 @@ const FanChart: FC<Props> = ({
},
grid: {
...baseYAxisStyle?.grid,
strokeDasharray: "2,4",
strokeDasharray: CHART_DASH.grid,
},
}}
/>
Expand Down
42 changes: 22 additions & 20 deletions front_end/src/components/charts/fan_chart_variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { ComponentProps } from "react";
import { VictoryAxis } from "victory";

import { CHART_DASH } from "@/constants/chart_dash";
import { CHART_POINT_SIZE, CHART_STROKE_WIDTH } from "@/constants/chart_stroke";
import { CHART_FONT_STYLE } from "@/constants/chart_typography";
import { METAC_COLORS } from "@/constants/colors";
import { ThemeColor } from "@/types/theme";

Expand Down Expand Up @@ -61,21 +64,21 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
yAxisStyle: ({ getThemeColor, tickLabelFontSize }) => ({
ticks: { stroke: "transparent" },
axisLabel: {
fontFamily: "Inter",
...CHART_FONT_STYLE.axisLabel,
fontSize: tickLabelFontSize,
fill: getThemeColor(METAC_COLORS.gray["600"]),
},
tickLabels: {
fontFamily: "Inter",
...CHART_FONT_STYLE.tick,
padding: 5,
fontSize: tickLabelFontSize,
fill: getThemeColor(METAC_COLORS.gray["600"]),
},
axis: { stroke: "transparent" },
grid: {
stroke: getThemeColor(METAC_COLORS.gray["400"]),
strokeWidth: 1,
strokeDasharray: "2, 5",
strokeWidth: CHART_STROKE_WIDTH.grid,
strokeDasharray: CHART_DASH.grid,
},
}),
xAxisStyle: () => ({
Expand All @@ -84,13 +87,13 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
}),
domainPadding: ({ isEmbedded }) =>
isEmbedded ? { x: [16, 16] } : { x: [150 / 2, 150 / 2] },
padding: ({ maxLeftPadding }) => ({
left: maxLeftPadding,
padding: ({ maxRightPadding }) => ({
left: 10,
top: 10,
right: 10,
right: maxRightPadding,
bottom: 20,
}),
axisLabelOffsetX: ({ maxLeftPadding }) => Math.max(maxLeftPadding - 2, 8),
axisLabelOffsetX: () => 0,
palette: ({ getThemeColor, isEmbedded }) => ({
communityArea: getThemeColor(METAC_COLORS.olive["500"]),
communityLine: getThemeColor(METAC_COLORS.olive["800"]),
Expand All @@ -102,8 +105,8 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
: getThemeColor(METAC_COLORS.olive["800"]),
}),
resolutionPoint: {
size: 10,
strokeWidth: 2.5,
size: CHART_POINT_SIZE.resolutionDiamond,
strokeWidth: CHART_STROKE_WIDTH.resolutionDiamond,
fill: () => "none",
},
},
Expand All @@ -112,28 +115,28 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
yAxisStyle: ({ tickLabelFontSize, getThemeColor }) => ({
ticks: { stroke: "transparent" },
axisLabel: {
fontFamily: "Inter",
...CHART_FONT_STYLE.axisLabel,
fontSize: tickLabelFontSize,
fill: getThemeColor(METAC_COLORS.gray["600"]),
},
tickLabels: {
fontFamily: "Inter",
...CHART_FONT_STYLE.tick,
padding: 5,
fontSize: tickLabelFontSize,
fill: getThemeColor(METAC_COLORS.gray["600"]),
},
axis: { stroke: "transparent" },
grid: {
stroke: getThemeColor(METAC_COLORS.gray["400"]),
strokeWidth: 1,
strokeDasharray: "2, 5",
strokeWidth: CHART_STROKE_WIDTH.grid,
strokeDasharray: CHART_DASH.grid,
},
}),
xAxisStyle: ({ tickLabelFontSize, getThemeColor }) => ({
ticks: { stroke: "transparent" },
axis: { stroke: "transparent" },
tickLabels: {
fontFamily: "Inter",
...CHART_FONT_STYLE.tick,
fontSize: tickLabelFontSize,
fill: getThemeColor(METAC_COLORS.gray["600"]),
},
Expand All @@ -142,11 +145,10 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
padding: ({ maxRightPadding }) => ({
left: 10,
top: 10,
right: maxRightPadding - 10,
right: maxRightPadding,
bottom: 15,
}),
axisLabelOffsetX: ({ chartWidth, yLabel, tickLabelFontSize }) =>
!yLabel ? chartWidth + 5 : chartWidth - tickLabelFontSize + 5,
axisLabelOffsetX: () => 0,
forceTickCount: 5,
palette: ({ getThemeColor }) => ({
communityArea: getThemeColor(METAC_COLORS.blue["500"]),
Expand All @@ -157,8 +159,8 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
communityPoint: getThemeColor(METAC_COLORS.blue["700"]),
}),
resolutionPoint: {
size: 13,
strokeWidth: 3,
size: CHART_POINT_SIZE.resolutionDiamond,
strokeWidth: CHART_STROKE_WIDTH.resolutionDiamond,
fill: ({ getThemeColor }) => getThemeColor(METAC_COLORS.purple["800"]),
},
},
Expand Down
23 changes: 8 additions & 15 deletions front_end/src/components/charts/group_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@ import {
VictoryChart,
VictoryContainer,
VictoryCursorContainer,
VictoryLabel,
VictoryLabelProps,
VictoryLine,
VictoryPortal,
VictoryScatter,
VictoryThemeDefinition,
} from "victory";

import { CHART_DASH } from "@/constants/chart_dash";
import { darkTheme, lightTheme } from "@/constants/chart_theme";
import { CHART_FONT_STYLE } from "@/constants/chart_typography";
import { METAC_COLORS } from "@/constants/colors";
import useAppTheme from "@/hooks/use_app_theme";
import useContainerSize from "@/hooks/use_container_size";
Expand Down Expand Up @@ -92,9 +93,7 @@ type Props = {
leftPadding?: number;
};

const LABEL_FONT_FAMILY = "Inter";
const BOTTOM_PADDING = 20;
const TICK_FONT_SIZE = 10;
const POINT_SIZE = 9;
const USER_POINT_SIZE = 6;
const USER_POINT_STROKE = 1.5;
Expand Down Expand Up @@ -297,7 +296,7 @@ const GroupChart: FC<Props> = ({
isCursorActive
? {
stroke: getThemeColor(METAC_COLORS.gray["600"]),
strokeDasharray: "2,1",
strokeDasharray: CHART_DASH.cursor,
}
: {
stroke: "transparent",
Expand Down Expand Up @@ -414,12 +413,12 @@ const GroupChart: FC<Props> = ({
stroke: "transparent",
},
axisLabel: {
fontFamily: LABEL_FONT_FAMILY,
...CHART_FONT_STYLE.axisLabel,
fontSize: tickLabelFontSize,
fill: getThemeColor(METAC_COLORS.gray["500"]),
},
tickLabels: {
fontFamily: LABEL_FONT_FAMILY,
...CHART_FONT_STYLE.tick,
padding: 5,
fontSize: tickLabelFontSize,
fill: getThemeColor(METAC_COLORS.gray["700"]),
Expand All @@ -430,17 +429,11 @@ const GroupChart: FC<Props> = ({
grid: {
stroke: getThemeColor(METAC_COLORS.gray["400"]),
strokeWidth: 1,
strokeDasharray: "3, 2",
strokeDasharray: CHART_DASH.grid,
},
}}
label={yLabel}
offsetX={
isNil(yLabel)
? chartWidth + 5
: chartWidth - TICK_FONT_SIZE + 5
}
orientation={"left"}
axisLabelComponent={<VictoryLabel x={chartWidth} />}
orientation="right"
/>
{/* X axis */}
<VictoryPortal>
Expand All @@ -467,7 +460,7 @@ const GroupChart: FC<Props> = ({
stroke: "transparent",
},
tickLabels: {
fontFamily: LABEL_FONT_FAMILY,
...CHART_FONT_STYLE.tick,
padding: 5,
fontSize: tickLabelFontSize,
fill: getThemeColor(METAC_COLORS.gray["700"]),
Expand Down
3 changes: 2 additions & 1 deletion front_end/src/components/charts/histogram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from "victory";

import { darkTheme, lightTheme } from "@/constants/chart_theme";
import { CHART_FONT_STYLE } from "@/constants/chart_typography";
import { METAC_COLORS } from "@/constants/colors";
import useAppTheme from "@/hooks/use_app_theme";
import useContainerSize from "@/hooks/use_container_size";
Expand Down Expand Up @@ -173,7 +174,7 @@ const Histogram: React.FC<HistogramProps> = ({
}
style={{
tickLabels: {
fontSize: 10,
...CHART_FONT_STYLE.tick,
fontWeight: 400,
fill: getThemeColor(METAC_COLORS.gray["700"]),
},
Expand Down
6 changes: 4 additions & 2 deletions front_end/src/components/charts/minified_continuous_area_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import {
VictoryThemeDefinition,
} from "victory";

import { CHART_DASH } from "@/constants/chart_dash";
import { darkTheme, lightTheme } from "@/constants/chart_theme";
import { CHART_FONT_STYLE } from "@/constants/chart_typography";
import { METAC_COLORS } from "@/constants/colors";
import useAppTheme from "@/hooks/use_app_theme";
import useContainerSize from "@/hooks/use_container_size";
Expand Down Expand Up @@ -421,9 +423,10 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
axis: {
stroke: getThemeColor(METAC_COLORS.olive["100"]),
strokeWidth: 0,
strokeDasharray: "4, 4",
strokeDasharray: CHART_DASH.grid,
},
tickLabels: {
...CHART_FONT_STYLE.tick,
fontSize: variant === "feed" ? 10 : 8,
textAnchor: ({ index, ticks }) =>
// We want first and last labels be aligned against area boundaries
Expand All @@ -433,7 +436,6 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
? "end"
: "middle",
fill: getThemeColor(METAC_COLORS.gray["500"]),
fontFamily: "Inter",
},
}}
/>
Expand Down
Loading
Loading