Kitto

Kitto is a framework to help you create dashboards, written in Elixir / React.

It is heavily inspired by shopify/dashing.

demo

Demo

The source for the demo dashboards can be found at: kittoframework/demo.

To start creating your own, follow the steps below.

Installation

Install the latest archive

mix archive.install https://github.com/kittoframework/archives/raw/master/kitto_new-0.1.0.ez

Create a dashboard

mix kitto.new <project_name>

Development

Install dependencies

mix deps.get && npm install

Start a kitto server (also watches for assets changes)

mix kitto.server

Try the sample dashboard at: http://localhost:4000/dashboards/sample

The dashboard grid

Kitto is capable of serving multiple dashboards. Each one of them is served from a path of the following form /dashboards/<dashboard_name>.

A dashboard consists of a Gridster grid containing React widgets.

You will find a sample dashboard under dashboards/sample.

The snippet below will place a simple Text widget in the dashboard.

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  <div class="widget-welcome"
       data-widget="Text"
       data-source="text"
       data-title="Hello"
       data-text="This is your shiny new dashboard."
       data-moreinfo="Protip: You can drag the widgets around!"></div>
</li>

The most important data attributes here are

data-widget Selects the widget to be used. See: Widgets
data-source Selects the data source to populate the widget. See: Jobs

The other data attributes are options to be passed as props to the React widget.

Jobs

By creating a new dashboard using mix kitto.new <project_name> you get a few sample jobs in the directory jobs/.

A job file is structured as follows:

# File jobs/random.ex
use Kitto.Job.DSL

job :random, every: :second do
  broadcast! :random, %{value: :rand.uniform * 100 |> Float.round}
end

The above will spawn a supervised process which will emit a server-sent event with the name random every second.

Widgets

Widgets live in widgets/ are compiled using Webpack and are automatically loaded in the dashboards. Assets are rebuilt upon change in development, but have to be compiled for production. See webpack.config.js for built options.

Example widget (widgets/text/text.js)

import React from 'react';
import Widget from '../../assets/javascripts/widget';

import './text.scss';

Widget.mount(class Text extends Widget {
  render() {
    return (
      <div className={this.props.className}>
        <h1 className="title">{this.props.title}</h1>
        <h3>{this.state.text || this.props.text}</h3>
        <p className="more-info">{this.props.moreinfo}</p>
      </div>
    );
  }
});

Each widget is updated with data from one source specified using the data-source attribute.

Deployment

Compile the project

MIX_ENV=prod mix compile

Compile assets for production

npm run build

Start the server

MIX_ENV=prod mix kitto.server

Using Docker

By scaffolding a new dashboard with:

mix kitto.new

you also get a Dockerfile.

Build an image including your code, ready to be deployed.

docker build . -t my-awesome-dashboard

Spawn a container of the image

docker run -i -p 127.0.0.1:4000:4000 -t my-awesome-dashboard

Contributing

Run the Tests

mix test

About the name

The road to Erlang / Elixir starts with Kitto.