Skip to content

Commit d1afed7

Browse files
ArrayIteratorArrayIterator
committed
reduce size & improve performance
1 parent 2f83af2 commit d1afed7

17 files changed

+948
-616
lines changed

‎README.md

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,16 @@ You can customize the implementation of the Frontend or Backend.
6464

6565
Typescript & scss [**[assets](assets)**] is used to create the UI, the UI is created using the following technologies:
6666

67-
Maximum record size is 1000 records, if more than 1000 records, the UI will not render the benchmark.
67+
Maximum record size is 5000 records, if more than 5000 records, the UI will not render the benchmark.
68+
(maximum record size can be changed in the preferences). When the record less than 5000 and set less than record, can be reset with:
69+
70+
```javascript
71+
window.arrayiterator_waterfall.set_max_records(5000);
72+
```
6873

6974
### REQUIREMENT:
7075

71-
- PHP 7.4 or higher
76+
- PHP 7.4 or later
7277
- Composer
7378
- DEV (Node.js (npm) - for installing the dependencies)
7479

@@ -87,7 +92,7 @@ Maximum record size is 1000 records, if more than 1000 records, the UI will not
8792
- [x] ToolBar (Chrome Like)
8893
- [x] Dark Mode & Light Mode (Auto Detect)
8994
- [x] Resizeable
90-
- [ ] Responsiveness (Partial)
95+
- [x] Responsiveness
9196
- [x] Action Size
9297
- [x] Maximize
9398
- [x] Minimize (restore)
@@ -101,7 +106,12 @@ Maximum record size is 1000 records, if more than 1000 records, the UI will not
101106
- [x] Message (information about the import, export, restore)
102107
- [x] Input Search
103108
- [x] Horizontal Resizable Section
104-
- [ ] Labs Tab
109+
- [ ] Labs Tab (Under Development)
110+
- [ ] Profiler Information
111+
- [ ] Metadata of JSON
112+
- [ ] RAM Usage & Limit (chart using pie chart from highchart.js)
113+
- [ ] Additional Information
114+
- [ ] Chart for benchmark
105115
- [x] Source Tab
106116

107117
#### Benchmark Tab

‎assets/scss/components/_main.scss

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -627,26 +627,3 @@ waterfall-filters {
627627
// -----------------------------------------------------------------
628628
// END FILTERS
629629
// -----------------------------------------------------------------
630-
631-
waterfall-preference-content {
632-
& {
633-
padding: 0 var(--waterfall-font-size);
634-
}
635-
636-
select,
637-
[type="text"],
638-
[type="number"] {
639-
width: 100px;
640-
border-radius: 3px;
641-
padding: 3px;
642-
margin: 0;
643-
font-size: var(--waterfall-font-size);
644-
color: var(--waterfall-color-base);
645-
border: 1px solid var(--waterfall-header-border-color);
646-
background-color: var(--waterfall-bg-color-base);
647-
&:focus {
648-
outline: none;
649-
border-color: var(--waterfall-header-tab-active-color);
650-
}
651-
}
652-
}

‎assets/scss/components/_preference.scss

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,119 @@ waterfall-preference {
2222
opacity: 1;
2323
height: calc(100% - var(--waterfall-header-height));
2424
}
25-
}
2625

