Merge pull request #159 from libvue/feature/mixed-chart

Feature/mixed chart
libvue · Apr 22, 2024 · 9477e9a · 9477e9a
2 parents cd8757d + 98a5445
commit 9477e9a
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@libvue/core",
-    "version": "1.2.1",
+    "version": "1.3.0",
     "private": false,
     "scripts": {
         "dev": "vite",
@@ -31,7 +31,7 @@
         "date-fns": "^2.30.0",
         "embla-carousel": "^8.0.0-rc14",
         "focus-trap": "^7.5.4",
-        "lucide-static": "^0.290.0",
+        "lucide-static": "^0.372.0",
         "tiny-emitter": "^2.1.0",
         "tippy.js": "^6.3.7",
         "tippy.vue": "^3.2.1",

diff --git a/src/docs/views/documentation/components/lv-chart.vue b/src/docs/views/documentation/components/lv-chart.vue
@@ -6,8 +6,7 @@
         <template #line>
             <lv-card v-space-after="1">
                 <lv-flex>
-                    <lv-chart :loading="loading" :datasets="datasets" :labels="labels" height="300px" show-grid />
-                    <lv-button label="Randomize" color="solid-dimmed-primary" icon="rotate-cw" @click="onClickRandomize"/>
+                    <lv-chart :datasets="defaultDataSets" :labels="labels" height="300px" show-grid />
                 </lv-flex>
             </lv-card>
             <code-preview v-space-after="1" lang="html" :code="codeLineChartTemplate" />
@@ -16,39 +15,73 @@
         <template #bar>
             <lv-card v-space-after="1">
                 <lv-flex>
-                    <lv-chart :loading="loading" :datasets="datasets" :labels="labels" type="bar" height="300px" />
-                    <lv-button label="Randomize" color="solid-dimmed-primary" icon="rotate-cw" @click="onClickRandomize"/>
+                    <lv-chart :datasets="defaultDataSets" :labels="labels" type="bar" height="300px" />
                 </lv-flex>
             </lv-card>
             <code-preview v-space-after="1" lang="html" :code="codeBarChartTemplate" />
             <code-preview v-space-after="1" lang="javascript" :code="codeChartScript" />
         </template>
+        <template #combined>
+            <lv-card v-space-after="1">
+                <lv-flex>
+                    <lv-chart :datasets="combinedDataSets" :labels="labels" height="300px" />
+                </lv-flex>
+            </lv-card>
+            <code-preview v-space-after="1" lang="html" :code="codeCombinedChartTemplate" />
+            <code-preview v-space-after="1" lang="javascript" :code="codeCombinedScript" />
+        </template>
     </lv-tabs>
     <component-details component="LvChart"></component-details>
 </template>
 
 <script>
 const codeBarChartTemplate = `
-<lv-chart :loading="loading" :datasets="datasets" :labels="labels" height="300px" show-grid />
+<lv-chart :loading="loading" :datasets="datasets" :labels="labels" height="300px" type="bar" show-grid />
 `.trim();
 const codeLineChartTemplate = `
-<lv-chart :loading="loading" :datasets="datasets" :labels="labels" type="bar" height="300px" />
+<lv-chart :loading="loading" :datasets="datasets" :labels="labels" height="300px" />
+`.trim();
+const codeCombinedChartTemplate = `
+<lv-chart :loading="loading" :datasets="datasets" :labels="labels" height="300px" />
 `.trim();
 const codeChartScript = `
 export default {
     data() {
         return {
             labels: ['January', 'February', 'March', 'April', 'May', 'June'],
             datasets: [
+                {
+                    label: 'Ice Days',
+                    hue: 200,
+                    data: [10, 50, 90, 30, 40, 50],
+                },
                 {
                     label: 'Temperature',
-                    hue: 24,
-                    data: [55, 12, 20, 34, 1, 4],
+                    hue: 250,
+                    data: [50, 90, 30, 40, 50, 10],
                 },
+            ],
+        };
+    },
+};
+`.trim();
+const codeCombinedScript = `
+export default {
+    data() {
+        return {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+            datasets: [
                 {
                     label: 'Ice Days',
-                    hue: 11,
-                    data: [1, 4, 55, 12, 20, 34],
+                    hue: 200,
+                    type: 'bar',
+                    data: [10, 50, 90, 30, 40, 50],
+                },
+                {
+                    label: 'Temperature',
+                    hue: 250,
+                    type: 'line',
+                    data: [50, 90, 30, 40, 50, 10],
                 },
             ],
         };
@@ -60,46 +93,43 @@ export default {
         return {
             codeChartScript,
             codeLineChartTemplate,
+            codeCombinedChartTemplate,
             codeBarChartTemplate,
+            codeCombinedScript,
             labels: ['January', 'February', 'March', 'April', 'May', 'June'],
             activeTab: 'line',
             tabs: [
                 { id: 'line', title: 'Line Chart', icon: 'line-chart' },
                 { id: 'bar', title: 'Bar Chart', icon: 'bar-chart-3' },
+                { id: 'combined', title: 'Combined Chart', icon: 'blend' },
             ],
-            datasets: [],
-            loading: true,
-        };
-    },
-    mounted() {
-        this.loading = false;
-        this.datasets = this.getRandomDatasets();
-    },
-    methods: {
-        getRandomDatasets() {
-            return [
+            defaultDataSets: [
+                {
+                    label: 'Ice Days',
+                    hue: 200,
+                    data: [10, 50, 90, 30, 40, 50],
+                },
                 {
                     label: 'Temperature',
-                    hue: 24,
-                    data: [this.getRandomNumber(), this.getRandomNumber(), this.getRandomNumber(), this.getRandomNumber(), this.getRandomNumber(), this.getRandomNumber()],
+                    hue: 250,
+                    data: [50, 90, 30, 40, 50, 10],
                 },
+            ],
+            combinedDataSets: [
                 {
                     label: 'Ice Days',
-                    hue: 11,
-                    data: [this.getRandomNumber(), this.getRandomNumber(), this.getRandomNumber(), this.getRandomNumber(), this.getRandomNumber(), this.getRandomNumber()],
+                    hue: 200,
+                    type: 'line',
+                    data: [10, 50, 90, 30, 40, 50],
+                },
+                {
+                    label: 'Temperature',
+                    hue: 250,
+                    type: 'bar',
+                    data: [50, 90, 30, 40, 50, 10],
                 },
-            ];
-        },
-        getRandomNumber() {
-            return Math.floor(Math.random() * 101);
-        },
-        onClickRandomize() {
-            this.loading = true;
-            setTimeout(() => {
-                this.loading = false;
-                this.datasets = this.getRandomDatasets();
-            }, 300);
-        }
-    }
+            ],
+        };
+    },
 };
 </script>
diff --git a/src/lib/components/LvChart/LvChart.vue b/src/lib/components/LvChart/LvChart.vue
@@ -251,13 +251,23 @@ export default {
                     gradientBackground.addColorStop(0, `hsla(${dataset.hue}, 100%, 60%, 0.2)`);
                     gradientBackground.addColorStop(1, `hsla(${dataset.hue}, 100%, 60%, 0)`);
 
-                    if (this.type === 'line') {
-                        dataset.backgroundColor = gradientBackground;
-                    }
-                    if (this.type === 'bar') {
-                        dataset.backgroundColor = `hsla(${dataset.hue}, 100%, 60%, 1)`;
+                    if(dataset.type) {
+                        if (dataset.type === 'line') {
+                            dataset.backgroundColor = gradientBackground;
+                        }
+                        if (dataset.type === 'bar') {
+                            dataset.backgroundColor = `hsla(${dataset.hue}, 100%, 60%, 1)`;
+                        }
+                    } else {
+                        if (this.type === 'line') {
+                            dataset.backgroundColor = gradientBackground;
+                        }
+                        if (this.type === 'bar') {
+                            dataset.backgroundColor = `hsla(${dataset.hue}, 100%, 60%, 1)`;
+                        }
                     }
 
+
                     dataset.borderColor = `hsla(${dataset.hue}, 100%, 60%, 1)`;
                     dataset.pointBackgroundColor = `hsla(${dataset.hue}, 100%, 60%, 1)`;
                     dataset.fill = true;