@kanaries/graphic-walker 0.2.13 → 0.2.14

package/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+import { IDraggableStateKey } from "../../interfaces";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DropdownSelect from "./singleEncodeDropDown";
+import { DroppableProvided } from "react-beautiful-dnd";
+import { ChevronUpDownIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { useTranslation } from "react-i18next";
+import { COUNT_FIELD_ID } from "../../constants";
+import DropdownContext from "../../components/dropdownContext";
+import { AGGREGATOR_LIST } from "../fieldsContext";
+import { Draggable, DroppableStateSnapshot } from "@kanaries/react-beautiful-dnd";
+
+interface SingleEncodeEditorProps {
+    dkey: IDraggableStateKey;
+    provided: DroppableProvided;
+    snapshot: DroppableStateSnapshot;
+}
+const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
+    const { dkey, provided, snapshot } = props;
+    const { vizStore } = useGlobalStore();
+    const { draggableFieldState, visualConfig } = vizStore;
+    const channelItem = draggableFieldState[dkey.id][0];
+    const { t } = useTranslation();
+
+    const aggregationOptions = useMemo(() => {
+        return AGGREGATOR_LIST.map((op) => ({
+            value: op,
+            label: t(`constant.aggregator.${op}`),
+        }));
+    }, []);
+
+    return (
+        <div className="p-1 select-none relative" {...provided.droppableProps} ref={provided.innerRef}>
+            <div className={`p-1.5 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 flex item-center justify-center grow text-gray-500 dark:text-gray-400 ${snapshot.draggingFromThisWith || snapshot.isDraggingOver || !channelItem ? 'opacity-100' : 'opacity-0'} relative z-0`}>
+                {t('actions.drop_field')}
+            </div>
+            {channelItem && (
+                <Draggable key={channelItem.dragId} draggableId={channelItem.dragId} index={0}>
+                    {(provided, snapshot) => {
+                        return (
+                            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} className="flex items-stretch absolute z-10 top-0 left-0 right-0 bottom-0 m-1">
+                                <div
+                                    onClick={() => {
+                                        vizStore.removeField(dkey.id, 0);
+                                    }}
+                                    className="grow-0 shrink-0 px-1.5 flex items-center justify-center bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 cursor-pointer"
+                                >
+                                    <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">
+                                    <span className="flex-1 truncate">
+                                        {channelItem.name}
+                                    </span>
+                                    {channelItem.analyticType === "measure" && channelItem.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+                                        <DropdownContext
+                                            options={aggregationOptions}
+                                            onSelect={(value) => {
+                                                vizStore.setFieldAggregator(dkey.id, 0, value);
+                                            }}
+                                        >
+                                            <span className="bg-transparent text-gray-700 dark:text-gray-200 float-right focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 flex items-center ml-2">
+                                                {channelItem.aggName || ""}
+                                                <ChevronUpDownIcon className="w-3" />
+                                            </span>
+                                        </DropdownContext>
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    }}
+                </Draggable>
+            )}
+        </div>
+    );
+};
+
+export default observer(SingleEncodeEditor);

package/src/fields/filterField/filterEditDialog.tsx

@@ -109,13 +109,14 @@ const FilterEditDialog: React.FC = observer(() => {
     
     return uncontrolledField ? (
         <Modal
+            show={Boolean(uncontrolledField)}
             title={t('editing')}
             onClose={() => vizStore.closeFilterEditing()}
         >
             <header className="text-lg font-semibold py-2 outline-none">
                 {t('form.name')}
             </header>
-            <input className="border py-1 px-4" readOnly value={uncontrolledField.name}/>
+            <input className="border py-1 px-4 bg-white text-gray-800" readOnly value={uncontrolledField.name}/>
             <header className="text-lg font-semibold py-2 outline-none">
                 {t('form.rule')}
             </header>

package/src/fields/filterField/filterPill.tsx

@@ -73,7 +73,7 @@ const FilterPill: React.FC<FilterPillProps> = observer(props => {
                 {field.name}
             </header>
             <div
-                className="bg-white text-gray-500 hover:bg-gray-100 flex flex-row output"
+                className="bg-white dark:bg-zinc-900  text-gray-500 hover:bg-gray-100 flex flex-row output"
                 onClick={() => vizStore.setFilterEditing(fIndex)}
                 style={{ cursor: 'pointer' }}
                 title={t('to_edit')}

package/src/fields/filterField/slider.tsx

@@ -197,7 +197,7 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
                         tabIndex={-1}
                         onMouseDown={ev => {
                             if (ev.buttons === 1) {
-                                mouseOffsetRef.current = ev.nativeEvent.offsetX;
+                                mouseOffsetRef.current = ev.nativeEvent.offsetX - (ev.target as HTMLDivElement).getBoundingClientRect().width;
                                 setDragging('left');
                             }
                         }}

package/src/fields/filterField/tabs.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import type { IFilterField, IFilterRule } from '../../interfaces';
 import { useGlobalStore } from '../../store';
+import PureTabs from '../../components/tabs/defaultTab';
 import Slider from './slider';
 
 
@@ -368,27 +369,16 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
 
     return (
         <TabsContainer>
-            <TabList role="tablist">
-                {
-                    tabs.map((tab, i) => (
-                        <TabHeader
-                            key={i}
-                            role="tab"
-                            aria-selected={which === tab}
-                            id={`filter-tab-${tab.replaceAll(/ /g, '_')}`}
-                            aria-controls={`filter-panel-${tab.replaceAll(/ /g, '_')}`}
-                            tabIndex={-1}
-                            onClick={() => {
-                                if (which !== tab) {
-                                    setWhich(tab);
-                                }
-                            }}
-                        >
-                            {t(tab.replaceAll(/ /g, '_'))}
-                        </TabHeader>
-                    ))
-                }
-            </TabList>
+            <PureTabs
+                selectedKey={which}
+                tabs={tabs.map(tab => ({
+                    key: tab,
+                    label: t(tab.replaceAll(/ /g, '_')),
+                }))}
+                onSelected={sk => {
+                    setWhich(sk as typeof which);
+                }}
+            />
             <TabPanel>
                 {
                     tabs.map((tab, i) => {

package/src/fields/obComponents/obPill.tsx

@@ -1,48 +1,78 @@
-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 '@kanaries/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';
-
+import { BarsArrowDownIcon, BarsArrowUpIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import { observer } from "mobx-react-lite";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { DraggableProvided } from "@kanaries/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";
+import DropdownContext from "../../components/dropdownContext";
 
 interface PillProps {
     provided: DraggableProvided;
     fIndex: number;
     dkey: IDraggableStateKey;
 }
-const OBPill: React.FC<PillProps> = props => {
+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' });
+    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>
-}
+    const aggregationOptions = useMemo(() => {
+        return AGGREGATOR_LIST.map((op) => ({
+            value: op,
+            label: t(op),
+        }));
+    }, []);
+
+    return (
+        <Pill
+            ref={provided.innerRef}
+            colType={field.analyticType === "dimension" ? "discrete" : "continuous"}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+        >
+            <span className="flex-1 truncate">{field.name}</span>&nbsp;
+            {field.analyticType === "measure" && field.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+                <DropdownContext
+                    options={aggregationOptions}
+                    onSelect={(value) => {
+                        vizStore.setFieldAggregator(dkey.id, fIndex, value);
+                    }}
+                >
+                    <span className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 flex items-center ml-2">
+                        {field.aggName || ""}
+                        <ChevronUpDownIcon className="w-3" />
+                    </span>
+                </DropdownContext>
+            )}
+            {/* {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 className="inline" 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/index.css

@@ -1,9 +1,22 @@
+html{
+  margin: 0px;
+  padding: 0px;
+  background-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: rgb(24 24 27);
+  }
+}
 body {
   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;
+  margin: 0px;
+  padding: 0px;
 }
 
 code {

package/src/insightBoard/index.tsx

@@ -1,30 +1,31 @@
-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';
+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 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>
-}
+    }, []);
+    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);
+export default observer(InsightBoard);

package/src/insightBoard/radioGroupButtons.tsx

@@ -9,9 +9,16 @@ const RGBContainer = styled.div`
         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;
+        }
     }
 `;
 

package/src/interfaces.ts

@@ -119,6 +119,7 @@ export interface DraggableFieldState {
     shape: IViewField[];
     theta: IViewField[];
     radius: IViewField[];
+    details: IViewField[];
     filters: IFilterField[];
 }
 

package/src/lib/inferMeta.ts

@@ -53,7 +53,7 @@ function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyt
 export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
     let st = UnivariateSummary.getFieldType(data, fid);
     if (st === 'nominal') {
-        if (isDateTimeArray(data.map((row) => row[fid]))) st = 'temporal';
+        if (isDateTimeArray(data.map((row) => `${row[fid]}`))) st = 'temporal';
     } else if (st === 'ordinal') {
         const valueSet: Set<number> = new Set();
         let _max = -Infinity;

package/src/locales/en-US.json

@@ -50,8 +50,8 @@
         },
         "draggable_key": {
             "fields": "Fields",
-            "columns": "Columns",
-            "rows": "Rows",
+            "columns": "X-Axis",
+            "rows": "Y-Axis",
             "color": "Color",
             "opacity": "Opacity",
             "size": "Size",
@@ -105,7 +105,9 @@
             "file": {
                 "open": "Open...",
                 "submit": "Submit",
-                "dataset_name": "Dataset Name"
+                "dataset_name": "Dataset Name",
+                "choose_file": "Choose a Data File",
+                "get_start_desc": "Get started by creating a dataset."
             },
             "public": {
                 "submit": "Submit"
@@ -184,6 +186,7 @@
     },
     "actions": {
         "prev": "Previous",
-        "next": "Next"
+        "next": "Next",
+        "drop_field": "Drop Field Here"
     }
 }

package/src/locales/zh-CN.json

@@ -105,7 +105,9 @@
             "file": {
                 "open": "打开文件...",
                 "submit": "确认",
-                "dataset_name": "数据集名称"
+                "dataset_name": "数据集名称",
+                "choose_file": "选择文件",
+                "get_start_desc": "创建一个数据集以开始分析"
             },
             "public": {
                 "submit": "确认"
@@ -184,6 +186,7 @@
     },
     "actions": {
         "prev": "向前",
-        "next": "向后"
+        "next": "向后",
+        "drop_field": "拖拽字段至此"
     }
 }

package/src/main.tsx

@@ -9,7 +9,7 @@ inject();
 
 ReactDOM.render(
     <React.StrictMode>
-        <GraphicWalker />
+        <GraphicWalker themeKey="g2" />
     </React.StrictMode>,
     document.getElementById("root")
 );

package/src/renderer/index.tsx

@@ -7,7 +7,7 @@ import { useGlobalStore } from '../store';
 import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
 
 
-const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRenderer (props, ref) {
+const ReactiveRenderer = forwardRef<IReactVegaHandler, { themeKey?: 'vega' | 'g2' }>(function ReactiveRenderer ({ themeKey }, ref) {
     const { vizStore, commonStore } = useGlobalStore();
     const { draggableFieldState, visualConfig } = vizStore;
     const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
@@ -105,6 +105,7 @@ const ReactiveRenderer = forwardRef<IReactVegaHandler, {}>(function ReactiveRend
         brushEncoding={exploration.mode === 'brush' ? exploration.brushDirection : 'none'}
         selectEncoding={exploration.mode === 'point' ? 'default' : 'none'}
         onGeomClick={handleGeomClick}
+        themeKey={themeKey}
     />
     </Resizable>
 });

package/src/store/visualSpecStore.ts

@@ -53,6 +53,7 @@ function initEncoding(): DraggableFieldState {
         shape: [],
         radius: [],
         theta: [],
+        details: [],
         filters: [],
     };
 }
@@ -444,6 +445,21 @@ export class VizSpecStore {
             fields.splice(sourceIndex, 1);
         });
     }
+    public replaceField(sourceKey: keyof DraggableFieldState, sourceIndex: number, fid: string) {
+        if (MetaFieldKeys.includes(sourceKey)) return;
+        const enteringField = [
+            ...this.draggableFieldState.dimensions,
+            ...this.draggableFieldState.measures
+        ].find(which => which.fid === fid);
+        if (!enteringField) {
+            return;
+        }
+
+        this.useMutable(({ encodings }) => {
+            const fields = encodings[sourceKey];
+            fields.splice(sourceIndex, 1, toJS(enteringField));
+        });
+    }
     private appendFilter(index: number, data: IViewField) {
         this.useMutable(({ encodings }) => {
             encodings.filters.splice(index, 0, {

package/src/utils/index.ts

@@ -258,3 +258,22 @@ export function extendCountField(
         fields: nextFields,
     };
 }
+
+export function getRange (nums: number[]): [number, number] {
+    let _min = Infinity;
+    let _max = -Infinity;
+    for (let i = 0; i < nums.length; i++) {
+        _min = Math.min(_min, nums[i]);
+        _max = Math.max(_max, nums[i]);
+    }
+    return [_min, _max];
+}
+
+export function makeNumbersBeautiful (nums: number[]): number[] {
+    const [min, max] = getRange(nums);
+    const range = max - min;
+    const step = Math.pow(10, Math.floor(Math.log10(range)));
+    return nums.map((num) => {
+        return Math.round(num / step) * step;
+    })
+}

package/src/utils/media.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export function currentMediaTheme(): "dark" | "light" {
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+    } else {
+        return "light";
+    }
+}
+
+export function useCurrentMediaTheme(): "dark" | "light" {
+    const [theme, setTheme] = useState<"dark" | "light">(currentMediaTheme());
+
+    useEffect(() => {
+        const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)") as MediaQueryList | undefined;
+        const listener = (e: MediaQueryListEvent) => {
+            setTheme(e.matches ? "dark" : "light");
+        };
+        mediaQuery?.addEventListener("change", listener);
+        return () => {
+            mediaQuery?.removeEventListener("change", listener);
+        };
+    }, []);
+
+    return theme;
+}

package/src/utils/normalization.ts

@@ -140,12 +140,13 @@ export function makeBinField(dataSource: IRow[], fid: string, binFid: string, bi
         if (val < _min) _min = val;
     }
     const step = (_max - _min) / binSize;
+    const beaStep = Math.max(-Math.round(Math.log10(_max - _min)) + 2, 0)
     return dataSource.map((r) => {
         let bIndex = Math.floor((r[fid] - _min) / step);
         if (bIndex === binSize) bIndex = binSize - 1;
         return {
             ...r,
-            [binFid]: bIndex * step + _min,
+            [binFid]: Number(((bIndex * step + _min)).toFixed(beaStep)),
         };
     });
 }