View on GitHub

AnyChart Clojure and ClojureScript Integration Sample

The sample is a basic sales dashboard, with data stored in several tables and shown on a website as several JavaScript bar, line and pie charts, along with ability to filter data and update charts on the fly.

Overview

This sample shows a sample dashboard done with AnyChart JavaScript Charting Framework, Clojure backend, ClojureScript frontend and PostgreSQL database.

Requirements

Database Setup

# login to PostgreSQL
sudo -u postgres psql

# CREATE user and database
CREATE USER anychart_user WITH PASSWORD 'anychart_pass';
CREATE DATABASE anychart_sample;
GRANT ALL PRIVILEGES ON DATABASE anychart_sample TO anychart_user;

# exit psql
\q

# run dump (ensure you are in project root folder)
psql anychart_sample < dump.sql

Rebuilding ClojureScript

lein cljsbuild once prod        # for production
lein cljsbuild once dev         # for development

Running locally

lein run

After that project will be available at http://localhost:9197

Deploying

You can use uberjar for deploy:

lein uberjar

Stanadalone JAR file will appear in target folder.

Project Structure

anychart-clojure-sample/
    resources/
        public/
            js/
                main.js             # generated JS code
                main.min.js         # optimized generated JS code
    src/                            # Backend Clojure code
        sample/
            db/
                core.clj            # DB component
                data.clj            # DB data functions
            web/
                core.clj            # Web component
                routes.clj          # Compojure routes and handlers
            core.clj
        templates/
            index.selmer            # HTML template
    src-cljs/                       # Frontend ClojureScript code
        sample/
            charts.cljs             # AnyChart charts creation      
            core.cljs               # Initalization
            data.cljs               # Function for work with data
            ui.cljs                 # Top control panel
        exnters.js
    dump.sql                        # PostgreSQL dump
    project.clj                     # Main project settings

Technologies

Language - Clojure / ClojureScript
Build tool - Leiningen
Database - PostgreSQL
HTTP server - HTTP Kit
Template Engine - Selmer
UI library - Reagent