diff --git a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/external/nivo/External.kt b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/external/nivo/External.kt index 98daedfdd..1934fd8a0 100644 --- a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/external/nivo/External.kt +++ b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/external/nivo/External.kt @@ -1,7 +1,9 @@ package com.zegreatrob.coupling.client.components.external.nivo +import js.array.ReadonlyArray import react.ElementType import react.Props +import react.ReactNode sealed external interface NivoLineData { var id: String @@ -23,6 +25,17 @@ sealed external interface NinoLinePointDecorated { var context: Any? } +sealed external interface RechartsTooltipArgs { + var label: Any? + var labelFormatter: (label: Any?) -> ReactNode + var payload: ReadonlyArray? +} + +external interface RechartsTooltipPayload { + var name: Any? + var value: Any? +} + sealed external interface NivoChartMargin { var top: Number var right: Number diff --git a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/CouplingResponsiveLine.kt b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/CouplingResponsiveLine.kt index acee46410..273512dc4 100644 --- a/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/CouplingResponsiveLine.kt +++ b/client/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/CouplingResponsiveLine.kt @@ -1,7 +1,7 @@ package com.zegreatrob.coupling.client.components.stats -import com.zegreatrob.coupling.client.components.external.nivo.NinoLinePointDecorated import com.zegreatrob.coupling.client.components.external.nivo.NivoLineData +import com.zegreatrob.coupling.client.components.external.nivo.RechartsTooltipArgs import com.zegreatrob.coupling.client.components.require import react.FC import react.Props @@ -10,7 +10,7 @@ import react.ReactNode external interface CouplingResponsiveLineProps : Props { var data: Array var legend: String - var tooltip: (NinoLinePointDecorated) -> ReactNode + var tooltip: (RechartsTooltipArgs) -> ReactNode var xMin: kotlin.js.Date var xMax: kotlin.js.Date } diff --git a/client/src/jsMain/javascript/com/zegreatrob/coupling/client/CouplingResponsiveLine.jsx b/client/src/jsMain/javascript/com/zegreatrob/coupling/client/CouplingResponsiveLine.jsx index b119078ac..d16eff16e 100644 --- a/client/src/jsMain/javascript/com/zegreatrob/coupling/client/CouplingResponsiveLine.jsx +++ b/client/src/jsMain/javascript/com/zegreatrob/coupling/client/CouplingResponsiveLine.jsx @@ -84,7 +84,7 @@ export const CouplingResponsiveLine = (props) => { /> d3TimeFormat(format)(value)} - content={props.tooltip ? (args) => props.tooltip(args.point.data) : undefined} + content={props.tooltip ? (args) => props.tooltip(args) : undefined} /> { (data, window) } this.xMax = Clock.System.now().toJSDate() - tooltip = { point -> + tooltip = { args -> div.create { css { backgroundColor = Color("rgb(0 0 0 / 14%)") padding = 10.px borderRadius = 20.px } - div { +"${point.xFormatted} - ${point.yFormatted}" } - div { +"${point.context}" } + args.payload?.forEach { payload -> + div { +"${payload.name} - ${payload.value}" } + } + div { +"${args.label}" } } } } diff --git a/client/src/jsMain/resources/template.html b/client/src/jsMain/resources/template.html index 749aaaad7..9bf67f44c 100644 --- a/client/src/jsMain/resources/template.html +++ b/client/src/jsMain/resources/template.html @@ -34,7 +34,10 @@ <% }) %> - + <%= htmlWebpackPlugin.tags.headTags %>