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 | }); |
---|