ngx-deebodata 0.0.1 → 0.0.2

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

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

@@ -0,0 +1,19 @@
+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;
+}

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

@@ -0,0 +1,47 @@
+@if(isNumData){
+    <div class="half-wid" [id]="'sum' + common.elifyCol(column)">
+        <span class="v-mid">Total: </span><span class="lg-text v-mid{{symCls}}" [attr.data-symbol]="symAttr">{{sum}}</span>
+    </div><div class="half-wid" [id]="'avg' + common.elifyCol(column)">
+        <span class="v-mid">Avg: </span><span class="lg-text v-mid{{symCls}}" [attr.data-symbol]="symAttr">{{avg}}</span>
+    </div><div class="half-wid" [id]="'min' + common.elifyCol(column)">
+        <span class="v-mid">Min: </span><span class="lg-text v-mid{{symCls}}" [attr.data-symbol]="symAttr">{{min}}</span>
+    </div><div class="half-wid" [id]="'max' + common.elifyCol(column)">
+        <span class="v-mid">Max: </span><span class="lg-text v-mid{{symCls}}" [attr.data-symbol]="symAttr">{{max}}</span>
+    </div>@if(modeHtml){ <div [innerHTML]="modeHtml"></div>}<div>{{tdivHtml}}</div>
+    @if(numValDistMsg){ <div class="vdh-loading">{{numValDistMsg}}</div> }
+    @if(numLen < numArrMax){
+        <app-num-value-distro-component
+        [column]="column"
+        [average]="numAvg"
+        [originalArr]="colData"
+        (done)="numValDistMsg = $event"
+        [title]="'Building ' + common.sanitizeUi(common.titleCase(column)) + ' value distribution...'"
+        ></app-num-value-distro-component>
+    }
+} @else {
+    @if(nonNumUVal){ <div>{{nonNumUVal}}</div> }
+    @if(nonNumEVal){ <div>{{nonNumEVal}}</div> }
+    @if(modeHtml){ <div [innerHTML]="modeHtml"></div> }
+}
+
+@if(pieData){
+    <app-pie-graph-component
+    [uncoverPie]="dataTableService.removePieCovers"
+    [data]="pieData"
+    [column]="column"
+    ></app-pie-graph-component>
+}
+@if(isBarGraph){
+    <app-bar-graph-component
+    [column]="column"
+    [data]="colData"
+    (title)="handleBgTitle($event)"
+    ></app-bar-graph-component>
+}
+@if(isLineGraph){
+    <app-line-graph-component
+    [column]="column"
+    [data]="colData"
+    (title)="handleBgTitle($event)"
+    ></app-line-graph-component>
+}

package/src/lib/data-table/charts/column-chart/column-chart.spec.ts

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

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

