onesight-charts 0.4.2 → 0.4.4

package/es/components/common-bar/demo/base.js

@@ -3,52 +3,72 @@ import CommonBar from "../index";
 var data = [{
   name: 'X',
   value: 1004,
-  proportion: 0.26379400945874937
+  proportion: 0.26379400945874937,
+  color: '#4B5F6F'
 }, {
   name: 'Instagram',
   value: 932,
-  proportion: 0.24487651077246453
+  proportion: 0.24487651077246453,
+  color: '#EC798E'
 }, {
   name: 'YouTube',
   value: 658,
-  proportion: 0.17288491854965843
+  proportion: 0.17288491854965843,
+  color: '#FF4D4C'
 }, {
   name: '新闻',
   value: 545,
-  proportion: 0.14319495533368365
+  proportion: 0.14319495533368365,
+  color: '#F9B522'
 }, {
   name: '论坛',
   value: 418,
-  proportion: 0.10982658959537572
+  proportion: 0.10982658959537572,
+  color: '#07afc6'
 }, {
   name: 'VKontakte',
   value: 127,
-  proportion: 0.03336836573830793
+  proportion: 0.03336836573830793,
+  color: '#529CD6'
 }, {
   name: 'Reddit',
   value: 61,
-  proportion: 0.01602732527588019
+  proportion: 0.01602732527588019,
+  color: '#FF4500'
 }, {
   name: '博客',
   value: 38,
-  proportion: 0.009984235417761429
+  proportion: 0.009984235417761429,
+  color: '#a55ec6'
 }, {
   name: 'TikTok',
   value: 12,
-  proportion: 0.0031529164477141357
+  proportion: 0.0031529164477141357,
+  color: '#4C4C4C'
 }, {
   name: 'LinkedIn',
   value: 10,
-  proportion: 0.002627430373095113
+  proportion: 0.002627430373095113,
+  color: '#4D7797'
 }, {
   name: 'Facebook',
   value: 1,
-  proportion: 0.0002627430373095113
+  proportion: 0.0002627430373095113,
+  color: '#358FFF'
 }, {
   name: '产品评论',
   value: 1,
-  proportion: 0.0002627430373095113
+  proportion: 0.0002627430373095113,
+  color: '#f97322'
 }];
+
+// type: 'dataPointType' | 'tooltipType'
+// dataPointType是指点击的图形上可点击区域
+// tooltipType是指点击的提示框区域
+var handleClick = function handleClick(type, params) {
+  console.log('type', type);
+  console.log('params', params);
+};
 function App() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -56,7 +76,8 @@ function App() {
       height: 282
     }
   }, /*#__PURE__*/React.createElement(CommonBar, {
-    data: data
+    data: data,
+    handleClick: handleClick
   }));
 }
 export default App;

package/es/components/common-bar/demo/yIcon.js

@@ -49,6 +49,14 @@ var data = [{
   value: 1,
   platformIcon: '/img/blogs.svg'
 }];
+
+// type: 'dataPointType' | 'tooltipType'
+// dataPointType是指点击的图形上可点击区域
+// tooltipType是指点击的提示框区域
+var handleClick = function handleClick(type, params) {
+  console.log('type', type);
+  console.log('params', params);
+};
 function App() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -56,7 +64,8 @@ function App() {
       height: 282
     }
   }, /*#__PURE__*/React.createElement(CommonBar, {
-    data: data
+    data: data,
+    handleClick: handleClick
   }));
 }
 export default App;

package/es/components/common-bar/index.js

