ngx-wapp-components 3.2.11-alpha.8 → 3.2.11

package/src/lib/card/w-card/w-card.component.scss

@@ -1,96 +0,0 @@
-@import '../../../styles/variables';
-
-:host ::ng-deep .w-card-top-image .p-card {
-    border-radius: $defaultBorderRadius;
-    box-shadow: $defaultShadow;
-    border: $defaultBorderWidth solid #e2e8f0;
-}
-
-::ng-deep .w-card-left-image-card .p-card {
-    padding: none;
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    box-shadow: $defaultShadow;
-    border: $defaultBorderWidth solid #e2e8f0;
-}
-
-.w-card-image {
-    border-top-right-radius: $defaultBorderRadius;
-    border-top-left-radius: $defaultBorderRadius;
-}
-
-.w-card-left-image {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-:host ::ng-deep .p-card .p-card-body {
-    padding: $spacingS;
-    height: 100%;
-    display: flex;
-}
-
-:host ::ng-deep .p-card .p-card-footer {
-    flex-grow: 1;
-    align-content: end;
-}
-
-:host ::ng-deep .w-card-left-image-card .p-card .p-card-body {
-    padding: $spacingS;
-}
-
-.w-card-left-image-card {
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-}
-
-:host ::ng-deep .p-card .p-card-content {
-    padding: 2px 0px;
-}
-
-:host ::ng-deep .p-card .p-card-title {
-    font-size: 1rem;
-    font-weight: 800;
-    margin-bottom: 0px;
-}
-
-.w-card-image-container {
-    position: relative;
-}
-
-.w-card-left-image-container {
-    position: relative;
-    max-width: 120px;
-    cursor: pointer;
-}
-
-.w-card-image-icon {
-    position: absolute;
-    bottom: 4px;
-    right: 0px;
-    width: 36px;
-    height: 36px;
-    background-color: #00000075;
-    border-radius: $defaultBorderRadius $spacingZero $spacingZero $spacingZero;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.w-card-left-image-icon {
-    bottom: 0px !important;
-}
-
-.w-icon-card-image { 
-    position: absolute; 
-    left: 50%; 
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 40%; 
-    height: 40%;
-    color: white;
-}

package/src/lib/card/w-card/w-card.component.spec.ts

@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { WCardComponent } from './w-card.component';
-
-describe('WCardComponent', () => {
-  let component: WCardComponent;
-  let fixture: ComponentFixture<WCardComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WCardComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WCardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/card/w-card/w-card.component.ts

@@ -1,36 +0,0 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'w-card',
-  templateUrl: './w-card.component.html',
-  styleUrls: ['./w-card.component.scss'], 
-  standalone: false
-})
-export class WCardComponent implements OnInit {
-
-  @Input('header') header!: string;
-  @Input('subheader') subheader!: string;
-  @Input('image') image!: string;
-  @Input('icon') icon!: string;
-  @Input('iconColor') iconColor!: string;
-  @Input('width') width: string = '250px';
-  @Input('imagePosition') imagePosition: 'top' | 'left' = 'top';
-  @Input('defaultImageIcon') defaultImageIcon: string = "analytics-reports";
-
-  @Output('cardClick') cardClick: EventEmitter<void> = new EventEmitter<void>();
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  onCardClick() {
-    this.cardClick.emit();
-  }
-
-  isPath(path: string) {
-    const urlPattern = /^(ftp|http|https):\/\/[^ "]+$/;
-    const localPattern = /^(\/|\.\/|\.\.\/|assets\/)/;
-    return urlPattern.test(path) || localPattern.test(path);
-  }
-}

package/src/lib/chart/w-chart-bar/w-chart-bar.component.html

@@ -1 +0,0 @@
-<p-chart #wChartBar type="bar" [data]="data" [options]="options" [width]="width" [height]="setAutoHeight == true ? baseHeightPx : height" (onDataSelect)="onDataSelected($event)"></p-chart>

package/src/lib/chart/w-chart-bar/w-chart-bar.component.scss

@@ -1 +0,0 @@
-@import './../../../styles/variables'; 

package/src/lib/chart/w-chart-bar/w-chart-bar.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WChartBarComponent } from './w-chart-bar.component';
-
-describe('WChartBarComponent', () => {
-  let component: WChartBarComponent;
-  let fixture: ComponentFixture<WChartBarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WChartBarComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(WChartBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/chart/w-chart-bar/w-chart-bar.component.ts

@@ -1,432 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, forwardRef } from '@angular/core';
-import { ChartConfig } from '../../shared/models/w-chart-config.model';
-import { UIChart } from 'primeng/chart'; 
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { Chart } from 'chart.js';
-import { WSummaryPipe } from '../../shared/pipes/w-summary.pipe';
-Chart.register(ChartDataLabels);
-
-@Component({
-    selector: 'w-chart-bar',
-    templateUrl: './w-chart-bar.component.html',
-    styleUrls: ['./w-chart-bar.component.scss'],
-    providers: [WSummaryPipe],
-    standalone: false
-})
-export class WChartBarComponent implements OnInit, OnChanges{
-  @Input('title') title!: string;
-  private _chartConfig!: ChartConfig;
-  @Input()
-  set config(value: ChartConfig) {
-    this._chartConfig = value;
-  }
-
-  get config(): ChartConfig {
-    return this._chartConfig;
-  }
-
-  @Input('isHorizontal') isHorizontal: boolean = true; 
-  @Input('width') width!: string; 
-  @Input('height') height!: string; 
-  @Input('setAutoHeight') setAutoHeight: boolean = false; 
-  @Input('maxLabelLength') maxLabelLength?: number; 
-  @Input('labelConfig') labelConfig!: { indicator?: string, maxbreakline?: number, makeUppercase?: boolean, fontSize?: number, dataLabelFont?: { size: number, weight: any }, titleFont?: { size: number } };
-  @Output('onDataSelected') onDataSelectedEvent: EventEmitter<any> = new EventEmitter(); 
-  @ViewChild('wChartBar') wChartBar!: UIChart;  
-
-  style: any; 
-  data: any;
-  options: any;
-  textColorTitle: any; 
-  textColorLegend: any; 
-  textColorAxis: any; 
-  gridColor: any; 
-  textInverseColor: any; 
-  font: any; 
-  dataLabelFont = {
-    size: 16, 
-    weight: 500
-  };
-  titleFont = {
-    size: 14, weight: 700
-  }
-  widthBars = 14; 
-  baseHeight: number = 200; 
-  baseHeightPx: string = "200px";
-  barPadding: number = 8;
-
-  constructor(private wappSummary: WSummaryPipe){}
-
-  ngOnInit(): void {
-    this.style = getComputedStyle(document.documentElement);
-    this.textColorTitle = this.style.getPropertyValue('--w-text-main-color');
-    this.textColorLegend = this.style.getPropertyValue('--w-text-main-color');
-    this.textColorAxis = this.style.getPropertyValue('--w-text-main-color');
-    this.gridColor = this.style.getPropertyValue('--w-text-softest-color');
-    this.textInverseColor = this.style.getPropertyValue('--w-text-inverse-color'); 
-
-    this.font = {
-      family: 'Segoe UI',
-      size: 12,
-      weight: 600,
-    };
-
-    this._chartConfig.labels = this._chartConfig.labels.map(l => {return this.processLabelForDisplay(l)});
-
-    this.data = {
-      labels: this._chartConfig.labels, 
-      datasets: [],
-      plugins: [ChartDataLabels]
-    };
-
-    this.fillData(); 
-
-    this.options = {
-      indexAxis: this.isHorizontal ? 'y' : 'x',
-      maintainAspectRatio: false,
-      aspectRatio: 0.6,
-      layout: {
-        padding: { 
-          top: 12,
-          right: 12,
-          left: 12, 
-          bottom: 12
-        }
-      },
-      plugins: {
-        title: {
-          display: this.title ? true : false,
-          color: this.textColorTitle, 
-          text: this.title,
-          font: this.titleFont,
-          padding: 24,
-        }, 
-        tooltip: {
-          mode: 'nearest',
-          intersect: true,
-          callbacks: {
-            label: (context: any) => {
-              const dataset = context.dataset;
-              const dataIndex = context.dataIndex;
-              
-              const dataValue = dataset.data?.[dataIndex] ?? 0;
-
-              if (this.hasValidExtraData(dataset, dataIndex)) {
-                return [
-                  `${dataset.label}: ${dataValue}`,
-                  `${dataset.extraLegend}: ${dataset.extraData[dataIndex]}`
-                ];
-              }
-              
-              return `${dataset.label}: ${dataValue}`;
-            }
-          }
-        },
-        legend: {
-          padding: 24,
-          labels: {
-              color: this.textColorLegend,
-              font: this.font,
-              padding: 32
-          }, 
-          position: 'bottom'
-        },
-        datalabels: {
-          display: this._chartConfig.showDataLabels,
-          color: (ctx: any) => {
-            const backgroundColor = ctx.dataset?.backgroundColor as string;
-            const baseFont = this._chartConfig.textColor ?? this.textInverseColor; 
-            
-            if(backgroundColor){
-              return this.idealTextColorFor(backgroundColor, baseFont, ctx);
-            }
-            
-            return baseFont;
-          },
-          anchor: 'end', 
-          align: (ctx:any) => {
-            const isHorizontal = (ctx.chart?.options as any)?.indexAxis === 'y';
-            const barWidth = this.getBarLengthPx(ctx);
-            const textWidth = this.measureDatalabelTextWidthPx(ctx);
-            const fitsInside = textWidth + this.barPadding <= barWidth;
-
-            if (barWidth < (this._chartConfig.widthBars ?? this.widthBars) || !fitsInside) {
-              return isHorizontal ? 'end' : 'top';
-            }
-            return 'start';
-          },
-          font: this.dataLabelFont, 
-          formatter: function (value:any, index:any, values:any) { return value || null;  }
-        }
-      },
-      scales: this.fillScales()
-    };
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if(changes['config']?.previousValue !== undefined){
-      this.data.datasets = [];
-      this.fillData();
-      this.wChartBar.refresh(); 
-    }
-
-    if(changes['title']?.previousValue !== undefined || changes['title']?.previousValue == undefined){
-      if(this.options){
-        this.options.plugins!.title.text = this.title; 
-        this.wChartBar.refresh(); 
-      }
-    }
-
-    if(changes['isHorizontal']?.previousValue !== undefined){
-      if(this.options){
-        this.options.indexAxis = this.isHorizontal ? 'y' : 'x'; 
-        this.options.scales = {}; 
-        this.options.scales = this.fillScales(); 
-        this.wChartBar.refresh(); 
-      }
-    }
-
-    if(changes['labelConfig'] && changes['labelConfig'].currentValue){
-      this.labelConfig = changes['labelConfig'].currentValue;
-      if(this.labelConfig.dataLabelFont!){
-        this.dataLabelFont = {
-          size: this.labelConfig.dataLabelFont.size,
-          weight: this.labelConfig.dataLabelFont.weight,
-        }
-      }
-
-      if(this.labelConfig.titleFont!){
-        this.titleFont.size = this.labelConfig.titleFont.size;
-      }    
-    }
-  }
-
-  fillScales(){
-    if(this.labelConfig && this.labelConfig.fontSize){
-      this.font.size = this.labelConfig.fontSize;
-    }
-
-    return  {
-      x: {
-        stacked: this._chartConfig.stacked,
-        ticks: {
-          color: this.textColorLegend,
-          font: this.font, 
-          callback: (value: any, index: number) => {
-            if(this.isHorizontal == false){
-              return this.maxLabelLength ? (this.wappSummary.transform( this._chartConfig.labels[value], this.maxLabelLength)) : this._chartConfig.labels[value];
-            } else {
-              return value;
-            }
-          }
-        },
-        grid: {
-            color: this.gridColor,
-            display: this.isHorizontal ? true : false,
-        }
-      },
-      y: { 
-        position: 'left',  
-        stacked: this._chartConfig.stacked,
-        ticks: {
-          color: this.textColorLegend,
-          align: 'start', 
-          crossAlign: 'center', 
-          font: this.font, 
-          callback: (value: any, index: number) => {
-            if(this.isHorizontal == true){
-              return this.maxLabelLength ? (this.wappSummary.transform( this._chartConfig.labels[value], this.maxLabelLength)) : this._chartConfig.labels[value];
-            } else {
-              return value;
-            }
-          }
-        },
-        grid: {
-          color: this.gridColor,
-          display: this.isHorizontal ? false : true,
-        }
-      }
-    }
-  }
-
-  fillData(){
-    let lengths : any[] = [];
-    this._chartConfig.data.forEach((element: any, index) => {
-      this.data.datasets.push(
-      {
-        type: 'bar',
-        label: element.legend,
-        backgroundColor: element.color || this.style.getPropertyValue( index == 0 ? '--w-primary-800' : '--w-primary-100'),
-        data: element.data,
-        borderRadius: 4,
-        barThickness: this._chartConfig.widthBars ?? this.widthBars, 
-        extraLegend: element.extraLegend,
-        extraData: element.extraData || [], 
-      }); 
-      lengths.push(element.data.length); 
-    });
-
-    if(this.setAutoHeight == true && this.isHorizontal == true){
-      let barHeights = ((this._chartConfig.widthBars ?? this.widthBars) * 2.5) * this.getMaxNumber(lengths);
-      this.baseHeight = this.baseHeight + barHeights;
-      this.baseHeightPx = this.baseHeight + 'px'; 
-    }
-  }
-
-  onDataSelected(event: any){
-    this.onDataSelectedEvent.emit(event); 
-  }
-
-  getMaxNumber(numbers: number[]): number {
-    if (numbers.length === 0) {
-      return Number.NEGATIVE_INFINITY;
-    }
-    return Math.max(...numbers);
-  }
-
-  private hasValidExtraData(dataset: any, dataIndex: number): boolean {
-    return dataset.extraData && 
-          Array.isArray(dataset.extraData) &&
-          dataIndex < dataset.extraData.length &&
-          dataset.extraData[dataIndex] !== undefined && 
-          dataset.extraData[dataIndex] !== null &&
-          dataset.extraLegend;
-  }
-
-  private processLabelForDisplay(label: string): string | string[] {
-    if(this.labelConfig?.makeUppercase != undefined){
-      if(this.labelConfig.makeUppercase == true){
-        label = label.toUpperCase();
-      }
-      else{
-        label = label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
-      }
-    }
-
-    if (!this.labelConfig || !this.labelConfig.indicator) {
-      return label;
-    }
-    
-    if (label.includes(this.labelConfig.indicator)) {
-      const lines = label.split(this.labelConfig.indicator);
-      
-      if (this.labelConfig.maxbreakline && lines.length > this.labelConfig.maxbreakline) {
-        return lines.slice(0, this.labelConfig.maxbreakline);
-      }
-      return lines;
-     
-    }
-    return label;
-  }
-
-  idealTextColorFor(bgHex: string, textColor?: string, ctx?: any) {
-    let isBarSmall = this.getBarLengthPx(ctx) < (this._chartConfig.widthBars ?? this.widthBars);
-
-    switch(bgHex){
-      case '#b5dced': 
-        if(textColor){
-          if(textColor.toLowerCase() == '#e46d3d'){
-            return '#ad300d';
-          }
-        }
-        return '#10485d';
-      case '#10485d': 
-        if(textColor){
-          if(textColor.toLowerCase() == '#e46d3d'){
-            return '#e46d3d';
-          }
-        }
-        if(isBarSmall){
-          return '#10485d';
-        }else{
-          return '#fff';
-        }
-      default: 
-        if(isBarSmall){
-          return '#10485d';
-        }else{
-          return '#fff';
-        };
-    }
-  }
-
-  idealTextStrokeColorFor(bgHex: string, textColor?: string) {
-    switch(bgHex){
-      case '#b5dced': 
-        if(textColor){
-          if(textColor.toLowerCase() == '#e46d3d'){
-            return 'rgba(146, 199, 234, 0.89)';
-          }
-        }
-        return 'rgba(98, 141, 165, 0.6)';
-      case '#10485d': 
-        if(textColor){
-          if(textColor.toLowerCase() == '#e46d3d'){
-            return 'rgba(93, 57, 44, 0.6)';
-          }
-        }
-        return 'rgba(26, 26, 26, 0.9)';
-      default: 
-        return 'rgba(26, 26, 26, 0.9)';
-    }
-  }
-
-  getBarLengthPx(ctx: any): number {
-    const chart = ctx?.chart;
-    const di = ctx?.datasetIndex;
-    const i = ctx?.dataIndex;
-    if (!chart || di == null || i == null) return 0;
-    const el = chart.getDatasetMeta(di)?.data?.[i];
-
-    if (!el) return 0;
-    
-    const props = typeof el.getProps === 'function'
-        ? el.getProps(['x', 'y', 'base', 'xBase', 'yBase', 'width', 'height'], true)
-        : el;
-
-    const isHorizontal = (ctx.chart?.options as any)?.indexAxis === 'y';
-    const valueScale = chart?.scales?.[isHorizontal ? 'x' : 'y'];
-    const basePixelFromScale = valueScale?.getBasePixel?.();
-    const basePixel =
-      basePixelFromScale ??
-      (props.base ?? (isHorizontal ? props.xBase : props.yBase));
-
-    if (isHorizontal) {
-      const x = props.x ?? el.x;
-      if (x == null || basePixel == null) return Math.abs(props.width ?? 0);
-      return Math.abs(x - basePixel);
-    } else {
-      const y = props.y ?? el.y;
-      if (y == null || basePixel == null) return Math.abs(props.height ?? 0);
-      return Math.abs(y - basePixel);
-    }
-  }
-
-  getDatalabelText(context: any): string {
-    const fv = (context as any).formattedValue;
-    if (fv != null) return String(fv);
-    const raw = context?.dataset?.data?.[context?.dataIndex];
-    return raw == null ? '' : String(raw);
-  }
-
-  resolveDatalabelFont(context: any): { font: string; size: number } {
-    const size = this.dataLabelFont.size;
-    const weight = this.dataLabelFont.weight;
-    const family = 'Segoe UI'; 
-    const style = 'normal';
-    return { font: `${style} ${weight} ${size}px ${family}`, size };
-  }
-
-  measureDatalabelTextWidthPx(context: any): number {
-    const text = this.getDatalabelText(context);
-    const { font } = this.resolveDatalabelFont(context);
-    const ctx2d = context.chart?.ctx;
-    if (!ctx2d || !text) return 0;
-
-    const prevFont = ctx2d.font;
-    ctx2d.font = font;
-    const width = ctx2d.measureText(text).width;
-    ctx2d.font = prevFont;
-    return width;
-  }
-} 

package/src/lib/dataview/w-dataview/w-dataview.component.html

@@ -1,3 +0,0 @@
-<p>
-  w-dataview works! yeeei
-</p>

package/src/lib/dataview/w-dataview/w-dataview.component.spec.ts

@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { WDataviewComponent } from './w-dataview.component';
-
-describe('WDataviewComponent', () => {
-  let component: WDataviewComponent;
-  let fixture: ComponentFixture<WDataviewComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WDataviewComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WDataviewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/dataview/w-dataview/w-dataview.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'w-dataview',
-  templateUrl: './w-dataview.component.html',
-  styleUrls: ['./w-dataview.component.scss'],
-  standalone: false
-})
-export class WDataviewComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}