modify bar chart style

src/filters/percent.js

@@ -0,0 +1,11 @@
+export default function (value, precision, lowPrecisionValue) {
+    const ratio = Math.pow(10, precision);
+    const normalizedValue = Math.floor(value * ratio);
+
+    if (value > 0 && normalizedValue < 1 && lowPrecisionValue) {
+        return lowPrecisionValue + '%';
+    }
+
+    const result = normalizedValue / ratio;
+    return result + '%';
+}

src/mobile-main.js

@@ -18,6 +18,7 @@ import Framework7Actions from 'framework7/components/actions/actions';
 import Framework7Sheet from 'framework7/components/sheet/sheet';
 import Framework7Toast from 'framework7/components/toast/toast';
 import Framework7Preloader from 'framework7/components/preloader/preloader';
+import Framework7Progressbar from 'framework7/components/progressbar/progressbar';
 import Framework7Sortable from 'framework7/components/sortable/sortable';
 import Framework7Swipeout from 'framework7/components/swipeout/swipeout';
 import Framework7Accordion from 'framework7/components/accordion/accordion';
@@ -73,6 +74,7 @@ import webauthn from './lib/webauthn.js';
 import utils from './lib/utils.js';
 import stores from './store/index.js';
 import localizedFilter from './filters/localized.js';
+import percentFilter from './filters/percent.js';
 import itemFieldContentFilter from './filters/itemFieldContent.js';
 import currencyFilter from './filters/currency.js';
 import iconFilter from './filters/icon.js';
@@ -106,6 +108,7 @@ Framework7.use(Framework7Actions);
 Framework7.use(Framework7Sheet);
 Framework7.use(Framework7Toast);
 Framework7.use(Framework7Preloader);
+Framework7.use(Framework7Progressbar);
 Framework7.use(Framework7Sortable);
 Framework7.use(Framework7Swipeout);
 Framework7.use(Framework7Accordion);
