Separate utility functions from data classes (#811)

Author: ishii-norimi

js/data/camera.js

@@ -1,6 +1,8 @@
-import ImageData from './image.js'
+import { BaseData } from './base.js'
+import ImageLoader from './loader/image.js'
+import ImageRenderer from '../renderer/image.js'
 
-export default class CameraData extends ImageData {
+export default class CameraData extends BaseData {
 	constructor(manager) {
 		super(manager)
 
@@ -19,7 +21,7 @@ export default class CameraData extends ImageData {
 		this._slctImg.onchange = () => {
 			this._manager.platform.render()
 			this._thumbnail.replaceChildren()
-			this._thumbnail.appendChild(this._createCanvas(this.x[0]))
+			this._thumbnail.appendChild(ImageLoader.createCanvas(this.x[0]))
 		}
 		this._mngelm.appendChild(this._slctImg)
 
@@ -31,6 +33,9 @@ export default class CameraData extends ImageData {
 
 		this._x = []
 		this._y = []
+
+		this._manager.platform._renderer.push(new ImageRenderer(manager))
+		this._manager.setting.render.selectItem('image')
 	}
 
 	get availTask() {
@@ -63,15 +68,15 @@ export default class CameraData extends ImageData {
 		this._video.height = this._size[0]
 		this._video.autoplay = true
 		this._video.onclick = () => {
-			this.readImage(this._video).then(image => {
+			ImageLoader.load(this._video).then(image => {
 				this._x.push(image)
 				this._y.push(0)
 				const opt = document.createElement('option')
 				opt.value = opt.innerText = this._x.length
 				this._slctImg.appendChild(opt)
 				this._slctImg.value = this._x.length
 				this._thumbnail.replaceChildren()
-				this._thumbnail.appendChild(this._createCanvas(image))
+				this._thumbnail.appendChild(ImageLoader.createCanvas(image))
 
 				this.stopVideo()
 				this._mngelm.style.display = null

js/data/capture.js

@@ -1,6 +1,8 @@
-import ImageData from './image.js'
+import { BaseData } from './base.js'
+import ImageLoader from './loader/image.js'
+import ImageRenderer from '../renderer/image.js'
 
-export default class CaptureData extends ImageData {
+export default class CaptureData extends BaseData {
 	constructor(manager) {
 		super(manager)
 
@@ -19,7 +21,7 @@ export default class CaptureData extends ImageData {
 		this._slctImg.onchange = () => {
 			this._manager.platform.render()
 			this._thumbnail.replaceChildren()
-			this._thumbnail.appendChild(this._createCanvas(this.x[0]))
+			this._thumbnail.appendChild(ImageLoader.createCanvas(this.x[0]))
 		}
 		this._mngelm.appendChild(this._slctImg)
 
@@ -31,6 +33,9 @@ export default class CaptureData extends ImageData {
 
 		this._x = []
 		this._y = []
+
+		this._manager.platform._renderer.push(new ImageRenderer(manager))
+		this._manager.setting.render.selectItem('image')
 	}
 
 	get availTask() {
@@ -57,15 +62,15 @@ export default class CaptureData extends ImageData {
 		this._video.height = this._size[0]
 		this._video.autoplay = true
 		this._video.onclick = () => {
-			this.readImage(this._video).then(image => {
+			ImageLoader.load(this._video).then(image => {
 				this._x.push(image)
 				this._y.push(0)
 				const opt = document.createElement('option')
 				opt.value = opt.innerText = this._x.length
 				this._slctImg.appendChild(opt)
 				this._slctImg.value = this._x.length
 				this._thumbnail.replaceChildren()
-				this._thumbnail.appendChild(this._createCanvas(image))
+				this._thumbnail.appendChild(ImageLoader.createCanvas(image))
 
 				this.stopVideo()
 				this._mngelm.style.display = null

js/data/dashboard_estat.js

@@ -1,5 +1,6 @@
 import BaseDB from './db/base.js'
-import JSONData from './json.js'
+import { FixData } from './base.js'
+import JSONLoader from './loader/json.js'
 
 const BASE_URL = 'https://dashboard.e-stat.go.jp/api/1.0'
 const ExpiredTime = 1000 * 60 * 60 * 24 * 30
@@ -56,7 +57,7 @@ const presetInfos = {
 
 const lockKeys = {}
 
-export default class EStatData extends JSONData {
+export default class EStatData extends FixData {
 	constructor(manager) {
 		super(manager)
 		this._name = 'Nikkei Indexes'
@@ -614,10 +615,12 @@ export default class EStatData extends JSONData {
 		const minyear = date.reduce((y, d) => Math.min(y, d.year), Infinity)
 		this._datetime = date.map(d => (d.year - minyear) * 12 + d.month - 1)
 
-		this.setJSON(
+		const info = columns.map(c => ({ name: c, nan: 0 }))
+		const json = new JSONLoader(
 			keys.map(k => seldata[k]),
-			columns.map(c => ({ name: c, nan: 0 }))
+			{ columnInfos: info }
 		)
+		this.setArray(json.data, info)
 		this._readySelector()
 		this.setting.ml.refresh()
 		this.setting.$forceUpdate()

js/data/esl.js

@@ -1,4 +1,5 @@
-import CSVData from './csv.js'
+import { FixData } from './base.js'
+import CSV from './loader/csv.js'
 
 // https://web.stanford.edu/~hastie/ElemStatLearn/
 const datasetInfos = {
@@ -150,7 +151,7 @@ const datasetInfos = {
 	},
 }
 
-export default class MarketingData extends CSVData {
+export default class MarketingData extends FixData {
 	constructor(manager) {
 		super(manager)
 		this._name = 'marketing'
@@ -207,11 +208,9 @@ export default class MarketingData extends CSVData {
 	_readyData() {
 		const name = this._name
 		const info = datasetInfos[name]
-		this.readCSV(info.file, {
-			delimiter: ' ',
-		}).then(data => {
+		CSV.load(info.file, { delimiter: ' ' }).then(csv => {
 			if (name === this._name) {
-				this.setCSV(data, info.info)
+				this.setArray(csv.data, info.info)
 				this._manager.onReady(() => {
 					this._manager.platform.render()
 				})

js/data/json.js

@@ -1,19 +1,5 @@
-import { BaseData } from './base.js'
-
-export default class AudioData extends BaseData {
-	constructor(manager) {
-		super(manager)
-	}
-
-	get availTask() {
-		return ['SM']
-	}
-
-	get domain() {
-		return [[-1, 1]]
-	}
-
-	async readAudio(data) {
+export default class AudioLoader {
+	static load(data) {
 		return new Promise(resolve => {
 			const reader = new FileReader()
 			reader.readAsArrayBuffer(data)

js/data/audio.js renamed to js/data/loader/audio.js

@@ -1,19 +1,53 @@
 import 'https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js'
 
-import { FixData } from './base.js'
-
-class CSV {
-	constructor(data) {
+export default class CSV {
+	constructor(data, { header = 0 } = {}) {
 		this._data = data
+		this._header = header
 	}
 
 	/**
-	 * @type {Array<Array<string>>}
+	 * @type {Array<Array<*>>}
 	 */
 	get data() {
+		if (this._header > 0) {
+			return this._data.slice(this._header)
+		}
 		return this._data
 	}
 
+	/**
+	 * @type {string[]}
+	 */
+	get columns() {
+		if (this._header > 0) {
+			return this._data[0]
+		}
+		return Array.from(this._data[0], (_, i) => i)
+	}
+
+	/**
+	 * @type {string[]}
+	 */
+	get type() {
+		const data = this.data
+		return data[0].map((_, i) => {
+			const cat = data.some(d => isNaN(d[i]))
+			return cat ? 'category' : 'numeric'
+		})
+	}
+
+	get info() {
+		const names = this.columns
+		const types = this.type
+		const info = []
+		for (let i = 0; i < names.length; i++) {
+			info[i] = { name: names[i], type: types[i] }
+		}
+		info[info.length - 1].out = true
+		return info
+	}
+
 	/**
 	 *
 	 * @param {string} str
@@ -59,14 +93,14 @@ class CSV {
 			record.push(curValue)
 			data.push(record)
 		}
-		return new CSV(data)
+		return new CSV(data, config)
 	}
 
 	/**
 	 *
 	 * @param {string | File} value
 	 * @param {*} [config]
-	 * @returns {CSV}
+	 * @returns {Promise<CSV>}
 	 */
 	static async load(value, config = {}) {
 		if (typeof value === 'string') {
@@ -89,43 +123,3 @@ class CSV {
 		}
 	}
 }
-
-export default class CSVData extends FixData {
-	constructor(manager, data, columnInfos) {
-		super(manager)
-
-		if (data && columnInfos) {
-			this.setCSV(data, columnInfos)
-		}
-	}
-
-	async readCSV(data, config) {
-		const csv = await CSV.load(data, config)
-		return csv.data
-	}
-
-	setCSV(data, infos, header = false) {
-		if (!Array.isArray(data)) {
-			this.readCSV(data).then(d => {
-				this.setCSV(d, infos, header)
-			})
-			return
-		}
-		if (header) {
-			const cols = data[0]
-			data = data.slice(1)
-			if (!infos) {
-				infos = cols.map((c, i) => {
-					const cat = data.some(d => isNaN(d[i]))
-					return {
-						name: c,
-						type: cat ? 'category' : 'numeric',
-					}
-				})
-				infos[infos.length - 1].out = true
-			}
-		}
-
-		this.setArray(data, infos)
-	}
-}