Merge pull request #1440 from plotly/indicator2

modifications on indicator page

Author: Mahdis-z

_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template3.html renamed to _posts/plotly_js/financial/indicator1/2019-07-29-above-other-traces.html

@@ -1,20 +1,23 @@
 ---
-name: Showing Information Above Your Chart
+name: Showing Information above Your Chart
 plot_url: https://codepen.io/plotly/embed/OKpLYv/?height=600&theme-id=15263&default-tab=result
 language: plotly_js
 suite: indicator
-order: 3
+order: 4
 sitemap: false
 arrangement: horizontal
 markdown_content: |
 
     Another interesting feature is that indicator trace sits above the other traces (even the 3d ones). This way, it can be easily used as an overlay as demonstrated below:
 ---
-var data = [{domain: {y: [0, 1], x: [0.25, 0.75]}, title: {"text": "Users online"},
-    type: "indicator", mode: "number+delta", delta: {"reference": 512, "valueformat": ".0f"},
-    ticker: {showticker: true}, vmax: 500, value: 492}, {name: "Users online",
-    y: [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]}];
+var data = [
+  {
+    type: "indicator", mode: "number+delta", value: 492,
+    delta: {"reference": 512, "valueformat": ".0f"}, title: {"text": "Users online"},
+    ticker: {showticker: true}, vmax: 500,  domain: {y: [0, 1], x: [0.25, 0.75]}
+  },{
+    y: [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]
+  }];
 
-var layout = {width: 500, height: 500, xaxis: {range: [0, 62]}};
-
-Plotly.newPlot(gd,data,layout);
+var layout = {width: 600, height: 450, xaxis: {range: [0, 62]}};
+Plotly.newPlot(gd,data,layout);

_posts/plotly_js/financial/indicator1/2019-07-29-angular-gauge.html

@@ -0,0 +1,17 @@
+---
+name: A Single Angular Gauge Chart
+plot_url: https://codepen.io/plotly/embed/xvgeVj/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+---
+Plotly.newPlot(gd,data,layout);
+
+var data = [type: "indicator", mode: "gauge+number"}, value: 450,
+    title: {text: "Speed"}, {domain: {x: [0, 1], y: [0, 1]}];
+
+var layout = {width: 600, height: 400};
+Plotly.newPlot(gd,data,layout);

_posts/plotly_js/financial/indicator1/2019-07-29-basic-data-card.html

@@ -0,0 +1,20 @@
+---
+name: Data Cards / Big Numbers
+plot_url: https://codepen.io/plotly/embed/bXabjP/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 4.1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+    Data card helps to display more contextual information about the data. Sometimes one number is all you want to see in a report, such as total sales, annual revenue, etc. This example shows how to visualize these big numbers:
+---
+var data = [
+  {type: "indicator", mode: "number+delta", value: 400, number: {prefix: "$"},
+   delta: {position: "top", reference: 320}, domain: {x: [0, 1], y: [0, 1]}}];
+
+var layout = {paper_bgcolor: "lightgray", width: 600, height: 200,
+    margin: {"t": 0, "b": 0, "l": 0, "r": 0}}
+
+Plotly.newPlot(gd,data,layout);

_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template2.html renamed to _posts/plotly_js/financial/indicator1/2019-07-29-bullet.html

@@ -3,18 +3,17 @@
 plot_url: https://codepen.io/plotly/embed/EqZBWg/?height=600&theme-id=15263&default-tab=result
 language: plotly_js
 suite: indicator
-order: 2
+order: 3
 sitemap: false
 arrangement: horizontal
 markdown_content: |
 
   The equivalent of above "angular gauge":
 
 ---
-var data = [{domain: {x: [0.20, 1], y: [0.25, 0.92]},
-  title: {text: "Avg order size"},
-  type: "indicator", mode: "number+gauge", gauge: {shape: "bullet"}, value: 220}];
-
-var layout = {width: 500, height: 250, shapes: [{type: "rect", x0: 0.20, x1: 1, y0: 0.25, y1: 0.92}]};
+var data = [
+    type: "indicator", mode: "number+gauge", gauge: {shape: "bullet"},
+    value: 220}, {domain: {x: [0, 1], y: [0, 1]}, title: {text: "Avg order size"}];
 
+var layout = {width: 600, height: 100};
 Plotly.newPlot(gd,data,layout);

_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template.html

@@ -0,0 +1,49 @@
+---
+name: Overview
+plot_url: https://codepen.io/plotly/embed/ymMWRR/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  In this tutorial we introduce a new trace named "Indicator". The purpose of "indicator" is to visualize a single value specified by the "value" attribute.
+  Three distinct visual elements are available to represent that value: number, delta and gauge. Any combination of them can be specified via the "mode" attribute.
+  Top-level attributes are:
+    * value: the value to visualize
+    * mode: which visual elements to draw
+    * align: how to align number and delta (left, center, right)
+    * domain: the extent of the figure
+
+  Then we can configure the 3 different visual elements via their respective container:
+    * number is simply a representation of the number in text. It has attributes:
+    * valueformat: to format the number
+    * prefix: a string before the number
+    * suffix: a string after the number
+    * font.(family|size): to control the font
+
+   "delta" simply displays the difference between the value with respect to a reference. It has attributes:
+    * reference: the number to compare the value with
+    * relative: whether that difference is absolute or relative
+    * valueformat: to format the delta
+    * (increasing|decreasing).color: color to be used for positive or decreasing delta
+    * (increasing|decreasing).symbol: symbol displayed on the left of the delta
+    * font.(family|size): to control the font
+    * position: position relative to `number` (either top, left, bottom, right)
+
+    Finally, we can have a simple title for the indicator via `title` with 'text' attribute which is a string, and 'align' which can be set to left, center, and right.
+    There are two gauge types: [angular](https://plot.ly/javascript/gauge-charts/) and [bullet](https://plot.ly/javascript/bullet-charts/). Here is a combination of both shapes (angular, bullet), and different modes (guage, delta, and value):
+---
+var data = [
+  {type: "indicator", value: 200, delta: {reference: 160},
+   gauge: {axis: {visible: false, range: [0, 200]}}, domain: {row: 0, column: 0}},
+  {type: "indicator", value: 120, gauge: {shape: "bullet", axis: {visible: false,
+   range: [-200, 200]}}, domain: {x: [0.05, 0.5], y: [0.15, 0.35]}},
+  {type: "indicator", mode: "number+delta", value: 300, domain: {row: 0, column: 1}},
+  {type: "indicator", mode: "delta", value: 40, domain: {row: 1, column: 1}}];
+
+var layout = {width: 600, height: 400, margin: {t: 25, b: 25, l: 25, r: 25},
+    grid: {rows: 2, columns: 2, pattern: "independent"}, template: {
+    data: {indicator: [{title: {text: "Speed"}, mode: "number+delta+gauge",
+    delta: {reference: 90}}]}}};

_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template4.html

@@ -0,0 +1,28 @@
+---
+name:
+plot_url: https://codepen.io/plotly/embed/PMppGM/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 7
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+    It's possible to display several numbers
+---
+var data = [
+     {
+       type: "indicator", mode: "number+delta", value: 200, domain: {x: [0, 0.5],
+        y: [0, 0.5]}, delta: {reference: 400, relative: true, position: "top"}},
+     {
+       type: "indicator", mode: "number+delta", value: 350,
+       delta: {reference: 400, relative: true},  domain: {x: [0, 0.5], y: [0.5, 1]}},
+     {
+       type: "indicator", mode: "number+delta", value: 450, 
+       title: {"text": "Accounts<br><span style='font-size:0.8em;color:gray'>Subtitle</span><br><span style='font-size:0.8em;color:gray'>Subsubtitle</span>"},
+       delta: {reference: 400, relative: true}, domain: {x: [0.6, 1], y: [0, 1]}}];
+
+var layout = {width: 600, height: 400,  margin: {t: 25, r: 25, l: 25, b: 25}};
+
+Plotly.newPlot(gd,data,layout);
+