Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

Commit

Permalink
feat(demo): add helpers for resizable chart demo (#557)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ktmud
ktmud authored Jun 2, 2020
1 parent f6a8949 commit af7421d
Show file tree
Hide file tree
Showing 8 changed files with 139 additions and 42 deletions.
9 changes: 0 additions & 9 deletions packages/superset-ui-demo/.storybook/storybook.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,6 @@ body,
padding: 8px;
}

#root > div.superset-body {
background: #f5f5f5;
padding: 16px;
min-height: 100%;
}
#root > div.superset-body .panel {
margin-bottom: 0;
}

code {
background: none;
}
5 changes: 4 additions & 1 deletion packages/superset-ui-demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,18 @@
"@superset-ui/number-format": "0.13.21",
"@superset-ui/plugin-chart-word-cloud": "0.13.24",
"@superset-ui/query": "0.13.21",
"@superset-ui/style": "0.13.21",
"@superset-ui/time-format": "0.13.22",
"@superset-ui/translation": "0.13.21",
"@types/react-resizable": "^1.7.2",
"@types/storybook__react": "5.2.1",
"bootstrap": "^3.4.1",
"core-js": "3.6.5",
"gh-pages": "^2.2.0",
"jquery": "^3.4.1",
"react": "^16.13.1",
"storybook-addon-jsx": "^7.1.0"
"react-resizable": "^1.10.1",
"storybook-addon-jsx": "^7.2.3"
},
"devDependencies": {
"@babel/core": "^7.9.0",
Expand Down
45 changes: 45 additions & 0 deletions packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import styled from '@superset-ui/style';
import React, { useState, ReactNode } from 'react';
import { DecoratorFunction } from '@storybook/addons';
import ResizablePanel, { Size } from './ResizablePanel';

export const SupersetBody = styled.div`
background: #f5f5f5;
padding: 16px;
min-height: 100%;
.panel {
margin-bottom: 0;
}
`;

export default function ResizableChartDemo({
children,
panelPadding = 30,
initialSize = { width: 500, height: 300 },
}: {
children: (innerSize: Size) => ReactNode;
panelPadding?: number;
initialSize?: Size;
}) {
// size are all inner size
const [size, setSize] = useState(initialSize);
return (
<SupersetBody>
<ResizablePanel initialSize={initialSize} onResize={(e, data) => setSize(data.size)}>
{children({ width: size.width - panelPadding, height: size.height - panelPadding })}
</ResizablePanel>
</SupersetBody>
);
}

export const withResizableChartDemo: DecoratorFunction<ReactNode> = (storyFn, context) => {
const {
parameters: { initialSize, panelPadding },
} = context;
return (
<ResizableChartDemo initialSize={initialSize as Size | undefined} panelPadding={panelPadding}>
{innerSize => storyFn({ ...context, ...innerSize })}
</ResizableChartDemo>
);
};
40 changes: 40 additions & 0 deletions packages/superset-ui-demo/storybook/shared/components/ResizablePanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React, { PropsWithChildren, ReactNode } from 'react';
import { ResizableBox, ResizableBoxProps, ResizeCallbackData } from 'react-resizable';

import 'react-resizable/css/styles.css';

export type Size = ResizeCallbackData['size'];

export default function ResizablePanel({
children,
heading = undefined,
initialSize = { width: 500, height: 300 },
minConstraints = [100, 100] as [number, number],
onResize,
...props
}: PropsWithChildren<Omit<ResizableBoxProps, 'width' | 'height'>> & {
heading?: ReactNode;
initialSize?: Size;
}) {
const { width, height } = initialSize;
return (
<ResizableBox
className="panel"
width={width}
height={height}
minConstraints={minConstraints}
onResize={
onResize
? (e, data) => {
const { size } = data;
onResize(e, { ...data, size });
}
: undefined
}
{...props}
>
{heading ? <div className="panel-heading">{heading}</div> : null}
<div className="panel-body">{children}</div>
</ResizableBox>
);
}
5 changes: 3 additions & 2 deletions ...ges/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-table/TableStories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { SuperChart } from '@superset-ui/chart';
import { Props as SuperChartProps } from '@superset-ui/chart/src/components/SuperChart';
import TableChartPlugin from '@superset-ui/legacy-plugin-chart-table';
import { SupersetBody } from '../../../shared/components/ResizableChartDemo';
import data, { birthNames } from './data';
import 'bootstrap/dist/css/bootstrap.min.css';

Expand Down Expand Up @@ -109,7 +110,7 @@ export const bigTable = () => {
};

return (
<div className="superset-body">
<SupersetBody>
<div className="panel">
<div className="panel-heading form-inline">
<div className="form-group">
Expand Down Expand Up @@ -151,6 +152,6 @@ export const bigTable = () => {
<SuperChart {...chartProps} chartType="table" />
</div>
</div>
</div>
</SupersetBody>
);
};
27 changes: 14 additions & 13 deletions packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-word-cloud/Stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
LegacyWordCloudChartPlugin,
} from '@superset-ui/plugin-chart-word-cloud';
import transformProps from '@superset-ui/plugin-chart-word-cloud/lib/plugin/transformProps';
import { withResizableChartDemo } from '../../../shared/components/ResizableChartDemo';
import data from './data';

