Merge branch 'FLOE-433' into FLOE-432

demos/src/css/chartAuthoring-demo.css

@@ -53,4 +53,14 @@
 
 .floec-ca-dataEntry-label {
     margin-right:1em;
+    width:12em;
+}
+
+.floec-ca-dataEntry-value {
+    margin-right:1em;
+    width:6em;
+}
+
+.floec-ca-dataEntry-percentage {
+    background-color: #C9C9C9;
 }

demos/src/js/demo.js

@@ -17,6 +17,11 @@ var demo = demo || {};
                 dataEntryLabel: "Enter your labels and values"
             }
         },
+        pieChart: {
+            pieChartOptions: {
+                sliceTextDisplayTemplate: "%percentage%"
+            }
+        },
         listeners: {
             "onToolReady.addExampleInput": "demo.chartAuthoring.addExampleInput"
         }

src/js/legend.js

@@ -25,14 +25,52 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
             // dataSet accepts:
             // 1. an array of objects. Must contain "id", "value" and "label" variables.
             // Example: [{id: string, value: number, label: string} ... ]
-            dataSet: []
+            dataSet: [],
+            total: {
+                // value: number,
+                // percentage: number
+            }
         },
+        modelRelay: [{
+            source: "dataSet",
+            target: "total.value",
+            singleTransform: {
+                type: "floe.chartAuthoring.transforms.reduce",
+                value: "{that}.model.dataSet",
+                initialValue: null,
+                extractor: "floe.chartAuthoring.transforms.reduce.valueExtractor",
+                func: "floe.chartAuthoring.transforms.reduce.add"
+            }
+        }, {
+            source: "total.value",
+            target: "total.percentage",
+            singleTransform: {
+                type: "floe.chartAuthoring.transforms.percentage",
+                value: "{that}.model.total.value",
+                total: "{that}.model.total.value"
+            }
+        }],
         legendOptions: {
             // An array of colors to fill slices generated for corresponding values of model.dataSet
             // Or, a d3 color scale that's generated based off an array of colors
             colors: null,
             sort: true, // Whether or not to sort the data by values when creating the legend
-            showLegendHeadings: true // Whether or not to display column headings in the legend
+            showLegendHeadings: true, // Whether or not to display column headings in the legend,
+            // A fluid.stringTemplate used to render the text displayed
+            // within the label cell
+            // available variables for the template are:
+            // - value: the raw value of the data
+            // - percentage: the percentage of the data value out of the total value
+            // - total: the total value of all data in the dataset
+            // - label: the attached label
+            labelTextDisplayTemplate: "%label",
+            // A fluid.stringTemplate used to render the text displayed
+            // within the value cell
+            // the same variables available as for labelTextDisplayTemplate
+            valueTextDisplayTemplate: "%value",
+            // Number of digits to display after decimal when rendering
+            // percentages for the legend
+            legendPercentageDigits: 0
         },
         styles: {
             legend: "floe-ca-pieChart-legend",
@@ -118,7 +156,9 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
     floe.chartAuthoring.pieChart.legend.updateRows = function (that) {
         var colorCellSelector = that.options.selectors.colorCell,
             labelCellSelector = that.options.selectors.labelCell,
-            valueCellSelector = that.options.selectors.valueCell;
+            valueCellSelector = that.options.selectors.valueCell,
+            labelTextDisplayTemplate = that.options.legendOptions.labelTextDisplayTemplate,
+            valueTextDisplayTemplate = that.options.legendOptions.valueTextDisplayTemplate;
 
         that.rows.each(function (d) {
             d3.select(this)
@@ -131,11 +171,15 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
 
             d3.select(this)
                 .select(labelCellSelector)
-                .text(d.label);
+                .text(function(d) {
+                    return floe.chartAuthoring.pieChart.legend.getDisplayValueFromTemplate(that, labelTextDisplayTemplate, d);
+                });
 
             d3.select(this)
                 .select(valueCellSelector)
-                .text(d.value);
+                .text(function(d) {
+                    return floe.chartAuthoring.pieChart.legend.getDisplayValueFromTemplate(that, valueTextDisplayTemplate, d);
+                });
         });
     };
 
@@ -258,4 +302,11 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
         return colorScale.range();
     };
 
