@kanaries/graphic-walker 0.2.16 → 0.2.18

package/dist/insightBoard/index.d.ts

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

package/dist/insightBoard/mainBoard.d.ts

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

package/dist/insightBoard/radioGroupButtons.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface RGBOption {
-    label: string;
-    value: any;
-}
-interface RadioGroupButtonsProps {
-    options: RGBOption[];
-    onChange?: (value: any, index: number) => void;
-    choosenIndex: number;
-}
-declare const RadioGroupButtons: React.FC<RadioGroupButtonsProps>;
-export default RadioGroupButtons;

package/dist/insightBoard/selectionSpec.d.ts

@@ -1,13 +0,0 @@
-import { Specification } from 'visual-insights';
-import { IRow, SemanticType } from '../interfaces';
-export declare const geomTypeMap: {
-    [key: string]: any;
-};
-export declare function selectionVis(query: Specification, dataSource: IRow[], dimensions: string[], measures: string[], aggregatedMeasures: Array<{
-    op: string;
-    field: string;
-    as: string;
-}>, fieldFeatures: Array<{
-    name: string;
-    type: SemanticType;
-}>, defaultAggregated?: boolean, defaultStack?: boolean): any;

package/dist/insightBoard/std2vegaSpec.d.ts

@@ -1,12 +0,0 @@
-import { Specification } from 'visual-insights';
-import { IField, IRow } from '../interfaces';
-import { IPredicate } from '../utils';
-export 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: IRow[], dimensions: string[], measures: string[], predicates: IPredicate[] | null, aggregatedMeasures: Array<{
-    op: string;
-    field: string;
-    as: string;
-}>, fields: Readonly<IField[]>, type: IReasonType, defaultAggregated?: boolean, defaultStack?: boolean): any;

package/dist/insightBoard/utils.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1,61 +0,0 @@
-import { IMutField } from 'visual-insights';
-import { IRow, IMeasure } from './interfaces';
-import { IPredicate } from './utils';
-export interface IExplaination {
-    dimensions: string[];
-    measures: IMeasure[];
-    extendDs: string[];
-    extendMs: IMeasure[];
-    type: string;
-    score: number;
-    description: any;
-    predicates: IPredicate[];
-}
-export interface IMeasureWithStat extends IMeasure {
-    score: number;
-}
-export declare class DataExplainer {
-    dataSource: IRow[];
-    private engine;
-    private defaultAggs;
-    constructor(dataSource?: IRow[]);
-    setFields(fields: IMutField[]): void;
-    preAnalysis(): this;
-    explain(predicates: IPredicate[], dimensions: string[], measures: IMeasure[], threshold?: number): IExplaination[];
-    explainConditionalValue(predicates: IPredicate[], dimensions: string[], measures: IMeasure[], K_Neighbor?: number): void;
-    explainValue(predicates: IPredicate[], dimensions: string[], measures: IMeasure[]): number[];
-    explainByChildren(predicates: IPredicate[], dimensions: string[], measures: IMeasure[], K_Neighbor?: number): {
-        majorList: {
-            key: string;
-            score: number;
-            dimensions: string[];
-            measures: IMeasure[];
-        }[];
-        outlierList: {
-            key: string;
-            score: number;
-            dimensions: string[];
-            measures: IMeasure[];
-        }[];
-    };
-    explainBySelection(predicates: IPredicate[], dimensions: string[], measures: IMeasure[], K_Neighbor?: number): {
-        score: number;
-        dimensions: string[];
-        measures: IMeasure[];
-    }[];
-    explainByCorMeasures(predicates: IPredicate[], dimensions: string[], measures: IMeasure[], K_Neighbor?: number): {
-        score: number;
-        dimensions: string[];
-        measures: IMeasure[];
-        max: number;
-        min: number;
-        intMeasures: IMeasureWithStat[];
-    }[];
-    getGeneralizeKNN(type: 'dimension' | 'measure', fields: string[], K_Neighbor?: number, threshold?: number): string[];
-    getKNN(type: 'dimension' | 'measure', fields: string[], K_Neighbor?: number, threshold?: number): string[];
-    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").IRow[];
-    }[];
-}

