Claro.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.charting.themes.Claro"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.charting.themes.Claro"] = true;
  8. dojo.provide("dojox.charting.themes.Claro");
  9. dojo.require("dojox.gfx.gradutils");
  10. dojo.require("dojox.charting.Theme");
  11. // created by Tom Trenka
  12. (function(){
  13. var dc = dojox.charting, themes = dc.themes, Theme = dc.Theme, g = Theme.generateGradient,
  14. defaultFill = {type: "linear", space: "shape", x1: 0, y1: 0, x2: 0, y2: 100};
  15. themes.Claro = new dc.Theme({
  16. chart: {
  17. fill: {
  18. type: "linear",
  19. x1: 0, x2: 0, y1: 0, y2: 100,
  20. colors: [
  21. { offset: 0, color: "#dbdbdb" },
  22. { offset: 1, color: "#efefef" }
  23. ]
  24. },
  25. stroke: {color: "#b5bcc7"}
  26. },
  27. plotarea: {
  28. fill: {
  29. type: "linear",
  30. x1: 0, x2: 0, y1: 0, y2: 100,
  31. colors: [
  32. { offset: 0, color: "#dbdbdb" },
  33. { offset: 1, color: "#efefef" }
  34. ]
  35. }
  36. },
  37. axis:{
  38. stroke: { // the axis itself
  39. color: "#888c76",
  40. width: 1
  41. },
  42. tick: { // used as a foundation for all ticks
  43. color: "#888c76",
  44. position: "center",
  45. font: "normal normal normal 7pt Verdana, Arial, sans-serif", // labels on axis
  46. fontColor: "#888c76" // color of labels
  47. }
  48. },
  49. series: {
  50. stroke: {width: 2.5, color: "#fff"},
  51. outline: null,
  52. font: "normal normal normal 7pt Verdana, Arial, sans-serif",
  53. fontColor: "#131313"
  54. },
  55. marker: {
  56. stroke: {width: 1.25, color: "#131313"},
  57. outline: {width: 1.25, color: "#131313"},
  58. font: "normal normal normal 8pt Verdana, Arial, sans-serif",
  59. fontColor: "#131313"
  60. },
  61. seriesThemes: [
  62. {fill: g(defaultFill, "#2a6ead", "#3a99f2")},
  63. {fill: g(defaultFill, "#613e04", "#996106")},
  64. {fill: g(defaultFill, "#0e3961", "#155896")},
  65. {fill: g(defaultFill, "#55aafa", "#3f7fba")},
  66. {fill: g(defaultFill, "#ad7b2a", "#db9b35")}
  67. ],
  68. markerThemes: [
  69. {fill: "#2a6ead", stroke: {color: "#fff"}},
  70. {fill: "#613e04", stroke: {color: "#fff"}},
  71. {fill: "#0e3961", stroke: {color: "#fff"}},
  72. {fill: "#55aafa", stroke: {color: "#fff"}},
  73. {fill: "#ad7b2a", stroke: {color: "#fff"}}
  74. ]
  75. });
  76. themes.Claro.next = function(elementType, mixin, doPost){
  77. var isLine = elementType == "line";
  78. if(isLine || elementType == "area"){
  79. // custom processing for lines: substitute colors
  80. var s = this.seriesThemes[this._current % this.seriesThemes.length],
  81. m = this.markerThemes[this._current % this.markerThemes.length];
  82. s.fill.space = "plot";
  83. if(isLine){
  84. s.stroke = { width: 4, color: s.fill.colors[0].color};
  85. }
  86. m.outline = { width: 1.25, color: m.fill };
  87. var theme = Theme.prototype.next.apply(this, arguments);
  88. // cleanup
  89. delete s.outline;
  90. delete s.stroke;
  91. s.fill.space = "shape";
  92. return theme;
  93. }
  94. else if(elementType == "candlestick"){
  95. var s = this.seriesThemes[this._current % this.seriesThemes.length];
  96. s.fill.space = "plot";
  97. s.stroke = { width: 1, color: s.fill.colors[0].color};
  98. var theme = Theme.prototype.next.apply(this, arguments);
  99. return theme;
  100. }
  101. return Theme.prototype.next.apply(this, arguments);
  102. };
  103. themes.Claro.post = function(theme, elementType){
  104. theme = Theme.prototype.post.apply(this, arguments);
  105. if((elementType == "slice" || elementType == "circle") && theme.series.fill && theme.series.fill.type == "radial"){
  106. theme.series.fill = dojox.gfx.gradutils.reverse(theme.series.fill);
  107. }
  108. return theme;
  109. };
  110. })();
  111. }