@gravity-ui/chartkit 5.17.1 → 5.18.0

package/build/plugins/d3/renderer/components/styles.css

@@ -1,140 +0,0 @@
-.chartkit-d3 {
-  position: absolute;
-}
-
-.chartkit-d3__html-layer {
-  display: contents;
-}
-
-.chartkit-d3__html-layer > * {
-  transform: inherit;
-}
-
-.chartkit-d3-axis .domain {
-  stroke: var(--g-color-line-generic-active);
-}
-
-.chartkit-d3-axis .tick text {
-  color: var(--g-color-text-secondary);
-  alignment-baseline: after-edge;
-}
-
-.chartkit-d3-axis .tick line, .chartkit-d3-axis .tick path {
-  stroke: var(--g-color-line-generic);
-}
-
-.chartkit-d3-axis__title {
-  alignment-baseline: after-edge;
-  fill: var(--g-color-text-secondary);
-}
-
-.chartkit-d3-axis__title tspan {
-  alignment-baseline: after-edge;
-}
-
-.chartkit-d3-legend {
-  color: var(--g-color-text-secondary);
-}
-
-.chartkit-d3-legend__title {
-  fill: var(--g-color-text-secondary);
-}
-
-.chartkit-d3-legend__item {
-  cursor: pointer;
-  user-select: none;
-}
-
-.chartkit-d3-legend__item-symbol_shape_rect.chartkit-d3-legend__item-symbol_unselected {
-  fill: var(--g-color-text-hint);
-}
-
-.chartkit-d3-legend__item-symbol_shape_path.chartkit-d3-legend__item-symbol_unselected {
-  stroke: var(--g-color-text-hint);
-}
-
-.chartkit-d3-legend__item-symbol_shape_symbol.chartkit-d3-legend__item-symbol_unselected {
-  fill: var(--g-color-text-hint);
-}
-
-.chartkit-d3-legend__item-text {
-  fill: var(--g-color-text-secondary);
-  alignment-baseline: before-edge;
-}
-
-.chartkit-d3-legend__item-text_unselected {
-  fill: var(--g-color-text-hint);
-}
-
-.chartkit-d3-legend__item-text:hover {
-  fill: var(--g-color-text-complementary);
-}
-
-.chartkit-d3-legend__pagination {
-  fill: var(--g-color-text-primary);
-  user-select: none;
-}
-
-.chartkit-d3-legend__pagination-counter, .chartkit-d3-legend__pagination-arrow {
-  alignment-baseline: middle;
-}
-
-.chartkit-d3-legend__pagination-arrow {
-  fill: var(--g-color-text-brand);
-  cursor: pointer;
-}
-
-.chartkit-d3-legend__pagination-arrow_inactive {
-  fill: var(--g-color-base-generic-accent-disabled);
-  cursor: inherit;
-}
-
-.chartkit-d3-legend__pagination-arrow:hover:not(.chartkit-d3-legend__pagination-arrow_inactive) {
-  fill: var(--g-color-base-brand-hover);
-}
-
-.chartkit-d3-title {
-  font-size: var(--g-text-subheader-2-font-size);
-  font-weight: var(--g-text-subheader-font-weight);
-  fill: var(--g-color-text-primary);
-}
-
-.chartkit-d3-plot-title {
-  font-size: var(--g-text-subheader-3-font-size);
-  font-weight: var(--g-text-subheader-font-weight);
-  fill: var(--g-color-text-secondary);
-}
-
-.chartkit-d3-tooltip[class] {
-  --g-popup-border-width: 0;
-  pointer-events: none;
-}
-
-.chartkit-d3-tooltip[class] > div {
-  animation-duration: unset;
-  animation-timing-function: unset;
-  animation-fill-mode: unset;
-}
-
-.chartkit-d3-tooltip__content {
-  padding: 10px 14px;
-  background-color: var(--g-color-infographics-tooltip-bg);
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: 3px;
-  box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
-  text-wrap: nowrap;
-}
-
-.chartkit-d3-tooltip__content-row {
-  display: flex;
-  align-items: center;
-}
-
-.chartkit-d3-tooltip__color {
-  height: 8px;
-  width: 16px;
-  display: inline-block;
-  margin-right: 8px;
-  border-radius: 2px;
-  background-color: #dddddd;
-}

