You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

154 lines
5.3 KiB

  1. // Copyright (c) 2016 - 2017 Uber Technologies, Inc.
  2. //
  3. // Permission is hereby granted, free of charge, to any person obtaining a copy
  4. // of this software and associated documentation files (the "Software"), to deal
  5. // in the Software without restriction, including without limitation the rights
  6. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  7. // copies of the Software, and to permit persons to whom the Software is
  8. // furnished to do so, subject to the following conditions:
  9. //
  10. // The above copyright notice and this permission notice shall be included in
  11. // all copies or substantial portions of the Software.
  12. //
  13. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  18. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  19. // THE SOFTWARE.
  20. import { range } from 'd3-array';
  21. import { scaleLinear } from 'd3-scale';
  22. export var ORIENTATION = {
  23. TOP: 'top',
  24. LEFT: 'left',
  25. RIGHT: 'right',
  26. BOTTOM: 'bottom',
  27. VERTICAL: 'vertical',
  28. HORIZONTAL: 'horizontal'
  29. };
  30. export var DIRECTION = {
  31. VERTICAL: 'vertical',
  32. HORIZONTAL: 'horizontal'
  33. };
  34. /**
  35. * Get total amount of ticks from a given size in pixels.
  36. * @param {number} size Size of the axis in pixels.
  37. * @returns {number} Total amount of ticks.
  38. */
  39. export function getTicksTotalFromSize(size) {
  40. if (size < 700) {
  41. if (size > 300) {
  42. return 10;
  43. }
  44. return 5;
  45. }
  46. return 20;
  47. }
  48. /**
  49. * Get the tick values from a given d3 scale.
  50. * @param {d3.scale} scale Scale function.
  51. * @param {number} tickTotal Total number of ticks
  52. * @param {Array} tickValues Array of tick values if they exist.
  53. * @returns {Array} Array of tick values.
  54. */
  55. export function getTickValues(scale, tickTotal, tickValues) {
  56. return !tickValues ? scale.ticks ? scale.ticks(tickTotal) : scale.domain() : tickValues;
  57. }
  58. /**
  59. * Generate a description of a decorative axis in terms of a linear equation
  60. * y = slope * x + offset in coordinates
  61. * @param {Object} axisStart Object of format {x, y} describing in coordinates
  62. * the start position of the decorative axis
  63. * @param {Object} axisEnd Object of format {x, y} describing in coordinates
  64. * the start position of the decorative axis
  65. * @returns {Number} Object describing each the line in coordinates
  66. */
  67. export function generateFit(axisStart, axisEnd) {
  68. // address the special case when the slope is infinite
  69. if (axisStart.x === axisEnd.x) {
  70. return {
  71. left: axisStart.y,
  72. right: axisEnd.y,
  73. slope: 0,
  74. offset: axisStart.x
  75. };
  76. }
  77. var slope = (axisStart.y - axisEnd.y) / (axisStart.x - axisEnd.x);
  78. return {
  79. left: axisStart.x,
  80. right: axisEnd.x,
  81. // generate the linear projection of the axis direction
  82. slope: slope,
  83. offset: axisStart.y - slope * axisStart.x
  84. };
  85. }
  86. /**
  87. * Generate a description of a decorative axis in terms of a linear equation
  88. * y = slope * x + offset in coordinates
  89. * @param props
  90. * props.@param {Object} axisStart Object of format {x, y} describing in coordinates
  91. * the start position of the decorative axis
  92. * props.@param {Object} axisEnd Object of format {x, y} describing in coordinates
  93. * the start position of the decorative axis
  94. * props.@param {Number} numberOfTicks The number of ticks on the axis
  95. * props.@param {Array.Numbers} axisDomain The values to be interpolated across for the axis
  96. * @returns {Number} Object describing the slope and the specific coordinates of the points
  97. */
  98. export function generatePoints(_ref) {
  99. var axisStart = _ref.axisStart,
  100. axisEnd = _ref.axisEnd,
  101. numberOfTicks = _ref.numberOfTicks,
  102. axisDomain = _ref.axisDomain;
  103. var _generateFit = generateFit(axisStart, axisEnd),
  104. left = _generateFit.left,
  105. right = _generateFit.right,
  106. slope = _generateFit.slope,
  107. offset = _generateFit.offset;
  108. // construct a linear band of points, then map them
  109. var pointSlope = (right - left) / numberOfTicks;
  110. var axisScale = scaleLinear().domain([left, right]).range(axisDomain);
  111. var slopeVertical = axisStart.x === axisEnd.x;
  112. return {
  113. slope: slopeVertical ? Infinity : slope,
  114. points: range(left, right + pointSlope, pointSlope).map(function (val) {
  115. if (slopeVertical) {
  116. return { y: val, x: slope * val + offset, text: axisScale(val) };
  117. }
  118. return { x: val, y: slope * val + offset, text: axisScale(val) };
  119. }).slice(0, numberOfTicks + 1)
  120. };
  121. }
  122. /**
  123. * Compute the angle (in radians) of a decorative axis
  124. * @param {Object} axisStart Object of format {x, y} describing in coordinates
  125. * the start position of the decorative axis
  126. * @param {Object} axisEnd Object of format {x, y} describing in coordinates
  127. * the start position of the decorative axis
  128. * @returns {Number} Angle in radials
  129. */
  130. export function getAxisAngle(axisStart, axisEnd) {
  131. if (axisStart.x === axisEnd.x) {
  132. return axisEnd.y > axisStart.y ? Math.PI / 2 : 3 * Math.PI / 2;
  133. }
  134. return Math.atan((axisEnd.y - axisStart.y) / (axisEnd.x - axisStart.x));
  135. }
  136. export default {
  137. DIRECTION: DIRECTION,
  138. ORIENTATION: ORIENTATION,
  139. getTicksTotalFromSize: getTicksTotalFromSize,
  140. getTickValues: getTickValues
  141. };