Browse Source

HUE-306. Add color management to HueChart.

Marcus McLaughlin 15 years ago
parent
commit
8c0170ac58

+ 3 - 4
desktop/core/static/js/Source/CCS/HueChart.Area.js

@@ -41,7 +41,6 @@ HueChart.Area = new Class({
         //Build stacked area graph.
         addGraph: function(vis) {
                 //Put colorArray in scope for fillStyle fn.
-                var colorArray = this.options.colorArray;
                 var stack = vis.add(pv.Layout.Stack);
                 /*  [{'date': 10, 'series1': 5, 'series2': 10, 'series3': 15},
                      {'date': 20, 'series1': 7, 'series2': 14, 'series3': 21},
@@ -70,9 +69,9 @@ HueChart.Area = new Class({
                 //The stack is a layout which says, for every layer defined (above), add an area graph, offsetting it based on the layers below.
                 //Appears as a signle contiguous object, but is actually a bunch of different area graphs.
                 stack.layer.add(pv.Area)
-                        .fillStyle(function() {
-                                return colorArray[this.parent.index % colorArray.length];
-                        });
+                        .fillStyle(function(d, layer) {
+                                return this.getColor(layer);
+                        }.bind(this));
         }
 
 });

+ 3 - 3
desktop/core/static/js/Source/CCS/HueChart.Circle.js

@@ -64,9 +64,9 @@ HueChart.Circle = new Class({
                         .angle(function(d) { 
                                 return (d[this.options.graphProperty]/valueSum) * 2 * Math.PI; 
                         }.bind(this))
-                        //Fill with white if selected, otherwise use corresponding value in colorArray
-                        .fillStyle(function() {
-                                return this.index == get_selected_index() ? hueChart.options.selectedColor : colorArray[this.index % colorArray.length];
+                        //Fill with white if selected, otherwise use value from colorManager 
+                        .fillStyle(function(d) {
+                                return this.index == get_selected_index() ? hueChart.options.selectedColor : hueChart.getColor($pick(d[hueChart.options.nameProperty], this.index));
                         }).event("click", function(d) {
                                 hueChart.fireEvent('wedgeClick', [d, this.index]);
                         });                

+ 3 - 3
desktop/core/static/js/Source/CCS/HueChart.Line.js

@@ -37,15 +37,15 @@ HueChart.Line = new Class({
                                 //Using as data, this.data.getObjects.
                                 .data(this.getData(true).getObjects())
                                 //Closures used because the function argument isn't executed until the render phase.
-                                //Color the line, based on a color in the colarArray.
+                                //Color the line, based on the color returned by the colorManager.
                                 .strokeStyle(function(itemIndex) {
                                         return function() {
-                                                return this.options.colorArray[itemIndex % this.options.colorArray.length];
+                                                return this.getColor(this.options.series[itemIndex]);
                                         }.bind(this);
                                 }.bind(this)(itemIndex))
                                 //For each data object, create a point with its left position at the data object's xField value scaled to pixels and its bottom position at the data object's value for this series scaled to pixels.
                                 .left(function(d) {
-                                        return this.xScale(d[this.options.xField]);
+                                        return this.xScale(d[this.options.xProperty]);
                                 }.bind(this))
                                 .bottom(function(itemIndex) {
                                         return function(d) {

+ 17 - 15
desktop/core/static/js/Source/CCS/HueChart.js

@@ -17,12 +17,16 @@ requires:
 - Core/Options
 - ccs-shared/Number.Files
 - More/Element.Shortcuts
+- ccs-shared/HueChart.GroupValueManager
 
 provides: [ HueChart ]
 
 ...
 */
 //
+
+(function() {
+var colorManager = GroupValueManager; 
 HueChart = new Class({
 
         Implements: [Events, Options],
@@ -84,6 +88,10 @@ HueChart = new Class({
                 } else {
                         this.data = new HueChart.Data(this.options.dataObject);
                 }
+
+                //Setup color manager
+                this.colorManager = colorManager;
+                this.colorManager.define(this.options.url, this.options.colorArray);
         },
 
         //Resize graph to width and height.
@@ -144,6 +152,11 @@ HueChart = new Class({
         //Check that there is an event handler registered for an event
         hasEvent: function(name) {
                 return this.$events[name] && this.$events[name].length;
+        },
+
+        //Get color given a series
+        getColor: function(series) {
+                return this.colorManager.get(this.options.url, series);
         }
 });
 
@@ -164,20 +177,9 @@ HueChart.Data = new Class({
         prepareDates: function(dateProperty) {
                 //Convert date string to date object.
                 this.dataObjects.each(function(d) {
-                        //Attempt to parse the date
-                        //Doing it here rather than using Date().parse because we need
-                        //to understand whether or not it is parseable and react to that.
-                        var unParsed = d[dateProperty]; 
-                        var parsed;
-                        Date.parsePatterns.some(function(pattern){
-                                var bits = pattern.re.exec(unParsed);
-                                return (bits) ? (parsed = pattern.handler(bits)) : false;
-                        });
-                        if (parsed) {
-                                d[dateProperty] = parsed;
-                        } else {
-                                d[dateProperty] =  new Date().parse(parseInt(unParsed, 10));
-                        }
+                        //Check if dateProperty value is parsable as string.  
+                        //Parse as string if it is, otherwise parse as ms value.
+                        d[dateProperty] = new Date().parse(Date.isParsable(d[dateProperty]) ? d[dateProperty] : parseInt(d[dateProperty], 10));
                 });
                 //Sort data by date property.
                 this.sortByProperty(dateProperty);
@@ -372,4 +374,4 @@ HueChart.buildData = function(table) {
         });
         return data;
 };
-
+})();

+ 1 - 0
desktop/core/static/js/package.yml

@@ -34,6 +34,7 @@ sources: [
   Source/CCS/HueChart.Area.js,
   Source/CCS/HueChart.Line.js,
   Source/CCS/HueChart.Circle.js,
+  Source/CCS/HueChart.GroupValueManager.js,
   Source/Forms/Form.Request.JSON.js,
   Source/Forms/EditInline.js,
   Source/UI/StickyWin.Drawer.js,