@kanaries/graphic-walker 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -10,7 +10,8 @@
     "type": "tsc src/lib.ts --declaration --emitDeclarationOnly --jsx react --esModuleInterop --outDir dist"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "license": "AGPL",
   "main": "./dist/graphic-walker.umd.js",

package/src/App.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import { Specification } from 'visual-insights';
+import { observer } from 'mobx-react-lite';
+import { LightBulbIcon } from '@heroicons/react/24/outline'
+import { toJS } from 'mobx';
+import { useTranslation } from 'react-i18next';
+import { IMutField, IRow } from './interfaces';
+import VisualSettings from './visualSettings';
+import { Container, NestContainer } from './components/container';
+import ClickMenu from './components/clickMenu';
+import InsightBoard from './insightBoard/index';
+import PosFields from './fields/posFields';
+import AestheticFields from './fields/aestheticFields';
+import DatasetFields from './fields/datasetFields/index';
+import ReactiveRenderer from './renderer/index';
+import DataSourceSegment from './dataSource/index';
+import { useGlobalStore } from './store';
+import { preAnalysis, destroyWorker } from './services'
+import VisNav from './segments/visNav';
+import { mergeLocaleRes, setLocaleLanguage } from './locales/i18n';
+import Menubar from './visualSettings/menubar';
+import FilterField from './fields/filterField';
+import "tailwindcss/tailwind.css"
+import './index.css'
+
+
+export interface EditorProps {
+	dataSource?: IRow[];
+	rawFields?: IMutField[];
+	spec?: Specification;
+	hideDataSourceConfig?: boolean;
+	i18nLang?: string;
+	i18nResources?: { [lang: string]: Record<string, string | any> };
+	keepAlive?: boolean;
+}
+
+const App: React.FC<EditorProps> = props => {
+	const { dataSource = [], rawFields = [], spec, i18nLang = 'en-US', i18nResources, hideDataSourceConfig } = props;
+	const { commonStore, vizStore } = useGlobalStore();
+	const [insightReady, setInsightReady] = useState<boolean>(true);
+
+	const { currentDataset, datasets, vizEmbededMenu } = commonStore;
+
+	const { t, i18n } = useTranslation();
+	const curLang = i18n.language;
+
+	useEffect(() => {
+		if (i18nResources) {
+			mergeLocaleRes(i18nResources);
+		}
+	}, [i18nResources]);
+
+	useEffect(() => {
+		if (i18nLang !== curLang) {
+			setLocaleLanguage(i18nLang);
+		}
+	}, [i18nLang, curLang]);
+
+	// use as an embeding module, use outside datasource from props.
+	useEffect(() => {
+		if (dataSource.length > 0) {
+			commonStore.addAndUseDS({
+				name: 'context dataset',
+				dataSource: dataSource,
+				rawFields
+			})
+		}
+	}, [dataSource, rawFields])
+
+	// do preparation analysis work when using a new dataset
+	useEffect(() => {
+		const ds = currentDataset;
+		if (ds && ds.dataSource.length > 0 && ds.rawFields.length > 0) {
+			setInsightReady(false)
+			preAnalysis({
+				dataSource: ds.dataSource,
+				fields: toJS(ds.rawFields)
+			}).then(() => {
+				setInsightReady(true);
+
+				if (spec) {
+					vizStore.renderSpec(spec);
+				}
+			})
+		}
+		return () => {
+			destroyWorker();
+		}
+	}, [currentDataset, spec]);
+
+	return (
+		<div className="App">
+			{ !hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
+			<div className='px-2 mx-2'>
+				<VisNav />
+				{/* <PureTabs tabs={[{label: 'a', key: 'a'}, {label: 'b', key: 'b'}]} selectedKey='a' onSelected={() => {}} /> */}
+			</div>
+			<Container style={{ marginTop: '0em', borderTop: 'none' }}>
+				<Menubar />
+				<VisualSettings />
+				<div className="grid grid-cols-12 xl:grid-cols-6">
+					<div className="col-span-3 xl:col-span-1">
+						<DatasetFields />
+					</div>
+					<div className="col-span-2 xl:col-span-1">
+						<FilterField />
+						<AestheticFields />
+					</div>
+					<div className="col-span-7 xl:col-span-4">
+						<div>
+							<PosFields />
+						</div>
+						<NestContainer style={{ minHeight: '600px', overflow: 'auto' }} onMouseLeave={() => {
+							vizEmbededMenu.show && commonStore.closeEmbededMenu();
+						}}>
+							{datasets.length > 0 && <ReactiveRenderer />}
+							<InsightBoard />
+							{vizEmbededMenu.show && (
+								<ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
+									<div className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100"
+										onClick={() => {
+											commonStore.closeEmbededMenu();
+											commonStore.setShowInsightBoard(true)
+										}}
+									>
+										<span className="flex-1 pr-2">
+											{t('App.labels.data_interpretation')}
+										</span>
+										<LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
+									</div>
+								</ClickMenu>
+							)}
+						</NestContainer>
+					</div>
+				</div>
+			</Container>
+		</div>
+	)
+}
+
+export default observer(App);

package/src/components/clickMenu.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const MenuContainer = styled.div`
+    min-width: 100px;
+    background-color: #fff;
+    border: 1px solid #f0f0f0;
+    position: absolute;
+    z-index: 99;
+    cursor: pointer;
+    /* box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.09); */
+    /* border-radius: 2px; */
+    padding: 4px;
+`;
+interface ClickMenuProps {
+    x: number;
+    y: number;
+}
+
+const ClickMenu: React.FC<ClickMenuProps> = props => {
+    const { x, y, children } = props
+    return <MenuContainer className="shadow-lg text-sm" style={{ left: x + 'px', top: y + 'px' }}>
+        {
+            children
+        }
+    </MenuContainer>
+}
+
+export default ClickMenu;

package/src/components/container.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    border: 1px solid #d9d9d9;
+    padding: 1em;
+    margin: 1em;
+    background-color: #fff;
+`;
+
+export const NestContainer = styled.div`
+    border: 1px solid #d9d9d9;
+    padding: 0.4em;
+    font-size: 12px;
+    margin: 0.2em;
+    background-color: #fff;
+`

package/src/components/dataTypeIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IMutField } from "../interfaces";
+import { DocumentTextIcon, HashtagIcon, CalendarIcon } from '@heroicons/react/24/outline';
+
+const DataTypeIcon: React.FC<{dataType: IMutField['semanticType']; analyticType: IMutField['analyticType']}> = props => {
+    const { dataType, analyticType } = props;
+    const color = analyticType === 'dimension' ? 'text-blue-500' : 'text-green-500'
+    const iconClassName = `w-3 inline-block mr-0.5 ${color}`
+    switch (dataType) {
+        case 'quantitative':
+        case 'ordinal':
+            return <HashtagIcon className={iconClassName} />
+        case 'temporal':
+            return <CalendarIcon className={iconClassName} />
+        default:
+            return <DocumentTextIcon className={iconClassName} />
+    }
+}
+
+export default DataTypeIcon;

package/src/components/liteForm.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const LiteForm = styled.div`
+  display: flex;
+  align-items: center;
+  .item{
+    margin: 5px 8px;
+    display: flex;
+    align-items: center;
+    >label {
+      margin-right: 4px;
+      line-height: 20px;
+      font-size: 12px;
+    }
+  }
+`;

package/src/components/modal.tsx

@@ -0,0 +1,85 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+
+
+const Background = styled.div({
+  position: 'fixed',
+  left: 0,
+  top: 0,
+  width: '100vw',
+  height: '100vh',
+  backdropFilter: 'blur(1px)',
+  zIndex: 25535,
+});
+
+const Container = styled.div`
+  width: 880px;
+  max-height: 800px;
+  overflow: auto;
+  > div.header {
+    background-color: #f0f0f0;
+    display: flex;
+    padding: 12px;
+    font-size: 14px;
+    align-items: center;
+  }
+  > div.container {
+    padding: 1em;
+  }
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  /* box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.19); */
+  border-radius: 4px;
+  z-index: 999;
+`;
+interface ModalProps {
+  onClose?: () => void
+  title?: string;
+}
+const Modal: React.FC<ModalProps> = props => {
+  const { onClose, title } = props;
+  const prevMouseDownTimeRef = useRef(0);
+
+  return (
+    <Background
+      // This is a safer replacement of onClick handler.
+      // onClick also happens if the click event is begun by pressing mouse button
+      // at a different element and then released when the mouse is moved on the target element.
+      // This case is required to be prevented, especially disturbing when interacting
+      // with a Slider component.
+      onMouseDown={() => prevMouseDownTimeRef.current = Date.now()}
+      onMouseOut={() => prevMouseDownTimeRef.current = 0}
+      onMouseUp={() => {
+        if (Date.now() - prevMouseDownTimeRef.current < 1000) {
+          onClose?.();
+        }
+      }}
+    >
+      <Container
+        role="dialog"
+        className="shadow-lg"
+        onMouseDown={e => e.stopPropagation()}
+      >
+        <div className="header relative h-9">
+          <header className="font-bold">
+            {title}
+          </header>
+          <XCircleIcon
+            className="text-red-600 absolute right-2 w-6 cursor-pointer"
+            role="button"
+            tabIndex={0}
+            aria-label="close dialog"
+            onClick={onClose}
+          />
+        </div>
+        <div className="container">{props.children}</div>
+      </Container>
+    </Background>
+  );
+}
+
+export default Modal;

package/src/components/sizeSetting.tsx

@@ -0,0 +1,95 @@
+import { ArrowsPointingOutIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import React, { useState, useEffect } from "react";
+import { useTranslation } from 'react-i18next';
+
+
+interface SizeSettingProps {
+    onWidthChange: (val: number) => void;
+    onHeightChange: (val: number) => void;
+    width: number;
+    height: number;
+}
+
+const SizeSetting: React.FC<SizeSettingProps> = props => {
+    const { onWidthChange, onHeightChange, width, height } = props
+    const [show, setShow] = useState<boolean>(false);
+    const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings.size_setting' });
+
+    useEffect(() => {
+        if (show) {
+            const closeDialog = () => {
+                setShow(false);
+            };
+
+            document.body.addEventListener('click', closeDialog);
+
+            return () => {
+                document.body.removeEventListener('click', closeDialog);
+            };
+        }
+    }, [show]);
+
+    return <div className="leading-none cursor-pointer"> 
+        <ArrowsPointingOutIcon
+            role="button"
+            id="button:size_setting"
+            aria-describedby="button:size_setting:label"
+            tabIndex={0}
+            aria-haspopup="dialog"
+            onClick={() => {
+                setShow(v => !v)
+            }}
+            className="w-4 h-4 inline-block mr-0.5 text-gray-900"
+        />
+        {
+            show && <div role="dialog" className="absolute z-auto bg-white p-4 border border-gray-200 shadow cursor-default" onClick={e => e.stopPropagation()} style={{ zIndex: 25535 }}>
+                <div>
+                    <XMarkIcon
+                        className="text-gray-900 absolute right-2 top-2 w-4 cursor-pointer hover:bg-red-100"
+                        role="button"
+                        tabIndex={0}
+                        aria-label="close"
+                        onClick={(e) => {
+                            setShow(false);
+                            e.stopPropagation();
+                        }}
+                    />
+                </div>
+                
+                <div className="mt-4 w-60">
+                    <input className="w-full h-2 bg-blue-100 appearance-none"
+                        style={{ cursor: 'ew-resize' }}
+                        type="range"
+                        name="width"
+                        value={Math.sqrt(width / 1000)}
+                        min="0" max="1" step="0.01"
+                        onChange={(e) => {
+                            onWidthChange(Math.round(Number(e.target.value) ** 2 * 1000))
+                        }}
+                    />
+                    <output className="text-sm ml-1" htmlFor="width">
+                        {`${t('width')}: ${width}`}
+                    </output>
+                </div>
+                <div className=" mt-2">
+                    <input className="w-full h-2 bg-blue-100 appearance-none"
+                        style={{ cursor: 'ew-resize' }}
+                        type="range"
+                        name="height"
+                        value={Math.sqrt(height / 1000)}
+                        min="0" max="1" step="0.01"
+                        onChange={(e) => {
+                            onHeightChange(Math.round(Number(e.target.value) ** 2 * 1000))
+                        }}
+                    />
+                    <output className="text-sm ml-1" htmlFor="height">
+                        {`${t('height')}: ${height}`}
+                    </output>
+                </div>
+                
+            </div>
+        }
+    </div>
+}
+
+export default SizeSetting;

package/src/components/tabs/pureTab.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
+}
+
+export interface ITabOption {
+    label: string;
+    key: string;
+    options?: Record<string, any>;
+}
+interface PureTabsProps {
+    tabs: ITabOption[];
+    selectedKey: string;
+    onSelected: (selectedKey: string, index: number) => void;
+    allowEdit?: boolean;
+    onEditLabel?: (label: string, index: number) => void;
+}
+export default function PureTabs(props: PureTabsProps) {
+    const { tabs, selectedKey, onSelected, allowEdit, onEditLabel } = props;
+    const [editList, setEditList] = useState<boolean[]>([]);
+    const { t } = useTranslation();
+
+    const clearEditStatus = useCallback(() => {
+        setEditList(new Array(tabs.length).fill(false))
+    }, [tabs.length]);
+    
+    useEffect(() => {
+        clearEditStatus
+    }, [clearEditStatus]);
+
+    return (
+        <div className="border-b border-gray-200 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
+            <nav className="-mb-px flex h-8 border-gray-300 border-l" role="tablist" aria-label="Tabs">
+                {tabs.map((tab, tabIndex) => (
+                    <span
+                        role="tab"
+                        tabIndex={0}
+                        dangerouslySetInnerHTML={{
+                            __html: t(tab.label, tab.options)
+                        }}
+                        onClick={() => {
+                            onSelected(tab.key, tabIndex)
+                        }}
+                        onDoubleClick={() => {
+                            setEditList(v => {
+                                const nv = [...v];
+                                nv[tabIndex] = true;
+                                return nv
+                            })
+                        }}
+                        contentEditable={editList[tabIndex]}
+                        onInput={(e) => {
+                            onEditLabel && onEditLabel(`${e.currentTarget.textContent}`, tabIndex)
+                        }}
+                        key={tab.key}
+                        className={classNames(
+                            tab.key === selectedKey
+                                ? "border-transparent text-black bg-gray-100"
+                                : "text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                            "whitespace-nowrap border-gray-300 py-1 px-2 border-t border-r border-b pr-6 text-sm cursor-pointer"
+                        )}
+                    />
+                ))}
+            </nav>
+        </div>
+    );
+}

package/src/config.ts

@@ -0,0 +1,57 @@
+import { DraggableFieldState, IStackMode } from "./interfaces";
+
+export const GEMO_TYPES: Readonly<string[]> = [
+    'auto',
+    'bar',
+    'line',
+    'area',
+    'trail',
+    'point',
+    'circle',
+    'tick',
+    'rect',
+    'arc',
+    'boxplot',
+] as const;
+
+export const STACK_MODE: Readonly<IStackMode[]> = [
+    'none',
+    'stack',
+    'normalize'
+]
+
+export const CHART_LAYOUT_TYPE: Readonly<string[]> = [
+    'auto',
+    'fixed',
+] as const;
+
+export const COLORS = {
+    // tableau style
+    // dimension: 'rgb(73, 150, 178)',
+    // measure: 'rgb(0, 177, 128)',
+    // dimension: 'rgb(86, 170, 208)',
+    // measure: 'rgb(232, 149, 72)'
+    dimension: 'rgba(0, 0, 0, 0.9)',
+    measure: 'rgba(10, 0, 0, 0.6)',
+    black: '#141414',
+    white: '#fafafa'
+}
+
+export const MAX_HISTORY_SIZE = 20;
+
+export const CHANNEL_LIMIT = {
+    rows: Infinity,
+    columns: Infinity,
+    color: 1,
+    opacity: 1,
+    size: 1,
+    shape: 1,
+    theta: 1,
+    radius: 1
+}
+
+export const MetaFieldKeys: Array<keyof DraggableFieldState> = [
+    'dimensions',
+    'measures',
+    'fields'
+]

package/src/constants.ts

@@ -0,0 +1 @@
+export const COUNT_FIELD_ID = 'gw_count_fid';

package/src/dataSource/config.ts

@@ -0,0 +1,62 @@
+export const DemoDataAssets = process.env.NODE_ENV === 'production' ? {
+    CARS: "https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-cars-service.json",
+    STUDENTS: "https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-students-service.json",
+    BTC_GOLD: "https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds_btc_gold_service.json",
+    BIKE_SHARING: 'https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-bikesharing-service.json',
+    CAR_SALES: 'https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-carsales-service.json',
+    COLLAGE: 'https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-collage-service.json',
+    TITANIC: 'https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-titanic-service.json',
+    KELPER: 'https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-kelper-service.json',
+} : {
+    // CARS: "https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-cars-service.json",
+    CARS: "/datasets/ds-cars-service.json",
+    // STUDENTS: "https://chspace.oss-cn-hongkong.aliyuncs.com/datasets/ds-students-service.json",
+    STUDENTS: "/datasets/ds-students-service.json",
+    BTC_GOLD: "/datasets/ds_btc_gold_service.json",
+    BIKE_SHARING: '/datasets/ds-bikesharing-service.json',
+    CAR_SALES: '/datasets/ds-carsales-service.json',
+    COLLAGE: '/datasets/ds-collage-service.json',
+    TITANIC: '/datasets/ds-titanic-service.json',
+    KELPER: '/datasets/ds-kelper-service.json',
+} as const;
+
+interface IPublicData {
+    key: string;
+    title: string;
+    desc?: string;
+}
+
+export const PUBLIC_DATA_LIST: IPublicData[] = [
+    {
+        key: "CARS",
+        title: "Cars",
+    },
+    {
+        key: "STUDENTS",
+        title: "Students' Performance"
+    },
+    {
+        key: "BIKE_SHARING",
+        title: "Bike Sharing"
+    },
+    {
+        key: "CAR_SALES",
+        title: "Car Sales"
+    },
+    {
+        key: "COLLAGE",
+        title: "Collage"
+    },
+    {
+        key: "KELPER",
+        title: "NASA Kelper"
+    },
+    {
+        key: 'BTC_GOLD',
+        title: "2022MCM Problem C: Trading Strategies"
+    },
+    {
+        key: "TITANIC",
+        title: "Titanic"
+    }
+]