import io.data2viz.charts.*
import io.data2viz.charts.core.*
import io.data2viz.charts.dimension.*
import io.data2viz.charts.chart.*
import io.data2viz.charts.chart.mark.*
import io.data2viz.charts.viz.*
import io.data2viz.charts.layout.*
import io.data2viz.geom.*
import io.data2viz.color.*
import io.data2viz.timeFormat.*
import io.data2viz.format.formatter
import io.data2viz.dsv.Dsv
import io.data2viz.math.deg
import org.w3c.fetch.Response
import kotlinx.browser.window
import kotlin.js.Promise
import kotlinx.datetime.*
val width = 450.0
val height = 300.0
// Try some Locales : zh_CN, ko_KR, ar_EG, ru_RU, ja_JP...
private val numberLocale = io.data2viz.format.Locales.zh_CN
private val dateLocale = io.data2viz.timeFormat.Locales.zh_CN
data class Stock(val date: Instant, val closingPrice: Double)
private val startDate: Long = parse("%x")("2/25/2013")?.toEpochMilliseconds() ?: 0
private fun parseStocks(row: List<String>) = Stock(Instant.fromEpochMilliseconds(startDate + (row[1].toInt() * 8.64e+7).toLong()) , row[2].toDouble())
fun main() {
val vc = newVizContainer().apply {
size = Size(width, height)
}
val request: Promise<Response> =
window.fetch("https://docs.google.com/spreadsheets/d/e/2PACX-1vSE8Potwoy4ZM54CgB5YpdS6LUBxP2rU2oa2S52tigcNJgY9nTKiXfK0m4qh1T2xOfm3Qq_COfqXYDF/pub?gid=218975680&single=true&output=csv")
request.then {
it.text().then {
val closingPrices = Dsv()
.parseRows(it)
.drop(1)
.map { parseStocks(it) }
vc.chart(closingPrices) {
title = "Google Inc的每日收盘价"
config.cursor.show = true
config.events.triggerMode = TriggerMode.Column
tooltip{
formatter = { "${dateLocale.format(dateLocale.locale_date)(domain.date)}, ${numberLocale.formatter("$,.2f")(domain.closingPrice)}" }
}
val day = temporal( { domain.date } ) {
formatter = { dateLocale.format("%B")(this) }
}
val closingPrice = quantitative( { domain.closingPrice } ) {
formatter = { numberLocale.formatter("$,.2f")(this!!) }
}
line(day, closingPrice) {
x {
tickCount = 10
labelRotation = 50.deg
}
}
}
}
}
}
