🔖 0.2.1-beta

package.json

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

src/assets/main.css

@@ -431,7 +431,15 @@ body {
   list-style: none;
   overflow: auto !important;
   max-height: 70vh;
-  columns: 2;
+  text-align-last: left;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.modal-body__option-list li {
+  flex-basis: 50%;
 }
 .modal-body__option-list button {
   background: none;
@@ -473,6 +481,8 @@ body {
 .graph__tabs {
   margin-top: 2rem;
   margin-bottom: 1.6rem;
+  display: flex;
+  justify-content: space-between;
 }
 .graph__tabs a {
   background: none;
@@ -490,6 +500,18 @@ body {
 .graph__tabs a.router-link-exact-active {
   color: var(--blue-500);
 }
+.chart-filter-warning {
+  font-size: .9rem;
+  color: var(--blue-300);
+  cursor: pointer;
+  transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.chart-filter-warning:hover {
+  color: var(--blue-500);
+}
+.chart-filter-warning svg {
+  margin-right: .5rem;
+}
 
 .chart-range-sliders {
   padding-top: .25rem;

src/assets/settings.css

@@ -14,6 +14,8 @@ body {
 
   --green-200: #69BAA8;
 
+  --yellow-200: #DEA422;
+
   --shadow-sm: 0 3px 6px rgba(0, 42, 110, 6%);
 
   --modal-bg: rgba(24, 29, 51, 50%);
@@ -36,6 +38,8 @@ body {
 
     --green-200: #7EE095;
 
+    --yellow-200: #DBC476;
+
     --shadow-sm: 0 3px 6px rgba(12, 14, 26, 10%);
   }
 }
@@ -56,6 +60,8 @@ body.theme-dark {
 
   --green-200: #7EE095;
 
+  --yellow-200: #DBC476;
+
   --shadow-sm: 0 3px 6px rgba(12, 14, 26, 10%);
 }
 

src/background.js

@@ -111,9 +111,13 @@ ipcMain.handle('open-xslx-file', async (event, path) => {
   const data = await openFile(event, path)
 
   const jsonFile = new Store(`${data.fileName}.json`)
+  // Save file content.
   jsonFile.set({ key: 'columns', value: data.columns })
   jsonFile.set({ key: 'content', value: data.content })
   jsonFile.set({ key: 'fileName', value: data.fileName })
+  // Reset copy data when file was re-opened.
+  jsonFile.set({ key: 'copy', value: { content: [], columns: [] } })
+  // Set last opened file, so we can start with already opened file.
   store.set({ key: 'lastOpenedFile', value: `${data.fileName}.json` })
 })
 

src/components/AxisChart.vue

@@ -162,12 +162,14 @@ export default {
      */
     loadAfterFile () {
       // Prepare rows for chart rendering
-      this.chart.rows = this.prepareRowsForChart(this.file)
+      this.chart.rows = this.prepareRowsForChart(this.chartData, this.file.arrayableColumns)
 
       // Set default choices for every select
       this.setChartFilterCategory(this.file.columns[0])
       this.setChartFilterValue('Četnost')
       this.setChartFilterSubCategory(this.subCategories[0])
+
+      this.emitDocumentFiltersSharingStatus()
     },
     updateChartRange () {
       clearTimeout(this.rangeUpdateTimer)
@@ -302,6 +304,7 @@ export default {
       options.quality = 1
       chart.exporting.setFormatOptions('png', options)
       chart.exporting.backgroundColor = am4core.color("#f00", 0)
+      chart.exporting.filePrefix = 'spring'
 
       // Define methods that can be used to draw the chart based on the data type.
       const chartConstructor = {

src/components/FileInformation.vue

@@ -4,7 +4,7 @@
       {{ fileName  || 'žádný soubor nebyl vybrán' }}
     </h3>
     <div>
-      <button class="button__round" style="margin-right: 1rem;" @click.prevent="exportChart"><!--
+      <button v-if="$route.meta.exportable" class="button__round" style="margin-right: 1rem;" @click.prevent="exportChart"><!--
         --><font-awesome-icon :icon="['far', 'file-export']" /><!--
       --></button>
       <button class="button__round" @click.prevent="openXslxFile"><!--

src/components/PieChart.vue

@@ -86,17 +86,19 @@ export default {
   computed: {
     subCategories () {
       return Object.keys(this.chart.subCategories)
-    },
+    }
   },
 
   methods: {
     loadAfterFile () {
-      this.chart.rows = this.prepareRowsForChart(this.file)
+      this.chart.rows = this.prepareRowsForChart(this.chartData, this.file.arrayableColumns)
 
       // Set default choices for every select
       this.setChartFilterCategory(this.file.columns[0])
       this.setChartFilterValue(this.file.columns[1])
       this.setChartFilterSubCategory(this.subCategories[0])
+
+      this.emitDocumentFiltersSharingStatus()
     },
     setChartFilterCategory (value) {
       this.chart.filters.category = value
@@ -165,6 +167,7 @@ export default {
       options.quality = 1
       chart.exporting.setFormatOptions('png', options)
       chart.exporting.backgroundColor = am4core.color("#f00", 0)
+      chart.exporting.filePrefix = 'spring'
 
       this.chart.instance = chart
     }

src/components/Select.vue

@@ -58,7 +58,6 @@ export default {
     if (this.scopedValue) {
       if (this.isObject(this.columns[0])) {
         const index = this.columns.findIndex(item => item.key === this.scopedValue)
-        console.log(index)
         if (index > -1) {
           this.selected = this.columns[index].value
         }

src/main.js

@@ -5,7 +5,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faFile, faSearch, faColumns, faChartPie, faCog, faFolderOpen, faCaretDown,
   faTimesCircle, faPlusCircle, faSquare, faCheckSquare, faFilter, faCompressAlt,
-  faExpandAlt, faFileExport
+  faExpandAlt, faFileExport, faBrowser, faExclamationTriangle
 } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { Quasar, QVirtualScroll } from 'quasar'
@@ -18,7 +18,7 @@ import './assets/responsive.css'
 library.add(
   faFile, faSearch, faColumns, faChartPie, faCog, faFolderOpen, faCaretDown,
   faTimesCircle, faPlusCircle, faSquare, faCheckSquare, faFilter, faCompressAlt,
-  faExpandAlt, faFileExport
+  faExpandAlt, faFileExport, faBrowser, faExclamationTriangle
 )
 
 const app = createApp(App)

src/mixins/chartOperations.js

@@ -1,6 +1,31 @@
+import applicationSettings from '@/mixins/applicationSettings'
+
 export default {
+  emits: ['data-are-filtered'],
+  mixins: [applicationSettings],
+  computed: {
+    shareFilterSettings () {
+      return this.appStore.get('sharedDocumentFilters') || false
+    },
+    chartData () {
+      if (this.shareFilterSettings && this.copy.content.length > 0) {
+        return {
+          content: this.copy.content,
+          // Charts should always have all columns available
+          columns: this.file.columns
+        }
+      }
+
+      return this.file
+    },
+  },
   methods: {
-    prepareRowsForChart ({ content, arrayableColumns }) {
+    emitDocumentFiltersSharingStatus () {
+      this.$emit('data-are-filtered', {
+        active: this.shareFilterSettings, filters: this.file.filters
+      })
+    },
+    prepareRowsForChart ({ content }, arrayableColumns) {
       const rows = []
 
       content.forEach((row) => {

src/mixins/fileOperations.js

@@ -24,6 +24,10 @@ export default {
         setDataTypes: [],
         arrayableColumns: []
       },
+      copy: {
+        content: [],
+        columns: []
+      },
       store: {}
     }
   },
@@ -36,6 +40,9 @@ export default {
       this.file.content = store.content
       this.file.setDataTypes = store.setDataTypes || []
       this.file.arrayableColumns = store.arrayableColumns || []
+      this.file.filters = store.filters || []
+      this.copy = store.copy
+
       if (this.loadAfterFile && typeof this.loadAfterFile === 'function') {
         this.loadAfterFile()
       } else {

src/router/index.js

@@ -19,11 +19,17 @@ const routes = [
         path: '',
         name: 'PieChart',
         component: () => import(/* webpackChunkName: "graph-pie" */ '../components/PieChart.vue'),
+        meta: {
+          exportable: true
+        }
       },
       {
         path: '/axis',
         name: 'AxisChart',
         component: () => import(/* webpackChunkName: "graph-axis" */ '../components/AxisChart.vue'),
+        meta: {
+          exportable: true
+        }
       }
     ]
   },

src/views/Graphs.vue

@@ -1,20 +1,70 @@
 <template>
   <div id="app-graphs">
     <div class="graph__tabs">
-      <router-link :to="{ name: 'PieChart' }">Koláčový</router-link>
-      <router-link :to="{ name: 'AxisChart' }">Sloupcový</router-link>
+      <div>
+        <router-link :to="{ name: 'PieChart' }">Koláčový</router-link>
+        <router-link :to="{ name: 'AxisChart' }">Sloupcový</router-link>
+      </div>
+      <div>
+        <span v-if="documentFilters.active" class="chart-filter-warning" @click.stop="toggleModal">
+          <font-awesome-icon :icon="['far', 'exclamation-triangle']" />
+          filtry z dokumentu jsou aktivní
+        </span>
+      </div>
     </div>
-    <router-view :current-file="currentFile"></router-view>
+    <router-view :current-file="currentFile" @data-are-filtered="documentFilterActive"></router-view>
+    <Modal v-if="modalVisible">
+      <div class="modal-body w-400">
+        <h3>Aktivní filtry</h3>
+        <ul class="modal-body__option-list">
+          <li v-for="filter in Object.keys(documentFilters.filters)" :key="filter">
+              {{ filter }}: {{ documentFilters.filters[filter].values.join(', ') }}
+          </li>
+        </ul>
+        <button class="button__primary" @click.prevent="toggleModal">Zavřít</button>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script>
+import Modal from '@/components/Modal'
+
 export default {
+  name: 'chart-page',
+
+  components: {
+    Modal
+  },
+
   props: {
     currentFile: {
       type: String,
       default: null
     },
+  },
+
+  data () {
+    return {
+      documentFilters: {
+        active: false,
+        filters: {}
+      },
+      modalVisible: false
+    }
+  },
+
+  methods: {
+    documentFilterActive ({ active, filters }) {
+      console.log(Object.keys(filters).length)
+      if (Object.keys(filters).length > 0) {
+        this.documentFilters.active = active
+        this.documentFilters.filters = filters
+      }
+    },
+    toggleModal () {
+      this.modalVisible = !this.modalVisible
+    }
   }
 }
 </script>