Clean up stories to fully enable chromatic

[ItsMeBrianD]

• The faker datasource is not properly outputting identical data for the same seed runs?
• Story setup is inconsistent
  • Some are using deprecated <Meta/>
  • Some are doing {@const data =, some are importing faker queries
  • We should prefer the {@const} pattern

[ItsMeBrianD]

@mcrascal if you can review this we can hand it off to @zachstence next week

[zachstence]

Need to look into why these stories are blank https://github.com/evidence-dev/evidence/pull/2191#issuecomment-2237077628

@kwongz said he has to refresh a couple times to get these stories to show up locally @ItsMeBrianD thinks it may be related to fetching a bunch of parquet for storybook

[zachstence]

Regarding this diff here: https://www.chromatic.com/test?appId=645d58d2e049d64800e0ee15&id=66a136e4a07200986623171f

The only thing that has changed is the "X inputs" accordion at the bottom. We should either remove this from the stories, or make it invisible during Chromatic snapshots.

We can leverage unit testing to make sure components are properly setting the input context

[mcrascal]

@zachstence is this actually spurious - there should be 2 inputs set on that page?

I think until we have unit test coverage it'd be preferable to have this visibility.

[zachstence]

Found an open issue regarding Recharts struggling to use Chromatic for their testing https://github.com/recharts/recharts/issues/3855

[zachstence]

Seems like the text is stretching/squishing by one pixel in the vertical direction...

https://github.com/user-attachments/assets/ccd9a3c1-47dd-4f3d-b527-2e9493ce15da

[zachstence]

Happening with a larger font size as well. Interestingly, the axis labels have the same issue, but this time in the reverse order compared to the reference line labels

https://github.com/user-attachments/assets/ddebae44-c2ce-4986-b997-85dd0bae2510

[zachstence]

I've opened a support ticket with Chromatic to investigate a case where we had a very small couple pixel difference from font anti-aliasing, here's their response

We have identified this as a case of accepted/inherited baseline issues causing ghost diffs. We used the inherited baseline, which has a tiny one-pixel shift if compared with the accepted baseline. For now, can you accept the changes? That will resolve the issue.

We are working on improving how our system works and planning to address this issue during the next Capture stack upgrade.

Sounds like we'll need to wait for that upgrade before Chromatic is useful for UI testing on charts. I'm waiting on some more information/timeline from the support rep.