Tradovate Custom Indicators

https://tradovate.github.io/custom-indicators/
Admin
API documentation for creating custom technical indicators for the Tradovate Trader cross-platform...
Tokens:39,990
Snippets:485
Trust Score:9.7
Update:3 days ago
Show doc for...
Tokens:
Raw
### Grouping elements with Container

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.container.html

Example showing how to define a Container with child elements like Text and ContourShapes.

```javascript
 graphics: {
     items: [
         {
             tag: 'Container',
             key: 'myContainer',
             children: [
                 {
                     tag: "Text",
                     key: "rightTop",
                     point: {
                         x: op(du(d.index()), '-', px(2)),
                         y: op(du(d.value()), '-', px(58)),
                     },
                     text: "!",
                     style: { fontSize: 18, fontWeight: "bold", fill: "#5c5" },
                     textAlignment: "centerMiddle"
                 },
                 {
                     tag: "ContourShapes",
                     key: 'circs',
                     primitives: [
                         {
                             tag: 'Circle',
                             radius: 10,
                             center: {
                                 x: op(du(d.index()), '-', px(2)),
                                 y: op(du(d.value()), '-', px(60)),
                             },
                         }
                     ],
                     lineStyle: {
                         lineWidth: 3,
                         color: "#5c5"
                     }
                 }
             ],
         }
     }
 }
```

--------------------------------

### Polygon Usage Example

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.polygon.html

Example showing how to define a Polygon primitive within a graphics items array to draw a red triangle at each rendered bar's value and index.

```APIDOC
## Polygon Usage Example

### Description
This example demonstrates how to use the Polygon primitive within a map function's return object to draw a red triangle at each rendered bar's value and index.

### Code Example
```javascript
{
    graphics: {
        items: [
            {
                tag: "Shapes",
                key: 'tris',
                //the polygon is a primitve
                primitives: [
                    {
                        tag: 'Polygon',
                        points: [
                            //top
                            {
                                x: du(d.index()),
                                y: op(du(d.value()), '-', px(4))
                            },
                            //right
                            {
                                x: op(du(d.index()), '+', px(4)),
                                y: du(d.value())
                            },
                            //left
                            {
                                x: op(du(d.index()), '-', px(4)),
                                y: du(d.value())
                            }
                        ]
                    }
                ],
                fillStyle: {
                    color: '#f00'
                }
            }
        ]
    }
}
```

### Properties
- **points**: readonly Point[] - An array of Point objects that describe this Polygon.
- **tag**: "Polygon" - The tag identifying this primitive as a Polygon.
```

--------------------------------

### Implement EMA using built-in tools

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/BuiltinTools.html

An example of rewriting an EMA indicator by importing and utilizing the predef and EMA tools.

```javascript
const predef = require("./tools/predef");
const EMA = require("./tools/EMA");

class ema {
   init() {
       this.emaAlgo = EMA(this.props.period);
   }

   map(d) {
       return this.emaAlgo(d.value());
   }
}

module.exports = {
   name: "exampleEma",
   description: "My EMA",
   calculator: ema,
   params: {
       period: predef.paramSpecs.period(10)
   },
   tags: ["My Indicators", predef.tags.MovingAverage],
   schemeStyles: predef.styles.solidLine("red")
};
```

--------------------------------

### Define a FillStyle object

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_style.fillstyle.html

Example of creating a FillStyle object with a color and opacity value.

```typescript
 const halfRed = {
     color: 'red',
     opacity: 0.5,
 }
```

--------------------------------

### Define anchorRestraints for Custom Drawing Tool

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.anchorrestraint.html

Examples of implementing the anchorRestraints method to restrict anchor movement. The first example limits movement by unit offsets, while the second restricts movement to a specific price range.

```typescript
 const MyCustomTool = {
     //...

     //the anchor at position [0] can move 2 units in the Y axis and the
     //anchor at position [1] can move 14 units in the X axis
     anchorRestraints() {
         return [{y: 2}, {x: 14}]
     },

     //the anchor at position [0] can move between the 4525 and 4535 price in the Y axis
     anchorRestraints() {
         return [{y: [4525, 4535]}]
     },

     //...
 }
```

--------------------------------

### TextStyle Interface

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_style.textstyle.html

Definition of the TextStyle interface with its properties and an example usage.

