VueUiSparkline add verticalIndicator color & strokeDasharray options

Author: graphieros

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)
+- [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)

package-lock.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": [

package.json

@@ -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>
 

src/components/vue-ui-sparkline.vue

@@ -1484,7 +1484,9 @@
             },
             "verticalIndicator": {
                 "show": true,
-                "strokeWidth": 1.5
+                "strokeWidth": 1.5,
+                "color": "#3366cc",
+                "strokeDasharray": 3
             },
             "dataLabel": {
                 "position": "left",

src/default_configs.json

@@ -2235,6 +2235,8 @@ declare module 'vue-data-ui' {
             verticalIndicator?: {
                 show?: boolean;
                 strokeWidth?: number;
+                color?: string;
+                strokeDasharray?: number;
             };
             dataLabel?: {
                 position?: "left" | "right";