Merge pull request #19 from graphieros/Remove-XLSX-dependency

Removed XLSX dependency
graphieros · Jan 1, 2024 · 92f7e1b · 92f7e1b
2 parents 5b6f6b6 + 0da6819
commit 92f7e1b
Show file tree

Hide file tree

Showing 35 changed files with 198 additions and 301 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.51",
+  "version": "1.9.52",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
@@ -77,7 +77,6 @@
     "vite": "^4.4.5",
     "vitest": "^0.34.1",
     "vue": "^3.3.4",
-    "vue-data-ui": "file:../vue-data-ui",
-    "xlsx": "^0.18.5"
+    "vue-data-ui": "file:../vue-data-ui"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -3130,31 +3130,31 @@ function printXy() {
   xytest.value.generatePdf();
 }
 function xlsXy() {
-  xytest.value.generateXls();
+  xytest.value.generateCsv();
 }
 function printDonut(){
   donuttest.value.generatePdf();
 }
 function xlsDonut() {
-  donuttest.value.generateXls();
+  donuttest.value.generateCsv();
 }
 function printWaffle(){
   waffletest.value.generatePdf();
 }
 function xlsWaffle() {
-  waffletest.value.generateXls();
+  waffletest.value.generateCsv();
 }
 function printRadar(){
   radartest.value.generatePdf();
 }
 function xlsRadar() {
-  radartest.value.generateXls();
+  radartest.value.generateCsv();
 }
 function printQuadrant(){
   quadranttest.value.generatePdf();
 }
 function xlsQuadrant() {
-  quadranttest.value.generateXls();
+  quadranttest.value.generateCsv();
 }
 const gaugetest = ref(null);
 function printGauge(){
@@ -3166,54 +3166,54 @@ function printChestnut(){
   chestnuttest.value.generatePdf();
 }
 function xlsChestnut() {
-  chestnuttest.value.generateXls();
+  chestnuttest.value.generateCsv();
 }
 
 const oniontest = ref(null);
 function printOnion(){
   oniontest.value.generatePdf();
 }
 function xlsOnion() {
-  oniontest.value.generateXls();
+  oniontest.value.generateCsv();
 }
 
 const verticaltest = ref(null);
 function printVB(){
   verticaltest.value.generatePdf();
 }
 function xlsVB() {
-  verticaltest.value.generateXls();
+  verticaltest.value.generateCsv();
 }
 
 const heatmaptest = ref(null);
 function printHeatmap(){
   heatmaptest.value.generatePdf();
 }
 function xlsHeatmap() {
-  heatmaptest.value.generateXls();
+  heatmaptest.value.generateCsv();
 }
 
 function printScatter(){
   scatter.value.generatePdf();
 }
 function xlsScatter() {
-  scatter.value.generateXls();
+  scatter.value.generateCsv();
 }
 
 const candlestick = ref(null);
 function printCandle(){
   candlestick.value.generatePdf();
 }
 function xlsCandle() {
-  candlestick.value.generateXls();
+  candlestick.value.generateCsv();
 }
 
 const pyramid = ref(null);
 function printPyramid(){
   pyramid.value.generatePdf();
 }
 function xlsPyramid() {
-  pyramid.value.generateXls();
+  pyramid.value.generateCsv();
 }
 
 const relation = ref(null);

diff --git a/src/atoms/UserOptions.vue b/src/atoms/UserOptions.vue
@@ -54,14 +54,14 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['generatePdf', 'generateXls', 'generateImage', 'toggleTable', 'toggleLabels', 'toggleSort']);
+const emit = defineEmits(['generatePdf', 'generateCsv', 'generateImage', 'toggleTable', 'toggleLabels', 'toggleSort']);
 
 function generatePdf() {
     emit('generatePdf');
 }
 
-function generateXls() {
-    emit('generateXls');
+function generateCsv() {
+    emit('generateCsv');
 }
 
 function generateImage() {
@@ -120,7 +120,7 @@ function toggleSort() {
                 <BaseIcon v-else name="pdf" :stroke="color" />
             </button>
 
-            <button tabindex="0" v-if="hasXls" data-cy="user-options-xls" class="vue-ui-user-options-button" @click="generateXls">
+            <button tabindex="0" v-if="hasXls" data-cy="user-options-xls" class="vue-ui-user-options-button" @click="generateCsv">
                 <BaseIcon name="excel" :stroke="color" />
             </button>
 

diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { opacity, makeXls, shiftHue, createUid } from '../lib';
+import { opacity, shiftHue, createUid, createCsvContent, downloadCsv } from '../lib';
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
@@ -234,7 +234,7 @@ function generateImage() {
     }, 100)
 }
 
-function generateXls() {
+function generateCsv() {
     nextTick(() => {
         const labels = [agePyramidConfig.value.translations.year, agePyramidConfig.value.translations.age, agePyramidConfig.value.translations.female, agePyramidConfig.value.translations.male, agePyramidConfig.value.translations.total];
 
@@ -249,14 +249,14 @@ function generateXls() {
         });
 
         const tableXls = [[agePyramidConfig.value.style.title.text],[agePyramidConfig.value.style.title.subtitle.text],[[""],[""],[""]]].concat([labels]).concat(values)
-
-        makeXls(tableXls, agePyramidConfig.value.style.title.text || "vue-ui-heatmap");
+        const csvContent = createCsvContent(tableXls);
+        downloadCsv({ csvContent, title: agePyramidConfig.value.style.title.text || "vue-ui-heatmap"});
     });
 }
 
 defineExpose({
     generatePdf,
-    generateXls,
+    generateCsv,
     generateImage
 });
 
@@ -299,7 +299,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             @generatePdf="generatePdf"
-            @generateXls="generateXls"
+            @generateCsv="generateCsv"
             @generateImage="generateImage"
             @toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
         />