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 } } } } } }