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.

Sign up for GitHub

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

Remove dynamic props #203

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Remove dynamic props #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae7c7cd
refactor(website): auto-stringify function props
hatemhosny Sep 9, 2024
925fc73
lint
hatemhosny Sep 9, 2024
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
51 changes: 4 additions & 47 deletions website/docs/gallery/_gallery-demos.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { Props } from '../../../src';
type ChartProps = Props & {
label: string;
dynamicProps?: Partial<Record<keyof Props, string>>;
};

export const autorunFalse: ChartProps = {
Expand All @@ -13,12 +12,8 @@ export const autorunFalse: ChartProps = {
export const captionDataFunction: ChartProps = {
label: 'Caption (data function)',
dataUrl: '/data/population.csv',
caption: (_currentDate, dateSlice, _allDates) =>
caption: (currentDate, dateSlice, allDates) =>
`Total: ${Math.round(dateSlice.reduce((acc, curr) => acc + curr.value, 0))}`,
dynamicProps: {
caption: `(currentDate, dateSlice, allDates) =>
\`Total: \${Math.round(dateSlice.reduce((acc, curr) => acc + curr.value, 0))}\``,
},
};

export const captionString: ChartProps = {
Expand Down Expand Up @@ -73,7 +68,6 @@ export const colorSeedRandom: ChartProps = {
dataUrl: '/data/population.csv',
title: 'World Population',
colorSeed: Math.round(Math.random() * 100),
dynamicProps: { colorSeed: 'Math.round(Math.random() * 100)' },
};

export const colorSeed: ChartProps = {
Expand Down Expand Up @@ -146,32 +140,20 @@ export const datasetGdp: ChartProps = {
dateCounter: 'YYYY',
showIcons: true,
labelsPosition: 'outside',
dynamicProps: {
dataTransform: `(data) => data.map((d) => ({ ...d, icon: \`https://flagsapi.com/\${d.code}/flat/64.png\` }))`,
},
};

export const datasetGhPush: ChartProps = {
label: 'GitHub Push Events Dataset',
dataUrl: '/data/gh-push.csv',
title: 'Top Programming Languages',
subTitle: 'Github Push Events',
dateCounter: (currentDate, _dateSlice, _allDates) => {
dateCounter: (currentDate, dateSlice, allDates) => {
const month = Number(currentDate.slice(5, 7));
const year = Number(currentDate.slice(0, 4));
const q = Math.floor(month / 3) + 1;
const quarter = q > 4 ? q - 4 : q;
return `Q${quarter} ${year}`;
},
dynamicProps: {
dateCounter: `(currentDate, dateSlice, allDates) => {
const month = Number(currentDate.slice(5, 7));
const year = Number(currentDate.slice(0, 4));
const q = Math.floor(month / 3) + 1;
const quarter = q > 4 ? q - 4 : q;
return \`Q\${quarter} \${year}\`;
}`,
},
};

export const datasetGhStars: ChartProps = {
Expand All @@ -180,22 +162,13 @@ export const datasetGhStars: ChartProps = {
title: 'Top Programming Languages',
subTitle: 'Github Stars',
makeCumulative: true,
dateCounter: (currentDate, _dateSlice, _allDates) => {
dateCounter: (currentDate, dateSlice, allDates) => {
const month = Number(currentDate.slice(5, 7));
const year = Number(currentDate.slice(0, 4));
const q = Math.floor(month / 3) + 1;
const quarter = q > 4 ? q - 4 : q;
return `Q${quarter} ${year}`;
},
dynamicProps: {
dateCounter: `(currentDate, dateSlice, allDates) => {
const month = Number(currentDate.slice(5, 7));
const year = Number(currentDate.slice(0, 4));
const q = Math.floor(month / 3) + 1;
const quarter = q > 4 ? q - 4 : q;
return \`Q\${quarter} \${year}\`;
}`,
},
};

export const datasetPopulation: ChartProps = {
Expand All @@ -212,9 +185,6 @@ export const datasetPopulation: ChartProps = {
dateCounter: 'YYYY',
showIcons: true,
labelsPosition: 'outside',
dynamicProps: {
dataTransform: `(data) => data.map((d) => ({ ...d, icon: \`https://flagsapi.com/\${d.code}/flat/64.png\` }))`,
},
};

export const dataTransform: ChartProps = {
Expand All @@ -228,9 +198,6 @@ export const dataTransform: ChartProps = {
title: 'World Population',
showIcons: true,
labelsPosition: 'outside',
dynamicProps: {
dataTransform: `(data) => data.map((d) => ({ ...d, icon: \`https://flagsapi.com/\${d.code}/flat/64.png\` }))`,
},
};

export const dateCounterFormat: ChartProps = {
Expand All @@ -242,12 +209,8 @@ export const dateCounterFormat: ChartProps = {
export const dateCounterDataFunction: ChartProps = {
label: 'Date Counter (data function)',
dataUrl: '/data/population.csv',
dateCounter: (currentDate, _dateSlice, allDates) =>
dateCounter: (currentDate, dateSlice, allDates) =>
`${allDates.indexOf(currentDate) + 1} of ${allDates.length}`,
dynamicProps: {
dateCounter: `(currentDate, dateSlice, allDates) =>
\`\${allDates.indexOf(currentDate) + 1} of \${allDates.length}\``,
},
};

export const fillDateGapsNull: ChartProps = {
Expand Down Expand Up @@ -309,9 +272,6 @@ export const icons: ChartProps = {
caption: 'Source: World Bank',
showIcons: true,
labelsPosition: 'outside',
dynamicProps: {
dataTransform: `(data) => data.map((d) => ({ ...d, icon: \`https://flagsapi.com/\${d.code}/flat/64.png\` }))`,
},
};

export const keyboardControls: ChartProps = {
Expand Down Expand Up @@ -339,9 +299,6 @@ export const labelsPositionNone: ChartProps = {
title: 'World Population',
labelsPosition: 'none',
showIcons: true,
dynamicProps: {
dataTransform: `(data) => data.map((d) => ({ ...d, icon: \`https://flagsapi.com/\${d.code}/flat/64.png\` }))`,
},
};

export const loop: ChartProps = {
Expand Down
3 changes: 2 additions & 1 deletion website/docs/gallery/color-seed-random.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ A demo for using random [color seed](../documentation/options.md#colorseed).

<!--truncate-->

Example:
Use `Math.round(Math.random() * 100)` as a value for `colorSeed`.
Refresh the page to get different bar colors.

### Chart
Expand All @@ -19,6 +21,5 @@ Refresh the page to get different bar colors.
dataType="csv"
title="World Population"
colorSeed={Math.round(Math.random() * 100)}
dynamicProps={{colorSeed: 'Math.round(Math.random() * 100)'}}
/>
</div>
17 changes: 0 additions & 17 deletions website/docs/guides/dynamic-values.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,22 +36,5 @@ export const getTotal = (currentDate, dateSlice, allDates) =>
subTitle={getTop5}
dateCounter={getYearQuarter}
caption={getTotal}
dynamicProps={{title: `function getYearRange(currentDate, dateSlice, allDates) {
return \`Top Languages (\${allDates[0].slice(0, 4)} - \${allDates[allDates.length - 1].slice(0, 4)})\`;
}`,
subTitle: `function getTop5(currentDate, dateSlice, allDates) {
return \`Top 5: \${dateSlice.slice(0, 5).map(d => d.name).join(', ')}\`;
}`,
dateCounter: `function getYearQuarter(currentDate, dateSlice, allDates) {
const month = Number(currentDate.slice(5, 7));
const year = Number(currentDate.slice(0, 4));
const q = Math.floor(month / 3) + 1;
const quarter = q > 4 ? q - 4 : q;
return \`Q\${quarter} \${year}\`;
}`,
caption: `function getTotal(currentDate, dateSlice, allDates) {
return \`Total: \${Math.round(dateSlice.reduce((acc, curr) => acc + curr.value, 0))}\`;
}`,
}}
/>
</div>
4 changes: 0 additions & 4 deletions website/docs/guides/icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,5 @@ icon: `https://flagsapi.com/${d.code}/flat/64.png`,
caption="Source: World Bank"
showIcons={true}
labelsPosition="outside"
dynamicProps={{dataTransform: `(data) => data.map((d) => ({
...d,
icon: \`https://flagsapi.com/\${d.code}/flat/64.png\`,
}))`}}
/>
</div>
8 changes: 2 additions & 6 deletions website/src/components/RacingBars/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,11 @@ export default function RacingBars(
style?: Record<string, string>;
className?: string;
showCode?: 'open' | 'closed' | false;
dynamicProps?: Record<keyof Props, string>;
label?: string;
},
): JSX.Element {
const { label, className, style, showCode, dynamicProps, callback, ...options } = props;
const { jsCode, tsCode, reactCode, vueCode, svelteCode } = getFrameworkCode(
options,
dynamicProps,
);
const { label, className, style, showCode, callback, ...options } = props;
const { jsCode, tsCode, reactCode, vueCode, svelteCode } = getFrameworkCode(options);
const { colorMode } = useColorMode();

const RacingBarsReact: React.ComponentType<Props & { children?: React.ReactNode }> = lazy(
Expand Down
9 changes: 5 additions & 4 deletions website/src/helpers/get-framework-code.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import type { Props } from '../../../src';

export const getFrameworkCode = (
options: any,
dynamicProps: Partial<Record<keyof Props, string>> = {},
) => {
export const getFrameworkCode = (options: any) => {
const dataUrl = options.dataUrl || '';

const dynamicProps = Object.keys(options)
.filter((key) => typeof options[key] === 'function')
.reduce((acc, key) => ({ ...acc, [key]: options[key].toString() }), {});

const stringify = (obj: Partial<Props>) => JSON.stringify(obj, null, 2);

const dynamicPropsTokens = Object.keys(dynamicProps).reduce(
Expand Down
18 changes: 5 additions & 13 deletions website/src/pages/playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,11 +139,8 @@ export default function Playground() {
const playgroundSDK = playground || sdk;
if (!playgroundSDK) return;
const langName = lang === 'jsx' ? 'react' : lang;
const { label: _, dynamicProps, ...demoOptions } = demo;
const content = prepareCode(
getFrameworkCode(demoOptions, dynamicProps)[`${langName}Code`] || '',
lang,
);
const { label: _, ...demoOptions } = demo;
const content = prepareCode(getFrameworkCode(demoOptions)[`${langName}Code`] || '', lang);
playgroundSDK.setConfig(getConfig(lang, content));
if (updateUrl) {
setLangQueryString('');
Expand All @@ -157,20 +154,15 @@ export default function Playground() {
if (!demo) return;
setDemo(demo);
const langName = language === 'jsx' ? 'react' : language;
const { label: _, dynamicProps, ...demoOptions } = demo;
const content = prepareCode(
getFrameworkCode(demoOptions, dynamicProps)[`${langName}Code`] || '',
language,
);
const { label: _, ...demoOptions } = demo;
const content = prepareCode(getFrameworkCode(demoOptions)[`${langName}Code`] || '', language);
playground.setConfig(getConfig(language, content));
updateQueryString(language, id);
};

const [playground, setPlayground] = useState<LiveCodesPlayground | null>(null);
const [language, setLanguage] = useState<(typeof allowedLanguages)[number]>(selectLanguage());
const [demo, setDemo] = useState<
Options & { label: string; dynamicProps: Partial<Record<keyof Options, string>> }
>(demoInUrl ?? defaultOptions);
const [demo, setDemo] = useState<Options & { label: string }>(demoInUrl ?? defaultOptions);
const [langQueryString, setLangQueryString] = useState('lang');

return (
Expand Down
Loading