config/Options/data/axis.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. import type {DataRegionsType} from "../../../../types/types";
  7. /**
  8.  * Axis based chart data config options
  9.  */
  10. export default {
  11. 	/**
  12. 	 * Specify the keys of the x values for each data.<br><br>
  13. 	 * This option can be used if we want to show the data that has different x values.
  14. 	 * @name data․xs
  15. 	 * @memberof Options
  16. 	 * @type {object}
  17. 	 * @default {}
  18. 	 * @example
  19. 	 * data: {
  20. 	 *   xs: {
  21. 	 *      data1: "x1",
  22. 	 *      data2: "x2"
  23. 	 *   }
  24. 	 * }
  25. 	 */
  26. 	data_xs: {},
  28. 	/**
  29. 	 * Set a format specifier to parse string specifed as x.
  30. 	 * @name data․xFormat
  31. 	 * @memberof Options
  32. 	 * @type {string}
  33. 	 * @default %Y-%m-%d
  34. 	 * @example
  35. 	 * data: {
  36. 	 *    x: "x",
  37. 	 *    columns: [
  38. 	 *        ["x", "01012019", "02012019", "03012019"],
  39. 	 *        ["data1", 30, 200, 100]
  40. 	 *    ],
  41. 	 *    // Format specifier to parse as datetime for given 'x' string value
  42. 	 *    xFormat: "%m%d%Y"
  43. 	 * },
  44. 	 * axis: {
  45. 	 *    x: {
  46. 	 *        type: "timeseries"
  47. 	 *    }
  48. 	 * }
  49. 	 * @see [D3's time specifier](https://d3js.org/d3-time-format#locale_format)
  50. 	 */
  51. 	data_xFormat: "%Y-%m-%d",
  53. 	/**
  54. 	 * Set localtime format to parse x axis.
  55. 	 * @name data․xLocaltime
  56. 	 * @memberof Options
  57. 	 * @type {boolean}
  58. 	 * @default true
  59. 	 * @example
  60. 	 * data: {
  61. 	 *   xLocaltime: false
  62. 	 * }
  63. 	 */
  64. 	data_xLocaltime: true,
  66. 	/**
  67. 	 * Sort on x axis.
  68. 	 * - **NOTE:** This option works for lineish(area/line/spline/step) types only.
  69. 	 * @name data․xSort
  70. 	 * @memberof Options
  71. 	 * @type {boolean}
  72. 	 * @default true
  73. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataXSort)
  74. 	 * @example
  75. 	 * data: {
  76. 	 *   xSort: false,
  77. 	 *   x: "x",
  78. 	 *   columns: [
  79. 	 *     // The line graph will start to be drawn following the x axis sequence
  80. 	 *     // Below data, wil start drawing x=1: 200, x=2: 300, x=3: 100
  81. 	 *     ["x", 3, 1, 2],
  82. 	 *     ["data1", 100, 200, 300]
  83. 	 *   ]
  84. 	 * }
  85. 	 */
  86. 	data_xSort: true,
  88. 	/**
  89. 	 * Set y axis the data related to. y and y2 can be used.
  90. 	 * - **NOTE:** If all data is related to one of the axes, the domain of axis without related data will be replaced by the domain from the axis with related data
  91. 	 * @name data․axes
  92. 	 * @memberof Options
  93. 	 * @type {object}
  94. 	 * @default {}
  95. 	 * @example
  96. 	 * data: {
  97. 	 *   axes: {
  98. 	 *     data1: "y",
  99. 	 *     data2: "y2"
  100. 	 *   }
  101. 	 * }
  102. 	 */
  103. 	data_axes: <{[key: string]: string}>{},
  105. 	/**
  106. 	 * Define regions for each data.<br>
  107. 	 * The values must be an array for each data and it should include an object that has `start`, `end` and `style`.
  108. 	 * - The object type should be as:
  109. 	 *   - start {number}: Start data point number. If not set, the start will be the first data point.
  110. 	 *   - [end] {number}: End data point number. If not set, the end will be the last data point.
  111. 	 *   - [style.dasharray="2 2"] {string}: The first number specifies a distance for the filled area, and the second a distance for the unfilled area.
  112. 	 * - **NOTE:**
  113. 	 *   - Supports only line type.
  114. 	 *   - `start` and `end` values should be in the exact x value range.
  115. 	 *   - Dashes will be applied using `stroke-dasharray` css property when data doesn't contain nullish value(or nullish value with `line.connectNull=true` set).
  116. 	 *   - Dashes will be applied via path command when data contains nullish value.
  117. 	 * @name data․regions
  118. 	 * @memberof Options
  119. 	 * @type {object}
  120. 	 * @default {}
  121. 	 * @example
  122. 	 * data: {
  123. 	 *   regions: {
  124. 	 *     data1: [{
  125. 	 *         start: 1,
  126. 	 *         end: 2,
  127. 	 *         style: {
  128. 	 *             dasharray: "5 2"
  129. 	 *         }
  130. 	 *     }, {
  131. 	 *         start: 3
  132. 	 *     }],
  133. 	 *     ...
  134. 	 *   }
  135. 	 * }
  136. 	 */
  137. 	data_regions: <DataRegionsType>{},
  139. 	/**
  140. 	 * Set the stacking to be normalized
  141. 	 * - **NOTE:**
  142. 	 *   - For stacking, '[data.groups](#.data%25E2%2580%25A4groups)' option should be set
  143. 	 *   - y Axis will be set in percentage value (0 ~ 100%)
  144. 	 *   - Must have postive values
  145. 	 * @name data․stack․normalize
  146. 	 * @memberof Options
  147. 	 * @type {boolean}
  148. 	 * @default false
  149. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataStackNormalized)
  150. 	 * @example
  151. 	 * data: {
  152. 	 *   stack: {
  153. 	 *      normalize: true
  154. 	 *   }
  155. 	 * }
  156. 	 */
  157. 	data_stack_normalize: false
  158. };