ortoni-report 3.0.1 → 3.0.2

package/changelog.md

@@ -1,5 +1,18 @@
 # Change Log:
 
+## v3.0.2
+
+#### 📦 New Features
+1. Test Analytics dashboard
+  - Shows summary of total runs, totals test, passed, failed, pass rate and average duration
+  - Trends over time - upto 30 runs
+  - Top flaky test list
+  - slowest test list with average duration
+
+#### 👌 Improvements
+1. Set chart option as pie or doughnut for summary and projects
+
+
 ## v3.0.1
 
 #### 👌 Improvements

package/dist/ortoni-report.d.mts

@@ -84,6 +84,10 @@ interface OrtoniReportConfig {
      * @example { "key": "value" } as string
      */
     meta?: Record<string, string>;
+    /**
+     * Chart type on the dashboard.
+     * @example "doughnut" | "pie"   */
+    chartType?: "doughnut" | "pie";
 }
 
 declare class OrtoniReport implements Reporter {

package/dist/ortoni-report.d.ts

@@ -84,6 +84,10 @@ interface OrtoniReportConfig {
      * @example { "key": "value" } as string
      */
     meta?: Record<string, string>;
+    /**
+     * Chart type on the dashboard.
+     * @example "doughnut" | "pie"   */
+    chartType?: "doughnut" | "pie";
 }
 
 declare class OrtoniReport implements Reporter {

package/dist/ortoni-report.js

@@ -194,6 +194,14 @@ function formatDateLocal(isoString) {
   };
   return new Intl.DateTimeFormat(void 0, options).format(date);
 }
+function formatDateNoTimezone(dateStr) {
+  const date = new Date(dateStr);
+  return date.toLocaleString("en-US", {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZoneName: void 0
+  });
+}
 
 // src/helpers/HTMLGenerator.ts
 var import_fs2 = __toESM(require("fs"));
@@ -219,6 +227,22 @@ var HTMLGenerator = class {
     const template = import_handlebars.default.compile(templateSource);
     return template({ ...data, inlineCss: cssContent });
   }
+  async getReportData() {
+    return {
+      summary: await this.dbManager.getSummaryData(),
+      trends: await this.dbManager.getTrends(),
+      flakyTests: await this.dbManager.getFlakyTests(),
+      slowTests: await this.dbManager.getSlowTests()
+    };
+  }
+  async chartTrendData() {
+    return {
+      labels: (await this.getReportData()).trends.map((t) => formatDateNoTimezone(t.run_date)),
+      passed: (await this.getReportData()).trends.map((t) => t.passed),
+      failed: (await this.getReportData()).trends.map((t) => t.failed),
+      avgDuration: (await this.getReportData()).trends.map((t) => t.avg_duration)
+    };
+  }
   async prepareReportData(filteredResults, totalDuration, results, projectSet) {
     const totalTests = filteredResults.length;
     const passedTests = results.filter((r) => r.status === "passed").length;
@@ -273,6 +297,9 @@ var HTMLGenerator = class {
       allTags: Array.from(allTags),
       showProject: this.ortoniConfig.showProject || false,
       title: this.ortoniConfig.title || "Ortoni Playwright Test Report",
+      chartType: this.ortoniConfig.chartType || "pie",
+      reportAnalyticsData: await this.getReportData(),
+      chartData: await this.chartTrendData(),
       ...this.extractProjectStats(projectResults)
     };
   }
@@ -337,7 +364,8 @@ var HTMLGenerator = class {
       "userInfo",
       "project",
       "testStatus",
-      "testIcons"
+      "testIcons",
+      "analytics"
     ].forEach((partialName) => {
       import_handlebars.default.registerPartial(
         partialName,
@@ -684,6 +712,121 @@ var DatabaseManager = class {
       }
     }
   }
+  async getSummaryData() {
+    if (!this.db) {
+      console.error("OrtoniReport: Database not initialized");
+      return {
+        totalRuns: 0,
+        totalTests: 0,
+        passed: 0,
+        failed: 0,
+        passRate: 0,
+        avgDuration: 0
+      };
+    }
+    try {
+      const summary = await this.db.get(`
+      SELECT
+        (SELECT COUNT(*) FROM test_runs) as totalRuns,
+        (SELECT COUNT(*) FROM test_results) as totalTests,
+        (SELECT COUNT(*) FROM test_results WHERE status = 'passed') as passed,
+        (SELECT COUNT(*) FROM test_results WHERE status = 'failed') as failed,
+        (SELECT AVG(CAST(duration AS FLOAT)) FROM test_results) as avgDuration
+    `);
+      const passRate = summary.totalTests ? (summary.passed / summary.totalTests * 100).toFixed(2) : 0;
+      return {
+        totalRuns: summary.totalRuns,
+        totalTests: summary.totalTests,
+        passed: summary.passed,
+        failed: summary.failed,
+        passRate: parseFloat(passRate.toString()),
+        avgDuration: Math.round(summary.avgDuration || 0)
+      };
+    } catch (error) {
+      console.error("OrtoniReport: Error getting summary data:", error);
+      return {
+        totalRuns: 0,
+        totalTests: 0,
+        passed: 0,
+        failed: 0,
+        passRate: 0,
+        avgDuration: 0
+      };
+    }
+  }
+  async getTrends(limit = 30) {
+    if (!this.db) {
+      console.error("OrtoniReport: Database not initialized");
+      return [];
+    }
+    try {
+      const rows = await this.db.all(`
+      SELECT trun.run_date,
+        SUM(CASE WHEN tr.status = 'passed' THEN 1 ELSE 0 END) AS passed,
+        SUM(CASE WHEN tr.status = 'failed' THEN 1 ELSE 0 END) AS failed,
+        AVG(CAST(tr.duration AS FLOAT)) AS avg_duration
+      FROM test_results tr
+      JOIN test_runs trun ON tr.run_id = trun.id
+      GROUP BY trun.run_date
+      ORDER BY trun.run_date DESC
+      LIMIT ?
+    `, [limit]);
+      return rows.map((row) => ({
+        ...row,
+        run_date: formatDateLocal(row.run_date),
+        avg_duration: Math.round(row.avg_duration || 0)
+      }));
+    } catch (error) {
+      console.error("OrtoniReport: Error getting trends data:", error);
+      return [];
+    }
+  }
+  async getFlakyTests(limit = 10) {
+    if (!this.db) {
+      console.error("OrtoniReport: Database not initialized");
+      return [];
+    }
+    try {
+      return await this.db.all(`
+      SELECT
+        test_id,
+        COUNT(*) AS total,
+        SUM(CASE WHEN status = 'flaky' THEN 1 ELSE 0 END) AS flaky
+      FROM test_results
+      GROUP BY test_id
+      HAVING flaky > 0
+      ORDER BY flaky DESC
+      LIMIT ?
+    `, [limit]);
+    } catch (error) {
+      console.error("OrtoniReport: Error getting flaky tests:", error);
+      return [];
+    }
+  }
+  async getSlowTests(limit = 10) {
+    if (!this.db) {
+      console.error("OrtoniReport: Database not initialized");
+      return [];
+    }
+    try {
+      const rows = await this.db.all(`
+      SELECT
+        test_id,
+        AVG(CAST(duration AS FLOAT)) AS avg_duration
+      FROM test_results
+      GROUP BY test_id
+      ORDER BY avg_duration DESC
+      LIMIT ?
+    `, [limit]);
+      return rows.map((row) => ({
+        test_id: row.test_id,
+        avg_duration: Math.round(row.avg_duration || 0)
+      }));
+    } catch (error) {
+      console.error("OrtoniReport: Error getting slow tests:", error);
+      return [];
+    }
+  }
 };
 
 // src/ortoni-report.ts

package/dist/ortoni-report.mjs

@@ -162,6 +162,14 @@ function formatDateLocal(isoString) {
   };
   return new Intl.DateTimeFormat(void 0, options).format(date);
 }
