ngx-deebodata 0.1.0 → 0.1.2

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-deebodata",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,40 +1,18 @@
-{
-  "name": "ngx-deebodata",
-  "version": "0.1.0",
-  "peerDependencies": {
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0",
-    "@angular/forms": "^21.2.0",
-    "@angular/platform-browser": "^21.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "license": "SEE LICENSE IN LICENSE",
-  "homepage": "https://deebodata.com/angular-docs",
-  "keywords": [
-    "grid",
-    "data-grid",
-    "datagrid",
-    "virtual-scroll",
-    "charts",
-    "graphs",
-    "accessibility",
-    "grouping",
-    "enterprise",
-    "commercial"
-  ],
-  "module": "fesm2022/ngx-deebodata.mjs",
-  "typings": "types/ngx-deebodata.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ngx-deebodata.d.ts",
-      "default": "./fesm2022/ngx-deebodata.mjs"
-    }
-  },
-  "type": "module"
-}
+{
+  "name": "ngx-deebodata",
+  "version": "0.1.2",
+  "description": "A robust data grid solution with integrated charts, virtual scroll, row grouping, column resizing, toggle column visibility, cell editing, tab accessibility, sorting with priority, and advanced filtering.",
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://deebodata.com/angular-docs",
+  "keywords": ["grid", "data-grid", "datagrid", "virtual-scroll", "charts", "graphs", "accessibility", "grouping", "enterprise", "commercial"]
+}

package/src/lib/data-table/charts/bar-graph-component/bar-graph-component.css

@@ -0,0 +1,148 @@
+.inner-bg-contain{
+    position: relative;
+    box-sizing: border-box;
+}
+
+.inner-bg-contain::before{
+    top: 50%;
+    left: -48px;
+    font-size: x-large;
+    position: absolute;
+    display: block;
+    color: var(--grid-color);
+    content: attr(data-yaxis);
+    transform: rotate(-90deg);
+}
+
+.stat-opt-contain{
+    white-space: nowrap;
+    margin-bottom: 27px;
+}
+
+.stat-opt-btn{
+    width: 100%;
+    padding-bottom: 3px;
+    box-sizing: border-box;
+}
+
+.stat-opt-btn-active{
+    font-weight: bold;
+    border-bottom: 2px solid var(--grid-color);
+}
+
+.bar-graph-y-cols{
+    z-index: 5;
+    margin-left: 5px;
+    overflow: visible;
+    position: relative;
+    vertical-align: top;
+    box-sizing: border-box;
+    display: inline-block;
+    border-right: 1px solid var(--grid-color);
+}
+
+.bar-graph-real-vals{
+    position: relative;
+}
+
+.bar-graph-x-cols{
+    padding-top: 11px;
+    white-space: nowrap;
+    overflow-x: visible;
+    border-top: 1px solid var(--grid-color);
+}
+
+.bg-dep-var{
+    overflow: hidden;
+    height: 70px;
+    width: 100%;
+    display: flex;
+    padding: 0 5px;
+    font-size: 14px;
+    align-items: end;
+    font-weight: 500;
+    justify-content: right;
+    box-sizing: border-box;
+}
+
+.bg-dep-var div{
+    word-break:break-all;
+    color: var(--accent-color);
+}
+
+.bg-dep-var:first-of-type{
+    height: 17px !important;
+    position: relative;
+    overflow: visible !important;
+}
+
+.bg-dep-var:first-of-type::before{
+    top: 0;
+    overflow: visible;
+    position: absolute;
+    content: attr(data-number);
+    visibility: visible !important
+}
+
+.bg-dep-var:last-of-type{
+    overflow: visible !important;
+}
+
+.bg-dep-var:last-of-type::after{
+    content: attr(data-number);
+    margin-bottom: -7px;
+}
+
+.graph-actual-bar{
+    bottom: 0;
+    position: absolute;
+    align-items: center;
+    background: white;
+}
+
+.graph-actual-bar div{/*these divs are the actual colored bars*/
+    height: 0;
+    width: 80%;
+    margin: 0 auto;
+    background: #afafaf;
+    transition: height 0.3s ease-out;
+}
+
+.graph-actual-bar:hover{
+    z-index: 10;
+}
+
+.graph-actual-bar:hover::before{
+    width: 150px;
+    display: block;
+    font-weight: 500;
+    font-size: small;
+    white-space: nowrap;
+    background: white;
+    padding: 1px 2px 3px 2px;
+    content: attr(data-value);
+    border-radius: 3px;
+}
+
+ .bg-ind-var{
+    font-size: small;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    color: var(--accent-color);
+    transform: rotate(45deg);
+}
+
+.lbl-show{
+    overflow: visible !important;
+    transition: overflow 0.2s ease;
+}
+
+.bar-graph-x-label{
+    font-size: x-large;
+    font-weight: 500;
+    padding-top: 17px;
+    text-align: center;
+    overflow-x: hidden;
+}

