This is a simple html page that uses qdt-components (1.1.62).

Html

            < head>
                < script type="text/javascript" src="qdt-components.js">< /script>
            < /head>
            < body>
                < div id="qdt1">< /div>
            < /body>
        
Javascript

            var qConfig = {
                "config": {
                    "host": "your-server",
                    "secure": true,
                    "port": 443,
                    "prefix": "",
                    "appId": "133dab5d-8f56-4d40-b3e0-a6b401391bde"
                },
                "connections": { 
                    "vizApi": true, 
                    "engineApi": false 
                }
            }
            var viz2 = {
                type: 'QdtViz',
                props: {
                    type: 'table',
                    cols: [
                        'Case Owner',
                        'Employee Status',
                        "=dual(floor((vToday - [Employee Hire Date])/365) & 'y ' & floor(((vToday - [Employee Hire Date])/365 - floor((vToday - [Employee Hire Date])/365)) * 12) & 'm', vToday - [Employee Hire Date])",
                        "=Count( {$} Distinct %CaseId )",
                        "=Count( {$<[Case Is Closed] ={'True'} >} %CaseId )",
                        {
                            "qDef": {
                                "qLabel": "Total",
                                "qDef": "Count(Distinct [%CaseId])"
                            }
                        },
                    ],
                    options: {
                        showTitles: true,
                        title: 'Resource Details',
                    },
                    height: '300px',
                }
            }
             var QdtComponent = new window.QdtComponents(qConfig.config, qConfig.connections);
             var element = document.getElementById('qdt1');
             QdtComponent.render(viz2.type, viz2.props, element);