@gravity-ui/charts 1.38.0 → 1.38.1

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

@@ -71,7 +71,7 @@ function renderLegendSymbol(args) {
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
             return (acc +
-                legendItem.symbol.width +
+                legendItem.symbol.bboxWidth +
                 legendItem.symbol.padding +
                 legendItem.textWidth +
                 legend.itemDistance);
@@ -82,13 +82,15 @@ function renderLegendSymbol(args) {
         const x = getXPosition(i);
         const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
         const color = d.visible ? d.color : '';
+        const symbolType = d.symbol.symbolType;
+        const scatterSymbol = getSymbol(symbolType);
         switch (d.symbol.shape) {
             case 'path': {
                 appendLinePathElement({
                     svgRootElement: element.node(),
                     x,
                     height: legendLineHeight,
-                    width: d.symbol.width,
+                    width: d.symbol.bboxWidth,
                     color,
                     className,
                     dashStyle: d.dashStyle,
@@ -102,7 +104,7 @@ function renderLegendSymbol(args) {
                     .append('rect')
                     .attr('x', x)
                     .attr('y', y)
-                    .attr('width', d.symbol.width)
+                    .attr('width', d.symbol.bboxWidth)
                     .attr('height', d.symbol.height)
                     .attr('rx', d.symbol.radius)
                     .attr('class', className)
@@ -110,18 +112,14 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
+                const symbolAreaSize = Math.pow(d.symbol.width, 2);
                 const y = legendLineHeight / 2;
+                const bboxWidth = d.symbol.bboxWidth;
                 element
                     .append('svg:path')
-                    .attr('d', () => {
-                    const scatterSymbol = getSymbol(d.symbol.symbolType);
-                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
-                    // https://d3js.org/d3-shape/symbol#symbol
-                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
-                })
-                    .attr('transform', (_d, _index, elements) => {
-                    var _a, _b;
-                    const translateX = x + ((_b = (_a = elements[0]) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) / 2;
+                    .attr('d', () => symbol(scatterSymbol, symbolAreaSize)())
+                    .attr('transform', () => {
+                    const translateX = x + bboxWidth / 2;
                     return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
@@ -140,7 +138,7 @@ export const Legend = (props) => {
     }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
-            var _a, _b, _c, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!ref.current || !htmlLayout) {
                 return;
             }
@@ -157,7 +155,7 @@ export const Legend = (props) => {
             let legendTop = 0;
             if (legend.type === 'discrete') {
                 const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
-                const end = (_e = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _e === void 0 ? void 0 : _e.end;
+                const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
                 const pageItems = typeof start === 'number' && typeof end === 'number'
                     ? items.slice(start, end)
                     : items;
@@ -178,7 +176,7 @@ export const Legend = (props) => {
                     const getXPosition = (i) => {
                         return line.slice(0, i).reduce((acc, legendItem) => {
                             return (acc +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding +
                                 legendItem.textWidth +
                                 legend.itemDistance);
@@ -202,7 +200,7 @@ export const Legend = (props) => {
                             return `${d.textWidth}px`;
                         })
                             .style('left', function (d, i) {
-                            return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                            return `${getXPosition(i) + d.symbol.bboxWidth + d.symbol.padding}px`;
                         })
                             .style('top', function (d) {
                             if (d.height < legendLineHeight) {
@@ -221,7 +219,7 @@ export const Legend = (props) => {
                             .append('text')
                             .attr('x', function (legendItem, i) {
                             return (getXPosition(i) +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding);
                         })
                             .attr('height', legend.height)
@@ -238,7 +236,7 @@ export const Legend = (props) => {
                     }
                     else {
                         contentWidth = line.reduce((sum, l, index) => {
-                            sum += l.textWidth + l.symbol.width + l.symbol.padding;
+                            sum += l.textWidth + l.symbol.bboxWidth + l.symbol.padding;
                             if (index > 0) {
                                 sum += legend.itemDistance;
                             }
@@ -311,7 +309,7 @@ export const Legend = (props) => {
                 legendLeft = left;
                 legendTop = top;
                 // gradient rect
-                const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
+                const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
                 svgElement.call(createGradientRect, {
                     y: legend.title.height + legend.title.margin,
@@ -380,9 +378,9 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
-                    .attr('font-weight', (_g = legend.title.style.fontWeight) !== null && _g !== void 0 ? _g : null)
-                    .attr('font-size', (_h = legend.title.style.fontSize) !== null && _h !== void 0 ? _h : null)
-                    .attr('fill', (_j = legend.title.style.fontColor) !== null && _j !== void 0 ? _j : null)
+                    .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                    .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                    .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                     .style('dominant-baseline', 'text-before-edge')
                     .html(legend.title.text);
             }

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

@@ -101,7 +101,7 @@ async function getGroupedLegendItems(args) {
         const item = items[i];
         const resultItem = clone(item);
         resultItem.text = item.name;
-        const maxTextWidth = maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+        const maxTextWidth = maxLegendWidth - resultItem.symbol.bboxWidth - resultItem.symbol.padding;
         let textHeight = 0;
         let textWidth = 0;
         if (preparedLegend.html) {
@@ -143,7 +143,7 @@ async function getGroupedLegendItems(args) {
         }
         result[lineIndex].push(resultItem);
         const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
-            return acc + symbol.width + symbol.padding;
+            return acc + symbol.bboxWidth + symbol.padding;
         }, 0);
         const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
         const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;

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

@@ -22,9 +22,11 @@ function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
     return {
         shape: 'path',
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        width: width,
+        bboxWidth: width,
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
         strokeWidth: get(series, 'lineWidth', defaultLineWidth),
     };

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

@@ -11,7 +11,9 @@ export type SymbolLegendSymbol = {
     shape: 'symbol';
     symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
+export type PreparedLegendSymbol = (RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol) & {
+    bboxWidth: number;
+};
 export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
     height: number;
     lineHeight: number;

package/dist/cjs/hooks/useSeries/utils.js

@@ -1,5 +1,6 @@
 import memoize from 'lodash/memoize';
 import { SymbolType } from '../../constants';
+import { getSymbolBBoxWidth } from '../../utils';
 import { getUniqId } from '../../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
@@ -16,10 +17,13 @@ export const getAllLegendItems = (series) => {
 export function prepareLegendSymbol(series, symbolType) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
+    const type = symbolType || SymbolType.Circle;
     return {
         shape: 'symbol',
-        symbolType: symbolType || SymbolType.Circle,
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        symbolType: type,
+        width,
+        bboxWidth: getSymbolBBoxWidth({ symbolSize: Math.pow(width, 2), symbolType: type }),
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

package/dist/cjs/utils/chart/symbol.d.ts

@@ -1,3 +1,7 @@
 import { SymbolType } from '../../constants';
 export declare const getSymbolType: (index: number) => SymbolType;
 export declare const getSymbol: (symbolType: `${SymbolType}`) => import("d3-shape").SymbolType;
+export declare function getSymbolBBoxWidth({ symbolSize, symbolType, }: {
+    symbolSize: number;
+    symbolType: `${SymbolType}`;
+}): number;

package/dist/cjs/utils/chart/symbol.js

@@ -34,3 +34,18 @@ export const getSymbol = (symbolType) => {
             return symbolCircle;
     }
 };
+export function getSymbolBBoxWidth({ symbolSize, symbolType, }) {
+    switch (symbolType) {
+        case SymbolType.Diamond:
+            return Math.sqrt(symbolSize * 2);
+        case SymbolType.Circle:
+            return Math.sqrt(symbolSize / Math.PI) * 2;
+        case SymbolType.Square:
+            return Math.sqrt(symbolSize);
+        case SymbolType.Triangle:
+        case SymbolType.TriangleDown:
+            return Math.sqrt((4 * symbolSize * Math.sqrt(3)) / 3);
+        default:
+            return 0;
+    }
+}

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

@@ -71,7 +71,7 @@ function renderLegendSymbol(args) {
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
             return (acc +
-                legendItem.symbol.width +
+                legendItem.symbol.bboxWidth +
                 legendItem.symbol.padding +
                 legendItem.textWidth +
                 legend.itemDistance);
@@ -82,13 +82,15 @@ function renderLegendSymbol(args) {
         const x = getXPosition(i);
         const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
         const color = d.visible ? d.color : '';
+        const symbolType = d.symbol.symbolType;
+        const scatterSymbol = getSymbol(symbolType);
         switch (d.symbol.shape) {
             case 'path': {
                 appendLinePathElement({
                     svgRootElement: element.node(),
                     x,
                     height: legendLineHeight,
-                    width: d.symbol.width,
+                    width: d.symbol.bboxWidth,
                     color,
                     className,
                     dashStyle: d.dashStyle,
@@ -102,7 +104,7 @@ function renderLegendSymbol(args) {
                     .append('rect')
                     .attr('x', x)
                     .attr('y', y)
-                    .attr('width', d.symbol.width)
+                    .attr('width', d.symbol.bboxWidth)
                     .attr('height', d.symbol.height)
                     .attr('rx', d.symbol.radius)
                     .attr('class', className)
@@ -110,18 +112,14 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
+                const symbolAreaSize = Math.pow(d.symbol.width, 2);
                 const y = legendLineHeight / 2;
+                const bboxWidth = d.symbol.bboxWidth;
                 element
                     .append('svg:path')
-                    .attr('d', () => {
-                    const scatterSymbol = getSymbol(d.symbol.symbolType);
-                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
-                    // https://d3js.org/d3-shape/symbol#symbol
-                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
-                })
-                    .attr('transform', (_d, _index, elements) => {
-                    var _a, _b;
-                    const translateX = x + ((_b = (_a = elements[0]) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) / 2;
+                    .attr('d', () => symbol(scatterSymbol, symbolAreaSize)())
+                    .attr('transform', () => {
+                    const translateX = x + bboxWidth / 2;
                     return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
@@ -140,7 +138,7 @@ export const Legend = (props) => {
     }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
-            var _a, _b, _c, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!ref.current || !htmlLayout) {
                 return;
             }
@@ -157,7 +155,7 @@ export const Legend = (props) => {
             let legendTop = 0;
             if (legend.type === 'discrete') {
                 const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
-                const end = (_e = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _e === void 0 ? void 0 : _e.end;
+                const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
                 const pageItems = typeof start === 'number' && typeof end === 'number'
                     ? items.slice(start, end)
                     : items;
@@ -178,7 +176,7 @@ export const Legend = (props) => {
                     const getXPosition = (i) => {
                         return line.slice(0, i).reduce((acc, legendItem) => {
                             return (acc +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding +
                                 legendItem.textWidth +
                                 legend.itemDistance);
@@ -202,7 +200,7 @@ export const Legend = (props) => {
                             return `${d.textWidth}px`;
                         })
                             .style('left', function (d, i) {
-                            return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                            return `${getXPosition(i) + d.symbol.bboxWidth + d.symbol.padding}px`;
                         })
                             .style('top', function (d) {
                             if (d.height < legendLineHeight) {
@@ -221,7 +219,7 @@ export const Legend = (props) => {
                             .append('text')
                             .attr('x', function (legendItem, i) {
                             return (getXPosition(i) +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding);
                         })
                             .attr('height', legend.height)
@@ -238,7 +236,7 @@ export const Legend = (props) => {
                     }
                     else {
                         contentWidth = line.reduce((sum, l, index) => {
-                            sum += l.textWidth + l.symbol.width + l.symbol.padding;
+                            sum += l.textWidth + l.symbol.bboxWidth + l.symbol.padding;
                             if (index > 0) {
                                 sum += legend.itemDistance;
                             }
@@ -311,7 +309,7 @@ export const Legend = (props) => {
                 legendLeft = left;
                 legendTop = top;
                 // gradient rect
-                const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
+                const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
                 svgElement.call(createGradientRect, {
                     y: legend.title.height + legend.title.margin,
@@ -380,9 +378,9 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
-                    .attr('font-weight', (_g = legend.title.style.fontWeight) !== null && _g !== void 0 ? _g : null)
-                    .attr('font-size', (_h = legend.title.style.fontSize) !== null && _h !== void 0 ? _h : null)
-                    .attr('fill', (_j = legend.title.style.fontColor) !== null && _j !== void 0 ? _j : null)
+                    .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                    .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                    .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                     .style('dominant-baseline', 'text-before-edge')
                     .html(legend.title.text);
             }

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

@@ -101,7 +101,7 @@ async function getGroupedLegendItems(args) {
         const item = items[i];
         const resultItem = clone(item);
         resultItem.text = item.name;
-        const maxTextWidth = maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+        const maxTextWidth = maxLegendWidth - resultItem.symbol.bboxWidth - resultItem.symbol.padding;
         let textHeight = 0;
         let textWidth = 0;
         if (preparedLegend.html) {
@@ -143,7 +143,7 @@ async function getGroupedLegendItems(args) {
         }
         result[lineIndex].push(resultItem);
         const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
-            return acc + symbol.width + symbol.padding;
+            return acc + symbol.bboxWidth + symbol.padding;
         }, 0);
         const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
         const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;

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

@@ -22,9 +22,11 @@ function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
     return {
         shape: 'path',
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        width: width,
+        bboxWidth: width,
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
         strokeWidth: get(series, 'lineWidth', defaultLineWidth),
     };

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

@@ -11,7 +11,9 @@ export type SymbolLegendSymbol = {
     shape: 'symbol';
     symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
+export type PreparedLegendSymbol = (RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol) & {
+    bboxWidth: number;
+};
 export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
     height: number;
     lineHeight: number;

package/dist/esm/hooks/useSeries/utils.js

@@ -1,5 +1,6 @@
 import memoize from 'lodash/memoize';
 import { SymbolType } from '../../constants';
+import { getSymbolBBoxWidth } from '../../utils';
 import { getUniqId } from '../../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
@@ -16,10 +17,13 @@ export const getAllLegendItems = (series) => {
 export function prepareLegendSymbol(series, symbolType) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
+    const type = symbolType || SymbolType.Circle;
     return {
         shape: 'symbol',
-        symbolType: symbolType || SymbolType.Circle,
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        symbolType: type,
+        width,
+        bboxWidth: getSymbolBBoxWidth({ symbolSize: Math.pow(width, 2), symbolType: type }),
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

package/dist/esm/utils/chart/symbol.d.ts

@@ -1,3 +1,7 @@
 import { SymbolType } from '../../constants';
 export declare const getSymbolType: (index: number) => SymbolType;
 export declare const getSymbol: (symbolType: `${SymbolType}`) => import("d3-shape").SymbolType;
+export declare function getSymbolBBoxWidth({ symbolSize, symbolType, }: {
+    symbolSize: number;
+    symbolType: `${SymbolType}`;
+}): number;

package/dist/esm/utils/chart/symbol.js

@@ -34,3 +34,18 @@ export const getSymbol = (symbolType) => {
             return symbolCircle;
     }
 };
+export function getSymbolBBoxWidth({ symbolSize, symbolType, }) {
+    switch (symbolType) {
+        case SymbolType.Diamond:
+            return Math.sqrt(symbolSize * 2);
+        case SymbolType.Circle:
+            return Math.sqrt(symbolSize / Math.PI) * 2;
+        case SymbolType.Square:
+            return Math.sqrt(symbolSize);
+        case SymbolType.Triangle:
+        case SymbolType.TriangleDown:
+            return Math.sqrt((4 * symbolSize * Math.sqrt(3)) / 3);
+        default:
+            return 0;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.38.0",
+  "version": "1.38.1",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",