one-design-next 0.0.100 → 0.0.102

package/dist/chart/bar.d.ts

@@ -0,0 +1,11 @@
+import type { EChartsOption } from 'echarts';
+import * as React from 'react';
+import { type ChartHostProps } from './host';
+import { type ChartSeries } from './option';
+export interface ChartBarProps extends Omit<ChartHostProps, 'option'> {
+    categories: string[];
+    series: ChartSeries[];
+    option?: EChartsOption;
+}
+declare const ChartBar: React.FC<ChartBarProps>;
+export default ChartBar;

package/dist/chart/bar.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["categories", "series", "option"];
+import * as React from 'react';
+import ChartHost from "./host";
+import { cartesianOption, mergeOption } from "./option";
+var ChartBar = function ChartBar(_ref) {
+  var categories = _ref.categories,
+    series = _ref.series,
+    option = _ref.option,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var built = React.useMemo(function () {
+    return mergeOption(cartesianOption({
+      kind: 'bar',
+      categories: categories,
+      series: series
+    }), option);
+  }, [categories, series, option]);
+  return /*#__PURE__*/React.createElement(ChartHost, _extends({
+    option: built
+  }, rest));
+};
+ChartBar.displayName = 'Chart.Bar';
+export default ChartBar;

package/dist/chart/bullet.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import '../pop-base/style';
+import './style';
+export type ChartBulletItem = {
+    name: string;
+    value: number;
+    rate: number;
+    bench?: number;
+};
+export interface ChartBulletProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    data: ChartBulletItem[];
+    nameLabel?: string;
+    valueLabel?: string;
+    rateLabel?: string;
+    benchLabel?: string;
+    /** 名称列宽。心智触点默认 140 */
+    nameWidth?: number;
+    /** 绝对量列兜底宽。心智触点默认 100，渲染后按内容撑开，顶 120 */
+    valueWidth?: number;
+    /** 藏绝对量列。渗透列表只有条和竖线，不是新图种 */
+    hideValue?: boolean;
+    hideAxisLabel?: boolean;
+    hideTopBarBorder?: boolean;
+    maxBodyHeight?: number;
+}
+declare const ChartBullet: React.FC<ChartBulletProps>;
+export default ChartBullet;

package/dist/chart/bullet.js

