Charts

Domain

Chart.js chart bileşenleri Card içinde: Bar, Line, Doughnut, Radar ve Polar Area.

Bar — Revenue vs Expenses

Preview

Revenue vs Expenses

Monthly comparison (USD)

Code

<%- include('modules/domain/common/charts/Charts', {
  chartId: 'revenue-bar',
  type: 'bar',
  title: 'Revenue vs Expenses',
  subtitle: 'Monthly comparison (USD)',
  data: barData,
  options: { scales: { y: { beginAtZero: true } } }
}) %>

Line — User Activity

Preview

User Activity

Daily active users vs new signups

Code

<%- include('modules/domain/common/charts/Charts', {
  chartId: 'user-activity-line',
  type: 'line',
  title: 'User Activity',
  subtitle: 'Daily active users vs new signups',
  data: lineData
}) %>

Doughnut — Sales by Category

Preview

Sales by Category

Percentage share of total revenue

Code

<%- include('modules/domain/common/charts/Charts', {
  chartId: 'sales-doughnut',
  type: 'doughnut',
  title: 'Sales by Category',
  data: doughnutData,
  options: { cutout: '65%', plugins: { legend: { position: 'bottom' } } }
}) %>

Radar — Product Comparison

Preview

Product Comparison

Our product vs competitor across 6 dimensions

Code

<%- include('modules/domain/common/charts/Charts', {
  chartId: 'product-radar',
  type: 'radar',
  title: 'Product Comparison',
  data: radarData,
  options: { scales: { r: { beginAtZero: true, max: 100 } } }
}) %>

Polar Area — Regional Sales

Preview

Regional Sales

Units sold per region

Code

<%- include('modules/domain/common/charts/Charts', {
  chartId: 'regional-polar',
  type: 'polarArea',
  title: 'Regional Sales',
  data: polarData
}) %>

Source modules/domain/common/charts/Charts.ejs

<%
/*
  Charts.ejs — Chart.js chart wrapper
  Props:
    chartId    {string}  unique canvas id
    type       {string}  'bar' | 'line' | 'doughnut' | 'radar' | 'polarArea'
    title      {string}  card title
    subtitle   {string?} card subtitle
    data       {object}  Chart.js data object (JSON-serializable)
    options    {object?} Chart.js options override (JSON-serializable)
*/
const _opts = typeof options !== 'undefined' ? options : {};
%>

  
    <%= title %>
    <% if (typeof subtitle !== 'undefined' && subtitle) { %>
      <%= subtitle %>
    <% } %>