From 6be7b6505c54b4cf3c0dc719c59d80e73ff9f01b Mon Sep 17 00:00:00 2001 From: Prateeksha Singh Date: Tue, 29 May 2018 11:05:27 +0530 Subject: [PATCH] [docs] add aggregation/sliced charts --- docs/_sidebar.md | 6 +- docs/basic/aggr_sliced_diags.md | 79 +++++++++-- docs/basic/trends_regions.md | 2 +- docs/data.js | 126 ++++++++++++++--- docs/demoBuilder.js | 6 +- docs/index.html | 16 ++- docs/reference/api.md | 0 docs/reference/configuration.md | 226 +++++++++++++++++++++++++++++++ docs/update_state/modify_data.md | 32 ++++- 9 files changed, 458 insertions(+), 35 deletions(-) create mode 100644 docs/reference/api.md create mode 100644 docs/reference/configuration.md diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 1b26ae4..f4cceed 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -7,11 +7,11 @@ * [Tooltips and Annotations](basic/annotations.md) * [Stacked and Mixed Charts](basic/stacked_and_mixed.md) -* Aggregation Charts - * [Pies and Percentages](basic/aggr_sliced_diags.md) +* Pies and Percentages + * [Aggregation Charts](basic/aggr_sliced_diags.md) * Update state - * [Modify data](update_data/modify_data.md) + * [Modify data](update_state/modify_data.md) * Events * [Navigation]() diff --git a/docs/basic/aggr_sliced_diags.md b/docs/basic/aggr_sliced_diags.md index 8dedd3d..b38c7ca 100644 --- a/docs/basic/aggr_sliced_diags.md +++ b/docs/basic/aggr_sliced_diags.md @@ -1,25 +1,86 @@ -## AKA Sliced Diagrams +## Also called Sliced Diagrams Another family of charts, the aggregation charts accumulate the value at a data point across the multiple datasets. -**The data format stays the same.** +**The data format stays the same, with single or multi datasets.** -## Pie chart +#### Pie chart Perhaps the most well-known representation of data slices are Pie charts: ```js - +type: 'pie' ``` + + - -## Percentage Charts FTW +#### Percentage Charts FTW Pies have received some [criticism]() for data perception; we are much better at parsing sizes in a single dimension rather than an area. That's why, the much leaner `percentage` chart can come in handy: ```js type: 'percentage' ``` + + + +#### Limiting the slices +When there are too many data values to show visually, it makes sense to bundle up the least of the values as a cumulated data point, rather than showing tiny slices. This can be done by defining the maximum number of slices to be shown. + +```js +maxSlices: 7, +``` + + -## Limiting the slices -When there are too many to make sense +#### Configuring percentage bars +Some attributes of a percentage bar can be redefined; like its height and the depth of it's shadow. -11 +```js +barOptions: { + height: 15, // default: 20 + depth: 5 // default: 2 +} +``` + + diff --git a/docs/basic/trends_regions.md b/docs/basic/trends_regions.md index 2ca64ec..aca1e3a 100644 --- a/docs/basic/trends_regions.md +++ b/docs/basic/trends_regions.md @@ -136,7 +136,7 @@ Here's a demo using different combinations of the line options. ]"> -Next up, we'll play around with more than one datasets play out in charts. +Next up, we'll start to annotate the data in charts. diff --git a/docs/data.js b/docs/data.js index 2ee3fed..f013d0a 100644 --- a/docs/data.js +++ b/docs/data.js @@ -39,25 +39,96 @@ const fireballOver25 = [ [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12] ]; -const barCompositeData = { - labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", - "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - datasets: [ - { - name: "Over 25 reports", - values: fireballOver25[9], - }, - { - name: "5 to 25 reports", - values: fireball_5_25[9], - }, - { - name: "2 to 5 reports", - values: fireball_2_5[9] - } - ] +// https://stackoverflow.com/a/29325222 +function getRandomBias(min, max, bias, influence) { + const range = max - min; + const biasValue = range * bias + min; + var rnd = Math.random() * range + min, // random in range + mix = Math.random() * influence; // random mixer + return rnd * (1 - mix) + biasValue * mix; // mix full range and bias +} + +/** + * Shuffles array in place. ES6 version + * @param {Array} array An array containing the items. + */ +function shuffle(array) { + // Awesomeness: https://bost.ocks.org/mike/shuffle/ + // https://stackoverflow.com/a/2450976/6495043 + // https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1 + + for (let i = array.length - 1; i > 0; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + + return array; +} + +let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", + "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", + "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"]; + +const baseLength = 10; +const fullLength = 30; + +let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1)); +let updateDataAllValues = Array.from({length: fullLength}, getRandom); + +// We're gonna be shuffling this +let updateDataAllIndices = updateDataAllLabels.map((d,i) => i); + +let getUpdateArray = (sourceArray, length=10) => { + let indices = updateDataAllIndices.slice(0, length); + return indices.map((index) => sourceArray[index]); }; +let currentLastIndex = baseLength; + +function getUpdateData() { + shuffle(updateDataAllIndices); + let value = getRandom(); + let start = getRandom(); + let end = getRandom(); + currentLastIndex = baseLength; + + return { + labels: updateDataAllLabels.slice(0, baseLength), + datasets: [{ + values: getUpdateArray(updateDataAllValues) + }], + yMarkers: [ + { + label: "Altitude", + value: value, + type: 'dashed' + } + ], + yRegions: [ + { + label: "Range", + start: start, + end: end + }, + ], + }; +} + +function getAddUpdateData() { + if(currentLastIndex >= fullLength) return; + + // TODO: Fix update on removal + currentLastIndex++; + let c = currentLastIndex -1; + + return [updateDataAllLabels[c], [updateDataAllValues[c]]]; + + // updateChart.addDataPoint( + // updateDataAllLabels[index], [updateDataAllValues[index]] + // ); +} + + const sampleData = { "0": { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], @@ -174,5 +245,24 @@ const sampleData = { ] }, - "bar-composite-data": barCompositeData + "bar-composite-data": { + labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: [ + { + name: "Over 25 reports", + values: fireballOver25[9], + }, + { + name: "5 to 25 reports", + values: fireball_5_25[9], + }, + { + name: "2 to 5 reports", + values: fireball_2_5[9] + } + ] + }, + + "get-update-data": getUpdateData, } diff --git a/docs/demoBuilder.js b/docs/demoBuilder.js index 8de7786..7fca6a0 100644 --- a/docs/demoBuilder.js +++ b/docs/demoBuilder.js @@ -166,7 +166,11 @@ class docSection { value: o.activeState ? o.activeState : 0, // (max - min)/2 onInput: (value) => { - args[o.path[0]][o.path[1]] = value; + if(o.path[1]) { + args[o.path[0]][o.path[1]] = value; + } else { + args[o.path[0]] = value; + } this.demos[demoIndex] = new this.LIB_OBJ(figure, args); } diff --git a/docs/index.html b/docs/index.html index f4f785b..0eed75f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -92,6 +92,7 @@