feat(charts): add support for children prop (enable linear gradients) (#1105)

* feat(charts): add support for children prop (enable linear gradients)

* LineChart: add support for showDot flag

* Update packages/charts/src/interfaces/IChartBaseProps.ts

Co-authored-by: Lukas Harbarth <lukas742@gmx.net>

Co-authored-by: Lukas Harbarth <lukas742@gmx.net>

Author: MarcusNotheis

packages/charts/src/components/BarChart/BarChart.tsx

@@ -280,6 +280,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<H
             height={20}
           />
         )}
+        {props.children}
       </BarChartLib>
     </ChartContainer>
   );

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -299,6 +299,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
             height={20}
           />
         )}
+        {props.children}
       </ColumnChartLib>
     </ChartContainer>
   );

packages/charts/src/components/ComposedChart/index.tsx

@@ -410,6 +410,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             height={20}
           />
         )}
+        {props.children}
       </ComposedChartLib>
     </ChartContainer>
   );

packages/charts/src/components/LineChart/LineChart.stories.tsx

@@ -204,3 +204,34 @@ export const withReferenceLineStory = (props) => {
 };
 
 withReferenceLineStory.storyName = 'With reference line';
+
+export const withLinearGradient = (props) => {
+  return (
+    <LineChart
+      loading={props.loading}
+      noLegend={props.noLegend}
+      noAnimation={props.noAnimation}
+      onDataPointClick={props.onDataPointClick}
+      onLegendClick={props.onLegendClick}
+      dataset={bigDataSet}
+      dimensions={[{ accessor: 'name' }]}
+      measures={[
+        {
+          accessor: 'users',
+          width: 2,
+          color: 'url(#colorUsers)'
+        }
+      ]}
+      style={{ width: '95%', height: '40vh' }}
+    >
+      <defs>
+        <linearGradient id="colorUsers" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor="red" />
+          <stop offset="100%" stopColor="green" />
+        </linearGradient>
+      </defs>
+    </LineChart>
+  );
+};
+
+withLinearGradient.storyName = 'With linear gradient';

packages/charts/src/components/LineChart/LineChart.tsx

@@ -43,6 +43,11 @@ interface MeasureConfig extends IChartMeasure {
    * @default 1
    */
   opacity?: number;
+
+  /**
+   * Flag whether the line dot should be displayed or not.
+   */
+  showDot?: boolean;
 }
 
 interface DimensionConfig extends IChartDimension {
@@ -67,6 +72,7 @@ export interface LineChartProps extends IChartBaseProps {
    * - `DataLabel`: a custom component to be used for the data label
    * - `width`: line width, defaults to `1`
    * - `opacity`: line opacity, defaults to `1`
+   * - `showDot`: Flag whether the line dot should be displayed or not.
    *
    */
   measures: MeasureConfig[];
@@ -227,7 +233,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
         {measures.map((element, index) => {
           return (
             <Line
-              dot={!isBigDataSet}
+              dot={element.showDot ?? !isBigDataSet}
               yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
               key={element.accessor}
               name={element.label ?? element.accessor}
@@ -275,6 +281,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
             height={20}
           />
         )}
+        {props.children}
       </LineChartLib>
     </ChartContainer>
   );

packages/charts/src/components/MicroBarChart/MicroBarChart.tsx

@@ -41,7 +41,7 @@ interface DimensionConfig {
 }
 
 export interface MicroBarChartProps
-  extends Omit<IChartBaseProps, 'noLegend' | 'onLegendClick' | 'noAnimation' | 'chartConfig'> {
+  extends Omit<IChartBaseProps, 'noLegend' | 'onLegendClick' | 'noAnimation' | 'chartConfig' | 'children'> {
   dimension: DimensionConfig;
   /**
    * An array of config objects. Each object is defining one bar in the chart.

packages/charts/src/components/PieChart/PieChart.tsx

@@ -285,6 +285,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<H
             wrapperStyle={legendWrapperStyle}
           />
         )}
+        {props.children}
       </PieChartLib>
     </ChartContainer>
   );

packages/charts/src/components/RadarChart/RadarChart.tsx

@@ -85,7 +85,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
       legendPosition: 'bottom',
       legendHorizontalAlign: 'center',
       dataLabel: true,
-      polarGridType: 'circle' as 'circle',
+      polarGridType: 'circle',
       resizeDebounce: 250,
       ...props.chartConfig
     };
@@ -183,6 +183,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
             onClick={onItemLegendClick}
           />
         )}
+        {props.children}
       </RadarChartLib>
     </ChartContainer>
   );

packages/charts/src/components/ScatterChart/ScatterChart.tsx

@@ -270,6 +270,7 @@ const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps
           </ReferenceLine>
         )}
         <Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
+        {props.children}
       </ScatterChartLib>
     </ChartContainer>
   );

packages/charts/src/interfaces/IChartBaseProps.ts

@@ -1,10 +1,17 @@
 import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps';
+import { ReactNode, ReactNodeArray } from 'react';
 import { ICartesianChartConfig } from './ICartesianChartConfig';
 
 export interface IChartBaseProps<T = ICartesianChartConfig> extends CommonProps {
   loading?: boolean;
   dataset?: Record<string, any>[];
 
+  /**
+   * With the help of the `children` prop you can add more svg elements to the chart, e.g. if you want to display
+   * a linear gradient.
+   */
+  children?: ReactNode | ReactNodeArray;
+
   noLegend?: boolean;
   onDataPointClick?: (event: CustomEvent) => void;
   onLegendClick?: (event: CustomEvent) => void;