+function formatDateNoTimezone(dateStr) {
+  const date = new Date(dateStr);
+  return date.toLocaleString("en-US", {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZoneName: void 0
+  });
+}
 
 // src/helpers/HTMLGenerator.ts
 import fs2 from "fs";
@@ -187,6 +195,22 @@ var HTMLGenerator = class {
     const template = Handlebars.compile(templateSource);
     return template({ ...data, inlineCss: cssContent });
   }
+  async getReportData() {
+    return {
+      summary: await this.dbManager.getSummaryData(),
+      trends: await this.dbManager.getTrends(),
+      flakyTests: await this.dbManager.getFlakyTests(),
+      slowTests: await this.dbManager.getSlowTests()
+    };
+  }
+  async chartTrendData() {
+    return {
+      labels: (await this.getReportData()).trends.map((t) => formatDateNoTimezone(t.run_date)),
+      passed: (await this.getReportData()).trends.map((t) => t.passed),
+      failed: (await this.getReportData()).trends.map((t) => t.failed),
+      avgDuration: (await this.getReportData()).trends.map((t) => t.avg_duration)
+    };
+  }
   async prepareReportData(filteredResults, totalDuration, results, projectSet) {
     const totalTests = filteredResults.length;
     const passedTests = results.filter((r) => r.status === "passed").length;
@@ -241,6 +265,9 @@ var HTMLGenerator = class {
       allTags: Array.from(allTags),
       showProject: this.ortoniConfig.showProject || false,
       title: this.ortoniConfig.title || "Ortoni Playwright Test Report",
+      chartType: this.ortoniConfig.chartType || "pie",
+      reportAnalyticsData: await this.getReportData(),
+      chartData: await this.chartTrendData(),
       ...this.extractProjectStats(projectResults)
     };
   }
@@ -305,7 +332,8 @@ var HTMLGenerator = class {
       "userInfo",
       "project",
       "testStatus",
-      "testIcons"
+      "testIcons",
+      "analytics"
     ].forEach((partialName) => {
       Handlebars.registerPartial(
         partialName,
@@ -595,6 +623,121 @@ var DatabaseManager = class {
       }
     }
   }
+  async getSummaryData() {
+    if (!this.db) {
+      console.error("OrtoniReport: Database not initialized");
+      return {
+        totalRuns: 0,
+        totalTests: 0,
+        passed: 0,
+        failed: 0,
+        passRate: 0,
+        avgDuration: 0
+      };
+    }
+    try {
+      const summary = await this.db.get(`
+      SELECT
+        (SELECT COUNT(*) FROM test_runs) as totalRuns,
+        (SELECT COUNT(*) FROM test_results) as totalTests,
+        (SELECT COUNT(*) FROM test_results WHERE status = 'passed') as passed,
+        (SELECT COUNT(*) FROM test_results WHERE status = 'failed') as failed,
+        (SELECT AVG(CAST(duration AS FLOAT)) FROM test_results) as avgDuration
+    `);
+      const passRate = summary.totalTests ? (summary.passed / summary.totalTests * 100).toFixed(2) : 0;
+      return {
+        totalRuns: summary.totalRuns,
+        totalTests: summary.totalTests,
+        passed: summary.passed,
+        failed: summary.failed,
+        passRate: parseFloat(passRate.toString()),
+        avgDuration: Math.round(summary.avgDuration || 0)
+      };
+    } catch (error) {
+      console.error("OrtoniReport: Error getting summary data:", error);
+      return {
+        totalRuns: 0,
+        totalTests: 0,
+        passed: 0,
+        failed: 0,
+        passRate: 0,
+        avgDuration: 0
+      };
+    }
+  }
+  async getTrends(limit = 30) {
+    if (!this.db) {
+      console.error("OrtoniReport: Database not initialized");
+      return [];
+    }
+    try {
+      const rows = await this.db.all(`
+      SELECT trun.run_date,
+        SUM(CASE WHEN tr.status = 'passed' THEN 1 ELSE 0 END) AS passed,
+        SUM(CASE WHEN tr.status = 'failed' THEN 1 ELSE 0 END) AS failed,
+        AVG(CAST(tr.duration AS FLOAT)) AS avg_duration
+      FROM test_results tr
+      JOIN test_runs trun ON tr.run_id = trun.id
+      GROUP BY trun.run_date
+      ORDER BY trun.run_date DESC
+      LIMIT ?
+    `, [limit]);
+      return rows.map((row) => ({
+        ...row,
+        run_date: formatDateLocal(row.run_date),
+        avg_duration: Math.round(row.avg_duration || 0)
+      }));
+    } catch (error) {
+      console.error("OrtoniReport: Error getting trends data:", error);
+      return [];
+    }
+  }
+  async getFlakyTests(limit = 10) {
+    if (!this.db) {
+      console.error("OrtoniReport: Database not initialized");
+      return [];
+    }
+    try {
+      return await this.db.all(`
+      SELECT
+        test_id,
+        COUNT(*) AS total,
+        SUM(CASE WHEN status = 'flaky' THEN 1 ELSE 0 END) AS flaky
+      FROM test_results
+      GROUP BY test_id
+      HAVING flaky > 0
+      ORDER BY flaky DESC
+      LIMIT ?
+    `, [limit]);
+    } catch (error) {
+      console.error("OrtoniReport: Error getting flaky tests:", error);
+      return [];
+    }
+  }
+  async getSlowTests(limit = 10) {
+    if (!this.db) {
+      console.error("OrtoniReport: Database not initialized");
+      return [];
+    }
+    try {
+      const rows = await this.db.all(`
+      SELECT
+        test_id,
+        AVG(CAST(duration AS FLOAT)) AS avg_duration
+      FROM test_results
+      GROUP BY test_id
+      ORDER BY avg_duration DESC
+      LIMIT ?
+    `, [limit]);
+      return rows.map((row) => ({
+        test_id: row.test_id,
+        avg_duration: Math.round(row.avg_duration || 0)
+      }));
+    } catch (error) {
+      console.error("OrtoniReport: Error getting slow tests:", error);
+      return [];
+    }
+  }
 };
 
 // src/ortoni-report.ts