+    floe.chartAuthoring.pieChart.legend.getDisplayValueFromTemplate = function(that, template, d) {
+        var legendPercentageDigits = that.options.legendOptions.legendPercentageDigits;
+        var percentage = floe.chartAuthoring.percentage.calculate(d.value, that.model.total.value).toFixed(legendPercentageDigits);
+        var output = fluid.stringTemplate(template, {label: d.label, value: d.value, percentage: percentage, total: that.model.total.value});
+        return output;
+    };
+
 })(jQuery, fluid);

src/js/pie.js

@@ -27,8 +27,31 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
             // 1. an array of primitive values, such as numbers;
             // 2. an array of objects. The "value" element of each object needs to containe the value for drawing each pie slice.
             // Example: [{id: string, value: number} ... ]
-            dataSet: []
+            dataSet: [],
+            total: {
+                // value: number,
+                // percentage: number
+            }
         },
+        modelRelay: [{
+            source: "dataSet",
+            target: "total.value",
+            singleTransform: {
+                type: "floe.chartAuthoring.transforms.reduce",
+                value: "{that}.model.dataSet",
+                initialValue: null,
+                extractor: "floe.chartAuthoring.transforms.reduce.valueExtractor",
+                func: "floe.chartAuthoring.transforms.reduce.add"
+            }
+        }, {
+            source: "total.value",
+            target: "total.percentage",
+            singleTransform: {
+                type: "floe.chartAuthoring.transforms.percentage",
+                value: "{that}.model.total.value",
+                total: "{that}.model.total.value"
+            }
+        }],
         pieOptions: {
             width: 300,
             height: 300,
@@ -37,7 +60,17 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
             colors: null,
             outerRadius: null,
             innerRadius: null,
-            animationDuration: 750
+            animationDuration: 750,
+            // A fluid.stringTemplate used to render the values displayed
+            // within the pie chart slices
+            // available variables for the template are:
+            // - value: the raw value of the data
+            // - percentage: the percentage of the data value out of the total value
+            // - total: the total value of all data in the dataset
+            sliceTextDisplayTemplate: "%value",
+            // Number of digits to display after decimal when rendering
+            // percentages for pie slices
+            sliceTextPercentageDigits: 0
         },
         strings: {
             pieTitle: "Pie Chart",
@@ -120,7 +153,8 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
     floe.chartAuthoring.pieChart.pie.updateSlices = function (that) {
         // Update and redraw arcs of existing slices
         var arc = that.arc,
-            animationDuration = that.options.pieOptions.animationDuration;
+            animationDuration = that.options.pieOptions.animationDuration,
+            sliceTextDisplayTemplate = that.options.pieOptions.sliceTextDisplayTemplate;
 
         // Standard D3 pie arc tweening transition, as per http://bl.ocks.org/mbostock/1346410
         that.paths.transition().duration(animationDuration).attrTween("d", function (d) {
@@ -133,7 +167,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
 
         // Update and reposition text labels for existing slices
         that.texts.text(function (d) {
-            return d.value;
+            return floe.chartAuthoring.pieChart.getDataDisplayValueFromTemplate(that, sliceTextDisplayTemplate, d);
         });
 
         that.texts.transition().duration(animationDuration).attr("transform", that.textTransform);
@@ -195,7 +229,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
                 "viewBox": floe.chartAuthoring.pieChart.getViewBoxConfiguration(0,0, width, height),
                 // Set aria role to image - this causes the pie to appear as a
                 // static image to AT rather than as a number of separate
-                // images                
+                // images
                 "role": "img"
             });
 
@@ -245,4 +279,14 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
     floe.chartAuthoring.pieChart.getViewBoxConfiguration = function (x, y, width, height) {
         return x + "," + y + "," + width + "," + height;
     };
+
+    // Returns a formatted string for a numeric data value based on a supplied template
+
+    floe.chartAuthoring.pieChart.getDataDisplayValueFromTemplate = function(that, template, d) {
+        var sliceTextPercentageDigits = that.options.pieOptions.sliceTextPercentageDigits;
+        var percentage = floe.chartAuthoring.percentage.calculate(d.value, that.model.total.value).toFixed(sliceTextPercentageDigits);
+        var output = fluid.stringTemplate(template, {value: d.value, percentage: percentage, total: that.model.total.value});
+        return output;
+    };
+
 })(jQuery, fluid);

