@oliasoft-open-source/charts-library 5.8.0 → 5.9.0-beta-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{Color-6BZIO3FS-C124yz2l.js → Color-6BZIO3FS-BdmyW5fF.js} +1 -1
- package/dist/assets/{DocsRenderer-LL677BLK-D4qKUuBB.js → DocsRenderer-LL677BLK-Dmh2MbD-.js} +4 -4
- package/dist/assets/{WithTooltip-65CFNBJE-CtWnqLza.js → WithTooltip-65CFNBJE-B1vNinkY.js} +1 -1
- package/dist/assets/{bar-chart.stories-C3SMcQsP.js → bar-chart.stories-Ch0i7N0G.js} +2 -2
- package/dist/assets/{chunk-YKABRMAI-Ahx4OkN7.js → chunk-YKABRMAI-nN4IfCIz.js} +1 -1
- package/dist/assets/{components-DIpk8W7G.js → components-s5a1V3CD.js} +4 -4
- package/dist/assets/formatter-EIJCOSYU-Bo0DMj3p.js +1 -0
- package/dist/assets/{get-draggableData-w1LT3_ff.js → get-draggableData-mCkevOrC.js} +1 -1
- package/dist/assets/{iframe-DApKJtpy.js → iframe-B7buKd6W.js} +3 -3
- package/dist/assets/{legend-BIh7BsGA.js → legend-Cem_14IV.js} +39 -39
- package/dist/assets/{legend-context-CQKzSsRL.js → legend-context-D1oEf-Th.js} +3 -3
- package/dist/assets/line-chart-BDauhYk8.js +1 -0
- package/dist/assets/{line-chart.stories-BI9cuT6Z.js → line-chart.stories-T04m8x5t.js} +7 -3
- package/dist/assets/{line-chart.test-case.stories-BxTEBLo3.js → line-chart.test-case.stories-BcA_QlE1.js} +127 -4
- package/dist/assets/{pie-chart.stories-BHZXRphh.js → pie-chart.stories-D2G6WnUw.js} +1 -1
- package/dist/assets/{react-18-JAuqV3gQ.js → react-18-DQODWq5X.js} +1 -1
- package/dist/assets/{react-DPAuT4W0.js → react-CwUuogrH.js} +1 -1
- package/dist/assets/{react-dom-CWw972ZY.js → react-dom-O1LTTn3X.js} +1 -1
- package/dist/assets/{scatter-chart.stories-DQLyCWVA.js → scatter-chart.stories-DJ3Z3dsB.js} +1 -1
- package/dist/assets/{syntaxhighlighter-ED5Y7EFY-CxhX_a0D.js → syntaxhighlighter-ED5Y7EFY-DYFKPQ-I.js} +1 -1
- package/dist/assets/{theming-BGumyAJ5.js → theming-DpsViFyv.js} +1 -1
- package/dist/common/common.interface.d.ts +7 -0
- package/dist/common/helpers/callout-helpers/callout-overlap-helpers.d.ts +9 -0
- package/dist/common/helpers/get-chart-annotation.d.ts +48 -6
- package/dist/iframe.html +1 -1
- package/dist/index.js +367 -57
- package/dist/index.json +1 -1
- package/dist/line-chart/plugins/vertical-markers-plugin/draw.d.ts +24 -0
- package/dist/line-chart/plugins/vertical-markers-plugin/types.d.ts +42 -0
- package/dist/line-chart/plugins/vertical-markers-plugin/utils.d.ts +23 -0
- package/dist/line-chart/plugins/vertical-markers-plugin/vertical-markers-plugin.d.ts +54 -0
- package/dist/project.json +1 -1
- package/dist/src/components/common/helpers/callout-helpers/callout-overlap-helpers.d.ts +9 -0
- package/package.json +1 -1
- package/dist/assets/formatter-EIJCOSYU-B8p8ny5o.js +0 -1
- package/dist/assets/line-chart-CcOicjlw.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,j as t,t as n}from"./iframe-DApKJtpy.js";import"./react-dom-CWw972ZY.js";import{G as r}from"./legend-context-CQKzSsRL.js";import{O as i,W as a,k as o,x as s}from"./legend-BIh7BsGA.js";import{t as c}from"./line-chart-CcOicjlw.js";import"./get-draggableData-w1LT3_ff.js";var l=t(e(),1),u={controlsPortalId:`chartOne-plan-view-chart-controls`,data:{datasets:[{label:`CH-4ST`,lineTension:0,borderColor:`#a30125`,pointBackgroundColor:`#a30125`,pointRadius:0,pointHoverRadius:0,pointHitRadius:0,borderWidth:2,fill:!1,data:[{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:.3927,label:[]},{x:0,y:2.4838,label:[]},{x:0,y:7.1727,label:[]},{x:0,y:14.4238,label:[]},{x:0,y:24.1818,label:[]},{x:0,y:36.3728,label:[]},{x:0,y:50.9039,label:[]},{x:0,y:67.6648,label:[]},{x:0,y:86.528,label:[]},{x:0,y:107.3503,label:[]},{x:0,y:129.9733,label:[]},{x:0,y:154.2251,label:[]},{x:0,y:179.9215,label:[]},{x:0,y:206.867,label:[]},{x:0,y:234.8569,label:[]},{x:0,y:263.6785,label:[]},{x:0,y:293.1127,label:[]},{x:0,y:322.9358,label:[]},{x:0,y:344.2833,label:[]},{x:0,y:352.9221,label:[]},{x:0,y:382.9221,label:[]},{x:0,y:412.9221,label:[]},{x:0,y:442.9221,label:[]},{x:0,y:472.9221,label:[]},{x:0,y:502.9221,label:[]},{x:0,y:532.9221,label:[]},{x:0,y:562.9221,label:[]},{x:0,y:592.9221,label:[]},{x:0,y:622.9221,label:[]},{x:0,y:644.2821,label:[]}]},{label:`CH-4`,lineTension:0,borderColor:`#0154a3`,pointBackgroundColor:`#0154a3`,pointRadius:0,pointHoverRadius:0,pointHitRadius:0,borderWidth:2,fill:!1,data:[{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]}]}]},options:{direction:`vertical`,axes:{x:[{label:`E/W [m]`,position:`top`}],y:[{label:`N/S [m]`,position:`left`}]},additionalAxesOptions:{chartScaleType:`linear`},graph:{showDataLabels:!0,showMinorGridlines:!0,lineTension:0},chartStyling:{height:`100%`},annotations:{showAnnotations:!0,enableDragAnnotation:!0,annotationsData:[]}}},d=n(),f=[{label:`Dataset 1`,data:[{x:0,y:0},{x:5,y:25}]}],p={data:{datasets:f},options:{title:`Chart title`,chartStyling:{height:`100%`}}},m={title:`LineChart / Test Cases`,component:c,args:{chart:p}};const h=()=>(0,d.jsx)(c,{chart:{data:{datasets:[{label:`Duration %`,lineTension:`0`,pointHitRadius:10,borderColor:`#dc3912`,pointBackgroundColor:`#dc3912`,borderWidth:2,pointRadius:4,data:[{x:3,y:0},{x:3,y:100}],yAxisID:`y2`}]},options:{direction:`vertical`,axes:{x:[{label:`Duration (TempSim long) [d]`,position:`bottom`}],y:[{label:`Probability`},{label:`Percentage [%]`}]},annotations:{annotationsData:[{annotationAxis:`y2`,color:`darkgrey`,value:16},{displayDragCoordinates:!1,color:`#ff9900`,label:`P16`,dragAxis:`y`,enableDrag:!0,resizable:!1,type:`box`,xMax:3,xMin:3,yMax:17,yMin:15,yScaleID:`y2`},{annotationAxis:`y2`,color:`darkgrey`,value:66},{displayDragCoordinates:!1,color:`#109618`,label:`P66`,dragAxis:`y`,enableDrag:!0,resizable:!1,type:`box`,xMax:3,xMin:3,yMax:67,yMin:65,yScaleID:`y2`},{annotationAxis:`y2`,color:`darkgrey`,value:78},{displayDragCoordinates:!1,color:`#990099`,label:`P78`,dragAxis:`y`,enableDrag:!0,resizable:!1,type:`box`,xMax:3,xMin:3,yMax:79,yMin:77,yScaleID:`y2`},{annotationAxis:`y2`,color:`darkgrey`,value:90},{displayDragCoordinates:!1,color:`#0099c6`,label:`P90`,dragAxis:`y`,enableDrag:!0,resizable:!1,type:`box`,xMax:3,xMin:3,yMax:91,yMin:89,yScaleID:`y2`}],enableDragAnnotation:!0,showAnnotations:!0},additionalAxesOptions:{range:{x:{min:3}},chartScaleType:`linear`,reverse:!1},graph:{showMinorGridlines:!0},chartStyling:{height:`100%`},chartOptions:{showPoints:!1,enableDragAnnotation:!0}}}}),g=()=>(0,d.jsx)(c,{chart:u}),_=()=>{let[e,t]=(0,l.useState)(f),[n,i]=(0,l.useState)(0),[a,o]=(0,l.useState)(!1),[u,p]=(0,l.useState)(!0),[m,h]=(0,l.useState)(!1),[g,_]=(0,l.useState)(!0),[v,y]=(0,l.useState)(`linear`),[b,x]=(0,l.useState)(!1),S=(0,l.useMemo)(()=>({title:`Stress Tester`,axes:{x:[{label:`X Axis`}],y:[{label:`Y Axis`}]},chartOptions:{enableDragAnnotation:!0},annotations:{showAnnotations:!0,enableDragAnnotation:!0,annotationsData:[{enableDrag:!0,type:`box`,xMin:3.5,xMax:4,yMin:5,yMax:10,color:`rgba(255, 0, 0, 0.3)`,label:`DRAG ME!`},{type:`point`,enableDrag:!0,xValue:1,yValue:10,radius:2,color:`red`,label:`Draggable Point`,labelConfig:{font:`bold 8px ${r}`,color:`rgba(0,0,0,0.7)`}}]},chartStyling:{height:`100%`,squareAspectRatio:g},additionalAxesOptions:{chartScaleType:v},legend:{display:!1}}),[e,g,v]),C=(0,l.useMemo)(()=>({data:{datasets:e},options:S}),[e,S]);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(`div`,{style:{display:`flex`,gap:8,flexWrap:`wrap`,marginBottom:16},children:[(0,d.jsx)(s,{label:`Reset to Initial State`,colored:!0,onClick:()=>{t(f),i(e=>e+1),p(!0),x(!1)}}),(0,d.jsx)(s,{label:`Async Dataset + Unmount`,onClick:()=>{h(!0);let e=[];for(let n=0;n<50;n++)setTimeout(()=>{e.push({label:`DS ${n+1}`,data:[{x:n,y:Math.random()*100},{x:n+1,y:Math.random()*100}],borderColor:`hsl(${360/50*n}, 100%, 50%)`}),t([...e]),n===15&&(console.warn(`Forcing unmount mid-update`),p(!1)),n===25&&(console.warn(`Remounting chart`),p(!0),i(e=>e+1)),n===49&&(console.log(`Async injection complete`),h(!1))},n*40)},disabled:m}),(0,d.jsx)(s,{label:`Set Invalid Dataset`,onClick:()=>{t([{label:`Broken Dataset`,borderColor:`red`}])}}),(0,d.jsx)(s,{label:`Set Empty Dataset`,onClick:()=>{t([])}}),(0,d.jsx)(s,{label:`Mixed Data Formats`,onClick:()=>{t([{label:`X/Y Points`,data:[{x:0,y:0},{x:1,y:1}],borderColor:`green`},{label:`Y Only Array`,data:[2,4,6],borderColor:`blue`}])}}),(0,d.jsx)(s,{label:`Bad Axis Ref`,onClick:()=>{t([{label:`Bad Y Axis Ref`,yAxisID:`y-missing`,data:[{x:1,y:1},{x:2,y:2}],borderColor:`purple`}])}}),(0,d.jsx)(s,{label:`Toggle size`,onClick:()=>o(!a)}),(0,d.jsx)(s,{label:`Toggle Axis Type`,onClick:()=>{y(e=>e===`linear`?`logarithmic`:`linear`)}}),(0,d.jsx)(s,{label:`Toggle Aspect Ratio`,onClick:()=>{_(e=>!e)}}),(0,d.jsx)(s,{label:`Spam Re-renders`,onClick:()=>{let e=0,t=setInterval(()=>{i(e=>e+1),e++,e===100&&clearInterval(t)},30)}}),(0,d.jsx)(s,{label:u?`Unmount Chart`:`Remount Chart`,onClick:()=>p(e=>!e)}),(0,d.jsx)(s,{label:`Manual Re-render`,onClick:()=>i(e=>e+1)}),(0,d.jsx)(s,{label:`Empty Dataset`,onClick:()=>t([])}),(0,d.jsx)(s,{label:`Add 5k Points Slowly`,onClick:()=>{t([{label:`Big 5k Points`,data:Array.from({length:5e3},(e,t)=>({x:t,y:Math.sin(t/100)*100})),borderColor:`orange`}])}}),(0,d.jsx)(s,{label:`Dataset With Invalid Point`,onClick:()=>{t([{label:`Corrupt Point Dataset`,data:[{x:0,y:10},{x:1},{y:20},null,void 0,`bad-value`,{x:5,y:50}],borderColor:`red`}])}}),(0,d.jsx)(s,{label:`Malformed Dataset Combo`,onClick:()=>{t([{label:`Valid A`,data:[{x:0,y:1},{x:1,y:2}],borderColor:`blue`},{label:`Corrupt`,data:`not-an-array`,borderColor:`red`},{label:`Valid B`,data:[{x:0,y:3},{x:1,y:4}],borderColor:`green`}])}}),(0,d.jsx)(s,{label:`Cycle Big Load (Async)`,onClick:()=>{let e=[];for(let t=0;t<4;t++){let n=Array.from({length:3e3},(e,t)=>({x:t,y:Math.random()*100}));e.push({label:`Stream DS ${t+1}`,data:n,borderColor:`hsl(${t*90}, 100%, 50%)`})}let n=0,r=setInterval(()=>{t(e.slice(0,n+1)),n++,n===e.length&&clearInterval(r)},500)}}),(0,d.jsx)(s,{label:`Timed Unmount During Drag`,onClick:()=>{x(!0),p(!0),setTimeout(()=>{p(!1),x(!1)},5e3)},disabled:b})]}),b&&(0,d.jsx)(`span`,{style:{color:`crimson`,fontWeight:`bold`},children:`⏱ Unmounting in 5s – start dragging!`}),(0,d.jsx)(`div`,{style:{height:a?300:null,width:a?300:null,padding:`var(--padding)`,overflow:`auto`},children:u?(0,d.jsx)(c,{chart:C},n):(0,d.jsx)(`div`,{style:{padding:40,textAlign:`center`},children:`Chart unmounted`})})]})},v=()=>{let[e,t]=(0,l.useState)([{type:`point`,labelOffsetPx:50,xValue:2,yValue:100,radius:4,color:`rgba(128, 128, 128, 1)`,pointStyle:`triangle`,label:`annotation 1`,labelConfig:{position:`right`,color:`rgba(128, 128, 128, 1)`,callout:{enabled:!0}}}]),[n,r]=(0,l.useState)(`annotation 1`),i=[{label:`16/9-C-16`,lineTension:0,borderColor:`#e25112`,pointBackgroundColor:`#e25112`,pointHoverRadius:0,pointHitRadius:0,pointRadius:2,pointBorderWidth:2,borderWidth:2,fill:!1,data:[{y:0,x:0,label:[]},{y:30,x:0,label:[]},{y:60,x:0,label:[]},{y:90,x:0,label:[]},{y:120,x:0,label:[]},{y:150,x:0,label:[]},{y:180,x:0,label:[]},{y:210,x:0,label:[]},{y:240,x:0,label:[]},{y:270,x:0,label:[]},{y:300,x:0,label:[]},{y:330,x:0,label:[]},{y:360,x:0,label:[]},{y:390,x:0,label:[]},{y:400,x:0,label:[]},{y:419.9982,x:.1453,label:[]},{y:449.9718,x:.9078,label:[]},{y:479.8845,x:2.3231,label:[]},{y:509.6999,x:4.3892,label:[]},{y:539.3817,x:7.1038,label:[]},{y:568.8936,x:10.4635,label:[]},{y:569.3544,x:10.5213,label:[]},{y:598.3054,x:14.1545,label:[]},{y:627.7172,x:17.8456,label:[]},{y:657.1289,x:21.5367,label:[]},{y:686.5407,x:25.2278,label:[]},{y:715.9525,x:28.9188,label:[]},{y:745.3643,x:32.6099,label:[]},{y:804.1878,x:39.992,label:[]},{y:833.5996,x:43.6831,label:[]},{y:863.0113,x:47.3742,label:[]},{y:892.4231,x:51.0653,label:[]},{y:921.8349,x:54.7563,label:[]},{y:951.2467,x:58.4474,label:[]},{y:980.6584,x:62.1385,label:[]},{y:1010.0674,x:65.7954,label:[]},{y:1039.4763,x:69.4299,label:[]},{y:1068.8881,x:73.0986,label:[]},{y:1098.2999,x:76.7897,label:[]},{y:1127.7116,x:80.4807,label:[]},{y:1157.1234,x:84.1718,label:[]},{y:1186.5352,x:87.8629,label:[]},{y:1215.947,x:91.554,label:[]},{y:1245.3587,x:95.245,label:[]},{y:1274.7705,x:98.9361,label:[]},{y:1304.1823,x:102.6272,label:[]},{y:1333.5941,x:106.3183,label:[]},{y:1363.0058,x:110.0093,label:[]},{y:1392.4176,x:113.7004,label:[]},{y:1421.8294,x:117.3915,label:[]},{y:1451.2411,x:121.0825,label:[]},{y:1480.6529,x:124.7736,label:[]},{y:1510.0647,x:128.4647,label:[]},{y:1539.4765,x:132.1558,label:[]},{y:1568.8882,x:135.8468,label:[]},{y:1598.3,x:139.5379,label:[]},{y:1627.7118,x:143.229,label:[]},{y:1657.1236,x:146.9201,label:[]},{y:1686.5353,x:150.6111,label:[]},{y:1715.9471,x:154.3022,label:[]},{y:1745.3589,x:157.9933,label:[]},{y:1774.7706,x:161.6843,label:[]},{y:1804.1824,x:165.3754,label:[]},{y:1833.5942,x:169.0665,label:[]},{y:1863.006,x:172.7576,label:[]},{y:1892.4177,x:176.4486,label:[]},{y:1903.9079,x:177.8906,label:[]},{y:1921.8305,x:180.284,label:[]},{y:1951.2325,x:184.8347,label:[]},{y:1980.5894,x:190.1546,label:[]},{y:2009.8654,x:196.2372,label:[]},{y:2039.0247,x:203.0751,label:[]},{y:2068.0319,x:210.6599,label:[]},{y:2096.8516,x:218.9825,label:[]},{y:2125.4487,x:228.0327,label:[]},{y:2153.7883,x:237.7994,label:[]},{y:2181.836,x:248.2708,label:[]},{y:2209.5576,x:259.434,label:[]},{y:2236.9192,x:271.2756,label:[]},{y:2263.8876,x:283.781,label:[]},{y:2290.4299,x:296.935,label:[]},{y:2316.5138,x:310.7217,label:[]},{y:2342.1074,x:325.1241,label:[]},{y:2367.1796,x:340.1249,label:[]},{y:2391.6999,x:355.7056,label:[]},{y:2415.6384,x:371.8473,label:[]},{y:2438.9658,x:388.5303,label:[]},{y:2461.6539,x:405.7344,label:[]},{y:2483.6749,x:423.4384,label:[]},{y:2505.0021,x:441.621,label:[]},{y:2525.6093,x:460.2599,label:[]},{y:2545.4716,x:479.3325,label:[]},{y:2550.4401,x:484.2884,label:[]},{y:2564.5931,x:499.1889,label:[]},{y:2582.9606,x:520.6713,label:[]},{y:2600.4389,x:543.6622,label:[]},{y:2616.8951,x:567.9865,label:[]},{y:2632.2039,x:593.4591,label:[]},{y:2646.2488,x:619.8861,label:[]},{y:2657.1619,x:643.0591,label:[]},{y:2658.9386,x:647.0604,label:[]},{y:2671.1078,x:674.4667,label:[]},{y:2683.277,x:701.8731,label:[]},{y:2695.4463,x:729.2794,label:[]},{y:2707.6155,x:756.6858,label:[]},{y:2719.7847,x:784.0921,label:[]},{y:2731.954,x:811.4984,label:[]},{y:2744.1232,x:838.9048,label:[]},{y:2756.2924,x:866.3111,label:[]},{y:2768.4617,x:893.7174,label:[]},{y:2780.6309,x:921.1238,label:[]},{y:2792.8001,x:948.5301,label:[]},{y:2804.9693,x:975.9365,label:[]},{y:2817.1386,x:1003.3428,label:[]},{y:2829.3078,x:1030.7491,label:[]},{y:2841.477,x:1058.1555,label:[]},{y:2853.6463,x:1085.5618,label:[]},{y:2865.8155,x:1112.9682,label:[]},{y:2877.9847,x:1140.3745,label:[]},{y:2890.1539,x:1167.7808,label:[]},{y:2902.3232,x:1195.1872,label:[]},{y:2914.4924,x:1222.5935,label:[]},{y:2926.6616,x:1249.9999,label:[]},{y:2938.8309,x:1277.4062,label:[]},{y:2951.0001,x:1304.8125,label:[]},{y:2963.1693,x:1332.2189,label:[]},{y:2975.3386,x:1359.6252,label:[]},{y:2987.5078,x:1387.0316,label:[]},{y:2999.677,x:1414.4379,label:[]},{y:3011.8462,x:1441.8442,label:[]},{y:3024.0155,x:1469.2506,label:[]},{y:3036.1847,x:1496.6569,label:[]},{y:3048.3539,x:1524.0632,label:[]},{y:3060.5232,x:1551.4696,label:[]},{y:3072.6924,x:1578.8759,label:[]},{y:3084.8616,x:1606.2823,label:[]},{y:3097.0309,x:1633.6886,label:[]},{y:3109.2001,x:1661.0949,label:[]},{y:3133.5385,x:1715.9076,label:[]},{y:3145.7078,x:1743.314,label:[]},{y:3157.877,x:1770.7203,label:[]},{y:3170.0462,x:1798.1266,label:[]},{y:3182.1915,x:1825.5436,label:[]},{y:3206.4821,x:1880.3775,label:[]},{y:3218.6513,x:1907.7838,label:[]},{y:3242.9898,x:1962.5965,label:[]},{y:3303.8876,x:2098.6264,label:[]},{y:3316.0671,x:2125.8324,label:[]},{y:3328.2364,x:2153.2388,label:[]},{y:3340.4056,x:2180.6451,label:[]},{y:3352.5748,x:2208.0514,label:[]},{y:3364.744,x:2235.4578,label:[]},{y:3376.9133,x:2262.8641,label:[]},{y:3389.0825,x:2290.2705,label:[]},{y:3401.2517,x:2317.6768,label:[]},{y:3413.421,x:2345.0831,label:[]},{y:3425.5902,x:2372.4895,label:[]},{y:3437.7594,x:2399.8958,label:[]},{y:3449.9287,x:2427.3022,label:[]},{y:3462.0979,x:2454.7085,label:[]},{y:3472.1213,x:2477.2822,label:[]},{y:3474.2312,x:2482.1309,label:[]},{y:3484.8166,x:2510.1876,label:[]},{y:3493.0003,x:2539.0391,label:[]},{y:3498.72,x:2568.4657,label:[]},{y:3499.9842,x:2577.6599,label:[]},{y:3502.5335,x:2598.189,label:[]},{y:3506.2262,x:2627.9269,label:[]},{y:3509.919,x:2657.6648,label:[]},{y:3513.6118,x:2687.4026,label:[]},{y:3517.3045,x:2717.1405,label:[]},{y:3520.9973,x:2746.8784,label:[]},{y:3524.6901,x:2776.6163,label:[]},{y:3528.3828,x:2806.3542,label:[]},{y:3532.0756,x:2836.0921,label:[]},{y:3535.7684,x:2865.83,label:[]},{y:3539.4612,x:2895.5679,label:[]},{y:3543.1539,x:2925.3058,label:[]},{y:3546.8467,x:2955.0436,label:[]},{y:3550.5395,x:2984.7815,label:[]},{y:3554.2322,x:3014.5194,label:[]},{y:3557.925,x:3044.2573,label:[]},{y:3561.6178,x:3073.9952,label:[]},{y:3565.3105,x:3103.7331,label:[]},{y:3569.0033,x:3133.471,label:[]},{y:3572.6961,x:3163.2089,label:[]},{y:3576.3888,x:3192.9467,label:[]},{y:3580.0816,x:3222.6846,label:[]},{y:3583.7744,x:3252.4225,label:[]},{y:3587.4671,x:3282.1604,label:[]},{y:3591.1599,x:3311.8983,label:[]},{y:3594.8527,x:3341.6362,label:[]},{y:3598.5455,x:3371.3741,label:[]},{y:3599.9856,x:3382.9719,label:[]},{y:3602.2382,x:3401.112,label:[]},{y:3605.931,x:3430.8499,label:[]},{y:3609.6238,x:3460.5877,label:[]},{y:3613.3165,x:3490.3256,label:[]},{y:3617.0093,x:3520.0635,label:[]},{y:3620.7021,x:3549.8014,label:[]},{y:3624.3948,x:3579.5393,label:[]},{y:3628.0876,x:3609.2772,label:[]},{y:3631.7804,x:3639.0151,label:[]},{y:3635.4731,x:3668.753,label:[]},{y:3639.1659,x:3698.4909,label:[]},{y:3642.8587,x:3728.2287,label:[]},{y:3646.5514,x:3757.9666,label:[]},{y:3650.2442,x:3787.7045,label:[]},{y:3653.937,x:3817.4424,label:[]},{y:3657.6298,x:3847.1803,label:[]},{y:3661.3225,x:3876.9182,label:[]},{y:3665.0153,x:3906.6561,label:[]},{y:3668.7081,x:3936.394,label:[]},{y:3672.4008,x:3966.1318,label:[]},{y:3676.0936,x:3995.8697,label:[]},{y:3679.7864,x:4025.6076,label:[]},{y:3683.4791,x:4055.3455,label:[]},{y:3687.1719,x:4085.0834,label:[]},{y:3690.8647,x:4114.8213,label:[]},{y:3694.5574,x:4144.5592,label:[]},{y:3698.2502,x:4174.2971,label:[]},{y:3701.943,x:4204.035,label:[]},{y:3705.6357,x:4233.7728,label:[]},{y:3709.3285,x:4263.5107,label:[]},{y:3713.0213,x:4293.2486,label:[]},{y:3716.7141,x:4322.9865,label:[]},{y:3720.4068,x:4352.7244,label:[]},{y:3724.0996,x:4382.4623,label:[]},{y:3727.7924,x:4412.2002,label:[]},{y:3731.4851,x:4441.9381,label:[]},{y:3735.1779,x:4471.676,label:[]},{y:3738.8707,x:4501.4138,label:[]},{y:3742.5634,x:4531.1517,label:[]},{y:3746.2562,x:4560.8896,label:[]},{y:3749.949,x:4590.6275,label:[]},{y:3753.6417,x:4620.3654,label:[]},{y:3757.3345,x:4650.1033,label:[]},{y:3761.0273,x:4679.8412,label:[]},{y:3764.72,x:4709.5791,label:[]},{y:3768.4128,x:4739.3169,label:[]},{y:3772.1056,x:4769.0548,label:[]},{y:3775.7984,x:4798.7927,label:[]},{y:3779.4911,x:4828.5306,label:[]},{y:3783.1839,x:4858.2685,label:[]},{y:3786.8767,x:4888.0064,label:[]},{y:3790.5694,x:4917.7443,label:[]},{y:3794.2622,x:4947.4822,label:[]},{y:3797.955,x:4977.2201,label:[]},{y:3801.6477,x:5006.9579,label:[]},{y:3805.3405,x:5036.6958,label:[]},{y:3809.0333,x:5066.4337,label:[]},{y:3809.7189,x:5067.0389,label:[]},{y:3810.7189,x:5067.0389,label:[]}],wellOffset:[-3.4,.11]}];return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(`div`,{style:{display:`flex`,gap:8,marginBottom:16,alignItems:`center`},children:[(0,d.jsx)(`span`,{children:`Label for first annotation:`}),(0,d.jsx)(`input`,{value:n,onChange:e=>{let n=e.target.value;r(n),t(e=>e.map((e,t)=>t===0?{...e,label:n}:e))},style:{padding:4,minWidth:180}}),(0,d.jsx)(`button`,{type:`button`,onClick:()=>{t(e=>{let t=e.length,n=i[0].data,r={type:`point`,labelOffsetPx:50,xValue:n[t]?.x??n[n.length-1].x,yValue:100+t*10,radius:4,color:`rgba(128, 128, 128, 1)`,pointStyle:`triangle`,label:`annotation ${t+1}`,labelConfig:{position:`right`,color:`rgba(128, 128, 128, 1)`,callout:{enabled:!0}}};return[...e,r]})},children:`Add annotation`})]}),(0,d.jsx)(c,{chart:{...p,data:{datasets:i},options:{...p.options,legend:{display:!1},annotations:{showAnnotations:!0,enableDragAnnotation:!0,enableCalloutAnnotation:!0,annotationsData:e}}}})]})},y=()=>{let[e,t]=(0,l.useState)(!1),n=(0,l.useMemo)(()=>[{annotationAxis:`y`,label:`Annotation 1`,value:50},{annotationAxis:`x`,label:`Annotation 2`,value:10}],[]),r=(0,l.useMemo)(()=>({...p,options:{...p.options,title:`Repro: toggle controlAnnotation (with legend)`,legend:{display:!0},annotations:{controlAnnotation:e,showAnnotations:!0,annotationsData:n}}}),[e,n]);return(0,d.jsxs)(o,{gap:!0,children:[(0,d.jsx)(i,{children:(0,d.jsx)(a,{label:`controlAnnotation: ${e?`true`:`false`}`,value:e,onChange:()=>t(e=>!e)})}),(0,d.jsx)(c,{chart:r})]})};h.__docgenInfo={description:``,methods:[],displayName:`PartialRangeWithSimilarValues`},g.__docgenInfo={description:``,methods:[],displayName:`closeToValueInDifferentAxes`},_.__docgenInfo={description:``,methods:[],displayName:`StressTest`},v.__docgenInfo={description:``,methods:[],displayName:`DynamicCalloutAnnotations`},y.__docgenInfo={description:``,methods:[],displayName:`Test_ControlAnnotation_WithLegend`},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
|
|
1
|
+
import{a as e,j as t,t as n}from"./iframe-B7buKd6W.js";import"./react-dom-O1LTTn3X.js";import{G as r}from"./legend-context-D1oEf-Th.js";import{O as i,W as a,k as o,x as s}from"./legend-Cem_14IV.js";import{t as c}from"./line-chart-BDauhYk8.js";import"./get-draggableData-mCkevOrC.js";var l=t(e(),1),u={controlsPortalId:`chartOne-plan-view-chart-controls`,data:{datasets:[{label:`CH-4ST`,lineTension:0,borderColor:`#a30125`,pointBackgroundColor:`#a30125`,pointRadius:0,pointHoverRadius:0,pointHitRadius:0,borderWidth:2,fill:!1,data:[{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:.3927,label:[]},{x:0,y:2.4838,label:[]},{x:0,y:7.1727,label:[]},{x:0,y:14.4238,label:[]},{x:0,y:24.1818,label:[]},{x:0,y:36.3728,label:[]},{x:0,y:50.9039,label:[]},{x:0,y:67.6648,label:[]},{x:0,y:86.528,label:[]},{x:0,y:107.3503,label:[]},{x:0,y:129.9733,label:[]},{x:0,y:154.2251,label:[]},{x:0,y:179.9215,label:[]},{x:0,y:206.867,label:[]},{x:0,y:234.8569,label:[]},{x:0,y:263.6785,label:[]},{x:0,y:293.1127,label:[]},{x:0,y:322.9358,label:[]},{x:0,y:344.2833,label:[]},{x:0,y:352.9221,label:[]},{x:0,y:382.9221,label:[]},{x:0,y:412.9221,label:[]},{x:0,y:442.9221,label:[]},{x:0,y:472.9221,label:[]},{x:0,y:502.9221,label:[]},{x:0,y:532.9221,label:[]},{x:0,y:562.9221,label:[]},{x:0,y:592.9221,label:[]},{x:0,y:622.9221,label:[]},{x:0,y:644.2821,label:[]}]},{label:`CH-4`,lineTension:0,borderColor:`#0154a3`,pointBackgroundColor:`#0154a3`,pointRadius:0,pointHoverRadius:0,pointHitRadius:0,borderWidth:2,fill:!1,data:[{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]},{x:0,y:0,label:[]}]}]},options:{direction:`vertical`,axes:{x:[{label:`E/W [m]`,position:`top`}],y:[{label:`N/S [m]`,position:`left`}]},additionalAxesOptions:{chartScaleType:`linear`},graph:{showDataLabels:!0,showMinorGridlines:!0,lineTension:0},chartStyling:{height:`100%`},annotations:{showAnnotations:!0,enableDragAnnotation:!0,annotationsData:[]}}},d=n(),f=[{label:`Dataset 1`,data:[{x:0,y:0},{x:5,y:25}]}],p={data:{datasets:f},options:{title:`Chart title`,chartStyling:{height:`100%`}}},m={title:`LineChart / Test Cases`,component:c,args:{chart:p}};const h=()=>(0,d.jsx)(c,{chart:{data:{datasets:[{label:`Duration %`,lineTension:`0`,pointHitRadius:10,borderColor:`#dc3912`,pointBackgroundColor:`#dc3912`,borderWidth:2,pointRadius:4,data:[{x:3,y:0},{x:3,y:100}],yAxisID:`y2`}]},options:{direction:`vertical`,axes:{x:[{label:`Duration (TempSim long) [d]`,position:`bottom`}],y:[{label:`Probability`},{label:`Percentage [%]`}]},annotations:{annotationsData:[{annotationAxis:`y2`,color:`darkgrey`,value:16},{displayDragCoordinates:!1,color:`#ff9900`,label:`P16`,dragAxis:`y`,enableDrag:!0,resizable:!1,type:`box`,xMax:3,xMin:3,yMax:17,yMin:15,yScaleID:`y2`},{annotationAxis:`y2`,color:`darkgrey`,value:66},{displayDragCoordinates:!1,color:`#109618`,label:`P66`,dragAxis:`y`,enableDrag:!0,resizable:!1,type:`box`,xMax:3,xMin:3,yMax:67,yMin:65,yScaleID:`y2`},{annotationAxis:`y2`,color:`darkgrey`,value:78},{displayDragCoordinates:!1,color:`#990099`,label:`P78`,dragAxis:`y`,enableDrag:!0,resizable:!1,type:`box`,xMax:3,xMin:3,yMax:79,yMin:77,yScaleID:`y2`},{annotationAxis:`y2`,color:`darkgrey`,value:90},{displayDragCoordinates:!1,color:`#0099c6`,label:`P90`,dragAxis:`y`,enableDrag:!0,resizable:!1,type:`box`,xMax:3,xMin:3,yMax:91,yMin:89,yScaleID:`y2`}],enableDragAnnotation:!0,showAnnotations:!0},additionalAxesOptions:{range:{x:{min:3}},chartScaleType:`linear`,reverse:!1},graph:{showMinorGridlines:!0},chartStyling:{height:`100%`},chartOptions:{showPoints:!1,enableDragAnnotation:!0}}}}),g=()=>(0,d.jsx)(c,{chart:u}),_=()=>{let[e,t]=(0,l.useState)(!0),[n,r]=(0,l.useState)(!1);return(0,d.jsxs)(o,{gap:!0,children:[(0,d.jsx)(i,{children:(0,d.jsx)(a,{label:`Use callout: ${e?`on`:`off`}`,checked:e,onChange:()=>t(e=>!e)})}),(0,d.jsx)(i,{children:(0,d.jsx)(a,{label:`Only when overlapping: ${n?`on`:`off`}`,checked:n,onChange:()=>r(e=>!e),disabled:!e})}),(0,d.jsx)(c,{chart:{data:{datasets:[{label:`Pore pressure`,data:[{x:6,y:1e3},{x:6.8,y:2e3},{x:7.3,y:3500},{x:7.7,y:4700},{x:8.2,y:5600}]}]},options:{title:`Playground: overlapping formation labels (box annotations)`,chartStyling:{height:560},legend:{display:!1},axes:{x:[{label:`Pressure Gradient [ppg]`}],y:[{label:`Depth TVD RKB [ft]`}]},additionalAxesOptions:{reverse:!0,range:{x:{min:4,max:11},y:{min:900,max:6200}}},annotations:{showAnnotations:!0,enableCalloutAnnotation:e,annotationsData:[{label:`Top Cretaceous`,depth:1e3},{label:`Uaru Sand 4`,depth:1450},{label:`Uaru Sand 3`,depth:1460},{label:`Hordaland GP.`,depth:3600},{label:`Stord Un.`,depth:4800},{label:`Balder Fm.`,depth:5300},{label:`Lista Fm.`,depth:5600},{label:`Shetland Group`,depth:5850},{label:`TD`,depth:5900}].map(({label:t,depth:r})=>({type:`box`,xMin:4.02,xMax:4.06,yMin:r-5,yMax:r+5,color:`rgba(0, 0, 0, 0.4)`,adjustScaleRange:!1,label:t,labelConfig:e?{position:`left`,color:`rgba(15, 15, 15, 1)`,callout:{enabled:!0,onlyWhenOverlapping:n}}:{position:`left`,xAdjust:-6,color:`rgba(15, 15, 15, 1)`}}))}}}})]})},v=()=>{let[e,t]=(0,l.useState)(f),[n,i]=(0,l.useState)(0),[a,o]=(0,l.useState)(!1),[u,p]=(0,l.useState)(!0),[m,h]=(0,l.useState)(!1),[g,_]=(0,l.useState)(!0),[v,y]=(0,l.useState)(`linear`),[b,x]=(0,l.useState)(!1),S=(0,l.useMemo)(()=>({title:`Stress Tester`,axes:{x:[{label:`X Axis`}],y:[{label:`Y Axis`}]},chartOptions:{enableDragAnnotation:!0},annotations:{showAnnotations:!0,enableDragAnnotation:!0,annotationsData:[{enableDrag:!0,type:`box`,xMin:3.5,xMax:4,yMin:5,yMax:10,color:`rgba(255, 0, 0, 0.3)`,label:`DRAG ME!`},{type:`point`,enableDrag:!0,xValue:1,yValue:10,radius:2,color:`red`,label:`Draggable Point`,labelConfig:{font:`bold 8px ${r}`,color:`rgba(0,0,0,0.7)`}}]},chartStyling:{height:`100%`,squareAspectRatio:g},additionalAxesOptions:{chartScaleType:v},legend:{display:!1}}),[e,g,v]),C=(0,l.useMemo)(()=>({data:{datasets:e},options:S}),[e,S]);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(`div`,{style:{display:`flex`,gap:8,flexWrap:`wrap`,marginBottom:16},children:[(0,d.jsx)(s,{label:`Reset to Initial State`,colored:!0,onClick:()=>{t(f),i(e=>e+1),p(!0),x(!1)}}),(0,d.jsx)(s,{label:`Async Dataset + Unmount`,onClick:()=>{h(!0);let e=[];for(let n=0;n<50;n++)setTimeout(()=>{e.push({label:`DS ${n+1}`,data:[{x:n,y:Math.random()*100},{x:n+1,y:Math.random()*100}],borderColor:`hsl(${360/50*n}, 100%, 50%)`}),t([...e]),n===15&&(console.warn(`Forcing unmount mid-update`),p(!1)),n===25&&(console.warn(`Remounting chart`),p(!0),i(e=>e+1)),n===49&&(console.log(`Async injection complete`),h(!1))},n*40)},disabled:m}),(0,d.jsx)(s,{label:`Set Invalid Dataset`,onClick:()=>{t([{label:`Broken Dataset`,borderColor:`red`}])}}),(0,d.jsx)(s,{label:`Set Empty Dataset`,onClick:()=>{t([])}}),(0,d.jsx)(s,{label:`Mixed Data Formats`,onClick:()=>{t([{label:`X/Y Points`,data:[{x:0,y:0},{x:1,y:1}],borderColor:`green`},{label:`Y Only Array`,data:[2,4,6],borderColor:`blue`}])}}),(0,d.jsx)(s,{label:`Bad Axis Ref`,onClick:()=>{t([{label:`Bad Y Axis Ref`,yAxisID:`y-missing`,data:[{x:1,y:1},{x:2,y:2}],borderColor:`purple`}])}}),(0,d.jsx)(s,{label:`Toggle size`,onClick:()=>o(!a)}),(0,d.jsx)(s,{label:`Toggle Axis Type`,onClick:()=>{y(e=>e===`linear`?`logarithmic`:`linear`)}}),(0,d.jsx)(s,{label:`Toggle Aspect Ratio`,onClick:()=>{_(e=>!e)}}),(0,d.jsx)(s,{label:`Spam Re-renders`,onClick:()=>{let e=0,t=setInterval(()=>{i(e=>e+1),e++,e===100&&clearInterval(t)},30)}}),(0,d.jsx)(s,{label:u?`Unmount Chart`:`Remount Chart`,onClick:()=>p(e=>!e)}),(0,d.jsx)(s,{label:`Manual Re-render`,onClick:()=>i(e=>e+1)}),(0,d.jsx)(s,{label:`Empty Dataset`,onClick:()=>t([])}),(0,d.jsx)(s,{label:`Add 5k Points Slowly`,onClick:()=>{t([{label:`Big 5k Points`,data:Array.from({length:5e3},(e,t)=>({x:t,y:Math.sin(t/100)*100})),borderColor:`orange`}])}}),(0,d.jsx)(s,{label:`Dataset With Invalid Point`,onClick:()=>{t([{label:`Corrupt Point Dataset`,data:[{x:0,y:10},{x:1},{y:20},null,void 0,`bad-value`,{x:5,y:50}],borderColor:`red`}])}}),(0,d.jsx)(s,{label:`Malformed Dataset Combo`,onClick:()=>{t([{label:`Valid A`,data:[{x:0,y:1},{x:1,y:2}],borderColor:`blue`},{label:`Corrupt`,data:`not-an-array`,borderColor:`red`},{label:`Valid B`,data:[{x:0,y:3},{x:1,y:4}],borderColor:`green`}])}}),(0,d.jsx)(s,{label:`Cycle Big Load (Async)`,onClick:()=>{let e=[];for(let t=0;t<4;t++){let n=Array.from({length:3e3},(e,t)=>({x:t,y:Math.random()*100}));e.push({label:`Stream DS ${t+1}`,data:n,borderColor:`hsl(${t*90}, 100%, 50%)`})}let n=0,r=setInterval(()=>{t(e.slice(0,n+1)),n++,n===e.length&&clearInterval(r)},500)}}),(0,d.jsx)(s,{label:`Timed Unmount During Drag`,onClick:()=>{x(!0),p(!0),setTimeout(()=>{p(!1),x(!1)},5e3)},disabled:b})]}),b&&(0,d.jsx)(`span`,{style:{color:`crimson`,fontWeight:`bold`},children:`⏱ Unmounting in 5s – start dragging!`}),(0,d.jsx)(`div`,{style:{height:a?300:null,width:a?300:null,padding:`var(--padding)`,overflow:`auto`},children:u?(0,d.jsx)(c,{chart:C},n):(0,d.jsx)(`div`,{style:{padding:40,textAlign:`center`},children:`Chart unmounted`})})]})},y=()=>{let[e,t]=(0,l.useState)([{type:`point`,labelOffsetPx:50,xValue:2,yValue:100,radius:4,color:`rgba(128, 128, 128, 1)`,pointStyle:`triangle`,label:`annotation 1`,labelConfig:{position:`right`,color:`rgba(128, 128, 128, 1)`,callout:{enabled:!0}}}]),[n,r]=(0,l.useState)(`annotation 1`),i=[{label:`16/9-C-16`,lineTension:0,borderColor:`#e25112`,pointBackgroundColor:`#e25112`,pointHoverRadius:0,pointHitRadius:0,pointRadius:2,pointBorderWidth:2,borderWidth:2,fill:!1,data:[{y:0,x:0,label:[]},{y:30,x:0,label:[]},{y:60,x:0,label:[]},{y:90,x:0,label:[]},{y:120,x:0,label:[]},{y:150,x:0,label:[]},{y:180,x:0,label:[]},{y:210,x:0,label:[]},{y:240,x:0,label:[]},{y:270,x:0,label:[]},{y:300,x:0,label:[]},{y:330,x:0,label:[]},{y:360,x:0,label:[]},{y:390,x:0,label:[]},{y:400,x:0,label:[]},{y:419.9982,x:.1453,label:[]},{y:449.9718,x:.9078,label:[]},{y:479.8845,x:2.3231,label:[]},{y:509.6999,x:4.3892,label:[]},{y:539.3817,x:7.1038,label:[]},{y:568.8936,x:10.4635,label:[]},{y:569.3544,x:10.5213,label:[]},{y:598.3054,x:14.1545,label:[]},{y:627.7172,x:17.8456,label:[]},{y:657.1289,x:21.5367,label:[]},{y:686.5407,x:25.2278,label:[]},{y:715.9525,x:28.9188,label:[]},{y:745.3643,x:32.6099,label:[]},{y:804.1878,x:39.992,label:[]},{y:833.5996,x:43.6831,label:[]},{y:863.0113,x:47.3742,label:[]},{y:892.4231,x:51.0653,label:[]},{y:921.8349,x:54.7563,label:[]},{y:951.2467,x:58.4474,label:[]},{y:980.6584,x:62.1385,label:[]},{y:1010.0674,x:65.7954,label:[]},{y:1039.4763,x:69.4299,label:[]},{y:1068.8881,x:73.0986,label:[]},{y:1098.2999,x:76.7897,label:[]},{y:1127.7116,x:80.4807,label:[]},{y:1157.1234,x:84.1718,label:[]},{y:1186.5352,x:87.8629,label:[]},{y:1215.947,x:91.554,label:[]},{y:1245.3587,x:95.245,label:[]},{y:1274.7705,x:98.9361,label:[]},{y:1304.1823,x:102.6272,label:[]},{y:1333.5941,x:106.3183,label:[]},{y:1363.0058,x:110.0093,label:[]},{y:1392.4176,x:113.7004,label:[]},{y:1421.8294,x:117.3915,label:[]},{y:1451.2411,x:121.0825,label:[]},{y:1480.6529,x:124.7736,label:[]},{y:1510.0647,x:128.4647,label:[]},{y:1539.4765,x:132.1558,label:[]},{y:1568.8882,x:135.8468,label:[]},{y:1598.3,x:139.5379,label:[]},{y:1627.7118,x:143.229,label:[]},{y:1657.1236,x:146.9201,label:[]},{y:1686.5353,x:150.6111,label:[]},{y:1715.9471,x:154.3022,label:[]},{y:1745.3589,x:157.9933,label:[]},{y:1774.7706,x:161.6843,label:[]},{y:1804.1824,x:165.3754,label:[]},{y:1833.5942,x:169.0665,label:[]},{y:1863.006,x:172.7576,label:[]},{y:1892.4177,x:176.4486,label:[]},{y:1903.9079,x:177.8906,label:[]},{y:1921.8305,x:180.284,label:[]},{y:1951.2325,x:184.8347,label:[]},{y:1980.5894,x:190.1546,label:[]},{y:2009.8654,x:196.2372,label:[]},{y:2039.0247,x:203.0751,label:[]},{y:2068.0319,x:210.6599,label:[]},{y:2096.8516,x:218.9825,label:[]},{y:2125.4487,x:228.0327,label:[]},{y:2153.7883,x:237.7994,label:[]},{y:2181.836,x:248.2708,label:[]},{y:2209.5576,x:259.434,label:[]},{y:2236.9192,x:271.2756,label:[]},{y:2263.8876,x:283.781,label:[]},{y:2290.4299,x:296.935,label:[]},{y:2316.5138,x:310.7217,label:[]},{y:2342.1074,x:325.1241,label:[]},{y:2367.1796,x:340.1249,label:[]},{y:2391.6999,x:355.7056,label:[]},{y:2415.6384,x:371.8473,label:[]},{y:2438.9658,x:388.5303,label:[]},{y:2461.6539,x:405.7344,label:[]},{y:2483.6749,x:423.4384,label:[]},{y:2505.0021,x:441.621,label:[]},{y:2525.6093,x:460.2599,label:[]},{y:2545.4716,x:479.3325,label:[]},{y:2550.4401,x:484.2884,label:[]},{y:2564.5931,x:499.1889,label:[]},{y:2582.9606,x:520.6713,label:[]},{y:2600.4389,x:543.6622,label:[]},{y:2616.8951,x:567.9865,label:[]},{y:2632.2039,x:593.4591,label:[]},{y:2646.2488,x:619.8861,label:[]},{y:2657.1619,x:643.0591,label:[]},{y:2658.9386,x:647.0604,label:[]},{y:2671.1078,x:674.4667,label:[]},{y:2683.277,x:701.8731,label:[]},{y:2695.4463,x:729.2794,label:[]},{y:2707.6155,x:756.6858,label:[]},{y:2719.7847,x:784.0921,label:[]},{y:2731.954,x:811.4984,label:[]},{y:2744.1232,x:838.9048,label:[]},{y:2756.2924,x:866.3111,label:[]},{y:2768.4617,x:893.7174,label:[]},{y:2780.6309,x:921.1238,label:[]},{y:2792.8001,x:948.5301,label:[]},{y:2804.9693,x:975.9365,label:[]},{y:2817.1386,x:1003.3428,label:[]},{y:2829.3078,x:1030.7491,label:[]},{y:2841.477,x:1058.1555,label:[]},{y:2853.6463,x:1085.5618,label:[]},{y:2865.8155,x:1112.9682,label:[]},{y:2877.9847,x:1140.3745,label:[]},{y:2890.1539,x:1167.7808,label:[]},{y:2902.3232,x:1195.1872,label:[]},{y:2914.4924,x:1222.5935,label:[]},{y:2926.6616,x:1249.9999,label:[]},{y:2938.8309,x:1277.4062,label:[]},{y:2951.0001,x:1304.8125,label:[]},{y:2963.1693,x:1332.2189,label:[]},{y:2975.3386,x:1359.6252,label:[]},{y:2987.5078,x:1387.0316,label:[]},{y:2999.677,x:1414.4379,label:[]},{y:3011.8462,x:1441.8442,label:[]},{y:3024.0155,x:1469.2506,label:[]},{y:3036.1847,x:1496.6569,label:[]},{y:3048.3539,x:1524.0632,label:[]},{y:3060.5232,x:1551.4696,label:[]},{y:3072.6924,x:1578.8759,label:[]},{y:3084.8616,x:1606.2823,label:[]},{y:3097.0309,x:1633.6886,label:[]},{y:3109.2001,x:1661.0949,label:[]},{y:3133.5385,x:1715.9076,label:[]},{y:3145.7078,x:1743.314,label:[]},{y:3157.877,x:1770.7203,label:[]},{y:3170.0462,x:1798.1266,label:[]},{y:3182.1915,x:1825.5436,label:[]},{y:3206.4821,x:1880.3775,label:[]},{y:3218.6513,x:1907.7838,label:[]},{y:3242.9898,x:1962.5965,label:[]},{y:3303.8876,x:2098.6264,label:[]},{y:3316.0671,x:2125.8324,label:[]},{y:3328.2364,x:2153.2388,label:[]},{y:3340.4056,x:2180.6451,label:[]},{y:3352.5748,x:2208.0514,label:[]},{y:3364.744,x:2235.4578,label:[]},{y:3376.9133,x:2262.8641,label:[]},{y:3389.0825,x:2290.2705,label:[]},{y:3401.2517,x:2317.6768,label:[]},{y:3413.421,x:2345.0831,label:[]},{y:3425.5902,x:2372.4895,label:[]},{y:3437.7594,x:2399.8958,label:[]},{y:3449.9287,x:2427.3022,label:[]},{y:3462.0979,x:2454.7085,label:[]},{y:3472.1213,x:2477.2822,label:[]},{y:3474.2312,x:2482.1309,label:[]},{y:3484.8166,x:2510.1876,label:[]},{y:3493.0003,x:2539.0391,label:[]},{y:3498.72,x:2568.4657,label:[]},{y:3499.9842,x:2577.6599,label:[]},{y:3502.5335,x:2598.189,label:[]},{y:3506.2262,x:2627.9269,label:[]},{y:3509.919,x:2657.6648,label:[]},{y:3513.6118,x:2687.4026,label:[]},{y:3517.3045,x:2717.1405,label:[]},{y:3520.9973,x:2746.8784,label:[]},{y:3524.6901,x:2776.6163,label:[]},{y:3528.3828,x:2806.3542,label:[]},{y:3532.0756,x:2836.0921,label:[]},{y:3535.7684,x:2865.83,label:[]},{y:3539.4612,x:2895.5679,label:[]},{y:3543.1539,x:2925.3058,label:[]},{y:3546.8467,x:2955.0436,label:[]},{y:3550.5395,x:2984.7815,label:[]},{y:3554.2322,x:3014.5194,label:[]},{y:3557.925,x:3044.2573,label:[]},{y:3561.6178,x:3073.9952,label:[]},{y:3565.3105,x:3103.7331,label:[]},{y:3569.0033,x:3133.471,label:[]},{y:3572.6961,x:3163.2089,label:[]},{y:3576.3888,x:3192.9467,label:[]},{y:3580.0816,x:3222.6846,label:[]},{y:3583.7744,x:3252.4225,label:[]},{y:3587.4671,x:3282.1604,label:[]},{y:3591.1599,x:3311.8983,label:[]},{y:3594.8527,x:3341.6362,label:[]},{y:3598.5455,x:3371.3741,label:[]},{y:3599.9856,x:3382.9719,label:[]},{y:3602.2382,x:3401.112,label:[]},{y:3605.931,x:3430.8499,label:[]},{y:3609.6238,x:3460.5877,label:[]},{y:3613.3165,x:3490.3256,label:[]},{y:3617.0093,x:3520.0635,label:[]},{y:3620.7021,x:3549.8014,label:[]},{y:3624.3948,x:3579.5393,label:[]},{y:3628.0876,x:3609.2772,label:[]},{y:3631.7804,x:3639.0151,label:[]},{y:3635.4731,x:3668.753,label:[]},{y:3639.1659,x:3698.4909,label:[]},{y:3642.8587,x:3728.2287,label:[]},{y:3646.5514,x:3757.9666,label:[]},{y:3650.2442,x:3787.7045,label:[]},{y:3653.937,x:3817.4424,label:[]},{y:3657.6298,x:3847.1803,label:[]},{y:3661.3225,x:3876.9182,label:[]},{y:3665.0153,x:3906.6561,label:[]},{y:3668.7081,x:3936.394,label:[]},{y:3672.4008,x:3966.1318,label:[]},{y:3676.0936,x:3995.8697,label:[]},{y:3679.7864,x:4025.6076,label:[]},{y:3683.4791,x:4055.3455,label:[]},{y:3687.1719,x:4085.0834,label:[]},{y:3690.8647,x:4114.8213,label:[]},{y:3694.5574,x:4144.5592,label:[]},{y:3698.2502,x:4174.2971,label:[]},{y:3701.943,x:4204.035,label:[]},{y:3705.6357,x:4233.7728,label:[]},{y:3709.3285,x:4263.5107,label:[]},{y:3713.0213,x:4293.2486,label:[]},{y:3716.7141,x:4322.9865,label:[]},{y:3720.4068,x:4352.7244,label:[]},{y:3724.0996,x:4382.4623,label:[]},{y:3727.7924,x:4412.2002,label:[]},{y:3731.4851,x:4441.9381,label:[]},{y:3735.1779,x:4471.676,label:[]},{y:3738.8707,x:4501.4138,label:[]},{y:3742.5634,x:4531.1517,label:[]},{y:3746.2562,x:4560.8896,label:[]},{y:3749.949,x:4590.6275,label:[]},{y:3753.6417,x:4620.3654,label:[]},{y:3757.3345,x:4650.1033,label:[]},{y:3761.0273,x:4679.8412,label:[]},{y:3764.72,x:4709.5791,label:[]},{y:3768.4128,x:4739.3169,label:[]},{y:3772.1056,x:4769.0548,label:[]},{y:3775.7984,x:4798.7927,label:[]},{y:3779.4911,x:4828.5306,label:[]},{y:3783.1839,x:4858.2685,label:[]},{y:3786.8767,x:4888.0064,label:[]},{y:3790.5694,x:4917.7443,label:[]},{y:3794.2622,x:4947.4822,label:[]},{y:3797.955,x:4977.2201,label:[]},{y:3801.6477,x:5006.9579,label:[]},{y:3805.3405,x:5036.6958,label:[]},{y:3809.0333,x:5066.4337,label:[]},{y:3809.7189,x:5067.0389,label:[]},{y:3810.7189,x:5067.0389,label:[]}],wellOffset:[-3.4,.11]}];return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(`div`,{style:{display:`flex`,gap:8,marginBottom:16,alignItems:`center`},children:[(0,d.jsx)(`span`,{children:`Label for first annotation:`}),(0,d.jsx)(`input`,{value:n,onChange:e=>{let n=e.target.value;r(n),t(e=>e.map((e,t)=>t===0?{...e,label:n}:e))},style:{padding:4,minWidth:180}}),(0,d.jsx)(`button`,{type:`button`,onClick:()=>{t(e=>{let t=e.length,n=i[0].data,r={type:`point`,labelOffsetPx:50,xValue:n[t]?.x??n[n.length-1].x,yValue:100+t*10,radius:4,color:`rgba(128, 128, 128, 1)`,pointStyle:`triangle`,label:`annotation ${t+1}`,labelConfig:{position:`right`,color:`rgba(128, 128, 128, 1)`,callout:{enabled:!0}}};return[...e,r]})},children:`Add annotation`})]}),(0,d.jsx)(c,{chart:{...p,data:{datasets:i},options:{...p.options,legend:{display:!1},annotations:{showAnnotations:!0,enableDragAnnotation:!0,enableCalloutAnnotation:!0,annotationsData:e}}}})]})},b=()=>{let[e,t]=(0,l.useState)(!1),n=(0,l.useMemo)(()=>[{annotationAxis:`y`,label:`Annotation 1`,value:50},{annotationAxis:`x`,label:`Annotation 2`,value:10}],[]),r=(0,l.useMemo)(()=>({...p,options:{...p.options,title:`Repro: toggle controlAnnotation (with legend)`,legend:{display:!0},annotations:{controlAnnotation:e,showAnnotations:!0,annotationsData:n}}}),[e,n]);return(0,d.jsxs)(o,{gap:!0,children:[(0,d.jsx)(i,{children:(0,d.jsx)(a,{label:`controlAnnotation: ${e?`true`:`false`}`,value:e,onChange:()=>t(e=>!e)})}),(0,d.jsx)(c,{chart:r})]})};h.__docgenInfo={description:``,methods:[],displayName:`PartialRangeWithSimilarValues`},g.__docgenInfo={description:``,methods:[],displayName:`closeToValueInDifferentAxes`},_.__docgenInfo={description:``,methods:[],displayName:`OverlappingBoxAnnotationLabels`},v.__docgenInfo={description:``,methods:[],displayName:`StressTest`},y.__docgenInfo={description:``,methods:[],displayName:`DynamicCalloutAnnotations`},b.__docgenInfo={description:``,methods:[],displayName:`Test_ControlAnnotation_WithLegend`},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
|
|
2
2
|
return <LineChart chart={{
|
|
3
3
|
data: {
|
|
4
4
|
datasets: [{
|
|
@@ -129,6 +129,129 @@ import{a as e,j as t,t as n}from"./iframe-DApKJtpy.js";import"./react-dom-CWw972
|
|
|
129
129
|
}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`() => {
|
|
130
130
|
return <LineChart chart={planView} />;
|
|
131
131
|
}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`() => {
|
|
132
|
+
const [useCallout, setUseCallout] = useState(true);
|
|
133
|
+
const [onlyWhenOverlapping, setOnlyWhenOverlapping] = useState(false);
|
|
134
|
+
const formationDepths = [{
|
|
135
|
+
label: 'Top Cretaceous',
|
|
136
|
+
depth: 1000
|
|
137
|
+
}, {
|
|
138
|
+
label: 'Uaru Sand 4',
|
|
139
|
+
depth: 1450
|
|
140
|
+
}, {
|
|
141
|
+
label: 'Uaru Sand 3',
|
|
142
|
+
depth: 1460
|
|
143
|
+
}, {
|
|
144
|
+
label: 'Hordaland GP.',
|
|
145
|
+
depth: 3600
|
|
146
|
+
}, {
|
|
147
|
+
label: 'Stord Un.',
|
|
148
|
+
depth: 4800
|
|
149
|
+
}, {
|
|
150
|
+
label: 'Balder Fm.',
|
|
151
|
+
depth: 5300
|
|
152
|
+
}, {
|
|
153
|
+
label: 'Lista Fm.',
|
|
154
|
+
depth: 5600
|
|
155
|
+
}, {
|
|
156
|
+
label: 'Shetland Group',
|
|
157
|
+
depth: 5850
|
|
158
|
+
}, {
|
|
159
|
+
label: 'TD',
|
|
160
|
+
depth: 5900
|
|
161
|
+
}];
|
|
162
|
+
return <Grid gap>
|
|
163
|
+
<FormRow>
|
|
164
|
+
<Toggle label={\`Use callout: \${useCallout ? 'on' : 'off'}\`} checked={useCallout} onChange={() => setUseCallout(v => !v)} />
|
|
165
|
+
</FormRow>
|
|
166
|
+
|
|
167
|
+
<FormRow>
|
|
168
|
+
<Toggle label={\`Only when overlapping: \${onlyWhenOverlapping ? 'on' : 'off'}\`} checked={onlyWhenOverlapping} onChange={() => setOnlyWhenOverlapping(v => !v)} disabled={!useCallout} />
|
|
169
|
+
</FormRow>
|
|
170
|
+
|
|
171
|
+
<LineChart chart={{
|
|
172
|
+
data: {
|
|
173
|
+
datasets: [{
|
|
174
|
+
label: 'Pore pressure',
|
|
175
|
+
data: [{
|
|
176
|
+
x: 6,
|
|
177
|
+
y: 1000
|
|
178
|
+
}, {
|
|
179
|
+
x: 6.8,
|
|
180
|
+
y: 2000
|
|
181
|
+
}, {
|
|
182
|
+
x: 7.3,
|
|
183
|
+
y: 3500
|
|
184
|
+
}, {
|
|
185
|
+
x: 7.7,
|
|
186
|
+
y: 4700
|
|
187
|
+
}, {
|
|
188
|
+
x: 8.2,
|
|
189
|
+
y: 5600
|
|
190
|
+
}]
|
|
191
|
+
}]
|
|
192
|
+
},
|
|
193
|
+
options: {
|
|
194
|
+
title: 'Playground: overlapping formation labels (box annotations)',
|
|
195
|
+
chartStyling: {
|
|
196
|
+
height: 560
|
|
197
|
+
},
|
|
198
|
+
legend: {
|
|
199
|
+
display: false
|
|
200
|
+
},
|
|
201
|
+
axes: {
|
|
202
|
+
x: [{
|
|
203
|
+
label: 'Pressure Gradient [ppg]'
|
|
204
|
+
}],
|
|
205
|
+
y: [{
|
|
206
|
+
label: 'Depth TVD RKB [ft]'
|
|
207
|
+
}]
|
|
208
|
+
},
|
|
209
|
+
additionalAxesOptions: {
|
|
210
|
+
reverse: true,
|
|
211
|
+
range: {
|
|
212
|
+
x: {
|
|
213
|
+
min: 4,
|
|
214
|
+
max: 11
|
|
215
|
+
},
|
|
216
|
+
y: {
|
|
217
|
+
min: 900,
|
|
218
|
+
max: 6200
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
annotations: {
|
|
223
|
+
showAnnotations: true,
|
|
224
|
+
enableCalloutAnnotation: useCallout,
|
|
225
|
+
annotationsData: formationDepths.map(({
|
|
226
|
+
label,
|
|
227
|
+
depth
|
|
228
|
+
}) => ({
|
|
229
|
+
type: 'box',
|
|
230
|
+
xMin: 4.02,
|
|
231
|
+
xMax: 4.06,
|
|
232
|
+
yMin: depth - 5,
|
|
233
|
+
yMax: depth + 5,
|
|
234
|
+
color: 'rgba(0, 0, 0, 0.4)',
|
|
235
|
+
adjustScaleRange: false,
|
|
236
|
+
label,
|
|
237
|
+
labelConfig: useCallout ? {
|
|
238
|
+
position: 'left',
|
|
239
|
+
color: 'rgba(15, 15, 15, 1)',
|
|
240
|
+
callout: {
|
|
241
|
+
enabled: true,
|
|
242
|
+
onlyWhenOverlapping
|
|
243
|
+
}
|
|
244
|
+
} : {
|
|
245
|
+
position: 'left',
|
|
246
|
+
xAdjust: -6,
|
|
247
|
+
color: 'rgba(15, 15, 15, 1)'
|
|
248
|
+
}
|
|
249
|
+
}))
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}} />
|
|
253
|
+
</Grid>;
|
|
254
|
+
}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`() => {
|
|
132
255
|
const [datasets, setDatasets] = useState(basicDS);
|
|
133
256
|
const [chartKey, setChartKey] = useState(0);
|
|
134
257
|
const [isSmall, setIsSmall] = useState(false);
|
|
@@ -427,7 +550,7 @@ import{a as e,j as t,t as n}from"./iframe-DApKJtpy.js";import"./react-dom-CWw972
|
|
|
427
550
|
</div>}
|
|
428
551
|
</div>
|
|
429
552
|
</>;
|
|
430
|
-
}`,...
|
|
553
|
+
}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`() => {
|
|
431
554
|
const [annotations, setAnnotations] = useState([{
|
|
432
555
|
type: 'point',
|
|
433
556
|
labelOffsetPx: 50,
|
|
@@ -1542,7 +1665,7 @@ import{a as e,j as t,t as n}from"./iframe-DApKJtpy.js";import"./react-dom-CWw972
|
|
|
1542
1665
|
}
|
|
1543
1666
|
}} />
|
|
1544
1667
|
</>;
|
|
1545
|
-
}`,...
|
|
1668
|
+
}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`() => {
|
|
1546
1669
|
const [control, setControl] = useState(false);
|
|
1547
1670
|
const annotationsData = useMemo(() => [{
|
|
1548
1671
|
annotationAxis: 'y',
|
|
@@ -1575,4 +1698,4 @@ import{a as e,j as t,t as n}from"./iframe-DApKJtpy.js";import"./react-dom-CWw972
|
|
|
1575
1698
|
|
|
1576
1699
|
<LineChart chart={chart} />
|
|
1577
1700
|
</Grid>;
|
|
1578
|
-
}`,...
|
|
1701
|
+
}`,...b.parameters?.docs?.source}}};const x=[`PartialRangeWithSimilarValues`,`closeToValueInDifferentAxes`,`OverlappingBoxAnnotationLabels`,`StressTest`,`DynamicCalloutAnnotations`,`Test_ControlAnnotation_WithLegend`];export{y as DynamicCalloutAnnotations,_ as OverlappingBoxAnnotationLabels,h as PartialRangeWithSimilarValues,v as StressTest,b as Test_ControlAnnotation_WithLegend,x as __namedExportsOrder,g as closeToValueInDifferentAxes,m as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,j as t,t as n}from"./iframe-
|
|
1
|
+
import{a as e,j as t,t as n}from"./iframe-B7buKd6W.js";import{$t as r,C as i,Gt as a,H as o,Ht as s,It as c,Jt as l,L as ee,P as u,Qt as d,Rt as f,dt as p,in as m,n as h,nn as g,p as te,qt as ne,rn as re,tn as ie,tt as ae,w as oe,zt as se}from"./legend-context-D1oEf-Th.js";import{n as ce,t as le}from"./bar-chart-const-BupPLp8f.js";var ue=t(c(),1),_=t(e(),1),v={chart:`_chart_1jdnu_1`,fixedHeight:`_fixedHeight_1jdnu_13`,stretchHeight:`_stretchHeight_1jdnu_19`,zoomForm:`_zoomForm_1jdnu_32`,zoomReset:`_zoomReset_1jdnu_40`,help:`_help_1jdnu_43`,autoWeight:`_autoWeight_1jdnu_47`},y=e=>({width:e?.width,height:e?.height,maintainAspectRatio:e?.maintainAspectRatio||!1,staticChartHeight:e?.staticChartHeight||!1,performanceMode:e?.performanceMode??!0}),b=e=>({tooltips:e?.tooltips??!0,showLabelsInTooltips:e?.showLabelsInTooltips||!1,scientificNotation:e?.scientificNotation??!0}),x=e=>({showDataLabels:e?.showDataLabels||!1,stacked:e?.stacked||!1,cutout:e?.cutout||0}),S=e=>({display:e?.display??!0,useDataset:e?.useDataset||!1,position:e?.position||u.Bottom,align:e?.align||oe.Center}),C=e=>({enableZoom:e?.enableZoom||!1,enablePan:e?.enablePan||!1}),w=e=>({onLegendClick:e?.onLegendClick,onHover:e?.onHover,onUnhover:e?.onUnhover}),de=e=>({labels:e?.labels||[],datasets:e?.datasets||[]});const T=e=>{let t=e?.chart||{},n=t?.options||{};return{testId:t?.testId??null,data:de(t?.data),options:{title:n?.title||``,chartStyling:y(n?.chartStyling),tooltip:b(n?.tooltip),graph:x(n?.graph),legend:S(n?.legend),chartOptions:C(n?.chartOptions),interactions:w(n?.interactions)}}},E=e=>{let[t,n]=(0,_.useState)(!1),{data:r,options:i}=e,a=(e=>{let t=[...e];if(i.graph.stacked){let e={label:t?.[0]?.label??``,backgroundColor:[],borderColor:``,borderWidth:Number(t[0].borderWidth)||1,data:[],borderDash:[]};return r.labels.map((n,r)=>{t.map((t,n)=>{e.data.push(t.data[r]);let{backgroundColor:i}=t,{borderColor:a}=t;e.backgroundColor.push((Array.isArray(i)?i[r%(a?.length||1)]:i)||o[r]+`${99-10*n}`),e.borderColor=a??``})}),[e]}return t.map((e,t)=>{let{borderWidth:n=`1`}=e??{},r=parseFloat(String(n))||1,i=o[t],a=e.borderColor||i,s=e.backgroundColor||te(o);return{...e,borderWidth:r,borderColor:a,backgroundColor:s}})})(r.datasets),s=()=>i.title===``?{}:{display:!0,text:e.options.title},c=(e,t,n)=>{let{chart:r}=n??{};if(t&&r){let{index:e=0}=t;if(r.toggleDataVisibility(e),r.update(),i.interactions?.onLegendClick){let n=r.isDatasetVisible(e);i.interactions.onLegendClick(t.text,!n)}}};return{generatedDatasets:a,getTitle:s,legendClick:c,onClick:(e,t,n)=>{n.resetZoom()},onHover:(e,r)=>{if(t&&!r?.length&&(n(!1),i.interactions.onUnhover&&i.interactions.onUnhover(e)),!t&&r?.length&&(n(!0),i.interactions.onHover)){let{index:t,datasetIndex:n}=r[0],o=a;i.interactions.onHover(e,n,t,o)}},getDatalabels:()=>i.graph.showDataLabels?{display:`auto`,align:`center`,anchor:`center`,formatter:(e,t)=>{if(t.chart.getDatasetMeta(i.graph.stacked?0:t.datasetIndex).data[t.dataIndex].hidden)return``;let n=t.dataset.data[t.dataIndex],r=n?.label||(typeof n==`number`?n:Array.isArray(n)?n.reduce((e,t,n)=>n===0?`${e} ${t}`:`${e}, ${t}`,``):``);return typeof n==`number`?Number.isInteger(r)?r:r.toFixed(2):r}}:{display:!1},getLegend:()=>({position:i.legend.position,display:i.legend.display,align:i.legend.align,labels:{boxHeight:6,boxWidth:6,usePointStyle:!0,filter:e=>i.legend.useDataset?!r.datasets[e.index]?.hideLegend:!0},onClick:c}),getToolTips:()=>{let e=e=>{let t={};return i?.tooltip?.scientificNotation?(Math.abs(e)<1e-4||Math.abs(e)>1e7)&&(t={roundScientificCoefficient:3}):t={scientific:!1},ae(p(e),t)};return{callbacks:{title:e=>{let{dataIndex:t}=e[0],n=i.graph.stacked?parseInt(String(t/r.labels.length)):t;return`${r.labels[n]}`},label:t=>{let{dataIndex:n}=t,a=i.graph.stacked?n%r.datasets.length:t.datasetIndex,o=r.datasets.length>1?`${r.datasets[a]?.label}: `:``,s=t.dataset.data[n],c=typeof s==`object`?`${s.value||``} ${i.tooltip.showLabelsInTooltips&&s.label?`(`+s.label+`)`:``}`:s,l=r?.yUnit?`[${r?.yUnit}]`:``;return`${o} ${e(c)} ${l}`}},padding:8,boxWidth:12,boxHeight:12,boxPadding:4,usePointStyle:!0}}}};var D=n();l.register(d,ne,r,a,g,m,re,ie,se,f);var O=e=>{i();let t=T(e),n=(0,_.useRef)(null),{data:r,options:a,testId:o}=t,{generatedDatasets:c,getTitle:l,onClick:u,onHover:d,getDatalabels:f,getLegend:p,getToolTips:m}=E(t);return(0,D.jsx)(`div`,{className:(0,ue.default)(v.chart,!a.chartStyling.width||!a.chartStyling.height?a.chartStyling.staticChartHeight?v.fixedHeight:v.stretchHeight:``),style:{width:a.chartStyling.width||`auto`,height:a.chartStyling.height||`auto`},"data-testid":o,children:(0,D.jsx)(s,{ref:n,data:{datasets:c,labels:a.graph.stacked?void 0:r.labels},options:{cutout:a.graph.cutout,onClick:u,responsive:!0,maintainAspectRatio:a.chartStyling.maintainAspectRatio,animation:a.chartStyling.performanceMode?!1:{duration:ee.FAST},hover:{mode:`nearest`,intersect:!0},onHover:d,plugins:{annotation:!1,title:l(),datalabels:f(),tooltip:m(),legend:p()}}})})},k=e=>{let{options:t}=T(e);return(0,D.jsx)(h,{options:t,children:(0,D.jsx)(O,{...e})})};k.__docgenInfo={description:``,methods:[],displayName:`PieChartWithLegend`,props:{chart:{required:!0,tsType:{name:`IPieChartData`},description:``},testId:{required:!1,tsType:{name:`union`,raw:`string | null`,elements:[{name:`string`},{name:`null`}]},description:``}}};var A=[`label 1`,`label 2`,`label 3`],j={label:`data1`,data:[3,8,7]},M={label:`data2`,data:[1,2,3]},N={label:`data3`,data:[5,0,4]},P={label:`spacing data`,offset:40,data:[3,8,7]},F={label:`hover data`,data:[3,8,7],hoverOffset:40},I={label:`data`,data:[{value:210,label:`label`},{value:333,label:`labal`},{value:248,label:`lebel`}]},L={label:`data`,data:[210,333,248]},R={data:{labels:A,datasets:[j]}},z={data:{labels:A,datasets:[j,M,N]}},B={data:{labels:A,datasets:[j,M,N]},options:{title:`Stacked`,graph:{stacked:!0}}},V={data:{labels:A,datasets:[I]},options:{title:`With custom datalabels`,graph:{showDataLabels:!0}}},fe={data:{labels:A,datasets:[L]},options:{title:`With value as datalabels`,graph:{showDataLabels:!0}}},pe={data:{labels:A,datasets:[I]},options:{title:`With datalabels in tooltips`,tooltip:{showLabelsInTooltips:!0}}},me={data:{labels:A,datasets:[F]},options:{title:`Hover offset`}},he={data:{labels:A,datasets:[P]},options:{title:`Segment offset`}},ge={data:{labels:A,datasets:[j]},options:{chartStyling:{performanceMode:!1}}},_e={data:{labels:A,datasets:[j]},options:{title:`Cutout 50%`,graph:{cutout:`50%`}}},ve={data:{labels:A,datasets:[j]},options:{title:`Cutout 20 pixels`,graph:{cutout:20}}},ye={title:`PieChart`,component:k,args:{chart:R}},H=e=>(0,D.jsx)(k,{...e});const U=H.bind({}),W=H.bind({});W.args={chart:z};const G=H.bind({});G.args={chart:B};const K=H.bind({});K.args={chart:V};const q=H.bind({});q.args={chart:fe};const J=H.bind({});J.args={chart:pe};const Y=H.bind({});Y.args={chart:ge};const X=H.bind({});X.args={chart:_e};const Z=H.bind({});Z.args={chart:ve};const Q=H.bind({});Q.args={chart:me};const $=H.bind({});Q.args={chart:he},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`args => {
|
|
2
2
|
return <PieChart
|
|
3
3
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
4
4
|
{...args} />;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{E as e,O as t,a as n,j as r}from"./iframe-
|
|
1
|
+
import{E as e,O as t,a as n,j as r}from"./iframe-B7buKd6W.js";import{t as i}from"./react-dom-O1LTTn3X.js";var a=e((e=>{var t=i();e.createRoot=t.createRoot,e.hydrateRoot=t.hydrateRoot})),o=t({renderElement:()=>f,unmountElement:()=>p}),s=r(n(),1),c=r(a(),1),l=new Map;function u(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var d=({callback:e,children:t})=>{let n=s.useRef();return s.useLayoutEffect(()=>{n.current!==e&&(n.current=e,e())},[e]),t};typeof Promise.withResolvers>`u`&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}});var f=async(e,t,n)=>{let r=await m(t,n);if(u()){r.render(e);return}let{promise:i,resolve:a}=Promise.withResolvers();return r.render(s.createElement(d,{callback:a},e)),i},p=(e,t)=>{let n=l.get(e);n&&(n.unmount(),l.delete(e))},m=async(e,t)=>{let n=l.get(e);return n||(n=c.createRoot(e,t),l.set(e,n)),n};export{f as n,p as r,o as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,j as t}from"./iframe-
|
|
1
|
+
import{a as e,j as t}from"./iframe-B7buKd6W.js";var n=t(e(),1),r={},i=n.createContext(r);function a(e){let t=n.useContext(i);return n.useMemo(function(){return typeof e==`function`?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?typeof e.components==`function`?e.components(r):e.components||r:a(e.components),n.createElement(i.Provider,{value:t},e.children)}export{o as MDXProvider};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{E as e,a as t}from"./iframe-
|
|
1
|
+
import{E as e,a as t}from"./iframe-B7buKd6W.js";var n=e((e=>{function t(e,t){var n=e.length;e.push(t);a:for(;0<n;){var r=n-1>>>1,a=e[r];if(0<i(a,t))e[r]=t,e[n]=a,n=r;else break a}}function n(e){return e.length===0?null:e[0]}function r(e){if(e.length===0)return null;var t=e[0],n=e.pop();if(n!==t){e[0]=n;a:for(var r=0,a=e.length,o=a>>>1;r<o;){var s=2*(r+1)-1,c=e[s],l=s+1,u=e[l];if(0>i(c,n))l<a&&0>i(u,c)?(e[r]=u,e[l]=n,r=l):(e[r]=c,e[s]=n,r=s);else if(l<a&&0>i(u,n))e[r]=u,e[l]=n,r=l;else break a}}return t}function i(e,t){var n=e.sortIndex-t.sortIndex;return n===0?e.id-t.id:n}if(typeof performance==`object`&&typeof performance.now==`function`){var a=performance;e.unstable_now=function(){return a.now()}}else{var o=Date,s=o.now();e.unstable_now=function(){return o.now()-s}}var c=[],l=[],u=1,d=null,f=3,p=!1,m=!1,h=!1,g=typeof setTimeout==`function`?setTimeout:null,_=typeof clearTimeout==`function`?clearTimeout:null,v=typeof setImmediate<`u`?setImmediate:null;typeof navigator<`u`&&navigator.scheduling!==void 0&&navigator.scheduling.isInputPending!==void 0&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function y(e){for(var i=n(l);i!==null;){if(i.callback===null)r(l);else if(i.startTime<=e)r(l),i.sortIndex=i.expirationTime,t(c,i);else break;i=n(l)}}function ee(e){if(h=!1,y(e),!m)if(n(c)!==null)m=!0,de(te);else{var t=n(l);t!==null&&fe(ee,t.startTime-e)}}function te(t,i){m=!1,h&&(h=!1,_(re),re=-1),p=!0;var a=f;try{for(y(i),d=n(c);d!==null&&(!(d.expirationTime>i)||t&&!oe());){var o=d.callback;if(typeof o==`function`){d.callback=null,f=d.priorityLevel;var s=o(d.expirationTime<=i);i=e.unstable_now(),typeof s==`function`?d.callback=s:d===n(c)&&r(c),y(i)}else r(c);d=n(c)}if(d!==null)var u=!0;else{var g=n(l);g!==null&&fe(ee,g.startTime-i),u=!1}return u}finally{d=null,f=a,p=!1}}var ne=!1,b=null,re=-1,ie=5,ae=-1;function oe(){return!(e.unstable_now()-ae<ie)}function se(){if(b!==null){var t=e.unstable_now();ae=t;var n=!0;try{n=b(!0,t)}finally{n?ce():(ne=!1,b=null)}}else ne=!1}var ce;if(typeof v==`function`)ce=function(){v(se)};else if(typeof MessageChannel<`u`){var le=new MessageChannel,ue=le.port2;le.port1.onmessage=se,ce=function(){ue.postMessage(null)}}else ce=function(){g(se,0)};function de(e){b=e,ne||(ne=!0,ce())}function fe(t,n){re=g(function(){t(e.unstable_now())},n)}e.unstable_IdlePriority=5,e.unstable_ImmediatePriority=1,e.unstable_LowPriority=4,e.unstable_NormalPriority=3,e.unstable_Profiling=null,e.unstable_UserBlockingPriority=2,e.unstable_cancelCallback=function(e){e.callback=null},e.unstable_continueExecution=function(){m||p||(m=!0,de(te))},e.unstable_forceFrameRate=function(e){0>e||125<e?console.error(`forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported`):ie=0<e?Math.floor(1e3/e):5},e.unstable_getCurrentPriorityLevel=function(){return f},e.unstable_getFirstCallbackNode=function(){return n(c)},e.unstable_next=function(e){switch(f){case 1:case 2:case 3:var t=3;break;default:t=f}var n=f;f=t;try{return e()}finally{f=n}},e.unstable_pauseExecution=function(){},e.unstable_requestPaint=function(){},e.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=f;f=e;try{return t()}finally{f=n}},e.unstable_scheduleCallback=function(r,i,a){var o=e.unstable_now();switch(typeof a==`object`&&a?(a=a.delay,a=typeof a==`number`&&0<a?o+a:o):a=o,r){case 1:var s=-1;break;case 2:s=250;break;case 5:s=1073741823;break;case 4:s=1e4;break;default:s=5e3}return s=a+s,r={id:u++,callback:i,priorityLevel:r,startTime:a,expirationTime:s,sortIndex:-1},a>o?(r.sortIndex=a,t(l,r),n(c)===null&&r===n(l)&&(h?(_(re),re=-1):h=!0,fe(ee,a-o))):(r.sortIndex=s,t(c,r),m||p||(m=!0,de(te))),r},e.unstable_shouldYield=oe,e.unstable_wrapCallback=function(e){var t=f;return function(){var n=f;f=t;try{return e.apply(this,arguments)}finally{f=n}}}})),r=e(((e,t)=>{t.exports=n()})),i=e((e=>{var n=t(),i=r();function a(e){for(var t=`https://reactjs.org/docs/error-decoder.html?invariant=`+e,n=1;n<arguments.length;n++)t+=`&args[]=`+encodeURIComponent(arguments[n]);return`Minified React error #`+e+`; visit `+t+` for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`}var o=new Set,s={};function c(e,t){l(e,t),l(e+`Capture`,t)}function l(e,t){for(s[e]=t,e=0;e<t.length;e++)o.add(t[e])}var u=!(typeof window>`u`||window.document===void 0||window.document.createElement===void 0),d=Object.prototype.hasOwnProperty,f=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,p={},m={};function h(e){return d.call(m,e)?!0:d.call(p,e)?!1:f.test(e)?m[e]=!0:(p[e]=!0,!1)}function g(e,t,n,r){if(n!==null&&n.type===0)return!1;switch(typeof t){case`function`:case`symbol`:return!0;case`boolean`:return r?!1:n===null?(e=e.toLowerCase().slice(0,5),e!==`data-`&&e!==`aria-`):!n.acceptsBooleans;default:return!1}}function _(e,t,n,r){if(t==null||g(e,t,n,r))return!0;if(r)return!1;if(n!==null)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}function v(e,t,n,r,i,a,o){this.acceptsBooleans=t===2||t===3||t===4,this.attributeName=r,this.attributeNamespace=i,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=a,this.removeEmptyString=o}var y={};`children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style`.split(` `).forEach(function(e){y[e]=new v(e,0,!1,e,null,!1,!1)}),[[`acceptCharset`,`accept-charset`],[`className`,`class`],[`htmlFor`,`for`],[`httpEquiv`,`http-equiv`]].forEach(function(e){var t=e[0];y[t]=new v(t,1,!1,e[1],null,!1,!1)}),[`contentEditable`,`draggable`,`spellCheck`,`value`].forEach(function(e){y[e]=new v(e,2,!1,e.toLowerCase(),null,!1,!1)}),[`autoReverse`,`externalResourcesRequired`,`focusable`,`preserveAlpha`].forEach(function(e){y[e]=new v(e,2,!1,e,null,!1,!1)}),`allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope`.split(` `).forEach(function(e){y[e]=new v(e,3,!1,e.toLowerCase(),null,!1,!1)}),[`checked`,`multiple`,`muted`,`selected`].forEach(function(e){y[e]=new v(e,3,!0,e,null,!1,!1)}),[`capture`,`download`].forEach(function(e){y[e]=new v(e,4,!1,e,null,!1,!1)}),[`cols`,`rows`,`size`,`span`].forEach(function(e){y[e]=new v(e,6,!1,e,null,!1,!1)}),[`rowSpan`,`start`].forEach(function(e){y[e]=new v(e,5,!1,e.toLowerCase(),null,!1,!1)});var ee=/[\-:]([a-z])/g;function te(e){return e[1].toUpperCase()}`accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height`.split(` `).forEach(function(e){var t=e.replace(ee,te);y[t]=new v(t,1,!1,e,null,!1,!1)}),`xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type`.split(` `).forEach(function(e){var t=e.replace(ee,te);y[t]=new v(t,1,!1,e,`http://www.w3.org/1999/xlink`,!1,!1)}),[`xml:base`,`xml:lang`,`xml:space`].forEach(function(e){var t=e.replace(ee,te);y[t]=new v(t,1,!1,e,`http://www.w3.org/XML/1998/namespace`,!1,!1)}),[`tabIndex`,`crossOrigin`].forEach(function(e){y[e]=new v(e,1,!1,e.toLowerCase(),null,!1,!1)}),y.xlinkHref=new v(`xlinkHref`,1,!1,`xlink:href`,`http://www.w3.org/1999/xlink`,!0,!1),[`src`,`href`,`action`,`formAction`].forEach(function(e){y[e]=new v(e,1,!1,e.toLowerCase(),null,!0,!0)});function ne(e,t,n,r){var i=y.hasOwnProperty(t)?y[t]:null;(i===null?r||!(2<t.length)||t[0]!==`o`&&t[0]!==`O`||t[1]!==`n`&&t[1]!==`N`:i.type!==0)&&(_(t,n,i,r)&&(n=null),r||i===null?h(t)&&(n===null?e.removeAttribute(t):e.setAttribute(t,``+n)):i.mustUseProperty?e[i.propertyName]=n===null?i.type===3?!1:``:n:(t=i.attributeName,r=i.attributeNamespace,n===null?e.removeAttribute(t):(i=i.type,n=i===3||i===4&&!0===n?``:``+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}var b=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,re=Symbol.for(`react.element`),ie=Symbol.for(`react.portal`),ae=Symbol.for(`react.fragment`),oe=Symbol.for(`react.strict_mode`),se=Symbol.for(`react.profiler`),ce=Symbol.for(`react.provider`),le=Symbol.for(`react.context`),ue=Symbol.for(`react.forward_ref`),de=Symbol.for(`react.suspense`),fe=Symbol.for(`react.suspense_list`),pe=Symbol.for(`react.memo`),me=Symbol.for(`react.lazy`),he=Symbol.for(`react.offscreen`),ge=Symbol.iterator;function _e(e){return typeof e!=`object`||!e?null:(e=ge&&e[ge]||e[`@@iterator`],typeof e==`function`?e:null)}var x=Object.assign,ve;function ye(e){if(ve===void 0)try{throw Error()}catch(e){var t=e.stack.trim().match(/\n( *(at )?)/);ve=t&&t[1]||``}return`
|
|
2
2
|
`+ve+e}var be=!1;function xe(e,t){if(!e||be)return``;be=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,`props`,{set:function(){throw Error()}}),typeof Reflect==`object`&&Reflect.construct){try{Reflect.construct(t,[])}catch(e){var r=e}Reflect.construct(e,[],t)}else{try{t.call()}catch(e){r=e}e.call(t.prototype)}else{try{throw Error()}catch(e){r=e}e()}}catch(t){if(t&&r&&typeof t.stack==`string`){for(var i=t.stack.split(`
|
|
3
3
|
`),a=r.stack.split(`
|
|
4
4
|
`),o=i.length-1,s=a.length-1;1<=o&&0<=s&&i[o]!==a[s];)s--;for(;1<=o&&0<=s;o--,s--)if(i[o]!==a[s]){if(o!==1||s!==1)do if(o--,s--,0>s||i[o]!==a[s]){var c=`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,j as t,t as n}from"./iframe-
|
|
1
|
+
import{a as e,j as t,t as n}from"./iframe-B7buKd6W.js";import"./react-dom-O1LTTn3X.js";import{B as r,C as i,E as a,F as o,H as s,Jt as c,K as l,L as u,P as d,Qt as f,Rt as p,S as m,Ut as h,dt as g,en as _,g as v,in as ee,n as te,nn as y,qt as b,rn as ne,tt as re,v as ie,w as ae,y as oe,z as se,zt as ce}from"./legend-context-D1oEf-Th.js";import{X as le,Y as ue,Z as de,d as fe,f as pe,i as me,p as he,r as ge,t as _e}from"./legend-Cem_14IV.js";import{n as ve,t as ye}from"./bar-chart-const-BupPLp8f.js";var x=t(e(),1);const S=(e,t)=>{let n={};return t?(Math.abs(e)<1e-4||Math.abs(e)>1e7)&&(n={roundScientificCoefficient:3}):n={scientific:!1},re(g(e),n)};var be=(e,t)=>{if(t?.tooltip?.showLabelsInTooltips){let{label:t}=e[0]?.dataset??{};return t}},xe=(e,t)=>{let{raw:n,dataset:r}=e??{},i=n?.label,a=t?.tooltip?.scientificNotation;return`${i??r?.label} ( x: ${S(n?.x,a)} , y: ${S(n?.y,a)} )`};const C=e=>({enabled:e?.tooltip?.enabled,callbacks:{title:t=>be(t,e),label:t=>xe(t,e)},backgroundColor:e?.tooltip?.backgroundColor,displayColors:e?.tooltip?.displayColors,padding:7});var w=({options:e,axisType:t=a.X,currentScale:n})=>{let r=m(e.direction),i=n||e?.axes?.[t]?.[0],s=r&&t===a.Y||!r&&t===a.X,c=i?.gridLines||{};return{type:o.Linear,position:i?.position,beginAtZero:e?.additionalAxesOptions?.beginAtZero,reverse:t===(r?a.Y:a.X)?e?.additionalAxesOptions?.reverse:!1,suggestedMax:e?.additionalAxesOptions?.suggestedMax,suggestedMin:e?.additionalAxesOptions?.suggestedMin,min:s?e?.additionalAxesOptions?.min:void 0,max:s?e?.additionalAxesOptions?.max:void 0,title:{display:!!i?.label?.length||!!i?.unit?.length,text:i?.label||i?.unit,padding:0},ticks:(()=>{let n=e?.additionalAxesOptions;return{stepSize:i?.stepSize??(t===a.Y?n?.stepSize:void 0),includeBounds:!1,font:{size:12}}})(),grid:{...c}}};const T=e=>({x:w({options:e,axisType:a.X}),y:w({options:e,axisType:a.Y})}),E=(e,t)=>{let{data:n,options:i}=e,{interactions:a,chartStyling:o}=i,[c,l]=(0,x.useState)(!1),{legend:d,customLegendPlugin:f,legendClick:p}=pe({chartRef:t,options:i}),{state:m}=he(),{annotation:h}=m,g=(e=>e.map((e,t)=>{let{borderWidth:n=1}=e??{},r=parseFloat(String(n))||1,i=s[t],a=e.borderColor??i,o=e.backgroundColor??i;return{...e,borderWidth:r,borderColor:a,backgroundColor:o}}))(n.datasets),_=(e,t,n)=>{n.resetZoom()},v=(e,t)=>{if(c&&!t?.length&&(l(!1),a.onUnhover&&a.onUnhover(e)),!c&&t?.length&&(l(!0),a.onHover)){let{index:n,datasetIndex:r}=t[0];a.onHover(e,r,n,g)}};return{generatedDatasets:g,scatterOptions:{onClick:_,onHover:v,...o,interactions:{onLegendClick:p,onHover:v},scales:T(e?.options),animation:o.performanceMode?{duration:u.NO}:{duration:u.FAST,onComplete:a?.onAnimationComplete},plugins:{legend:{...d,display:!1,events:[]},customLegendPlugin:f,title:oe(i),annotation:fe(h),chartAreaBorder:{borderColor:r},datalabels:{display:i.graph.showDataLabels},tooltip:C(i)}}}};let D=function(e){return e[e.TopToBottom=0]=`TopToBottom`,e[e.BottomToTop=1]=`BottomToTop`,e[e.LeftToRight=2]=`LeftToRight`,e[e.RightToLeft=3]=`RightToLeft`,e[e.TopLeftToBottomRight=4]=`TopLeftToBottomRight`,e[e.BottomRightToTopLeft=5]=`BottomRightToTopLeft`,e[e.BottomLeftToTopRight=6]=`BottomLeftToTopRight`,e[e.TopRightToBottomLeft=7]=`TopRightToBottomLeft`,e}({});var O=e=>({display:e?.display??!1,gradientColors:e?.gradientColors??l,direction:e?.direction??D.BottomLeftToTopRight}),k=e=>({width:e?.width??`auto`,height:e?.height??`auto`,maintainAspectRatio:e?.maintainAspectRatio||!1,staticChartHeight:e?.staticChartHeight||!1,performanceMode:e?.performanceMode??!0,gradient:O(e?.gradient)}),A=e=>({enabled:e?.enabled??!0,tooltips:e?.tooltips??!0,showLabelsInTooltips:e?.showLabelsInTooltips||!1,backgroundColor:e?.backgroundColor||`#333`,displayColors:e?.displayColors||!1,scientificNotation:e?.scientificNotation??!0}),j=e=>({showMinorGridlines:e?.showMinorGridlines??!1,showDataLabels:e?.showDataLabels??!1}),M=e=>({display:e?.display??!0,useDataset:e?.useDataset||!1,position:e?.position||d.BottomLeft,align:e?.align||ae.Center}),Se=e=>({enableZoom:e?.enableZoom||!1,enablePan:e?.enablePan||!1}),Ce=e=>({onLegendClick:e?.onLegendClick,onHover:e?.onHover,onUnhover:e?.onUnhover,onAnimationComplete:e?.onAnimationComplete}),we=e=>({labels:e?.labels||[],datasets:e?.datasets||[]}),Te=e=>e?e.map(e=>({...e,display:e?.display??!0})):[],Ee=e=>({showAnnotations:e?.showAnnotations??!0,controlAnnotation:e?.controlAnnotation||!1,annotationsData:Te(e?.annotationsData)}),De=e=>({x:e?.x||[{}],y:e?.y||[{}]}),Oe=e=>({reverse:e?.reverse||!1,stacked:e?.stacked||!1,beginAtZero:e?.beginAtZero??!0,stepSize:e?.stepSize,suggestedMin:e?.suggestedMin,suggestedMax:e?.suggestedMax,min:e?.min,max:e?.max});const N=e=>{let t=e?.chart||{},n=t?.options||{};return{testId:t?.testId??null,data:we(t?.data),options:{title:n?.title||``,axes:De(n?.axes),additionalAxesOptions:Oe(n?.additionalAxesOptions),direction:n?.direction||ge.VERTICAL,chartStyling:k(n?.chartStyling),tooltip:A(n?.tooltip),graph:j(n?.graph),legend:M(n?.legend),annotations:Ee(n?.annotations),chartOptions:Se(n?.chartOptions),interactions:Ce(n?.interactions)}}};var ke=(e,t)=>{switch(e){case D.TopToBottom:return[t.left,t.top,t.left,t.bottom];case D.BottomToTop:return[t.left,t.bottom,t.left,t.top];case D.LeftToRight:return[t.left,t.top,t.right,t.top];case D.RightToLeft:return[t.right,t.top,t.left,t.top];case D.TopLeftToBottomRight:return[t.left,t.top,t.right,t.bottom];case D.BottomRightToTopLeft:return[t.right,t.bottom,t.left,t.top];case D.BottomLeftToTopRight:return[t.left,t.bottom,t.right,t.top];case D.TopRightToBottomLeft:return[t.right,t.top,t.left,t.bottom];default:return[t.left,t.bottom,t.right,t.top]}};const Ae={id:`gradientBackgroundPlugin`,beforeDraw:e=>{let{ctx:t,chartArea:n,options:r}=e;if(!t||!n)return;let{display:i=!1,gradientColors:a,direction:o=D.BottomLeftToTopRight}=r?.gradient??{};if(!i||!a||a.length===0)return;let[s,c,l,u]=ke(o,n),d=t.createLinearGradient(s,c,l,u);a.forEach(({offset:e,color:t})=>{d.addColorStop(e,t)}),t.save(),t.globalCompositeOperation=`destination-over`,t.fillStyle=d,t.fillRect(n.left,n.top,n.right-n.left,n.bottom-n.top),t.restore()}};var P={chart:`_chart_1qlu1_1`,canvas:`_canvas_1qlu1_11`,fixedHeight:`_fixedHeight_1qlu1_20`,stretchHeight:`_stretchHeight_1qlu1_26`,squareAspectRatio:`_squareAspectRatio_1qlu1_32`,zoomForm:`_zoomForm_1qlu1_43`,zoomReset:`_zoomReset_1qlu1_51`,help:`_help_1qlu1_54`,autoWeight:`_autoWeight_1qlu1_58`},F=n();c.register(f,_,b,y,ee,ne,ce,p,de,Ae);var je=e=>{i();let t=(0,x.useRef)(null),n=N(e),{options:r,testId:a}=n,{scatterOptions:o,generatedDatasets:s}=E(n,t);return(0,F.jsx)(`div`,{className:v(r.chartStyling,P),style:{width:r.chartStyling.width,height:r.chartStyling.height},"data-testid":a,children:(0,F.jsx)(ue,{backend:le,context:window,children:(0,F.jsxs)(`div`,{className:P.canvas,id:`canvas`,children:[(0,F.jsx)(h,{ref:t,data:{datasets:s},options:o,plugins:ie(r.graph,r.legend)}),!!s.length&&(0,F.jsx)(_e,{chartRef:t,legendConfig:{options:r,generatedDatasets:s,chartType:me.SCATTER}})]})})})},I=e=>{let{options:t}=N(e);return(0,F.jsx)(te,{options:t,children:(0,F.jsx)(je,{...e})})};I.__docgenInfo={description:``,methods:[],displayName:`ScatterChartWithLegend`};var L=[`label 1`,`label 2`,`label 3`],R={label:`Dataset 1`,data:[{x:1,y:5},{x:3,y:7},{x:6,y:2},{x:8,y:6},{x:9,y:4}]},z={label:`Dataset 2`,data:[{x:1,y:3},{x:4,y:5},{x:7,y:9},{x:10,y:2},{x:12,y:7}]},Me={label:`Dataset 3`,data:[{x:2,y:8},{x:5,y:6},{x:8,y:10},{x:11,y:5},{x:14,y:9}]},B={label:`Dataset 4`,data:[{x:2,y:8},{x:14,y:9}]},Ne={label:`Dataset 5`,data:[{x:14,y:7,label:`Echo`},{x:3,y:18,label:`Lima`},{x:19,y:2,label:`Romeo`},{x:8,y:11,label:`Charlie`},{x:12,y:9,label:`Oscar`}]},Pe={label:`Dataset 6`,data:[{x:15,y:3,label:`Hotel`},{x:9,y:14,label:`Tango`},{x:4,y:17,label:`Whiskey`},{x:11,y:7,label:`Juliet`},{x:13,y:1,label:`Zulu`}]},Fe={label:`Dataset Decimals`,data:[{x:4.30021321123002,y:2.30021321123005},{x:5.12321321000003,y:3.23213210000037}]},V={data:{labels:L,datasets:[R]}},Ie={data:{labels:L,datasets:[R]},options:{chartStyling:{height:300,width:700}}},Le={data:{labels:L,datasets:[R,z,Me]}},Re={data:{labels:L,datasets:[R]},options:{title:`With Data Labels`,graph:{showDataLabels:!0}}},ze={data:{labels:L,datasets:[R,z,Fe]},options:{title:`With Tooltips`,tooltip:{title:`Tooltip`,showLabelsInTooltips:!0}}},Be={data:{labels:L,datasets:[{...R,backgroundColor:`red`,borderColor:`red`}]}},Ve={data:{labels:L,datasets:[R]},options:{title:`With Annotation`,annotations:{showAnnotations:!0,annotationsData:[{annotationAxis:`y`,label:`Horizontal Annotation`,value:2.5,color:`rgba(96, 32, 196, 0.5)`}]}}},He={data:{labels:L,datasets:[R,z,B]},options:{title:`With Axes Labels`,axes:{x:[{label:`x axis`}],y:[{label:`y axis`}]}}},Ue={...V,options:{title:`With Gradient`,chartStyling:{gradient:{display:!0}}}},We={data:{datasets:[Ne,Pe,B]},options:{title:`With datapoint label showing when hovered`,tooltip:{showLabelsInTooltips:!0}}},H={title:`ScatterChart`,component:I,args:{chart:V}},U=e=>(0,F.jsx)(I,{...e});const W=U.bind({});W.args={chart:V};const G=U.bind({});G.args={chart:Ie};const K=U.bind({});K.args={chart:Le};const q=U.bind({});q.args={chart:Re};const J=U.bind({});J.args={chart:ze};const Y=U.bind({});Y.args={chart:Ve};const X=U.bind({});X.args={chart:He};const Z=U.bind({});Z.args={chart:Ue};const Q=U.bind({});Q.args={chart:We};const $=U.bind({});$.args={chart:Be},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`args => {
|
|
2
2
|
return <ScatterChart
|
|
3
3
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
4
4
|
{...args} />;
|