@kanaries/graphic-walker 0.2.17 → 0.2.19

package/dist/interfaces.d.ts

@@ -128,7 +128,6 @@ export interface IFilterField extends IViewField {
     rule: IFilterRule | null;
 }
 export interface DraggableFieldState {
-    fields: IViewField[];
     dimensions: IViewField[];
     measures: IViewField[];
     rows: IViewField[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -43,6 +43,7 @@
     "immer": "^9.0.15",
     "mobx": "^6.3.3",
     "mobx-react-lite": "^3.2.1",
+    "nanoid": "^4.0.2",
     "postcss": "^8.3.7",
     "postinstall-postinstall": "^2.1.0",
     "re-resizable": "^6.9.8",

package/src/components/codeExport/index.tsx

@@ -17,7 +17,7 @@ const syntaxHighlight = (json: any) => {
         .replace(/>/g, ">")
         .replace(/\n/g, "<br>")
         .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;")
-        .replace(/\s/g, "&nbsp;&nbsp;");
+        .replace(/\s/g, "&nbsp;");
     return json.replace(
         /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
         function (match) {
@@ -84,8 +84,8 @@ const CodeExport: React.FC = observer((props) => {
                     }}
                 />
                 {tabKey === "graphic-walker" && (
-                    <div className="text-sm px-6 max-h-56 overflow-auto">
-                        <div dangerouslySetInnerHTML={{ __html: syntaxHighlight(code) }} />
+                    <div className="text-sm px-6 max-h-96 overflow-auto">
+                        <code dangerouslySetInnerHTML={{ __html: syntaxHighlight(code) }} />
                     </div>
                 )}
                 <div className="mt-4 flex justify-start">

package/src/config.ts

@@ -53,5 +53,4 @@ export const CHANNEL_LIMIT = {
 export const MetaFieldKeys: Array<keyof DraggableFieldState> = [
     'dimensions',
     'measures',
-    'fields'
 ]

package/src/fields/fieldsContext.tsx

@@ -40,7 +40,6 @@ export const FieldsContextWrapper: React.FC = props => {
 export default FieldsContextWrapper;
 
 export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
-    { id: 'fields', mode: 0 },
     { id: 'columns', mode: 0 },
     { id: 'rows', mode: 0 },
     { id: 'color', mode: 1 },

package/src/interfaces.ts

@@ -149,7 +149,6 @@ export interface IFilterField extends IViewField {
 }
 
 export interface DraggableFieldState {
-    fields: IViewField[];
     dimensions: IViewField[];
     measures: IViewField[];
     rows: IViewField[];

package/src/main.tsx

@@ -1,11 +1,13 @@
-import React, { useEffect } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import { GraphicWalker } from "./index";
 
 import { inject } from "@vercel/analytics";
 import "./index.css";
 
-inject();
+if (!import.meta.env.DEV) {
+    inject();
+}
 
 ReactDOM.render(
     <React.StrictMode>

package/src/store/visualSpecStore.ts

@@ -1,21 +1,26 @@
 import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } from "mobx";
 import produce from "immer";
-import { v4 as uuidv4 } from "uuid";
 import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig, Specification } from "../interfaces";
 import { CHANNEL_LIMIT, GEMO_TYPES, MetaFieldKeys } from "../config";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
 import { IStoInfo, dumpsGWPureSpec, parseGWContent, parseGWPureSpec, stringifyGWContent } from "../utils/save";
 import { CommonStore } from "./commonStore";
 import { createCountField } from "../utils";
+import { nanoid } from "nanoid";
 
 function getChannelSizeLimit(channel: string): number {
     if (typeof CHANNEL_LIMIT[channel] === "undefined") return Infinity;
     return CHANNEL_LIMIT[channel];
 }
 
+function uniqueId(): string {
+    return "gw_" + nanoid(4);
+}
+
 function geomAdapter(geom: string) {
     switch (geom) {
         case "interval":
+        case "bar":
             return "bar";
         case "line":
             return "line";
@@ -43,7 +48,6 @@ export function initEncoding(): DraggableFieldState {
     return {
         dimensions: [],
         measures: [],
-        fields: [],
         rows: [],
         columns: [],
         color: [],
@@ -143,7 +147,7 @@ export class VizSpecStore {
         this.visList.push(
             new VisSpecWithHistory({
                 name: 'Chart 1',
-                visId: uuidv4(),
+                visId: uniqueId(),
                 config: this.visualConfig,
                 encodings: this.draggableFieldState,
             })
@@ -298,7 +302,7 @@ export class VizSpecStore {
         this.visList.push(
             new VisSpecWithHistory({
                 name,
-                visId: uuidv4(),
+                visId: uniqueId(),
                 config: initVisualConfig(),
                 encodings: initEncoding(),
             })
@@ -323,19 +327,10 @@ export class VizSpecStore {
     public initMetaState(dataset: DataSet) {
         const countField = createCountField();
         this.useMutable(({ encodings }) => {
-            encodings.fields = dataset.rawFields.map((f) => ({
-                dragId: uuidv4(),
-                fid: f.fid,
-                name: f.name || f.fid,
-                aggName: f.analyticType === "measure" ? "sum" : undefined,
-                analyticType: f.analyticType,
-                semanticType: f.semanticType,
-            }))//.concat(countField);
-            encodings.fields.push(countField);
             encodings.dimensions = dataset.rawFields
                 .filter((f) => f.analyticType === "dimension")
                 .map((f) => ({
-                    dragId: uuidv4(),
+                    dragId: uniqueId(),
                     fid: f.fid,
                     name: f.name || f.fid,
                     semanticType: f.semanticType,
@@ -344,7 +339,7 @@ export class VizSpecStore {
             encodings.measures = dataset.rawFields
                 .filter((f) => f.analyticType === "measure")
                 .map((f) => ({
-                    dragId: uuidv4(),
+                    dragId: uniqueId(),
                     fid: f.fid,
                     name: f.name || f.fid,
                     analyticType: f.analyticType,
@@ -435,7 +430,7 @@ export class VizSpecStore {
                 // use a different dragId
                 movingField = {
                     ...toJS(encodings[sourceKey][sourceIndex]), // toJS will NOT shallow copy a object here
-                    dragId: uuidv4(),
+                    dragId: uniqueId(),
                 };
             } else {
                 [movingField] = encodings[sourceKey].splice(sourceIndex, 1);
@@ -479,7 +474,7 @@ export class VizSpecStore {
         this.useMutable(({ encodings }) => {
             encodings.filters.splice(index, 0, {
                 ...toJS(data),
-                dragId: uuidv4(),
+                dragId: uniqueId(),
                 rule: null,
             });
             this.editingFilterIdx = index;
@@ -507,7 +502,7 @@ export class VizSpecStore {
     public createBinField(stateKey: keyof DraggableFieldState, index: number, binType: 'bin' | 'binCount') {
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
-            const newVarKey = uuidv4();
+            const newVarKey = uniqueId();
             const binField: IViewField = {
                 fid: newVarKey,
                 dragId: newVarKey,
@@ -536,7 +531,7 @@ export class VizSpecStore {
 
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
-            const newVarKey = uuidv4();
+            const newVarKey = uniqueId();
             const logField: IViewField = {
                 fid: newVarKey,
                 dragId: newVarKey,
@@ -634,7 +629,7 @@ export class VizSpecStore {
 
         this.useMutable(({ encodings }) => {
             const cloneField = { ...toJS(field) };
-            cloneField.dragId = uuidv4();
+            cloneField.dragId = uniqueId();
             encodings[destinationKey].push(cloneField);
         });
     }
@@ -642,7 +637,7 @@ export class VizSpecStore {
         const tab = this.visList[this.visIndex];
 
         if (tab) {
-            const fields = tab.encodings.fields;
+            const fields = tab.encodings.dimensions.concat(tab.encodings.measures);
             // thi
             // const [xField, yField, ] = spec.position;
             this.clearState();