summaryrefslogtreecommitdiff
path: root/includes/js/dojox/charting/Theme.js
diff options
context:
space:
mode:
authormensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
committermensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
commite44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/charting/Theme.js
parenta62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
downloadsemanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/charting/Theme.js')
-rw-r--r--includes/js/dojox/charting/Theme.js256
1 files changed, 256 insertions, 0 deletions
diff --git a/includes/js/dojox/charting/Theme.js b/includes/js/dojox/charting/Theme.js
new file mode 100644
index 0000000..c7e3a6a
--- /dev/null
+++ b/includes/js/dojox/charting/Theme.js
@@ -0,0 +1,256 @@
+if(!dojo._hasResource["dojox.charting.Theme"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.charting.Theme"] = true;
+dojo.provide("dojox.charting.Theme");
+dojo.require("dojox.charting._color");
+
+(function(){
+ var dxc=dojox.charting;
+ // TODO: Legend information
+
+ dxc.Theme = function(/*Object?*/ kwArgs){
+ kwArgs=kwArgs||{};
+ var def = dxc.Theme._def;
+ dojo.forEach(["chart", "plotarea", "axis", "series", "marker"], function(n){
+ this[n] = dojo.mixin(dojo.clone(def[n]), kwArgs[n]||{});
+ }, this);
+ this.markers = dojo.mixin(dojo.clone(dxc.Theme.Markers), kwArgs.markers||{});
+ this.colors = [];
+ this.antiAlias = ("antiAlias" in kwArgs)?kwArgs.antiAlias:true;
+ this.assignColors = ("assignColors" in kwArgs)?kwArgs.assignColors:true;
+ this.assignMarkers = ("assignMarkers" in kwArgs)?kwArgs.assignMarkers:true;
+ this._colorCache = null;
+
+ // push the colors, use _def colors if none passed.
+ kwArgs.colors = kwArgs.colors||def.colors;
+ dojo.forEach(kwArgs.colors, function(item){
+ this.colors.push(item);
+ }, this);
+
+ // private variables for color and marker indexing
+ this._current = { color:0, marker: 0 };
+ this._markers = [];
+ this._buildMarkerArray();
+ };
+
+ // "static" fields
+ // default markers.
+ // A marker is defined by an SVG path segment; it should be defined as
+ // relative motion, and with the assumption that the path segment
+ // will be moved to the value point (i.e prepend Mx,y)
+ dxc.Theme.Markers={
+ CIRCLE: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0",
+ SQUARE: "m-3,-3 l0,6 6,0 0,-6 z",
+ DIAMOND: "m0,-3 l3,3 -3,3 -3,-3 z",
+ CROSS: "m0,-3 l0,6 m-3,-3 l6,0",
+ X: "m-3,-3 l6,6 m0,-6 l-6,6",
+ TRIANGLE: "m-3,3 l3,-6 3,6 z",
+ TRIANGLE_INVERTED:"m-3,-3 l3,6 3,-6 z"
+ };
+ dxc.Theme._def={
+ // all objects are structs used directly in dojox.gfx
+ chart:{
+ stroke:null,
+ fill: "white"
+ },
+ plotarea:{
+ stroke:null,
+ fill: "white"
+ },
+ // TODO: label rotation on axis
+ axis:{
+ stroke: { // the axis itself
+ color:"#333",
+ width:1
+ },
+ line: { // gridlines
+ color:"#ccc",
+ width:1,
+ style:"Dot",
+ cap:"round"
+ },
+ majorTick: { // major ticks on axis
+ color:"#666",
+ width:1,
+ length:6,
+ position:"center"
+ },
+ minorTick: { // minor ticks on axis
+ color:"#666",
+ width:0.8,
+ length:3,
+ position:"center"
+ },
+ font: "normal normal normal 7pt Tahoma", // labels on axis
+ fontColor:"#333" // color of labels
+ },
+ series:{
+ outline: {width: 0.1, color: "#ccc"}, // line or outline
+ stroke: {width: 1.5, color: "#333"}, // line or outline
+ fill: "#ccc", // fill, if appropriate
+ font: "normal normal normal 7pt Tahoma", // if there's a label
+ fontColor: "#000" // color of labels
+ },
+ marker:{ // any markers on a series.
+ stroke: {width:1}, // stroke or outline
+ fill: "#333", // fill if needed
+ font: "normal normal normal 7pt Tahoma", // label
+ fontColor: "#000"
+ },
+ colors:[
+ "#000","#111","#222","#333",
+ "#444","#555","#666","#777",
+ "#888","#999","#aaa","#bbb",
+ "#ccc"
+ ]
+ };
+
+ // prototype methods
+ dojo.extend(dxc.Theme, {
+ defineColors: function(obj){
+ // summary:
+ // Generate a set of colors for the theme based on keyword
+ // arguments
+ var kwArgs=obj||{};
+
+ // deal with caching
+ var cache = false;
+ if(kwArgs.cache === undefined){ cache = true; }
+ if(kwArgs.cache == true){ cache = true; }
+
+ if(cache){
+ this._colorCache=kwArgs;
+ } else {
+ var mix=this._colorCache||{};
+ kwArgs=dojo.mixin(dojo.clone(mix), kwArgs);
+ }
+
+ var c=[], n=kwArgs.num||32; // the number of colors to generate
+ if(kwArgs.colors){
+ // we have an array of colors predefined, so fix for the number of series.
+ var l=kwArgs.colors.length;
+ for(var i=0; i<n; i++){
+ c.push(kwArgs.colors[i%l]);
+ }
+ this.colors=c;
+ }else if(kwArgs.hue){
+ // single hue, generate a set based on brightness
+ var s=kwArgs.saturation||100; // saturation
+ var st=kwArgs.low||30;
+ var end=kwArgs.high||90;
+ var step=(end-st)/n; // brightness steps
+ for(var i=0; i<n; i++){
+ c.push(dxc._color.fromHsb(kwArgs.hue, s, st+(step*i)).toHex());
+ }
+ this.colors=c;
+ }else if(kwArgs.stops){
+ // create color ranges that are either equally distributed, or
+ // (optionally) based on a passed "offset" property. If you
+ // pass an array of Colors, it will equally distribute, if
+ // you pass an array of structs { color, offset }, it will
+ // use the offset (0.0 - 1.0) to distribute. Note that offset
+ // values should be plotted on a line from 0.0 to 1.0--i.e.
+ // they should be additive. For example:
+ // [ {color, offset:0}, { color, offset:0.2 }, { color, offset:0.5 }, { color, offset:1.0 } ]
+ //
+ // If you use stops for colors, you MUST have a color at 0.0 and one
+ // at 1.0.
+
+ // figure out how many stops we have
+ var l=kwArgs.stops.length;
+ if(l<2){
+ throw new Error(
+ "dojox.charting.Theme::defineColors: when using stops to "
+ + "define a color range, you MUST specify at least 2 colors."
+ );
+ }
+
+ // figure out if the distribution is equal or not. Note that
+ // colors may not exactly match the stops you define; because
+ // color generation is linear (i.e. evenly divided on a linear
+ // axis), it's very possible that a color will land in between
+ // two stops and not exactly *at* a stop.
+ //
+ // The only two colors guaranteed will be the end stops (i.e.
+ // the first and last stop), which will *always* be set as
+ // the end stops.
+ if(typeof(kwArgs.stops[0].offset) == "undefined"){
+ // set up equal offsets
+ var off=1/(l-1);
+ for(var i=0; i<l; i++){
+ kwArgs.stops[i]={
+ color:kwArgs.stops[i],
+ offset:off*i
+ };
+ }
+ }
+ // ensure the ends.
+ kwArgs.stops[0].offset=0;
+ kwArgs.stops[l-1].offset=1;
+ kwArgs.stops.sort(function(a,b){ return a.offset-b.offset; });
+
+ // create the colors.
+ // first stop.
+ c.push(kwArgs.stops[0].color.toHex());
+
+ // TODO: calculate the blend at n/steps and set the color
+
+ // last stop
+ c.push(kwArgs.stops[l-1].color.toHex());
+ this.colors=c;
+ }
+ },
+
+ _buildMarkerArray: function(){
+ this._markers = [];
+ for(var p in this.markers){ this._markers.push(this.markers[p]); }
+ // reset the position
+ this._current.marker=0;
+ },
+
+ addMarker:function(/*String*/ name, /*String*/ segment){
+ // summary:
+ // Add a custom marker to this theme.
+ // example:
+ // | myTheme.addMarker("Ellipse", foo);
+ this.markers[name]=segment;
+ this._buildMarkerArray();
+ },
+ setMarkers:function(/*Object*/ obj){
+ // summary:
+ // Set all the markers of this theme at once. obj should be a
+ // dictionary of keys and path segments.
+ //
+ // example:
+ // | myTheme.setMarkers({ "CIRCLE": foo });
+ this.markers=obj;
+ this._buildMarkerArray();
+ },
+
+ next: function(/*String?*/ type){
+ // summary:
+ // get either the next color or the next marker, depending on
+ // what was passed. If type is not passed, it assumes color.
+ // type:
+ // Optional. One of either "color" or "marker". Defaults to
+ // "color".
+ // example:
+ // | var color = myTheme.next();
+ // | var color = myTheme.next("color");
+ // | var marker = myTheme.next("marker");
+ if(type == "marker"){
+ return this._markers[ this._current.marker++ % this._markers.length ];
+ }else{
+ return this.colors[ this._current.color++ % this.colors.length ];
+ }
+ },
+ clear: function(){
+ // summary:
+ // resets both marker and color counters back to the start.
+ // Subsequent calls to `next` will retrievie the first value
+ // of each depending on the passed type.
+ this._current = {color: 0, marker: 0};
+ }
+ });
+})();
+
+}