RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

Add longer intervals to timeline and allow zoom < 1 (> 0) #1296

Closed PhyllisSmithKratos closed 6 months ago

PhyllisSmithKratos commented 6 months ago

Brief Description

All the places that allowed day/hour/minute now allow month/week along with appropriate calculations. Additionally, zoom will now that fractional numbers (buyer beware)

JIRA Link

No JIRA ticket

Related Issue

General Notes

Motivation and Context

We are trying to display data in the timeline that covers a great deal of time. The user does not need a lot of granularity, but we want to display as much information in as little space as possible.

Issues and Limitations

Types of changes

Checklist

changeset-bot[bot] commented 6 months ago

🦋 Changeset detected

Latest commit: a907fe2d4326b12c84b81b18161a83bb6b4e8436

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 6 months ago

Deploy Preview for astro-preview ready!

Name Link
Latest commit a907fe2d4326b12c84b81b18161a83bb6b4e8436
Latest deploy log https://app.netlify.com/sites/astro-preview/deploys/65f8bb1a3f52c00008a20af6
Deploy Preview https://deploy-preview-1296--astro-preview.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 6 months ago

Deploy Preview for astro-stencil ready!

Name Link
Latest commit a907fe2d4326b12c84b81b18161a83bb6b4e8436
Latest deploy log https://app.netlify.com/sites/astro-stencil/deploys/65f8bb1a5cd25000075b1e5a
Deploy Preview https://deploy-preview-1296--astro-stencil.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

markacianfrani commented 6 months ago

Can you give us some more information about your use case for needing to allow for fractional numbers for zoom? Is it only for larger intervals?

PhyllisSmithKratos commented 6 months ago

My use case is just wanting to be able to display data in a smaller amount of space. If you think that’s a bad idea, I can take that out. It just lets me maximize the information that I’m providing to my users.

Thanks,

Phyllis

