RadarChart

Talend · Jul 17, 2023 · 73d9b3a · 73d9b3a
1 parent b03a38d
commit 73d9b3a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/.changeset/wet-dolls-compare.md b/.changeset/wet-dolls-compare.md
@@ -22,12 +22,14 @@ We have updated the following components:
 * GuidedTour
 * GridLayout aka Dashboard
 * HeaderBar
+* List (Virtualized and Composition)
 * ListView
 * MultiSelect
 * Notification
 * ObjectViewer
 * PieChart
 * Progress
+* RadarChart
 * ResourceList
 * ResourcePicker
 * RichLayout

diff --git a/packages/components/src/QualityBar/QualityRatioBar.module.scss b/packages/components/src/QualityBar/QualityRatioBar.module.scss
@@ -1,5 +1,4 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @use '~@talend/design-tokens/lib/tokens';
 
 $custom-quality-bar-placeholder-line-hover-height: 0.4rem;

diff --git a/packages/components/src/RadarChart/RadarChart.component.js b/packages/components/src/RadarChart/RadarChart.component.js
@@ -6,6 +6,7 @@ import {
 	Radar,
 	PolarAngleAxis,
 } from 'recharts';
+import tokens from '@talend/design-tokens';
 import PropTypes from 'prop-types';
 import radarChartCssModule from './RadarChart.module.scss';
 import { getTheme } from '../theme';
@@ -51,6 +52,7 @@ export function RadarChart({
 			width={width}
 			height={height}
 			data={data}
+			fill={tokens.coralColorNeutralBorder}
 		>
 			<PolarGrid />
 			<PolarRadiusAxis domain={domain} tick={tick} axisLine={tickLine} />
@@ -138,7 +140,7 @@ Dot.propTypes = {
  * @param {Object} props the current props of the Radar
  */
 function DotWithClick(props) {
-	const { activeAxis, fill, index, onClick, ...rest } = props;
+	const { activeAxis, fill = tokens.coralColorNeutralBorder, index, onClick, ...rest } = props;
 	const STATE = {
 		DEFAULT_RADIUS: 2,
 		DEFAULT_STROKE_WIDTH: 12,

diff --git a/packages/components/src/RadarChart/RadarChart.module.scss b/packages/components/src/RadarChart/RadarChart.module.scss
@@ -1,4 +1,5 @@
 @use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
+@use '~@talend/design-tokens/lib/tokens';
 
 .tc-radar-chart {
 	:global {
@@ -14,6 +15,6 @@
 }
 
 .tc-radar-chart-label--selected {
-	fill: $regal-blue;
+	fill: tokens.$coral-color-charts-default-strong;
 	font-weight: 600;
 }
diff --git a/packages/components/src/RadarChart/RadarChart.stories.js b/packages/components/src/RadarChart/RadarChart.stories.js
@@ -1,4 +1,6 @@
 import { action } from '@storybook/addon-actions';
+import tokens from '@talend/design-tokens';
+
 import RadarChart from '.';
 
 const ExampleDataSingle = [
@@ -42,8 +44,8 @@ export const RadarChartSingle = () => (
 				name="Trust score"
 				dataKey="A"
 				dot={true}
-				stroke="#19426c"
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 			/>
 		</RadarChart>
@@ -60,16 +62,16 @@ export const RadarChartMultiple = () => (
 				name="Trust score 2019"
 				dataKey="A"
 				dot={false}
-				stroke="#19426c"
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 			/>
 			<RadarChart.Radar
 				name="Trust score 2020"
 				dataKey="B"
 				dot={false}
-				stroke="#EA8330"
-				fill="#EA8330"
+				stroke={tokens.coralColorChartsWarning}
+				fill={tokens.coralColorChartsWarning}
 				fillOpacity={0.1}
 			/>
 		</RadarChart>
@@ -89,10 +91,10 @@ export const RadarChartClickableLabel = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={false}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>
 	</div>
@@ -107,10 +109,10 @@ export const RadarChartClickableDot = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={<RadarChart.DotWithClick activeAxis={2} onClick={action('Axis dot was clicked')} />}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>
 	</div>
@@ -125,10 +127,10 @@ export const RadarChartCustomDot = () => (
 			<RadarChart.Radar
 				dataKey="A"
 				dot={<RadarChart.Dot activeAxis={2} />}
-				fill="#19426c"
+				stroke={tokens.coralColorChartsDefault}
+				fill={tokens.coralColorChartsDefault}
 				fillOpacity={0.1}
 				name="Trust score"
-				stroke="#19426c"
 			/>
 		</RadarChart>