From 0b65108b8d8813e0ca26fbe4166fc1edde0edff4 Mon Sep 17 00:00:00 2001
From: Anthony Pessy <anthony@cogniteev.com>
Date: Tue, 20 Aug 2019 15:29:39 +0200
Subject: [PATCH] pass ratio to the data_labels_format callback when
 appropriate

---
 docs/reference.html.haml              |  7 ++--
 htdocs/samples/data_label.html        | 51 +++++----------------------
 htdocs/samples/data_label_format.html |  6 ++--
 spec/data-spec.js                     | 50 ++++++++++++++++++++++++++
 src/text.js                           |  5 ++-
 5 files changed, 70 insertions(+), 49 deletions(-)

diff --git a/docs/reference.html.haml b/docs/reference.html.haml
index 56480db53..e9579f114 100644
--- a/docs/reference.html.haml
+++ b/docs/reference.html.haml
@@ -1012,10 +1012,11 @@
           = partial :reference_item_link, locals: { id: 'data.labels.format' }
         %p Set formatter function for data labels.
         %br
-        %p The formatter function receives 4 arguments such as <span class="code">v</span>, <span class="code">id</span>, <span class="code">i</span>, <span class="code">j</span> and it must return a string that will be shown as the label. The arguments are:
+        %p The formatter function receives 5 arguments such as <span class="code">v</span>, <span class="code">ratio</span>, <span class="code">id</span>, <span class="code">i</span>, <span class="code">j</span> and it must return a string that will be shown as the label. The arguments are:
         %br
         %ul
           %li <span class="code">v</span> is the value of the data point where the label is shown.
+          %li <span class="code">ratio</span> is the ratio of the data point where the label is shown, will be <code>undefined</code> if the data point is not normalized.
           %li <span class="code">id</span> is the id of the data where the label is shown.
           %li <span class="code">i</span> is the index of the data point where the label is shown.
           %li <span class="code">j</span> is the sub index of the data point where the label is shown.
@@ -1028,10 +1029,10 @@
             %code.html.javascript
               data: {
               &nbsp;&nbsp;labels: {
-              &nbsp;&nbsp;&nbsp;&nbsp;format: function (v, id, i, j) { ... }
+              &nbsp;&nbsp;&nbsp;&nbsp;format: function (v, ratio, id, i, j) { ... }
               &nbsp;&nbsp;&nbsp;&nbsp;// it's possible to set for each data
               &nbsp;&nbsp;&nbsp;&nbsp;//format: {
-              &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;data1: function (v, id, i, j) { ... },
+              &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;data1: function (v, ratio, id, i, j) { ... },
               &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;...
               &nbsp;&nbsp;&nbsp;&nbsp;//}
               &nbsp;&nbsp;}
diff --git a/htdocs/samples/data_label.html b/htdocs/samples/data_label.html
index 1137a8af7..b10574cac 100644
--- a/htdocs/samples/data_label.html
+++ b/htdocs/samples/data_label.html
@@ -18,6 +18,8 @@
     <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
     <script src="../js/c3.js"></script>
     <script>
+      const currencyFormatter = (v/*, ratio, id*/) =>
+        v === null ? 'Not Applicable' : d3.format('$')(v);
 
       var chart1 = c3.generate({
         bindto: '#chart1',
@@ -27,12 +29,7 @@
           ],
           type: 'bar',
           labels: {
-            format: function (v, id) {
-                if (v === null) {
-                    return 'Not Applicable';
-                }
-                return d3.format('$')(v);
-            }
+            format: currencyFormatter
           }
         }
       });
@@ -45,12 +42,7 @@
           ],
           type: 'bar',
           labels: {
-            format: function (v, id) {
-                if (v === null) {
-                    return 'Not Applicable';
-                }
-                return d3.format('$')(v);
-            }
+            format: currencyFormatter
           }
         }
       });
@@ -63,12 +55,7 @@
           ],
           type: 'bar',
           labels: {
-            format: function (v, id) {
-                if (v === null) {
-                    return 'Not Applicable';
-                }
-                return d3.format('$')(v);
-            }
+            format: currencyFormatter
           }
         }
       });
