{"version":3,"sources":["jsdelivr-header.js","/npm/histogram-renderer@1.0.0/code.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OCNO,UAAW,kBAEX,MAAM,IAAM,EAAG,QAAO,cAC5B,IAAI,WAAE,EAAU,UAAE,GAAc,EAC/B,EAAa,GAAc,GAG3B,MAAM,EAAI,SAAS,cAAc,UACjC,EAAE,MAAQ,EAAQ,YAClB,EAAE,OAAmB,IAAV,EAAE,MACb,MAAM,EAAM,EAAE,WAAW,MACzB,EAAQ,YAAY,GAGpB,MAAM,SAAS,OAAO,iBAAmB,UAC1C,MAAM,SAAS,OAAO,kBAAoB,uCACzC,EAAQ,MAAM,gBAAkB,cAGhC,IAAI,EAAM,EAAU,GAChB,EAAM,EAAU,GACpB,IAAI,IAAI,EAAE,EAAG,EAAE,EAAU,OAAQ,IAC5B,EAAU,GAAK,IAAK,EAAM,EAAU,IACpC,EAAU,GAAK,IAAK,EAAM,EAAU,IAEzC,MACM,GADQ,EAAM,GACO,EAGrB,EAAS,GACT,EAAO,IAAI,MAAM,GACvB,EAAK,KAAK,GACV,IAAQ,EAAE,EAAG,EAAE,EAAY,IAAK,CAChC,MAAM,EAAY,EAAM,EAAI,EACpB,EAAY,EAAY,EAC9B,EAAO,KAAK,GAAG,EAAU,QAAQ,QAAQ,EAAU,QAAQ,MAC3D,EAAU,SAAQ,IACb,GAAS,GAAa,EAAQ,IAC/B,EAAK,IAAM,EACb,GAEJ,CAGA,EAAM,MAAQ,IAAI,MAAM,EAAK,CAC3B,KAAM,OACN,KAAM,CACP,OAAQ,EACL,SAAU,CAAC,CACb,MAAO,kBACH,OACA,YAAa,UACb,gBAAiB,yBACjB,MAAM,KAGV,QAAS,CACV,YAAY,EACT,OAAQ,CACN,MAAO,CAAC,CACN,SAAS,EACT,WAAY,CACV,SAAS,EACT,YAAa,eAEf,UAAW,CACT,MAAO,4BAGX,MAAO,CAAC,CACN,SAAS,EACT,WAAY,CACV,SAAS,EACT,YAAa,aAEf,UAAW,CACT,MAAO,+BAKhB","file":"/npm/histogram-renderer@1.0.0/code.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.39.0.\n * Original file: /npm/histogram-renderer@1.0.0/code.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","import Chart from 'chart.js'\n\nexport const run = ({ state, element }) => {\n\tlet { numBuckets, inputData } = state\n  numBuckets = numBuckets || 12\n  \n  // create the canvas\n  const c = document.createElement('canvas')\n  c.width = element.clientWidth\n  c.height = c.width * 0.75\n  const ctx = c.getContext('2d')\n  element.appendChild(c)\n  \n  // do some styling\n  Chart.defaults.global.defaultFontColor = '#c4cecf'\n\tChart.defaults.global.defaultFontFamily = '\"IBM Plex Sans Condensed\",sans-serif'\n  element.style.backgroundColor = 'transparent'\n  \n  // Get the range\n  let min = inputData[0]\n  let max = inputData[0]\n  for(var i=1; i<inputData.length; i++) {\n    if(inputData[i] < min) min = inputData[i]\n    if(inputData[i] > max) max = inputData[i]\n  }\n  const range = max - min\n  const bucketSize = range / numBuckets\n  \n  // Create the data\n  const xTicks = []\n  const data = new Array(numBuckets)\n  data.fill(0)\n  for(var i=0; i<numBuckets; i++) {\n\t\tconst bucketMin = min + i * bucketSize\n    const bucketMax = bucketMin + bucketSize\n    xTicks.push(`${bucketMin.toFixed(2)} - ${bucketMax.toFixed(2)}`)\n    inputData.forEach(point => {\n      if(point >= bucketMin && point < bucketMax) {\n       \tdata[i] += 1\n      }\n    })\n  }\n  \n  // create the chart\n  state.chart = new Chart(ctx, {\n    type: 'line',\n    data: {\n\t\t\tlabels: xTicks,\n      datasets: [{\n\t\t\t\tlabel: 'Input Frequency',\n        data,\n        borderColor: '#188da4',\n        backgroundColor: 'rgba(255,255,255,0.05)',\n        fill: true\n      }]\n    },\n    options: {\n\t\t\tresponsive: true,\n      scales: {\n        xAxes: [{\n          display: true,\n          scaleLabel: {\n            display: true,\n            labelString: 'Input Value'\n          },\n          gridLines: {\n            color: 'rgba(255,255,255,0.05)' \n          }\n        }],\n        yAxes: [{\n          display: true,\n          scaleLabel: {\n            display: true,\n            labelString: 'Frequency'\n          },\n          gridLines: {\n            color: 'rgba(255,255,255,0.05)' \n          }\n        }]\n      }\n    }\n  })\n}\n"]}