@gravity-ui/chartkit 5.8.0 → 5.9.0

package/build/plugins/d3/examples/line/LogarithmicAxis.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LineWithLogarithmicAxis: () => React.JSX.Element;

package/build/plugins/d3/examples/line/LogarithmicAxis.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Col, Container, Row, Text } from '@gravity-ui/uikit';
+import { randomNormal } from 'd3';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+export const LineWithLogarithmicAxis = () => {
+    const randomY = randomNormal(0, 100);
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'line',
+                    name: 'Line series',
+                    data: new Array(25).fill(null).map((_, index) => ({
+                        x: index,
+                        y: Math.abs(randomY()),
+                    })),
+                },
+            ],
+        },
+    };
+    const lineWidgetData = Object.assign(Object.assign({}, widgetData), { title: { text: 'line' } });
+    const logarithmicWidgetData = Object.assign(Object.assign({}, widgetData), { title: { text: 'logarithmic' }, yAxis: [
+            {
+                type: 'logarithmic',
+            },
+        ] });
+    return (React.createElement(Container, { spaceRow: 5 },
+        React.createElement(Row, { space: 1 },
+            React.createElement(Text, { variant: "header-2" }, "logarithmic VS line")),
+        React.createElement(Row, { space: 3 },
+            React.createElement(Col, { s: 12, m: 6 },
+                React.createElement(ExampleWrapper, null,
+                    React.createElement(ChartKit, { type: "d3", data: lineWidgetData }))),
+            React.createElement(Col, { s: 12, m: 6 },
+                React.createElement(ExampleWrapper, null,
+                    React.createElement(ChartKit, { type: "d3", data: logarithmicWidgetData }))))));
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { extent, scaleBand, scaleLinear, scaleUtc } from 'd3';
+import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
@@ -24,7 +24,8 @@ export function createYScale(axis, series, boundsHeight) {
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
     switch (yType) {
-        case 'linear': {
+        case 'linear':
+        case 'logarithmic': {
             const domain = getDomainDataYBySeries(series);
             const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (isNumericalArrayData(domain)) {
@@ -34,7 +35,8 @@ export function createYScale(axis, series, boundsHeight) {
                 if (series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
                     yMaxValue = Math.max(yMaxValue, 0);
                 }
-                return scaleLinear().domain([yMinValue, yMaxValue]).range(range).nice();
+                const scaleFn = yType === 'logarithmic' ? scaleLog : scaleLinear;
+                return scaleFn().domain([yMinValue, yMaxValue]).range(range).nice();
             }
             break;
         }
@@ -94,13 +96,15 @@ export function createXScale(axis, series, boundsWidth) {
     const xAxisMinPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
     const xRange = [0, boundsWidth - xAxisMinPadding];
     switch (xType) {
-        case 'linear': {
+        case 'linear':
+        case 'logarithmic': {
             const domain = getDomainDataXBySeries(series);
             if (isNumericalArrayData(domain)) {
                 const [domainXMin, domainXMax] = extent(domain);
                 const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
                 const xMaxValue = typeof xMax === 'number' ? Math.max(xMax, domainXMax) : domainXMax;
-                return scaleLinear().domain([xMinValue, xMaxValue]).range(xRange).nice();
+                const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
+                return scaleFn().domain([xMinValue, xMaxValue]).range(xRange).nice();
             }
             break;
         }

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

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
@@ -60,7 +60,7 @@ export const getPreparedYAxis = ({ series, yAxis, }) => {
         const titleStyle = {
             fontSize: get(axisItem, 'title.style.fontSize', yAxisTitleDefaults.fontSize),
         };
-        const axisType = get(axisItem, 'type', 'linear');
+        const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
         const preparedAxis = {
             type: axisType,
             labels: {

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -379,9 +379,19 @@ function validateCellManipulationConfig(tooltipOptions, property, item) {
         item[property] = tooltipOptions[property];
     }
 }
+function getSeriesTypeFromTooltipContext() {
+    var _a, _b;
+    if (this.series) {
+        return this.series.type;
+    }
+    if (Array.isArray(this.points)) {
+        return (_b = (_a = this.points[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.type;
+    }
+    return '';
+}
 function getTooltip(tooltip, options, comments, holidays) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const serieType = (this.series && this.series.type) || tooltip.chart.options.chart.type;
+    const serieType = getSeriesTypeFromTooltipContext.call(this) || tooltip.chart.options.chart.type;
     const chart = tooltip.chart;
     const xAxis = chart.xAxis[0];
     const isDatetimeXAxis = xAxis.options.type === 'datetime';

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

@@ -1,6 +1,6 @@
 import type { FormatNumberOptions } from '../../plugins/shared';
 import type { BaseTextStyle } from './base';
-export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear';
+export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
 export type ChartKitWidgetAxisLabels = {
     /** Enable or disable the axis labels. */
     enabled?: boolean;

package/package.json

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