Graphic Walker version 0.5 propsals

[islxyqwe]

Graphic Walker 0.5.0 Propsals

new API design

Basic Usage

<GraphicWalker />

this usage will provide a very simple dataSource Chooser that will be override by computation/dataSource.

Data Usage

<GraphicWalker dataSource={data} meta={meta} />

<GraphicWalker dataSource={data} meta={inferMeta(dataSource)} />

<GraphicWalker computation={computation} meta={meta} />

With Controlled State Usage

<GraphicWalker
    dataSource={data}
    meta={meta}
    onChangeMeta={(index, newMeta) => {}}
    specs={[specs]}
    onChangeSpec={(i, newSpec) => {}}
    tabIndex={i}
    onChangeTabIndex={(i) => {}}
/>

PureRenderer Props change

<PureRenderer spec={spec} dataSource={data} meta={data} />
<PureRenderer spec={spec} computation={computation} meta={data} />

Specification changes

the rule of OneOf/NotIn filter will be Array instead of Set.
and there is no difference between IChart and IChartForExport, so IChartForExport is removed.

GraphicWalker new property

the Props of is the IVizProps interface above.

export interface IVizProps {
    initMeta?: IMutField[];
    meta?: IMutField[];
    onChangeMeta?: (index: number, meta: IMutField) => void;

    initSpecs?: (IChart | IVisSpecForExport | VegaliteSpec)[];
    specs: IChart[];
    onChangeSpec: (index: number, spec: IChart) => void;

    dataSource?: IRow[];
    fieldKeyGuard?: boolean;
    computation?: IComputationFunction;
    computationTimeout?: number;

    keepAlive?: boolean | string;
    dark?: IDarkMode;
    config?: IGWConfig;
}
interface IGWConfig {
    i18nLang?: string;
    i18nResources?: { [lang: string]: Record<string, string | any> };
    themeConfig?: GWGlobalConfig;
    /** @default "vega" */
    themeKey?: IThemeKey;
    toolbar?: {
        extra?: ToolbarItemProps[];
        exclude?: string[];
    };
    geographicData?: IGeographicData & {
        key: string;
    };
    enhanceAPI?: {
        header?: Record<string, string>;
        features?: {
            askviz?:
                | string
                | boolean
                | ((metas: IViewField[], query: string) => PromiseLike<IVisSpecForExport | IChartForExport> | IVisSpecForExport | IChartForExport);
            feedbackAskviz?: string | boolean | ((data: IAskVizFeedback) => void);
        };
    };
    geoList?: IGeoDataItem[];
    channelScales?: IChannelScales;
}

the storeRef is Removed,and combined into ref

export interface IGWRef {
    store: IGlobalStore;
    getRenderStatus(): IRenderStatus;
    getTabIndex(): number;
    setTabIndex(index: number): void;
    getChart(index: number): DeepReadonly<IChart>;
    getCurrentChart(): DeepReadonly<IChart>;
    canUndo(): boolean;
    canRedo(): boolean;
    undo(): void;
    redo(): void;
    /** add a new empty Chart and switch to it. */
    addNewChart(): void;
    /** remove the specified chart. */
    removeChart(index: number): void;
    /** replace all Charts. */
    importSpec(specs: (IChart | IVisSpecForExport)[]): void;
    /** replace current chart by the spec. */
    replaceSpec(spec: IChart | IVisSpecForExport): void;
    /** append a new chart by the spec and switch to it. */
    appendSpec(spec: IChart | IVisSpecForExport): void;
    exportCurrentSpec(): IChart;
    exportSpec(): IChart[];
    exportWorkflow(): IDataQueryPayload;
    setMeta(meta: IMutField[]): void;
    getMeta(): IMutField[];
    /** reset the state and there will remain only a empty chart in view.*/
    resetCharts(): void;
    /** get the image of the chart. svg & data-url not usable in pivot table. */
    exportCurrentChart(mode: 'svg' | 'data-url' | 'csv' | 'vegalite' | 'json'): Promise<IExportResult>;
    exportChartList(mode: 'svg' | 'data-url' | 'csv' | 'vegalite' | 'json'): Promise<IExportResult[]>;

    getRendererNode(): IRendererRef;
}

export interface IGlobalStore {
    vizStore: VizSpecStore;
}

export type IExportData =
    | {
          type: 'svg' | 'data-url';
          colIndex: number;
          rowIndex: number;
          width: number;
          height: number;
          data: string;
      }
    | {
          type: 'csv' | 'vega-lite' | 'json';
          data: string;
      };

export interface IExportResult {
    type: 'svg' | 'data-url' | 'csv' | 'json' | 'vega-lite';
    title: string;
    cols: number;
    rows: number;
    datas: IExportData[];
}

export interface IRendererRef {
    container(): HTMLDivElement | null;
    canvasRowNum: number;
    canvasColNum: number;
    type: 'vega' | 'leaflet' | 'pivot';
    canvases: {
        colIndex: number;
        rowIndex: number;
        canvasWidth: number;
        canvasHeight: number;
        get(): HTMLCanvasElement;
    }[];
}

a Storybook for GraphicWalker example

Add a storybook that includes examples of using GraphicWalker. then you can view the examples in our website.

standalone DataSource Component for GraphicWalker

can be used to connect a exist database, import csv and use it for graphic walker.

[islxyqwe]

onChangeSpec: (index: number, spec: IChart) => void;

this prop cannot handle when SpecList has changed(etc. add a new Chart).
the new prop will be

onChangeSpec: (change: ISpecCHange) => void;
export type ISpecChange =
    | {
          type: 'replace';
          index: number;
          spec: IChart;
      }
    | {
          type: 'insert';
          index: number;
          spec: IChart;
      }
    | {
          type: 'remove';
          index: number;
      }
    | {
          type: 'reset';
          specs: IChart[];
      };