Skip to content

feat(ui): implement dynamic legend system for calendar #55155

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
bbovenzi merged 3 commits into from
Sep 3, 2025
Merged

feat(ui): implement dynamic legend system for calendar #55155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb26169
feat(ui): implement dynamic legend system for calendar
RoyLee1224 Sep 1, 2025
36cbb48
refactor(ui): simplify calendar data handling
RoyLee1224 Sep 2, 2025
db3f84f
refactor(ui): extract calendar color constants
RoyLee1224 Sep 2, 2025
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
18 changes: 10 additions & 8 deletions airflow-core/src/airflow/ui/src/pages/Dag/Calendar/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { ErrorAlert } from "src/components/ErrorAlert";
import { CalendarLegend } from "./CalendarLegend";
import { DailyCalendarView } from "./DailyCalendarView";
import { HourlyCalendarView } from "./HourlyCalendarView";
import { createCalendarScale } from "./calendarUtils";

const spin = keyframes`
from { transform: rotate(0deg); }
Expand Down Expand Up @@ -76,6 +77,11 @@ export const Calendar = () => {
{ enabled: Boolean(dagId) },
);

const scale = useMemo(
() => createCalendarScale(data?.dag_runs ?? [], viewMode, granularity),
[data?.dag_runs, viewMode, granularity],
);

if (!data && !isLoading) {
return (
<Box p={4}>
Expand Down Expand Up @@ -242,25 +248,21 @@ export const Calendar = () => {
) : undefined}
{granularity === "daily" ? (
<>
<DailyCalendarView
colorMode={viewMode}
data={data?.dag_runs ?? []}
selectedYear={selectedDate.year()}
/>
<CalendarLegend colorMode={viewMode} />
<DailyCalendarView data={data?.dag_runs ?? []} scale={scale} selectedYear={selectedDate.year()} />
<CalendarLegend scale={scale} viewMode={viewMode} />
</>
) : (
<HStack align="start" gap={2}>
<Box>
<HourlyCalendarView
colorMode={viewMode}
data={data?.dag_runs ?? []}
scale={scale}
selectedMonth={selectedDate.month()}
selectedYear={selectedDate.year()}
/>
</Box>
<Box display="flex" flex="1" justifyContent="center" pt={16}>
<CalendarLegend colorMode={viewMode} vertical />
<CalendarLegend scale={scale} vertical viewMode={viewMode} />
</Box>
</HStack>
)}
Expand Down
40 changes: 14 additions & 26 deletions airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarLegend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,50 +21,38 @@ import { useTranslation } from "react-i18next";

import { Tooltip } from "src/components/ui";

import type { CalendarColorMode } from "./types";
import type { CalendarScale, CalendarColorMode } from "./types";

type Props = {
readonly colorMode: CalendarColorMode;
readonly scale: CalendarScale;
readonly vertical?: boolean;
readonly viewMode: CalendarColorMode;
};

const totalRunsLegendData = [
{ color: { _dark: "gray.700", _light: "gray.100" }, label: "0" },
{ color: { _dark: "green.300", _light: "green.200" }, label: "1-5" },
{ color: { _dark: "green.500", _light: "green.400" }, label: "6-15" },
{ color: { _dark: "green.700", _light: "green.600" }, label: "16-25" },
{ color: { _dark: "green.900", _light: "green.800" }, label: "26+" },
];

const failedRunsLegendData = [
{ color: { _dark: "gray.700", _light: "gray.100" }, label: "0" },
{ color: { _dark: "red.300", _light: "red.200" }, label: "1-2" },
{ color: { _dark: "red.500", _light: "red.400" }, label: "3-5" },
{ color: { _dark: "red.700", _light: "red.600" }, label: "6-10" },
{ color: { _dark: "red.900", _light: "red.800" }, label: "11+" },
];

export const CalendarLegend = ({ colorMode, vertical = false }: Props) => {
export const CalendarLegend = ({ scale, vertical = false, viewMode }: Props) => {
const { t: translate } = useTranslation("dag");

const legendData = colorMode === "total" ? totalRunsLegendData : failedRunsLegendData;
const legendTitle =
colorMode === "total" ? translate("calendar.totalRuns") : translate("overview.buttons.failedRun_other");
viewMode === "failed" ? translate("overview.buttons.failedRun_other") : translate("calendar.totalRuns");

return (
<Box>
<Box mb={4}>
<Text color="fg.muted" fontSize="sm" fontWeight="medium" mb={3} textAlign="center">
{legendTitle}
</Text>
{vertical ? (
{scale.type === "empty" ? (
<Text color="fg.muted" fontSize="xs" textAlign="center">
{translate("calendar.noRuns")}
</Text>
) : vertical ? (
<VStack align="center" gap={2}>
<Text color="fg.muted" fontSize="xs">
{translate("calendar.legend.more")}
</Text>
<VStack gap={0.5}>
{[...legendData].reverse().map(({ color, label }) => (
<Tooltip content={`${label} ${colorMode === "total" ? "runs" : "failed"}`} key={label}>
{[...scale.legendItems].reverse().map(({ color, label }) => (
<Tooltip content={`${label} ${viewMode === "failed" ? "failed" : "runs"}`} key={label}>
<Box bg={color} borderRadius="2px" cursor="pointer" height="14px" width="14px" />
</Tooltip>
))}
Expand All @@ -79,8 +67,8 @@ export const CalendarLegend = ({ colorMode, vertical = false }: Props) => {
{translate("calendar.legend.less")}
</Text>
<HStack gap={0.5}>
{legendData.map(({ color, label }) => (
<Tooltip content={`${label} ${colorMode === "total" ? "runs" : "failed"}`} key={label}>
{scale.legendItems.map(({ color, label }) => (
<Tooltip content={`${label} ${viewMode === "failed" ? "failed" : "runs"}`} key={label}>
<Box bg={color} borderRadius="2px" cursor="pointer" height="14px" width="14px" />
</Tooltip>
))}
Expand Down
10 changes: 5 additions & 5 deletions airflow-core/src/airflow/ui/src/pages/Dag/Calendar/DailyCalendarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,16 @@ import { useTranslation } from "react-i18next";
import type { CalendarTimeRangeResponse } from "openapi/requests/types.gen";

import { CalendarCell } from "./CalendarCell";
import { createTooltipContent, generateDailyCalendarData, getCalendarCellColor } from "./calendarUtils";
import type { CalendarColorMode } from "./types";
import { createTooltipContent, generateDailyCalendarData } from "./calendarUtils";
import type { CalendarScale } from "./types";

type Props = {
readonly colorMode: CalendarColorMode;
readonly data: Array<CalendarTimeRangeResponse>;
readonly scale: CalendarScale;
readonly selectedYear: number;
};

export const DailyCalendarView = ({ colorMode, data, selectedYear }: Props) => {
export const DailyCalendarView = ({ data, scale, selectedYear }: Props) => {
const { t: translate } = useTranslation("dag");
const dailyData = generateDailyCalendarData(data, selectedYear);

Expand Down Expand Up @@ -112,7 +112,7 @@ export const DailyCalendarView = ({ colorMode, data, selectedYear }: Props) => {

return (
<CalendarCell
backgroundColor={getCalendarCellColor(day.runs, colorMode)}
backgroundColor={scale.getColor(day.counts)}
content={createTooltipContent(day)}
key={day.date}
/>
Expand Down
13 changes: 7 additions & 6 deletions airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,19 @@ import { useTranslation } from "react-i18next";
import type { CalendarTimeRangeResponse } from "openapi/requests/types.gen";

import { CalendarCell } from "./CalendarCell";
import { createTooltipContent, generateHourlyCalendarData, getCalendarCellColor } from "./calendarUtils";
import type { CalendarColorMode } from "./types";
import { createTooltipContent, generateHourlyCalendarData } from "./calendarUtils";
import type { CalendarScale } from "./types";

dayjs.extend(isSameOrBefore);

type Props = {
readonly colorMode: CalendarColorMode;
readonly data: Array<CalendarTimeRangeResponse>;
readonly scale: CalendarScale;
readonly selectedMonth: number;
readonly selectedYear: number;
};

export const HourlyCalendarView = ({ colorMode, data, selectedMonth, selectedYear }: Props) => {
export const HourlyCalendarView = ({ data, scale, selectedMonth, selectedYear }: Props) => {
const { t: translate } = useTranslation("dag");
const hourlyData = generateHourlyCalendarData(data, selectedYear, selectedMonth);

Expand Down Expand Up @@ -159,10 +159,11 @@ export const HourlyCalendarView = ({ colorMode, data, selectedMonth, selectedYea

if (!hourData) {
const noRunsTooltip = `${dayjs(day.day).format("MMM DD")}, ${hour.toString().padStart(2, "0")}:00 - ${translate("calendar.noRuns")}`;
const emptyCounts = { failed: 0, planned: 0, queued: 0, running: 0, success: 0, total: 0 };

return (
<CalendarCell
backgroundColor={getCalendarCellColor([], colorMode)}
backgroundColor={scale.getColor(emptyCounts)}
content={noRunsTooltip}
index={index}
key={`${day.day}-${hour}`}
Expand All @@ -177,7 +178,7 @@ export const HourlyCalendarView = ({ colorMode, data, selectedMonth, selectedYea

return (
<CalendarCell
backgroundColor={getCalendarCellColor(hourData.runs, colorMode)}
backgroundColor={scale.getColor(hourData.counts)}
content={tooltipContent}
index={index}
key={`${day.day}-${hour}`}
Expand Down
Loading