Integration: Data Visualization

endigo9740 commented 4 months ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

Now the radial and conic gradients are handled as Tailwind features, rather than a dedicated component, we should still aim to provide support for data visualization elements. At least to replace the way conic gradient was used in v2 and prior.

This might include:

Pie Charts
Bar Charts
Line Charts
etc

In order to handle the variety of options and configurations folks might need, my recommendation is we push folks towards a third-party solution, but pair it with Skeleton styles (Skeleton colors). For this we could use:

CSS-Based: https://chartscss.org/
SVG-Based: https://d3js.org/
Canvas-Based: https://www.chartjs.org/docs/latest/

As such, we should aim to make an opinionated choice and showcase how it can be integrated (ala Lucide for icons). In most cases, it should be as simple as passing the appropriate CSS Custom Properties to define the colors.

Provide relevant links or additional information.

For Chart.css, setting colors might work like this:

#my-chart .column {
  --color-1: rgb(var(--color-primary-500));
  --color-2: rgb(var(--color-secondary-500));
  --color-3: rgb(var(--color-tertiary-500));
  --color-4: rgb(var(--color-success-500));
  --color-5: rgb(var(--color-warning-500));
  --color-6: rgb(var(--color-error-500));
  --color-7: rgb(var(--color-surface-500));
  /* ... */
}

Technology

The three standard options typically revolve around these three types of tech:

CSS: typically the simplest to use, but has the least amount of options
SVG: typically a good balance of capability and ease of use (thinking of Tailwind fill- colors here)
Canvas: typically the most performant but also the hardest to configure (likely won't support light/dark mode)

kmalloy24 commented 2 months ago

Throwing ECharts (Apache 2.0 License) out there.

Evidence.dev built their charting library with ECharts and Svelte - it's open source (MIT).

Code
Docs

endigo9740 commented 2 months ago

@kmalloy24 sounds great on paper!

Per the themes, I think we'll run into the situation where they're almost always SVG or Canvas based, which means they expect the styles to be passes via JS, JSON, etc.

Given the new Theme Generator is a standalone tool, we can actually do some interesting stuff with it - such as have a way to export the color data in multiple formats. Might be able to do a JSON format that can be parsed by tools like this.

Note our focus is on v3 components right now, but I do plan to circle back to this in the future. This may be an additional feature we can implement.

skeletonlabs / skeleton