```APIDOC
## TextStyle Interface

### Description
Definition for a `Text` `DisplayObject`'s fill style. This inherits properties from `FontStyle`.

### Example
```
const red18pt = { fill: '#f00', fontSize: 18 }
```

### Properties

#### fill
- Type: Color
- Optional
- The color that the text should be rendered.

#### fontFamily
- Type: string
- Optional
- A string representing the font family to use. Ex: `'monospace, Courier New'`

#### fontSize
- Type: number
- Required
- A number representing the font point size.

#### fontStyle
- Type: string
- Optional
- The style to apply to the font, such as 'italic'.

#### fontWeight
- Type: string
- Optional
- Weight of the font. Will accept a string such as "bold".

#### letterSpacing
- Type: number
- Optional
- Represents space between letters in pixels.

#### lineHeight
- Type: number
- Optional
- Text line height. Represents the vertical space in pixels that this line of text takes up.

### Hierarchy
- FontStyle
  - TextStyle
```

--------------------------------

### Exporting a Custom Drawing Tool

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.drawingtool.html

Example of the module.exports structure required to define a custom drawing tool, including its name, implementation, description, and parameters.

```javascript
 //an example drawing tool export

 module.exports = {
     name: 'MyCustomDrawingTool',
     drawing: MyDrawingImplementation,
     description: 'My Custom Tool',
     params: {
         period: predef.paramSpecs.period(13)
     }
 }
```

--------------------------------

### Render a global text label using map

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.text.html

This example demonstrates how to return a global text label at the last bar's index, positioned 40 pixels above the price 3850.

```javascript
 map(d) {
     return {
         graphics: d.isLast() && {
             items: [
                 {
                     tag: 'Text',
                     key: 'myLabel',
                     point: {
                         x: du(d.index()),
                         y: op(du(3850), '-', px(40))
                     },
                     text: '-> 3850',
                     style: { fontSize: 18, fontWeight: "bold", fill: '#f00' },
                     textAlignment: 'centerMiddle',
                     global: true //<- indicates this is a globally-scoped object
                 }
             ]
         }
     }
 }
```

--------------------------------

### Define an Indicator module

Source: https://tradovate.github.io/custom-indicators/interfaces/indicator.indicator-1.html

Example of an indicator definition exported as a module, specifying its name, description, calculator, parameters, plots, and styling.

```javascript
 module.exports = {
     name: "doubleEma",
     description: "Double EMA",
     calculator: doubleEma,
     params: {
         slowPeriod: predef.paramSpecs.period(21),
         fastPeriod: predef.paramSpecs.period(10)
     },
     tags: ["My Indicators"],
     plots: {
         fast: { title: "FastEMA" },
         slow: { title: "SlowEMA" },
     },
     plotter: [
         predef.plotters.dots("slow"),
         predef.plotters.singleline("fast"),
         predef.plotters.custom(dnaLikePlotter)
     ],
     schemeStyles: {
         dark: {
             fast: {color: "red"},
             slow: {color: "lightblue"}
         }
     }
 };
```

--------------------------------

### Implement Fourier Moving Average Indicator

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/FourierMovingAverage.html

This example shows how to use the FFT library to perform a forward FFT, filter high-frequency components, and perform an inverse FFT to calculate a smoothed moving average.

```javascript
const predef = require("./tools/predef");
const FFT = require("fft");

class fourierMA {
   init() {
       const period = this.props.period;
       this.fft = FFT(period);
       this.signal = new Array(period);
       this.zero = new Array(period);
       for(let i=0; i<period; ++i) {
           this.zero[i] = 0.0;
       }
       this.lastIndex = -1;
   }

   map(d, index) {
       const period = this.props.period;
       const value = d.value();

       if (index < period) {
           this.signal[period - index - 1] = value;
       }
       else {
           if (this.lastIndex < index) {
               this.signal.pop();
               this.signal.unshift(value);
           }
           else {
               this.signal[0] = value;
           }
       }

       this.lastIndex = index;

       if (index >= period) {
           const re = [].concat(this.signal);
           const im = [].concat(this.zero);
           this.fft.fft1d(re, im);

           const middle = period / 2 + 1;
           const startFreq = this.props.filterFreqStart;
           for(let i=startFreq; i<middle; ++i) {
               re[i] = im[i] = 0.0;
               re[period - i] = im[period - i] = 0.0;
           }
           this.fft.ifft1d(re, im);

           return re[0];
       }
   }
}

module.exports = {
   name: "fourierMA",
   description: "Fourier MA",
   calculator: fourierMA,
   params: {
       period: predef.paramSpecs.period(64),
       filterFreqStart: predef.paramSpecs.period(16),
   },
   tags: ["My Indicators"],
};
```

--------------------------------

### VisibilityConditions scaleRangeX example

Source: https://tradovate.github.io/custom-indicators/modules/graphics_graphicsresponse.html

Shows how to configure a visibility condition so that a text object renders only when the pixels per domain unit (px/du) is greater than 10.

```javascript
 //adding this condition will cause our text object to render only at px/du > 10
 ...
 items: [
     {
         conditions: {
           scaleRangeX: { min: 10 }
         },
         tag: 'Text',
         key: 'myText',
         text: 'rendered!',
         alignment: 'centerMiddle',
         point: {
             x: du(d.index()),
             y: op(du(d.value()), '-', px(50))
         },
         style: { fontSize: 18, fill: "red" },
     }
 ]
 ...
```

