Using some grooscript tools, groovy templates and traits

gistfile1.groovy

trait Colorable {
    static COLOR_CLASSES = [
            'navy','blue','aqua','teal','olive','green','lime','yellow', 'orange',
            'red','fuchsia','purple','gray','maroon'
    ]
}

import org.grooscript.builder.HtmlBuilder
import org.grooscript.jquery.GQuery
import org.grooscript.jquery.GQueryImpl

trait Visible {
    String selector
    Closure html
    GQuery gquery = new GQueryImpl()

    void draw() {
        if (selector) {
            gquery.call(selector).html(HtmlBuilder.build(html))
        }
    }
}

class Counter implements Visible, Colorable {

    def value

    String randomColor() {
        COLOR_CLASSES[new Random().nextInt(COLOR_CLASSES.size())]
    }

    Counter(String where, numberValue) {
        value = numberValue
        html = {
            div(class: "widget bg-${randomColor()}") {
                p 'Number of books'
                em numberValue
                a(href:"#", class:"button small secondary", onclick: 'bookPresenter.showBooks()') {
                    yield 'Show'
                }
            }
        }
        selector = where
        draw()
    }

    def setValue(newValue) {
        value = newValue
        gquery.call('#counter em').text value
    }
}

class Book {
    BigInteger id
    String title
    String author
    int year
}

trait Chart {
    @GsNative
    def pieChart(selector, data) {/*
        new Chartist.Pie(selector, gs.toJavascript(data));
    */}
}

class BookPresenter implements Chart {

    List<Book> books
    String urlBooks
    String booksListSelector
    Counter counter
    GQuery gQuery = new GQueryImpl()

    def initBooks() {
        gQuery.doRemoteCall(urlBooks, 'GET', null, { listBooks ->
            books = listBooks
            counter.value = books.size()
            drawPie()
        }, { msg ->
            println 'Error initBooks:'+msg
        })
    }

    def showBooks() {
        if (books) {
            def data = [listBooks: books, searchString: '']
            gQuery(booksListSelector).html Templates.applyTemplate('bookList.gtpl', data)
            gQuery.onChange('marking', this.&changeSearch)
        }
    }

    def changeSearch(searchText) {
        def data = [listBooks: books, searchString: searchText]
        gQuery('.tableSearch').html Templates.applyTemplate('bookTable.gtpl', data)
    }

    def close() {
        gQuery(booksListSelector).html ''
    }
    
    private drawPie() {
        def groups = books.
            sort(false) { it.year }.
            groupBy { it.year }
        def data = [
            labels: groups.collect { it.key }.reverse(),
            series: groups.collect { it.value.size() }.reverse()
        ]
        pieChart('.ct-chart', data);
    }
}