config/Options/common/color.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * color config options
  7.  */
  8. export default {
  9. 	/**
  10. 	 * Set color of the data values
  11. 	 * @name color
  12. 	 * @memberof Options
  13. 	 * @type {object}
  14. 	 * @property {object} color color object
  15. 	 * @property {string|object|Function} [color.onover] Set the color value for each data point when mouse/touch onover event occurs.
  16. 	 * @property {Array|null} [color.pattern=[]] Set custom color pattern. Passing `null` will not set a color for these elements, which requires the usage of custom CSS-based theming to work.
  17. 	 * @property {Function} [color.tiles] if defined, allows use svg's patterns to fill data area. It should return an array of [SVGPatternElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGPatternElement).
  18. 	 *  - **NOTE:** The pattern element's id will be defined as `bb-colorize-pattern-$COLOR-VALUE`.<br>
  19. 	 *    ex. When color pattern value is `['red', '#fff']` and defined 2 patterns,then ids for pattern elements are:<br>
  20. 	 *    - `bb-colorize-pattern-red`
  21. 	 *    - `bb-colorize-pattern-fff`
  22. 	 * @property {object} [color.threshold] color threshold for gauge and tooltip color
  23. 	 * @property {string} [color.threshold.unit] If set to `value`, the threshold will be based on the data value. Otherwise it'll be based on equation of the `threshold.max` option value.
  24. 	 * @property {Array} [color.threshold.values] Threshold values for each steps
  25. 	 * @property {number} [color.threshold.max=100] The base value to determine threshold step value condition. When the given value is 15 and max 10, then the value for threshold is `15*100/10`.
  26. 	 * @example
  27. 	 *  color: {
  28. 	 *      pattern: ["#1f77b4", "#aec7e8", ...],
  29. 	 *
  30. 	 *      // Set colors' patterns
  31. 	 *      // it should return an array of SVGPatternElement
  32. 	 *      tiles: function() {
  33. 	 *         var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
  34. 	 *         var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
  35. 	 *         var circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  36. 	 *
  37. 	 *         pattern.setAttribute("patternUnits", "userSpaceOnUse");
  38. 	 *         pattern.setAttribute("width", "32");
  39. 	 *         pattern.setAttribute("height", "32");
  40. 	 *
  41. 	 *         g.style.fill = "#000";
  42. 	 *         g.style.opacity = "0.2";
  43. 	 *
  44. 	 *         circle1.setAttribute("cx", "3");
  45. 	 *         circle1.setAttribute("cy", "3");
  46. 	 *         circle1.setAttribute("r", "3");
  47. 	 *
  48. 	 *         g.appendChild(circle1);
  49. 	 *         pattern.appendChild(g);
  50. 	 *
  51. 	 *         return [pattern];
  52. 	 *      },
  53. 	 *
  54. 	 *      // for threshold usage, pattern values should be set for each steps
  55. 	 *      pattern: ["grey", "green", "yellow", "orange", "red"],
  56. 	 *      threshold: {
  57. 	 *          unit: "value",
  58. 	 *
  59. 	 *          // when value is 20 => 'green', value is 40 => 'orange' will be set.
  60. 	 *          values: [10, 20, 30, 40, 50],
  61. 	 *
  62. 	 *          // the equation for max:
  63. 	 *          // - unit == 'value': max => 30
  64. 	 *          // - unit != 'value': max => value*100/30
  65. 	 *          max: 30
  66. 	 *      },
  67. 	 *
  68. 	 *      // set all data to 'red'
  69. 	 *      onover: "red",
  70. 	 *
  71. 	 *      // set different color for data
  72. 	 *      onover: {
  73. 	 *          data1: "red",
  74. 	 *          data2: "yellow"
  75. 	 *      },
  76. 	 *
  77. 	 *      // will pass data object to the callback
  78. 	 *      onover: function(d) {
  79. 	 *          return d.id === "data1" ? "red" : "green";
  80. 	 *      }
  81. 	 *  }
  82. 	 */
  83. 	color_pattern: <(string | null)[]>[],
  84. 	color_tiles: <(() => []) | undefined>undefined,
  85. 	color_threshold: <{unit?: string, values?: number[], max: number}>{},
  86. 	color_onover: <string | object | undefined>undefined
  87. };