src/js/pieChart.js

@@ -75,9 +75,14 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
             // outerRadius: number,
             // innerRadius: number,
             // animationDuration: number,
-            // sort: boolean   // Whether or not to sort the data by values when creating the legend
-            // pieTitle: the accessible title to be applied to the pie chart
-            // pieDescription: the accessible description to be applied to the pie chart
+            // sort: boolean   // Whether or not to sort the data by values when creating the legend,
+            // pieTitle: the accessible title to be applied to the pie chart,
+            // pieDescription: the accessible description to be applied to the pie chart,
+            // sliceTextDisplayTemplate: fluid.stringTemplate to format the pie chart slice text
+            // sliceTextPercentageDigits: number of digits after decimal for percentages in pie chart slice text
+            // labelTextDisplayTemplate: fluid.stringTemplate to format the legend label cell
+            // valueTextDisplayTemplate: fluid.stringTemplate to format the legend value cell
+            // legendPercentageDigits: number of digits after decimal for percentages in legend display
         },
         selectors: {
             pie: ".floec-ca-pieChart-pie",

src/js/transformations.js

@@ -63,7 +63,8 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
     };
 
     floe.chartAuthoring.transforms.reduce.valueExtractor = function (obj) {
-        return obj.value;
+        // Returns obj.value if it exists, or obj if it doesn't    
+        return obj.value ? obj.value : obj;
     };
 
 })(jQuery, fluid);

tests/html/legend-Tests.html

@@ -15,6 +15,8 @@
 
         <script src="../../src/js/d3Utils.js"></script>
         <script src="../../src/js/d3ViewComponent.js"></script>
+        <script src="../../src/js/percentage.js"></script>
+        <script src="../../src/js/transformations.js"></script>
         <script src="../../src/js/legend.js"></script>
         <script src="../js/legendTests.js"></script>
     </head>
@@ -32,5 +34,9 @@ <h2>Unsorted Legend</h2>
 
         <h2>Sorted Legend</h2>
         <div class="floe-ca-legend-objects-sorted"></div>
+
+        <h2>Legend With Custom Labels</h2>
+        <div class="floe-ca-legend-custom-labels"></div>
+
     </body>
 </html>

tests/html/pie-Tests.html

@@ -15,6 +15,8 @@
 
         <script src="../../src/js/d3Utils.js"></script>
         <script src="../../src/js/d3ViewComponent.js"></script>
+        <script src="../../src/js/percentage.js"></script>
+        <script src="../../src/js/transformations.js"></script>
         <script src="../../src/js/pie.js"></script>
         <script src="../js/pieTests.js"></script>
     </head>
@@ -29,5 +31,6 @@ <h2 id="qunit-userAgent"></h2>
         <!-- Test HTML -->
         <div class="floec-ca-pieChart-numberArray"></div>
         <div class="floec-ca-pieChart-objectArray"></div>
+        <div class="floec-ca-pieChart-specialFormatting"></div>
     </body>
 </html>

tests/html/pieChart-Tests.html

@@ -15,6 +15,8 @@
 
         <script src="../../src/js/d3Utils.js"></script>
         <script src="../../src/js/d3ViewComponent.js"></script>
+        <script src="../../src/js/percentage.js"></script>
+        <script src="../../src/js/transformations.js"></script>
         <script src="../../src/js/pie.js"></script>
         <script src="../../src/js/legend.js"></script>
         <script src="../../src/js/templateInjection.js"></script>

tests/js/chartAuthoringTests.js

@@ -44,12 +44,12 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
     floe.tests.chartAuthoring.dataEntries =
     {
         entry1: {
-            value: "100",
+            value: 100,
             label: "Label One",
             percentage: "100%"
         },
         entry2: {
-            value: "50",
+            value: 50,
             label: "Label Two",
             percentage: "100%"
         }
@@ -59,12 +59,12 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
     [
         {
             id: "entry1",
-            value: "100",
+            value: 100,
             label: "Label One"
         },
         {
             id: "entry2",
-            value: "50",
+            value: 50,
             label: "Label Two"
         }
     ];