Dashboard: Proof card: PriceCountChip: misleading colors

[k127]

What

As a user, you may find the colour coding of the price count chip misleading, used on the respective component:

open-prices-frontend/src/components/PriceCountChip.vue

Lines 22 to 33 in 580ea07

	getColor() {
	if (this.count === 0) {
	return 'error'
	}
	if (this.count === 1) {
	return 'warning'
	}
	if (this.count > 1) {
	return 'success'
	}
	},
	}

While in other contexts such as PriceCard.vue, the same coloring algorithm may be meaningful, it appears not to be in the context of ProofFooterRow.vue.

Steps to reproduce the behavior:

1. Have some proofs available with zero, one, and more than one prices
2. Visit https://prices.openfoodfacts.org/dashboard/proofs
3. Inspect the PriceCountChip within a ProofCard

Expected behavior

Finding a more meaningful color coding that also respects proof.receipt_price_count, in addition to proof.price_count:

      // symbols are pseudo named
      if (this.price_count === 0) {
        return 'error'
      }
      else if (this.price_count < this.receipt_price_count) {
        return 'warning'
      }
      else if (this.price_count === this.receipt_price_count) {
        return 'success'
      }
      else if (this.price_count > this.receipt_price_count) {
        return 'error'
      }

A determination of whether the PriceCountChip component is used in PriceCard, or ProofFooterRow, would also be required.

[raphodn]

Indeed the ProofCard price color should be green when at least 1 price is linked, doesn't make sense to have the intermediate yellow color.

[raphodn]

Regarding the "consumption-related fields" (receipt_price_count), it's not always equivalent to the price_count, for instance if you buy multiple quantities of the same item. so it's tricky right now to have a hard rule. see #1169

I'll leave this pending/todo in another issue.