добавил презентацию

package.json

@@ -14,6 +14,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "axios": "^1.4.0",
+    "chart.js": "^4.4.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "focus-visible": "^5.2.0",

src/api/deck/getDeck.ts

@@ -0,0 +1,49 @@
+import {Question} from './types';
+import {axios} from '../../lib/axios';
+import {
+  DECK_API_URL,
+  QUESTION_API_URL,
+  QUESTION_PARAM_DECK_ID,
+  QUESTION_PARAM_QUESTION_ID,
+} from './urlKeys';
+import {ExtractFnReturnType, QueryConfig} from '../../lib/react-query';
+import {useQuery} from '@tanstack/react-query';
+import {QUERY_KEY_DECKS, QUERY_KEY_QUESTION} from './queryKeys';
+
+export type GetDeckResponse = {
+  deck: {
+    name: string;
+    description: string;
+  },
+  slides: {
+    slide: number;
+    data: {
+      slug: string;
+      answer: any;
+    }[];
+  }[];
+};
+
+export const getDeck = ({ deckId }: { deckId: number }): Promise<GetDeckResponse> => {
+  return axios.get(
+    DECK_API_URL
+      .replace(`:${QUESTION_PARAM_DECK_ID}`, String(deckId))
+  );
+};
+
+type QueryFnType = typeof getDeck;
+
+type UseDeckOptions = {
+  deckId: number;
+  config?: QueryConfig<QueryFnType>;
+};
+
+export const useDeck = ({ deckId, config }: UseDeckOptions) => {
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
+    ...config,
+    queryKey: [QUERY_KEY_DECKS, deckId],
+    queryFn: async () => {
+      return await getDeck({ deckId });
+    },
+  });
+};

src/api/deck/urlKeys.ts

@@ -1,9 +1,11 @@
 export const DECKS_API_URL = '/decks/';
 
-
 export const FIRST_QUESTION_PARAM = 'deckId';
 export const FIRST_QUESTION_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}`;
 
 export const QUESTION_PARAM_DECK_ID = 'deckId';
 export const QUESTION_PARAM_QUESTION_ID = 'questionId';
 export const QUESTION_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/:${QUESTION_PARAM_QUESTION_ID}`;