@@ -0,0 +1,455 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["data", "nameLabel", "valueLabel", "rateLabel", "benchLabel", "nameWidth", "valueWidth", "hideValue", "hideAxisLabel", "hideTopBarBorder", "maxBodyHeight", "className", "style"];
+import clsx from 'clsx';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import Empty from "../empty";
+import HoverFill from "../hover-fill";
+import "../pop-base/style";
+import "./style";
+var TICK_THRESHOLDS = [{
+  max: 0.1,
+  base: 0.05
+}, {
+  max: 0.5,
+  base: 0.2
+}, {
+  max: 1,
+  base: 0.5
+}, {
+  max: 2,
+  base: 1
+}, {
+  max: 5,
+  base: 2
+}, {
+  max: 10,
+  base: 5
+}, {
+  max: 20,
+  base: 10
+}, {
+  max: 50,
+  base: 20
+}];
+var TICK_COUNT = 5;
+var TGI_COL_MAX = 120;
+var SHARED_POPOVER_OFFSET = 8;
+var SHARED_POPOVER_TRANSITION = 'transform 120ms ease-out';
+var SHARED_POPOVER_HIDE_DELAY = 80;
+function getTickBase(value) {
+  for (var _i = 0, _TICK_THRESHOLDS = TICK_THRESHOLDS; _i < _TICK_THRESHOLDS.length; _i++) {
+    var _TICK_THRESHOLDS$_i = _TICK_THRESHOLDS[_i],
+      max = _TICK_THRESHOLDS$_i.max,
+      base = _TICK_THRESHOLDS$_i.base;
+    if (value <= max) return base;
+  }
+  return 25;
+}
+function formatAxisLabel(value) {
+  if (value === 0) return '0%';
+  if (Number.isInteger(value)) return "".concat(value, "%");
+  return value < 1 ? "".concat(value.toFixed(2), "%") : "".concat(value.toFixed(1), "%");
+}
+function formatPercentage(value) {
+  if (value > 0 && value < 0.01) return '0.01%';
+  return "".concat(value.toFixed(2), "%");
+}
+function formatValue(value) {
+  return Math.round(value).toLocaleString();
+}
+function getMaxRate(data) {
+  if (data.length === 0) return 20;
+  var maxValue = Math.max.apply(Math, _toConsumableArray(data.map(function (item) {
+    var _item$bench;
+    return Math.max(item.rate, (_item$bench = item.bench) !== null && _item$bench !== void 0 ? _item$bench : 0);
+  })));
+  return Math.max(5, maxValue);
+}
+function getPopoverOffset(area, target) {
+  var rect = target.getBoundingClientRect();
+  return {
+    x: Math.round(area === 'left' ? rect.right : rect.left),
+    y: Math.round(rect.top + rect.height / 2)
+  };
+}
+function getPopoverRootStyle(popoverState, area) {
+  var _popoverState$offset$, _popoverState$offset$2;
+  var x = (_popoverState$offset$ = popoverState === null || popoverState === void 0 ? void 0 : popoverState.offset.x) !== null && _popoverState$offset$ !== void 0 ? _popoverState$offset$ : 0;
+  var y = (_popoverState$offset$2 = popoverState === null || popoverState === void 0 ? void 0 : popoverState.offset.y) !== null && _popoverState$offset$2 !== void 0 ? _popoverState$offset$2 : 0;
+  var horizontalOffset = area === 'left' ? SHARED_POPOVER_OFFSET : -SHARED_POPOVER_OFFSET;
+  var alignTransform = area === 'left' ? 'translateY(-50%)' : 'translate(-100%, -50%)';
+  return {
+    pointerEvents: 'none',
+    position: 'fixed',
+    left: 0,
+    top: 0,
+    transition: popoverState !== null && popoverState !== void 0 && popoverState.animate ? SHARED_POPOVER_TRANSITION : 'none',
+    transform: "translate3d(".concat(x + horizontalOffset, "px, ").concat(y, "px, 0) ").concat(alignTransform),
+    willChange: 'transform'
+  };
+}
+function SortCarets(_ref) {
+  var order = _ref.order;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-odn-chart-bullet-sort": true,
+    "data-order": order || undefined,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("svg", {
+    "data-odn-chart-bullet-sort-up": true,
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.41437 2.73204C7.71461 2.35674 8.28543 2.35674 8.58567 2.73204L11.0252 5.78145C11.4181 6.27253 11.0684 6.99998 10.4396 6.99998L5.56049 6.99998C4.93161 6.99998 4.58198 6.27253 4.97484 5.78145L7.41437 2.73204Z"
+  })), /*#__PURE__*/React.createElement("svg", {
+    "data-odn-chart-bullet-sort-down": true,
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.58567 13.2679C8.28543 13.6432 7.71461 13.6432 7.41437 13.2679L4.97484 10.2185C4.58198 9.72743 4.93161 8.99998 5.56049 8.99998H10.4396C11.0684 8.99998 11.4181 9.72743 11.0252 10.2185L8.58567 13.2679Z"
+  })));
+}
+var ChartBullet = function ChartBullet(_ref2) {
+  var data = _ref2.data,
+    _ref2$nameLabel = _ref2.nameLabel,
+    nameLabel = _ref2$nameLabel === void 0 ? '触点' : _ref2$nameLabel,
+    _ref2$valueLabel = _ref2.valueLabel,
+    valueLabel = _ref2$valueLabel === void 0 ? '心智量' : _ref2$valueLabel,
+    _ref2$rateLabel = _ref2.rateLabel,
+    rateLabel = _ref2$rateLabel === void 0 ? '心智量占比' : _ref2$rateLabel,
+    _ref2$benchLabel = _ref2.benchLabel,
+    benchLabel = _ref2$benchLabel === void 0 ? '行业均值' : _ref2$benchLabel,
+    _ref2$nameWidth = _ref2.nameWidth,
+    nameWidth = _ref2$nameWidth === void 0 ? 140 : _ref2$nameWidth,
+    _ref2$valueWidth = _ref2.valueWidth,
+    valueWidth = _ref2$valueWidth === void 0 ? 100 : _ref2$valueWidth,
+    _ref2$hideValue = _ref2.hideValue,
+    hideValue = _ref2$hideValue === void 0 ? false : _ref2$hideValue,
+    _ref2$hideAxisLabel = _ref2.hideAxisLabel,
+    hideAxisLabel = _ref2$hideAxisLabel === void 0 ? false : _ref2$hideAxisLabel,
+    _ref2$hideTopBarBorde = _ref2.hideTopBarBorder,
+    hideTopBarBorder = _ref2$hideTopBarBorde === void 0 ? false : _ref2$hideTopBarBorde,
+    _ref2$maxBodyHeight = _ref2.maxBodyHeight,
+    maxBodyHeight = _ref2$maxBodyHeight === void 0 ? 368 : _ref2$maxBodyHeight,
+    className = _ref2.className,
+    style = _ref2.style,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var rootRef = React.useRef(null);
+  var bodyInnerRef = React.useRef(null);
+  var chartAreaObserverRef = React.useRef(null);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    chartWidth = _React$useState2[0],
+    setChartWidth = _React$useState2[1];
+  var _React$useState3 = React.useState(hideValue ? 0 : valueWidth),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    tgiColWidth = _React$useState4[0],
+    setTgiColWidth = _React$useState4[1];
+  var tgiColWidthRef = React.useRef(hideValue ? 0 : valueWidth);
+  var _React$useState5 = React.useState('rate'),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    sortField = _React$useState6[0],
+    setSortField = _React$useState6[1];
+  var _React$useState7 = React.useState('desc'),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    sortOrder = _React$useState8[0],
+    setSortOrder = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    popoverState = _React$useState10[0],
+    setPopoverState = _React$useState10[1];
+  var popoverTimerRef = React.useRef(0);
+  var measureTgiColWidth = React.useCallback(function () {
+    if (hideValue) {
+      if (tgiColWidthRef.current !== 0) {
+        tgiColWidthRef.current = 0;
+        setTgiColWidth(0);
+      }
+      return;
+    }
+    var container = rootRef.current;
+    if (!container) return;
+    var elements = container.querySelectorAll('[data-tgi-col]');
+    var maxWidth = valueWidth;
+    elements.forEach(function (el) {
+      var width = el.getBoundingClientRect().width;
+      if (width > maxWidth) maxWidth = width;
+    });
+    maxWidth = Math.min(TGI_COL_MAX, Math.ceil(maxWidth));
+    if (maxWidth !== tgiColWidthRef.current) {
+      tgiColWidthRef.current = maxWidth;
+      setTgiColWidth(maxWidth);
+    }
+  }, [hideValue, valueWidth]);
+  React.useLayoutEffect(function () {
+    requestAnimationFrame(measureTgiColWidth);
+  }, [data, measureTgiColWidth]);
+  var chartAreaRef = React.useCallback(function (node) {
+    var _chartAreaObserverRef;
+    (_chartAreaObserverRef = chartAreaObserverRef.current) === null || _chartAreaObserverRef === void 0 || _chartAreaObserverRef.disconnect();
+    chartAreaObserverRef.current = null;
+    if (!node) return;
+    var observer = new ResizeObserver(function (entries) {
+      var _entries$0$contentRec, _entries$;
+      var width = Math.round((_entries$0$contentRec = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width) !== null && _entries$0$contentRec !== void 0 ? _entries$0$contentRec : 0);
+      setChartWidth(function (prev) {
+        return prev === width ? prev : width;
+      });
+    });
+    observer.observe(node);
+    chartAreaObserverRef.current = observer;
+    setChartWidth(Math.round(node.getBoundingClientRect().width));
+  }, []);
+  React.useEffect(function () {
+    return function () {
+      var _chartAreaObserverRef2;
+      (_chartAreaObserverRef2 = chartAreaObserverRef.current) === null || _chartAreaObserverRef2 === void 0 || _chartAreaObserverRef2.disconnect();
+      window.clearTimeout(popoverTimerRef.current);
+    };
+  }, []);
+  var hideSharedPopover = React.useCallback(function () {
+    window.clearTimeout(popoverTimerRef.current);
+    setPopoverState(null);
+  }, []);
+  React.useEffect(function () {
+    if (!popoverState) return undefined;
+    var onScroll = function onScroll() {
+      return hideSharedPopover();
+    };
+    window.addEventListener('scroll', onScroll, true);
+    return function () {
+      return window.removeEventListener('scroll', onScroll, true);
+    };
+  }, [hideSharedPopover, popoverState]);
+  var onRowAreaMouseEnter = React.useCallback(function (item, area, target) {
+    window.clearTimeout(popoverTimerRef.current);
+    var offset = getPopoverOffset(area, target);
+    setPopoverState(function (prev) {
+      return {
+        item: item,
+        area: area,
+        offset: offset,
+        animate: !!prev && prev.area === area
+      };
+    });
+  }, []);
+  var onRowAreaMouseLeave = React.useCallback(function () {
+    window.clearTimeout(popoverTimerRef.current);
+    popoverTimerRef.current = window.setTimeout(function () {
+      setPopoverState(null);
+    }, SHARED_POPOVER_HIDE_DELAY);
+  }, []);
+  var rows = React.useMemo(function () {
+    var next = _toConsumableArray(data);
+    if (!sortField || !sortOrder) return next;
+    var dir = sortOrder === 'asc' ? 1 : -1;
+    next.sort(function (a, b) {
+      var _b$bench, _a$bench;
+      if (sortField === 'value') {
+        var _diff = (a.value - b.value) * dir;
+        return _diff !== 0 ? _diff : b.rate - a.rate;
+      }
+      var diff = (a.rate - b.rate) * dir;
+      return diff !== 0 ? diff : ((_b$bench = b.bench) !== null && _b$bench !== void 0 ? _b$bench : 0) - ((_a$bench = a.bench) !== null && _a$bench !== void 0 ? _a$bench : 0);
+    });
+    return next;
+  }, [data, sortField, sortOrder]);
+  var maxRate = getMaxRate(data);
+  var tickBase = getTickBase(maxRate);
+  var axisMax = Math.min(Math.max(Math.ceil(maxRate / tickBase) * tickBase, tickBase), 100);
+  var step = axisMax / (TICK_COUNT - 1);
+  var axisLabels = Array.from({
+    length: TICK_COUNT
+  }, function (_, index) {
+    return formatAxisLabel(index * step);
+  });
+  var onSort = function onSort(field) {
+    hideSharedPopover();
+    if (sortField === field) {
+      if (sortOrder === 'desc') setSortOrder('asc');else if (sortOrder === 'asc') {
+        setSortField(null);
+        setSortOrder('');
+      } else setSortOrder('desc');
+    } else {
+      setSortField(field);
+      setSortOrder('desc');
+    }
+  };
+  var popupOf = function popupOf(item) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-popup": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-popup-title": true
+    }, item.name), /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-popup-divider": true
+    }), /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-popup-list": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-popup-row": true
+    }, /*#__PURE__*/React.createElement("span", null, rateLabel), /*#__PURE__*/React.createElement("span", {
+      "data-odn-chart-bullet-popup-value": true
+    }, formatPercentage(item.rate))), item.bench !== undefined && benchLabel ? /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-popup-row": true
+    }, /*#__PURE__*/React.createElement("span", null, benchLabel), /*#__PURE__*/React.createElement("span", {
+      "data-odn-chart-bullet-popup-value": true
+    }, formatPercentage(item.bench))) : null, hideValue ? null : /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-popup-row": true
+    }, /*#__PURE__*/React.createElement("span", null, valueLabel), /*#__PURE__*/React.createElement("span", {
+      "data-odn-chart-bullet-popup-value": true
+    }, formatValue(item.value)))));
+  };
+  var popupPlacement = (popoverState === null || popoverState === void 0 ? void 0 : popoverState.area) === 'left' ? 'right' : 'left';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: rootRef,
+    "data-odn-chart": true,
+    "data-odn-chart-kind": "bullet",
+    "data-hide-value": hideValue ? '' : undefined,
+    className: clsx(className),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      '--name-col-width': "".concat(nameWidth, "px"),
+      '--tgi-col-width': "".concat(tgiColWidth, "px")
+    })
+  }, rest), data.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-empty": true
+  }, /*#__PURE__*/React.createElement(Empty, {
+    type: "data",
+    size: "small",
+    title: "\u6682\u65E0\u6570\u636E"
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-bullet-topbar": true,
+    "data-border": hideTopBarBorder ? undefined : ''
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-bullet-legend": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-chart-bullet-legend-item": true
+  }, /*#__PURE__*/React.createElement("i", {
+    "data-odn-chart-bullet-legend-bar": true
+  }), /*#__PURE__*/React.createElement("span", null, rateLabel)), benchLabel ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-chart-bullet-legend-item": true
+  }, /*#__PURE__*/React.createElement("i", {
+    "data-odn-chart-bullet-legend-line": true
+  }), /*#__PURE__*/React.createElement("span", null, benchLabel)) : null)), /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-bullet-header": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-bullet-header-name": true
+  }, nameLabel), hideValue ? null : /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "data-odn-chart-bullet-header-value": true,
+    "data-tgi-col": "",
+    onClick: function onClick() {
+      return onSort('value');
+    }
+  }, valueLabel, /*#__PURE__*/React.createElement(SortCarets, {
+    order: sortField === 'value' ? sortOrder : ''
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "data-odn-chart-bullet-header-chart": true,
+    onClick: function onClick() {
+      return onSort('rate');
+    }
+  }, rateLabel, /*#__PURE__*/React.createElement(SortCarets, {
+    order: sortField === 'rate' ? sortOrder : ''
+  }))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-bullet-body": true,
+    style: maxBodyHeight !== undefined ? {
+      maxHeight: maxBodyHeight,
+      overflowY: 'auto',
+      flex: '0 1 auto'
+    } : undefined,
+    onScroll: hideSharedPopover
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-bullet-body-inner": true,
+    ref: bodyInnerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: chartAreaRef,
+    "data-odn-chart-bullet-grid": true,
+    style: {
+      left: nameWidth + tgiColWidth
+    }
+  }, axisLabels.map(function (_, index) {
+    return /*#__PURE__*/React.createElement("i", {
+      key: index,
+      "data-odn-chart-bullet-grid-line": true,
+      style: {
+        left: Math.round(index / (TICK_COUNT - 1) * chartWidth)
+      }
+    });
+  })), rows.map(function (item) {
+    var barWidth = axisMax > 0 ? Math.round(item.rate / axisMax * chartWidth) : 0;
+    var benchLeft = item.bench !== undefined && axisMax > 0 ? Math.round(item.bench / axisMax * chartWidth) : undefined;
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      key: item.name
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-row": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-left": true,
+      onMouseEnter: function onMouseEnter(event) {
+        return onRowAreaMouseEnter(item, 'left', event.currentTarget);
+      },
+      onMouseLeave: onRowAreaMouseLeave
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-name": true,
+      title: item.name
+    }, item.name), hideValue ? null : /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-value": true,
+      "data-tgi-col": "",
+      title: formatValue(item.value)
+    }, formatValue(item.value))), /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-chart": true,
+      onMouseEnter: function onMouseEnter(event) {
+        return onRowAreaMouseEnter(item, 'chart', event.currentTarget);
+      },
+      onMouseLeave: onRowAreaMouseLeave
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-chart-bullet-track": true
+    }, /*#__PURE__*/React.createElement("i", {
+      "data-odn-chart-bullet-bar": true,
+      style: {
+        width: barWidth
+      }
+    }), benchLeft !== undefined ? /*#__PURE__*/React.createElement("i", {
+      "data-odn-chart-bullet-bench": true,
+      style: {
+        left: benchLeft
+      }
+    }) : null))));
+  }), popoverState ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    "data-odn-popup": true,
+    "data-type": "popover",
+    "data-arrowed": "false",
+    "data-status": "open",
+    "data-odn-popup-no-transition": "",
+    "data-placement": popupPlacement,
+    style: getPopoverRootStyle(popoverState, popoverState.area)
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-popup-content": true,
+    "data-arrowed": "false",
+    "data-status": "open",
+    "data-odn-popup-no-transition": "",
+    "data-placement": popupPlacement,
+    style: {
+      maxWidth: 'initial'
+    }
+  }, popupOf(popoverState.item))), document.body) : null)), /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-bullet-axis-wrap": true,
+    style: {
+      paddingLeft: nameWidth + tgiColWidth
+    }
+  }, hideAxisLabel ? null : /*#__PURE__*/React.createElement("span", {
+    "data-odn-chart-bullet-axis-label": true
+  }, rateLabel), /*#__PURE__*/React.createElement("div", {
+    "data-odn-chart-bullet-axis": true
+  }, axisLabels.map(function (label, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: "".concat(label, "-").concat(index),
+      "data-odn-chart-bullet-tick": true,
+      style: {
+        left: Math.round(index / (TICK_COUNT - 1) * chartWidth)
+      }
+    }, label);
+  })))));
+};
+ChartBullet.displayName = 'Chart.Bullet';
+export default ChartBullet;

package/dist/chart/butterfly.d.ts

@@ -0,0 +1,15 @@
+import type { EChartsOption } from 'echarts';
+import * as React from 'react';
+import { type ChartHostProps } from './host';
+export interface ChartButterflyProps extends Omit<ChartHostProps, 'option'> {
+    categories: string[];
+    leftValues: number[];
+    rightValues: number[];
+    leftLabel?: string;
+    rightLabel?: string;
+    leftReferenceValue?: number;
+    leftReferenceLabel?: string;
+    option?: EChartsOption;
+}
+declare const ChartButterfly: React.FC<ChartButterflyProps>;
+export default ChartButterfly;