Angular Widgets

import { RouterLink } from '@angular/router';
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

import {
  ButtonDirective,
  ColComponent,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  RowComponent,
  TemplateIdDirective,
  WidgetStatAComponent
} from '@coreui/angular';
import { ChartjsComponent } from '@coreui/angular-chartjs';
import { cilArrowTop, cilOptions } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import { getStyle } from '@coreui/utils';

@Component({
  selector: 'docs-widgets-stats',
  templateUrl: './widgets-stats.component.html',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.Eager,
  imports: [
    RowComponent,
    ColComponent,
    WidgetStatAComponent,
    TemplateIdDirective,
    IconDirective,
    DropdownComponent,
    ButtonDirective,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    RouterLink,
    ChartjsComponent
  ]
})
export class WidgetsStatsComponent implements OnInit {
  icons = { cilOptions, cilArrowTop };

  data: any = {};
  options: any = {};

  labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
    'January',
    'February',
    'March',
    'April'
  ];

  datasets = [
    {
      label: 'My First dataset',
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: getStyle('--cui-primary'),
      pointHoverBorderColor: getStyle('--cui-primary'),
      data: [65, 59, 84, 84, 51, 55, 40]
    }
  ];

  optionsDefault = {
    plugins: {
      legend: {
        display: false
      }
    },
    maintainAspectRatio: true,
    scales: {
      x: {
        grid: {
          display: false,
          drawBorder: false
        },
        ticks: {
          display: false
        }
      },
      y: {
        min: 30,
        max: 89,
        display: false,
        grid: {
          display: false
        },
        ticks: {
          display: false
        }
      }
    },
    elements: {
      line: {
        borderWidth: 1,
        tension: 0.4
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  };

  ngOnInit(): void {
    this.data = {
      labels: this.labels.slice(0, 7),
      datasets: this.datasets
    };
    this.options = this.optionsDefault;
  }
}

import { Component, computed, signal } from '@angular/core';
import { ColComponent, ProgressComponent, RowComponent, WidgetStatBComponent } from '@coreui/angular';

@Component({
  selector: 'docs-widgets-stats-b',
  templateUrl: './widgets-stats-b.component.html',
  imports: [RowComponent, ColComponent, WidgetStatBComponent, ProgressComponent]
})
export class WidgetsStatsBComponent {
  readonly value = signal<number>(75.9);
  readonly valuePercent = computed(() => `${this.value()}%`);
}

import { Component, inject } from '@angular/core';
import {
  ColComponent,
  ProgressComponent,
  RowComponent,
  TemplateIdDirective,
  WidgetStatCComponent
} from '@coreui/angular';
import { IconDirective, IconSetService } from '@coreui/icons-angular';
import { cilChartPie } from '@coreui/icons';

@Component({
  selector: 'docs-widgets-stats-c',
  templateUrl: './widgets-stats-c.component.html',
  imports: [RowComponent, ColComponent, WidgetStatCComponent, TemplateIdDirective, IconDirective, ProgressComponent]
})
export class WidgetsStatsCComponent {
  public iconSet = inject(IconSetService);
  constructor() {
    this.iconSet.icons = {
      cilChartPie
    };
  }
}

import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input } from '@angular/core';
import { cibFacebook, cibLinkedin, cibTwitter } from '@coreui/icons';
import { ColComponent, RowComponent, WidgetStatDComponent } from '@coreui/angular';
import { ChartjsComponent } from '@coreui/angular-chartjs';
import { IconDirective } from '@coreui/icons-angular';
import { ChartOptions } from 'chart.js';

@Component({
  selector: 'docs-widgets-stats-d',
  templateUrl: './widgets-stats-d.component.html',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.Eager,
  imports: [RowComponent, ColComponent, WidgetStatDComponent, IconDirective, ChartjsComponent]
})
export class WidgetsStatsDComponent implements AfterContentInit {
  readonly changeDetectorRef = inject(ChangeDetectorRef);

  icons = { cibFacebook, cibLinkedin, cibTwitter };