--------------------------------

### Define indicator parameters using ParameterDefinitions

Source: https://tradovate.github.io/custom-indicators/interfaces/params.parameterdefinitions.html

Example of defining a numeric parameter named 'offset' with specific restrictions.

```typescript
...
params: {
offset: {
type: "number",
def: 2.0,
restrictions: {
step: 0.25,
min: 0.0
}
}
}
...
```

--------------------------------

### Ellipse Usage Example

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.ellipse.html

Example of using the Ellipse primitive within a map function's return object to draw a red ellipse centered at each rendered bar's value and index.

```APIDOC
## Ellipse

### Description
Defines an instance of an Ellipse shape for use in the Shapes or ContourShapes primitives value.

### Properties
- **position** (Point) - origin point of the ellipse
- **size** (Size) - size of the ellipse
- **tag** ("Ellipse") - tag identifying the primitive

### Usage Example
```
//within a map function's return object. This will draw a red ellipse centered at each rendered
//bar's value and index.
...
 {
     graphics: {
         items: [
             {
                 tag: 'Shapes',
                 key: 'ellipses',
                 //the ellipse is a primitve
                 primitives: [
                     {
                         tag: 'Ellipse',
                         position: {
                             x: du(d.index()),
                             y: du(d.value()),
                         }
                         size: {
                             height: px(18),
                             width: px(24)
                         }
                     }
                 ],
                 fillStyle: {
                     color: '#f00'
                 }
             }
         ]
     }
 }
...
```
```

--------------------------------

### GraphicsObject map function example

Source: https://tradovate.github.io/custom-indicators/modules/graphics_graphicsresponse.html

Demonstrates how to return a global text label at the last bar's index on the X-axis and 40 pixels above the price 3850 in the Y-axis.

```javascript
 map(d) {
     return {
         graphics: d.isLast() && {
             items: [
                 {
                     tag: 'Text',
                     key: 'myLabel',
                     point: {
                         x: du(d.index()),
                         y: op(du(3850), '-', px(40))
                     },
                     text: '-> 3850',
                     style: { fill: '#f00' },
                     textAlignment: 'centerMiddle',
                     global: true, //<- indicates this is a globally-scoped object
                     origin: {     //<- indicates (0,0) is (right, top) oriented
                         cs: 'grid',
                         h: 'right',
                         v: 'top',
                     }
                 }
             ]
         }
     }
 }
```

--------------------------------

### Define a 3px red line style

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_style.linestyle.html

An example of creating a LineStyle object with a 3-pixel width and a red color.

```typescript
 const my3pxLine = {
     lineWidth: 3,
     color: 'red',
 }
```

--------------------------------

### Define Color type alias

Source: https://tradovate.github.io/custom-indicators/modules/graphics_style.html

Example showing how to define colors using hexadecimal strings or named web color strings.

```typescript
 const orange = '#f90',
       red    = "red"
```

--------------------------------

### Define a FontStyle object

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_style.fontstyle.html

Example of creating a FontStyle object with 18pt bold font.

```typescript
 //18pt bold face font
 const myFontStyle = {
     fontSize: 18,
     fontWeight: 'bold'
 }
```

--------------------------------

### anchorRestraints()

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.anchorrestraint.html

Example usage of the anchorRestraints() method in a custom drawing tool, demonstrating how to return an array of AnchorRestraint objects to constrain anchor movement.

```APIDOC
## anchorRestraints()

### Description
Defines the coordinate restraints for each anchor of a custom drawing tool. The method returns an array of AnchorRestraint objects, where each object corresponds to an anchor at the same array position.

### Method
anchorRestraints()

### Returns
Array of AnchorRestraint objects. Each AnchorRestraint has optional x and y fields of type CoordinateRestraint.

### Examples

#### Example 1: Fixed movement distances
```javascript
const MyCustomTool = {
    //...
    //the anchor at position [0] can move 2 units in the Y axis and the
    //anchor at position [1] can move 14 units in the X axis
    anchorRestraints() {
        return [{y: 2}, {x: 14}]
    },
    //...
}
```

#### Example 2: Range constraint
```javascript
const MyCustomTool = {
    //...
    //the anchor at position [0] can move between the 4525 and 4535 price in the Y axis
    anchorRestraints() {
        return [{y: [4525, 4535]}]
    },
    //...
}
```

### Properties
- **x** (CoordinateRestraint) - Optional. Restricts movement along the X axis.
- **y** (CoordinateRestraint) - Optional. Restricts movement along the Y axis.
```

--------------------------------