package/build/plugins/d3/renderer/constants/defaults/axis.d.ts

@@ -1,14 +0,0 @@
-import type { BaseTextStyle, ChartKitWidgetAxis, ChartKitWidgetAxisType } from '../../../../../types';
-export declare const axisLabelsDefaults: {
-    margin: number;
-    padding: number;
-    fontSize: number;
-    maxWidth: number;
-};
-type AxisTitleDefaults = Required<ChartKitWidgetAxis['title']> & {
-    style: BaseTextStyle;
-};
-export declare const xAxisTitleDefaults: AxisTitleDefaults;
-export declare const yAxisTitleDefaults: AxisTitleDefaults;
-export declare const DEFAULT_AXIS_TYPE: ChartKitWidgetAxisType;
-export {};

package/build/plugins/d3/renderer/constants/defaults/axis.js

@@ -1,18 +0,0 @@
-export const axisLabelsDefaults = {
-    margin: 10,
-    padding: 10,
-    fontSize: 11,
-    maxWidth: 80,
-};
-const axisTitleDefaults = {
-    text: '',
-    margin: 0,
-    style: {
-        fontSize: '14px',
-    },
-    align: 'center',
-    maxRowCount: 1,
-};
-export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
-export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });
-export const DEFAULT_AXIS_TYPE = 'linear';

package/build/plugins/d3/renderer/constants/defaults/index.d.ts

@@ -1,3 +0,0 @@
-export * from './axis';
-export * from './legend';
-export * from './series-options';

package/build/plugins/d3/renderer/constants/defaults/index.js

@@ -1,3 +0,0 @@
-export * from './axis';
-export * from './legend';
-export * from './series-options';

package/build/plugins/d3/renderer/constants/defaults/legend.d.ts

@@ -1,12 +0,0 @@
-export declare const legendDefaults: {
-    align: "left" | "center" | "right";
-    itemDistance: number;
-    margin: number;
-    itemStyle: {
-        fontSize: string;
-    };
-};
-export declare const CONTINUOUS_LEGEND_SIZE: {
-    height: number;
-    width: number;
-};

package/build/plugins/d3/renderer/constants/defaults/legend.js

@@ -1,12 +0,0 @@
-export const legendDefaults = {
-    align: 'center',
-    itemDistance: 20,
-    margin: 15,
-    itemStyle: {
-        fontSize: '12px',
-    },
-};
-export const CONTINUOUS_LEGEND_SIZE = {
-    height: 12,
-    width: 200,
-};

package/build/plugins/d3/renderer/constants/defaults/series-options.d.ts

@@ -1,24 +0,0 @@
-import type { ChartKitWidgetSeriesOptions } from '../../../../../types';
-type DefaultBarXSeriesOptions = Partial<ChartKitWidgetSeriesOptions['bar-x']> & {
-    'bar-x': {
-        barMaxWidth: number;
-        barPadding: number;
-        groupPadding: number;
-    };
-};
-type DefaultBarYSeriesOptions = Partial<ChartKitWidgetSeriesOptions['bar-x']> & {
-    'bar-y': {
-        barMaxWidth: number;
-        barPadding: number;
-        groupPadding: number;
-    };
-};
-type DefaultWaterfallSeriesOptions = Partial<ChartKitWidgetSeriesOptions['waterfall']> & {
-    waterfall: {
-        barMaxWidth: number;
-        barPadding: number;
-    };
-};
-export type SeriesOptionsDefaults = Partial<ChartKitWidgetSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions & DefaultWaterfallSeriesOptions;
-export declare const seriesOptionsDefaults: SeriesOptionsDefaults;
-export {};

package/build/plugins/d3/renderer/constants/defaults/series-options.js

