Draw with createAnnotate on the closest timestamp?

[DanielMartini]

Hello!

First of all, this library is awesome, really good job :)

I have a doubt: I'm trying to draw rectangles when a operation is done (buy or sell) and i'm trying to use createAnnotation for it, but as the timestamp candle doesn't match with the operation timestamp, nothing is draw, I saw somebody talking in older issues about this #143, #67, but I dont know how they solved this, is there something i'm missing? or do I have to calculate the closest candle on my own?

Thank you so much ✌️

[Julien-R44]

I would love to see this implemented in the core lib as well. If it's something @liihuu agrees with I can propose a PR. I think we should always get the nearest data index of the annotation's timestamp to display it.

Actually you can solve it like this :

    const createAnnotation = ts => {
      const dataIdx = this.klineChart._chartPane
        .chartData()
        .timeScaleStore()
        .timestampToDataIndex(ts)

      const timestamp = this.klineChart._chartPane
        .chartData()
        .timeScaleStore()
        .dataIndexToTimestamp(dataIdx)

      return {
        point: {
          timestamp
        },
        styles: {
          position: 'bottom',
          offset: [-80, 0],
          symbol: {
            type: 'diamond',
            size: 8,
            color: '#ff0000',
            activeSize: 15,
            activeColor: '#ff00ff'
          }
        }
      }
    }

  const dateOfYourBuySellOperation = new Date().getTime()
  const annotation =  createAnnotation(dateOfYourBuySellOperation)
  // then add annotation to your chart with `klinechart.createAnnotation`

[DanielMartini]

I made a workaround to find the nearest timestamp inside the array given with a binary search, might be useful to someone if you dont want to edit the library 🤷

the function probably could be written simpler, but this is it

// Makes binary search through the array, searching for the element, if it's not found picks the one is closer to him
export const binarySearchCloser = (array: Array<number>, element: number, originalArr: Array<number>): number => {
    let middleElement = Math.floor(array.length / 2);

    if (array[middleElement] === element) {
        return array[middleElement];
    } else if (element > array[middleElement] && array.length > 1) {
        return binarySearchCloser(array.splice(middleElement, array.length), element, originalArr);
    } else if (element < array[middleElement] && array.length > 1) {
        return binarySearchCloser(array.splice(0, middleElement), element, originalArr);
    } else {
        // We check to which one are we closer
        let index = originalArr.indexOf(array[middleElement]);
        return array[middleElement] - element >= originalArr[index + 1] - element ? array[middleElement] : originalArr[index + 1];
    }
}

if someone uses it, remember to check that the timestamp passed to the function has to be greater or equal than the lowest timestamp inside the array, if not, always first element will be as the closest one

[liihuu]

Before doing this feature, what I think is that these data need to be processed by the server, including rounding the timestamp, and the chart is just for drawing.