From: Mark Anthony Cianfrani @.> Sent: Friday, March 15, 2024 10:31 AM To: RocketCommunicationsInc/astro @.> Cc: Phyllis Smith @.>; Author @.> Subject: [External] - Re: [RocketCommunicationsInc/astro] Add longer intervals to timeline and allow zoom < 1 (> 0) (PR #1296)

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Can you give us some more information about your use case for needing to allow for fractional numbers for zoom? Is it only for larger intervals?

— Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https:/github.com/RocketCommunicationsInc/astro/pull/1296*issuecomment-2000026213__;Iw!!KM6X6ZXWXVtZMQ!dZmviN15gb0tk72CV2pvsZWnAcjL5vsX0bZl-4of_BXYsOidW_tWwAeirAIzFdW58wMxLZ-rqoPIPz_-5kBdTsUpiYuixAZrgw$ , or unsubscribe https://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/AWFRSLYKYEPN4WSVJN53YOLYYMO43AVCNFSM6AAAAABEU3IDCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBQGAZDMMRRGM__;!!KM6X6ZXWXVtZMQ!dZmviN15gb0tk72CV2pvsZWnAcjL5vsX0bZl-4of_BXYsOidW_tWwAeirAIzFdW58wMxLZ-rqoPIPz_-5kBdTsUpiYueb_JeiA$ . You are receiving this because you authored the thread. https://github.com/notifications/beacon/AWFRSL7XL556PZK3VP5O7YDYYMO43A5CNFSM6AAAAABEU3IDCOWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTXGX5GK.gif Message ID: @. @.> >

markacianfrani commented 6 months ago

its definitely not a bad idea, its just that the zoom has a hard floor because the lowest value is determined by the grid and interval. for example, if your interval is days, columns are divided by 24 (hours) and the 1px playhead always represents 1 hour. I just need to think through the edge cases a bit more. Are you able to provide an example codepen with your dataset as an example? (removing anything confidential of course, Im mostly just interested in 1. the amount of events 2. the times of your events)

PhyllisSmithKratos commented 6 months ago

I have restored the files – I saw that they had been deleted, but since I didn’t delete them (on purpose) I ignored that issue. Turns out that the filenames were too long. I have adjusted my git configuration and now the files are restored.

I’m so sorry!

Phyllis

From: Mark Anthony Cianfrani @.> Sent: Monday, March 18, 2024 1:47 PM To: RocketCommunicationsInc/astro @.> Cc: Phyllis Smith @.>; Author @.> Subject: [External] - Re: [RocketCommunicationsInc/astro] Add longer intervals to timeline and allow zoom < 1 (> 0) (PR #1296)

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

@markacianfrani commented on this pull request.


On packages/web-components/vrt-snaps/rux-classification-marking/test/basic/classification-markings.vrt.spec.ts-snapshots/Classification-Marking-has-no-visual-regression-vrt-1-chromium-vrt-dark-linux.png https://urldefense.com/v3/__https:/github.com/RocketCommunicationsInc/astro/pull/1296*discussion_r1529172853__;Iw!!KM6X6ZXWXVtZMQ!dLFuFLR4Pr48hbP4Whq5aCGuVIqDonXCkCwTpvU3LSIxgzEba9Q7_1qdb6rgasB9xAH7OzJY_28Vl1B68Wue318iISOaJj5ktQ$ :

can you restore this file and all the other missing images in the vrt-snaps directory please?

— Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https:/github.com/RocketCommunicationsInc/astro/pull/1296*pullrequestreview-1944041801__;Iw!!KM6X6ZXWXVtZMQ!dLFuFLR4Pr48hbP4Whq5aCGuVIqDonXCkCwTpvU3LSIxgzEba9Q7_1qdb6rgasB9xAH7OzJY_28Vl1B68Wue318iISN35WO2Pw$ , or unsubscribe https://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/AWFRSL3SWFNRNRCMNY22HLTYY5AFBAVCNFSM6AAAAABEU3IDCOVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTSNBUGA2DCOBQGE__;!!KM6X6ZXWXVtZMQ!dLFuFLR4Pr48hbP4Whq5aCGuVIqDonXCkCwTpvU3LSIxgzEba9Q7_1qdb6rgasB9xAH7OzJY_28Vl1B68Wue318iISN1zMFoUg$ . You are receiving this because you authored the thread.Message ID: @.***>

PhyllisSmithKratos commented 6 months ago

It takes 3 levels of changes to try to include this updated astro version. And in all truth, I have no idea how to build this, so I can insert it in my 3 levels of programs.

When I was looking at creating pictures for your request, I found a couple of math errors in positioning things in weeks and months and fixed them. I think the attached pictures will provide you with a sense of not having an issue (other than things could end up on top of each other). The first set show the original demo using zoom of 1, 2, and .75.

The second set show months using 1, 2, and .5.

The third set shows weeks using 1, 2, and .5.

I probably won’t ever want to go lower than .5, and for the months and week pictures, I adjusted the margins to 0 on left and right (I would have done this permanently for the whole project, but I didn’t want to break anything for anyone). Having the beginning of the date period 20 px in seems weird to me).

Again, this is a buyer beware feature. Presumably, developers will set adequate ranges for what they’ll allow, and they should already limit it to 1.

This is a REALLY rough mock of what we might come up with. The data for this spanned a year, which makes it really hard to get an overview. We would show this in month increments and probably would use zoom of .5 – the goal is the get as much data at a time in from of the user. Please don’t yell at me about astro colors, etc. Just a prototype.

Let me know if I can send more pictures (or videos) to help.

Phyllis

From: Mark Anthony Cianfrani @.> Sent: Monday, March 18, 2024 8:21 AM To: RocketCommunicationsInc/astro @.> Cc: Phyllis Smith @.>; Author @.> Subject: [External] - Re: [RocketCommunicationsInc/astro] Add longer intervals to timeline and allow zoom < 1 (> 0) (PR #1296)

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

its definitely not a bad idea, its just that the zoom has a hard floor because the lowest value is determined by the grid and interval. for example, if your interval is days, columns are divided by 24 (hours) and the 1px playhead always represents 1 hour. I just need to think through the edge cases a bit more. Are you able to provide an example codepen with your dataset as an example? (removing anything confidential of course, Im mostly just interested in 1. the amount of events 2. the times of your events)

— Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https:/github.com/RocketCommunicationsInc/astro/pull/1296*issuecomment-2004049835__;Iw!!KM6X6ZXWXVtZMQ!Z-McGYoRxERi3-xKkUytd7oPi4HwLumuO_rymhmkMNBjinsz7RgBdohmGUohbAnYmrvk4r67KNnJzXD2jxeh89Z_PJERa9vsoQ$ , or unsubscribe https://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/AWFRSL2S7SJOMB7CZBGWZP3YY3Z4FAVCNFSM6AAAAABEU3IDCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBUGA2DSOBTGU__;!!KM6X6ZXWXVtZMQ!Z-McGYoRxERi3-xKkUytd7oPi4HwLumuO_rymhmkMNBjinsz7RgBdohmGUohbAnYmrvk4r67KNnJzXD2jxeh89Z_PJHU3TjBaw$ . You are receiving this because you authored the thread.Message ID: @.***>