Draw dashed partial periods at the start and end of main series

apata · apata · commit c37fa8f8b180 · 2026-04-07T20:43:02.000+03:00
diff --git a/assets/js/dashboard/components/graph.tsx b/assets/js/dashboard/components/graph.tsx
@@ -235,7 +235,6 @@ function InnerGraph<T extends ReadonlyArray<number | null>>({
                 line.stopIndexExclusive !== undefined
                   ? i < line.stopIndexExclusive
                   : true
-              console.log(i, line.lineType, [line.startIndexInclusive,line.stopIndexExclusive],{valueDefined, atOrOverStart, beforeEnd})
               return valueDefined && atOrOverStart && beforeEnd
             },
             xAccessor: (_d, index) => x(index),
diff --git a/assets/js/dashboard/stats/graph/main-graph-data.test.ts b/assets/js/dashboard/stats/graph/main-graph-data.test.ts
@@ -1,6 +1,7 @@
 import {
   getChangeInPercentagePoints,
-  getRelativeChange
+  getRelativeChange,
+  getLineSegments
 } from './main-graph-data'
 
 describe(`${getChangeInPercentagePoints.name}`, () => {
@@ -38,3 +39,75 @@ describe(`${getRelativeChange.name}`, () => {
     expect(getRelativeChange(50, 100)).toBe(-50)
   })
 })
+
+const np = (value = 0) => ({ value, isPartial: false, timeLabel: '' })
+const p = (value = 0) => ({ value, isPartial: true, timeLabel: '' })
+const gap = () => ({ value: null, isPartial: null, timeLabel: null })
+
+describe(`${getLineSegments.name}`, () => {
+  it('returns empty for empty input', () => {
+    expect(getLineSegments([])).toEqual([])
+  })
+
+  it('returns empty for a single point (no edge to draw)', () => {
+    expect(getLineSegments([np()])).toEqual([])
+  })
+
+  it('returns empty for a single gap', () => {
+    expect(getLineSegments([gap()])).toEqual([])
+  })
+
+  it('returns a full segment for two non-partial points', () => {
+    expect(getLineSegments([np(), np()])).toEqual([
+      { startIndexInclusive: 0, stopIndexExclusive: 2, type: 'full' }
+    ])
+  })
+
+  it('returns a partial segment for two partial points', () => {
+    expect(getLineSegments([p(), p()])).toEqual([
+      { startIndexInclusive: 0, stopIndexExclusive: 2, type: 'partial' }
+    ])
+  })
+
+  it('returns partial when connecting non-partial to partial', () => {
+    expect(getLineSegments([np(), p()])).toEqual([
+      { startIndexInclusive: 0, stopIndexExclusive: 2, type: 'partial' }
+    ])
+  })
+
+  it('returns partial when connecting partial to non-partial', () => {
+    expect(getLineSegments([p(), np()])).toEqual([
+      { startIndexInclusive: 0, stopIndexExclusive: 2, type: 'partial' }
+    ])
+  })
+
+  it('handles single full period in the middle of two partial periods', () => {
+    expect(getLineSegments([p(), np(), p()])).toEqual([
+      { startIndexInclusive: 0, stopIndexExclusive: 3, type: 'partial' }
+    ])
+  })
+
+  it('handles partial periods on both ends', () => {
+    expect(getLineSegments([p(), np(), np(), p()])).toEqual([
+      { startIndexInclusive: 0, stopIndexExclusive: 2, type: 'partial' },
+      { startIndexInclusive: 1, stopIndexExclusive: 3, type: 'full' },
+      { startIndexInclusive: 2, stopIndexExclusive: 4, type: 'partial' }
+    ])
+  })
+
+  it('handles leading gaps', () => {
+    expect(
+      getLineSegments([gap(), gap(), np(), np(), np(), np(), p()])
+    ).toEqual([
+      { startIndexInclusive: 2, stopIndexExclusive: 6, type: 'full' },
+      { startIndexInclusive: 5, stopIndexExclusive: 7, type: 'partial' }
+    ])
+  })
+
+  it('handles trailing gaps', () => {
+    expect(getLineSegments([np(), np(), p(), gap(), gap()])).toEqual([
+      { startIndexInclusive: 0, stopIndexExclusive: 2, type: 'full' },
+      { startIndexInclusive: 1, stopIndexExclusive: 3, type: 'partial' }
+    ])
+  })
+})
diff --git a/assets/js/dashboard/stats/graph/main-graph-data.ts b/assets/js/dashboard/stats/graph/main-graph-data.ts
@@ -144,7 +144,7 @@ export const remapAndFillData = ({
         comparisonTimeLabel,
         change,
         isPartial
-      }
+      } as GraphDatum
     })
 
   return {
@@ -186,61 +186,64 @@ export const getRelativeChange = (
   return Math.round(((value - comparisonValue) / comparisonValue) * 100)
 }
 
-type Slice = {
+export type LineSegment = {
   startIndexInclusive: number
-  endIndexExclusive: number
-  isPartialLine: boolean
+  stopIndexExclusive: number
+  type: 'full' | 'partial'
 }
 
-// slices [B, A, A, A, A, B, B, B] to [0, 1], [1, 5], [5, 8]
-export function getSlices(
-  data: { value: number | null; isPartial: boolean | null }[]
-): Slice[] {
-  const slices: Slice[] = []
-  let currentSlice: Slice | null = null
-
-  data.forEach((datum, index) => {
-    if (datum.value !== null) {
-      if (!currentSlice) {
-        currentSlice = {
-          startIndexInclusive: index,
-          endIndexExclusive: index + 1,
-          isPartialLine: datum.isPartial ?? false
-        }
-      } else {
-        if (datum.isPartial === currentSlice.isPartialLine) {
-          currentSlice.endIndexExclusive = index + 1
-        } else {
-          slices.push(currentSlice)
-          currentSlice = {
-            startIndexInclusive: index,
-            endIndexExclusive: index + 1,
-            isPartialLine: datum.isPartial ?? false
-          }
-        }
-      }
+// Computes drawable line segments from a series of points.
+// A segment's dash style is determined by its edges: dashed if either endpoint
+// is partial, solid if both are non-partial. Boundary points between a solid
+// and a dashed segment are shared (appear as the end of one and start of the next).
+export function getLineSegments(data: MainSeriesValue[]): LineSegment[] {
+  return data.reduce((segments: LineSegment[], point, i) => {
+    if (i === 0) {
+      return segments
+    }
+    const prev = data[i - 1]
+    if (prev.value === null || point.value === null) {
+      return segments
     }
-  })
 
-  if (currentSlice) {
-    slices.push(currentSlice)
-  }
+    const type = prev.isPartial || point.isPartial ? 'partial' : 'full'
+    const lastSegment = segments[segments.length - 1]
 
-  return slices
+    if (lastSegment?.type === type && lastSegment.stopIndexExclusive === i) {
+      return [
+        ...segments.slice(0, -1),
+        { ...lastSegment, stopIndexExclusive: i + 1 }
+      ]
+    }
+
+    return [
+      ...segments,
+      { startIndexInclusive: i - 1, stopIndexExclusive: i + 1, type }
+    ]
+  }, [])
 }
 
 /**
  * A data point for the graph and tooltip.
  * It's x position is its index in `GraphDatum[]` array.
  * The values for `value`, `comparisonValue` should be plotted on the y axis, when they are defined for the x position.
  */
-type GraphDatum = {
-  /** When `value` is null, it means the main series isn't defined in this x position */
-  value: number | null
-  timeLabel: string | null
-  isPartial: boolean | null
-  /** When `comparisonValue` is null, it means the comparison series isn't defined in this x position */
-  comparisonValue?: number | null
-  comparisonTimeLabel?: string | null
+export type GraphDatum = {
   change?: number | null
+} & MainSeriesValue &
+  ComparisonSeriesValue
+
+type NotDefinedValue = { value: null; isPartial: null; timeLabel: null }
+type DefinedValue = { value: number; isPartial: boolean; timeLabel: string }
+type MainSeriesValue = NotDefinedValue | DefinedValue
+
+type NotDefinedComparisonValue = {
+  comparisonValue: null
+  isPartial: null
+  comparisonTimeLabel: null
+}
+type DefinedComparisonValue = {
+  comparisonValue: number
+  comparisonTimeLabel: string
 }
+type ComparisonSeriesValue = NotDefinedComparisonValue | DefinedComparisonValue
diff --git a/assets/js/dashboard/stats/graph/main-graph.tsx b/assets/js/dashboard/stats/graph/main-graph.tsx
@@ -28,7 +28,7 @@ import { Graph, PointerHandler, SeriesConfig } from '../../components/graph'
 import { useSiteContext, PlausibleSite } from '../../site-context'
 import { GraphTooltipWrapper } from '../../components/graph-tooltip'
 import { MainGraphResponse } from './fetch-main-graph'
-import { remapAndFillData } from './main-graph-data'
+import { remapAndFillData, getLineSegments, GraphDatum } from './main-graph-data'
 
 const height = 368
 const marginTop = 16
@@ -37,22 +37,6 @@ const marginBottom = 32
 const defaultMarginLeft = 16 // this is adjusted by the Graph component based on y-axis label width
 const hoverBuffer = 4
 
-/**
- * A data point for the graph and tooltip:
- * it's x position is its index in GraphDatum[] array,
- * y positions are value, comparisonValue.
- * Remapped from @see MainGraphResponse to fill empty buckets that BE
- * doesn't return.
- */
-type GraphDatum = {
-  value: number | null
-  isPartial: boolean | null
-  timeLabel: string | null
-  comparisonValue?: number | null
-  comparisonTimeLabel?: string | null
-  change?: number | null
-}
-
 type MainGraphData = MainGraphResponse & {
   period: DashboardPeriod
   interval: string
@@ -100,39 +84,11 @@ export const MainGraph = ({
 
     const gradients = [primaryGradient, secondaryGradient]
 
-    const slices: {
-      startIndexInclusive: number
-      stopIndexExclusive: number
-      lineType: 'solid' | 'dashed' | 'gap'
-    }[] = []
-    let slice: {
-      startIndexInclusive: number
-      stopIndexExclusive: number
-      lineType: 'solid' | 'dashed' | 'gap'
-    } | null = null
+    const lineSegments = getLineSegments(remappedData)
+
     // can't be done in a single pass with remapAndFillData
     // because we need the xLabels formatting parameters to be known
     const remappedDataInGraphFormat = remappedData.map((d, bucketIndex) => {
-      const lineType =
-        d.value === null ? 'gap' : d.isPartial ? 'dashed' : 'solid'
-      console.log(lineType)
-
-      if (slice && slice.lineType !== lineType) {
-        slice.stopIndexExclusive = bucketIndex
-        slices.push(slice)
-        slice = null
-      }
-
-      if (slice) {
-        slice.stopIndexExclusive = bucketIndex + 1
-      } else {
-        slice = {
-          startIndexInclusive: bucketIndex,
-          stopIndexExclusive: bucketIndex + 1,
-          lineType
-        }
-      }
-
       const dataPoint = {
         values: [d.value ?? null, d.comparisonValue ?? null] as const,
         xLabel:
@@ -155,30 +111,20 @@ export const MainGraph = ({
 
       return dataPoint
     })
-    if (slice !== null) {
-      slices.push(slice)
-    }
 
-    console.log(slices)
     const mainSeries: SeriesConfig = {
-      lines: slices
-        .filter((s) => s.lineType === 'solid' || s.lineType === 'dashed')
-        .map((s) => ({
-          startIndexInclusive: s.startIndexInclusive,
-          stopIndexExclusive: s.stopIndexExclusive + 1,
-          lineClassName: classNames(
-            sharedPathClass,
-            mainPathClass,
-            { dashed: dashedPathClass, solid: roundedPathClass }[
-              s.lineType as 'solid' | 'dashed'
-            ]
-          ),
-          lineType: s.lineType
-        })),
+      lines: lineSegments.map((s) => ({
+        startIndexInclusive: s.startIndexInclusive,
+        stopIndexExclusive: s.stopIndexExclusive,
+        lineClassName: classNames(
+          sharedPathClass,
+          mainPathClass,
+          s.type === 'partial' ? dashedPathClass : roundedPathClass
+        )
+      })),
       underline: { gradientId: primaryGradient.id },
       dot: { dotClassName: classNames(sharedDotClass, mainDotClass) }
     }
-    console.log(mainSeries.lines)
 
     const comparisonSeries: SeriesConfig = {
       lines: [
@@ -191,8 +137,8 @@ export const MainGraph = ({
     }
 
     const settings: [SeriesConfig, SeriesConfig] = [
-      mainSeries
-      // comparisonSeries
+      mainSeries,
+      comparisonSeries
     ]
 
     const yearIsUnambiguous = isYearUnambiguous({