@@ -0,0 +1,178 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonService } from '../../../services/common-service';
+import { DataTableService } from '../../../services/data-table-service';
+import { CommonModule } from '@angular/common';
+import { NumValueDistroComponent } from '../num-value-distro-component/num-value-distro-component';
+import { PieGraphComponent } from '../pie-graph-component/pie-graph-component';
+import { BarGraphComponent } from '../bar-graph-component/bar-graph-component';
+import { LineGraphComponent } from '../line-graph-component/line-graph-component';
+
+@Component({
+  selector: 'app-column-chart',
+  imports: [ CommonModule, NumValueDistroComponent, PieGraphComponent, BarGraphComponent, LineGraphComponent, ],
+  templateUrl: './column-chart.html',
+  styleUrls: ['./column-chart.css', '../../../styles.css']
+})
+export class ColumnChart {
+
+  isNumData = false
+  isBoolData = false
+  isBarGraph = false
+  isLineGraph = false
+  counts: any = null
+  sum: string = ""
+  avg: string = ""
+  min: string = ""
+  max: string = ""
+  numArrMax: number = 5000
+  numAvg: number = 0
+  modeHtml: string = ""
+  tdivHtml: string = ""
+  numValDistMsg = ""
+  numLen: number = 0
+  symCls: string = ""
+  symAttr: string = ""
+  pieData: any = null
+  nonNumUVal: string = ""
+  nonNumEVal: string = ""
+  @Input() column: string = ""
+  @Input() colData: any[] = []
+  @Output("bgTitle") bgTitle: EventEmitter<string> = new EventEmitter();
+
+  constructor(public common: CommonService,
+              public dataTableService: DataTableService,){ }
+
+  ngOnInit() {
+    const reg = new RegExp(this.dataTableService.bgSep, "g")
+    if(reg.test(this.column)){
+        if(this.column.split(this.dataTableService.bgSep).length > 2){
+            this.isLineGraph = true
+        } else {
+            this.isBarGraph = true
+        }
+    } else {
+        this.buildDataInsights()
+    } 
+  }
+
+  setDistMsg(event: string) {
+    this.numValDistMsg = event
+  }
+
+  buildDataInsights() {
+    const yearCol = /(year|yr|fy)/g.test(this.column?.toLocaleLowerCase())
+    const allNumData = this.colData.every( d => !d || (d && typeof d === "number") )
+    const boolData = this.colData.every( d => !d || (d && typeof d === "boolean") )
+    this.counts = this.getColumnValueCounts(this.colData)//build pie graphs with this
+    let mode = this.getColumnMode(this.counts)
+    const disr = (this.counts["n_a"] && this.counts["n_a"] >= mode?.amount) ? " (non-empty value)" : "";
+    if(mode && mode.amount != 1){
+        try{
+            let maxChars = 75
+            let pMdTxt = this.common.sanitizeUi(mode.text)
+            if(mode.text && typeof mode.text === "string"){
+                pMdTxt = mode.text.substring(0, maxChars)
+                if(pMdTxt.length === maxChars){
+                    try{
+                        pMdTxt = (pMdTxt.trim() + "...")
+                        if(pMdTxt.startsWith("\""))
+                            pMdTxt += "\""
+                        if(pMdTxt.startsWith("'"))
+                            pMdTxt += "'"
+                    }catch(e){}
+                }
+            }
+            if(pMdTxt && allNumData && !yearCol)
+                pMdTxt = parseInt(pMdTxt).toLocaleString(undefined, { maximumFractionDigits: 3 })
+            const modeVal = mode.amount.toLocaleString(undefined, { maximumFractionDigits: 0 })
+            this.modeHtml = "Most frequent"+disr+": <i>" + pMdTxt + "</i> appears " + modeVal + " time" + (mode.amount === 1 ? "" : "s");
+        }catch(e){}
+    }
+    let bitData;
+    if(allNumData)
+        bitData = this.colData.every( d => !d || d === 1 || d === 0 )
+    if(allNumData && !yearCol && !bitData){//num data
+        let isCurr = false
+        this.isNumData = true
+        const numsOnly = this.colData.filter( d => !!d || (d === 0) )
+        this.numLen = numsOnly.length
+        let usum = numsOnly.reduce( (acc, curr) => (acc + curr), 0)
+        const lastNum = numsOnly[numsOnly.length-1]
+        const sym = this.dataTableService.dataFilSrtTracker[this.column]?.colCellSymbol;
+        if(sym){
+            isCurr = ["$","€","£","¥","₣","₹"].indexOf(sym) > -1
+            this.symCls = isCurr ? ' has-symbol-b' : ' has-symbol';
+            this.symAttr = sym;
+        }
+        if(typeof lastNum === "number" && ((usum - lastNum === lastNum) || (Math.abs(usum - lastNum*2) < 0.02))){//check that a total column is already there
+            usum -= lastNum
+            this.numLen -= 1
+            this.tdivHtml = "We omitted the last value from the total because it may be a total row itself.";
+        }
+        this.numAvg = (usum/this.numLen)
+        this.sum = usum.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: (isCurr ? 2 : 0) });
+        this.avg = this.numAvg.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: (isCurr ? 2 : 0) });
+        this.min = Math.min(...numsOnly).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: (isCurr ? 2 : 0) });
+        this.max = Math.max(...(this.tdivHtml ? numsOnly.filter( (n, ind) => ind < (numsOnly.length-1) ) : numsOnly)).
+        toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: (isCurr ? 2 : 0) });
+        if(this.numLen && this.numLen < this.numArrMax)
+            this.numValDistMsg = "Building " + this.common.sanitizeUi(this.common.titleCase(this.column)) + " value distribution..."
+    } else {
+        const dSet =new Set(this.colData)
+        let arrFrmSet: any[] = []
+        dSet.forEach( (v) => { arrFrmSet.push(v) })
+        this.nonNumUVal = arrFrmSet.length.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " unique value" + (dSet.size === 1 ? "" : "s")
+        const empVals = this.colData.filter( (d) => !d).length
+        this.nonNumEVal = empVals.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " empty value" + (empVals === 1 ? "" : "s");                
+        const cantDoDD = arrFrmSet.some( a => a && a.length > 40 )
+        if(!cantDoDD && ((boolData || bitData) || (arrFrmSet.filter( (a) => !!a ).length > 0 && this.colData.every( (d) => !d || typeof d === "string")))){
+            if(arrFrmSet.length <= 18)
+                this.pieData = { counts: this.counts, type: ((boolData || bitData) ? "boolean" : "string") }
+        }
+    }
+  }
+
+  getColumnValueCounts(data: any[]) {
+        let i = 0
+        let count: any = {}
+        const na = "n_a"
+        const len = data.length
+        for(i; i < len; i++){
+            const d = data[i]
+            const val = (d && typeof d) === "string" ? d : 
+            (this.common.isADateObject(d) ? d.toLocaleDateString() : d)
+            if(!val || typeof val === "undefined" || this.dataTableService.badStrings.indexOf(val) > -1){
+                if(!count[na] || typeof count[na] === "undefined")
+                    count[na] = 1
+                else
+                    count[na] += 1
+                continue
+            }
+            if(!count[val] || typeof count[val] === "undefined")
+                count[val] = 1
+            else
+                count[val] += 1
+        }
+        count[this.dataTableService.deboTotal] = len
+        return count;
+    }
+
+    getColumnMode(count: any) {
+        let most = null
+        const na = "n_a"
+        for(const prop in count){
+            if(prop === this.dataTableService.deboTotal || prop === na)
+                continue
+            if(!most)
+                most = {text: prop, amount: count[prop]}
+            if(count[prop] > most.amount)
+                most = {text: prop, amount: count[prop]}
+        }
+        return most
+    }
+
+    handleBgTitle(event: string) {
+        this.bgTitle.emit(event)
+    }
+
+}

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

