import { DashboardV3Component } from './dashboard/dashboard-v3.component';
import { PgSummaryPipe } from './pg-summary.pipe';
import { InlineLoadingModule, ToggletipModule, TagModule } from 'carbon-components-angular';
+import { ProductiveCardComponent } from '~/app/shared/components/productive-card/productive-card.component';
@NgModule({
imports: [
BaseChartDirective,
ToggletipModule,
InlineLoadingModule,
- TagModule
+ TagModule,
+ ProductiveCardComponent
],
declarations: [
DashboardV3Component,
[narrow]="true">
<div cdsCol
class="cds-mb-5"
- [columnNumbers]="{lg: 11}">
- <cds-tile>Storage card</cds-tile>
- </div>
- <div cdsCol
- class="cds-mb-5"
- [columnNumbers]="{lg: 5}">
- <cds-tile>Docs card</cds-tile>
+ [columnNumbers]="{lg: 16}">
+ <cd-overview-storage-card></cd-overview-storage-card>
</div>
</div>
<div cdsRow>
import { Component } from '@angular/core';
import { GridModule, TilesModule } from 'carbon-components-angular';
+import { OverviewStorageCardComponent } from './storage-card/overview-storage-card.component';
@Component({
selector: 'cd-overview',
- imports: [GridModule, TilesModule],
+ imports: [GridModule, TilesModule, OverviewStorageCardComponent],
standalone: true,
templateUrl: './overview.component.html',
styleUrl: './overview.component.scss'
--- /dev/null
+<cd-productive-card
+ title="Storage overview"
+ i18n-title>
+ <ng-template #headerAction>
+ <cds-dropdown
+ label="Storage type"
+ class="overview-storage-card-dropdown"
+ i18n-label
+ size="sm"
+ [placeholder]="selectedStorageType"
+ (selected)="onStorageTypeSelect($event)">
+ <cds-dropdown-list [items]="dropdownItems"></cds-dropdown-list>
+ </cds-dropdown>
+ </ng-template>
+ <div class="overview-storage-card-chart-header">
+ <h5>
+ <span
+ class="cds--type-heading-05"
+ i18n>200{{' '}}</span>
+ <span
+ class="cds--type-body-02"
+ i18n>TB of 1300 TB used</span>
+ </h5>
+ <cds-tooltip
+ [autoAlign]="true"
+ class="cds-mt-5 "
+ title=""
+ [caret]="true"
+ description="An info tip about raw capacity"
+ i18n-description>
+ <cds-checkbox
+ [checked]="isRawCapacity"
+ (checkedChange)="toggleRawCapacity($event)"
+ i18n>
+ Raw capacity
+ </cds-checkbox>
+ </cds-tooltip>
+ </div>
+ <ibm-meter-chart
+ [options]="options"
+ [data]="displayData"
+ class="overview-storage-card-chart"></ibm-meter-chart>
+</cd-productive-card>
--- /dev/null
+.overview-storage-card {
+ // Hiding the native chart title
+ &-chart {
+ .meter-title {
+ height: 0 !important;
+ display: none !important;
+ }
+
+ .spacer {
+ height: 0 !important;
+ display: none !important;
+ }
+ }
+
+ &-chart-header {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &-dropdown {
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+
+ .cds--label {
+ padding-right: var(--cds-spacing-03);
+ }
+
+ .cds--dropdown {
+ flex: 0 0 35%;
+ }
+ }
+}
--- /dev/null
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OverviewStorageCardComponent } from './overview-storage-card.component';
+
+describe('OverviewStorageCardComponent', () => {
+ let component: OverviewStorageCardComponent;
+ let fixture: ComponentFixture<OverviewStorageCardComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [OverviewStorageCardComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(OverviewStorageCardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, ViewEncapsulation } from '@angular/core';
+import {
+ CheckboxModule,
+ DropdownModule,
+ GridModule,
+ TilesModule,
+ TooltipModule
+} from 'carbon-components-angular';
+import { ProductiveCardComponent } from '~/app/shared/components/productive-card/productive-card.component';
+import { MeterChartComponent, MeterChartOptions } from '@carbon/charts-angular';
+
+const StorageType = {
+ ALL: $localize`All`,
+ BLOCK: $localize`Block`,
+ FILE: $localize`File`,
+ OBJECT: $localize`Object`
+};
+
+@Component({
+ selector: 'cd-overview-storage-card',
+ imports: [
+ GridModule,
+ TilesModule,
+ ProductiveCardComponent,
+ MeterChartComponent,
+ CheckboxModule,
+ DropdownModule,
+ TooltipModule
+ ],
+ standalone: true,
+ templateUrl: './overview-storage-card.component.html',
+ styleUrl: './overview-storage-card.component.scss',
+ encapsulation: ViewEncapsulation.None
+})
+export class OverviewStorageCardComponent {
+ options: MeterChartOptions = {
+ height: '45px',
+ meter: {
+ proportional: {
+ total: 2000,
+ unit: 'GB',
+ breakdownFormatter: (_e) => null,
+ totalFormatter: (_e) => null
+ }
+ },
+ toolbar: {
+ enabled: false
+ },
+ color: {
+ pairing: {
+ option: 2
+ }
+ },
+ canvasZoom: {
+ enabled: false
+ }
+ };
+ allData = [
+ {
+ group: StorageType.BLOCK,
+ value: 202
+ },
+ {
+ group: StorageType.FILE,
+ value: 654
+ },
+ {
+ group: StorageType.OBJECT,
+ value: 120
+ }
+ ];
+ dropdownItems = [
+ { content: StorageType.ALL },
+ { content: StorageType.BLOCK },
+ { content: StorageType.FILE },
+ { content: StorageType.OBJECT }
+ ];
+ isRawCapacity: boolean = true;
+ selectedStorageType: string = StorageType.ALL;
+ displayData = this.allData;
+
+ toggleRawCapacity(isChecked: boolean) {
+ this.isRawCapacity = isChecked;
+ }
+
+ onStorageTypeSelect(selected: { item: { content: string; selected: true } }) {
+ this.selectedStorageType = selected?.item?.content;
+ if (this.selectedStorageType === StorageType.ALL) {
+ this.displayData = this.allData;
+ } else this.displayData = this.allData.filter((d) => d.group === this.selectedStorageType);
+ }
+}
[cdsLayer]="0">
<header
cdsGrid
- [useCssGrid]="true"
- [narrow]="true"
class="productive-card-header">
- <h2 cdsCol
- [columnNumbers]="{md: headerActionTemplate ? 12 : 16, lg: headerActionTemplate ? 12 : 16}"
- class="cds--type-heading-compact-02 productive-card-header-title">
- {{title}}
- </h2>
- @if(headerActionTemplate) {
- <div cdsCol
- [columnNumbers]="{md: 4, lg: 4}"
- class="productive-card-header-actions">
- <ng-container *ngTemplateOutlet="headerActionTemplate"></ng-container>
- </div>
- }
+ <div cdsRow
+ class="productive-card-header-row">
+ <div cdsCol
+ [columnNumbers]="{sm: headerActionTemplate ? 12 : 16, md: headerActionTemplate ? 12 : 16, lg: headerActionTemplate ? 12 : 16}">
+ <h2 class="cds--type-heading-compact-02">{{title}}</h2>
+ </div>
+ @if(!!headerActionTemplate) {
+ <div cdsCol
+ [columnNumbers]="{sm: 4, md: 4, lg: 4}"
+ class="productive-card-header-actions">
+ <ng-container *ngTemplateOutlet="headerActionTemplate"></ng-container>
+ </div>
+ }
+ </div>
</header>
<section class="productive-card-section cds--type-body-compact-01"
[ngClass]="{'productive-card-section--footer': footerTemplate}">
<ng-content></ng-content>
</section>
- @if(footerTemplate) {
+ @if(!!footerTemplate) {
<footer class="productive-card-footer">
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
</footer>
padding: 0;
&-header {
- margin: 0;
- padding: var(--cds-spacing-05);
+ padding-inline: var(--cds-spacing-05);
+ }
- &-title {
- margin: 0;
- }
+ &-header-row {
+ padding: var(--cds-spacing-05);
+ }
- &-actions {
- margin: 0;
- }
+ &-header-actions {
+ padding-right: 0;
}
&-section {
+import { CommonModule } from '@angular/common';
import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { GridModule, LayerModule, TilesModule } from 'carbon-components-angular';
/**
* A generic productive card component.
*/
@Component({
selector: 'cd-productive-card',
- standalone: false,
+ imports: [GridModule, TilesModule, CommonModule, LayerModule],
+ standalone: true,
templateUrl: './productive-card.component.html',
styleUrl: './productive-card.component.scss'
})
projects / ceph.git / commitdiff