@kanaries/graphic-walker 0.1.0 → 0.2.1

package/dist/insightBoard/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.FunctionComponent<{}>;
+export default _default;

package/dist/{InsightBoard → insightBoard}/mainBoard.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Record, Field, Filters } from '../interfaces';
+import { IField, Filters, IRow } from '../interfaces';
 interface InsightMainBoardProps {
-    dataSource: Record[];
-    fields: Field[];
+    dataSource: IRow[];
+    fields: Readonly<IField[]>;
     filters?: Filters;
-    viewDs: Field[];
-    viewMs: Field[];
+    viewDs: IField[];
+    viewMs: IField[];
 }
 declare const InsightMainBoard: React.FC<InsightMainBoardProps>;
 export default InsightMainBoard;

package/dist/{InsightBoard → insightBoard}/std2vegaSpec.d.ts

@@ -1,15 +1,12 @@
 import { Specification } from 'visual-insights';
-import { Record, SemanticType } from '../interfaces';
+import { IField, IRow } from '../interfaces';
 import { IPredicate } from '../utils';
 export declare type IReasonType = 'selection_dim_distribution' | 'selection_mea_distribution' | 'children_major_factor' | 'children_outlier';
 export declare const geomTypeMap: {
     [key: string]: any;
 };
-export declare function baseVis(query: Specification, dataSource: Record[], dimensions: string[], measures: string[], predicates: IPredicate[] | null, aggregatedMeasures: Array<{
+export declare function baseVis(query: Specification, dataSource: IRow[], dimensions: string[], measures: string[], predicates: IPredicate[] | null, aggregatedMeasures: Array<{
     op: string;
     field: string;
     as: string;
-}>, fieldFeatures: Array<{
-    name: string;
-    type: SemanticType;
-}>, type: IReasonType, defaultAggregated?: boolean, defaultStack?: boolean): any;
+}>, fields: Readonly<IField[]>, type: IReasonType, defaultAggregated?: boolean, defaultStack?: boolean): any;

package/dist/{InsightBoard → insightBoard}/utils.d.ts

@@ -1,7 +1,8 @@
-import { IMeasure } from "../interfaces";
+import { IField, IMeasure } from "../interfaces";
 /**
  * 合并两个measures数组，若出现相同的key，使用measures2中的op替换1中的op
  * @param measures1
  * @param measures2
  */
 export declare function mergeMeasures(measures1: IMeasure[], measures2: IMeasure[]): IMeasure[];
+export declare function formatFieldName(fid: string, fields: Readonly<IField[]>): string;

package/dist/insights.d.ts

@@ -56,6 +56,6 @@ export declare class DataExplainer {
     getCenterFields(type: 'dimension' | 'measure', num?: number): string[];
     getVisSpec(spaces: IExplaination[]): {
         schema: import("visual-insights/build/esm/insights/InsightFlow/specification/encoding").ISpec;
-        dataView: import("visual-insights").Record[];
+        dataView: import("visual-insights").IRow[];
     }[];
 }

package/dist/interfaces.d.ts

@@ -1,24 +1,35 @@
 import { StatFuncName } from "visual-insights/build/esm/statistics";
 import { AggFC } from 'cube-core/built/types';
-import { IMutField as VIMutField } from 'visual-insights';
+import { IAnalyticType, ISemanticType } from 'visual-insights';
+/**
+ * @deprecated
+ */
 export interface Record {
     [key: string]: any;
 }
+export interface IRow {
+    [key: string]: any;
+}
+/**
+ * @deprecated
+ */
 export declare type SemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
 export interface Filters {
     [key: string]: any[];
 }
