@kanaries/graphic-walker 0.3.1 → 0.3.2

package/dist/interfaces.d.ts

@@ -155,11 +155,7 @@ export type IFilterRule = {
     type: 'one of';
     value: Set<string | number>;
 };
-export declare const EXPLORATION_TYPES: readonly ["none", "brush", "point"];
-export declare const BRUSH_DIRECTIONS: readonly ["default", "x", "y"];
 export type IStackMode = 'none' | 'stack' | 'normalize';
-export type IExplorationType = typeof EXPLORATION_TYPES[number];
-export type IBrushDirection = typeof BRUSH_DIRECTIONS[number];
 export interface IVisualConfig {
     defaultAggregated: boolean;
     geoms: string[];
@@ -172,11 +168,6 @@ export interface IVisualConfig {
         width: number;
         height: number;
     };
-    exploration: {
-        mode: IExplorationType;
-        /** works when mode is 'brush' */
-        brushDirection: IBrushDirection;
-    };
 }
 export interface IVisSpec {
     readonly visId: string;

package/dist/store/visualSpecStore.d.ts

@@ -93,7 +93,6 @@ export declare class VizSpecStore {
         width?: number;
         height?: number;
     }): void;
-    setExploration(value: Partial<IVisualConfig["exploration"]>): 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;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey } from '../interfaces';
-import { SingleViewProps } from './spec/view';
 export interface IReactVegaHandler {
     getSVGData: () => Promise<string[]>;
     getCanvasData: () => Promise<string[]>;
@@ -27,8 +26,6 @@ interface ReactVegaProps {
     width: number;
     height: number;
     onGeomClick?: (values: any, e: any) => void;
-    selectEncoding: SingleViewProps['selectEncoding'];
-    brushEncoding: SingleViewProps['brushEncoding'];
     /** @default "vega" */
     themeKey?: IThemeKey;
     dark?: IDarkMode;

package/dist/vis/spec/view.d.ts

@@ -3,10 +3,6 @@ import { IEncodeProps } from './encode';
 export interface SingleViewProps extends IEncodeProps {
     defaultAggregated: boolean;
     stack: IStackMode;
-    enableCrossFilter: boolean;
-    asCrossFilterTrigger: boolean;
-    selectEncoding: 'default' | 'none';
-    brushEncoding: 'x' | 'y' | 'default' | 'none';
     hideLegend?: boolean;
 }
 export declare function getSingleView(props: SingleViewProps): {
@@ -21,53 +17,4 @@ export declare function getSingleView(props: SingleViewProps): {
     encoding: {
         [key: string]: any;
     };
-    transform?: undefined;
-    params?: undefined;
-} | {
-    config: any;
-    transform: {
-        filter: {
-            param: string;
-        };
-    }[];
-    params: {
-        name: string;
-        select: {
-            type: string;
-            encodings: ("x" | "y")[] | undefined;
-        };
-    }[];
-    mark: {
-        type: string;
-        opacity: number;
-        tooltip: {
-            content: string;
-        };
-    };
-    encoding: {
-        [key: string]: any;
-    };
-} | {
-    config: any;
-    transform: {
-        filter: {
-            param: string;
-        };
-    }[];
-    params: {
-        name: string;
-        select: {
-            type: string;
-        };
-    }[];
-    mark: {
-        type: string;
-        opacity: number;
-        tooltip: {
-            content: string;
-        };
-    };
-    encoding: {
-        [key: string]: any;
-    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -19,7 +19,8 @@
   "exports": {
     ".": {
       "import": "./dist/graphic-walker.es.js",
-      "require": "./dist/graphic-walker.umd.js"
+      "require": "./dist/graphic-walker.umd.js",
+      "types": "./dist/index.d.ts"
     },
     "./dist/style.css": {
       "import": "./dist/style.css",

package/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -9,6 +9,12 @@ import { COUNT_FIELD_ID } from '../../constants';
 import DropdownContext from '../../components/dropdownContext';
 import { AGGREGATOR_LIST } from '../fieldsContext';
 import { Draggable, DroppableStateSnapshot } from '@kanaries/react-beautiful-dnd';
+import styled from 'styled-components';
+
+const PillActions = styled.div`
+    overflow: visible !important;
+    width: calc(100% - 1.875rem);
+`;
 
 interface SingleEncodeEditorProps {
     dkey: IDraggableStateKey;
@@ -47,7 +53,7 @@ const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
                                 >
                                     <TrashIcon className="w-4" />
                                 </div>
-                                <div className="flex-1 flex items-center border border-gray-200 dark:border-gray-700 border-l-0 px-2 space-x-2 truncate">
+                                <PillActions className="flex-1 flex items-center border border-gray-200 dark:border-gray-700 border-l-0 px-2 space-x-2 truncate">
                                     <span className="flex-1 truncate">
                                         {channelItem.name}
                                     </span>
@@ -64,7 +70,7 @@ const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
                                             </span>
                                         </DropdownContext>
                                     )}
-                                </div>
+                                </PillActions>
                             </div>
                         );
                     }}

package/src/interfaces.ts

@@ -182,13 +182,7 @@ export type IFilterRule =
           value: Set<string | number>;
       };
 
-export const EXPLORATION_TYPES = ['none', 'brush', 'point'] as const;
-
-export const BRUSH_DIRECTIONS = ['default', 'x', 'y'] as const;
-
 export type IStackMode = 'none' | 'stack' | 'normalize';
-export type IExplorationType = typeof EXPLORATION_TYPES[number];
-export type IBrushDirection = typeof BRUSH_DIRECTIONS[number];
 
 export interface IVisualConfig {
     defaultAggregated: boolean;
@@ -202,11 +196,6 @@ export interface IVisualConfig {
         width: number;
         height: number;
     };
-    exploration: {
-        mode: IExplorationType;
-        /** works when mode is 'brush' */
-        brushDirection: IBrushDirection;
-    };
 }
 
 export interface IVisSpec {

package/src/renderer/specRenderer.tsx

@@ -21,7 +21,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
 ) {
     const { vizStore, commonStore } = useGlobalStore();
     // const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
+    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size } = visualConfig;
 
     const rows = draggableFieldState.rows;
     const columns = draggableFieldState.columns;
@@ -41,19 +41,15 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
 
     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);
-                });
-            }
+            e.stopPropagation();
+            runInAction(() => {
+                commonStore.showEmbededMenu([e.pageX, e.pageY]);
+                commonStore.setFilters(values);
+            });
         },