new WordCloudChartPlugin().configure({ key: 'word-cloud2' }).register();
Expand All @@ -17,14 +18,14 @@ getChartTransformPropsRegistry().registerValue('word-cloud2', transformProps);

export default {
title: 'Chart Plugins|plugin-chart-word-cloud',
decorators: [withKnobs],
decorators: [withKnobs, withResizableChartDemo],
};

export const basic = () => (
export const basic = ({ width, height }) => (
<SuperChart
chartType="word-cloud2"
width={400}
height={400}
width={width}
height={height}
queryData={{ data }}
formData={{
encoding: {
Expand All @@ -50,11 +51,11 @@ export const basic = () => (
/>
);

export const encodesColorByWordLength = () => (
export const encodesColorByWordLength = ({ width, height }) => (
<SuperChart
chartType="word-cloud2"
width={400}
height={400}
width={width}
height={height}
queryData={{ data }}
formData={{
encoding: {
Expand Down Expand Up @@ -86,11 +87,11 @@ export const encodesColorByWordLength = () => (
/>
);

export const encodesFontByFirstLetter = () => (
export const encodesFontByFirstLetter = ({ width, height }) => (
<SuperChart
chartType="word-cloud2"
width={400}
height={400}
width={width}
height={height}
queryData={{ data }}
formData={{
encoding: {
Expand Down Expand Up @@ -124,11 +125,11 @@ export const encodesFontByFirstLetter = () => (
/>
);

export const legacyShim = () => (
export const legacyShim = ({ width, height }) => (
<SuperChart
chartType="legacy-word-cloud2"
width={400}
height={400}
width={width}
height={height}
queryData={{ data }}
formData={{
colorScheme: 'd3Category10',
Expand Down
22 changes: 12 additions & 10 deletions packages/superset-ui-demo/storybook/stories/superset-ui-chart/SuperChartStories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
BuggyChartPlugin,
ChartKeys,
} from '@superset-ui/chart/test/components/MockChartPlugins';
import ResizableChartDemo from '../../shared/components/ResizableChartDemo';

new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }).register();
new BuggyChartPlugin().configure({ key: ChartKeys.BUGGY }).register();
Expand Down Expand Up @@ -47,17 +48,18 @@ export const container50pct = () => {
};
container50pct.story = { name: '50% of container' };

export const fixedDimension = () => {
const width = text('Vis width', '500');
const height = text('Vis height', '300');

export const Resizable = () => {
return (
<SuperChart
chartType={ChartKeys.DILIGENT}
height={height}
width={width}
queryData={DEFAULT_QUERY_DATA}
/>
<ResizableChartDemo>
{size => (
<SuperChart
chartType={ChartKeys.DILIGENT}
width={size.width}
height={size.height}
queryData={DEFAULT_QUERY_DATA}
/>
)}
</ResizableChartDemo>
);
};

Expand Down
28 changes: 21 additions & 7 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3210,7 +3210,7 @@
simplebar-react "^1.0.0-alpha.6"
ts-dedent "^1.1.0"

"@storybook/[email protected]", "@storybook/components@^5.2.5":
"@storybook/[email protected]":
version "5.3.19"
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.3.19.tgz#aac1f9eea1247cc85bd93b10fca803876fb84a6b"
integrity sha512-3g23/+ktlocaHLJKISu9Neu3XKa6aYP2ctDYkRtGchSB0Q55hQsUVGO+BEVuT7Pk2D59mVCxboBjxcRoPUY4pw==
Expand Down Expand Up @@ -3960,6 +3960,13 @@
"@types/react" "*"
"@types/webpack" "*"

"@types/react-resizable@^1.7.2":
version "1.7.2"
resolved "https://registry.yarnpkg.com/@types/react-resizable/-/react-resizable-1.7.2.tgz#ff7f6d67394abb6f64207fcc574ffccb932d8a97"
integrity sha512-6c6L94+VOksr9838LDrlYeucic2+0qkGnwolGE77YJztYHCWSucQV0e9+Qyl+uHpJTBRS95A5JESBg5NgCAC3A==
dependencies:
"@types/react" "*"

"@types/[email protected]":
version "11.0.4"
resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
Expand Down Expand Up @@ -14590,7 +14597,7 @@ [email protected]:
fbjs "^0.8.9"
loose-envify "^1.3.1"

prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -15091,6 +15098,14 @@ react-prop-types@^0.4.0:
dependencies:
warning "^3.0.0"

react-resizable@^1.10.1:
version "1.10.1"
resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.10.1.tgz#f0c2cf1d83b3470b87676ce6d6b02bbe3f4d8cd4"
integrity sha512-Jd/bKOKx6+19NwC4/aMLRu/J9/krfxlDnElP41Oc+oLiUWs/zwV1S9yBfBZRnqAwQb6vQ/HRSk3bsSWGSgVbpw==
dependencies:
prop-types "15.x"
react-draggable "^4.0.3"

react-select@^1.2.1:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.3.0.tgz#1828ad5bf7f3e42a835c7e2d8cb13b5c20714876"
Expand Down Expand Up @@ -16635,12 +16650,11 @@ store2@^2.7.1:
resolved "https://registry.yarnpkg.com/store2/-/store2-2.11.0.tgz#307636a239014ef4d8f1c8b47afe903509484fc8"
integrity sha512-WeIZ5+c/KzBSutSqOjUCAkk1qTLVBcYUuvrhNx8ndjLZKdZRfP6Vv7AOxlynuL6tVU/6zt6e2CTHwWI5KE+fKg==

storybook-addon-jsx@^7.1.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/storybook-addon-jsx/-/storybook-addon-jsx-7.2.0.tgz#06f3345c2e98180336f9a32b523d51eef07ff7b4"
integrity sha512-DW0oYXINrfcKPH/48vjKFHwg4DnujWCuqjjJtd/YeDla50fELf5SxvW4Qyp9Gd77ccDnFZKokWNCfuS5tMxtsw==
storybook-addon-jsx@^7.2.3:
version "7.2.3"
resolved "https://registry.yarnpkg.com/storybook-addon-jsx/-/storybook-addon-jsx-7.2.3.tgz#754c54407d2f656568bb40cd6d2a85fb92cf1798"
integrity sha512-8KJNtejqsYHcdgCI7Mf+1UlBG7Ya4JyFiDMwmT5ZixhKNcbJh9yUdF+/yYp4rguhRuCxZ783gs1XiD0REVzDug==
dependencies:
"@storybook/components" "^5.2.5"
copy-to-clipboard "^3.0.8"
js-beautify "^1.8.8"
react-element-to-jsx-string "^14.3.1"
Expand Down

1 comment on commit af7421d

@vercel
Copy link

@vercel vercel bot commented on af7421d Jun 2, 2020

Choose a reason for hiding this comment

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

Successfully deployed to following URLs:

Please sign in to comment.