fix build issue

CivicDataLab · Mar 5, 2024 · eb43e84 · eb43e84
1 parent f4013bc
commit eb43e84
Show file tree

Hide file tree

Showing 33 changed files with 4,345 additions and 2,020 deletions.
diff --git a/examples/data-exchange/.eslintrc.json b/examples/data-exchange/.eslintrc.json
@@ -11,6 +11,7 @@
     "@typescript-eslint/no-explicit-any": ["off"],
     "react/display-name": "off",
     "@next/next/no-html-link-for-pages": "off",
-    "prefer-const": "off"
+    "prefer-const": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }
diff --git a/examples/data-exchange/app/[locale]/(user)/chart/Content.tsx b/examples/data-exchange/app/[locale]/(user)/chart/Content.tsx
@@ -2,11 +2,13 @@
 
 import React from 'react';
 import dynamic from 'next/dynamic';
+import Image from 'next/image';
 import { EChartsOption } from 'echarts-for-react';
 import { ShareDialog, useScreenshot } from 'opub-ui';
 import { BarChart } from 'opub-ui/viz';
 import { useMediaQuery } from 'usehooks-ts';
 
+import { eCharts } from '@/lib/eCharts';
 import { navigateEnd } from '@/lib/navigation';
 
 const MapChart = dynamic(
@@ -17,7 +19,6 @@ const MapChart = dynamic(
 );
 
 type Props = {
-  svg: string;
   options: EChartsOption;
 };
 export function Content({
@@ -49,21 +50,18 @@ export function Content({
     <div className="mb-8 min-h-fit w-full">
       <Chart
         options={bar.options}
-        svg={bar.svg}
         props={{
           title: 'This title for bar chart is generated in the template',
         }}
       />
       <Chart
         options={line.options}
-        svg={line.svg}
         props={{
           title: 'This title for line chart is generated in the template',
         }}
       />
       <Chart
         options={stacked.options}
-        svg={stacked.svg}
         props={{
           title: 'This title for stack chart is generated in the template',
         }}
@@ -80,22 +78,21 @@ export function Content({
 
 const Chart = ({
   options,
-  svg,
   props,
 }: Props & {
   props: {
     title: string;
   };
 }) => {
   const [svgURL, setSvgURL] = React.useState<string>('');
-  const base64SvgBar = btoa(svg);
-  const dataUrlBar = `data:image/svg+xml;base64,${base64SvgBar}`;
 
   const isDesktop = useMediaQuery('(min-width: 768px)');
 
   const { createSvg, svgToPngURL, downloadFile } = useScreenshot();
 
   const generateImage = async () => {
+    const dataUrlBar = eCharts({ options: options });
+
     const svg = await createSvg(
       <Template data={dataUrlBar} title={props.title} />,
       {
@@ -229,7 +226,7 @@ const Template = ({
         {title}
       </p>
       {data ? (
-        <img src={data} {...props} className="w-full" alt="SVG" />
+        <Image src={data} {...props} className="w-full" alt="SVG" />
       ) : (
         'Loading...'
       )}

diff --git a/examples/data-exchange/app/[locale]/(user)/chart/page.tsx b/examples/data-exchange/app/[locale]/(user)/chart/page.tsx
@@ -1,15 +1,9 @@
 import json from '@/public/json/assam.json';
 
-import { eCharts } from '@/lib/eCharts';
 import { barOptions, lineOptions, stackedOptions } from './chart';
 import { Content } from './Content';
 
 export default async function Home() {
-  // generated SVG string in the server
-  const bar = eCharts({ options: barOptions });
-  const line = eCharts({ options: lineOptions });
-  const stacked = eCharts({ options: stackedOptions });
-
   const mapOptions = {
     mapProperty: 'dt_code',
     mapZoom: 7.9,
@@ -21,9 +15,9 @@ export default async function Home() {
   return (
     <main className="flex w-full flex-col items-center justify-center gap-2">
       <Content
-        bar={{ svg: bar, options: barOptions }}
-        line={{ svg: line, options: lineOptions }}
-        stacked={{ svg: stacked, options: stackedOptions }}
+        bar={{ options: barOptions }}
+        line={{ options: lineOptions }}
+        stacked={{ options: stackedOptions }}
         mapOptions={mapOptions}
       />
     </main>

diff --git a/examples/data-exchange/app/[locale]/dashboard/dataset/new/page-layout.tsx b/examples/data-exchange/app/[locale]/dashboard/dataset/new/page-layout.tsx
@@ -7,7 +7,6 @@ import { usePRouter } from '@/hooks/use-prouter';
 import { useMutation } from '@tanstack/react-query';
 
 import { GraphQL } from '@/lib/api';
-import { loadingStart } from '@/lib/navigation';
 import { ActionBar } from '../components/action-bar';
 import { CreateDataset } from './components/new-dataset';
 

diff --git a/examples/data-exchange/app/[locale]/dashboard/dataset/page-layout.tsx b/examples/data-exchange/app/[locale]/dashboard/dataset/page-layout.tsx
@@ -1,11 +1,8 @@
 'use client';
 
-import { graphql } from '@/gql';
 import { usePRouter } from '@/hooks/use-prouter';
-import { useQuery } from '@tanstack/react-query';
 import { Divider } from 'opub-ui';
 
-import { GraphQL } from '@/lib/api';
 import { ActionBar } from './components/action-bar';
 import { Content } from './components/content';
 

diff --git a/examples/data-exchange/app/[locale]/dashboard/dataset/page.tsx b/examples/data-exchange/app/[locale]/dashboard/dataset/page.tsx
@@ -1,8 +1,3 @@
-import { graphql } from '@/gql';
-import { Hydrate } from '@/lib';
-import { dehydrate } from '@tanstack/react-query';
-
-import { getQueryClient, GraphQL } from '@/lib/api';
 import { Page } from './page-layout';
 
 // const allDatasetsQueryDoc = graphql(`