Attempt partial logic

apata · apata · commit 6d72570335c4 · 2026-04-07T18:34:29.000+03:00
diff --git a/assets/js/dashboard/components/graph.tsx b/assets/js/dashboard/components/graph.tsx
@@ -235,6 +235,7 @@ 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
@@ -0,0 +1,40 @@
+import {
+  getChangeInPercentagePoints,
+  getRelativeChange
+} from './main-graph-data'
+
+describe(`${getChangeInPercentagePoints.name}`, () => {
+  it('returns the difference', () => {
+    expect(getChangeInPercentagePoints(70, 60)).toBe(10)
+  })
+
+  it('returns a negative value when value is lower', () => {
+    expect(getChangeInPercentagePoints(30, 50)).toBe(-20)
+  })
+
+  it('returns 0 when both values are equal', () => {
+    expect(getChangeInPercentagePoints(5, 5)).toBe(0)
+  })
+})
+
+describe(`${getRelativeChange.name}`, () => {
+  it('returns the percentage change rounded to nearest integer', () => {
+    expect(getRelativeChange(150, 100)).toBe(50)
+  })
+
+  it('rounds fractional percentages', () => {
+    expect(getRelativeChange(10, 3)).toBe(233) // (10-3)/3*100 = 233.33...
+  })
+
+  it('returns 100 when comparison is 0 and value is positive', () => {
+    expect(getRelativeChange(5, 0)).toBe(100)
+  })
+
+  it('returns 0 when both are 0', () => {
+    expect(getRelativeChange(0, 0)).toBe(0)
+  })
+
+  it('returns a negative value for a decrease', () => {
+    expect(getRelativeChange(50, 100)).toBe(-50)
+  })
+})
diff --git a/assets/js/dashboard/stats/graph/main-graph-data.ts b/assets/js/dashboard/stats/graph/main-graph-data.ts
@@ -27,7 +27,6 @@ export const remapAndFillData = ({
   yMax: number
   mainSeriesStartEndLabels: [string | null, string | null]
   comparisonSeriesStartEndLabels: [string | null, string | null]
-  startOfLastPartialSlice: null | number
 } => {
   const totalBucketCount = Math.max(
     data.meta.comparison_time_label_result_indices?.length ?? 0,
@@ -41,8 +40,6 @@ export const remapAndFillData = ({
   let firstComparisonTimeLabel: null | string = null
   let lastComparisonTimeLabel: null | string = null
 
-  let startOfLastPartialSlice: null | number = null
-
   const remappedData: GraphDatum[] = new Array(totalBucketCount)
     .fill(null)
     .map((_, index) => {
@@ -75,14 +72,6 @@ export const remapAndFillData = ({
           ? true
           : false
 
-        if (isPartial) {
-          startOfLastPartialSlice = index
-        } else {
-          // if there is a full period after a partial slice,
-          // it's not a partial slice anchored at the end of the series
-          startOfLastPartialSlice = null
-        }
-
         if (firstTimeLabel === null) {
           firstTimeLabel = timeLabel
         }
@@ -159,7 +148,6 @@ export const remapAndFillData = ({
     })
 
   return {
-    startOfLastPartialSlice,
     remappedData,
     yMax,
     mainSeriesStartEndLabels: [firstTimeLabel, lastTimeLabel],
@@ -170,21 +158,24 @@ export const remapAndFillData = ({
   }
 }
 
-const METRICS_WITH_CHANGE_IN_PERCENTAGE_POINTS = [
+export const METRICS_WITH_CHANGE_IN_PERCENTAGE_POINTS = [
   'bounce_rate',
   'exit_rate',
   'conversion_rate'
   // 'group_conversion_rate'
 ]
 
-const getChangeInPercentagePoints = (
+export const getChangeInPercentagePoints = (
   value: number,
   comparisonValue: number
 ): number => {
   return value - comparisonValue
 }
 
-const getRelativeChange = (value: number, comparisonValue: number): number => {
+export const getRelativeChange = (
+  value: number,
+  comparisonValue: number
+): number => {
   if (comparisonValue === 0 && value > 0) {
     return 100
   }
@@ -195,6 +186,49 @@ const getRelativeChange = (value: number, comparisonValue: number): number => {
   return Math.round(((value - comparisonValue) / comparisonValue) * 100)
 }
 
+type Slice = {
+  startIndexInclusive: number
+  endIndexExclusive: number
+  isPartialLine: boolean
+}
+
+// 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
+          }
+        }
+      }
+    }
+  })
+
+  if (currentSlice) {
+    slices.push(currentSlice)
+  }
+
+  return slices
+}
+
 /**
  * A data point for the graph and tooltip.
  * It's x position is its index in `GraphDatum[]` array.
diff --git a/assets/js/dashboard/stats/graph/main-graph.tsx b/assets/js/dashboard/stats/graph/main-graph.tsx
@@ -91,7 +91,6 @@ export const MainGraph = ({
     const {
       remappedData,
       yMax,
-      startOfLastPartialSlice,
       mainSeriesStartEndLabels,
       comparisonSeriesStartEndLabels
     } = remapAndFillData({
@@ -101,39 +100,86 @@ 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
+    // 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:
+          d.timeLabel !== null
+            ? getBucketLabel(d.timeLabel, {
+                shouldShowDate: !isDateUnambiguous({
+                  startEndLabels: mainSeriesStartEndLabels
+                }),
+                shouldShowYear: !isYearUnambiguous({
+                  site,
+                  startEndLabels: mainSeriesStartEndLabels
+                }),
+                interval,
+                period,
+                bucketIndex,
+                totalBuckets: remappedData.length
+              })
+            : ''
+      }
+
+      return dataPoint
+    })
+    if (slice !== null) {
+      slices.push(slice)
+    }
+
+    console.log(slices)
     const mainSeries: SeriesConfig = {
-      lines:
-        startOfLastPartialSlice !== null && startOfLastPartialSlice > 0
-          ? [
-              {
-                lineClassName: classNames(
-                  sharedPathClass,
-                  mainPathClass,
-                  roundedPathClass
-                ),
-                stopIndexExclusive: startOfLastPartialSlice
-              },
-              {
-                lineClassName: classNames(
-                  sharedPathClass,
-                  mainPathClass,
-                  dashedPathClass
-                ),
-                startIndexInclusive: startOfLastPartialSlice - 1
-              }
+      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'
             ]
-          : [
-              {
-                lineClassName: classNames(
-                  sharedPathClass,
-                  mainPathClass,
-                  roundedPathClass
-                )
-              }
-            ],
+          ),
+          lineType: s.lineType
+        })),
       underline: { gradientId: primaryGradient.id },
       dot: { dotClassName: classNames(sharedDotClass, mainDotClass) }
     }
+    console.log(mainSeries.lines)
+
     const comparisonSeries: SeriesConfig = {
       lines: [
         {
@@ -145,31 +191,10 @@ export const MainGraph = ({
     }
 
     const settings: [SeriesConfig, SeriesConfig] = [
-      mainSeries,
-      comparisonSeries
+      mainSeries
+      // comparisonSeries
     ]
 
-    // 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) => ({
-      values: [d.value ?? null, d.comparisonValue ?? null] as const,
-      xLabel:
-        d.timeLabel !== null
-          ? getBucketLabel(d.timeLabel, {
-              shouldShowDate: !isDateUnambiguous({
-                startEndLabels: mainSeriesStartEndLabels
-              }),
-              shouldShowYear: !isYearUnambiguous({
-                site,
-                startEndLabels: mainSeriesStartEndLabels
-              }),
-              interval,
-              period,
-              bucketIndex,
-              totalBuckets: remappedData.length
-            })
-          : ''
-    }))
     const yearIsUnambiguous = isYearUnambiguous({
       site,
       startEndLabels: [
