Library for plotting graphs in the area of geonavigation
For local use of the library, it is recommended to install the following:
- Node.js 18.12+
- npm (usually comes with Node.js)
- React 18.2+
Clone the repository and move to the directory
git clone https://github.com/PeachMood/geochart.git
cd geochart
Install the necessary dependencies and build the library
npm install
npm build
Create global link to the library
npm link
Move to the project directory and link the library locally
cd react-example-project
npm link geochart
Workspace that provides an interface for visualizing and editing different types of geophysical data
interface LogViewProps {
name: string;
scope: number;
orientation: Orientation;
units: Units;
domain: Domain;
depth: Depth;
grid: VerticalGrid;
}
-
name
Name of the LogView component. Used as identifier
-
scope
Scope of the depth values. Specified in centimeters. The standard PPI = 96 is used for calculations
-
orientation
$\textcolor{grey}{\textsf{Not implemented yet}}$ -
units
$\textcolor{grey}{\textsf{Not implemented yet}}$ -
domain
Minimum and maximum depth values. By default domain is set based on depth data. See Domain for more details
-
depth
Array of well depth values. Used to render CurveTrack, Curve, DepthTrack and other components
-
grid
Sets ticks and style of the main and secondary vertical grid lines. See VerticalGrid for more details
Component of the LogView that displays a group of curves on a single scale
interface CurveTrackProps {
name: string;
height: number;
scale: Scale;
grid: HorizontalGrid;
}
-
name
Name of the CurveTrack component
-
height
The height of the CurveTrack component in horizontal orientation
-
scale
Linear or logarithmic scale of curve and grid values
-
grid
Sets ticks and style of the main and secondary horizontal grid lines. See HorizontalGrid for more details
Chart that displays a specific set of data
interface CurveProps {
name: string;
data: Data;
style: LineStyle;
domain: Domain;
isContinuous: boolean;
}
-
name
Name of the Curve component. Used as identifier
-
data
The values of the curve. Can be null
-
style
Properties of the curve line. See LineStyle for more details
-
domain
Domain of curve values. By default domain is set based on curve data. See Domain for more details
-
isContinuous
$\textcolor{grey}{\textsf{Not implemented yet}}$
Track for depth data display
interface DepthTrackProps {
name: string;
height: number;
main: DepthCurve;
secondary: DepthCurve;
}
-
name
Name of the DepthTrack component
-
height
The height of the DepthTrack component in horizontal orientation
-
main
Properties of the main depth track. See DepthCurve for more details
-
secondary
$\textcolor{grey}{\textsf{Not implemented yet}}$
Π‘hart for displaying a two-layer model of the near-well space
interface ModelCurveProps {
name: string
height: number;
palette: Palette;
borders: Borders;
data: ModelData;
domain: Domain;
}
-
name
Name of the ModelCurve component
-
height
The height of the ModelCurve component in horizontal orientation
-
palette
Gradient properties for displaying the electrical resistivity of the model layers. See Palette for more details
-
borders
Properties of lines between models and layers. See Borders for more details
-
data
Array with model data. Displayed continuously, according to the specified left border. See ModelData for more details
-
domain
Domain of model data. By default domain is set based on models data. See Domain for more details
Π‘hart for displaying azimuth logging
export interface MultiCurveProps {
name: string;
isSmoothed: boolean;
palette: Palette;
indexes: Domain;
data: Data[];
}
-
name
Name of the MultiCurve component
-
isSmoothed
Defines the smoothing of an array of curves. Options: to smooth or not
-
palette
Gradient for defining the color of curve values. See Palette for more details
-
indexes
Defines the range of zones from which measurements were made. See Domain for more details
-
data
A two-dimensional array of azimuth logging curves. Each internal array corresponds to a separate curve
Minimum and maximum values of data array to be displayed
interface Domain {
min: number;
max: number;
}
-
min
Minimum domain value
-
max
Maximum domain value
Properties of the vertical grid in the horizontal orientation of the LogView
interface VerticalGrid {
main: {
style: LineStyle;
interval: number;
};
secondary: {
style: LineStyle;
lines: number;
};
}
-
main
Properties of the main lines of the vertical grid
-
style
The style of the main grid lines. See LineStyle for more details
-
interval
The interval between the lines of the main grid
-
-
secondary
Properties of the secondary lines of the vertical grid
-
style
The style of the secondary grid lines. See LineStyle for more details
-
lines
The number of secondary lines between the main lines of the grid
-
Properties of the horizontal grid in the horizontal orientation of the CurveTrack. The style of the lines is defined by the VerticalGrid
interface HorizontalGrid {
main: {
lines: number;
isDisplayed: boolean;
};
secondary: {
lines: number;
leftOffset: number;
rightOffset: number;
isDisplayed: boolean;
};
}
-
main
Properties of the main lines of the horizontal grid
-
lines
The number of main grid lines
-
isDisplayed
Specifies whether to display the main grid lines or not
-
-
secondary
Properties of the secondary lines of the horizontal grid
-
lines
The number of secondary lines between the main grid lines
-
leftOffset
$\textcolor{grey}{\textsf{Not implemented yet}}$ -
rightOffset
$\textcolor{grey}{\textsf{Not implemented yet}}$ -
isDisplayed
Specifies whether to display the secondary grid lines or not
-
Line style of the curve, grid or model borders
interface LineStyle {
color: Color;
thickness: number;
type: LineType;
}
-
color
Line color in css format
-
thickness
Line width in pixels
-
type
$\textcolor{grey}{\textsf{Not implemented yet}}$
Depth properties of the DepthTrack
interface DepthCurve {
name: string;
color: Color;
floatingPoint: number;
}
-
name
Depth name. Displayed on the DepthTrack
-
color
Color of the depth values and labels
-
floatingPoint
$\textcolor{grey}{\textsf{Not implemented yet}}$
Gradient properties
interface Palette {
gradient: Gradient;
domain: Domain;
scale: Scale;
}
-
gradient
Array with gradient colors. See Gradient for more details
-
domain
Domain of the gradient data. See Domain for more details
-
scale
$\textcolor{grey}{\textsf{Not implemented yet}}$
Properties of the linear gradient. Describes the color change along a straight line
interface GradientColor {
value: Color;
position: number;
}
type Gradient = GradientColor[];
-
value
Color value of the gradient in css format
-
position
Color position in the gradient
The style of horizontal and vertical lines
interface Borders {
horizontal: LineStyle;
vertical: LineStyle;
}
Array of two-layer models of the near-well space
interface ModelValue {
x: number;
y: number;
alpha: number;
roUp: number;
roDown: number;
}
type ModelData = ModelValue[];
-
x
The left depth boundary of the model. Specified in LogView units
-
y
The upper boundary of the beginning of the layer. Specified in meters
-
alpha
The angle of inclination of the upper layer of the model. Specified in degrees
-
roUp
Electrical resistivity of the upper layer. Specified in Om * m
-
roDown
Electrical resistivity of the down layer. Specified in Om * m
All library components are located in the geochart package
import { LogView, Curve, CurveTrack, DepthTrack } from 'geochart';
Place the LogView component in the beginning - this is the workspace for plotting. Then pass the depth data to the component and other parameters at your choice
function App() {
return (
<div className="page">
<div className="container">
<LogView depth={depth} orientation="horizontal">
</LogView>
</div>
</div>
);
}
Now place the CurveTrack as a child element - this is a component for grouping graphs. Set the parameters you need
function App() {
return (
<div className="page">
<div className="container">
<LogView depth={depth} orientation="horizontal">
<CurveTrack></CurveTrack>
</LogView>
</div>
</div>
);
}
Finally, add curves: specify the data, name (must be unique for track), color, range and so on
function App() {
return (
<div className="page">
<div className="container">
<LogView depth={depth} orientation="horizontal">
<CurveTrack>
<Curve name="ROP AVG" data={ropAvg} style={{ color: '#B80C09' }} />
<Curve name="ACTECDX" data={actecdx} style={{ color: '#FBBB3B' }} />
</CurveTrack>
</LogView>
</div>
</div>
);
}
Don't forget to add DepthTrack
function App() {
return (
<div className="page">
<div className="container">
<LogView depth={depth} orientation="horizontal">
<CurveTrack>
<Curve name="ROP AVG" data={ropAvg} style={{ color: '#B80C09' }} />
<Curve name="ACTECDX" data={actecdx} style={{ color: '#FBBB3B' }} />
</CurveTrack>
<DepthTrack main={{ name: 'MD', color: '#021D38' }} />
</LogView>
</div>
</div>
);
}