updating wrapper to let tooltip override

robertfmurdock · Dec 14, 2024 · 61f9215 · 61f9215
1 parent ff70d05
commit 61f9215
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/...nts/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/external/nivo/External.kt b/...nts/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<RechartsTooltipPayload>?
+}
+
+external interface RechartsTooltipPayload {
+    var name: Any?
+    var value: Any?
+}
+
 sealed external interface NivoChartMargin {
     var top: Number
     var right: Number

diff --git a/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/stats/CouplingResponsiveLine.kt b/...c/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<NivoLineData>
     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
@@ -84,7 +84,7 @@ export const CouplingResponsiveLine = (props) => {
                 />
                 <Tooltip
                     labelFormatter={(value) => d3TimeFormat(format)(value)}
-                    content={props.tooltip ? (args) => props.tooltip(args.point.data) : undefined}
+                    content={props.tooltip ? (args) => props.tooltip(args) : undefined}
                 />
                 <Legend
                     width={'90%'}

diff --git a/...t/src/jsMain/kotlin/com/zegreatrob/coupling/client/contribution/PairFrequencyLineGraph.kt b/...t/src/jsMain/kotlin/com/zegreatrob/coupling/client/contribution/PairFrequencyLineGraph.kt
@@ -43,15 +43,17 @@ val PairFrequencyLineGraph by nfc<PairFrequencyLineGraphProps> { (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
@@ -34,7 +34,10 @@
     <% }) %>
 
     <link href="https://cdn.jsdelivr.net/npm/graphiql/graphiql.min.css" rel="stylesheet" />
-    <script crossorigin defer src="https://esm.run/graphiql" type="module"></script>
+    <script type="module">
+        import GraphiQL from "https://esm.run/graphiql"
+        window.GraphiQL = GraphiQL || {};
+    </script>
 
     <%= htmlWebpackPlugin.tags.headTags %>
 </head>