fear: add chart
This commit is contained in:
rezakarimi
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 = [
|
||||
{
|
||||
name: '1400 تیر ',
|
||||
قیمت: 350000000
|
||||
},
|
||||
{
|
||||
name: '1400 شهریور ',
|
||||
قیمت: 450000000
|
||||
},
|
||||
{
|
||||
name: '1400 آبان ',
|
||||
قیمت: 500000000
|
||||
},
|
||||
{
|
||||
name: '1400 اسفند ',
|
||||
قیمت: 550000000
|
||||
},
|
||||
{
|
||||
name: 'اردیبهشت 1401 ',
|
||||
قیمت: 650000000
|
||||
},
|
||||
{
|
||||
name: 'مهر 1401 ',
|
||||
قیمت: 750000000
|
||||
},
|
||||
{
|
||||
name: 'دی 1401 ',
|
||||
قیمت: 850000000
|
||||
},
|
||||
{
|
||||
name: 'اسفند 1401 ',
|
||||
قیمت: 1000000000
|
||||
},
|
||||
{
|
||||
name: 'اردیبهشت 1402 ',
|
||||
قیمت: 1300000000
|
||||
}
|
||||
const priceData = [
|
||||
{ year: 'تیر 1400 ', price: 350000000, price_split: '35,000,000' },
|
||||
{ year: 'شهریور 1400 ', price: 450000000, price_split: '45,000,000' },
|
||||
{ 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' },
|
||||
{ year: 'مهر 1401 ', price: 750000000, price_split: '75,000,000' },
|
||||
{ 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' }
|
||||
]
|
||||
|
||||
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 }}>
|
||||
<ResponsiveContainer>
|
||||
<LineChart
|
||||
width={2000}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 50,
|
||||
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 className='bk'>
|
||||
<Chart className height={500} autoFit data={priceData}>
|
||||
<Interval label="price_split" position='year*price' />
|
||||
<Interaction type='click-active-region' />
|
||||
<Tooltip>
|
||||
{(title, items) => {
|
||||
return (
|
||||
<div dir='rtl' className='flex gap-x-7 gap-y-5'>
|
||||
<div className='flex justify-center ml-3 items-center'>
|
||||
<AiOutlineStock size="1.3rem"/>
|
||||
</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'}>
|
||||
{item.title}
|
||||
<div className={'flex align-items-center justify-content-start'}>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user