FunnelView.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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. 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. };
  138. // Make sure update style on labelText after setLabelStyle.
  139. // Because setLabelStyle will replace a new style on it.
  140. graphic.updateProps(labelText, {
  141. style: {
  142. x: labelLayout.x,
  143. y: labelLayout.y
  144. }
  145. }, seriesModel, idx);
  146. labelText.attr({
  147. rotation: labelLayout.rotation,
  148. originX: labelLayout.x,
  149. originY: labelLayout.y,
  150. z2: 10
  151. });
  152. setLabelLineStyle(polygon, getLabelLineStatesModels(itemModel), {
  153. // Default use item visual color
  154. stroke: visualColor
  155. });
  156. };
  157. return FunnelPiece;
  158. }(graphic.Polygon);
  159. var FunnelView = /** @class */function (_super) {
  160. __extends(FunnelView, _super);
  161. function FunnelView() {
  162. var _this = _super !== null && _super.apply(this, arguments) || this;
  163. _this.type = FunnelView.type;
  164. _this.ignoreLabelLineUpdate = true;
  165. return _this;
  166. }
  167. FunnelView.prototype.render = function (seriesModel, ecModel, api) {
  168. var data = seriesModel.getData();
  169. var oldData = this._data;
  170. var group = this.group;
  171. data.diff(oldData).add(function (idx) {
  172. var funnelPiece = new FunnelPiece(data, idx);
  173. data.setItemGraphicEl(idx, funnelPiece);
  174. group.add(funnelPiece);
  175. }).update(function (newIdx, oldIdx) {
  176. var piece = oldData.getItemGraphicEl(oldIdx);
  177. piece.updateData(data, newIdx);
  178. group.add(piece);
  179. data.setItemGraphicEl(newIdx, piece);
  180. }).remove(function (idx) {
  181. var piece = oldData.getItemGraphicEl(idx);
  182. graphic.removeElementWithFadeOut(piece, seriesModel, idx);
  183. }).execute();
  184. this._data = data;
  185. };
  186. FunnelView.prototype.remove = function () {
  187. this.group.removeAll();
  188. this._data = null;
  189. };
  190. FunnelView.prototype.dispose = function () {};
  191. FunnelView.type = 'funnel';
  192. return FunnelView;
  193. }(ChartView);
  194. export default FunnelView;