AreaRangeSeries.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  1. /* *
  2. *
  3. * (c) 2010-2021 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. var __extends = (this && this.__extends) || (function () {
  12. var extendStatics = function (d, b) {
  13. extendStatics = Object.setPrototypeOf ||
  14. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  15. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  16. return extendStatics(d, b);
  17. };
  18. return function (d, b) {
  19. extendStatics(d, b);
  20. function __() { this.constructor = d; }
  21. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  22. };
  23. })();
  24. import AreaRangePoint from './AreaRangePoint.js';
  25. import AreaSeries from '../Area/AreaSeries.js';
  26. var areaProto = AreaSeries.prototype;
  27. import ColumnSeries from '../Column/ColumnSeries.js';
  28. var columnProto = ColumnSeries.prototype;
  29. import H from '../../Core/Globals.js';
  30. var noop = H.noop;
  31. import Series from '../../Core/Series/Series.js';
  32. var seriesProto = Series.prototype;
  33. import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
  34. import U from '../../Core/Utilities.js';
  35. var defined = U.defined, extend = U.extend, isArray = U.isArray, pick = U.pick, merge = U.merge;
  36. /* *
  37. *
  38. * Class
  39. *
  40. * */
  41. /**
  42. * The AreaRange series type.
  43. *
  44. * @private
  45. * @class
  46. * @name Highcharts.seriesTypes.arearange
  47. *
  48. * @augments Highcharts.Series
  49. */
  50. var AreaRangeSeries = /** @class */ (function (_super) {
  51. __extends(AreaRangeSeries, _super);
  52. function AreaRangeSeries() {
  53. /**
  54. *
  55. * Static properties
  56. *
  57. */
  58. var _this = _super !== null && _super.apply(this, arguments) || this;
  59. /* *
  60. *
  61. * Properties
  62. *
  63. * */
  64. _this.data = void 0;
  65. _this.options = void 0;
  66. _this.points = void 0;
  67. _this.lowerStateMarkerGraphic = void 0;
  68. _this.xAxis = void 0;
  69. _this.setStackedPoints = noop;
  70. return _this;
  71. /* eslint-enable valid-jsdoc */
  72. }
  73. /* *
  74. *
  75. * Functions
  76. *
  77. * */
  78. /* eslint-disable valid-jsdoc */
  79. AreaRangeSeries.prototype.toYData = function (point) {
  80. return [point.low, point.high];
  81. };
  82. /**
  83. * Translate a point's plotHigh from the internal angle and radius measures
  84. * to true plotHigh coordinates. This is an addition of the toXY method
  85. * found in Polar.js, because it runs too early for arearanges to be
  86. * considered (#3419).
  87. * @private
  88. */
  89. AreaRangeSeries.prototype.highToXY = function (point) {
  90. // Find the polar plotX and plotY
  91. var chart = this.chart, xy = this.xAxis.postTranslate(point.rectPlotX, this.yAxis.len - point.plotHigh);
  92. point.plotHighX = xy.x - chart.plotLeft;
  93. point.plotHigh = xy.y - chart.plotTop;
  94. point.plotLowX = point.plotX;
  95. };
  96. /**
  97. * Translate data points from raw values x and y to plotX and plotY.
  98. * @private
  99. */
  100. AreaRangeSeries.prototype.translate = function () {
  101. var series = this, yAxis = series.yAxis, hasModifyValue = !!series.modifyValue;
  102. areaProto.translate.apply(series);
  103. // Set plotLow and plotHigh
  104. series.points.forEach(function (point) {
  105. var high = point.high, plotY = point.plotY;
  106. if (point.isNull) {
  107. point.plotY = null;
  108. }
  109. else {
  110. point.plotLow = plotY;
  111. point.plotHigh = yAxis.translate(hasModifyValue ?
  112. series.modifyValue(high, point) :
  113. high, 0, 1, 0, 1);
  114. if (hasModifyValue) {
  115. point.yBottom = point.plotHigh;
  116. }
  117. }
  118. });
  119. // Postprocess plotHigh
  120. if (this.chart.polar) {
  121. this.points.forEach(function (point) {
  122. series.highToXY(point);
  123. point.tooltipPos = [
  124. (point.plotHighX + point.plotLowX) / 2,
  125. (point.plotHigh + point.plotLow) / 2
  126. ];
  127. });
  128. }
  129. };
  130. /**
  131. * Extend the line series' getSegmentPath method by applying the segment
  132. * path to both lower and higher values of the range.
  133. * @private
  134. */
  135. AreaRangeSeries.prototype.getGraphPath = function (points) {
  136. var highPoints = [], highAreaPoints = [], i, getGraphPath = areaProto.getGraphPath, point, pointShim, linePath, lowerPath, options = this.options, polar = this.chart.polar, connectEnds = polar && options.connectEnds !== false, connectNulls = options.connectNulls, step = options.step, higherPath, higherAreaPath;
  137. points = points || this.points;
  138. // Create the top line and the top part of the area fill. The area fill
  139. // compensates for null points by drawing down to the lower graph,
  140. // moving across the null gap and starting again at the lower graph.
  141. i = points.length;
  142. while (i--) {
  143. point = points[i];
  144. // Support for polar
  145. var highAreaPoint = polar ? {
  146. plotX: point.rectPlotX,
  147. plotY: point.yBottom,
  148. doCurve: false // #5186, gaps in areasplinerange fill
  149. } : {
  150. plotX: point.plotX,
  151. plotY: point.plotY,
  152. doCurve: false // #5186, gaps in areasplinerange fill
  153. };
  154. if (!point.isNull &&
  155. !connectEnds &&
  156. !connectNulls &&
  157. (!points[i + 1] || points[i + 1].isNull)) {
  158. highAreaPoints.push(highAreaPoint);
  159. }
  160. pointShim = {
  161. polarPlotY: point.polarPlotY,
  162. rectPlotX: point.rectPlotX,
  163. yBottom: point.yBottom,
  164. // plotHighX is for polar charts
  165. plotX: pick(point.plotHighX, point.plotX),
  166. plotY: point.plotHigh,
  167. isNull: point.isNull
  168. };
  169. highAreaPoints.push(pointShim);
  170. highPoints.push(pointShim);
  171. if (!point.isNull &&
  172. !connectEnds &&
  173. !connectNulls &&
  174. (!points[i - 1] || points[i - 1].isNull)) {
  175. highAreaPoints.push(highAreaPoint);
  176. }
  177. }
  178. // Get the paths
  179. lowerPath = getGraphPath.call(this, points);
  180. if (step) {
  181. if (step === true) {
  182. step = 'left';
  183. }
  184. options.step = {
  185. left: 'right',
  186. center: 'center',
  187. right: 'left'
  188. }[step]; // swap for reading in getGraphPath
  189. }
  190. higherPath = getGraphPath.call(this, highPoints);
  191. higherAreaPath = getGraphPath.call(this, highAreaPoints);
  192. options.step = step;
  193. // Create a line on both top and bottom of the range
  194. linePath = []
  195. .concat(lowerPath, higherPath);
  196. // For the area path, we need to change the 'move' statement
  197. // into 'lineTo'
  198. if (!this.chart.polar && higherAreaPath[0] && higherAreaPath[0][0] === 'M') {
  199. // This probably doesn't work for spline
  200. higherAreaPath[0] = ['L', higherAreaPath[0][1], higherAreaPath[0][2]];
  201. }
  202. this.graphPath = linePath;
  203. this.areaPath = lowerPath.concat(higherAreaPath);
  204. // Prepare for sideways animation
  205. linePath.isArea = true;
  206. linePath.xMap = lowerPath.xMap;
  207. this.areaPath.xMap = lowerPath.xMap;
  208. return linePath;
  209. };
  210. /**
  211. * Extend the basic drawDataLabels method by running it for both lower and
  212. * higher values.
  213. * @private
  214. */
  215. AreaRangeSeries.prototype.drawDataLabels = function () {
  216. var data = this.points, length = data.length, i, originalDataLabels = [], dataLabelOptions = this.options.dataLabels, point, up, inverted = this.chart.inverted, upperDataLabelOptions, lowerDataLabelOptions;
  217. // Split into upper and lower options. If data labels is an array, the
  218. // first element is the upper label, the second is the lower.
  219. //
  220. // TODO: We want to change this and allow multiple labels for both upper
  221. // and lower values in the future - introducing some options for which
  222. // point value to use as Y for the dataLabel, so that this could be
  223. // handled in Series.drawDataLabels. This would also improve performance
  224. // since we now have to loop over all the points multiple times to work
  225. // around the data label logic.
  226. if (isArray(dataLabelOptions)) {
  227. upperDataLabelOptions = dataLabelOptions[0] || { enabled: false };
  228. lowerDataLabelOptions = dataLabelOptions[1] || { enabled: false };
  229. }
  230. else {
  231. // Make copies
  232. upperDataLabelOptions = extend({}, dataLabelOptions);
  233. upperDataLabelOptions.x = dataLabelOptions.xHigh;
  234. upperDataLabelOptions.y = dataLabelOptions.yHigh;
  235. lowerDataLabelOptions = extend({}, dataLabelOptions);
  236. lowerDataLabelOptions.x = dataLabelOptions.xLow;
  237. lowerDataLabelOptions.y = dataLabelOptions.yLow;
  238. }
  239. // Draw upper labels
  240. if (upperDataLabelOptions.enabled || this._hasPointLabels) {
  241. // Set preliminary values for plotY and dataLabel
  242. // and draw the upper labels
  243. i = length;
  244. while (i--) {
  245. point = data[i];
  246. if (point) {
  247. up = upperDataLabelOptions.inside ?
  248. point.plotHigh < point.plotLow :
  249. point.plotHigh > point.plotLow;
  250. point.y = point.high;
  251. point._plotY = point.plotY;
  252. point.plotY = point.plotHigh;
  253. // Store original data labels and set preliminary label
  254. // objects to be picked up in the uber method
  255. originalDataLabels[i] = point.dataLabel;
  256. point.dataLabel = point.dataLabelUpper;
  257. // Set the default offset
  258. point.below = up;
  259. if (inverted) {
  260. if (!upperDataLabelOptions.align) {
  261. upperDataLabelOptions.align = up ? 'right' : 'left';
  262. }
  263. }
  264. else {
  265. if (!upperDataLabelOptions.verticalAlign) {
  266. upperDataLabelOptions.verticalAlign = up ?
  267. 'top' :
  268. 'bottom';
  269. }
  270. }
  271. }
  272. }
  273. this.options.dataLabels = upperDataLabelOptions;
  274. if (seriesProto.drawDataLabels) {
  275. // #1209:
  276. seriesProto.drawDataLabels.apply(this, arguments);
  277. }
  278. // Reset state after the upper labels were created. Move
  279. // it to point.dataLabelUpper and reassign the originals.
  280. // We do this here to support not drawing a lower label.
  281. i = length;
  282. while (i--) {
  283. point = data[i];
  284. if (point) {
  285. point.dataLabelUpper = point.dataLabel;
  286. point.dataLabel = originalDataLabels[i];
  287. delete point.dataLabels;
  288. point.y = point.low;
  289. point.plotY = point._plotY;
  290. }
  291. }
  292. }
  293. // Draw lower labels
  294. if (lowerDataLabelOptions.enabled || this._hasPointLabels) {
  295. i = length;
  296. while (i--) {
  297. point = data[i];
  298. if (point) {
  299. up = lowerDataLabelOptions.inside ?
  300. point.plotHigh < point.plotLow :
  301. point.plotHigh > point.plotLow;
  302. // Set the default offset
  303. point.below = !up;
  304. if (inverted) {
  305. if (!lowerDataLabelOptions.align) {
  306. lowerDataLabelOptions.align = up ? 'left' : 'right';
  307. }
  308. }
  309. else {
  310. if (!lowerDataLabelOptions.verticalAlign) {
  311. lowerDataLabelOptions.verticalAlign = up ?
  312. 'bottom' :
  313. 'top';
  314. }
  315. }
  316. }
  317. }
  318. this.options.dataLabels = lowerDataLabelOptions;
  319. if (seriesProto.drawDataLabels) {
  320. seriesProto.drawDataLabels.apply(this, arguments);
  321. }
  322. }
  323. // Merge upper and lower into point.dataLabels for later destroying
  324. if (upperDataLabelOptions.enabled) {
  325. i = length;
  326. while (i--) {
  327. point = data[i];
  328. if (point) {
  329. point.dataLabels = [
  330. point.dataLabelUpper,
  331. point.dataLabel
  332. ].filter(function (label) {
  333. return !!label;
  334. });
  335. }
  336. }
  337. }
  338. // Reset options
  339. this.options.dataLabels = dataLabelOptions;
  340. };
  341. AreaRangeSeries.prototype.alignDataLabel = function () {
  342. columnProto.alignDataLabel.apply(this, arguments);
  343. };
  344. AreaRangeSeries.prototype.drawPoints = function () {
  345. var series = this, pointLength = series.points.length, point, i;
  346. // Draw bottom points
  347. seriesProto.drawPoints
  348. .apply(series, arguments);
  349. // Prepare drawing top points
  350. i = 0;
  351. while (i < pointLength) {
  352. point = series.points[i];
  353. // Save original props to be overridden by temporary props for top
  354. // points
  355. point.origProps = {
  356. plotY: point.plotY,
  357. plotX: point.plotX,
  358. isInside: point.isInside,
  359. negative: point.negative,
  360. zone: point.zone,
  361. y: point.y
  362. };
  363. point.lowerGraphic = point.graphic;
  364. point.graphic = point.upperGraphic;
  365. point.plotY = point.plotHigh;
  366. if (defined(point.plotHighX)) {
  367. point.plotX = point.plotHighX;
  368. }
  369. point.y = point.high;
  370. point.negative = point.high < (series.options.threshold || 0);
  371. point.zone = (series.zones.length && point.getZone());
  372. if (!series.chart.polar) {
  373. point.isInside = point.isTopInside = (typeof point.plotY !== 'undefined' &&
  374. point.plotY >= 0 &&
  375. point.plotY <= series.yAxis.len && // #3519
  376. point.plotX >= 0 &&
  377. point.plotX <= series.xAxis.len);
  378. }
  379. i++;
  380. }
  381. // Draw top points
  382. seriesProto.drawPoints.apply(series, arguments);
  383. // Reset top points preliminary modifications
  384. i = 0;
  385. while (i < pointLength) {
  386. point = series.points[i];
  387. point.upperGraphic = point.graphic;
  388. point.graphic = point.lowerGraphic;
  389. extend(point, point.origProps);
  390. delete point.origProps;
  391. i++;
  392. }
  393. };
  394. /**
  395. * The area range series is a carteseian series with higher and lower
  396. * values for each point along an X axis, where the area between the
  397. * values is shaded.
  398. *
  399. * @sample {highcharts} highcharts/demo/arearange/
  400. * Area range chart
  401. * @sample {highstock} stock/demo/arearange/
  402. * Area range chart
  403. *
  404. * @extends plotOptions.area
  405. * @product highcharts highstock
  406. * @excluding stack, stacking
  407. * @requires highcharts-more
  408. * @optionparent plotOptions.arearange
  409. */
  410. AreaRangeSeries.defaultOptions = merge(AreaSeries.defaultOptions, {
  411. /**
  412. * @see [fillColor](#plotOptions.arearange.fillColor)
  413. * @see [fillOpacity](#plotOptions.arearange.fillOpacity)
  414. *
  415. * @apioption plotOptions.arearange.color
  416. */
  417. /**
  418. * @default low
  419. * @apioption plotOptions.arearange.colorKey
  420. */
  421. /**
  422. * @see [color](#plotOptions.arearange.color)
  423. * @see [fillOpacity](#plotOptions.arearange.fillOpacity)
  424. *
  425. * @apioption plotOptions.arearange.fillColor
  426. */
  427. /**
  428. * @see [color](#plotOptions.arearange.color)
  429. * @see [fillColor](#plotOptions.arearange.fillColor)
  430. *
  431. * @default {highcharts} 0.75
  432. * @default {highstock} 0.75
  433. * @apioption plotOptions.arearange.fillOpacity
  434. */
  435. /**
  436. * Whether to apply a drop shadow to the graph line. Since 2.3 the
  437. * shadow can be an object configuration containing `color`, `offsetX`,
  438. * `offsetY`, `opacity` and `width`.
  439. *
  440. * @type {boolean|Highcharts.ShadowOptionsObject}
  441. * @product highcharts
  442. * @apioption plotOptions.arearange.shadow
  443. */
  444. /**
  445. * Pixel width of the arearange graph line.
  446. *
  447. * @since 2.3.0
  448. *
  449. * @private
  450. */
  451. lineWidth: 1,
  452. threshold: null,
  453. tooltip: {
  454. pointFormat: '<span style="color:{series.color}">\u25CF</span> ' +
  455. '{series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>'
  456. },
  457. /**
  458. * Whether the whole area or just the line should respond to mouseover
  459. * tooltips and other mouse or touch events.
  460. *
  461. * @since 2.3.0
  462. *
  463. * @private
  464. */
  465. trackByArea: true,
  466. /**
  467. * Extended data labels for range series types. Range series data
  468. * labels use no `x` and `y` options. Instead, they have `xLow`,
  469. * `xHigh`, `yLow` and `yHigh` options to allow the higher and lower
  470. * data label sets individually.
  471. *
  472. * @declare Highcharts.SeriesAreaRangeDataLabelsOptionsObject
  473. * @exclude x, y
  474. * @since 2.3.0
  475. * @product highcharts highstock
  476. *
  477. * @private
  478. */
  479. dataLabels: {
  480. align: void 0,
  481. verticalAlign: void 0,
  482. /**
  483. * X offset of the lower data labels relative to the point value.
  484. *
  485. * @sample highcharts/plotoptions/arearange-datalabels/
  486. * Data labels on range series
  487. * @sample highcharts/plotoptions/arearange-datalabels/
  488. * Data labels on range series
  489. */
  490. xLow: 0,
  491. /**
  492. * X offset of the higher data labels relative to the point value.
  493. *
  494. * @sample highcharts/plotoptions/arearange-datalabels/
  495. * Data labels on range series
  496. */
  497. xHigh: 0,
  498. /**
  499. * Y offset of the lower data labels relative to the point value.
  500. *
  501. * @sample highcharts/plotoptions/arearange-datalabels/
  502. * Data labels on range series
  503. */
  504. yLow: 0,
  505. /**
  506. * Y offset of the higher data labels relative to the point value.
  507. *
  508. * @sample highcharts/plotoptions/arearange-datalabels/
  509. * Data labels on range series
  510. */
  511. yHigh: 0
  512. }
  513. });
  514. return AreaRangeSeries;
  515. }(AreaSeries));
  516. extend(AreaRangeSeries.prototype, {
  517. pointArrayMap: ['low', 'high'],
  518. pointValKey: 'low',
  519. deferTranslatePolar: true,
  520. pointClass: AreaRangePoint
  521. });
  522. SeriesRegistry.registerSeriesType('arearange', AreaRangeSeries);
  523. /* *
  524. *
  525. * Default export
  526. *
  527. * */
  528. export default AreaRangeSeries;
  529. /**
  530. * A `arearange` series. If the [type](#series.arearange.type) option is not
  531. * specified, it is inherited from [chart.type](#chart.type).
  532. *
  533. *
  534. * @extends series,plotOptions.arearange
  535. * @excluding dataParser, dataURL, stack, stacking
  536. * @product highcharts highstock
  537. * @requires highcharts-more
  538. * @apioption series.arearange
  539. */
  540. /**
  541. * @see [fillColor](#series.arearange.fillColor)
  542. * @see [fillOpacity](#series.arearange.fillOpacity)
  543. *
  544. * @apioption series.arearange.color
  545. */
  546. /**
  547. * An array of data points for the series. For the `arearange` series type,
  548. * points can be given in the following ways:
  549. *
  550. * 1. An array of arrays with 3 or 2 values. In this case, the values
  551. * correspond to `x,low,high`. If the first value is a string, it is
  552. * applied as the name of the point, and the `x` value is inferred.
  553. * The `x` value can also be omitted, in which case the inner arrays
  554. * should be of length 2\. Then the `x` value is automatically calculated,
  555. * either starting at 0 and incremented by 1, or from `pointStart`
  556. * and `pointInterval` given in the series options.
  557. * ```js
  558. * data: [
  559. * [0, 8, 3],
  560. * [1, 1, 1],
  561. * [2, 6, 8]
  562. * ]
  563. * ```
  564. *
  565. * 2. An array of objects with named values. The following snippet shows only a
  566. * few settings, see the complete options set below. If the total number of
  567. * data points exceeds the series'
  568. * [turboThreshold](#series.arearange.turboThreshold),
  569. * this option is not available.
  570. * ```js
  571. * data: [{
  572. * x: 1,
  573. * low: 9,
  574. * high: 0,
  575. * name: "Point2",
  576. * color: "#00FF00"
  577. * }, {
  578. * x: 1,
  579. * low: 3,
  580. * high: 4,
  581. * name: "Point1",
  582. * color: "#FF00FF"
  583. * }]
  584. * ```
  585. *
  586. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  587. * Arrays of numeric x and y
  588. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  589. * Arrays of datetime x and y
  590. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  591. * Arrays of point.name and y
  592. * @sample {highcharts} highcharts/series/data-array-of-objects/
  593. * Config objects
  594. *
  595. * @type {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
  596. * @extends series.line.data
  597. * @excluding marker, y
  598. * @product highcharts highstock
  599. * @apioption series.arearange.data
  600. */
  601. /**
  602. * @extends series.arearange.dataLabels
  603. * @product highcharts highstock
  604. * @apioption series.arearange.data.dataLabels
  605. */
  606. /**
  607. * @see [color](#series.arearange.color)
  608. * @see [fillOpacity](#series.arearange.fillOpacity)
  609. *
  610. * @apioption series.arearange.fillColor
  611. */
  612. /**
  613. * @see [color](#series.arearange.color)
  614. * @see [fillColor](#series.arearange.fillColor)
  615. *
  616. * @default {highcharts} 0.75
  617. * @default {highstock} 0.75
  618. * @apioption series.arearange.fillOpacity
  619. */
  620. /**
  621. * The high or maximum value for each data point.
  622. *
  623. * @type {number}
  624. * @product highcharts highstock
  625. * @apioption series.arearange.data.high
  626. */
  627. /**
  628. * The low or minimum value for each data point.
  629. *
  630. * @type {number}
  631. * @product highcharts highstock
  632. * @apioption series.arearange.data.low
  633. */
  634. ''; // adds doclets above to tranpiled file