package/src/insightBoard/index.tsx

@@ -1,31 +0,0 @@
-import { toJS } from "mobx";
-import { observer } from "mobx-react-lite";
-import React, { useCallback } from "react";
-import Modal from "../components/modal";
-import { useGlobalStore } from "../store";
-import InsightMainBoard from "./mainBoard";
-
-const InsightBoard: React.FC = (props) => {
-    const { commonStore, vizStore } = useGlobalStore();
-    const { showInsightBoard, currentDataset, filters } = commonStore;
-    const { viewDimensions, viewMeasures, draggableFieldState } = vizStore;
-    const onCloseModal = useCallback(() => {
-        commonStore.setShowInsightBoard(false);
-    }, []);
-    if (!showInsightBoard) {
-        return null;
-    }
-    return (
-        <Modal onClose={onCloseModal} show={showInsightBoard}>
-            <InsightMainBoard
-                dataSource={currentDataset.dataSource}
-                fields={toJS(draggableFieldState.fields)}
-                viewDs={viewDimensions}
-                viewMs={viewMeasures}
-                filters={toJS(filters)}
-            />
-        </Modal>
-    );
-};
-
-export default observer(InsightBoard);

package/src/insightBoard/mainBoard.tsx

@@ -1,224 +0,0 @@
-import React, { useEffect, useState, useMemo, useRef } from "react";
-import embed from "vega-embed";
-import { Insight, Utils, UnivariateSummary } from "visual-insights";
-import ReactJson from "react-json-view";
-import { IField, Filters, IMeasure, IRow } from "../interfaces";
-import { IExplaination, IMeasureWithStat } from "../insights";
-import { getExplaination, IVisSpace } from "../services";
-import { baseVis, IReasonType } from "./std2vegaSpec";
-import RadioGroupButtons from "./radioGroupButtons";
-import { formatFieldName, mergeMeasures } from "./utils";
-import { useTranslation } from "react-i18next";
-import { useCurrentMediaTheme } from "../utils/media";
-import { builtInThemes } from "../vis/theme";
-
-const collection = Insight.IntentionWorkerCollection.init();
-
-enum IReasonTypes {
-    selection_dim_distribution = "selection_dim_distribution",
-    selection_mea_distribution = "selection_mea_distribution",
-    children_major_factor = "children_major_factor",
-    children_outlier = "children_outlier",
-}
-
-collection.enable(Insight.DefaultIWorker.cluster, false);
-interface SubSpace {
-    dimensions: string[];
-    measures: IMeasure[];
-}
-
-interface InsightMainBoardProps {
-    dataSource: IRow[];
-    fields: Readonly<IField[]>;
-    filters?: Filters;
-    viewDs: IField[];
-    viewMs: IField[];
-}
-const InsightMainBoard: React.FC<InsightMainBoardProps> = (props) => {
-    const { dataSource, fields, viewDs, viewMs, filters } = props;
-    const [recSpaces, setRecSpaces] = useState<IExplaination[]>([]);
-    const [visSpaces, setVisSpaces] = useState<IVisSpace[]>([]);
-    const [visIndex, setVisIndex] = useState<number>(0);
-    const [loading, setLoading] = useState<boolean>(false);
-    const [valueExp, setValueExp] = useState<IMeasureWithStat[]>([]);
-    const { t } = useTranslation();
-    const container = useRef<HTMLDivElement>(null);
-    const mediaTheme = useCurrentMediaTheme();
-    const themeConfig = builtInThemes['g2'][mediaTheme];
-
-    const dimsWithTypes = useMemo(() => {
-        const dimensions = fields
-            .filter((f) => f.analyticType === "dimension")
-            .map((f) => f.fid)
-            .filter((f) => !Utils.isFieldUnique(dataSource, f));
-        return UnivariateSummary.getAllFieldTypes(dataSource, dimensions);
-    }, [fields, dataSource]);
-
-    const measWithTypes = useMemo(() => {
-        const measures = fields.filter((f) => f.analyticType === "measure").map((f) => f.fid);
-        return measures.map((m) => ({
-            name: m,
-            type: "quantitative",
-        }));
-    }, [fields]);
-
-    useEffect(() => {
-        if (dimsWithTypes.length > 0 && measWithTypes.length > 0 && dataSource.length > 0) {
-            const measures = fields.filter((f) => f.analyticType === "measure").map((f) => f.fid);
-            const dimensions = dimsWithTypes.map((d) => d.name);
-            const currentSpace: SubSpace = {
-                dimensions: viewDs.map((f) => f.fid),
-                measures: viewMs.map((f) => ({
-                    key: f.fid,
-                    op: f.aggName as any,
-                })),
-            };
-            setLoading(true);
-
-            getExplaination({
-                dimensions,
-                measures,
-                dataSource,
-                currentSpace,
-                filters,
-            }).then(({ visSpaces, explainations, valueExp }) => {
-                setRecSpaces(explainations);
-                setVisSpaces(visSpaces);
-                setValueExp(valueExp);
-                setLoading(false);
-            });
-        }
-    }, [fields, viewDs, viewMs, measWithTypes, filters, dimsWithTypes, measWithTypes, dataSource]);
-
-    useEffect(() => {
-        const RecSpace = recSpaces[visIndex];
-        const visSpec = visSpaces[visIndex];
-        if (container.current && RecSpace && visSpec) {
-            const usePredicates: boolean =
-                RecSpace.type === "selection_dim_distribution" || RecSpace.type === "selection_mea_distribution";
-            const mergedMeasures = mergeMeasures(RecSpace.measures, RecSpace.extendMs);
-            const _vegaSpec = baseVis(
-                visSpec.schema,
-                visSpec.schema.geomType && visSpec.schema.geomType[0] === "point" ? dataSource : visSpec.dataView,
-                // result.aggData,
-                [...RecSpace.dimensions, ...RecSpace.extendDs],
-                [...RecSpace.measures, ...RecSpace.extendMs].map((m) => m.key),
-                usePredicates ? RecSpace.predicates : null,
-                mergedMeasures.map((m) => ({
-                    op: m.op,
-                    field: m.key,
-                    as: m.key,
-                })),
-                fields,
-                RecSpace.type as IReasonType,
-                true,
-                true
-            );
-            if (container.current) {
-                embed(container.current, _vegaSpec, {
-                    actions: false,
-                    config: themeConfig
-                });
-            }
-        }
-    }, [visIndex, recSpaces, visSpaces, fields, dataSource, themeConfig]);
-
-    const FilterDesc = useMemo<React.ReactElement[]>(() => {
-        if (filters) {
-            const dimValues = Object.keys(filters)
-                .filter((k) => filters[k].length > 0)
-                .map((k, ki) => {
-                    return (
-                        <div key={`dim-${ki}`}>
-                            <div className="inline bg-gray-400 py-0.5 px-2 mx-2 rounded-full underline text-white">
-                                {formatFieldName(k, fields)}
-                            </div>
-                            <div className="inline text-lg ml-1 mr-1">=</div>
-                            <div className="inline bg-blue-600 py-0.5 px-2 mx-2 rounded-full text-white">{filters[k]}</div>
-                        </div>
-                    );
-                });
-            return dimValues;
-        }
-        return [];
-    }, [filters]);
-
-    const valueDesc = useMemo<React.ReactElement[]>(() => {
-        const meaStatus = valueExp.map((mea, mi) => (
-            <div key={`mea-${mi}`}>
-                <span className="bg-gray-400 py-0.5 px-2 mx-2 rounded-full underline text-white">
-                    {formatFieldName(mea.key, fields)}({mea.op})
-                </span>
-                <span className="bg-red-500 py-0.5 px-2 mx-2 rounded-full text-white">
-                    {mea.score === 1 ? t("explain.lg_than") : t("explain.sm_than")}
-                </span>
-                <span>{t("explain.expection")}{" "}</span>
-            </div>
-        ));
-        return meaStatus;
-    }, [valueExp]);
-
-    return (
-        <div style={{ maxHeight: "80vh", minHeight: "200px", overflowY: "auto", maxWidth: "880px" }}>
-            <div className="text-xs">{FilterDesc}</div>
-            <div className="text-xs mt-2 mb-2">{valueDesc}</div>
-            {loading && (
-                <div className="animate-spin inline-block mr-2 ml-2 w-16 h-16 rounded-full border-t-2 border-l-2 border-blue-500"></div>
-            )}
-            <div style={{ display: "flex" }}>
-                <div style={{ flexBasis: "200px", flexShrink: 0, maxHeight: "800px", overflowY: "auto" }}>
-                    <RadioGroupButtons
-                        choosenIndex={visIndex}
-                        options={recSpaces.map((s, i) => ({
-                            value: s.type || "" + i,
-                            label: `${
-                                s.type ? t(`explain.reason.${IReasonTypes[s.type]}`) : t("explain.unrecognized")
-                            }: ${s.score.toFixed(2)}`,
-                        }))}
-                        onChange={(v, i) => {
-                            setVisIndex(i);
-                        }}
-                    />
-                </div>
-                <div className="p-4 text-sm">
-                    <div ref={container}></div>
-                    {recSpaces[visIndex] && (
-                        <div>
-                            {t("constant.analytic_type.dimension")} = 
-                            {recSpaces[visIndex].dimensions.map((f) => formatFieldName(f, fields)).join(", ")}
-                            <br />
-                            {t("constant.analytic_type.measure")} = 
-                            {recSpaces[visIndex].measures
-                                .map((m) => m.key)
-                                .map((f) => formatFieldName(f, fields))
-                                .join(", ")}
-                            <br />
-                            {" " + t("explain.contains") + " "}
-                            {recSpaces[visIndex].type
-                                ? t(`explain.reason.${IReasonTypes[recSpaces[visIndex].type]}`)
-                                : t("explain.unrecognized")}{" "}
-                            ，{t("explain.score")}
-                            {recSpaces[visIndex].score}
-                            <br />
-                            {recSpaces[visIndex].description &&
-                                recSpaces[visIndex].description.intMeasures &&
-                                FilterDesc +
-                                    recSpaces[visIndex].description.intMeasures
-                                        .map(
-                                            (mea: any) =>
-                                                `${formatFieldName(mea.key, fields)}(${mea.op})}${
-                                                    mea.score === 1 ? t("explain.lg_than") : t("explain.sm_than")
-                                                }${t("explain.expection")}`
-                                        )
-                                        .join(", ")}
-                            <br />
-                            <ReactJson src={recSpaces[visIndex].description} />
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default InsightMainBoard;

package/src/insightBoard/radioGroupButtons.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const RGBContainer = styled.div`
-    font-size: 14px;
-    .option {
-        padding: 0.8em;
-        margin: 4px;
-        border: 1px solid #f0f0f0;
-        background-color: #f0f0f0;
-        cursor: pointer;
-        @media (prefers-color-scheme: dark) {
-            background-color: #000;
-            border: 1px solid #4b5563;
-        }
-    }
-    .choosen.option {
-        background-color: #fff;
-        @media (prefers-color-scheme: dark) {
-            background-color: #000;
-        }
-    }
-`;
-
-export interface RGBOption {
-    label: string;
-    value: any;
-}
-
-interface RadioGroupButtonsProps {
-    options: RGBOption[];
-    onChange?: (value: any, index: number) => void;
-    choosenIndex: number;
-}
-
-const RadioGroupButtons: React.FC<RadioGroupButtonsProps> = (props) => {
-    const { options, onChange, choosenIndex } = props;
-    return (
-        <RGBContainer>
-            {options.map((op, i) => (
-                <div
-                    key={i}
-                    className={`${choosenIndex === i ? 'choosen' : ''} option`}
-                    onClick={() => {
-                        if (onChange) {
-                            onChange(op.value, i);
-                        }
-                    }}
-                >
-                    {op.label}
-                </div>
-            ))}
-        </RGBContainer>
-    );
-};
-
-export default RadioGroupButtons;

package/src/insightBoard/selectionSpec.ts

@@ -1,113 +0,0 @@
-import { Specification } from 'visual-insights';
-import { IRow, SemanticType } from '../interfaces';
-export const geomTypeMap: { [key: string]: any } = {
-    interval: 'bar',
-    line: 'line',
-    point: 'point',
-    // density: 'rect'
-    density: 'point',
-};
-export function selectionVis(
-    query: Specification,
-    dataSource: IRow[],
-    dimensions: string[],
-    measures: string[],
-    aggregatedMeasures: Array<{ op: string; field: string; as: string }>,
-    fieldFeatures: Array<{ name: string; type: SemanticType }>,
-    defaultAggregated?: boolean,
-    defaultStack?: boolean
-) {
-    const {
-        position = [],
-        color = [],
-        size = [],
-        facets = [],
-        opacity = [],
-        geomType = [],
-        page = [],
-    } = query;
-
-    function adjustField(fieldName: string): string {
-        if (defaultAggregated && measures.includes(fieldName)) {
-            let aggField = aggregatedMeasures.find((mea) => {
-                return mea.field === fieldName;
-            });
-            return aggField ? aggField.as : fieldName;
-        }
-        return fieldName;
-    }
-
-    function getFieldType(field: string): SemanticType {
-        let targetField = fieldFeatures.find((f) => f.name === field);
-        return targetField ? targetField.type : 'nominal';
-    }
-
-    let chartWidth = 500; //container.current ? container.current.offsetWidth * 0.8 : 600;
-    const fieldMap: any = {
-        x: position[0],
-        y: position[1],
-        color: color[0],
-        size: size[0],
-        opacity: opacity[0],
-        row: facets[0],
-        column: facets[1],
-    };
-    let spec: any = {
-        width: chartWidth,
-        data: {
-            values: dataSource,
-        },
-    };
-    let basicSpec: any = {
-        width: chartWidth,
-        mark: {
-            type: geomType[0] && geomTypeMap[geomType[0]] ? geomTypeMap[geomType[0]] : geomType[0],
-            tooltip: true,
-        },
-        encoding: {},
-    };
-    for (let channel in fieldMap) {
-        if (fieldMap[channel]) {
-            basicSpec.encoding[channel] = {
-                field: adjustField(fieldMap[channel]),
-                type: getFieldType(fieldMap[channel]),
-            };
-            if (
-                ['x', 'y'].includes(channel) &&
-                getFieldType(fieldMap[channel]) === 'quantitative' &&
-                !defaultStack
-            ) {
-                basicSpec.encoding[channel].stack = null;
-            }
-        }
-    }
-    if (!defaultStack && opacity.length === 0) {
-        basicSpec.encoding.opacity = { value: 0.7 };
-    }
-    if (page.length === 0) {
-        spec = {
-            ...spec,
-            ...basicSpec,
-        };
-    } else if (page.length > 0) {
-        basicSpec.transform = [
-            { filter: { selection: 'brush' } },
-            defaultAggregated
-                ? {
-                      aggregate: aggregatedMeasures,
-                      groupby: dimensions.filter((dim) => dim !== page[0]),
-                  }
-                : null,
-        ].filter(Boolean);
-        let sliderSpec = {
-            width: chartWidth,
-            mark: 'tick',
-            selection: { brush: { encodings: ['x'], type: 'interval' } },
-            encoding: {
-                x: { field: page[0], type: getFieldType(page[0]) },
-            },
-        };
-        spec.vconcat = [basicSpec, sliderSpec];
-    }
-    return spec;
-}