The Floating Color Bar tool allows for further customization of color bar visualization. The tool generates a floating window representation of a color bar, allowing the user to move a smaller version of the color bar into the center model space to compare representational data. The FloatingColorBar tool also emits a number of events.
The Floating Color Bar tool is located in the AnnotatedWidget, the tool is turned off by default. To use this tool, you need the widget to derived from AnnotatedWidget, you also need to add a ColorBar.
# Cross Plot
For this example, the Floating Color Bar tool is demonstrated in tandem with the CrossPlot widget, which is derived from AnnotatedWidget.
import { CirclePainter } from "@int/geotoolkit/scene/shapes/painters/CirclePainter.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { DiscreteGradientColorProvider } from "@int/geotoolkit/util/DiscreteGradientColorProvider.ts";
import { AnnotationLocation } from "@int/geotoolkit/layout/AnnotationLocation.ts";
import { CrossPlot } from "@int/geotoolkit/widgets/CrossPlot.ts";
import { ToolTipTool } from "@int/geotoolkit/controls/tools/ToolTipTool.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import Data from "/src/assets/data/crossplotdata.json?import";
const style = "margin-right: 5px; height: 10px; width: 10px; background-color: transparent; border-radius: 50%; display: inline-block;";
function createToolTipTool(widget, names, units) {
widget.connectTool(new ToolTipTool({
"callback": (pt) => {
const rect = new Rect(pt.x - 5, pt.y - 5, pt.x + 5, pt.y + 5);
const outRect = widget.getModel().getSceneTransform().inverseTransformRect(rect);
const indices = widget.getIndicesAt(outRect);
const selectedIndex = indices.length > 0 ? [indices[indices.length - 1]] : [];
widget.highlightIndices(selectedIndex, true);
if (selectedIndex.length > 0) {
const index = selectedIndex[0];
const data = widget.getData();
const z = data["z"]["data"][index];
let xAxisName = `<span style="tooltip-title">` + names[0] + " (" + units[0] + "): </span>";
let yAxisName = '<span class="tooltip-title">' + names[1] + " (" + units[1] + "): </span>";
let zAxisName = '<span class="tooltip-title">' + names[2] + " (" + units[2] + "): </span>";
const cp = widget.getColorProvider();
const color = cp.getColor(+z.toFixed(0)).toRgbaString();
xAxisName = `<span style="${style}"></span>` + xAxisName;
yAxisName = `<span style="${style} background-color: ${color}"></span>` + yAxisName;
zAxisName = `<span style="${style}"></span>` + zAxisName;
return xAxisName + data["x"]["data"][index].toFixed(2) + "<br>" + yAxisName + data["y"]["data"][index].toFixed(2) + "<br>" + zAxisName + z.toFixed(2);
}
return "";
}
}));
}
function createScene(canvas) {
const data = Data.data;
const widget = new CrossPlot({
"tools": {
"horizontalscroll": {
"visible": false
},
"verticalscroll": {
"visible": false
}
},
"x": {
"annotationsize": 40
},
"y": {
"annotationsize": 50
},
"z": {
"annotationsize": 20
}
});
createToolTipTool(widget, ["X", "Y", "Z"], ["value", "value", "color"]);
widget.removeTitle(AnnotationLocation.North);
widget.removeTitle(AnnotationLocation.West);
widget.removeTitle(AnnotationLocation.South);
widget.setData({
"x": {
"data": data[0].splice(0, 1e3),
"unit": "ft",
"label": {
"text": "X axis"
},
"neatlimits": true
},
"y": {
"data": data[1].splice(0, 1e3),
"unit": "ft",
"label": {
"text": "Y axis"
},
"neatlimits": true
},
"z": {
"data": data[2].splice(0, 1e3),
"min": 0,
"max": 200,
"label": {
"text": "Z color"
},
"legendvisible": true,
"annotationsize": 85
},
"colorprovider": new DiscreteGradientColorProvider({ "bins": 255 }).setScale(
KnownScales.Orange,
0,
10
),
"marker": {
"size": 8,
"painter": CirclePainter
}
});
widget.setAnnotationSize({
"north": 70,
"west": 130,
"south": 130
});
widget.getToolByName("colorbar").setEnabled(true);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Bubble Chart
For this example, the Floating Color Bar tool is demonstrated in tandem with the BubbleChart widget, which is derived from AnnotatedWidget.
.cg-tooltip-holder {
position: relative;
}
.cg-tooltip {
position: absolute;
display: block;
padding: 2px 12px 3px 7px;
overflow: visible !important;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
background: white !important;
opacity: 0.9;
color: #333333;
border: solid 1px gray;
border-radius: 5px;
text-align: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
margin: 0 !important;
z-index: 10000;
max-width: 400px;
text-wrap: normal !important;
white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
position: absolute;
display: block;
overflow: visible !important;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 3px 7px;
background: #f7f7f7;
color: #333333;
border: 1px solid #938e8e;
opacity: 0.8;
text-align: left;
box-shadow: 3px 3px 10px #888;
margin: 0 !important;
z-index: 10000;
max-width: 400px;
text-wrap: normal !important;
white-space: normal !important;
user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.cg-tooltip-container {
border-radius: 0;
}
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 0;
top: 50%;
border: 5px solid transparent;
border-left: 0;
border-right: 5px solid #938e8e;
transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 0;
top: 50%;
border: 4px solid transparent;
border-left: 0;
border-right: 4px solid #f7f7f7;
transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
top: 0;
border: 5px solid transparent;
border-top: 0;
border-bottom: 5px solid #938e8e;
transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
top: 0;
border: 4px solid transparent;
border-top: 0;
border-bottom: 4px solid #f7f7f7;
transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
content: '';
position: absolute;
display: block;
width: 0px;
right: 0;
top: 50%;
border: 5px solid transparent;
border-right: 0;
border-left: 5px solid #938e8e;
transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
content: '';
position: absolute;
display: block;
width: 0px;
right: 0;
top: 50%;
border: 4px solid transparent;
border-right: 0;
border-left: 4px solid #f7f7f7;
transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
bottom: 0px;
border: 5px solid transparent;
border-bottom: 0;
border-top: 5px solid #938e8e;
transform: translate(-50%, 100%);
z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
bottom: 0;
border: 4px solid transparent;
border-bottom: 0;
border-top: 4px solid #f7f7f7;
transform: translate(-50%, 100%);
z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
text-transform: none;
}
.cg-tooltip-item-name {
text-transform: capitalize;
white-space: nowrap;
vertical-align: middle;
font-size: 13px;
}
.cg-tooltip-row {
display: flex;
flex-direction: row;
align-items: center;
white-space: pre-wrap;
font-size: 12px;
line-height: 100%;
margin: 1px 0;
}
.cg-tooltip-title {
font-size: 13px;
height: 14px;
text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
margin-right: 0 !important;
}
.cg-tooltip-title-name {
vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
display: inline-flex;
min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
margin-right: 3px;
background-color: transparent;
display: block;
}
.cg-tooltip-symbol > img {
display: block;
}
.cg-tooltip-list-cell {
display: inline-flex;
}
.cg-tooltip-list-symbol {
display: block;
margin-right: 3px;
width: 6px;
height: 6px;
vertical-align: middle;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
border-radius: 4px;
margin-right: 5px;
height: 8px;
width: 8px;
display: inline-block;
}
.cg-tooltip-title-legacy {
font-weight: 900;
}
/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
height: 10px;
width: 10px;
display: inline-block;
transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
height: 10px;
width: 10px;
display: inline-block;
transform: rotate(45deg);
border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 0px;
border: 1px solid rgba(0,0,0,.4);
}