-export interface IField {
-    key: string;
-    type: string;
-    analyticType: 'dimension' | 'measure';
+export interface IMutField {
+    fid: string;
+    key?: string;
+    name?: string;
+    disable?: boolean;
+    semanticType: ISemanticType;
+    analyticType: IAnalyticType;
 }
-export declare type IMutField = VIMutField;
-export interface Field {
+export interface IField {
     /**
-     * id: key in data record
+     * fid: key in data record
      */
-    id: string;
+    fid: string;
     /**
      * display name for field
      */
@@ -27,14 +38,15 @@ export interface Field {
      * aggregator's name
      */
     aggName?: string;
-    type: 'D' | 'M';
-    [key: string]: any;
+    semanticType: ISemanticType;
+    analyticType: IAnalyticType;
     cmp?: (a: any, b: any) => number;
 }
-export interface IViewField extends Field {
+export interface IViewField extends IField {
     dragId: string;
+    sort?: 'none' | 'ascending' | 'descending';
 }
-export interface Measure extends Field {
+export interface Measure extends IField {
     aggregator?: AggFC;
     minWidth?: number;
     formatter?: (value: number | undefined) => number | string;
@@ -44,7 +56,7 @@ export interface DataSet {
     id: string;
     name: string;
     rawFields: IMutField[];
-    dataSource: Record[];
+    dataSource: IRow[];
 }
 export interface IFieldNeighbor {
     key: string;
@@ -66,22 +78,41 @@ export interface IDataSet {
 export interface IDataSetInfo {
     name: string;
     rawFields: IMutField[];
-    dataSource: Record[];
+    dataSource: IRow[];
 }
 export interface IDataSource {
     id: string;
-    data: Record[];
+    data: IRow[];
+}
+export interface IFilterField extends IViewField {
+    rule: IFilterRule | null;
 }
 export interface DraggableFieldState {
-    fields: Field[];
-    rows: Field[];
-    columns: Field[];
-    color: Field[];
-    opacity: Field[];
-    size: Field[];
+    fields: IViewField[];
+    dimensions: IViewField[];
+    measures: IViewField[];
+    rows: IViewField[];
+    columns: IViewField[];
+    color: IViewField[];
+    opacity: IViewField[];
+    size: IViewField[];
+    shape: IViewField[];
+    theta: IViewField[];
+    radius: IViewField[];
+    filters: IFilterField[];
 }
 export interface IDraggableStateKey {
     id: keyof DraggableFieldState;
-    name: string;
     mode: number;
 }
+export declare type IFilterRule = {
+    type: 'range';
+    value: readonly [number, number];
+} | {
+    type: 'temporal range';
+    value: readonly [number, number];
+} | {
+    type: 'one of';
+    value: Set<string | number>;
+};
+export declare type IStackMode = 'none' | 'stack' | 'normalize';

package/dist/locales/i18n.d.ts

@@ -0,0 +1,5 @@
+import { Resource } from 'i18next';
+export declare const mergeLocaleRes: (resources: {
+    [lang: string]: Resource;
+}) => void;
+export declare const setLocaleLanguage: (lang: string) => Promise<import("i18next").TFunction>;

package/dist/segments/visNav.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.FunctionComponent<{}>;
+export default _default;

package/dist/services.d.ts

@@ -1,10 +1,10 @@
-import { Record, Filters, SemanticType, IMeasure, IMutField } from './interfaces';
+import { IRow, Filters, SemanticType, IMeasure, IMutField, IFilterField } from './interfaces';
 import { Specification } from 'visual-insights';
 import { IExplaination, IMeasureWithStat } from './insights';
 interface ExplainParams {
     dimensions: string[];
     measures: string[];
-    dataSource: Record[];
+    dataSource: IRow[];
     filters?: Filters;
     currentSpace: {
         dimensions: string[];
@@ -12,7 +12,7 @@ interface ExplainParams {
     };
 }
 export interface IVisSpace {
-    dataView: Record[];
+    dataView: IRow[];
     schema: Specification;
 }
 interface ExplainReturns {
@@ -27,8 +27,9 @@ interface ExplainReturns {
 export declare function getExplaination(props: ExplainParams): Promise<ExplainReturns>;
 interface PreAnalysisParams {
     fields: IMutField[];
-    dataSource: Record[];
+    dataSource: IRow[];
 }
 export declare function preAnalysis(props: PreAnalysisParams): Promise<void>;
 export declare function destroyWorker(): void;
+export declare const applyFilter: (data: readonly IRow[], filters: readonly IFilterField[]) => Promise<IRow[]>;
 export {};

package/dist/store/commonStore.d.ts

@@ -24,6 +24,7 @@ export declare class CommonStore {
     updateTempFieldAnalyticType(fieldKey: string, analyticType: IMutField['analyticType']): void;
     updateTempName(name: string): void;
     updateTempDS(rawData: Record[]): void;
+    updateTempSTDDS(dataset: IDataSetInfo): void;
     commitTempDS(): void;
     startDSBuildingTask(): void;
     addAndUseDS(dataset: IDataSetInfo): string;

package/dist/store/visualSpecStore.d.ts

@@ -1,27 +1,106 @@
-import { IViewField } from "../interfaces";
-import { CommonStore } from "./commonStore";
 import { Specification } from "visual-insights";
-interface VisualConfig {
+import { DataSet, DraggableFieldState, IFilterRule, IViewField } from "../interfaces";
+import { CommonStore } from "./commonStore";
+interface IVisualConfig {
     defaultAggregated: boolean;
     geoms: string[];
-    defaultStack: boolean;
-}
-export interface DraggableFieldState {
-    fields: IViewField[];
-    dimensions: IViewField[];
-    measures: IViewField[];
-    rows: IViewField[];
-    columns: IViewField[];
-    color: IViewField[];
-    opacity: IViewField[];
-    size: IViewField[];
+    stack: 'none' | 'stack' | 'normalize';
+    showActions: boolean;
+    interactiveScale: boolean;
+    sorted: 'none' | 'ascending' | 'descending';
+    size: {
+        mode: 'auto' | 'fixed';
+        width: number;
+        height: number;
+    };
 }
 export declare const MetaFieldKeys: Array<keyof DraggableFieldState>;
+declare type DeepReadonly<T extends Record<keyof any, any>> = {
+    readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
+};
+interface IVisSpec {
+    readonly visId: string;
+    readonly name?: [string, Record<string, any>?];
+    readonly encodings: DeepReadonly<DraggableFieldState>;
+    readonly config: DeepReadonly<IVisualConfig>;
+}
+declare class IVisSpecWithHistory {
+    readonly visId: IVisSpec['visId'];
+    private snapshots;
+    private cursor;
+    constructor(data: IVisSpec);
+    private get frame();
+    private batchFlag;
+    private commit;
+    get canUndo(): boolean;
+    undo(): boolean;
+    get canRedo(): boolean;
+    redo(): boolean;
+    rebase(): void;
+    get name(): IVisSpec['name'];
+    set name(name: IVisSpec['name']);
+    get encodings(): DeepReadonly<DraggableFieldState>;
+    set encodings(encodings: IVisSpec['encodings']);
+    get config(): DeepReadonly<IVisualConfig>;
+    set config(config: IVisSpec['config']);
+}
 export declare class VizSpecStore {
-    draggableFieldState: DraggableFieldState;
+    private commonStore;
+    /**
+     * This segment will always refers to the state of the active tab -
+     * `this.visList[this.visIndex].encodings`.
+     * Notice that observing rule of `this.visList` is `"shallow"`
+     * so mobx will NOT compare every deep value of `this.visList`,
+     * because the active tab is the only item in the list that may change.
+     * @readonly
+     * Assignment or mutable operations applied to ANY members of this segment
+     * is strictly FORBIDDEN.
+     * Members of it can only be got as READONLY objects.
+     *
+     * If you're trying to change the value of it and let mobx catch the action to trigger an update,
+     * please use `this.useMutable()` to access to a writable reference
+     * (an `immer` draft) of `this.visList[this.visIndex]`.
+     */
+    readonly draggableFieldState: DeepReadonly<DraggableFieldState>;
     private reactions;
-    visualConfig: VisualConfig;
+    /**
+     * This segment will always refers to the state of the active tab -
+     * `this.visList[this.visIndex].config`.
+     * Notice that observing rule of `this.visList` is `"shallow"`
+     * so mobx will NOT compare every deep value of `this.visList`,
+     * because the active tab is the only item in the list that may change.
+     * @readonly
+     * Assignment or mutable operations applied to ANY members of this segment
+     * is strictly FORBIDDEN.
+     * Members of it can only be got as READONLY objects.
+     *
+     * If you're trying to change the value of it and let mobx catch the action to trigger an update,
+     * please use `this.useMutable()` to access to a writable reference
+     * (an `immer` draft) of `this.visList[this.visIndex]`.
+     */
+    readonly visualConfig: Readonly<IVisualConfig>;
+    visList: IVisSpecWithHistory[];
+    visIndex: number;
+    canUndo: boolean;
+    canRedo: boolean;
+    editingFilterIdx: number | null;
     constructor(commonStore: CommonStore);
+    /**
+     * Allow to change any deep member of `encodings` or `config`
+     * in the active tab `this.visList[this.visIndex]`.
+     *
+     * - `tab.encodings`
+     *
+     * A mutable reference of `this.draggableFieldState`
+     *
+     * - `tab.config`
+     *
+     * A mutable reference of `this.visualConfig`
+     */
+    private useMutable;
+    undo(): void;
+    redo(): void;
+    private freezeHistory;
     /**
      * dimension fields in visualization
      */
@@ -30,13 +109,33 @@ export declare class VizSpecStore {
      * dimension fields in visualization
      */
     get viewMeasures(): IViewField[];
+    addVisualization(): void;
+    selectVisualization(visIndex: number): void;
+    setVisName(visIndex: number, name: string): void;
     initState(): void;
+    initMetaState(dataset: DataSet): void;
     clearState(): void;
-    setVisualConfig(configKey: keyof VisualConfig, value: any): void;
+    setVisualConfig<K extends keyof IVisualConfig>(configKey: K, value: IVisualConfig[K]): void;
+    transformCoord(coord: 'cartesian' | 'polar'): void;
+    setChartLayout(props: {
+        mode: IVisualConfig['size']['mode'];
+        width?: number;
+        height?: number;
+    }): void;
     reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number): void;
     moveField(sourceKey: keyof DraggableFieldState, sourceIndex: number, destinationKey: keyof DraggableFieldState, destinationIndex: number): void;
     removeField(sourceKey: keyof DraggableFieldState, sourceIndex: number): void;
+    private appendFilter;
+    writeFilter(index: number, rule: IFilterRule | null): void;
+    setFilterEditing(index: number): void;
+    closeFilterEditing(): void;
+    transpose(): void;
+    createBinField(stateKey: keyof DraggableFieldState, index: number): void;
+    createLogField(stateKey: keyof DraggableFieldState, index: number): void;
     setFieldAggregator(stateKey: keyof DraggableFieldState, index: number, aggName: string): void;
+    get sortCondition(): boolean;
+    setFieldSort(stateKey: keyof DraggableFieldState, index: number, sortType: 'none' | 'ascending' | 'descending'): void;
+    applyDefaultSort(sortType?: 'none' | 'ascending' | 'descending'): void;
     appendField(destinationKey: keyof DraggableFieldState, field: IViewField | undefined): void;
     renderSpec(spec: Specification): void;
     destroy(): void;

package/dist/style.css

@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-opacity: 1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.right-2{right:.5rem}.col-span-1{grid-column:span 1 / span 1}.col-span-4{grid-column:span 4 / span 4}.float-right{float:right}.m-1{margin:.25rem}.mt-1{margin-top:.25rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-0\.5{margin-right:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-4{height:1rem}.h-9{height:2.25rem}.h-16{height:4rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-16{width:4rem}.min-w-96{min-width:96px}.flex-shrink{flex-shrink:1}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-sm{border-radius:.125rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-t-2{border-top-width:2px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-gray-300{--tw-border-opacity: 1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity: 1;border-color:rgba(107,114,128,var(--tw-border-opacity))}.border-blue-400{--tw-border-opacity: 1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity: 1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.hover\:border-gray-600:hover{--tw-border-opacity: 1;border-color:rgba(75,85,99,var(--tw-border-opacity))}.focus\:border-gray-500:focus{--tw-border-opacity: 1;border-color:rgba(107,114,128,var(--tw-border-opacity))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgba(217,119,6,var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.hover\:bg-yellow-500:hover{--tw-bg-opacity: 1;background-color:rgba(245,158,11,var(--tw-bg-opacity))}.hover\:bg-blue-100:hover{--tw-bg-opacity: 1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.disabled\:bg-gray-300:disabled{--tw-bg-opacity: 1;background-color:rgba(209,213,219,var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-4{padding:1rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-0\.5{padding-top:.125rem}.pr-2{padding-right:.5rem}.pr-6{padding-right:1.5rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-0\.5{padding-bottom:.125rem}.pl-2{padding-left:.5rem}.pl-6{padding-left:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.ordinal{--tw-ordinal: var(--tw-empty, );--tw-slashed-zero: var(--tw-empty, );--tw-numeric-figure: var(--tw-empty, );--tw-numeric-spacing: var(--tw-empty, );--tw-numeric-fraction: var(--tw-empty, );font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.ordinal{--tw-ordinal: ordinal}.text-white{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgba(55,65,81,var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity: 1;color:rgba(31,41,55,var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgba(220,38,38,var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity: 1;color:rgba(245,158,11,var(--tw-text-opacity))}.text-green-500{--tw-text-opacity: 1;color:rgba(16,185,129,var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity: 1;color:rgba(59,130,246,var(--tw-text-opacity))}*,:before,:after{--tw-shadow: 0 0 #0000}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}*,:before,:after{--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(59, 130, 246, .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000}.filter{--tw-blur: var(--tw-empty, );--tw-brightness: var(--tw-empty, );--tw-contrast: var(--tw-empty, );--tw-grayscale: var(--tw-empty, );--tw-hue-rotate: var(--tw-empty, );--tw-invert: var(--tw-empty, );--tw-saturate: var(--tw-empty, );--tw-sepia: var(--tw-empty, );--tw-drop-shadow: var(--tw-empty, );filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}
+/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-opacity: 1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.top-2{top:.5rem}.right-2{right:.5rem}.z-auto{z-index:auto}.col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.col-span-5{grid-column:span 5 / span 5}.col-span-7{grid-column:span 7 / span 7}.float-right{float:right}.m-1{margin:.25rem}.m-2{margin:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-0\.5{margin-right:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.-mb-px{margin-bottom:-1px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-2{height:.5rem}.h-4{height:1rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-16{height:4rem}.h-48{height:12rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-16{width:4rem}.w-60{width:15rem}.w-full{width:100%}.min-w-96{min-width:96px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-shrink{flex-shrink:1}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.select-none{-webkit-user-select:none;user-select:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;appearance:none}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded-sm{border-radius:.125rem}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border{border-width:1px}.border-t-2{border-top-width:2px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-l{border-left-width:1px}.border-transparent{border-color:transparent}.border-gray-200{--tw-border-opacity: 1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity: 1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity: 1;border-color:rgba(156,163,175,var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity: 1;border-color:rgba(107,114,128,var(--tw-border-opacity))}.border-blue-400{--tw-border-opacity: 1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity: 1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.hover\:border-gray-600:hover{--tw-border-opacity: 1;border-color:rgba(75,85,99,var(--tw-border-opacity))}.focus\:border-gray-500:focus{--tw-border-opacity: 1;border-color:rgba(107,114,128,var(--tw-border-opacity))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgba(156,163,175,var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgba(239,68,68,var(--tw-bg-opacity))}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgba(217,119,6,var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgba(37,99,235,var(--tw-bg-opacity))}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgba(238,242,255,var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.hover\:bg-red-100:hover{--tw-bg-opacity: 1;background-color:rgba(254,226,226,var(--tw-bg-opacity))}.hover\:bg-yellow-100:hover{--tw-bg-opacity: 1;background-color:rgba(254,243,199,var(--tw-bg-opacity))}.hover\:bg-yellow-500:hover{--tw-bg-opacity: 1;background-color:rgba(245,158,11,var(--tw-bg-opacity))}.hover\:bg-green-50:hover{--tw-bg-opacity: 1;background-color:rgba(236,253,245,var(--tw-bg-opacity))}.hover\:bg-blue-100:hover{--tw-bg-opacity: 1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.disabled\:bg-gray-300:disabled{--tw-bg-opacity: 1;background-color:rgba(209,213,219,var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-0\.5{padding-top:.125rem}.pr-2{padding-right:.5rem}.pr-6{padding-right:1.5rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-0\.5{padding-bottom:.125rem}.pl-2{padding-left:.5rem}.pl-6{padding-left:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.ordinal{--tw-ordinal: var(--tw-empty, );--tw-slashed-zero: var(--tw-empty, );--tw-numeric-figure: var(--tw-empty, );--tw-numeric-spacing: var(--tw-empty, );--tw-numeric-fraction: var(--tw-empty, );font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.ordinal{--tw-ordinal: ordinal}.leading-none{line-height:1}.text-black{--tw-text-opacity: 1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity: 1;color:rgba(209,213,219,var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity: 1;color:rgba(156,163,175,var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgba(107,114,128,var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity: 1;color:rgba(75,85,99,var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgba(55,65,81,var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity: 1;color:rgba(31,41,55,var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgba(17,24,39,var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgba(220,38,38,var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity: 1;color:rgba(245,158,11,var(--tw-text-opacity))}.text-green-500{--tw-text-opacity: 1;color:rgba(16,185,129,var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity: 1;color:rgba(59,130,246,var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgba(55,65,81,var(--tw-text-opacity))}.hover\:text-purple-600:hover{--tw-text-opacity: 1;color:rgba(124,58,237,var(--tw-text-opacity))}.underline{text-decoration:underline}*,:before,:after{--tw-shadow: 0 0 #0000}.shadow{--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}*,:before,:after{--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(59, 130, 246, .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000}.filter{--tw-blur: var(--tw-empty, );--tw-brightness: var(--tw-empty, );--tw-contrast: var(--tw-empty, );--tw-grayscale: var(--tw-empty, );--tw-hue-rotate: var(--tw-empty, );--tw-invert: var(--tw-empty, );--tw-saturate: var(--tw-empty, );--tw-sepia: var(--tw-empty, );--tw-drop-shadow: var(--tw-empty, );filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{--tw-blur: blur(8px)}@media (min-width: 1280px){.xl\:col-span-1{grid-column:span 1 / span 1}.xl\:col-span-4{grid-column:span 4 / span 4}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}

package/dist/utils/autoMark.d.ts

@@ -0,0 +1,7 @@
+import { ISemanticType } from "visual-insights";
+/**
+ *
+ * @param semanticTypeList semanticTypeList.length <= 2，调用时，手动将columns 和 rows的最后一个元素组合传进来
+ * @returns geom(mark) type
+ */
+export declare function autoMark(semanticTypeList: ISemanticType[]): string;

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { Record, Filters } from '../interfaces';
+import { Record, Filters, IMutField, IRow } from '../interfaces';
 export declare function checkMajorFactor(data: Record[], childrenData: Map<any, Record[]>, dimensions: string[], measures: string[]): {
     majorKey: string;
     majorSum: number;
@@ -16,3 +16,7 @@ export declare function getPredicates(selection: Record[], dimensions: string[],
 export declare function getPredicatesFromVegaSignals(signals: Filters, dimensions: string[], measures: string[]): IPredicate[];
 export declare function filterByPredicates(data: Record[], predicates: IPredicate[]): Record[];
 export declare function applyFilters(dataSource: Record[], filters: Filters): Record[];
+export declare function extendCountField(dataSource: IRow[], fields: IMutField[]): {
+    dataSource: IRow[];
+    fields: IMutField[];
+};

package/dist/utils/normalization.d.ts

@@ -1,4 +1,4 @@
-import { Record } from '../interfaces';
+import { IRow, Record } from '../interfaces';
 export declare function normalizeWithParent(data: Record[], parentData: Record[], measures: string[], syncScale: boolean): {
     normalizedData: Record[];
     normalizedParentData: Record[];
@@ -6,3 +6,9 @@ export declare function normalizeWithParent(data: Record[], parentData: Record[]
 export declare function compareDistribution(distribution1: Record[], distribution2: Record[], dimensions: string[], measures: string[]): number;
 export declare function normalizeByMeasures(dataSource: Record[], measures: string[]): Record[];
 export declare function getDistributionDifference(dataSource: Record[], dimensions: string[], measure1: string, measure2: string): number;
+export declare function makeBinField(dataSource: IRow[], fid: string, binFid: string, binSize?: number | undefined): {
+    [x: string]: any;
+}[];
+export declare function makeLogField(dataSource: IRow[], fid: string, logFid: string): {
+    [x: string]: any;
+}[];

package/dist/vis/future-react-vega.d.ts

@@ -3,16 +3,16 @@
  * https://github.com/vega/vega-lite/issues/4680
  */
 import React from 'react';
-import { Field, Record } from '../interfaces';
+import { IField, Record } from '../interfaces';
 interface ReactVegaProps {
-    rows: Field[];
-    columns: Field[];
+    rows: IField[];
+    columns: IField[];
     dataSource: Record[];
     defaultAggregate?: boolean;
     geomType: string;
-    color?: Field;
-    opacity?: Field;
-    size?: Field;
+    color?: IField;
+    opacity?: IField;
+    size?: IField;
     onGeomClick?: (values: any, e: any) => void;
 }
 declare const ReactVega: React.FC<ReactVegaProps>;

package/dist/vis/react-vega.d.ts

@@ -1,14 +1,23 @@
 import React from 'react';
-import { Field, Record } from '../interfaces';
+import { IViewField, IRow, IStackMode } from '../interfaces';
 interface ReactVegaProps {
-    rows: Field[];
-    columns: Field[];
-    dataSource: Record[];
+    rows: Readonly<IViewField[]>;
+    columns: Readonly<IViewField[]>;
+    dataSource: IRow[];
     defaultAggregate?: boolean;
+    stack: IStackMode;
+    interactiveScale: boolean;
     geomType: string;
-    color?: Field;
-    opacity?: Field;
-    size?: Field;
+    color?: IViewField;
+    opacity?: IViewField;
+    size?: IViewField;
+    shape?: IViewField;
+    theta?: IViewField;
+    radius?: IViewField;
+    showActions: boolean;
+    layoutMode: string;
+    width: number;
+    height: number;
     onGeomClick?: (values: any, e: any) => void;
 }
 declare const ReactVega: React.FC<ReactVegaProps>;

package/dist/visualSettings/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-interface VisualSettinsProps {
-}
-declare const _default: React.FunctionComponent<VisualSettinsProps>;
+export declare const LiteContainer: any;
+declare const _default: React.FunctionComponent<{}>;
 export default _default;

package/dist/visualSettings/menubar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MenubarContainer: any;
+declare const _default: React.FunctionComponent<{}>;
+export default _default;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "scripts": {
-    "dev": "vite",
+    "dev:front_end": "vite --host",
+    "dev": "npm run dev:front_end",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "type": "tsc src/lib.ts --declaration --emitDeclarationOnly --jsx react --esModuleInterop --outDir dist"
@@ -10,42 +11,55 @@
   "files": [
     "dist"
   ],
-  "license": "GPL",
+  "license": "AGPL",
   "main": "./dist/graphic-walker.umd.js",
   "module": "./dist/graphic-walker.es.js",
   "exports": {
     ".": {
       "import": "./dist/graphic-walker.es.js",
       "require": "./dist/graphic-walker.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
+  "prettier": {
+    "tabWidth": 4
+  },
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@heroicons/react": "^1.0.4",
+    "@heroicons/react": "^2.0.8",
+    "@kanaries/web-data-loader": "0.1.5",
     "autoprefixer": "^10.3.5",
+    "i18next": "^21.9.1",
+    "i18next-browser-languagedetector": "^6.1.5",
+    "immer": "^9.0.15",
     "mobx": "^6.3.3",
     "mobx-react-lite": "^3.2.1",
     "postcss": "^8.3.7",
+    "re-resizable": "^6.9.8",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
+    "react-i18next": "^11.18.6",
     "react-json-view": "^1.21.3",
     "rxjs": "^7.3.0",
     "styled-components": "^5.3.0",
     "tailwindcss": "^2.2.15",
     "uuid": "^8.3.2",
-    "vega": "^5.20.2",
-    "vega-embed": "^6.18.2",
-    "vega-lite": "^5.1.0",
-    "visual-insights": "0.7.3"
+    "vega": "^5.22.1",
+    "vega-embed": "^6.20.8",
+    "vega-lite": "^5.2.0",
+    "visual-insights": "0.7.15"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.2.5",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^17.x",
+    "@types/react-dom": "^17.x",
     "@types/uuid": "^8.3.1",
-    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
     "typescript": "^4.3.2",
-    "vite": "^2.4.4"
+    "vite": "^3.1.0"
   }
 }