search

f5 / unovis

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript
https://unovis.dev
Apache License 2.0
2.17k stars 43 forks source link

Refinements for Half Donut #441

Open curran opened 3 weeks ago

curran commented 3 weeks ago

As a user creating a half-donut chart by specifying the angleRange of VisDonut to [-Math.PI / 2, Math.PI / 2], I want the vis to look decent and scale properly to its container, so that I don't end up with wasted screen real estate.

Here's what it looks like now:

image

Subtasks:

For offset in Y direction, we may need to add a parameter that gets used here:

https://github.com/f5/unovis/blob/main/packages/ts/src/components/donut/index.ts#L127

curran commented 3 weeks ago

What is the recommended workflow for development? Should I add a new Gallery example to test with?

curran commented 3 weeks ago

I think I'll start by adding a new entry to the list of things here in packages/dev/cypress/urls.ts, assuming that's what drives the npm run dev page:

  {
    title: 'Donut: Empty Segments',
    url: '/examples/Donut/Donut:%20Empty%20Segments',
    duration: 0,
  },
  {
    title: 'Donut Data Transitions',
    url: '/examples/Donut/Donut%20Data%20Transitions',
    duration: 0,
  },
  // New:
  {
    title: 'Half Donut',
    url: '/examples/Donut/Half%20Donut',
    duration: 0,
  },
curran commented 3 weeks ago

Or, maybe this is the place to add it: packages/shared/examples/examples-list.tsx.

lee00678 commented 3 weeks ago

Hi @curran, thanks for your interest in contributing. We have a general contribution guideline here. You can either add a new gallery example, or add an example in our development page(here). If you want to use the development page to test your updates, create a new folder under packages/shared/exmaples.

curran commented 3 weeks ago

Oh excellent! Thank you for the info. I've started on this here (very much WIP): https://github.com/f5/unovis/pull/444

image

I hope this is the right place to start adding examples. It's currently in packages/dev/src/examples/misc/donut/half-donut, and it shows up in the npm run dev testing space. Please let me know if it would be better suited in packages/shared/exmaples. Thanks!

lee00678 commented 3 weeks ago

I think putting it under packages/dev/src/examples/misc/donut/half-donut is fine! If you want to add an example on the website after you are done with you implementation, you are always welcome to do so.

curran commented 2 weeks ago

Making a bit of progress

image