Skip to content

Commit 2bb853b

Browse files
kraniankranian
committed
⚡ disk 사용율 차트 지속적으로 그리는 현상 수정 및 정렬 기능 추가
1 parent f0f0631 commit 2bb853b

File tree

1 file changed

+149
-43
lines changed

1 file changed

+149
-43
lines changed

‎src/components/Paper/DiskUsage/DiskUsage.js‎

Lines changed: 149 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,15 @@ const layout = [
3333
type: "percent"
3434
}
3535
];
36+
const orderBy ={
37+
auto : "asc",
38+
asc : "desc",
39+
desc : "auto"
40+
};
41+
3642

3743
class DiskUsage extends Component {
3844

39-
lastSort=null;
4045

4146
constructor(props) {
4247
super(props);
@@ -48,56 +53,81 @@ class DiskUsage extends Component {
4853
};
4954
}
5055

51-
componentWillReceiveProps() {
56+
componentWillReceiveProps(nextProps) {
57+
if(nextProps.diskUsage !== this.props.diskUsage) {
58+
let allDisk = nextProps.diskUsage;
5259

53-
let allDisk = this.props.diskUsage;
60+
if (!allDisk || !allDisk.time || !allDisk.diskUsage) {
61+
return;
62+
}
5463

55-
if (!allDisk || !allDisk.time || !allDisk.diskUsage) {
56-
return;
57-
}
64+
let allInstance = [];
65+
let arrDiskUsage = allDisk.diskUsage;
66+
let arrObjName = allDisk.objName;
5867

59-
let allInstance = [];
60-
let arrDiskUsage = allDisk.diskUsage;
61-
let arrObjName = allDisk.objName;
68+
let box = this.refs.listBox.parentNode.parentNode.parentNode.parentNode;
6269

63-
let box = this.refs.listBox.parentNode.parentNode.parentNode.parentNode;
70+
// used & total 사이즈가 0 보다 큰 데이터만 정리
71+
arrDiskUsage.map((data, index) => {
72+
73+
if (data !== null) {
74+
JSON.stringify((data).map((instance) => {
75+
if (instance.used > 0 && instance.total > 0) {
76+
instance.objName = arrObjName[index];
77+
instance.diskUsage = Math.round((instance.used / instance.total) * 100);
78+
instance.diskUsed = instance.used;
79+
instance.diskTotal = instance.total;
80+
instance.diskMount = instance.mount;
81+
instance.diskDevice = instance.device;
82+
allInstance.push(instance);
83+
}
84+
return null;
85+
}));
86+
}
87+
return null;
88+
});
89+
90+
if (allInstance.length > 0) {
6491

65-
// used & total 사이즈가 0 보다 큰 데이터만 정리
66-
arrDiskUsage.map((data, index) => {
67-
68-
if(data !== null) {
69-
JSON.stringify((data).map((instance) => {
70-
if(instance.used > 0 && instance.total > 0) {
71-
instance.objName = arrObjName[index];
72-
instance.diskUsage = Math.round((instance.used / instance.total) * 100)
73-
instance.diskUsed = instance.used;
74-
instance.diskTotal = instance.total;
75-
instance.diskMount = instance.mount;
76-
instance.diskDevice = instance.device;
77-
allInstance.push(instance);
78-
}
79-
return null;
80-
}));
92+
this.setState({
93+
allInstance: {
94+
data: allInstance,
95+
origin: [...allInstance]
96+
},
97+
boxHeight: box.offsetHeight,
98+
boxWidth: box.offsetWidth,
99+
sort : layout.map(d=>({...d, order:"auto"}))
100+
});
81101
}
82-
return null;
102+
}
103+
let box = this.refs.listBox.parentNode.parentNode.parentNode.parentNode;
104+
105+
this.setState({
106+
boxHeight: box.offsetHeight,
107+
boxWidth: box.offsetWidth
83108
});
84109

85-
if(allInstance.length > 0) {
86-
this.setState({
87-
allInstance : allInstance,
88-
boxHeight : box.offsetHeight,
89-
boxWidth : box.offsetWidth
90-
});
91-
}
92110
}
111+
shouldComponentUpdate(nextProps, nextState){
112+
if(nextProps.diskUsage !== this.props.diskUsage){
113+
return true;
114+
}
93115

94-
getRow = (row, i) => {
116+
if(nextState.sort !== this.state.sort){
117+
return true;
118+
}
119+
if(nextState.boxHeight !== this.state.boxHeight
120+
|| nextState.boxWidth !== this.state.boxWidth){
121+
return true;
122+
}
123+
return false;
95124

125+
}
126+
getRow = (row, i) => {
96127
return layout.map((meta, j) => {
97128

98129
let className = meta.key;
99130
let data = row[className];
100-
101131
if(data !== undefined){
102132
if (meta.type === "bytes") {
103133
return <span className={meta.key} key={j}>{this.bytesToSize(data)}</span>
@@ -111,17 +141,93 @@ class DiskUsage extends Component {
111141
});
112142
};
113143

114-
onSort(headerKey){
144+
onSort(meta){
145+
146+
const {data,origin} = this.state.allInstance;
147+
const {order,key,type} = meta;
148+
const _orderBy = orderBy[order];
149+
let _orderData;
150+
if(type === "string"){
151+
switch(_orderBy) {
152+
case "desc":
153+
data.sort((a, b) => a[key].localeCompare(b[key]));
154+
_orderData = data;
155+
break;
156+
case "asc":
157+
data.sort((a, b) => b[key].localeCompare(a[key]));
158+
_orderData = data;
159+
break;
160+
default:
161+
_orderData = origin;
162+
}
163+
}else if( type === "percent"){
164+
switch(_orderBy) {
165+
case "desc":
166+
data.sort((a, b) => String(a[key]).localeCompare(String(b[key]), 'en-US', { numeric: true, sensitivity: 'base' }));
167+
_orderData = data;
168+
break;
169+
case "asc":
170+
data.sort((a, b) => String(b[key]).localeCompare(String(a[key]), 'en-US', { numeric: true, sensitivity: 'base' }));
171+
_orderData = data;
172+
break;
173+
default:
174+
_orderData = origin;
175+
}
176+
}else{
177+
178+
switch(_orderBy) {
179+
case "desc":
180+
data.sort((a, b) => a[key].localeCompare(b[key], 'en-US', { numeric: true, sensitivity: 'base' }));
181+
_orderData = data;
182+
break;
183+
case "asc":
184+
data.sort((a, b) => b[key].localeCompare(a[key], 'en-US', { numeric: true, sensitivity: 'base' }));
185+
_orderData = data;
186+
break;
187+
default:
188+
_orderData = origin;
189+
}
190+
}
191+
this.lastSort =
192+
193+
this.setState({
194+
allInstance: {
195+
data: [..._orderData],
196+
origin: origin
197+
},
198+
sort: layout.map(d=> {
199+
if( d.key === key){
200+
d.order = _orderBy;
201+
}else {
202+
d.order = "auto";
203+
}
204+
return d;
205+
})
206+
});
115207

116208
}
117209
getHeader = () => {
118-
return layout.map((meta, j) => {
210+
const {sort} = this.state;
211+
const {data} = this.state.allInstance;
212+
213+
return sort.map((meta, j) => {
214+
const isObject = meta.key === 'objName';
215+
let iconClass ="";
119216

120-
if(meta.key === 'objName') {
121-
return <span className={meta.key} key={j} onClick={()=>this.onSort(meta.key)}>{meta.name} (Total : {this.state.allInstance.length})<i className="fa fa-sort" style={{color:"#a0a0a0"}}></i></span>
122-
}else{
123-
return <span className={meta.key} key={j} onClick={()=>this.onSort(meta.key)}>{meta.name}<i className="fa fa-sort" style={{color:"#a0a0a0"}}></i></span>
217+
switch(meta.order){
218+
case "asc":
219+
iconClass = "fa fa-sort-up";
220+
break;
221+
case "desc":
222+
iconClass = "fa fa-sort-desc";
223+
break;
224+
default:
225+
iconClass = "fa fa-sort";
124226
}
227+
return <span className={meta.key} key={j} onClick={()=>this.onSort(meta)}>
228+
{meta.name} {isObject ? `(Total : ${data.length})` : ""}
229+
<i className={iconClass} style={{color:"#a0a0a0", cursor: "pointer"}}></i>
230+
</span>
125231

126232
});
127233
};
@@ -139,7 +245,7 @@ class DiskUsage extends Component {
139245
return (
140246
<div className="disk-usage-list scrollbar" ref="listBox" style={{width: this.state.boxWidth + "px"}}>
141247
<div className="row table-title">{this.state.allInstance && this.getHeader()}</div>
142-
{this.state.allInstance && this.state.allInstance.map((data, i) => {
248+
{this.state.allInstance && this.state.allInstance.data.map((data, i) => {
143249
return <div className="row" key={i}>{this.getRow(data, i)}</div>;
144250
})}
145251
{(!this.state.allInstance) && <div className="no-data">

0 commit comments

Comments
 (0)