-        [shouldTriggerMenu]
+        []
     );
     const enableResize = size.mode === 'fixed' && !hasFacet;
 
@@ -108,8 +104,6 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 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}

package/src/store/visualSpecStore.ts

@@ -74,10 +74,6 @@ export function initVisualConfig(): IVisualConfig {
             width: 320,
             height: 200,
         },
-        exploration: {
-            mode: "none",
-            brushDirection: "default",
-        },
     };
 }
 
@@ -391,16 +387,6 @@ export class VizSpecStore {
             config.size.height = height;
         });
     }
-    public setExploration(value: Partial<IVisualConfig["exploration"]>) {
-        this.useMutable(({ config }) => {
-            if (value.mode) {
-                config.exploration.mode = value.mode;
-            }
-            if (value.brushDirection) {
-                config.exploration.brushDirection = value.brushDirection;
-            }
-        });
-    }
     public reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number) {
         if (MetaFieldKeys.includes(stateKey)) return;
         if (sourceIndex === destinationIndex) return;

package/src/vis/react-vega.tsx

@@ -46,8 +46,6 @@ interface ReactVegaProps {
   width: number;
   height: number;
   onGeomClick?: (values: any, e: any) => void
-  selectEncoding: SingleViewProps['selectEncoding'];
-  brushEncoding: SingleViewProps['brushEncoding'];
   /** @default "vega" */
   themeKey?: IThemeKey;
   dark?: IDarkMode;
@@ -96,8 +94,6 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     layoutMode,
     width,
     height,
-    selectEncoding,
-    brushEncoding,
     details = [],
     themeKey = 'vega',
     dark = 'media'
@@ -195,10 +191,6 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
         defaultAggregated: defaultAggregate,
         stack,
         geomType,
-        selectEncoding,
-        brushEncoding,
-        enableCrossFilter: false,
-        asCrossFilterTrigger: false,
       });
 
       spec.mark = singleView.mark;
