bastouu/jira
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gantt

Browse Source
This commit is contained in:
Bastien COIGNOUX
2026-04-26 10:57:13 +02:00
parent f32e74c713
commit 1813603bb3
5 changed files with 107 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.tsx
View File

@ -423,6 +423,7 @@ export default function App() {
groups={groups}
sprintFieldId={sprintFieldResolved}
ganttSprintRowMetric={dashboardCfg.ganttSprintRowMetric}
ganttNonWorkingDates={dashboardCfg.ganttNonWorkingDates}
onGanttSprintRowMetricChange={setGanttSprintRowMetric}
onOpenSettings={() => setSettingsOpen(true)}
/>

30
src/components/DashboardSettingsModal.tsx
View File

@ -5,6 +5,7 @@ import {
GANTT_SPRINT_METRIC_OPTIONS,
mergeImportedConfig,
normalizeFunctionalGapsForSave,
parseGanttNonWorkingDatesFromText,
sanitizeExcludedSprintIds,
type DashboardConfig,
type FunctionalGapBadge,
@ -108,11 +109,18 @@ export function DashboardSettingsModal({ open, config, onClose, onSave, boardSpr
const fileRef = useRef<HTMLInputElement>(null)
const titleId = useId()
const [draft, setDraft] = useState<DashboardConfig>(config)
const [ganttNonWorkInput, setGanttNonWorkInput] = useState('')
useEffect(() => {
if (open) setDraft(config)
}, [open, config])
const configNonWorkKey = config.ganttNonWorkingDates.join('|')
useEffect(() => {
if (!open) return
setGanttNonWorkInput(config.ganttNonWorkingDates.join('\n'))
}, [open, configNonWorkKey])
useEffect(() => {
const el = dialogRef.current
if (!el) return
@ -146,8 +154,10 @@ export function DashboardSettingsModal({ open, config, onClose, onSave, boardSpr
try {
const parsed = JSON.parse(String(reader.result)) as unknown
const merged = mergeImportedConfig(draft, parsed)
if (merged) setDraft(merged)
else alert('Fichier JSON invalide (configuration v1 ou bundle Synology v1).')
if (merged) {
setDraft(merged)
setGanttNonWorkInput(merged.ganttNonWorkingDates.join('\n'))
} else alert('Fichier JSON invalide (configuration v1 ou bundle Synology v1).')
} catch {
alert('Impossible de lire ce fichier JSON.')
}
@ -373,6 +383,21 @@ export function DashboardSettingsModal({ open, config, onClose, onSave, boardSpr
</option>
))}
</select>
<label className="mt-3 block text-[10px] font-semibold uppercase tracking-wide text-indigo-200/80">
Jours non travaillés (Gantt)
</label>
<p className="mt-1 text-[10px] leading-relaxed text-slate-500">
Une date par ligne au format <span className="font-mono text-slate-400">AAAA-MM-JJ</span> (fuseau
local du navigateur). Même style que sam. / dim. : fériés, ponts, fermeture.
</p>
<textarea
rows={4}
spellCheck={false}
placeholder={'2026-05-01\n2026-05-08'}
className="mt-1.5 w-full resize-y rounded-lg border border-white/10 bg-black/30 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-slate-200 outline-none ring-indigo-500/20 focus:ring-1"
value={ganttNonWorkInput}
onChange={(e) => setGanttNonWorkInput(e.target.value)}
/>
<p className="mt-3 text-[10px] font-semibold uppercase tracking-wide text-indigo-200/80">
Sprints à masquer
</p>
@ -649,6 +674,7 @@ export function DashboardSettingsModal({ open, config, onClose, onSave, boardSpr
...draft,
functionalGaps: normalizeFunctionalGapsForSave(draft.functionalGaps),
excludedSprintIds: sanitizeExcludedSprintIds(draft.excludedSprintIds),
ganttNonWorkingDates: parseGanttNonWorkingDatesFromText(ganttNonWorkInput),
})
onClose()
}}

28
src/components/SprintGanttView.tsx
View File

@ -31,6 +31,8 @@ type Props = {
groups: StoryGroup[]
sprintFieldId: string | null
ganttSprintRowMetric: GanttSprintRowMetric
/** Dates yyyy-mm-dd (local) en plus des week-ends pour le fond du Gantt. */
ganttNonWorkingDates: string[]
onGanttSprintRowMetricChange: (m: GanttSprintRowMetric) => void
onOpenSettings: () => void
}
@ -105,7 +107,7 @@ function GanttTimelineBackdrop({
return (
<>
{dayColumns
.filter((c) => c.isWeekend)
.filter((c) => c.isGanttNonWork)
.map((c) => (
<div
key={c.dayStartMs}
@ -145,6 +147,7 @@ export function SprintGanttView({
groups,
sprintFieldId,
ganttSprintRowMetric,
ganttNonWorkingDates,
onGanttSprintRowMetricChange,
onOpenSettings,
}: Props) {
@ -187,9 +190,10 @@ export function SprintGanttView({
[startMs, endMs, ppd],
)
const nonWorkingSet = useMemo(() => new Set(ganttNonWorkingDates), [ganttNonWorkingDates])
const dayColumns = useMemo(
() => ganttDayColumns(startMs, endMs, widthPx),
[startMs, endMs, widthPx],
() => ganttDayColumns(startMs, endMs, widthPx, nonWorkingSet),
[startMs, endMs, widthPx, nonWorkingSet],
)
const monthBands = useMemo(
() => ganttMonthBands(startMs, endMs, widthPx),
@ -271,8 +275,9 @@ export function SprintGanttView({
<p className="mt-1 max-w-3xl text-xs leading-relaxed text-slate-500">
Échelle <span className="text-slate-400">jour / semaine / mois</span> et zoom (loupe) : la
timeline s’étire en pixels par jour — faites défiler horizontalement. En-tête : mois puis
jours / repères ; week-ends en fond plus sombre. Barre = charge (champ Sprint) ou
avancement calendaire. Losanges = jalons (survol pour le détail).
jours (sans répéter le mois) ; week-ends et jours configurés en fond plus sombre. Remplissage
des barres = % de sous-tâches terminées (champ Sprint). Losanges = jalons (survol pour le
détail).
</p>
</div>
<button
@ -286,9 +291,10 @@ export function SprintGanttView({
{!sprintFieldId && (
<p className="mb-3 rounded-lg border border-sky-500/20 bg-sky-500/10 px-3 py-2 text-xs text-sky-100/90">
Sans champ Sprint, la barre reflète surtout l’
<span className="font-medium text-sky-50">avancement temporel</span>. Ajoutez{' '}
<code className="rounded bg-black/30 px-1 font-mono">customfield_…</code> pour la charge réelle.
Sans champ Sprint, le <span className="font-medium text-sky-50">remplissage des barres reste à 0 %</span>{' '}
(aucune sous-tâche rattachée au sprint). Ajoutez{' '}
<code className="rounded bg-black/30 px-1 font-mono">customfield_…</code> pour agréger les sous-tâches
par sprint.
</p>
)}
@ -457,8 +463,10 @@ export function SprintGanttView({
)
const barTitle =
sprintFieldId && delivery.total > 0
? `${s.name}\n${formatSprintRangeFr(s)}\nSous-tâches : ${delivery.done} / ${delivery.total} (${delivery.percent} %)\n${subtitleLines.join('\n')}`
: `${s.name}\n${formatSprintRangeFr(s)}\nAvancée calendaire : ${fill} %\n${subtitleLines.join('\n')}`
? `${s.name}\n${formatSprintRangeFr(s)}\nBarre : ${delivery.percent} % des sous-tâches terminées (${delivery.done} / ${delivery.total})\n${subtitleLines.join('\n')}`
: sprintFieldId
? `${s.name}\n${formatSprintRangeFr(s)}\nBarre : 0 % — aucune sous-tâche (non annulée) dans ce sprint avec le champ Sprint.\n${subtitleLines.join('\n')}`
: `${s.name}\n${formatSprintRangeFr(s)}\nBarre : 0 % — configurez le champ Sprint dans les réglages.\n${subtitleLines.join('\n')}`
return (
<div key={s.id} className="contents">

30
src/lib/dashboardConfig.ts
View File

@ -149,6 +149,28 @@ export function sanitizeExcludedSprintIds(raw: unknown): number[] {
return [...new Set(out)]
}
const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}$/
/** Jours fériés / ponts (clé locale yyyy-mm-dd) — même fond atténué que les week-ends sur le Gantt. */
export function sanitizeGanttNonWorkingDates(raw: unknown): string[] {
if (!Array.isArray(raw)) return []
const out: string[] = []
for (const x of raw) {
const s = typeof x === 'string' ? x.trim().slice(0, 10) : ''
if (ISO_DATE_RE.test(s)) out.push(s)
}
return [...new Set(out)].sort()
}
/** Parse une zone de texte (lignes ou séparateurs virgule / point-virgule). */
export function parseGanttNonWorkingDatesFromText(raw: string): string[] {
const parts = raw
.split(/[\n,;\t]+/)
.map((s) => s.trim())
.filter(Boolean)
return sanitizeGanttNonWorkingDates(parts)
}
export type DashboardConfig = {
version: 1
milestones: Milestone[]
@ -174,6 +196,8 @@ export type DashboardConfig = {
excludedSprintIds: number[]
/** Lignes d’info sous les barres de sprint (Gantt). */
ganttSprintRowMetric: GanttSprintRowMetric
/** Dates non travaillées (yyyy-mm-dd, fuseau local) — fond Gantt comme week-end. */
ganttNonWorkingDates: string[]
}
const STORAGE_KEY = 'dcc-dashboard-config-v1'
@ -189,6 +213,7 @@ export const defaultDashboardConfig = (): DashboardConfig => ({
functionalGaps: defaultFunctionalGaps(),
excludedSprintIds: [],
ganttSprintRowMetric: defaultGanttSprintRowMetric(),
ganttNonWorkingDates: [],
})
/** Import : configuration seule, ou bundle Synology `{ bundleVersion, dashboard }`. */
@ -246,6 +271,7 @@ export function loadDashboardConfig(): DashboardConfig {
functionalGaps: sanitizeFunctionalGapsArray(parsed.functionalGaps, defaultFunctionalGaps()),
excludedSprintIds: sanitizeExcludedSprintIds(parsed.excludedSprintIds),
ganttSprintRowMetric: sanitizeGanttSprintRowMetric(parsed.ganttSprintRowMetric),
ganttNonWorkingDates: sanitizeGanttNonWorkingDates(parsed.ganttNonWorkingDates),
}
} catch {
return defaultDashboardConfig()
@ -329,5 +355,9 @@ export function mergeImportedConfig(
o.ganttSprintRowMetric !== undefined
? sanitizeGanttSprintRowMetric(o.ganttSprintRowMetric)
: current.ganttSprintRowMetric,
ganttNonWorkingDates:
o.ganttNonWorkingDates !== undefined
? sanitizeGanttNonWorkingDates(o.ganttNonWorkingDates)
: current.ganttNonWorkingDates,
}
}

42
src/lib/sprintGantt.ts
View File

@ -200,19 +200,33 @@ export function monthTicksBetween(startMs: number, endMs: number): { ms: number;
return ticks
}
/** Colonne calendaire (jour) projetée sur la timeline — week-ends, grille jour. */
/** Colonne calendaire (jour) projetée sur la timeline — week-ends, jours configurés, grille. */
export type GanttDayColumn = {
dayStartMs: number
weekday: number
x0: number
x1: number
isWeekend: boolean
/** Fond atténué : samedi / dimanche ou date listée dans les réglages Gantt. */
isGanttNonWork: boolean
}
function localIsoDateKey(dayStartMs: number): string {
const d = new Date(dayStartMs)
const y = d.getFullYear()
const m = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${y}-${m}-${day}`
}
/**
* Une entrée par jour local qui intersecte [startMs, endMs] (bornes en pixels pour le fond).
*/
export function ganttDayColumns(startMs: number, endMs: number, widthPx: number): GanttDayColumn[] {
export function ganttDayColumns(
startMs: number,
endMs: number,
widthPx: number,
nonWorkingKeys?: ReadonlySet<string>,
): GanttDayColumn[] {
const cols: GanttDayColumn[] = []
const iter = new Date(startMs)
iter.setHours(0, 0, 0, 0)
@ -229,12 +243,15 @@ export function ganttDayColumns(startMs: number, endMs: number, widthPx: number)
const x0 = msToX(Math.max(dayStart, startMs), startMs, endMs, widthPx)
const x1 = msToX(Math.min(dayEnd, endMs), startMs, endMs, widthPx)
if (x1 > x0 + 0.02) {
const key = localIsoDateKey(dayStart)
const isWeekend = wd === 0 || wd === 6
const isConfigured = nonWorkingKeys?.has(key) ?? false
cols.push({
dayStartMs: dayStart,
weekday: wd,
x0,
x1,
isWeekend: wd === 0 || wd === 6,
isGanttNonWork: isWeekend || isConfigured,
})
}
}
@ -308,10 +325,10 @@ export function ganttSubheaderTicks(
for (let i = 0; i < cols.length; i += step) {
const c = cols[i]!
const d = new Date(c.dayStartMs)
const wdShort = d.toLocaleDateString('fr-FR', { weekday: 'short' }).replace(/\.$/, '')
const dom = d.getDate()
const label =
step === 1 && avgW >= 26
? d.toLocaleDateString('fr-FR', { weekday: 'short', day: 'numeric', month: 'short' })
: d.toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' })
step === 1 && avgW >= 26 ? `${wdShort} ${dom}` : `${dom}`
const x = (c.x0 + c.x1) / 2
const major = d.getDate() === 1 || d.getDay() === 1
out.push({ ms: c.dayStartMs, label, x, major })
@ -326,7 +343,8 @@ export function ganttSubheaderTicks(
while (t <= endMs + MS_DAY && guard++ < 140) {
if (t + 6 * MS_DAY >= startMs) {
const d = new Date(t)
const label = d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
const wdShort = d.toLocaleDateString('fr-FR', { weekday: 'short' }).replace(/\.$/, '')
const label = `${wdShort} ${d.getDate()}`
const x = msToX(t + 3.5 * MS_DAY, startMs, endMs, widthPx)
out.push({ ms: t, label, x, major: true })
}
@ -427,8 +445,8 @@ export function sprintTimeElapsedPercent(s: JiraSprintSnapshot, nowMs = Date.now
}
/**
* Remplissage de la barre : priorité au % sous-tâches terminées (périmètre + champ Sprint),
* sinon avancement calendaire du sprint.
* Remplissage de la barre : uniquement le % de sous-tâches terminées (périmètre + champ Sprint).
* Pas d’avancement calendaire : sans données, la barre reste à 0 %.
*/
export function sprintBarFillPercent(
s: JiraSprintSnapshot,
@ -437,8 +455,8 @@ export function sprintBarFillPercent(
cfg: StatusBucketConfig,
): number {
const delivery = epicScopeSprintProgress(groups, s.id, fieldId, cfg)
if (fieldId && delivery.total > 0) return Math.min(100, delivery.percent)
return sprintTimeElapsedPercent(s)
if (!fieldId || delivery.total === 0) return 0
return Math.min(100, delivery.percent)
}
export function milestoneTooltipText(m: Milestone): string {