mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 06:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

support selecting and showing item in pie chart

Browse Source
This commit is contained in:
MaysWind
2021-02-01 00:55:00 +08:00
parent 059e7d16bb
commit dcb94a9cef
8 changed files with 155 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+4
View File
@@ -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
+116 -7
View File
@@ -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
+8 -2
View File
@@ -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
+8 -2
View File
@@ -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
+8 -2
View File
@@ -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
+4 -4
View File
@@ -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
+3 -3
View File
@@ -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
+4
View File
@@ -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"