ngx-deebodata 0.1.2 → 0.1.4

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

@@ -1,29 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,282 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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();
-  });
-});

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

@@ -1,214 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, Output, signal, ViewChild } from '@angular/core';
-import { CommonService } from '../../../services/common-service';
-import { DataTableService } from '../../../services/data-table-service';
-import { ColumnChart } from '../column-chart/column-chart';
-import { LineGraphComponent } from '../line-graph-component/line-graph-component';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-charts-and-graphs',
-  imports: [ CommonModule, ColumnChart, LineGraphComponent, ],
-  templateUrl: './charts-and-graphs.html',
-  styleUrls: ['./charts-and-graphs.css', '../../../styles.css']
-})
-export class ChartsAndGraphs {
-
-  chartsReady = signal<boolean>(false);
-  rowIsAboveFold = signal<number[]>([0]);
-  useData: any[] = []
-  iRows: any[][] = []
-  dtCols: string[] = [];
-  numCols: string[] = [];
-  filterInfo: string = ""
-  currNumColData: any = {}//[] = []
-  currNumColNm: any = {}//string = ""
-  okBarGraphs: string[] = []
-  okLineGraphs: string[] = []
-  hasNoData: string[] = []
-  @Input() height: string = "";
-  @Input() state: string = "all";
-  @Input() chartColumns: string[] = [];
-  @Output("close") close: EventEmitter<boolean> = new EventEmitter();
-  @ViewChild("xChartsBtn", { static: true }) xChartsBtn!: ElementRef<HTMLButtonElement>;
-  @ViewChild("chartsTitle", { static: true }) chartsTitle!: ElementRef<HTMLHeadElement>;
-  @ViewChild("chartContain", { static: true }) chartContain!: ElementRef<HTMLElement>;
-  h2Text: string = "" 
-
-  constructor(public common: CommonService,
-              public dataTableService: DataTableService,){ }
-
-  ngOnInit() {
-    if(this.state === "selected")
-        this.useData = this.dataTableService.mainData.filter( (d, ind) => this.dataTableService.currSelRows.indexOf(ind) > -1 )
-    else
-        this.useData = this.dataTableService.currFilData//.filter( d => true )
-    this.gatherRelationalPairs()
-    const dLen = this.useData.length
-    let filinfo = this.dataTableService.getAllFilSrtInfo()?.replace(/Filtered By:/g, "filtered by").
-                      replace(/ \&bull; Sorted By/g, ", Sorted By").replace(/ \&bull; /g, " ")
-    this.h2Text = "Data Insights for <b>"+ dLen.toLocaleString(undefined, {maximumFractionDigits: 0}) + "</b>" +
-    (this.state !== 'all' ? (' ' + this.common.titleCase(this.state)) : '') +" Rows ";
-    if(filinfo){
-      this.h2Text = ("Data Insights " + ("for <b>" + (dLen).toLocaleString(undefined, {maximumFractionDigits:0}) + 
-                    "</b> row" + (dLen === 1 ? " " : "s ")) + filinfo?.split(", Sorted By")[0].trim())
-    }
-  }
-
-  ngAfterViewInit() {
-    setTimeout( () => { 
-      let r = 0; let c = 0; let u = 0; let o = 0
-      let useChartCols: string[] = [];
-      const usableCharts = this.chartColumns.filter( c => !this.hasNoData.includes(c))
-      const uclen = usableCharts.length
-      const nlen = this.numCols.length
-      for(u; u < uclen; u++){
-        const ucol = usableCharts[u]
-        useChartCols.push(ucol)
-        if(this.okBarGraphs.indexOf(ucol) > -1){
-          for(o; o < nlen; o++)
-            useChartCols.push(ucol + this.dataTableService.bgSep + this.numCols[o])
-          o = 0;
-        }
-        if(this.okLineGraphs.indexOf(ucol) > -1){
-          o = 0; let d = 0;
-          const dtlen = this.dtCols.length
-          for(o; o < nlen; o++){
-            for(d; d < dtlen; d++)
-              useChartCols.push(ucol + this.dataTableService.bgSep + this.numCols[o] + this.dataTableService.bgSep + this.dtCols[d])
-            d = 0;
-          }
-          o = 0;
-        }
-      }
-      const clen = useChartCols.length
-      const cWid = this.chartContain.nativeElement.getBoundingClientRect().width
-      const insightColsPerRow = cWid < 640 ? 1 : (cWid < 960 ? 2 : 3);
-      const rlen = Math.ceil(clen/insightColsPerRow)
-      for(r; r < rlen; r++){
-        let i = 0
-        this.iRows[r] = []
-        for(i; i < insightColsPerRow; i++){
-          const col = useChartCols[c]
-          if(col){
-            let title = this.common.titleCase(col)
-            let mappedData: any[] = []
-            const reg = new RegExp(this.dataTableService.bgSep, "g")
-            if(reg.test(col)){
-              const bgCols = col.split(this.dataTableService.bgSep)
-              const strCol = bgCols[0]
-              const numCol = bgCols[1]
-              let dtCol
-              if(bgCols.length === 3)//line graph
-                dtCol = bgCols[2]
-              if(!dtCol){//bar graph
-                const valsLen = this.dataTableService.dataFilSrtTracker[strCol]?.selDDVals?.filter( (g: any) => g.value !== "(Select All)").length || 0;
-                const doAvg = this.useData.length <= valsLen ? "" : "Avg ";
-                title = doAvg + this.common.titleCase(numCol) + " by " + this.common.titleCase(strCol);
-                mappedData = this.useData.filter( d => d[numCol] === 0 || !!d[numCol]).map( d => ({strColumn: (d[strCol] || "N/A"), numColumn: d[numCol]}))
-              } else {//line graph
-                title = "Avg " + this.common.titleCase(numCol) + " by " + this.common.titleCase(dtCol);
-                mappedData = this.useData.filter( d => d[numCol] === 0 || !!d[numCol]).map( d => ({strColumn: (d[strCol] || "N/A"), numColumn: d[numCol], dtColumn: d[dtCol]}))
-              }
-            } else {
-              if(this.dtCols.indexOf(col) > -1){
-                const n0 = this.numCols[0]
-                title = "Avg " + this.common.titleCase(n0) + " by " + this.common.titleCase(col);
-                mappedData = this.useData.filter( d => d[n0] === 0 || !!d[n0]).map( d => ({numColumn: d[n0], dtColumn: d[col]}))
-              } else {
-                mappedData = this.useData.map( d => d[col] )
-              }
-            }
-            this.iRows[r].push({ column: col, data: mappedData, title: title })
-            c += 1
-          }
-        }
-      }
-      setTimeout( () => { this.chartsReady.set(true) })
-    })
-  }
-
-  handleChartScroll(event: any) {
-    let abv: number[] = []
-    const xBtn= this.xChartsBtn.nativeElement
-    const top = event.target.scrollTop
-    const rows = document.getElementsByClassName("insight-field-row")
-    const rlen = rows.length
-    if(xBtn)
-      xBtn.style.top = (7 + top) + "px"
-    for(var i = (rlen-1); i >= 0; i--){
-      const row: HTMLElement = <HTMLElement>rows[i]
-      if(this.dataTableService.elIsAboveFold(row, this.dataTableService.tblBot) && !abv.includes(i) && !this.rowIsAboveFold().includes(i))
-        abv.push(i)
-    }
-    this.rowIsAboveFold.set([...this.rowIsAboveFold(), ...abv])
-  }
-
-  
-
-  gatherRelationalPairs() {//dot plots and bar graphs
-      let i = 0;
-      const len = this.chartColumns.length
-      for(i; i < len; i++){
-        const col = this.chartColumns[i]
-        const colData = this.useData.map( (d) => d[col] )
-        if(colData.every( (d: any) => !d )){
-          this.hasNoData.push(col)
-          continue;
-        }
-        const yearCol = /(year|yr|fy)/g.test(col?.toLocaleLowerCase())
-        const allNumData = colData.every( (d: any) => !d || (d && typeof d === "number") )
-        let bitData;
-        if(allNumData)
-            bitData = colData.every( (d: any) => !d || d === 1 || d === 0 )
-        if(allNumData && !yearCol && !bitData){//num data
-            this.numCols.push(col);
-        } else {
-            const dSet =new Set(colData)
-            let arrFrmSet: any = []
-            dSet.forEach( (v) => arrFrmSet.push(v) )
-            const dateData = (colData.every( (d: any) => !d || this.common.isADateObject(d)) && !colData.every( (d: any) => !d ))
-            if(dateData || yearCol)
-                this.dtCols.push(col)
-        }
-      }
-
-      if(this.numCols.length){
-        for(const prop in this.dataTableService.dataFilSrtTracker){
-          const trkr = this.dataTableService.dataFilSrtTracker[prop]
-          if(trkr && trkr.selDDVals){
-            this.okBarGraphs.push(prop)
-            if(this.dtCols.length)
-              this.okLineGraphs.push(prop)
-          }
-        }
-      }
-
-      const dtlen = this.dtCols.length
-      if(dtlen && this.numCols.length && typeof document.querySelectorAll === "function"){
-          let c = 0
-          for(c; c < dtlen; c++){
-            const dcol = this.dtCols[c]
-            this.currNumColNm[dcol] = this.numCols[0]
-            this.currNumColData[dcol] = [1]//this.useData.filter( d => !!d).map( (d) => d[this.numCols[0]] )* this was for dot plot, but now we use line graph
-          }
-      }
-  }
-
-  setLineGraphNumCol(rowI: number, dtCol: string, col: string) {
-    this.currNumColData[dtCol] = []
-    setTimeout( () => { 
-        this.currNumColNm[dtCol] = col
-        const irow = this.iRows[rowI].find( i => i.column === dtCol)
-        if(irow){
-          this.iRows[rowI].find( i => i.column === dtCol).data = this.useData.filter( d => d[col] === 0 || !!d[col]).map( d => ({numColumn: d[col], dtColumn: d[dtCol]}))
-          this.iRows[rowI].find( i => i.column === dtCol).title = "Avg " + this.common.titleCase(col) + " by " + this.common.titleCase(dtCol);
-        }
-        this.currNumColData[dtCol] = [1]//this.useData.filter( d => !!d).map( (d) => d[col] )* this was for dot plot, but now we use line graph 
-    })
-  }
-
-  closeCharts() {
-    this.close.emit(false)
-  }
-  
-}

package/src/lib/data-table/charts/column-chart/column-chart.css

@@ -1,19 +0,0 @@
-div{
-    box-sizing: border-box;
-    padding:7px 7px 0 2px
-}
-
-.half-wid{
-    padding: 0 !important;
-    margin: 11px 0 7px 0;
-}
-
-.half-wid span{
-    vertical-align: middle;
-}
-
-.vdh-loading{
-    text-align: center;
-    text-decoration: underline;
-    padding: 33px 0px 17px 0px;
-}