FunnelView.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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 = /** @class */function (_super) {
  52. __extends(FunnelPiece, _super);
  53. function FunnelPiece(data, idx) {
  54. var _this = _super.call(this) || this;
  55. var polygon = _this;
  56. var labelLine = new graphic.Polyline();
  57. var text = new graphic.Text();
  58. polygon.setTextContent(text);
  59. _this.setTextGuideLine(labelLine);
  60. _this.updateData(data, idx, true);
  61. return _this;
  62. }
  63. FunnelPiece.prototype.updateData = function (data, idx, firstCreate) {
  64. var polygon = this;
  65. var seriesModel = data.hostModel;
  66. var itemModel = data.getItemModel(idx);
  67. var layout = data.getItemLayout(idx);
  68. var emphasisModel = itemModel.getModel('emphasis');
  69. var opacity = itemModel.get(opacityAccessPath);
  70. opacity = opacity == null ? 1 : opacity;
  71. if (!firstCreate) {
  72. saveOldStyle(polygon);
  73. }
  74. // Update common style
  75. polygon.useStyle(data.getItemVisual(idx, 'style'));
  76. polygon.style.lineJoin = 'round';
  77. if (firstCreate) {
  78. polygon.setShape({
  79. points: layout.points
  80. });
  81. polygon.style.opacity = 0;
  82. graphic.initProps(polygon, {
  83. style: {
  84. opacity: opacity
  85. }
  86. }, seriesModel, idx);
  87. } else {
  88. graphic.updateProps(polygon, {
  89. style: {
  90. opacity: opacity
  91. },
  92. shape: {
  93. points: layout.points
  94. }
  95. }, seriesModel, idx);
  96. }
  97. setStatesStylesFromModel(polygon, itemModel);
  98. this._updateLabel(data, idx);
  99. toggleHoverEmphasis(this, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  100. };
  101. FunnelPiece.prototype._updateLabel = function (data, idx) {
  102. var polygon = this;
  103. var labelLine = this.getTextGuideLine();
  104. var labelText = polygon.getTextContent();
  105. var seriesModel = data.hostModel;
  106. var itemModel = data.getItemModel(idx);
  107. var layout = data.getItemLayout(idx);
  108. var labelLayout = layout.label;
  109. var style = data.getItemVisual(idx, 'style');
  110. var visualColor = style.fill;
  111. setLabelStyle(
  112. // 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. var labelModel = itemModel.getModel('label');
  125. var labelColor = labelModel.get('color');
  126. var overrideColor = labelColor === 'inherit' ? visualColor : null;
  127. polygon.setTextConfig({
  128. local: true,
  129. inside: !!labelLayout.inside,
  130. insideStroke: overrideColor,
  131. outsideFill: overrideColor
  132. });
  133. var linePoints = labelLayout.linePoints;
  134. labelLine.setShape({
  135. points: linePoints
  136. });
  137. polygon.textGuideLineConfig = {
  138. anchor: linePoints ? new graphic.Point(linePoints[0][0], linePoints[0][1]) : null
  139. };
  140. // Make sure update style on labelText after setLabelStyle.
  141. // Because setLabelStyle will replace a new style on it.
  142. graphic.updateProps(labelText, {
  143. style: {
  144. x: labelLayout.x,
  145. y: labelLayout.y
  146. }
  147. }, seriesModel, idx);
  148. labelText.attr({
  149. rotation: labelLayout.rotation,
  150. originX: labelLayout.x,
  151. originY: labelLayout.y,
  152. z2: 10
  153. });
  154. setLabelLineStyle(polygon, getLabelLineStatesModels(itemModel), {
  155. // Default use item visual color
  156. stroke: visualColor
  157. });
  158. };
  159. return FunnelPiece;
  160. }(graphic.Polygon);
  161. var FunnelView = /** @class */function (_super) {
  162. __extends(FunnelView, _super);
  163. function FunnelView() {
  164. var _this = _super !== null && _super.apply(this, arguments) || this;
  165. _this.type = FunnelView.type;
  166. _this.ignoreLabelLineUpdate = true;
  167. return _this;
  168. }
  169. FunnelView.prototype.render = function (seriesModel, ecModel, api) {
  170. var data = seriesModel.getData();
  171. var oldData = this._data;
  172. var group = this.group;
  173. data.diff(oldData).add(function (idx) {
  174. var funnelPiece = new FunnelPiece(data, idx);
  175. data.setItemGraphicEl(idx, funnelPiece);
  176. group.add(funnelPiece);
  177. }).update(function (newIdx, oldIdx) {
  178. var piece = oldData.getItemGraphicEl(oldIdx);
  179. piece.updateData(data, newIdx);
  180. group.add(piece);
  181. data.setItemGraphicEl(newIdx, piece);
  182. }).remove(function (idx) {
  183. var piece = oldData.getItemGraphicEl(idx);
  184. graphic.removeElementWithFadeOut(piece, seriesModel, idx);
  185. }).execute();
  186. this._data = data;
  187. };
  188. FunnelView.prototype.remove = function () {
  189. this.group.removeAll();
  190. this._data = null;
  191. };
  192. FunnelView.prototype.dispose = function () {};
  193. FunnelView.type = 'funnel';
  194. return FunnelView;
  195. }(ChartView);
  196. export default FunnelView;