VueUiIcon added icons

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.81",
+  "version": "2.0.82",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
@@ -84,7 +84,6 @@
     "sass": "^1.57.1",
     "vite": "^4.5.3",
     "vitest": "^0.34.1",
-    "vue": "^3.3.4",
-    "vue-data-ui": "file:../vue-data-ui"
+    "vue": "^3.3.4"
   }
 }

package.json

@@ -3316,6 +3316,16 @@ function selectBar(bar) {
           <BaseIcon name="zoomPlus" stroke="#42d392" />
           <BaseIcon name="zoomMinus" stroke="#42d392" />
           <BaseIcon name="chartTreemap" stroke="#42d392" />
+          <BaseIcon name="kpi" stroke="#42d392" />
+          <BaseIcon name="kpiBox" stroke="#42d392" />
+          <BaseIcon name="tooltip" stroke="#42d392" />
+          <BaseIcon name="vueDataUi" stroke="#42d392" />
+          <BaseIcon name="ratio" stroke="#42d392" />
+          <BaseIcon name="func" stroke="#42d392" />
+          <BaseIcon name="settings" stroke="#42d392" />
+          <BaseIcon name="trendUp" stroke="#42d392" />
+          <BaseIcon name="trendDown" stroke="#42d392" />
+          <BaseIcon name="clipBoard" stroke="#42d392" />
         </div>
       </template>
       </Box>
@@ -3346,7 +3356,7 @@ function selectBar(bar) {
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_kpi)">
         <template #title>
-          <!-- <BaseIcon name="chartGalaxy"/> -->
+          <BaseIcon name="kpi"/>
           VueUiKpi
         </template>
         <template #info>

src/App.vue

@@ -24,8 +24,8 @@ const props = defineProps({
 const icons = computed(() => {
     return {
         annotator: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 17 4 12C5 12 7 13 8 15L3 17M4 12 11 2C12 2 14 3 15 5L8 15M3 19C5 19 5 19 8 19 11 19 11 18 13 18 15 18 15 19 19 19M12 1C13 1 15 2 16 4" />`,
-        chart3dBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" d="M10 1 6 3 6 17 10 19 14 17 14 3 10 1M6 3 10 5 14 3M10 5 10 19" stroke-linecap="round" stroke-linejoin="round" />`,
-        chartAgePyramid: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 19 17 19M2 17 18 17M1 15 19 15M2 13 18 13M4 11 16 11M2 9 18 9M4 7 17 7M7 5 13 5M9 3 11 3M10 1 11 1" />`,
+        chart3dBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" d="M10 1 6 3 6 17 10 19 14 17 14 3 10 1M6 3 10 5 14 3M10 5 10 19" stroke-linecap="round" stroke-linejoin="round"/><path fill="${props.stroke}" stroke="none" style="opacity:0.3" d="M 6 10 L 10 12 L 14 10 L 14 17 L 10 19 L 6 17 L 6 10"/>`,
+        chartAgePyramid: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 1 19 L 9 19 M 11 19 L 19 19 M 2 17 L 9 17 M 11 17 L 18 17 M 2 15 L 9 15 M 11 15 L 18 15 M 3 13 L 9 13 M 11 13 L 17 13 M 3 11 L 9 11 M 11 11 L 17 11 M 4 9 L 9 9 M 11 9 L 16 9 M 4 7 L 9 7 M 11 7 L 16 7 M 5 5 L 9 5 M 11 5 L 15 5 M 6 3 L 9 3 M 11 3 L 14 3 M 7 1 L 9 1 M 11 1 L 13 1" />`,
         chartBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 12 2 18C2 19 2 19 3 19L5 19C6 19 6 19 6 18L6 12C6 11 6 11 5 11L3 11C2 11 2 11 2 12M8 7 8 18C8 19 8 19 9 19L11 19C12 19 12 19 12 18L12 7C12 6 12 6 11 6L9 6C8 6 8 6 8 7M14 2 14 18C14 19 14 19 15 19L17 19C18 19 18 19 18 18L18 2C18 1 18 1 17 1L15 1C14 1 14 1 14 2"/>`,
         chartCandlestick: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 14C14 15 15 15 15 15L17 15C18 15 18 14 18 14L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9M4 8 4 5M3 5 5 5M10 13 10 16M9 16 11 16M16 8 16 2M15 2 17 2M10 7 10 4M9 4 11 4M4 12 4 18M3 18 5 18M16 15 16 18M15 18 17 18" />`,
         chartChestnut: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M4 3A1 1 0 004 9 1 1 0 004 3M4 12A1 1 0 004 17 1 1 0 004 12M9 4 19 4M9 7 17 7M9 10 15 10M9 13 13 13M9 16 11 16" />`,
@@ -104,7 +104,17 @@ const icons = computed(() => {
         chartGalaxy: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 7 11 A 1 1 0 0 0 11 11 M 14 11 A 1 1 0 0 0 7 11 M 3 11 A 1 1 0 0 0 14 11 M 18 11 A 1 1 0 0 0 3 11 M 16.4 16 C 17 15 18 13 18 11" />`,
         zoomPlus: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 9 1 A 1 1 0 0 0 9 17 A 1 1 0 0 0 9 1 M 14.65 14.65 L 18 18 M 9 5 L 9 13 M 5 9 L 13 9"/>`,
         zoomMinus: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 9 1 A 1 1 0 0 0 9 17 A 1 1 0 0 0 9 1 M 14.65 14.65 L 18 18 M 5 9 L 13 9"/>`,
-        chartTreemap: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 L 19 1 L 19 19 L 1 19 Z M 10 1 L 10 19 M 1 13 L 10 13 M 10 10 L 19 10 M 15 10 L 15 19" />`
+        chartTreemap: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 L 19 1 L 19 19 L 1 19 Z M 10 1 L 10 19 M 1 13 L 10 13 M 10 10 L 19 10 M 15 10 L 15 19" />`,
+        kpi: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 5 L 2 15 M 6 5 L 2 10 L 6 15 M 8 15 L 8 5 L 10 5 M 10 10 A 1 1 0 0 0 10 5 M 10 10 L 8 10 M 18 5 L 14 5 M 14 15 L 18 15 M 16 5 L 16 15 M 1 3 L 1 2 C 1 1 2 1 2 1 L 18 1 C 18 1 19 1 19 2 L 19 3 M 1 17 L 1 18 C 1 19 2 19 2 19 L 18 19 C 19 19 19 18 19 18 L 19 17"/>`,
+        kpiBox: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 3 C 1 2 2 1 3 1 L 17 1 C 18 1 19 2 19 3 L 19 17 C 19 18 18 19 17 19 L 3 19 C 2 19 1 18 1 17 L 1 3 M 4 13 L 9 13 M 16 13 L 11 13 M 4 16 L 16 16 M 4 4 L 4 10 M 7 4 L 4 7 L 7 10 M 9 10 L 9 4 L 11 4 M 11 7 A 1 1 0 0 0 11 4 M 11 7 L 9 7 M 16 10 L 14 10 M 14 4 L 16 4 M 15 4 L 15 10"/>`,
+        tooltip: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 8 15 L 10 19 L 12 15 L 18 15 C 18 15 19 15 19 14 L 19 2 C 19 1 18 1 18 1 L 2 1 C 2 1 1 1 1 2 L 1 14 C 1 15 2 15 2 15 L 8 15 M 4 6 L 11 6 M 4 10 L 7 10 M 9 10 L 16 10"/>`,
+        vueDataUi: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 2 L 10.5 18 L 14.5 9 L 16 12 L 19 12 L 14.5 2 L 10.5 12 L 4.5 2 Z"/>`,
+        ratio: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 18 10 M 8 1 L 12 7 M 12 1 L 8 7 M 8 13 L 10 16 M 12 13 L 8 19"/>`,
+        func: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" d="M 17 7 L 13 13 M 13 7 L 17 13 M 12 5 C 12 5 11 5 11 6 L 11 14 C 11 15 12 15 12 15 M 18 5 C 19 5 19 6 19 6 L 19 14 C 19 15 18 15 18 15 M 1 19 C 2 19 3 19 4 17 L 6 3 C 6 2 7 1 8 1 L 10 1 M 5 10 L 7 10" />`,
+        settings: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 8 7 A 1 1 0 0 0 8 17 A 1 1 0 0 0 8 7 M 8 6 L 8 7 M 2 12 L 3 12 M 13 12 L 14 12 M 8 17 L 8 18 M 3.6 7.6 L 4.4 8.4 M 3.6 16.4 L 4.4 15.5 M 12.4 7.6 L 11.5 8.4 M 11.6 15.5 L 12.4 16.4 M 8 11 A 1 1 0 0 0 8 13 A 1 1 0 0 0 8 11 M 16 2 A 1 1 0 0 0 16 6 A 1 1 0 0 0 16 2 M 13 4 L 14 4 M 16 6 L 16 7 M 18 4 L 19 4 M 16 1 L 16 2"/>`,
+        trendUp: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 6 3 L 6 7 M 4 5 L 8 5 M 11 7 L 16 3 M 12 2 A 1 1 0 0 0 12 4 A 1 1 0 0 0 12 2 M 15 6 A 1 1 0 0 0 15 8 A 1 1 0 0 0 15 6 M 10 18 L 10 10 M 7 13 L 10 10 L 13 13" />`,
+        trendDown: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 4 5 M 4 5 L 8 5 M 11 7 L 16 3 M 12 2 A 1 1 0 0 0 12 4 A 1 1 0 0 0 12 2 M 15 6 A 1 1 0 0 0 15 8 A 1 1 0 0 0 15 6 M 10 18 L 10 10 M 7 15 L 10 18 L 13 15" />`,
+        clipBoard: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 6 2 C 6 1 7 1 7 1 L 13 1 C 14 1 14 2 14 2 C 14 2 14 3 13 3 L 7 3 C 7 3 6 3 6 2 M 6 2 L 3 2 C 2 2 1 3 1 4 L 1 17 C 1 18 2 19 3 19 L 17 19 C 18 19 19 18 19 17 L 19 4 C 19 3 18 2 17 2 L 14 2 M 5 7 L 9 7 M 5 11 L 9 11 M 11 11 L 15 11 M 5 15 L 15 15 M 11 7 L 15 7"/>`
     }
 })
 

src/atoms/BaseIcon.vue

@@ -1046,6 +1046,64 @@ export function createSpiralPath({ points, a, b, angleStep, startX, startY }) {
     return path;
 }
 
+export function calculateDistance(point1, point2) {
+    return Math.sqrt((point1.x - point2.x) ** 2 + (point1.y - point2.y) ** 2);
+}
+
+export function areCirclesOverlapping(circle1, circle2, threshold) {
+    const distance = Math.sqrt((circle2.x - circle1.x) ** 2 + (circle2.y - circle1.y) ** 2);
+    return distance < threshold;
+}
+
+export function calculateAverageDistance(points) {
+    if (points.length < 2) return 0;
+
+    let totalDistance = 0;
+    let count = 0;
+
+    for (let i = 0; i < points.length; i += 1) {
+        for (let j = i + 1; j < points.length; j += 1) {
+            totalDistance += calculateDistance(points[i], points[j]);
+            count += 1;
+        }
+    }
+    return totalDistance / count;
+}
+
+export function mergePointsByProximity(points, threshold = 0.15) {
+    const clusters = [];
+    const visited = new Array(points.length).fill(false);
+
+    points.forEach((point, index) => {
+        if (!visited[index]) {
+            const cluster = [];
+            const stack = [point];
+            visited[index] = true;
+
+            while (stack.length > 0) {
+                const currentPoint = stack.pop();
+                cluster.push(currentPoint);
+                points.forEach((otherPoint, otherIndex) => {
+                    if (!visited[otherIndex] && areCirclesOverlapping(currentPoint, otherPoint, threshold)) {
+                        stack.push(otherPoint);
+                        visited[otherIndex] = true;
+                    }
+                });
+            }
+
+            clusters.push(cluster);
+        }
+    });
+
+    const result = clusters.map(cluster => {
+        const averageX = cluster.reduce((acc, p) => acc + p.x, 0) / cluster.length;
+        const averageY = cluster.reduce((acc, p) => acc + p.y, 0) / cluster.length;
+        return { x: averageX, y: averageY };
+    });
+
+    return result
+}
+
 const lib = {
     abbreviate,
     adaptColorToBackground,
@@ -1085,6 +1143,7 @@ const lib = {
     makeDonut,
     makePath,
     matrixTimes,
+    mergePointsByProximity,
     objectIsEmpty,
     opacity,
     palette,