📊 Geochart

Library for plotting graphs in the area of geonavigation

🛠️ Getting started

Prerequisites

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+

Local installation

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

✨ Components

LogView

Workspace that provides an interface for visualizing and editing different types of geophysical data

Interface

interface LogViewProps {
  name: string;
  scope: number;
  orientation: Orientation;
  units: Units;
  domain: Domain;
  depth: Depth;
  grid: VerticalGrid;
}

Properties

• 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

CurveTrack

Component of the LogView that displays a group of curves on a single scale

Interface

interface CurveTrackProps {
  name: string;
  height: number;
  scale: Scale;
  grid: HorizontalGrid;
}

Properties

• 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

Curve

Chart that displays a specific set of data

Interface

interface CurveProps {
  name: string;
  data: Data;
  style: LineStyle;
  domain: Domain;
  isContinuous: boolean;
}

Properties

• 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}}$

DepthTrack

Track for depth data display

Interface

interface DepthTrackProps {
  name: string;
  height: number;
  main: DepthCurve;
  secondary: DepthCurve;
}

Properties

• 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}}$

ModelCurve

Сhart for displaying a two-layer model of the near-well space

Interface

interface ModelCurveProps {
  name: string
  height: number;
  palette: Palette;
  borders: Borders;
  data: ModelData;
  domain: Domain;
}

Properies

• 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

MultiCurve

Сhart for displaying azimuth logging

Interface

export interface MultiCurveProps {
  name: string;
  isSmoothed: boolean;
  palette: Palette;
  indexes: Domain;
  data: Data[];
}

Properies

• 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

🎉 Types

Domain

Minimum and maximum values of data array to be displayed

Interface

interface Domain {
  min: number;
  max: number;
}

Properties

• min

  Minimum domain value

• max

  Maximum domain value

VerticalGrid

Properties of the vertical grid in the horizontal orientation of the LogView

Interface

interface VerticalGrid {
  main: {
    style: LineStyle;
    interval: number;
  };
  secondary: {
    style: LineStyle;
    lines: number;
  };
}

Properties

• 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

HorizontalGrid

Properties of the horizontal grid in the horizontal orientation of the CurveTrack. The style of the lines is defined by the VerticalGrid

Interface

interface HorizontalGrid {
  main: {
    lines: number;
    isDisplayed: boolean;
  };
  secondary: {
    lines: number;
    leftOffset: number;
    rightOffset: number;
    isDisplayed: boolean;
  };
}

Properties

• 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

LineStyle

Line style of the curve, grid or model borders

Interface

interface LineStyle {
  color: Color;
  thickness: number;
  type: LineType;
}

Properties

• color

  Line color in css format

• thickness

  Line width in pixels

• type

  $\textcolor{grey}{\textsf{Not implemented yet}}$

DepthCurve

Depth properties of the DepthTrack

Interface

interface DepthCurve {
  name: string;
  color: Color;
  floatingPoint: number;
}

Properties

• name

  Depth name. Displayed on the DepthTrack

• color

  Color of the depth values and labels

• floatingPoint

  $\textcolor{grey}{\textsf{Not implemented yet}}$

Palette

Gradient properties

Interface

interface Palette {
  gradient: Gradient;
  domain: Domain;
  scale: Scale;
}

Properties

• 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}}$

Gradient

Properties of the linear gradient. Describes the color change along a straight line

Interface

interface GradientColor {
  value: Color;
  position: number;
}

type Gradient = GradientColor[];

Properties

• value

  Color value of the gradient in css format

• position

  Color position in the gradient

Borders

The style of horizontal and vertical lines

Interface

interface Borders {
  horizontal: LineStyle;
  vertical: LineStyle;
}

ModelData

Array of two-layer models of the near-well space

Interface

interface ModelValue {
  x: number;
  y: number;
  alpha: number;
  roUp: number;
  roDown: number;
}

type ModelData = ModelValue[];

Properties

• 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

📒 Usage

Import

All library components are located in the geochart package

import { LogView, Curve, CurveTrack, DepthTrack } from 'geochart';

Example

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>
  );
}

The following charts should be rendered by geochart