Skip to content

Commit 8d38cdb

Browse files
ishii-norimiishii-norimi
committed
Make utility of input/output selection elements of data classes
1 parent ef88739 commit 8d38cdb

File tree

4 files changed

+186
-179
lines changed

4 files changed

+186
-179
lines changed

‎js/data/dashboard_estat.js

+29-95
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import BaseDB from './db/base.js'
22
import { FixData } from './base.js'
33
import JSONLoader from './loader/json.js'
4+
import IOSelector from './util/ioselector.js'
45

56
const BASE_URL = 'https://dashboard.e-stat.go.jp/api/1.0'
67
const ExpiredTime = 1000 * 60 * 60 * 24 * 30
@@ -61,11 +62,8 @@ export default class EStatData extends FixData {
6162
constructor(manager) {
6263
super(manager)
6364
this._name = 'Nikkei Indexes'
64-
this._columns = []
6565
this._shift = []
6666
this._scale = []
67-
this._object = []
68-
this._target = -1
6967
this._scaled = true
7068
this._lastRequested = 0
7169

@@ -109,8 +107,16 @@ export default class EStatData extends FixData {
109107
credit.innerText = resources.credit
110108
credit.style.fontSize = '80%'
111109
elm.appendChild(credit)
112-
this._selector = document.createElement('div')
113-
elm.appendChild(this._selector)
110+
this._selector = new IOSelector(elm)
111+
this._selector.onchange = () => {
112+
this._domain = null
113+
this._manager.onReady(() => {
114+
this._manager.platform.init()
115+
})
116+
}
117+
118+
this._loader = document.createElement('div')
119+
elm.appendChild(this._loader)
114120

115121
const optionalElm = document.createElement('div')
116122
const scaledCheckbox = document.createElement('input')
@@ -136,21 +142,21 @@ export default class EStatData extends FixData {
136142
}
137143

138144
get _requireDateInput() {
139-
return this._object.length === 0 && this._datetime && ['', 'RG', 'AD'].includes(this._manager.task)
145+
return this._selector.object.length === 0 && this._datetime && ['', 'RG', 'AD'].includes(this._manager.task)
140146
}
141147

142148
get columnNames() {
143149
if (this._requireDateInput) {
144150
return ['date']
145151
}
146-
return this._object.map(i => this._columns[i])
152+
return this._selector.objectNames
147153
}
148154

149155
get originalX() {
150156
if (this._requireDateInput) {
151157
return this._datetime.map(v => [v])
152158
}
153-
return this._x.map(v => this._object.map(i => v[i]))
159+
return this._x.map(v => this._selector.object.map(i => v[i]))
154160
}
155161

156162
get x() {
@@ -161,22 +167,24 @@ export default class EStatData extends FixData {
161167
this._readyScaledData()
162168
return this._x.map(v => {
163169
const c = v.map((a, d) => (a - this._shift[d]) / this._scale[d])
164-
return this._object.map(i => c[i])
170+
return this._selector.object.map(i => c[i])
165171
})
166172
}
167173

168174
get originalY() {
169-
if (this._target >= 0) {
170-
return this._x.map(v => v[this._target])
175+
const target = this._selector.target
176+
if (target >= 0) {
177+
return this._x.map(v => v[target])
171178
}
172179
return Array(this._x.length).fill(0)
173180
}
174181

175182
get y() {
176183
if (!this._scaled) return this.originalY
177184
this._readyScaledData()
178-
if (this._target >= 0) {
179-
return this._x.map(v => (v[this._target] - this._shift[this._target]) / this._scale[this._target])
185+
const target = this._selector.target
186+
if (target >= 0) {
187+
return this._x.map(v => (v[target] - this._shift[target]) / this._scale[target])
180188
}
181189
return Array(this._x.length).fill(0)
182190
}
@@ -524,26 +532,23 @@ export default class EStatData extends FixData {
524532
this._x = []
525533
this._shift = []
526534
this._scale = []
527-
this._columns = []
528-
this._object = []
529535
this._index = null
530536
this._datetime = null
531537
this._manager.platform?.init()
532538

533539
const indicatorCodes = this.indicatorCodes
540+
this._selector.columns = []
534541
if (indicatorCodes.length === 0) {
535-
this._readySelector()
536542
this.setting.ml.refresh()
537543
return
538544
}
539545

540-
const loader = document.createElement('div')
541-
loader.classList.add('loader')
542-
this._selector.replaceChildren(loader)
546+
this._loader.classList.add('loader')
543547

544548
const query = { Cycle: this.cycle, RegionCode: this.region }
545549
const queryString = JSON.stringify(query)
546550
const data = await this._getData(indicatorCodes, query)
551+
this._loader.classList.remove('loader')
547552
if (
548553
indicatorCodes.length != this.indicatorCodes.length ||
549554
indicatorCodes.some((c, i) => c !== this.indicatorCodes[i]) ||
@@ -552,7 +557,6 @@ export default class EStatData extends FixData {
552557
return
553558
}
554559
if (data.GET_STATS.RESULT.status === '1') {
555-
this._readySelector()
556560
return
557561
}
558562
const dataobj = data.GET_STATS.STATISTICAL_DATA.DATA_INF.DATA_OBJ
@@ -597,11 +601,13 @@ export default class EStatData extends FixData {
597601
}
598602
}
599603

600-
this._columns = columns
604+
this._selector.columns = columns
605+
const object = []
601606
for (let i = 0; i < columns.length - 1; i++) {
602-
this._object.push(i)
607+
object.push(i)
603608
}
604-
this._target = this._columns.length - 1
609+
this._selector.object = object
610+
this._selector.target = columns.length - 1
605611

606612
const keys = Object.keys(seldata)
607613
keys.sort()
@@ -621,81 +627,9 @@ export default class EStatData extends FixData {
621627
{ columnInfos: info }
622628
)
623629
this.setArray(json.data, info)
624-
this._readySelector()
625630
this.setting.ml.refresh()
626631
this.setting.$forceUpdate()
627632
}
628-
629-
_readySelector() {
630-
this._selector.replaceChildren()
631-
if (this._columns.length > 1) {
632-
const islct = document.createElement('select')
633-
islct.multiple = true
634-
islct.onchange = () => {
635-
this._object = []
636-
let unslctval = ''
637-
let oreset = false
638-
for (const opt of islct.options) {
639-
if (opt.selected) {
640-
this._object.push(this._columns.indexOf(opt.value))
641-
if (opt.value === oslct.value) {
642-
oreset = true
643-
}
644-
} else if (!unslctval) {
645-
unslctval = opt.value
646-
}
647-
}
648-
if (oreset) {
649-
this._target = this._columns.indexOf(unslctval)
650-
oslct.value = unslctval
651-
}
652-
this._domain = null
653-
this._manager.onReady(() => {
654-
this._manager.platform.init()
655-
})
656-
}
657-
this._selector.append('Input', islct)
658-
const oslct = document.createElement('select')
659-
oslct.onchange = () => {
660-
let hasislct = false
661-
for (const opt of islct.selectedOptions) {
662-
if (opt.value === oslct.value) {
663-
opt.selected = false
664-
this._object = this._object.filter(i => this._columns[i] !== opt.value)
665-
hasislct = true
666-
break
667-
}
668-
}
669-
if (hasislct || (oslct.value === '' && this._target >= 0)) {
670-
for (const opt of islct.options) {
671-
if (opt.value === this._columns[this._target]) {
672-
opt.selected = true
673-
this._object.push(this._target)
674-
}
675-
}
676-
}
677-
this._target = this._columns.indexOf(oslct.value)
678-
this._domain = null
679-
this._manager.onReady(() => {
680-
this._manager.platform.init()
681-
})
682-
}
683-
this._selector.append('Output', oslct)
684-
685-
oslct.appendChild(document.createElement('option'))
686-
for (const column of this._columns) {
687-
const opt = document.createElement('option')
688-
opt.value = opt.innerText = column
689-
islct.appendChild(opt)
690-
oslct.appendChild(opt.cloneNode(true))
691-
}
692-
islct.size = Math.min(4, islct.options.length)
693-
for (let i = 0; i < this._columns.length - 1; i++) {
694-
islct.options[i].selected = this._object.includes(i)
695-
}
696-
oslct.value = this._columns[this._target]
697-
}
698-
}
699633
}
700634

701635
const DB_NAME = 'dashboard.e-stat.go.jp'

‎js/data/poke.js

+16-82
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import BaseDB from './db/base.js'
22
import { FixData } from './base.js'
33
import JSONLoader from './loader/json.js'
4+
import IOSelector from './util/ioselector.js'
45

56
const BASE_URL = 'https://pokeapi.co/api/v2'
67
const DB_NAME = 'poke_api'
@@ -24,8 +25,6 @@ export default class PokeData extends FixData {
2425
constructor(manager) {
2526
super(manager)
2627
this._db = new PokeDB()
27-
this._object = []
28-
this._target = -1
2928
this._loading = false
3029

3130
const elm = this.setting.data.configElement
@@ -85,8 +84,13 @@ export default class PokeData extends FixData {
8584
credit.innerText = 'Pokémon and Pokémon character names are trademarks of Nintendo.'
8685
credit.style.fontSize = '80%'
8786
elm.appendChild(credit)
88-
this._selector = document.createElement('div')
89-
elm.appendChild(this._selector)
87+
this._selector = new IOSelector(elm)
88+
this._selector.onchange = () => {
89+
this._domain = null
90+
this._manager.onReady(() => {
91+
this._manager.platform.init()
92+
})
93+
}
9094
this.ready()
9195
}
9296

@@ -95,20 +99,21 @@ export default class PokeData extends FixData {
9599
}
96100

97101
get columnNames() {
98-
return this._object.map(i => this._feature_names[i])
102+
return this._selector.object.map(i => this._feature_names[i])
99103
}
100104

101105
get x() {
102-
return this._x.map(v => this._object.map(i => v[i]))
106+
return this._x.map(v => this._selector.object.map(i => v[i]))
103107
}
104108

105109
get originalX() {
106110
return this.x
107111
}
108112

109113
get y() {
110-
if (this._target >= 0) {
111-
return this._x.map(v => v[this._target])
114+
const target = this._selector.target
115+
if (target >= 0) {
116+
return this._x.map(v => v[target])
112117
}
113118
return Array(this._x.length).fill(0)
114119
}
@@ -144,8 +149,8 @@ export default class PokeData extends FixData {
144149
return
145150
}
146151

147-
this._object = [0]
148-
this._target = 1
152+
this._selector.target = 1
153+
this._selector.object = [0]
149154
this._names = localData.map(v => v.name)
150155

151156
const info = ['height', 'weight', 'hp', 'attack', 'defense', 'special-attack', 'special-defense', 'speed'].map(
@@ -162,7 +167,7 @@ export default class PokeData extends FixData {
162167
{ columnInfos: info }
163168
)
164169
this.setArray(json.data, info)
165-
this._readySelector()
170+
this._selector.columns = this._feature_names
166171
}
167172

168173
async _getPokemons() {
@@ -222,75 +227,4 @@ export default class PokeData extends FixData {
222227
this._progressBar.style.display = 'none'
223228
return datas
224229
}
225-
226-
_readySelector() {
227-
this._selector.replaceChildren()
228-
if (this._feature_names.length > 1) {
229-
const islct = document.createElement('select')
230-
islct.multiple = true
231-
islct.onchange = () => {
232-
this._object = []
233-
let unslctval = ''
234-
let oreset = false
235-
for (const opt of islct.options) {
236-
if (opt.selected) {
237-
this._object.push(this._feature_names.indexOf(opt.value))
238-
if (opt.value === oslct.value) {
239-
oreset = true
240-
}
241-
} else if (!unslctval) {
242-
unslctval = opt.value
243-
}
244-
}
245-
if (oreset) {
246-
this._target = this._feature_names.indexOf(unslctval)
247-
oslct.value = unslctval
248-
}
249-
this._domain = null
250-
this._manager.onReady(() => {
251-
this._manager.platform.init()
252-
})
253-
}
254-
this._selector.append('Input', islct)
255-
const oslct = document.createElement('select')
256-
oslct.onchange = () => {
257-
let hasislct = false
258-
for (const opt of islct.selectedOptions) {
259-
if (opt.value === oslct.value) {
260-
opt.selected = false
261-
this._object = this._object.filter(i => this._feature_names[i] !== opt.value)
262-
hasislct = true
263-
break
264-
}
265-
}
266-
if (hasislct || (oslct.value === '' && this._target >= 0)) {
267-
for (const opt of islct.options) {
268-
if (opt.value === this._feature_names[this._target]) {
269-
opt.selected = true
270-
this._object.push(this._target)
271-
}
272-
}
273-
}
274-
this._target = this._feature_names.indexOf(oslct.value)
275-
this._domain = null
276-
this._manager.onReady(() => {
277-
this._manager.platform.init()
278-
})
279-
}
280-
this._selector.append('Output', oslct)
281-
282-
oslct.appendChild(document.createElement('option'))
283-
for (const column of this._feature_names) {
284-
const opt = document.createElement('option')
285-
opt.value = opt.innerText = column
286-
islct.appendChild(opt)
287-
oslct.appendChild(opt.cloneNode(true))
288-
}
289-
islct.size = Math.min(4, islct.options.length)
290-
for (let i = 0; i < this._feature_names.length - 1; i++) {
291-
islct.options[i].selected = this._object.includes(i)
292-
}
293-
oslct.value = this._feature_names[this._target]
294-
}
295-
}
296230
}

0 commit comments

Comments
 (0)