JSON starter for tying core web vitals to a custom metric in a DataDog time series visualization

datadog_core_web_vitals_plus_custom_metric_example.json

{
    "viz": "timeseries",
    "requests": [
        {
            "style": {
                "palette": "dog_classic",
                "type": "solid",
                "width": "thick"
            },
            "type": "line",
            "formulas": [
                {
                    "alias": "LCP",
                    "formula": "ewma_3(query0)"
                },
                {
                    "alias": "FCP",
                    "formula": "ewma_3(query1)"
                }
            ],
            "response_format": "timeseries",
            "queries": [
                {
                    "search": {
                        "query": "@type:view @view.url_path_group:\"/retros/?\""
                    },
                    "data_source": "rum",
                    "compute": {
                        "metric": "@view.largest_contentful_paint",
                        "interval": 14400000,
                        "aggregation": "pc75"
                    },
                    "name": "query0",
                    "indexes": [
                        "*"
                    ],
                    "group_by": []
                },
                {
                    "search": {
                        "query": "@type:view @view.url_path_group:\"/retros/?\""
                    },
                    "data_source": "rum",
                    "compute": {
                        "metric": "@view.first_contentful_paint",
                        "interval": 14400000,
                        "aggregation": "pc75"
                    },
                    "name": "query1",
                    "indexes": [
                        "*"
                    ],
                    "group_by": []
                }
            ]
        },
        {
            "style": {
                "palette": "dog_classic",
                "type": "solid",
                "width": "normal"
            },
            "type": "line",
            "formulas": [
                {
                    "alias": "Load Abandonment Percentage",
                    "formula": "(ewma_3(query0) / ewma_3(query1)) * 100"
                }
            ],
            "response_format": "timeseries",
            "on_right_yaxis": true,
            "queries": [
                {
                    "search": {
                        "query": "view @view.url_path_group:\"/retros/?\" @action.name:\"Load Abandoned\""
                    },
                    "data_source": "rum",
                    "compute": {
                        "interval": 14400000,
                        "aggregation": "count"
                    },
                    "name": "query0",
                    "indexes": [
                        "*"
                    ],
                    "group_by": []
                },
                {
                    "search": {
                        "query": "@view.url_path_group:\"/retros/?\" @type:view"
                    },
                    "data_source": "rum",
                    "compute": {
                        "interval": 14400000,
                        "aggregation": "count"
                    },
                    "name": "query1",
                    "indexes": [
                        "*"
                    ],
                    "group_by": []
                }
            ]
        }
    ],
    "yaxis": {
        "include_zero": false
    }
}