✨ add frequency to pie chart

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spring",
-  "version": "0.2.4-beta",
+  "version": "0.2.5-beta",
   "private": true,
   "author": {
     "name": "Martin Roček",

src/assets/main.css

@@ -649,6 +649,12 @@ body {
   position: relative;
   transition: color, background .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
+.select__selected-choice::first-letter {
+  text-transform: uppercase;
+}
+.select__list li::first-letter {
+  text-transform: uppercase;
+}
 .select__choice:hover {
   background-color: var(--blue-300);
   color: var(--white);

src/components/PieChart.vue

@@ -1,8 +1,21 @@
 <template>
     <div class="graph-selectors">
-      <Select :columns="file.columns" v-model="chart.filters.category" @update:modelValue="(value) => setChartFilterCategory(value)" />
-      <Select :columns="file.columns" v-model="chart.filters.value" @update:modelValue="(value) => setChartFilterValue(value)" />
-      <Select :columns="subCategories" v-model="chart.filters.subCategory" @update:modelValue="(value) => setChartFilterSubCategory(value)" />
+      <Select
+        :columns="file.columns"
+        v-model="chart.filters.category"
+        @update:modelValue="(value) => setChartFilterCategory(value)"
+      />
+      <Select
+        :columns="valueColumns"
+        v-model="chart.filters.value"
+        @update:modelValue="(value) => setChartFilterValue(value)"
+      />
+      <Select
+        v-if="chart.filters.value !== frequencyColumn"
+        :columns="subCategories"
+        v-model="chart.filters.subCategory"
+        @update:modelValue="(value) => setChartFilterSubCategory(value)"
+      />
     </div>
     <div style="height: 100%;">
       <div id="pie-chart" style="height: 100%;" />
@@ -64,6 +77,7 @@ export default {
       chart: {
         instance: null,
         rows: [],
+        values: [],
         filters: {
           category: null,
           value: null,
@@ -84,6 +98,15 @@ export default {
   },
 
   computed: {
+    frequencyColumn () {
+      return this.$t('chart.column.frequency')
+    },
+    valueColumns () {
+      const columns = [...this.file.columns]
+      columns.unshift(this.frequencyColumn)
+
+      return columns
+    },
     subCategories () {
       return Object.keys(this.chart.subCategories)
     }
@@ -109,13 +132,18 @@ export default {
     },
     setChartFilterValue (value) {
       this.chart.filters.value = value
+      this.chart.values = this.countFrequencyBasedOnColumn(this.chart.filters.value, this.chart.rows)
       this.setChartFilterSubCategory(this.subCategories[0], false)
 
       this.renderChart()
     },
     setChartFilterSubCategory (value, drawChart = true) {
       this.chart.filters.subCategory = value
 
+      if (this.chart.filters.value === this.frequencyColumn) {
+        this.chart.values = this.countFrequencyBasedOnColumn(this.chart.filters.subCategory, this.chart.rows)
+      }
+
       if (drawChart) {
         this.renderChart()
       }
@@ -144,13 +172,20 @@ export default {
     drawPieChart () {
       this.disposeExistingChartInstance()
 
-      const values =  this.convertRowsToChartData(this.chart).data
-
+      let values = []
       const chart = am4core.create("pie-chart", am4charts.PieChart)
+
+      if (this.chart.filters.value === this.frequencyColumn) {
+        values = this.getFrequency(this.chart, this.chart.split)
+        chart.legend = Object.keys(this.subCategories).length < 28 ? new am4charts.Legend() : false
+      } else {
+        values = this.convertRowsToChartData(this.chart).data
+        chart.legend = Object.keys(this.chart.values).length < 28 ? new am4charts.Legend() : false
+      }
+
       chart.data = values
       chart.radius = am4core.percent(70)
       chart.innerRadius = am4core.percent(40)
-      chart.legend = new am4charts.Legend()
       chart.startAngle = 180
       chart.endAngle = 360
 

src/components/Select.vue

@@ -2,7 +2,7 @@
   <div :class="['select', { 'select--active': visible}]" v-click-outside="hideSelect">
     <div class="select__choice" @click="toggleSelect">
       <slot></slot>
-      {{ selected }}
+      <span class="select__selected-choice">{{ selected }}</span>
       <font-awesome-icon :icon="['far', 'caret-down']" />
     </div>
     <ul v-if="visible" class="select__list">

src/mixins/chartOperations.js

@@ -8,7 +8,7 @@ export default {
       return this.appStore.get('sharedDocumentFilters') || false
     },
     chartData () {
-      if (this.shareFilterSettings && this.copy.content.length > 0) {
+      if (this.shareFilterSettings && this.copy.content !== null) {
         return {
           content: this.copy.content,
           // Charts should always have all columns available

src/translations/cs.json

@@ -48,7 +48,7 @@
       "title": "Nastavení souboru",
       "multi-value_columns": "Více-hodnotové sloupce",
       "multi-value_columns_description": "V této části nastavení lze zvolit, které sloupce mohou obsahovat více než jednu hodnotu. Ve zdrojovém souboru by měly být označeny prefixem #:, tedy například <span class='do-not-break is-example'>1: hodnota.</span> Nastavení více-hodnotového sloupce umožňuje propojit několik hodnot v jednom řádku. Tedy například, pokud jsou v jednom řádku dvě osoby - <span class='do-not-break is-example'>1: osoba; 2: osoba.</span> Lze k nim přiřadit další vlastnost, například barvu oblečení - <span class='do-not-break is-example'>1: červené; 2: modré.</span> V grafu pak dojde k logickému rozdělení hodnot a započítání 1 osoby s červeným oblečením a druhé s modrým. Zároveň není nutné, aby byly obě hodnoty vždy přítomny, tedy například může být popsána pouze první osoba.",
-      "multi-value_columns_toggle": "Sdílý hodnotu napříč řádky",
+      "multi-value_columns_toggle": "Sdílí hodnotu napříč řádky",
       "multi-value_columns_button": "Označit sloupec jako pole",
       "multi-value_columns_marked_columns": "Označené sloupce",
       "multi-value_columns_shared": ", sdílený: ",

src/views/Document.vue

@@ -175,7 +175,7 @@ export default {
       return this.copy.content
     },
     tableColumns () {
-      if (this.copy.content && this.copy.content.length > 0) {
+      if (this.copy.columns && this.copy.columns.length > 0) {
         return this.copy.columns
       }
       return this.file.columns
@@ -282,7 +282,7 @@ export default {
           }
         }
 
-        if (!passedFilters.includes(true)) {
+        if (!passedFilters.includes(true) && passedFilters.length > 0) {
           delete data[rowIndex]
         }
       }