### Implement anchorStyles in a custom tool

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.anchorstyle.html

This example demonstrates how to define the anchorStyles method within a custom tool object to assign specific colors to individual anchors.

```typescript
 const MyCustomTool = {
     //...

     // The anchor at anchors[0] will be red, the anchor at anchors[1] will be blue
     anchorStyles() {
         return [{ color: 'red' }, { color: 'blue' }]
     },

     //...
 }
```

--------------------------------

### Render shared instances with Instancing

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.instancing.html

Example of defining an Instancing object within a map's return object to render an orange rectangle centered above each bar using instance sharing.

```javascript
 //inside map's return object. This example will render an orange rect
 //extending 30px above each bar, centered at the bar. Each render
 //will use instance sharing.
...
 graphics: {
     items: [
         {
             tag: "Instancing",
             key: "shades",
             instances: [
                 {
                     position: {
                         x: op(du(d.index()), '-', min(px(2.5), du(0.25))),
                         y: du(d.value())
                     },
                     size: {
                         width: min(px(5), du(0.5)),
                         height: px(30)
                     },
                     color: { r: 1, g: 0.5, b: 0.25 }
                 }
             ],
         }
     ]
}
...
```

--------------------------------

### Display an infinite horizontal line using Line

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.line.html

Example of defining an infinite horizontal line at a specific price within a LineSegments DisplayObject.

```javascript
//within a LineSegments DisplayObject, displays an infinite horizontal
//line at the 3800 price.
...
 lines: [
     {
         tag: 'Line',
         a: {
             x: du(0),
             y: du(3800),
         },
         b: {
             x: du(1),
             y: du(3800)
         },
         infiniteStart: true,
         infiniteEnd: true
     }
 ]
...
```

--------------------------------

### Define a Rectangle primitive in a calculator

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.rectangle.html

This example demonstrates how to define a 24x24px red square rectangle primitive within a calculator's map function.

```javascript
// Inside a calculator's map function, this particular definition will draw
// red 24x24px squares centered at { x: index, y: value } of each rendered bar
...
 {
     graphics: {
         items: [
             {
                 tag: 'Shapes',
                 key: 'rects',
                 //the rectangle is a primitve
                 primitives: [
                     {
                         tag: 'Rectangle',
                         position: {
                             x: du(d.index()),
                             y: du(d.value()),
                         }
                         size: {
                             height: px(24),
                             width: px(24)
                         }
                     }
                 ],
                 fillStyle: {
                     color: '#f00'
                 }
             }
         ]
     }
 }
...
```

--------------------------------

### Implement EMA calculator class

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/ExponentialMovingAverage.html

This example demonstrates an EMA implementation that stores the previous moving average and initial sum as object fields. It uses the init() function to reset state and the map() function to perform the EMA calculation based on the defined period.

```javascript
class ema {
   init() {
       this.previousMA = undefined;
       this.initialSum = 0;
   }

   map(d, index) {
       let result;

       if (index < this.props.period) {
           this.initialSum += d.value();
           result = this.initialSum / (index + 1);
       }
       else {
           const multiplier = 2.0 / (this.props.period + 1);
           result = (d.value() - this.previousMA) * multiplier + this.previousMA;
       }
       this.previousMA = result;
       return result;
   }
}

module.exports = {
   name: "exampleEma",
   calculator: ema,
   params: {
       period: {
               type: "number",
               def: 10,
               restrictions: {
                   step: 1,
                   min: 3
               }
       }
   }
};
```

--------------------------------

### Render Dots in a Custom Indicator

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.dots.html

This example demonstrates how to define a 'Dots' tag within the graphics object of a map's return object to draw a colorful square of dots above each bar.

```javascript
... 
//in map's return object. this example will draw a colorful square of dots above each bar.
graphics: { 
     items: [ 
         tag: 'Dots', 
         key: 'myDots', 
         dots: [ 
             { 
                 point: { 
                     x: du(d.index()), 
                     y: op(du(d.value()), '-', px(100)) 
                 }, 
                 color: { r: 1, g: 0, b: 0 } 
             }, 
             { 
                 point: { 
                     x: op(du(d.index()), '-', px(6)), 
                     y: op(du(d.value()), '-', px(94)) 
                 }, 
                 color: { r: 1, g: .5, b: 0 } 
             }, 
             { 
                 point: { 
                     x: du(d.index()), 
                     y: op(du(d.value()), '-', px(94)) 
                 }, 
                 color: { r: 0, g: .5, b: .5 } 
             }, 
             { 
                 point: { 
                     x: op(du(d.index()), '-', px(6)), 
                     y: op(du(d.value()), '-', px(100)) 
                 }, 
                 color: { r: 0, g: 0, b: 1 } 
             }, 
         ], 
         style: { 
             lineWidth: 3, 
             color: '#f00', 
         } 
     } 
} 
...
```

--------------------------------

### Define a Dot object

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.dot.html

Example of creating a dot positioned 400px above the graph origin. The dot inherits its size from the parent Dots object's style.

```javascript
 //a dot 400px above the graph origin. This will inherit it's size from the `Dots` owner object's `style`.
 const myDot = {
     point: {
         x: px(0),
         y: px(400)
     },
     color: {
         r: 1, g: 0, b: 0
     }
 }
```

--------------------------------

### Render a stroked circle using ContourShapes

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.contourshapes.html

Example of defining a ContourShapes object within the graphics items array to display a stroked circle 60px above each bar.

```javascript
//within the graphics items array, displays a stroked circle 60px above each bar
...
 {
     tag: "ContourShapes",
     key: 'circs',
     primitives: [
         {
             tag: 'Circle',
             radius: 10,
             center: {
                 x: op(du(d.index()), '-', px(2)),
                 y: op(du(d.value()), '-', px(60)),
             },
         },
     ],
     lineStyle: {
         lineWidth: 3,
         color: "#5c5"
     }
 }
```

--------------------------------

### Dot Interface

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.dot.html

Describes a Dot object for use in the Dots DisplayObject. Consists of a Point and a ColorRGB. The example shows a dot 400px above the graph origin, inheriting size from the Dots owner object's style.

```APIDOC
## Dot Interface

### Description
Describes a `Dot` object for use in the `Dots` `DisplayObject`. Consists of a `Point` and a `ColorRGB`.

### Properties
- **color**: `ColorRGB` - A `ColorRGB` object used to describe the color of this `Dot`.
- **point**: `Point` - A `Point` object to describe this `Dot`'s position in 2D space.

### Example
```
 //a dot 400px above the graph origin. This will inherit it's size from the `Dots` owner object's `style`.
 const myDot = {
     point: {
         x: px(0),
         y: px(400)
     },
     color: {
         r: 1, g: 0, b: 0
     }
 }
```
```

--------------------------------

### Dots Interface

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.dots.html

The Dots interface represents an array of WebGL dots. It is a DisplayObject and includes properties for the dots array, a render key, a line style, and a tag. The example demonstrates how to configure a Dots graphic in a map's return object.

```APIDOC
## Interface Dots

### Description
The Dots interface represents an array of WebGL dots. It is a DisplayObject and includes properties for the dots array, a render key, a line style, and a tag.

### Properties
- **dots** (readonly Dot[]) - An array of Dot objects that describe the dots in this drawing.
- **key** (string) - The graphic element's render key, like an HTML id attribute.
- **style** (LineStyle) - The style of the dots as a LineStyle object. Individual dot colors override the color portion of this value.
- **tag** ("Dots") - The tag identifying this as a Dots graphic.

### Example
```
// in map's return object. this example will draw a colorful square of dots above each bar.
graphics: {
     items: [
         tag: 'Dots',
         key: 'myDots',
         dots: [
             {
                 point: {
                     x: du(d.index()),
                     y: op(du(d.value()), '-', px(100))
                 },
                 color: { r: 1, g: 0, b: 0 }
             },
             {
                 point: {
                     x: op(du(d.index()), '-', px(6)),
                     y: op(du(d.value()), '-', px(94))
                 },
                 color: { r: 1, g: .5, b: 0 }
             },
             {
                 point: {
                     x: du(d.index()),
                     y: op(du(d.value()), '-', px(94))
                 },
                 color: { r: 0, g: .5, b: .5 }
             },
             {
                 point: {
                     x: op(du(d.index()), '-', px(6)),
                     y: op(du(d.value()), '-', px(100))
                 },
                 color: { r: 0, g: 0, b: 1 }
             },
         ],
         style: {
             lineWidth: 3,
             color: '#f00',
         }
     ]
}
```
```

--------------------------------

### Implement Basic Render Method

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/AdvancedDrawing.html

Initial implementation of the render method to draw a line between the first two anchors.

```javascript
const Trender = {
    //...

    render({anchors, props}) {
        return {
            items: [
                {
                    tag: 'LineSegments',
                    key: 'lower',
                    lines: [
                        {
                            tag: 'Line',
                            a: anchors[0],
                            b: anchors[1]
                        }
                    ],
                    lineStyle: {
                        width: 2,
                        color: props.lower
                    }
                },
            ]
        }
    }

    //...
}
```

--------------------------------

### init(): void

Source: https://tradovate.github.io/custom-indicators/interfaces/calculator.calculator-1.html

Optional method called by the application before running an iteration through input series items. Can be used to reset an internal calculation state.