@@ -81,12 +68,7 @@
           ],
           type: 'bar',
           labels: {
-            format: function (v, id) {
-                if (v === null) {
-                    return 'Not Applicable';
-                }
-                return d3.format('$')(v);
-            }
+            format: currencyFormatter
           }
         },
         axis: {
@@ -102,12 +84,7 @@
           ],
           type: 'bar',
           labels: {
-            format: function (v, id) {
-                if (v === null) {
-                    return 'Not Applicable';
-                }
-                return d3.format('$')(v);
-            }
+            format: currencyFormatter
           }
         },
         axis: {
@@ -123,12 +100,7 @@
           ],
           type: 'bar',
           labels: {
-            format: function (v, id) {
-                if (v === null) {
-                    return 'Not Applicable';
-                }
-                return d3.format('$')(v);
-            }
+            format: currencyFormatter
           }
         },
         axis: {
@@ -178,12 +150,7 @@
           ],
           type: 'bar',
           labels: {
-            format: function (v, id) {
-                if (v === null) {
-                    return 'Not Applicable';
-                }
-                return d3.format('$')(v);
-            }
+            format: currencyFormatter
           }
         },
         axis: {
diff --git a/htdocs/samples/data_label_format.html b/htdocs/samples/data_label_format.html
index 253be4f9c..e3fd36bb3 100644
--- a/htdocs/samples/data_label_format.html
+++ b/htdocs/samples/data_label_format.html
@@ -15,10 +15,10 @@
             ['data2', 50, 20, 10, 40, 15, 25]
           ],
           labels: {
-//            format: function (v, id) { return "Default Format on " + id; },
+//            format: function (v, ratio, id) { return "Default Format on " + id; },
             format: {
-              data1: function (v, id) { return "data1 Format"; },
-              data2: function (v, id) { return "data2 Format"; }
+              data1: function (v, ratio, id) { return "data1 Format"; },
+              data2: function (v, ratio, id) { return "data2 Format"; }
             }
           },
           axes: {
diff --git a/spec/data-spec.js b/spec/data-spec.js
index 31b9e1ded..1097c5ed2 100644
--- a/spec/data-spec.js
+++ b/spec/data-spec.js
@@ -699,6 +699,56 @@ describe('c3 chart data', function () {
                     });
                 });
             });
+
+            describe('with normalized stacked', function () {
+                beforeAll(function() {
+                    args = {
+                        data: {
+                            columns: [
+                                [ 'data1', 250, 500, 700 ],
+                                [ 'data2', 750, 500, 300 ],
+                                [ 'data3', 400, 800, 100 ],
+                                [ 'data4', 600, 200, 900 ],
+                            ],
+                            type: 'bar',
+                            groups: [
+                                [ 'data1', 'data2' ],
+                                [ 'data3', 'data4' ]
+                            ],
+                            stack: {
+                                normalize: true
+                            },
+                            labels: {
+                                format: {
+                                    data1: true,
+                                    data2: true,
+                                    data3: true,
+                                    data4: function (v, ratio) {
+                                        return `${parseInt(ratio * 100)}% (${v})`;
+                                    }
+                                }
+                            },
+                            axes: {
+                                data3: 'y2',
+                                data4: 'y2'
+                            }
+                        }
+                    };
+                });
+
+                it('renders absolute values as data label', function () {
+                    expect(d3.selectAll('.c3-texts-data1 .c3-text').nodes().map((n) => n.textContent))
+                        .toEqual([ '250', '500', '700' ]);
+
+                    expect(d3.selectAll('.c3-texts-data3 .c3-text').nodes().map((n) => n.textContent))
+                        .toEqual([ '400', '800', '100' ]);
+                });
+
+                it('should pass ratio with value to data labels callback', () => {
+                    expect(d3.selectAll('.c3-texts-data4 .c3-text').nodes().map((n) => n.textContent))
+                        .toEqual([ '60% (600)', '20% (200)', '90% (900)' ]);
+                });
+            });
         });
 
         describe('for all targets', function () {
diff --git a/src/text.js b/src/text.js
index 73439b1dc..f1cb2b3cc 100644
--- a/src/text.js
+++ b/src/text.js
@@ -38,7 +38,10 @@ ChartInternal.prototype.updateText = function (xForText, yForText, durationForEx
         .style("fill", function (d) { return $$.color(d); })
         .style("fill-opacity", 0);
     $$.mainText = mainTextEnter.merge(mainText)
-        .text(function (d, i, j) { return $$.dataLabelFormat(d.id)(d.value, d.id, i, j); });
+        .text((d, i, j) => {
+            const ratio = $$.isTargetNormalized(d.id) ? $$.getRatio('index', d) : undefined;
+            return $$.dataLabelFormat(d.id).call($$.api, d.value, ratio, d.id, i, j);
+        });
     mainText.exit()
         .transition().duration(durationForExit)
         .style('fill-opacity', 0)