[WIP] YandexMap widget (v3)

package.json

@@ -145,6 +145,7 @@
     "@tanstack/react-virtual": "^3.8.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
+    "@turf/circle": "^7.2.0",
     "@types/cookie-session": "^2.0.49",
     "@types/d3": "^7.4.0",
     "@types/d3-color": "^3.1.3",
@@ -183,6 +184,8 @@
     "@types/uuid": "^9.0.8",
     "@types/webpack-env": "^1.16.0",
     "@types/yup": "^0.29.13",
+    "@yandex/ymaps3-default-ui-theme": "^0.0.19",
+    "@yandex/ymaps3-types": "^1.0.15731128",
     "bem-cn-lite": "^4.0.0",
     "blueimp-md5": "^2.19.0",
     "classnames": "^2.5.1",

src/server/components/charts-engine/components/chart-generator.ts

@@ -271,6 +271,7 @@ export const chartGenerator = {
 
         const isD3Graph = type.indexOf('d3') > -1;
         const isTable = type.indexOf('table') > -1;
+        const isYmap = type.indexOf('ymap') > -1;
         if (type.indexOf('metric') > -1) {
             chart.statface_metric = chart.config.replace('#module', chartTemplate.module);
         } else if (type.indexOf('markup') > -1 || isTable) {
@@ -293,7 +294,7 @@ export const chartGenerator = {
         chart.prepare = chart.prepare.replace('#apiVersion', apiVersion);
         chart.sources = chart.sources.replace('#apiVersion', apiVersion);
 
-        const chartsWithConfig = isD3Graph || isTable;
+        const chartsWithConfig = isD3Graph || isTable || isYmap;
         const {config: _, ...chartWithoutConfig} = chart;
 
         return {chart: chartsWithConfig ? chart : chartWithoutConfig, links, type};

src/server/components/features/features-list/YMapV3ForWizard.ts

@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.YMapV3ForWizard,
+    state: {
+        development: false,
+        production: false,
+    },
+});

src/shared/types/feature.ts

@@ -96,6 +96,8 @@ export enum Feature {
     EnablePublicGallery = 'EnablePublicGallery',
     /** Setting in the table to preserve spaces and line breaks */
     PreWrapTableSetting = 'PreWrapTableSetting',
+    /** Use yandex-map api v3 for wizard geo visualizations */
+    YMapV3ForWizard = 'YMapV3ForWizard',
 }
 
 export type FeatureConfig = Record<string, boolean>;

src/ui/libs/DatalensChartkit/ChartKit/helpers/chartkit-adapter.ts

@@ -28,6 +28,7 @@ export const getChartkitType = (data?: LoadedWidgetData): ChartKitType | undefin
         return undefined;
     }
 
+    const isWizardOrQl = get(data, 'isNewWizard') || get(data, 'isQL');
     let chartkitType: ChartKitType | undefined;
 
     switch (type) {
@@ -66,7 +67,15 @@ export const getChartkitType = (data?: LoadedWidgetData): ChartKitType | undefin
         }
 
         case 'ymap': {
-            chartkitType = 'yandexmap';
+            if (isWizardOrQl) {
+                chartkitType = isEnabledFeature(Feature.YMapV3ForWizard)
+                    ? 'yandexmap_v3'
+                    : 'yandexmap';
+            } else {
+                chartkitType = isEnabledFeature('EnableYandexMapV3CEWidget')
+                    ? 'yandexmap_v3'
+                    : 'yandexmap';
+            }
 
             break;
         }
@@ -84,8 +93,6 @@ export const getChartkitType = (data?: LoadedWidgetData): ChartKitType | undefin
         }
 
         case 'table': {
-            const isWizardOrQl = get(data, 'isNewWizard') || get(data, 'isQL');
-
             if (isWizardOrQl || isEnabledFeature(Feature.NewTableWidgetForCE)) {
                 chartkitType = 'table';
             }
@@ -138,7 +145,8 @@ export const getOpensourceChartKitData = <T extends ChartKitType>({
 
             return data;
         }
-        case 'yandexmap': {
+        case 'yandexmap':
+        case 'yandexmap_v3': {
             const data = {...(loadedData as ChartKitProps<'yandexmap'>['data'])};
 
             return data;

src/ui/libs/DatalensChartkit/ChartKit/helpers/gravity-charts/utils.ts

@@ -11,7 +11,7 @@ const Opacity = {
     UNSELECTED: 0.5,
 };
 
-const SVG_NAMESPACE_URI = 'http://www.w3.org/2000/svg';
+export const SVG_NAMESPACE_URI = 'http://www.w3.org/2000/svg';
 
 export function getPointActionParams(
     point: ChartSeriesData,

src/ui/libs/DatalensChartkit/ChartKit/plugins/YandexMapV3/index.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import type {ChartKitPlugin} from '@gravity-ui/chartkit';
+
+export const YandexMapV3Plugin: ChartKitPlugin = {
+    type: 'yandexmap_v3',
+    renderer: React.lazy(() => import('./renderer/YandexMapWidget')),
+};

src/ui/libs/DatalensChartkit/ChartKit/plugins/YandexMapV3/renderer/YandexMapWidget.scss

@@ -0,0 +1,7 @@
+.chartkit-ymap-widget {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    justify-content: center;
+}

src/ui/libs/DatalensChartkit/ChartKit/plugins/YandexMapV3/renderer/YandexMapWidget.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import type {ChartKitWidgetRef} from '@gravity-ui/chartkit';
+import {CHARTKIT_ERROR_CODE, ChartKitError} from '@gravity-ui/chartkit';
+import {Loader} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+
+import Performance from '../../../../modules/perfomance';
+import {getRandomCKId} from '../../../helpers/getRandomCKId';
+import type {YandexMapWidgetProps} from '../types';
+
+import {isYmapsReady} from './yamap';
+
+import './YandexMapWidget.scss';
+
+const Map = React.lazy(() => import('./components/Map/Map'));
+
+const b = block('chartkit-ymap-widget');
+
+export const YandexMapWidget = React.forwardRef<
+    ChartKitWidgetRef | undefined,
+    YandexMapWidgetProps
+>((props, forwardedRef) => {
+    const {
+        id,
+        lang,
+        onLoad,
+        data: {data: originalData, config, libraryConfig},
+    } = props;
+
+    const [isLoading, setLoading] = React.useState(true);
+
+    const generatedId = React.useMemo(() => `${id}_${getRandomCKId()}`, [originalData, config, id]);
+    Performance.mark(generatedId);
+
+    React.useImperativeHandle(
+        forwardedRef,
+        () => ({
+            reflow() {},
+        }),
+        [],
+    );
+
+    const loadYmap = React.useCallback(async () => {
+        try {
+            await isYmapsReady({
+                apiKey: libraryConfig?.apiKey ?? '',
+                lang,
+            });
+            setLoading(false);
+        } catch (e) {
+            setLoading(false);
+        }
+    }, [libraryConfig?.apiKey, lang]);
+
+    React.useEffect(() => {
+        loadYmap();
+    }, [loadYmap]);
+
+    const handleMapReady = React.useCallback(() => {
+        const widgetRendering = Performance.getDuration(generatedId);
+
+        if (onLoad && widgetRendering) {
+            onLoad({widget: props.data, widgetRendering});
+        }
+    }, [generatedId, onLoad, props.data]);
+
+    if (!originalData || (typeof originalData === 'object' && !Object.keys(originalData).length)) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.NO_DATA,
+        });
+    }
+
+    if (isLoading) {
+        return (
+            <div className={b()}>
+                <Loader />
+            </div>
+        );
+    }
+
+    if (typeof ymaps3 === 'undefined') {
+        throw Error('Could not load yandex-map API');
+    }
+
+    return (
+        <div className={b()}>
+            <Map {...props.data} onReady={handleMapReady} />
+        </div>
+    );
+});
+
+YandexMapWidget.displayName = 'YandexMapWidget';
+
+export default YandexMapWidget;