Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced color space support #1719

Merged
merged 10 commits into from
Nov 11, 2024
Merged

Conversation

SlicedSilver
Copy link
Contributor

@SlicedSilver SlicedSilver commented Nov 4, 2024

Type of PR: enhancement

PR checklist:

Note

  • I'll squash the commits when merging (since I accidentally duplicated some commits)
  • The graphics e2e test runner will be fixed in a separate PR.

Overview of change:

  • Built-in sRGB-based colors (rgb, rgba, hex, named color, hsl) are now supported by the library without specific converters, or maps. Instead the rgb equivalent color string is determined by the browser by using window.getComputedStyle(element).color. For most charts, this will only be used for a few colours (like 2 or 3) and the performance effect is insignificant. However this does allow the bundle size to be decreased since we don't need to ship our own parsing converters.
  • Custom color parsers can be provided to handle other color (non-sRGB) formats (like p3).
  • Added an option to enable p3 expanded color gamut on the canvas (colorSpace)
  • It is now possible to use any natively support CSS color format with the library (including expanded colors like display-p3), a custom color parser should be included in the chart options for these additional color formats so that the library can correctly generate contrast colors, and alpha colors as needed (using standard sRGB).

New options:

	/**
	 * Specifies the color space of the rendering context for the internal
	 * canvas elements.
	 *
	 * Note: this option should only be specified during the chart creation
	 * and not changed at a later stage by using `applyOptions`.
	 *
	 * @defaultValue `srgb`
	 *
	 * See [HTMLCanvasElement: getContext() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#colorspace) for more info
	 */
	colorSpace: ColorSpace;

	/**
	 * Array of custom color parser functions to handle color formats outside of standard sRGB values.
	 * Each parser function takes a string input and should return either:
	 * - An {@link Rgba} array [r,g,b,a] for valid colors (with values 0-255 for rgb and 0-1 for a)
	 * - null if the parser cannot handle that color string, allowing the next parser to attempt it
	 *
	 * Parsers are tried in order until one returns a non-null result. This allows chaining multiple
	 * parsers to handle different color space formats.
	 *
	 * Note: this option should only be specified during the chart creation
	 * and not changed at a later stage by using `applyOptions`.
	 *
	 * The library already supports these color formats by default:
	 * - Hex colors (#RGB, #RGBA, #RRGGBB, #RRGGBBAA)
	 * - RGB/RGBA functions (rgb(), rgba())
	 * - HSL/HSLA functions (hsl(), hsla())
	 * - HWB function (hwb())
	 * - Named colors (red, blue, etc.)
	 * - 'transparent' keyword
	 *
	 * Custom parsers are only needed for other color spaces like:
	 * - Display P3: color(display-p3 r g b)
	 * - CIE Lab: lab(l a b)
	 * - LCH: lch(l c h)
	 * - Oklab: oklab(l a b)
	 * - Oklch: oklch(l c h)
	 * - ...
	 */
	colorParsers: CustomColorParser[];

@SlicedSilver SlicedSilver added this to the 5.0 milestone Nov 4, 2024
@SlicedSilver SlicedSilver self-assigned this Nov 4, 2024
Copy link

github-actions bot commented Nov 4, 2024

size-limit report 📦

Path Size
ESM 42.32 KB (-2.55% 🔽)
ESM createChart 39.25 KB (-2.66% 🔽)
ESM createChartEx 38 KB (-2.67% 🔽)
ESM Standalone 43.85 KB (-2.29% 🔽)
Standalone 43.79 KB (-2.29% 🔽)
Plugin: Text Watermark 1.86 KB (-0.42% 🔽)
Plugin: Image Watermark 1.69 KB (-0.75% 🔽)
Plugin: Series Markers 3.9 KB (+0.16% 🔺)

@SlicedSilver SlicedSilver added the enhancement Feature requests, and general improvements. label Nov 4, 2024
@SlicedSilver SlicedSilver requested a review from edew November 5, 2024 21:57
@SlicedSilver SlicedSilver marked this pull request as ready for review November 5, 2024 21:58
@edew edew self-requested a review November 11, 2024 09:45
@SlicedSilver SlicedSilver merged commit 71415dd into v5-candidate Nov 11, 2024
27 of 33 checks passed
@SlicedSilver SlicedSilver deleted the enhanced-color-space-support branch November 11, 2024 09:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Feature requests, and general improvements.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants