@gravity-ui/charts 0.4.0 → 0.5.0

package/dist/cjs/components/Legend/index.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { getLineDashArray } from '../../hooks/useShapes/utils';
+import { formatNumber } from '../../libs';
 import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
-    const { align, offsetWidth, width, contentWidth } = args;
+    const { align, offsetWidth = 0, width, contentWidth } = args;
     const top = 0;
     if (align === 'left') {
         return { top, left: offsetWidth };
@@ -229,14 +230,16 @@ export const Legend = (props) => {
                 }),
             });
             // ticks
+            const scale = scaleLinear(domain, [0, legend.width]);
             const xAxisGenerator = axisBottom({
-                scale: scaleLinear(domain, [0, legend.width]),
+                scale,
                 ticks: {
                     items: [[0, -rectHeight]],
                     labelsMargin: legend.ticks.labelsMargin,
                     labelsLineHeight: legend.ticks.labelsLineHeight,
                     maxTickCount: 4,
                     tickColor: '#fff',
+                    labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
                 },
                 domain: {
                     size: legend.width,
@@ -251,15 +254,31 @@ export const Legend = (props) => {
             legendWidth = legend.width;
         }
         if (legend.title.enable) {
-            const { maxWidth: labelWidth } = getLabelsSize({
+            const { maxWidth: titleWidth } = getLabelsSize({
                 labels: [legend.title.text],
                 style: legend.title.style,
             });
+            let dx = 0;
+            switch (legend.title.align) {
+                case 'center': {
+                    dx = legend.width / 2 - titleWidth / 2;
+                    break;
+                }
+                case 'right': {
+                    dx = legend.width - titleWidth;
+                    break;
+                }
+                case 'left':
+                default: {
+                    dx = 0;
+                    break;
+                }
+            }
             svgElement
                 .append('g')
                 .attr('class', b('title'))
                 .append('text')
-                .attr('dx', legend.width / 2 - labelWidth / 2)
+                .attr('dx', dx)
                 .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)

package/dist/cjs/hooks/useSeries/prepare-legend.js

@@ -63,6 +63,7 @@ export const getPreparedLegend = (args) => {
             margin: titleMargin,
             style: titleStyle,
             height: titleHeight,
+            align: get(legend, 'title.align', 'left'),
         },
         width: legendWidth,
         ticks,

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -21,6 +21,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
         margin: number;
         style: BaseTextStyle;
         height: number;
+        align: Required<Required<ChartLegend>['title']>['align'];
     };
     ticks: {
         labelsMargin: number;

package/dist/cjs/libs/chart-error/index.d.ts

@@ -10,7 +10,7 @@ export declare const CHART_ERROR_CODE: {
 };
 export declare class ChartError extends Error {
     readonly code: number | string;
-    readonly isChartError = true;
+    readonly isCustomError = true;
     constructor({ originalError, message, code }?: ChartErrorArgs);
 }
-export declare const isChartError: (error: unknown) => error is ChartError;
+export declare const isCustomError: (error: unknown) => error is ChartError;

package/dist/cjs/libs/chart-error/index.js

@@ -1,12 +1,12 @@
 export const CHART_ERROR_CODE = {
-    NO_DATA: 'NO_DATA',
-    INVALID_DATA: 'INVALID_DATA',
-    UNKNOWN: 'UNKNOWN_ERROR',
+    NO_DATA: 'ERR.CK.NO_DATA',
+    INVALID_DATA: 'ERR.CK.INVALID_DATA',
+    UNKNOWN: 'ERR.CK.UNKNOWN_ERROR',
 };
 export class ChartError extends Error {
     constructor({ originalError, message, code = CHART_ERROR_CODE.UNKNOWN } = {}) {
         super(message);
-        this.isChartError = true;
+        this.isCustomError = true;
         this.code = code;
         if (originalError) {
             this.name = originalError.name;
@@ -14,6 +14,6 @@ export class ChartError extends Error {
         }
     }
 }
-export const isChartError = (error) => {
-    return error instanceof Error && 'isChartError' in error;
+export const isCustomError = (error) => {
+    return error instanceof Error && 'isCustomError' in error;
 };

package/dist/cjs/types/chart/legend.d.ts

@@ -38,6 +38,8 @@ export type ChartLegend = {
          * Defaults to 4 for horizontal axes, 8 for vertical.
          * */
         margin?: number;
+        /** The horizontal alignment of the title. */
+        align?: 'left' | 'center' | 'right';
     };
     colorScale?: {
         stops?: number[];

package/dist/esm/components/Legend/index.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { getLineDashArray } from '../../hooks/useShapes/utils';
+import { formatNumber } from '../../libs';
 import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
-    const { align, offsetWidth, width, contentWidth } = args;
+    const { align, offsetWidth = 0, width, contentWidth } = args;
     const top = 0;
     if (align === 'left') {
         return { top, left: offsetWidth };
@@ -229,14 +230,16 @@ export const Legend = (props) => {
                 }),
             });
             // ticks
+            const scale = scaleLinear(domain, [0, legend.width]);
             const xAxisGenerator = axisBottom({
-                scale: scaleLinear(domain, [0, legend.width]),
+                scale,
                 ticks: {
                     items: [[0, -rectHeight]],
                     labelsMargin: legend.ticks.labelsMargin,
                     labelsLineHeight: legend.ticks.labelsLineHeight,
                     maxTickCount: 4,
                     tickColor: '#fff',
+                    labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
                 },
                 domain: {
                     size: legend.width,
@@ -251,15 +254,31 @@ export const Legend = (props) => {
             legendWidth = legend.width;
         }
         if (legend.title.enable) {
-            const { maxWidth: labelWidth } = getLabelsSize({
+            const { maxWidth: titleWidth } = getLabelsSize({
                 labels: [legend.title.text],
                 style: legend.title.style,
             });
+            let dx = 0;
+            switch (legend.title.align) {
+                case 'center': {
+                    dx = legend.width / 2 - titleWidth / 2;
+                    break;
+                }
+                case 'right': {
+                    dx = legend.width - titleWidth;
+                    break;
+                }
+                case 'left':
+                default: {
+                    dx = 0;
+                    break;
+                }
+            }
             svgElement
                 .append('g')
                 .attr('class', b('title'))
                 .append('text')
-                .attr('dx', legend.width / 2 - labelWidth / 2)
+                .attr('dx', dx)
                 .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)

package/dist/esm/hooks/useSeries/prepare-legend.js

@@ -63,6 +63,7 @@ export const getPreparedLegend = (args) => {
             margin: titleMargin,
             style: titleStyle,
             height: titleHeight,
+            align: get(legend, 'title.align', 'left'),
         },
         width: legendWidth,
         ticks,

package/dist/esm/hooks/useSeries/types.d.ts

@@ -21,6 +21,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
         margin: number;
         style: BaseTextStyle;
         height: number;
+        align: Required<Required<ChartLegend>['title']>['align'];
     };
     ticks: {
         labelsMargin: number;

package/dist/esm/libs/chart-error/index.d.ts

@@ -10,7 +10,7 @@ export declare const CHART_ERROR_CODE: {
 };
 export declare class ChartError extends Error {
     readonly code: number | string;
-    readonly isChartError = true;
+    readonly isCustomError = true;
     constructor({ originalError, message, code }?: ChartErrorArgs);
 }
-export declare const isChartError: (error: unknown) => error is ChartError;
+export declare const isCustomError: (error: unknown) => error is ChartError;

package/dist/esm/libs/chart-error/index.js

@@ -1,12 +1,12 @@
 export const CHART_ERROR_CODE = {
-    NO_DATA: 'NO_DATA',
-    INVALID_DATA: 'INVALID_DATA',
-    UNKNOWN: 'UNKNOWN_ERROR',
+    NO_DATA: 'ERR.CK.NO_DATA',
+    INVALID_DATA: 'ERR.CK.INVALID_DATA',
+    UNKNOWN: 'ERR.CK.UNKNOWN_ERROR',
 };
 export class ChartError extends Error {
     constructor({ originalError, message, code = CHART_ERROR_CODE.UNKNOWN } = {}) {
         super(message);
-        this.isChartError = true;
+        this.isCustomError = true;
         this.code = code;
         if (originalError) {
             this.name = originalError.name;
@@ -14,6 +14,6 @@ export class ChartError extends Error {
         }
     }
 }
-export const isChartError = (error) => {
-    return error instanceof Error && 'isChartError' in error;
+export const isCustomError = (error) => {
+    return error instanceof Error && 'isCustomError' in error;
 };

package/dist/esm/types/chart/legend.d.ts

@@ -38,6 +38,8 @@ export type ChartLegend = {
          * Defaults to 4 for horizontal axes, 8 for vertical.
          * */
         margin?: number;
+        /** The horizontal alignment of the title. */
+        align?: 'left' | 'center' | 'right';
     };
     colorScale?: {
         stops?: number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",