+
{{ value }}
-
+
NULL
diff --git a/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.scss b/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.scss
new file mode 100644
index 0000000..7d7ca8f
--- /dev/null
+++ b/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.scss
@@ -0,0 +1,15 @@
+.cell {
+
+ // .full-text-popup {
+ // position: absolute;
+ // // display: none;
+ // padding: 1rem;
+ // background-color: #fff;
+ // border: 1px solid #ccc;
+ // box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+ // z-index: 99999999;
+ // }
+ // &:hover .full-text-popup {
+ // display: block;
+ // }
+}
diff --git a/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.ts b/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.ts
index 67cc3f2..20187ea 100644
--- a/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.ts
+++ b/src/app/components/custom-ag-grid/cell-type-detector/cell-type-detector.component.ts
@@ -1,10 +1,13 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { PopupTextService } from '@app/components/popup-text/popup-text.service';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { maxRowHeight } from '../custom-ag-grid.component';
import { defaultRowHeight } from '../custom-ag-grid.component';
+
@Component({
selector: 'app-cell-type-detector',
templateUrl: './cell-type-detector.component.html',
+ styleUrls: ['./cell-type-detector.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CellTypeDetectorComponent implements ICellRendererAngularComp {
@@ -16,14 +19,19 @@ export class CellTypeDetectorComponent implements ICellRendererAngularComp {
isMultiLine: boolean = false;
rowHeight = defaultRowHeight;
defaultRowHeight = defaultRowHeight;
+
+ @ViewChild('cell') cell: any;
+
+ constructor(private popupTextService: PopupTextService) { }
+
agInit(params: any): void {
this.params = params;
- if(/[\n\r]/.test(params.value)) {
- this.isMultiLine = true
- const newLineCount = params.value.split(/\n|\r\n/).length - 1;
- const rowHeightWithNewLines = newLineCount * defaultRowHeight;
- this.rowHeight = Math.min(rowHeightWithNewLines, maxRowHeight);
- }
+ // if (/[\n\r]/.test(params.value)) {
+ // this.isMultiLine = true
+ // const newLineCount = params.value.split(/\n|\r\n/).length - 1;
+ // const rowHeightWithNewLines = newLineCount * defaultRowHeight;
+ // this.rowHeight = Math.min(rowHeightWithNewLines, maxRowHeight);
+ // }
if (!isNaN(+params.value)) {
this.isNumber = true;
}
@@ -36,6 +44,16 @@ export class CellTypeDetectorComponent implements ICellRendererAngularComp {
// console.log(params.value);
}
+ onClick() {
+ const rect = this.cell.nativeElement.getBoundingClientRect();
+
+ this.popupTextService.setText(this.value);
+ this.popupTextService.setPosition({
+ top: rect.top,
+ left: rect.left
+ })
+ }
+
refresh(): boolean {
return false;
}
diff --git a/src/app/components/custom-ag-grid/custom-ag-grid.component.html b/src/app/components/custom-ag-grid/custom-ag-grid.component.html
index 4770f50..e3bbb14 100644
--- a/src/app/components/custom-ag-grid/custom-ag-grid.component.html
+++ b/src/app/components/custom-ag-grid/custom-ag-grid.component.html
@@ -1,16 +1,16 @@
+
+
{
let isAutoHeight = false;
- if (
- typeof firstItemOfDetails[key] === 'string' &&
- this.details.some((value) => regex.test(value[key]))
- ) {
- // isAutoHeight = true;
- // this.autoHeightColumns.push(key)
- }
+ // if (
+ // typeof firstItemOfDetails[key] === 'string' &&
+ // this.details.some((value) => regex.test(value[key]))
+ // ) {
+ // // isAutoHeight = true;
+ // // this.autoHeightColumns.push(key)
+ // }
return {
field: key,
hide: !val.includes(key),
@@ -192,8 +192,7 @@ export class CustomAgGridComponent implements OnInit, AfterContentChecked {
public resizeGrid() {
requestAnimationFrame(() => {
if (this.agGridSizeControl.selectedType === GRID_FIT) {
- this.gridColumnApi?.autoSizeAllColumns();
-
+ // this.gridColumnApi?.autoSizeAllColumns();
} else {
this.gridApi?.sizeColumnsToFit();
}
@@ -216,34 +215,35 @@ export class CustomAgGridComponent implements OnInit, AfterContentChecked {
settings: SettingButtonComponent,
cellHeader: CellHeaderComponent,
cellTypeDetector: CellTypeDetectorComponent,
- expandRenderer: ExpandRendererComponent,
+ // expandRenderer: ExpandRendererComponent,
};
}
public getRowHeight(params: RowHeightParams) {
- const isFullWidth = params.data.isExpanded;
- // changing defaultRowHeight also requires changing th and tr height in full-row-renderer.component.scss
- const margins = 10;
- // changing maxRowHeight also requires changing :host max-height in full-row-renderer.component.scss
- if (isFullWidth) {
- const columnCount = Object.keys(params.data)?.length;
- const exapndedRowSize = (columnCount * defaultRowHeight) + margins;
- return Math.min(exapndedRowSize, maxRowHeight);
- } else {
- let maxNewlineCount = 1;
- Object.values(params.data).forEach((element) => {
- if (typeof element === 'string'){
- const newLineCount = element.split(/\n|\r\n/).length - 1;
- if (newLineCount > maxNewlineCount) {
- maxNewlineCount = newLineCount;
- }
- }
- });
- const rowHeightWithNewLines = maxNewlineCount * defaultRowHeight;
- return Math.min(rowHeightWithNewLines, maxRowHeight)
- }
-
-
+ return 30;
}
+ // public getRowHeight_(params: RowHeightParams) {
+ // const isFullWidth = params.data.isExpanded;
+ // // changing defaultRowHeight also requires changing th and tr height in full-row-renderer.component.scss
+ // const margins = 10;
+ // // changing maxRowHeight also requires changing :host max-height in full-row-renderer.component.scss
+ // if (isFullWidth) {
+ // const columnCount = Object.keys(params.data)?.length;
+ // const exapndedRowSize = (columnCount * defaultRowHeight) + margins;
+ // return Math.min(exapndedRowSize, maxRowHeight);
+ // } else {
+ // let maxNewlineCount = 1;
+ // Object.values(params.data).forEach((element) => {
+ // if (typeof element === 'string'){
+ // const newLineCount = element.split(/\n|\r\n/).length - 1;
+ // if (newLineCount > maxNewlineCount) {
+ // maxNewlineCount = newLineCount;
+ // }
+ // }
+ // });
+ // const rowHeightWithNewLines = maxNewlineCount * defaultRowHeight;
+ // return Math.min(rowHeightWithNewLines, maxRowHeight);
+ // }
+ // }
ngOnInit() {
this.agEventService.listen().subscribe((data) => {
if (data) {
diff --git a/src/app/components/custom-ag-grid/renderers/full-row-renderer/full-row-renderer.component.html b/src/app/components/custom-ag-grid/renderers/full-row-renderer/full-row-renderer.component.html
index 34a3fd7..d801f20 100644
--- a/src/app/components/custom-ag-grid/renderers/full-row-renderer/full-row-renderer.component.html
+++ b/src/app/components/custom-ag-grid/renderers/full-row-renderer/full-row-renderer.component.html
@@ -9,7 +9,7 @@
}}
+
diff --git a/src/app/components/ngx-uplot/ngx-uplot.component.html b/src/app/components/ngx-uplot/ngx-uplot.component.html
deleted file mode 100644
index f60710c..0000000
--- a/src/app/components/ngx-uplot/ngx-uplot.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
- Hide labels with not a number data
-
-
diff --git a/src/app/components/ngx-uplot/ngx-uplot.component.ts b/src/app/components/ngx-uplot/ngx-uplot.component.ts
deleted file mode 100644
index 6908d29..0000000
--- a/src/app/components/ngx-uplot/ngx-uplot.component.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { Component, ViewChild, AfterViewInit, Input, HostListener } from '@angular/core';
-import { cloneObject } from '@app/helper/functions';
-import * as _uPlot from 'uplot';
-
-const uPlot: any = (_uPlot as any)?.default;
-
-@Component({
- selector: 'ngx-uplot',
- templateUrl: './ngx-uplot.component.html',
- styles: [`
- .u-legend.u-inline .u-value {
- width: 150px;
- text-align: left;
- }
- `]
-})
-export class NgxUplotComponent implements AfterViewInit {
- // filters
- isHideNaNData: boolean = true;
-
-
- chartData: any;
- uPlotChart: any;
- opts: any = {
- class: "my-chart",
- // ms: 1,
- // cursor: {
- // x: false,
- // y: false,
- // },
- // scales: {
- // "x": {
- // time: false,
- // range: [0, 10]
- // },
- // "%": {
- // auto: false,
- // range: [0, 100],
- // }
- // },
- // axes: [
- // {},
- // {
- // scale: "%",
- // values: (self: any, ticks: any) => ticks.map((rawValue: any) => rawValue.toFixed(1) + "%"),
- // },
- // {
- // scale: "mb",
- // values: (self: any, ticks: any) => ticks.map((rawValue: any) => rawValue.toFixed(2) + "MB"),
- // side: 1,
- // grid: { show: false },
- // },
- // ],
- series: [{}]
- };
- _details: any = [];
- @Input()
- set data(value: any) {
- this._details = value?.data;
- // console.log('this._details => ', this._details);
- try {
- const labels = value?.meta?.map((i: any) => i.name);
- this._details = this._details?.map((d: any) => {
- return Object.values(d);
- })
- const out: any[] = [];
- for (let i = 0; i < this._details.length; i++) {
- for (let j = 0; j < this._details[i].length; j++) {
- if (!out[j]) {
- out[j] = [];
- }
- const n = this._details[i][j];
- out[j].push(!isNaN(n) ? +n : null);
- }
- }
- const series = out.map((i, k) => ({
- label: labels[k],
- stroke: this.randColor(),
- width: 1 / devicePixelRatio,
- fill: "rgba(0,255,0,0.1)"
- }));
-
- this.opts.series = [{}, ...series];
-
- // console.log('this.opts.series', this.opts.series);
- this._details = [
- [...Array(value?.data?.length).keys()],
- ...out
- ];
- // console.log('FORMATTED:this._details => ', this._details);
- this.makeChart(this._details);
- } catch (e) { }
- }
- get data(): any {
- return this._details;
- }
-
- @ViewChild('chartUPlot', { static: true }) chartUPlot: any | HTMLElement;
- constructor() {
-
- // console.log(this.data);
- }
- randColor() {
- return "#000000".replace(/0/g, () => (~~(Math.random() * 16)).toString(16));
- }
- indexOfField: boolean[] = [];
- filterOfData(): any {
- if (this.isHideNaNData) {
- this.indexOfField = [];
- const outData = this.data.filter((i: any[]) => {
- const out: boolean = !!i.reduce((a, b) => a + +b, 0);
- this.indexOfField.push(out);
- return out;
- })
- // console.log('<< outData >>', outData);
- return outData;
- } else {
- // console.log('<< this.data >>', this.data);
- return this.data
- }
- }
- @HostListener('window:resize', ['$event'])
- resize(event: any) {
- this.updateChecker();
- }
-
- makeChart(data: any = this.chartData) {
- if (data) {
- this.chartData = data;
- } else {
- return;
- }
-
- this.chartUPlot.nativeElement.innerHTML = '';
- const filteredData = this.filterOfData();
- const opts: any = cloneObject(this.opts);
- if (this.isHideNaNData && opts?.series) {
- opts.series = opts.series.filter((i: any, k: number) => this.indexOfField[k]);
- // console.log('opts.series', opts.series)
- }
- opts.width = this.chartUPlot.nativeElement.clientWidth;
- opts.height = this.chartUPlot.nativeElement.clientHeight * 0.6 || window.innerHeight * 0.6 - 64;
- // alert('opts.height ' + opts.height)
- this.uPlotChart = new uPlot(opts, filteredData, this.chartUPlot.nativeElement);
- }
-
- __hostWidth = 0;
- updateChecker() {
- requestAnimationFrame(() => {
- if (this.__hostWidth !== this.chartUPlot.nativeElement.clientWidth + window.innerHeight) {
- this.__hostWidth = this.chartUPlot.nativeElement.clientWidth + window.innerHeight;
- this.makeChart(this.data)
- }
- this.updateChecker();
- })
- }
- ngAfterViewInit() {
- this.makeChart(this.data);
- this.updateChecker()
- }
- hide(event: any) {
- this.makeChart(this.data)
- // console.log(event);
- }
-}
diff --git a/src/app/components/ngx-uplot/ngx-uplot.module.ts b/src/app/components/ngx-uplot/ngx-uplot.module.ts
deleted file mode 100644
index f70c648..0000000
--- a/src/app/components/ngx-uplot/ngx-uplot.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NgxUplotComponent } from './ngx-uplot.component';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { FormsModule } from '@angular/forms';
-@NgModule({
- imports: [
- CommonModule,
- MatSlideToggleModule,
- FormsModule
- ],
- declarations: [NgxUplotComponent],
- exports: [NgxUplotComponent]
-})
-export class NgxUplotModule { }
diff --git a/src/app/components/popup-text/popup-text.component.html b/src/app/components/popup-text/popup-text.component.html
new file mode 100644
index 0000000..a281e6e
--- /dev/null
+++ b/src/app/components/popup-text/popup-text.component.html
@@ -0,0 +1,7 @@
+
diff --git a/src/app/components/popup-text/popup-text.component.scss b/src/app/components/popup-text/popup-text.component.scss
new file mode 100644
index 0000000..80c6a6a
--- /dev/null
+++ b/src/app/components/popup-text/popup-text.component.scss
@@ -0,0 +1,28 @@
+.back-place {
+ position: absolute;
+ // display: none;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.2);
+ z-index: 99999999;
+}
+.full-text-popup {
+ position: absolute;
+ // display: none;
+ top: 0;
+ left: 0;
+ padding: 6px 4px;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+ white-space: pre;
+ z-index: 99999999;
+ max-width: 400px;
+ max-height: 400px;
+ overflow: auto;
+ transition: top 0.3s, left 0.3s;
+}
diff --git a/src/app/components/popup-text/popup-text.component.ts b/src/app/components/popup-text/popup-text.component.ts
new file mode 100644
index 0000000..cbcc4f9
--- /dev/null
+++ b/src/app/components/popup-text/popup-text.component.ts
@@ -0,0 +1,60 @@
+import { PopupTextService } from '@app/components/popup-text/popup-text.service';
+import { Component, OnInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+
+@Component({
+ selector: 'app-popup-text',
+ templateUrl: './popup-text.component.html',
+ styleUrls: ['./popup-text.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PopupTextComponent implements OnInit {
+
+ text: string = '';
+ top = 0;
+ left = 0;
+ @ViewChild('textPopup') textPopup: any;
+ constructor(private popupTextService: PopupTextService, private cdr: ChangeDetectorRef) { }
+
+ get isJson(): boolean {
+ try {
+ return !!JSON.parse(this.text);
+ } catch (e) {
+ return false;
+ }
+ }
+
+ getJSON(): any {
+ return JSON.parse(this.text);
+ }
+
+ ngOnInit() {
+ this.popupTextService.listen().subscribe(data => {
+ if (data?.text || data?.text === '') {
+ this.text = data?.text;
+ }
+
+ if (data?.top || data?.left) {
+ this.top = data?.top - 2;
+ this.left = data?.left - 5;
+
+ setTimeout(() => {
+ const el = this.textPopup?.nativeElement;
+ const rect = el?.getBoundingClientRect() || { height: 500, width: 500 };
+
+ this.top = Math.min(data.top - 2, window.innerHeight - rect.height - 50);
+ this.left = Math.min(data.left - 5, window.innerWidth - rect.width - 50);
+
+ this.cdr.detectChanges();
+ }, 100);
+ }
+
+ this.cdr.detectChanges();
+ });
+ }
+
+ onHide() {
+ this.text = '';
+ this.cdr.detectChanges();
+ }
+
+}
diff --git a/src/app/components/popup-text/popup-text.module.ts b/src/app/components/popup-text/popup-text.module.ts
new file mode 100644
index 0000000..5c1e833
--- /dev/null
+++ b/src/app/components/popup-text/popup-text.module.ts
@@ -0,0 +1,14 @@
+import { NgxJsonViewerModule } from 'ngx-json-viewer';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PopupTextComponent } from './popup-text.component';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ NgxJsonViewerModule
+ ],
+ declarations: [PopupTextComponent],
+ exports: [PopupTextComponent]
+})
+export class PopupTextModule { }
diff --git a/src/app/components/popup-text/popup-text.service.ts b/src/app/components/popup-text/popup-text.service.ts
new file mode 100644
index 0000000..433397d
--- /dev/null
+++ b/src/app/components/popup-text/popup-text.service.ts
@@ -0,0 +1,26 @@
+import { Observable, BehaviorSubject } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class PopupTextService {
+ top = 0;
+ left = 0;
+ text = '';
+ obs: BehaviorSubject
= new BehaviorSubject(null);
+
+ listen() {
+ return this.obs.asObservable();
+ }
+ setPosition({ top, left }: any) {
+ this.top = top;
+ this.left = left;
+ this.obs.next({ top, left });
+ }
+
+ setText(text: string) {
+ this.text = text;
+ this.obs.next({ text });
+ }
+}
diff --git a/src/app/pages/home.page/home.page.component.html b/src/app/pages/home.page/home.page.component.html
index d47c24c..443758e 100644
--- a/src/app/pages/home.page/home.page.component.html
+++ b/src/app/pages/home.page/home.page.component.html
@@ -174,7 +174,7 @@
(getParam.kiosk &&
!getParam.query_field &&
containerSplitter.offsetHeight) ||
- containerSplitter.offsetHeight - 22
+ containerSplitter.offsetHeight - 40
"
>
No Data
(testConnection)="connectToDB($event, true)"
(changeDbItems)="setDBItems($event)"
>
+
diff --git a/src/app/pages/home.page/home.page.component.ts b/src/app/pages/home.page/home.page.component.ts
index 41cdfd0..af48867 100644
--- a/src/app/pages/home.page/home.page.component.ts
+++ b/src/app/pages/home.page/home.page.component.ts
@@ -1,16 +1,14 @@
-import { Functions } from './../../helper/functions';
-import { HashParams } from './../../app.component';
-import { DocsService } from './../../services/docs.service';
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, Inject } from '@angular/core';
+import { Functions } from '@app/helper/functions';
+import { DocsService } from '@app/services/docs.service';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ApiService, QUERY_LIST } from 'src/app/services/api.service';
import { getStorage, saveToFile, setLink, setStorage } from '@app/helper/windowFunctions';
import { Row } from '@app/models/grid.model';
import { Dictionary } from '@app/components/ace-editor-ext/dictionary-default';
import { promiseWait, cloneObject } from '@app/helper/functions';
-import { getParam } from '@app/app.component';
import { MatDialog } from '@angular/material/dialog';
import { DialogKioskComponent } from '../dialogs/dialog-kiosk/dialog-kiosk.component';
-import { AlertService } from '@app/services/alert.service';
+import { getParam, HashParams } from '@app/services/get-params.service';
@Component({
templateUrl: './home.page.component.html',
diff --git a/src/app/services/get-params.service.ts b/src/app/services/get-params.service.ts
new file mode 100644
index 0000000..77dee86
--- /dev/null
+++ b/src/app/services/get-params.service.ts
@@ -0,0 +1,71 @@
+import { Injectable } from '@angular/core';
+export interface HashParams {
+ query?: string;
+ db_host?: string;
+ db_login?: string;
+ db_pass?: string;
+ kiosk?: boolean;
+ mode?: 'dark' | 'light' | null | undefined;
+ table?: boolean;
+ chart?: boolean;
+ panel?: boolean;
+ query_field?: boolean;
+}
+export let getParam: HashParams = {
+ db_host: "",
+ db_login: "",
+ db_pass: "",
+ query: "",
+ kiosk: false,
+ mode: "light",
+ panel: false,
+ query_field: true,
+ table: true,
+ chart: true,
+};
+
+@Injectable({
+ providedIn: 'root'
+})
+export class GetParamsService {
+
+ constructor() {
+
+ const params: any[] = location.hash?.replace('#', '')?.split("&")?.map((i: any) => i.split('=')) || [];
+ params.forEach(([key, value]) => {
+ switch (key) {
+ case 'chart':
+ getParam.chart = !!(+value);
+ break;
+ case 'db_host':
+ getParam.db_host = value;
+ break;
+ case 'db_login':
+ getParam.db_login = value;
+ break;
+ case 'db_pass':
+ getParam.db_pass = value;
+ break;
+ case 'kiosk':
+ getParam.kiosk = !!(+value);
+ break;
+ case 'mode':
+ getParam.mode = value;
+ break;
+ case 'panel':
+ getParam.panel = !!(+value);
+ break;
+ case 'query':
+ getParam.query = decodeURI(value + '') || value;
+ break;
+ case 'query_field':
+ getParam.query_field = !!(+value);
+ break;
+ case 'table':
+ getParam.table = !!(+value);
+ break;
+ }
+ })
+ }
+
+}