[483] | 1 | define(["dojo/_base/lang", "dojo/_base/declare", "dojo/_base/Color", "./SimpleTheme", |
---|
| 2 | "dojox/color/_base", "dojox/color/Palette", "dojox/gfx/gradutils"], |
---|
| 3 | function(lang, declare, Color, SimpleTheme, colorX, Palette){ |
---|
| 4 | |
---|
| 5 | var Theme = declare("dojox.charting.Theme", SimpleTheme, { |
---|
| 6 | // summary: |
---|
| 7 | // A Theme is a pre-defined object, primarily JSON-based, that makes up the definitions to |
---|
| 8 | // style a chart. It extends SimpleTheme with additional features like color definition by |
---|
| 9 | // palettes and gradients definition. |
---|
| 10 | }); |
---|
| 11 | |
---|
| 12 | /*===== |
---|
| 13 | var __DefineColorArgs = { |
---|
| 14 | // summary: |
---|
| 15 | // The arguments object that can be passed to define colors for a theme. |
---|
| 16 | // num: Number? |
---|
| 17 | // The number of colors to generate. Defaults to 5. |
---|
| 18 | // colors: String[]|dojo/_base/Color[]? |
---|
| 19 | // A pre-defined set of colors; this is passed through to the Theme directly. |
---|
| 20 | // hue: Number? |
---|
| 21 | // A hue to base the generated colors from (a number from 0 - 359). |
---|
| 22 | // saturation: Number? |
---|
| 23 | // If a hue is passed, this is used for the saturation value (0 - 100). |
---|
| 24 | // low: Number? |
---|
| 25 | // An optional value to determine the lowest value used to generate a color (HSV model) |
---|
| 26 | // high: Number? |
---|
| 27 | // An optional value to determine the highest value used to generate a color (HSV model) |
---|
| 28 | // base: String|dojo/_base/Color? |
---|
| 29 | // A base color to use if we are defining colors using dojox.color.Palette |
---|
| 30 | // generator: String? |
---|
| 31 | // The generator function name from dojox/color/Palette. |
---|
| 32 | }; |
---|
| 33 | =====*/ |
---|
| 34 | lang.mixin(Theme, { |
---|
| 35 | |
---|
| 36 | defineColors: function(kwArgs){ |
---|
| 37 | // summary: |
---|
| 38 | // Generate a set of colors for the theme based on keyword |
---|
| 39 | // arguments. |
---|
| 40 | // kwArgs: __DefineColorArgs |
---|
| 41 | // The arguments object used to define colors. |
---|
| 42 | // returns: dojo/_base/Color[] |
---|
| 43 | // An array of colors for use in a theme. |
---|
| 44 | // |
---|
| 45 | // example: |
---|
| 46 | // | var colors = Theme.defineColors({ |
---|
| 47 | // | base: "#369", |
---|
| 48 | // | generator: "compound" |
---|
| 49 | // | }); |
---|
| 50 | // |
---|
| 51 | // example: |
---|
| 52 | // | var colors = Theme.defineColors({ |
---|
| 53 | // | hue: 60, |
---|
| 54 | // | saturation: 90, |
---|
| 55 | // | low: 30, |
---|
| 56 | // | high: 80 |
---|
| 57 | // | }); |
---|
| 58 | kwArgs = kwArgs || {}; |
---|
| 59 | var l, c = [], n = kwArgs.num || 5; // the number of colors to generate |
---|
| 60 | if(kwArgs.colors){ |
---|
| 61 | // we have an array of colors predefined, so fix for the number of series. |
---|
| 62 | l = kwArgs.colors.length; |
---|
| 63 | for(var i = 0; i < n; i++){ |
---|
| 64 | c.push(kwArgs.colors[i % l]); |
---|
| 65 | } |
---|
| 66 | return c; // dojo.Color[] |
---|
| 67 | } |
---|
| 68 | if(kwArgs.hue){ |
---|
| 69 | // single hue, generate a set based on brightness |
---|
| 70 | var s = kwArgs.saturation || 100, // saturation |
---|
| 71 | st = kwArgs.low || 30, |
---|
| 72 | end = kwArgs.high || 90; |
---|
| 73 | // we'd like it to be a little on the darker side. |
---|
| 74 | l = (end + st) / 2; |
---|
| 75 | // alternately, use "shades" |
---|
| 76 | return Palette.generate( |
---|
| 77 | colorX.fromHsv(kwArgs.hue, s, l), "monochromatic" |
---|
| 78 | ).colors; |
---|
| 79 | } |
---|
| 80 | if(kwArgs.generator){ |
---|
| 81 | // pass a base color and the name of a generator |
---|
| 82 | return colorX.Palette.generate(kwArgs.base, kwArgs.generator).colors; |
---|
| 83 | } |
---|
| 84 | return c; // dojo.Color[] |
---|
| 85 | }, |
---|
| 86 | |
---|
| 87 | generateGradient: function(fillPattern, colorFrom, colorTo){ |
---|
| 88 | var fill = lang.delegate(fillPattern); |
---|
| 89 | fill.colors = [ |
---|
| 90 | {offset: 0, color: colorFrom}, |
---|
| 91 | {offset: 1, color: colorTo} |
---|
| 92 | ]; |
---|
| 93 | return fill; |
---|
| 94 | }, |
---|
| 95 | |
---|
| 96 | generateHslColor: function(color, luminance){ |
---|
| 97 | color = new Color(color); |
---|
| 98 | var hsl = color.toHsl(), |
---|
| 99 | result = colorX.fromHsl(hsl.h, hsl.s, luminance); |
---|
| 100 | result.a = color.a; // add missing opacity |
---|
| 101 | return result; |
---|
| 102 | }, |
---|
| 103 | |
---|
| 104 | generateHslGradient: function(color, fillPattern, lumFrom, lumTo){ |
---|
| 105 | color = new Color(color); |
---|
| 106 | var hsl = color.toHsl(), |
---|
| 107 | colorFrom = colorX.fromHsl(hsl.h, hsl.s, lumFrom), |
---|
| 108 | colorTo = colorX.fromHsl(hsl.h, hsl.s, lumTo); |
---|
| 109 | colorFrom.a = colorTo.a = color.a; // add missing opacity |
---|
| 110 | return Theme.generateGradient(fillPattern, colorFrom, colorTo); // Object |
---|
| 111 | } |
---|
| 112 | }); |
---|
| 113 | |
---|
| 114 | // for compatibility |
---|
| 115 | Theme.defaultMarkers = SimpleTheme.defaultMarkers; |
---|
| 116 | Theme.defaultColors = SimpleTheme.defaultColors; |
---|
| 117 | Theme.defaultTheme = SimpleTheme.defaultTheme; |
---|
| 118 | |
---|
| 119 | return Theme; |
---|
| 120 | }); |
---|