Skip to content

Commit

Permalink
fix: facet issue (#187)
Browse files Browse the repository at this point in the history 
* fix: enter visSegment after import csv

* fix: react-vega render deps

* fix: properities

* fix: default segment

* chore: tabs behaivor

* fix: pivottable reactive

* fix: chart name idx

* fix: props

* fix: ux

* fix: fold menu z-index

* fix: add channel limit

* chore: change getTemporalRange

* fix: hook deps

* fix: menu in dark mode
  • Loading branch information
@islxyqwe
islxyqwe authored Oct 18, 2023
1 parent 61adc5b commit 382c7d1
Show file tree
Hide file tree
Showing 30 changed files with 293 additions and 196 deletions.
3 changes: 2 additions & 1 deletion packages/graphic-walker/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
},
"types": "./dist/index.d.ts",
"dependencies": {
"@headlessui-float/react": "^0.11.4",
"@headlessui/react": "^1.7.12",
"@heroicons/react": "^2.0.8",
"@kanaries/react-beautiful-dnd": "^0.0.3",
Expand Down Expand Up @@ -65,8 +66,8 @@
"react-shadow": "^20.0.0",
"rxjs": "^7.3.0",
"tailwindcss": "^3.2.4",
"ts-jest": "^29.1.1",
"topojson-client": "^3.1.0",
"ts-jest": "^29.1.1",
"vega": "^5.22.1",
"vega-embed": "^6.21.0",
"vega-lite": "^5.6.0"
Expand Down
74 changes: 52 additions & 22 deletions packages/graphic-walker/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useCallback } from 'react';
import { observer } from 'mobx-react-lite';
import { useTranslation } from 'react-i18next';
import { LightBulbIcon } from "@heroicons/react/24/outline";
import { IGeographicData, IComputationFunction, ISegmentKey, IThemeKey, IMutField, IGeoDataItem, VegaGlobalConfig, IChannelScales } from './interfaces';
import { IGeographicData, IComputationFunction, ISegmentKey, IThemeKey, IMutField, IGeoDataItem, VegaGlobalConfig, IChannelScales, Specification, IDarkMode } from './interfaces';
import type { IReactVegaHandler } from './vis/react-vega';
import VisualSettings from './visualSettings';
import PosFields from './fields/posFields';
Expand All @@ -22,7 +22,7 @@ import GeoConfigPanel from './components/leafletRenderer/geoConfigPanel';
import type { ToolbarItemProps } from './components/toolbar';
import ClickMenu from './components/clickMenu';
import AskViz from './components/askViz';
import { VizSpecStore } from './store/visualSpecStore';
import { VizSpecStore, renderSpec } from './store/visualSpecStore';
import FieldsContextWrapper from './fields/fieldsContext';
import { guardDataKeys } from './utils/dataPrep';
import { getComputation } from './computation/clientComputation';
Expand All @@ -32,6 +32,7 @@ import { ErrorContext } from './utils/reportError';
import { ErrorBoundary } from 'react-error-boundary';
import Errorpanel from './components/errorpanel';
import { GWGlobalConfig } from './vis/theme';
import { useCurrentMediaTheme } from './utils/media';

export interface BaseVizProps {
i18nLang?: string;
Expand All @@ -58,6 +59,7 @@ export interface BaseVizProps {
onError?: (err: Error) => void;
geoList?: IGeoDataItem[];
channelScales?: IChannelScales;
spec?: Specification;
}

export const VizApp = observer(function VizApp(props: BaseVizProps) {
Expand All @@ -72,6 +74,8 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
toolbar,
geographicData,
computationTimeout = 60000,
spec,
onError
} = props;

const { t, i18n } = useTranslation();
Expand All @@ -92,10 +96,16 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
const vizStore = useVizStore();

useEffect(() => {
if (props.geographicData) {
vizStore.setGeographicData(props.geographicData, props.geographicData.key);
if (geographicData) {
vizStore.setGeographicData(geographicData, geographicData.key);
}
}, [geographicData]);
}, [vizStore, geographicData]);

useEffect(() => {
if (spec) {
vizStore.replaceNow(renderSpec(spec, vizStore.meta, vizStore.currentVis.name ?? 'Chart 1', vizStore.currentVis.visId));
}
}, [spec, vizStore]);

const rendererRef = useRef<IReactVegaHandler>(null);

Expand All @@ -105,12 +115,12 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
(msg: string, code?: number) => {
const err = new Error(`Error${code ? `(${code})` : ''}: ${msg}`);
console.error(err);
props.onError?.(err);
onError?.(err);
if (code) {
vizStore.updateShowErrorResolutionPanel(code);
}
},
[vizStore, props.onError]
[vizStore, onError]
);