@@ -1,106 +0,0 @@
-export const seriesOptionsDefaults = {
-    'bar-x': {
-        barMaxWidth: 50,
-        barPadding: 0.1,
-        groupPadding: 0.2,
-        states: {
-            hover: {
-                enabled: true,
-                brightness: 0.3,
-            },
-            inactive: {
-                enabled: false,
-                opacity: 0.5,
-            },
-        },
-    },
-    'bar-y': {
-        barMaxWidth: 50,
-        barPadding: 0.1,
-        groupPadding: 0.2,
-        states: {
-            hover: {
-                enabled: true,
-                brightness: 0.3,
-            },
-            inactive: {
-                enabled: false,
-                opacity: 0.5,
-            },
-        },
-    },
-    pie: {
-        states: {
-            hover: {
-                enabled: true,
-                brightness: 0.3,
-            },
-            inactive: {
-                enabled: false,
-                opacity: 0.5,
-            },
-        },
-    },
-    scatter: {
-        states: {
-            hover: {
-                enabled: true,
-                brightness: 0.3,
-            },
-            inactive: {
-                enabled: false,
-                opacity: 0.5,
-            },
-        },
-    },
-    line: {
-        states: {
-            hover: {
-                enabled: true,
-                brightness: 0.3,
-            },
-            inactive: {
-                enabled: false,
-                opacity: 0.5,
-            },
-        },
-    },
-    area: {
-        states: {
-            hover: {
-                enabled: true,
-                brightness: 0.3,
-            },
-            inactive: {
-                enabled: false,
-                opacity: 0.5,
-            },
-        },
-    },
-    treemap: {
-        states: {
-            hover: {
-                enabled: true,
-                brightness: 0.3,
-            },
-            inactive: {
-                enabled: false,
-                opacity: 0.5,
-            },
-        },
-    },
-    waterfall: {
-        barMaxWidth: 50,
-        barPadding: 0.1,
-        states: {
-            hover: {
-                enabled: true,
-                brightness: 0.3,
-            },
-            inactive: {
-                enabled: false,
-                opacity: 0.5,
-            },
-        },
-    },
-};

package/build/plugins/d3/renderer/constants/index.d.ts

@@ -1,3 +0,0 @@
-export * from './defaults';
-export declare const DEFAULT_PALETTE: string[];
-export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";

package/build/plugins/d3/renderer/constants/index.js

@@ -1,24 +0,0 @@
-export * from './defaults';
-export const DEFAULT_PALETTE = [
-    '#4DA2F1',
-    '#FF3D64',
-    '#8AD554',
-    '#FFC636',
-    '#FFB9DD',
-    '#84D1EE',
-    '#FF91A1',
-    '#54A520',
-    '#DB9100',
-    '#BA74B3',
-    '#1F68A9',
-    '#ED65A9',
-    '#0FA08D',
-    '#FF7E00',
-    '#E8B0A4',
-    '#52A6C5',
-    '#BE2443',
-    '#70C1AF',
-    '#FFB46C',
-    '#DCA3D7',
-];
-export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';

package/build/plugins/d3/renderer/d3-dispatcher.d.ts

@@ -1 +0,0 @@
-export declare const getD3Dispatcher: () => import("d3-dispatch").Dispatch<object>;

package/build/plugins/d3/renderer/d3-dispatcher.js

@@ -1,4 +0,0 @@
-import { dispatch } from 'd3';
-export const getD3Dispatcher = () => {
-    return dispatch('hover-shape', 'click-chart');
-};

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

@@ -1,10 +0,0 @@
-export * from './useChartDimensions';
-export * from './useChartOptions';
-export * from './useChartOptions/types';
-export * from './useAxisScales';
-export * from './useSeries';
-export * from './useSeries/types';
-export * from './useShapes';
-export * from './useTooltip';
-export * from './useTooltip/types';
-export * from './useSplit/types';

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

@@ -1,10 +0,0 @@
-export * from './useChartDimensions';
-export * from './useChartOptions';
-export * from './useChartOptions/types';
-export * from './useAxisScales';
-export * from './useSeries';
-export * from './useSeries/types';
-export * from './useShapes';
-export * from './useTooltip';
-export * from './useTooltip/types';
-export * from './useSplit/types';

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

