@oliasoft-open-source/charts-library 5.0.8 → 5.1.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-YHDXOIA2-B_-Et0_1.js → Color-YHDXOIA2-D9Cia5uO.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-CBX5RMGQ.js → DocsRenderer-CFRXHY34-RPivBaWZ.js} +3 -3
- package/dist/assets/{bar-chart.stories-BtoqoUxl.js → bar-chart.stories-DD1doofU.js} +1 -1
- package/dist/assets/{entry-preview-DWlzoP88.js → entry-preview-DrryAtE6.js} +1 -1
- package/dist/assets/{get-draggableData-DpL-PCw1.js → get-draggableData-BDTcKxjB.js} +1 -1
- package/dist/assets/{iframe-CwbFIHzR.js → iframe-CCbgehcE.js} +2 -2
- package/dist/assets/{legend-DU0eJsZy.js → legend-Of-Day88.js} +1 -1
- package/dist/assets/{legend-context-BD2-S1C1.js → legend-context-OK1TDQFW.js} +12 -12
- package/dist/assets/line-chart-BmREaqH4.js +1 -0
- package/dist/assets/{line-chart.stories-DI9XRm8n.js → line-chart.stories-6YX4JB6B.js} +73 -69
- package/dist/assets/line-chart.test-case.stories-BgFMDS-i.js +428 -0
- package/dist/assets/{pie-chart.stories-DkA8tvR7.js → pie-chart.stories-D5_SOX3x.js} +1 -1
- package/dist/assets/{preview-tfNj4tfS.js → preview-CFlSBN9G.js} +1 -1
- package/dist/assets/{preview-Dn7dWRX3.js → preview-SqXleN6T.js} +2 -2
- package/dist/assets/{scatter-chart.stories-H8K5l3_j.js → scatter-chart.stories-_rMLva_h.js} +1 -1
- package/dist/common/common.interface.d.ts +3 -0
- package/dist/common/helpers/get-chart-annotation.d.ts +1 -0
- package/dist/common/plugins/ellipsis-annotation-plugin/ellipsis-annotation-plugin.d.ts +5 -0
- package/dist/iframe.html +1 -1
- package/dist/index.js.js +80 -32
- package/dist/index.js.js.map +1 -1
- package/dist/index.json +1 -1
- package/dist/line-chart/utils/get-axes-data-from-metasets.d.ts +1 -1
- package/dist/project.json +1 -1
- package/dist/src/components/common/common.interface.d.ts +3 -0
- package/dist/src/components/common/helpers/get-chart-annotation.d.ts +1 -0
- package/dist/src/components/common/plugins/ellipsis-annotation-plugin/ellipsis-annotation-plugin.d.ts +5 -0
- package/dist/src/components/line-chart/utils/get-axes-data-from-metasets.d.ts +1 -1
- package/dist/src/components/line-chart/utils/get-line-chart-data-labels.d.ts +3 -0
- package/package.json +1 -1
- package/dist/assets/line-chart-BzkMGnyJ.js +0 -1
- package/dist/assets/line-chart.test-case.stories-DNfY92DJ.js +0 -430
|
@@ -1,430 +0,0 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-Y5Ju2SGo.js";import{r as s}from"./index-eCxJ45ll.js";import{D as ea,B as l}from"./legend-DU0eJsZy.js";import{L as c}from"./line-chart-BzkMGnyJ.js";import{D as la}from"./legend-context-BD2-S1C1.js";import"./index-BGqSdrBK.js";import"./index-D3-0uUTW.js";import"./index-B-BONL6g.js";import"./get-draggableData-DpL-PCw1.js";const ta="chartOne-plan-view-chart-controls",na={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:[]}]}]},oa={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:[]}},sa={controlsPortalId:ta,data:na,options:oa},m=[{label:"Dataset 1",data:[{x:0,y:0},{x:5,y:25}]}],ra={data:{datasets:m},options:{title:"Chart title",chartStyling:{height:"100%"}}},ma={title:"LineChart / Test Cases",component:c,args:{chart:ra}},y=()=>a.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}}}}),b=()=>a.jsx(c,{chart:sa}),x=()=>{const[u,n]=s.useState(m),[L,d]=s.useState(0),[g,_]=s.useState(!1),[D,i]=s.useState(!0),[O,C]=s.useState(!1),[f,W]=s.useState(!0),[A,E]=s.useState("linear"),[S,p]=s.useState(!1),M=s.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:ea,color:"red",label:"Draggable Point",labelConfig:{font:`bold 8px ${la}`,color:"rgba(0,0,0,0.7)"}}]},chartStyling:{height:"100%",squareAspectRatio:f},additionalAxesOptions:{chartScaleType:A},legend:{display:!1}}),[u,f,A]),U=s.useMemo(()=>({data:{datasets:u},options:M}),[u,M]),V=()=>{p(!0),i(!0),setTimeout(()=>{i(!1),p(!1)},5e3)},F=()=>{n(m),d(e=>e+1),i(!0),p(!1)},$=()=>{C(!0);const e=[],o=50,r=40;for(let t=0;t<o;t++)setTimeout(()=>{e.push({label:`DS ${t+1}`,data:[{x:t,y:Math.random()*100},{x:t+1,y:Math.random()*100}],borderColor:`hsl(${t*(360/o)}, 100%, 50%)`}),n([...e]),t===15&&(console.warn("Forcing unmount mid-update"),i(!1)),t===25&&(console.warn("Remounting chart"),i(!0),d(h=>h+1)),t===o-1&&(console.log("Async injection complete"),C(!1))},t*r)},z=()=>{n([{label:"Broken Dataset",borderColor:"red"}])},X=()=>{n([])},Y=()=>{n([{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"}])},K=()=>{n([{label:"Bad Y Axis Ref",yAxisID:"y-missing",data:[{x:1,y:1},{x:2,y:2}],borderColor:"purple"}])},H=()=>{const e=Array.from({length:5e3},(o,r)=>({x:r,y:Math.sin(r/100)*100}));n([{label:"Big 5k Points",data:e,borderColor:"orange"}])},N=()=>{n([{label:"Corrupt Point Dataset",data:[{x:0,y:10},{x:1},{y:20},null,void 0,"bad-value",{x:5,y:50}],borderColor:"red"}])},G=()=>{n([{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"}])},q=()=>{const e=[];for(let t=0;t<4;t++){const h=Array.from({length:3e3},(ia,aa)=>({x:aa,y:Math.random()*100}));e.push({label:`Stream DS ${t+1}`,data:h,borderColor:`hsl(${t*90}, 100%, 50%)`})}let o=0;const r=setInterval(()=>{n(e.slice(0,o+1)),o++,o===e.length&&clearInterval(r)},500)},J=()=>{E(e=>e==="linear"?"logarithmic":"linear")},Q=()=>{W(e=>!e)},Z=()=>{let e=0;const o=setInterval(()=>{d(r=>r+1),e++,e===100&&clearInterval(o)},30)};return a.jsxs(a.Fragment,{children:[a.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap",marginBottom:16},children:[a.jsx(l,{label:"Reset to Initial State",colored:!0,onClick:F}),a.jsx(l,{label:"Async Dataset + Unmount",onClick:$,disabled:O}),a.jsx(l,{label:"Set Invalid Dataset",onClick:z}),a.jsx(l,{label:"Set Empty Dataset",onClick:X}),a.jsx(l,{label:"Mixed Data Formats",onClick:Y}),a.jsx(l,{label:"Bad Axis Ref",onClick:K}),a.jsx(l,{label:"Toggle size",onClick:()=>_(!g)}),a.jsx(l,{label:"Toggle Axis Type",onClick:J}),a.jsx(l,{label:"Toggle Aspect Ratio",onClick:Q}),a.jsx(l,{label:"Spam Re-renders",onClick:Z}),a.jsx(l,{label:D?"Unmount Chart":"Remount Chart",onClick:()=>i(e=>!e)}),a.jsx(l,{label:"Manual Re-render",onClick:()=>d(e=>e+1)}),a.jsx(l,{label:"Empty Dataset",onClick:()=>n([])}),a.jsx(l,{label:"Add 5k Points Slowly",onClick:H}),a.jsx(l,{label:"Dataset With Invalid Point",onClick:N}),a.jsx(l,{label:"Malformed Dataset Combo",onClick:G}),a.jsx(l,{label:"Cycle Big Load (Async)",onClick:q}),a.jsx(l,{label:"Timed Unmount During Drag",onClick:V,disabled:S})]}),S&&a.jsx("span",{style:{color:"crimson",fontWeight:"bold"},children:"⏱ Unmounting in 5s – start dragging!"}),a.jsx("div",{style:{height:g?300:null,width:g?300:null,padding:"var(--padding)",overflow:"auto"},children:D?a.jsx(c,{chart:U},L):a.jsx("div",{style:{padding:40,textAlign:"center"},children:"Chart unmounted"})})]})};y.__docgenInfo={description:"",methods:[],displayName:"PartialRangeWithSimilarValues"};b.__docgenInfo={description:"",methods:[],displayName:"closeToValueInDifferentAxes"};x.__docgenInfo={description:"",methods:[],displayName:"StressTest"};var T,v,R;y.parameters={...y.parameters,docs:{...(T=y.parameters)==null?void 0:T.docs,source:{originalSource:`() => {
|
|
2
|
-
return <LineChart chart={{
|
|
3
|
-
data: {
|
|
4
|
-
datasets: [{
|
|
5
|
-
label: 'Duration %',
|
|
6
|
-
lineTension: '0',
|
|
7
|
-
pointHitRadius: 10,
|
|
8
|
-
borderColor: '#dc3912',
|
|
9
|
-
pointBackgroundColor: '#dc3912',
|
|
10
|
-
borderWidth: 2,
|
|
11
|
-
pointRadius: 4,
|
|
12
|
-
data: [{
|
|
13
|
-
x: 3,
|
|
14
|
-
y: 0
|
|
15
|
-
}, {
|
|
16
|
-
x: 3,
|
|
17
|
-
y: 100
|
|
18
|
-
}],
|
|
19
|
-
yAxisID: 'y2'
|
|
20
|
-
}]
|
|
21
|
-
},
|
|
22
|
-
options: {
|
|
23
|
-
direction: 'vertical',
|
|
24
|
-
axes: {
|
|
25
|
-
x: [{
|
|
26
|
-
label: 'Duration (TempSim long) [d]',
|
|
27
|
-
position: 'bottom'
|
|
28
|
-
}],
|
|
29
|
-
y: [{
|
|
30
|
-
label: 'Probability'
|
|
31
|
-
}, {
|
|
32
|
-
label: 'Percentage [%]'
|
|
33
|
-
}]
|
|
34
|
-
},
|
|
35
|
-
annotations: {
|
|
36
|
-
annotationsData: [{
|
|
37
|
-
annotationAxis: 'y2',
|
|
38
|
-
color: 'darkgrey',
|
|
39
|
-
value: 16
|
|
40
|
-
}, {
|
|
41
|
-
displayDragCoordinates: false,
|
|
42
|
-
color: '#ff9900',
|
|
43
|
-
label: 'P16',
|
|
44
|
-
dragAxis: 'y',
|
|
45
|
-
enableDrag: true,
|
|
46
|
-
resizable: false,
|
|
47
|
-
type: 'box',
|
|
48
|
-
xMax: 3,
|
|
49
|
-
xMin: 3,
|
|
50
|
-
yMax: 17,
|
|
51
|
-
yMin: 15,
|
|
52
|
-
yScaleID: 'y2'
|
|
53
|
-
}, {
|
|
54
|
-
annotationAxis: 'y2',
|
|
55
|
-
color: 'darkgrey',
|
|
56
|
-
value: 66
|
|
57
|
-
}, {
|
|
58
|
-
displayDragCoordinates: false,
|
|
59
|
-
color: '#109618',
|
|
60
|
-
label: 'P66',
|
|
61
|
-
dragAxis: 'y',
|
|
62
|
-
enableDrag: true,
|
|
63
|
-
resizable: false,
|
|
64
|
-
type: 'box',
|
|
65
|
-
xMax: 3,
|
|
66
|
-
xMin: 3,
|
|
67
|
-
yMax: 67,
|
|
68
|
-
yMin: 65,
|
|
69
|
-
yScaleID: 'y2'
|
|
70
|
-
}, {
|
|
71
|
-
annotationAxis: 'y2',
|
|
72
|
-
color: 'darkgrey',
|
|
73
|
-
value: 78
|
|
74
|
-
}, {
|
|
75
|
-
displayDragCoordinates: false,
|
|
76
|
-
color: '#990099',
|
|
77
|
-
label: 'P78',
|
|
78
|
-
dragAxis: 'y',
|
|
79
|
-
enableDrag: true,
|
|
80
|
-
resizable: false,
|
|
81
|
-
type: 'box',
|
|
82
|
-
xMax: 3,
|
|
83
|
-
xMin: 3,
|
|
84
|
-
yMax: 79,
|
|
85
|
-
yMin: 77,
|
|
86
|
-
yScaleID: 'y2'
|
|
87
|
-
}, {
|
|
88
|
-
annotationAxis: 'y2',
|
|
89
|
-
color: 'darkgrey',
|
|
90
|
-
value: 90
|
|
91
|
-
}, {
|
|
92
|
-
displayDragCoordinates: false,
|
|
93
|
-
color: '#0099c6',
|
|
94
|
-
label: 'P90',
|
|
95
|
-
dragAxis: 'y',
|
|
96
|
-
enableDrag: true,
|
|
97
|
-
resizable: false,
|
|
98
|
-
type: 'box',
|
|
99
|
-
xMax: 3,
|
|
100
|
-
xMin: 3,
|
|
101
|
-
yMax: 91,
|
|
102
|
-
yMin: 89,
|
|
103
|
-
yScaleID: 'y2'
|
|
104
|
-
}],
|
|
105
|
-
enableDragAnnotation: true,
|
|
106
|
-
showAnnotations: true
|
|
107
|
-
},
|
|
108
|
-
additionalAxesOptions: {
|
|
109
|
-
range: {
|
|
110
|
-
x: {
|
|
111
|
-
min: 3
|
|
112
|
-
}
|
|
113
|
-
},
|
|
114
|
-
chartScaleType: 'linear',
|
|
115
|
-
reverse: false
|
|
116
|
-
},
|
|
117
|
-
graph: {
|
|
118
|
-
showMinorGridlines: true
|
|
119
|
-
},
|
|
120
|
-
chartStyling: {
|
|
121
|
-
height: '100%'
|
|
122
|
-
},
|
|
123
|
-
chartOptions: {
|
|
124
|
-
showPoints: false,
|
|
125
|
-
enableDragAnnotation: true
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
}} />;
|
|
129
|
-
}`,...(R=(v=y.parameters)==null?void 0:v.docs)==null?void 0:R.source}}};var k,I,B;b.parameters={...b.parameters,docs:{...(k=b.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
|
|
130
|
-
return <LineChart chart={planView} />;
|
|
131
|
-
}`,...(B=(I=b.parameters)==null?void 0:I.docs)==null?void 0:B.source}}};var j,w,P;x.parameters={...x.parameters,docs:{...(j=x.parameters)==null?void 0:j.docs,source:{originalSource:`() => {
|
|
132
|
-
const [datasets, setDatasets] = useState(basicDS);
|
|
133
|
-
const [chartKey, setChartKey] = useState(0);
|
|
134
|
-
const [isSmall, setIsSmall] = useState(false);
|
|
135
|
-
const [showChart, setShowChart] = useState(true);
|
|
136
|
-
const [loading, setLoading] = useState(false);
|
|
137
|
-
const [aspectRatio, setAspectRatio] = useState(true);
|
|
138
|
-
const [xAxisType, setXAxisType] = useState('linear');
|
|
139
|
-
const [timerRunning, setTimerRunning] = useState(false);
|
|
140
|
-
const baseOptions = useMemo(() => ({
|
|
141
|
-
title: 'Stress Tester',
|
|
142
|
-
axes: {
|
|
143
|
-
x: [{
|
|
144
|
-
label: 'X Axis'
|
|
145
|
-
}],
|
|
146
|
-
y: [{
|
|
147
|
-
label: 'Y Axis'
|
|
148
|
-
}]
|
|
149
|
-
},
|
|
150
|
-
chartOptions: {
|
|
151
|
-
enableDragAnnotation: true
|
|
152
|
-
},
|
|
153
|
-
annotations: {
|
|
154
|
-
showAnnotations: true,
|
|
155
|
-
enableDragAnnotation: true,
|
|
156
|
-
annotationsData: [{
|
|
157
|
-
enableDrag: true,
|
|
158
|
-
type: 'box',
|
|
159
|
-
xMin: 3.5,
|
|
160
|
-
xMax: 4,
|
|
161
|
-
yMin: 5,
|
|
162
|
-
yMax: 10,
|
|
163
|
-
color: 'rgba(255, 0, 0, 0.3)',
|
|
164
|
-
label: 'DRAG ME!'
|
|
165
|
-
}, {
|
|
166
|
-
type: 'point',
|
|
167
|
-
enableDrag: true,
|
|
168
|
-
xValue: 1,
|
|
169
|
-
yValue: 10,
|
|
170
|
-
radius: DEFAULT_POINT_RADIUS,
|
|
171
|
-
color: 'red',
|
|
172
|
-
label: 'Draggable Point',
|
|
173
|
-
labelConfig: {
|
|
174
|
-
font: \`bold 8px \${DEFAULT_FONT_FAMILY}\`,
|
|
175
|
-
color: 'rgba(0,0,0,0.7)'
|
|
176
|
-
}
|
|
177
|
-
}]
|
|
178
|
-
},
|
|
179
|
-
chartStyling: {
|
|
180
|
-
height: '100%',
|
|
181
|
-
squareAspectRatio: aspectRatio
|
|
182
|
-
},
|
|
183
|
-
additionalAxesOptions: {
|
|
184
|
-
chartScaleType: xAxisType
|
|
185
|
-
},
|
|
186
|
-
legend: {
|
|
187
|
-
display: false
|
|
188
|
-
}
|
|
189
|
-
}), [datasets, aspectRatio, xAxisType]);
|
|
190
|
-
const chartConfig = useMemo(() => ({
|
|
191
|
-
data: {
|
|
192
|
-
datasets
|
|
193
|
-
},
|
|
194
|
-
options: baseOptions
|
|
195
|
-
}), [datasets, baseOptions]);
|
|
196
|
-
const startTimedUnmount = () => {
|
|
197
|
-
setTimerRunning(true);
|
|
198
|
-
setShowChart(true);
|
|
199
|
-
setTimeout(() => {
|
|
200
|
-
setShowChart(false);
|
|
201
|
-
setTimerRunning(false);
|
|
202
|
-
}, 5000);
|
|
203
|
-
};
|
|
204
|
-
const resetChart = () => {
|
|
205
|
-
setDatasets(basicDS);
|
|
206
|
-
setChartKey(k => k + 1);
|
|
207
|
-
setShowChart(true);
|
|
208
|
-
setTimerRunning(false);
|
|
209
|
-
};
|
|
210
|
-
const injectDatasetsAsync = () => {
|
|
211
|
-
setLoading(true);
|
|
212
|
-
const buffer = [];
|
|
213
|
-
const total = 50;
|
|
214
|
-
const delay = 40;
|
|
215
|
-
for (let i = 0; i < total; i++) {
|
|
216
|
-
setTimeout(() => {
|
|
217
|
-
buffer.push({
|
|
218
|
-
label: \`DS \${i + 1}\`,
|
|
219
|
-
data: [{
|
|
220
|
-
x: i,
|
|
221
|
-
y: Math.random() * 100
|
|
222
|
-
}, {
|
|
223
|
-
x: i + 1,
|
|
224
|
-
y: Math.random() * 100
|
|
225
|
-
}],
|
|
226
|
-
borderColor: \`hsl(\${i * (360 / total)}, 100%, 50%)\`
|
|
227
|
-
});
|
|
228
|
-
setDatasets([...buffer]);
|
|
229
|
-
if (i === 15) {
|
|
230
|
-
console.warn('Forcing unmount mid-update');
|
|
231
|
-
setShowChart(false);
|
|
232
|
-
}
|
|
233
|
-
if (i === 25) {
|
|
234
|
-
console.warn('Remounting chart');
|
|
235
|
-
setShowChart(true);
|
|
236
|
-
setChartKey(prev => prev + 1);
|
|
237
|
-
}
|
|
238
|
-
if (i === total - 1) {
|
|
239
|
-
console.log('Async injection complete');
|
|
240
|
-
setLoading(false);
|
|
241
|
-
}
|
|
242
|
-
}, i * delay);
|
|
243
|
-
}
|
|
244
|
-
};
|
|
245
|
-
const setInvalidDataset = () => {
|
|
246
|
-
setDatasets([{
|
|
247
|
-
label: 'Broken Dataset',
|
|
248
|
-
borderColor: 'red'
|
|
249
|
-
}]);
|
|
250
|
-
};
|
|
251
|
-
const setEmptyDataset = () => {
|
|
252
|
-
setDatasets([]);
|
|
253
|
-
};
|
|
254
|
-
const setMixedDataTypes = () => {
|
|
255
|
-
setDatasets([{
|
|
256
|
-
label: 'X/Y Points',
|
|
257
|
-
data: [{
|
|
258
|
-
x: 0,
|
|
259
|
-
y: 0
|
|
260
|
-
}, {
|
|
261
|
-
x: 1,
|
|
262
|
-
y: 1
|
|
263
|
-
}],
|
|
264
|
-
borderColor: 'green'
|
|
265
|
-
}, {
|
|
266
|
-
label: 'Y Only Array',
|
|
267
|
-
data: [2, 4, 6],
|
|
268
|
-
borderColor: 'blue'
|
|
269
|
-
}]);
|
|
270
|
-
};
|
|
271
|
-
const setMissingAxisRef = () => {
|
|
272
|
-
setDatasets([{
|
|
273
|
-
label: 'Bad Y Axis Ref',
|
|
274
|
-
yAxisID: 'y-missing',
|
|
275
|
-
data: [{
|
|
276
|
-
x: 1,
|
|
277
|
-
y: 1
|
|
278
|
-
}, {
|
|
279
|
-
x: 2,
|
|
280
|
-
y: 2
|
|
281
|
-
}],
|
|
282
|
-
borderColor: 'purple'
|
|
283
|
-
}]);
|
|
284
|
-
};
|
|
285
|
-
const addBigDataset = () => {
|
|
286
|
-
const data = Array.from({
|
|
287
|
-
length: 5000
|
|
288
|
-
}, (_, i) => ({
|
|
289
|
-
x: i,
|
|
290
|
-
y: Math.sin(i / 100) * 100
|
|
291
|
-
}));
|
|
292
|
-
setDatasets([{
|
|
293
|
-
label: 'Big 5k Points',
|
|
294
|
-
data,
|
|
295
|
-
borderColor: 'orange'
|
|
296
|
-
}]);
|
|
297
|
-
};
|
|
298
|
-
const addDatasetWithInvalidPoint = () => {
|
|
299
|
-
setDatasets([{
|
|
300
|
-
label: 'Corrupt Point Dataset',
|
|
301
|
-
data: [{
|
|
302
|
-
x: 0,
|
|
303
|
-
y: 10
|
|
304
|
-
}, {
|
|
305
|
-
x: 1
|
|
306
|
-
},
|
|
307
|
-
// missing y
|
|
308
|
-
{
|
|
309
|
-
y: 20
|
|
310
|
-
},
|
|
311
|
-
// missing x
|
|
312
|
-
null, undefined, 'bad-value', {
|
|
313
|
-
x: 5,
|
|
314
|
-
y: 50
|
|
315
|
-
}],
|
|
316
|
-
borderColor: 'red'
|
|
317
|
-
}]);
|
|
318
|
-
};
|
|
319
|
-
const addMalformedDatasetCombo = () => {
|
|
320
|
-
setDatasets([{
|
|
321
|
-
label: 'Valid A',
|
|
322
|
-
data: [{
|
|
323
|
-
x: 0,
|
|
324
|
-
y: 1
|
|
325
|
-
}, {
|
|
326
|
-
x: 1,
|
|
327
|
-
y: 2
|
|
328
|
-
}],
|
|
329
|
-
borderColor: 'blue'
|
|
330
|
-
}, {
|
|
331
|
-
label: 'Corrupt',
|
|
332
|
-
data: 'not-an-array',
|
|
333
|
-
borderColor: 'red'
|
|
334
|
-
}, {
|
|
335
|
-
label: 'Valid B',
|
|
336
|
-
data: [{
|
|
337
|
-
x: 0,
|
|
338
|
-
y: 3
|
|
339
|
-
}, {
|
|
340
|
-
x: 1,
|
|
341
|
-
y: 4
|
|
342
|
-
}],
|
|
343
|
-
borderColor: 'green'
|
|
344
|
-
}]);
|
|
345
|
-
};
|
|
346
|
-
const streamLargeData = () => {
|
|
347
|
-
const allDS = [];
|
|
348
|
-
for (let j = 0; j < 4; j++) {
|
|
349
|
-
const data = Array.from({
|
|
350
|
-
length: 3000
|
|
351
|
-
}, (_, i) => ({
|
|
352
|
-
x: i,
|
|
353
|
-
y: Math.random() * 100
|
|
354
|
-
}));
|
|
355
|
-
allDS.push({
|
|
356
|
-
label: \`Stream DS \${j + 1}\`,
|
|
357
|
-
data,
|
|
358
|
-
borderColor: \`hsl(\${j * 90}, 100%, 50%)\`
|
|
359
|
-
});
|
|
360
|
-
}
|
|
361
|
-
let step = 0;
|
|
362
|
-
const interval = setInterval(() => {
|
|
363
|
-
setDatasets(allDS.slice(0, step + 1));
|
|
364
|
-
step++;
|
|
365
|
-
if (step === allDS.length) clearInterval(interval);
|
|
366
|
-
}, 500);
|
|
367
|
-
};
|
|
368
|
-
const cycleXAxisType = () => {
|
|
369
|
-
setXAxisType(prev => prev === 'linear' ? 'logarithmic' : 'linear');
|
|
370
|
-
};
|
|
371
|
-
const toggleAspectRatio = () => {
|
|
372
|
-
setAspectRatio(prev => !prev);
|
|
373
|
-
};
|
|
374
|
-
const spamReRenders = () => {
|
|
375
|
-
let count = 0;
|
|
376
|
-
const interval = setInterval(() => {
|
|
377
|
-
setChartKey(prev => prev + 1);
|
|
378
|
-
count++;
|
|
379
|
-
if (count === 100) clearInterval(interval);
|
|
380
|
-
}, 30);
|
|
381
|
-
};
|
|
382
|
-
return <>
|
|
383
|
-
<div style={{
|
|
384
|
-
display: 'flex',
|
|
385
|
-
gap: 8,
|
|
386
|
-
flexWrap: 'wrap',
|
|
387
|
-
marginBottom: 16
|
|
388
|
-
}}>
|
|
389
|
-
<Button label="Reset to Initial State" colored onClick={resetChart} />
|
|
390
|
-
<Button label="Async Dataset + Unmount" onClick={injectDatasetsAsync} disabled={loading} />
|
|
391
|
-
<Button label="Set Invalid Dataset" onClick={setInvalidDataset} />
|
|
392
|
-
<Button label="Set Empty Dataset" onClick={setEmptyDataset} />
|
|
393
|
-
<Button label="Mixed Data Formats" onClick={setMixedDataTypes} />
|
|
394
|
-
<Button label="Bad Axis Ref" onClick={setMissingAxisRef} />
|
|
395
|
-
<Button label="Toggle size" onClick={() => setIsSmall(!isSmall)} />
|
|
396
|
-
<Button label="Toggle Axis Type" onClick={cycleXAxisType} />
|
|
397
|
-
<Button label="Toggle Aspect Ratio" onClick={toggleAspectRatio} />
|
|
398
|
-
<Button label="Spam Re-renders" onClick={spamReRenders} />
|
|
399
|
-
<Button label={showChart ? 'Unmount Chart' : 'Remount Chart'} onClick={() => setShowChart(s => !s)} />
|
|
400
|
-
<Button label="Manual Re-render" onClick={() => setChartKey(k => k + 1)} />
|
|
401
|
-
<Button label="Empty Dataset" onClick={() => setDatasets([])} />
|
|
402
|
-
<Button label="Add 5k Points Slowly" onClick={addBigDataset} />
|
|
403
|
-
<Button label="Dataset With Invalid Point" onClick={addDatasetWithInvalidPoint} />
|
|
404
|
-
<Button label="Malformed Dataset Combo" onClick={addMalformedDatasetCombo} />
|
|
405
|
-
<Button label="Cycle Big Load (Async)" onClick={streamLargeData} />
|
|
406
|
-
<Button label="Timed Unmount During Drag" onClick={startTimedUnmount} disabled={timerRunning} />
|
|
407
|
-
</div>
|
|
408
|
-
|
|
409
|
-
{timerRunning && <span style={{
|
|
410
|
-
color: 'crimson',
|
|
411
|
-
fontWeight: 'bold'
|
|
412
|
-
}}>
|
|
413
|
-
⏱ Unmounting in 5s – start dragging!
|
|
414
|
-
</span>}
|
|
415
|
-
|
|
416
|
-
<div style={{
|
|
417
|
-
height: isSmall ? 300 : null,
|
|
418
|
-
width: isSmall ? 300 : null,
|
|
419
|
-
padding: 'var(--padding)',
|
|
420
|
-
overflow: 'auto'
|
|
421
|
-
}}>
|
|
422
|
-
{showChart ? <LineChart key={chartKey} chart={chartConfig} /> : <div style={{
|
|
423
|
-
padding: 40,
|
|
424
|
-
textAlign: 'center'
|
|
425
|
-
}}>
|
|
426
|
-
Chart unmounted
|
|
427
|
-
</div>}
|
|
428
|
-
</div>
|
|
429
|
-
</>;
|
|
430
|
-
}`,...(P=(w=x.parameters)==null?void 0:w.docs)==null?void 0:P.source}}};const Da=["PartialRangeWithSimilarValues","closeToValueInDifferentAxes","StressTest"];export{y as PartialRangeWithSimilarValues,x as StressTest,Da as __namedExportsOrder,b as closeToValueInDifferentAxes,ma as default};
|