FunnelView.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { __extends } from "tslib";
  41. import * as graphic from '../../util/graphic.js';
  42. import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states.js';
  43. import ChartView from '../../view/Chart.js';
  44. import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper.js';
  45. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
  46. import { saveOldStyle } from '../../animation/basicTransition.js';
  47. var opacityAccessPath = ['itemStyle', 'opacity'];
  48. /**
  49. * Piece of pie including Sector, Label, LabelLine
  50. */
  51. var FunnelPiece =
  52. /** @class */
  53. function (_super) {
  54. __extends(FunnelPiece, _super);
  55. function FunnelPiece(data, idx) {
  56. var _this = _super.call(this) || this;
  57. var polygon = _this;
  58. var labelLine = new graphic.Polyline();
  59. var text = new graphic.Text();
  60. polygon.setTextContent(text);
  61. _this.setTextGuideLine(labelLine);
  62. _this.updateData(data, idx, true);
  63. return _this;
  64. }
  65. FunnelPiece.prototype.updateData = function (data, idx, firstCreate) {
  66. var polygon = this;
  67. var seriesModel = data.hostModel;
  68. var itemModel = data.getItemModel(idx);
  69. var layout = data.getItemLayout(idx);
  70. var emphasisModel = itemModel.getModel('emphasis');
  71. var opacity = itemModel.get(opacityAccessPath);
  72. opacity = opacity == null ? 1 : opacity;
  73. if (!firstCreate) {
  74. saveOldStyle(polygon);
  75. } // Update common style
  76. polygon.useStyle(data.getItemVisual(idx, 'style'));
  77. polygon.style.lineJoin = 'round';
  78. if (firstCreate) {
  79. polygon.setShape({
  80. points: layout.points
  81. });
  82. polygon.style.opacity = 0;
  83. graphic.initProps(polygon, {
  84. style: {
  85. opacity: opacity
  86. }
  87. }, seriesModel, idx);
  88. } else {
  89. graphic.updateProps(polygon, {
  90. style: {
  91. opacity: opacity
  92. },
  93. shape: {
  94. points: layout.points
  95. }
  96. }, seriesModel, idx);
  97. }
  98. setStatesStylesFromModel(polygon, itemModel);
  99. this._updateLabel(data, idx);
  100. toggleHoverEmphasis(this, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  101. };
  102. FunnelPiece.prototype._updateLabel = function (data, idx) {
  103. var polygon = this;
  104. var labelLine = this.getTextGuideLine();
  105. var labelText = polygon.getTextContent();
  106. var seriesModel = data.hostModel;
  107. var itemModel = data.getItemModel(idx);
  108. var layout = data.getItemLayout(idx);
  109. var labelLayout = layout.label;
  110. var style = data.getItemVisual(idx, 'style');
  111. var visualColor = style.fill;
  112. setLabelStyle( // position will not be used in setLabelStyle
  113. labelText, getLabelStatesModels(itemModel), {
  114. labelFetcher: data.hostModel,
  115. labelDataIndex: idx,
  116. defaultOpacity: style.opacity,
  117. defaultText: data.getName(idx)
  118. }, {
  119. normal: {
  120. align: labelLayout.textAlign,
  121. verticalAlign: labelLayout.verticalAlign
  122. }
  123. });
  124. polygon.setTextConfig({
  125. local: true,
  126. inside: !!labelLayout.inside,
  127. insideStroke: visualColor,
  128. // insideFill: 'auto',
  129. outsideFill: visualColor
  130. });
  131. var linePoints = labelLayout.linePoints;
  132. labelLine.setShape({
  133. points: linePoints
  134. });
  135. polygon.textGuideLineConfig = {
  136. anchor: linePoints ? new graphic.Point(linePoints[0][0], linePoints[0][1]) : null
  137. }; // Make sure update style on labelText after setLabelStyle.
  138. // Because setLabelStyle will replace a new style on it.
  139. graphic.updateProps(labelText, {
  140. style: {
  141. x: labelLayout.x,
  142. y: labelLayout.y
  143. }
  144. }, seriesModel, idx);
  145. labelText.attr({
  146. rotation: labelLayout.rotation,
  147. originX: labelLayout.x,
  148. originY: labelLayout.y,
  149. z2: 10
  150. });
  151. setLabelLineStyle(polygon, getLabelLineStatesModels(itemModel), {
  152. // Default use item visual color
  153. stroke: visualColor
  154. });
  155. };
  156. return FunnelPiece;
  157. }(graphic.Polygon);
  158. var FunnelView =
  159. /** @class */
  160. function (_super) {
  161. __extends(FunnelView, _super);
  162. function FunnelView() {
  163. var _this = _super !== null && _super.apply(this, arguments) || this;
  164. _this.type = FunnelView.type;
  165. _this.ignoreLabelLineUpdate = true;
  166. return _this;
  167. }
  168. FunnelView.prototype.render = function (seriesModel, ecModel, api) {
  169. var data = seriesModel.getData();
  170. var oldData = this._data;
  171. var group = this.group;
  172. data.diff(oldData).add(function (idx) {
  173. var funnelPiece = new FunnelPiece(data, idx);
  174. data.setItemGraphicEl(idx, funnelPiece);
  175. group.add(funnelPiece);
  176. }).update(function (newIdx, oldIdx) {
  177. var piece = oldData.getItemGraphicEl(oldIdx);
  178. piece.updateData(data, newIdx);
  179. group.add(piece);
  180. data.setItemGraphicEl(newIdx, piece);
  181. }).remove(function (idx) {
  182. var piece = oldData.getItemGraphicEl(idx);
  183. graphic.removeElementWithFadeOut(piece, seriesModel, idx);
  184. }).execute();
  185. this._data = data;
  186. };
  187. FunnelView.prototype.remove = function () {
  188. this.group.removeAll();
  189. this._data = null;
  190. };
  191. FunnelView.prototype.dispose = function () {};
  192. FunnelView.type = 'funnel';
  193. return FunnelView;
  194. }(ChartView);
  195. export default FunnelView;