1- import styles from " ./ColorfulChart.module.scss" ;
2- import { Legend } from " ./Legend/Legend" ;
3- import { Title } from " ./Title/Title" ;
4- import { LinesChart } from " ../LinesChart/LinesChart" ;
5- import { LineDescription } from " ../LinesChart/types" ;
6- import { useMemo } from " react" ;
1+ import styles from ' ./ColorfulChart.module.scss' ;
2+ import { Legend } from ' ./Legend/Legend' ;
3+ import { Title } from ' ./Title/Title' ;
4+ import { LinesChart } from ' ../LinesChart/LinesChart' ;
5+ import { LineDescription } from ' ../LinesChart/types' ;
6+ import { useMemo } from ' react' ;
77
8- const palette = [ " #EE8735" , " #51C6EB" , " #7BEE35" , " #e469ca" ] ;
8+ const palette = [ ' #EE8735' , ' #51C6EB' , ' #7BEE35' , ' #e469ca' ] ;
99
1010type Props = {
1111 className ?: string ;
12- title : string ;
12+ title ? : string ;
1313 items : LineDescription [ ] ;
1414 length : number ;
1515 height ?: string ;
16+ showLegend ?: boolean ;
17+ showTitle ?: boolean ;
1618} ;
1719
1820export const ColorfulChart = ( {
19- className = "" ,
20- title,
21+ className = '' ,
22+ title = '' ,
2123 items,
2224 length,
23- height = "8rem" ,
25+ height = '8rem' ,
26+ showLegend = false ,
27+ showTitle = false ,
2428} : Props ) => {
2529 const itemsWithPalette = useMemo (
2630 ( ) =>
@@ -33,7 +37,7 @@ export const ColorfulChart = ({
3337
3438 return (
3539 < div className = { `${ styles . colorfulChart } ${ className } ` } >
36- < Title title = { title } />
40+ { showTitle && < Title title = { title } /> }
3741 < div className = { styles . body } >
3842 < LinesChart
3943 height = { height }
@@ -42,7 +46,7 @@ export const ColorfulChart = ({
4246 items = { itemsWithPalette }
4347 length = { length }
4448 />
45- < Legend items = { itemsWithPalette } />
49+ { showLegend && < Legend items = { itemsWithPalette } /> }
4650 </ div >
4751 </ div >
4852 ) ;
0 commit comments