```APIDOC
## init(): void

### Description
Optional method called by the application before running an iteration through input series items. Can be used to reset an internal calculation state.

### Method
init

### Parameters
None

### Returns
void

### Example
```
class ema {
init() {
this.previousMA = undefined;
this.initialSum = 0;
}
...
}
```
```

--------------------------------

### init

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.drawingtoolimplementation.html

Initializes the state parameter of DrawingArgs.

```APIDOC
## init

### Description
Initializes the state parameter of DrawingArgs.

### Signature
init(): any

### Parameters
None

### Returns
any

### Example
```javascript
const MyCustomTool = {
   init() {
       return {
           myCustomValue: 'hello world!',
           myCalculation: someBigCalculation()
       }
   },
   //...
}
```
```

--------------------------------

### RoundedRectangle Usage Example

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.roundedrectangle.html

Example of using the RoundedRectangle primitive within a map function's return object to draw a red rounded rectangle centered at each rendered bar's value and index.

```APIDOC
## RoundedRectangle Primitive

### Description
Defines an instance of a RoundedRectangle shape for use in the Shapes or ContourShapes primitives value.

### Usage Example
```javascript
//within a map function's return object. This will draw a red rounded rect centered at each rendered
//bar's value and index.
...
 {
     graphics: {
         items: [
             {
                 tag: "Shapes",
                 key: 'roundRects',
                 //the rounded rect is a primitve
                 primitives: [
                     {
                         tag: 'RoundedRectangle',
                         position: {
                             x: du(d.index()),
                             y: du(d.value()),
                         }
                         size: {
                             height: px(16),
                             width: px(24)
                         }
                     }
                 ],
                 fillStyle: {
                     color: '#f00'
                 }
             }
         ]
     }
 }
...
```

### Properties
- **position** (Point) - The Point origin of this object.
- **radius** (number) - A number describing the radius of this object's corners in pixels.
- **size** (Size) - The Size object that describes this object's dimensions.
- **tag** ("RoundedRectangle") - The tag identifying this as a RoundedRectangle primitive.
```

--------------------------------

### ExprScaleBound Interface

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_scale.exprscalebound.html

Definition of the ExprScaleBound interface with its properties and usage example.

```APIDOC
## ExprScaleBound Interface

### Description
An object that represents an expression for calculating ScaleBoundValues dynamically. Use the op, du, and px helper functions to create expressions. You can mix units freely.

### Properties
- **a**: ScaleBound - The left-hand operand in the expression.
- **b**: ScaleBound - The right-hand operand in the expression.
- **op**: Op - The operator to be used for calculations.

### Usage Example
```
// Creates a value that represents a point 60 pixels above the price 3850.00.
const myMixedValue = op(du(3850.00), '-', px(60))
```
```

--------------------------------

### Import plotting module

Source: https://tradovate.github.io/custom-indicators/modules/canvas.plotting.html

Initializes the plotting utility module for use in custom indicators.

```javascript
const plotting = require("./tools/plotting");
```

--------------------------------

### Add Circle GraphicsObject

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/Graphics.html

An example of adding a Shapes object with a Circle primitive to the items array.

```javascript
//...
{
    tag: "Shapes",
    key: 'circs',
    primitives: [
        {
            tag: 'Circle',
            radius: 10,
            center: {
                x: op(du(d.index()), '-', px(2)),
                y: op(du(d.value()), '-', px(60)),
            },
        },

    ],
    fillStyle: {
        color: "#5c5"
    }
},
//...
```

--------------------------------

### Import ScaleBound helper functions from './tools/graphics'

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/ScaleBoundValues.html

Import the helper functions px, du, op, min, and max from the graphics module to work with ScaleBound values in Custom Indicators or Custom Drawing Tools.

```javascript
const { px, du, op, min, max } = require('./tools/graphics')
//...
```

--------------------------------

### Initialize tool state with init

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.drawingtoolimplementation.html

Initializes the state parameter of DrawingArgs.

```javascript
const MyCustomTool = {
   init() {
       return {
           myCustomValue: 'hello world!',
           myCalculation: someBigCalculation()
       }
   },
   //...
}
```

--------------------------------

### get(entity: InputEntity): IndexedDate

Source: https://tradovate.github.io/custom-indicators/modules/canvas.plotting.x.html

Evaluates the x coordinate of an output item for using with canvas.drawLine and canvas.drawPath functions.

```APIDOC
## get(entity: InputEntity): IndexedDate

### Description
Evaluates the `x` coordinate of an output item for using with `canvas.drawLine` and `canvas.drawPath` functions.

### Method
Function

### Parameters
- **entity** (InputEntity) - Required - The entity whose x coordinate is to be evaluated.

### Returns
- **IndexedDate** - The x coordinate of the entity.
```

--------------------------------

### Create dynamic scale values with op

Source: https://tradovate.github.io/custom-indicators/modules/graphics_scale.html

