@kanaries/graphic-walker 0.2.3 → 0.2.5

package/src/fields/obComponents/obPill.tsx

@@ -0,0 +1,48 @@
+import { BarsArrowDownIcon, BarsArrowUpIcon } from '@heroicons/react/24/outline';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DraggableProvided } from 'react-beautiful-dnd';
+import { COUNT_FIELD_ID } from '../../constants';
+import { IDraggableStateKey } from '../../interfaces';
+import { useGlobalStore } from '../../store';
+import { Pill } from '../components';
+import { AGGREGATOR_LIST } from '../fieldsContext';
+
+
+interface PillProps {
+    provided: DraggableProvided;
+    fIndex: number;
+    dkey: IDraggableStateKey;
+}
+const OBPill: React.FC<PillProps> = props => {
+    const { provided, dkey, fIndex } = props;
+    const { vizStore } = useGlobalStore();
+    const { visualConfig } = vizStore;
+    const field = vizStore.draggableFieldState[dkey.id][fIndex];
+    const { t } = useTranslation('translation', { keyPrefix: 'constant.aggregator' });
+
+    return <Pill
+        ref={provided.innerRef}
+        colType={field.analyticType === 'dimension' ? 'discrete' : 'continuous'}
+        {...provided.draggableProps}
+        {...provided.dragHandleProps}
+    >
+        {field.name}&nbsp;
+        {field.analyticType === 'measure' && field.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+            <select
+                className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500"
+                value={field.aggName || ''}
+                onChange={(e) => { vizStore.setFieldAggregator(dkey.id, fIndex, e.target.value) }}
+            >
+                {
+                    AGGREGATOR_LIST.map(op => <option value={op} key={op}>{t(op)}</option>)
+                }
+            </select>
+        )}
+        {field.analyticType === 'dimension' && field.sort === 'ascending' && <BarsArrowUpIcon className='float-right w-3' role="status" aria-label="Sorted in ascending order" />}
+        {field.analyticType === 'dimension' && field.sort === 'descending' && <BarsArrowDownIcon className='float-right w-3' role="status" aria-label="Sorted in descending order" />}
+    </Pill>
+}
+
+export default observer(OBPill);

package/src/fields/posFields/index.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Droppable } from "react-beautiful-dnd";
+import { useGlobalStore } from '../../store';
+import { FieldListContainer } from "../components";
+import { DRAGGABLE_STATE_KEYS } from '../fieldsContext';
+import OBFieldContainer from '../obComponents/obFContainer';
+
+const PosFields: React.FC = props => {
+    const { vizStore } = useGlobalStore();
+    const { visualConfig } = vizStore;
+    const { geoms } = visualConfig;
+
+    const channels = useMemo(() => {
+        if (geoms[0] === 'arc') {
+            return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'radius' || f.id === 'theta');
+        }
+        return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'columns' || f.id === 'rows');
+    }, [geoms[0]])
+    return <div>
+        {
+            channels.map(dkey => <FieldListContainer name={dkey.id} key={dkey.id}>
+                <Droppable droppableId={dkey.id} direction="horizontal">
+                    {(provided, snapshot) => (
+                        <OBFieldContainer dkey={dkey} provided={provided} />
+                    )}
+                </Droppable>
+            </FieldListContainer>)
+        }
+    </div>
+}
+
+export default observer(PosFields);

