From 1ba80d5fc9e52119175d4ee0465b39ffd597060d Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 20 Dec 2023 07:59:02 +0100
Subject: [PATCH] VueUiTiremarks create component

---
 README.md                           |   1 +
 package-lock.json                   |   4 +-
 package.json                        |   5 +-
 src/App.vue                         |  24 +-
 src/components/vue-ui-tiremarks.vue | 355 ++++++++++++++++++++++++++++
 src/components/vue-ui-wheel.vue     |   2 +-
 src/default_configs.json            |  55 +++++
 src/index.js                        |   4 +-
 src/main.js                         |   4 +-
 types/vue-data-ui.d.ts              |  61 +++++
 10 files changed, 507 insertions(+), 8 deletions(-)
 create mode 100644 src/components/vue-ui-tiremarks.vue

diff --git a/README.md b/README.md
index 011a395f..e31c3caa 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,7 @@ Available components:
 - [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
 - [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)
 
 
 ## Mini charts
diff --git a/package-lock.json b/package-lock.json
index 67836e00..30ee8b1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.29",
+  "version": "1.9.30",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.29",
+      "version": "1.9.30",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 3bcc1eb8..0a83f17f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.30",
+  "version": "1.9.31",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
@@ -32,7 +32,8 @@
     "relationship circle",
     "thermometer",
     "rings",
-    "wheel"
+    "wheel",
+    "tiremarks"
   ],
   "author": "Alec Lloyd Probert",
   "repository": {
diff --git a/src/App.vue b/src/App.vue
index 13da444c..0a8a6aba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,6 +40,7 @@ import StackTest from "./components/vue-ui-sparkstackbar.vue";
 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";
 
 const dataset = ref([
   {
@@ -3522,6 +3523,10 @@ const skeletonOptions = ref([
 
 const skeletonChoice = ref('wheel')
 
+const tiremarksDataset = ref({
+  percentage: 75
+})
+
 </script>
 
 <template>
@@ -3535,7 +3540,24 @@ const skeletonChoice = ref('wheel')
         <h4 style="color: #5f8bee">Manual testing arena</h4>
       </div>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)" open>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_tiremarks)" open>
+        <template #title>VueUiTiremarks</template>
+        <template #dev>
+          <TireTest
+            :dataset="tiremarksDataset"
+          />
+        </template>
+        <template #prod>
+          <VueUiTiremarks
+            :dataset="tiremarksDataset"
+          />
+        </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_tiremarks }}
+        </template>
+      </Box>
+
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
         <template #general>
           <select v-model="skeletonChoice">
             <option v-for="(opt) in skeletonOptions">{{ opt }}</option>
diff --git a/src/components/vue-ui-tiremarks.vue b/src/components/vue-ui-tiremarks.vue
new file mode 100644
index 00000000..a7d4ea96
--- /dev/null
+++ b/src/components/vue-ui-tiremarks.vue
@@ -0,0 +1,355 @@
+<script setup>
+import { ref, computed, nextTick, onMounted } from "vue";
+import pdf from "../pdf";
+import img from "../img";
+import { useNestedProp } from "../useNestedProp";
+import mainConfig from "../default_configs.json";
+import { shiftHue } from "../lib";
+import Title from "../atoms/Title.vue";
+import UserOptions from "../atoms/UserOptions.vue";
+
+const props = defineProps({
+    config: {
+        type: Object,
+        default() {
+            return {}
+        }
+    },
+    dataset: {
+        type: Object,
+        default() {
+            return {}
+        }
+    },
+});
+
+const uid = ref(`vue-ui-tiremarks-${Math.random()}`);
+
+const defaultConfig = ref(mainConfig.vue_ui_tiremarks);
+
+const isPrinting = ref(false);
+const isImaging = ref(false);
+const tiremarksChart = ref(null);
+
+const tiremarksConfig = computed(() => {
+    return useNestedProp({
+        userConfig: props.config,
+        defaultConfig: defaultConfig.value
+    });
+});
+
+const activeValue = ref(tiremarksConfig.value.style.chart.animation.use ? 0 : props.dataset.percentage);
+
+onMounted(() => {
+    let acceleration = 0;
+    let speed = tiremarksConfig.value.style.chart.animation.speed;
+    let incr = (0.005) * tiremarksConfig.value.style.chart.animation.acceleration;
+    function animate() {
+        activeValue.value += speed + acceleration;
+        acceleration += incr;
+        if (activeValue.value < props.dataset.percentage) {
+            requestAnimationFrame(animate);
+        } else {
+            activeValue.value = props.dataset.percentage;
+        }
+    }
+
+    if(tiremarksConfig.value.style.chart.animation.use) {
+        activeValue.value = 0;
+        animate();
+    }
+});
+
+const isVertical = computed(() => {
+    return tiremarksConfig.value.style.chart.layout.display === 'vertical';
+});
+
+const hasGradient = computed(() => {
+    return tiremarksConfig.value.style.chart.layout.ticks.gradient.show;
+});
+
+const padding = computed(() => {
+    
+    const paddingRef = {
+        top: 48,
+        left: 64,
+        right: 64,
+        bottom: 48
+    }
+
+    if(isVertical.value) {
+        return {
+            top: tiremarksConfig.value.style.chart.percentage.verticalPosition === 'top' ? paddingRef.top : 3,
+            left: 3,
+            right: 3,
+            bottom: tiremarksConfig.value.style.chart.percentage.verticalPosition === 'bottom' ? paddingRef.bottom : 3
+        }
+    } else {
+        return {
+            top: 0,
+            bottom: 0,
+            left: tiremarksConfig.value.style.chart.percentage.horizontalPosition === 'left' ? paddingRef.left : 3,
+            right: tiremarksConfig.value.style.chart.percentage.horizontalPosition === 'right' ? paddingRef.right : 10,
+        }
+    }
+})
+
+
+// This should return a total for x and another for y
+const totalPadding = computed(() => {
+    return Object.values(padding.value).reduce((a, b) => a + b, 0)
+})
+
+const svg = computed(() => {
+    const small = 56;
+    const big = 312;
+    return {
+        height: isVertical.value ? big : small,
+        width: isVertical.value ? small : big,
+    }
+})
+
+const max = ref(100);
+
+const proportion = computed(() => {
+    return props.dataset.percentage / max.value
+});
+
+const tickSize = computed(() => {
+    if (isVertical.value) {
+        return {
+            mark: ((svg.value.height - totalPadding.value) / 100) * 0.5,
+            space: ((svg.value.height - totalPadding.value) / 100) * 0.5
+        }
+    } else {
+        return {
+            mark: ((svg.value.width - totalPadding.value) / 100) * 0.5,
+            space: ((svg.value.width - totalPadding.value) / 100) * 0.5
+        }
+    }
+})
+
+const ticks = computed(() => {
+    const arr = [];
+    const marks = 100;
+    for (let i = 0; i < marks; i += 1) {
+        const color = tiremarksConfig.value.style.chart.layout.ticks.gradient.show ? shiftHue(tiremarksConfig.value.style.chart.layout.activeColor, i / marks * (tiremarksConfig.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : tiremarksConfig.value.style.chart.layout.activeColor;
+        if(isVertical.value) {
+            const verticalCrescendo = tiremarksConfig.value.style.chart.layout.crescendo ? ((marks - i) * (svg.value.width - padding.value.left - padding.value.right) / marks / 3) : 0;
+            const v_x1 = padding.value.left + 4 + verticalCrescendo;
+            const v_x2 = svg.value.width - padding.value.right - 4 - verticalCrescendo;
+            const v_y1 = svg.value.height - padding.value.bottom - (i * tickSize.value.mark) - (i * tickSize.value.space) - tickSize.value.mark;
+            const v_y2 = svg.value.height - padding.value.bottom - (i * tickSize.value.mark) - (i * tickSize.value.space) - tickSize.value.mark;
+            const v_space_x = (v_x2 - v_x1 ) / tiremarksConfig.value.style.chart.layout.curveAngleX;
+            const v_space_y = tiremarksConfig.value.style.chart.layout.curveAngleY * ((1 + i) / marks);
+            arr.push({
+                x1: v_x1,
+                x2: v_x2,
+                y1: v_y1,
+                y2: v_y2,
+                curve: `M ${v_x1} ${v_y1} C ${v_x1 + v_space_x} ${v_y1 - v_space_y}, ${v_x2 - v_space_x} ${v_y2 - v_space_y}, ${v_x2} ${v_y2}`,
+                color
+            })
+        } else {
+            const horizontalCrescendo = tiremarksConfig.value.style.chart.layout.crescendo ? ((marks - i) * (svg.value.height - padding.value.top - padding.value.bottom) / marks / 3)  : 0;
+            const h_x1 = padding.value.left + (i * tickSize.value.mark) + (i * tickSize.value.space) - tickSize.value.mark;
+            const h_x2 = h_x1;
+            const h_y1 = padding.value.top + 4 + horizontalCrescendo;
+            const h_y2 = svg.value.height - padding.value.bottom - 4 - horizontalCrescendo;
+            const h_space_x = tiremarksConfig.value.style.chart.layout.curveAngleY * ((1 + i) / marks);
+            const h_space_y = (h_y2 - h_y1 ) / tiremarksConfig.value.style.chart.layout.curveAngleX;
+            arr.push({
+                x1: h_x1,
+                x2: h_x2,
+                y1: h_y1,
+                y2: h_y2,
+                curve: `M ${h_x1} ${h_y1} C ${h_x1 + h_space_x} ${h_y1 + h_space_y}, ${h_x2 + h_space_x} ${h_y2 - h_space_y}, ${h_x2} ${h_y2}`,
+                color
+            })
+        }
+    }
+    return arr;
+});
+
+const dataLabel = computed(() => {
+    let x,y,textAnchor,fontSize;
+    const fontSizeOffset = tiremarksConfig.value.style.chart.percentage.fontSize / 3;
+
+    if(isVertical.value) {
+        if(tiremarksConfig.value.style.chart.percentage.verticalPosition === 'top') {
+            x = svg.value.width / 2;
+            y = padding.value.top / 2;
+            textAnchor = 'middle';
+        } else if(tiremarksConfig.value.style.chart.percentage.verticalPosition === 'bottom') {
+            x = svg.value.width / 2;
+            y = svg.value.height - (padding.value.bottom / 2) + fontSizeOffset;
+            textAnchor = 'middle';
+        }
+    } else {
+        if(tiremarksConfig.value.style.chart.percentage.horizontalPosition === 'left') {
+            x = 4;
+            y = (svg.value.height / 2) + fontSizeOffset;
+            textAnchor = 'start';
+        } else if(tiremarksConfig.value.style.chart.percentage.horizontalPosition === 'right') {
+            x = svg.value.width - padding.value.right + 8;
+            y = (svg.value.height / 2) + fontSizeOffset;
+            textAnchor = 'start';
+        }
+    }
+
+    return {
+        x,
+        y,
+        textAnchor,
+        bold: tiremarksConfig.value.style.chart.percentage.bold,
+        fontSize: tiremarksConfig.value.style.chart.percentage.fontSize,
+        fill: tiremarksConfig.value.style.chart.percentage.color
+    }
+})
+
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
+    isPrinting.value = true;
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`${uid.value}`),
+            fileName: tiremarksConfig.value.style.chart.title.text || 'vue-ui-tiremarks'
+        }).finally(() => {
+            isPrinting.value = false;
+        })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`${uid.value}`),
+            fileName: tiremarksConfig.value.style.chart.title.text || 'vue-ui-tiremarks',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
+}
+
+defineExpose({
+    generatePdf,
+    generateImage
+});
+
+</script>
+
+<template>
+    <div :ref="`tiremarksChart`" :class="`vue-ui-tiremarks ${tiremarksConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${tiremarksConfig.style.fontFamily};width:100%; text-align:center;${(tiremarksConfig.userOptions.show && !isImaging) ? 'padding-top:36px' : ''}`" :id="uid">
+
+        <div v-if="tiremarksConfig.style.chart.title.text" :style="`width:100%;background:${tiremarksConfig.style.chart.backgroundColor};padding-bottom:12px`">
+            <Title
+                :config="{
+                    title: {
+                        cy: 'wheel-title',
+                        text: tiremarksConfig.style.chart.title.text,
+                        color: tiremarksConfig.style.chart.title.color,
+                        fontSize: tiremarksConfig.style.chart.title.fontSize,
+                        bold: tiremarksConfig.style.chart.title.bold
+                    },
+                    subtitle: {
+                        cy: 'wheel-subtitle',
+                        text: tiremarksConfig.style.chart.title.subtitle.text,
+                        color: tiremarksConfig.style.chart.title.subtitle.color,
+                        fontSize: tiremarksConfig.style.chart.title.subtitle.fontSize,
+                        bold: tiremarksConfig.style.chart.title.subtitle.bold
+                    },
+                }"
+            />
+        </div>
+
+        <UserOptions
+            ref="details"
+            v-if="tiremarksConfig.userOptions.show"
+            :backgroundColor="tiremarksConfig.style.chart.backgroundColor"
+            :color="tiremarksConfig.style.chart.color"
+            :isPrinting="isPrinting"
+            :isImaging="isImaging"
+            :title="tiremarksConfig.userOptions.title"
+            :uid="uid"
+            :hasImg="true"
+            :hasXls="false"
+            @generatePdf="generatePdf"
+            @generateImage="generateImage"
+        />
+
+        <svg :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:${tiremarksConfig.style.chart.backgroundColor};color:${tiremarksConfig.style.chart.color}`">
+            <g v-if="tiremarksConfig.style.chart.layout.curved">
+                <path
+                    v-for="(tick, i) in ticks"
+                    :d="tick.curve"
+                    :stroke-width="tickSize.mark"
+                    :stroke="activeValue >= i ? tick.color : tiremarksConfig.style.chart.layout.inactiveColor"
+                    stroke-linecap="round"
+                    fill="none"
+                    :class="{ 'vue-ui-tick-animated': tiremarksConfig.style.chart.animation.use && i <= activeValue }"
+                />
+            </g>
+            <g v-else>
+                <line
+                    v-for="(tick, i) in ticks"
+                    :x1="tick.x1"
+                    :y1="tick.y1"
+                    :x2="tick.x2"
+                    :y2="tick.y2"
+                    :stroke-width="tickSize.mark"
+                    :stroke="activeValue >= i ? tick.color : tiremarksConfig.style.chart.layout.inactiveColor"
+                    stroke-linecap="round"
+                />
+            </g>
+            <text
+                v-if="tiremarksConfig.style.chart.percentage.show"
+                :x="dataLabel.x"
+                :y="dataLabel.y"
+                :font-size="dataLabel.fontSize"
+                :fill="tiremarksConfig.style.chart.layout.ticks.gradient.show && tiremarksConfig.style.chart.percentage.useGradientColor ? shiftHue(tiremarksConfig.style.chart.layout.activeColor, activeValue / 100 * (tiremarksConfig.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : tiremarksConfig.style.chart.percentage.color"
+                :font-weight="dataLabel.bold ? 'bold': 'normal'"
+                :text-anchor="dataLabel.textAnchor"
+            >
+                {{ activeValue.toFixed(tiremarksConfig.style.chart.percentage.rounding) + '%' }}
+            </text>
+        </svg>
+    </div>
+</template>
+
+<style scoped>
+.vue-ui-tiremarks * {
+    transition: unset;
+}
+.vue-ui-tiremarks {
+    user-select: none;
+    position: relative;
+}
+.vue-ui-tick-animated {
+    animation: animate-tick 0.3s ease-in;
+    transform-origin: center;
+}
+
+@keyframes animate-tick {
+    0% {
+        stroke-width: 2;
+        transform: scale(1,1.1);
+    }
+    100% {
+        stroke-width: initial;
+        transform: scale(1,1);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/vue-ui-wheel.vue b/src/components/vue-ui-wheel.vue
index 96c5996f..a00a6a49 100644
--- a/src/components/vue-ui-wheel.vue
+++ b/src/components/vue-ui-wheel.vue
@@ -146,7 +146,7 @@ defineExpose({
         class="vue-ui-wheel" 
         ref="wheelChart"
         :id="uid"
-        :style="`font-family:${wheelConfig.style.fontFamily};width:100%; text-align:center;${wheelConfig.userOptions.show ? 'padding-top:36px' : ''}`"
+        :style="`font-family:${wheelConfig.style.fontFamily};width:100%; text-align:center;${(wheelConfig.userOptions.show && !isImaging) ? 'padding-top:36px' : ''}`"
     >
 
         <div v-if="wheelConfig.style.chart.title.text" :style="`width:100%;background:${wheelConfig.style.chart.backgroundColor};padding-bottom:12px`">
diff --git a/src/default_configs.json b/src/default_configs.json
index b8fe958f..7866c2f3 100644
--- a/src/default_configs.json
+++ b/src/default_configs.json
@@ -2561,5 +2561,60 @@
             "show": true,
             "title": "options"
         }
+    },
+    "vue_ui_tiremarks": {
+        "style": {
+            "fontFamily":"inherit",
+            "chart": {
+                "backgroundColor":"#FFFFFF",
+                "color":"#2D353C",
+                "animation": {
+                    "use":true,
+                    "speed": 0.5,
+                    "acceleration": 1
+                },
+                "layout": {
+                    "display": "horizontal",
+                    "crescendo": true,
+                    "curved": true,
+                    "curveAngleX": 10,
+                    "curveAngleY": 10,
+                    "activeColor":"#5f8bee",
+                    "inactiveColor":"#e1e5e8",
+                    "ticks": {
+                        "gradient": {
+                            "show": true,
+                            "shiftHueIntensity": 100
+                        }
+                    }
+                },
+                "percentage": {
+                    "show": true,
+                    "useGradientColor": true,
+                    "color": "#5f8bee",
+                    "fontSize": 16,
+                    "bold": true,
+                    "rounding": 1,
+                    "verticalPosition": "bottom",
+                    "horizontalPosition": "left"
+                },
+                "title": {
+                    "text": "Title",
+                    "color": "#2D353C",
+                    "fontSize": 20,
+                    "bold": true,
+                    "subtitle": {
+                        "color": "#A1A1A1",
+                        "text": "Subtitle", 
+                        "fontSize": 16,
+                        "bold": false
+                    }
+                }
+            }
+        },
+        "userOptions": {
+            "show": true,
+            "title": "options"
+        }
     }
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index a50eb6b8..0c3f9a97 100644
--- a/src/index.js
+++ b/src/index.js
@@ -26,6 +26,7 @@ import VueUiSparkStackbar from "./components/vue-ui-sparkstackbar.vue";
 import VueUiSparkHistogram from "./components/vue-ui-sparkhistogram.vue";
 import VueUiRings from "./components/vue-ui-rings.vue";
 import VueUiWheel from "./components/vue-ui-wheel.vue";
+import VueUiTiremarks from "./components/vue-ui-tiremarks.vue";
 
 export { 
     VueUiXy, 
@@ -55,5 +56,6 @@ export {
     VueUiSparkStackbar,
     VueUiSparkHistogram,
     VueUiRings,
-    VueUiWheel
+    VueUiWheel,
+    VueUiTiremarks
 };
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 39a35e96..06e8f8fe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,7 +29,8 @@ import {
     VueUiSparkStackbar,
     VueUiSparkHistogram,
     VueUiRings,
-    VueUiWheel
+    VueUiWheel,
+    VueUiTiremarks,
 } from 'vue-data-ui';
 import 'vue-data-ui/style.css';
 
@@ -62,4 +63,5 @@ app.component("VueUiSparkStackbar", VueUiSparkStackbar);
 app.component("VueUiSparkHistogram", VueUiSparkHistogram);
 app.component("VueUiRings", VueUiRings);
 app.component("VueUiWheel", VueUiWheel);
+app.component("VueUiTiremarks", VueUiTiremarks);
 app.mount('#app');
\ No newline at end of file
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index 878e2bfc..41adf613 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -5,6 +5,67 @@ declare module 'vue-data-ui' {
         [key: string]: unknown;
     }
 
+    export type VueUiTiremarksConfig = {
+        style: {
+            fontFamily: string;
+            chart: {
+                backgroundColor: string;
+                color: string;
+                animation: {
+                    use: boolean;
+                    speed: number;
+                    acceleration: number;
+                };
+                layout: {
+                    display: "horizontal" | "vertical";
+                    crescendo: boolean;
+                    curved: boolean;
+                    curveAngleX: number;
+                    curveAngleY: number;
+                    activeColor: string;
+                    inactiveColor: string;
+                    ticks: {
+                        gradient: {
+                            show: boolean;
+                            shiftHueIntensity: number;
+                        };
+                    };
+                };
+                percentage: {
+                    show: boolean;
+                    useGradientColor: boolean;
+                    color: string;
+                    fontSize: number;
+                    bold: boolean;
+                    rounding: 1;
+                    verticalPosition: "bottom" | "top";
+                    horizontalPosition: "left" | "right";
+                };
+                title: {
+                    text: string;
+                    color: string;
+                    fontSize: number;
+                    bold: boolean;
+                    subtitle: {
+                        color: string;
+                        text: string;
+                        fontSize: number;
+                        bold: boolean;
+                    };
+                };
+            };
+        };
+    };
+
+    export type VueUiTiremarksDataset = {
+        percentage: number;
+    }
+
+    export const VueUiTiremarks: DefineComponent<{
+        config?: VueUiTiremarksConfig;
+        dataset: VueUiTiremarksDataset;
+    }>;
+
     export type VueUiWheelConfig = {
         style: {
             fontFamily: string;