const { segmentKey, vizEmbededMenu } = vizStore;
Expand Down Expand Up @@ -215,12 +225,16 @@ export const VizApp = observer(function VizApp(props: BaseVizProps) {
export type VizProps = {
i18nLang?: string;
i18nResources?: { [lang: string]: Record<string, string | any> };
themeConfig?: GWGlobalConfig;
themeKey?: IThemeKey;
darkMode?: 'light' | 'dark';
dark?: IDarkMode;
toolbar?: {
extra?: ToolbarItemProps[];
exclude?: string[];
};
geographicData?: IGeographicData & {
key: string;
};
enhanceAPI?: {
header?: Record<string, string>;
features?: {
Expand All @@ -232,6 +246,11 @@ export type VizProps = {
rawFields: IMutField[];
onMetaChange?: (fid: string, meta: Partial<IMutField>) => void;
computationTimeout?: number;
dataSelection?: React.ReactChild;
onError?: (err: Error) => void;
geoList?: IGeoDataItem[];
channelScales?: IChannelScales;
spec?: Specification;
} & (
| {
/**
Expand Down Expand Up @@ -268,20 +287,31 @@ export function VizAppWithContext(props: VizProps) {
};
}, [props.rawFields, props.dataSource ? props.dataSource : props.computation, props.fieldKeyGuard]);

const darkMode = useCurrentMediaTheme(props.dark);

return (
<VizStoreWrapper onMetaChange={props.onMetaChange} meta={safeMetas} keepAlive={props.keepAlive} storeRef={props.storeRef}>
<FieldsContextWrapper>
<VizApp
darkMode={props.darkMode}
enhanceAPI={props.enhanceAPI}
i18nLang={props.i18nLang}
i18nResources={props.i18nResources}
themeKey={props.themeKey}
toolbar={props.toolbar}
computation={computation}
computationTimeout={props.computationTimeout}
/>
</FieldsContextWrapper>
</VizStoreWrapper>
<div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}>
<VizStoreWrapper onMetaChange={props.onMetaChange} meta={safeMetas} keepAlive={props.keepAlive} storeRef={props.storeRef}>
<FieldsContextWrapper>
<VizApp
darkMode={darkMode}
enhanceAPI={props.enhanceAPI}
i18nLang={props.i18nLang}
i18nResources={props.i18nResources}
themeKey={props.themeKey}
toolbar={props.toolbar}
computation={computation}
computationTimeout={props.computationTimeout}
channelScales={props.channelScales}
dataSelection={props.dataSelection}
geoList={props.geoList}
geographicData={props.geographicData}
onError={props.onError}
spec={props.spec}
themeConfig={props.themeConfig}
/>
</FieldsContextWrapper>
</VizStoreWrapper>
</div>
);
}
10 changes: 8 additions & 2 deletions packages/graphic-walker/src/FullApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import type { ToolbarItemProps } from './components/toolbar';
import { VizApp } from './App';
import { CommonStore } from './store/commonStore';
import FieldsContextWrapper from './fields/fieldsContext';
import { GWGlobalConfig } from './vis/theme';

export interface IGWProps {
hideDataSourceConfig?: boolean;
i18nLang?: string;
i18nResources?: { [lang: string]: Record<string, string | any> };
keepAlive?: boolean | string;
/** @default "vega" */
themeKey?: IThemeKey;
themeConfig?: GWGlobalConfig;
dark?: IDarkMode;
toolbar?: {
extra?: ToolbarItemProps[];
Expand All @@ -37,7 +38,7 @@ export interface IGWProps {
}

export const AppContent = observer<Omit<IGWProps, 'storeRef' | 'keepAlive'>>(function App(props) {
const { i18nLang = 'en-US', i18nResources, themeKey = 'vega', dark = 'media', toolbar, enhanceAPI } = props;
const { i18nLang = 'en-US', i18nResources, themeKey = 'vega', dark = 'media', themeConfig, toolbar, enhanceAPI, geographicData, onError, geoList, channelScales } = props;
const commonStore = useGlobalStore();

const { dataStore } = commonStore;
Expand All @@ -56,7 +57,12 @@ export const AppContent = observer<Omit<IGWProps, 'storeRef' | 'keepAlive'>>(fun
i18nLang={i18nLang}
i18nResources={i18nResources}
themeKey={themeKey}
themeConfig={themeConfig}
toolbar={toolbar}
geographicData={geographicData}
geoList={geoList}
onError={onError}
channelScales={channelScales}
/>
</div>
</FieldsContextWrapper>
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/components/askViz/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const AskViz: React.FC<{ api?: string; headers?: Record<string, string> }> = (pr
.finally(() => {
setLoading(false);
});
}, [query, allFields]);
}, [props.api, props.headers, allFields, query, vizStore]);
return (
<div className="right-0 flex">
<input
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/components/codeExport/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const CodeExport: React.FC = observer((props) => {
setCode("vega code");
}
}
}, [tabKey, showCodeExportPanel]);
}, [tabKey, showCodeExportPanel, vizStore]);
return (
<Modal
show={showCodeExportPanel}
Expand Down
7 changes: 4 additions & 3 deletions packages/graphic-walker/src/components/pivotTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { dataQuery } from '../../computation';
import { useAppRootContext } from '../../components/appRoot';
import LeftTree from './leftTree';
import TopTree from './topTree';
import { observer } from 'mobx-react-lite';
import {
DeepReadonly,
DraggableFieldState,
Expand Down Expand Up @@ -34,7 +35,7 @@ interface PivotTableProps {

const emptyMap = new Map();

const PivotTable: React.FC<PivotTableProps> = function PivotTableComponent(props) {
const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableComponent(props) {
const { data, visualConfig, loading, layout, draggableFieldState } = props;
const computation = useCompututaion();
const appRef = useAppRootContext();
Expand Down Expand Up @@ -85,7 +86,7 @@ const PivotTable: React.FC<PivotTableProps> = function PivotTableComponent(props
} else {
aggregateThenGenerate();
}
}, [data, enableCollapse]);
}, [data, enableCollapse, vizStore]);

useEffect(() => {
if (!enableCollapse || showTableSummary) {
Expand Down Expand Up @@ -233,6 +234,6 @@ const PivotTable: React.FC<PivotTableProps> = function PivotTableComponent(props
</div>
</div>
);
};
});

export default PivotTable;
5 changes: 3 additions & 2 deletions packages/graphic-walker/src/components/selectContext/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Fragment, useEffect, useRef, useState } from 'react';
import { Listbox, Transition } from '@headlessui/react';
import { CheckIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
import { Float } from '@headlessui-float/react';

export interface ISelectContextOption {
key: string;
Expand Down Expand Up @@ -43,7 +44,7 @@ const SelectContext: React.FC<ISelectContextProps> = (props) => {

return (
<Listbox multiple value={selected} onChange={setSelected}>
<div className={`relative ${className}`}>
<Float as="div" className={className}>
<div className="relative w-full flex items-center space-x-2">
<span className="flex-1 block truncate text-start">{props.children}</span>
<Listbox.Button className="grow-0 shrink-0 flex items-center relative">
Expand Down Expand Up @@ -85,7 +86,7 @@ const SelectContext: React.FC<ISelectContextProps> = (props) => {
))}
</Listbox.Options>
</Transition>
</div>
</Float>
</Listbox>
);
};
Expand Down
Loading

1 comment on commit 382c7d1

@vercel
Copy link

@vercel vercel bot commented on 382c7d1 Oct 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

graphic-walker – ./

graphic-walker-kanaries.vercel.app
graphic-walker-git-main-kanaries.vercel.app
graphic-walker-app.vercel.app
graphic-walker.kanaries.net

Please sign in to comment.