Demonstrates creating a mixed value using the op function to combine domain units and pixels.

```javascript
//creates a point 60 pixels above the price 3800.50. const myMixedValue = op(du(3800.50), '-', px(60))
```

--------------------------------

### Define a red color using ColorRGB

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_style.colorrgb.html

Example of creating a red color object using the ColorRGB interface structure.

```typescript
 const red = { r: 1, g: 0, b: 0 }
```

--------------------------------

### GraphicsResponse map function structure

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_graphicsresponse.graphicsresponse.html

Example showing the structure of the object returned by the map function, including the graphics property.

```typescript
 map(d) {
     return {
         graphics: {
             items: [
                 //GraphicsObjects go here.
             ]
         }
     }
 }
```

--------------------------------

### tooltips

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.drawingtoolimplementation.html

Returns an array of DrawingTooltip objects.

```APIDOC
## tooltips

### Description
Returns an array of DrawingTooltip objects.

### Signature
tooltips(args: DrawingArgs): readonly DrawingTooltip[]

### Parameters
- args (DrawingArgs) - Required - The drawing arguments.

### Returns
readonly DrawingTooltip[]

### Example
```javascript
const MyCustomTool = {
    //...
    tooltips({ anchors }) {
        return [
            {
                coord: anchors[0],
                alignment: {
                    tag: 'predef',
                    x: 'center',
                    y: 'center'
                },
                items: [
                    {
                        content: "Hurray5",
                        key: 'hurray',
                        title: "Woot-"
                    },
                    {
                        key: 'date',
                        content: new Date()
                    },
                    {
                        key: 'number',
                        content: 500
                    },
                    {
                        key: 'delta',
                        content: {delta: anchors[1].y.value - anchors[0].y.value}
                    }
                ]
            }
        ]
    },
    //...
}
```
```

--------------------------------

### Define a Shapes object with a filled circle

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.shapes.html

Example of adding a filled circle to the graphics items array, positioned 60px above a bar.

```javascript
//within the graphics items array, displays a filled circle 60px above each bar
...
 {
     tag: "Shapes",
     key: 'circs',
     primitives: [
         {
             tag: 'Circle',
             radius: 10,
             center: {
                 x: op(du(d.index()), '-', px(2)),
                 y: op(du(d.value()), '-', px(60)),
             },
         },
     ],
     fillStyle: {
         color: "#5c5"
     }
 }
```

--------------------------------

### fourierCommon.js helper module for FFT initialization and series update

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/Spectrogram.html

Defines initialize and updateSeries functions to manage a rolling signal buffer and compute FFT coefficients. Used by both fourierMA and spectrogram indicators. The tag property is set to 'Fourier Analysis'.

```javascript
const FFT = require("fft");

function initialize(instance) {
   const period = instance.props.period;
   instance.fft = FFT(period);
   instance.signal = new Array(period);
   instance.zero = new Array(period);
   for(let i=0; i<period; ++i) {
       instance.zero[i] = 0.0;
   }
   instance.lastIndex = -1;
}

function updateSeries(instance, value, index) {
   const period = instance.props.period;
   if (index < period) {
       instance.signal[period - index - 1] = value;
   }
   else {
       if (instance.lastIndex < index) {
           instance.signal.pop();
           instance.signal.unshift(value);
       }
       else {
           instance.signal[0] = value;
       }
   }

   instance.lastIndex = index;

   if (index >= period) {
       const re = [].concat(instance.signal);
       const im = [].concat(instance.zero);
       instance.fft.fft1d(re, im);
       return { re, im };
   }
}

module.exports = {
   initialize,
   updateSeries,
   tag: "Fourier Analysis"
};
```

--------------------------------

### Create MyTracker Tool

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/Graphics.html

A helper function to track value changes and determine if a threshold has been met.

```javascript
function MyTracker(magicNumber) {
    function tracker(value) {
        return tracker.push(value)
    }

    tracker.push = (value) => {
        let result = value - tracker.state.last >= magicNumber
        tracker.state.last = value
        return result
    }

    tracker.reset = () => {
        tracker.state = {
            last: -1
        }
    }

    tracker.reset()

    return tracker
}
```

--------------------------------

### Polygon usage in a map function

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.polygon.html

Example of defining a red triangle polygon within a map function's return object for rendering on a chart.

```javascript
//within a map function's return object. This will draw a red triangle rect at each rendered
//bar's value and index.
...
 {
     graphics: {
         items: [
             {
                 tag: "Shapes",
                 key: 'tris',
                 //the polygon is a primitve
                 primitives: [
                     {
                         tag: 'Polygon',
                         points: [
                             //top
                             {
                                 x: du(d.index()),
                                 y: op(du(d.value()), '-', px(4))
                             },
                             //right
                             {
                                 x: op(du(d.index()), '+', px(4)),
                                 y: du(d.value())
                             },
                             //left
                             {
                                 x: op(du(d.index()), '-', px(4)),
                                 y: du(d.value())
                             }
                         ]
                     }
                 ],
                 fillStyle: {
                     color: '#f00'
                 }
             }
         ]
     }
 }
...
```

