@kanaries/graphic-walker 0.4.0 → 0.4.2

package/src/utils/save.ts

@@ -11,15 +11,40 @@ export function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[] {
     return list.map((l) => new VisSpecWithHistory(l));
 }
 
+export function initEncoding(): DraggableFieldState {
+    return {
+        dimensions: [],
+        measures: [],
+        rows: [],
+        columns: [],
+        color: [],
+        opacity: [],
+        size: [],
+        shape: [],
+        radius: [],
+        theta: [],
+        longitude: [],
+        latitude: [],
+        geoId: [],
+        details: [],
+        filters: [],
+        text: [],
+    };
+}
+
 export function initVisualConfig(): IVisualConfig {
+    const [ geom ] = GEMO_TYPES.generic;
     return {
         defaultAggregated: true,
-        geoms: [GEMO_TYPES[0]!],
+        geoms: [geom],
+        showTableSummary: false,
+        coordSystem: 'generic',
         stack: 'stack',
         showActions: false,
         interactiveScale: false,
         sorted: 'none',
         zeroScale: true,
+        scaleIncludeUnmatchedChoropleth: false,
         background: undefined,
         size: {
             mode: "auto",
@@ -31,6 +56,7 @@ export function initVisualConfig(): IVisualConfig {
             timeFormat: undefined,
             normalizedNumberFormat: undefined,
         },
+        geoKey: 'name',
         resolve: {
             x: false,
             y: false,
@@ -60,6 +86,7 @@ export function visSpecDecoder(visList: IVisSpecForExport[]): IVisSpec[] {
         return {
             ...visSpec,
             encodings: {
+                ...initEncoding(),
                 ...visSpec.encodings,
                 filters: updatedFilters,
             },

package/src/visualSettings/index.tsx

@@ -19,6 +19,11 @@ import {
     LightBulbIcon,
     CodeBracketSquareIcon,
     Cog6ToothIcon,
+    TableCellsIcon,
+    MapPinIcon,
+    GlobeAltIcon,
+    RectangleGroupIcon,
+    GlobeAmericasIcon,
     HashtagIcon,
 } from '@heroicons/react/24/outline';
 import { observer } from 'mobx-react-lite';
@@ -26,7 +31,7 @@ import React, { SVGProps, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { ResizeDialog } from '../components/sizeSetting';
-import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
+import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE, COORD_TYPES } from '../config';
 import { useGlobalStore } from '../store';
 import { IStackMode, IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
@@ -37,7 +42,6 @@ import throttle from '../utils/throttle';
 import KanariesLogo from '../assets/kanaries.png';
 import { ImageWithFallback } from '../components/timeoutImg';
 import LimitSetting from '../components/limitSetting';
-import { runInAction } from 'mobx';
 
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);
@@ -83,6 +87,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({
     const {
         defaultAggregated,
         geoms: [markType],
+        showTableSummary,
+        coordSystem = 'generic',
         stack,
         interactiveScale,
         size: { mode: sizeMode, width, height },
@@ -164,7 +170,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                         color: 'rgb(294,115,22)',
                     },
                 },
-                options: GEMO_TYPES.map((g) => ({
+                options: GEMO_TYPES[coordSystem].map((g) => ({
                     key: g,
                     label: tGlobal(`constant.mark_type.${g}`),
                     icon: {
@@ -349,6 +355,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                                 />
                             </svg>
                         ),
+                        poi: MapPinIcon,
+                        choropleth: RectangleGroupIcon,
                     }[g],
                 })),
                 value: markType,
@@ -394,6 +402,15 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                 icon: BarsArrowDownIcon,
                 onClick: () => vizStore.applyDefaultSort('descending'),
             },
+            {
+                key: 'table:summary',
+                label: t('table.summary'),
+                icon: TableCellsIcon,
+                checked: showTableSummary,
+                onChange: checked => {
+                    vizStore.setVisualConfig('showTableSummary', checked);
+                },
+            },
             '-',
             {
                 key: 'axes_resize',
@@ -439,6 +456,34 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                 ),
             },
             '-',
+            {
+                key: 'coord_system',
+                label: tGlobal('constant.coord_system.__enum__'),
+                icon: StopIcon,
+                options: COORD_TYPES.map(c => ({
+                    key: c,
+                    label: tGlobal(`constant.coord_system.${c}`),
+                    icon: {
+                        generic: (props: SVGProps<SVGSVGElement>) => <svg stroke="currentColor" fill="none" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M2 12h20M12 2v20" /><path strokeLinecap="round" strokeLinejoin="round" d="M12 7h2M12 16h2M7 12v-2M16 12v-2"/></svg>,
+                        geographic: GlobeAltIcon,
+                    }[c],
+                })),
+                value: coordSystem,
+                onSelect: value => {
+                    const coord = value as typeof COORD_TYPES[number];
+                    vizStore.setVisualConfig('coordSystem', coord);
+                    vizStore.setVisualConfig('geoms', [GEMO_TYPES[coord][0]]);
+                },
+            },
+            coordSystem === 'geographic' && markType === 'choropleth' && {
+                key: 'geojson',
+                label: t('button.geojson'),
+                icon: GlobeAmericasIcon,
+                onClick: () => {
+                    commonStore.setShowGeoJSONConfigPanel(true);
+                },
+            },
+            '-',
             {
                 key: 'debug',
                 label: t('toggle.debug'),
@@ -448,7 +493,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     vizStore.setVisualConfig('showActions', checked);
                 },
             },
-            {
+            ...coordSystem === 'generic' ?[{
                 key: 'export_chart',
                 label: t('button.export_chart'),
                 icon: PhotoIcon,
@@ -478,7 +523,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                         </button>
                     </FormContainer>
                 ),
-            },
+            }]:[],
             {
                 key: 'config',
                 label: 'config',
@@ -530,17 +575,23 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     </a>
                 ),
             },
-        ] as ToolbarItemProps[];
+        ].filter(Boolean) as ToolbarItemProps[];
 
         const items = builtInItems.filter((item) => typeof item === 'string' || !exclude.includes(item.key));
 
-        return items;
+        switch (vizStore.visualConfig.geoms[0]) {
+            case 'table':
+                return items;
+            default:
+                return items.filter(item => typeof item === 'string' || item.key !== 'table:summary');
+        }
     }, [
         vizStore,
         canUndo,
         canRedo,
         defaultAggregated,
         markType,
+        coordSystem,
         stack,
         interactiveScale,
         sizeMode,

package/src/workers/buildMetricTable.worker.js

@@ -0,0 +1,27 @@
+/* eslint no-restricted-globals: 0 */
+/* eslint-disable */ 
+import { buildPivotTable } from "./buildPivotTable"
+/**
+ * @param {import('../interfaces').IViewField[]} dimsInRow
+ * @param {import('../interfaces').IViewField[]} dimsInColumn
+ * @param {import('../interfaces').IRow[]} allData
+ * @param {import('../interfaces').IRow} aggData
+ * @param {string[]} collapsedKeyList
+ * @param {boolean} showTableSummary
+ * @return {{lt: import('../components/pivotTable/inteface').INestNode, tt: import('../components/pivotTable/inteface').INestNode, metric: import('../interfaces').(IRow | null)[][]}}
+ */
+
+/**
+ * @param {MessageEvent<{ dimsInRow: import('../interfaces').IViewField[]; dimsInColumn: import('../interfaces').IViewField[]; allData: import('../interfaces').IRow[]; aggData: import('../interfaces').IRow[]; collapsedKeyList: string[]; showTableSummary: boolean }>} e
+ */
+const main = e => {
+    const { dimsInRow, dimsInColumn, allData, aggData, collapsedKeyList, showTableSummary } = e.data;
+    try {
+        const ans = buildPivotTable(dimsInRow, dimsInColumn, allData, aggData, collapsedKeyList, showTableSummary);
+        self.postMessage(ans);
+    } catch (error) {
+        self.postMessage({ error: error.message });
+    }
+};
+
+self.addEventListener('message', main, false);

package/src/workers/buildPivotTable.ts

@@ -0,0 +1,27 @@
+import { INestNode } from "../components/pivotTable/inteface";
+import { buildMetricTableFromNestTree, buildNestTree } from "../components/pivotTable/utils"
+import { IViewField, IRow } from "../interfaces"
+
+export function buildPivotTable (
+    dimsInRow: IViewField[], 
+    dimsInColumn: IViewField[], 
+    allData: IRow[], 
+    aggData: IRow[], 
+    collapsedKeyList: string[], 
+    showTableSummary: boolean
+): {lt: INestNode, tt: INestNode, metric: (IRow | null)[][]} {
+    const lt = buildNestTree(
+        dimsInRow.map((d) => d.fid),
+        allData,
+        collapsedKeyList,
+        showTableSummary
+    );
+    const tt = buildNestTree(
+        dimsInColumn.map((d) => d.fid),
+        allData,
+        collapsedKeyList,
+        showTableSummary
+    );
+    const metric = buildMetricTableFromNestTree(lt, tt, [...allData, ...aggData])
+    return {lt, tt, metric}
+}