package/src/lib/data-table/charts/bar-graph-component/bar-graph-component.html

@@ -0,0 +1,29 @@
+<div #statOptsCont class="center stat-opt-contain">
+    @for(stat of statOpts; track stat){
+        <div [style.width]="statBtnWid" class="inline-b center">
+            <button class="no-btn stat-opt-btn" (click)="handleStatChange(stat)"
+            [class.stat-opt-btn-active]="selStat() === stat">{{common.titleCase(stat)}}</button>
+        </div>
+    }
+</div>
+<div #innerGB class="inner-bg-contain">
+    <div #yAxis class="bar-graph-y-cols" [style.height]="((bgDepVarHgt*(numYPlots-1))+17) + 'px'">
+        @for(num of numTicks(); track $index){
+            <div class="bg-dep-var" [class.invisible]="num && num === maxYVal" [attr.data-number]="num">{{(num === '0') ? '' : num}}</div>
+        }
+    </div><div #barContainer class="bar-graph-real-vals">
+        @for(bar of barVals; track bar){
+            <div [ngStyle]="{'width': xLblWidth, 'left': bar.left}" 
+            class="graph-actual-bar" [attr.data-value]="bar.fullValue">
+                <div [ngStyle]="{'height': bar.height, 'background': bar.background}"></div>
+            </div>
+        }
+    </div>
+    <div #xValues class="bar-graph-x-cols">
+        @for(lbl of xLabels; track lbl){
+            <div class="bg-ind-var center" [style.width]="xLblWidth" (mouseenter)="lblMouseIn($event.target)" (mouseleave)="lblMouseOut($event.target)">
+            {{lbl}}</div>
+        }
+    </div>
+</div>
+<div #xLabel class="bar-graph-x-label"></div>

package/src/lib/data-table/charts/bar-graph-component/bar-graph-component.spec.ts

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

package/src/lib/data-table/charts/bar-graph-component/bar-graph-component.ts

