added tooltipContentStyle

SAP · Apr 29, 2020 · f05bc1c · f05bc1c
1 parent 3377b75
commit f05bc1c
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 12 deletions.
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -25,7 +25,7 @@ import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
 import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
 import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
-import { tickLineConfig } from '../../internal/MeasureAxisProps';
+import { tickLineConfig, tooltipContentStyle } from '../../internal/staticProps';
 
 const formatYAxisTicks = (tick = '') => {
   const splitTick = tick.split(' ');
@@ -243,7 +243,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
             label={chartConfig.referenceLine.label}
           />
         )}
-        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
         {chartConfig.zoomingTool && (
           <Brush
             y={10}

diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -25,7 +25,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { tickLineConfig } from '../../internal/MeasureAxisProps';
+import { tickLineConfig, tooltipContentStyle } from '../../internal/staticProps';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -252,7 +252,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
             yAxisId={'left'}
           />
         )}
-        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
         {chartConfig.zoomingTool && (
           <Brush
             y={10}

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
@@ -28,7 +28,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { tickLineConfig } from '../../internal/MeasureAxisProps';
+import { tickLineConfig, tooltipContentStyle } from '../../internal/staticProps';
 
 const dimensionDefaults = {
   formatter: (d) => d
@@ -333,7 +333,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             xAxisId={layout === 'vertical' ? 'primary' : undefined}
           />
         )}
-        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
         {!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
         {measures?.map((element, index) => {
           const ChartElement = (ChartTypes[element.type] as any) as FC<any>;

diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -25,7 +25,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { tickLineConfig } from '../../internal/MeasureAxisProps';
+import { tickLineConfig, tooltipContentStyle } from '../../internal/staticProps';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -242,7 +242,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
             yAxisId={'left'}
           />
         )}
-        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
         {chartConfig.zoomingTool && (
           <Brush
             y={10}

diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx
@@ -7,6 +7,7 @@ import { Bar, BarChart as MicroBarChartLib, Cell, Tooltip, XAxis, YAxis } from '
 import { BarChartPlaceholder } from '../BarChart/Placeholder';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
+import { tooltipContentStyle } from '../../internal/staticProps';
 
 interface MeasureConfig extends Omit<IChartMeasure, 'accessor' | 'color'> {
   /**
@@ -170,7 +171,7 @@ const MicroBarChart: FC<MicroBarChartProps> = forwardRef((props: MicroBarChartPr
               />
             ))}
         </Bar>
-        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
       </MicroBarChartLib>
     </ChartContainer>
   );

diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -8,6 +8,7 @@ import { Cell, Label, Legend, Pie, PieChart as PieChartLib, Tooltip } from 'rech
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { tooltipContentStyle } from '../../internal/staticProps';
 
 interface MeasureConfig extends Omit<IChartMeasure, 'accessor' | 'label' | 'color'> {
   /**
@@ -150,7 +151,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
               />
             ))}
         </Pie>
-        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
         {!noLegend && <Legend verticalAlign={chartConfig.legendPosition} onClick={onItemLegendClick} />}
       </PieChartLib>
     </ChartContainer>

diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -20,6 +20,7 @@ import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
+import { tooltipContentStyle } from '../../internal/staticProps';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -158,7 +159,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
             />
           );
         })}
-        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
+        <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
         {!noLegend && <Legend verticalAlign={chartConfig.legendPosition} onClick={onItemLegendClick} />}
       </RadarChartLib>
     </ChartContainer>

diff --git a/packages/charts/src/internal/MeasureAxisProps.ts b/packages/charts/src/internal/MeasureAxisProps.ts
diff --git a/packages/charts/src/internal/staticProps.ts b/packages/charts/src/internal/staticProps.ts
@@ -0,0 +1,4 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+
+export const tickLineConfig = { stroke: 'transparent' };
+export const tooltipContentStyle = { backgroundColor: ThemingParameters.sapBackgroundColor };