Appearance

Insights Styles ​

File Information ​

  • Path: assets/css/insights.css
  • Purpose: Analytics and insights page styles
  • Size: ~952 bytes

Overview ​

The Insights CSS file provides styles for the analytics and insights pages, including chart containers, data visualization components, and insights-specific layouts.

Key Features ​

  1. Chart Containers

    • Chart wrappers
    • Canvas styling
    • Responsive sizing

  2. Data Display

    • Metric cards
    • Data tables
    • Visualization areas

CSS Classes ​

Chart Containers ​

css
.insights-chart {
  width: 100%;
  height: 100%;
  position: relative;
}

.insights-chart canvas {
  width: 100% !important;
  height: auto !important;
}

Properties:

  • Full width
  • Responsive height
  • Canvas sizing

Metric Cards ​

css
.insights-metric {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: var(--DBwhite);
  border-radius: 8px;
  border: 1px solid var(--borderColor);
}

.insights-metric .value {
  font-size: var(--fontsize22);
  font-weight: 600;
  color: var(--DBgray);
  margin-bottom: 4px;
}

.insights-metric .label {
  font-size: var(--fontsize14);
  color: var(--DBgray5252);
}

Properties:

  • Column layout
  • White background
  • Large value display
  • Label styling

Data Tables ​

css
.insights-table {
  width: 100%;
  border-collapse: collapse;
}

.insights-table th {
  font-size: var(--fontsize14);
  font-weight: 600;
  color: var(--DBgray);
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--borderColor);
}

.insights-table td {
  font-size: var(--fontsize14);
  color: var(--DBgray5252);
  padding: 12px;
  border-bottom: 1px solid var(--DBgrayLight2);
}

Properties:

  • Full width table
  • Bordered cells
  • Header styling
  • Data cell styling

Usage Examples ​

Chart Container ​

html
<div class="insights-chart">
  <canvas id="insightsChart"></canvas>
</div>

Metric Card ​

html
<div class="insights-metric">
  <div class="value">1,234</div>
  <div class="label">Total Views</div>
</div>

Data Table ​

html
<table class="insights-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Views</th>
      <th>Downloads</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2024-01-01</td>
      <td>123</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

Integration Points ​

  • Insights Page: Analytics display
  • Dashboard: Insights widgets
  • Analytics Components: Chart components

Notes for Development ​

  • Minimal styles (952 bytes)
  • Chart library integration
  • Responsive design
  • Uses CSS variables