use Sparklines - Points of Interest to mark 'First and Last' but it's not working

[hugo2046]

Want to Use Sparklines - Points of Interest to Mark First and Last, But It's Not Working, What Could Be the Reason? How Can I Construct Effective Code for This?

from st_aggrid import AgGrid, JsCode

from typing import List, Tuple
import pandas as pd
import numpy as np

def create_data(num: int = 20, begin_dt: str = "2020-01-01") -> List[Tuple]:
    values: np.ndarray = np.random.randn(num)
    dates: pd.DatetimeIndex = pd.date_range(begin_dt, periods=num, freq="D")
    return [[d.strftime("%Y-%m-%d"), v] for d, v in zip(dates, values)]

Name: List[str] = [
    "Agilent Technologies Inc. Common Stock",
    "American Airlines Group Inc. Common Stock",
    "Advance Auto Parts Inc Advance Auto Parts Inc W/I",
    "Apple Inc. Common Stock",
]

df: pd.DataFrame = pd.DataFrame(
    {
        "Name": Name,
        "Price": [create_data() for _ in range(4)],
        "Trend": [create_data() for _ in range(4)],
        "Pct": [create_data(5) for _ in range(4)],
    }
)

lineMarkerFormatter = JsCode(
    """
    function lineMarkerFormatter(params){
    const { first, last } = params;

    return {
        size: first || last ? 5 : 3,
        fill: first || last ? '#9a60b4' : 'skyblue',
        stroke: first || last ? '#9a60b4' : 'skyblue'
    }
    }
    """
)

gridOptions = {
    "columnDefs": [
        {"field": "Name", "minWidth": 350},
        {
            "field": "Price",
            "cellRenderer": "agSparklineCellRenderer",
            "cellRendererParams": {
                "sparklineOptions": {
                    "type": "line",
                    "line": {"stroke": "orange", "strokeWidth": 2},
                    "axis": {"type": "category"},
                },
                "marker": {
                    "formatter": lineMarkerFormatter,
                },
            },
        },
        {
            "field": "Trend",
            "cellRenderer": "agSparklineCellRenderer",
            "cellRendererParams": {
                "sparklineOptions": {
                    "type": "area",
                    "line": {"stroke": "rgb(77,89,185)", "strokeWidth": 1},
                    "fill": "rgba(77,89,185, 0.3)",
                    "axis": {"type": "category"},
                }
            },
        },
        {
            "field": "Pct",
            "cellRenderer": "agSparklineCellRenderer",
            "cellRendererParams": {
                "sparklineOptions": {
                    "type": "column",
                    "column": {"width": 2, "stroke": "rgb(79, 129, 189)"},
                    "axis": {"type": "category"},
                }
            },
        },
    ]
}

AgGrid(
    df,
    gridOptions=gridOptions,
    fit_columns_on_grid_load=True,
    allow_unsafe_jscode=True,
    enable_enterprise_modules=True,
)