Ft ts rewrite

README.md

@@ -650,7 +650,7 @@ However the folowing charts can be made fully responsive, making them better to
 | VueUiSparkTrend             | -                              |
 | VueUiSparkbar               | -                              |
 | VueUiSparkgauge             | -                              |
-| VueUiSparkline              | -                              |
+| VueUiSparkline              | ✅                             |
 | VueUiStackbar               | ✅                             |
 | VueUiStripPlot              | ✅                             |
 | VueUiTableHeatmap           | -                              |

TestingArena/ArenaVueUiSparkline.vue

@@ -77,15 +77,16 @@ const dataset = ref([
 ])
 
 const model = ref([
+    { key: 'responsive', def: false, type: 'checkbox'},
     { key: 'type', def: 'line', type: 'select', options: ['line', 'bar']},
-    { key: 'style.chartWidth', def: 290, type: 'number', min: 100, max: 500},
+    { key: 'style.chartWidth', def: 400, type: 'number', min: 100, max: 500},
     { key: 'style.animation.show', def: true, type: 'checkbox'},
     { key: 'style.animation.animationFrames', def: 360, type: 'number', min: 0, max: 1000},
     { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.line.color', def: '#3366CC', type: 'color'},
     { key: 'style.line.strokeWidth', def: 3, type: 'number', min: 0, max: 20},
-    { key: 'style.line.smooth', def: false, type: 'checkbox'},
+    { key: 'style.line.smooth', def: true, type: 'checkbox'},
     { key: 'style.bar.borderRadius', def: 3, type: 'number', min: 0, max: 12},
     { key: 'style.bar.color', def: '#3366CC', type: 'color'},
     { key: 'style.zeroLine.color', def: '#1A1A1A', type: 'color'},
@@ -160,6 +161,14 @@ const step = ref(0)
             <option v-for="opt in themeOptions">{{ opt }}</option>
         </select>
     </div>
+
+    <div style="width: 600px; height: 400px; resize: both; overflow: auto; background: white">
+        <LocalVueUiSparkline :key="`responsive_${step}`" :dataset="dataset" :config="{
+            ...config,
+            responsive: true
+        }"/>
+    </div>
+
     <Box comp="VueUiSparkline" :dataset="dataset">
         <template #title>VueUiSparkline</template>
 

src/components/vue-ui-sparkline.vue

@@ -18,6 +18,8 @@ import themes from "../themes.json";
 import { useNestedProp } from "../useNestedProp";
 import Skeleton from "./vue-ui-skeleton.vue";
 import { useConfig } from "../useConfig";
+import { useResponsive } from "../useResponsive";
+import { throttle } from "../canvas-lib";
 
 const { vue_ui_sparkline: DEFAULT_CONFIG } = useConfig();
 
@@ -49,6 +51,8 @@ const isDataset = computed(() => {
 });
 
 const uid = ref(createUid());
+const sparklineChart = ref(null);
+const chartTitle = ref(null);
 
 const FINAL_CONFIG = computed(() => {
     const mergedConfig = useNestedProp({
@@ -79,7 +83,9 @@ const safeDatasetCopy = ref(props.dataset.map(d => {
             value: ![undefined].includes(d.value) ? d.value : null
         }
     }
-}))
+}));
+
+const resizeObserver = ref(null);
 
 onMounted(() => {
     if(objectIsEmpty(props.dataset)) {
@@ -122,11 +128,28 @@ onMounted(() => {
         animate()
     }
 
+    if (FINAL_CONFIG.value.responsive) {
+        const handleResize = throttle(() => {
+            const { width, height } = useResponsive({
+                chart: sparklineChart.value,
+                title: FINAL_CONFIG.value.style.title.show && props.showInfo ? chartTitle.value : null
+            });
+            svg.value.width = width;
+            svg.value.height = height;
+            svg.value.chartWidth = FINAL_CONFIG.value.style.chartWidth / 500 * width;
+            svg.value.padding = 30 / 500 * width;
+        });
+
+        resizeObserver.value = new ResizeObserver(handleResize);
+        resizeObserver.value.observe(sparklineChart.value.parentNode);
+    };
 })
 
 const svg = ref({
     height: 80,
     width: 500,
+    chartWidth: FINAL_CONFIG.value.style.chartWidth,
+    padding: 30
 });
 
 const emits = defineEmits(['hoverIndex', 'selectDatapoint'])
@@ -140,8 +163,8 @@ const drawingArea = computed(() => {
         left: 0,
         right: svg.value.width,
         bottom: svg.value.height - 3,
-        start: props.showInfo && FINAL_CONFIG.value.style.dataLabel.show && FINAL_CONFIG.value.style.dataLabel.position === 'left' ? svg.value.width - FINAL_CONFIG.value.style.chartWidth : 30,
-        width: props.showInfo && FINAL_CONFIG.value.style.dataLabel.show ? FINAL_CONFIG.value.style.chartWidth : svg.value.width - 30,
+        start: props.showInfo && FINAL_CONFIG.value.style.dataLabel.show && FINAL_CONFIG.value.style.dataLabel.position === 'left' ? svg.value.width - svg.value.chartWidth : svg.value.padding,
+        width: props.showInfo && FINAL_CONFIG.value.style.dataLabel.show ? svg.value.chartWidth : svg.value.width - svg.value.padding,
         height: svg.value.height - topPadding
     }
 });
@@ -267,7 +290,7 @@ function selectDatapoint(datapoint, index) {
 </script>
 
 <template>
-    <div class="vue-ui-sparkline" :id="uid" :style="`width:100%;font-family:${FINAL_CONFIG.style.fontFamily}`">
+    <div ref="sparklineChart"  class="vue-ui-sparkline" :id="uid" :style="`width:100%;font-family:${FINAL_CONFIG.style.fontFamily}`">
         <!-- SLOT BEFORE -->
         <slot 
             name="before" 
@@ -282,7 +305,7 @@ function selectDatapoint(datapoint, index) {
         />
 
         <!-- TITLE -->
-        <div v-if="FINAL_CONFIG.style.title.show && showInfo" class="vue-ui-sparkline-title" :style="`display:flex;align-items:center;width:100%;color:${FINAL_CONFIG.style.title.color};background:${FINAL_CONFIG.style.backgroundColor};justify-content:${FINAL_CONFIG.style.title.textAlign === 'left' ? 'flex-start' : FINAL_CONFIG.style.title.textAlign === 'right' ? 'flex-end' : 'center'};height:${FINAL_CONFIG.style.title.fontSize * 2}px;font-size:${FINAL_CONFIG.style.title.fontSize}px;font-weight:${FINAL_CONFIG.style.title.bold ? 'bold' : 'normal'};`">
+        <div ref="chartTitle" v-if="FINAL_CONFIG.style.title.show && showInfo" class="vue-ui-sparkline-title" :style="`display:flex;align-items:center;width:100%;color:${FINAL_CONFIG.style.title.color};background:${FINAL_CONFIG.style.backgroundColor};justify-content:${FINAL_CONFIG.style.title.textAlign === 'left' ? 'flex-start' : FINAL_CONFIG.style.title.textAlign === 'right' ? 'flex-end' : 'center'};height:${FINAL_CONFIG.style.title.fontSize * 2}px;font-size:${FINAL_CONFIG.style.title.fontSize}px;font-weight:${FINAL_CONFIG.style.title.bold ? 'bold' : 'normal'};`">
             <span data-cy="sparkline-period-label" :style="`padding:${FINAL_CONFIG.style.title.textAlign === 'left' ? '0 0 0 12px' : FINAL_CONFIG.style.title.textAlign === 'right' ? '0 12px 0 0' : '0'}`">
                 {{ selectedPlot ? selectedPlot.period : FINAL_CONFIG.style.title.text }}
             </span>

src/useConfig.js

@@ -1929,6 +1929,7 @@ export function useConfig() {
 
     const vue_ui_sparkline = {
         theme: '',
+        responsive: false,
         type: SHAPE.LINE,
         style: {
             chartWidth: 290,

types/vue-data-ui.d.ts

@@ -3624,6 +3624,7 @@ declare module 'vue-data-ui' {
     export type VueUiSparklineConfig = {
         theme?: Theme;
         type?: "line" | "bar";
+        responsive?: boolean;
         style?: {
             backgroundColor?: string;
             fontFamily?: string;