VueUiDonutEvolution create component

Author: graphieros

README.md

@@ -41,6 +41,7 @@ Available components:
 - [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings)
 - [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
 - [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
+- [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
 
 
 ## Mini charts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.32",
+  "version": "1.9.33",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
@@ -33,7 +33,8 @@
     "thermometer",
     "rings",
     "wheel",
-    "tiremarks"
+    "tiremarks",
+    "donut evolution"
   ],
   "author": "Alec Lloyd Probert",
   "repository": {

src/App.vue

@@ -42,6 +42,7 @@ import HistoTest from "./components/vue-ui-sparkhistogram.vue";
 import RingsTest from "./components/vue-ui-rings.vue";
 import WheelTest from "./components/vue-ui-wheel.vue";
 import TireTest from "./components/vue-ui-tiremarks.vue";
+import DonutEvolutionTest from "./components/vue-ui-donut-evolution.vue";
 
 const dataset = ref([
   {
@@ -3528,6 +3529,26 @@ const tiremarksDataset = ref({
   percentage: 75
 })
 
+const donutEvolutionDataset = ref([
+  {
+    name: "Serie 1",
+    values: [0, null, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 0  ]
+  },
+  {
+    name: "Serie 2",
+    values: [10, null, 20, 10, 10, 10, 10, 10, 10, 10, 10, 10, 0 ]
+  },
+  {
+    name: "Serie 3",
+    values: [5, null, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0 ]
+  },
+  {
+    name: "Serie 3",
+    values: [5, null, 5, 5, 5, 5 ]
+  }
+])
+
+
 </script>
 
 <template>
@@ -3557,6 +3578,20 @@ const tiremarksDataset = ref({
       </template>
       </Box>
 
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)" open>
+        <template #title>VueUiDonutEvolution</template>
+        <template #dev>
+          <DonutEvolutionTest
+            :dataset="donutEvolutionDataset"
+          />
+        </template>
+        <template #prod>
+          <VueUiDonutEvolution
+            :dataset="donutEvolutionDataset"
+          />
+        </template>
+      </Box>
+
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_tiremarks)">
         <template #title>VueUiTiremarks</template>
         <template #dev>

src/atoms/DataTable.vue

@@ -23,7 +23,7 @@ const { backgroundColor:tdbg, color:tdc, outline:tdo } = props.config.td;
             </tr>
             <tr>
                 <th :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
-                    <div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px;">
+                    <div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px">
                         <svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
                             <circle cx="10" cy="10" r="10" :fill="th.color"/>
                         </svg>

src/atoms/Legend.vue

@@ -48,6 +48,7 @@ function handleClick(legend, i) {
 
 <style scoped>
 .vue-data-ui-legend {
+    user-select:none;
     height: 100%;
     width:100%;
     display: flex;
@@ -57,6 +58,7 @@ function handleClick(legend, i) {
     column-gap: 18px;
 }
 .vue-data-ui-legend-item {
+    user-select: none;
     display: flex;
     align-items:center;
     gap: 6px;

src/components/vue-ui-candlestick.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, nextTick } from "vue";
-import { shiftHue, opacity, makeXls } from "../lib";
+import { canShowValue, closestDecimal, shiftHue, opacity, makeXls } from "../lib";
 import mainConfig from "../default_configs.json";
 import pdf from "../pdf";
 import img from "../img";
@@ -165,23 +165,6 @@ function ratioToMax(value) {
     return value / extremes.value.max;
 }
 
-function canShowValue(value) {
-    return ![null, undefined, NaN].includes(value);
-}
-
-function closestDecimal(number) {
-    if (number === 0) return 0;
-    const orderOfMagnitude = Math.floor(Math.log10(Math.abs(number)));
-    const powerOf10 = 10 ** orderOfMagnitude;
-    let roundedValue;
-    if (number < 0) {
-        roundedValue = Math.round(number / powerOf10) * powerOf10;
-    } else {
-        roundedValue = Math.round(number / powerOf10) * powerOf10;
-    }
-    return roundedValue;
-}
-
 const yLabels = computed(() => {
     const positiveStep = closestDecimal(extremes.value.max / candlestickConfig.value.style.layout.grid.yAxis.dataLabels.steps);
     const steps = [];