@gravity-ui/chartkit 4.2.0 → 4.4.0

package/build/plugins/d3/renderer/components/AxisX.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { ChartOptions, ChartScale } from '../hooks';
+import type { ChartScale, PreparedAxis } from '../hooks';
 type Props = {
-    axis: ChartOptions['xAxis'];
+    axis: PreparedAxis;
     width: number;
     height: number;
     scale: ChartScale;

package/build/plugins/d3/renderer/components/AxisX.js

@@ -51,7 +51,10 @@ export const AxisX = ({ axis, width, height, scale }) => {
             xAxisGenerator = xAxisGenerator.ticks(ticksCount);
         }
         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);
         }

package/build/plugins/d3/renderer/components/AxisY.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { ChartOptions, ChartScale } from '../hooks';
+import type { ChartScale, PreparedAxis } from '../hooks';
 type Props = {
-    axises: ChartOptions['yAxis'];
+    axises: PreparedAxis[];
     width: number;
     height: number;
     scale: ChartScale;

package/build/plugins/d3/renderer/components/AxisY.js

@@ -52,7 +52,10 @@ export const AxisY = ({ axises, width, height, scale }) => {
             yAxisGenerator = yAxisGenerator.ticks(ticksCount);
         }
         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
                 .selectAll('.tick text')

package/build/plugins/d3/renderer/components/Chart.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ChartKitWidgetData } from '../../../../types/widget-data';
+import type { ChartKitWidgetData } from '../../../../types';
 import './styles.css';
 type Props = {
     top: number;

package/build/plugins/d3/renderer/components/Chart.js

@@ -37,6 +37,7 @@ export const Chart = (props) => {
         boundsWidth,
         boundsHeight,
         series: preparedSeries,
+        seriesOptions: data.series.options,
         xAxis,
         xScale,
         yAxis,

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import isNil from 'lodash/isNil';
 import { block } from '../../../../../utils/cn';
 import { DefaultContent } from './DefaultContent';
 const b = block('d3-tooltip');
@@ -32,13 +33,12 @@ export const Tooltip = (props) => {
         return undefined;
     }, [hovered, pointerPosition, size]);
     const content = React.useMemo(() => {
-        if (tooltip.renderer && hovered) {
-            return tooltip.renderer({ hovered });
+        var _a;
+        if (!hovered) {
+            return null;
         }
-        else if (hovered) {
-            return React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis });
-        }
-        return null;
+        const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
+        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
     }, [hovered, tooltip, xAxis, yAxis]);
     if (!position || !hovered) {
         return null;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -15,6 +15,7 @@ export const getPreparedXAxis = ({ 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: {

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

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

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ChartKitWidgetSeriesOptions } from '../../../../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { ChartOptions } from '../useChartOptions/types';
 import type { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
@@ -7,6 +8,7 @@ type Args = {
     top: number;
     left: number;
     series: PreparedBarXSeries[];
+    seriesOptions?: ChartKitWidgetSeriesOptions;
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
     yAxis: ChartOptions['yAxis'];

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.js

@@ -1,18 +1,35 @@
-import { max, pointer, select } from 'd3';
+import { ascending, descending, max, pointer, select, sort } from 'd3';
 import React from 'react';
 import get from 'lodash/get';
 import { block } from '../../../../../utils/cn';
 import { getDataCategoryValue } from '../../utils';
-const RECT_PADDING = 0.1;
+import { DEFAULT_BAR_X_SERIES_OPTIONS } from './defaults';
 const MIN_RECT_GAP = 1;
-const MAX_RECT_WIDTH = 50;
-const GROUP_PADDING = 0.1;
 const MIN_GROUP_GAP = 1;
 const DEFAULT_LABEL_PADDING = 7;
 const b = block('d3-bar-x');
 function prepareData(args) {
-    const { series, xAxis, xScale, yScale } = args;
+    const { series, seriesOptions, xAxis, xScale, yScale } = args;
     const categories = get(xAxis, 'categories', []);
+    const { barMaxWidth: defaultBarMaxWidth, barPadding: defaultBarPadding, groupPadding: defaultGroupPadding, } = DEFAULT_BAR_X_SERIES_OPTIONS;
+    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth', defaultBarMaxWidth);
+    const barPadding = get(seriesOptions, 'bar-x.barPadding', defaultBarPadding);
+    const groupPadding = get(seriesOptions, 'bar-x.groupPadding', defaultGroupPadding);
+    const sortingOptions = get(seriesOptions, 'bar-x.dataSorting');
+    const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
+    const sortKey = (() => {
+        switch (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.key) {
+            case 'y': {
+                return 'data.y';
+            }
+            case 'name': {
+                return 'series.name';
+            }
+            default: {
+                return undefined;
+            }
+        }
+    })();
     const data = {};
     series.forEach((s) => {
         s.data.forEach((d) => {
@@ -52,17 +69,20 @@ function prepareData(args) {
         });
     }
     const maxGroupSize = max(Object.values(data), (d) => Object.values(d).length) || 1;
-    const groupGap = Math.max(bandWidth * GROUP_PADDING, MIN_GROUP_GAP);
-    const maxGroupWidth = bandWidth - groupGap;
-    const rectGap = Math.max((maxGroupWidth / maxGroupSize) * RECT_PADDING, MIN_RECT_GAP);
-    const rectWidth = Math.min(maxGroupWidth / maxGroupSize - rectGap, MAX_RECT_WIDTH);
+    const groupGap = Math.max(bandWidth * groupPadding, MIN_GROUP_GAP);
+    const groupWidth = bandWidth - groupGap;
+    const rectGap = Math.max(bandWidth * barPadding, MIN_RECT_GAP);
+    const rectWidth = Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth);
     const result = [];
     Object.entries(data).forEach(([xValue, val]) => {
         const stacks = Object.values(val);
         const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
         stacks.forEach((yValues, groupItemIndex) => {
             let stackHeight = 0;
-            yValues.forEach((yValue) => {
+            const sortedData = sortKey
+                ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
+                : yValues;
+            sortedData.forEach((yValue) => {
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;
@@ -91,7 +111,7 @@ function prepareData(args) {
     return result;
 }
 export function BarXSeriesShapes(args) {
-    const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
+    const { top, left, series, seriesOptions, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -101,6 +121,7 @@ export function BarXSeriesShapes(args) {
         svgElement.selectAll('*').remove();
         const shapes = prepareData({
             series,
+            seriesOptions,
             xAxis,
             xScale,
             yAxis,

package/build/plugins/d3/renderer/hooks/useShapes/defaults.d.ts

@@ -0,0 +1,5 @@
+export declare const DEFAULT_BAR_X_SERIES_OPTIONS: {
+    barMaxWidth: number;
+    barPadding: number;
+    groupPadding: number;
+};

package/build/plugins/d3/renderer/hooks/useShapes/defaults.js

@@ -0,0 +1,5 @@
+export const DEFAULT_BAR_X_SERIES_OPTIONS = {
+    barMaxWidth: 50,
+    barPadding: 0.1,
+    groupPadding: 0.2,
+};

package/build/plugins/d3/renderer/hooks/useShapes/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ChartKitWidgetSeriesOptions } from '../../../../../types';
 import type { ChartOptions } from '../useChartOptions/types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedSeries } from '../';
@@ -10,6 +11,7 @@ type Args = {
     boundsWidth: number;
     boundsHeight: number;
     series: PreparedSeries[];
+    seriesOptions?: ChartKitWidgetSeriesOptions;
     xAxis: ChartOptions['xAxis'];
     yAxis: ChartOptions['yAxis'];
     svgContainer: SVGSVGElement | null;

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -7,7 +7,7 @@ import { ScatterSeriesShape } from './scatter';
 import { PieSeriesComponent } from './pie';
 import './styles.css';
 export const useShapes = (args) => {
-    const { top, left, boundsWidth, boundsHeight, series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
+    const { top, left, boundsWidth, boundsHeight, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
     const shapes = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
@@ -16,7 +16,7 @@ export const useShapes = (args) => {
             switch (seriesType) {
                 case 'bar-x': {
                     if (xScale && yScale) {
-                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", series: chartSeries, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, top: top, left: left, svgContainer: svgContainer, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave }));
+                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", series: chartSeries, seriesOptions: seriesOptions, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, top: top, left: left, svgContainer: svgContainer, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave }));
                     }
                     break;
                 }

package/build/types/widget-data/axis.d.ts

@@ -2,9 +2,9 @@ import type { FormatNumberOptions } from '../../plugins/shared';
 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;
@@ -14,13 +14,16 @@ 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.
          *
@@ -36,7 +39,7 @@ export type ChartKitWidgetAxis = {
     /** 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;
 };

package/build/types/widget-data/series.d.ts

@@ -15,4 +15,35 @@ export type ChartKitWidgetSeriesOptions = {
         /** Callback function to render the data label */
         renderer?: (args: DataLabelRendererData) => React.SVGTextElementAttributes<SVGTextElement>;
     };
+    'bar-x'?: {
+        /** The maximum allowed pixel width for a column.
+         * This prevents the columns from becoming too wide when there is a small number of points in the chart.
+         *
+         * @default 50
+         */
+        barMaxWidth?: number;
+        /** Padding between each column or bar, in x axis units.
+         *
+         * @default 0.1
+         * */
+        barPadding?: number;
+        /** Padding between each value groups, in x axis units
+         *
+         * @default 0.2
+         */
+        groupPadding?: number;
+        dataSorting?: {
+            /** Determines what data value should be used to sort by.
+             * Possible values are undefined to disable, "name" to sort by series name or "y"
+             *
+             * @default undefined
+             * */
+            key?: 'name' | 'y' | undefined;
+            /** Sorting direction.
+             *
+             * @default 'asc'
+             * */
+            direction?: 'asc' | 'desc';
+        };
+    };
 };

package/build/types/widget-data/tooltip.d.ts

@@ -6,6 +6,7 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",