fear: add chart

package.json

@@ -18,6 +18,7 @@
     "@reduxjs/toolkit": "^1.7.0",
     "apexcharts": "^3.35.3",
     "axios": "^0.21.1",
+    "bizcharts": "^4.1.22",
     "chakra-ui-steps": "^1.5.0",
     "feather-icons-react": "^0.5.0",
     "formik": "^2.2.9",

pages/stock-price/index.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
-import StockPriceChart from '../../src/components/Chart'
+import dynamic from 'next/dist/next-server/lib/dynamic'
 
+const StockPriceChart = dynamic(() => import('../../src/components/Chart'), {
+  ssr: false
+})
 const index = () => {
   return (
     <div>

src/components/Chart/index.jsx

@@ -11,49 +11,23 @@ import {
 } from 'mdb-react-ui-kit'
 import React from 'react'
 import { FiArrowLeft, FiArrowUp } from 'react-icons/fi'
-import { LineChart, Line, XAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, YAxis } from 'recharts'
+import { Chart, Interval, Interaction, registerInteraction, Tooltip } from 'bizcharts'
 import AppContainer from '../../../pages/appContainer'
 import CountUp from 'react-countup'
 import Link from 'next/link'
 import PriceStock from '../../../public/resource/images/512-512-p.png'
+import { AiOutlineStock } from 'react-icons/ai'
 
-const data = [
+const priceData = [
-  {
+  { year: 'تیر  1400 ', price: 350000000, price_split: '35,000,000' },
-    name: '1400 تیر ',
+  { year: 'شهریور  1400 ', price: 450000000, price_split: '45,000,000' },
-    قیمت: 350000000
+  { year: 'آبان  1400 ', price: 500000000, price_split: '50,000,000' },
-  },
+  { year: 'اسفند  1400 ', price: 550000000, price_split: '65,000,000' },
-  {
+  { year: 'اردیبهشت  1401 ', price: 650000000, price_split: '65,000,000' },
-    name: '1400 شهریور ',
+  { year: 'مهر  1401 ', price: 750000000, price_split: '75,000,000' },
-    قیمت: 450000000
+  { year: 'دی  1401 ', price: 850000000, price_split: '85,000,000' },
-  },
+  { year: 'اسفند  1401 ', price: 1000000000, price_split: '100,000,000' },
-  {
+  { year: 'اردیبهشت  1402 ', price: 1300000000, price_split: '130,000,000' }
-    name: '1400 آبان ',
-    قیمت: 500000000
-  },
-  {
-    name: '1400 اسفند ',
-    قیمت: 550000000
-  },
-  {
-    name: 'اردیبهشت 1401  ',
-    قیمت: 650000000
-  },
-  {
-    name: 'مهر  1401  ',
-    قیمت: 750000000
-  },
-  {
-    name: 'دی  1401  ',
-    قیمت: 850000000
-  },
-  {
-    name: 'اسفند  1401  ',
-    قیمت: 1000000000
-  },
-  {
-    name: 'اردیبهشت  1402  ',
-    قیمت: 1300000000
-  }
 ]
 
 const StockNews = [
@@ -62,6 +36,12 @@ const StockNews = [
   { id: 3, title: 'چرا باید سهام بیمارستان بخریم؟ ', url: '/page/news/24' }
   // { id: 4, title: ' همکاری در فروش (کسب درآمد)', url: 'https://landing.miphospital.ir/' }
 ]
+
+registerInteraction('click-active-region', {
+  start: [{ trigger: 'plot:click', action: 'active-region:show' }],
+  end: [{ trigger: 'plot:dblclick', action: 'active-region:hide' }]
+})
+
 const StockPriceChart = () => {
   return (
     <AppContainer title={'قیمت سهام بیمارستان مهر ایرانیان'}>
@@ -78,7 +58,7 @@ const StockPriceChart = () => {
               <div className='flex justify-center'>
                 <span className='blob mb-3 mt-2 ml-3' />
               </div>
-              <h3 className='text-success bk-med'>قیمت روز سهم : </h3>
+              <h3 className='text-success bk-med'>قیمت روز سهام : </h3>
               <h3 className='text-success mr-2'>
                 <CountUp start={0} end={130000000} separator=',' />
               </h3>
@@ -102,50 +82,50 @@ const StockPriceChart = () => {
           </MDBTypography>
           <span className={'blob-right ml-2 mb-2'} />
         </div>
-        <div style={{ width: '100%', height: 300 }}>
+        <div className='bk'>
-          <ResponsiveContainer>
+          <Chart className height={500} autoFit data={priceData}>
-            <LineChart
+            <Interval label="price_split" position='year*price' />
-              width={2000}
+            <Interaction type='click-active-region' />
-              height={300}
+            <Tooltip>
-              data={data}
+              {(title, items) => {
-              margin={{
+                return (
-                top: 5,
+                  <div dir='rtl' className='flex gap-x-7 gap-y-5'>
-                right: 30,
+                    <div className='flex justify-center ml-3 items-center'>
-                left: 50,
+                      <AiOutlineStock size="1.3rem"/>
-                bottom: 5
-              }}
-            >
-              <CartesianGrid strokeDasharray='3 3' />
-              <XAxis dataKey='name' />
-              <YAxis tickCount={1} />
-              <Tooltip cursor={{ stroke: 'red', strokeWidth: 2 }} />
-              <Legend />
-              <Line type='monotone' dataKey='قیمت' stroke='#82ca9d' />
-            </LineChart>
-          </ResponsiveContainer>
                     </div>
-        <div className={'mb-4 mt-3 flex align-items-center justify-content-end'}>
+                    <div className='py-2 bk flex flex-col'>
+                      <div>{items[0].data.year}</div>
+                      <div className='mt-2'>قیمت : {items[0].data.price_split}  (تومان)</div>
+                    </div>
+                  </div>
+                )
+              }}
+            </Tooltip>
+          </Chart>
+        </div>
+        <div className={'mb-4 mt-5 flex align-items-center justify-content-end'}>
           <MDBTypography variant={'h5'} className={'text-right bk-med'}>
             آخرین مطالب سهام
           </MDBTypography>
           <span className={'blob-right ml-2 mb-2'} />
         </div>
-        <MDBRow>
+        <MDBRow dir="rtl">
           {StockNews.map((item, index) => (
             <MDBCol className={'mt-2'} key={index} md={6} sm={12} lg={3}>
               <MDBCard>
                 <MDBCardBody>
                   <MDBCardImage with={50} className={'rounded-lg'} src={PriceStock} />
                   <MDBCardText className={'mt-3  bk-bold'}>
-                    <div className={'flex align-items-center justify-content-end'}>
+                    <div className={'flex align-items-center justify-content-start'}>
-                      {item.title}
                     <span className={'blob-right ml-2 mb-2'} />
+
+                      {item.title}
                     </div>
                     <br />
                     <Link href={item.url}>
                       <MDBBtn className={'border-none flex items-center'} outline>
-                        <FiArrowLeft className={'mr-2'} />
                         مشاهده{' '}
+                        <FiArrowLeft className={'mr-2'} />
                       </MDBBtn>
                     </Link>
                   </MDBCardText>