Cool Stuff - Sales - How it works

Overview

Cool Charts is a single page web application (SPA) hosted on IIS. It provides bar and pie chart analysis of sales data using cross filters. Charts are rendered from a multi-dimensional dataset. The dataset is loaded from the Bi4cloud API into the browser DOM at SPA startup and is manipulated using javascript. The range of sales data loaded is dependant on the date required selected by the user in the “Sales by Date” dropdown.

Development

The development code is hosted at https://bitbucket.org/jason_hilsdon/bifor/src/master/CoolCharts/ . The CoolCharts development SPA environment is OS generic and feature development can be done on any computer that supports node.js. Setup of development environment is described here: https://bitbucket.org/jason_hilsdon/bifor/src/899fa30016af09cb5b11d60014d1d0b9e21547c1/CoolCharts/README.md?at=feature%2FCoolChartsRefresh

For production, minified javascript libraries & css files from the CoolCharts development repository are updated in the js & css repository folders of https://bitbucket.org/jason_hilsdon/bifor/src/master/Web%20service/irViz/. The source of the development index.html is used to update the irViz template ttViz.tt

The sales data is sourced using Bi4cloud REST API which is documented here: https://bi4cloudvisualisationapi.docs.apiary.io/

Javascript Dependencies

Script/Library	Version	Notes

Script/Library	Version	Notes
sales_viz.js	0.1.18	Code which renders the SPA UI and manages interactions between the user and the browser DOM & underlying filtering/rendering javascript libraries.
D3	4.13.0	D3.js is a JavaScript library used to create interactive visualizations in the browser. The D3 library allows manipulation elements of a webpage in the context of a dataset. These elements can be HTML, SVG, or Canvas elements, and can be introduced, removed, or edited according to the contents of the dataset.
DC.js	4.0.0	DC.js is a charting library built on top of D3.js and works natively with crossfilter. DC.js renders the charts in CoolCharts.
crossfilter	1.5.23	Crossfilter is a JavaScript library for creating & exploring large multi-dimensional datasets in the browser. In CoolCharts, Sales data is converted to a crossfilter dataset to allow analysis by DC.js.
bootstrap	3.4.1	Bootstrap is a CSS framework for developing responsive, mobile-first front-end web applications. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
jquery	3.5.1	jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is utilised in CoolCharts to perform DOM manipulation and provide responsiveness for bootstrap.
mustache	2.2.1	mustache.js is a zero-dependency implementation of the mustache template system in JavaScript. It is used in CoolCharts to dynamically render the TopN menu widget.