package/src/fields/select.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+export interface Option {
+  id: string;
+  name: string;
+}
+interface SelectProps {
+  options: Option[];
+  onChange: (value: string) => void;
+  value: string;
+}
+
+const Select: React.FC<SelectProps> = (props) => {
+  const { options = [], onChange, value } = props;
+  return (
+    <select
+      name="select-com"
+      value={value}
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+    >
+      {options.map((option) => (
+        <option key={option.id} value={option.id}>
+          {option.name}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default Select;

package/src/fields/utils.ts

@@ -0,0 +1,31 @@
+export function reorder(
+  list: any[],
+  originalIndex: number,
+  targetIndex: number
+): any[] {
+  const nextList = [...list];
+  nextList.splice(originalIndex, 1);
+  nextList.splice(targetIndex, 0, list[originalIndex]);
+  return nextList;
+}
+
+export interface movedLists {
+  originList: any[];
+  targetList: any[];
+}
+
+export function move(
+  originalList: any[],
+  originIndex: number,
+  targetList: any[],
+  targetIndex: number
+): movedLists {
+  let newOriginalList = [...originalList];
+  let [removed] = newOriginalList.splice(originIndex, 1);
+  let newTargetList = [...targetList];
+  newTargetList.splice(targetIndex, 0, removed);
+  return {
+    originList: newOriginalList,
+    targetList: newTargetList,
+  };
+}

package/src/index.css

@@ -0,0 +1,13 @@
+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/src/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import App, { EditorProps } from './App';
+import { StoreWrapper } from './store/index';
+import { FieldsContextWrapper } from './fields/fieldsContext';
+
+export const GraphicWalker: React.FC<EditorProps> = props => {
+    return <StoreWrapper>
+        <FieldsContextWrapper>
+            <App {...props} />
+        </FieldsContextWrapper>
+    </StoreWrapper>
+}

package/src/insightBoard/index.tsx

@@ -0,0 +1,30 @@
+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);
+    }, [])
+    return <div>
+        {
+            showInsightBoard && <Modal onClose={onCloseModal}>
+                <InsightMainBoard
+                    dataSource={currentDataset.dataSource}
+                    fields={toJS(draggableFieldState.fields)}
+                    viewDs={viewDimensions}
+                    viewMs={viewMeasures}
+                    filters={toJS(filters)}
+                />
+            </Modal>
+        }
+    </div>
+}
+
+export default observer(InsightBoard);

package/src/insightBoard/mainBoard.tsx

@@ -0,0 +1,203 @@
+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'
+
+const collection  = Insight.IntentionWorkerCollection.init();
+
+const ReasonTypeNames: { [key: string]: string} = {
+  'selection_dim_distribution': '维度线索',
+  'selection_mea_distribution': '度量线索',
+  'children_major_factor': '子节点主因',
+  '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 container = useRef<HTMLDivElement>(null);
+
+  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);
+      }
+    }
+  }, [visIndex, recSpaces, visSpaces, fields, dataSource])
+
+  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 p-1 rounded underline text-white">{formatFieldName(k, fields)}</div>
+            <div className="inline text-lg ml-1 mr-1">=</div>
+            <div className="inline bg-blue-600 p-1 rounded 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 p-1 rounded underline text-white">{formatFieldName(mea.key, fields)}({mea.op})</span>的取值<span className="bg-red-500 p-1 rounded text-white">{mea.score === 1 ? '大于' : '小于'}预期 </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 ? ReasonTypeNames[s.type] : '未识别'}: ${
+                              s.score.toFixed(2)
+                          }`,
+                      }))}
+                      onChange={(v, i) => {
+                          setVisIndex(i);
+                      }}
+                  />
+              </div>
+              <div className="p-4 text-sm">
+                  <div ref={container}></div>
+                  {recSpaces[visIndex] && (
+                      <div>
+                          维度是{recSpaces[visIndex].dimensions.map(f => formatFieldName(f, fields)).join(', ')}。<br />
+                          度量是{recSpaces[visIndex].measures.map((m) => m.key).map(f => formatFieldName(f, fields)).join(', ')}。<br />
+                          此时具有
+                          {recSpaces[visIndex].type
+                              ? ReasonTypeNames[recSpaces[visIndex].type!]
+                              : '未识别'}{' '}
+                          ，评分为{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 ? '大于' : '小于'
+                                              }预期`
+                                      )
+                                      .join(', ')}
+                          <br />
+                          <ReactJson src={recSpaces[visIndex].description} />
+                      </div>
+                  )}
+              </div>
+          </div>
+      </div>
+  );
+}
+
+export default InsightMainBoard;

package/src/insightBoard/radioGroupButtons.tsx

@@ -0,0 +1,50 @@
+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;
+    }
+    .choosen.option {
+        background-color: #fff;
+    }
+`;
+
+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

@@ -0,0 +1,113 @@
+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;
+}