feat(Charts): color system

[dani-moreno]

Description

Updated colors for charts. There are a few color schemes available for the user to define to their data, for now, categorical and feedback, but can be expanded easily.

• categorical (default): no inherent ordering. The colors are chosen to be visually distinct to help us distinguish between the different items. They are defined in sequence, ensuring each color is visually distinct from its neighbors across all color deficiencies.
  Eg.: Headcount last 6 months per team (each team has a color).
• feedback: Represent data that is either within or outside of a defined threshold.
  Eg.: Employee satisfaction by team (color relative to company target, <6 red, 6-9 orange, >8 green).

The user can define specific colors for data this way:

const financialDataConfig = {
  profit: {
    label: "Profit",
    color: "feedback-positive",
  },
  losses: {
    label: "Losses",
    color: "feedback-negative",
  },
}

Available color schemes and tokens will be documented in Zeroheight, and color schemes will be expanded with a few others, like risk or sequential colors.

Screenshots

Categorical

Feedback

Implementation details

• Color system, removing the old one.
• Defined realistic chart stories as examples.
• Updated widgets with chart stories.

[github-actions]

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	16.85%	16422 / 97443
🔵	Statements	16.85%	16422 / 97443
🔵	Functions	43.76%	821 / 1876
🔵	Branches	70.55%	2303 / 3264

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/components/Charts/AreaChart/index.stories.tsx	0%	100%	100%	0%	3-139
packages/react/src/components/Charts/AreaChart/index.tsx	0%	0%	0%	0%	1-263
packages/react/src/components/Charts/BarChart/index.stories.tsx	0%	100%	100%	0%	2-166
packages/react/src/components/Charts/BarChart/index.tsx	0%	0%	0%	0%	1-235
packages/react/src/components/Charts/CategoryBarChart/index.tsx	0%	0%	0%	0%	1-114
packages/react/src/components/Charts/LineChart/index.stories.tsx	0%	100%	100%	0%	3-108
packages/react/src/components/Charts/LineChart/index.tsx	0%	0%	0%	0%	1-103
packages/react/src/components/Charts/PieChart/index.stories.tsx	0%	100%	100%	0%	3-48
packages/react/src/components/Charts/PieChart/index.tsx	0%	0%	0%	0%	1-134
packages/react/src/components/Charts/ProgressChart/index.tsx	0%	0%	0%	0%	1-42
packages/react/src/components/Charts/RadarChart/index.tsx	0%	100%	100%	0%	2-88
packages/react/src/components/Charts/RadialProgressChart/index.tsx	0%	0%	0%	0%	1-62
packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx	0%	100%	100%	0%	2-113
packages/react/src/components/Charts/VerticalBarChart/index.tsx	0%	0%	0%	0%	1-227
packages/react/src/components/Charts/utils/colors.tsx	0%	0%	0%	0%	1-20
packages/react/src/experimental/Charts/RadarChart/index.tsx	0%	0%	0%	0%	1-99
packages/react/src/experimental/Navigation/Carousel/index.stories.tsx	0%	100%	100%	0%	3-249
packages/react/src/experimental/Navigation/Carousel/DynamicCarousel/index.stories.tsx	0%	100%	100%	0%	3-48
packages/react/src/experimental/Widgets/Charts/AreaChartWidget/index.stories.tsx	0%	100%	100%	0%	4-78
packages/react/src/experimental/Widgets/Charts/BarChartWidget/index.stories.tsx	0%	100%	100%	0%	4-28
packages/react/src/experimental/Widgets/Charts/LineChartWidget/index.stories.tsx	0%	100%	100%	0%	4-28
packages/react/src/experimental/Widgets/Charts/PieChartWidget/index.stories.tsx	0%	100%	100%	0%	4-33
packages/react/src/experimental/Widgets/Charts/VerticalBarChartWidget/index.stories.tsx	0%	100%	100%	0%	4-28
packages/react/src/experimental/Widgets/Content/ProgressBarDuo/index.tsx	0%	0%	0%	0%	1-31

Generated in workflow #8471 for commit ee89f3d by the Vitest Coverage Report Action

[github-actions]

size-limit report 📦

Path	Size
JS: Stable	581.49 KB (-0.05% 🔽)
JS: Experimental	968.07 KB (+0.03% 🔺)
CSS	71.87 KB (-0.24% 🔽)

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook