@kanaries/graphic-walker 0.2.15 → 0.2.16

package/src/renderer/specRenderer.tsx

@@ -0,0 +1,119 @@
+import { runInAction } from 'mobx';
+import { Resizable } from 're-resizable';
+import React, { useCallback, forwardRef, useMemo } from 'react';
+
+import { useGlobalStore } from '../store';
+import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+import LoadingLayer from '../components/loadingLayer';
+
+interface SpecRendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    data: IRow[];
+    loading: boolean;
+    draggableFieldState: DeepReadonly<DraggableFieldState>;
+    visualConfig: IVisualConfig;
+}
+const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
+    { themeKey, dark, data, loading, draggableFieldState, visualConfig },
+    ref
+) {
+    const { vizStore, commonStore } = useGlobalStore();
+    // const { draggableFieldState, visualConfig } = vizStore;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
+
+    const rows = draggableFieldState.rows;
+    const columns = draggableFieldState.columns;
+    const color = draggableFieldState.color;
+    const opacity = draggableFieldState.opacity;
+    const shape = draggableFieldState.shape;
+    const theta = draggableFieldState.theta;
+    const radius = draggableFieldState.radius;
+    const sizeChannel = draggableFieldState.size;
+
+    const rowLeftFacetFields = useMemo(() => rows.slice(0, -1).filter((f) => f.analyticType === 'dimension'), [rows]);
+    const colLeftFacetFields = useMemo(
+        () => columns.slice(0, -1).filter((f) => f.analyticType === 'dimension'),
+        [columns]
+    );
+
+    const hasFacet = rowLeftFacetFields.length > 0 || colLeftFacetFields.length > 0;
+
+    const shouldTriggerMenu = exploration.mode === 'none';
+
+    const handleGeomClick = useCallback(
+        (values: any, e: any) => {
+            if (shouldTriggerMenu) {
+                e.stopPropagation();
+                runInAction(() => {
+                    commonStore.showEmbededMenu([e.pageX, e.pageY]);
+                    commonStore.setFilters(values);
+                });
+            }
+        },
+        [shouldTriggerMenu]
+    );
+    const enableResize = size.mode === 'fixed' && !hasFacet;
+
+    return (
+        <Resizable
+            className={enableResize ? 'border-blue-400 border-2 overflow-hidden' : ''}
+            style={{ padding: '12px' }}
+            onResizeStop={(e, direction, ref, d) => {
+                vizStore.setChartLayout({
+                    mode: 'fixed',
+                    width: size.width + d.width,
+                    height: size.height + d.height,
+                });
+            }}
+            enable={
+                enableResize
+                    ? undefined
+                    : {
+                          top: false,
+                          right: false,
+                          bottom: false,
+                          left: false,
+                          topRight: false,
+                          bottomRight: false,
+                          bottomLeft: false,
+                          topLeft: false,
+                      }
+            }
+            size={{
+                width: size.width + 'px',
+                height: size.height + 'px',
+            }}
+        >
+            {loading && <LoadingLayer />}
+            <ReactVega
+                layoutMode={size.mode}
+                interactiveScale={interactiveScale}
+                geomType={geoms[0]}
+                defaultAggregate={defaultAggregated}
+                stack={stack}
+                dataSource={data}
+                rows={rows}
+                columns={columns}
+                color={color[0]}
+                theta={theta[0]}
+                radius={radius[0]}
+                shape={shape[0]}
+                opacity={opacity[0]}
+                size={sizeChannel[0]}
+                showActions={showActions}
+                width={size.width - 12 * 4}
+                height={size.height - 12 * 4}
+                ref={ref}
+                brushEncoding={exploration.mode === 'brush' ? exploration.brushDirection : 'none'}
+                selectEncoding={exploration.mode === 'point' ? 'default' : 'none'}
+                onGeomClick={handleGeomClick}
+                themeKey={themeKey}
+                dark={dark}
+            />
+        </Resizable>
+    );
+});
+
+export default SpecRenderer;

package/src/segments/segmentNav.tsx

