function slider(analizeData, name) { // console.log(analizeData); // selectRange.bind(selectRange); let plot = null; let emptyQuant = null; let changeHTML = htl.html`

`; let selectRange = interval([analizeData.minValue, analizeData.maxValue], { step: 1, value: [analizeData, analizeData.medianValue], label: analizeData.quantColumn }); if (!analizeData.quantColumn) { emptyQuant = htl.html`

Please Select a number field as quantative data!!!

`; changeHTML = emptyQuant; } else { console.log("rerender!"); const AnaData = [ analizeData.averageValue, analizeData.medianValue, analizeData.minValue, analizeData.maxValue ]; console.log(AnaData); let numRanges = 10; let rangeSize = Math.ceil((AnaData[3] - AnaData[2] + 1) / numRanges); // You can adjust this as needed // Initialize the ranges and their frequencies let ranges = Array.from({ length: numRanges }, (_, index) => ({ range: [AnaData[2] + index * rangeSize, AnaData[2] + (index + 1) * rangeSize - 1], frequency: 0 })); analizeData.quantData.forEach(num => { for (let range of ranges) { if (num >= range.range[0] && num <= range.range[1]) { range.frequency++; break; } } }); let frequencies = ranges.map(range => range.frequency); let rangeArray = ranges.map(range => range.range[0]); console.log("frequencies",frequencies); console.log("rangeArray",rangeArray); const frePlot = Plot.plot({ marks: [ () => htl.svg` `, Plot.barY(alphabet, {x: rangeArray, y: frequencies, fill: "url(#gradient)"}), Plot.ruleY([0]) ] }) plot = Plot.plot({ x: { padding: 0.4 }, marginTop: 20, marginRight: 20, marginBottom: 30, marginLeft: 50, grid: true, marks: [ Plot.barY(alphabet, { x: ["average", "median", "minimum", "maximum"], y: AnaData, dx: 2, dy: 2 }), Plot.barY(alphabet, { x: ["average", "median", "minimum", "maximum"], y: AnaData, fill: "green", dx: -2, dy: -2 }) ] }); changeHTML = htl.html`

Max,Min,Average and Medain value

${plot}

Frequecy within each range

${frePlot}

Select the range you want to filter

${selectRange}

`; // console.log(plot); } const filter = (analizeData) => { // if(analizeData.quantData){ // return null; // } // console.log("analizeData", analizeData); // console.log("called filter"); const filterData = analizeData.data.filter((item, index) => { const colmun = analizeData.quantColumn; if ( analizeData.quantData[index] >= selectRange.value[0] && analizeData.quantData[index] <= selectRange.value[1] ) { return item; } }); // console.log("after filter"); return filterData; }; // console.log("quant", analizeData.quantColumn); // console.log("analize", analizeData); // console.log("T_F", analizeData.quantColumn === null); let val = analizeData.data; if (analizeData.quantColumn != null) { val = filter(analizeData); } // console.log("val!!", val); // :filter(analizeData) // filter(analizeData); // console.log("selectData",selectData); // let table = aq // viewof shows the table view, but assigns the table value // .from(val) // .view({ height: 240 }) // console.log("aq",selectData); // console.log("range",selectRange.value); const component = htl.html`

${name}

Basic Data Information

${changeHTML}

`; component.value = val; //

Here is the table after the filter

Total rows:${selectData.length}

${aq.value}

selectRange.addEventListener("input", () => { // console.log("change",e); // console.log("value", selectRange.value); let val = analizeData.data; if (analizeData.quantColumn != null) { val = filter(analizeData); } component.value = val; component.dispatchEvent(new Event("input", { bubbles: true })); }); return component; }