BoxPlot.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _propTypes = _interopRequireDefault(require("prop-types"));
  5. var _react = _interopRequireDefault(require("react"));
  6. var _xyChart = require("@data-ui/xy-chart");
  7. var _theme = require("@data-ui/theme");
  8. var _chartComposition = require("@superset-ui/chart-composition");
  9. var _DefaultTooltipRenderer = _interopRequireDefault(require("./DefaultTooltipRenderer"));
  10. var _Encoder = _interopRequireDefault(require("./Encoder"));
  11. var _createMarginSelector = _interopRequireWildcard(require("../utils/selectors/createMarginSelector"));
  12. var _convertScaleToDataUIScaleShape = _interopRequireDefault(require("../utils/convertScaleToDataUIScaleShape"));
  13. var _createXYChartLayoutWithTheme = _interopRequireDefault(require("../utils/createXYChartLayoutWithTheme"));
  14. var _createEncoderSelector = _interopRequireDefault(require("../encodeable/createEncoderSelector"));
  15. var _createRenderLegend = _interopRequireDefault(require("../components/legend/createRenderLegend"));
  16. function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
  17. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
  18. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  19. function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  20. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  21. const defaultProps = {
  22. className: '',
  23. margin: _createMarginSelector.DEFAULT_MARGIN,
  24. theme: _theme.chartTheme,
  25. TooltipRenderer: _DefaultTooltipRenderer.default
  26. };
  27. class BoxPlot extends _react.default.PureComponent {
  28. constructor(props) {
  29. super(props);
  30. _defineProperty(this, "createEncoder", (0, _createEncoderSelector.default)(_Encoder.default));
  31. _defineProperty(this, "createMargin", (0, _createMarginSelector.default)());
  32. this.renderChart = this.renderChart.bind(this);
  33. }
  34. renderChart(dim) {
  35. const {
  36. width,
  37. height
  38. } = dim;
  39. const {
  40. data,
  41. margin,
  42. theme,
  43. TooltipRenderer
  44. } = this.props;
  45. const encoder = this.createEncoder(this.props);
  46. const {
  47. channels
  48. } = encoder;
  49. const isHorizontal = channels.y.definition.type === 'nominal';
  50. if (typeof channels.x.scale !== 'undefined') {
  51. const xDomain = channels.x.getDomain(data);
  52. channels.x.scale.setDomain(xDomain);
  53. }
  54. if (typeof channels.y.scale !== 'undefined') {
  55. const yDomain = channels.y.getDomain(data);
  56. channels.y.scale.setDomain(yDomain);
  57. }
  58. const layout = (0, _createXYChartLayoutWithTheme.default)({
  59. width,
  60. height,
  61. margin: this.createMargin(margin),
  62. theme,
  63. xEncoder: channels.x,
  64. yEncoder: channels.y
  65. });
  66. return layout.renderChartWithFrame(chartDim => _react.default.createElement(_xyChart.XYChart, {
  67. showYGrid: true,
  68. width: chartDim.width,
  69. height: chartDim.height,
  70. ariaLabel: "BoxPlot",
  71. margin: layout.margin,
  72. renderTooltip: ({
  73. datum,
  74. color
  75. }) => _react.default.createElement(TooltipRenderer, {
  76. datum: datum,
  77. color: color,
  78. encoder: encoder
  79. }),
  80. theme: theme,
  81. xScale: (0, _convertScaleToDataUIScaleShape.default)(channels.x.scale.config),
  82. yScale: (0, _convertScaleToDataUIScaleShape.default)(channels.y.scale.config)
  83. }, layout.renderXAxis(), layout.renderYAxis(), _react.default.createElement(_xyChart.BoxPlotSeries, {
  84. key: channels.x.definition.field,
  85. animated: true,
  86. data: isHorizontal ? data.map(row => _extends({}, row, {
  87. y: channels.y.get(row)
  88. })) : data.map(row => _extends({}, row, {
  89. x: channels.x.get(row)
  90. })),
  91. fill: datum => channels.color.encode(datum, '#55acee'),
  92. fillOpacity: 0.4,
  93. stroke: datum => channels.color.encode(datum),
  94. strokeWidth: 1,
  95. widthRatio: 0.6,
  96. horizontal: channels.y.definition.type === 'nominal'
  97. })));
  98. }
  99. render() {
  100. const {
  101. className,
  102. data,
  103. width,
  104. height
  105. } = this.props;
  106. const encoder = this.createEncoder(this.props);
  107. return _react.default.createElement(_chartComposition.WithLegend, {
  108. className: "superset-chart-box-plot " + className,
  109. width: width,
  110. height: height,
  111. position: "top",
  112. renderLegend: (0, _createRenderLegend.default)(encoder, data, this.props),
  113. renderChart: this.renderChart
  114. });
  115. }
  116. }
  117. exports.default = BoxPlot;
  118. _defineProperty(BoxPlot, "propTypes", {
  119. className: _propTypes.default.string,
  120. width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
  121. height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
  122. TooltipRenderer: _propTypes.default.elementType
  123. });
  124. _defineProperty(BoxPlot, "defaultProps", defaultProps);