@@ -206,9 +198,6 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
         spec.encoding = singleView.encoding;
       }
 
-      if ('params' in singleView) {
-        spec.params.push(...singleView.params!);
-      }
       if (viewPlaceholders.length > 0 && viewPlaceholders[0].current) {
         embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: themeConfig }).then(res => {
           vegaRefs.current = [res.view];
@@ -264,18 +253,11 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
             defaultAggregated: defaultAggregate,
             stack,
             geomType,
-            selectEncoding,
-            brushEncoding,
-            enableCrossFilter: crossFilterTriggerIdx !== -1,
-            asCrossFilterTrigger: crossFilterTriggerIdx === sourceId,
             hideLegend: !hasLegend,
           });
           const node = i * colRepeatFields.length + j < viewPlaceholders.length ? viewPlaceholders[i * colRepeatFields.length + j].current : null
           let commonSpec = { ...spec };
 
-          if ('params' in singleView) {
-            commonSpec.params = [...commonSpec.params, ...singleView.params!];
-          }
           const ans = { ...commonSpec, ...singleView }
           if ('params' in commonSpec) {
             ans.params = commonSpec.params;
@@ -368,9 +350,6 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     layoutMode,
     width,
     height,
-    selectEncoding,
-    brushEncoding,
-    crossFilterTriggerIdx,
     themeConfig,
     details
   ]);

package/src/vis/spec/view.ts

@@ -6,15 +6,9 @@ import { IEncodeProps, channelEncode } from './encode';
 import { channelStack } from './stack';
 import { addTooltipEncode } from './tooltip';
 
-const BRUSH_SIGNAL_NAME = '__gw_brush__';
-const POINT_SIGNAL_NAME = '__gw_point__';
 export interface SingleViewProps extends IEncodeProps {
     defaultAggregated: boolean;
     stack: IStackMode;
-    enableCrossFilter: boolean;
-    asCrossFilterTrigger: boolean;
-    selectEncoding: 'default' | 'none';
-    brushEncoding: 'x' | 'y' | 'default' | 'none';
     hideLegend?: boolean;
 }
 export function getSingleView(props: SingleViewProps) {
@@ -35,10 +29,6 @@ export function getSingleView(props: SingleViewProps) {
         defaultAggregated,
         stack,
         geomType,
-        selectEncoding,
-        brushEncoding,
-        enableCrossFilter,
-        asCrossFilterTrigger,
         hideLegend = false,
     } = props;
     const fields: IViewField[] = [x, y, color, opacity, size, shape, row, column, xOffset, yOffset, theta, radius];
@@ -82,55 +72,9 @@ export function getSingleView(props: SingleViewProps) {
         opacity: 0.96,
         tooltip: { content: 'data' }
     };
-    if (!enableCrossFilter || (brushEncoding === 'none' && selectEncoding === 'none')) {
-        return {
-            config,
-            mark,
-            encoding,
-        };
-    }
-
-    if (brushEncoding !== 'none') {
-        return {
-            config,
-            transform: asCrossFilterTrigger ? [] : [{ filter: { param: BRUSH_SIGNAL_NAME } }],
-            params: [
-                // {
-                //   name: BRUSH_SIGNAL_DISPLAY_NAME,
-                //   select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
-                //   on: '__YOU_CANNOT_MODIFY_THIS_SIGNAL__',
-                // },
-                {
-                    name: BRUSH_SIGNAL_NAME,
-                    select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
-                },
-            ],
-            mark,
-            encoding,
-        };
-    }
-
     return {
         config,
-        transform: asCrossFilterTrigger ? [] : [{ filter: { param: POINT_SIGNAL_NAME } }],
-        params: [
-            {
-                name: POINT_SIGNAL_NAME,
-                select: { type: 'point' },
-            },
-        ],
         mark,
-        encoding: asCrossFilterTrigger
-            ? {
-                  ...encoding,
-                  color: {
-                      condition: {
-                          ...encoding.color,
-                          param: POINT_SIGNAL_NAME,
-                      },
-                      value: '#888',
-                  },
-              }
-            : encoding,
+        encoding,
     };
 }