@@ -1,25 +0,0 @@
-import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
-import { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
-import type { PreparedAxis } from '../useChartOptions/types';
-import type { PreparedSeries } from '../useSeries/types';
-import type { PreparedSplit } from '../useSplit/types';
-export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
-type Args = {
-    boundsWidth: number;
-    boundsHeight: number;
-    series: PreparedSeries[];
-    xAxis: PreparedAxis;
-    yAxis: PreparedAxis[];
-    split: PreparedSplit;
-};
-type ReturnValue = {
-    xScale?: ChartScale;
-    yScale?: ChartScale[];
-};
-export declare function createYScale(axis: PreparedAxis, series: PreparedSeries[], boundsHeight: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
-export declare function createXScale(axis: PreparedAxis | ChartKitWidgetAxis, series: (PreparedSeries | ChartKitWidgetSeries)[], boundsWidth: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
-/**
- * Uses to create scales for axis related series
- */
-export declare const useAxisScales: (args: Args) => ReturnValue;
-export {};

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

@@ -1,183 +0,0 @@
-import React from 'react';
-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';
-const isNumericalArrayData = (data) => {
-    return data.every((d) => typeof d === 'number' || d === null);
-};
-const filterCategoriesByVisibleSeries = (args) => {
-    const { axisDirection, categories, series } = args;
-    const visibleCategories = new Set();
-    series.forEach((s) => {
-        if (isSeriesWithCategoryValues(s)) {
-            s.data.forEach((d) => {
-                visibleCategories.add(getDataCategoryValue({ axisDirection, categories, data: d }));
-            });
-        }
-    });
-    return categories.filter((c) => visibleCategories.has(c));
-};
-export function createYScale(axis, series, boundsHeight) {
-    const yType = get(axis, 'type', DEFAULT_AXIS_TYPE);
-    const yMin = get(axis, 'min');
-    const yCategories = get(axis, 'categories');
-    const yTimestamps = get(axis, 'timestamps');
-    switch (yType) {
-        case 'linear':
-        case 'logarithmic': {
-            const domain = getDomainDataYBySeries(series);
-            const range = [boundsHeight, boundsHeight * axis.maxPadding];
-            if (isNumericalArrayData(domain)) {
-                const [domainYMin, domainMax] = extent(domain);
-                const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                let yMaxValue = domainMax;
-                if (series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
-                    yMaxValue = Math.max(yMaxValue, 0);
-                }
-                const scaleFn = yType === 'logarithmic' ? scaleLog : scaleLinear;
-                return scaleFn().domain([yMinValue, yMaxValue]).range(range).nice();
-            }
-            break;
-        }
-        case 'category': {
-            if (yCategories) {
-                const filteredCategories = filterCategoriesByVisibleSeries({
-                    axisDirection: 'y',
-                    categories: yCategories,
-                    series: series,
-                });
-                return scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
-            }
-            break;
-        }
-        case 'datetime': {
-            const range = [boundsHeight, boundsHeight * axis.maxPadding];
-            if (yTimestamps) {
-                const [yMin, yMax] = extent(yTimestamps);
-                return scaleUtc().domain([yMin, yMax]).range(range).nice();
-            }
-            else {
-                const domain = getDomainDataYBySeries(series);
-                if (isNumericalArrayData(domain)) {
-                    const [yMin, yMax] = extent(domain);
-                    return scaleUtc().domain([yMin, yMax]).range(range).nice();
-                }
-            }
-            break;
-        }
-    }
-    throw new Error('Failed to create yScale');
-}
-function calculateXAxisPadding(series) {
-    let result = 0;
-    series.forEach((s) => {
-        switch (s.type) {
-            case 'bar-y': {
-                // Since labels can be located to the right of the bar, need to add an additional space
-                const inside = get(s, 'dataLabels.inside');
-                if (!inside) {
-                    const labelsMaxWidth = get(s, 'dataLabels.maxWidth', 0);
-                    result = Math.max(result, labelsMaxWidth);
-                }
-                break;
-            }
-        }
-    });
-    return result;
-}
-export function createXScale(axis, series, boundsWidth) {
-    const xMin = get(axis, 'min');
-    const xMax = getDefaultMaxXAxisValue(series);
-    const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
-    const xCategories = get(axis, 'categories');
-    const xTimestamps = get(axis, 'timestamps');
-    const maxPadding = get(axis, 'maxPadding', 0);
-    const xAxisMinPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
-    const xRange = [0, boundsWidth - xAxisMinPadding];
-    switch (xType) {
-        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;
-                const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                return scaleFn().domain([xMinValue, xMaxValue]).range(xRange).nice();
-            }
-            break;
-        }
-        case 'category': {
-            if (xCategories) {
-                const filteredCategories = filterCategoriesByVisibleSeries({
-                    axisDirection: 'x',
-                    categories: xCategories,
-                    series: series,
-                });
-                const xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
-                if (xScale.step() / 2 < xAxisMinPadding) {
-                    xScale.range(xRange);
-                }
-                return xScale;
-            }
-            break;
-        }
-        case 'datetime': {
-            if (xTimestamps) {
-                const [xMin, xMax] = extent(xTimestamps);
-                return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
-            }
-            else {
-                const domain = getDomainDataXBySeries(series);
-                if (isNumericalArrayData(domain)) {
-                    const [xMin, xMax] = extent(domain);
-                    return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
-                }
-            }
-            break;
-        }
-    }
-    throw new Error('Failed to create xScale');
-}
-const createScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
-    let visibleSeries = getOnlyVisibleSeries(series);
-    // Reassign to all series in case of all series unselected,
-    // otherwise we will get an empty space without grid
-    visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
-    return {
-        xScale: createXScale(xAxis, visibleSeries, boundsWidth),
-        yScale: yAxis.map((axis, index) => {
-            const axisSeries = series.filter((s) => {
-                const seriesAxisIndex = get(s, 'yAxis', 0);
-                return seriesAxisIndex === index;
-            });
-            const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
-            const axisHeight = getAxisHeight({ boundsHeight, split });
-            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, axisHeight);
-        }),
-    };
-};
-/**
- * Uses to create scales for axis related series
- */
-export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
-    return React.useMemo(() => {
-        let xScale;
-        let yScale;
-        const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
-        if (hasAxisRelatedSeries) {
-            ({ xScale, yScale } = createScales({
-                boundsWidth,
-                boundsHeight,
-                series,
-                xAxis,
-                yAxis,
-                split,
-            }));
-        }
-        return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split]);
-};

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

