resposta

index.html

     <div data-tabela></div>

ListaNegociacoes.js

    get volumeTotal(){
        return this.#listaNegociacoes.reduce((total, n) => total += n.volume, 0.0)
    }

NegociacoesView.js

class NegociacoesView{
    #elemento
    constructor(elemento){
        this.#elemento = elemento
    }

    #template(model){return `
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>DATA</th>
                    <th>QUANTIDADE</th>
                    <th>VALOR</th>
                    <th>VOLUME</th>
                </tr>
            </thead>

            <tbody>
                ${model.negociacao.map(n => `
                    <tr>
                        <td>${DateHelper.dataParaTexto(n.data)}</td>
                        <td>${n.quantidade}</td>
                        <td>${n.valor}</td>
                        <td>${n.volume}</td>
                    </tr>
                `).join(" ")}
            </tbody>
                    <td colspan="3">Total:</td>
                    <td>${model.volumeTotal}</td>
            <tfoot>
            </tfoot>
        </table>
    `}

    update(model){
        this.#elemento.innerHTML = this.#template(model)
    }
}

NegociacaoController.js

class NegociacaoController {
    #inputData;
    #inputQuantidade;
    #inputValor;
    #form;
    #listaNegociacoes;
    #negocicoesViews;

    constructor() {
        let $ = document.querySelector.bind(document);

        this.#form = $('.form');
        this.#inputData = $('#data');
        this.#inputQuantidade = $('#quantidade');
        this.#inputValor = $('#valor');
        this.#listaNegociacoes = new ListaNegociacoes()
        this.#negocicoesViews = new NegociacoesView($("[data-tabela]"))

        this.#negocicoesViews.update(this.#listaNegociacoes)
    }

    adiciona(evento) {
        evento.preventDefault();

        this.#listaNegociacoes.adiciona(this.#criarNegociacao())

        this.#negocicoesViews.update(this.#listaNegociacoes)

        this.#limpaCampo();
    }

    #criarNegociacao() {
        return new Negociacao(DateHelper.textoParaData(this.#inputData.value), this.#inputQuantidade.value, this.#inputValor.value)
    }

    #limpaCampo() {
        this.#form.reset();
        this.#inputData.focus();
    }

}

Ficou alguma coisa errada nesse código ??