@kanaries/graphic-walker 0.2.11 → 0.2.12

package/src/utils/save.ts

@@ -1,48 +1,49 @@
 import { IDataSet, IDataSource, IVisSpec } from "../interfaces";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
 
-
-export function dumpsGWPureSpec (list: VisSpecWithHistory[]): IVisSpec[] {
-    return list.map(l => l.exportGW())
+export function dumpsGWPureSpec(list: VisSpecWithHistory[]): IVisSpec[] {
+    return list.map((l) => l.exportGW());
 }
 
-export function parseGWPureSpec (list: IVisSpec[]): VisSpecWithHistory[] {
-    return list.map(l => new VisSpecWithHistory(l))
+export function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[] {
+    return list.map((l) => new VisSpecWithHistory(l));
 }
 
 interface IStoInfo {
     datasets: IDataSet[];
-    specList: ({
+    specList: {
         /** 由于 gw 内部实现暂时未锁版本，这里获取到的信息可能会与当前实例内容有偏差，需要用初始值合入 */
-        [K in keyof IVisSpec]: K extends 'config' ? Partial<IVisSpec[K]> : IVisSpec[K];
-    })[];
-    dataSources: IDataSource[]
+        [K in keyof IVisSpec]: K extends "config" ? Partial<IVisSpec[K]> : IVisSpec[K];
+    }[];
+    dataSources: IDataSource[];
 }
 
-export function stringifyGWContent (info: IStoInfo) {
-    return JSON.stringify(info)
+export function stringifyGWContent(info: IStoInfo) {
+    return JSON.stringify(info);
 }
 
-export function parseGWContent (raw: string): IStoInfo {
-    return JSON.parse(raw)
+export function parseGWContent(raw: string): IStoInfo {
+    return JSON.parse(raw);
 }
 
 export function download(data: string, filename: string, type: string) {
-    var file = new Blob([data], {type: type});
+    var file = new Blob([data], { type: type });
     // @ts-ignore
-    if (window.navigator.msSaveOrOpenBlob) // IE10+
+    if (window.navigator.msSaveOrOpenBlob)
+        // IE10+
         // @ts-ignore
         window.navigator.msSaveOrOpenBlob(file, filename);
-    else { // Others
+    else {
+        // Others
         var a = document.createElement("a"),
-                url = URL.createObjectURL(file);
+            url = URL.createObjectURL(file);
         a.href = url;
         a.download = filename;
         document.body.appendChild(a);
         a.click();
-        setTimeout(function() {
+        setTimeout(function () {
             document.body.removeChild(a);
-            window.URL.revokeObjectURL(url);  
-        }, 0); 
+            window.URL.revokeObjectURL(url);
+        }, 0);
     }
-}
+}

package/src/utils/throttle.ts

@@ -1,4 +1,8 @@
-const throttle = (fn: () => void, time: number, options?: Partial<{ leading: boolean; trailing: boolean }>): () => void => {
+const throttle = (
+    fn: () => void,
+    time: number,
+    options?: Partial<{ leading: boolean; trailing: boolean }>
+): (() => void) => {
     const { leading = true, trailing = false } = options ?? {};
 
     let dirty = false;

package/src/vis/react-vega.tsx

@@ -9,6 +9,8 @@ import { autoMark } from '../utils/autoMark';
 import { COUNT_FIELD_ID } from '../constants';
 
 import { IViewField, IRow, IStackMode } from '../interfaces';
+import { useTranslation } from 'react-i18next';
+import { getVegaTimeFormatRules } from './temporalFormat';
 
 const CanvaContainer = styled.div<{rowSize: number; colSize: number;}>`
   display: grid;
@@ -119,12 +121,9 @@ function channelEncode(props: EncodeProps) {
         title: props[c].name,
         type: props[c].semanticType
       }
-      if (props[c].semanticType === 'temporal') {
-        encoding[c].axis = { format: '%Y-%m' }
-      }
     }
   })
-  // FIXME: 临时处理逻辑，只处理xy排序
+  // FIXME: temporal fix, only for x and y relative order
   if (encoding.x && encoding.y) {
     if ((props.x.sort && props.x.sort) || (props.y && props.y.sort)) {
       if (props.x.sort !== 'none' && (props.y.sort === 'none' || !Boolean(props.y.sort)))  {
@@ -383,6 +382,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
   // const container = useRef<HTMLDivElement>(null);
   // const containers = useRef<(HTMLDivElement | null)[]>([]);
   const [viewPlaceholders, setViewPlaceholders] = useState<React.MutableRefObject<HTMLDivElement>[]>([]);
+  const { i18n } = useTranslation();
   useEffect(() => {
     const clickSub = geomClick$.subscribe(([values, e]) => {
       if (onGeomClick) {
@@ -502,7 +502,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
         spec.params.push(...singleView.params!);
       }
       if (viewPlaceholders.length > 0 && viewPlaceholders[0].current) {
-        embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions }).then(res => {
+        embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language) }).then(res => {
           vegaRefs.current = [res.view];
           try {
             res.view.addEventListener('click', (e) => {
@@ -583,10 +583,8 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
             ans.params = commonSpec.params;
           }
           if (node) {
-            embed(node, ans, { mode: 'vega-lite', actions: showActions }).then(res => {
+            embed(node, ans, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language) }).then(res => {
               vegaRefs.current.push(res.view);
-              // 这种 case 下，我们来考虑联动的 params
-              // vega 使用 Data 来维护 params 的状态，只需要打通这些状态就可以实现联动
               const paramStores = (res.vgSpec.data?.map(d => d.name) ?? []).filter(
                 name => [BRUSH_SIGNAL_NAME, POINT_SIGNAL_NAME].map(p => `${p}_store`).includes(name)
               ).map(name => name.replace(/_store$/, ''));
@@ -611,12 +609,10 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
                       });
                     }
                   });
-                  // 订阅
                   subscribe(entry => {
                     if (entry.source === sourceId || !entry.data) {
                       return;
                     }
-                    // 防止被动更新触发广播
                     noBroadcasting = true;
                     res.view.setState({
                       data: {

package/src/vis/temporalFormat.ts

@@ -0,0 +1,66 @@
+export function getVegaTimeFormatRules(lang: string) {
+    switch (lang) {
+        case 'zh-CN':
+            return {
+                dateTime: '%x %A %X',
+                date: '%Y年%-m月%-d日',
+                time: '%H:%M:%S',
+                periods: ['上午', '下午'],
+                days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+                shortDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+                months: [
+                    '一月',
+                    '二月',
+                    '三月',
+                    '四月',
+                    '五月',
+                    '六月',
+                    '七月',
+                    '八月',
+                    '九月',
+                    '十月',
+                    '十一月',
+                    '十二月',
+                ],
+                shortMonths: [
+                    '一月',
+                    '二月',
+                    '三月',
+                    '四月',
+                    '五月',
+                    '六月',
+                    '七月',
+                    '八月',
+                    '九月',
+                    '十月',
+                    '十一月',
+                    '十二月',
+                ],
+            };
+        case 'en-US':
+        default:
+            return {
+                dateTime: '%x, %X',
+                date: '%-m/%-d/%Y',
+                time: '%-I:%M:%S %p',
+                periods: ['AM', 'PM'],
+                days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+                shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+                months: [
+                    'January',
+                    'February',
+                    'March',
+                    'April',
+                    'May',
+                    'June',
+                    'July',
+                    'August',
+                    'September',
+                    'October',
+                    'November',
+                    'December',
+                ],
+                shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+            };
+    }
+}

package/dist/pitch/dnd-offset.d.ts

@@ -1,2 +0,0 @@
-import { DraggableProvided } from "react-beautiful-dnd";
-export declare function fixDraggableOffset(provided: DraggableProvided, containerDOM: HTMLElement | undefined | null): void;

package/src/pitch/dnd-offset.ts

@@ -1,64 +0,0 @@
-import { DraggableProvided } from "react-beautiful-dnd";
-
-function getElementBoxInfo(ele: HTMLElement) {
-    const style = window.getComputedStyle(ele);
-    const borderLeft = parseInt(style.borderLeftWidth);
-    const paddingLeft = parseInt(style.paddingLeft);
-    const marginLeft = parseInt(style.marginLeft);
-    const borderTop = parseInt(style.borderTopWidth);
-    const paddingTop = parseInt(style.paddingTop);
-    const marginTop = parseInt(style.marginTop);
-    return {
-        borderLeft,
-        paddingLeft,
-        marginLeft,
-        borderTop,
-        paddingTop,
-        marginTop,
-        style
-    };
-}
-
-export function fixDraggableOffset(provided: DraggableProvided, containerDOM: HTMLElement | undefined | null) {
-    if (typeof containerDOM === 'undefined' || containerDOM === null) return;
-    const containerRect = containerDOM.getBoundingClientRect();
-    const offset = { x: containerRect.left, y: containerRect.top };
-    let parent: HTMLElement | null = containerDOM.parentElement;
-    while (parent !== null) {
-        const box = getElementBoxInfo(parent);
-        const {
-            borderLeft: parentBorderLeft,
-            paddingLeft: parentPaddingLeft,
-            marginLeft: parentMarginLeft,
-            borderTop: parentBorderTop,
-            paddingTop: parentPaddingTop,
-            marginTop: parentMarginTop,
-            style
-        } = box;
-        offset.x -= ( parentBorderLeft + parentPaddingLeft + parentMarginLeft);
-        offset.y -= (parentBorderTop + parentPaddingTop + parentMarginTop);
-        if (style.position === 'absolute' || style.position === 'fixed') {
-
-            break;
-        }
-        
-        parent = parent.parentElement;
-    }
-    const root = document.documentElement;
-    const scrollTop = (window.pageYOffset || root.scrollTop) - (root.clientTop || 0);
-    const scrollLeft = (window.pageXOffset || root.scrollLeft) - (root.clientLeft || 0);
-    offset.y += scrollTop;
-    offset.x += scrollLeft;
-    //@ts-ignore
-    const x = (provided.draggableProps.style.left! ?? 0) - offset.x;
-    //@ts-ignore
-    const y = (provided.draggableProps.style.top! ?? 0) - offset.y
-    // TODO: Fix the offset error when there is a layer has padding between fixed layer and provided.draggableProps.style ele. 
-    // the error seems to be 16px which is the pill's height
-    // provided.draggableProps.style.height;// - 2 - 2 - 1 - 1;
-
-    // @ts-ignore
-    provided.draggableProps.style.left = x;
-    // @ts-ignore
-    provided.draggableProps.style.top = y;
-}