@@ -0,0 +1,33 @@
+:host{
+    --accent-color:rgb(50, 50, 50);
+    --grid-color:rgb(199, 199, 199);
+    --pad-left-base: 33px;
+    --row-num-width: 75px;
+    --reg-font-size: 17px
+}
+
+.lg-plot-opq{
+    opacity: 0;
+    background: white;
+}
+
+.lg-plot-opq:hover{
+    opacity: 1 !important;
+    background: var(--grid-color);
+    transition: opacity 0.2s ease;
+}
+
+.lg-canvas{
+    top: 0;
+    left: 0;
+    bottom: 0;
+    position: absolute;
+}
+
+.lg-msg{
+    top: 0; 
+    left: 0; 
+    right: 0;
+    position: absolute; 
+    color: var(--accent-color);
+}

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

@@ -0,0 +1,59 @@
+<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 #auxOptsCont style="padding-bottom: 17px;">
+    <div class="qtr-wid center v-mid">
+        @if(valOpts().length){
+            <select [name]="'valSel' + common.elifyCol(column)" [id]="'valSel' + common.elifyCol(column)" [(ngModel)]="selDdVal"
+            (change)="handleValSelChange($any($event).target.value)" style="max-width: 80%">
+                @for(o of valOpts(); track o){
+                    <option [value]="o" [selected]="o === selDdVal">{{o}}</option>
+                }
+            </select>
+        }
+    </div><div class="qtr-wid center v-mid">
+        <select [name]="'timeDiff' + common.elifyCol(column)" [id]="'timeDiff' + common.elifyCol(column)" 
+        (change)="handleTimeDiffChange($any($event).target.value)" style="max-width: 88%" [(ngModel)]="selTDOpt">
+            <option value="-1" [selected]="selTDOpt === -1">All time</option>
+            @for(t of timeDiffOpts; track t.val){
+                <option [value]="t.val" [selected]="t.val === selTDOpt">{{t.text}}</option>
+            }
+        </select>
+    </div><div class="half-wid v-mid center dontwrap {{currentDeltaCls}}" [innerHTML]="currentDelta"></div>
+</div>
+<div #lgContain [id]="'lineGraph' + common.elifyCol(column)" class="inner-bg-contain" style="margin-bottom: 33px;">
+    <div #yAxis class="lg-n-marker-cont" [style.height]="totalHgt + 'px'">
+        @for(n of naddedtks(); track n.value; let i = $index){
+            <div class="bg-dep-var" [class.invisible]="n.value && n.value === maxYVal" [attr.data-number]="n.value"
+            [style.padding-bottom]="i < 4 ? (((i*4)+1) + 'px') : '0px'">
+                {{(n.value === '0') ? '' : n.value}}
+            </div>
+        }
+        @for(n of nmrks; track n){
+            <div class="lg-n-marker-h">{{n.value}}</div>
+        }
+    </div><div #lineGraph class="line-graph" [style.height]="totalHgt + 'px'">
+        @for(n of dtmrks; track n){
+            <div class="lg-dt-marker" [class.visible-marker]="n.visible" [style.left]="n.left">{{n.value}}</div>
+        }
+        @for(n of dtmrksH; track n){
+            <div class="lg-dt-marker-h" [class.visible-marker]="n.visible" [style.left]="n.left">{{n.value}}</div>
+        }
+        @if(lblTxt){
+            <div class="lg-lbl-x">{{lblTxt}}</div>
+        }
+        <canvas #lgCanvas class="lg-canvas" [height]="totalHgt"></canvas>
+        @for(p of plots(); track $index){
+            <div class="lg-plot lg-plot-opq" [attr.data-number]="p.number" (mouseenter)="showDotPlotInfo(p.date, p.number)" 
+            (mouseleave)="hideDotPlotInfo()" [ngStyle]="{'bottom': (p.bottom-4) + 'px', 'left': (p.left-4) + 'px' }">{{p.value}}</div>
+        }
+        @if(!plots().length){
+            <div class="flex-center lg-msg" [style.height]="totalHgt + 'px'"><div>{{graphMsg}}</div></div>
+        }
+    </div>
+</div>

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

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