You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by jo...@apache.org on 2022/03/05 18:28:28 UTC
[isis] 02/02: ISIS-2957 clicking bubbles opens event url
This is an automated email from the ASF dual-hosted git repository.
joergrade pushed a commit to branch ISIS-2957
in repository https://gitbox.apache.org/repos/asf/isis.git
commit 7824acd7440c8d4eaf3820ab474a5111a67efbb8
Author: Jörg Rade <jo...@kuehne-nagel.com>
AuthorDate: Sat Mar 5 19:28:01 2022 +0100
ISIS-2957 clicking bubbles opens event url
---
incubator/clients/kroviz/build.gradle.kts | 1 -
.../client/kroviz/ui/panel/EventBubbleChart.kt | 124 +++++++++++++--------
.../isis/client/kroviz/ui/panel/EventChart.kt | 81 --------------
3 files changed, 80 insertions(+), 126 deletions(-)
diff --git a/incubator/clients/kroviz/build.gradle.kts b/incubator/clients/kroviz/build.gradle.kts
index e163691..4aa288c 100644
--- a/incubator/clients/kroviz/build.gradle.kts
+++ b/incubator/clients/kroviz/build.gradle.kts
@@ -100,7 +100,6 @@ kotlin {
implementation("io.kvision:kvision-rest:$kvisionVersion")
implementation("io.kvision:kvision-moment:$kvisionVersion")
implementation("io.kvision:kvision-maps:$kvisionVersion")
- implementation(npm("chartjs-plugin-datalabels", "2.0.0", false))
implementation(npm("xmltojson", "1.3.5", false))
implementation(npm("flatted", "3.2.2", false))
implementation(npm("diff", "5.0.0", false))
diff --git a/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventBubbleChart.kt b/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventBubbleChart.kt
index 77f2d75..1bb8d0b 100644
--- a/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventBubbleChart.kt
+++ b/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventBubbleChart.kt
@@ -32,10 +32,11 @@ import kotlin.math.pow
class EventBubbleChart() : SimplePanel() {
private val model = SessionManager.getEventStore()
private val logStart = model.getLogStartMilliSeconds()
+ private lateinit var chart: Chart
init {
width = CssSize(90, UNIT.vw)
- buildChart()
+ chart = buildChart()
}
private fun buildChart(): Chart {
@@ -57,13 +58,38 @@ class EventBubbleChart() : SimplePanel() {
// https://stackoverflow.com/questions/45249779/chart-js-bubble-chart-changing-dataset-labels
private fun buildChartOptions(dataSetsList: List<DataSets>): ChartOptions {
val chartOptions = ChartOptions(
- plugins = PluginsOptions(tooltip = TooltipOptions(callbacks = toolTipCallback())),
- hover = InteractionOptions(),
+ plugins = PluginsOptions(
+ title = TitleOptions(
+ text = listOf<String>("Request Duration over Time by Request Density and Response Size"),
+ display = true
+ ),
+ tooltip = TooltipOptions(callbacks = toolTipCallback())
+ ),
+ onClick = js(
+ "function(e) {"
+ + "var element = e.chart.getElementsAtEventForMode(e, 'nearest', {intersect: true}, true);"
+ + "if (element.length > 0) {"
+ + "var i = element[0].index;"
+ + "var ccc = e.chart.config._config;"
+ + "var data = ccc.data;"
+ + "var label = data.labels[i];"
+ + "var LF = '\\x0A';"
+ + "var sa = label.split(LF);"
+ + "var link = sa[0];"
+ + "console.log(link);"
+ + "window.open(link);"
+ + "}"
+ + "}"
+ ),
showLine = true,
scales = mapOf(
- "x" to ChartScales(title = ScaleTitleOptions(text = "Time since Connect (ms)", display = true)),
+ "x" to ChartScales(
+ title = ScaleTitleOptions(
+ text = "Time since Connect(ms)", display = true
+ )
+ ),
"y" to ChartScales(
- title = ScaleTitleOptions(text = "duration (ms)", display = true),
+ title = ScaleTitleOptions(text = "duration in ms (log)", display = true),
type = ScalesType.LOGARITHMIC
)
)
@@ -76,24 +102,45 @@ class EventBubbleChart() : SimplePanel() {
// I would have appreciated a real API.
private fun toolTipCallback(): TooltipCallback {
return TooltipCallback(
- title = js(
- "function(context) {" +
- "var ctx = context[0];" +
- "var chart = ctx.chart;" +
- "var ccc = chart.config._config;" +
- "var data = ccc.data;" +
- "var i = ctx.dataIndex;" +
- "var label = data.labels[i];" +
- "return label;" +
- "}"
+ footer = js(
+ "function(context) {"
+ + "var ctx = context[0];"
+ + "var chart = ctx.chart;"
+ + "var ccc = chart.config._config;"
+ + "var data = ccc.data;"
+ + "var i = ctx.dataIndex;"
+ + "return data.labels[i];"
+ + "}"
)
)
}
+ // https://stackoverflow.com/questions/39411802/how-to-catch-an-onclick-event-on-bubble-chart
+ private val clickHandler = js(
+ "function(e) {"
+ + "console.log(e);"
+ + "console.log(e.target);"
+ + "var element = e.target.getElementAtEvent(e);"
+ + "if (element.length > 0) {"
+ + "console.log(element[0]);"
+ + "var datasetLabel = this.config.data.datasets[element[0]._datasetIndex].label;"
+ + "console.log(datasetLabel);"
+ + "}"
+ + "}"
+ )
+
+
+ private fun LogEntry.toLabel(index: Int): String {
+ return this.title +
+ "\nseq.no.: $index" +
+ "\nparallel runs: ${this.runningAtStart}" +
+ "\nrsp.len.: ${this.responseLength}" +
+ "\ntype: ${this.type}"
+ }
+
private fun buildDataSets(): DataSets {
return DataSets(
backgroundColor = buildBgColorList(),
- label = "Prefix", //data is only prefixed with label - not replaced
data = buildData()
)
}
@@ -131,23 +178,15 @@ class EventBubbleChart() : SimplePanel() {
}
private fun LogEntry.calculateBubbleColor(): Color {
- val violet = Color.rgba(0x80, 0x64, 0xA2, 0x80)
- val redViolet = Color.rgba(0xA0, 0x5A, 0x78, 0x80)
- val red = Color.rgba(0xC0, 0x50, 0x4D, 0x80)
- val yellow = Color.rgba(0xF7, 0x96, 0x46, 0x80)
- val green = Color.rgba(0x9B, 0xBB, 0x59, 0x80)
- val lightBlue = Color.rgba(0x4B, 0xAC, 0xC6, 0x80)
- val darkBlue = Color.rgba(0x4F, 0x81, 0xBD, 0x80)
-
val i = runningAtStart
return when {
- (i >= 0) && (i <= 4) -> lightBlue
- (i > 4) && (i <= 8) -> darkBlue
- (i > 8) && (i <= 16) -> green
- (i > 16) && (i <= 32) -> yellow
- (i > 32) && (i <= 64) -> red
- (i > 64) && (i <= 128) -> redViolet
- else -> violet
+ (i >= 0) && (i <= 4) -> EventBubbleChart.LIGHT_BLUE
+ (i > 4) && (i <= 8) -> EventBubbleChart.DARK_BLUE
+ (i > 8) && (i <= 16) -> EventBubbleChart.GREEN
+ (i > 16) && (i <= 32) -> EventBubbleChart.YELLOW
+ (i > 32) && (i <= 64) -> EventBubbleChart.RED
+ (i > 64) && (i <= 128) -> EventBubbleChart.RED_VIOLET
+ else -> EventBubbleChart.VIOLET
}
}
@@ -162,22 +201,9 @@ class EventBubbleChart() : SimplePanel() {
val l = it.toLabel(i)
labelList.add(l)
}
- console.log("[EBC.buildLabels]")
- console.log(labelList)
return labelList
}
- private fun LogEntry.toLabel(index: Int): String {
- val relativeStartTime = ((this.createdAt.getTime() - logStart) / 1000).toString()
- val sec_1 = relativeStartTime.substring(0, relativeStartTime.length - 2)
- return index.toString() + "\n" +
- sec_1 + "\n" +
- this.title + "\n" +
- "start: " + this.createdAt.toISOString() + "\n" +
- "rsp.len: " + this.responseLength + "\n" +
- "parallel runs: " + this.runningAtStart
- }
-
private fun buildLegendLabelOptions(): LegendLabelOptions {
val legend = LegendLabelOptions()
legend.generateLabels?.invoke() {
@@ -190,4 +216,14 @@ class EventBubbleChart() : SimplePanel() {
return mutableListOf<LegendItem>()
}
+ companion object {
+ val VIOLET = Color.rgba(0x80, 0x64, 0xA2, 0x80)
+ val RED_VIOLET = Color.rgba(0xA0, 0x5A, 0x78, 0x80)
+ val RED = Color.rgba(0xC0, 0x50, 0x4D, 0x80)
+ val YELLOW = Color.rgba(0xF7, 0x96, 0x46, 0x80)
+ val GREEN = Color.rgba(0x9B, 0xBB, 0x59, 0x80)
+ val LIGHT_BLUE = Color.rgba(0x4B, 0xAC, 0xC6, 0x80)
+ val DARK_BLUE = Color.rgba(0x4F, 0x81, 0xBD, 0x80)
+ }
+
}
diff --git a/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventChart.kt b/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventChart.kt
deleted file mode 100644
index bb05948..0000000
--- a/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventChart.kt
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-package org.apache.isis.client.kroviz.ui.panel
-
-import io.kvision.chart.*
-import io.kvision.panel.SimplePanel
-import io.kvision.utils.obj
-import io.kvision.utils.px
-import io.kvision.utils.pc
-import org.apache.isis.client.kroviz.ui.chart.ChartModel
-
-//IMPROVE https://github.com/datavisyn/chartjs-chart-box-and-violin-plot
-class EventChart(model: ChartModel) : SimplePanel() {
-
- private val font = "'Open Sans Bold', sans-serif"
-
- private val yAxes = listOf(obj {
- scaleLabel = { ScaleTitleOptions(display = true, labelString = "duration (ms)", fontFamily = font) }
- gridLines = { GridLineOptions(visible = true) }
- ticks = obj {
- fontFamily = font
- fontSize = 11.px
- }
- })
-
- val tickFormatter:String = "function(tick) {return tick.split('\\n')[1]}"
-
- private val xAxes = listOf(obj {
- scaleLabel = { ScaleTitleOptions(display = true, labelString = "start offset (sec)", fontFamily = font) }
- gridLines = { GridLineOptions(visible = true) }
- ticks = obj {
- beginAtZero = false
- fontFamily = font
- fontSize = 11.px
- //WHAT A HACK
-// callback = js(tickFormatter)
- }
- })
-/*
- private val options = ChartOptions(
- tooltips = TooltipOptions(enabled = true),
- hover = HoverOptions(animationDuration = 0),
- legend = LegendOptions(display = true),
- scales = ChartScales(
- yAxes = yAxes,
- xAxes = xAxes),
- showLines = true,
- title = TitleOptions(display = true))
-*/
- init {
- this.marginTop = 10.px
- this.width = 100.pc
- chart(
- configuration = Configuration(
- type = ChartType.BAR,
- dataSets = model.datasetList,
- labels = model.labelList,
-// options = options
- ),
- chartHeight = 1000,
- chartWidth = 3000
- )
- }
-
-}