Meter component issues

[tonge495]

Hi Paste team,

We are working on a project where a meter component would be helpful to display email deliverability metrics and whether the target metrics were met. We are having some trouble with creating the following:

• Unable to change the color of the bars: We are trying to update some of the colors so a user can differentiate between metrics that met the target vs ones where it does not the target, but are unable to change the color from green.
• Unable to change the width of the bars: As we only have 3 rows of metrics on the page, we were trying to change the width of the bars but it appears to be static.
• Visual style of the bars: The Figma component appears to have bars with rounded corners, but when we tried to implement on the front end, the bars do not have rounded corners.

Mockups

Current implementation

Can any of these items be configurable and/or is on the roadmap for this component in the near future? If so, what is the timeline?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

---

Here are some similar discussions:

• Request for comment (RFC): Progress Bar (updated: 2023-10-05T17:00:55Z, similarity score: 0.86)
• Meter component - Design and Spec RFC (updated: 2023-08-29T20:06:21Z, similarity score: 0.86)
• Adopt Paste component in MC product (updated: 2023-05-30T21:47:26Z, similarity score: 0.85)

[nkrantz]

Hi @tonge495

Meter does not currently allow for changing the color of the bar. Please let us know via the dependency intake form what your timeline is for these designs and we'll assess whether we can fit the new feature into our roadmap.

Going forward, stay tuned for RFC's that we post about new components! We share them here on Discussions and also on Slack, and you can give us input about what features you need on new components before they're released. We're always happy to plan around specific features that are required by consumers during the component-building stage, but it's slightly harder to prioritize adding in those features to existing components after we've already built and released them.

As for the Meter without the rounded corners, what version of Paste are you using? If you share a CodeSandbox reproduction of that implementation, I'll take a look to see what's going on. You're likely on an outdated version of Paste. Same answer would go for the width, as Meter fills 100% width of its parent element.

[nkrantz]

One more thought - our guidance around labelling the value of Meter is to only show one format of the value wherever possible. We encourage you to think about whether it would be more helpful for your users to see "36.9%" or "121 opens" as displaying the value in 3 formats (the meter bar being one of them) can lead to information overload and make it more difficult for users to digest the information.

[tonge495]

Thanks for the responses:

• Sure I'd be happy to fill out the dependency intake form on this.
• We are not currently on the most recent version of Paste, as there has been some issues with getting onto the recent version on One Admin (See: https://github.com/twilio-internal/console/discussions/6145)
• I can update the meter to percentages. However, it doesn't make sense to use %'s for the total # of clicks and # of opens, as this is a different type of metric.

We are also running on a relatively tight schedule for implementation. Given these limitations, would you recommend for us to just use the meter component and wait to get this resolved when we switch to the latest version or build it on Highchart temporarily and then rebuild when we switch over to the latest version?

[nkrantz]

Thanks for filing a dependency!

Would it make sense to replace the percentage altogether with "121 opens", so that there's only one number being shown? With the updated Meter API, this is how that implementation would look (if total number of emails sent was 500):

<MeterLabel htmlFor={meterId} valueLabel="121">Unique opens</MeterLabel>
<Meter minValue={0} value={121} maxValue={500} id={meterId} minLabel="0" maxLabel="500" />

As for using the alpha version of Meter (the version you're currently on), it would be ideal to upgrade to the production version before releasing as a Paste Meter component. The version you're on did not have any design work and the API will change once you update versions. If you need to ship these designs before the update issue is resolved, I'd suggest using a placeholder meter and updating to the Paste Meter once you're on an updated version.

[tonge495]

For Emails requested, Emails delivered, unique opens, and unique clicks, I think it makes more sense to have them all as percentages instead of raw numbers, which is also aligned with how it is structured on Sendgrid, where we are getting the metrics.

Thanks I'll let the developer know on the meter.

[nkrantz]

That makes sense! It'll be more clear to present the Meter with only one representation format, whether it's the raw number or the percentage.