support selecting and showing item in pie chart

src/Mobile.vue

@@ -124,6 +124,10 @@ i.icon.la, i.icon.las, i.icon.lab {
     font-size: 28px;
 }
 
+.chip.chip-placeholder {
+    border: 0;
+}
+
 .navbar .navbar-compact-icons.right a + a {
     margin-left: 0;
 }

src/components/mobile/PieChart.vue

@@ -10,7 +10,7 @@
                     :stroke="item.color | defaultIconColor('var(--default-icon-color)')"
                     :stroke-width="diameter"
                     :stroke-dasharray="item | itemStrokeDash(circumference)"
-                    :stroke-dashoffset="item | itemDashOffset(validItems, circumference, firstValidItemDashOffset)">
+                    :stroke-dashoffset="item | itemDashOffset(validItems, circumference, itemCommonDashOffset)">
             </circle>
             <circle class="pie-chart-text-background"
                     cx="0" cy="0"
@@ -21,18 +21,56 @@
                 <slot></slot>
             </g>
         </svg>
+        <div class="pie-chart-toolbox-container padding-horizontal" v-if="showSelectedItemInfo">
+            <div class="pie-chart-toolbox">
+                <f7-link class="pie-chart-toolbox-button" :class="{ 'disabled': !!skeleton || !validItems || !validItems.length }" @click="switchSelectedItem(1)">
+                    <f7-icon f7="arrow_left"></f7-icon>
+                </f7-link>
+
+                <div class="pie-chart-toolbox-info">
+                    <p v-if="selectedItem">
+                        <f7-chip class="chip-placeholder" outline v-if="skeleton">
+                            <span class="skeleton-text">Percent</span>
+                        </f7-chip>
+                        <f7-chip outline
+                                 :text="(selectedItem.percent * 100) | percent(2, '&lt;0.01')"
+                                 :style="(selectedItem ? selectedItem.color : '') | iconStyle('default', 'var(--default-icon-color)', '--f7-chip-outline-border-color')"
+                                 v-else-if="!skeleton"></f7-chip>
+                    </p>
+                    <p v-else-if="!validItems || !validItems.length">
+                        <f7-chip outline text="0%"></f7-chip>
+                    </p>
+                    <p v-if="selectedItem">
+                        <span class="skeleton-text" v-if="skeleton">Name</span>
+                        <span v-else-if="!skeleton && selectedItem.name">{{ selectedItem.name }}</span>
+                        <span class="skeleton-text" v-if="skeleton">Value</span>
+                        <span v-else-if="!skeleton" :style="(selectedItem ? selectedItem.color : '') | iconStyle('default', 'var(--default-icon-color)')">{{ selectedItem.value | currency(defaultCurrency) }}</span>
+                    </p>
+                    <p v-else-if="!validItems || !validItems.length">
+                        {{ $t('No transaction data') }}
+                    </p>
+                </div>
+
+                <f7-link class="pie-chart-toolbox-button" :class="{ 'disabled': !!skeleton || !validItems || !validItems.length }" @click="switchSelectedItem(-1)">
+                    <f7-icon f7="arrow_right"></f7-icon>
+                </f7-link>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
     props: [
+        'skeleton',
         'items',
         'nameField',
         'valueField',
         'colorField',
         'minValidPercent',
+        'defaultCurrency',
         'showCenterText',
+        'showSelectedItemInfo',
         'centerTextBackground',
     ],
     data: function () {
@@ -40,7 +78,8 @@ export default {
 
         return {
             diameter: diameter,
-            circumference: diameter * Math.PI
+            circumference: diameter * Math.PI,
+            selectedIndex: 0
         }
     },
     computed: {
@@ -82,20 +121,55 @@ export default {
 
             return totalValidValue;
         },
-        firstValidItemDashOffset: function () {
+        itemCommonDashOffset: function () {
             if (this.totalValidValue <= 0) {
                 return 0;
             }
 
-            for (let i = 0; i < this.validItems.length; i++) {
+            let offset = 0;
+
+            for (let i = 0; i < Math.min(this.selectedIndex + 1, this.validItems.length); i++) {
                 const item = this.validItems[i];
 
                 if (item.percent > 0) {
-                    return -this.circumference * (1 - item.percent) / 2;
+                    if (i === this.selectedIndex) {
+                        offset += -this.circumference * (1 - item.percent) / 2;
+                    } else {
+                        offset += -this.circumference * (1 - item.percent);
+                    }
                 }
             }
 
-            return 0;
+            return offset;
+        },
+        selectedItem: function () {
+            if (!this.validItems || !this.validItems.length) {
+                return null;
+            }
+
+            let selectedIndex = this.selectedIndex;
+
+            if (selectedIndex < 0 || selectedIndex >= this.validItems.length) {
+                selectedIndex = 0;
+            }
+
+            return this.validItems[selectedIndex];
+        }
+    },
+    watch: {
+        'items': function () {
+            this.selectedIndex = 0;
+        }
+    },
+    methods: {
+        switchSelectedItem: function (offset) {
+            let newSelectedIndex = this.selectedIndex + offset;
+
+            while (newSelectedIndex < 0) {
+                newSelectedIndex += this.validItems.length;
+            }
+
+            this.selectedIndex = newSelectedIndex % this.validItems.length;
         }
     },
     filters: {
@@ -140,7 +214,42 @@ export default {
 }
 
 .pie-chart {
-    margin: 24px;
+    margin: 24px 24px 0 24px;
+}
+
+.pie-chart-toolbox-container {
+    margin-top: 16px;
+    padding-bottom: 16px;
+}
+
+.pie-chart-toolbox {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.pie-chart-toolbox-info {
+    --f7-chip-height: 30px;
+    --f7-chip-font-size: 18px;
+    font-size: 16px;
+    align-self: center;
+}
+
+.pie-chart-toolbox-info p {
+    text-align: center;
+    margin: 0 0 4px 0;
+}
+
+.pie-chart-toolbox-info p > span {
+    padding-right: 8px;
+}
+
+.pie-chart-toolbox-info p > span:last-child {
+    padding-right: 0;
+}
+
+.pie-chart-toolbox-button {
+    color: var(--f7-text-color);
 }
 
 .pie-chart-background {

src/filters/accountIconStyle.js

@@ -1,13 +1,19 @@
 import colorConstants from '../consts/color.js';
 
-export default function (color, defaultColor) {
+export default function (color, defaultColor, additionalFieldName) {
     if (color && color !== colorConstants.defaultAccountColor) {
         color = '#' + color;
     } else {
         color = defaultColor;
     }
 
-    return {
+    const ret = {
         color: color
     };
+
+    if (additionalFieldName) {
+        ret[additionalFieldName] = color;
+    }
+
+    return ret;
 }

src/filters/categoryIconStyle.js

@@ -1,13 +1,19 @@
 import colorConstants from '../consts/color.js';
 
-export default function (color, defaultColor) {
+export default function (color, defaultColor, additionalFieldName) {
     if (color && color !== colorConstants.defaultCategoryColor) {
         color = '#' + color;
     } else {
         color = defaultColor;
     }
 
-    return {
+    const ret = {
         color: color
     };
+
+    if (additionalFieldName) {
+        ret[additionalFieldName] = color;
+    }
+
+    return ret;
 }

src/filters/defaultIconStyle.js

@@ -1,13 +1,19 @@
 import colorConstants from '../consts/color.js';
 
-export default function (color, defaultColor) {
+export default function (color, defaultColor, additionalFieldName) {
     if (color && color !== colorConstants.defaultColor) {
         color = '#' + color;
     } else {
         color = defaultColor;
     }
 
-    return {
+    const ret = {
         color: color
     };
+
+    if (additionalFieldName) {
+        ret[additionalFieldName] = color;
+    }
+
+    return ret;
 }

src/filters/iconStyle.js

@@ -2,12 +2,12 @@ import defaultIconStyle from "./defaultIconStyle.js";
 import accountIconStyle from "./accountIconStyle.js";
 import categoryIconStyle from "./categoryIconStyle.js";
 
-export default function (color, iconType, defaultColor) {
+export default function (color, iconType, defaultColor, additionalFieldName) {
     if (iconType === 'account') {
-        return accountIconStyle(color, defaultColor);
+        return accountIconStyle(color, defaultColor, additionalFieldName);
     } else if (iconType === 'category') {
-        return categoryIconStyle(color, defaultColor);
+        return categoryIconStyle(color, defaultColor, additionalFieldName);
     } else {
-        return defaultIconStyle(color, defaultColor);
+        return defaultIconStyle(color, defaultColor, additionalFieldName);
     }
 }

src/mobile-main.js

@@ -288,12 +288,12 @@ Vue.filter('percent', (value, precision, lowPrecisionValue) => percentFilter(val
 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));
-Vue.filter('iconStyle', (value, iconType, defaultColor) => iconStyleFilter(value, iconType, defaultColor));
+Vue.filter('iconStyle', (value, iconType, defaultColor, additionalFieldName) => iconStyleFilter(value, iconType, defaultColor, additionalFieldName));
 Vue.filter('defaultIconColor', (value, defaultColor) => defaultIconColorFilter(value, defaultColor));
 Vue.filter('accountIcon', (value) => accountIconFilter(value));
-Vue.filter('accountIconStyle', (value, defaultColor) => accountIconStyleFilter(value, defaultColor));
+Vue.filter('accountIconStyle', (value, defaultColor, additionalFieldName) => accountIconStyleFilter(value, defaultColor, additionalFieldName));
 Vue.filter('categoryIcon', (value) => categoryIconFilter(value));
-Vue.filter('categoryIconStyle', (value, defaultColor) => categoryIconStyleFilter(value, defaultColor));
+Vue.filter('categoryIconStyle', (value, defaultColor, additionalFieldName) => categoryIconStyleFilter(value, defaultColor, additionalFieldName));
 Vue.filter('tokenDevice', (value) => tokenDeviceFilter(value));
 Vue.filter('tokenIcon', (value) => tokenIconFilter(value));
 

src/views/mobile/statistics/Transaction.vue

@@ -28,7 +28,9 @@
             <f7-card-content class="pie-chart-container" :padding="false">
                 <pie-chart
                     :items="[{value: 60, color: '7c7c7f'}, {value: 20, color: 'a5a5aa'}, {value: 20, color: 'c5c5c9'}]"
+                    :skeleton="true"
                     :show-center-text="true"
+                    :show-selected-item-info="true"
                     class="statistics-pie-chart"
                     value-field="value"
                     color-field="color"
@@ -39,6 +41,8 @@
                     :items="statisticsData.items"
                     :min-valid-percent="0.0001"
                     :show-center-text="true"
+                    :show-selected-item-info="true"
+                    :default-currency="defaultCurrency"
                     class="statistics-pie-chart"
                     name-field="name"
                     value-field="totalAmount"