Skip to content

Commit

Permalink
Upgrade vega tooltips to use custom tooltip format (opensearch-projec…
Browse files Browse the repository at this point in the history 
…t#368)

* [FEATURE] Detector must have at least one alert set opensearch-project#288

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [FEATURE] Upgrade Vega-tooltips plugin version opensearch-project#254

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Upgrade vega tooltips to use custom tooltip format opensearch-project#368

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [BUG] Create detector | Interval field can be empty opensearch-project#378

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Adjust styling for Finding details flyout opensearch-project#369

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* detector unit tests

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Feature/update vertical domain #372

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Unit tests for public components opensearch-project#383

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Unit tests for public components opensearch-project#383

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Unit tests for public components opensearch-project#383

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Unit tests for public components opensearch-project#383

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Unit tests for public components opensearch-project#383
[BUG] Detector Edit | Custom rule are not selected on update rules opensearch-project#406

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Unit tests for public components opensearch-project#383
[BUG] Detector Edit | Custom rule are not selected on update rules opensearch-project#406

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* PR code review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* PR code review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* PR code review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* PR code review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* PR code review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* PR code review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* PR code review

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [FEATURE] Create detector | Make data source multi-select field opensearch-project#419

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* unit tests fix

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

---------

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
  • Loading branch information
@jovancacvetkovic
jovancacvetkovic committed Feb 22, 2023
1 parent 74fb409 commit 9a62208
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 6 deletions.
73 changes: 71 additions & 2 deletions public/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
}
}
}
2 changes: 1 addition & 1 deletion public/pages/Overview/utils/__snapshots__/helper.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,7 @@ Object {
"format": "%Y-%m-%d %H:%M",
"grid": false,
},
"band": 0.5,
"bandPosition": 0.5,
"field": "time",
"scale": Object {
"domain": undefined,
Expand Down
2 changes: 1 addition & 1 deletion public/pages/Overview/utils/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export function getOverviewVisualizationSpec(
},
encoding: {
x: getXAxis(dateOpts, {
band: 0.5,
bandPosition: 0.5,
}),
y: getYAxis('alert', 'Count'),
tooltip: [getYAxis('alert', 'Alerts'), getTimeTooltip(dateOpts)],
Expand Down
55 changes: 53 additions & 2 deletions public/utils/helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }));
Expand Down Expand Up @@ -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 += `
<tr>
<td>${sanitize(item[0])}</td>
<td>${sanitize(item[1])}</td>
</tr>
`;
});

return `
<div class="vg-tooltip-innerContainer">
<div class="vg-tooltip-header">
<table>
<tr>
<td><div class="vg-tooltip-color" style="background-color: ${color}"></div></td>
<td>${sanitize(firstItem[0])}</td>
<td>${sanitize(firstItem[1])}</td>
</tr>
</table>
</div>
<div class="vg-tooltip-body">
<table>${rowData}</table>
</div>
</div>
`;
},
});
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);
}
});
}
}

Expand Down

0 comments on commit 9a62208

Please sign in to comment.