Anychart

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

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",

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<IProps> = (props) => {
           <a>Go home</a>
         </Link>
       </p>
+      <PieChartDynamic
+        width="100%"
+        height={200}
+        data={[
+          ['Chocolate', 5],
+          ['Rhubarb compote', 2],
+          ['Crêpe Suzette', 2],
+          ['American blueberry', 2],
+          ['Buttermilk', 1],
+        ]}
+        title="Top 5 pancake fillings"
+        chartId="pieId"
+      />
+      <AreaChartDynamic
+        width={400}
+        height={600}
+        title="Set Z-Index of the orange area series"
+        data={[
+          [
+            { x: 'Cycling', value: 4 },
+            { x: 'Swimming', value: 20 },
+            { x: 'Run', value: 8 },
+            { x: 'Hiking', value: 17 },
+          ],
+          [
+            { x: 'Cycling', value: 6 },
+            { x: 'Swimming', value: 3 },
+            { x: 'Run', value: 15 },
+            { x: 'Hiking', value: 9 },
+          ],
+          [
+            { x: 'Cycling', value: 2 },
+            { x: 'Swimming', value: 10 },
+            { x: 'Run', value: 2 },
+            { x: 'Hiking', value: 2 },
+          ],
+        ]}
+        chartId="areaId"
+      />
     </div>
   );
 };

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<IProps> = (props) => {
           <a data-testid={`${testId}_about-button`}>About</a>
         </Link>
       </p>
+      <SimpleBarChartDynamic width="100%" height={200} title="Bar Chart" chartId="barId" />
     </div>
   );
 };

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;

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<IProps> = (props) => {
+  const chartData = useMemo(() => generateAreaChart(props.data, props.title), [props.data, props.title]);
+
+  return (
+    <AnyChart
+      charts={chartData.charts}
+      credits={false}
+      instance={chartData.stage}
+      legend={true}
+      title={props.title}
+      height={props.height}
+      width={props.width}
+      id={props.chartId}
+    />
+  );
+};
+
+AreaChart.defaultProps = {};

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(),
+  };
+};

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;

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<IProps> = (props) => {
+  return (
+    <AnyChart
+      type="pie"
+      data={props.data}
+      title={props.title}
+      height={props.height}
+      width={props.width}
+      id={props.chartId}
+      credits={false}
+    />
+  );
+};
+
+PieChart.defaultProps = {};

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;

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<IProps> = (props) => {
+  const chartData = useMemo(() => generateSimpleBarChart(), []);
+
+  return (
+    <AnyChart
+      charts={chartData.charts}
+      credits={false}
+      instance={chartData.stage}
+      legend={true}
+      title={props.title}
+      height={props.height}
+      width={props.width}
+      id={props.chartId}
+    />
+  );
+};

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(),
+  };
+};

src/modules/any-chart/AnyChartScript.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+interface IProps {}
+
+export const AnyChartScript: React.FC<IProps> = (props) => {
+  return <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript" />;
+};

src/pages/about/index.tsx

@@ -2,14 +2,21 @@ import React from 'react';
 import { MainLayout } from '../../components/shared/main-layout/MainLayout';
 import { NextPage } from 'next';
 import { AboutPage } from '../../components/pages/about-page/AboutPage';
+import Head from 'next/head';
+import { AnyChartScript } from '../../modules/any-chart/AnyChartScript';
 
 interface IProps {}
 
 const AboutRoute: NextPage<IProps> = (props) => {
   return (
-    <MainLayout title="About">
-      <AboutPage />
-    </MainLayout>
+    <>
+      <Head>
+        <AnyChartScript />
+      </Head>
+      <MainLayout title="About">
+        <AboutPage />
+      </MainLayout>
+    </>
   );
 };
 

src/pages/index.tsx

@@ -2,14 +2,21 @@ import React from 'react';
 import { MainLayout } from '../components/shared/main-layout/MainLayout';
 import { IndexPage } from '../components/pages/index-page/IndexPage';
 import { NextPage } from 'next';
+import Head from 'next/head';
+import { AnyChartScript } from '../modules/any-chart/AnyChartScript';
 
 interface IProps {}
 
 const IndexRoute: NextPage<IProps> = (props) => {
   return (
-    <MainLayout title="Home | Next.js + TypeScript Example">
-      <IndexPage />
-    </MainLayout>
+    <>
+      <Head>
+        <AnyChartScript />
+      </Head>
+      <MainLayout title="Home | Next.js + TypeScript Example">
+        <IndexPage />
+      </MainLayout>
+    </>
   );
 };
 

src/types/anychart-react.d.ts

@@ -0,0 +1 @@
+declare module 'anychart-react';