chare(chart): custom hex series colors, optional legend, safer color resolve - #364
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR enhances the Chart Vue component in @codexteam/ui by making series color resolution safer/more flexible (palette tokens + hex with fallback), adding an optional legend, and refining tooltip/X-axis formatting for different detalization modes.
Changes:
- Added hex-based per-series color support via a resolver that falls back to red instead of throwing.
- Added optional
legendprop to render a static series legend below the plot and adjusted layering so the hover pointer/tooltip stay above it. - Updated tooltip and X-axis behavior: sorted multi-series tooltip rows, compact time labels for hours/minutes, and improved minute tick labeling across day boundaries.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| @codexteam/ui/src/vue/components/chart/ChartLine.vue | Switches SVG stop styling to object form and uses centralized color resolution + updated color prop type. |
| @codexteam/ui/src/vue/components/chart/Chart.vue | Adds optional legend, tooltip row sorting, compact axis label formatting, tooltip sizing, and layering/style adjustments. |
| @codexteam/ui/src/vue/components/chart/Chart.types.ts | Introduces ChartLineColorToken and loosens ChartLineColors.name to support resolved hex colors. |
| @codexteam/ui/src/vue/components/chart/Chart.colors.ts | Implements hex parsing + safe resolver (resolveChartLineColor) with fallback behavior. |
| @codexteam/ui/package.json | Bumps package version to 0.2.6. |
| @codexteam/ui/dev/pages/components/Chart.vue | Updates playground to demo legend + multi-series + aligned sample data generation. |
Suppressed comments (2)
@codexteam/ui/src/vue/components/chart/Chart.colors.ts:140
- This exported helper only supports hex strings (#RGB/#RRGGBB), but the JSDoc describes the input as a generic "CSS color string". That over-promises supported formats and contradicts parseHexColor's behavior.
/**
* Build a gradient set from a hex color. Returns null if the string is not a hex.
* @param color - CSS color string
*/
@codexteam/ui/dev/pages/components/Chart.vue:32
- The list item calls out "any CSS color", but only hex colors are supported by the resolver. Consider renaming this to "hex color" to avoid confusion.
<ul class="chart-props__list">
<li><code>red</code>, <code>light-grey</code> — built-in palette</li>
<li>any CSS color: <code>'#3F88FF'</code>, <code>'#00C853'</code></li>
</ul>
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
63
to
+66
| /** | ||
| * Name of the color for the chart line | ||
| * Name of the color for the chart line, or any CSS color string | ||
| */ | ||
| color?: ChartLineColor; | ||
| color?: ChartLineColorToken; |
Comment on lines
+24
to
+28
| <p class="chart-props__description"> | ||
| <code>ChartLineColor.Red</code> / <code>ChartLineColor.LightGrey</code>, | ||
| or any CSS color string (<code>'#3F88FF'</code>, <code>'rgb(...)'</code>). | ||
| Omit it and the line stays red. | ||
| </p> |
| </div> | ||
| <div | ||
| v-for="(item, index) in tooltipLines" | ||
| :key="`tooltip-line-${item.prepared.line.label}-${index}`" |
neSpecc
approved these changes
Aug 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
lines[].colorstill acceptsChartLineColor.Red/LightGrey. Anything else is treated as#RGB/#RRGGBB; invalid values fall back to red instead of throwing.legendprop (defaultfalse) draws a static color+label row under the plot.isolation+--z-popover).HH:mm); tooltip keeps the date. Minutes also show the day on the first visible tick (and when the day changes).