As an intern at Spantree, I, Amanda Wang, decided to work with Dashing and create a dashboard for Spantree. I wasn't really sure how we wanted the dashboard to turn out, but I'm glad that all these widgets work. At first, Dashing started off very confusing for me mostly because Dashing didn't have enough documentation for me to truly understand how Dashing works. Looking up for solutions and explanations for Dashing became a hassle. Some people use Dashing, but fewer people have created clear documentation on their code.

Many of the Additional Widgets that Dashing provided didn't usually work and very few of the widgets provided a clear explanation. Therefore, I had a hard time with the code and used up a lot of my time just figuring out how I should integrate the code of these shared widgets. Therefore, I hope that this blog is clear enough that you have an idea on what to do with your Dashing Dashboard.

/dashboards

This folder allows you to edit which kinds of widgets show up on your dashboard in a certain layout. Typically, you would usually need the sample.erb file when it comes to adding a new widget and changing the layout of the widgets.

To save changes to the layout, move the widgets to your liking and then copy the code that is pops up on your screen and paste that in front of the code in the sample.erb file.

To add a new widget, insert a new <li> tag between the <ul> ruby <li data-row="1" data-col="1" data-sizex="WIDTH" data-sizey="LENGTH"> <div data-id="WIDGET_NAME" data-view="WIDGET_TYPE" data-CLASSES = "CHANGES" ...> </div> </li>

Here's an example of the previous code: ruby <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div data-id="toggl_todays_hours" data-view="List" data-unordered="true" style="background-color: #e75050;" data-title="Toggl This Week" data-moreinfo="total # of hours"> </div> </li>

/jobs

This folder is where you can have the widget update every so often -- the place where you code the functionality of a widget(s).

Coding for this portion is not strict at all. There are just a few lines of essential code to get your widget to update.

# remember to bundle if there are any new gems that haven't been updated.
require 'REQUIRED_GEM'

#insert code

# '1s' is 1 second. For minute, use 'm'.
SCHEDULER.every '1s' do
  # insert code
  send_event('WIDGET_NAME', {CLASS: UPDATED_DATA})
end

/widgets

This folder is where the entire look of the WIDGET-TYPE will be coded.

Make a folder that has these 3 kinds of files: a Coffeescript, an HTML, and a SCSS.

FILE_NAME.coffee

This is where some limited functions can be created for the widget.

This is a template for the file. ```coffee class Dashing.WIDGET_TYPE extends Dashing.Widget

ready: -> # The function will update every 1000 milliseconds. setInterval(@firstFunction, 1000) # ... # more code if needed.

firstFunction: => # code @set('DATA-BIND-NAME', UPDATE_DATA) ```

FILE_NAME.html

This is how the data-bind variables are going to be displayed overall.

An example of this is: html <h1 data-bind="title"></h1> <h2 data-bind="name"></h2>

Authentication

Authentication for Dashing is mildly confusing. All edits are in config.ru, the file that sits in the dashboard folder you have set up. For the most part, the setup is fairly simple as long as you follow the instructions.

For the Basic HTML Authentication, be sure to edit 'admin', 'admin' to environment variables in a shell file.

@auth.provided? && @auth.basic? && @auth.credentials && @auth.credentials == ['admin', 'admin']

Unseen Information

There is a lot of information you don't want people knowing (API keys, tokens, passwords, etc.). Therefore, making a shell file should be something you want to use.

First, make a shell file in the folder for your project. Maybe a name like important_information.sh.

Next, put in all of your information like so: shell export IMPORTANT_INFORMATION_FROM_THE_SHELL_FILE = "important information" export MORE_INFO = "gibberish"

When using fragile information, you can just use an environment variable. ruby important information = ENV['IMPORTANT_INFORMATION_FROM_THE_SHELL_FILE']

Finally, in Terminal, type in the following commands:

$ . important_information.sh
$ dashing start

If you're using Oh My Zsh, do source important_information.sh.