@kanaries/graphic-walker 0.3.5 → 0.3.6

package/dist/interfaces.d.ts

@@ -75,7 +75,7 @@ export interface IField {
     analyticType: IAnalyticType;
     cmp?: (a: any, b: any) => number;
     computed?: boolean;
-    expressoion?: IExpression;
+    expression?: IExpression;
 }
 export interface IViewField extends IField {
     dragId: string;

package/dist/visualSettings/index.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
+import { ToolbarItemProps } from '../components/toolbar';
 interface IVisualSettings {
     darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
+    exclude?: string[];
+    extra?: ToolbarItemProps[];
 }
 declare const _default: React.FunctionComponent<IVisualSettings>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/App.tsx

@@ -19,6 +19,7 @@ import DatasetConfig from './dataSource/datasetConfig';
 import { useCurrentMediaTheme } from './utils/media';
 import CodeExport from './components/codeExport';
 import VisualConfig from './components/visualConfig';
+import type { ToolbarItemProps } from './components/toolbar';
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -36,6 +37,10 @@ export interface IGWProps {
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     storeRef?: React.MutableRefObject<IGlobalStore | null>;
+    toolbar?: {
+        extra?: ToolbarItemProps[];
+        exclude?: string[];
+    };
 }
 
 const App = observer<IGWProps>(function App(props) {
@@ -49,6 +54,7 @@ const App = observer<IGWProps>(function App(props) {
         fieldKeyGuard = true,
         themeKey = 'vega',
         dark = 'media',
+        toolbar,
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
 
@@ -124,7 +130,7 @@ const App = observer<IGWProps>(function App(props) {
                         style={{ marginTop: '0em', borderTop: 'none' }}
                         className="m-4 p-4 border border-gray-200 dark:border-gray-700"
                     >
-                        <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} />
+                        <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} exclude={toolbar?.exclude} extra={toolbar?.extra} />
                         <CodeExport />
                         <VisualConfig />
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
@@ -187,3 +193,5 @@ const App = observer<IGWProps>(function App(props) {
 });
 
 export default App;
+
+export type { ToolbarItemProps };

package/src/interfaces.ts

@@ -86,7 +86,7 @@ export interface IField {
     analyticType: IAnalyticType;
     cmp?: (a: any, b: any) => number;
     computed?: boolean;
-    expressoion?: IExpression;
+    expression?: IExpression;
 }
 
 export interface IViewField extends IField {

package/src/locales/en-US.json

@@ -148,7 +148,8 @@
                     "descending": "Sort in Descending Order",
                     "transpose": "Transpose",
                     "export_chart": "Export",
-                    "export_chart_as": "Export as {{type}}"
+                    "export_chart_as": "Export as {{type}}",
+                    "export_code": "Export Code"
                 },
                 "size": "Resize",
                 "size_setting": {

package/src/locales/ja-JP.json

@@ -147,7 +147,8 @@
                     "descending": "降順に並べ替える",
                     "transpose": "転置",
                     "export_chart": "エクスポート",
-                    "export_chart_as": "{{type}}としてエクスポート"
+                    "export_chart_as": "{{type}}としてエクスポート",
+                    "export_code": "コードをエクスポート"
                 },
                 "size": "サイズ変更",
                 "size_setting": {

package/src/locales/zh-CN.json

@@ -148,7 +148,8 @@
                     "descending": "降序排序",
                     "transpose": "转置",
                     "export_chart": "导出",
-                    "export_chart_as": "导出 {{type}}"
+                    "export_chart_as": "导出 {{type}}",
+                    "export_code": "导出代码"
                 },
                 "size": "调整尺寸",
                 "size_setting": {

package/src/store/visualSpecStore.ts

@@ -505,7 +505,7 @@ export class VizSpecStore {
                 semanticType: "ordinal",
                 analyticType: "dimension",
                 computed: true,
-                expressoion: {
+                expression: {
                     op: binType,
                     as: newVarKey,
                     params: [
@@ -535,7 +535,7 @@ export class VizSpecStore {
                 analyticType: originField.analyticType,
                 aggName: 'sum',
                 computed: true,
-                expressoion: {
+                expression: {
                     op: scaleType,
                     as: newVarKey,
                     params: [

package/src/utils/index.ts

@@ -246,7 +246,7 @@ export function createCountField(): IViewField {
         semanticType: "quantitative",
         aggName: 'sum',
         computed: true,
-        expressoion: {
+        expression: {
             op: 'one',
             params: [],
             as: COUNT_FIELD_ID,

package/src/visualSettings/index.tsx

@@ -61,9 +61,11 @@ const FormContainer = styled.div`
 interface IVisualSettings {
     darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
+    exclude?: string[];
+    extra?: ToolbarItemProps[];
 }
 
-const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePreference }) => {
+const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePreference, extra = [], exclude = [] }) => {
     const { vizStore, commonStore } = useGlobalStore();
     const { visualConfig, canUndo, canRedo } = vizStore;
     const { t: tGlobal } = useTranslation();
@@ -85,7 +87,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
     const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
 
     const items = useMemo<ToolbarItemProps[]>(() => {
-        return [
+        const builtInItems = [
             {
                 key: 'undo',
                 label: 'undo (Ctrl + Z)',
@@ -296,9 +298,20 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
                 onClick: () => {
                     commonStore.setShowCodeExportPanel(true);
                 }
-            }
+            },
         ] as ToolbarItemProps[];
-    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, showActions, downloadPNG, downloadSVG, dark]);
+
+        const items = builtInItems.filter(item => typeof item === 'string' || !exclude.includes(item.key));
+
+        if (extra.length > 0) {
+            items.push(
+                '-',
+                ...extra,
+            );
+        }
+
+        return items;
+    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, showActions, downloadPNG, downloadSVG, dark, extra, exclude]);
 
     return <div style={{ margin: '0.38em 0.28em 0.2em 0.18em' }}>
         <Toolbar

package/src/workers/transform.ts

@@ -6,7 +6,7 @@ export function transformData(data: IRow[], columns: IField[]) {
     let df = dataset2DataFrame(data, columns);
     for (let i = 0; i < computedFields.length; i++) {
         const field = computedFields[i];
-        df = execExpression(field.expressoion!, df, columns);
+        df = execExpression(field.expression!, df, columns);
     }
     return dataframe2Dataset(df, columns);
 }