@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.
Files changed (32) hide show
  1. package/dist/assets/{Color-YHDXOIA2-B_-Et0_1.js → Color-YHDXOIA2-D9Cia5uO.js} +1 -1
  2. package/dist/assets/{DocsRenderer-CFRXHY34-CBX5RMGQ.js → DocsRenderer-CFRXHY34-RPivBaWZ.js} +3 -3
  3. package/dist/assets/{bar-chart.stories-BtoqoUxl.js → bar-chart.stories-DD1doofU.js} +1 -1
  4. package/dist/assets/{entry-preview-DWlzoP88.js → entry-preview-DrryAtE6.js} +1 -1
  5. package/dist/assets/{get-draggableData-DpL-PCw1.js → get-draggableData-BDTcKxjB.js} +1 -1
  6. package/dist/assets/{iframe-CwbFIHzR.js → iframe-CCbgehcE.js} +2 -2
  7. package/dist/assets/{legend-DU0eJsZy.js → legend-Of-Day88.js} +1 -1
  8. package/dist/assets/{legend-context-BD2-S1C1.js → legend-context-OK1TDQFW.js} +12 -12
  9. package/dist/assets/line-chart-BmREaqH4.js +1 -0
  10. package/dist/assets/{line-chart.stories-DI9XRm8n.js → line-chart.stories-6YX4JB6B.js} +73 -69
  11. package/dist/assets/line-chart.test-case.stories-BgFMDS-i.js +428 -0
  12. package/dist/assets/{pie-chart.stories-DkA8tvR7.js → pie-chart.stories-D5_SOX3x.js} +1 -1
  13. package/dist/assets/{preview-tfNj4tfS.js → preview-CFlSBN9G.js} +1 -1
  14. package/dist/assets/{preview-Dn7dWRX3.js → preview-SqXleN6T.js} +2 -2
  15. package/dist/assets/{scatter-chart.stories-H8K5l3_j.js → scatter-chart.stories-_rMLva_h.js} +1 -1
  16. package/dist/common/common.interface.d.ts +3 -0
  17. package/dist/common/helpers/get-chart-annotation.d.ts +1 -0
  18. package/dist/common/plugins/ellipsis-annotation-plugin/ellipsis-annotation-plugin.d.ts +5 -0
  19. package/dist/iframe.html +1 -1
  20. package/dist/index.js.js +80 -32
  21. package/dist/index.js.js.map +1 -1
  22. package/dist/index.json +1 -1
  23. package/dist/line-chart/utils/get-axes-data-from-metasets.d.ts +1 -1
  24. package/dist/project.json +1 -1
  25. package/dist/src/components/common/common.interface.d.ts +3 -0
  26. package/dist/src/components/common/helpers/get-chart-annotation.d.ts +1 -0
  27. package/dist/src/components/common/plugins/ellipsis-annotation-plugin/ellipsis-annotation-plugin.d.ts +5 -0
  28. package/dist/src/components/line-chart/utils/get-axes-data-from-metasets.d.ts +1 -1
  29. package/dist/src/components/line-chart/utils/get-line-chart-data-labels.d.ts +3 -0
  30. package/package.json +1 -1
  31. package/dist/assets/line-chart-BzkMGnyJ.js +0 -1
  32. 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};