package/dist/views/analytics.hbs

@@ -0,0 +1,105 @@
+<div> 
+  <h1 class="title is-3">Analytics</h1>
+  <div class="columns is-multiline has-text-centered">
+    {{> summaryCard bg="hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important"
+    statusHeader="Total Runs" statusCount=reportAnalyticsData.summary.totalRuns}}
+    {{> summaryCard bg="hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important"
+    statusHeader="Total Tests" statusCount=reportAnalyticsData.summary.totalTests}}
+    {{> summaryCard bg="hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important"
+    status="Passed" statusHeader="Passed" statusCount=reportAnalyticsData.summary.passed}}
+    {{> summaryCard bg="hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important"
+    status="Failed"
+    statusHeader="Failed" statusCount=reportAnalyticsData.summary.failed}}
+    {{> summaryCard bg="hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important"
+    statusHeader="Pass Rate: %" statusCount=reportAnalyticsData.summary.passRate}}
+    {{> summaryCard bg="#69748c" statusHeader="Avg Duration (ms)" statusCount=reportAnalyticsData.summary.avgDuration}} 
+  </div>
+
+  <section class="box">
+    <h2 class="title is-4">Trends Over Time</h2>
+    <canvas id="trendChart" height="100"></canvas>
+  </section>
+
+  <section class="box">
+    <h2 class="title is-4">Top Flaky Tests</h2>
+    <table class="table is-striped is-fullwidth">
+      <thead>
+        <tr>
+          <th>Test ID</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each reportAnalyticsData.flakyTests}}
+        <tr>
+          <td>{{this.test_id}}</td>
+        </tr>
+        {{/each}}
+      </tbody>
+    </table>
+  </section>
+
+  <section class="box">
+    <h2 class="title is-4">Slowest Tests</h2>
+    <table class="table is-striped is-fullwidth">
+      <thead>
+        <tr>
+          <th>Test ID</th>
+          <th>Avg Duration (ms)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each reportAnalyticsData.slowTests}}
+        <tr>
+          <td>{{this.test_id}}</td>
+          <td>{{this.avg_duration}}</td>
+        </tr>
+        {{/each}}
+      </tbody>
+    </table>
+  </section>
+  <script>
+    const ctx = document.getElementById('trendChart').getContext('2d');
+    const trendChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: {{{ json chartData.labels }}},
+    datasets: [
+      {
+        label: 'Passed',
+        data: {{ json chartData.passed }},
+      borderColor: 'green',
+      fill: false
+        },
+      {
+        label: 'Failed',
+        data: {{ json chartData.failed }},
+      borderColor: 'red',
+      fill: false
+        },
+      {
+        label: 'Avg Duration (ms)',
+        data: {{ json chartData.avgDuration }},
+      borderColor: 'blue',
+      fill: false,
+      yAxisID: 'y1'
+        }
+    ]
+    },
+    options: {
+      responsive: true,
+        scales: {
+        y: {
+          beginAtZero: true,
+            title: { display: true, text: 'Count' }
+        },
+        y1: {
+          beginAtZero: true,
+            position: 'right',
+              title: { display: true, text: 'Duration (ms)' },
+          grid: { drawOnChartArea: false }
+        }
+      }
+    }
+  });
+  </script>
+</div>

