diff --git a/next.config.js b/next.config.js index 7de6e4f..ca6c0d4 100644 --- a/next.config.js +++ b/next.config.js @@ -21,6 +21,8 @@ module.exports = withPlugins( }, webpack(config) { + config.externals = [...config.externals, { anychart: 'anychart' }]; + config.resolve.alias = { ...config.resolve.alias, // https://blog.usejournal.com/my-awesome-custom-react-environment-variables-setup-8ebb0797d8ac diff --git a/package.json b/package.json index cc1a4b8..28dc9ca 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "scripts": { "dev": "CLIENT_ENV=development next dev", "build": "next build", + "prestart": "next build", "start": "next start", "---------- Linting ----------------------------------------------------": "", "eslint": "next lint", @@ -23,7 +24,18 @@ "up": "yarn upgrade-interactive --latest", "-----------------------------------------------------------------------": "" }, + "dependencies-comments": [ + { + "anychart": [ + "We actually don't use this library. The only reason anychart is installed is for the TypeScript types.", + "The actual code is downloaded via a script tag in the _document.tsx file. Make sure the versions are the same in the script tag and in dependencies.", + "If you look at the next.config.js file you will notice that webpack removes anychart from being bundle into the JavaScript files. This prevents anychart from being bundled multiple times." + ] + } + ], "dependencies": { + "anychart": "8.9.0", + "anychart-react": "1.4.1", "axios": "0.26.1", "clsx": "1.1.1", "next": "12.1.4", diff --git a/src/components/pages/about-page/AboutPage.tsx b/src/components/pages/about-page/AboutPage.tsx index 0ae747e..4eacfc6 100644 --- a/src/components/pages/about-page/AboutPage.tsx +++ b/src/components/pages/about-page/AboutPage.tsx @@ -1,6 +1,8 @@ import React from 'react'; import Link from 'next/link'; import { Routes } from '../../../constants/Routes'; +import { PieChartDynamic } from '../../ui/pie-chart/PieChart.dynamic'; +import { AreaChartDynamic } from '../../ui/area-chart/AreaChart.dynamic'; interface IProps {} @@ -14,6 +16,45 @@ export const AboutPage: React.FC = (props) => { Go home

+ + ); }; diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx index 551e923..5261c00 100644 --- a/src/components/pages/index-page/IndexPage.tsx +++ b/src/components/pages/index-page/IndexPage.tsx @@ -1,6 +1,7 @@ import React from 'react'; import Link from 'next/link'; import { Routes } from '../../../constants/Routes'; +import { SimpleBarChartDynamic } from '../../ui/simple-bar-chart/SimpleBarChart.dynamic'; interface IProps { testId?: string; @@ -25,6 +26,7 @@ export const IndexPage: React.FC = (props) => { About

+ ); }; diff --git a/src/components/ui/area-chart/AreaChart.dynamic.tsx b/src/components/ui/area-chart/AreaChart.dynamic.tsx new file mode 100644 index 0000000..14578da --- /dev/null +++ b/src/components/ui/area-chart/AreaChart.dynamic.tsx @@ -0,0 +1,7 @@ +import dynamic from 'next/dynamic'; +import { AreaChart } from './AreaChart'; + +export const AreaChartDynamic = dynamic( + () => import('./AreaChart' /* webpackChunkName: "AreaChart" */).then((mod) => mod.AreaChart as any), + { ssr: false } +) as typeof AreaChart; diff --git a/src/components/ui/area-chart/AreaChart.tsx b/src/components/ui/area-chart/AreaChart.tsx new file mode 100644 index 0000000..df1df30 --- /dev/null +++ b/src/components/ui/area-chart/AreaChart.tsx @@ -0,0 +1,30 @@ +import React, { useMemo } from 'react'; +import AnyChart from 'anychart-react'; +import { generateAreaChart } from './AreaChart.utils'; + +interface IProps { + chartId: string; + data: any[]; + height?: number | string; + title: string; + width?: number | string; +} + +export const AreaChart: React.FC = (props) => { + const chartData = useMemo(() => generateAreaChart(props.data, props.title), [props.data, props.title]); + + return ( + + ); +}; + +AreaChart.defaultProps = {}; diff --git a/src/components/ui/area-chart/AreaChart.utils.ts b/src/components/ui/area-chart/AreaChart.utils.ts new file mode 100644 index 0000000..f11f386 --- /dev/null +++ b/src/components/ui/area-chart/AreaChart.utils.ts @@ -0,0 +1,13 @@ +import 'anychart'; + +export const generateAreaChart = (data: any[], title: string) => { + const chart = anychart.area(); + + data.forEach((chartData) => chart.area(chartData)); + chart.title(title); + + return { + charts: [chart], + stage: anychart.graphics.create(), + }; +}; diff --git a/src/components/ui/pie-chart/PieChart.dynamic.tsx b/src/components/ui/pie-chart/PieChart.dynamic.tsx new file mode 100644 index 0000000..4fe8879 --- /dev/null +++ b/src/components/ui/pie-chart/PieChart.dynamic.tsx @@ -0,0 +1,7 @@ +import dynamic from 'next/dynamic'; +import { PieChart } from './PieChart'; + +export const PieChartDynamic = dynamic( + () => import('./PieChart' /* webpackChunkName: "PieChart" */).then((mod) => mod.PieChart as any), + { ssr: false } +) as typeof PieChart; diff --git a/src/components/ui/pie-chart/PieChart.tsx b/src/components/ui/pie-chart/PieChart.tsx new file mode 100644 index 0000000..137db7c --- /dev/null +++ b/src/components/ui/pie-chart/PieChart.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import AnyChart from 'anychart-react'; + +interface IProps { + chartId: string; + data: any[][]; + height?: number | string; + title: string; + width?: number | string; +} + +export const PieChart: React.FC = (props) => { + return ( + + ); +}; + +PieChart.defaultProps = {}; diff --git a/src/components/ui/simple-bar-chart/SimpleBarChart.dynamic.tsx b/src/components/ui/simple-bar-chart/SimpleBarChart.dynamic.tsx new file mode 100644 index 0000000..6aa9a77 --- /dev/null +++ b/src/components/ui/simple-bar-chart/SimpleBarChart.dynamic.tsx @@ -0,0 +1,7 @@ +import dynamic from 'next/dynamic'; +import { SimpleBarChart } from './SimpleBarChart'; + +export const SimpleBarChartDynamic = dynamic( + () => import('./SimpleBarChart' /* webpackChunkName: "SimpleBarChart" */).then((mod) => mod.SimpleBarChart as any), + { ssr: false } +) as typeof SimpleBarChart; diff --git a/src/components/ui/simple-bar-chart/SimpleBarChart.tsx b/src/components/ui/simple-bar-chart/SimpleBarChart.tsx new file mode 100644 index 0000000..7f74a51 --- /dev/null +++ b/src/components/ui/simple-bar-chart/SimpleBarChart.tsx @@ -0,0 +1,27 @@ +import React, { useMemo } from 'react'; +import { generateSimpleBarChart } from './SimpleBarChart.utils'; +import AnyChart from 'anychart-react'; + +interface IProps { + chartId: string; + height?: number | string; + title: string; + width?: number | string; +} + +export const SimpleBarChart: React.FC = (props) => { + const chartData = useMemo(() => generateSimpleBarChart(), []); + + return ( + + ); +}; diff --git a/src/components/ui/simple-bar-chart/SimpleBarChart.utils.ts b/src/components/ui/simple-bar-chart/SimpleBarChart.utils.ts new file mode 100644 index 0000000..8156fbf --- /dev/null +++ b/src/components/ui/simple-bar-chart/SimpleBarChart.utils.ts @@ -0,0 +1,18 @@ +import 'anychart'; + +export const generateSimpleBarChart = () => { + const chart1 = anychart.line([1, 2, 3]); + + chart1.bounds(0, 0, '100%', '50%'); + + const chart2 = anychart.column(); + + chart2.column([3, 2, 1]); + chart2.line([3, 5, 6]); + chart2.bounds(0, '50%', '100%', '50%'); + + return { + charts: [chart1, chart2], + stage: anychart.graphics.create(), + }; +}; diff --git a/src/modules/any-chart/AnyChartScript.tsx b/src/modules/any-chart/AnyChartScript.tsx new file mode 100644 index 0000000..9e218ea --- /dev/null +++ b/src/modules/any-chart/AnyChartScript.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +interface IProps {} + +export const AnyChartScript: React.FC = (props) => { + return