From 8baddb78f750fe46e4bba2c44f199901dc1d24c6 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 26 Nov 2023 17:50:31 +0100
Subject: [PATCH] VueUiSparkline add verticalIndicator color & strokeDasharray
 options

---
 README.md                           | 38 ++++++++++++++++++++++++++++-
 package-lock.json                   |  4 +--
 package.json                        |  2 +-
 src/components/vue-ui-sparkline.vue |  3 ++-
 src/default_configs.json            |  4 ++-
 types/vue-data-ui.d.ts              |  2 ++
 6 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index ed45e121..89e6b9f1 100644
--- a/README.md
+++ b/README.md
@@ -56,4 +56,40 @@ Available components:
 - [VueUiScreenshot](https://vue-data-ui.graphieros.com/docs#vue-ui-screenshot)
 - [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton)
 - [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)
-- [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
\ No newline at end of file
+- [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
+
+# Installation
+```
+npm i vue-data-ui
+```
+
+You can declare components globally in your main.js:
+
+```
+import { createApp } from 'vue'
+import App from "./App.vue";
+// Include the css;
+import "vue-data-ui/style.css";
+
+// You can declare Vue Data UI components globally
+import { VueUiRadar } from "vue-data-ui";
+
+const app = createApp(App);
+
+app.component("VueUiRadar", VueUiRadar);
+app.mount('#app');
+```
+
+Or you can import just what you need in your files:
+
+```
+<script setup>
+  import { VueUiRadar, VueUiXy } from "vue-data-ui";
+</script>
+```
+
+## Typescript
+Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
+
+## Nuxt
+[Check this repo for a boilerplate implementation in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
diff --git a/package-lock.json b/package-lock.json
index 2086c099..051b4862 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.5",
+      "version": "1.9.6",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 2427f672..04996cdd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.6",
+  "version": "1.9.7",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/components/vue-ui-sparkline.vue b/src/components/vue-ui-sparkline.vue
index 9e2915e9..a1bec70c 100644
--- a/src/components/vue-ui-sparkline.vue
+++ b/src/components/vue-ui-sparkline.vue
@@ -211,9 +211,10 @@ const isBar = computed(() => {
                     :x2="plot.x"
                     :y1="drawingArea.top - 6"
                     :y2="drawingArea.bottom"
-                    :stroke="plot.color"
+                    :stroke="sparklineConfig.style.verticalIndicator.color || plot.color"
                     :stroke-width="sparklineConfig.style.verticalIndicator.strokeWidth"
                     stroke-linecap="round"
+                    :stroke-dasharray="sparklineConfig.style.verticalIndicator.strokeDasharray || 0"
                 />
             </g>
 
diff --git a/src/default_configs.json b/src/default_configs.json
index 30c02606..9c4b8880 100644
--- a/src/default_configs.json
+++ b/src/default_configs.json
@@ -1484,7 +1484,9 @@
             },
             "verticalIndicator": {
                 "show": true,
-                "strokeWidth": 1.5
+                "strokeWidth": 1.5,
+                "color": "#3366cc",
+                "strokeDasharray": 3
             },
             "dataLabel": {
                 "position": "left",
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index 2c1087b0..e728e11e 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -2235,6 +2235,8 @@ declare module 'vue-data-ui' {
             verticalIndicator?: {
                 show?: boolean;
                 strokeWidth?: number;
+                color?: string;
+                strokeDasharray?: number;
             };
             dataLabel?: {
                 position?: "left" | "right";