ngx-deebodata 0.0.2 → 0.0.3

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

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

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

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

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

@@ -1,59 +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 #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

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