Skip to main content

Petstore: Developer Pages

Under the Developer tab the petstore keeps a set of pages that exercise parts of the console framework rather than the pet store itself. Three of them are about charts and data: Charts, Data sources and Dashboard. All three are builder-only pages. Each is written as a PageSpec in Java and has no FreeMarker twin and no navigation node of its own; all three use the Developer tab, and DevRest lists them as children. The other Developer pages have their own tour pages: Custom Cards, Themes, Rendering Flavors and Secure.

Charts​

ChartsRest (/console/dev/charts) draws a line chart, trend ("Orders this week"), fed by /console/dev/charts/daily. The chart has Markers and Thresholds decorators and publishes a click on a point to the topic app.day-picked. Below it, a client-mode days table loads the same rows, and its ribbon has a "Highlight Monday" item that publishes a highlight command to the topic cmd:trend, which the chart executes. See Chart Cards for the chart card and its decorators.

Data sources​

DataRest (/console/dev/data) shows a chart that reads a large series from a data source instead of a single JSON response. /console/dev/data/orders serves hourly CSV for a requested window, limited to 31 days. The page declares a DataSourceDef for it: CSV, chunked by day and cached in IndexedDB, so panning back over a day already fetched does not hit the server again. The script data.js publishes the visible range as a topic, and the chart ordersChart follows it.

Dashboard​

DashboardRest (/console/dev/dashboard) is a configurable dashboard over the same pieces. A ?variant= query parameter takes ok, slow, truncated, error or right, which choose how /console/dev/dashboard/series/{variant} answers, so you can see how the page behaves when the data source is slow, cut short or failing. A ?v= parameter sets the persist version. The rail (left, or right for variant=right) has range, search, choice, card and custom sections, and dashboard.js supplies the custom one. The grid has two columns holding three chart panels, and the range, search, reasons and zoom state persists and can be shared as a link.

Builder-only pages​

There is no template to compare against, so the builder method is the whole definition and ?builder changes nothing. Because they have no twin, the three paths are not in PetstorePages_ContractTest.PAGES, the list the twin and vocabulary tests walk. They are in a separate list, PetstorePages_ContractTest.BUILDER_ONLY, and each page's own test class (ChartsRest_Test, DataRest_Test, DashboardRest_Test) asserts its contract. A trimmed example from DevPageBuilders.charts:

PageSpec.create().tab("dev").toolkit("views")
    .card(ChartDef.line("trend").title("Orders this week").src(rows).x("day")
        .series("placed", "Placed").series("delivered", "Delivered")
        .decorate(Thresholds.at(6).label("Target").tone("ok"))
        .on("click", "app.day-picked")
        .toCardSpec())
    .table(TableSpec.create("days").dataMode(DataMode.CLIENT).dataUrl(rows), "Days");

Source: ChartsRest, DataRest, DashboardRest and DevRest in juneau-petstore/juneau-petstore-core/src/main/java/org/apache/juneau/petstore/console/dev/; DevPageBuilders in .../console/pages/; data.js and dashboard.js under the matching console/dev/ resources directory.

Tests: ChartsRest_Test, DataRest_Test, DashboardRest_Test, PetstoreChart_BrowserTest, PetstoreData_BrowserTest, PetstoreDashboard_BrowserTest.

See also​