Please add a tutorial on adding an indicator

[codebeaulieu]

I've got the charts up and running locally. I've plugged in Polygon to get real time data, however, I am unable to get a new indicator to draw on the chart.

I've added a new endpoint to the main controller:

    [HttpGet("ZigZag")]
    public async Task<IActionResult> GetZigZag()
    {
        try
        {
            var candles = await this.PolygonService.GetCandles("TSLA", TimeInterval.Day, 300);
            var quotes = candles.ConvertToQuotes();
            IEnumerable<ZigZagResult> results =
                quotes.GetZigZag(EndType.Close)
                    .Where(x => x.Date >= dateStart);

            return Ok(results);
        }
        catch (ArgumentOutOfRangeException rex)
        {
            return BadRequest(rex.Message);
        }
    }

Then I added an entry into the indicator meta:

// ZigZag
            new IndicatorList
            {
                Name = "ZigZag",
                Uiid = "ZigZag",
                LabelTemplate = "ZigZag([P1])",
                Endpoint = $"{baseUrl}/ZigZag/",
                Category = "pivots",
                ChartType = "overlay",
                Parameters = new List<IndicatorParamConfig>
                {
                    new IndicatorParamConfig {
                        DisplayName = "Percent Change",
                        ParamName = "percentChange",
                        DataType = "number",
                        Order = 1,
                        Required = true,
                        DefaultValue = 5,
                        Minimum = 1,
                        Maximum = 10
                    }
                },
                Results = new List<IndicatorResultConfig>{
                    new IndicatorResultConfig {
                        LabelTemplate = "ZigZag([P1])",
                        DisplayName = "ZigZag",
                        DataName = "zigzag",
                        DataType = "number",
                        LineType = "solid",
                        DefaultColor = standardBlue
                    }
                }
            },

I do have 168 results from the ZigZag output:

This is the result when I add the indicator to the chart.

Could you please provide guidance on getting this indicator to draw?
What are the steps, from a high level to make an indicator draw?

If you can guide me on how to successfully add a new indicator, I'll be happy to write the tutorial.

[DaveSkender]

So far, everything you've done looks directionally right: 1) add the API endpoint and 2) add the chart metadata -- is mostly all you'd need to do. Adding your own data feed adds one additional challenge around handling date ranges. The .Where(x => x.Date >= dateStart); in the API was really tailored for the static dataset of the demo data.

For troubleshooting, I think the next thing I'd do is:

1. Use Dev Console in your browser and check the "Network" calls to see if the API data is hitting the browser and that the "data name" matches what you see there.
2. Check the date range on the API data vs. what's actually shown on the chart. Could be something as simple as the chart visually being out of range.

[DaveSkender]

The next thing in my backlog for this demo site is to add an updating data-source, so I'll be looking at this particular issue more deeply. If you want to help with those instructions to add indicators; I'd be super happy for that contribution; otherwise, I'll add it, since I do want the demo site to cover all the indicators in the library and if we can make it easier for other contributors to help (or extend on their own), that'd be a good thing to do.

[DaveSkender]

Pull Request #181 shows the code diff of how to add an indicator. One unique thing that I have to improve here is how to handle enum parameters. As you can see, I just made two endpoints, one for each enum option. Not ideal, but it works as an example.

[DaveSkender]

Dan, you okay with the above PR as an example? I’ll try to make this repo more reusable opportunistically going forward. I had really only set it up as a rough demo site initially, so there might be some aspects that don’t work well out of the box for real world scenarios.

[codebeaulieu]

@DaveSkender Yeah, that looks great. Sorry for lack of response, this will be a weekend type project for me.