From 2814ffb1c7e7f9394e42d549a0fdc199ed6e447c Mon Sep 17 00:00:00 2001 From: islxyqwe Date: Tue, 27 Feb 2024 11:30:16 +0800 Subject: [PATCH 1/3] fix: datasource export --- .../graphic-walker/src/dataSourceProvider/localStorage.ts | 4 ++-- packages/graphic-walker/src/dataSourceProvider/memory.ts | 2 +- packages/graphic-walker/src/vanilla.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/graphic-walker/src/dataSourceProvider/localStorage.ts b/packages/graphic-walker/src/dataSourceProvider/localStorage.ts index b13df0a6..cb3e180d 100644 --- a/packages/graphic-walker/src/dataSourceProvider/localStorage.ts +++ b/packages/graphic-walker/src/dataSourceProvider/localStorage.ts @@ -1,8 +1,8 @@ -import createMemoryProvider from './memory'; +import { createMemoryProvider } from './memory'; const key = 'KANARIES_GRAPHIC_WALKER_DATA'; -export default function createLocalStorageProvider() { +export function createLocalStorageProvider() { const provider = createMemoryProvider(localStorage.getItem(key)); provider.registerCallback(() => { localStorage.setItem(key, provider.exportData()); diff --git a/packages/graphic-walker/src/dataSourceProvider/memory.ts b/packages/graphic-walker/src/dataSourceProvider/memory.ts index 7fc5199c..f185ca73 100644 --- a/packages/graphic-walker/src/dataSourceProvider/memory.ts +++ b/packages/graphic-walker/src/dataSourceProvider/memory.ts @@ -2,7 +2,7 @@ import { getComputation } from '../computation/clientComputation'; import { IDataSourceEventType, IDataSourceListener, IDataSourceProvider } from '../interfaces'; import { DataStore } from '../store/dataStore'; -export default function createMemoryProvider(initData?: string | null): IDataSourceProvider & { exportData(): string } { +export function createMemoryProvider(initData?: string | null): IDataSourceProvider & { exportData(): string } { const store = new DataStore(); const listeners: IDataSourceListener[] = []; diff --git a/packages/graphic-walker/src/vanilla.tsx b/packages/graphic-walker/src/vanilla.tsx index e07d13b2..b0e2acb7 100644 --- a/packages/graphic-walker/src/vanilla.tsx +++ b/packages/graphic-walker/src/vanilla.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import ReactDOM from 'react-dom'; import { DataSourceSegmentComponent, GraphicWalker, IGWProps } from './index'; -import createMemoryProvider from './dataSourceProvider/memory'; +import { createMemoryProvider } from './dataSourceProvider/memory'; function FullGraphicWalker(props: IGWProps) { const provider = useMemo(() => createMemoryProvider(), []); From 2d34aa1455d981043e3b0417631a37247e4d2ab8 Mon Sep 17 00:00:00 2001 From: islxyqwe Date: Tue, 27 Feb 2024 12:24:41 +0800 Subject: [PATCH 2/3] fix: add color config for pure renderer --- packages/graphic-walker/src/renderer/pureRenderer.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/graphic-walker/src/renderer/pureRenderer.tsx b/packages/graphic-walker/src/renderer/pureRenderer.tsx index 7c82dd1a..7c2f273a 100644 --- a/packages/graphic-walker/src/renderer/pureRenderer.tsx +++ b/packages/graphic-walker/src/renderer/pureRenderer.tsx @@ -15,6 +15,7 @@ import type { IComputationFunction, IVisualLayout, IChannelScales, + IColorConfig, } from '../interfaces'; import type { IReactVegaHandler } from '../vis/react-vega'; import SpecRenderer from './specRenderer'; @@ -34,6 +35,7 @@ type IPureRendererProps = { visualState: DraggableFieldState; visualConfig: IVisualConfigNew | IVisualConfig; visualLayout?: IVisualLayout; + colorConfig?: IColorConfig; locale?: string; channelScales?: IChannelScales; overrideSize?: IVisualLayout['size']; @@ -57,7 +59,7 @@ export type ILocalPureRendererProps = IPureRendererProps & LocalProps & React.Re * This is a pure component, which means it will not depend on any global state. */ const PureRenderer = forwardRef(function PureRenderer(props, ref) { - const { name, className, themeKey, dark, visualState, visualConfig, visualLayout: layout, overrideSize, locale, type, themeConfig, channelScales } = props; + const { name, className, themeKey, dark, visualState, visualConfig, visualLayout: layout, overrideSize, locale, type, themeConfig, channelScales, colorConfig } = props; const computation = useMemo(() => { if (props.type === 'remote') { return props.computation; @@ -133,7 +135,7 @@ const PureRenderer = forwardRef(null); return ( - + Date: Tue, 27 Feb 2024 12:30:06 +0800 Subject: [PATCH 3/3] feat: add table walker example --- README.md | 19 ++++++++++++++++++- packages/playground/src/examples/nav.tsx | 4 ++++ .../src/examples/pages/cc.stories.tsx | 2 +- .../src/examples/pages/ds.stories.tsx | 2 +- .../src/examples/pages/inModal.stories.tsx | 2 +- .../src/examples/pages/table.stories.tsx | 11 +++++++++++ .../playground/src/examples/pages/table.tsx | 11 +++++++++++ 7 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 packages/playground/src/examples/pages/table.stories.tsx create mode 100644 packages/playground/src/examples/pages/table.tsx diff --git a/README.md b/README.md index 5ebc7149..fe1371ec 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,7 @@ If you want to use Graphic Walker as a data exploration tool without thinking ab Use it here: [Graphic Walker Online](https://graphic-walker.kanaries.net) -Examples here: [Graphic Walker Examples](https://graphic-walker.kanaries.net/examples) +Examples here: [Graphic Walker Examples](https://graphic-walker.kanaries.net/examples/) ### Method 1: use as an independent app. ```bash @@ -156,6 +156,23 @@ const YourChart: React.FC = props => { export default YourChart; ``` +You can use `TableWalker` component to make a single table view with your data. it accepts same props as `GraphicWalker`, but you don't need to pass the chart prop, and you can control the page size by pageSize prop(default value is 20). + +```typescript +import { TableWalker } from '@kanaries/graphic-walker'; + +const YourChart: React.FC = props => { + const { dataSource, fields, spec } = props; + return ; +} + +export default YourChart; +``` + ### try local (dev mode) ```bash # packages/graphic-walker diff --git a/packages/playground/src/examples/nav.tsx b/packages/playground/src/examples/nav.tsx index 502a225d..73b246d0 100644 --- a/packages/playground/src/examples/nav.tsx +++ b/packages/playground/src/examples/nav.tsx @@ -23,6 +23,10 @@ export const pages = [ comp: () => import('./pages/cc'), name: 'CustomColor', }, + { + comp: () => import('./pages/table'), + name: 'TableWalker', + }, ].map((Component) => ({ name: Component.name, path: Component.name.replace(/\s/g, '_'), diff --git a/packages/playground/src/examples/pages/cc.stories.tsx b/packages/playground/src/examples/pages/cc.stories.tsx index a042e432..9b6b24ee 100644 --- a/packages/playground/src/examples/pages/cc.stories.tsx +++ b/packages/playground/src/examples/pages/cc.stories.tsx @@ -28,7 +28,7 @@ const colorConfig: IColorConfig = { export default function GraphicWalkerComponent() { const { theme } = useContext(themeContext); - const { dataSource, fields } = useFetch('https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-students-service.json'); + const { dataSource, fields } = useFetch('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json'); return (
diff --git a/packages/playground/src/examples/pages/ds.stories.tsx b/packages/playground/src/examples/pages/ds.stories.tsx index 11685ed7..b30e3e2f 100644 --- a/packages/playground/src/examples/pages/ds.stories.tsx +++ b/packages/playground/src/examples/pages/ds.stories.tsx @@ -10,7 +10,7 @@ export default function DataSourceSegment() { const { theme } = useContext(themeContext); const provider = getProvider(); return ( - + {(p) => { return ( (null); const { theme } = useContext(themeContext); - const { dataSource, fields } = useFetch('https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-students-service.json'); + const { dataSource, fields } = useFetch('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json'); useEffect(() => { setTimeout(() => { diff --git a/packages/playground/src/examples/pages/table.stories.tsx b/packages/playground/src/examples/pages/table.stories.tsx new file mode 100644 index 00000000..0c8b4e8b --- /dev/null +++ b/packages/playground/src/examples/pages/table.stories.tsx @@ -0,0 +1,11 @@ +import { useContext } from 'react'; +import { TableWalker } from '@kanaries/graphic-walker'; +import { themeContext } from '../context'; +import { useFetch, IDataSource } from '../util'; + +export default function GraphicWalkerComponent() { + const { theme } = useContext(themeContext); + const { dataSource, fields } = useFetch('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json'); + + return ; +} diff --git a/packages/playground/src/examples/pages/table.tsx b/packages/playground/src/examples/pages/table.tsx new file mode 100644 index 00000000..f5c34351 --- /dev/null +++ b/packages/playground/src/examples/pages/table.tsx @@ -0,0 +1,11 @@ +import Example from '../components/examplePage'; +import code from './table.stories?raw'; +import Comp from './table.stories'; + +export default function GraphicWalkerComponent() { + return ( + + + + ); +}