Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

167 linhas
5.7 KiB

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