@kanaries/graphic-walker 0.2.12 → 0.2.14

package/src/dataSource/table.tsx

@@ -1,171 +1,27 @@
-import React, { useMemo } from "react";
-import styled from "styled-components";
+import React from "react";
 import { observer } from "mobx-react-lite";
-import { IMutField } from "../interfaces";
 import { useGlobalStore } from "../store";
-import { useTranslation } from "react-i18next";
+import DataTable from "../components/dataTable";
+import { toJS } from "mobx";
 
 interface TableProps {
     size?: number;
 }
-const Container = styled.div`
-    overflow-x: auto;
-    table {
-        box-sizing: content-box;
-        border-collapse: collapse;
-        font-size: 12px;
-        thead {
-            th {
-            }
-            th.number {
-                border-top: 3px solid #5cdbd3;
-            }
-            th.text {
-                border-top: 3px solid #69c0ff;
-            }
-        }
-        tbody {
-            td {
-            }
-            td.number {
-                text-align: right;
-            }
-            td.text {
-                text-align: left;
-            }
-        }
-    }
-`;
-const ANALYTIC_TYPE_LIST = ["dimension", "measure"];
-const SEMANTIC_TYPE_LIST = ["nominal", "ordinal", "quantitative", "temporal"];
-// function getCellType(field: IMutField): 'number' | 'text' {
-//     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
-// }
-function getHeaderType(field: IMutField): "number" | "text" {
-    return field.analyticType === "dimension" ? "text" : "number";
-}
-
-function getHeaderClassNames(field: IMutField) {
-    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-teal-400";
-}
-
-function getSemanticColors(field: IMutField): string {
-    switch (field.semanticType) {
-        case "nominal":
-            return "bg-indigo-100 text-indigo-800";
-        case "ordinal":
-            return "bg-purple-100 text-purple-800"
-        case "quantitative":
-            return "bg-green-100 text-green-800"
-        case "temporal":
-            return "bg-yellow-100 text-yellow-800"
-        default:
-            return "bg-gray-400";
-    }
-}
 
 const Table: React.FC<TableProps> = (props) => {
     const { size = 10 } = props;
     const { commonStore } = useGlobalStore();
     const { tmpDSRawFields, tmpDataSource } = commonStore;
-    const { t } = useTranslation();
-
-    const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
-        return ANALYTIC_TYPE_LIST.map((at) => ({
-            value: at,
-            label: t(`constant.analytic_type.${at}`),
-        }));
-    }, []);
-
-    const semanticTypeList = useMemo<{ value: string; label: string }[]>(() => {
-        return SEMANTIC_TYPE_LIST.map((st) => ({
-            value: st,
-            label: t(`constant.semantic_type.${st}`),
-        }));
-    }, []);
 
     return (
-        <Container className="rounded border-gray-200 border">
-            <table className="min-w-full divide-y divide-gray-30">
-                <thead className="bg-gray-50">
-                    <tr className="divide-x divide-gray-200">
-                        {tmpDSRawFields.map((field, fIndex) => (
-                            <th key={field.fid} className={""}>
-                                <div
-                                    className={
-                                        getHeaderClassNames(field) +
-                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 sm:pl-6"
-                                    }
-                                >
-                                    <b>{field.name || field.fid}</b>
-                                    <div>
-                                        <select
-                                            className={
-                                                "px-2 py font-normal mt-2 rounded-full text-xs text-white " +
-                                                (field.analyticType === "dimension" ? "bg-blue-500" : "bg-teal-500")
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.analyticType}
-                                            onChange={(e) => {
-                                                commonStore.updateTempFieldAnalyticType(
-                                                    field.fid,
-                                                    e.target.value as IMutField["analyticType"]
-                                                );
-                                            }}
-                                        >
-                                            {analyticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    </div>
-                                    <div>
-                                    <select
-                                            className={
-                                                "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
-                                                getSemanticColors(field)
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.semanticType}
-                                            onChange={(e) => {
-                                                commonStore.updateTempFieldSemanticType(
-                                                    field.fid,
-                                                    e.target.value as IMutField["semanticType"]
-                                                );
-                                            }}
-                                        >
-                                            {semanticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    </div>
-                                </div>
-                            </th>
-                        ))}
-                    </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
-                    {tmpDataSource.slice(0, size).map((record, index) => (
-                        <tr className={"divide-x divide-gray-200 " + (index % 2 ? "bg-gray-50" : "")} key={index}>
-                            {tmpDSRawFields.map((field) => (
-                                <td
-                                    key={field.fid + index}
-                                    className={
-                                        getHeaderType(field) +
-                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 sm:pl-6"
-                                    }
-                                >
-                                    {record[field.fid]}
-                                </td>
-                            ))}
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </Container>
+        <DataTable
+            size={size}
+            metas={toJS(tmpDSRawFields)}
+            data={tmpDataSource}
+            onMetaChange={(fid, fIndex, diffMeta) => {
+                commonStore.updateTempDatasetMetas(fid, diffMeta);
+            }}
+        />
     );
 };
 

package/src/fields/aestheticFields.tsx

@@ -3,6 +3,7 @@ import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { DRAGGABLE_STATE_KEYS } from './fieldsContext';
 import { AestheticFieldContainer } from './components'
 import OBFieldContainer from './obComponents/obFContainer';
+import SingleEncodeEditor from './encodeFields/singleEncodeEditor';
 
 const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape'].includes(f.id));
 
@@ -12,7 +13,8 @@ const AestheticFields: React.FC = props => {
             aestheticFields.map(dkey => <AestheticFieldContainer name={dkey.id} key={dkey.id}>
                 <Droppable droppableId={dkey.id} direction="horizontal">
                     {(provided, snapshot) => (
-                        <OBFieldContainer dkey={dkey} provided={provided} />
+                        // <OBFieldContainer dkey={dkey} provided={provided} />
+                        <SingleEncodeEditor dkey={dkey} provided={provided} snapshot={snapshot} />
                     )}
                 </Droppable>
             </AestheticFieldContainer>)

package/src/fields/components.tsx

@@ -5,18 +5,25 @@ import { COLORS } from "../config";
 
 export const AestheticSegment = styled.div`
   border: 1px solid #e5e7eb;
+  // dark mode
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid #2d3748;
+  }
   font-size: 12px;
   margin: 0.2em;
 
   .aes-header{
     border-bottom: 1px solid #e5e7eb;
+    @media (prefers-color-scheme: dark) {
+      border-bottom: 1px solid #2d3748;
+    }
     padding: 0.6em;
     h4 {
       font-weight: 400;
     }
   }
   .aes-container{
-    overflow-x: auto;
+    /* overflow-x: auto; */
   }
 
 `
@@ -85,12 +92,18 @@ export const FilterFieldsContainer = styled.div({
 export const FieldListSegment = styled.div`
   display: flex;
   border: 1px solid #e5e7eb;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid #2d3748;
+  }
   margin: 0.2em;
   font-size: 12px;
   div.fl-header {
     /* flex-basis: 100px; */
     width: 100px;
     border-right: 1px solid #e5e7eb;
+    @media (prefers-color-scheme: dark) {
+      border-right: 1px solid #2d3748;
+    }
     flex-shrink: 0;
     h4 {
       margin: 0.6em;
@@ -108,11 +121,17 @@ export const FieldListSegment = styled.div`
 
 export const FilterFieldSegment = styled.div`
   border: 1px solid #e5e7eb;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid #2d3748;
+  }
   font-size: 12px;
   margin: 0.2em;
 
   .flt-header {
     border-bottom: 1px solid #e5e7eb;
+    @media (prefers-color-scheme: dark) {
+      border-bottom: 1px solid #2d3748;
+    }
     padding: 0.6em;
 
     > h4 {
@@ -144,7 +163,7 @@ export const Pill = styled.div<{colType: 'discrete' | 'continuous'}>`
   font-size: 12px;
   height: 20px;
   min-width: 150px;
-  overflow-y: hidden;
+  /* overflow-y: hidden; */
   padding: 0 10px;
   user-select: none;
   text-overflow: ellipsis;

package/src/fields/datasetFields/dimFields.tsx

@@ -1,46 +1,54 @@
-import React from 'react';
-import { Draggable, DroppableProvided } from '@kanaries/react-beautiful-dnd';
-import { observer } from 'mobx-react-lite';
-import { useGlobalStore } from '../../store';
-import DataTypeIcon from '../../components/dataTypeIcon';
-import { FieldPill } from './fieldPill';
+import React from "react";
+import { Draggable, DroppableProvided } from "@kanaries/react-beautiful-dnd";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DataTypeIcon from "../../components/dataTypeIcon";
+import { FieldPill } from "./fieldPill";
 
 interface Props {
     provided: DroppableProvided;
 }
-const DimFields: React.FC<Props> = props => {
+const DimFields: React.FC<Props> = (props) => {
     const { provided } = props;
     const { vizStore } = useGlobalStore();
     const dimensions = vizStore.draggableFieldState.dimensions;
-    return <div {...provided.droppableProps} ref={provided.innerRef}>
-        {dimensions.map((f, index) => (
-            <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
-                {(provided, snapshot) => {
-          
-                    return (
-                        <>
-                            <FieldPill
-                                className="pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full truncate border border-transparent"
-                                ref={provided.innerRef}
-                                isDragging={snapshot.isDragging}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                            >
-                                <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
-                            </FieldPill>
-                            {
-                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
-                                isDragging={snapshot.isDragging}
+    return (
+        <div {...provided.droppableProps} ref={provided.innerRef}>
+            {dimensions.map((f, index) => (
+                <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
+                    {(provided, snapshot) => {
+                        return (
+                            <>
+                                <FieldPill
+                                    className={`dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 dark:hover:bg-blue-800 rounded-full truncate border border-transparent ${
+                                        snapshot.isDragging ? "bg-blue-100 dark:bg-blue-800" : ""
+                                    }`}
+                                    ref={provided.innerRef}
+                                    isDragging={snapshot.isDragging}
+                                    {...provided.draggableProps}
+                                    {...provided.dragHandleProps}
                                 >
-                                    <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
+                                    <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}
+                                    &nbsp;
                                 </FieldPill>
-                            }
-                        </>
-                    );
-                }}
-            </Draggable>
-        ))}
-    </div>
-}
+                                {
+                                    <FieldPill
+                                        className={`dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 dark:hover:bg-blue-800 rounded-full border-blue-400 border truncate ${
+                                            snapshot.isDragging ? "bg-blue-100 dark:bg-blue-800" : "hidden"
+                                        }`}
+                                        isDragging={snapshot.isDragging}
+                                    >
+                                        <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} />{" "}
+                                        {f.name}&nbsp;
+                                    </FieldPill>
+                                }
+                            </>
+                        );
+                    }}
+                </Draggable>
+            ))}
+        </div>
+    );
+};
 
 export default observer(DimFields);

package/src/fields/datasetFields/index.tsx

@@ -16,14 +16,14 @@ const DatasetFields: React.FC = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.DatasetFields" });
 
     return (
-        <DSContainer className="border-gray-200 flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
+        <DSContainer className="border-gray-200 dark:border-gray-700 flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
             <h4 className="text-xs mb-2 flex-grow-0 cursor-default select-none mt-2">{t("field_list")}</h4>
             <div className="pd-1 overflow-y-auto" style={{ maxHeight: "380px", minHeight: '100px' }}>
                 <Droppable droppableId="dimensions" direction="vertical">
                     {(provided, snapshot) => <DimFields provided={provided} />}
                 </Droppable>
             </div>
-            <div className="border-t flex-grow pd-1 overflow-y-auto">
+            <div className="border-t dark:border-gray-800 flex-grow pd-1 overflow-y-auto">
                 <Droppable droppableId="measures" direction="vertical">
                     {(provided, snapshot) => <MeaFields provided={provided} />}
                 </Droppable>

package/src/fields/datasetFields/meaFields.tsx

@@ -1,58 +1,84 @@
-import React from 'react';
-import { Draggable, DroppableProvided } from '@kanaries/react-beautiful-dnd';
-import { observer } from 'mobx-react-lite';
-import { useGlobalStore } from '../../store';
-import DataTypeIcon from '../../components/dataTypeIcon';
-import { FieldPill } from './fieldPill';
+import React, { useCallback, useMemo } from "react";
+import { Draggable, DroppableProvided } from "@kanaries/react-beautiful-dnd";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DataTypeIcon from "../../components/dataTypeIcon";
+import { FieldPill } from "./fieldPill";
+import DropdownContext, { IDropdownContextOption } from "../../components/dropdownContext";
 
 interface Props {
     provided: DroppableProvided;
 }
-const MeaFields: React.FC<Props> = props => {
+const MeaFields: React.FC<Props> = (props) => {
     const { provided } = props;
     const { vizStore } = useGlobalStore();
     const measures = vizStore.draggableFieldState.measures;
-    return <div {...provided.droppableProps} ref={provided.innerRef}>
-        {measures.map((f, index) => (
-            <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
-                {(provided, snapshot) => {
-                    return (
-                        <>
-                            <FieldPill
-                                className="pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full truncate border border-transparent"
-                                isDragging={snapshot.isDragging}
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                            >
-                                <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
+
+    const MEA_ACTION_OPTIONS = useMemo<IDropdownContextOption[]>(() => {
+        return [
+            {
+                value: "bin",
+                label: "Bin",
+            },
+            {
+                value: "log10",
+                label: "Log10",
+            },
+        ];
+    }, []);
+
+    const fieldActionHandler = useCallback((selectedValue: any, opIndex: number, meaIndex: number) => {
+        if (selectedValue === "bin") {
+            vizStore.createBinField("measures", meaIndex);
+        } else if (selectedValue === "log10") {
+            vizStore.createLogField("measures", meaIndex);
+        }
+    }, []);
+    return (
+        <div {...provided.droppableProps} ref={provided.innerRef}>
+            {measures.map((f, index) => (
+                <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
+                    {(provided, snapshot) => {
+                        return (
+                            <div className="block">
+                                <DropdownContext
+                                    disable={snapshot.isDragging}
+                                    options={MEA_ACTION_OPTIONS}
+                                    onSelect={(v, opIndex) => {
+                                        fieldActionHandler(v, opIndex, index);
+                                    }}
+                                >
+                                    <FieldPill
+                                        className={`dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-purple-100 dark:hover:bg-purple-800 rounded-full truncate border border-transparent ${
+                                            snapshot.isDragging ? "bg-purple-100 dark:bg-purple-800" : ""
+                                        }`}
+                                        isDragging={snapshot.isDragging}
+                                        ref={provided.innerRef}
+                                        {...provided.draggableProps}
+                                        {...provided.dragHandleProps}
+                                    >
+                                        <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} />{" "}
+                                        {f.name}&nbsp;
+                                    </FieldPill>
+                                </DropdownContext>
                                 {
-                                    f.fid && !snapshot.isDragging && <select className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500" value="" onChange={e => {
-                                        if (e.target.value === 'bin') {
-                                            vizStore.createBinField('measures', index)
-                                        } else if (e.target.value === 'log10') {
-                                            vizStore.createLogField('measures', index)
-                                        }
-                                    }}>
-                                        <option value=""></option>
-                                        <option value="bin">bin</option>
-                                        <option value="log10">log10</option>
-                                    </select>
+                                    <FieldPill
+                                        className={`dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-purple-100 dark:hover:bg-purple-800 rounded-full border-purple-400 border truncate ${
+                                            snapshot.isDragging ? "bg-purple-100 dark:bg-purple-800" : "hidden"
+                                        }`}
+                                        isDragging={snapshot.isDragging}
+                                    >
+                                        <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} />{" "}
+                                        {f.name}&nbsp;
+                                    </FieldPill>
                                 }
-                            </FieldPill>
-                            {
-                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
-                                    isDragging={snapshot.isDragging}
-                                >
-                                    <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
-                                </FieldPill>
-                            }
-                        </>
-                    );
-                }}
-            </Draggable>
-        ))}
-    </div>
-}
+                            </div>
+                        );
+                    }}
+                </Draggable>
+            ))}
+        </div>
+    );
+};
 
 export default observer(MeaFields);

package/src/fields/encodeFields/singleEncodeDropDown.tsx

@@ -0,0 +1,92 @@
+import React, { Fragment } from "react";
+import { Listbox, Menu, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export interface IDropdownSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IDropdownSelectProps {
+    options?: IDropdownSelectOption[];
+    disable?: boolean;
+    selectedKey: string;
+    onSelect?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    buttonClassName?: string;
+}
+const DropdownSelect: React.FC<IDropdownSelectProps> = (props) => {
+    const { options = [], disable, selectedKey, onSelect, placeholder = "Select an option", className, buttonClassName } = props;
+
+    const selectedItem = options.find((op) => op.value === selectedKey);
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+    let rootClassName = "flex truncate";
+    let btnComputedClassName = "grow shrink relative cursor-default text-xs rounded-lg bg-white dark:bg-zinc-900  px-2.5 py-1.5 pr-10 text-left border border-gray-200 focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 truncate"
+    if (buttonClassName) {
+        btnComputedClassName = btnComputedClassName + " " + buttonClassName;
+    }
+    if (className) {
+        rootClassName = rootClassName + " " + className;
+    }
+    return (
+        <Listbox
+            value={selectedKey}
+            onChange={(newKey) => {
+                onSelect && onSelect(newKey);
+            }}
+        >
+            <div className={rootClassName}>
+                <Listbox.Button className={btnComputedClassName}>
+                    <span className="block truncate">{selectedItem?.label || ""}</span>
+                    { selectedItem === undefined && <span className="block truncate text-gray-400">{placeholder}</span>}
+                    <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    </span>
+                </Listbox.Button>
+                <Transition
+                    as={Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <Listbox.Options className="absolute z-50 mt-8 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-900  py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        {options.map((op, opIndex) => (
+                            <Listbox.Option
+                                key={op.value}
+                                className={({ active }) =>
+                                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                                        active ? "bg-amber-100 text-amber-900 dark:bg-amber-800 dark:text-amber-50" : "text-gray-900 dark:text-amber-50"
+                                    }`
+                                }
+                                value={op.value}
+                            >
+                                {({ selected }) => (
+                                    <>
+                                        <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
+                                            {op.label}
+                                        </span>
+                                        {selected && (
+                                            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                            </span>
+                                        )}
+                                    </>
+                                )}
+                            </Listbox.Option>
+                        ))}
+                    </Listbox.Options>
+                </Transition>
+            </div>
+        </Listbox>
+    );
+};
+
+export default DropdownSelect;