--------------------------------

### Define anchorRestraints

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.drawingtoolimplementation.html

Limits the valid X and Y coordinate ranges for anchors. Examples show setting relative unit offsets or absolute price ranges.

```javascript
 const MyCustomTool = {
     //...

     //anchors with these retraints can be up to 2 units apart in the Y axis and up to 14 units apart in the X axis
     anchorRestraints() {
         return [{y: 2}, {x: 14}]
     },

     //anchors with these restraints can be between the 4525 and 4535 price in the Y axis
     anchorRestraints() {
         return [{y: [4525, 4535]}]
     }

     //...
 }
```

--------------------------------

### Implement SubstantialGain Calculator

Source: https://tradovate.github.io/custom-indicators/pages/Tutorial/Graphics.html

A calculator class that uses the tracker tool to render text graphics when a substantial gain is detected.

```javascript
const {px, du, op} = require('./tools/graphics')

class SubstantialGain {
    init() {
        this.tracker = MyTracker(this.props.magicNumber)
    }

    map(d) {
        const shouldDraw = this.tracker(d.value())
        return {
            graphics: shouldDraw && {
                items: [
                    {
                        tag: "Text",
                        key: "ex",
                        point: {
                            x: op(du(d.index()), '-', px(2)),
                            y: op(du(d.value()), '-', px(58)),
                        },
                        text: "!",
                        style: { fontSize: 18, fontWeight: "bold", fill: "#5c5" },
                        textAlignment: "centerMiddle"
                    },
                ]
            }
        }
    }

module.exports = {
    name: "substantialGain",
    description: "SubstantialGain",
    calculator: SubstantialGain,
    params: {
        magicNumber: predef.paramSpecs.number(1.00, 0.25, 0.25)
    },
    tags: ["Drawings"],
}
```

--------------------------------

### Usage of RoundedRectangle in a map function

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.roundedrectangle.html

Example of defining a RoundedRectangle primitive within a graphics items array to draw a red rounded rectangle at a specific bar's index and value.

```javascript
//within a map function's return object. This will draw a red rounded rect centered at each rendered
//bar's value and index.
...
 {
     graphics: {
         items: [
             {
                 tag: "Shapes",
                 key: 'roundRects',
                 //the rounded rect is a primitve
                 primitives: [
                     {
                         tag: 'RoundedRectangle',
                         position: {
                             x: du(d.index()),
                             y: du(d.value()),
                         }
                         size: {
                             height: px(16),
                             width: px(24)
                         }
                     }
                 ],
                 fillStyle: {
                     color: '#f00'
                 }
             }
         ]
     }
 }
...
```

--------------------------------

### Define tooltips

Source: https://tradovate.github.io/custom-indicators/interfaces/drawing_tool.drawingtoolimplementation.html

Returns an array of DrawingTooltip objects to display information based on anchor coordinates.

```javascript
const MyCustomTool = {
    //...
    tooltips({ anchors }) {
        return [
            {
                coord: anchors[0],
                alignment: {
                    tag: 'predef',
                    x: 'center',
                    y: 'center'
                },
                items: [
                    {
                        content: "Hurray5",
                        key: 'hurray',
                        title: "Woot-"
                    },
                    {
                        key: 'date',
                        content: new Date()
                    },
                    {
                        key: 'number',
                        content: 500
                    },
                    {
                        key: 'delta',
                        content: {delta: anchors[1].y.value - anchors[0].y.value}
                    }
                ]
            }
        ]
    },
    //...
}
```

--------------------------------

### Draw an Ellipse in a map function

Source: https://tradovate.github.io/custom-indicators/interfaces/graphics_displayobject.ellipse.html

Example of defining an Ellipse primitive within a map function's return object to draw a red ellipse at a specific bar's index and value.

```javascript
//within a map function's return object. This will draw a red ellipse centered at each rendered
//bar's value and index.
...
 {
     graphics: {
         items: [
             {
                 tag: 'Shapes',
                 key: 'ellipses',
                 //the ellipse is a primitve
                 primitives: [
                     {
                         tag: 'Ellipse',
                         position: {
                             x: du(d.index()),
                             y: du(d.value()),
                         }
                         size: {
                             height: px(18),
                             width: px(24)
                         }
                     }
                 ],
                 fillStyle: {
                     color: '#f00'
                 }
             }
         ]
     }
 }
...
```
Tokens:
Raw