package/src/visualSettings/index.tsx

@@ -11,10 +11,6 @@ import {
     ArrowUturnRightIcon,
     LockClosedIcon,
     LockOpenIcon,
-    ViewfinderCircleIcon,
-    ChatBubbleBottomCenterTextIcon,
-    PaintBrushIcon,
-    CursorArrowRaysIcon,
     WrenchIcon,
     ChevronUpDownIcon,
     XMarkIcon,
@@ -30,7 +26,7 @@ import { useTranslation } from 'react-i18next';
 import { ResizeDialog } from '../components/sizeSetting';
 import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
 import { useGlobalStore } from '../store';
-import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS, IDarkMode } from '../interfaces';
+import { IStackMode, IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
 import Toolbar, { ToolbarItemProps } from '../components/toolbar';
 import { ButtonWithShortcut } from './menubar';
@@ -74,7 +70,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
 
     const {
         defaultAggregated, geoms: [markType], stack, interactiveScale, size: { mode: sizeMode, width, height },
-        exploration: { mode: explorationMode, brushDirection }, showActions,
+        showActions,
     } = visualConfig;
 
     const downloadPNG = useCallback(throttle(() => {
@@ -250,60 +246,6 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
                 ),
             },
             '-',
-            {
-                key: 'exploration_mode',
-                icon: ViewfinderCircleIcon,
-                label: tGlobal(`constant.exploration_mode.__enum__`),
-                options: EXPLORATION_TYPES.map(g => ({
-                    key: g,
-                    label: tGlobal(`constant.exploration_mode.${g}`),
-                    icon: {
-                        none: ChatBubbleBottomCenterTextIcon,
-                        brush: PaintBrushIcon,
-                        point: CursorArrowRaysIcon,
-                    }[g],
-                })),
-                value: explorationMode,
-                onSelect: key => {
-                    vizStore.setExploration({
-                        mode: key as (typeof EXPLORATION_TYPES)[number]
-                    });
-                },
-                form: explorationMode === 'brush' ? (
-                    <FormContainer>
-                        <label
-                            id="dropdown:brush_mode:label"
-                            htmlFor="dropdown:brush_mode"
-                        >
-                            {tGlobal(`constant.brush_mode.__enum__`)}
-                        </label>
-                        <select
-                            className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
-                            id="dropdown:brush_mode"
-                            aria-describedby="dropdown:brush_mode:label"
-                            disabled={explorationMode !== 'brush'}
-                            aria-disabled={explorationMode !== 'brush'}
-                            value={brushDirection}
-                            onChange={e => {
-                                vizStore.setExploration({
-                                    brushDirection: e.target.value as IBrushDirection
-                                });
-                            }}
-                        >
-                            {BRUSH_DIRECTIONS.map(g => (
-                                <option
-                                    key={g}
-                                    value={g}
-                                    className="cursor-pointer"
-                                    aria-selected={brushDirection === g}
-                                >
-                                    {tGlobal(`constant.brush_mode.${g}`)}
-                                </option>
-                            ))}
-                        </select>
-                    </FormContainer>
-                ) : undefined,
-            },
             {
                 key: 'debug',
                 label: t('toggle.debug'),
@@ -345,7 +287,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
                 }
             }
         ] as ToolbarItemProps[];
-    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG, dark]);
+    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, showActions, downloadPNG, downloadSVG, dark]);
 
     return <div style={{ margin: '0.38em 0.28em 0.2em 0.18em' }}>
         <Toolbar

package/dist/components/pivotTable/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/pivotTable/inteface.d.ts

@@ -1,13 +0,0 @@
-import { IAggregator } from "../../interfaces";
-export interface INestNode {
-    key: string;
-    value: string;
-    children: INestNode[];
-}
-export interface IGroupByQuery {
-    groupBy: string[];
-    measures: {
-        field: string;
-        agg: IAggregator;
-    }[];
-}

