Building Privacy-First Analytics: Anonymized Indicators Dashboard for `sivbg-project`

Project Context

In the sivbg-project application, we recently tackled a crucial challenge: providing valuable, data-driven insights to our stakeholders without compromising user privacy. The goal was to develop an indicators dashboard that aggregates critical metrics and distributions, ensuring no nominative data is ever exposed.

The Challenge: Actionable Insights vs. User Privacy

The demand for data analytics in modern applications is undeniable. Decision-makers need to understand trends, usage patterns, and system performance. However, this often conflicts with the paramount importance of user privacy and data protection regulations. Our primary concern was how to deliver robust analytics that are both insightful and compliant, ensuring all underlying data remains anonymous.

The Solution: An Anonymized Indicators Dashboard

Our team developed a new feature: an anonymized indicators dashboard. This solution provides a comprehensive overview of system activity and user behavior through aggregated metrics and distributions. Key to its design is a privacy-by-design approach, ensuring all data is processed and presented without exposing any Personally Identifiable Information (PII).

Backend Deep Dive: NestJS, Prisma, and Anonymization

The backend, built with NestJS and leveraging Prisma for database interactions, is responsible for securely fetching, processing, and anonymizing the data. A dedicated /api/indicators endpoint serves these aggregated metrics. Access to this endpoint is strictly controlled using JWT-based authentication and role-based access control (RBAC), allowing only SUPERVISOR, ANALYST, and SYSTEM_ADMIN roles to retrieve the data.

The core logic resides within a service that calculates six aggregated metrics and three distinct distributions. Before any data leaves the service layer, a rigorous anonymization process ensures all individual identifiers are removed. Furthermore, every consultation of the indicators dashboard triggers an automatic AccessAudit record, ensuring a complete log of who accessed the aggregated data and when, enhancing accountability and compliance.

// src/indicators/indicators.service.ts
import { Injectable } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { AuditService } from '../audit/audit.service';

@Injectable()
export class IndicatorsService {
  constructor(
    private prisma: PrismaService,
    private auditService: AuditService
  ) {}

  async getAnonymizedIndicators(userId: string) {
    // Simulate fetching raw data (e.g., user actions, events)
    const rawData = await this.prisma.eventLog.findMany();

    // Apply anonymization and aggregation logic
    const totalEvents = rawData.length;
    const activeUsers = new Set(rawData.map(log => log.userId)).size;
    // ... more metrics and distributions

    const anonymizedData = {
      totalEvents,
      activeUsers,
      // ... other aggregated, non-identifiable metrics
    };

    // Record access for audit purposes
    await this.auditService.logAccess(userId, 'indicators_dashboard_access');

    return anonymizedData;
  }
}

// src/indicators/indicators.controller.ts
import { Controller, Get, UseGuards } from '@nestjs/common';
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
import { RolesGuard } from '../auth/guards/roles.guard';
import { Roles } from '../auth/decorators/roles.decorator';
import { Role } from '../users/enums/role.enum';
import { IndicatorsService } from './indicators.service';
import { GetUser } from '../auth/decorators/get-user.decorator';

@Controller('indicators')
export class IndicatorsController {
  constructor(private readonly indicatorsService: IndicatorsService) {}

  @UseGuards(JwtAuthGuard, RolesGuard)
  @Roles(Role.SUPERVISOR, Role.ANALYST, Role.SYSTEM_ADMIN)
  @Get()
  async getIndicators(@GetUser('id') userId: string) {
    return this.indicatorsService.getAnonymizedIndicators(userId);
  }
}

Frontend Experience: React Dashboard

On the frontend, a React-based dashboard provides an intuitive interface for visualizing these indicators. It features MetricCard components for displaying individual aggregated values (e.g., "Total Events," "Active Users") and DistributionPanel components for visualizing trends and distributions (e.g., "Events per Day," "User Geographic Distribution"). Robust state management handles data loading, error states, and ensures a smooth user experience.

// src/components/MetricCard.tsx
import React from 'react';

interface MetricCardProps {
  title: string;
  value: number | string;
  description?: string;
}

const MetricCard: React.FC<MetricCardProps> = ({ title, value, description }) => (
  <div style={{ padding: '15px', border: '1px solid #eee', borderRadius: '5px', margin: '10px' }}>
    <h3>{title}</h3>
    <h2>{value}</h2>
    {description && <p style={{ fontSize: '0.9em', color: '#666' }}>{description}</p>}
  </div>
);

export default MetricCard;

// src/pages/DashboardPage.tsx
import React, { useEffect, useState } from 'react';
import MetricCard from '../components/MetricCard';
import DistributionPanel from '../components/DistributionPanel'; // Assume this exists

interface IndicatorData {
  totalEvents: number;
  activeUsers: number;
  // ... other anonymized metrics
}

const DashboardPage: React.FC = () => {
  const [indicators, setIndicators] = useState<IndicatorData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchIndicators = async () => {
      try {
        const response = await fetch('/api/indicators', {
          headers: { 'Authorization': `Bearer your-jwt-token` },
        });
        if (!response.ok) {
          throw new Error(`Error: ${response.statusText}`);
        }
        const data: IndicatorData = await response.json();
        setIndicators(data);
      } catch (err) {
        setError((err as Error).message);
      } finally {
        setLoading(false);
      }
    };
    fetchIndicators();
  }, []);

  if (loading) return <div>Loading indicators...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!indicators) return <div>No indicators data available.</div>;

  return (
    <div>
      <h1>Anonymized System Indicators</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        <MetricCard title="Total System Events" value={indicators.totalEvents} />
        <MetricCard title="Daily Active Users" value={indicators.activeUsers} />
        {/* ... render more MetricCards */}
      </div>
      {/* <DistributionPanel data={indicators.eventsDistribution} title="Events Over Time" /> */}
    </div>
  );
};

export default DashboardPage;

Actionable Takeaway

When designing analytics features, prioritize privacy from the outset. By implementing robust anonymization at the service layer, combining it with strong access control, and ensuring comprehensive audit trails, you can provide valuable business insights without compromising user trust or compliance. Embrace privacy-by-design as a core architectural principle for all data-driven features.

Generated with Gitvlg.com