fix

gravity-ui · Oct 14, 2024 · 5c61275 · 5c61275
1 parent 3019ef8
commit 5c61275
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 17 deletions.
diff --git a/...tories__/bar-x/GradientLegend.stories.tsx → ...ries__/bar-x/ContinuousLegend.stories.tsx b/...tories__/bar-x/GradientLegend.stories.tsx → ...ries__/bar-x/ContinuousLegend.stories.tsx
@@ -12,7 +12,7 @@ import nintendoGames from '../../examples/nintendoGames';
 import {D3Plugin} from '../../index';
 import {getContinuesColorFn} from '../../renderer/utils';
 
-const BarXWithGradientLegend = () => {
+const BarXWithContinuousLegend = () => {
     const [loading, setLoading] = React.useState(true);
 
     React.useEffect(() => {
@@ -53,7 +53,7 @@ const BarXWithGradientLegend = () => {
             type: 'category',
             categories,
         },
-        title: {text: 'Bar-x with gradient legend'},
+        title: {text: 'Bar-x with continues color'},
         legend: {
             enabled: true,
             type: 'continuous',
@@ -72,11 +72,11 @@ const BarXWithGradientLegend = () => {
     );
 };
 
-export const BarXWithGradientLegendStory: StoryObj<typeof BarXWithGradientLegend> = {
-    name: 'Gradient colored bar-x chart',
+export const BarXWithContinuousLegendStory: StoryObj<typeof BarXWithContinuousLegend> = {
+    name: 'Continuous legend',
 };
 
 export default {
     title: 'Plugins/D3/Bar-x',
-    component: BarXWithGradientLegend,
+    component: BarXWithContinuousLegend,
 };
diff --git a/..._stories__/pie/GradientLegend.stories.tsx → ...tories__/pie/ContinuousLegend.stories.tsx b/..._stories__/pie/GradientLegend.stories.tsx → ...tories__/pie/ContinuousLegend.stories.tsx
@@ -12,7 +12,7 @@ import nintendoGames from '../../examples/nintendoGames';
 import {D3Plugin} from '../../index';
 import {getContinuesColorFn} from '../../renderer/utils';
 
-const PieWithGradientLegend = () => {
+const PieWithContinuousLegend = () => {
     const [loading, setLoading] = React.useState(true);
 
     React.useEffect(() => {
@@ -47,7 +47,7 @@ const PieWithGradientLegend = () => {
                 },
             ],
         },
-        title: {text: 'Pie with gradient legend'},
+        title: {text: 'Pie with continues color'},
         legend: {
             enabled: true,
             type: 'continuous',
@@ -66,11 +66,11 @@ const PieWithGradientLegend = () => {
     );
 };
 
-export const PieWithGradientLegendStory: StoryObj<typeof PieWithGradientLegend> = {
-    name: 'Gradient colored pie',
+export const PieWithContinuousLegendStory: StoryObj<typeof PieWithContinuousLegend> = {
+    name: 'Pie with continuous color',
 };
 
 export default {
     title: 'Plugins/D3/Pie',
-    component: PieWithGradientLegend,
+    component: PieWithContinuousLegend,
 };
diff --git a/src/plugins/d3/renderer/components/Legend.tsx b/src/plugins/d3/renderer/components/Legend.tsx
@@ -4,7 +4,7 @@ import {line as lineGenerator, scaleLinear, select, symbol} from 'd3';
 import type {AxisDomain, AxisScale, BaseType, Selection} from 'd3';
 
 import {block} from '../../../../utils/cn';
-import {GRADIENT_LEGEND_SIZE} from '../constants';
+import {CONTINUOUS_LEGEND_SIZE} from '../constants';
 import type {
     LegendConfig,
     LegendItem,
@@ -291,7 +291,7 @@ export const Legend = (props: Props) => {
         } else {
             // gradient rect
             const domain = legend.colorScale.domain ?? [];
-            const rectHeight = GRADIENT_LEGEND_SIZE.height;
+            const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
             svgElement.call(createGradientRect, {
                 y: legend.title.height + legend.title.margin,
                 height: rectHeight,

diff --git a/src/plugins/d3/renderer/constants/defaults/legend.ts b/src/plugins/d3/renderer/constants/defaults/legend.ts
@@ -9,7 +9,7 @@ export const legendDefaults = {
     },
 };
 
-export const GRADIENT_LEGEND_SIZE = {
+export const CONTINUOUS_LEGEND_SIZE = {
     height: 12,
     width: 200,
 };
diff --git a/src/plugins/d3/renderer/hooks/useSeries/prepare-legend.ts b/src/plugins/d3/renderer/hooks/useSeries/prepare-legend.ts
@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import merge from 'lodash/merge';
 
 import type {BaseTextStyle, ChartKitWidgetData} from '../../../../../types';
-import {GRADIENT_LEGEND_SIZE, legendDefaults} from '../../constants';
+import {CONTINUOUS_LEGEND_SIZE, legendDefaults} from '../../constants';
 import {
     getDefaultColorStops,
     getDomainForContinuousColorScale,
@@ -38,7 +38,7 @@ export const getPreparedLegend = (args: {
     const titleStyle: BaseTextStyle = {
         fontSize: '12px',
         fontWeight: 'bold',
-        ...get(legend, 'title.style', {}),
+        ...get(legend, 'title.style'),
     };
     const titleText = isTitleEnabled ? get(legend, 'title.text', '') : '';
     const titleHeight = isTitleEnabled
@@ -60,7 +60,7 @@ export const getPreparedLegend = (args: {
     if (enabled) {
         height += titleHeight + titleMargin;
         if (legendType === 'continuous') {
-            height += GRADIENT_LEGEND_SIZE.height;
+            height += CONTINUOUS_LEGEND_SIZE.height;
             height += ticks.labelsLineHeight + ticks.labelsMargin;
 
             colorScale.colors = legend?.colorScale?.colors ?? [];
@@ -73,7 +73,7 @@ export const getPreparedLegend = (args: {
         }
     }
 
-    const legendWidth = get(legend, 'width', GRADIENT_LEGEND_SIZE.width);
+    const legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
 
     return {
         align: get(legend, 'align', legendDefaults.align),

diff --git a/src/plugins/d3/renderer/utils/color.ts b/src/plugins/d3/renderer/utils/color.ts
@@ -24,6 +24,11 @@ export function getDomainForContinuousColorScale(args: {
                 acc.push(...s.data.map((d) => Number(d.y)));
                 break;
             }
+            default: {
+                throw Error(
+                    `The method for calculation a domain for a continuous color scale for the "${s.type}" series is not defined`,
+                );
+            }
         }
 
         return acc;

diff --git a/src/types/widget-data/legend.ts b/src/types/widget-data/legend.ts
@@ -31,6 +31,7 @@ export type ChartKitWidgetLegend = {
      * @default 15
      */
     margin?: number;
+    /* The title that will be added on top of the legend. */
     title?: {
         text?: string;
         /** CSS styles for the title */