Extract chart renderers into functions and add a Web Component for ea…

…ch type

.gitignore

@@ -1,2 +1,3 @@
+/dist
 jquery.peity.min.js.gz
 /node_modules

.prettierignore

@@ -1,2 +1 @@
-jquery.peity.js
-jquery.peity.min.js
+dist/*

package.json

@@ -17,9 +17,12 @@
     "jest-puppeteer": "^10.0.1",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
+    "rollup": "^4.12.0",
     "uglify-js": "^3.3.7"
   },
   "scripts": {
+    "build": "rollup --config",
+    "pretest": "npm run build",
     "test": "jest"
   },
   "repository": {

rollup.config.mjs

@@ -0,0 +1,16 @@
+import packageJSON from './package.json' assert { type: 'json' }
+
+const banner = `// Piety version ${packageJSON.version}
+// Copyright ${new Date().getFullYear()} Ben Pickles
+// https://benpickles.github.io/piety`
+
+export default [
+  {
+    input: 'src/piety.js',
+    output: {
+      banner,
+      file: 'dist/piety.js',
+      format: 'es',
+    },
+  },
+]

src/charts/bar.js

@@ -0,0 +1,65 @@
+export const defaults = {
+  fill: ['#4D89F9'],
+  height: 16,
+  min: 0,
+  padding: 0.1,
+  width: 32,
+}
+
+export function renderer(data, opts) {
+  const { fill, height, padding, width } = opts
+  const max = Math.max.apply(
+    Math,
+    opts.max == null ? data : data.concat(opts.max)
+  )
+  const min = Math.min.apply(
+    Math,
+    opts.min == null ? data : data.concat(opts.min)
+  )
+  const diff = max - min
+  const xScale = value => (value * width) / data.length
+  const yScale = value => height - (diff ? ((value - min) / diff) * height : 1)
+  const parts = data.map((n, i) => {
+    const x = xScale(i + padding)
+    const w = xScale(i + 1 - padding) - x
+    const valueY = yScale(n)
+    let y1 = valueY
+    let y2 = valueY
+    let h
+
+    if (!diff) {
+      h = 1
+    } else if (n < 0) {
+      y1 = yScale(Math.min(max, 0))
+    } else {
+      y2 = yScale(Math.max(min, 0))
+    }
+
+    h = y2 - y1
+
+    if (h == 0) {
+      h = 1
+      if (max > 0 && diff) y1--
+    }
+
+    return {
+      type: 'rect',
+      props: {
+        'data-value': n,
+        fill: fill(n, i, data),
+        x,
+        y: y1,
+        width: w,
+        height: h,
+      },
+    }
+  })
+
+  return {
+    helpers: {
+      x: xScale,
+      y: yScale,
+    },
+    parts,
+  }
+}