Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add examples for tablewalker component #332

Merged
merged 3 commits into from
Feb 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -156,6 +156,23 @@ const YourChart: React.FC<IYourChartProps> = 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<IYourChartProps> = props => {
const { dataSource, fields, spec } = props;
return <TableWalker
dataSource={dataSource}
rawFields={fields}
pageSize={50}
/>;
}

export default YourChart;
```

### try local (dev mode)
```bash
# packages/graphic-walker
Expand Down
Original file line number Diff line number Diff line change
@@ -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());
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/dataSourceProvider/memory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [];

Expand Down
6 changes: 4 additions & 2 deletions packages/graphic-walker/src/renderer/pureRenderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type {
IComputationFunction,
IVisualLayout,
IChannelScales,
IColorConfig,
} from '../interfaces';
import type { IReactVegaHandler } from '../vis/react-vega';
import SpecRenderer from './specRenderer';
Expand All @@ -34,6 +35,7 @@ type IPureRendererProps = {
visualState: DraggableFieldState;
visualConfig: IVisualConfigNew | IVisualConfig;
visualLayout?: IVisualLayout;
colorConfig?: IColorConfig;
locale?: string;
channelScales?: IChannelScales;
overrideSize?: IVisualLayout['size'];
Expand All @@ -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<IReactVegaHandler, IPureRendererProps & (LocalProps | RemoteProps)>(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;
Expand Down Expand Up @@ -133,7 +135,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps & (LocalPr
const [portal, setPortal] = useState<HTMLDivElement | null>(null);

return (
<ShadowDom style={sizeMode === 'full' ? { width: '100%', height: '100%' } : undefined} className={className}>
<ShadowDom style={sizeMode === 'full' ? { width: '100%', height: '100%' } : undefined} className={className} colorConfig={colorConfig}>
<VizAppContext
ComputationContext={computation}
themeContext={darkMode}
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/vanilla.tsx
Original file line number Diff line number Diff line change
@@ -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(), []);
Expand Down
4 changes: 4 additions & 0 deletions packages/playground/src/examples/nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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, '_'),
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/examples/pages/cc.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const colorConfig: IColorConfig = {

export default function GraphicWalkerComponent() {
const { theme } = useContext(themeContext);
const { dataSource, fields } = useFetch<IDataSource>('https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-students-service.json');
const { dataSource, fields } = useFetch<IDataSource>('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json');
return (
<div className="bg-amber-100 dark:bg-amber-900 p-4">
<GraphicWalker rawFields={fields} dataSource={dataSource} dark={theme} colorConfig={colorConfig} />
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/examples/pages/ds.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function DataSourceSegment() {
const { theme } = useContext(themeContext);
const provider = getProvider();
return (
<DataSourceSegmentComponent provider={provider}>
<DataSourceSegmentComponent dark={theme} provider={provider}>
{(p) => {
return (
<GraphicWalker
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/examples/pages/inModal.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useFetch, IDataSource } from '../util';
export default function GraphicWalkerInModal() {
const ref = useRef<VizSpecStore>(null);
const { theme } = useContext(themeContext);
const { dataSource, fields } = useFetch<IDataSource>('https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-students-service.json');
const { dataSource, fields } = useFetch<IDataSource>('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json');

useEffect(() => {
setTimeout(() => {
Expand Down
11 changes: 11 additions & 0 deletions packages/playground/src/examples/pages/table.stories.tsx
Original file line number Diff line number Diff line change
@@ -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<IDataSource>('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json');

return <TableWalker rawFields={fields} dataSource={dataSource} dark={theme} pageSize={50} />;
}
11 changes: 11 additions & 0 deletions packages/playground/src/examples/pages/table.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Example name="TableWalker" code={code}>
<Comp />
</Example>
);
}
Loading