In the WellLogJS introduction, Tracks are defined as containers for LogVisuals, which are graphical representations of log data, and are generally paired with depth and time Tracks, axes, grids, and tick generators .
In this WellLog – Tracks tutorial, different types of Tracks are created. Tracks can be linear or logarithmic based on their grid and corresponding tick generator. Tracks can also use custom grid and tick generators. A combination of Tracks can be displayed within Track Containers.
# Track with Linear Grid
Tracks are created in the WellLogJS Toolkit by defining a LogTrack object and setting its bounds to the desired dimensions, then creating evenly-spaced linear grids in the Track.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { ViewCache } from "@int/geotoolkit/scene/ViewCache.ts";
import { TrackContainer } from "@int/geotoolkit/welllog/TrackContainer.ts";
import { LogTrack } from "@int/geotoolkit/welllog/LogTrack.ts";
import { Grid } from "@int/geotoolkit/axis/Grid.ts";
import { AdaptiveTickGenerator } from "@int/geotoolkit/axis/AdaptiveTickGenerator.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
function createScene(canvas) {
const minDepth = 100, maxDepth = 500;
const track = new LogTrack().setBounds(new Rect(20, minDepth, 120, maxDepth)).setDepthLimits(minDepth, maxDepth).enableClipping(true);
const grid = new Grid(
new AdaptiveTickGenerator().setVisibleTickGrade("minor", true),
new AdaptiveTickGenerator().setVisibleTickGrade("minor", true)
);
track.addChild(grid);
const trackContainer = new TrackContainer({
"children": [track]
}).setCache(new ViewCache(256, 256)).setBounds(new Rect(0, 0, 270, 350)).setDepthLimits(minDepth, maxDepth);
return new Plot({
"canvaselement": canvas,
"root": trackContainer,
"autorootbounds": false
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Track Grids
Track grids can be linear, logarithmic or tangential. The number of grid decades can be passed into the constructor or it can be set later.
For logarithmic grids, the min value is hard coded to 0.1 and the max value is hard coded to 10. These values can be set to custom values in the grid section of each track configuration. The decade count that is passed in the configuration is always ignored. Instead is computed automatically from the min and max values and is approximately equal to ceil(log10(max/min)).
Tangential grids values are distributed from 0 to 1 and can be described by the following formula: y = 1 − tg( π/4 − x ⋅ π/360). By default, each tick counts the next 10° along the x-axis.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget({
"header": {
"visible": false
},
"indent": 2
});
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack);
widget.addTrack(TrackType.LogTrack);
widget.addTrack(TrackType.TangentialTrack);
widget.setDepthLimits(0, 100).scale(4, 1);
widget.setHeaderHeight("auto");
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Custom Grids
A Track’s can use own grid visual to specify any kind of tick generators and model limits which determine amount of ticks. Border properties can be manipulated to use custom colors, linestyles and fillstyles as well.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { LogGrid } from "@int/geotoolkit/welllog/LogGrid.ts";
import { AdaptiveLogTickGenerator } from "@int/geotoolkit/axis/AdaptiveLogTickGenerator.ts";
import { Range } from "@int/geotoolkit/util/Range.ts";
import { AdaptiveTickGenerator } from "@int/geotoolkit/axis/AdaptiveTickGenerator.ts";
import { AdaptiveTangentialTickGenerator } from "@int/geotoolkit/axis/AdaptiveTangentialTickGenerator.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget({
"header": {
"visible": false
},
"indent": 2
}).setDepthLimits(0, 100);
const hTickStyles = {
"major": {
"color": KnownColors.Blue,
"pixelsnapmode": true
},
"minor": {
"color": KnownColors.LightOrange,
"pixelsnapmode": true
}
};
const vTickStyles = {
"major": {
"color": KnownColors.Blue,
"pixelsnapmode": true
},
"minor": {
"color": KnownColors.LightGray,
"pixelsnapmode": true
}
};
const backgroundStyle = "rgba(255, 240, 170, 0.1)";
const borderStyle = {
"color": KnownColors.Gray,
"width": 1,
"pixelsnapmode": true
};
const indexTrack = widget.addTrack(TrackType.IndexTrack).setLineStyle(borderStyle).setFillStyle(backgroundStyle);
widget.setTrackOptions(indexTrack, {
axis: {
ticks: {
major: {
style: {
color: KnownColors.Blue
}
}
}
}
});
widget.addTrack(TrackType.AnnotationTrack).setWidth(200).setLineStyle(borderStyle).setFillStyle(backgroundStyle).addChild(
new LogGrid({
"vtg": new AdaptiveTickGenerator().setVisibleTickGrade("MINOR", true),
"htg": new AdaptiveTickGenerator().setVisibleTickGrade("MINOR", true),
"vstyles": vTickStyles,
"hstyles": hTickStyles
}).setValueRange(new Range(50, 900))
);
widget.addTrack(TrackType.AnnotationTrack).setWidth(200).setLineStyle(borderStyle).setFillStyle(backgroundStyle).addChild(
new LogGrid({
"vtg": new AdaptiveLogTickGenerator().setVisibleTickGrade("MINOR", true).setVisibleTickGrade("EDGE", true),
"htg": new AdaptiveTickGenerator().setVisibleTickGrade("MINOR", true),
"vstyles": vTickStyles,
"hstyles": hTickStyles
}).setValueRange(new Range(50, 900))
);
widget.addTrack(TrackType.AnnotationTrack).setWidth(200).setLineStyle(borderStyle).setFillStyle(backgroundStyle).addChild(
new LogGrid({
"vtg": new AdaptiveTangentialTickGenerator().setVisibleTickGrade("MINOR", true),
"htg": new AdaptiveTickGenerator().setVisibleTickGrade("MINOR", true),
"vstyles": vTickStyles,
"hstyles": hTickStyles
}).setValueRange(new Range(50, 900))
);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.fitToHeight();
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Track Modifications
A Track’s grid and border properties can be manipulated to use custom colors, linestyles and fillstyles and the number of lines in the grid can be modified.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { ViewCache } from "@int/geotoolkit/scene/ViewCache.ts";
import { TrackContainer } from "@int/geotoolkit/welllog/TrackContainer.ts";
import { Grid } from "@int/geotoolkit/axis/Grid.ts";
import { AdaptiveTickGenerator } from "@int/geotoolkit/axis/AdaptiveTickGenerator.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { LogTrack } from "@int/geotoolkit/welllog/LogTrack.ts";
function createScene(canvas) {
const minDepth = 100, maxDepth = 500;
const track = new LogTrack().setBounds(new Rect(20, minDepth, 120, maxDepth)).setDepthLimits(minDepth, maxDepth).enableClipping(true);
const grid = new Grid(
new AdaptiveTickGenerator().setVisibleTickGrade("minor", true).setTickStyle("major", {
color: "#7cb342",
width: 2
}).setTickStyle("minor", {
color: "#2196f3",
width: 2
}),
new AdaptiveTickGenerator().setVisibleTickGrade("minor", true).setTickStyle("minor", {
color: "#ef6c00",
width: 2
})
);
track.setLineStyle({
color: "#fdd835",
width: 3
}).setFillStyle("#eeeeee").addChild(grid);
const trackContainer = new TrackContainer({
"children": [track]
}).setCache(new ViewCache(256, 256)).setBounds(new Rect(0, 0, 270, 350)).setDepthLimits(minDepth, maxDepth);
return new Plot({
"canvaselement": canvas,
"root": trackContainer,
"autorootbounds": false
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Depth Index Track
WellLog depth index Tracks can be created to show scale. Depth values will be determined by the minDepth and maxDepth passed into setDepthLimits. Also, an axis is added to depth index tracks instead of a grid.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { ViewCache } from "@int/geotoolkit/scene/ViewCache.ts";
import { TrackContainer } from "@int/geotoolkit/welllog/TrackContainer.ts";
import { LogAxis } from "@int/geotoolkit/welllog/LogAxis.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { LogTrack } from "@int/geotoolkit/welllog/LogTrack.ts";
function createScene(canvas) {
const minDepth = 100, maxDepth = 500;
const track = new LogTrack().setBounds(new Rect(20, minDepth, 55, maxDepth)).setDepthLimits(minDepth, maxDepth).enableClipping(true);
const axis = new LogAxis().setName("Depth Index");
track.addChild(axis);
const trackContainer = new TrackContainer({
"children": [track]
}).setCache(new ViewCache(256, 256)).setBounds(new Rect(0, 0, 270, 350)).setDepthLimits(minDepth, maxDepth);
return new Plot({
"canvaselement": canvas,
"root": trackContainer,
"autorootbounds": false
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Time Index Track
Time can also be shown on an index Track. Displaying time requires setting up a LogDrillingSectionContainer object, adding LogDrillingSections to it, and attaching the container to the axis' tick generator.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackContainer } from "@int/geotoolkit/welllog/TrackContainer.ts";
import { ViewCache } from "@int/geotoolkit/scene/ViewCache.ts";
import { LogTrack } from "@int/geotoolkit/welllog/LogTrack.ts";
import { LogDrillingSection } from "@int/geotoolkit/welllog/data/LogDrillingSection.ts";
import { LogDrillingSectionContainer } from "@int/geotoolkit/welllog/data/LogDrillingSectionContainer.ts";
import { DateTimeTickGenerator } from "@int/geotoolkit/welllog/axis/DateTimeTickGenerator.ts";
import { LogAxis } from "@int/geotoolkit/welllog/LogAxis.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
function loadDateTrajectory() {
const dateTimeTrajectory = new LogDrillingSectionContainer();
const data = {
"depthfrom": 100,
"depthto": 500,
"valuefrom": { "date": new Date("July 7, 2011 05:00 AM") },
"valueto": { "date": new Date("July 7, 2011 06:00 AM") },
"hint": [{
"depth": 200,
"time": new Date("July 7, 2011 05:15 AM")
}, {
"depth": 300,
"time": new Date("July 7, 2011 05:30 AM")
}, {
"depth": 400,
"time": new Date("July 7, 2011 05:45 AM")
}]
};
dateTimeTrajectory.addSection(new LogDrillingSection(data));
return dateTimeTrajectory;
}
function createScene(canvas) {
const minDepth = 100, maxDepth = 500;
const track = new LogTrack().setBounds(new Rect(20, minDepth, 55, maxDepth)).setDepthLimits(minDepth, maxDepth).enableClipping(true);
const axis = new LogAxis().setName("Time Index").setTickGenerator(new DateTimeTickGenerator(loadDateTrajectory()));
track.addChild(axis);
const trackContainer = new TrackContainer({
"children": [track]
}).setCache(new ViewCache(256, 256)).setBounds(new Rect(0, 0, 270, 500)).setDepthLimits(minDepth, maxDepth);
return new Plot({
"canvaselement": canvas,
"root": trackContainer,
"autorootbounds": false
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Track Containers
Track Containers allow stacking of multiple track types into a container. Using linear and logarithmic tracks together with index tracks allows data to be parsed more easily.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { ViewCache } from "@int/geotoolkit/scene/ViewCache.ts";
import { TrackContainer } from "@int/geotoolkit/welllog/TrackContainer.ts";
import { LogTrack } from "@int/geotoolkit/welllog/LogTrack.ts";
import { LogAxis } from "@int/geotoolkit/welllog/LogAxis.ts";
import { Grid } from "@int/geotoolkit/axis/Grid.ts";
import { AdaptiveTickGenerator } from "@int/geotoolkit/axis/AdaptiveTickGenerator.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
const minDepth = 100, maxDepth = 500;
function createTrack(indexTrack) {
const track = new LogTrack().setDepthLimits(minDepth, maxDepth).enableClipping(true);
let child;
if (indexTrack) {
child = new LogAxis().setName("Depth Index");
} else {
child = new Grid(
new AdaptiveTickGenerator().setVisibleTickGrade("minor", true),
new AdaptiveTickGenerator().setVisibleTickGrade("minor", true)
);
}
return track.addChild(child);
}
function createScene(canvas) {
const tracks = [
createTrack(true).setBounds(new Rect(0, 100, 35, 500)),
createTrack().setBounds(new Rect(35, 100, 135, 500)).setLineStyle({
color: "#ef6c00",
width: 3
}),
createTrack().setBounds(new Rect(135, 100, 235, 500)).setLineStyle({
color: "#7cb342",
width: 3
}),
createTrack(true).setBounds(new Rect(235, 100, 270, 500))
];
const trackContainer = new TrackContainer({
"children": tracks
}).setCache(new ViewCache(256, 256)).setBounds(new Rect(0, 0, 270, 350)).setDepthLimits(minDepth, maxDepth);
return new Plot({
"canvaselement": canvas,
"root": trackContainer,
"autorootbounds": false
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Stacked Track
StackedTrack allow stacking of multiple track types and visuals.
.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);
}
# Log Track Scale - Depth
Entire track containers can be scaled by simply calling the scale function. The scale of the label will update automatically.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackContainer } from "@int/geotoolkit/welllog/TrackContainer.ts";
import { LogTrackHeader } from "@int/geotoolkit/welllog/header/LogTrackHeader.ts";
import { HeaderContainer } from "@int/geotoolkit/welllog/HeaderContainer.ts";
import { LogTrack } from "@int/geotoolkit/welllog/LogTrack.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { AdaptiveTickGenerator } from "@int/geotoolkit/axis/AdaptiveTickGenerator.ts";
import { LogAxis } from "@int/geotoolkit/welllog/LogAxis.ts";
import { Grid } from "@int/geotoolkit/axis/Grid.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { createCurve } from "/src/code/WellLog/Basics/Tracks/data.ts";
const minDepth = 0, maxDepth = 400, indexWidth = 40;
function createTrack(indexTrack) {
const track = new LogTrack().setDepthLimits(minDepth, maxDepth).enableClipping(true);
if (indexTrack) {
track.addChild(new LogAxis().setName("Depth"));
} else {
const grid = new Grid(
new AdaptiveTickGenerator().setVisibleTickGrade("minor", true),
new AdaptiveTickGenerator().setVisibleTickGrade("minor", true)
);
const curve = createCurve(50, minDepth, maxDepth, "#2196f3");
track.addChild([grid, curve]);
}
return track;
}
function createTrackContainer(scale) {
const indexTrack = createTrack(true).setBounds(new Rect(0, minDepth, indexWidth, maxDepth));
const linearTrack = createTrack().translate(indexWidth, 0).setBounds(new Rect(0, minDepth, 60, maxDepth));
const tracks = new Group().setBounds(new Rect(0, 100, 100, 400)).setModelLimits(new Rect(0, 0, 100, 400)).addChild(new TrackContainer().scale(1, scale).setIndexUnit("m").addChild([indexTrack, linearTrack]));
const header = new Group().setBounds(new Rect(0, 0, 100, 100)).addChild(new HeaderContainer().addChild([
new LogTrackHeader(indexTrack),
new LogTrackHeader(linearTrack).translate(indexWidth, 0)
]));
return new Group({
"children": [header, tracks]
});
}
function createScene(canvas) {
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([
createTrackContainer(1),
createTrackContainer(0.5).translate(100, 0)
])
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Log Track Scale - Time
Track containers can also be scaled by calling the scale time function. The time of the label will update automatically.
.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);
}