Skip to content

Latest commit

 

History

History
99 lines (82 loc) · 3.33 KB

tiles.rst

File metadata and controls

99 lines (82 loc) · 3.33 KB

Tiles

Every tile consists of an obligatory .html file and two optional .css and .js files. All three files belonging to a tile should have the same name that corresponds with the tile name – e.g. with the pie_chart tile these are pie_chart.html, pie_chart.css and pie_chart.js files respectively.

Customizing tiles

If you want to modify a tile (e.g. change a CSS attribute, which obviously cannot be done via API), copy a desired file in the folder of tiles delivered with the application (i.e. <path_to_your_virtualenv>/lib/python2.7/site-packages/tipboard/tiles), paste it in your tile folder (i.e. ~/.tipboard/custom_tiles) and edit according to your needs.

Files in your custom_tiles folder take precedence over those shipped by default with the application and thus you can easily replace desired elements (e.g. if you want to change the text color, just copy and edit the .css file – without touching .html and .js files). We plan to introduce a command simplifying this process in the future.

Color palette

Color palette used by Tipboard's tiles is defined as shown in the table below. To retain consistency, we strongly suggest sticking to them while customizing tiles.

Value Name
#000000 black
#FFFFFF white
#25282D tile_background
#DC5945 red
#FF9618 yellow
#94C140 green
#12B0C5 blue
#9C4274 violet
#EC663C orange
#54C5C0 naval

Common elements

  • tile's content (data key) and its configuration (value key) should be send as two separate requests - once you have established desired configuration it does not make much sense to send it over and over again;
  • in order to reset tile's config, you just send an empty value key (e.g. value = {}).

Library of available tiles

In the following pages we present a "library" of available tiles (i.e. those bundled with the application), which should serve as a specification how to send data to them and how to set up its configuration options.

.. toctree::
   :maxdepth: 2

   tile__text
   tile__pie_chart
   tile__line_chart
   tile__cumulative_flow
   tile__simple_percentage
   tile__listing
   tile__bar_chart
   tile__fancy_listing
   tile__big_value
   tile__just_value
   tile__advanced_plot
   tile__norm_chart

Note

In order to keep brevity, all examples presented in specifications above do not include any escape characters. Therefore, it's up to you to insert them where necessary.

And also, remember to set all the elements in angle brackets (e.g. <api_key>, <tile_id> etc.) to reflect your configuration.