Skip to content

Account Page: Feature Ticket: Interactive Financial Sunburst Dashboard

This proposal outlines the development of a new, best-in-class Interactive Financial Analytics Dashboard for the account page. This feature will transform our current raw transaction lists into a powerful, intuitive, and visually stunning sunburst chart. By doing so, we will move beyond being a simple data utility to become an indispensable analysis tool for all Hive users. This will significantly enhance user engagement, provide a clear competitive advantage, and solidify our position as a premium, innovative platform in the Hive ecosystem.

We will build an interactive sunburst chart that aggregates all of a user's financial operations into a simple, hierarchical, and explorable visual story.

This dashboard will allow users to:

  1. See the Big Picture: Instantly understand the proportional breakdown of their financial activity (e.g., "45% of my activity is from Curation, 30% from Posting").
  2. Drill Down for Details: Click on any category (e.g., "Posting") to smoothly zoom in and see a breakdown of the specific operations within it (e.g., author_reward, comment_benefactor_reward).
  3. Analyze Specific Transactions: Click further on an operation type to see the individual transactions, posts, or comments that generated that value.
  4. Navigate Intuitively: A simple "Back" button and breadcrumb trail will allow users to navigate up and down the data hierarchy with ease.

An interactive prototype of this exact functionality is complete and available for review.

Key Features & User Experience (UX)

  • 4-Level Hierarchy: The chart will provide four layers of depth:
    1. Root: Total Financial Activity
    2. Categories: Posting, Curation, Market, etc.
    3. Operation Types: author_reward, transfer, etc.
    4. Individual Transactions: Specific posts, comments, or transfers.
  • Vibrant, Themed Coloring: Each primary category will have a distinct, brand-aligned color, with its children inheriting variant shades for a cohesive and intuitive visual experience.
  • Intelligent Labeling: The chart will use clean, readable fonts that are rotated to follow the curve of the segments. Text on the most detailed, outermost ring will be horizontal for maximum clarity.
  • Contextual Tooltips: Hovering over any segment will display its name and total value, providing quick insights without cluttering the view.
  • Intuitive Navigation: A prominent "Back" button and clickable breadcrumbs will make exploring the data effortless.

Phase 1: Implementation

  • Component: FinancialSunburstDashboard.tsx
    • This component will be added as a new section on the account page.
    • It will contain the date range filter UI, the chart component, and the export button (which will be disabled in Phase 1).
  • Chart Library: ECharts for React (echarts, echarts-for-react) will be used to render the sunburst chart.
  • Chart Functionality:
    • The chart will replicate the following behavior:
      • Drill-Down on Click: Clicking a parent segment will transition the view to show only its children.
      • "Back" Button: A button will appear, allowing users to navigate up one level in the hierarchy.
      • Breadcrumbs: A clickable breadcrumb trail will display the current drill-down path (e.g., Financial Operations > Posting > author_reward).
    • Data Hierarchy (4 Levels):
      1. Root: "Financial Operations"
      2. Level 1: Categories (Posting, Curation, Transfer, etc.)
      3. Level 2: Operation Types (author_reward, transfer, etc.)
      4. Level 3: Individual Transactions (e.g., Post: Hive Future, To: @blocktrades).
    • Styling:
      • The chart will use the predefined categoryHexColors for Level 1 segments.
      • Children segments (Levels 2 & 3) will inherit the parent's color with a reduced saturation (colorSaturation property).
      • Labels on the outermost ring (Level 3) must be rendered horizontally (rotate: 0) for readability.
  • Date Range Filter:
    • The UI will include a date range picker component (e.g., using react-day-picker).
    • It will default to the "Last 30 Days."
    • Pre-set options should include: "Last 7 Days," "Last 30 Days," "Last 90 Days," and "Custom Range."
    • Changing the date will trigger a new API call to fetch data for the selected period.
  • New Endpoint Required: GET /api/v1/accounts/{username}/financial-analysis
  • Query Parameters:
    • startDate - Required.
    • endDate - Required.
  • Backend Logic:
    • The backend must query all operations belonging to the {username} within the specified startDate and endDate.
    • It must process and aggregate these operations based on the categorizedOperationTypes and FinancialOperationTypes lists.
    • It must correctly sum the values of child nodes to create the value for parent nodes.
    • Crucially, the API must return data in the specific nested JSON "tree" structure required by the ECharts sunburst component.
  • Success Response (200 OK):

    • Content-Type: application/json

    • Body (Example):

      code JSON

      downloadcontent_copy

      expand_less

      { "name": "Financial Operations", "children": [ { "name": "Posting", "value": 215.75, "children": [ { "name": "author_reward", "value": 180.75, "children": [ { "name": "Post: Hive's Future", "value": 95.50 }, { "name": "Post: RC Delegations", "value": 85.25 } ] }, { "name": "comment_benefactor_reward", "value": 35.00, "children": [ { "name": "From @some-dapp", "value": 35.00 } ] } ] }, // ... other categories ] }

Phase 2: Post-Enhancements

  • User Story: As a user, I want to download the data from my financial dashboard as a CSV file for my personal records or for accounting purposes.
  • Frontend Specifications:
    • The "Export to CSV" button (disabled in Phase 1) will be enabled.
    • When clicked, it will open a modal with options for the export.
  • API Specifications (Request to API Team):
    • New Endpoint Required: GET /api/v1/accounts/{username}/financial-export.csv
    • Query Parameters: startDate and endDate (same as the analysis endpoint).
    • Backend Logic: The backend will fetch the same raw data but will format it as a CSV file instead of JSON.
    • Response Headers:
      • Content-Type: text/csv
      • Content-Disposition: attachment; filename="hive-financials-{username}-{startDate}-to-{endDate}.csv"
    • CSV Columns: Timestamp, Category, OperationType, Value, Currency, Memo/Details.

Edited by Dima Rifai