@@ -288,6 +291,7 @@ Vue.prototype.$hideLoading = function () {
 Vue.prototype.$user = userstate;
 
 Vue.filter('localized', (value, options) => localizedFilter({ i18n }, value, options));
+Vue.filter('percent', (value, precision, lowPrecisionValue) => percentFilter(value, precision, lowPrecisionValue));
 Vue.filter('itemFieldContent', (value, fieldName, defaultValue, translate) => itemFieldContentFilter({ i18n }, value, fieldName, defaultValue, translate));
 Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
 Vue.filter('icon', (value, iconType) => iconFilter(value, iconType));

src/views/mobile/statistics/Transaction.vue

@@ -21,12 +21,117 @@
             </f7-list>
         </f7-popover>
 
-        <f7-card>
+        <f7-card v-if="query.chartType === $constants.statistics.allChartTypes.Pie">
             <f7-card-content class="no-safe-areas chart-container" :padding="false">
                 <v-chart :options="chartData" v-if="chartData" />
             </f7-card-content>
         </f7-card>
 
+        <f7-card v-else-if="query.chartType === $constants.statistics.allChartTypes.Bar">
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list class="statistics-list-item skeleton-text" v-if="loading">
+                    <f7-list-item link="#">
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex align-items-center statistics-icon">
+                                <f7-icon slot="media" f7="app_fill"></f7-icon>
+                            </div>
+                        </div>
+
+                        <div slot="title">
+                            <span>Category Name 1</span>
+                            <small class="statistics-percent">33.33</small>
+                        </div>
+
+                        <div slot="after">
+                            <span>0.00 USD</span>
+                        </div>
+
+                        <div slot="inner-end" class="statistics-item-end">
+                            <div class="statistics-percent-line">
+                                <f7-progressbar></f7-progressbar>
+                            </div>
+                        </div>
+                    </f7-list-item>
+                    <f7-list-item link="#">
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex align-items-center statistics-icon">
+                                <f7-icon slot="media" f7="app_fill"></f7-icon>
+                            </div>
+                        </div>
+
+                        <div slot="title">
+                            <span>Category Name 2</span>
+                            <small class="statistics-percent">33.33</small>
+                        </div>
+
+                        <div slot="after">
+                            <span>0.00 USD</span>
+                        </div>
+
+                        <div slot="inner-end" class="statistics-item-end">
+                            <div class="statistics-percent-line">
+                                <f7-progressbar></f7-progressbar>
+                            </div>
+                        </div>
+                    </f7-list-item>
+                    <f7-list-item link="#">
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex align-items-center statistics-icon">
+                                <f7-icon slot="media" f7="app_fill"></f7-icon>
+                            </div>
+                        </div>
+
+                        <div slot="title">
+                            <span>Category Name 3</span>
+                            <small class="statistics-percent">33.33</small>
+                        </div>
+
+                        <div slot="after">
+                            <span>0.00 USD</span>
+                        </div>
+
+                        <div slot="inner-end" class="statistics-item-end">
+                            <div class="statistics-percent-line">
+                                <f7-progressbar></f7-progressbar>
+                            </div>
+                        </div>
+                    </f7-list-item>
+                </f7-list>
+                <f7-list v-else-if="!loading">
+                    <f7-list-item v-for="(data, idx) in statisticsData" :key="idx"
+                                  class="statistics-list-item"
+                                  :link="`/transaction/list?${data.type}Id=${data.id}`">
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex align-items-center statistics-icon">
+                                <f7-icon v-if="data.icon"
+                                         :icon="data.icon | icon(data.type)"
+                                         :style="data.color | iconStyle(data.type, 'var(--category-icon-color)')">
+                                </f7-icon>
+                                <f7-icon v-else-if="!data.icon"
+                                         f7="pencil_ellipsis_rectangle">
+                                </f7-icon>
+                            </div>
+                        </div>
+
+                        <div slot="title">
+                            <span>{{ data.name }}</span>
+                            <small class="statistics-percent">{{ data.percent | percent(2, '&lt;0.01') }}</small>
+                        </div>
+
+                        <div slot="after">
+                            <span>{{ data.totalAmount | currency(defaultCurrency) }}</span>
+                        </div>
+
+                        <div slot="inner-end" class="statistics-item-end">
+                            <div class="statistics-percent-line">
+                                <f7-progressbar :progress="data.percent"></f7-progressbar>
+                            </div>
+                        </div>
+                    </f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+
         <f7-toolbar tabbar bottom class="toolbar-item-auto-size">
             <f7-link @click="backwardDateRange(query.startTime, query.endTime)">
                 <f7-icon f7="arrow_left_square"></f7-icon>
@@ -168,6 +273,8 @@ export default {
                         } else {
                             data = {
                                 name: item.account.name,
+                                type: 'account',
+                                id: item.account.id,
                                 icon: item.account.icon || self.$constants.icons.defaultAccountIcon.icon,
                                 color: item.account.color || self.$constants.colors.defaultAccountColor,
                                 totalAmount: item.amountInDefaultCurrency
@@ -187,7 +294,9 @@ export default {
                         } else {
                             data = {
                                 name: item.primaryCategory.name,
-                                icon: item.account.icon || self.$constants.icons.defaultCategoryIcon.icon,
+                                type: 'category',
+                                id: item.primaryCategory.id,
+                                icon: item.primaryCategory.icon || self.$constants.icons.defaultCategoryIcon.icon,
                                 color: item.primaryCategory.color || self.$constants.colors.defaultCategoryColor,
                                 totalAmount: item.amountInDefaultCurrency
                             }
@@ -206,7 +315,9 @@ export default {
                         } else {
                             data = {
                                 name: item.category.name,
-                                icon: item.account.icon || self.$constants.icons.defaultCategoryIcon.icon,
+                                type: 'category',
+                                id: item.category.id,
+                                icon: item.category.icon || self.$constants.icons.defaultCategoryIcon.icon,
                                 color: item.category.color || self.$constants.colors.defaultCategoryColor,
                                 totalAmount: item.amountInDefaultCurrency
                             }
@@ -232,7 +343,7 @@ export default {
             }
 
             allStatisticsData.sort(function (data1, data2) {
-                return data1.totalAmount - data2.totalAmount;
+                return data2.totalAmount - data1.totalAmount;
             });
 
             return allStatisticsData;
@@ -546,6 +657,39 @@ export default {
 </script>
 
 <style>
+.statistics-list-item .item-content {
+    margin-top: 8px;
+    margin-bottom: 12px;
+}
+.statistics-list-item .item-inner:after {
+    background-color: transparent;
+}
+
+.statistics-icon {
+    margin-bottom: -2px;
+}
+
+.statistics-percent {
+    font-size: 0.7em;
+    opacity: 0.6;
+    margin-left: 6px;
+}
+
+.statistics-item-end {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+
+.statistics-percent-line {
+    margin-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
+}
+
+.statistics-percent-line .progressbar {
+    height: 4px;
+    background: #f8f8f8;
+}
+
 .chart-container {
     height: 400px;
 }