+
+export const DECK_PARAM = 'deckId';
+export const DECK_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/presentation`;

src/app/styles/baseText.scss

@@ -1,6 +1,5 @@
 $font-family-raleway: 'Raleway';
 $font-family-ibm-plex-mono: 'IBM Plex Mono';
-$font-family-lora: 'Lora', serif;
 
 $font-family-default: system-ui, /* macOS 10.11-10.12 */ -apple-system, /* Windows 6+ */ 'Segoe UI',
   /* Android 4+ */ 'Roboto', /* Ubuntu 10.10+ */ 'Ubuntu', /* Gnome 3+ */ 'Cantarell', /* KDE Plasma 5+ */ 'Noto Sans',
@@ -152,10 +151,3 @@ $line-height-67: 67px;
   font-weight: $font-weight-400;
   line-height: $line-height-16;
 }
-
-@mixin text-presentation {
-  font-family: $font-family-lora;
-  font-size: $font-size-16;
-  font-weight: $font-weight-400;
-  line-height: $line-height-20;
-}

src/app/styles/fonts.scss

@@ -46,11 +46,3 @@ $fonts-path: '../../assets/fonts' !default;
   font-style: normal;
   font-display: swap;
 }
-
-@font-face {
-  font-family: $font-family-lora;
-  src: url('#{$fonts-path}/Lora/Lora-Regular.ttf') format('truetype');
-  font-weight: $font-weight-400;
-  font-style: normal;
-  font-display: swap;
-}

src/assets/icons/loader.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C11.4474 3 10.9994 3.448 10.9994 4.00065C10.9994 4.55329 11.4474 5.00129 12 5.00129C15.8653 5.00129 18.9987 8.13472 18.9987 12C18.9987 15.8653 15.8653 18.9987 12 18.9987C8.13472 18.9987 5.00129 15.8653 5.00129 12C5.00129 11.4474 4.55329 10.9994 4.00065 10.9994C3.448 10.9994 3 11.4474 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" fill="currentColor"/>
+</svg>

src/components/Hint/Hint.module.scss

@@ -54,7 +54,7 @@
   position: absolute;
   top: -4px;
   right: -4px;
-  background-color: white;
+  background-color: $color-on-surface-light-100;
   z-index: 1;
   padding: 2px 4px;
   width: 16px;

src/components/Loader/Loader.module.scss

@@ -0,0 +1,25 @@
+@import 'src/app/styles/vars';
+
+.Loader {
+  display: flex;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+}
+
+.LoaderIcon {
+  width: 100%;
+  height: 100%;
+  color: $color-on-surface-dark-100;
+  animation: spinner 0.7s linear infinite;
+}
+
+@keyframes spinner {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/Loader/Loader.tsx

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import clsx from 'clsx';
+import s from './Loader.module.scss';
+import { ReactComponent as LoaderIcon } from '../../assets/icons/loader.svg';
+
+// export enum LoaderSize {
+//   /**
+//    * Размер лоадера 20х20
+//    */
+//   small = 'small',
+//   /**
+//    * Размер лоадера 30х30
+//    */
+//   medium = 'medium',
+//   /**
+//    * Размер лоадера 40х40
+//    */
+//   large = 'large'
+// }
+
+export interface LoaderProps {
+  className?: string;
+}
+
+export const Loader = memo((props: LoaderProps) => {
+  const { className } = props;
+
+  return (
+    <div className={clsx(s.Loader, className)}>
+      <LoaderIcon className={clsx(s.LoaderIcon)}  />
+    </div>
+  );
+});
+
+Loader.displayName = 'Loader';

src/components/Loader/index.ts

@@ -0,0 +1 @@
+export * from './Loader';

src/config.ts

@@ -1,3 +1,3 @@
-// export const API_URL = 'http://192.168.83.181:8000/api';
+export const API_URL = 'http://192.168.83.181:8000/api';
 // export const API_URL = 'http://192.168.22.4:8000/api';
-export const API_URL = 'https://ed68-77-234-219-9.ngrok-free.app/api';
+// export const API_URL = 'https://ed68-77-234-219-9.ngrok-free.app/api';

src/index.tsx

@@ -1,38 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
-// import {App} from './app';
+import {App} from './app';
 import {AppProvider} from './app';
-import {PDFViewer, pdf} from '@react-pdf/renderer';
-import {Document} from './pages/deck/document/Document';
 
-// import 'focus-visible';
-//
-// import 'sanitize.css';
-// import 'sanitize.css/forms.css';
-// import 'sanitize.css/typography.css';
-// import './app/styles/index.scss';
+import 'focus-visible';
+
+import 'sanitize.css';
+import 'sanitize.css/forms.css';
+import 'sanitize.css/typography.css';
+import './app/styles/index.scss';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
-// root.render(
-//   // <React.StrictMode>
-//     <AppProvider>
-//       <App />
-//     </AppProvider>
-//   // </React.StrictMode>
-// );
+root.render(
+  // <React.StrictMode>
+    <AppProvider>
+      <App />
+    </AppProvider>
+  // </React.StrictMode>
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-// reportWebVitals();
-
-const App = () => (
-  <PDFViewer>
-    <Document />
-  </PDFViewer>
-);
-
-root.render(<App />);
+reportWebVitals();

src/pages/chat/ChatPage.tsx

@@ -16,6 +16,8 @@ import {usePrevious} from '../../hooks/usePrevious';
 import {generateAnswerFromData} from './utils/generateAnswerFromData';
 import {generateTextFromAnswer} from './utils/generateTextFromAnswer';
 import {Button, ButtonVariant} from '../../components/Button';
+import {useNavigate} from 'react-router-dom';
+import {DECK_PAGE_PARAM, DECK_PAGE_ROUTE} from '../../app/routes';
 
 export interface ChatPageProps {
   /**
@@ -26,8 +28,8 @@ export interface ChatPageProps {
 
 const QUESTION_POLLING_MS = 1000;
 
-const DEFAULT_DECK_ID = 65;
-const DEFAULT_QUESTION_ID = 32;
+const DEFAULT_DECK_ID = 0;
+const DEFAULT_QUESTION_ID = 0;
 
 export const ChatPage: ReactFCC<ChatPageProps> = (props) => {
   const {className} = props;
@@ -115,6 +117,7 @@ export const ChatPage: ReactFCC<ChatPageProps> = (props) => {
 
 
   const { mutateAsync: createAnswer } = useCreateAnswer();
+  const navigate = useNavigate();
 
   const onSubmit: SubmitHandler<any> = useCallback(async (data) => {
     if (!question || !data.value) {
@@ -136,16 +139,24 @@ export const ChatPage: ReactFCC<ChatPageProps> = (props) => {
       text: generateTextFromAnswer(question.type, answer)
     });
 
-    setQuestionId(question!.next_id);
+    if (question.next_id) {
+      setQuestionId(question!.next_id);
+    } else {
+      navigate(DECK_PAGE_ROUTE.replace(`:${DECK_PAGE_PARAM}`, String(deckId)))
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [createAnswer, deckId, pushHistory, question, questionId]);
 
   // Пропуск вопроса
   const onSkip = useCallback(() => {
     if (question && !question.params?.required) {
-      setQuestionId(question.next_id);
+      if (question.next_id) {
+        setQuestionId(question!.next_id);
+      } else {
+        navigate(DECK_PAGE_ROUTE.replace(`:${DECK_PAGE_PARAM}`, String(deckId)))
+      }
     }
-  }, [question]);
+  }, [deckId, navigate, question]);
 
   // ---------- Скролл чата ----------
   // todo при печатании текста тоже двигать скролл

src/pages/chat/components/ChatForm/components/ChatFormMultipleDateDescription/ChatFormMultipleDateDescription.tsx

@@ -36,7 +36,6 @@ export const ChatFormMultipleDateDescription: ReactFCC<ChatFormMultipleDateDescr
                   for (const date in hint.value) {
                     newValue[format(new Date(date),'yyyy-MM-dd')] = hint.value[date]
                   }
-                  console.log(hint.value);
                   setValue({ ...hint.value })
                 }}
               >

src/pages/chat/components/ChatForm/components/ChatFormMultipleLinkDescription/ChatFormMultipleLinkDescription.tsx

@@ -49,7 +49,6 @@ export const ChatFormMultipleLinkDescription: ReactFCC<ChatFormMultipleLinkDescr
                       const newValue = { ...value };
                       const text = newValue[link];
                       delete newValue[link];
-                      console.log()
                       onChange({ ...newValue, [e.target.value]: text })
                     }}
                   />

src/pages/deck/DeckPage.module.scss

@@ -0,0 +1,14 @@
+@import 'src/app/styles/vars';
+
+.DeckPage {
+  position: relative;
+  height: 100svh;
+}
+
+.DeckPage__loader {
+  width: 50px !important;
+  height: 50px !important;
+  position: absolute;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+}

src/pages/deck/DeckPage.tsx

@@ -2,15 +2,89 @@ import {ReactFCC} from '../../utils/ReactFCC';
 import {PDFViewer} from '@react-pdf/renderer';
 import {useUrlParam} from '../../hooks/useUrlParam';
 import {DECK_PAGE_PARAM} from '../../app/routes';
-import {Document} from './document/Document';
+import {MyDocument} from './document/Document';
+import {useDeck} from '../../api/deck/getDeck';
+import {useEffect, useRef, useState} from 'react';
+import {generateMarketChart} from './document/media/generateMarketChart';
+import {Loader} from '../../components/Loader';
+import s from './DeckPage.module.scss';
+import {generateFinancialChart} from './document/media/generateFinancialChart';
+import {generateGrowChart} from './document/media/generateGrowChart';
 
 export const DeckPage: ReactFCC = () => {
   const deckId = useUrlParam(DECK_PAGE_PARAM, {parser: parseInt});
-  console.log(deckId);
+
+  const { data } = useDeck({
+    deckId: deckId ?? 0,
+    config: {
+      enabled: !!deckId
+    }
+  });
+
+  const [marketChart, setMarketChart] = useState('');
+  const [financialChart, setFinancialChart] = useState('');
+  const [growChart, setGrowChart] = useState('');
+
+  const [rendered, setRendered] = useState(false);
+
+  const initRef = useRef(false);
+
+  useEffect(() => {
+    if (!data || initRef.current) {
+      return;
+    }
+
+    initRef.current = true;
+
+    const market_values = data.slides[4].data.find((i) => i.slug === 'market_values')?.answer as any;
+    const users_metrics = data.slides[7].data.find((i) => i.slug === 'users_metrics')?.answer as any;
+
+    const company_value = data.slides[10].data.find((i) => i.slug === 'company_value')?.answer.sum as number;
+    const future_value = data.slides[10].data.find((i) => i.slug === 'future_value')?.answer.sum as number;
+    const time_to_spend = data.slides[10].data.find((i) => i.slug === 'time_to_spend')?.answer as any;
+
+    generateMarketChart(
+     'chart1',
+      [market_values.tam, market_values.sam, market_values.som],
+      (data) => setMarketChart(data)
+    );
+
+    generateFinancialChart(
+      'chart2',
+      [users_metrics.cac, users_metrics.ltv],
+      (data) => setFinancialChart(data)
+    );
+
+    generateGrowChart(
+      'chart3',
+      [company_value, future_value, time_to_spend],
+      (data) => setGrowChart(data)
+    );
+  }, [data]);
+
 
   return (
-    <PDFViewer>
-      <Document />
-    </PDFViewer>
+    <div className={s.DeckPage}>
+      {!rendered && (
+        <Loader className={s.DeckPage__loader} />
+      )}
+      {data && marketChart && financialChart && growChart ? (
+        <PDFViewer style={{ width: '100vw', height: '100vh' }}>
+          <MyDocument
+            onRender={() => setRendered(true)}
+            data={data}
+            marketChart={marketChart}
+            financialChart={financialChart}
+            growChart={growChart}
+          />
+        </PDFViewer>
+      ) : (
+        <div style={{ visibility: 'hidden' }}>
+          <canvas id={'chart1'} />
+          <canvas id={'chart2'} />
+          <canvas id={'chart3'} />
+        </div>
+      )}
+    </div>
   )
 }

src/pages/deck/document/Document.tsx

@@ -1,33 +1,54 @@
 import {ReactFCC} from '../../../utils/ReactFCC';
-import {Page, View, Text, StyleSheet} from '@react-pdf/renderer';
+import {Document, Font} from '@react-pdf/renderer';
+import {Slide1} from './slides/Slide1';
+import {GetDeckResponse} from '../../../api/deck/getDeck';
+import {Slide2} from './slides/Slide2';
+import {Slide3} from './slides/Slide3';
+import {Slide4} from './slides/Slide4';
+import {Slide5} from './slides/Slide5';
+import {Slide6} from './slides/Slide6';
+import {Slide8} from './slides/Slide8';
+import {Slide7} from './slides/Slide7';
+import Chart from 'chart.js/auto';
+import {Slide9} from './slides/Slide9';
+import {Slide10} from './slides/Slide10';
+import {Slide11} from './slides/Slide11';
+import {Slide12} from './slides/Slide12';
+import {Slide13} from './slides/Slide13';
 
-export interface Props {
+Chart.defaults.font.size = 20;
 
+export interface MyDocumentProps {
+  data: GetDeckResponse;
+  onRender: () => void;
+  marketChart: string;
+  financialChart: string;
+  growChart: string;
 }
 
-const styles = StyleSheet.create({
-  page: {
-    flexDirection: 'row',
-    backgroundColor: '#E4E4E4'
-  },
-  section: {
-    margin: 10,
-    padding: 10,
-    flexGrow: 1
-  }
+Font.register({
+  family: "Roboto",
+  src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-medium-webfont.ttf"
 });
 
-export const Document: ReactFCC<Props> = (props) => {
+export const MyDocument: ReactFCC<MyDocumentProps> = (props) => {
+  const { data, marketChart, financialChart, growChart, onRender } = props;
+
   return (
-    <Document>
-      <Page>
-        <View>
-          <Text>Section #1</Text>
-        </View>
-        <View>
-          <Text>Section #2</Text>
-        </View>
-      </Page>
+    <Document onRender={onRender}>
+      <Slide1 title={data.deck.name} description={data.deck.description} data={data.slides[0].data} />
+      <Slide2 data={data.slides[1].data} />
+      <Slide3 data={data.slides[2].data} />
+      <Slide4 data={data.slides[3].data} />
+      <Slide5 data={data.slides[4].data} marketChart={marketChart} />
+      <Slide6 data={data.slides[5].data} />
+      <Slide7 data={data.slides[6].data} />
+      <Slide8 data={data.slides[7].data} financialChart={financialChart} />
+      <Slide9 data={data.slides[8].data} />
+      <Slide10 data={data.slides[9].data} />
+      <Slide11 data={data.slides[10].data} growChart={growChart} />
+      <Slide12 data={data.slides[11].data} />
+      <Slide13 data={data.slides[12].data} />
     </Document>
   );
 };

src/pages/deck/document/media/generateFinancialChart.ts

@@ -0,0 +1,28 @@
+import Chart from 'chart.js/auto';
+
+export const generateFinancialChart = (rootId: string, [cac, ltv]: [number, number], callback: (data: string) => void) => {
+  const chart = new Chart((document.getElementById(rootId) as HTMLCanvasElement).getContext('2d') as CanvasRenderingContext2D, {
+    type: 'bar',
+    data: {
+      labels: ['LTV', 'CAC'],
+      datasets: [
+        {
+          label: 'Сравнение LTV (Lifetime Value) и CAC (Customer Acquisition Cost)',
+          data: [ltv, cac],
+          backgroundColor: 'rgba(255, 99, 132, 0.3)',
+          borderColor: 'rgba(255,99,132,1)',
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      indexAxis: 'y',
+      aspectRatio: 2,
+      animation: {
+        onComplete: function () {
+          callback(chart.toBase64Image());
+        },
+      },
+    },
+  })
+}

src/pages/deck/document/media/generateGrowChart.ts

@@ -0,0 +1,32 @@
+import Chart from 'chart.js/auto';
+import format from 'date-fns/format';
+import addYears from 'date-fns/addYears';
+
+export const generateGrowChart = (rootId: string, [company_value, future_value, date]: [number, number, Date], callback: (data: string) => void) => {
+  const chart = new Chart((document.getElementById(rootId) as HTMLCanvasElement).getContext('2d') as CanvasRenderingContext2D, {
+    type: 'line',
+    data: {
+      labels: [
+        format(new Date(), 'dd.MM.yyyy'),
+        format(date ? new Date(date) : addYears(new Date(), 1), 'dd.MM.yyyy')],
+      datasets: [
+        {
+          label: 'Рост после привлечения инвестиций',
+          data: [company_value, future_value],
+          fill: false,
+          borderColor: 'rgba(255, 99, 132, 0.5)',
+          tension: 0.1
+        },
+      ],
+    },
+    options: {
+      // indexAxis: 'y',
+      aspectRatio: 2,
+      animation: {
+        onComplete: function () {
+          callback(chart.toBase64Image());
+        },
+      },
+    },
+  })
+}

src/pages/deck/document/media/generateMarketChart.ts

@@ -0,0 +1,28 @@
+import Chart from 'chart.js/auto';
+
+export const generateMarketChart = (rootId: string, [tam, sam, som]: [number, number, number], callback: (data: string) => void) => {
+  const chart = new Chart((document.getElementById(rootId) as HTMLCanvasElement).getContext('2d') as CanvasRenderingContext2D, {
+    type: 'bar',
+    data: {
+      labels: ['SAM', 'SOM'],
+      datasets: [
+        {
+          label: 'Сравнение SAM и SOM',
+          data: [sam, som],
+          backgroundColor: 'rgba(255, 99, 132, 0.3)',
+          borderColor: 'rgba(255,99,132,1)',
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      indexAxis: 'y',
+      aspectRatio: 2,
+      animation: {
+        onComplete: function () {
+          callback(chart.toBase64Image());
+        },
+      },
+    },
+  })
+}

src/pages/deck/document/shared.ts

@@ -0,0 +1,2 @@
+export const bgColor = '#EFEEE7';
+export const primaryColor = '#2B2C30';

src/pages/deck/document/slides/Slide1.tsx

@@ -0,0 +1,81 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import format from 'date-fns/format';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface Slide1Props {
+  title: string;
+  description: string;
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    padding: '56px',
+    fontFamily: 'Roboto'
+  },
+  mainBlock: {
+    flex: '1',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'stretch'
+  },
+  title: {
+    fontSize: 96,
+    width: '100%',
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '0 0'
+  },
+  description: {
+    marginTop: '16px',
+    width: '100%',
+    fontSize: '20px',
+  },
+  secondaryBlock: {
+    //
+  },
+  info: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: 4
+  },
+  infoText: {
+    fontFamily: 'Helvetica',
+    fontSize: '14px',
+  }
+});
+
+export const Slide1: ReactFCC<Slide1Props> = (props) => {
+  const { title, description, data } = props;
+
+  const name = data.find((i) => i.slug === 'names')?.answer as string;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View style={styles.mainBlock}>
+        <Text style={styles.title}>{name}</Text>
+        <View style={styles.divider} />
+        <Text style={styles.description}>{description}</Text>
+      </View>
+
+      <View style={styles.secondaryBlock}>
+        <View style={styles.info}>
+          <Text style={styles.infoText}>Henrietta Mitchell, Founder & CEO</Text>
+          <Text style={styles.infoText}>{format(new Date(), 'dd MMM, yyyy')}</Text>
+        </View>
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide10.tsx

@@ -0,0 +1,69 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+import {currencyFormatter, formatDate} from '../../../../utils/fomat';
+
+export interface Slide10Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+  subtitle: {
+    width: '100%',
+    fontSize: '24px',
+  },
+});
+
+export const Slide10: ReactFCC<Slide10Props> = (props) => {
+  const { data } = props;
+
+  const how_much_investments = data.find((i) => i.slug === 'how_much_investments')?.answer.sum as any;
+  const time_to_spend = data.find((i) => i.slug === 'time_to_spend')?.answer as any;
+  const investments_sold = data.find((i) => i.slug === 'investments_sold')?.answer as any;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Инвестиционный раунд</Text>
+        <View style={styles.divider} />
+
+        <Text style={styles.subtitle}>Сколько инвестиций необходимо</Text>
+        <Text style={styles.text}>{currencyFormatter.format(how_much_investments)}</Text>
+
+        <Text style={styles.subtitle}>Цели инвестиций</Text>
+        <Text style={styles.text}>{investments_sold}</Text>
+
+        <Text style={styles.subtitle}>Срок освоения инвестиций</Text>
+        <Text style={styles.text}>{formatDate(time_to_spend)}</Text>
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide11.tsx

@@ -0,0 +1,63 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface Slide11Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+  growChart: string;
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+  subtitle: {
+    width: '100%',
+    fontSize: '24px',
+  },
+  image: {
+    maxWidth: '600px',
+    maxHeight: '300px',
+    margin: '50 auto 0'
+  }
+});
+
+export const Slide11: ReactFCC<Slide11Props> = (props) => {
+  const { data, growChart } = props;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Инвестиционный раунд</Text>
+        <View style={styles.divider} />
+
+        <Image style={styles.image} src={growChart} />
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide12.tsx

@@ -0,0 +1,91 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+import {formatDate} from '../../../../utils/fomat';
+import {Fragment} from 'react';
+
+export interface Slide12Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  subtitle: {
+    fontSize: '18px',
+    marginBottom: '4px',
+    marginLeft: '-6px'
+  },
+  text: {
+    fontSize: '14px',
+    marginLeft: '-6px'
+  },
+  map: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: 70
+  },
+  item: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    borderTop: '1px solid black',
+    padding: '16px 16px 0 0',
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    backgroundColor: 'black',
+    borderRadius: '50%',
+    marginTop: '-3.5px'
+  }
+});
+
+export const Slide12: ReactFCC<Slide12Props> = (props) => {
+  const { data } = props;
+
+  const aims = data.find((i) => i.slug === 'aims')?.answer as any;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Роадмап</Text>
+        <View style={styles.divider} />
+
+        <View style={styles.map}>
+          <View style={styles.dot} />
+          {Object.entries(aims).map(([date, text], index) => (
+            <Fragment key={index}>
+              <View style={styles.item}>
+                <Text style={styles.subtitle}>{formatDate(date)}</Text>
+                <Text style={styles.text}>{text as string}</Text>
+              </View>
+              <View style={styles.dot} />
+            </Fragment>
+          ))}
+        </View>
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide13.tsx

@@ -0,0 +1,67 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+import {formatDate} from '../../../../utils/fomat';
+import {Fragment} from 'react';
+
+export interface Slide13Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+  subtitle: {
+    width: '100%',
+    fontSize: '24px',
+    marginBottom: 24
+  },
+});
+
+export const Slide13: ReactFCC<Slide13Props> = (props) => {
+  const { data } = props;
+
+  const links = data.find((i) => i.slug === 'links')?.answer as any;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Контакты</Text>
+        <View style={styles.divider} />
+
+        {Object.entries(links).map(([name, link], index) => (
+          <Fragment key={index}>
+            <Text style={styles.subtitle}>{`${name}: ${link}`}</Text>
+            {/*<Text style={styles.text}>{text as string}</Text>*/}
+          </Fragment>
+        ))}
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide2.tsx

@@ -0,0 +1,53 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface Slide2Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+  },
+});
+
+export const Slide2: ReactFCC<Slide2Props> = (props) => {
+  const { data } = props;
+
+  const problem = data.find((i) => i.slug === 'problems')?.answer as string;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Проблема</Text>
+        <View style={styles.divider} />
+        <Text style={styles.text}>{problem}</Text>
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide3.tsx

@@ -0,0 +1,53 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface SlideProps {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+  },
+});
+
+export const Slide3: ReactFCC<SlideProps> = (props) => {
+  const { data } = props;
+
+  const actuality = data.find((i) => i.slug === 'actuality')?.answer as string;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Описание и ценностное предложение стартапа</Text>
+        <View style={styles.divider} />
+        <Text style={styles.text}>{actuality}</Text>
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide4.tsx

@@ -0,0 +1,56 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface SlideProps {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+});
+
+export const Slide4: ReactFCC<SlideProps> = (props) => {
+  const { data } = props;
+
+  const solve = data.find((i) => i.slug === 'solve')?.answer as string;
+  const works = data.find((i) => i.slug === 'works')?.answer as string;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Решение</Text>
+        <View style={styles.divider} />
+        <Text style={styles.text}>{solve}</Text>
+        <Text style={styles.text}>{works}</Text>
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide5.tsx

@@ -0,0 +1,62 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface Slide5Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+  marketChart: string;
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+  image: {
+    maxWidth: '600px',
+    maxHeight: '300px',
+    margin: '0 auto'
+  }
+});
+
+export const Slide5: ReactFCC<Slide5Props> = (props) => {
+  const { data, marketChart } = props;
+
+  const market_values = data.find((i) => i.slug === 'market_values')?.answer as any;
+  const users = data.find((i) => i.slug === 'users')?.answer as string;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Рынок</Text>
+        <View style={styles.divider} />
+        <Text style={styles.text}>Целевая аудитория: {users}</Text>
+        <Image style={styles.image} src={marketChart} />
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide6.tsx

@@ -0,0 +1,71 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface Slide6Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+  subtitle: {
+    width: '100%',
+    fontSize: '24px',
+  },
+});
+
+export const Slide6: ReactFCC<Slide6Props> = (props) => {
+  const { data } = props;
+
+  const competitors = data.find((i) => i.slug === 'competitors')?.answer as string;
+  const competitors_strength = data.find((i) => i.slug === 'competitors_strength')?.answer as string;
+  const competitors_low = data.find((i) => i.slug === 'competitors_low')?.answer as string;
+  const advantages = data.find((i) => i.slug === 'advantages')?.answer as string;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Конкуренты</Text>
+        <View style={styles.divider} />
+
+        <Text style={styles.text}>{competitors}</Text>
+
+        <Text style={styles.subtitle}>Сильные стороны</Text>
+        <Text style={styles.text}>{competitors_strength}</Text>
+
+        <Text style={styles.subtitle}>Слабые стороны</Text>
+        <Text style={styles.text}>{competitors_low}</Text>
+
+        <Text style={styles.subtitle}>Наши преимущества</Text>
+        <Text style={styles.text}>{advantages}</Text>
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide7.tsx

@@ -0,0 +1,59 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface Slide7Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+  subtitle: {
+    width: '100%',
+    fontSize: '24px',
+  },
+});
+
+export const Slide7: ReactFCC<Slide7Props> = (props) => {
+  const { data } = props;
+
+  const money = data.find((i) => i.slug === 'money')?.answer as string;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Бизнес-модель</Text>
+        <View style={styles.divider} />
+
+        <Text style={styles.text}>{money}</Text>
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide8.tsx

@@ -0,0 +1,63 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface Slide8Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+  financialChart: string;
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+  image: {
+    maxWidth: '600px',
+    maxHeight: '300px',
+    margin: '0 auto'
+  }
+});
+
+export const Slide8: ReactFCC<Slide8Props> = (props) => {
+  const { data, financialChart } = props;
+
+  const how_much_investments = data.find((i) => i.slug === 'how_much_investments')?.answer.sum as any;
+  const financial_indicators = data.find((i) => i.slug === 'financial_indicators')?.answer as any;
+  const users_metrics = data.find((i) => i.slug === 'users_metrics')?.answer as any;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Финансы</Text>
+        <View style={styles.divider} />
+        <Text style={styles.text}>{financial_indicators}</Text>
+        <Image style={styles.image} src={financialChart} />
+      </View>
+    </Page>
+  )
+}

src/pages/deck/document/slides/Slide9.tsx

@@ -0,0 +1,55 @@
+import {ReactFCC} from '../../../../utils/ReactFCC';
+import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
+import {bgColor, primaryColor} from '../shared';
+import {GetDeckResponse} from '../../../../api/deck/getDeck';
+import {ExtractArray} from '../../../../utils/types';
+
+export interface Slide9Props {
+  data: ExtractArray<GetDeckResponse['slides']>['data'];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: bgColor,
+    color: primaryColor,
+    fontFamily: 'Roboto',
+    padding: '48px',
+  },
+  title: {
+    fontSize: 36,
+    width: '100%',
+    letterSpacing: 3,
+    textTransform: 'uppercase'
+  },
+  divider: {
+    width: '100%',
+    height: 1,
+    backgroundColor: primaryColor,
+    margin: '8px 0 16px'
+  },
+  text: {
+    width: '100%',
+    fontSize: '20px',
+    marginBottom: 24
+  },
+});
+
+export const Slide9: ReactFCC<Slide9Props> = (props) => {
+  const { data } = props;
+
+  // const how_much_investments = data.find((i) => i.slug === 'how_much_investments')?.answer as any;
+  // const users_metrics = data.find((i) => i.slug === 'users_metrics')?.answer as any;
+
+  return (
+    <Page size="A4" orientation={'landscape'} style={styles.page}>
+      <View>
+        <Text style={styles.title}>Команда</Text>
+        {/*<View style={styles.divider} />*/}
+        {/*<Text style={styles.text}>{how_much_investments}</Text>*/}
+      </View>
+    </Page>
+  )
+}

src/utils/types.ts

@@ -9,6 +9,8 @@ export type IntrinsicPropsWithoutRef<E extends keyof JSX.IntrinsicElements> = Re
   JSX.IntrinsicElements[E]
 >;
 
+export type ExtractArray<T> = T extends (infer U)[] ? U : T;
+
 export type AnchorPropsWithoutRef = IntrinsicPropsWithoutRef<'a'>;
 export type DivPropsWithoutRef = IntrinsicPropsWithoutRef<'div'>;
 export type PPropsWithoutRef = IntrinsicPropsWithoutRef<'p'>;

yarn.lock

@@ -1606,6 +1606,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -3380,6 +3385,13 @@ char-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
   integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
 
+chart.js@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.0.tgz#df843fdd9ec6bd88d7f07e2b95348d221bd2698c"
+  integrity sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 check-types@^11.1.1:
   version "11.2.2"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.2.2.tgz#7afc0b6a860d686885062f2dba888ba5710335b4"