Как сделать график сложных процентов с ежемесячными взносами, используя React с Typescript
Для тех из вас, кто не читал Часть 1 и хочет понять, что привело к этой статье, посмотрите здесь.
В части 1 я очень поверхностно попытался объяснить сложные проценты с ежемесячными взносами и фиксированной годовой процентной ставкой, а в этой статье я поделюсь с вами тем, как построить на их основе график.
Сначала стек:
- Реагировать с машинописным текстом
- ChartJs для графика
- MomentJS для дат
Итак, давайте перейдем к терминалу и создадим базовое приложение create-реагировать.
npx create-react-app my-chart --typescript
Это создаст для нас реагирующее приложение со всеми конфигурациями машинописного текста.
Теперь давайте перейдем к проекту и добавим библиотеки в микс.
cd my-chart
npm install chart.js @types/chart.js moment node-sass
Запустить сервер
npm start
И давайте сначала попробуем построить базовый граф.
Посмотрите базовый пример ChartJS, https://www.chartjs.org/docs/latest/, скопируйте и вставьте ‹canvas› и вставьте его куда-нибудь в метод рендеринга App.tsx, и давайте вставим пример скрипта (с некоторыми модификациями машинописного текста, см. ниже), предоставленный ChartJS в хуке useEffect в компоненте (потому что хуки — это офигенно 😎), и у вас должно быть следующее.
И вы должны увидеть этот график! Поздравляю, хватай себе 🍪 ты это заслужил!
Имея это на месте, давайте начнем строить наш составной график.
Во-первых, нам нужны формулы, о которых мы говорили в части 1, и реализовать их в коде. Ниже у нас есть формула сложных процентов с учетом ежемесячных приращений.
Давайте разобьем это на части, сначала построим основной, а затем добавим вклады.
Эти две части кода представляют собой javascript-представление приведенной выше формулы.
Теперь нам нужна другая функция для обработки суммы двух выходных данных. Эта функция получит все необходимые для расчетов параметры и выведет общую сумму, начисленную за заданный период.
В последней части нам нужно создать функцию, которая будет перебирать годы и вычислять годовое составное значение, чтобы получить массив, который мы можем использовать на графике.
Создадим файл calculations.ts и добавим их в проект.
Теперь, когда наши расчетные функции готовы, давайте попробуем отобразить их на графике. Во-первых, нам нужно изменить тип графика с type: 'bar’ на type: 'line', во-вторых, добавим несколько лет к оси X и, наконец, давайте вызовем наши функции с некоторыми базовыми статическими данными. Проверьте код ниже:
Перейдите в свой браузер по адресу http://localhost:3000, и вы должны увидеть следующее.
🎉 🎉 Вуаля!! 🎉 🎉
Наш первый составной граф представлен нам!
Хватай тонны 🍪или 🍕 и радуйся своему величию!!
Теперь нужно внести некоторые коррективы, чтобы получить полный график, но это основное вещество, которое позволит нам масштабироваться. Ниже мы увидим, как рассчитать годы вместо жесткого кодирования, и предоставим нашим пользователям возможность изменить параметры вычислений.
Для расчетов по годам мы могли бы использовать функциональность временной декартовой оси времени из ChartJS, но для этого примера я решил создать собственный массив дат для меток.
Поскольку мы уже добавили moment.js в смесь, давайте начнем создавать наш массив дат. Для этого мы передадим количество лет, которое выберет пользователь (например, 10, 15, 20 и т. д.), и мы будем использовать момент, чтобы получить массив с годами.
Добавим в наш файл Calculation.tsx следующее:
И отредактируйте компонент Chart в App.tsx
И мы должны увидеть тот же результат, но с метками года.
Просто для проверки давайте изменим options.years: 20 и посмотрим, как график перестроится с новыми значениями и датами.
Теперь, когда это сделано, мы можем легко добавить поля ввода для управления переменными, которые мы жестко запрограммировали в объекте параметров.
Давайте зайдем в наш браузер и БАМ 🎉 наш график готов!
Надеюсь, вам понравилась история, и вы смогли дойти до конца с функциональным и рабочим примером графа.
Сейчас есть много способов, которыми мы можем стилизовать этот график, и я не буду рассказывать об этом в этой истории (она уже довольно длинная 😅), для этой цели я рекомендую Bulma для общего стиля, очень легкий CSS-фреймворк с множеством опций для создавайте свои удивительные макеты и ознакомьтесь с параметрами, которые ChartJs предоставляет нам для всех настроек, от линий сетки, осей и делений, чтобы сделать лучший график для ваших пользователей.
Посмотрите демо-версию кода здесь и репозиторий здесь.
Здравствуйте, меня зовут Диого Батиста, я разработчик программного обеспечения, я работаю в @themainingredient в Амстердаме, и помимо того, что я делаю потрясающие вещи в TheMainIngredient, я хотел бы поделиться этим великолепием со всеми вами.
Если вам понравился этот пост и вы хотите узнать о нас больше, заходите на наш сайт! www.themainingredient.co
Для меня просто проверьте меня на Linkedin: www.linkedin.com/diogobatista, иногда я публикую некоторые личные инструменты или классные проекты, которые мне нравятся.
