FunnelView.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  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 { SERIES_TYPE_FUNNEL } from './FunnelSeries.js';
  45. import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper.js';
  46. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
  47. import { saveOldStyle } from '../../animation/basicTransition.js';
  48. var opacityAccessPath = ['itemStyle', 'opacity'];
  49. /**
  50. * Piece of pie including Sector, Label, LabelLine
  51. */
  52. var FunnelPiece = /** @class */function (_super) {
  53. __extends(FunnelPiece, _super);
  54. function FunnelPiece(data, idx) {
  55. var _this = _super.call(this) || this;
  56. var polygon = _this;
  57. var labelLine = new graphic.Polyline();
  58. var text = new graphic.Text();
  59. polygon.setTextContent(text);
  60. _this.setTextGuideLine(labelLine);
  61. _this.updateData(data, idx, true);
  62. return _this;
  63. }
  64. FunnelPiece.prototype.updateData = function (data, idx, firstCreate) {
  65. var polygon = this;
  66. var seriesModel = data.hostModel;
  67. var itemModel = data.getItemModel(idx);
  68. var layout = data.getItemLayout(idx);
  69. var emphasisModel = itemModel.getModel('emphasis');
  70. var opacity = itemModel.get(opacityAccessPath);
  71. opacity = opacity == null ? 1 : opacity;
  72. if (!firstCreate) {
  73. saveOldStyle(polygon);
  74. }
  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(
  113. // position will not be used in setLabelStyle
  114. labelText, getLabelStatesModels(itemModel), {
  115. labelFetcher: data.hostModel,
  116. labelDataIndex: idx,
  117. defaultOpacity: style.opacity,
  118. defaultText: data.getName(idx)
  119. }, {
  120. normal: {
  121. align: labelLayout.textAlign,
  122. verticalAlign: labelLayout.verticalAlign
  123. }
  124. });
  125. var labelModel = itemModel.getModel('label');
  126. var labelColor = labelModel.get('color');
  127. var overrideColor = labelColor === 'inherit' ? visualColor : null;
  128. polygon.setTextConfig({
  129. local: true,
  130. inside: !!labelLayout.inside,
  131. insideStroke: overrideColor,
  132. outsideFill: overrideColor
  133. });
  134. var linePoints = labelLayout.linePoints;
  135. labelLine.setShape({
  136. points: linePoints
  137. });
  138. polygon.textGuideLineConfig = {
  139. anchor: linePoints ? new graphic.Point(linePoints[0][0], linePoints[0][1]) : null
  140. };
  141. // Make sure update style on labelText after setLabelStyle.
  142. // Because setLabelStyle will replace a new style on it.
  143. graphic.updateProps(labelText, {
  144. style: {
  145. x: labelLayout.x,
  146. y: labelLayout.y
  147. }
  148. }, seriesModel, idx);
  149. labelText.attr({
  150. rotation: labelLayout.rotation,
  151. originX: labelLayout.x,
  152. originY: labelLayout.y,
  153. z2: 10
  154. });
  155. setLabelLineStyle(polygon, getLabelLineStatesModels(itemModel), {
  156. // Default use item visual color
  157. stroke: visualColor
  158. });
  159. };
  160. return FunnelPiece;
  161. }(graphic.Polygon);
  162. var FunnelView = /** @class */function (_super) {
  163. __extends(FunnelView, _super);
  164. function FunnelView() {
  165. var _this = _super !== null && _super.apply(this, arguments) || this;
  166. _this.type = SERIES_TYPE_FUNNEL;
  167. _this.ignoreLabelLineUpdate = true;
  168. return _this;
  169. }
  170. FunnelView.prototype.render = function (seriesModel, ecModel, api) {
  171. var data = seriesModel.getData();
  172. var oldData = this._data;
  173. var group = this.group;
  174. data.diff(oldData).add(function (idx) {
  175. var funnelPiece = new FunnelPiece(data, idx);
  176. data.setItemGraphicEl(idx, funnelPiece);
  177. group.add(funnelPiece);
  178. }).update(function (newIdx, oldIdx) {
  179. var piece = oldData.getItemGraphicEl(oldIdx);
  180. piece.updateData(data, newIdx);
  181. group.add(piece);
  182. data.setItemGraphicEl(newIdx, piece);
  183. }).remove(function (idx) {
  184. var piece = oldData.getItemGraphicEl(idx);
  185. graphic.removeElementWithFadeOut(piece, seriesModel, idx);
  186. }).execute();
  187. this._data = data;
  188. };
  189. FunnelView.prototype.remove = function () {
  190. this.group.removeAll();
  191. this._data = null;
  192. };
  193. FunnelView.prototype.dispose = function () {};
  194. FunnelView.type = SERIES_TYPE_FUNNEL;
  195. return FunnelView;
  196. }(ChartView);
  197. export default FunnelView;