package/dist/components/pivotTable/leftTree.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { INestNode } from './inteface';
-export interface TreeProps {
-    data: INestNode;
-}
-declare const LeftTree: React.FC<TreeProps>;
-export default LeftTree;

package/dist/components/pivotTable/store.d.ts

@@ -1,24 +0,0 @@
-import { IGroupByQuery, INestNode } from './inteface';
-import { IField, IRow } from '../../interfaces';
-import React from 'react';
-declare class PivotTableStore {
-    leftTree: INestNode | null;
-    topTree: INestNode | null;
-    metricTable: any[][];
-    dataSource: IRow[];
-    metas: IField[];
-    viewData: IRow[];
-    constructor();
-    init(dataSource: IRow[], metas: IField[]): void;
-    createTree(query: IGroupByQuery, viewData: IRow[]): void;
-    createTopTree(query: IGroupByQuery, viewData: any): void;
-    createLeftTree(query: IGroupByQuery, viewData: any): void;
-    queryData(leftQuery: IGroupByQuery, topQuery: IGroupByQuery): Promise<void>;
-}
-export interface PivotTableDataProps {
-    data: IRow[];
-    metas: IField[];
-}
-export declare const PivotTableStoreWrapper: React.FC<PivotTableDataProps>;
-export declare function usePivotTableStore(): PivotTableStore;
-export {};

package/dist/components/pivotTable/topTree.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { INestNode } from './inteface';
-export interface TreeProps {
-    data: INestNode;
-}
-declare const TopTree: React.FC<TreeProps>;
-export default TopTree;

package/dist/components/pivotTable/utils.d.ts

@@ -1,4 +0,0 @@
-import { IRow } from "../../interfaces";
-import { INestNode } from "./inteface";
-export declare function insertNode(tree: INestNode, layerKeys: string[], nodeData: IRow, depth: number): void;
-export declare function buildNestTree(layerKeys: string[], data: IRow[]): INestNode;

package/src/components/pivotTable/index.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { StoreWrapper, useGlobalStore } from '../../store';
-import { PivotTableDataProps, PivotTableStoreWrapper, usePivotTableStore } from './store';
-import { observer } from 'mobx-react-lite';
-import LeftTree from './leftTree';
-import TopTree from './topTree';
-
-interface PivotTableProps extends PivotTableDataProps {}
-const PivotTable: React.FC = observer((props) => {
-    const store = usePivotTableStore();
-    const { vizStore } = useGlobalStore();
-    const { draggableFieldState } = vizStore;
-    const { rows, columns } = draggableFieldState;
-
-    const { leftTree, topTree, metricTable } = store;
-    return (
-        <div>
-            <div>
-                <h1>left</h1>
-                {leftTree && <LeftTree data={leftTree} />}
-            </div>
-            <div>
-                <h1>top</h1>
-                {topTree && <TopTree data={topTree} />}
-            </div>
-            <div>
-                <h1>metric</h1>
-                <code>{JSON.stringify(metricTable, null, 2)}</code>
-            </div>
-        </div>
-    );
-});
-
-const PivotTableApp: React.FC<PivotTableProps> = (props) => {
-    return (
-        <PivotTableStoreWrapper {...props}>
-            <PivotTable />
-        </PivotTableStoreWrapper>
-    );
-};

package/src/components/pivotTable/inteface.ts

@@ -1,12 +0,0 @@
-import { IAggregator } from "../../interfaces";
-
-export interface INestNode {
-    key: string;
-    value: string;
-    children: INestNode[];
-}
-
-export interface IGroupByQuery {
-    groupBy: string[];
-    measures: { field: string; agg: IAggregator }[];
-}

package/src/components/pivotTable/leftTree.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { INestNode } from './inteface';
-
-export interface TreeProps {
-    data: INestNode;
-}
-const LeftTree: React.FC<TreeProps> = (props) => {
-    return <div>{JSON.stringify(props.data)}</div>;
-};
-
-export default LeftTree;