package/dist/views/head.hbs

@@ -1,7 +1,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="Playwright HTML report by LetCode Koushik - V3.0.1" />
+  <meta name="description" content="Playwright HTML report by LetCode Koushik - V3.0.2" />
   <title>{{title}}</title>
   <link rel="icon" href="https://raw.githubusercontent.com/ortoniKC/ortoni-report/refs/heads/main/favicon.png"
     type="image/x-icon" />

package/dist/views/main.hbs

@@ -48,6 +48,9 @@
                     </div>
                 </div>
             </div>
+            <div id="analytics-section" class="content-section" style="display: none;">
+                {{> analytics}}
+            </div>
         </main>
     </div>
     <script>
@@ -135,6 +138,7 @@
                     this.sidebarLinks = document.querySelectorAll('.sidebar-menu-link');
                     this.sections = document.querySelectorAll('.content-section');
                     this.testDetailsSection = document.getElementById('testDetails');
+                    this.analyticsSection = document.getElementById('analytics-section');
                     this.sidebar = document.getElementById('sidebar');
                     this.mainContent = document.querySelector('.main-content');
                     this.init();
@@ -178,6 +182,7 @@
                 showSection(sectionId) {
                     // Hide test details if showing a main section
                     this.testDetailsSection.style.display = 'none';
+                    this.analyticsSection.style.display = 'none';
                     
                     // Show the selected section
                     this.sections.forEach(section => {

package/dist/views/sidebar.hbs

@@ -222,6 +222,14 @@
                 <span class="sidebar-menu-text">Tests</span>
             </a>
         </li>
+        <li class="sidebar-menu-item">
+            <a class="sidebar-menu-link" data-section="analytics">
+                <span class="icon">
+                    <i class="fa fa-chart-line"></i>
+                </span>
+                <span class="sidebar-menu-text">Analytics</span>
+            </a>
+        </li>
     </ul>
     <a class="theme" data-theme-status="{{preferredTheme}}" id="toggle-theme">
         <span class="icon">

package/dist/views/userInfo.hbs

@@ -113,49 +113,38 @@
         <script>
             const overallChart = document.getElementById('testChart');
             new Chart(overallChart, {
-                type: "polarArea",
+                type: '{{ chartType }}',
                 data: {
-                    labels: ['Passed', 'Failed', 'Skipped', 'Flaky'],
+                    labels: ['Passed', 'Failed', 'Skipped', 'Flaky', 'Retry'],
                     datasets: [{
                         data: [{{ passCount }}, {{ failCount }}, {{ skipCount }}, {{ flakyCount }}, {{ retryCount }}],
                 backgroundColor: ['#28a745', '#ff6685', '#66d1ff', '#ffb70f', '#69748c']}]
                 },
                 options: {
-                scales: {
-                    r: {
-                        ticks: {
-                            display: false
-                        },
-                        grid: {
-                            color: '#e0e0e0'
-                        }
-                    }
-                },
-                responsive: true,
-                maintainAspectRatio: false,
-                borderJoinStyle: 'bevel',
-                plugins: {
-                    legend: {
-                        position: 'bottom',
-                        labels: {
-                            filter: function (legendItem, chartData) {
-                                const value = chartData.datasets[0].data[legendItem.index];
-                                return value !== 0;
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                            labels: {
+                                filter: function (legendItem, chartData) {
+                                    const value = chartData.datasets[0].data[legendItem.index];
+                                    return value !== 0;
+                                }
                             }
-                        }
-                    },
-                    tooltip: {
-                        callbacks: {
-                            label: function (tooltipItem) {
-                                const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0);
-                                const value = tooltipItem.raw;
-                                const percentage = ((value / total) * 100).toFixed(2);
-                                return `${tooltipItem.label}: ${value} tests (${percentage}%)`;
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function (tooltipItem) {
+                                    const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0);
+                                    const value = tooltipItem.raw;
+                                    const percentage = ((value / total) * 100).toFixed(2);
+                                    return `${tooltipItem.label}: ${value} tests (${percentage}%)`;
+                                }
                             }
                         }
                     }
                 }
-            }
             });
            
             const projectChart = document.getElementById('projectChart');
@@ -173,7 +162,7 @@
             }
             const backgroundColors = totalTests.map(() => generateRandomColor());
             new Chart(projectChart, {
-                type: 'doughnut',
+                type: '{{ chartType }}',
                 data: {
                     labels: projectNames,
                     datasets: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ortoni-report",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Playwright Report By LetCode with Koushik",
   "scripts": {
     "tsc": "tsc",

package/readme.md

@@ -12,41 +12,51 @@ A comprehensive and visually appealing HTML report generator tailored for Playwr
 
 ### 1. **Organization & Navigation**
 
-- **Sidebar Navigation**: Offering a more structured and intuitive navigation experience.
-- **Sidebar Sections**:
-  - **Dashboard**: View overall test statistics and summaries.
-  - **Tests**: Browse detailed test results, including logs, screenshots, and errors.
-- **Hierarchical Grouping**: Tests are structured by filename, suite, and project, providing an organized overview.
-- **Test History & Detailed Breakdown**: Support for displaying up to 10 recent executions, categorized by suite and project for easy navigation.
-- **Integration and Configuration**: Easy integration with Playwright using TypeScript/JavaScript, with configurable preferences.
-- **Advanced Filtering**: Filters for project, tags, and status, with the ability to reset for a full view.
+- **Sidebar Navigation**: Enjoy a clean and structured layout for seamless navigation.
+- **Sections**:
+  - **Dashboard**: High-level overview of test analytics and trends.
+  - **Tests**: Dive into individual test details including logs, screenshots, and errors.
+  - **Analytics**: Track overall execution metrics, trends, and flaky/slow test insights.
+- **Hierarchical Grouping**: Tests are organized by filename, suite, and project for better traceability.
+- **Test History View**: Access up to 10 recent executions, categorized by suite and project.
+- **Configurable Integration**: Easy setup with Playwright using TypeScript/JavaScript, along with customizable preferences.
+- **Advanced Filtering**: Filter by project, tags, and status — with a reset option for full visibility.
 
 ### 2. **Detailed Reporting**
 
-- **Comprehensive Test Details**: Status, duration, tags, errors, logs, screenshots, videos, and trace data.
-- **Test Attachments**: Screenshots, videos, trace viewer, steps, error stack trace, and console logs.
-- **Selected Status Display**: The UI highlights the active status filter for clarity.
+- **Comprehensive Test Data**: Includes status, duration, tags, logs, errors, screenshots, videos, and trace viewer.
+- **Native Trace Viewer**: Directly open the trace viewer within the reporter.
 
 ### 3. **Visualization & Insights**
 
-- **Summary Statistics**: Total tests and distribution of passed, failed, skipped, and flaky tests with success rates.
-- **Chart Visualizations**: Plotarea chart for overall status, doghnut for projects and bar charts for project-specific comparisons.
-- **All-New Colorful UI**: A vibrant, redesigned interface with better contrast and readability.
+- **Test Analytics Dashboard** 🌟 **(New!)**
+  - Summary of total test runs, passed/failed counts, pass rate, and average duration.
+  - **Trends Over Time**: Line chart showing test results across the last 30 runs.
+  - **Top Flaky Tests**: Identify unstable tests quickly.
+  - **Slowest Tests**: View tests with highest average durations.
+
+- **Chart Visualizations**:
+  - Pie or doughnut charts for test summary and per-project breakdowns **(Improved!)**
+  - Bar charts for project-specific comparisons.
+  - **Line Chart for Trends**: Visualize execution status progression over time.
+
+- **Colorful UI**: Redesigned with vibrant, high-contrast visuals for improved readability and engagement.
 
 ### 4. **Customization & Personalization**
 
-- **New Color Scheme**: Supports both **light and dark themes**, ensuring a comfortable viewing experience.
-- **Add Your Logo**: Configurable logo for brand personalization.
-- **Flexibility with Attachments**: Choose Base64 or file paths for screenshots.
-- **Custom Report Paths**: Set custom filenames and folder paths for reports.
+- **Theme Support**: Switch between **light** and **dark** themes for a comfortable viewing experience.
+- **Custom Branding**: Add your company or project logo for a branded look.
+- **Flexible Attachments**: Choose between Base64 or file path formats for media files.
+- **Custom Paths**: Define report filenames and output folders as needed.
 
 ### 5. **User Experience & Usability**
 
-- **Advanced Search and Reset**: Search tests with keywords or criteria, with reset options.
-- **Hide Skipped Tests by Default**: Simplifies view by hiding skipped tests initially.
-- **Share Reports**: Self-contained reports for easy sharing and review.
-- **Comprehensive Filters**: Apply multiple filters simultaneously for focused insights.
-- **Meta**: Add user meta information to the reporter
+- **Search & Reset**: Quickly search by keyword or status, with easy reset controls.
+- **Skip Management**: Skipped tests are hidden by default to declutter views.
+- **Self-Contained Reports**: Easily share and review offline-friendly reports.
+- **Multi-Filters**: Combine filters for targeted test analysis.
+- **Meta Information**: Add custom user or environment metadata to reports.
+- **CLI**: Open the reporter anytime using the builin CLI
 
 ---
 
@@ -81,6 +91,7 @@ const reportConfig: OrtoniReportConfig = {
   base64Image: false,
   stdIO: false,
   preferredTheme: "light",
+  chartType: "doughnut" | "pie";
   meta: {
     project: "Playwright",
     version: "3.0.0",
@@ -115,6 +126,7 @@ const reportConfig = {
   base64Image: false,
   stdIO: false,
   preferredTheme: "light",
+  chartType: "doughnut" | "pie";
   meta: {
     project: "Playwright",
     version: "3.0.0",