  readonly withCharts = input(true);

  chartOptions: ChartOptions = {
    elements: {
      line: {
        tension: 0.4
      },
      point: {
        radius: 0,
        hitRadius: 10,
        hoverRadius: 4,
        hoverBorderWidth: 3
      }
    },
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        display: false
      },
      y: {
        display: false
      }
    }
  };
  labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  datasets = {
    borderWidth: 2,
    fill: true
  };
  colors = {
    backgroundColor: 'rgba(255,255,255,.1)',
    borderColor: 'rgba(255,255,255,.55)',
    pointHoverBackgroundColor: '#fff'
  };
  brandData = [
    {
      icon: this.icons.cibFacebook,
      values: [
        { title: 'friends', value: '89K' },
        { title: 'feeds', value: '459' }
      ],
      capBg: { '--cui-card-cap-bg': '#3b5998' },
      labels: [...this.labels],
      data: {
        labels: [...this.labels],
        datasets: [{ ...this.datasets, data: [65, 59, 84, 84, 51, 55, 40], label: 'Facebook', ...this.colors }]
      }
    },
    {
      icon: this.icons.cibTwitter,
      values: [
        { title: 'followers', value: '973k' },
        { title: 'tweets', value: '1.792' }
      ],
      capBg: { '--cui-card-cap-bg': '#00aced' },
      data: {
        labels: [...this.labels],
        datasets: [{ ...this.datasets, data: [1, 13, 9, 17, 34, 41, 38], label: 'Twitter', ...this.colors }]
      }
    },
    {
      icon: this.icons.cibLinkedin,
      values: [
        { title: 'contacts', value: '500' },
        { title: 'feeds', value: '1.292' }
      ],
      capBg: { '--cui-card-cap-bg': '#4875b4' },
      data: {
        labels: [...this.labels],
        datasets: [{ ...this.datasets, data: [78, 81, 80, 45, 34, 12, 40], label: 'LinkedIn', ...this.colors }]
      }
    }
  ];

  capStyle(value: string) {
    return !!value ? { '--cui-card-cap-bg': value } : {};
  }

  ngAfterContentInit(): void {
    this.changeDetectorRef.detectChanges();
  }
}

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { ChartjsComponent } from '@coreui/angular-chartjs';
import { ColComponent, RowComponent, WidgetStatEComponent } from '@coreui/angular';
import { ChartData, ChartOptions } from 'chart.js';

@Component({
  selector: 'docs-widgets-stats-e',
  templateUrl: './widgets-stats-e.component.html',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.Eager,
  imports: [RowComponent, ColComponent, WidgetStatEComponent, ChartjsComponent]
})
export class WidgetsStatsEComponent {
  barOptions: ChartOptions = {
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        display: false
      },
      y: {
        display: false
      }
    }
  };

  lineOptions: ChartOptions = {
    maintainAspectRatio: false,
    elements: {
      line: {
        tension: 0.4
      },
      point: {
        radius: 0
      }
    },
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        display: false
      },
      y: {
        display: false
      }
    }
  };

  data: ChartData[] = [
    {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
      datasets: [
        {
          backgroundColor: '#321fdb',
          borderColor: 'transparent',
          borderWidth: 1,
          data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47]
        }
      ]
    },
    {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
      datasets: [
        {
          backgroundColor: 'transparent',
          borderColor: '#321fdb',
          borderWidth: 2,
          data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
          pointBackgroundColor: '#321fdb'
        }
      ]
    }
  ];
}

import { Component } from '@angular/core';
import { cilArrowRight, cilChartPie } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';
import { ColComponent, RowComponent, TemplateIdDirective, WidgetStatFComponent } from '@coreui/angular';

@Component({
  selector: 'docs-widgets-stats-f',
  templateUrl: './widgets-stats-f.component.html',
  imports: [RowComponent, ColComponent, WidgetStatFComponent, TemplateIdDirective, IconDirective]
})
export class WidgetsStatsFComponent {
  icons = { cilChartPie, cilArrowRight };
}