From 64d0ad4d5bc7b7bfa887d2b7bb4219c4e08c4c63 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Tue, 21 Feb 2023 17:34:31 -0800 Subject: [PATCH] Upgrade vega tooltips to use custom tooltip format (#368) (#434) * [FEATURE] Detector must have at least one alert set #288 Signed-off-by: Jovan Cvetkovic * [FEATURE] Upgrade Vega-tooltips plugin version #254 Signed-off-by: Jovan Cvetkovic * Upgrade vega tooltips to use custom tooltip format #368 Signed-off-by: Jovan Cvetkovic * [BUG] Create detector | Interval field can be empty #378 Signed-off-by: Jovan Cvetkovic * Adjust styling for Finding details flyout #369 Signed-off-by: Jovan Cvetkovic * unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * detector unit tests Signed-off-by: Jovan Cvetkovic * unit tests review Signed-off-by: Jovan Cvetkovic * unit tests review Signed-off-by: Jovan Cvetkovic * unit tests review Signed-off-by: Jovan Cvetkovic * unit tests review Signed-off-by: Jovan Cvetkovic * unit tests review Signed-off-by: Jovan Cvetkovic * unit tests review Signed-off-by: Jovan Cvetkovic * unit tests review Signed-off-by: Jovan Cvetkovic * unit tests review Signed-off-by: Jovan Cvetkovic * Feature/update vertical domain #372 Signed-off-by: Jovan Cvetkovic * Unit tests for public components #383 Signed-off-by: Jovan Cvetkovic * Unit tests for public components #383 Signed-off-by: Jovan Cvetkovic * Unit tests for public components #383 Signed-off-by: Jovan Cvetkovic * Unit tests for public components #383 Signed-off-by: Jovan Cvetkovic * Unit tests for public components #383 [BUG] Detector Edit | Custom rule are not selected on update rules #406 Signed-off-by: Jovan Cvetkovic * Unit tests for public components #383 [BUG] Detector Edit | Custom rule are not selected on update rules #406 Signed-off-by: Jovan Cvetkovic * PR code review Signed-off-by: Jovan Cvetkovic * PR code review Signed-off-by: Jovan Cvetkovic * PR code review Signed-off-by: Jovan Cvetkovic * PR code review Signed-off-by: Jovan Cvetkovic * PR code review Signed-off-by: Jovan Cvetkovic * PR code review Signed-off-by: Jovan Cvetkovic * PR code review Signed-off-by: Jovan Cvetkovic * [FEATURE] Create detector | Make data source multi-select field #419 Signed-off-by: Jovan Cvetkovic * unit tests fix Signed-off-by: Jovan Cvetkovic --------- Signed-off-by: Jovan Cvetkovic (cherry picked from commit 9a622086ff03a15a620f1a0918a6dcb70c987c47) Co-authored-by: Jovan Cvetkovic Signed-off-by: AWSHurneyt --- public/app.scss | 73 ++++++++++++++++++- .../utils/__snapshots__/helper.test.ts.snap | 2 +- public/pages/Overview/utils/helpers.ts | 2 +- public/utils/helpers.tsx | 55 +++++++++++++- 4 files changed, 126 insertions(+), 6 deletions(-) diff --git a/public/app.scss b/public/app.scss index 9c4535b3b..1682d852e 100644 --- a/public/app.scss +++ b/public/app.scss @@ -11,6 +11,9 @@ $euiColorGhost: #FFF !default; $euiColorInk: #000 !default; $euiTextColor: $euiColorDarkestShade !default; +@import "./components/Charts/ChartContainer.scss"; +@import "./pages/Overview/components/Widgets/WidgetContainer.scss"; + .selected-radio-panel { background-color: tintOrShade($euiColorPrimary, 90%, 70%); border-color: $euiColorPrimary; @@ -45,5 +48,71 @@ $euiTextColor: $euiColorDarkestShade !default; text-decoration: none; } -@import "./components/Charts/ChartContainer.scss"; -@import "./pages/Overview/components/Widgets/WidgetContainer.scss"; +.vg-tooltip { + background-color: #404040 !important; + border-radius: 4px !important; + color: #FFFFFF !important; + border: none !important; + padding: 0 !important; + font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important; + font-weight: 600 !important; + font-size: 12px !important; + + .vg-tooltip-innerContainer { + .vg-tooltip-header { + padding: 4px; + border-bottom: 1px solid gray; + + table tr:nth-child(odd) { + background-color: #535353 !important; + } + + td:nth-child(1) { + position: relative; + width: 6px; + padding: 0 0 0 2px !important; + + .vg-tooltip-color { + width: 4px; + position: absolute; + top: 2px; + height: calc(100% - 4px); + } + } + + td:nth-child(3) { + padding-right: 8px !important; + text-align: right; + } + } + + .vg-tooltip-body { + padding: 4px; + + table tr:nth-child(even) { + background-color: #535353 !important; + } + + td:nth-child(2) { + text-align: right; + } + } + + table { + width: 100%; + + tbody tr { + td { + height: 28px; + padding: 4px !important; + vertical-align: middle !important; + } + + td:nth-child(1) { + padding-right: 10px !important; + font-weight: 400 !important; + } + } + } + } +} diff --git a/public/pages/Overview/utils/__snapshots__/helper.test.ts.snap b/public/pages/Overview/utils/__snapshots__/helper.test.ts.snap index fbb4cf3fa..9a8514804 100644 --- a/public/pages/Overview/utils/__snapshots__/helper.test.ts.snap +++ b/public/pages/Overview/utils/__snapshots__/helper.test.ts.snap @@ -378,7 +378,7 @@ Object { "format": "%Y-%m-%d %H:%M", "grid": false, }, - "band": 0.5, + "bandPosition": 0.5, "field": "time", "scale": Object { "domain": undefined, diff --git a/public/pages/Overview/utils/helpers.ts b/public/pages/Overview/utils/helpers.ts index 497c8c1ff..393892acd 100644 --- a/public/pages/Overview/utils/helpers.ts +++ b/public/pages/Overview/utils/helpers.ts @@ -194,7 +194,7 @@ export function getOverviewVisualizationSpec( }, encoding: { x: getXAxis(dateOpts, { - band: 0.5, + bandPosition: 0.5, }), y: getYAxis('alert', 'Count'), tooltip: [getYAxis('alert', 'Alerts'), getTimeTooltip(dateOpts)], diff --git a/public/utils/helpers.tsx b/public/utils/helpers.tsx index 4d6bd6402..d076438af 100644 --- a/public/utils/helpers.tsx +++ b/public/utils/helpers.tsx @@ -29,6 +29,7 @@ import { NotificationsStart } from 'opensearch-dashboards/public'; import { OpenSearchService } from '../services'; import { ruleTypes } from '../pages/Rules/utils/constants'; import { Handler } from 'vega-tooltip'; +import _ from 'lodash'; export const parseStringsToOptions = (strings: string[]) => { return strings.map((str) => ({ id: str, label: str })); @@ -166,14 +167,64 @@ export function renderVisualization(spec: TopLevelSpec, containerId: string) { } function renderVegaSpec(spec: {}) { - const handler = new Handler(); + let chartColoredItems: any[] = []; + const handler = new Handler({ + formatTooltip: (value, sanitize) => { + let tooltipData = { ...value }; + let values = Object.entries(tooltipData); + if (!values.length) return ''; + const tooltipItem = chartColoredItems.filter((groupItem: any) => + _.isEqual(groupItem.tooltip, tooltipData) + ); + const color = tooltipItem.length + ? tooltipItem[0].fill || tooltipItem[0].stroke + : 'transparent'; + + const firstItem = values.pop() || ['', '']; + + let rowData = ''; + values.forEach((item: any) => { + rowData += ` + + ${sanitize(item[0])} + ${sanitize(item[1])} + + `; + }); + + return ` +
+
+ + + + + + +
${sanitize(firstItem[0])}${sanitize(firstItem[1])}
+
+
+ ${rowData}
+
+
+ `; + }, + }); view = new View(parse(spec, null, { expr: vegaExpressionInterpreter }), { renderer: 'canvas', // renderer (canvas or svg) container: `#${containerId}`, // parent DOM container hover: true, // enable hover processing }); view.tooltip(handler.call); - return view.runAsync(); + return view.runAsync().then((view: any) => { + const items = view.scenegraph().root.items[0].items || []; + const groups = items.filter( + (item: any) => item.name && item.name.match(/^(layer_).*(_marks)$/) + ); + for (let item of groups) { + chartColoredItems = chartColoredItems.concat(item.items); + } + }); } }