@@ -0,0 +1,282 @@
+import { Component, ElementRef, EventEmitter, Input, ViewChild, Output, HostListener, signal } from '@angular/core';
+import { CommonService } from '../../../services/common-service';
+import { DataTableService } from '../../../services/data-table-service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-bar-graph-component',
+  imports: [CommonModule],
+  templateUrl: './bar-graph-component.html',
+  styleUrls: ['./bar-graph-component.css', '../../../styles.css']
+})
+export class BarGraphComponent {
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize(e: Event) {
+      this.handleStatChange(this.selStat(), true)
+  }
+
+  numTicks = signal<string[]>([])
+  barVals: any[] = []
+  xLblWidth: string= ""
+  xLabels: string[] = []
+  maxBarWid: number = 90
+  buildingStat: boolean = false
+  maxYVal: string = "0";
+  statData: any[] = []
+  selStat = signal<string>("avg")
+  numYPlots: number = 5
+  bgDepVarHgt: number = 70//height of y ticks
+  statOpts: string[] = ["avg", "min", "max", "mode", "median", "sum"]
+  statBtnWid: string = "30px"
+  titleTrail: string = ""
+  @Input() column: string = ""
+  @Input() data: any[] = []
+  @Output("title") title: EventEmitter<string> = new EventEmitter();
+  @ViewChild("innerGB", { static: true }) innerGB!: ElementRef;
+  @ViewChild("xLabel", { static: true }) xLabel!: ElementRef;
+  @ViewChild("xValues", { static: true }) xValues!: ElementRef;
+  @ViewChild("yAxis", { static: true }) yAxis!: ElementRef;
+  @ViewChild("statOptsCont", { static: true }) statOptsCont!: ElementRef;
+  @ViewChild("barContainer", { static: true }) barContainer!: ElementRef;
+
+  constructor(public common: CommonService,
+              private dataTableService: DataTableService,
+  ){ }
+
+  ngOnInit() {
+    this.buildBarGraphWithTwoCols(this.selStat())
+  }
+  
+  ngAfterContentInit() {
+    setTimeout( () => { this.sizeUpBgDims() })
+  }
+
+  sizeUpBgDims() {
+    const bgWid = this.innerGB.nativeElement.getBoundingClientRect().width
+    const yWid = this.yAxis.nativeElement.getBoundingClientRect().width
+    const offY = Math.ceil(yWid+5)
+    this.statBtnWid = Math.floor((bgWid-offY)/this.statOpts.length) + "px";
+    this.statOptsCont.nativeElement.style.marginLeft = offY + "px";
+    this.xValues.nativeElement.style.marginLeft = offY + "px";
+    this.barContainer.nativeElement.style.marginLeft = offY + "px";
+    this.xLblWidth = Math.min(this.maxBarWid, (Math.floor((bgWid-offY)/this.xLabels.length))) + "px";
+  }
+
+  buildBarGraphWithTwoCols(stat: string) {
+      const bgCols = this.column.split(this.dataTableService.bgSep)
+      const strCol = bgCols[0]
+      const numCol = bgCols[1]
+      if(!this.titleTrail)
+        this.titleTrail = this.common.titleCase(numCol) + " by " + this.common.titleCase(strCol);
+      const vals = this.dataTableService.dataFilSrtTracker[strCol].selDDVals.filter( (g: any) => g.value !== "(Select All)")
+      const vlen = vals.length
+      let o = 0
+      for(o; o < vlen; o++){
+        const val = vals[o].value
+        const justVal = this.data.filter( d => d["strColumn"] === val).map( d => d["numColumn"] )
+        const jvlen = justVal.length
+        if(jvlen){//["avg", "min", "max", "mode", "median", "sum"]
+          let statobj = {x: val, y: 0}
+          if(stat === "avg")
+            statobj.y = (justVal.reduce( (acc, curr) => (acc += curr) , 0)/jvlen)
+          if(stat === "min")
+            statobj.y = Math.min(...justVal)
+          if(stat === "max")
+            statobj.y = Math.max(...justVal)
+          if(stat === "sum")
+            statobj.y = (justVal.reduce( (acc, curr) => (acc += curr) , 0))
+          if(stat === "median")
+            statobj.y = this.findDataMedian(justVal, jvlen)
+          if(stat === "mode")
+            statobj.y = this.findDataMode(justVal)
+          this.statData.push(statobj)
+          this.xLabels.push(val)
+        }
+      }
+      const justNull = this.data.filter( d => d["strColumn"] === "N/A").map( d => d["numColumn"] )
+      const jlen = justNull.length
+      if(jlen){
+        let statobj = {x: "N/A", y: 0}
+          if(stat === "avg")
+            statobj.y = (justNull.reduce( (acc, curr) => (acc += curr) , 0)/jlen)
+          if(stat === "min")
+            statobj.y = Math.min(...justNull)
+          if(stat === "max")
+            statobj.y = Math.max(...justNull)
+          if(stat === "sum")
+            statobj.y = (justNull.reduce( (acc, curr) => (acc += curr) , 0))
+          if(stat === "median")
+            statobj.y = this.findDataMedian(justNull, jlen)
+          if(stat === "mode")
+            statobj.y = this.findDataMode(justNull)
+        this.statData.push(statobj)
+        this.xLabels.push("N/A")
+      }
+      const par = this.innerGB.nativeElement
+      const nums = this.statData.map( d =>  d["y"] );
+      let srtNums = nums.sort( (a, b) => a - b > 0 ? 1 : -1 )
+      const max = srtNums[(nums.length-1)]
+      let lbly = this.common.sanitizeUi(numCol)
+      const sym = this.dataTableService.dataFilSrtTracker[numCol].colCellSymbol
+      if(sym)
+        lbly += " ("+sym+")";
+      par.setAttribute("data-yaxis", lbly)
+      this.xLabel.nativeElement.textContent = this.common.sanitizeUi(this.common.titleCase(strCol))
+      this.buildYAxisBGVals(max)
+      setTimeout( () => { this.buildBGBars(this.statData, max, sym) })
+      setTimeout( () => { this.buildingStat = false }, 500)
+  }
+
+  buildBGBars(data: any[], max: number, sym: any) {
+      let i = 0
+      const len = data.length
+      let background: string = "initial"
+      const yAx = this.yAxis.nativeElement
+      const ybds = yAx.getBoundingClientRect()
+      const yWid = ybds.width
+      const offY = Math.ceil(yWid+5)
+      const whiteTxt = ["white", "#FFFFFF", "#ffffff", "rgb(255, 255, 255)", "rgb(255,255,255)"];
+      if(this.dataTableService.themeColor1 && whiteTxt.indexOf(this.dataTableService.themeColor1) < 0)
+          background = this.dataTableService.themeColor1;
+      const useIncr = Math.min(this.maxBarWid, (Math.floor((this.innerGB.nativeElement.getBoundingClientRect().width-offY)/this.xLabels.length)))
+      for(i; i < len; i++){
+        const item = data[i]
+        const bhgt = item["y"]/max;
+        const strVal = item["y"].toLocaleString(undefined, {maximumFractionDigits: 2})
+        let symb4 = ""
+        let symaf = ""
+        if(sym){
+            let isCurr = ["$","€","£","¥","₣","₹"].indexOf(sym) > -1
+            if(isCurr)
+              symb4 = sym
+            else
+              symaf = sym
+        }
+        const fVal = item["x"] + ': ' + symb4 + strVal + symaf;
+        const bv = { id: item["x"], left: ((i*useIncr) + "px"), heightVal: bhgt, height: "0px", fullValue: fVal, numValue: strVal, background: background}
+        this.barVals.push(bv);
+      }
+      this.handleBGBarHgts(data)
+  }
+
+  handleBGBarHgts(data: any[]) {
+    let i = 0
+    let show = false
+    const len = data.length
+    const ybds = this.yAxis.nativeElement.getBoundingClientRect()
+    const maxHgt = ybds.height
+    const cont = document.getElementById("insField" + this.common.elifyCol(this.column))
+    const cBds = cont?.getBoundingClientRect()
+    const insTop = document.getElementsByClassName("chart-contain-show")[0]?.scrollTop || 0;
+    if(cBds && (cBds.bottom-(cBds.height/2)) < (this.dataTableService.tblTop+insTop+this.dataTableService.dTblHeight))
+      show = true;
+    if(show){
+      for(i; i < len; i++){
+        const item = data[i]
+        const xvalue = item["x"]
+        const bv = this.barVals.find( b => b.id === xvalue)
+        if(bv){
+          setTimeout( () => { 
+            bv.height = (Math.ceil(bv.heightVal*maxHgt) + "px")
+          }, 250)
+        }
+      }
+    }
+  }
+
+  buildYAxisBGVals(max: number) {
+      let nts: string[] = []
+      // let diff = max - min
+      const incr = max/(this.numYPlots-1)
+      const strNum = (val: number) => {
+        return val < 1000 ? val.toLocaleString(undefined, {maximumFractionDigits: 0}) : this.common.doBigData(val);
+      }
+      for(let i = (this.numYPlots-1); i >= 0; i--){
+          try{
+              const inc = i*incr
+              let useVal = inc//(min + inc)
+              if(i === 0)
+                  useVal = 0//min
+              if(i === (this.numYPlots-1))
+                  useVal = max
+              const strVal = strNum(useVal);
+              if(i === (this.numYPlots-1))
+                this.maxYVal = strVal
+              nts.push(strVal)
+          }catch(e){}
+      }
+      this.numTicks.set([...nts])
+  }
+
+  handleStatChange(stat: string, resize?: boolean) {
+    if(this.selStat() === stat && !resize)
+      return;
+    this.buildingStat = true
+    this.maxYVal = "0"
+    this.selStat.set(stat)
+    this.numTicks.set([])
+    this.barVals = []
+    this.xLabels = []
+    this.statData = []
+    if(!resize)
+      this.title.emit(this.common.titleCase(stat) + " " + this.titleTrail);
+    setTimeout( () => { 
+      this.buildBarGraphWithTwoCols(stat);
+      setTimeout( () => { this.sizeUpBgDims() }) 
+    })
+  }
+
+  findDataMedian(data: number[], len: number): number {
+    if(len === 1)
+        return data[0]
+    if(len === 2)
+        return (data[0]+data[1])/2
+    const isOdd = len%2 !== 0
+    if(isOdd){
+      return data[Math.ceil(len/2)]
+    } else {
+      const loMed = data[len/2]
+      const hiMed = data[len/2] + 1
+      return (loMed+hiMed)/2
+    }
+  }
+
+  getColumnValueCounts(data: any[]) {
+        let i = 0
+        let count: any = {}
+        const len = data.length
+        for(i; i < len; i++){
+            const d = data[i]
+            const val = "v" + d
+            if(!count[val] || typeof count[val] === "undefined")
+                count[val] = 1
+            else
+                count[val] += 1
+        }
+        return count;
+    }
+
+  findDataMode(data: any[]): number {
+    const count = this.getColumnValueCounts(data)
+    let most = null
+    for(const prop in count){
+        if(!most)
+            most = {text: prop, amount: count[prop]}
+        if(count[prop] > most.amount)
+            most = {text: prop, amount: count[prop]}
+    }
+    if(most)
+      return parseInt(most?.text.replace("v", ""))
+    return 0;
+  }
+
+  lblMouseIn(el: any) {
+    el.classList.add("lbl-show")
+  }
+
+  lblMouseOut(el: any) {
+    el.classList.remove("lbl-show")
+  }
+
+}

