feat(D3 plugin): add axis.lineColor property & add default for user…

…s tooltip renderer (#277)

* feat(D3 plugin): add lineColor property to axis options

* feat(D3 plugin): use default renderer in case of users renderer return null

src/plugins/d3/__stories__/bar-x/Grouped.stories.tsx

@@ -23,6 +23,7 @@ const Template: Story = () => {
                 type: 'linear',
                 labels: {enabled: true},
                 min: 0,
+                lineColor: 'transparent',
             },
         ],
         series: {

src/plugins/d3/renderer/components/AxisX.tsx

@@ -3,14 +3,15 @@ import {axisBottom, select} from 'd3';
 import type {AxisScale, AxisDomain, Selection} from 'd3';
 
 import {block} from '../../../../utils/cn';
-import type {ChartOptions, ChartScale} from '../hooks';
+
+import type {ChartScale, PreparedAxis} from '../hooks';
 import {formatAxisTickLabel, parseTransformStyle} from '../utils';
 
 const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
 
 type Props = {
-    axis: ChartOptions['xAxis'];
+    axis: PreparedAxis;
     width: number;
     height: number;
     scale: ChartScale;
@@ -70,7 +71,10 @@ export const AxisX = ({axis, width, height, scale}: Props) => {
         }
 
         svgElement.call(xAxisGenerator).attr('class', b());
-        svgElement.select('.domain').attr('d', `M0,0V0H${width}`);
+        svgElement
+            .select('.domain')
+            .attr('d', `M0,0V0H${width}`)
+            .style('stroke', axis.lineColor || '');
 
         if (axis.labels.enabled) {
             svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);

src/plugins/d3/renderer/components/AxisY.tsx

@@ -3,14 +3,15 @@ import {axisLeft, select} from 'd3';
 import type {AxisScale, AxisDomain, Selection} from 'd3';
 
 import {block} from '../../../../utils/cn';
-import type {ChartOptions, ChartScale} from '../hooks';
+
+import type {ChartScale, PreparedAxis} from '../hooks';
 import {formatAxisTickLabel, parseTransformStyle} from '../utils';
 
 const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
 
 type Props = {
-    axises: ChartOptions['yAxis'];
+    axises: PreparedAxis[];
     width: number;
     height: number;
     scale: ChartScale;
@@ -71,7 +72,10 @@ export const AxisY = ({axises, width, height, scale}: Props) => {
         }
 
         svgElement.call(yAxisGenerator).attr('class', b());
-        svgElement.select('.domain').attr('d', `M0,${height}H0V0`);
+        svgElement
+            .select('.domain')
+            .attr('d', `M0,${height}H0V0`)
+            .style('stroke', axis.lineColor || '');
 
         if (axis.labels.enabled) {
             svgElement

src/plugins/d3/renderer/components/Tooltip/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import isNil from 'lodash/isNil';
 
 import type {TooltipHoveredData} from '../../../../../types/widget-data';
 import {block} from '../../../../../utils/cn';
@@ -46,13 +47,17 @@ export const Tooltip = (props: TooltipProps) => {
         return undefined;
     }, [hovered, pointerPosition, size]);
     const content = React.useMemo(() => {
-        if (tooltip.renderer && hovered) {
-            return tooltip.renderer({hovered});
-        } else if (hovered) {
-            return <DefaultContent hovered={hovered} xAxis={xAxis} yAxis={yAxis} />;
+        if (!hovered) {
+            return null;
         }
 
-        return null;
+        const customTooltip = tooltip.renderer?.({hovered});
+
+        return isNil(customTooltip) ? (
+            <DefaultContent hovered={hovered} xAxis={xAxis} yAxis={yAxis} />
+        ) : (
+            customTooltip
+        );
     }, [hovered, tooltip, xAxis, yAxis]);
 
     if (!position || !hovered) {

src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts

@@ -26,6 +26,7 @@ export const getPreparedXAxis = ({xAxis}: {xAxis: ChartKitWidgetData['xAxis']}):
             numberFormat: get(xAxis, 'labels.numberFormat'),
             style: {fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE)},
         },
+        lineColor: get(xAxis, 'lineColor'),
         categories: get(xAxis, 'categories'),
         timestamps: get(xAxis, 'timestamps'),
         title: {

src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts

@@ -30,6 +30,7 @@ export const getPreparedYAxis = ({yAxis}: {yAxis: ChartKitWidgetData['yAxis']}):
             numberFormat: get(yAxis1, 'labels.numberFormat'),
             style: y1LabelsStyle,
         },
+        lineColor: get(yAxis1, 'lineColor'),
         categories: get(yAxis1, 'categories'),
         timestamps: get(yAxis1, 'timestamps'),
         title: {

src/types/widget-data/axis.ts

@@ -4,9 +4,9 @@ import type {BaseTextStyle} from './base';
 export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear';
 
 export type ChartKitWidgetAxisLabels = {
-    /** Enable or disable the axis labels */
+    /** Enable or disable the axis labels. */
     enabled?: boolean;
-    /** The pixel padding for axis labels */
+    /** The pixel padding for axis labels. */
     padding?: number;
     dateFormat?: string;
     numberFormat?: FormatNumberOptions;
@@ -17,33 +17,32 @@ export type ChartKitWidgetAxis = {
     categories?: string[];
     timestamps?: number[];
     type?: ChartKitWidgetAxisType;
-    /** The axis labels show the number or category for each tick */
+    /** The axis labels show the number or category for each tick. */
     labels?: ChartKitWidgetAxisLabels;
+    /** The color of the line marking the axis itself. */
+    lineColor?: string;
     title?: {
         text?: string;
     };
-
-    /** The minimum value of the axis. If undefined the min value is automatically calculate */
+    /** The minimum value of the axis. If undefined the min value is automatically calculate. */
     min?: number;
-
+    /** The grid lines settings. */
     grid?: {
         /** Enable or disable the grid lines.
          *
          * Defaults to true.
          * */
         enabled?: boolean;
     };
-
     ticks?: {
         /** Pixel interval of the tick marks. Not applicable to categorized axis.
          * The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */
         pixelInterval?: number;
     };
-
     /** Padding of the max value relative to the length of the axis.
      * A padding of 0.05 will make a 100px axis 5px longer.
      *
-     * Defaults to 0.05 for Y axis and to 0.01 for X axis
+     * Defaults to 0.05 for Y axis and to 0.01 for X axis.
      * */
     maxPadding?: number;
 };

src/types/widget-data/tooltip.ts

@@ -7,5 +7,6 @@ export type TooltipHoveredData<T = any> = {
 
 export type ChartKitWidgetTooltip<T = any> = {
     enabled?: boolean;
+    /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
     renderer?: (data: {hovered: TooltipHoveredData<T>}) => React.ReactElement;
 };