@@ -1,18 +1,14 @@
-import React, { Fragment, useCallback } from "react";
+import React, { useCallback } from "react";
 import { observer } from "mobx-react-lite";
 import DefaultTab, { ITabOption } from "../components/tabs/defaultTab";
 import { useGlobalStore } from "../store";
-import { ChartBarIcon, ChartPieIcon, CircleStackIcon } from "@heroicons/react/24/outline";
+import { ChartPieIcon, CircleStackIcon } from "@heroicons/react/24/outline";
 import { ISegmentKey } from "../interfaces";
 import { useTranslation } from "react-i18next";
 
-
-const ADD_KEY = '_add';
-
 const SegmentNav: React.FC = (props) => {
     const { vizStore, commonStore } = useGlobalStore();
-    const { visIndex, visList } = vizStore;
-    const { currentDataset, segmentKey } = commonStore;
+    const { segmentKey } = commonStore;
     const { t } = useTranslation();
 
     const tabs: ITabOption[] = [
@@ -30,15 +26,6 @@ const SegmentNav: React.FC = (props) => {
         }
     ]
 
-    const visSelectionHandler = useCallback((tabKey: string, tabIndex: number) => {
-        if (tabKey === ADD_KEY) {
-            vizStore.addVisualization();
-            vizStore.initMetaState(currentDataset)
-        } else {
-            vizStore.selectVisualization(tabIndex);
-        }
-    }, [currentDataset, vizStore])
-
     const editLabelHandler = useCallback((content: string, tabIndex: number) => {
         vizStore.setVisName(tabIndex, content)
     }, [])

package/src/segments/visNav.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { useTranslation } from "react-i18next";
 import EditableTabs, { ITabOption } from "../components/tabs/editableTab";
 import { useGlobalStore } from "../store";
 
@@ -11,25 +12,35 @@ const VisNav: React.FC = (props) => {
     const { visIndex, visList } = vizStore;
     const { currentDataset } = commonStore;
 
+    const { t } = useTranslation();
+
     const tabs: ITabOption[] = visList.map((v) => ({
         key: v.visId,
-        label: v.name?.[0] || 'vis',
-        options: v.name?.[1],
+        label: v.name ?? 'vis',
+        editable: true
     }));
 
     tabs.push({
         key: ADD_KEY,
-        label: 'main.tablist.new'
+        label: t('main.tablist.new')
     });
 
+    useEffect(() => {
+        if (visList.length === 1) {
+            // should set the first vis name when the component is mounted
+            vizStore.setVisName(0, t('main.tablist.auto_title', { idx: 1 }));
+        }
+        // no need to add deps here
+    }, [])
+
     const visSelectionHandler = useCallback((tabKey: string, tabIndex: number) => {
         if (tabKey === ADD_KEY) {
-            vizStore.addVisualization();
+            vizStore.addVisualization(t('main.tablist.auto_title', { idx: visList.length + 1 }));
             vizStore.initMetaState(currentDataset)
         } else {
             vizStore.selectVisualization(tabIndex);
         }
-    }, [currentDataset, vizStore])
+    }, [currentDataset, vizStore, visList.length])
 
     const editLabelHandler = useCallback((content: string, tabIndex: number) => {
         vizStore.setVisName(tabIndex, content)

package/src/services.ts

@@ -10,7 +10,10 @@ import { IRow, Filters, SemanticType, IMeasure, IMutField, IFilterField } from '
 // eslint-disable-next-line
 import ExplainerWorker from './workers/explainer.worker?worker&inline';
 import FilterWorker from './workers/filter.worker?worker&inline';
+import TransformDataWorker from './workers/transform.worker?worker&inline';
+import ViewQueryWorker from './workers/viewQuery.worker?worker&inline';
 import { IExplaination, IMeasureWithStat } from './insights';
+import { IViewQuery, queryView } from './lib/viewQuery';
 
 interface WorkerState {
     eWorker: Worker | null;
@@ -105,7 +108,8 @@ export function destroyWorker() {
 let filterWorker: Worker | null = null;
 let filterWorkerAutoTerminator: NodeJS.Timeout | null = null;
 
-export const applyFilter = async (data: readonly IRow[], filters: readonly IFilterField[]): Promise<IRow[]> => {
+export const applyFilter = async (data: IRow[], filters: readonly IFilterField[]): Promise<IRow[]> => {
+    if (filters.length === 0) return data;
     if (filterWorkerAutoTerminator !== null) {
         clearTimeout(filterWorkerAutoTerminator);
         filterWorkerAutoTerminator = null;
@@ -137,3 +141,35 @@ export const applyFilter = async (data: readonly IRow[], filters: readonly IFilt
         }, 60_000); // Destroy the worker when no request is received for 60 secs
     }
 };
+
+export const transformDataService = async (data: IRow[], columns: IMutField[]): Promise<IRow[]> => {
+    if (columns.length === 0 || data.length === 0) return data;
+    const worker = new TransformDataWorker();
+    try {
+        const res: IRow[] = await workerService(worker, {
+            dataSource: data,
+            columns: toJS(columns),
+        });
+        return res;
+    } catch (error) {
+        throw new Error('Uncaught error in TransformDataWorker', { cause: error });
+    } finally {
+        worker.terminate();
+    }
+}
+
+export const applyViewQuery = async (data: IRow[], metas: IMutField[], query: IViewQuery): Promise<IRow[]> => {
+    const worker = new ViewQueryWorker();
+    try {
+        const res: IRow[] = await workerService(worker, {
+            dataSource: data,
+            metas: toJS(metas),
+            query: toJS(query),
+        });
+        return res;
+    } catch (err) {
+        throw new Error('Uncaught error in ViewQueryWorker', { cause: err });
+    } finally {
+        worker.terminate();
+    }
+}

package/src/store/commonStore.ts

@@ -1,7 +1,6 @@
 import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
 import { makeAutoObservable, observable, toJS } from 'mobx';
 import { transData } from '../dataSource/utils';
-import { extendCountField } from '../utils';
 
 export class CommonStore {
     public datasets: IDataSet[] = [];
@@ -14,6 +13,7 @@ export class CommonStore {
     public showInsightBoard: boolean = false;
     public vizEmbededMenu: { show: boolean; position: [number, number] } = { show: false, position: [0, 0] };
     public showDataConfig: boolean = false;
+    public showCodeExportPanel: boolean = false;
     public filters: Filters = {};
     public segmentKey: ISegmentKey = ISegmentKey.vis;
     constructor () {
@@ -30,12 +30,12 @@ export class CommonStore {
         if (this.datasets.length > 0) {
             const dataSourceId = this.datasets[datasetIndex].dsId;
             const dataSource = this.dataSources.find(d => d.id === dataSourceId);
-            const rawFields = toJS(this.datasets[datasetIndex].rawFields)
-            const base = extendCountField((dataSource ? dataSource.data : []), rawFields)
+            const rawFields = toJS(this.datasets[datasetIndex].rawFields)//.concat(createCountField())
+            // const base = extendCountField((dataSource ? dataSource.data : []), rawFields)
             return {
                 ...this.datasets[datasetIndex],
-                dataSource: base.dataSource,
-                rawFields: base.fields
+                dataSource: dataSource?.data ?? [],
+                rawFields
             }
         }
         return {
@@ -61,6 +61,9 @@ export class CommonStore {
         this.vizEmbededMenu.show = true;
         this.vizEmbededMenu.position = position;
     }
+    public setShowCodeExportPanel (show: boolean) {
+        this.showCodeExportPanel = show;
+    }
     public closeEmbededMenu () {
         this.vizEmbededMenu.show = false;
     }
@@ -112,11 +115,13 @@ export class CommonStore {
 
     public updateTempDS (rawData: IRow[]) {
         const result = transData(rawData);
-        // TODO: need fix web-data-loader issue #2
-        this.tmpDataSource = result.dataSource.slice(0, -1);
+        this.tmpDataSource = result.dataSource;
         this.tmpDSRawFields = result.fields;
     }
-
+    /**
+     * update temp dataset (standard) with dataset info
+     * @param dataset 
+     */
     public updateTempSTDDS (dataset: IDataSetInfo) {
         this.tmpDataSource = dataset.dataSource;
         this.tmpDSRawFields = dataset.rawFields;
@@ -176,7 +181,7 @@ export class CommonStore {
     }
     public createPlaceholderDS() {
         this.addDS({
-            name: '新数据源',
+            name: 'new dataset',
             dataSource: [],
             rawFields: []
         })

package/src/store/index.tsx

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { CommonStore } from './commonStore'
 import { VizSpecStore } from './visualSpecStore'
 
-interface GlobalStore {
+export interface IGlobalStore {
     commonStore: CommonStore;
     vizStore: VizSpecStore;
 }
@@ -10,12 +10,12 @@ interface GlobalStore {
 const commonStore = new CommonStore();
 const vizStore = new VizSpecStore(commonStore);
 
-const initStore: GlobalStore = {
+const initStore: IGlobalStore = {
     commonStore,
     vizStore
 }
 
-const StoreContext = React.createContext<GlobalStore>(null!);
+const StoreContext = React.createContext<IGlobalStore>(null!);
 
 export function destroyGWStore() {
     initStore.commonStore.destroy();
@@ -31,16 +31,23 @@ export function rebootGWStore() {
 
 interface StoreWrapperProps {
     keepAlive?: boolean;
+    storeRef?: React.MutableRefObject<IGlobalStore | null>;
 }
 export class StoreWrapper extends React.Component<StoreWrapperProps> {
     constructor(props: StoreWrapperProps) {
         super(props)
+        if (props.storeRef) {
+            props.storeRef.current = initStore;
+        }
         if (props.keepAlive) {
             rebootGWStore();
         }
     }
     componentWillUnmount() {
         if (!this.props.keepAlive) {
+            if (this.props.storeRef) {
+                this.props.storeRef.current = null;
+            }
             destroyGWStore();
         }
     }

package/src/store/visualSpecStore.ts

@@ -2,12 +2,14 @@ import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } fro
 import produce from "immer";
 import { v4 as uuidv4 } from "uuid";
 import { Specification } from "visual-insights";
-import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig } from "../interfaces";
+import { DataSet, DraggableFieldState, IExpression, IFilterRule, IViewField, IVisSpec, IVisualConfig } from "../interfaces";
 import { CHANNEL_LIMIT, GEMO_TYPES, MetaFieldKeys } from "../config";
 import { makeBinField, makeLogField } from "../utils/normalization";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
-import { dumpsGWPureSpec, parseGWContent, parseGWPureSpec, stringifyGWContent } from "../utils/save";
+import { IStoInfo, dumpsGWPureSpec, parseGWContent, parseGWPureSpec, stringifyGWContent } from "../utils/save";
 import { CommonStore } from "./commonStore";
+import { createCountField } from "../utils";
+import { IViewQuery } from "../lib/viewQuery";
 
 function getChannelSizeLimit(channel: string): number {
     if (typeof CHANNEL_LIMIT[channel] === "undefined") return Infinity;
@@ -40,7 +42,7 @@ function geomAdapter(geom: string) {
     }
 }
 
-function initEncoding(): DraggableFieldState {
+export function initEncoding(): DraggableFieldState {
     return {
         dimensions: [],
         measures: [],
@@ -58,7 +60,7 @@ function initEncoding(): DraggableFieldState {
     };
 }
 
-function initVisualConfig(): IVisualConfig {
+export function initVisualConfig(): IVisualConfig {
     return {
         defaultAggregated: true,
         geoms: [GEMO_TYPES[0]!],
@@ -92,6 +94,10 @@ const forwardVisualConfigs = (backwards: ReturnType<typeof parseGWContent>["spec
     }));
 };
 
+function isDraggableStateEmpty(state: DeepReadonly<DraggableFieldState>): boolean {
+    return Object.values(state).every((value) => value.length === 0);
+}
+
 export class VizSpecStore {
     // public fields: IViewField[] = [];
     private commonStore: CommonStore;
@@ -139,7 +145,7 @@ export class VizSpecStore {
         this.visualConfig = initVisualConfig();
         this.visList.push(
             new VisSpecWithHistory({
-                name: ["main.tablist.autoTitle", { idx: 1 }],
+                name: 'Chart 1',
                 visId: uuidv4(),
                 config: this.visualConfig,
                 encodings: this.draggableFieldState,
@@ -151,13 +157,6 @@ export class VizSpecStore {
             reactions: false,
         });
         this.reactions.push(
-            reaction(
-                () => commonStore.currentDataset,
-                (dataset) => {
-                    // this.initState();
-                    this.initMetaState(dataset);
-                }
-            ),
             reaction(
                 () => this.visList[this.visIndex],
                 (frame) => {
@@ -168,6 +167,15 @@ export class VizSpecStore {
                     this.canUndo = frame.canUndo;
                     this.canRedo = frame.canRedo;
                 }
+            ),
+            reaction(
+                () => commonStore.currentDataset,
+                (dataset) => {
+                    // this.initState();
+                    if (isDraggableStateEmpty(this.draggableFieldState) && dataset.dataSource.length > 0 && dataset.rawFields.length > 0) {
+                        this.initMetaState(dataset);
+                    }
+                }
             )
         );
     }
@@ -275,10 +283,24 @@ export class VizSpecStore {
             });
         return fields;
     }
-    public addVisualization() {
+    public get allFields(): IViewField[] {
+        const { draggableFieldState } = this;
+        const dimensions = toJS(draggableFieldState.dimensions);
+        const measures = toJS(draggableFieldState.measures);
+        return [...dimensions, ...measures];
+    }
+    public get viewFilters() {
+        const { draggableFieldState } = this;
+        const state = toJS(draggableFieldState);
+        return state.filters;
+    }
+
+
+    public addVisualization(defaultName?: string) {
+        const name = defaultName || 'Chart ' + (this.visList.length + 1);
         this.visList.push(
             new VisSpecWithHistory({
-                name: ["main.tablist.autoTitle", { idx: this.visList.length + 1 }],
+                name,
                 visId: uuidv4(),
                 config: initVisualConfig(),
                 encodings: initEncoding(),
@@ -290,9 +312,10 @@ export class VizSpecStore {
         this.visIndex = visIndex;
     }
     public setVisName(visIndex: number, name: string) {
-        this.useMutable(() => {
-            this.visList[visIndex].name = [name];
-        });
+        this.visList[visIndex] = this.visList[visIndex].clone();
+        this.visList[visIndex].updateLatest({
+            name
+        })
     }
     public initState() {
         this.useMutable((tab) => {
@@ -301,6 +324,7 @@ export class VizSpecStore {
         });
     }
     public initMetaState(dataset: DataSet) {
+        const countField = createCountField();
         this.useMutable(({ encodings }) => {
             encodings.fields = dataset.rawFields.map((f) => ({
                 dragId: uuidv4(),
@@ -309,7 +333,8 @@ export class VizSpecStore {
                 aggName: f.analyticType === "measure" ? "sum" : undefined,
                 analyticType: f.analyticType,
                 semanticType: f.semanticType,
-            }));
+            }))//.concat(countField);
+            encodings.fields.push(countField);
             encodings.dimensions = dataset.rawFields
                 .filter((f) => f.analyticType === "dimension")
                 .map((f) => ({
@@ -329,17 +354,10 @@ export class VizSpecStore {
                     semanticType: f.semanticType,
                     aggName: "sum",
                 }));
+            encodings.measures.push(countField);
         });
 
         this.freezeHistory();
-        // this.draggableFieldState.measures.push({
-        //     dragId: uuidv4(),
-        //     fid: COUNT_FIELD_ID,
-        //     name: '记录数',
-        //     analyticType: 'measure',
-        //     semanticType: 'quantitative',
-        //     aggName: 'count'
-        // })
     }
     public clearState() {
         this.useMutable(({ encodings }) => {
@@ -489,44 +507,59 @@ export class VizSpecStore {
             encodings.rows = fieldsInCup as typeof encodings.rows; // assume this as writable
         });
     }
-    public createBinField(stateKey: keyof DraggableFieldState, index: number) {
+    public createBinField(stateKey: keyof DraggableFieldState, index: number, binType: 'bin' | 'binCount') {
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
+            const newVarKey = uuidv4();
             const binField: IViewField = {
-                fid: uuidv4(),
-                dragId: uuidv4(),
-                name: `bin(${originField.name})`,
+                fid: newVarKey,
+                dragId: newVarKey,
+                name: `${binType}(${originField.name})`,
                 semanticType: "ordinal",
                 analyticType: "dimension",
+                computed: true,
+                expressoion: {
+                    op: binType,
+                    as: newVarKey,
+                    params: [
+                        {
+                            type: 'field',
+                            value: originField.fid
+                        }
+                    ]
+                }
             };
             encodings.dimensions.push(binField);
-            this.commonStore.currentDataset.dataSource = makeBinField(
-                this.commonStore.currentDataset.dataSource,
-                originField.fid,
-                binField.fid
-            );
         });
     }
-    public createLogField(stateKey: keyof DraggableFieldState, index: number) {
+    public createLogField(stateKey: keyof DraggableFieldState, index: number, scaleType: 'log10' | 'log2') {
         if (stateKey === "filters") {
             return;
         }
 
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
+            const newVarKey = uuidv4();
             const logField: IViewField = {
-                fid: uuidv4(),
-                dragId: uuidv4(),
-                name: `log10(${originField.name})`,
+                fid: newVarKey,
+                dragId: newVarKey,
+                name: `${scaleType}(${originField.name})`,
                 semanticType: "quantitative",
                 analyticType: originField.analyticType,
+                aggName: 'sum',
+                computed: true,
+                expressoion: {
+                    op: scaleType,
+                    as: newVarKey,
+                    params: [
+                        {
+                            type: 'field',
+                            value: originField.fid
+                        }
+                    ]
+                }
             };
             encodings[stateKey].push(logField);
-            this.commonStore.currentDataset.dataSource = makeLogField(
-                this.commonStore.currentDataset.dataSource,
-                originField.fid,
-                logField.fid
-            );
         });
     }
     public setFieldAggregator(stateKey: keyof DraggableFieldState, index: number, aggName: string) {
@@ -677,13 +710,19 @@ export class VizSpecStore {
             specList: pureVisList,
         });
     }
+    public exportViewSpec() {
+        const pureVisList = dumpsGWPureSpec(this.visList);
+        return pureVisList
+    }
+    public importStoInfo (stoInfo: IStoInfo) {
+        this.visList = parseGWPureSpec(forwardVisualConfigs(stoInfo.specList));
+        this.visIndex = 0;
+        this.commonStore.datasets = stoInfo.datasets;
+        this.commonStore.dataSources = stoInfo.dataSources;
+        this.commonStore.dsIndex = Math.max(stoInfo.datasets.length - 1, 0);
+    }
     public importRaw(raw: string) {
         const content = parseGWContent(raw);
-        this.commonStore.datasets = content.datasets;
-        this.commonStore.dataSources = content.dataSources;
-        this.commonStore.dsIndex = Math.max(content.datasets.length - 1, 0);
-        // 补上初始化新版本特性
-        this.visList = parseGWPureSpec(forwardVisualConfigs(content.specList));
-        this.visIndex = 0;
+        this.importStoInfo(content);
     }
 }

package/src/utils/dataPrep.ts

@@ -41,4 +41,28 @@ export function guardDataKeys (data: IRow[], metas: IMutField[]): {
         safeData,
         safeMetas
     }
+}
+
+const SPLITOR = '__'
+export function flatNestKeys (object: any): string[] {
+    const keys = Object.keys(object);
+    let flatColKeys: string[] = [];
+    for (let key of keys) {
+        if (typeof object[key] === 'object') {
+            const subKeys = flatNestKeys(object[key]);
+            flatColKeys = flatColKeys.concat(subKeys.map(k => `${key}${SPLITOR}${k}`));
+        } else {
+            flatColKeys.push(key)
+        }
+    }
+    return flatColKeys;
+}
+
+export function getValueByKeyPath (object: any, keyPath: string): any {
+    const keys = keyPath.split(SPLITOR);
+    let value = object;
+    for (let key of keys) {
+        value = value[key];
+    }
+    return value;
 }