Merge branch 'dev' into main

Vue-Charts-CSS · Mar 22, 2021 · 80c9a20 · 80c9a20
2 parents 7424b6b + fe7ebb6
commit 80c9a20
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 16 deletions.
diff --git a/dist/vue-charts-css.min.js b/dist/vue-charts-css.min.js
diff --git a/example/dist/example.js b/example/dist/example.js
diff --git a/example/src/app.vue b/example/src/app.vue
@@ -2,6 +2,9 @@
     <div>
         <h1>Chart Examples</h1>
 
+        <button @click="addDataset">Add Dataset</button>
+        <button @click="removeDataset">Remove Dataset</button>
+
         <h2>Column</h2>
         <charts-css
              type="column"
@@ -20,10 +23,11 @@
 
          <h2>Bar</h2>
          <charts-css
+              v-if="datasets.length"
               type="bar"
-              heading="Bens coffee count"
+              :heading="datasets[0].name + '\'s coffee count'"
               :labels="labels"
-              :datasets="[{values: datasets[1].values }]"
+              :datasets="[ datasets[0], ]"
               :height="300"
               :data-spacing="20"
               :formatDataValue="(value) => value + ' coffee' + ( value > 1 ? 's':'' )"
@@ -39,7 +43,7 @@
           <h2>Area</h2>
           <charts-css
                type="area"
-               heading="Bens coffee count"
+               heading="Team's coffee count"
                :labels="labels"
                :datasets="datasets"
                :height="300"
@@ -54,7 +58,7 @@
            <h2>Line</h2>
            <charts-css
                 type="line"
-                heading="Bens coffee count"
+                heading="Team's coffee count"
                 :labels="labels"
                 :datasets="datasets"
                 :height="300"
@@ -92,5 +96,56 @@
                 ],
             };
         },
+
+        methods: {
+            addDataset()
+            {
+                this.datasets.push({
+                    name: this.generateName(),
+                    values: [this.generateNumber(), this.generateNumber(), this.generateNumber(), this.generateNumber(),],
+                });
+            },
+            removeDataset()
+            {
+                this.datasets = this.datasets.slice(1);
+            },
+            generateName()
+            {
+                const randomNames = [
+                    "Genaro",
+                    "Zandra",
+                    "Nancey",
+                    "Jeannette",
+                    "Michel",
+                    "Kacey",
+                    "Essie",
+                    "Kristi",
+                    "Manuel",
+                    "Cherrie",
+                    "Dollie",
+                    "Jordon",
+                    "Cathie",
+                    "Latoyia",
+                    "Herlinda",
+                ];
+                return randomNames[Math.floor(Math.random() * randomNames.length)];
+            },
+            generateNumber()
+            {
+                return Math.round(Math.random() * 100);
+            },
+
+            animate()
+            {
+                this.removeDataset();
+                this.addDataset();
+                setTimeout(this.animate, 2000);
+            }
+        },
+
+        mounted()
+        {
+            this.animate();
+        }
     }
 </script>
diff --git a/src/chart.vue b/src/chart.vue
@@ -18,7 +18,7 @@
 
         <slot name="legend" v-if="( $slots.legend || showLegend ) && this.datasets.length > 1">
             <ul :class="legendClasses">
-                <li v-for="(dataset, index) in datasets" :key="dataset.name">
+                <li v-for="(dataset, index) in datasets" :key="index + '' + datasets.length">
                     {{ dataset.name }}
                 </li>
             </ul>

diff --git a/src/charts/area.vue b/src/charts/area.vue
@@ -9,13 +9,13 @@
         <tbody>
             <tr
                 v-for="(row, rowIndex) in rows"
-                :key="row.name"
+                :key="rowIndex + '-' + row.length"
             >
                 <th scope="row">{{ labels[rowIndex] }}</th>
 
                 <td
                     v-for="(value, colIndex) in row"
-                    :key="rowIndex + '-' + colIndex + '-' + value.valueRaw"
+                    :key="colIndex + '-' + row.length"
                     :style="resolveDataStyle(value, rowIndex, colIndex)"
                 >
                     <span class="data">

diff --git a/src/charts/bar.vue b/src/charts/bar.vue
@@ -9,13 +9,13 @@
         <tbody>
             <tr
                 v-for="(row, rowIndex) in rows"
-                :key="row.name"
+                :key="rowIndex + '-' + row.length"
             >
                 <th scope="row">{{ labels[rowIndex] }}</th>
 
                 <td
                     v-for="(value, colIndex) in row"
-                    :key="rowIndex + '-' + colIndex + '-' + value.valueRaw"
+                    :key="colIndex + '-' + row.length"
                     :style="resolveDataStyle(value, rowIndex, colIndex)"
                 >
                     <span class="data">{{ formatDataValue(value.valueRaw) }}</span>

diff --git a/src/charts/column.vue b/src/charts/column.vue
@@ -9,13 +9,13 @@
         <tbody>
             <tr
                 v-for="(row, rowIndex) in rows"
-                :key="row.name"
+                :key="rowIndex + '-' + row.length"
             >
                 <th scope="row">{{ labels[rowIndex] }}</th>
 
                 <td
                     v-for="(value, colIndex) in row"
-                    :key="rowIndex + '-' + colIndex + '-' + value.valueRaw"
+                    :key="colIndex + '-' + row.length"
                     :style="resolveDataStyle(value, rowIndex, colIndex)"
                 >
                     <span class="data">

diff --git a/src/charts/line.vue b/src/charts/line.vue
@@ -9,13 +9,13 @@
         <tbody>
             <tr
                 v-for="(row, rowIndex) in rows"
-                :key="row.name"
+                :key="rowIndex + '-' + row.length"
             >
                 <th scope="row">{{ labels[rowIndex] }}</th>
 
                 <td
                     v-for="(value, colIndex) in row"
-                    :key="rowIndex + '-' + colIndex + '-' + value.valueRaw"
+                    :key="colIndex + '-' + row.length"
                     :style="resolveDataStyle(value, rowIndex, colIndex)"
                 >
                     <span class="data">