31:T4ae,options = ({ chart: { height: 450, width: 500, toolbar: { show: true, offsetX: 0, offsetY: 0, tools: { download: true, selection: true, zoom: false, zoomin: true, zoomout: true, pan: true, reset: true | '

', customIcons: [] }, autoSelected: 'zoom' }, }, dataLabels: { enabled: false }, legend: { show: true }, markers: { size: 5, style: 'full', }, stroke: { curve: 'stepline' }, series: series, xaxis: { min: 6, max: 11.3, type: 'integer', tickAmount: 4 }, yaxis: { min: 0, max: 1, tickAmount: 10 }, tooltip: { enabled: true, custom: function({_, seriesIndex, dataPointIndex, w}) { return `

${series[seriesIndex].data[dataPointIndex].title}

Wavelength: ${series[seriesIndex].data[dataPointIndex].comment_1} μm

Absorptivity: ${series[seriesIndex].data[dataPointIndex].comment_2}

` } } })32:T46d,highlightSlider = (settings, objs) => { settings.lowerAdj = 100 * (settings.lower - objs.settings.min) / (objs.settings.max - objs.settings.min); settings.upperAdj = 100 * (settings.upper - objs.settings.min) / (objs.settings.max - objs.settings.min); if (settings.preventUpdate) objs.settings.preventUpdate = true; if (+objs.slider.value == settings.lower || +objs.slider.value == settings.upper) { objs.div.update(objs.slider.value); }; if (+objs.slider.value < settings.lower || +objs.slider.value > settings.upper) { objs.div.update(objs.slider.value); objs.slider.style.background = `linear-gradient(90deg, ${settings.colors.normal} ${settings.lowerAdj}%, ${settings.colors.inactive} ${settings.lowerAdj}%, ${settings.colors.inactive} ${settings.upperAdj}%, ${settings.colors.normal} 0%)`; } else { objs.slider.style.background = `linear-gradient(90deg, ${settings.colors.normal} ${settings.lowerAdj}%, ${settings.colors.active} ${settings.lowerAdj}%, ${settings.colors.active} ${settings.upperAdj}%, ${settings.colors.normal} 0%)`; } }33:T8bf,input = (settings = {}, type) => { if (typeof settings != 'object') return 'Please provide a value!'; let theme = settings.theme ? settings.theme : 'default', initialize = settings.initialize != undefined ? settings.initialize : true, on = type == 'button' ? 'onclick' : type == 'select' ? 'onchange' : 'oninput'; setGlobalStyles(theme); let objs = { title: createElement('title', settings.title, theme, settings), desc: createElement('desc', settings.desc, theme, settings), output: type == 'slider' ? createElement('output', settings.value, theme, settings) : type == 'checkbox' ? createElement('output', settings.label, theme, settings) : '', settings, value: settings.value }; objs.additionalElement = settings.additionalElement ? createElement(settings.additionalElement.name, settings.additionalElement.value, theme, settings) : ''; objs[type] = createElement(type, settings.value, theme, settings), objs.div = createElement('div', [objs.title, objs[type], objs.output, objs.additionalElement, objs.desc], theme, settings); objs[type][on] = () => { if (!settings.preventUpdate) { objs.div.update(); }; if (type == 'slider') objs.progress = (objs.value - settings.min) / (settings.max - settings.min); if (settings.utilities) { for (let [key, func] of Object.entries(settings.utilities)) { func(settings[key], objs); }; }; if (settings[on]) settings[on](objs); }; objs.div.update = (value = objs[type].value || settings.value) => { value = isNaN(value) ? value : +value; if (type == 'checkbox' && objs.value != false) value = false; else if (type == 'checkbox') value = settings.value; objs.value = value; if (type != 'select') objs[type].value = value; objs.div.value = objs.value; if (type != 'checkbox' && objs.output) objs.output.textContent = objs.value; objs.div.dispatchEvent(new CustomEvent('input')); }; if (settings.preventUpdate) objs.div.update(); if (initialize) { objs[type][on](); } else if (!settings.preventUpdate) { objs.div.update(); }; return objs.div; }34:T62e,createElement = (type, text = '', theme = '', settings = '') => { if (text == undefined) return ''; text = type != 'slider' && type != 'checkbox' ? text : ''; let typesMapping = { title: { tag: 'div', mandatoryAttrs: {class: 'title'} }, button: { tag: 'button', mandatoryAttrs: {} }, checkbox: { tag: 'input', mandatoryAttrs: { type: 'checkbox', value: settings.value } }, select: { tag: 'select', mandatoryAttrs: {} }, slider: { tag: 'input', mandatoryAttrs: { type: 'range', min: settings.min, max: settings.max, step: settings.step, value: settings.value } }, output: { tag: 'span', mandatoryAttrs: {class: 'output'} }, desc: { tag: 'div', mandatoryAttrs: {class: 'desc'} }, div: { tag: 'div', mandatoryAttrs: {class: `input-${theme}`} }, caret: { tag: 'svg', mandatoryAttrs: {class : 'caret'} } }; let el = html`<${typesMapping[type].tag}>${text}`; Object.entries(typesMapping[type].mandatoryAttrs).forEach(d => el.setAttribute(d[0], d[1])); if (typeof settings[type + 'Attrs'] == 'object') Object.entries(settings[type + 'Attrs']).forEach(d => { if (d[0] == 'class') el.classList.add(d[1]); else el.setAttribute(d[0], d[1]) }); if (typeof settings[type + 'Style'] == 'object') Object.entries(settings[type + 'Style']).forEach(d => el.style[d[0]] = d[1]); return el; }35:Tbd8,themes = ` .input-default button, .input-white button, .input-default select, .input-white select { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0.9; height: 30px; margin-left: 0px; padding: 5px 10px 5px 10px; background: #EFEFEF; border: 0.5px solid white; border-radius: 5px; color: #262626; font-family: Avenir, Arial; font-size: 12px; font-weight: 600; cursor: pointer; } .input-white button, .input-white select { color: white; } .input-default select, .input-white select { padding-right: 29px; } .input-default .caret, .input-white .caret { width: 12px; height: 10px; margin-left: -24px; fill: black; pointer-events: none; opacity: 0.75; } .input-white .caret { fill: white; } .input-default input[type = 'range'], .input-default-thin input[type = 'range'], .input-default-round input[type = 'range'], .input-white input[type = 'range'], .input-white-thin input[type = 'range'], .input-white-round input[type = 'range'] { appearance: none; -webkit-appearance: none; width: 200px; height: 5px; border-radius: 1px; background: #E5E5E5; } .input-default input[type = 'range']::-webkit-slider-thumb, .input-white input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; background: #545454; cursor: pointer; border: none; border-radius: 5px; } .input-white input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } .input-default-thin input[type = 'range']::-webkit-slider-thumb, .input-white-thin input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7.5px; height: 20px; background: #545454; cursor: pointer; border: none; border-radius: 2.5px; } .input-white-thin input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } .input-default-round input[type = 'range']::-webkit-slider-thumb, .input-white-round input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; background: #545454; cursor: pointer; border: none; border-radius: 7.5px; } .input-white-round input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } input[type = 'range']:focus { outline: none; } .output { margin-left: 5px; color: #262626; font-family: Courier; font-size: 14px; } .title { margin-bottom: 3.5px; margin-left: 2.5px; color: black; font-family: Avenir, Arial; font-size: 14px; font-weight: 600; } .desc { margin-top: 6px; margin-left: 2.5px; color: #4C4C4C; font-family: Avenir, Arial; font-size: 12px; } `36:[] 2f:{"title":"Quartz and Feldspar (Emissivity)","cells":[{"id":0,"value":"md`# Quartz and Feldspar (Emissivity)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"slider({\n title: 'Change graph',\n desc: 'Use this slider to change the y position of point 3 on Quartz line.',\n min: 0,\n max: 1,\n step: .01,\n value: .78,\n theme: 'default', //'default-thin',\n background: {\n type: 'double',\n colors: ['#7295FF', '#CCD8FF']\n }\n} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"DOM.element('div', { id: 'chart' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`## Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"ApexCharts = require('apexcharts@3.7.1/dist/apexcharts.amd.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"function generateLine1(count) {\n var series = []\n var x = [6, 8.67, 9, 9.33, 10, 11.3]\n var y = [.99, .7, .78, .65, .95, .99]\n for (var i = 0; i < count; i++)\n { \n series.push({\n x: x[i], \n y: y[i],\n title: `Point ${i+1}`,\n comment_1: x[i],\n comment_2: y[i]\n })\n }\n return series\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"function generateLine2(count) {\n var series = []\n var x = [6, 8.67, 9, 9.67, 10.95, 11.3]\n var y = [.99, .88, .92, .86, .96, .96]\n for (var i = 0; i < count; i++)\n { \n series.push({\n x: x[i], \n y: y[i],\n title: `Point ${i+1}`,\n comment_1: x[i],\n comment_2: y[i]\n })\n }\n return series\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`## Data and options`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"series = [{\n name: \"Quartz\",\n data: generateLine1(6)\n}, {\n name: \"Feldspar\",\n data: generateLine2(6)\n}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`## Generate chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"chart = new ApexCharts.default(\n document.querySelector(\"#chart\"),\n options\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"chart.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"slider = (settings = {}) => {\n\n settings.min = settings.min == undefined ? settings.max - 1 || 0 : settings.min;\n settings.max = settings.max == undefined ? settings.min + 1 || 1 : settings.max;\n settings.value = settings.value == undefined ? (settings.min + settings.max) / 2 : settings.value;\n settings.step = settings.step || (settings.max > settings.min\n ? (settings.max - settings.min) / 10\n : (settings.min - settings.max) / 10) || 0.1;\n\n settings.utilities = {};\n\n if (settings.background) {\n settings.utilities.background = setSliderBackground;\n };\n\n if (settings.highlight) {\n settings.utilities.highlight = highlightSlider;\n };\n\n return input(settings, 'slider');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"setSliderBackground = (settings, objs) => {\n\n let type = settings.type,\n color = settings.color,\n colors = settings.colors,\n progress = objs.progress,\n interpolation = settings.interpolation,\n custom = false;\n\n if (!interpolation) interpolation = d3.interpolate;\n else custom = true;\n\n type == 'normal' ? objs.slider.style.background = color : type == 'double' ? objs.slider.style.background = `linear-gradient(90deg, ${colors[0]} ${progress * 100}%, ${colors[1]} 0%)` : type == 'interpolate' ? objs.slider.style.background = (custom ? interpolation(progress) : interpolation(colors[0], colors[1])(progress)) : type == 'progress' ? (custom ? objs.slider.style.background = `linear-gradient(90deg, ${interpolation(progress)} ${progress * 100}%, ${color || interpolation(0)} 0%)` : objs.slider.style.background = `linear-gradient(90deg, ${interpolation(colors[0], colors[1])(progress)} ${progress * 100}%, ${colors[2] || colors[0]} 0%)`) : 0;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"setGlobalStyles = function(style) {\n\n d3.selectAll('.inputStyles')\n .data([style])\n .enter()\n .append('style')\n .attr('class', 'inputStyles')\n .html(themes);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}