package/src/lib/data-table/charts/charts-and-graphs/charts-and-graphs.css

@@ -0,0 +1,27 @@
+.h3-bg{
+    text-align: center;
+    margin-bottom: 7px;
+}
+
+.chart-rel-contain{
+    z-index: 25;
+}
+
+.chart-contain{
+    left: 0;
+    right: 0;
+    top: 11px;
+    opacity: 0;
+    overflow: auto;
+    position: absolute;
+    background: white;
+}
+
+.chart-contain .relly button i{
+    font-size: 30px;
+}
+
+.chart-contain-show{
+    opacity: 1 !important;
+    transition: all 0.5s ease-in;
+}

package/src/lib/data-table/charts/charts-and-graphs/charts-and-graphs.html

@@ -0,0 +1,53 @@
+<div class="relly chart-rel-contain">
+    <div #chartContain class="chart-contain" (scroll)="handleChartScroll($event)" [class.chart-contain-show]="chartsReady()" [style.height]="height">
+        <div class="relly" style="z-index: 10;">
+            <button type="button" #xChartsBtn class="abs-right no-btn" (click)="closeCharts()" style="background: white;">
+                <i class="material-icons error-message heavy" aria-hidden="false">close</i>
+            </button>
+        </div>
+        <div class="insights">
+            <h2 class="no-weight center" [innerHTML]="h2Text"></h2>
+            @for(row of iRows; track row; let r = $index){
+                <div class="insight-field-row">
+                    @for(col of row; track col; let i = $index){
+                        <div [id]="'insField' + common.elifyCol(col.column)" class="insight-field">
+                            @if(rowIsAboveFold().indexOf(r) > -1){
+                                <div style="width: 85%;">
+                                    <h3 class="semi-heavy" [class.h3-bg]="col.title.indexOf( ' by ') > -1">{{col.title}}</h3>
+                                    @if(dtCols.indexOf(col.column) > -1 && common.goodLs()){
+                                        <div class="lg-title-cont">
+                                            @if(numCols.length > 1){
+                                                @for(opt of numCols; track opt){
+                                                    <button type="button" class="btn-line-graph-opts" [class.btn-lg-sel]="opt === currNumColNm[col.column]"
+                                                    (click)="setLineGraphNumCol(r, col.column, opt)">
+                                                        {{opt + " by " + col.column}}
+                                                    </button>
+                                                }
+                                            } @else {
+                                                <span class="sp-line-graph-title">{{common.titleCase(currNumColNm[col.column]) + " by " + common.titleCase(col.column)}}</span>
+                                            }
+                                        </div>
+                                        @if(currNumColData[col.column]?.length){
+                                            <app-line-graph-component
+                                            [column]="col.column"
+                                            [data]="col.data"
+                                            [numCol]="currNumColNm[col.column]"
+                                            (title)="col.title = $event"
+                                            ></app-line-graph-component>
+                                        }
+                                    } @else {
+                                        <app-column-chart
+                                        [column]="col.column"
+                                        [colData]="col.data"
+                                        (bgTitle)="col.title = $event"
+                                        ></app-column-chart>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
+            }
+        </div>
+    </div>
+</div>

package/src/lib/data-table/charts/charts-and-graphs/charts-and-graphs.spec.ts

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