@oliasoft-open-source/charts-library 5.0.6 → 5.0.8-beta-1

package/dist/assets/line-chart.test-case.stories-CdIDC-oO.js

@@ -1,428 +0,0 @@
-import{j as t}from"./jsx-runtime-Y5Ju2SGo.js";import{r as l}from"./index-eCxJ45ll.js";import{D as J,B as e}from"./legend-CD8XU7nW.js";import{L as m}from"./line-chart-B-yjnfON.js";import{D as Q}from"./legend-context-vqtlaWwg.js";import"./index-BGqSdrBK.js";import"./index-D3-0uUTW.js";import"./index-B-BONL6g.js";import"./get-draggableData-1N6iP-hc.js";const p=[{label:"Dataset 1",data:[{x:0,y:0},{x:5,y:25}]}],Z={data:{datasets:p},options:{title:"Chart title",chartStyling:{height:"100%"}}},ct={title:"LineChart / Test Cases",component:m,args:{chart:Z}},d=()=>t.jsx(m,{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}}}}),c=()=>{const[u,o]=l.useState(p),[B,y]=l.useState(0),[x,j]=l.useState(!1),[h,i]=l.useState(!0),[P,D]=l.useState(!1),[C,w]=l.useState(!0),[f,L]=l.useState("linear"),[A,b]=l.useState(!1),S=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:J,color:"red",label:"Draggable Point",labelConfig:{font:`bold 8px ${Q}`,color:"rgba(0,0,0,0.7)"}}]},chartStyling:{height:"100%",squareAspectRatio:C},additionalAxesOptions:{chartScaleType:f},legend:{display:!1}}),[u,C,f]),_=l.useMemo(()=>({data:{datasets:u},options:S}),[u,S]),O=()=>{b(!0),i(!0),setTimeout(()=>{i(!1),b(!1)},5e3)},U=()=>{o(p),y(a=>a+1),i(!0),b(!1)},E=()=>{D(!0);const a=[],s=50,r=40;for(let n=0;n<s;n++)setTimeout(()=>{a.push({label:`DS ${n+1}`,data:[{x:n,y:Math.random()*100},{x:n+1,y:Math.random()*100}],borderColor:`hsl(${n*(360/s)}, 100%, 50%)`}),o([...a]),n===15&&(console.warn("Forcing unmount mid-update"),i(!1)),n===25&&(console.warn("Remounting chart"),i(!0),y(g=>g+1)),n===s-1&&(console.log("Async injection complete"),D(!1))},n*r)},W=()=>{o([{label:"Broken Dataset",borderColor:"red"}])},F=()=>{o([])},V=()=>{o([{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"}])},$=()=>{o([{label:"Bad Y Axis Ref",yAxisID:"y-missing",data:[{x:1,y:1},{x:2,y:2}],borderColor:"purple"}])},z=()=>{const a=Array.from({length:5e3},(s,r)=>({x:r,y:Math.sin(r/100)*100}));o([{label:"Big 5k Points",data:a,borderColor:"orange"}])},X=()=>{o([{label:"Corrupt Point Dataset",data:[{x:0,y:10},{x:1},{y:20},null,void 0,"bad-value",{x:5,y:50}],borderColor:"red"}])},Y=()=>{o([{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"}])},K=()=>{const a=[];for(let n=0;n<4;n++){const g=Array.from({length:3e3},(tt,H)=>({x:H,y:Math.random()*100}));a.push({label:`Stream DS ${n+1}`,data:g,borderColor:`hsl(${n*90}, 100%, 50%)`})}let s=0;const r=setInterval(()=>{o(a.slice(0,s+1)),s++,s===a.length&&clearInterval(r)},500)},N=()=>{L(a=>a==="linear"?"logarithmic":"linear")},G=()=>{w(a=>!a)},q=()=>{let a=0;const s=setInterval(()=>{y(r=>r+1),a++,a===100&&clearInterval(s)},30)};return t.jsxs(t.Fragment,{children:[t.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap",marginBottom:16},children:[t.jsx(e,{label:"Reset to Initial State",colored:!0,onClick:U}),t.jsx(e,{label:"Async Dataset + Unmount",onClick:E,disabled:P}),t.jsx(e,{label:"Set Invalid Dataset",onClick:W}),t.jsx(e,{label:"Set Empty Dataset",onClick:F}),t.jsx(e,{label:"Mixed Data Formats",onClick:V}),t.jsx(e,{label:"Bad Axis Ref",onClick:$}),t.jsx(e,{label:"Toggle size",onClick:()=>j(!x)}),t.jsx(e,{label:"Toggle Axis Type",onClick:N}),t.jsx(e,{label:"Toggle Aspect Ratio",onClick:G}),t.jsx(e,{label:"Spam Re-renders",onClick:q}),t.jsx(e,{label:h?"Unmount Chart":"Remount Chart",onClick:()=>i(a=>!a)}),t.jsx(e,{label:"Manual Re-render",onClick:()=>y(a=>a+1)}),t.jsx(e,{label:"Empty Dataset",onClick:()=>o([])}),t.jsx(e,{label:"Add 5k Points Slowly",onClick:z}),t.jsx(e,{label:"Dataset With Invalid Point",onClick:X}),t.jsx(e,{label:"Malformed Dataset Combo",onClick:Y}),t.jsx(e,{label:"Cycle Big Load (Async)",onClick:K}),t.jsx(e,{label:"Timed Unmount During Drag",onClick:O,disabled:A})]}),A&&t.jsx("span",{style:{color:"crimson",fontWeight:"bold"},children:"⏱ Unmounting in 5s – start dragging!"}),t.jsx("div",{style:{height:x?300:null,width:x?300:null,padding:"var(--padding)",overflow:"auto"},children:h?t.jsx(m,{chart:_},B):t.jsx("div",{style:{padding:40,textAlign:"center"},children:"Chart unmounted"})})]})};d.__docgenInfo={description:"",methods:[],displayName:"PartialRangeWithSimilarValues"};c.__docgenInfo={description:"",methods:[],displayName:"StressTest"};var M,v,R;d.parameters={...d.parameters,docs:{...(M=d.parameters)==null?void 0:M.docs,source:{originalSource:`() => {
-  return <LineChart 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: false,
-          color: '#ff9900',
-          label: 'P16',
-          dragAxis: 'y',
-          enableDrag: true,
-          resizable: false,
-          type: 'box',
-          xMax: 3,
-          xMin: 3,
-          yMax: 17,
-          yMin: 15,
-          yScaleID: 'y2'
-        }, {
-          annotationAxis: 'y2',
-          color: 'darkgrey',
-          value: 66
-        }, {
-          displayDragCoordinates: false,
-          color: '#109618',
-          label: 'P66',
-          dragAxis: 'y',
-          enableDrag: true,
-          resizable: false,
-          type: 'box',
-          xMax: 3,
-          xMin: 3,
-          yMax: 67,
-          yMin: 65,
-          yScaleID: 'y2'
-        }, {
-          annotationAxis: 'y2',
-          color: 'darkgrey',
-          value: 78
-        }, {
-          displayDragCoordinates: false,
-          color: '#990099',
-          label: 'P78',
-          dragAxis: 'y',
-          enableDrag: true,
-          resizable: false,
-          type: 'box',
-          xMax: 3,
-          xMin: 3,
-          yMax: 79,
-          yMin: 77,
-          yScaleID: 'y2'
-        }, {
-          annotationAxis: 'y2',
-          color: 'darkgrey',
-          value: 90
-        }, {
-          displayDragCoordinates: false,
-          color: '#0099c6',
-          label: 'P90',
-          dragAxis: 'y',
-          enableDrag: true,
-          resizable: false,
-          type: 'box',
-          xMax: 3,
-          xMin: 3,
-          yMax: 91,
-          yMin: 89,
-          yScaleID: 'y2'
-        }],
-        enableDragAnnotation: true,
-        showAnnotations: true
-      },
-      additionalAxesOptions: {
-        range: {
-          x: {
-            min: 3
-          }
-        },
-        chartScaleType: 'linear',
-        reverse: false
-      },
-      graph: {
-        showMinorGridlines: true
-      },
-      chartStyling: {
-        height: '100%'
-      },
-      chartOptions: {
-        showPoints: false,
-        enableDragAnnotation: true
-      }
-    }
-  }} />;
-}`,...(R=(v=d.parameters)==null?void 0:v.docs)==null?void 0:R.source}}};var k,T,I;c.parameters={...c.parameters,docs:{...(k=c.parameters)==null?void 0:k.docs,source:{originalSource:`() => {
-  const [datasets, setDatasets] = useState(basicDS);
-  const [chartKey, setChartKey] = useState(0);
-  const [isSmall, setIsSmall] = useState(false);
-  const [showChart, setShowChart] = useState(true);
-  const [loading, setLoading] = useState(false);
-  const [aspectRatio, setAspectRatio] = useState(true);
-  const [xAxisType, setXAxisType] = useState('linear');
-  const [timerRunning, setTimerRunning] = useState(false);
-  const baseOptions = useMemo(() => ({
-    title: 'Stress Tester',
-    axes: {
-      x: [{
-        label: 'X Axis'
-      }],
-      y: [{
-        label: 'Y Axis'
-      }]
-    },
-    chartOptions: {
-      enableDragAnnotation: true
-    },
-    annotations: {
-      showAnnotations: true,
-      enableDragAnnotation: true,
-      annotationsData: [{
-        enableDrag: true,
-        type: 'box',
-        xMin: 3.5,
-        xMax: 4,
-        yMin: 5,
-        yMax: 10,
-        color: 'rgba(255, 0, 0, 0.3)',
-        label: 'DRAG ME!'
-      }, {
-        type: 'point',
-        enableDrag: true,
-        xValue: 1,
-        yValue: 10,
-        radius: DEFAULT_POINT_RADIUS,
-        color: 'red',
-        label: 'Draggable Point',
-        labelConfig: {
-          font: \`bold 8px \${DEFAULT_FONT_FAMILY}\`,
-          color: 'rgba(0,0,0,0.7)'
-        }
-      }]
-    },
-    chartStyling: {
-      height: '100%',
-      squareAspectRatio: aspectRatio
-    },
-    additionalAxesOptions: {
-      chartScaleType: xAxisType
-    },
-    legend: {
-      display: false
-    }
-  }), [datasets, aspectRatio, xAxisType]);
-  const chartConfig = useMemo(() => ({
-    data: {
-      datasets
-    },
-    options: baseOptions
-  }), [datasets, baseOptions]);
-  const startTimedUnmount = () => {
-    setTimerRunning(true);
-    setShowChart(true);
-    setTimeout(() => {
-      setShowChart(false);
-      setTimerRunning(false);
-    }, 5000);
-  };
-  const resetChart = () => {
-    setDatasets(basicDS);
-    setChartKey(k => k + 1);
-    setShowChart(true);
-    setTimerRunning(false);
-  };
-  const injectDatasetsAsync = () => {
-    setLoading(true);
-    const buffer = [];
-    const total = 50;
-    const delay = 40;
-    for (let i = 0; i < total; i++) {
-      setTimeout(() => {
-        buffer.push({
-          label: \`DS \${i + 1}\`,
-          data: [{
-            x: i,
-            y: Math.random() * 100
-          }, {
-            x: i + 1,
-            y: Math.random() * 100
-          }],
-          borderColor: \`hsl(\${i * (360 / total)}, 100%, 50%)\`
-        });
-        setDatasets([...buffer]);
-        if (i === 15) {
-          console.warn('Forcing unmount mid-update');
-          setShowChart(false);
-        }
-        if (i === 25) {
-          console.warn('Remounting chart');
-          setShowChart(true);
-          setChartKey(prev => prev + 1);
-        }
-        if (i === total - 1) {
-          console.log('Async injection complete');
-          setLoading(false);
-        }
-      }, i * delay);
-    }
-  };
-  const setInvalidDataset = () => {
-    setDatasets([{
-      label: 'Broken Dataset',
-      borderColor: 'red'
-    }]);
-  };
-  const setEmptyDataset = () => {
-    setDatasets([]);
-  };
-  const setMixedDataTypes = () => {
-    setDatasets([{
-      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'
-    }]);
-  };
-  const setMissingAxisRef = () => {
-    setDatasets([{
-      label: 'Bad Y Axis Ref',
-      yAxisID: 'y-missing',
-      data: [{
-        x: 1,
-        y: 1
-      }, {
-        x: 2,
-        y: 2
-      }],
-      borderColor: 'purple'
-    }]);
-  };
-  const addBigDataset = () => {
-    const data = Array.from({
-      length: 5000
-    }, (_, i) => ({
-      x: i,
-      y: Math.sin(i / 100) * 100
-    }));
-    setDatasets([{
-      label: 'Big 5k Points',
-      data,
-      borderColor: 'orange'
-    }]);
-  };
-  const addDatasetWithInvalidPoint = () => {
-    setDatasets([{
-      label: 'Corrupt Point Dataset',
-      data: [{
-        x: 0,
-        y: 10
-      }, {
-        x: 1
-      },
-      // missing y
-      {
-        y: 20
-      },
-      // missing x
-      null, undefined, 'bad-value', {
-        x: 5,
-        y: 50
-      }],
-      borderColor: 'red'
-    }]);
-  };
-  const addMalformedDatasetCombo = () => {
-    setDatasets([{
-      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'
-    }]);
-  };
-  const streamLargeData = () => {
-    const allDS = [];
-    for (let j = 0; j < 4; j++) {
-      const data = Array.from({
-        length: 3000
-      }, (_, i) => ({
-        x: i,
-        y: Math.random() * 100
-      }));
-      allDS.push({
-        label: \`Stream DS \${j + 1}\`,
-        data,
-        borderColor: \`hsl(\${j * 90}, 100%, 50%)\`
-      });
-    }
-    let step = 0;
-    const interval = setInterval(() => {
-      setDatasets(allDS.slice(0, step + 1));
-      step++;
-      if (step === allDS.length) clearInterval(interval);
-    }, 500);
-  };
-  const cycleXAxisType = () => {
-    setXAxisType(prev => prev === 'linear' ? 'logarithmic' : 'linear');
-  };
-  const toggleAspectRatio = () => {
-    setAspectRatio(prev => !prev);
-  };
-  const spamReRenders = () => {
-    let count = 0;
-    const interval = setInterval(() => {
-      setChartKey(prev => prev + 1);
-      count++;
-      if (count === 100) clearInterval(interval);
-    }, 30);
-  };
-  return <>
-      <div style={{
-      display: 'flex',
-      gap: 8,
-      flexWrap: 'wrap',
-      marginBottom: 16
-    }}>
-        <Button label="Reset to Initial State" colored onClick={resetChart} />
-        <Button label="Async Dataset + Unmount" onClick={injectDatasetsAsync} disabled={loading} />
-        <Button label="Set Invalid Dataset" onClick={setInvalidDataset} />
-        <Button label="Set Empty Dataset" onClick={setEmptyDataset} />
-        <Button label="Mixed Data Formats" onClick={setMixedDataTypes} />
-        <Button label="Bad Axis Ref" onClick={setMissingAxisRef} />
-        <Button label="Toggle size" onClick={() => setIsSmall(!isSmall)} />
-        <Button label="Toggle Axis Type" onClick={cycleXAxisType} />
-        <Button label="Toggle Aspect Ratio" onClick={toggleAspectRatio} />
-        <Button label="Spam Re-renders" onClick={spamReRenders} />
-        <Button label={showChart ? 'Unmount Chart' : 'Remount Chart'} onClick={() => setShowChart(s => !s)} />
-        <Button label="Manual Re-render" onClick={() => setChartKey(k => k + 1)} />
-        <Button label="Empty Dataset" onClick={() => setDatasets([])} />
-        <Button label="Add 5k Points Slowly" onClick={addBigDataset} />
-        <Button label="Dataset With Invalid Point" onClick={addDatasetWithInvalidPoint} />
-        <Button label="Malformed Dataset Combo" onClick={addMalformedDatasetCombo} />
-        <Button label="Cycle Big Load (Async)" onClick={streamLargeData} />
-        <Button label="Timed Unmount During Drag" onClick={startTimedUnmount} disabled={timerRunning} />
-      </div>
-
-      {timerRunning && <span style={{
-      color: 'crimson',
-      fontWeight: 'bold'
-    }}>
-          ⏱ Unmounting in 5s – start dragging!
-        </span>}
-
-      <div style={{
-      height: isSmall ? 300 : null,
-      width: isSmall ? 300 : null,
-      padding: 'var(--padding)',
-      overflow: 'auto'
-    }}>
-        {showChart ? <LineChart key={chartKey} chart={chartConfig} /> : <div style={{
-        padding: 40,
-        textAlign: 'center'
-      }}>
-            Chart unmounted
-          </div>}
-      </div>
-    </>;
-}`,...(I=(T=c.parameters)==null?void 0:T.docs)==null?void 0:I.source}}};const yt=["PartialRangeWithSimilarValues","StressTest"];export{d as PartialRangeWithSimilarValues,c as StressTest,yt as __namedExportsOrder,ct as default};