@kiva/kv-components 3.106.0 → 3.107.0

package/dist/treemap.js

@@ -0,0 +1,109 @@
+// utils/treemap.js
+var getMaximum = (array) => Math.max(...array);
+var getMinimum = (array) => Math.min(...array);
+var sumReducer = (acc, cur) => acc + cur;
+var roundValue = (number) => Math.max(Math.round(number * 100) / 100, 0);
+var validateArguments = ({ data, width, height }) => {
+  if (!width || typeof width !== "number" || width < 0) {
+    throw new Error("You need to specify the width of your treemap");
+  }
+  if (!height || typeof height !== "number" || height < 0) {
+    throw new Error("You need to specify the height of your treemap");
+  }
+  if (!data || !Array.isArray(data) || data.length === 0 || !data.every((dataPoint) => Object.prototype.hasOwnProperty.call(dataPoint, "value") && typeof dataPoint.value === "number" && dataPoint.value >= 0 && !Number.isNaN(dataPoint.value))) {
+    throw new Error("You data must be in this format [{ value: 1 }, { value: 2 }], 'value' being a positive number");
+  }
+};
+function getTreemap({ data, width, height }) {
+  let Rectangle = {};
+  let initialData = [];
+  function worstRatio(row, width2) {
+    const sum = row.reduce(sumReducer, 0);
+    const rowMax = getMaximum(row);
+    const rowMin = getMinimum(row);
+    return Math.max(width2 ** 2 * rowMax / sum ** 2, sum ** 2 / (width2 ** 2 * rowMin));
+  }
+  const getMinWidth = () => {
+    if (Rectangle.totalHeight ** 2 > Rectangle.totalWidth ** 2) {
+      return { value: Rectangle.totalWidth, vertical: false };
+    }
+    return { value: Rectangle.totalHeight, vertical: true };
+  };
+  const layoutRow = (row, width2, vertical) => {
+    const rowHeight = row.reduce(sumReducer, 0) / width2;
+    row.forEach((rowItem) => {
+      const rowWidth = rowItem / rowHeight;
+      const { xBeginning } = Rectangle;
+      const { yBeginning } = Rectangle;
+      let data2;
+      if (vertical) {
+        data2 = {
+          x: xBeginning,
+          y: yBeginning,
+          width: rowHeight,
+          height: rowWidth,
+          data: initialData[Rectangle.data.length]
+        };
+        Rectangle.yBeginning += rowWidth;
+      } else {
+        data2 = {
+          x: xBeginning,
+          y: yBeginning,
+          width: rowWidth,
+          height: rowHeight,
+          data: initialData[Rectangle.data.length]
+        };
+        Rectangle.xBeginning += rowWidth;
+      }
+      Rectangle.data.push(data2);
+    });
+    if (vertical) {
+      Rectangle.xBeginning += rowHeight;
+      Rectangle.yBeginning -= width2;
+      Rectangle.totalWidth -= rowHeight;
+    } else {
+      Rectangle.xBeginning -= width2;
+      Rectangle.yBeginning += rowHeight;
+      Rectangle.totalHeight -= rowHeight;
+    }
+  };
+  const layoutLastRow = (rows, children, width2) => {
+    const { vertical } = getMinWidth();
+    layoutRow(rows, width2, vertical);
+    layoutRow(children, width2, vertical);
+  };
+  const squarify = (children, row, width2) => {
+    if (children.length === 1) {
+      return layoutLastRow(row, children, width2);
+    }
+    const rowWithChild = [...row, children[0]];
+    if (row.length === 0 || worstRatio(row, width2) >= worstRatio(rowWithChild, width2)) {
+      children.shift();
+      return squarify(children, rowWithChild, width2);
+    }
+    layoutRow(row, width2, getMinWidth().vertical);
+    return squarify(children, [], getMinWidth().value);
+  };
+  validateArguments({ data, width, height });
+  Rectangle = {
+    data: [],
+    xBeginning: 0,
+    yBeginning: 0,
+    totalWidth: width,
+    totalHeight: height
+  };
+  initialData = data;
+  const totalValue = data.map((dataPoint) => dataPoint.value).reduce(sumReducer, 0);
+  const dataScaled = data.map((dataPoint) => dataPoint.value * height * width / totalValue);
+  squarify(dataScaled, [], getMinWidth().value);
+  return Rectangle.data.map((dataPoint) => ({
+    ...dataPoint,
+    x: roundValue(dataPoint.x),
+    y: roundValue(dataPoint.y),
+    width: roundValue(dataPoint.width),
+    height: roundValue(dataPoint.height)
+  }));
+}
+export {
+  getTreemap
+};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.106.0",
+  "version": "3.107.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "main": "index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@babel/eslint-parser": "^7.13.14",
@@ -46,6 +47,7 @@
     "storybook": "7.6.20",
     "style-loader": "^3.3.4",
     "tailwindcss": "^3.4.3",
+    "tsup": "^6.7.0",
     "vue": "2.6.14",
     "vue-loader": "^15.9.6",
     "vue-router": "^3.5.2",
@@ -56,7 +58,7 @@
     "build-storybook": "vue-demi-switch 2 && storybook build -c vue/.storybook",
     "lint": "eslint --ext .js,.vue ./",
     "test": "npm run lint",
-    "build": "echo No build needed for @kiva/kv-components."
+    "build": "tsup utils/*.js --format cjs,esm --clean"
   },
   "dependencies": {
     "@kiva/kv-tokens": "^2.13.0",
@@ -74,6 +76,12 @@
     "popper.js": "^1.16.1",
     "vue-demi": "^0.14.7"
   },
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-rc.1",
     "vue": "^2.6.0 || >=3.0.0"
@@ -83,5 +91,5 @@
       "optional": true
     }
   },
-  "gitHead": "c195fd4d6bf8055879846dc5821873e9bc336f1c"
+  "gitHead": "6efc99e83efc05ac8d3ee259bc24a22012dc22ef"
 }

package/vue/KvVerticalCarousel.vue

@@ -7,7 +7,7 @@
 		>
 			<!-- Carousel Content -->
 			<div
-				class="tw-flex tw-flex-col tw-gap-y-1"
+				class="tw-flex tw-flex-col"
 				:style="`height: ${heightStyle}`"
 				@click.capture="onCarouselContainerClick"
 			>