refactor(website): auto-stringify function props

hatemhosny · Sep 9, 2024 · ae7c7cd · ae7c7cd
1 parent 03673c8
commit ae7c7cd
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 92 deletions.
diff --git a/website/docs/gallery/_gallery-demos.ts b/website/docs/gallery/_gallery-demos.ts
@@ -1,7 +1,6 @@
 import type { Props } from '../../../src';
 type ChartProps = Props & {
   label: string;
-  dynamicProps?: Partial<Record<keyof Props, string>>;
 };
 
 export const autorunFalse: ChartProps = {
@@ -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 = {
@@ -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 = {
@@ -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 = {
@@ -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 = {
@@ -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 = {
@@ -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 = {
@@ -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 = {
@@ -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 = {
@@ -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 = {

diff --git a/website/docs/gallery/color-seed-random.md b/website/docs/gallery/color-seed-random.md
@@ -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
@@ -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>
diff --git a/website/docs/guides/dynamic-values.md b/website/docs/guides/dynamic-values.md
@@ -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>
diff --git a/website/docs/guides/icons.md b/website/docs/guides/icons.md
@@ -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>
diff --git a/website/src/components/RacingBars/index.tsx b/website/src/components/RacingBars/index.tsx
@@ -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(

diff --git a/website/src/helpers/get-framework-code.ts b/website/src/helpers/get-framework-code.ts
@@ -1,10 +1,10 @@
 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);
 

diff --git a/website/src/pages/playground.tsx b/website/src/pages/playground.tsx
@@ -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('');
@@ -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 (