Feature: Add Line Count and Object Count Statistics Features

demo/src/App.tsx

@@ -25,6 +25,8 @@ export default function App() {
     miniMapWidth: 20,
     hideSearch: false,
     height: 380,
+    showLineCount: true,
+    showObjectCountStats: false,
 
     // Differ Configuration
     detectCircular: true,
@@ -219,6 +221,8 @@ export default function App() {
             height={config.height}
             miniMapWidth={config.miniMapWidth}
             hideSearch={config.hideSearch}
+            showLineCount={config.showLineCount}
+            showObjectCountStats={config.showObjectCountStats}
             inlineDiffOptions={{ mode: config.inlineDiffMode }}
             oldValue={parsedOldValue}
             newValue={parsedNewValue}

demo/src/components/Sidebar.tsx

@@ -94,6 +94,32 @@ function Sidebar(props: Props) {
           </label>
         </div>
 
+        <div className="form-group">
+          <label className="checkbox-label">
+            <input
+              type="checkbox"
+              className="form-checkbox"
+              checked={config.showLineCount}
+              onChange={e => updateConfig("showLineCount", e.target.checked)}
+            />
+            Show Line Count
+          </label>
+          <p className="form-hint">Display statistics for added, removed, and modified lines</p>
+        </div>
+
+        <div className="form-group">
+          <label className="checkbox-label">
+            <input
+              type="checkbox"
+              className="form-checkbox"
+              checked={config.showObjectCountStats}
+              onChange={e => updateConfig("showObjectCountStats", e.target.checked)}
+            />
+            Show Object Count Stats
+          </label>
+          <p className="form-hint">Display object statistics when using compare-key method</p>
+        </div>
+
         <div className="form-group">
           <label className="form-label">
             CSS Class Name

demo/src/types/index.ts

@@ -8,6 +8,8 @@ export type Config = {
   miniMapWidth: number;
   hideSearch: boolean;
   height: number;
+  showLineCount: boolean;
+  showObjectCountStats: boolean;
 
   // Differ Configuration
   detectCircular: boolean;

src/components/DiffViewer/components/LineCountDisplay.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+import type { LineCountStats } from "../types";
+
+type LineCountDisplayProps = {
+  stats: LineCountStats;
+};
+
+export const LineCountDisplay: React.FC<LineCountDisplayProps> = ({ stats }) => {
+  if (stats.total === 0) {
+    return (
+      <div className="line-count-display">
+        <span className="line-count-item no-changes">No changes</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="line-count-display">
+      <div className="line-count-item-sub-holder">
+        {stats.added > 0 && (
+          <span className="line-count-item added">
+            +
+            {stats.added}
+            {" "}
+            added
+          </span>
+        )}
+
+        {stats.removed > 0 && (
+          <span className="line-count-item removed">
+            -
+            {stats.removed}
+            {" "}
+            removed
+          </span>
+        )}
+      </div>
+      <div className="line-count-item-sub-holder">
+        {stats.modified > 0 && (
+          <span className="line-count-item modified">
+            ~
+            {stats.modified}
+            {" "}
+            modified
+          </span>
+        )}
+        <span className="line-count-item total">
+          {stats.total}
+          {" "}
+          total changes
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default LineCountDisplay;

src/components/DiffViewer/components/ObjectCountDisplay.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import type { ObjectCountStats } from "../types";
+
+type ObjectCountDisplayProps = {
+  stats: ObjectCountStats;
+};
+
+export const ObjectCountDisplay: React.FC<ObjectCountDisplayProps> = ({ stats }) => {
+  if (!stats || typeof stats !== "object") {
+    return null;
+  }
+
+  const { added = 0, removed = 0, modified = 0, total = 0 } = stats;
+
+  if (total === 0) {
+    return (
+      <div className="object-count-display">
+        <span className="object-count-item no-changes">No object changes</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="object-count-display">
+      <div className="object-count-item-sub-holder">
+        {added > 0 && (
+          <span className="object-count-item added">
+            +
+            {added}
+            {" "}
+            added objects
+          </span>
+        )}
+
+        {removed > 0 && (
+          <span className="object-count-item removed">
+            -
+            {removed}
+            {" "}
+            removed objects
+          </span>
+        )}
+      </div>
+      <div className="object-count-item-sub-holder">
+        {modified > 0 && (
+          <span className="object-count-item modified">
+            ~
+            {modified}
+            {" "}
+            modified objects
+          </span>
+        )}
+        <span className="object-count-item total">
+          {total}
+          {" "}
+          total object changes
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ObjectCountDisplay;

src/components/DiffViewer/components/VirtualizedDiffViewer.tsx

@@ -4,14 +4,18 @@ import type { VariableSizeList as List } from "react-window";
 import { Differ } from "json-diff-kit";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import type { DiffRowOrCollapsed, SegmentItem, VirtualizedDiffViewerProps } from "../types";
+import type { DiffRowOrCollapsed, LineCountStats, ObjectCountStats, SegmentItem, VirtualizedDiffViewerProps } from "../types";
 
 import "../styles/JsonDiffCustomTheme.css";
 import { useSearch } from "../hooks/useSearch";
 import { fastHash } from "../utils/json-diff/diff-hash";
 import { expandSegment, hasExpandedSegments, hideAllSegments } from "../utils/json-diff/segment-util";
+import { calculateLineCountStats } from "../utils/lineCountUtils";
+import { calculateObjectCountStats } from "../utils/objectCountUtils";
 import { buildViewFromSegments, generateSegments } from "../utils/preprocessDiff";
 import { DiffMinimap } from "./DiffMinimap";
+import LineCountDisplay from "./LineCountDisplay";
+import ObjectCountDisplay from "./ObjectCountDisplay";
 import SearchboxHolder from "./SearchboxHolder";
 import VirtualDiffGrid from "./VirtualDiffGrid";
 
@@ -32,6 +36,8 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
   miniMapWidth,
   inlineDiffOptions,
   overScanCount,
+  showLineCount = false,
+  showObjectCountStats = false,
 }) => {
   const listRef = useRef<List>(null);
   const getDiffDataRef = useRef<typeof getDiffData>();
@@ -58,6 +64,28 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
     return differ.diff(oldValue, newValue);
   }, [oldValue, newValue, differ]);
 
+  const lineCountStats = useMemo((): LineCountStats => {
+    if (!diffData || (diffData[0].length === 0 && diffData[1].length === 0)) {
+      return { added: 0, removed: 0, modified: 0, total: 0 };
+    }
+    return calculateLineCountStats(diffData as [DiffResult[], DiffResult[]]);
+  }, [diffData]);
+
+  const objectCountStats = useMemo((): ObjectCountStats => {
+    // Only calculate object counts when using compare-key method
+    if (!differOptions?.arrayDiffMethod || differOptions.arrayDiffMethod !== "compare-key" || !differOptions.compareKey) {
+      return { added: 0, removed: 0, modified: 0, total: 0 };
+    }
+
+    try {
+      return calculateObjectCountStats(oldValue, newValue, differOptions.compareKey);
+    }
+    catch (error) {
+      console.warn("Error calculating object count stats:", error);
+      return { added: 0, removed: 0, modified: 0, total: 0 };
+    }
+  }, [oldValue, newValue, differOptions]);
+
   const [scrollTop, setScrollTop] = useState(0);
   const [segments, setSegments] = useState<SegmentItem[]>([]);
   const [rawLeftDiff, rawRightDiff] = diffData;
@@ -138,6 +166,12 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
           <div><span>{leftTitle}</span></div>
           <div><span>{rightTitle}</span></div>
         </div>
+        {showLineCount && (
+          <LineCountDisplay stats={lineCountStats} />
+        )}
+        {showObjectCountStats && differOptions?.arrayDiffMethod === "compare-key" && differOptions?.compareKey && (
+          <ObjectCountDisplay stats={objectCountStats} />
+        )}
       </div>
 
       {/* List & Minimap */}

src/components/DiffViewer/styles/JsonDiffCustomTheme.css

@@ -42,6 +42,116 @@
   background: rgba(182, 180, 67, 0.08);
 }
 
+/* LINE COUNT DISPLAY */
+.line-count-display {
+  display: flex;
+  gap: 12px;
+  margin-top: 5px;
+  align-items: center;
+  font-size: 11px;
+  color: #f8f8f2;
+  margin-left: auto;
+  justify-content: space-between;
+}
+
+.line-count-item-sub-holder {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.line-count-item {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.line-count-item.added {
+  background: rgba(100, 182, 67, 0.2);
+  color: #a5ff99;
+  border: 1px solid rgba(100, 182, 67, 0.3);
+}
+
+.line-count-item.removed {
+  background: rgba(160, 128, 100, 0.2);
+  color: #ffaa99;
+  border: 1px solid rgba(160, 128, 100, 0.3);
+}
+
+.line-count-item.modified {
+  background: rgba(182, 180, 67, 0.2);
+  color: #ecff99;
+  border: 1px solid rgba(182, 180, 67, 0.3);
+}
+
+.line-count-item.total {
+  background: rgba(69, 96, 248, 0.2);
+  color: #4560f8;
+  border: 1px solid rgba(69, 96, 248, 0.3);
+}
+
+.line-count-item.no-changes {
+  background: rgba(248, 248, 242, 0.1);
+  color: #f8f8f2;
+  border: 1px solid rgba(248, 248, 242, 0.2);
+}
+
+/* OBJECT COUNT DISPLAY */
+.object-count-display {
+  display: flex;
+  gap: 12px;
+  margin-top: 5px;
+  align-items: center;
+  font-size: 11px;
+  color: #f8f8f2;
+  margin-left: auto;
+  justify-content: space-between;
+}
+
+.object-count-item-sub-holder {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.object-count-item {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.object-count-item.added {
+  background: rgba(100, 182, 67, 0.2);
+  color: #a5ff99;
+  border: 1px solid rgba(100, 182, 67, 0.3);
+}
+
+.object-count-item.removed {
+  background: rgba(160, 128, 100, 0.2);
+  color: #ffaa99;
+  border: 1px solid rgba(160, 128, 100, 0.3);
+}
+
+.object-count-item.modified {
+  background: rgba(182, 180, 67, 0.2);
+  color: #ecff99;
+  border: 1px solid rgba(182, 180, 67, 0.3);
+}
+
+.object-count-item.total {
+  background: rgba(69, 96, 248, 0.2);
+  color: #4560f8;
+  border: 1px solid rgba(69, 96, 248, 0.3);
+}
+
+.object-count-item.no-changes {
+  background: rgba(248, 248, 242, 0.1);
+  color: #f8f8f2;
+  border: 1px solid rgba(248, 248, 242, 0.2);
+}
+
 .json-diff-viewer.json-diff-viewer-theme-custom .empty-equal-cell {
   opacity: 0.4;
   background: repeating-linear-gradient(-53deg, rgb(69, 69, 70), rgb(69, 69, 70) 1.5px, #282a36 1.5px, #282a36 4px);