feat(D3 plugin): axis maxPadding options (#231)

* feat(D3 plugin) axis maxPadding options * fix formatAxisTickLabel
gravity-ui · Aug 17, 2023 · 89602a3 · 89602a3
1 parent 0a4c3c0
commit 89602a3
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 32 deletions.
diff --git a/src/plugins/d3/__stories__/scatter/LinearCategories.stories.tsx b/src/plugins/d3/__stories__/scatter/LinearCategories.stories.tsx
@@ -58,9 +58,6 @@ const shapeScatterChartData = (
     categories?: string[],
 ): ChartKitWidgetData => {
     let xAxis: ChartKitWidgetAxis = {
-        labels: {
-            enabled: false,
-        },
         title: {
             text: text('X axis title', ''),
         },

diff --git a/src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx b/src/plugins/d3/__stories__/scatter/Timestamp.stories.tsx
@@ -76,12 +76,18 @@ const shapeData = (data: Record<string, any>[]): ChartKitWidgetData<string> => {
             grid: {
                 enabled: boolean('xAxis.grid.enabled', true),
             },
+            labels: {
+                enabled: boolean('xAxis.labels.enabled', true),
+            },
         },
         yAxis: [
             {
                 grid: {
                     enabled: boolean('yAxis.grid.enabled', true),
                 },
+                labels: {
+                    enabled: boolean('yAxis.labels.enabled', true),
+                },
             },
         ],
         tooltip: {
@@ -90,9 +96,6 @@ const shapeData = (data: Record<string, any>[]): ChartKitWidgetData<string> => {
                 return <div style={{color: d.custom}}>{dateTime({input: d.x}).format('LL')}</div>;
             },
         },
-        title: {
-            text: 'Chart title',
-        },
     };
 };
 

diff --git a/src/plugins/d3/renderer/components/AxisX.tsx b/src/plugins/d3/renderer/components/AxisX.tsx
@@ -52,17 +52,25 @@ export const AxisX = ({axis, width, height, scale}: Props) => {
             .tickSize(tickSize)
             .tickPadding(axis.labels.padding)
             .tickFormat((value) => {
+                if (!axis.labels.enabled) {
+                    return '';
+                }
+
                 return formatAxisTickLabel({
                     axisType: axis.type,
                     value,
-                    dateFormat: axis.labels.dateFormat,
-                    numberFormat: axis.labels.numberFormat,
+                    dateFormat: axis.labels['dateFormat'],
+                    numberFormat: axis.labels['numberFormat'],
                 });
             });
 
         svgElement.call(xAxisGenerator).attr('class', b());
         svgElement.select('.domain').attr('d', `M0,0V0H${width}`);
-        svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
+
+        if (axis.labels.enabled) {
+            svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
+        }
+
         const transformStyle = svgElement.select('.tick').attr('transform');
         const {x} = parseTransformStyle(transformStyle);
 

diff --git a/src/plugins/d3/renderer/components/AxisY.tsx b/src/plugins/d3/renderer/components/AxisY.tsx
@@ -53,20 +53,28 @@ export const AxisY = ({axises, width, height, scale}: Props) => {
             .tickSize(tickSize)
             .tickPadding(axis.labels.padding)
             .tickFormat((value) => {
+                if (!axis.labels.enabled) {
+                    return '';
+                }
+
                 return formatAxisTickLabel({
                     axisType: axis.type,
                     value,
-                    dateFormat: axis.labels.dateFormat,
-                    numberFormat: axis.labels.numberFormat,
+                    dateFormat: axis.labels['dateFormat'],
+                    numberFormat: axis.labels['numberFormat'],
                 });
             });
 
         svgElement.call(yAxisGenerator).attr('class', b());
         svgElement.select('.domain').attr('d', `M0,${height}H0V0`);
-        svgElement
-            .selectAll('.tick text')
-            .style('font-size', axis.labels.style.fontSize)
-            .style('transform', 'translateY(-1px)');
+
+        if (axis.labels.enabled) {
+            svgElement
+                .selectAll('.tick text')
+                .style('font-size', axis.labels.style.fontSize)
+                .style('transform', 'translateY(-1px)');
+        }
+
         const transformStyle = svgElement.select('.tick').attr('transform');
         const {y} = parseTransformStyle(transformStyle);
 

diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/chart.ts b/src/plugins/d3/renderer/hooks/useChartOptions/chart.ts
@@ -34,12 +34,16 @@ const getAxisLabelMaxWidth = (args: {axis: PreparedAxis; series: ChartKitWidgetS
         }
     }
 
-    const formattedValue = formatAxisTickLabel({
-        axisType: axis.type,
-        value: maxDomainValue,
-        dateFormat: axis.labels.dateFormat,
-        numberFormat: axis.labels.numberFormat,
-    });
+    let formattedValue = '';
+
+    if (axis.labels.enabled) {
+        formattedValue = formatAxisTickLabel({
+            axisType: axis.type,
+            value: maxDomainValue,
+            dateFormat: axis.labels['dateFormat'],
+            numberFormat: axis.labels['numberFormat'],
+        });
+    }
 
     select(document.body)
         .append('text')
@@ -69,11 +73,17 @@ export const getPreparedChart = (args: {
         preparedY1Axis.labels.padding +
         getAxisLabelMaxWidth({axis: preparedY1Axis, series: series.data}) +
         (preparedY1Axis.title.height || 0);
+    const marginTop =
+        get(chart, 'margin.top', 0) +
+        getHorisontalSvgTextDimensions({text: 'Tmp', style: preparedY1Axis.labels.style}) / 2;
+    const marginRight =
+        get(chart, 'margin.right', 0) +
+        getAxisLabelMaxWidth({axis: preparedXAxis, series: series.data}) / 2;
 
     return {
         margin: {
-            top: get(chart, 'margin.top', 0),
-            right: get(chart, 'margin.right', 0),
+            top: marginTop,
+            right: marginRight,
             bottom: marginBottom,
             left: marginLeft,
         },

diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/types.ts b/src/plugins/d3/renderer/hooks/useChartOptions/types.ts
@@ -31,6 +31,7 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
     grid: {
         enabled: boolean;
     };
+    maxPadding: number;
 };
 
 export type PreparedTitle = ChartKitWidgetData['title'] & {

diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts b/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts
@@ -36,6 +36,7 @@ export const getPreparedXAxis = ({xAxis}: {xAxis: ChartKitWidgetData['xAxis']}):
                 : 0,
         },
         min: get(xAxis, 'min'),
+        maxPadding: get(xAxis, 'maxPadding', 0.01),
         grid: {
             enabled: get(xAxis, 'grid.enabled', true),
         },

diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts b/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts
@@ -40,6 +40,7 @@ export const getPreparedYAxis = ({yAxis}: {yAxis: ChartKitWidgetData['yAxis']}):
                 : 0,
         },
         min: get(yAxis1, 'min'),
+        maxPadding: get(yAxis1, 'maxPadding', 0.05),
         grid: {
             enabled: get(yAxis1, 'grid.enabled', true),
         },

diff --git a/src/plugins/d3/renderer/hooks/useScales/index.ts b/src/plugins/d3/renderer/hooks/useScales/index.ts
@@ -58,10 +58,11 @@ export const useScales = (args: Args): ReturnValue => {
         switch (xType) {
             case 'linear': {
                 const domain = getDomainDataXBySeries(visibleSeries);
+                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
 
                 if (isNumericalArrayData(domain)) {
                     const [xMin, xMax] = extent(domain) as [number, number];
-                    xScale = scaleLinear().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                    xScale = scaleLinear().domain([xMin, xMax]).range(range).nice();
                 }
 
                 break;
@@ -78,15 +79,17 @@ export const useScales = (args: Args): ReturnValue => {
                 break;
             }
             case 'datetime': {
+                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
+
                 if (xTimestamps) {
                     const [xMin, xMax] = extent(xTimestamps) as [number, number];
-                    xScale = scaleUtc().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                    xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
                 } else {
                     const domain = getDomainDataXBySeries(visibleSeries);
 
                     if (isNumericalArrayData(domain)) {
                         const [xMin, xMax] = extent(domain) as [number, number];
-                        xScale = scaleUtc().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                        xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
                     }
                 }
 
@@ -101,14 +104,12 @@ export const useScales = (args: Args): ReturnValue => {
         switch (yType) {
             case 'linear': {
                 const domain = getDomainDataYBySeries(visibleSeries);
+                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
 
                 if (isNumericalArrayData(domain)) {
                     const [domainYMin, yMax] = extent(domain) as [number, number];
                     const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                    yScale = scaleLinear()
-                        .domain([yMinValue, yMax])
-                        .range([boundsHeight, 0])
-                        .nice();
+                    yScale = scaleLinear().domain([yMinValue, yMax]).range(range).nice();
                 }
 
                 break;
@@ -125,15 +126,17 @@ export const useScales = (args: Args): ReturnValue => {
                 break;
             }
             case 'datetime': {
+                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
+
                 if (yTimestamps) {
                     const [yMin, yMax] = extent(yTimestamps) as [number, number];
-                    yScale = scaleUtc().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                    yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
                 } else {
                     const domain = getDomainDataYBySeries(visibleSeries);
 
                     if (isNumericalArrayData(domain)) {
                         const [yMin, yMax] = extent(domain) as [number, number];
-                        yScale = scaleUtc().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                        yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
                     }
                 }
 

diff --git a/src/types/widget-data/axis.ts b/src/types/widget-data/axis.ts
@@ -33,4 +33,11 @@ export type ChartKitWidgetAxis = {
          * */
         enabled?: boolean;
     };
+
+    /** 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
+     * */
+    maxPadding?: number;
 };