Weekends

Diagonal-stripe or solid weekend shading behind series on date x axes (line, area, composed, bar)

Installation

terminal

pnpm dlx layro-cli add @bklit/weekends

npx layro-cli add @bklit/weekends

npx layro-cli add @bklit/weekends

bunx layro-cli add @bklit/weekends

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { m } from "motion/react";
import { useId, useMemo } from "react";
import { chartCssVars, useChartStable } from "./chart-context";
import {
  computeWeekendIndexRuns,
  computeWeekendRanges,
  type DateRangeAlign,
  DEFAULT_WEEKEND_DAYS,
} from "./date-ranges";
import { type PatternPresetId, renderPatternPreset } from "./pattern-preset";
import { type CategorySlots, useCategorySlots } from "./use-category-slots";
import { isReferenceAreaVisiblePhase } from "./y-domain-utils";