@@ -25,7 +25,6 @@ function CommonBar(props) {
     showProportion = _props$showProportion === void 0 ? false : _props$showProportion,
     _props$barColor = props.barColor,
     barColor = _props$barColor === void 0 ? 'rgba(29, 169, 160, 1)' : _props$barColor,
-    callBackClick = props.callBackClick,
     _props$callBackValue = props.callBackValue,
     callBackValue = _props$callBackValue === void 0 ? '' : _props$callBackValue,
     _props$tipName = props.tipName,
@@ -37,7 +36,9 @@ function CommonBar(props) {
     _props$height = props.height,
     height = _props$height === void 0 ? '100%' : _props$height,
     _props$callbackGetPag = props.callbackGetPage,
-    callbackGetPage = _props$callbackGetPag === void 0 ? function () {} : _props$callbackGetPag;
+    callbackGetPage = _props$callbackGetPag === void 0 ? function () {} : _props$callbackGetPag,
+    _props$handleClick = props.handleClick,
+    handleClick = _props$handleClick === void 0 ? function () {} : _props$handleClick;
   // 总数页码数
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -79,13 +80,7 @@ function CommonBar(props) {
     if (seriesNameElement) {
       var seriesItem = seriesNameElement.getAttribute('data-series-item');
       var seriesData = JSON.parse(seriesItem);
-      var defaultParams = {
-        name: seriesData.data.name || '-'
-      };
-      if (callBackValue) {
-        defaultParams.callBackValue = seriesData.data[callBackValue] || '-';
-      }
-      callBackClick && callBackClick(defaultParams);
+      handleClick && handleClick('tooltipType', seriesData);
     }
   };
   function toggleAxisPointer(myChart, show) {
@@ -200,12 +195,14 @@ function CommonBar(props) {
       return item.format || item.name || '-';
     });
     var seriesData = currentData.map(function (item) {
+      // 优先使用每项自己的颜色，如果没有则使用默认的 barColor
+      var itemColor = item.color || barColor;
       if (showProportion) {
         return {
           name: item.name || '-',
           value: (item === null || item === void 0 ? void 0 : item.proportion) || 0,
           itemStyle: item !== null && item !== void 0 && item.proportion ? {
-            color: barColor
+            color: itemColor
           } : {
             color: 'rgba(29, 169, 160, 0)'
           }
@@ -215,7 +212,7 @@ function CommonBar(props) {
           name: item.name || '-',
           value: item.value || 0,
           itemStyle: item.value ? {
-            color: barColor
+            color: itemColor
           } : {
             color: 'rgba(29, 169, 160, 0)'
           }
@@ -440,22 +437,16 @@ function CommonBar(props) {
         if (dataCoord[1] === -0) {
           if (axisData[0]) {
             var defaultParams = {
-              name: seriesData[0].name || '-'
+              name: seriesData[0]
             };
-            if (callBackValue) {
-              defaultParams.callBackValue = seriesData[0][callBackValue] || '-';
-            }
-            callBackClick && callBackClick(defaultParams);
+            handleClick && handleClick('dataPointType', defaultParams);
           }
         } else if (dataCoord[1] >= 0) {
           if (axisData[dataCoord[1]]) {
             var _defaultParams = {
-              name: seriesData[dataCoord[1]].name || '-'
+              name: seriesData[dataCoord[1]]
             };
-            if (callBackValue) {
-              _defaultParams.callBackValue = seriesData[dataCoord[1]][callBackValue] || '-';
-            }
-            callBackClick && callBackClick(_defaultParams);
+            handleClick && handleClick('dataPointType', _defaultParams);
           }
         }
       } else {

package/es/components/custom-line/demo/base.js

@@ -13,9 +13,11 @@ function App() {
     Reddit: [13094, 10075, 11410, 12374, 9413, 7904, 5295]
   };
 
-  // 这个回调函数会在折线图上的点点击的时候调用
-  // 也会在tooltip上的数据上点击回调函数中调用
-  var handleClick = function handleClick(params) {
+  // type: 'dataPointType' | 'tooltipType'
+  // dataPointType是指点击的图形上可点击区域
+  // tooltipType是指点击的提示框区域
+  var handleClick = function handleClick(type, params) {
+    console.log('type', type);
     console.log('params', params);
   };
   return /*#__PURE__*/React.createElement("div", {

package/es/components/custom-line/index.js

@@ -61,7 +61,7 @@ function CustomLine(props) {
     if (seriesNameElement) {
       var seriesItem = seriesNameElement.getAttribute('data-series-item');
       var _seriesData = JSON.parse(seriesItem);
-      handleClick && handleClick(_seriesData);
+      handleClick && handleClick('tooltipType', _seriesData);
     }
   };
   function toggleAxisPointer(myChart, show) {
@@ -217,7 +217,7 @@ function CustomLine(props) {
       // const D1 = params.name;
       // const D2 = params.seriesName;
       // 点击回调函数
-      handleClick && handleClick(params);
+      handleClick && handleClick('dataPointType', params);
     });
     myChart.off('mouseover');
     myChart.on('mouseover', function (params) {

package/es/components/line/demo.js

@@ -5,6 +5,14 @@ var seriesData = {
   Facebook: [1002, 831, 960, 750, 1451, 1717, 903],
   X: [22094, 20075, 17410, 12374, 13413, 13904, 6895]
 };
+
+// type: 'dataPointType' | 'tooltipType'
+// dataPointType是指点击的图形上可点击区域
+// tooltipType是指点击的提示框区域
+var handleClick = function handleClick(type, params) {
+  console.log('type', type);
+  console.log('params', params);
+};
 export default (function () {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -13,6 +21,7 @@ export default (function () {
     }
   }, /*#__PURE__*/React.createElement(Line, {
     xAxis: xAxis,
-    seriesData: seriesData
+    seriesData: seriesData,
+    handleClick: handleClick
   }));
 });

package/es/components/line/index.js

@@ -22,11 +22,33 @@ function Line(props) {
     _props$tooltipTotalNa = props.tooltipTotalName,
     tooltipTotalName = _props$tooltipTotalNa === void 0 ? '总计' : _props$tooltipTotalNa,
     _props$tooltipPositio = props.tooltipPosition,
-    tooltipPosition = _props$tooltipPositio === void 0 ? true : _props$tooltipPositio;
+    tooltipPosition = _props$tooltipPositio === void 0 ? true : _props$tooltipPositio,
+    _props$handleClick = props.handleClick,
+    handleClick = _props$handleClick === void 0 ? function () {} : _props$handleClick;
   var chartRef = useRef(null);
   useEffect(function () {
     createChart();
+    bindClickEvents();
+    return function () {
+      unbindClickEvents();
+    };
   }, [seriesData]);
+  var bindClickEvents = function bindClickEvents() {
+    var chartElement = chartRef.current;
+    chartElement && chartElement.addEventListener('click', onChartClick);
+  };
+  var unbindClickEvents = function unbindClickEvents() {
+    var chartElement = chartRef.current;
+    chartElement && chartElement.removeEventListener('click', onChartClick);
+  };
+  var onChartClick = function onChartClick(event) {
+    var seriesNameElement = event.target.closest('.item');
+    if (seriesNameElement) {
+      var seriesItem = seriesNameElement.getAttribute('data-series-item');
+      var _seriesData = JSON.parse(seriesItem);
+      handleClick && handleClick('tooltipType', _seriesData);
+    }
+  };
   var seriesTotal = legendValue ? calculateSeriesTotal(seriesData) : {};
   var createChart = function createChart() {
     var myChart = echarts.init(chartRef.current, null, {
@@ -153,6 +175,15 @@ function Line(props) {
       },
       series: series
     };
+
+    // 取消监听点击事件,也可以防止重复绑定
+    myChart.off('click');
+    myChart.on('click', function (params) {
+      // const D1 = params.name;
+      // const D2 = params.seriesName;
+      // 点击回调函数
+      handleClick && handleClick('dataPointType', params);
+    });
     myChart.off('mouseover');
     myChart.on('mouseover', function (params) {
       // 操作线上选中点

package/es/components/line/tooltipConfig.js

@@ -86,7 +86,7 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
         marginRight = 3;
       }
       return "\n              <div class='tooltip-wrap'>\n                <div class='tooltip-head'>\n                    ".concat(res[0].axisValue, "\n                </div>\n                <div class='tooltip-body' style=\"margin-right:").concat(marginRight, "px\">\n                    ").concat(dataArr.length > 1 ? "\n                        <div class='total'>\n                        <div class='l'>\n                            ".concat(tooltipTotalName, "\n                        </div>\n                        <div class='r'>\n                            ").concat(changeDataTypeEn(total), "\n                        </div>\n                        </div>\n                    ") : '', "\n                    ").concat(dataArr.map(function (item) {
-        return "\n                    <div class='item' key='".concat(item.seriesName, "'>\n                        <div class='l'>\n                        <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                        <span>\n                            ").concat(item.seriesName, "\n                        </span>\n                        </div>\n                        <div class='r'>\n                        ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                        <span class='num'>\n                            ").concat(changeDataTypeEn(item.value), "\n                        </span>\n                        </div>\n                    </div>\n                    ");
+        return "\n                      <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                        <div class='l'>\n                        <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                        <span>\n                            ").concat(item.seriesName, "\n                        </span>\n                        </div>\n                        <div class='r'>\n                        ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                        <span class='num'>\n                            ").concat(changeDataTypeEn(item.value), "\n                        </span>\n                        </div>\n                    </div>\n                    ");
       }).join(''), "\n                </div>\n                ").concat(tooltipPosition ? '<div class="triangle-down"></div>' : '', "\n              </div>\n            ");
     }
   };

package/es/components/pie/demo/demo.js

@@ -15,6 +15,15 @@ var seriesData = [{
   percentage: 0.5365,
   color: '#bbbbbb'
 }];
+
+// type: 'dataPointType' | 'tooltipType'
+// dataPointType是指点击的图形上可点击区域
+// tooltipType是指点击的提示框区域
+// legendType是指点击的图例区域(这个图特殊，点击图例可以下钻)
+var handleClick = function handleClick(type, params) {
+  console.log('type', type);
+  console.log('params', params);
+};
 export default (function () {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -22,6 +31,7 @@ export default (function () {
       height: '286px'
     }
   }, /*#__PURE__*/React.createElement(Pie, {
-    seriesData: seriesData
+    seriesData: seriesData,
+    handleClick: handleClick
   }));
 });

package/es/components/pie/demo/legendDemo.js

@@ -15,6 +15,15 @@ var seriesData = [{
   percentage: 0.5365,
   color: '#bbbbbb'
 }];
+
+// type: 'dataPointType' | 'tooltipType'
+// dataPointType是指点击的图形上可点击区域
+// tooltipType是指点击的提示框区域
+// legendType是指点击的图例区域(这个图特殊，点击图例可以下钻)
+var handleClick = function handleClick(type, params) {
+  console.log('type', type);
+  console.log('params', params);
+};
 export default (function () {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -24,6 +33,7 @@ export default (function () {
   }, /*#__PURE__*/React.createElement(Pie, {
     seriesData: seriesData,
     legendNumShow: false,
-    legendPerShow: false
+    legendPerShow: false,
+    handleClick: handleClick
   }));
 });

package/es/components/pie/demo/orderDemo.js

@@ -16,6 +16,15 @@ var seriesData = [{
   color: '#bbbbbb'
 }];
 var order = ['积极', '消极', '中性'];
+
+// type: 'dataPointType' | 'tooltipType'
+// dataPointType是指点击的图形上可点击区域
+// tooltipType是指点击的提示框区域
+// legendType是指点击的图例区域(这个图特殊，点击图例可以下钻)
+var handleClick = function handleClick(type, params) {
+  console.log('type', type);
+  console.log('params', params);
+};
 export default (function () {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -25,6 +34,7 @@ export default (function () {
   }, /*#__PURE__*/React.createElement(Pie, {
     seriesData: seriesData,
     order: order,
-    id: "orderId"
+    id: "orderId",
+    handleClick: handleClick
   }));
 });

package/es/components/pie/demo/paginationDemo.js

@@ -65,6 +65,15 @@ var seriesData = [{
   percentage: 0.1341,
   color: '#C1232B'
 }];
+
+// type: 'dataPointType' | 'tooltipType'
+// dataPointType是指点击的图形上可点击区域
+// tooltipType是指点击的提示框区域
+// legendType是指点击的图例区域(这个图特殊，点击图例可以下钻)
+var handleClick = function handleClick(type, params) {
+  console.log('type', type);
+  console.log('params', params);
+};
 export default (function () {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -73,6 +82,7 @@ export default (function () {
     }
   }, /*#__PURE__*/React.createElement(Pie, {
     seriesData: seriesData,
-    legendNumber: 5
+    legendNumber: 5,
+    handleClick: handleClick
   }));
 });

package/es/components/pie/demo/tooltipDemo.js

@@ -15,6 +15,15 @@ var seriesData = [{
   percentage: 0.5365,
   color: '#bbbbbb'
 }];
+
+// type: 'dataPointType' | 'tooltipType'
+// dataPointType是指点击的图形上可点击区域
+// tooltipType是指点击的提示框区域
+// legendType是指点击的图例区域(这个图特殊，点击图例可以下钻)
+var handleClick = function handleClick(type, params) {
+  console.log('type', type);
+  console.log('params', params);
+};
 export default (function () {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -24,6 +33,7 @@ export default (function () {
   }, /*#__PURE__*/React.createElement(Pie, {
     seriesData: seriesData,
     tooltipName: "\u6570\u91CF",
-    tooltipPerShow: false
+    tooltipPerShow: false,
+    handleClick: handleClick
   }));
 });

package/es/components/pie/index.js

@@ -162,7 +162,7 @@ function Pie(props) {
     setLegendData(legendShowData.slice(0, legendNumber));
     myChart.off('click');
     myChart.on('click', 'series', function (params) {
-      handleClick && handleClick(params.data);
+      handleClick && handleClick('dataPointType', params.data);
     });
   };
   var paginationCb = function paginationCb(currData, page) {

package/es/components/pie/legend/index.js

@@ -80,7 +80,7 @@ function Legend(props) {
         width: 'auto'
       } : undefined,
       onClick: function onClick() {
-        return handleClick ? handleClick(item) : handleLegendClick(item);
+        return handleClick ? handleClick('legendType', item) : handleLegendClick(item);
       },
       onMouseEnter: function onMouseEnter() {
         return handleHover(item);

package/es/components/vertical-stacked-bar/demo/base.js

@@ -102,6 +102,14 @@ function App() {
     VKontakte: 320,
     Reddit: 220
   }];
+
+  // type: 'dataPointType' | 'tooltipType'
+  // dataPointType是指点击的图形上可点击区域
+  // tooltipType是指点击的提示框区域
+  var handleClick = function handleClick(type, params) {
+    console.log('type', type);
+    console.log('params', params);
+  };
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: '500px',
@@ -109,7 +117,8 @@ function App() {
     }
   }, /*#__PURE__*/React.createElement(VerticalStackedBar, {
     data: data,
-    exclude: ['name']
+    exclude: ['name'],
+    handleClick: handleClick
   }));
 }
 export default App;

package/es/components/vertical-stacked-bar/demo/seriesData.js

@@ -75,6 +75,14 @@ function App() {
     data: [220, 220, 220, 220, 220, 220, 220, 220, 220, 220]
   }];
   var categories = ['图片', '文本', 'Reels', '视频', '链接', '轮播', 'Shorts', '其他', '组合', '动图'];
+
+  // type: 'dataPointType' | 'tooltipType'
+  // dataPointType是指点击的图形上可点击区域
+  // tooltipType是指点击的提示框区域
+  var handleClick = function handleClick(type, params) {
+    console.log('type', type);
+    console.log('params', params);
+  };
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: '500px',
@@ -82,7 +90,8 @@ function App() {
     }
   }, /*#__PURE__*/React.createElement(VerticalStackedBar, {
     seriesData: seriesData,
-    categories: categories
+    categories: categories,
+    handleClick: handleClick
   }));
 }
 export default App;

package/es/components/vertical-stacked-bar/index.js

@@ -59,10 +59,32 @@ function VerticalStackedBar(props) {
     _props$height = props.height,
     height = _props$height === void 0 ? '100%' : _props$height,
     _props$legendNum = props.legendNum,
-    legendNum = _props$legendNum === void 0 ? 4 : _props$legendNum;
+    legendNum = _props$legendNum === void 0 ? 4 : _props$legendNum,
+    _props$handleClick = props.handleClick,
+    handleClick = _props$handleClick === void 0 ? function () {} : _props$handleClick;
   useEffect(function () {
     init();
+    bindClickEvents();
+    return function () {
+      unbindClickEvents();
+    };
   }, []);
+  var bindClickEvents = function bindClickEvents() {
+    var chartElement = chartRef.current;
+    chartElement && chartElement.addEventListener('click', onChartClick);
+  };
+  var unbindClickEvents = function unbindClickEvents() {
+    var chartElement = chartRef.current;
+    chartElement && chartElement.removeEventListener('click', onChartClick);
+  };
+  var onChartClick = function onChartClick(event) {
+    var seriesNameElement = event.target.closest('.item');
+    if (seriesNameElement) {
+      var seriesItem = seriesNameElement.getAttribute('data-series-item');
+      var _seriesData = JSON.parse(seriesItem);
+      handleClick && handleClick('tooltipType', _seriesData);
+    }
+  };
   function toggleAxisPointer(myChart, show) {
     myChart.setOption({
       tooltip: {
@@ -299,6 +321,15 @@ function VerticalStackedBar(props) {
       },
       series: series
     };
+
+    // 取消监听点击事件,也可以防止重复绑定
+    myChart.off('click');
+    myChart.on('click', function (params) {
+      // const D1 = params.name;
+      // const D2 = params.seriesName;
+      // 点击回调函数
+      handleClick && handleClick('dataPointType', params);
+    });
     var currentIndex = 0;
     myChart.off('showTip');
     myChart.on('showTip', function (event) {

package/lib/components/common-bar/demo/base.js

@@ -38,65 +38,81 @@ var data = [
   {
     name: "X",
     value: 1004,
-    proportion: 0.26379400945874937
+    proportion: 0.26379400945874937,
+    color: "#4B5F6F"
   },
   {
     name: "Instagram",
     value: 932,
-    proportion: 0.24487651077246453
+    proportion: 0.24487651077246453,
+    color: "#EC798E"
   },
   {
     name: "YouTube",
     value: 658,
-    proportion: 0.17288491854965843
+    proportion: 0.17288491854965843,
+    color: "#FF4D4C"
   },
   {
     name: "新闻",
     value: 545,
-    proportion: 0.14319495533368365
+    proportion: 0.14319495533368365,
+    color: "#F9B522"
   },
   {
     name: "论坛",
     value: 418,
-    proportion: 0.10982658959537572
+    proportion: 0.10982658959537572,
+    color: "#07afc6"
   },
   {
     name: "VKontakte",
     value: 127,
-    proportion: 0.03336836573830793
+    proportion: 0.03336836573830793,
+    color: "#529CD6"
   },
   {
     name: "Reddit",
     value: 61,
-    proportion: 0.01602732527588019
+    proportion: 0.01602732527588019,
+    color: "#FF4500"
   },
   {
     name: "博客",
     value: 38,
-    proportion: 0.009984235417761429
+    proportion: 0.009984235417761429,
+    color: "#a55ec6"
   },
   {
     name: "TikTok",
     value: 12,
-    proportion: 0.0031529164477141357
+    proportion: 0.0031529164477141357,
+    color: "#4C4C4C"
   },
   {
     name: "LinkedIn",
     value: 10,
-    proportion: 0.002627430373095113
+    proportion: 0.002627430373095113,
+    color: "#4D7797"
   },
   {
     name: "Facebook",
     value: 1,
-    proportion: 2627430373095113e-19
+    proportion: 2627430373095113e-19,
+    color: "#358FFF"
   },
   {
     name: "产品评论",
     value: 1,
-    proportion: 2627430373095113e-19
+    proportion: 2627430373095113e-19,
+    color: "#f97322"
   }
 ];
+var handleClick = (type, params) => {
+  console.log("type", type);
+  console.log("params", params);
+};
 function App() {
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 500, height: 282 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { data }));
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 500, height: 282 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { data, handleClick }));
 }
 var base_default = App;