26+
waterfall-preference-content {
27+
& {
28+
@include flex-row;
29+
flex: 1;
30+
margin: 0;
31+
padding: 0;
32+
overflow: auto;
33+
}
34+
35+
select,
36+
[type="text"],
37+
[type="number"] {
38+
width: 100px;
39+
border-radius: 3px;
40+
padding: 3px;
41+
margin: 0;
42+
font-size: var(--waterfall-font-size);
43+
color: var(--waterfall-color-base);
44+
border: 1px solid var(--waterfall-header-border-color);
45+
background-color: var(--waterfall-bg-color-base);
46+
47+
&:focus {
48+
outline: none;
49+
border-color: var(--waterfall-header-tab-active-color);
50+
}
51+
}
52+
}
53+
54+
waterfall-preference-tabs {
55+
@include flex-column;
56+
flex: 0 1 100%;
57+
margin-bottom: var(--waterfall-font-size);
58+
padding: var(--waterfall-font-size);
59+
padding-top: 0;
60+
overflow: hidden;
61+
}
62+
63+
waterfall-preference-header {
64+
@include flex-row-center;
65+
font-size: calc(var(--waterfall-font-size) * 1.5);
66+
position: relative;
67+
background-color: var(--waterfall-bg-color-base);
68+
z-index: 100;
69+
padding: calc(var(--waterfall-font-size) / 2) 0 ;
70+
border-bottom: 1px solid var(--waterfall-header-border-color);
71+
margin-bottom: var(--waterfall-font-size);
72+
flex: 1;
73+
justify-content: space-between;
74+
waterfall-preference-reset {
75+
@include flex-column-center;
76+
align-self: flex-end;
77+
font-size: calc(var(--waterfall-font-size) * .8);
78+
padding: calc(var(--waterfall-font-size) / 2) var(--waterfall-font-size);
79+
cursor: pointer;
80+
background-color: var(--waterfall-bg-color-error);
81+
color: var(--waterfall-bg-color-error-text);
82+
}
83+
}
84+
waterfall-preference-tab-chooser {
85+
& {
86+
@include flex-column;
87+
flex: 1 1 200px;
88+
overflow: auto;
89+
padding: calc(var(--waterfall-font-size) / 2) 0;
90+
}
91+
92+
waterfall-preference-tab {
93+
& {
94+
@include flex-row;
95+
padding: calc(var(--waterfall-font-size) / 4) var(--waterfall-font-size);
96+
cursor: default;
97+
}
98+
> waterfall-icon {
99+
margin-right: calc(var(--waterfall-font-size) / 2);
100+
}
101+
&:hover {
102+
color: var(--waterfall-action-hover-text-color);
103+
}
104+
105+
&[data-status="active"] {
106+
background-color: var(--waterfall-preference-active-bg-color);
107+
color: var(--waterfall-preference-active-text-color);
108+
border-top-right-radius: var(--waterfall-font-size);
109+
border-bottom-right-radius: var(--waterfall-font-size);
110+
}
111+
}
112+
}
113+
waterfall-items {
114+
@include flex-row;
115+
flex: 0 1 100%;
116+
flex-wrap: wrap;
117+
overflow: auto;
118+
waterfall-item {
119+
@include flex-column;
120+
flex: 0 1 calc(100% / 4);
121+
label {
122+
& {
123+
display: block;
124+
width: 100%;
125+
padding: calc(var(--waterfall-font-size) / 3) 0;
126+
}
127+
input[type="number"],
128+
input[type="text"],
129+
select {
130+
width: 250px;
131+
padding: 5px;
132+
font-size: calc(var(--waterfall-font-size) * .8);
133+
}
134+
}
135+
}
136+
}
137+
}
27138
// -----------------------------------------------------------------
28139
// END PREFERENCE
29140
// -----------------------------------------------------------------

‎assets/scss/components/_root.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
--waterfall-aggregator-active-border-color: #cfe1f9;
4646
--waterfall-aggregator-active-color: #cfe1f9;
4747
--waterfall-aggregator-active-text-color: #001e46;
48+
--waterfall-preference-active-bg-color: #cfe3ff;
49+
--waterfall-preference-active-text-color: #006eed;
4850
}
4951

5052
:root:has(waterfall[data-color-mode="dark"]) {
@@ -70,6 +72,8 @@
7072
--waterfall-aggregator-active-border-color: #004973;
7173
--waterfall-aggregator-border-color: #7f7f7f;
7274
--waterfall-aggregator-active-text-color: #bee5fb;
75+
--waterfall-preference-active-bg-color: #76acf4;
76+
--waterfall-preference-active-text-color: #282828;
7377
}
7478
@media screen and (max-width: 640px){
7579
:root {

0 commit comments

Comments
 (0)