@@ -1,16 +0,0 @@
-import type { ChartMargin } from '../../../../../types';
-import type { PreparedAxis, PreparedLegend, PreparedSeries } from '../../hooks';
-export { getBoundsWidth } from './utils';
-type Args = {
-    width: number;
-    height: number;
-    margin: ChartMargin;
-    preparedLegend: PreparedLegend;
-    preparedXAxis: PreparedAxis;
-    preparedYAxis: PreparedAxis[];
-    preparedSeries: PreparedSeries[];
-};
-export declare const useChartDimensions: (args: Args) => {
-    boundsWidth: number;
-    boundsHeight: number;
-};

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import { isAxisRelatedSeries } from '../../utils';
-import { getBoundsWidth } from './utils';
-export { getBoundsWidth } from './utils';
-const getBottomOffset = (args) => {
-    const { hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
-    let result = 0;
-    if (preparedLegend.enabled) {
-        result += preparedLegend.height + preparedLegend.margin;
-    }
-    if (hasAxisRelatedSeries) {
-        if (preparedXAxis.title.text) {
-            result += preparedXAxis.title.height + preparedXAxis.title.margin;
-        }
-        if (preparedXAxis.labels.enabled) {
-            result += preparedXAxis.labels.margin + preparedXAxis.labels.height;
-        }
-    }
-    return result;
-};
-export const useChartDimensions = (args) => {
-    const { margin, width, height, preparedLegend, preparedXAxis, preparedYAxis, preparedSeries } = args;
-    return React.useMemo(() => {
-        const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
-        const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
-        const bottomOffset = getBottomOffset({
-            hasAxisRelatedSeries,
-            preparedLegend,
-            preparedXAxis,
-        });
-        const boundsHeight = height - margin.top - margin.bottom - bottomOffset;
-        return { boundsWidth, boundsHeight };
-    }, [margin, width, height, preparedLegend, preparedXAxis, preparedYAxis, preparedSeries]);
-};

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.d.ts

@@ -1,10 +0,0 @@
-import type { PreparedAxis, PreparedChart } from '../../hooks';
-export declare const getBoundsWidth: (args: {
-    chartWidth: number;
-    chartMargin: PreparedChart['margin'];
-    preparedYAxis: PreparedAxis[];
-}) => number;
-export declare function getYAxisWidth(axis: PreparedAxis | undefined): number;
-export declare function getWidthOccupiedByYAxis(args: {
-    preparedAxis: PreparedAxis[];
-}): number;