ngx-deebodata 0.0.2 → 0.0.3

package/package.json

@@ -1,16 +1,35 @@
-{
-  "name": "ngx-deebodata",
-  "version": "0.0.2",
-  "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": "(c) Copyright 2026 Cedar Technologies LLC. All rights reserved.",
-  "keywords": ["data", "grid", "datagrid", "enterprise", "charts", "commercial"]
-}
+{
+  "name": "ngx-deebodata",
+  "version": "0.0.3",
+  "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": "(c) Copyright 2026 Cedar Technologies LLC. All rights reserved.",
+  "keywords": [
+    "data",
+    "grid",
+    "datagrid",
+    "enterprise",
+    "charts",
+    "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"
+}

package/types/ngx-deebodata.d.ts

@@ -0,0 +1,439 @@
+import * as _angular_core from '@angular/core';
+import { EventEmitter, ElementRef, SimpleChanges } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+interface ColumnHeader {
+    column: string;
+    width?: string;
+    height?: string;
+    lineHeight?: string;
+    dataType: string;
+    freeze: boolean;
+    minimized: boolean;
+    hideMinCol: boolean;
+}
+
+declare class CommonService {
+    uniSep: string;
+    replaceUniSep(val: any): any;
+    elifyCol(col: string): string;
+    titleCase(str: any): any;
+    idCol(col: string): boolean | "";
+    mapLongDate(val: string): Date;
+    mapTxtMonths(val: string): "01" | "02" | "03" | "04" | "05" | "06" | "07" | "08" | "09" | "10" | "11" | "12";
+    testShortDate(val: string): boolean;
+    testISODate(val: string): boolean;
+    testLongDate(val: string): boolean;
+    coerceDate(val: any): any;
+    isADateObject(val: any): any;
+    stripSpecChars(word: any): any;
+    doBigData(num: number): string;
+    mystartsWith(str: string, query: string): boolean;
+    isEnterKey(event: any): boolean;
+    isTabKey(event: any): boolean;
+    keyCanSearch(event: any): boolean;
+    isSearchKey(event: any): boolean;
+    isBackKey(event: any): boolean;
+    isDeleteKey(event: any): boolean;
+    isSpaceKey(event: any): boolean;
+    isDownKey(event: any): boolean;
+    isUpKey(event: any): boolean;
+    dontSan(val: any): boolean;
+    sanitizeUi(val: any): any;
+    unbindMouseEvent(e: any): void;
+    goodLs: _angular_core.WritableSignal<boolean>;
+    getRgbParts(rgb: string): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    componentToHex(c: any): any;
+    rgbToHex(r: any, g: any, b: any): string;
+    hexToRgb(hex: any): {
+        r: number;
+        g: number;
+        b: number;
+    } | null;
+    setLs(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommonService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CommonService>;
+}
+
+interface ColumnSymbol {
+    column: string;
+    symbol?: string;
+}
+
+interface ColumnStyles {
+    column: string;
+    css: ValueCss[];
+}
+interface ValueCss {
+    value: string;
+    color?: string;
+    font_size?: string;
+    text_decoration?: string;
+    font_weight?: string;
+}
+
+declare class DataTableService {
+    private common;
+    private http;
+    constructor(common: CommonService, http: HttpClient);
+    sortOrder: string[];
+    mainData: any[];
+    mainDataLen: number;
+    tblTop: number;
+    tblBot: number;
+    tblLeft: number;
+    tblRight: number;
+    dpLim: number;
+    currFilData: any[];
+    currMapping: any;
+    mapperWorkerId: number;
+    dTblHeight: number;
+    defltRHgt: string;
+    isSorting: _angular_core.WritableSignal<boolean>;
+    isFiltering: _angular_core.WritableSignal<boolean>;
+    showCharts: _angular_core.WritableSignal<boolean>;
+    themeColor1: any;
+    themeColor2: any;
+    currEditCol: string;
+    currEditIndex: number;
+    visibleCols: string[];
+    currColumnEdit: any;
+    useColWid: string;
+    currGroup: string;
+    firstCol: string;
+    primaryKey: string;
+    autoScrollOnEdit: boolean;
+    listenToCloseExportOpts: boolean;
+    listenToCloseGroupByOpts: boolean;
+    currGrouping: Subject<any>;
+    closeExportOpts: Subject<boolean>;
+    closeGroupByOpts: Subject<boolean>;
+    gridEventWhileGrouped: Subject<any>;
+    gridScrollEndWhileGrouped: Subject<any>;
+    mouseupWhileGrouped: Subject<any>;
+    setIdealColumnWidth: Subject<any>;
+    currSelRows: any[];
+    displayOnlySelRows: boolean;
+    noDataMsg: string;
+    deboTotal: string;
+    bgSep: string;
+    errorLoading: boolean;
+    dataFilSrtTracker: any;
+    comparatorOpts: any;
+    badStrings: string[];
+    columnSymbols: ColumnSymbol[];
+    columnStyles: ColumnStyles[];
+    pieGraphColors: string[];
+    removePieCovers: boolean | string[];
+    getColumnStyle(col: string): string;
+    isLocalHost(andSet: boolean): boolean;
+    validateLicense(key: string): rxjs.Observable<Object>;
+    getNewTrackerObj(colName: string): {
+        filter: string;
+        comparator: string;
+        sort: null;
+        type: string;
+        selDDVals: null;
+        minimize: boolean;
+        freeze: boolean;
+        colWidth: null;
+        colCellSymbol: string | undefined;
+    };
+    setTblVertBounds(): void;
+    setTblHorizBounds(): void;
+    setTblBounds(): void;
+    elIsAboveFold(el: HTMLElement | null, top: number): boolean;
+    elIsBelowFold(el: HTMLElement | null, top: number): boolean;
+    chartTopIsInView(column: string): boolean;
+    buildDataFilSrtTracker(data: any): any;
+    resetFilSrtTracker(): void;
+    figureCellText(text: any, notNum: boolean, symbol?: any): {
+        prop: string;
+        value: any;
+        ancs?: undefined;
+    } | {
+        prop: string;
+        value: any;
+        ancs: any[];
+    };
+    figureFilterType(col: any): string;
+    mapCompToSym(comp: string): string;
+    clearAllFocused(): void;
+    clearDCellFcsd(): void;
+    findObjIndxInData(item: any, data?: any[]): number;
+    nLevelSort(data: any[], sortOrder: string[], obj: any): any[];
+    doSortOnField(field: any): void;
+    nLevelFilter(data: any, filterVal: any, ddVals: any, comparator: any, field: any): any;
+    columnFilter(dataI: any[], field: string, dataObj: any, sortOrder: string[], manual: any): any[];
+    hasUnchkdDDVals(obj: any): any;
+    getAllFilSrtInfo(): string;
+    validationEndpoint: string;
+    easyFilter(val: any, dataI: any[], sortOrder: string[]): void;
+    allDataFilter(filterVal: any, data: any[]): any[];
+    arefilSrtTrkPropsDefault(ignoreColFM?: any): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DataTableService>;
+}
+
+declare class TableDragService {
+    private dataTableService;
+    private common;
+    constructor(dataTableService: DataTableService, common: CommonService);
+    currDataRow: any;
+    currColForDataRow: any;
+    dTblHeight: number;
+    currColumnEdit: string;
+    listenForMouseUp: boolean;
+    listenForSelectStart: boolean;
+    listenForColMvMouseUp: boolean;
+    colDragStartFrmHeaderTracker: any;
+    colDragStartFrmCellTracker: any;
+    tblDragStartFrmPagiTracker: any;
+    didResizeOnEvent: boolean;
+    colMoving: boolean;
+    headDims: Subject<any>;
+    cellDims: Subject<any>;
+    columnMove: Subject<any>;
+    dTblHeightOutput: Subject<number>;
+    checkItemBorderCursor(e: MouseEvent, noColResize?: boolean): void;
+    checkPaginatorBorderCursor(e: MouseEvent): void;
+    handleHeaderSizeAdjust(e: any): void;
+    handleCellSizeAdjust(e: any, rootCol?: string): void;
+    handleTableHeightAdjust(e: any): void;
+    doHeaderWidth(e: any): void;
+    doHeaderHeight(e: any): void;
+    doCellWidth(e: any): void;
+    doRowHeight(e: any): void;
+    doTblHeight(e: any): void;
+    handleColResMouseUp(e: any): void;
+    handleColMoveMouseUp(e: any): void;
+    stopWindowSelection(e: any): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableDragService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TableDragService>;
+}
+
+interface DataCell {
+    column: string;
+    width?: string;
+    freeze: boolean;
+    text?: string;
+    html?: any;
+    rawText: string;
+    dataType: string;
+    minimized: boolean;
+    editable: boolean;
+    visible: boolean;
+    specialColClass: string;
+    top?: number;
+}
+
+interface DataRow {
+    id: string;
+    index: number;
+    width: string;
+    height?: string;
+    cells?: DataCell[];
+    aboveTable?: boolean;
+    editedInDrag?: boolean;
+}
+
+interface CellEdit {
+    value: any;
+    row: number;
+    column: string;
+}
+
+interface RowNumber {
+    number: number;
+    height?: string;
+}
+
+declare class NgxDeebodata {
+    dataTableService: DataTableService;
+    private tblDragService;
+    common: CommonService;
+    onWindowClick(e: MouseEvent): void;
+    onWindowMouseUp(e: MouseEvent): void;
+    onWindowMouseMove(e: MouseEvent): void;
+    onWindowSelectStart(e: Event): void;
+    onWindowResize(e: Event): void;
+    onWindowScroll(e: Event): void;
+    constructor(dataTableService: DataTableService, tblDragService: TableDragService, common: CommonService);
+    rows: DataRow[];
+    aboveHgt: _angular_core.WritableSignal<number>;
+    belowHgt: _angular_core.WritableSignal<number>;
+    dtChecks: number[];
+    rowNos: RowNumber[];
+    verticalRest: number;
+    horizRest: _angular_core.WritableSignal<number>;
+    isScrolling: boolean;
+    useRowWid: string;
+    currGroupValues: _angular_core.WritableSignal<any[]>;
+    chartHgt: string;
+    chartState: string;
+    columnsForCharts: string[];
+    paginatorReady: boolean;
+    handlingSelRows: boolean;
+    columnOfInterest: _angular_core.WritableSignal<string>;
+    hiddenCols: string[];
+    desRowHeight: string;
+    currFilOpts: any[];
+    currSelEditOpts: any[];
+    listenToWindowCurrFil: boolean;
+    listenToCellDraggerMouseMove: boolean;
+    listenToCellDraggerMouseUp: boolean;
+    currDDFilter: string;
+    topLevelFilter: string;
+    allFilSortInfo: _angular_core.WritableSignal<string>;
+    lockVScroll: boolean;
+    isMultiFiltering: _angular_core.WritableSignal<boolean>;
+    ddFilStyle: any;
+    filterBuildUp: any[];
+    togSelRows: string;
+    maxCols: number;
+    lastElRowIndex: number;
+    columnHeaders: ColumnHeader[];
+    columnNames: string[];
+    linkCell: any;
+    linkCells: any[];
+    canGroupBy: _angular_core.WritableSignal<string[]>;
+    validatedEditType: string;
+    validationSettled: _angular_core.WritableSignal<boolean>;
+    dataHasBeenSet: _angular_core.WritableSignal<boolean>;
+    validationSub: Subscription;
+    data: _angular_core.InputSignal<any[]>;
+    licenseKey: string;
+    color1: string;
+    color2: string;
+    primaryKey: string;
+    defRowHgt: string;
+    defGridHgt: number;
+    altRowColor: string;
+    myColumnSymbols: ColumnSymbol[];
+    myColumnStyles: ColumnStyles[];
+    pieGraphColors: string[];
+    removePieCovers: boolean | string[];
+    editable: boolean;
+    rowNumbers: boolean;
+    cellEdit: EventEmitter<CellEdit>;
+    dataTable: ElementRef<HTMLElement>;
+    dataTableBody: ElementRef<HTMLElement>;
+    aboveArea: ElementRef<HTMLElement>;
+    belowArea: ElementRef<HTMLElement>;
+    validatedEdit: ElementRef<HTMLElement>;
+    rowNumHeader: ElementRef<HTMLElement>;
+    rowNumBody: ElementRef<HTMLElement>;
+    fCellDragger: ElementRef<HTMLElement>;
+    selFilContainer: ElementRef<HTMLElement>;
+    btnTogSelRows: ElementRef<HTMLButtonElement>;
+    dataTableHeaders: ElementRef<HTMLElement>;
+    topLevelDataFilter: ElementRef<HTMLInputElement>;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    execSetters(): void;
+    handleDataInput(): void;
+    getAllColsAtRuntime(excludeHidden: any): string[];
+    setMaxCols(): 5 | 2 | 3;
+    getAllColWidth(colLen: any): number;
+    removeAllFreezeCols(): void;
+    setTableHeight(h: number): void;
+    openCharts(): void;
+    closeCharts(event: boolean): void;
+    processColMove(event: any): void;
+    processGrouping(group: any): any;
+    setColHeaderHgt(): void;
+    renameColSpecChars(data: any[]): any[];
+    scoopOutObjsInObjs(data: any[]): any[];
+    convertNeededCols(data: any): any;
+    setRowSelChecksPlacement(): void;
+    setRowNumbers(): void;
+    initCheckTop(): number;
+    toggleSelectedRows(forceUnsel?: any): void;
+    toggleSingleRowSelected(useInd: number): false | void;
+    setBtnTogRows(amt?: number): void;
+    clearSelectedRows(): void;
+    getDataColumns(data: any[]): any;
+    setLastRowIndex(): number;
+    buildInitUiDataTable(data: any[], color1?: any, color2?: any): void;
+    getPrimaryKey(cols: string[]): string;
+    handleColAnyDDFilters(data: any[], cols: string[]): void;
+    swapColFilterToSelect(col: string, vals: any[]): void;
+    handleFilFocus(event: any): void;
+    buildSelFilOptions(event: any): any;
+    handleWinClickOnSelFil(): void;
+    killSelFilOpts(skipBlur?: boolean): void;
+    handleMultiSelFilter(elCol: string, value: any, checked: boolean): void;
+    execFilter(field: any, val: any): void;
+    tFilTO: any;
+    topFilterOnKeyUp(event: any): void;
+    setHorizPos(event: any): void;
+    blurContEd(): void;
+    setColsOnVisScreen(): void;
+    handleScroll(event: any): void;
+    execHorizScroll(left: number): void;
+    execVertScroll(top: number): void;
+    scrollDir: string;
+    handleScrollEnd(): any;
+    addCell(text: any, prop: string, visible: boolean): DataCell;
+    execHorizBodyScroll(): void;
+    cleanUpPossibles(): void;
+    execVertScrollDown(cols: string[], colLen: number): void;
+    execVertScrollUp(cols: string[], colLen: number): void;
+    clearAboveFoldRows(): void;
+    clearBelowFoldRows(): void;
+    jumpToRow(row: number): void;
+    scrollToRowGroup(rClass: string): void;
+    valEditFocusTo: number | null;
+    handleValidatedCellEditFocus(cellData: any): void;
+    clearFCellDragger(): void;
+    clearValidatedEdit(e?: any, clearDrag?: boolean): void;
+    execValClear(clearDrag?: boolean): void;
+    handleDraggerMU(e: any): void;
+    handleDraggerKD(e: any): void;
+    clearCellDEdits(): void;
+    clearDragEditFlag(): void;
+    handleCellDraggerInit(): void;
+    focusCellDragger(): void;
+    focusCellDraggerFromMouseDown(): void;
+    handleFDragTab(e: any): void;
+    settleCellDragger(): void;
+    handleCellDraggerEdit(e: any): void;
+    validateRawText(text: string, col: string, dataType: string): string;
+    execCellEdit(e: any, noBlur?: boolean, forceVal?: any): void;
+    checkCellEditOnClick(): void;
+    handleSingleColResize(val: any, column?: string): void;
+    testHideMinBtn(): void;
+    setHeaderHeight(val: any, force?: boolean): void;
+    setSingleRowHgt(val: any, row?: any, force?: boolean): void;
+    checkTabHorizScroll(id: string): void;
+    handleTheme(co1: string | null, co2: string | null): void;
+    handleColumnCss(cssSheet: HTMLStyleElement | undefined): void;
+    renderCurrData(reset: boolean, field?: any): any;
+    styleEmptyFilDataRow(tbody: HTMLElement, tbodyX: number): void;
+    freezeColCells(col: string): void;
+    maximizeColCells(col: string, fullClear?: boolean): void;
+    minimizeColEls(col: string, fullClear?: boolean): void;
+    scrollAllGBPanels(): void;
+    setTableWidthOnChange(): void;
+    setHoldingCheckCls(): void;
+    setDataRowWidthsOnMinimize(width: number): void;
+    clearHiddenCols(): void;
+    clearFilInputs(): void;
+    clearGroupBySels(): void;
+    resetCurrentData(col?: string): void;
+    resetVisCols(): void;
+    getMiniColCount(): number;
+    handleValidation(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDeebodata, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxDeebodata, "ngx-deebodata", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "licenseKey": { "alias": "licenseKey"; "required": false; }; "color1": { "alias": "color1"; "required": false; }; "color2": { "alias": "color2"; "required": false; }; "primaryKey": { "alias": "primaryKey"; "required": false; }; "defRowHgt": { "alias": "defRowHgt"; "required": false; }; "defGridHgt": { "alias": "defGridHgt"; "required": false; }; "altRowColor": { "alias": "altRowColor"; "required": false; }; "myColumnSymbols": { "alias": "myColumnSymbols"; "required": false; }; "myColumnStyles": { "alias": "myColumnStyles"; "required": false; }; "pieGraphColors": { "alias": "pieGraphColors"; "required": false; }; "removePieCovers": { "alias": "removePieCovers"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "rowNumbers": { "alias": "rowNumbers"; "required": false; }; }, { "cellEdit": "cellEdit"; }, never, never, true, never>;
+}
+
+export { NgxDeebodata };
+export type { CellEdit, ColumnStyles, ColumnSymbol, ValueCss };

package/ng-package.json

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

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

@@ -1,156 +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
-}
-
-.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

@@ -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>