Yodashboard 11.0.1

Home Page - ASP.NET MVC View

Overview

This view is part of an ASP.NET MVC application and is responsible for displaying customer data in a table format along with dynamic charts.

Features

• Dynamic Customer Table: Displays a list of customers with columns for Customer Name, City, Date of Birth, and Date Added.
• Chart Integration: Uses YomoneyChartHelper to generate bar, pie, and line charts based on sample data.
• Bootstrap Panels: Organizes charts inside Bootstrap panels for better UI presentation.

Components

Customer Data

Customer data is stored in a list of dictionaries where each dictionary represents a customer with key-value pairs for:

• Customer Name
• City
• Date of Birth
• Date Added

Column Headers

Column headers are predefined as:

var columnHeaders = new List<string> { "Customer Name", "City", "Date of Birth", "Date Added" };

Chart Data

Chart data is stored as lists and used to generate various charts:

var chartData = new List<int> { 10, 20, 30, 40 };
var chartLabels = new List<string> { "January", "February", "March", "April" };

Charts

Charts are generated using the YomoneyChartHelper:

• Bar Chart: YomoneyChartHelper.GenerateChartHtml("bar", chartData, chartLabels, "myBarChart");
• Pie Chart: YomoneyChartHelper.GenerateChartHtml("pie", chartData, chartLabels, "pieBarChart");
• Line Chart: YomoneyChartHelper.GenerateApexChartHtml("line", chartData, chartLabels, "lineapexdats");

Dynamic Customer Table

The table is generated dynamically using:

var tableHtml = YomoneyChartHelper.GenerateDynamicCustomerTableHtml(
    "customerTable",
    customers,
    columnHeaders,
    "dateFrom",
    "dateTo",
    3
);

UI Layout

The UI consists of:

1. A Customer Table (Currently commented out)
2. Two Chart Panels (Bar Charts)
3. Two Additional Chart Panels (Pie and Line Charts)

Dependencies

• ASP.NET MVC
• Bootstrap for UI styling
• YomoneyChartHelper for dynamic chart generation

How to Use

1. Ensure YomoneyChartHelper is available in your project.
2. Populate the customers list with real data if necessary.
3. Un-comment @Html.Raw(tableHtml) to display the dynamic table.

Notes

• The sample data contains multiple duplicate entries of "Jane Smith." Ensure real customer data is used in production.
• The table includes a date filter for "Date Added." Adjust as needed for filtering requirements.

Future Improvements

• Add AJAX support for dynamic data fetching.
• Implement pagination for large customer lists.
• Improve chart styles and responsiveness.

Author:Innocent Tauzeni

Date: 2025-02-08